/* ============================================================
   Alles, was der Entwurf nicht zeigt.

   Die drei entworfenen Seiten sind Startseite, Kategorie und Produkt.
   Ein Shop besteht aber aus mehr: Inhaltsseiten, Rechtstexte, Blog,
   Suche, Warenkorb, Kasse, Konto, Fehlerseite. Diese Datei bringt sie
   in dasselbe System — keine neuen Farben, keine neuen Schriftgrade,
   keine neuen Formen.

   Die Regeln stammen aus den geklärten Kapiteln der Brand Identity:

     Kapitel 03  Der Kontrast gehört den Produkten. Deshalb keine
                 Schatten; abgegrenzt wird über Kontur.
     Kapitel 04  Teal heißt „hier kannst du handeln", Grün heißt „es
                 ist bereits passiert". Grün erscheint nie auf einem
                 Knopf. Fließtext ist N70, Hilfstext N50.
     Kapitel 05  17 px Fließtext, Zeilen 1,6, höchstens 74 Zeichen.
                 Die Monospace ist Codes vorbehalten — Bestellnummer,
                 Artikelnummer —, nicht Stilmittel.
     Kapitel 09  Radius nur, wo der Entwurf ihn setzt (--rundung).
                 Rund ist im Logo nur, wo eine Linie aufhört.

   Die Tokens kommen aus basis.css und werden hier nur benutzt.
   ============================================================ */


/* ---------------------------------------------------------- Grundgerüst
   Der Rahmen jeder Seite, die kein Shop-Raster ist.

   Dasselbe Feld wie auf der Startseite: 1560 px, 44 px Rand. Es war
   einmal schmaler, damit der Text nicht zu breit läuft — das aber
   regelt `.is-text` mit seinen 74 Zeichen ohnehin, und die schmalere
   Hülle ließ jede Unterseite gegenüber der Startseite einrücken. */

.inhaltsseite{background:var(--n00);padding-bottom:120px}
.is-innen{max-width:1560px;margin:0 auto;padding:0 44px}
.is-kopf{margin:26px 0 40px;padding-bottom:26px;border-bottom:1px solid var(--n10)}
.is-kopf .titel{margin:0;font:600 clamp(28px,3.4vw,40px)/1.12 Archivo,sans-serif;
  font-stretch:100%;letter-spacing:-.02em;color:var(--n90)}
.is-kopf .satz{margin:14px 0 0;max-width:74ch;color:var(--n60)}
.is-kopf .meta{margin:12px 0 0;font:400 14px/1.5 'IBM Plex Mono',monospace;color:var(--n50)}

@media(max-width:760px){
  .is-innen{padding:0 20px}
  .inhaltsseite{padding-bottom:72px}
}


/* ---------------------------------------------------------- Bausteine im Text
   Inhaltsseiten sind Text — aber nicht nur. Diese vier Bausteine
   dürfen im Seiteninhalt stehen und brechen aus der Lesespalte aus,
   weil ein Bild in 74 Zeichen Breite nichts zeigt.

   Sie sind bewusst schlicht gehalten und tragen keine eigene Farbe:
   der Kontrast gehört den Produkten (Kapitel 03). */

/* ---------------------------------------------------------- Zwei Spalten
   74 Zeichen gelten fuer FLIESSTEXT — fuer einen Absatz, den jemand
   Zeile fuer Zeile liest. Sie gelten nicht fuer eine Aufzaehlung aus
   sieben Arbeitsschritten, fuenf Fragen oder sechs Kundengruppen.
   Solche Bloecke untereinander in eine schmale Spalte zu stellen
   macht die Seite dreimal so lang und laesst rechts das halbe Feld
   leer.

   Deshalb: der Absatz bleibt schmal, die Aufzaehlung geht in die
   Breite. */
.is-text .is-zwei,
.is-text .is-drei{margin:34px 0 0;max-width:1180px;display:grid;gap:32px 44px}
.is-text .is-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.is-text .is-drei{grid-template-columns:repeat(3,minmax(0,1fr))}

.is-text .is-zwei > div > :first-child,
.is-text .is-drei > div > :first-child{margin-top:0}
.is-text .is-zwei h3,
.is-text .is-drei h3{margin:0 0 8px;
  font:600 18px/1.35 Archivo,sans-serif;color:var(--n90)}
.is-text .is-zwei p,
.is-text .is-drei p{margin:0;font-size:16px;line-height:1.6}
.is-text .is-zwei p + p,
.is-text .is-drei p + p{margin-top:10px}

/* Eine Nummer statt einer Wabe, wo die Reihenfolge zaehlt. */
.is-text .gezaehlt{counter-reset:iz}
.is-text .gezaehlt > div{position:relative;padding-top:26px;
  border-top:1px solid var(--n20)}
.is-text .gezaehlt > div::before{counter-increment:iz;
  content:counter(iz,decimal-leading-zero);
  position:absolute;top:-1px;left:0;padding-right:12px;
  transform:translateY(-50%);background:var(--n00);
  font:500 13px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--teal-d)}

/* Zwei Handlungstafeln nebeneinander. */
.is-text .is-tafeln{margin:38px 0 0;max-width:1180px;display:grid;gap:20px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.is-text .is-tafeln .is-tafel{margin:0;max-width:none;
  display:flex;flex-direction:column}
.is-text .is-tafeln .is-tafel p{margin-bottom:18px}
.is-text .is-tafeln .is-tafel .handlung{margin-top:auto;align-self:flex-start}

/* Ein Bild oder ein Film mit Bildunterschrift. */
/* `wpautop` setzt zwischen zwei Blockelementen gern ein leeres <p>.
   In einem Raster wird daraus eine belegte Zelle — der Text hinter
   dem Film landete dadurch eine Reihe tiefer statt daneben. */
.is-text p:empty{display:none}

.is-text .is-figur{margin:34px 0 0;max-width:1180px}
/* Nicht jede Vorlage trägt diese Breite. Ein Bild über seine Auflösung
   hinaus zu ziehen macht es nicht größer, nur weicher. */
.is-text .is-figur.klein{max-width:520px}
.is-text .is-figur img,
.is-text .is-figur video{display:block;width:100%;height:auto;
  border-radius:var(--rundung);background:var(--n05)}
.is-text .is-figur figcaption{margin:10px 0 0;
  font:400 13.5px/1.55 Archivo,sans-serif;color:var(--n50)}

/* Zwei Bilder nebeneinander. */
.is-text .is-medien{margin:34px 0 0;max-width:1180px;display:grid;gap:20px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
/* Im Paar bekommen beide Bilder dasselbe Verhältnis. Sonst steht
   neben einem hochkanten Bild ein halber Meter Weiß, und die Reihe
   franst unten aus. Beschnitten wird mittig — die Vorlagen sind
   Werkstückaufnahmen, das Teil steht in der Mitte. */
.is-text .is-medien img{display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--rundung);background:var(--n05)}
.is-text .is-medien figcaption{grid-column:1 / -1;margin:0;
  font:400 13.5px/1.55 Archivo,sans-serif;color:var(--n50)}

/* Ein hochkantes Werkstattvideo neben seinem Text. Der Film läuft
   stumm und in Schleife — er zeigt einen Handgriff, er erzählt
   nichts. Deshalb auch keine Bedienelemente. */
.is-text .is-film{margin:34px 0 0;max-width:1180px;
  display:grid;gap:26px 34px;align-items:center;
  grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.is-text .is-film video{display:block;width:100%;height:auto;
  border-radius:var(--rundung);background:var(--n05)}
.is-text .is-film p{margin:0}
.is-text .is-film p + p{margin-top:14px}

/* Die Handlungstafel: ein Satz und ein Weg. Sie steht am Ende eines
   Abschnitts, nicht mitten im Gedanken. */
.is-text .is-tafel{margin:38px 0 0;padding:24px 26px 26px;max-width:74ch;
  background:var(--n05);border-radius:var(--rundung)}
.is-text .is-tafel > b{display:block;margin:0 0 8px;
  font:600 17px/1.35 Archivo,sans-serif;color:var(--n90)}
.is-text .is-tafel p{margin:0;font-size:16px;color:var(--n60)}
/* Der Knopf ist ein <a> und fängt sich sonst die Linkfarbe des
   Fließtextes ein — Teal auf Teal, unlesbar. */
.is-text .is-tafel .handlung{margin-top:18px;color:#000;text-decoration:none}
.is-text .is-tafel .handlung:hover,
.is-text .is-tafel .handlung:focus-visible{color:var(--teal-l);text-decoration:none}
.is-text .is-tafel .zweitrangig{color:var(--n90)}
.is-text .is-tafel .zweitrangig:hover,
.is-text .is-tafel .zweitrangig:focus-visible{color:var(--n00)}

@media(max-width:1000px){
  .is-text .is-drei{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .is-text .is-zwei,
  .is-text .is-drei,
  .is-text .is-tafeln{grid-template-columns:1fr;gap:26px}
  .is-text .is-medien{grid-template-columns:1fr}
  .is-text .is-film{grid-template-columns:1fr;gap:20px}
  .is-text .is-film video{max-width:260px}
  .is-text .is-tafel{padding:20px 18px 22px}
}


/* ---------------------------------------------------------- Formularfelder
   Eingabefelder, Dateiwähler, Honigtopf und Datenschutzzeile. Das
   `pr-`-Präfix ist historisch — die Felder standen zuerst nur im
   Anfrageformular der Produktseite. Gebraucht werden sie inzwischen
   auch auf der Reparaturseite, und die lädt produkt.css nicht. */

.pr-felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pr-feld{display:block;min-width:0}
.pr-feld.breit{grid-column:1 / -1}
.pr-feld > span{display:block;margin-bottom:7px;
  font:500 12px/1 Archivo,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--n50)}
/* Alle Eingabearten, nicht nur `text`: die E-Mail- und Telefonfelder
   des Anfrageformulars standen sonst in der Fassung des Browsers da. */
.pr-feld input[type=text],.pr-feld input[type=email],
.pr-feld input[type=tel],.pr-feld input[type=url],
.pr-feld select,.pr-feld textarea{-webkit-appearance:none;appearance:none;
  display:block;width:100%;margin:0;border:0;border-radius:var(--rundung);
  background:var(--n00);box-shadow:inset 0 0 0 1px var(--n20);
  padding:0 14px;height:46px;
  font:400 15px/46px Archivo,sans-serif;color:var(--n90)}
.pr-feld textarea{height:auto;min-height:84px;padding:12px 14px;line-height:1.5;
  resize:vertical}

/* Das eigene Dreieck, weil `appearance:none` das des Browsers nimmt. */
.pr-feld select{padding-right:38px;cursor:pointer;line-height:normal;
  background-image:linear-gradient(45deg,transparent 50%,var(--n50) 50%),
                   linear-gradient(135deg,var(--n50) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;
  background-repeat:no-repeat}
.pr-feld input::placeholder,.pr-feld textarea::placeholder{color:var(--n40)}
.pr-feld input:focus,.pr-feld select:focus,.pr-feld textarea:focus{outline:none;
  box-shadow:inset 0 0 0 2px var(--teal-d)}
/* Versal ist die BESCHRIFTUNG, nicht alles, was im Feld steht: `.wink`
   und der Dateiwaehler sind ebenfalls direkte Kinder und erbten sonst
   Grossschreibung und Sperrung mit. */
.pr-feld .wink{display:block;margin-top:6px;
  font:400 12px/1.45 Archivo,sans-serif;color:var(--n50)}
.pr-feld .wink,.pr-feld .pr-datei{text-transform:none;letter-spacing:normal}
/* Aus demselben Grund noch einmal das `display`: `.pr-feld > span` ist
   spezifischer als `.pr-datei` und machte den Dateiwaehler zum Block. Dann
   greift sein `align-items` nicht, und Zeichen und Text sassen oben im Feld
   statt mittig. */
.pr-feld .pr-datei{display:flex}

/* Der Dateiwähler des Browsers lässt sich nicht gestalten — also
   liegt er unsichtbar unter einer eigenen Fläche in derselben
   Fassung wie die übrigen Felder. */
.pr-datei{position:relative;display:flex;align-items:center;gap:12px;
  height:46px;padding:0 14px;border-radius:var(--rundung);
  background:var(--n00);box-shadow:inset 0 0 0 1px var(--n20);cursor:pointer}
.pr-datei input{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer}
.pr-datei svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--n50);
  stroke-width:1.6;stroke-linecap:square}
.pr-datei span{font:400 14px/1 Archivo,sans-serif;color:var(--n50)}
.pr-datei:hover{box-shadow:inset 0 0 0 1px var(--n90)}
.pr-datei:focus-within{box-shadow:inset 0 0 0 2px var(--teal-d)}

/* Was das Feld annimmt, steht darunter. Sonst erfaehrt man die 8 MB erst
   vom Server. Gleiche Fassung wie `.wink`. */
.pr-feld .pr-datei-hinweis{display:block;margin-top:6px;
  font:400 12px/1.45 Archivo,sans-serif;color:var(--n50);
  text-transform:none;letter-spacing:normal}

/* Die gewaehlten Dateien (datei.js): Vorschaubild, Name, Groesse, Kreuz.
   Ohne die Liste schreibt der Browser den Dateinamen in das unsichtbare
   Feld, und die Auswahl scheint verschluckt. */
.pr-feld .pr-dateien{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;
  text-transform:none;letter-spacing:normal}
.pr-dateien li{display:flex;align-items:center;gap:12px;padding:8px 10px;
  border-radius:var(--rundung);background:var(--n05);cursor:default}
.pr-dateien li.zu-gross{box-shadow:inset 0 0 0 1px var(--rot)}
.pr-dateien img{flex:none;width:44px;height:44px;object-fit:cover;
  border-radius:4px;background:var(--n10)}
.pr-dateien .name{flex:1 1 auto;min-width:0;
  font:400 14px/1.3 Archivo,sans-serif;color:var(--n90);overflow-wrap:anywhere}
.pr-dateien .groesse{display:block;margin-top:2px;
  font:400 12px/1.3 Archivo,sans-serif;color:var(--n50)}
.pr-dateien li.zu-gross .groesse{color:var(--rot)}
.pr-dateien button{flex:none;width:32px;height:32px;border:0;border-radius:50%;
  background:none;color:var(--n50);font:400 22px/1 Archivo,sans-serif;cursor:pointer}
.pr-dateien button:hover{background:var(--n10);color:var(--n90)}
.pr-dateien button:focus-visible{outline:2px solid var(--teal-d);outline-offset:1px}
.pr-feld .pr-datei-meldung{display:block;margin-top:6px;
  font:400 13px/1.45 Archivo,sans-serif;color:var(--rot);
  text-transform:none;letter-spacing:normal}

.pr-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pr-datenschutz{margin:16px 0 0;
  font:400 12.5px/1.6 Archivo,sans-serif;color:var(--n60)}
.pr-datenschutz a{color:var(--teal-d)}

@media(max-width:760px){
  .pr-felder{grid-template-columns:1fr}
}


/* ---------------------------------------------------------- Fließtext
   Gilt für Inhaltsseiten, Rechtstexte, Beiträge und die Beschreibung
   im Blockeditor. Ein Rechtstext ist lang und wird im Zweifel am Handy
   gelesen — deshalb dieselben Maße wie im Entwurf, nicht enger. */

/* Die Lesebreite gehört an den TEXT, nicht an seine Hülle. Lag sie
   an der Hülle, konnte ein Bild darin nie breiter werden als eine
   Textzeile — und ein Bild in 74 Zeichen Breite zeigt nichts. */
.is-text{color:var(--n70)}
.is-text > p,.is-text > h2,.is-text > h3,.is-text > h4,
.is-text > ul,.is-text > ol,.is-text > blockquote,
.is-text > table,.is-text > pre,.is-text > hr,
.is-text > .wp-block-quote{max-width:74ch}
.is-text > * + *{margin-top:18px}
.is-text p{margin:0;line-height:1.6}
.is-text h2{margin:44px 0 0;font:600 clamp(22px,2.4vw,28px)/1.2 Archivo,sans-serif;
  letter-spacing:-.02em;color:var(--n90)}
.is-text h3{margin:32px 0 0;font:600 20px/1.3 Archivo,sans-serif;color:var(--n90)}
.is-text h4{margin:26px 0 0;font:600 17px/1.35 Archivo,sans-serif;color:var(--n90)}
.is-text strong,.is-text b{color:var(--n90);font-weight:600}

/* Der einzige Teal, der auf Weiß Schrift sein darf (Kapitel 04). */
.is-text a{color:var(--teal-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.is-text a:hover{text-decoration-thickness:2px}

.is-text ul,.is-text ol{margin:0;padding-left:22px}
.is-text li + li{margin-top:8px}
.is-text ul{list-style:none;padding-left:0}
.is-text ul li{position:relative;padding-left:22px}
/* Der Aufzählungsstrich ist eine Linie, kein Punkt — dieselbe Haarlinie
   wie überall, nur kurz. */
.is-text ul li::before{content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--teal)}
.is-text ol{list-style:decimal}

.is-text blockquote{margin:0;padding:2px 0 2px 20px;border-left:2px solid var(--teal);
  color:var(--n90)}
.is-text code,.is-text kbd{font:400 15px/1.5 'IBM Plex Mono',monospace;
  background:var(--n05);padding:2px 6px}
.is-text pre{background:var(--n05);padding:18px 20px;overflow-x:auto;
  font:400 14px/1.6 'IBM Plex Mono',monospace}
.is-text img{max-width:100%;height:auto}
.is-text hr{border:0;border-top:1px solid var(--n10);margin:36px 0}

.is-text table{width:100%;border-collapse:collapse;font-size:16px}
.is-text th{text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--n20);
  font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n50)}
.is-text td{padding:12px 14px 12px 0;border-bottom:1px solid var(--n10);
  vertical-align:top;color:var(--n60)}
.is-text td:first-child{color:var(--n90)}

/* Zahlen, die abgetippt werden — Bestellnummer, Artikelnummer, FIN.
   Gleiche Zeichenbreite ist hier eine echte Hilfe, nicht Zierde. */
.code,.is-text .code{font:500 15px/1.5 'IBM Plex Mono',monospace;color:var(--n90)}


/* ---------------------------------------------------------- Beitragsliste
   Blog, Archiv und Suche. Eine Liste, keine Karten: es sind Texte, und
   ein Rahmen um einen Text macht ihn nicht lesbarer. */

.is-liste{list-style:none;margin:0;padding:0;max-width:74ch}
.is-liste li{padding:26px 0;border-bottom:1px solid var(--n10)}
.is-liste li:first-child{padding-top:0}
.is-eintrag-titel{margin:0;font:600 21px/1.3 Archivo,sans-serif;letter-spacing:-.01em}
.is-eintrag-titel a{color:var(--n90);text-decoration:none}
.is-eintrag-titel a:hover{color:var(--teal-d)}
.is-eintrag-meta{margin:6px 0 0;font:400 14px/1.5 'IBM Plex Mono',monospace;color:var(--n50)}
.is-eintrag-text{margin:12px 0 0;color:var(--n60)}
.is-eintrag-weiter{display:inline-block;margin-top:12px;color:var(--teal-d);
  font-weight:500;text-decoration:none}
.is-eintrag-weiter:hover{text-decoration:underline;text-underline-offset:3px}

.is-blaettern{display:flex;gap:14px;margin-top:44px;
  font:500 14px/1 'IBM Plex Mono',monospace}
.is-blaettern a,.is-blaettern span{padding:11px 15px;border:1px solid var(--n20);
  color:var(--n70);text-decoration:none}
.is-blaettern a:hover{border-color:var(--teal);color:var(--teal-d)}
.is-blaettern .current{background:var(--teal);border-color:var(--teal);color:#000}

.is-leer{max-width:74ch;color:var(--n60)}
.is-leer .gross{font:600 clamp(21px,2.4vw,26px)/1.25 Archivo,sans-serif;
  color:var(--n90);margin:0 0 12px}


/* ---------------------------------------------------------- Suchfeld */

.is-suche{display:flex;gap:0;max-width:520px;margin-top:22px}
.is-suche input[type=search]{flex:1;min-width:0;height:46px;padding:0 14px;
  border:1px solid var(--n20);border-right:0;background:var(--n00);color:var(--n90);
  font:400 16px/1 Archivo,sans-serif}
.is-suche input[type=search]:focus{outline:0;border-color:var(--teal);
  box-shadow:inset 0 0 0 1px var(--teal)}
.is-suche button{height:46px;padding:0 20px;border:0;background:var(--teal);color:#000;
  font:600 15px/1 Archivo,sans-serif;cursor:pointer}
.is-suche button:hover{background:var(--teal-h)}


/* ---------------------------------------------------------- Kommentare
   Selten gebraucht, aber wenn, dann nicht aus einem fremden Baukasten. */

.kommentare{margin-top:64px;padding-top:36px;border-top:1px solid var(--n10);max-width:74ch}
.kommentare > h2{margin:0 0 24px;font:600 21px/1.3 Archivo,sans-serif;color:var(--n90)}
.kommentar-liste{list-style:none;margin:0;padding:0}
.kommentar{padding:22px 0;border-bottom:1px solid var(--n10)}
.kommentar-kopf{display:flex;align-items:center;gap:12px}
.kommentar-kopf img{border-radius:50%}
.kommentar-name{display:block;font-weight:600;color:var(--n90)}
.kommentar-kopf time{display:block;font:400 13px/1.5 'IBM Plex Mono',monospace;color:var(--n50)}
.kommentar-wartet{margin-left:auto;font-size:14px;color:var(--n50)}
.kommentar-text{margin-top:12px;color:var(--n70)}
.kommentar-fuss{margin-top:10px;font-size:14px}
.kommentar-fuss a{color:var(--teal-d);text-decoration:none;margin-right:12px}


/* ============================================================
   WooCommerce: Warenkorb, Kasse, Konto

   Der Entwurf zeigt diese Seiten nicht. Sie erben deshalb konsequent
   die Bauteile, die er festlegt: den Knopf `.handlung`, die
   Formularfelder mit `.rahmen`, die Haarlinien, die Tabellenschrift.
   ============================================================ */

.woocommerce-page .inhaltsseite{padding-bottom:120px}

/* --- Meldungen ---------------------------------------------------
   Grün bestätigt, Rot meldet einen Fehler, Amber warnt. Keine
   Hintergrundtönung, sondern eine farbige Kante links: so funktioniert
   die Meldung auch auf der dunklen Werkstatt-Fläche (Kapitel 04). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  list-style:none;margin:0 0 26px;padding:16px 20px;
  background:var(--n05);border:0;border-left:3px solid var(--n30);border-radius:0;box-shadow:none;
  font:400 15px/1.5 Archivo,sans-serif;color:var(--n70)}
/* WooCommerce setzt vor jede Meldung ein Zeichen aus seiner Symbolschrift
   (absolut, 1,5em von links) und rechnet dafuer 3,5em Innenabstand ein. Mit
   unserem Abstand saesse es im Text — also weg damit. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{content:none;display:none}
.woocommerce-error li{display:block;width:100%}
.woocommerce-message{border-left-color:var(--gruen)}
.woocommerce-info{border-left-color:var(--teal)}
.woocommerce-error{border-left-color:var(--rot);color:var(--n90)}
.woocommerce-error li + li{margin-top:6px}
.woocommerce-message .button,
.woocommerce-info .button{float:none;margin:0 0 0 auto;height:40px;padding:0 16px;
  font:600 14px/40px Archivo,sans-serif;text-decoration:none}

/* WooCommerce baut seine Meldungen seit einiger Zeit als „notice banner"
   (Rahmen, Ecken, Zeichen als SVG davor). Hier gilt die Kante links wie
   oben — Rahmen weg, Zeichen weg, Knopf rechts in derselben Zeile. */
.woocommerce-notices-wrapper .wc-block-components-notice-banner,
.wc-block-components-notice-banner.woocommerce-message,
.wc-block-components-notice-banner.woocommerce-info,
.wc-block-components-notice-banner.woocommerce-error{
  display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;
  margin:0 0 26px;padding:16px 20px;border:0;border-left:3px solid var(--n30);
  border-radius:0;box-shadow:none;background:var(--n05);
  font:400 15px/1.5 Archivo,sans-serif;color:var(--n70)}
.woocommerce-notices-wrapper .is-success{border-left-color:var(--gruen)}
.woocommerce-notices-wrapper .is-info{border-left-color:var(--teal)}
.woocommerce-notices-wrapper .is-error{border-left-color:var(--rot);color:var(--n90)}
.woocommerce-notices-wrapper .wc-block-components-notice-banner > svg{display:none}
.woocommerce-notices-wrapper .wc-block-components-notice-banner__content{
  flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:0}
.woocommerce-notices-wrapper .wc-block-components-notice-banner__content .button,
.woocommerce-notices-wrapper .wc-block-components-notice-banner .button{
  float:none;margin:0 0 0 auto;height:40px;padding:0 16px;
  font:600 14px/40px Archivo,sans-serif;text-decoration:none}
.woocommerce-notices-wrapper ul{margin:0;padding:0;list-style:none}

/* --- Tabellen (Warenkorb, Bestellübersicht, Konto) --------------- */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;
  border:0;margin:0 0 32px;font-size:16px}
.woocommerce table.shop_table th{text-align:left;padding:0 14px 12px 0;
  border-bottom:1px solid var(--n20);
  font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n50)}
.woocommerce table.shop_table td{padding:18px 14px 18px 0;
  border-bottom:1px solid var(--n10);vertical-align:top;color:var(--n70)}
.woocommerce table.shop_table td.product-name a{color:var(--n90);
  font-weight:600;text-decoration:none}
.woocommerce table.shop_table td.product-name a:hover{color:var(--teal-d)}
.woocommerce table.shop_table img{width:76px;height:auto}
.woocommerce table.shop_table .amount{color:var(--n90);font-weight:600;
  font-variant-numeric:tabular-nums}

/* Der Steuer- und Versandhinweis an jedem Preis (§ 3 PAngV). Er ist
   klein, aber Pflicht — deshalb N50 und nicht N40, das wäre unter der
   Lesbarkeitsschwelle. */
.woocommerce .tax_label,
.woocommerce small.includes_tax,
.carbon-abgaben{display:block;font-size:14px;color:var(--n50);line-height:1.5}

/* --- Mengenfeld -------------------------------------------------- */
.woocommerce .quantity input[type=number]{width:76px;height:44px;padding:0 10px;
  border:1px solid var(--n20);background:var(--n00);color:var(--n90);
  font:500 16px/1 Archivo,sans-serif;font-variant-numeric:tabular-nums}
.woocommerce .quantity input[type=number]:focus{outline:0;border-color:var(--teal);
  box-shadow:inset 0 0 0 1px var(--teal)}

/* --- Knöpfe ------------------------------------------------------
   WooCommerce setzt überall `.button`. Statt dessen Aussehen zu
   überschreiben, bekommt es hier dieselbe Form wie `.handlung`. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;border:0;border-radius:0;
  background:var(--teal);color:#000;cursor:pointer;
  font:600 15px/1 Archivo,sans-serif;letter-spacing:.01em;text-decoration:none;
  transition:background .14s ease}
.woocommerce .button:hover{background:var(--teal-h)}
.woocommerce .button:active{background:var(--teal-a)}
.woocommerce .button:disabled,
.woocommerce .button.disabled{background:var(--n20);color:var(--n50);cursor:not-allowed}

/* Zweitrangig: Kontur statt Fläche — eine Handlung, aber nicht DIE. */
.woocommerce a.button.wc-backward,
.woocommerce button[name=update_cart]{background:transparent;color:var(--n90);
  box-shadow:inset 0 0 0 1px var(--n20)}
.woocommerce a.button.wc-backward:hover,
.woocommerce button[name=update_cart]:hover{background:transparent;
  box-shadow:inset 0 0 0 1px var(--teal);color:var(--teal-d)}

/* --- Formularfelder ---------------------------------------------- */
.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.woocommerce form .form-row label{font:500 14px/1.4 Archivo,sans-serif;color:var(--n70)}
.woocommerce form .form-row .required{color:var(--rot);text-decoration:none}
.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea{width:100%;min-height:46px;padding:11px 13px;
  border:1px solid var(--n20);border-radius:0;background:var(--n00);color:var(--n90);
  font:400 16px/1.4 Archivo,sans-serif}
.woocommerce textarea{min-height:120px;resize:vertical}
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus{outline:0;border-color:var(--teal);
  box-shadow:inset 0 0 0 1px var(--teal)}
.woocommerce .input-text::placeholder{color:var(--n40)}

/* Pflicht-Kästchen (AGB, Widerruf). Es muss groß genug sein, um es am
   Handy zu treffen — eine Pflichtangabe darf nicht am Zielen scheitern. */
.woocommerce form .form-row.woocommerce-validated .input-text{border-color:var(--n20)}
.woocommerce form .form-row.woocommerce-invalid .input-text{border-color:var(--rot);
  box-shadow:inset 0 0 0 1px var(--rot)}
.woocommerce-terms-and-conditions-wrapper{margin:26px 0}
.woocommerce-terms-and-conditions-wrapper input[type=checkbox]{width:20px;height:20px;
  accent-color:var(--teal);margin-right:10px;vertical-align:-4px}

/* --- Warenkorb und Kasse: Aufteilung ----------------------------- */
.woocommerce .cart-collaterals{margin-top:44px}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2{margin:0 0 18px;
  font:600 clamp(21px,2.2vw,26px)/1.2 Archivo,sans-serif;letter-spacing:-.02em;
  color:var(--n90)}

/* Die Kasse selbst steht seit 2026-09-02 in `kasse.css` (eigene Vorlage
   `woocommerce/checkout/form-checkout.php`, lädt nur auf der Kasse). */

/* Mein Konto steht seit 2026-09-02 in `konto.css` (lädt nur auf der
   Kontoseite). */

/* --- Bestellbestätigung ------------------------------------------ */
.woocommerce-order-overview{list-style:none;margin:26px 0;padding:22px 24px;
  border:1px solid var(--n20);display:flex;flex-wrap:wrap;gap:18px 44px}
.woocommerce-order-overview li{font:400 14px/1.5 'IBM Plex Mono',monospace;color:var(--n50)}
.woocommerce-order-overview li strong{display:block;margin-top:4px;
  font:500 16px/1.4 Archivo,sans-serif;color:var(--n90)}


/* ---------------------------------------------------------- Fehlerseite */

.is-404{max-width:74ch}
.is-404 .nummer{margin:0;font:600 clamp(56px,10vw,110px)/1 Archivo,sans-serif;
  font-stretch:112%;letter-spacing:-.04em;color:var(--n10)}
.is-404 .gross{margin:8px 0 14px;
  font:600 clamp(24px,3vw,34px)/1.15 Archivo,sans-serif;letter-spacing:-.02em;color:var(--n90)}
.is-404 .wege{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}


/* ---------------------------------------------------------- Sprungmarke
   Erste fokussierbare Stelle der Seite. Wer mit der Tastatur arbeitet,
   soll nicht durch das ganze Kopfmenü müssen. */

.zum-inhalt{position:absolute;left:-9999px;z-index:100;padding:12px 20px;
  background:var(--teal);color:#000;font-weight:600;text-decoration:none}
.zum-inhalt:focus{left:16px;top:16px}

/* Die Fehlerseite hat keinen `.is-kopf`, der Luft nach oben schafft — die
   große Ziffer stünde sonst direkt unter dem mitlaufenden Kopf. */
.is-404{padding-top:40px}

/* Der Einleitungssatz der Kategorie- und Shopseite ist ein Block, weil sein
   Inhalt aus dem Editor kommt und eigene Absätze mitbringt. Die äußeren
   Abstände macht `.satz`, die inneren dürfen nicht doppeln. */
.kat-kopf .satz > :first-child{margin-top:0}
.kat-kopf .satz > :last-child{margin-bottom:0}
.kat-kopf .satz p{margin:0 0 .7em}

/* Der Abstand zwischen den Blöcken einer Inhaltsseite.

   `.is-text > * + *{margin-top:18px}` weiter oben war als Abstandsregel
   gedacht, kommt aber nie zum Zug: `.is-text p{margin:0}` und
   `.is-text ul{margin:0}` sind spezifischer und setzen den oberen Abstand
   wieder auf null. Zwei Absätze hintereinander standen deshalb ohne Lücke
   untereinander. Aufgefallen ist es erst mit den ersten Seiten, die mehr als
   eine Überschrift und einen Absatz haben.

   Deshalb hier dieselbe Spezifität und die spätere Stelle in der Datei. Die
   Überschriftenregel steht bewusst zuletzt: nach einer Überschrift ist der
   Abstand kleiner, weil die Überschrift selbst schon Luft nach oben mitbringt. */
.is-text > * + p,
.is-text > * + ul,
.is-text > * + ol,
.is-text > * + blockquote,
.is-text > * + table,
.is-text > * + pre{margin-top:18px}

.is-text h2 + *,.is-text h3 + *,.is-text h4 + *{margin-top:14px}

/* ─────────────────────────────────────────────────────────────────
   Produktseite: was nur die Nicht-Veredelung hat

   Der Entwurf kannte nur das Veredelungsteil. Harz, Gewebe und Lösemittel
   brauchen zwei Dinge, die es dort nicht gab: eine Aussage zur Lieferbarkeit
   an der Stelle, wo sonst „Dein Bauteil" steht, und ein Mengenfeld.
   ───────────────────────────────────────────────────────────────── */

.pr-liefergrad-wert{display:flex;align-items:center;gap:10px;margin:0;
  font:400 15px/1.5 Archivo,sans-serif;color:var(--n70)}
.pr-liefergrad-wert .punkt{flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--n40)}
.pr-liefergrad-wert.is-da .punkt{background:var(--teal-d)}
.pr-liefergrad-wert.is-bestellung .punkt{background:var(--amber)}
.pr-liefergrad-wert.is-weg{color:var(--n50)}

/* Menge und Kaufknopf teilen sich eine Zeile: die Stückzahl gehört an den
   Knopf, nicht in eine eigene Etage darüber. Ohne Mengenfeld füllt der Knopf
   die Breite wie bisher. */
.pr-kaufzeile{display:flex;align-items:stretch;gap:12px;margin-top:18px}
.pr-kaufzeile .pr-knopf{margin-top:0;flex:1 1 auto}
.pr-kaufzeile .quantity{flex:0 0 auto}
.pr-kaufzeile .quantity label{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pr-kaufzeile .quantity .qty{width:82px;height:58px;padding:0 8px;
  background:var(--n00);border:0;border-radius:var(--rundung);
  box-shadow:inset 0 0 0 1px var(--n20);text-align:center;
  font:500 17px/1 Archivo,sans-serif;color:var(--n90)}
.pr-kaufzeile .quantity .qty:focus{outline:none;box-shadow:inset 0 0 0 2px var(--teal-d)}

@media (max-width:520px){
  .pr-kaufzeile .quantity .qty{width:68px}
}

/* ============================================================
   Warenkorbseite

   Links die Positionen, rechts die Summe — sie bleibt beim Scrollen
   stehen, damit der Weg zur Kasse nie aus dem Bild läuft. Die
   Tabelle von WooCommerce ist hier die falsche Form: die
   Konfiguration eines veredelten Teils sind fünf Angaben, die unter
   den Namen gehören und in keine Spalte passen.
   ============================================================ */

/* Die Seitenvorlage deckelt ihren Inhalt auf Lesebreite (`.is-text`,
   74 Zeichen). Für Fließtext ist das richtig, für zwei Spalten mit
   Positionen und Summe zu eng — hier zählt nicht die Zeilenlänge,
   sondern dass Bild, Konfiguration und Preis nebeneinander passen. */
.woocommerce-cart .is-innen{max-width:1400px}
.woocommerce-cart .is-text{max-width:none}

/* `minmax(0,1fr)` statt `1fr`: sonst bekommt die Spalte die Breite des
   längsten unteilbaren Wortes als Mindestmaß, und „Polyesterharze"
   sprengt das Raster. */
.wk{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;
  align-items:start;margin-top:8px}

/* --- Positionen --------------------------------------------------
   Die Seitenvorlage gibt jedem Listenpunkt einen Teal-Strich als
   Aufzählungszeichen und unterstreicht jeden Link — beides gilt für
   Fließtext, nicht für Warenkorbposten. */
.wk-liste{margin:0;padding:0;list-style:none;border-top:1px solid var(--n20)}
.is-text .wk-liste li{padding-left:0}
.is-text .wk-liste li::before{content:none}
.is-text .wk a{text-decoration:none}
.is-text .wk a.wk-weg{border-bottom:1px solid var(--n20)}
.is-text .wk a.wk-weiter:hover,
.is-text .wk .wk-name a:hover{text-decoration:none}
.is-text .wk-abgaben a,
.is-text .wk-rechnung a{text-decoration:underline;text-underline-offset:3px}

/* Der Knopf ist hier ein <a>, und `.is-text a` ist spezifischer als
   `.handlung` — dadurch stand „Weiter zur Kasse" in Teal auf Teal
   statt in Schwarz. Die Hover-Farbe muss mit zurückgeholt werden,
   sonst bleibt die Schrift beim Wisch auf der dunklen Fläche schwarz. */
.is-text .wk .handlung,
.is-text .wk-leer .handlung{color:#000}
.is-text .wk .handlung:hover,
.is-text .wk .handlung:focus-visible,
.is-text .wk-leer .handlung:hover,
.is-text .wk-leer .handlung:focus-visible{color:var(--teal-l)}

/* Dieselbe Ursache bei den Abständen: `.is-text p{margin:0}` ist
   spezifischer als jede `.wk-*`-Klasse. Ohne diese Wiederholung klebt
   der Steuerhinweis am Kassenknopf und der Einzelpreis am Text. */
.is-text .wk-einzeln{margin:14px 0 0}
.is-text .wk-preis{margin:0}
.is-text .wk-gesamt{margin:20px 0 0}
.is-text .wk-abgaben{margin:10px 0 22px}
.is-text .wk-leer-satz{margin:0}
.is-text .wk-leer-dazu{margin:14px 0 28px}
.wk-post{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:26px;
  padding:26px 0;border-bottom:1px solid var(--n10)}

.wk-bild img{display:block;width:120px;height:120px;object-fit:cover;
  border-radius:var(--rundung);background:var(--n05)}

.wk-text{min-width:0}
.wk-name{margin:0;font:600 19px/1.3 Archivo,sans-serif}
.wk-name a{color:var(--n90);text-decoration:none}
.wk-name a:hover{color:var(--teal-d)}

/* Das Wort davor darf klein sein, der Wert nicht — den muss der
   Kunde lesen können, er entscheidet über den Preis daneben. */
.wk-fassung{margin:12px 0 0;
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.wk-fassung dt{font:500 11.5px/1.5 Archivo,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--n40);white-space:nowrap}
.wk-fassung dd{margin:0;font:400 15px/1.5 Archivo,sans-serif;color:var(--n70)}

/* Lieferzeit, Grundpreis, Widerrufshinweis — die Zeilen von Germanized
   und dem Rechtsmodul unter der Konfiguration. Der Widerrufshinweis ist
   eine Pflichtangabe vor Vertragsschluss und steht deshalb dunkler. */
.is-text .wk-text .wc-gzd-cart-info{margin:10px 0 0;font:400 13.5px/1.5 Archivo,sans-serif;
  color:var(--n50)}
.is-text .wk-text .wc-gzd-cart-info + .wc-gzd-cart-info{margin-top:4px}
.is-text .wk-text .wc-gzd-cart-info b,.is-text .wk-text .wc-gzd-cart-info strong{font-weight:600;
  color:var(--n70)}
.is-text .wk-text .carbon-widerruf{color:var(--n70)}
.is-text .wk-text .carbon-widerruf b{color:var(--n90)}

/* Der Datenschutzsatz über dem Knopf im Widerrufsformular von Germanized
   (module/germanized.php im Plugin). */
.order-withdrawal-request .carbon-widerruf-datenschutz{margin:22px 0 18px;max-width:70ch;
  font-size:14px;line-height:1.55;color:var(--n50)}
.order-withdrawal-request .carbon-widerruf-datenschutz a{color:var(--teal-d)}

.wk-einzeln{margin:14px 0 0;font:400 13.5px/1 Archivo,sans-serif;color:var(--n50)}
.wk-einzeln span{margin-left:6px;color:var(--n70)}
/* Germanized hängt den Grundpreis („15,90 € / l") an den Einzelpreis —
   als Zeile daneben, nicht als eigener Block darunter. */
.is-text .wk-einzeln .wc-gzd-cart-info,
.is-text .wk-preis .wc-gzd-cart-info{display:inline-block;margin:0 0 0 8px;
  font:400 12.5px/1 Archivo,sans-serif;color:var(--n50)}
.is-text .wk-preis .wc-gzd-cart-info{display:block;margin:6px 0 0}

.wk-zahlen{display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  text-align:right}
.wk-stueck{font:400 15px/1 'IBM Plex Mono',monospace;color:var(--n50)}
.wk-preis{margin:0;font:600 19px/1 Archivo,sans-serif;color:var(--n90);
  font-variant-numeric:tabular-nums}
.wk-weg{font:400 13.5px/1 Archivo,sans-serif;color:var(--n50);
  text-decoration:none;border-bottom:1px solid var(--n20)}
.wk-weg:hover{color:var(--rot);border-bottom-color:var(--rot)}

/* Mit Skript geht das Formular bei einer Änderung von selbst ab. */
.wk-nachziehen{margin-top:22px}
html.js .wk-nachziehen{display:none}

/* --- Summe ------------------------------------------------------- */
.wk-summe{position:sticky;top:104px}
.wk-summe-innen{padding:28px 28px 30px;background:var(--n05);
  border-radius:var(--rundung)}
.wk-summe h2{margin:0 0 20px;font:600 20px/1 Archivo,sans-serif;color:var(--n90)}

.wk-rechnung{display:grid;grid-template-columns:1fr auto;gap:10px 20px;margin:0}
.wk-rechnung dt{font:400 15px/1.4 Archivo,sans-serif;color:var(--n60)}
.wk-rechnung dd{margin:0;text-align:right;
  font:500 15px/1.4 Archivo,sans-serif;color:var(--n90);
  font-variant-numeric:tabular-nums}
.wk-rechnung .wk-spaeter{font-weight:400;color:var(--n50)}
.wk-gutschein-zeile{color:var(--teal-d)}

.wk-gesamt{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--n20);
  font:400 16px/1 Archivo,sans-serif;color:var(--n60)}
.wk-gesamt b{font:600 26px/1.1 Archivo,sans-serif;color:var(--n90);
  font-variant-numeric:tabular-nums;text-align:right}
/* WooCommerce packt in die Gesamtsumme noch den Steuerhinweis. Der
   gehört unter den Betrag und nicht in dieselbe Zeile. */
.wk-gesamt b .includes_tax,
.wk-gesamt b small{display:block;margin-top:6px;
  font:400 13px/1.4 Archivo,sans-serif;color:var(--n50)}

.wk-abgaben{margin:10px 0 22px;font:400 13px/1.5 Archivo,sans-serif;color:var(--n50)}
.wk-abgaben a{color:inherit}

.wk-summe .handlung{width:100%}
.wk-weiter{display:block;margin-top:14px;text-align:center;
  font:500 14px/1 Archivo,sans-serif;color:var(--n60);text-decoration:none}
.wk-weiter:hover{color:var(--n90)}

/* --- Gutschein --------------------------------------------------- */
.wk-gutschein{margin-top:24px;padding-top:20px;border-top:1px solid var(--n20)}
.wk-gutschein summary{cursor:pointer;list-style:none;
  font:500 14px/1 Archivo,sans-serif;color:var(--n60)}
.wk-gutschein summary::-webkit-details-marker{display:none}
.wk-gutschein summary::before{content:"+ ";color:var(--n40)}
.wk-gutschein[open] summary::before{content:"– "}
.wk-gutschein summary:hover{color:var(--n90)}
.wk-gutschein form{margin-top:14px}
.wk-feld span{display:block;margin-bottom:7px;
  font:500 12px/1 Archivo,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--n50)}
.wk-feld input{width:100%;height:48px;padding:0 14px;
  border:1px solid var(--n20);background:var(--n00);color:var(--n90);
  font:400 15px/1 Archivo,sans-serif}
.wk-feld input:focus{outline:0;border-color:var(--teal-d)}
.wk-gutschein .handlung{margin-top:12px}

/* --- leerer Warenkorb -------------------------------------------- */
.wk-leer{max-width:520px;padding:40px 0 60px}
.wk-leer-satz{margin:0;font:600 26px/1.2 Archivo,sans-serif;color:var(--n90)}
.wk-leer-dazu{margin:14px 0 28px;font:400 17px/1.6 Archivo,sans-serif;color:var(--n60)}

@media(max-width:1080px){
  .wk{grid-template-columns:1fr;gap:32px}
  .wk-summe{position:static}
  .wk-summe-innen{max-width:520px}
}

@media(max-width:640px){
  .wk-post{grid-template-columns:88px minmax(0,1fr);gap:18px;padding:22px 0}
  .wk-bild img{width:88px;height:88px}
  /* Die Zahlen rutschen unter den Text, sonst bleiben für den Namen
     vier Zeichen Breite. */
  .wk-zahlen{grid-column:1 / -1;flex-direction:row;align-items:center;
    justify-content:space-between;gap:16px}
  .wk-fassung{grid-template-columns:1fr;gap:0}
  .wk-fassung dt{margin-top:8px}
  .wk-fassung dt:first-child{margin-top:0}
  .wk-summe-innen{padding:24px 20px 26px}
}


/* ---------------------------------------------------------- Kästen im Text
   Überblick, Hinweis, Warnung. Sie standen bis 2026-08-27 in
   `ratgeber.css` — dort waren sie am falschen Platz, denn dieselben
   Kästen tragen auch die Serviceseiten, und die laden den Ratgeber
   nicht. Die Farbe der Kante bleibt dort, sie benennt den Kasten.

   Sie bleiben in der Lesespalte: es sind Textblöcke, keine Bilder.
   Unterschieden wird über die linke Kante, nicht über eine farbige
   Fläche — ein hellgrüner und ein hellgelber Kasten übereinander sähen
   aus wie eine Ampel und nähmen den Produkten den Kontrast weg. */

.is-text .ueberblick,
.is-text .hinweis,
.is-text .achtung{margin:30px 0 0;max-width:74ch;
  padding:20px 22px 22px;background:var(--n05);border-radius:var(--rundung);
  border-left:2px solid var(--n20)}

.is-text .ueberblick > :first-child,
.is-text .hinweis > :first-child,
.is-text .achtung > :first-child{margin-top:0}

.is-text .ueberblick p,
.is-text .hinweis p,
.is-text .achtung p{font-size:16px}


/* ---------------------------------------------------------- Die Fragen
   Zwölf ausgeklappte Antworten liest niemand — eine Frageseite ist zum
   Suchen da, nicht zum Lesen. Deshalb `<details>`.

   Dasselbe Aufklapp-Zeichen wie beim Gutscheinfeld im Warenkorb: ein
   Plus, das zum Minus wird. Ein gedrehtes Dreieck wäre die zweite Form
   für dieselbe Sache. Keine Hülle, keine Fläche — nur die Trennlinie,
   die auch die Beitragsliste benutzt. */

.is-text .frage{max-width:74ch;border-bottom:1px solid var(--n10)}
.is-text .frage summary{cursor:pointer;list-style:none;
  padding:18px 0 18px 28px;position:relative;
  font:600 18px/1.4 Archivo,sans-serif;letter-spacing:-.01em;color:var(--n90)}
.is-text .frage summary::-webkit-details-marker{display:none}
.is-text .frage summary::before{content:"+";position:absolute;left:0;top:18px;
  width:16px;font:400 20px/1.4 Archivo,sans-serif;color:var(--n40);text-align:center}
.is-text .frage[open] summary::before{content:"–"}
.is-text .frage summary:hover{color:var(--teal-d)}
.is-text .frage summary:focus-visible{outline:2px solid var(--teal-l);outline-offset:2px}

/* Die Antwort rückt auf die Höhe der Frage ein, nicht auf die des
   Zeichens — sonst hängt sie unter dem Plus statt unter der Frage. */
.is-text .frage > :not(summary){margin-left:28px;max-width:66ch}
.is-text .frage > :not(summary):first-of-type{margin-top:0}
.is-text .frage > :last-child{margin-bottom:22px}

/* Eine Überschrift direkt über einer Frage braucht Luft, sonst klebt
   die erste Frage an ihr. */
.is-text h2 + .frage{border-top:1px solid var(--n10)}


/* ---------------------------------------------------------- Zahlungswege
   Aus der Kasse geholt (`module/service.php` im Plugin), nicht im
   Editor gepflegt. Darstellung wie die Beitragsliste: es sind Texte. */

/* Die Liste trägt Überschrift und Absatz, kein Aufzählungszeichen —
   sonst steht der Strich aus `.is-text ul li::before` in einer eigenen
   Zeile über dem Namen der Zahlungsart. Gleiche Ausnahme wie bei der
   Warenkorbliste. */
.is-text .zahlwege{margin:26px 0 0;padding-left:0}
.is-text .zahlwege li{padding:22px 0 22px 0}
.is-text .zahlwege li::before{content:none}
.is-text .zahlwege h3{margin:0;font:600 18px/1.3 Archivo,sans-serif;
  letter-spacing:-.01em;color:var(--n90)}
.is-text .zahlwege p{margin:8px 0 0;font-size:16px;color:var(--n60)}


/* ---------------------------------------------------------- Versandkosten
   Eine Tabelle je Zone. Eine einzige über alle Zonen zwänge zwei
   verschiedene Dinge in dieselbe Spalte: wohin geliefert wird und
   womit. */

.is-text .versandzone{margin:30px 0 0;max-width:74ch}
.is-text .versandzone h3{margin:0 0 4px;font:600 18px/1.3 Archivo,sans-serif;
  letter-spacing:-.01em;color:var(--n90)}
.is-text .versandzone .gebiete{margin:0 0 14px;font-size:15px;color:var(--n50)}
.is-text .versandzone table{margin:0}
/* Der Zuschlagshinweis gehört zur Versandart, nicht in eine eigene
   Zeile — sonst steht in der Preisspalte daneben nichts. */
.is-text .versandzone .dazu{display:block;margin-top:5px;
  font-size:15px;line-height:1.5;color:var(--n50)}
.is-text .versandzone td:last-child{white-space:nowrap}

@media(max-width:600px){
  .is-text .versandzone td:last-child{white-space:normal}
}