/* ===========================================================================
* product.css -- die einzelne Produktseite.
*
* Abgegrenzt von product-card.css: Dort geht es um die Kachel in Listen und
* Rastern, hier um die Detailseite.
* ======================================================================== */
/* -- Abstand zwischen Bild- und Infospalte --------------------------------
*
* Ab Werk stehen Galerie und Angaben dicht beieinander, die Seite wirkt
* gedraengt. Der Abstand kommt an die rechte Spalte und nicht als Rand an die
* Galerie: So bleibt das Bild buendig zum Seitenraster, und auf schmalen
* Bildschirmen -- wo die Spalten untereinander stehen -- entsteht kein
* sinnloser Einzug.
*/
@media screen and (min-width: 850px) {
.product-main .product-info {
padding-left: var(--shop-space-6);
}
}
/*
* DIE LEERE DRITTE SPALTE.
*
* Die Produktzeile hat drei Spalten, nicht zwei:
*
* .product-gallery col large-6 50 %
* .product-info summary col-fit col Rest
* .col large-2 product-sidebar-small 16,7 % <- leer
*
* Die dritte ist die kleine Seitenleiste des Layouts "right-sidebar-small".
* Sie ist leer, weil kein Widget im Bereich "product-sidebar" liegt -- belegt
* aber trotzdem ihre 16,7 Prozent. Genau die fehlten den Angaben rechts in der
* Breite.
*
* Nebenbei: Die Einstellung product_layout steht zwar auf right-sidebar-small,
* eine Datei dieses Namens gibt es aber gar nicht. Flatsome faellt auf
* product.php zurueck -- und die rendert die Spalte immer.
*
* Ausgeblendet wird sie nur, SOLANGE SIE LEER IST. Vergibt jemand spaeter ein
* Widget dafuer, erscheint sie von selbst wieder. Ein pauschales display:none
* haette das Widget unsichtbar gemacht, ohne dass jemand den Grund faende.
*/
@media screen and (min-width: 850px) {
.product-main .product-sidebar-small:not(:has(.widget)) {
display: none;
}
}
/* -- Staffelpreise --------------------------------------------------------
*
* Die Tabelle selbst kommt aus dem Plugin (includes/staffelpreise.php), weil
* Preise Shop-Funktion sind und einen Theme-Wechsel ueberleben muessen. Hier
* steht ausschliesslich ihr Aussehen -- das darf mit dem Theme verschwinden.
*
* Sie haengt an woocommerce_product_thumbnails und landet damit INNERHALB des
* Galerieblocks, direkt unter den Bildern. Deshalb der Abstand nach oben und
* das clear: Der Block darueber kann umflossene Elemente enthalten.
*/
/*
* Der Abstand nach oben ist bewusst gross (64 px statt der urspruenglichen 32).
* Die Tabelle stand sonst dicht unter der Reihe der Vorschaubilder und wirkte
* wie ein Teil davon. Sie ist aber eine eigene Aussage und soll als solche
* lesbar sein -- das Briefing trennt Bereiche ueber Weissraum, nicht ueber
* Linien oder Farbflaechen.
*/
.ams-staffel {
clear: both;
margin-top: var(--shop-space-8);
}
.ams-staffel__titel {
margin: 0 0 var(--shop-space-2);
color: var(--shop-text);
font-size: 1em;
}
.ams-staffel__tabelle {
width: 100%;
margin: 0;
border-collapse: collapse;
}
/*
* Kopfzeile gedaempft, damit die Zahlen darunter fuehren. Die Vorgabe von
* WooCommerce fuer Tabellen im Shop bringt Zebrastreifen mit; die waeren bei
* fuenf Zeilen unruhiger als eine feine Linie.
*/
.ams-staffel__tabelle th {
padding: var(--shop-space-1) 0;
border-bottom: 1px solid var(--shop-border);
color: var(--shop-text-muted);
font-size: .85em;
font-weight: 400;
text-align: left;
text-transform: none;
}
.ams-staffel__tabelle td {
padding: var(--shop-space-1) 0;
border-bottom: 1px solid var(--shop-border);
background: none;
}
.ams-staffel__tabelle tr:last-child td {
border-bottom: 0;
}
/* Der Preis ist die Zahl, auf die man sieht -- er traegt das Gewicht. */
.ams-staffel__tabelle td:last-child,
.ams-staffel__tabelle th:last-child {
text-align: right;
font-weight: 700;
}
/*
* Der Hinweis nennt die Mindestmenge. Er steht bewusst hier und nicht im
* Plugin, weil er zur Darstellung der Preistabelle gehoert.
*
* Bis zum 02.09.2026 nannte er auch einen Mindestbestellwert von 50 Euro;
* damit lag die faktische Mindestmenge bei 39 statt 25 Karten. Der Wert ist
* aufgehoben, die Regel hier bleibt -- der Hinweis selbst gibt es weiter.
*/
.ams-staffel__hinweis {
margin: var(--shop-space-2) 0 0;
color: var(--shop-text-muted);
font-size: .85em;
line-height: 1.5;
}
/* -- Zeichenzaehler -------------------------------------------------------
*
* Das Element erzeugt das Plugin (assets/js/zeichenzaehler.js); hier steht nur,
* wie es aussieht. Es sitzt im selben Container wie das Eingabefeld, also
* direkt darunter -- vor dem Beschreibungstext, der die Grenze nennt.
*
* Rechtsbuendig, damit die Zahl an der Kante des Feldes steht und beim Tippen
* nicht wandert.
*/
.ams-zaehler {
display: block;
margin-top: 4px;
color: var(--shop-text-muted);
font-size: .8em;
text-align: right;
}
/*
* Ab zehn verbleibenden Zeichen faellt der Zaehler auf. Bewusst NICHT rot:
* Nichts ist falsch, der Platz wird nur knapp. Rot waere eine Fehlermeldung
* fuer einen Zustand, der keiner ist.
*/
.ams-zaehler--knapp {
color: var(--shop-text);
font-weight: 700;
}
/* -- Produktangaben im Tab "Zusaetzliche Information" ---------------------
*
* WARUM DIE GEWICHTSZEILE ANDERS AUSSAH
*
* WooCommerce baut die Werte UNTERSCHIEDLICH auf -- nachgesehen am
* 17.08.2026 am erzeugten Markup:
*
* Klappkarte A6 quer | eigene Eigenschaften
* 0,016 kg | Gewicht und Masse
*
* Die eigenen Eigenschaften laufen durch wpautop und bekommen einen Absatz,
* Gewicht und Masse nicht. Der senkrechte Abstand kam damit aus dem
* Aussenabstand des Absatzes -- und fehlte, wo kein Absatz ist. Die
* Gewichtszeile war also nicht zu knapp, die anderen waren zu hoch.
*
* Deshalb wird der Rhythmus in die ZELLE gelegt und der Absatz auf null
* gesetzt. Damit gilt er unabhaengig davon, wie WooCommerce den Wert verpackt
* -- auch fuer Zeilen, die spaeter dazukommen.
*
* Nur oben und unten: Links und rechts stehen Flatsomes Regeln
* td:first-child{padding-left:0} und td:last-child{padding-right:0}, die den
* Abstand zwischen Beschriftung und Wert regeln. Eine Kurzschreibweise haette
* die mit ueberschrieben.
*/
.woocommerce-product-attributes th,
.woocommerce-product-attributes td,
.shop_attributes th,
.shop_attributes td {
padding-top: .75em;
padding-bottom: .75em;
}
.woocommerce-product-attributes td p,
.shop_attributes td p {
margin: 0;
}
/* -- Tab-Bereich ----------------------------------------------------------
*
* Die drei Reiter -- Beschreibung, Zusaetzliche Information, Herstellerangaben
* -- haben sehr verschieden viel Inhalt. Die Herstellerangaben sind fuenf
* Zeilen, die Beschreibung drei Absaetze. Ohne Mindesthoehe springt beim
* Umschalten der halbe Seitenfuss nach oben.
*
* 260 px ist an der laengsten der drei Tafeln gemessen und nicht geraten.
* Wird eine Tafel spaeter deutlich laenger, ist das unproblematisch -- die
* Mindesthoehe ist eine Untergrenze, keine feste Hoehe.
*/
.woocommerce-tabs .tab-panels {
min-height: 260px;
}
/* -- Empfehlungen und Bildleiste: Schlitten -------------------------------
*
* Beides sind Flickity-Schlitten von Flatsome. Zwei Dinge stoeren daran.
* ------------------------------------------------------------------------ */
/*
* Kein grauer Kasten beim Anklicken.
*
* Flickity macht den Schlitten bedienbar und setzt dafuer `tabindex`. Ein
* Mausklick loest damit den Fokusrahmen des Browsers aus -- um die
* Empfehlungen und um die Bildleiste der Galerie.
*
* Flatsome raeumt ihn fuer `.flickity-enabled` bereits weg; uebrig bleibt der
* innere `.flickity-viewport`. Genau der bekommt hier dieselbe Behandlung --
* wir setzen keine neue Regel durch, wir ziehen eine bestehende nach.
*
* Der Schlitten SELBST behaelt seinen Fokus fuer die Tastatur: Ohne sichtbaren
* Fokus findet sich niemand zurecht, der ohne Maus bedient.
*/
.flickity-viewport:focus,
.flickity-viewport:focus-visible {
outline: none;
}
/*
* Die Pfeile der Empfehlungen brauchte es hier einmal: `up-sells.php` setzte
* den Schlittenstil fest auf `reveal`, und die Pfeile lagen ueber der ersten
* und letzten Empfehlung. Seit dem 26.08.2026 zeigt der Abschnitt nur noch
* eine Reihe ohne Wischen (siehe ams_kurschat24_upsell_ausgeben) -- es gibt
* keine Pfeile mehr, und die Regeln dazu sind ersatzlos entfallen.
*
* Die Fokusregel oben bleibt: Die Bildleiste der Galerie ist weiterhin ein
* Schlitten.
*/