/* Gestaltung der Shopseiten, Stand 15.10.2026.
 *
 * Diese Datei kommt NACH redesign.css und hat deshalb bei gleicher
 * Spezifitaet das letzte Wort. Sie aendert kein Markup; die eine Ausnahme ist
 * die Klasse `artnr` an der Zeile mit der Lieske-Nummer (product.inc.php),
 * weil CSS eine Tabellenzeile nicht an ihrem Text erkennen kann.
 *
 * ⚠ Sie lag bis zum 15.10.2026 als `variante-b.css` unter `html.ab-b` und
 * wurde ueber einen Schalter zugeteilt - gebaut fuer einen A/B-Versuch, der
 * nie gefahren wurde. Ralph: "Das ist sozusagen unsere neue Variante A. Es
 * gibt derzeit keine Variante B." Der Schalter ist deshalb weg, samt
 * ab_variante(), SHOP_AB_VARIANTE und der Klasse am <html>. Was ein Versuch
 * brauchen wuerde, steht in AGENTS.md - allem voran eine Warenkorb-Messung,
 * die wieder aufzeichnet.
 *
 * Gemessen an der Seite 582032 (1440 px) am 15.10.2026, vor der Aenderung:
 *   Fliesstext 965 px breit bei 14 px / 20 px Zeilenhoehe = rund 138 Zeichen
 *   je Zeile. Lesbar sind 60-80.
 */

:root {
	/* Ein Satz Werte, damit die Entscheidungen an EINER Stelle stehen. */
	--b-ton:        #008c95;   /* Marke, ab jetzt nur noch fuer Aktionen */
	--b-ton-dunkel: #00707a;
	--b-text:       #18212b;
	--b-grau:       #5a6672;
	--b-linie:      #e3e7ec;
	--b-flaeche:    #f6f8fa;
	--b-radius:     10px;
}

/* ---- Schrift ------------------------------------------------------------
 * Kein Webfont: der kostet einen Request und einen Textsprung beim Laden.
 * Die Systemschrift sieht auf jedem Geraet aus wie das Geraet - genau das
 * macht den "modernen" Eindruck aus, den Arial 14 nicht mehr hergibt.      */
body,
input, select, textarea, button {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
body { font-size: 15px; line-height: 1.6; color: var(--b-text); }

/* ---- Ueberschriften -----------------------------------------------------
 * ⚠ DIE UEBERSCHRIFTEN BLEIBEN TEAL (Vorgabe Ralph 15.10.2026: "Die
 * Ueberschrift gefaellt mir auf der alten Seite besser, sie sollte wieder in
 * der Originalfarbe sein. Das Schwarze sieht nicht so gut aus.").
 *
 * Der erste Entwurf hatte sie dunkel gesetzt, mit der Begruendung, Teal solle
 * den Aktionen vorbehalten bleiben. Die Begruendung stimmt typografisch und
 * ist trotzdem nicht die Entscheidung: die Farbe ist die Marke, und wie die
 * Seite wirken soll, entscheidet nicht die Regel. Was aus dem Entwurf bleibt,
 * ist die Groesse und der engere Satz - lange Typenbezeichnungen stehen
 * damit ruhiger.                                                            */
h1.product {
	color: var(--b-ton);
	line-height: 1.25;
	letter-spacing: -.01em;
	margin-bottom: .4rem;
}
/* ⚠ DIE SCHRIFTGROESSE KAM BIS ZUM 15.10.2026 NIE AN. redesign.css:510 setzt
 * `main h1 { font-size: 1.6em !important }`, und gegen ein !important hilft
 * nur ein !important - die Ueberschrift stand die ganze Zeit auf 22,4 px, also
 * genau wie in Fassung A. Aufgefallen ist es erst, als Ralph nach dem Umbruch
 * fragte, den er auf einem frueheren Bild gesehen hatte: den gibt es nur mit
 * der groesseren Schrift.
 *
 * Deshalb hier mit `main` und mit !important - und mit einem Zeilenmass.
 * redesign.css:516 gibt der Ueberschrift feste 850 px; bei 32 px Schrift
 * braucht ein typischer Titel rund 900 px und bricht dann so um, dass ein
 * einzelnes Wort auf der zweiten Zeile steht ("… max. 25 / W"). 42ch sind rund
 * 720 px, und der Umbruch faellt dort, wo auch jemand ihn setzen wuerde.
 *
 * ⚠ `text-wrap: balance` und `pretty` waeren das richtige Werkzeug dafuer und
 * bleiben hier wirkungslos - gemessen, nicht vermutet: beide aendern den
 * Umbruch nicht, vermutlich wegen des Kopierknopfs mitten in der
 * Ueberschrift.                                                              */
main h1.product {
	font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem) !important;
	max-width: 42ch;
}
h2.product, .wfragen h2 {
	color: var(--b-ton);
	font-size: 1.25rem;
	line-height: 1.3;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--b-linie);
	margin: 2.5rem 0 1.2rem;
}
.wfragen h3 {
	font-size: 1.02rem;
	color: var(--b-text);
	margin: 1.6rem 0 .3rem;
}

/* ---- Fliesstext ---------------------------------------------------------
 * Die Beschreibung ist EIN Block aus <strong> und Umbruechen; Absaetze gibt
 * es dort nicht. Zwei Griffe reichen trotzdem:
 *   - die Zeile begrenzen (ch rechnet in Zeichen, nicht in Pixeln)
 *   - ein <strong> hinter einer LEERZEILE ist eine Zwischenueberschrift.
 *
 * ⚠ HIER STAND "hinter einem Umbruch", UND DAS WAR FALSCH (Ralph 15.10.2026:
 * "die werden teilweise als Ueberschrift dargestellt und dann wird alles
 * falsch umgebrochen"). Der Grund ist eine Eigenschaft von CSS, die man leicht
 * vergisst: + verbindet ELEMENT-Nachbarn und ueberspringt dabei jeden Text.
 * In "Der Controller verfuegt ueber einen\n<strong>PWM-Modus</strong>, der..."
 * sind <br> und <strong> fuer CSS Nachbarn, obwohl ein halber Satz dazwischen
 * steht - und die Artikeltexte sind hart umbrochen, haben also in jedem
 * Absatz Umbrueche mitten im Satz.
 *
 * Zwei Umbrueche gibt es nur bei einer echten Leerzeile. Nachgemessen am
 * 15.10.2026 ueber alle 2.687 Artikel, deren Text Fettschrift traegt (sie
 * entsteht aus **…**, class.shopproduct.php:345):
 *
 *   Absatz beginnt fett und die Zeile endet dort  230  <- Ueberschrift
 *   Absatz beginnt fett und der Satz laeuft weiter  7  <- faelschlich fett
 *
 * An der Seite 582032 gegengeprueft: 8 von 8 Ueberschriften getroffen, 6 von
 * 6 Fehltreffern weg. Die sieben bleiben; sie als Ueberschrift zu sehen ist
 * ein Schoenheitsfehler, waehrend die alte Regel in praktisch jedem Absatz
 * einen erzeugt hat.
 *
 * ⚠ 95ch und nicht 72ch (Vorgabe Ralph 15.10.2026: "nutzt die Breite nicht
 * aus"). 72ch waren rund 560 von 975 verfuegbaren Pixeln - typografisch das
 * Optimum, aber es sah nach halb leerer Seite aus. 95ch sind rund 740 px und
 * damit drei Viertel der Breite. Der Rest bleibt stehen: eine Zeile ueber die
 * vollen 975 px waere wieder bei 125 Zeichen, also dort, wo wir angefangen
 * haben.                                                                    */
.product-description,
.wfragen p,
.wfragen h3 { max-width: 95ch; }
.product-description { color: #26313d; }
.product-description br + br + strong {
	display: block;
	margin: 2rem 0 .2rem;
	font-size: 1.08rem;
	color: var(--b-text);
}
/* Manche Beschreibungen tragen doch echte Ueberschriften ("Technische
 * Daten:"). Die standen auf margin 0 und klebten am Absatz davor. */
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5 {
	margin: 2rem 0 .4rem;
	font-size: 1.08rem;
	line-height: 1.3;
	color: var(--b-text);
}
.product-description ul,
.product-description ol { margin: .4rem 0 1.2rem 1.3rem; }
.product-description li { margin-bottom: .15rem; }

/* ---- Der Kaufbereich als Karte -----------------------------------------
 * Preis, Lieferzeit, Menge und Knopf gehoeren zusammen; heute stehen sie
 * frei im Weiss und zerfallen in Einzelzeilen.                             */
.row .pdata {
	/* ⚠ Die drei !important sind nicht Bequemlichkeit, sondern noetig:
	 * redesign.css:1192 setzt border:none !important, background:none
	 * !important und padding:0 !important auf genau dieses Element. Gegen ein
	 * !important hilft nur ein !important - die Spezifitaet entscheidet erst
	 * danach. Wer redesign.css spaeter davon befreit, kann sie hier streichen. */
	background: #fff !important;
	border: 1px solid var(--b-linie) !important;
	border-radius: var(--b-radius);
	padding: 1.25rem 1.4rem !important;
	box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
	box-sizing: border-box;
}
/* ⚠ `div.pdata div.price` statt `.pdata .price`: redesign.css:1233 traegt
 * genau diesen Selektor mit `font-size: 2em`. Solange die Regeln noch unter
 * `html.ab-b` hingen, gewann meine ueber die zusaetzliche Klasse; ohne sie
 * braucht es dieselbe Spezifitaet, und dann entscheidet die Reihenfolge -
 * diese Datei kommt spaeter. Gemessen am 15.10.2026: sonst 28 px statt 32. */
div.pdata div.price {
	font-size: 2rem;
	line-height: 1.15;
	letter-spacing: -.02em;
	/* Ziffern gleich breit: sonst springt der Preis beim Mengenwechsel. */
	font-variant-numeric: tabular-nums;
}
/* Der Bruttopreis gehoert an den Nettopreis, nicht eine Zeile darunter.
 * Die Luecke waren zweimal 6,4 px Zellpolsterung aus der Tabellenregel
 * weiter unten - die trifft jede Zeile dieser Tabelle, auch die Preiszeile
 * (gemessen 15 px, Ralph 15.10.2026: "diese Leerzeile sollte dort noch
 * raus"). Beide Haelften weg, es bleiben 2 px.                              */
.pdata tr.pricerow td { padding-bottom: 0; }
.pdata tr.pricerow + tr td { padding-top: 0; }

/* ---- Die Stammdatenzeilen (Lieske-Nr., EAN, Gewicht) --------------------
 * ⚠ HIER LAG DER FEHLER DER ERSTEN FASSUNG, und er ist lehrreich: der
 * Kaufknopf ist ein input.button, KEIN button-Element. Die Regel lautete
 * ".pdata button" und hat damit genau das Falsche getroffen - den Kaufknopf
 * gar nicht, dafuer die drei kleinen Kopierknoepfe in den Stammdaten. Die
 * wurden 41 px hoch (Polsterung 11,5/22,4 px), und weil nicht jede Zeile
 * einen Kopierknopf hat, waren die Zeilen danach unterschiedlich hoch:
 * 52 px mit, 31 px ohne.
 *
 * Dazu kam die zweite Haelfte: th trug 3 px Polsterung oben, td 5,6 px,
 * beide auf vertical-align:top - deshalb stand die fette Beschriftung
 * immer ein paar Pixel hoeher als ihr Wert. Gemeldet von Ralph am
 * 15.10.2026, beides gemessen und nicht geraten.                           */
.pdata table th,
.pdata table td {
	padding: .4rem .5rem .4rem 0;
	vertical-align: middle;
	line-height: 1.35;
	font-size: 100% !important;
}
.pdata table th { font-weight: 600; }
.pdata .material-icons { font-size: 18px; line-height: 1; vertical-align: middle; }
.pdata button.copybtn {
	padding: .15rem .3rem;
	line-height: 1;
	vertical-align: middle;
	border-radius: 4px;
}

/* ---- Die Lieske-Nummer -------------------------------------------------
 * Sie ist die Nummer, mit der bei uns bestellt wird, und stand bisher wie
 * jede andere Zeile da (Vorgabe Ralph 15.10.2026: "sollte deutlicher
 * markiert sein, sodass man das gleich sieht").
 *
 * ⚠ Dafuer gibt es als einzige Stelle einen Eingriff ins Markup: eine Klasse
 * an der Zeile (product.inc.php). Ueber den TEXT findet CSS sie nicht, und
 * ueber die Position auch nicht - die Datenblattzeile darueber gibt es nicht
 * bei jedem Artikel. Die Klasse allein aendert nichts an Fassung A.         */
.pdata tr.artnr th,
.pdata tr.artnr td { background: rgba(0,140,149,.07); }
/* Die Toenung reicht links und rechts ueber die Zelle hinaus, damit die
 * Beschriftung nicht an der Kante der Flaeche klebt (Ralph 15.10.2026).
 * ⚠ Ueber den Schlagschatten und nicht ueber Polsterung: Polsterung in der
 * Zelle wuerde den Text verschieben, und dann staende die Beschriftung
 * dieser einen Zeile um sechs Pixel eingerueckt neben den anderen.          */
.pdata tr.artnr th { box-shadow: -11px 0 0 0 rgba(0,140,149,.07); }
.pdata tr.artnr td { box-shadow:  11px 0 0 0 rgba(0,140,149,.07); }
.pdata tr.artnr th { color: var(--b-text); }
.pdata tr.artnr td {
	font-weight: 700;
	font-size: 1.05rem !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}
/* Kopierknopf und WaWi-Schaltflaeche sollen davon nichts abbekommen. */
.pdata tr.artnr td a,
.pdata tr.artnr td button { font-weight: 400; font-size: .8rem !important; }

/* ---- Staffelpreise ------------------------------------------------------
 * Sie standen ohne Absetzung unter den Stammdaten und lasen sich wie deren
 * Fortsetzung (Vorgabe Ralph 15.10.2026). Eigener Block auf heller Flaeche,
 * die Kopfzeile aufrecht statt kursiv und als Beschriftung gesetzt.        */
.pdata div.staffeln {
	margin-top: 1.2rem;
	padding: .85rem 1rem .6rem;
	background: var(--b-flaeche);
	border: 1px solid var(--b-linie);
	border-radius: 8px;
}
.pdata div.staffeln > b {
	display: block;
	margin-bottom: .4rem;
	font-size: .95rem;
	color: var(--b-text);
}
.pdata table.staffeln th {
	font-style: normal;
	font-weight: 600;
	font-size: .78rem !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--b-grau);
	border-bottom: 1px solid var(--b-linie);
	padding-bottom: .3rem;
}
.pdata table.staffeln td {
	font-variant-numeric: tabular-nums;
	padding-top: .3rem;
	padding-bottom: .3rem;
}
.pdata table.staffeln tr + tr td { border-top: 1px solid rgba(24,33,43,.06); }

/* ---- Knoepfe ------------------------------------------------------------
 * Groesser, ruhiger, mit sichtbarem Fokus. Der Fokusring ist kein Schmuck:
 * ohne ihn ist die Seite mit der Tastatur nicht bedienbar.                  */
/* ⚠ `td.warenkorbput input.button` (redesign.css:1140) setzt den Radius auf
 * 3 px und ist spezifischer als `.pdata input.button`. Deshalb steht er hier
 * mit in der Liste. Was dort mit !important steht - Breite, Hoehe, Farbe,
 * Schriftgroesse - bleibt bewusst unangetastet. */
.pdata input.button,
.pdata td.warenkorbput input.button,
a.breq, .button {
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: .01em;
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.pdata input.button { padding: .72rem 1.4rem; font-size: 1rem; }
.pdata input.button:hover { background: var(--b-ton-dunkel); }
.pdata input.button:active { transform: translateY(1px); }
:focus-visible {
	outline: 3px solid rgba(0,140,149,.45);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Lieferzeit und ihr Info-Zeichen ------------------------------------
 * Das Zeichen haengt als eigenes <a> hinter dem Text und ist in B auf eine
 * eigene Zeile gerutscht (15 px Schrift statt 14 - die Zeile wurde zu lang
 * fuer die 485-px-Spalte). inline-flex macht Text und Zeichen zu zwei Teilen
 * EINER Zeile: der Text bricht in sich um, das Zeichen bleibt daneben
 * stehen. Ohne Eingriff ins Markup geht es nicht anders - ein geschuetztes
 * Leerzeichen koennte nur die Vorlage setzen.
 *
 * Die drei Klassen sind alle, die es gibt: shopproduct.php vergibt avL
 * (Lager), avN (nicht), avV (Vorlieferant).                                 */
.pdata .avL,
.pdata .avN,
.pdata .avV {
	display: inline-flex;
	align-items: center;
	gap: .35em;
}

/* ---- Zusatzinformationen unter dem Artikel ------------------------------ */
#artzusatzinfo table { border-collapse: collapse; width: 100%; max-width: 95ch; }
#artzusatzinfo tr:nth-child(even) td { background: var(--b-flaeche); }
#artzusatzinfo td { border-bottom: 1px solid var(--b-linie); }

/* ---- Bilder -------------------------------------------------------------
 * Die Vorschaubilder stehen heute als nackte 80er-Kacheln da.              */
/* ⚠ `div.` davor: magicscroll.css und magiczoomplus.css werden NACH dieser
 * Datei geladen; bei gleicher Spezifitaet gewinnen sie. Gemessen am
 * 15.10.2026: ohne den Zusatz verschwindet der Rahmen der Vorschaubilder. */
div.imgscroll img, div.MagicScroll img {
	border: 1px solid var(--b-linie);
	border-radius: 8px;
	background: #fff;
}
.images a.MagicZoomPlus img { border-radius: var(--b-radius); }

/* ---- Die drei Verweise unter dem Artikel --------------------------------
 * ⚠ redesign.css gibt ihnen float:left, width:30% und content-box. Drei mal
 * 30 % plus je 20 px Polsterung und 10 px Rand sind mehr als 100 %, also ist
 * der dritte umgebrochen und sie standen versetzt (Ralph 15.10.2026: "so
 * durcheinander"). flex teilt den Platz zu dritt auf; wird der Text zu lang,
 * wird der Kasten hoeher statt umzubrechen.
 *
 * Der Vollkreis-Radius faellt dabei weg: an einem zweizeiligen Kasten sieht
 * eine Pillenform falsch aus.                                               */
.productlinks {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	overflow: visible;
}
.productlinks a {
	flex: 1 1 0;
	min-width: 14rem;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: .7rem 1rem;
	border: 1px solid var(--b-linie);
	border-radius: 12px;
	background: var(--b-flaeche);
	color: var(--b-text);
	text-decoration: none;
	line-height: 1.35;
}
.productlinks a:hover { border-color: var(--b-ton); color: var(--b-ton); }

/* ---- Telefon ------------------------------------------------------------ */
@media (max-width: 760px) {
	/* Der Kaufknopf soll erreichbar bleiben, wenn jemand die Beschreibung
	 * liest. position:sticky braucht keinen Eingriff ins Markup und keinen
	 * Platz - anders als eine fest eingeblendete Leiste. */
	.row .pdata {
		position: sticky;
		top: .5rem;
		padding: 1rem !important;
	}
	body { font-size: 16px; }  /* kein Zoom beim Antippen von Feldern */
	.product-description, .wfragen p,
	.wfragen h3 { max-width: none; }
	.productlinks a { min-width: 100%; }
}

/* ---- Bewegung ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}