/* RUMADUM, erzeugt aus quelle/statisch/css/style.css
   Alle Werte stammen aus ci.md. Farben ausschliesslich ueber Custom Properties. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-sans-400.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-sans-700.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Nunito Sans',system-ui,sans-serif;font-size:17px;line-height:1.65;
 background:var(--grund);color:var(--text);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;font-weight:700;line-height:1.15;margin:0 0 .5em}
p{margin:0 0 1em;max-width:68ch}
a{color:inherit}
/* Grundregel gegen Bildueberlauf. Ohne sie sprengt jedes Bild, das eine
   Spezialregel verfehlt, seine Kachel. Gefunden am 08.09.2026. */
img,svg{display:block;max-width:100%}
.wrap{width:min(100% - 2.5rem,1120px);margin-inline:auto}
.held-bild{width:min(78%,300px);margin:1.8rem auto 0}
.platz-bild{aspect-ratio:4/5;border:2px dashed var(--gold);border-radius:var(--r-gross);
 display:grid;place-items:center;text-align:center;padding:1rem;color:var(--neben);font-size:13px}
.bild-hinweis{font-size:12px;color:var(--neben);text-align:center;margin:.6rem 0 0}
.proto{font-size:13px;padding:.5rem 1.25rem;background:var(--dunkel);color:var(--creme);
 font-family:'Poppins',sans-serif;font-weight:600}
.ph{border-bottom:2px dotted var(--gold);background:none;color:inherit}
:where(a,button,input,select):focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:4px}
/* Marke, echtes SVG, Mindestbreite Stick 160 px laut ci.md */
.stick{width:168px;height:auto}
.fuss .stick{width:200px}
/* Kopf */
.kopf{padding:1rem 0}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.kopf .wrap{flex-wrap:wrap}
/* Menue auf schmalen Geraeten (E107, umgekehrt mit E108).
   Ausgangszustand ist offen, nicht zu. Ohne JavaScript stand die Navigation auf
   display:none und war damit auf schmalen Geraeten ueberhaupt nicht erreichbar,
   der Schalter allein haette sie oeffnen muessen. Navigation ist Inhalt und
   nicht Komfort, sie darf nicht an einem Modul haengen.
   Jetzt steht sie offen da, und erst das Modul klappt sie zu. Faellt das Modul
   aus, bleibt das Menue sichtbar statt zu verschwinden.
   Eigene Zeile unter Marke und Schalter ueber order, damit die Regel nicht an
   der Reihenfolge im Markup haengt. Innenabstand je Verweis, damit die
   Beruehrflaeche zusammen mit der Schriftzeile ueber 44 Pixel kommt. */
.nav{display:flex;flex-direction:column;flex:0 0 100%;order:3;gap:.1rem;
 margin-top:.9rem;padding-top:.6rem;border-top:1px solid var(--linie)}
.nav a{display:flex;align-items:center;gap:.5rem;padding:.7rem .2rem;
 font:600 16px 'Poppins',sans-serif;text-decoration:none;color:inherit}
.nav a:hover,.nav a:focus-visible{color:var(--orange-text)}
.nav-schalter{display:none;font:600 15px 'Poppins',sans-serif;background:none;
 border:2px solid var(--linie);border-radius:var(--r-klein);padding:.5rem .9rem;color:inherit}
.js .nav{display:none}
.js .nav-offen{display:flex}
.js .nav-schalter{display:inline-block}
/* Einstiege */
.einstieg{display:grid;gap:1rem;padding:0 0 3rem}
/* Spalte statt Raster, damit die Aktionszeile per margin-top:auto am unteren
   Rand sitzt. Die Karten sind im Raster gleich hoch, dadurch stehen alle drei
   Verweise auf einer Linie, unabhaengig von der Textlaenge. */
.einstieg-karte{border-radius:var(--r-gross);padding:1.4rem 1.3rem;display:flex;
 flex-direction:column;text-decoration:none;color:inherit}
.einstieg-aktion{margin-top:auto}
.einstieg-titel{font:700 1.35rem/1.2 'Poppins',sans-serif;margin-bottom:.35rem}
.einstieg-text{font-size:16px;margin-bottom:.9rem}
.einstieg-aktion{font-weight:700}
/* Hinweiszeile: eine befristete oder einschraenkende Nebenangabe, kein Fehler
   und keine Warnung. Deshalb Gold statt der Warnfarbe, weisse Flaeche zum
   Abheben vom cremefarbenen Grund, Goldtext gemessen 5,60 zu 1 auf Weiss. */
.hinweiszeile{font-size:14px;line-height:1.5;color:var(--gold-auf-grund);
 background:var(--grund);border:1px solid var(--gold);border-radius:var(--r-klein);
 padding:.5rem .7rem;margin:0 0 .9rem;display:block}
.einstieg-hinweis{margin-bottom:1rem}
/* Produkte */
.kacheln{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.kachel-link{display:grid;text-decoration:none;height:100%;position:relative}
/* Gilt fuer beide Faelle: <span class="foto"> als Platzhalter und
   <picture class="foto"> mit echtem Bild. picture ist von Haus aus inline,
   deshalb wird es hier ausdruecklich mitgenannt. */
/* Feste Bildhoehe statt Seitenverhaeltnis. Bei drei Spalten ergab 3/4 rund
   340 Pixel Bildhoehe, die Kachel wurde dadurch zur Saeule. Zwischenstand,
   endgueltiger Wert kommt mit der Kachelentscheidung. */
.foto,picture.foto{display:grid;place-items:center;position:relative;
 color:var(--foto-glyph);height:clamp(150px,24vw,180px);overflow:hidden}
/* Nie ueber die eigene Aufloesung hinaus vergroessern. Mit width:100% wurde
   jede zu kleine Quelle auf Kachelbreite aufgeblasen und dadurch unscharf.
   So bleibt ein kleines Foto klein und scharf, zentriert in der Flaeche. */
.foto img,picture.foto>img{width:auto;height:auto;max-width:100%;max-height:100%;
 object-fit:contain;display:block}
.foto svg{width:38px;height:auto;opacity:.55}
.foto-hinweis{font-size:12px;color:var(--neben);margin-top:.4rem}
/* Steht seit 08.09.2026 im Textfluss der Kopfzeile statt ueber dem Bild. Damit
   entfaellt die Ueberdeckung, und lange Werte wie Preis-Leistungs-Sieger
   verdecken keinen Produktnamen mehr. Tiefbraun auf Orange, 4,80 zu 1. */
.badge{background:var(--akzent);color:var(--dunkel);white-space:nowrap;flex:none;
 font:700 12px 'Poppins',sans-serif;padding:.2rem .55rem;border-radius:999px}
.badge.badge-fest{display:inline-block;margin:0 0 .8rem}
/* Kopfzeile in zwei Spalten (E77): links Name und Hersteller, rechts Banderole
   und darunter Herkunft. Vorher standen Hersteller und Herkunft als ein Wert in
   einer Spalte, die sich die Banderole mit ihnen teilte, bis zu 49 Zeichen auf
   gut der halben Kachelbreite. Bei Preis-Leistungs-Sieger brach der Hersteller
   dadurch mitten im Namen um.
   Schmale Geraete bekommen eine Spalte: bei zwei Kacheln nebeneinander bleiben
   rund 127 Pixel Inhaltsbreite, eine Banderole von 155 Pixeln daneben ergibt
   keine Spalte mehr. Sie darf dort umbrechen, an den Bindestrichen tut sie das
   von selbst. */
/* Ohne Trennlinie, entschieden am 10.09.2026 (E78). Sie war die vierte
   Trennung in einer rund 300 Pixel breiten Kachel, neben Flaeche, weissem
   Bildkasten mit eigenem Rand und dem Abstand dazwischen, und sie machte die
   reservierte Restzeile aus E77 erst sichtbar. Ohne sie ist derselbe Platz
   einfach Abstand vor dem Bild. */
.kachel-kopf{display:grid;grid-template-columns:minmax(0,1fr);row-gap:.35rem;
 margin-bottom:.9rem}
.kachel-kopf .badge{white-space:normal;justify-self:start;margin:.25rem 0}
.kachel-marke{font-size:13px;color:var(--neben)}
.kachel-name{font:700 1.05rem/1.25 'Poppins',sans-serif;margin:0;overflow-wrap:anywhere}
/* Flagge dekorativ, der Name steht daneben. Hoehe an der Schrift, Breite aus
   der Datei: die Flaggen reichen von 2 zu 1 bis nahezu quadratisch, eine feste
   Breite wuerde einzelne stauchen (ci.md Abschnitt 5). Duenner Rand, sonst
   verschwinden die weissen Felder von Kanada oder Daenemark auf der Flaeche. */
.kachel-herkunft{font-size:13px;color:var(--neben);display:flex;align-items:center;gap:.4rem}
/* Hoehe an der Schrift ihrer Zeile und nicht in rem (E88). Ein fester Wert
   ergab zwar ueberall dieselben 20 Pixel, stand in der Kachel aber neben 13px
   Text und in der Faktentabelle neben 18px: 1,54 gegen 1,11 Zeilenhoehen, also
   einmal dominierend und einmal eingefuegt. Das Auge beurteilt dieses
   Verhaeltnis und nicht die absolute Groesse. Die Flagge ist eine Beigabe zum
   Landesnamen, sie soll ihn begleiten und nicht ueberstimmen, also waechst sie
   mit ihm: rund 16 Pixel in der Kachel, rund 22 in der Faktentabelle. */
.flagge{width:auto;height:1.25em;border:1px solid var(--linie);border-radius:2px;flex:none}
.kachel-fakten{font-size:13px;color:var(--neben)}
.kachel-preis{font:700 1.15rem 'Poppins',sans-serif;color:var(--preis);margin-top:.6rem;display:flex;
 align-items:baseline;gap:.4rem;flex-wrap:wrap}
.kachel-mwst{font:400 12px 'Nunito Sans',sans-serif;color:var(--neben)}
.status{font-size:13px;font-weight:600;margin-top:.5rem;display:flex;align-items:center;gap:.4rem}
.status::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.status-green{color:var(--status-gut)}.status-orange{color:var(--status-knapp)}.status-red{color:var(--status-weg)}
/* waRUM */
.warum-liste{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.warum-liste h3{font-size:1.5rem;margin-bottom:.15rem;color:var(--wortmarke-rum)}
.warum-liste p{margin:0}
/* Fuss */
.fuss{padding:2.5rem 0 1.5rem;background:var(--dunkel);color:var(--creme);margin-top:3rem}
.fuss a{color:var(--creme)}
.fuss-grid{display:grid;gap:1.8rem}
.fuss-titel{font-size:1rem;margin-bottom:.6rem}
/* Sichtbar ueberfluessig, fuer Vorlesesoftware nuetzlich: die Ueberschrift
   bleibt im Markup und laesst sich anspringen, sie steht nur nicht im Weg. */
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
 white-space:nowrap}
/* Firmenname akzentuiert, Anschrift ruhig darunter. Vorher lief beides in einem
   Absatz und liess sich nicht als Name lesen. */
.fuss-firma{font:700 1rem 'Poppins',sans-serif;color:var(--creme);margin:.9rem 0 .2rem}
.fuss-zeiten{margin:1.1rem 0 0;font-size:15px;color:var(--creme-neben)}
.fuss-recht{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1.1rem 0 0;font-weight:700}
.fuss-claim{font-size:14px;color:var(--creme-neben);margin-top:.8rem}
/* Fussbereich: dieselben Wege, aber auf dunklem Grund und ohne Kasten */
.fuss .kontaktweg{background:transparent;border-color:var(--gold);color:var(--creme)}
.fuss .kontaktweg .symbol{color:var(--akzent)}
.fuss .kontaktweg-wert{color:var(--creme-neben)}
.fuss .kontaktweg:hover,.fuss .kontaktweg:focus-visible{background:rgba(255,255,255,.06);border-color:var(--akzent)}
/* max-width aufheben: der Absatz erbt sonst die 68 Zeichen aus der
   Fliesstextregel und bricht mitten im Satz um. */
.jugend{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--gold);font-size:14px;
 color:var(--creme-neben);max-width:none}
@media (min-width:768px){
 body{font-size:18px}
 /* Zwei Selektoren, sonst gewinnt .js .nav mit display:none auch hier. */
 .nav,.js .nav{display:flex;flex-direction:row;flex:0 1 auto;order:0;gap:1.4rem;
  margin:0;padding:0;border:0;font:600 16px 'Poppins',sans-serif}
 .nav a{text-decoration:none;display:inline-flex;align-items:center;gap:.4em;padding:0}
 .nav-schalter,.js .nav-schalter{display:none}
 .einstieg{grid-template-columns:repeat(3,1fr);gap:1.2rem}
 .einstieg-zwei{grid-template-columns:repeat(2,1fr)}
 .kacheln{grid-template-columns:repeat(3,1fr);gap:1.4rem}
 /* Zwei Spalten in der Kopfzeile. Feste Zuordnung statt automatischer
    Platzierung, sonst rutscht alles eine Zelle weiter, sobald eine Kachel
    keine Banderole traegt. */
 .kachel-kopf{grid-template-columns:minmax(0,1fr) auto;column-gap:.6rem;align-items:start}
 .kachel-name{grid-column:1;grid-row:1}
 .kachel-kopf .badge{grid-column:2;grid-row:1;justify-self:end;white-space:nowrap;margin:0}
 .kachel-marke{grid-column:1;grid-row:2}
 .kachel-herkunft{grid-column:2;grid-row:2;justify-self:end}
 /* Die Hoehe wird an der Kopfzeile reserviert, nicht am Namen. Damit ist die
    Kopfzeile in allen Kacheln gleich hoch und alles darunter, also Bild, Preis,
    Fakten und Verfuegbarkeit, steht in einer Reihe auf einer Linie. Ohne die
    Reservierung entscheidet die Laenge des laengsten Namens ueber die Hoehe der
    ganzen Reihe.
    Am Namen selbst zu reservieren war der erste Versuch und falsch: bei einem
    einzeiligen Namen entstand die freie Zeile zwischen Name und Hersteller und
    riss die beiden auseinander, die zusammengehoeren. An der Kopfzeile mit
    align-content:start faellt die freie Hoehe unten an, also vor der Trennlinie,
    wo sie niemanden stoert.
    Der Wert ist gerechnet und nicht geraten: zwei Namenszeilen zu 1,25, der
    Zeilenabstand von 0,35rem, eine Herstellerzeile zu 1,65 von 13px. Innenabstand
    und Trennlinie sind mit E78 entfallen und stehen deshalb nicht mehr darin.
    Wer den Zeilenabstand aendert, aendert ihn an beiden Stellen, sonst wandert
    die Oberkante des Bildes. Namen ueber zwei Zeilen werden abgeschnitten, der laengste
    Kurzname im Sortiment hat 22 Zeichen und braucht zwei. */
 .kachel-kopf{align-content:start;
  min-height:calc(2 * 1.25 * 1.05rem + .35rem + 1.65 * 13px)}
 .kachel-name{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
 /* Hersteller einzeilig. Vier von 77 sind laenger als die Spalte, sie enden
    mit Auslassungspunkten. Vollstaendig steht der Name auf der Detailseite. */
 .kachel-marke{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .kachel-herkunft{white-space:nowrap}
 .warum-liste{grid-template-columns:repeat(3,1fr)}
 /* Im Kontaktblock nebeneinander, in der schmalen Spalte der Startseite
    bleiben sie untereinander */
 .kontaktblock .kontaktwege,.fuss .kontaktwege,.textseite .kontaktwege,
 .anfrageblock .kontaktwege{
  grid-template-columns:repeat(3,1fr)}
 .adresszeile{grid-template-columns:1fr auto}
 .anfahrt{grid-template-columns:1fr auto}
 /* minmax(0,1fr) statt 1fr: sonst bestimmt der lange Knopftext die
    Mindestbreite der linken Spalte und die Haelften werden ungleich. */
 .standortbilder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .wissen-liste{grid-template-columns:repeat(3,1fr);gap:1rem}
 /* Zwei Spalten statt drei: die drei Kontaktwege brauchen Breite, sonst
    bricht die Telefonnummer um. Rechtliches wandert unter die Wege. */
 .fuss-grid{grid-template-columns:1fr 1.7fr}
 .fuss .kontaktweg-wert{white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){
 /* Bewegung nur, wenn das Geraet sie zulaesst. Die Farbwechsel oben laufen
    immer, sie sind Rueckmeldung und keine Zierde. */
 .kachel-link{transition:transform .18s ease}
 .kachel:hover .kachel-link,.kachel:focus-within .kachel-link{transform:translateY(-2px)}
 .knopf{transition:background-color .16s ease,color .16s ease,transform .16s ease}
 .knopf-voll:hover,.knopf-rand:hover{transform:translateY(-2px)}
 .einstieg-karte{transition:transform .18s ease,border-color .18s ease}
 .einstieg-karte:hover,.einstieg-karte:focus-within{transform:translateY(-2px)}
 .paket{transition:transform .18s ease}
 .paket:hover,.paket:focus-within{transform:translateY(-2px)}
}
/* Radarsymbol in der Navigation. Der Strahl dreht sich, alles andere steht.
   Die Drehung laeuft nur, wenn das Geraet keine reduzierte Bewegung verlangt,
   sonst bleibt ein ruhiges Symbol stehen (WCAG 2.2). */
.nav-symbol{width:1.15em;height:1.15em;flex:none}
@media (prefers-reduced-motion:no-preference){
 .nav-symbol-strahl{transform-origin:50% 50%;animation:radar-strahl 4s linear infinite}
}
@keyframes radar-strahl{to{transform:rotate(360deg)}}

:root{
 --orange:#F25E14;--braun:#44352B;--gold:#B88D3C;--dunkel:#2A211A;--creme:#F7F3EE;
 --orange-text:#AE400A;--gold-text:#81632A;--grauton:#6B6259;
 --grund:#FFFFFF;--flaeche:var(--creme);--text:var(--braun);--neben:var(--grauton);
 --akzent:var(--orange);--linie:#E4DBD0;--preis:var(--braun);
 --gold-auf-grund:var(--gold-text);--wortmarke-rum:var(--orange-text);
 --marke-flasche:var(--orange);--marke-verschluss:var(--orange);--marke-xo:var(--creme);
 --foto-glyph:#CFC3B4;--creme-neben:#C9BFB4;--fokus:var(--orange-text);
 --status-gut:#2F6B3C;--status-knapp:#8A5A12;--status-weg:var(--grauton);
 --r-klein:6px;--r-gross:16px;
}
.kopf{border-bottom:1px solid var(--linie)}
.held{background:var(--flaeche);padding:2.2rem 0 2.6rem;margin-bottom:2.5rem}
/* balance verteilt die Zeilen gleichmaessig, damit keine Zeile mit einem
   einzelnen Wort endet. Browser ohne Unterstuetzung ignorieren es. */
.held h1{font-size:clamp(2rem,7vw,3.1rem);max-width:19ch;text-wrap:balance}
.held-unter{font-size:1.1rem;max-width:44ch}
.held-fakt{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border-radius:999px;
 padding:.35rem .9rem;font-size:14px;font-weight:600;color:var(--orange-text);margin-bottom:1.2rem}
.aktionen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.knopf{display:inline-block;text-decoration:none;font:700 16px 'Poppins',sans-serif;
 padding:.8rem 1.3rem;border-radius:var(--r-klein);border:2px solid transparent}
.knopf-voll{background:var(--dunkel);color:var(--creme)}
.knopf-rand{border-color:var(--akzent);color:var(--orange-text)}
/* Zustaende: Farbwechsel und ein Millimeter Bewegung, keine Schatten und keine
   Verlaeufe (ci.md Abschnitt 4). Beide Knopfarten laufen im Ueberfahren auf
   dieselbe Flaeche zu, Tiefbraun auf Orange, gemessen 4,80 zu 1. */
.knopf-voll:hover,.knopf-voll:focus-visible{background:var(--akzent);color:var(--dunkel)}
.knopf-rand:hover,.knopf-rand:focus-visible{background:var(--akzent);color:var(--dunkel)}
.knopf:active{transform:translateY(1px)}
.einstieg-karte:hover .einstieg-aktion{text-decoration-thickness:3px}
.abschnitt{padding-bottom:2.5rem}
/* Abschluss eines Abschnitts. Randknopf statt gefuellt, damit er nicht mit der
   Handlungsaufforderung im Kopfbereich konkurriert, die auf dasselbe Ziel zeigt.
   Linksbuendig wie alle anderen Aufforderungen: die Seite hat genau eine
   Lesekante, ein zentrierter Knopf bricht sie. */
.abschnitt-aktion{margin:1.6rem 0 0}
.abschnitt>h2{font-size:1.6rem}
.einstieg-karte{background:var(--flaeche);border-bottom:4px solid var(--akzent)}
.einstieg-karte .einstieg-aktion{color:var(--orange-text);text-decoration:underline}
.kachel{background:var(--flaeche);border-radius:var(--r-gross);box-shadow:0 2px 10px rgba(42,33,26,.07)}
.kachel-link{padding:1rem}
.foto{background:#fff;border:1px solid var(--linie);border-radius:var(--r-klein);padding:1rem 0;margin-bottom:.9rem}
/* Ohne Radius: das Band laeuft ueber die volle Fensterbreite, seine Ecken
   liegen ausserhalb des Sichtfelds. Ein Radius, den niemand sieht, ist eine
   Regel, die nur im Stylesheet steht. */
.warum{background:var(--flaeche);padding:2.2rem 0;margin-bottom:2.5rem}
/* Verkostungsband auf Tiefbraun. Es ist das einzige dunkle Feld im Inhalt und
   traegt damit die Leistung mit dem hoechsten Deckungsbeitrag, ohne die drei
   gleichrangigen Einstiege oben anzutasten (E3). Alle Werte aus ci.md, gemessen
   auf Tiefbraun: Creme 14,28, Orange 4,80, Gold 5,19 zu 1. */
.verkostungsband,.block-dunkel{background:var(--dunkel);color:var(--creme)}
/* Dunkler Block innerhalb der Inhaltsbreite, deshalb mit Radius. Hoechstens
   einer je Seite: er markiert, was der Besucher nicht uebersehen darf, und
   verliert seine Wirkung, sobald er sich wiederholt (ci.md Abschnitt 4). */
/* Oben etwas weniger als unten: die Zeilenbox der Ueberschrift reicht ueber die
   sichtbaren Buchstaben hinaus, ein Kasten mit Rahmen darunter nicht. Gleiche
   Zahlen wirken deshalb ungleich. */
.block-dunkel{border-radius:var(--r-gross);padding:2rem 2rem 2.2rem;margin:2.6rem 0}
/* Erstes Kind ohne Abstand nach oben. Der Selektor ist bewusst spezifischer als
   .textseite h2 weiter unten in dieser Datei, sonst gewinnt dort margin-top:2rem
   und der Block steht oben um 32 Pixel zu weit auseinander. */
.block-dunkel>h2:first-child{margin-top:0;margin-bottom:.7rem}
.block-dunkel p{max-width:62ch;margin-bottom:0}
/* Zwei Absaetze im dunklen Block klebten bisher aneinander: margin-bottom:0
   gilt fuer jeden von ihnen. Gefunden am 09.09.2026 beim Gutscheinblock,
   betrifft auch den Preisblock auf /ueber-uns. */
.block-dunkel p+p{margin-top:.9rem}
/* Zwei Klassen im Selektor, sonst gewinnt .textseite ul weiter unten in dieser
   Datei mit gleicher Spezifitaet und der Abstand nach oben faellt weg. */
.textseite .block-dunkel ul{margin:.9rem 0 0;padding-left:1.2rem}
.textseite .block-dunkel li{margin-bottom:.35rem;max-width:60ch}
.block-dunkel li::marker{color:var(--gold)}
/* Wie im Band auf der Startseite: die Hinweiszeile ist eine eigenstaendige
   Aussage, nicht ein Nebensatz. Begrenzte Breite und Luft davor. */
.block-dunkel .hinweiszeile{background:transparent;border-color:var(--gold);color:var(--gold);
 max-width:48ch;margin:1.4rem 0 0}
.verkostungsband .knopf-voll{background:var(--akzent);color:var(--dunkel)}
.verkostungsband .knopf-rand{border-color:var(--akzent);color:var(--creme)}
.verkostungsband .knopf-voll:hover,.verkostungsband .knopf-voll:focus-visible{
 background:var(--creme);color:var(--dunkel)}
.verkostungsband .knopf-rand:hover,.verkostungsband .knopf-rand:focus-visible{
 background:var(--akzent);color:var(--dunkel)}
.verkostungsband .hinweiszeile{background:transparent;border-color:var(--gold);color:var(--gold)}
.block-dunkel .knopf-voll{background:var(--akzent);color:var(--dunkel)}
.block-dunkel .knopf-rand{border-color:var(--akzent);color:var(--creme)}
/* Fachtexte. Bewusst schlicht: der Block sortiert weiter, er erklaert nicht. */
.wissen-liste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem;font-weight:700}
.wissen-liste a{color:var(--orange-text)}
/* Gutscheinzeile im Verkostungsband: dieselbe Auszeichnung wie die Hinweiszeile,
   aber als eigenstaendige Aussage gesetzt, nicht als Nebensatz. Deshalb etwas
   groesser und mit Abstand nach oben. */
.band-zusatz{font-size:16px;max-width:46ch;margin:1.2rem 0 1.4rem}
.standort{display:grid;gap:1.2rem}
/* Kontaktwege: Symbol plus Beschriftung, nie Symbol allein. Die Farben der
   Dienste werden bewusst nicht uebernommen, drei Fremdfarben neben Orange
   zerlegen die Palette (ci.md Abschnitt 2). */
.kontaktwege{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.6rem}
/* Auf einer Textseite stehen die drei Wege zwischen Ueberschrift und Formular
   und brauchen Luft nach unten, sonst sitzt die cremefarbene Formularflaeche
   unmittelbar auf dem letzten Kasten auf. Gilt auf /verkostungen und
   /standort, beide tragen dieselbe Bauart (E52, E74). */
.textseite .kontaktwege,.anfrageblock .kontaktwege{margin-bottom:1.2rem}
.kontaktweg{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;
 border:1px solid var(--linie);border-radius:var(--r-klein);padding:.5rem .7rem;background:var(--grund);
 height:100%}
.kontaktweg .symbol{width:1.4rem;height:1.4rem;flex:none;color:var(--orange-text)}
.kontaktweg-titel{display:block;font:700 15px 'Poppins',sans-serif}
.kontaktweg-wert{display:block;font-size:14px;color:var(--neben)}
.kontaktweg:hover,.kontaktweg:focus-visible{border-color:var(--akzent);background:var(--flaeche)}
/* Karte: lokales Bild, kein eingebetteter Dienst. Der Weg zur Route oeffnet
   sich erst auf Klick, deshalb laedt die Seite ohne Fremdverbindung (E15). */
.karte{display:block;text-decoration:none;margin:0}
.karte img{width:100%;height:auto;border:1px solid var(--linie);border-radius:var(--r-klein)}
.karte-aktion{margin:.8rem 0 0}
.karte-aktion .knopf{align-self:start}
/* Adresse und QR Code nebeneinander, der QR nur wo Platz ist */
.adresszeile{display:grid;gap:1rem;align-items:start}
.adresszeile p{margin:0}
/* Adresse und QR nebeneinander, Karte darunter ueber die volle Breite.
   Beige hinterlegt wie die uebrigen Kaesten, damit sich der Block vom
   Fliesstext absetzt. */
.anfahrt{display:grid;gap:1.4rem;align-items:start;margin-bottom:1.4rem;
 background:var(--flaeche);border-radius:var(--r-gross);padding:1.3rem}
.anfahrt .hinweiszeile{margin-bottom:0}
/* Karte links mit dem Knopf darunter, Fotos rechts. Untereinander schieben
   zwei Querformate den Inhalt aus dem sichtbaren Bereich. */
.standortbilder{display:grid;gap:1.2rem;margin-bottom:.4rem;align-items:stretch}
/* Spalte als Saeule, damit der Knopf per margin-top:auto auf der Unterkante
   sitzt, also auf Hoehe der Miniaturleiste gegenueber. */
.standort-karte{display:flex;flex-direction:column}
.standort-karte .karte-aktion{margin-top:auto;padding-top:.8rem}
/* Gleiches Seitenverhaeltnis wie die Fotos, damit beide Spalten gleich hoch
   beginnen. Ohne das richtet sich die Karte nach ihren eigenen Massen. */
.karte img{aspect-ratio:2/1;object-fit:cover}
.fotoauswahl figure{margin:0}
.fotoauswahl img{width:100%;height:auto;border-radius:var(--r-klein)}
.fotoauswahl figcaption{font-size:13px;color:var(--neben);margin-top:.4rem}
/* Erst wenn das Modul greift, wird aus der Bilderreihe ein Umschalter */
.fotoauswahl-aktiv figure[hidden]{display:none}
.fotoauswahl-aktiv img{aspect-ratio:2/1;object-fit:cover}
.fotoauswahl-leiste{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.fotoauswahl-knopf{padding:0;border:2px solid var(--linie);border-radius:var(--r-klein);
 background:none;line-height:0;cursor:pointer}
.fotoauswahl-knopf img{width:64px;height:48px;object-fit:cover;border-radius:4px}
.fotoauswahl-knopf[aria-current="true"]{border-color:var(--akzent)}
.fotoauswahl-knopf:hover{border-color:var(--akzent)}
.anschrift{font-size:18px;margin:0 0 .8rem}
.anschrift strong{font:700 1.2rem 'Poppins',sans-serif}
@media (min-width:768px){
 .held .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center}
 .held-bild{justify-self:center;width:100%;margin:0}
 .standort{grid-template-columns:1.2fr .8fr}
}

/* Produktdetail */
.krume{font-size:14px;color:var(--neben);padding:1rem 0 .4rem}
.krume a{color:var(--orange-text)}
.produkt{display:grid;gap:1.6rem;padding-bottom:2.5rem}
.produkt-bild{background:var(--flaeche);border-radius:var(--r-gross);padding:1.5rem}
.produkt-bild .platz-bild{aspect-ratio:1;border-color:var(--linie)}
.produkt-bild .foto,.produkt-bild picture.foto{height:auto;aspect-ratio:1;background:var(--grund);border-radius:var(--r-klein);padding:1rem}
.produkt h1{font-size:clamp(1.7rem,5vw,2.4rem);margin-bottom:.2rem}
.produkt-marke{color:var(--neben);font-size:15px}
.produkt-fakten{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.35rem;font-size:16px}
.produkt-fakten dt{color:var(--neben);font-size:14px}
.produkt-fakten div{display:flex;gap:.6rem;justify-content:space-between;
 border-bottom:1px solid var(--linie);padding:.45rem 0}
.produkt-fakten dd{margin:0;font-weight:600;text-align:right}
/* Die Herkunft bringt ihre Flagge mit (E86). Sie sitzt rechts vom Namen und
   damit am Zeilenende, wie in der Kachelkopfzeile. Eigene Huelle statt :has am
   Wert: das Markup steht ohnehin an einer Stelle, und die Regel gilt dann auch
   dort, wo :has fehlt. Etwas kleiner als in der Kachel, sonst zieht das Bild
   die Zeile der Faktentabelle auseinander. */
.mit-flagge{display:inline-flex;align-items:center;gap:.4rem}
/* Groesser als die 1,25 Zeilenhoehen der Kachel (E89). Die Faktentabelle ist
   die Stelle, an der die Herkunft nachgeschlagen wird, in der Kachel ist sie
   eine Nebenangabe im Vorbeigehen. Bei 16px Zeilenschrift sind das rund 24
   Pixel, die Zeile traegt sie ohne hoeher zu werden. */
.mit-flagge .flagge{height:1.5em}
.preisblock{background:var(--flaeche);border-radius:var(--r-gross);padding:1.1rem 1.2rem;margin:1.2rem 0}
.preisblock .gross{font:700 1.9rem 'Poppins',sans-serif;display:block}
.preisblock .klein{font-size:14px;color:var(--neben)}
.preisblock .status{margin-top:.6rem}
.jugendhinweis{font-size:14px;color:var(--neben);margin:.7rem 0 0}
.aktionen-detail{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.bloecke{display:grid;gap:1.6rem;padding-bottom:2.5rem}
.block h2{font-size:1.25rem;margin-bottom:.3rem}
.block p{margin:0}
/* Verkostungsnotiz: vier kurze Angaben in einem Block statt in vier eigenen
   Abschnitten (E79). Beschriftung klein darueber, Wert darunter, weil die Werte
   Saetze sind und keine Zahlen. Anders als bei .produkt-fakten steht deshalb
   nichts rechtsbuendig.
   Seit E83 ist es der eine dunkle Block der Produktseite. Erst stand er auf
   cremefarbener Flaeche mit weissen Feldern (E81), das hob ihn zwar ab, machte
   ihn aber nur zu einem Kasten unter anderen. ci.md laesst genau einen dunklen
   Block je Seite zu, die Produktseite hatte keinen, und er markiert, was nicht
   uebersehen werden darf.
   Die vier Angaben stehen ohne Kasten (E84). Erst hatten sie eine weisse
   Flaeche, das waren vier harte Loecher im Block, danach eine goldene Linie,
   das waren vier Rahmen und eine fuenfte Kante zu viel. Getrennt werden sie
   jetzt allein durch Abstand und die kleine Beschriftung darueber, das reicht
   bei vier Angaben. Der Abstand des Blocks kommt aus dem Raster der Bloecke,
   deshalb hier kein eigener. */
.block-glas{padding:1.5rem 1.6rem 1.7rem;margin:0}
.block-glas h2{margin-top:0}
/* Weicheres Schriftbild (E85). Creme auf Tiefbraun steht bei 14,28 zu 1 und
   wirkt in vier Bloecken hintereinander hart. Die Werte stehen deshalb in
   Cremeneben, gemessen 8,71 zu 1, die Beschriftung in Gold, gemessen 5,19 zu 1.
   Beide liegen deutlich ueber den geforderten 4,5 zu 1. Das Gold sass vorher in
   den vier Rahmen, es bleibt der Seite damit erhalten, ohne vier Kaesten zu
   brauchen. */
.glasnotiz{margin:.2rem 0 0;display:grid;gap:1.1rem}
.glasnotiz dt{font-size:14px;color:var(--gold);margin-bottom:.2rem}
.glasnotiz dd{margin:0;max-width:52ch;color:var(--creme-neben)}
.hinweis-daten{font-size:14px;color:var(--neben);border-left:3px solid var(--gold);padding-left:.8rem}
.kachel-wert{font-size:13px;color:var(--gold-text);font-weight:600;margin-top:.4rem}
/* Formular */
.anfrage{background:var(--flaeche);border-radius:var(--r-gross);padding:1.3rem;display:grid;gap:.9rem}
.feld{display:grid;gap:.3rem}
.feld label{font-size:15px;font-weight:600}
.opt{font-weight:400;color:var(--neben)}
.feld input,.feld select,.feld textarea{font:400 17px 'Nunito Sans',sans-serif;padding:.65rem .7rem;
 border:1px solid var(--linie);border-radius:var(--r-klein);background:#fff;color:var(--text)}
.feld input[readonly]{background:var(--flaeche);color:var(--neben)}
/* Anliegen als Leiste statt Auswahlliste. Die Optionsfelder selbst sind
   ausgeblendet, bedient wird ueber die Beschriftungen. Sie bleiben aber echte
   Formularelemente: Tastatur, Pfeiltasten und Vorlesesoftware funktionieren. */
.anliegen{border:0;padding:0;margin:0}
.anliegen legend{font-size:15px;font-weight:600;padding:0;margin-bottom:.4rem}
/* Gleich breite Pillen statt Breite nach Textlaenge: die Leiste wirkt ruhiger
   und die Auswahl liest sich als vier gleichwertige Moeglichkeiten. Die
   breiteste Beschriftung bestimmt die Spaltenbreite. */
.wahlleiste{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.wahlleiste input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wahlleiste label{font:600 15px 'Poppins',sans-serif;padding:.5rem .9rem;border-radius:999px;
 border:2px solid var(--linie);background:var(--grund);cursor:pointer;text-align:center}
.wahlleiste input:checked+label{background:var(--akzent);border-color:var(--akzent);color:var(--dunkel)}
.wahlleiste input:focus-visible+label{outline:3px solid var(--fokus);outline-offset:3px}
.wahlleiste label:hover{border-color:var(--akzent)}
.feld-paar{display:grid;gap:.9rem}
.feld-hinweis{font-size:14px;color:var(--neben);margin:-.4rem 0 0;max-width:none}
.feld-wahl{grid-template-columns:auto 1fr;align-items:start;gap:.6rem}
.feld-wahl label{font-weight:400;font-size:15px;max-width:none}
.feld-wahl input{margin-top:.25rem;width:1.15rem;height:1.15rem}
/* Diese drei erben sonst die 68 Zeichen aus der Fliesstextregel und brechen
   mitten im Satz um, obwohl das Formular breiter ist. Auf schmalen Geraeten
   brechen sie weiterhin, das ist erwuenscht. */
.form-intro{margin:0;max-width:none}
.form-fuss{font-size:13px;color:var(--neben);margin:0;max-width:none}
/* Mobil volle Breite: ein grosses Ziel am Ende einer langen Eingabestrecke.
   Am Rechner auf Inhaltsbreite, sonst bricht der Knopf die Lesekante, die
   sonst ueberall gilt. Der Vollbreitenknopf war urspruenglich keine
   Entscheidung, sondern die Voreinstellung des Rasters. */
.anfrage button{justify-self:stretch}
.koeder{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Der Abholhinweis stand bis 10.09.2026 als eigener Abschnitt mit eigener
   Ueberschrift unter dem Anfrageformular. Beides fragte dasselbe, nur zweimal.
   Jetzt steht er als Vorsatz im Anfrageabschnitt (E80). Der Weg zum Standort
   ist dort ein Verweis im Text und kein Knopf: zwei Knoepfe in einem Abschnitt,
   einer davon ein Ausgang, konkurrieren mit Anfrage senden. */
/* Abholhinweis und Weg zum Standort in einer Zeile (E84). Untereinander
   brauchten sie drei Zeilenhoehen fuer eine einzige Aussage, nebeneinander
   fuellt der Knopf den Platz, den der zweizeilige Satz rechts frei laesst.
   Auf schmalen Geraeten steht der Knopf darunter, dort ist neben zwei Zeilen
   Text kein Platz. */
.abholzeile{margin:0 0 1.2rem;display:grid;gap:.9rem;justify-items:start}
.produkt-abholung{max-width:62ch;margin:0}
@media (min-width:768px){
 .produkt{grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start}
 .bloecke{grid-template-columns:repeat(2,1fr);gap:1.8rem 2.5rem}
 /* Die Verkostungsnotiz steht ueber die volle Breite und zuerst: sie ist
    das, wonach am Regal gefragt wird. */
 .abholzeile{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem}
 .block-glas{grid-column:1 / -1}
 .glasnotiz{grid-template-columns:repeat(2,1fr);gap:1.3rem 3rem}
 .anfrage{padding:1.6rem}
 .feld-paar{grid-template-columns:1fr 1fr}
 .anfrage button{justify-self:start}
 .wahlleiste{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Sortimentsübersicht ---------- */
.filter{display:none}
.js .filter{display:block;background:var(--flaeche);border-radius:var(--r-gross);padding:1rem;margin-bottom:1.5rem}
.filter-reihe{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.filter label{font-size:14px;font-weight:600;display:block;margin-bottom:.2rem}
.filter select,.filter input{width:100%;font:400 16px 'Nunito Sans',sans-serif;padding:.55rem .6rem;
 border:1px solid var(--linie);border-radius:var(--r-klein);background:#fff;color:var(--text)}
.filter-fuss{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;margin-top:.9rem}
.treffer{font-size:15px;font-weight:600}
.zuruecksetzen{background:none;border:2px solid var(--linie);border-radius:var(--r-klein);
 font:600 15px 'Poppins',sans-serif;padding:.5rem .9rem;color:var(--orange-text)}
.leer{background:var(--flaeche);border-radius:var(--r-gross);padding:1.5rem;text-align:center}
.leer p{margin-inline:auto}
.gruppe{padding-top:1rem}
.gruppe-titel{font-size:1.4rem;margin-bottom:.2rem}
.gruppe-satz{color:var(--neben);margin-bottom:1.2rem}
.jugend-preise{font-size:14px;color:var(--neben);margin:0 0 1.5rem}
.kachel[hidden]{display:none}
.sprung{position:absolute;left:-9999px;top:0;background:var(--dunkel);color:var(--creme);
 padding:.7rem 1rem;border-radius:0 0 var(--r-klein) 0;font-weight:700;z-index:10}
.sprung:focus{left:0}
.filter-wahl{display:flex;align-items:center;gap:.5rem}
.filter-wahl input{width:1.15rem;height:1.15rem}
.filter-wahl label{margin:0;font-weight:400;font-size:15px}
.gruppe{grid-column:1 / -1;padding-top:1.2rem}
.gruppe:first-child{padding-top:0}
.gruppe[hidden]{display:none}

/* ---------- Textseiten ---------- */
.textseite{padding-bottom:2.5rem}
.textseite h1{font-size:clamp(1.8rem,6vw,2.6rem);margin-top:1.2rem}
.textseite h2{font-size:1.35rem;margin-top:2rem}
/* Abschnittstitel einer Textseite, also nur die unmittelbaren Kinder. Verschachtelte
   h2 in dunklem Block, Paket oder Kontaktblock bleiben unberuehrt.
   Zwei Aenderungen am 09.09.2026 (E58): 1,6 rem statt 1,35, das ist der Wert fuer
   Abschnittstitel aus ci.md Abschnitt 3, und eine duenne Goldlinie darueber. Ohne
   sie lasen sich aufeinanderfolgende Abschnitte als ein durchlaufender Text, der
   Titel wirkte wie eine fette erste Zeile. Linie in Gold, nicht grau in grau
   (ci.md Abschnitt 4). */
.textseite>h2{font-size:1.6rem;margin-top:2.8rem;padding-top:1.6rem;
 border-top:1px solid var(--gold)}
.textseite>h2:first-child{margin-top:1.2rem;padding-top:0;border-top:0}
.textseite ul{margin:0 0 1em;padding-left:1.2rem}
.textseite li{margin-bottom:.3rem;max-width:68ch}
.marken{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.5rem}
.marken a{color:var(--orange-text);font-weight:600}
/* ---------- Wissensbereich (E59 bis E61) ---------- */
/* Sprungleiste der Erklaerstrecken. Klebend am oberen Rand, damit sie beim
   Lesen erreichbar bleibt. Sprungmarken, kein Filter: die Kapitel bauen
   aufeinander auf. Ohne JavaScript fehlt nur die Hervorhebung. */
.sprungleiste{position:sticky;top:0;z-index:5;margin:1.4rem 0 2rem;padding:.7rem 0;
 background:var(--grund);border-bottom:1px solid var(--gold)}
.sprungleiste{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.sprungleiste ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
/* Rueckweg ins Nachschlagewerk. Traegt die Knopfauszeichnung aus ci.md, weil er
   eine andere Aufgabe hat als die Pillen daneben: er verlaesst die Seite, sie
   springen nur darin herum. Braun mit Creme, beim Ueberfahren und bei
   Tastaturfokus Orange mit Tiefbraun, gemessen 4,80 zu 1. Ueberschrieben werden
   hier nur Groesse und Innenabstand, damit der Knopf die klebende Leiste nicht
   auf die doppelte Hoehe treibt. */
.sprung-zurueck{font-size:15px;padding:.45rem .9rem;white-space:nowrap;line-height:1.3}
.sprungleiste li{margin:0;max-width:none}
/* Nur die Verweise in der Liste sind Pillen. Der Rueckweg daneben traegt die
   Knopfauszeichnung und darf davon nicht getroffen werden, sonst gewinnt diese
   Regel gegen .knopf und der Knopf sieht wieder aus wie eine Pille. */
.sprungleiste li a{display:inline-block;text-decoration:none;font:600 15px 'Poppins',sans-serif;
 color:var(--text);background:var(--flaeche);border:1px solid var(--linie);
 border-radius:999px;padding:.35rem .8rem}
/* Ueberfahren zeichnet nur den Rand, gefuellt bleibt dem aktiven Abschnitt
   vorbehalten. Sonst waeren beide Zustaende nicht zu unterscheiden. */
.sprungleiste li a:hover,.sprungleiste li a:focus-visible{background:var(--grund);
 color:var(--orange-text);border-color:var(--akzent)}
/* Aktiver Abschnitt in Orange mit Tiefbraun, gemessen 4,80 zu 1. Orange ist
   nach ci.md die Flaeche fuer aktive Zustaende, Tiefbraun bleibt dem Knopf
   daneben vorbehalten. Zusaetzlich zur Farbe die staerkere Schrift, Zustaende
   nie allein ueber Farbe. */
.sprungleiste li a[aria-current="true"]{background:var(--akzent);color:var(--dunkel);
 border-color:var(--akzent);font-weight:700}
/* Radar (E97, umgebaut mit E98 bis E100). Das Werkzeug ist Komfort, ohne
   JavaScript bleibt die Seite vollstaendig lesbar. Gleiche Regel wie bei der
   Filterleiste des Nachschlagewerks: erscheinen darf es erst, wenn das Modul
   laeuft. */
.radarwerkzeug{display:none}
.js .radarwerkzeug{display:block;border:0;padding:0;margin:1.2rem 0 1.6rem}
.js .nur-ohne-js{display:none}
.radarwerkzeug fieldset{border:0;padding:0;margin:0}
/* Netz und Steuerung in einem Stueck, dem einen dunklen Block der Seite
   (ci.md Abschnitt 4). Das Werkzeug ist das, um dessentwillen die Seite
   besteht, und es soll auch so aussehen (E100). */
.radar-pult{display:grid;gap:1.4rem;padding:1.3rem;margin:0}
.radar-pult legend{font:600 15px 'Poppins',sans-serif;color:var(--creme);padding:0;
 margin-bottom:.6rem}
.radar-netz{width:100%;max-width:100%;height:auto;display:block;margin:0 auto}
/* Ring und Speiche zurueckhaltend: sie sollen die Flaechen tragen, nicht mit
   ihnen konkurrieren. Gold ist hier frei geworden, es gehoert seit E102 der
   Linie des besten Treffers. */
.radar-ring,.radar-speiche{fill:none;stroke:var(--linie);stroke-width:1;opacity:.22}
/* Orange gehoert dem Ausgangsprodukt (E102). Es ist das, was der Besucher
   einstellt, und dieselbe Farbe traegt der Griff der Schieberegler daneben.
   Der beste Treffer steht in Gold und gestrichelt: zwei Farben und zwei
   Stricharten, die Unterscheidung haengt nicht an der Farbe allein. */
.radar-profil-flaeche{fill:var(--akzent);fill-opacity:.3;stroke:var(--akzent);stroke-width:2}
.radar-treffer-flaeche{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:6 4}
/* Zwei Zeilen unter dem Netz, jede in der Farbe ihrer Linie (E101): weiss
   gestrichelt der Ausgangspunkt, orange gefuellt der beste Treffer. Orange auf
   Tiefbraun ist mit 4,80 zu 1 gemessen, Creme mit 14,28. Die Beschriftung
   davor traegt die Unterscheidung im Wort, nicht nur in der Farbe. */
/* Zwei Zeilen, senkrecht ausgerichtet: Beschriftung in der ersten Spalte, Name
   in der zweiten. Nebeneinander wanderte der Name mit der Laenge der
   Beschriftung (E102). */
.radar-netzlegende{margin:.9rem 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);
 gap:.3rem .7rem;align-items:baseline}
.radar-netzlegende div{display:contents}
.radar-netzlegende dt{grid-column:1;font-size:14px;color:var(--creme-neben)}
.radar-netzlegende dd{grid-column:2;margin:0;font:700 1.25rem 'Poppins',sans-serif}
.radar-quelle dd{color:var(--akzent)}
/* Hervorgehobener Verweis im Fliesstext. Orange und fett, damit er im Absatz
   nicht untergeht (E105). Der Textton des Orange, gemessen gegen Weiss. */
.verweis-stark{color:var(--orange-text);font-weight:700}
.radar-beste dd{color:var(--gold)}
.radar-netzlegende:empty{display:none}
/* Achsennamen im Netz, gemessen 8,71 zu 1 auf Tiefbraun. Nicht in Gold: das
   traegt seit E102 die Linie des besten Treffers. */
.radar-beschriftung{font:600 11px 'Poppins',sans-serif;fill:var(--creme-neben)}
/* Auswahl als Pillen, gleiche Bauform wie im Nachschlagewerk. Das Optionsfeld
   selbst ist nur fuer Vorlesesoftware da, sichtbar ist die Beschriftung. */
/* Zwei gleich breite Pillen nebeneinander, das Auswahlfeld darunter ueber die
   volle Breite (E101). Vorher richteten sie sich nach der Laenge ihres Textes
   und standen unterschiedlich breit nebeneinander. */
.radar-modus-reihe{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.radar-pille input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.radar-pille label{display:block;text-align:center;font:600 15px 'Poppins',sans-serif;
 cursor:pointer;color:var(--creme-neben);background:transparent;border:1px solid var(--gold);
 border-radius:999px;padding:.45rem .9rem}
.radar-pille label:hover{background:rgba(255,255,255,.08);color:var(--creme)}
.radar-pille input:checked+label{background:var(--akzent);color:var(--dunkel);
 border-color:var(--akzent);font-weight:700}
.radar-pille input:focus-visible+label{outline:3px solid var(--akzent);outline-offset:2px}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
 white-space:nowrap}
/* Unter den Pillen, so breit wie beide zusammen. Im Reglermodus wird es nur
   unsichtbar und nicht entfernt, sonst ruecken die Regler darunter nach oben
   (E101). Unsichtbar heisst zugleich, dass es nicht mehr angesprungen wird. */
.radar-produktwahl{grid-column:1 / -1}
.radar-produktwahl select{width:100%;font:400 16px 'Nunito Sans',sans-serif;
 padding:.45rem .6rem;border:1px solid var(--gold);border-radius:var(--r-klein);
 background:var(--grund);color:var(--text)}
.radar-verborgen{visibility:hidden}
/* Der Weg ins andere Radar steht neben dem Vorspann und damit vor dem Werkzeug
   (E106). Mit N15 bleibt das GINradar aus der Hauptnavigation, also ist dieser
   Knopf der einzige Weg dorthin fuer jemanden, der keine Ginproduktseite
   ansieht. Er gehoert nicht ins Steuerpult: das gehoert der Auswahl, ein
   Wechsel auf eine andere Seite hat darin nichts zu suchen. Am Seitenende steht
   er zusaetzlich, fuer alle, die erst nach dem Ausprobieren weitersuchen. */
.radar-kopfzeile{display:grid;gap:.9rem;justify-items:start;margin-bottom:1.2rem}
.radar-kopfzeile .vorspann{margin:0}
/* Je Achse eine Zeile: Name, Balken, Wort. Untereinander brauchten die drei
   Angaben mehr Hoehe als das Netz daneben (E99). */
.radar-achsenfeld{display:grid;gap:.7rem;align-content:start;margin-top:1.2rem}
.radar-achse{display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem .8rem;align-items:center}
.radar-achse label{font-size:14px;color:var(--gold)}
.radar-achse-wort{font:600 1rem 'Poppins',sans-serif;color:var(--creme)}
/* Eigene Spur, weil die Voreinstellung des Browsers auf Tiefbraun kaum zu sehen
   ist. Feste Hoehe, damit die Greiffaeche verlaesslich bleibt. */
.radar-achse input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:1.6rem;
 background:transparent;cursor:pointer;margin:0;accent-color:var(--akzent)}
.radar-achse input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
 background:rgba(255,255,255,.22)}
.radar-achse input[type="range"]::-moz-range-track{height:6px;border-radius:3px;
 background:rgba(255,255,255,.22)}
.radar-achse input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;
 height:18px;border-radius:50%;background:var(--akzent);margin-top:-6px}
.radar-achse input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:0;
 border-radius:50%;background:var(--akzent)}
.radar-ergebnis:empty{display:none}
.radar-gruppe{margin-top:2rem}
.radar-gruppe h2{margin-bottom:.2rem}
.radar-karten{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:1rem}
.radar-karte{background:var(--flaeche);border-radius:var(--r-gross);
 padding:1.1rem 1.2rem;border-bottom:4px solid var(--akzent)}
.radar-gruppe-gegen .radar-karte{border-bottom-color:var(--gold)}
.radar-karte-name{font:700 1.15rem 'Poppins',sans-serif;color:var(--text);display:inline-block;
 margin-bottom:.2rem}
.radar-karte-marke{font-size:14px;color:var(--neben);margin:0 0 .5rem}
.radar-karte-preis{font:700 1.05rem 'Poppins',sans-serif;color:var(--preis);margin:0 0 .3rem}
/* Uebereinstimmung als Balken und als Zahl (E100). progress statt Eigenbau: es
   braucht kein style Attribut und wird als Fortschritt angesagt. */
.radar-karte-wert{display:grid;gap:.25rem;font-size:13px;color:var(--neben);margin:.6rem 0 0}
.radar-balken{-webkit-appearance:none;appearance:none;width:100%;height:8px;border:0;
 border-radius:4px;background:var(--linie);accent-color:var(--akzent);overflow:hidden}
.radar-balken::-webkit-progress-bar{background:var(--linie);border-radius:4px}
.radar-balken::-webkit-progress-value{background:var(--akzent);border-radius:4px}
.radar-balken::-moz-progress-bar{background:var(--akzent);border-radius:4px}
.radar-gruppe-gegen .radar-balken::-webkit-progress-value{background:var(--gold)}
.radar-gruppe-gegen .radar-balken::-moz-progress-bar{background:var(--gold)}
.auszeichnung{margin-bottom:2rem}

/* Rezensionen (E113, umgebaut mit E115). Sterne als kleines SVG, kein
   Schriftzeichen: das Sternsymbol wird je nach Geraet unterschiedlich
   gezeichnet, teils bunt als Emoji. */
.sterne{display:inline-flex;gap:.1rem;line-height:1}
.stern{width:1.05em;height:1.05em;fill:var(--gold);flex:none}
.block-dunkel .stern{fill:var(--akzent)}
/* Vertrauenszeile im Heldenbereich (E116). Unter den beiden Knoepfen, also
   dort, wo die Entscheidung faellt. Als Verweis auf /rezensionen, die Quelle
   steht im Text, damit niemand sie fuer eine eigene Auszeichnung haelt. */
.held-vertrauen{margin:1.1rem 0 0;max-width:none}
.held-vertrauen a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;
 text-decoration:none;color:var(--neben);font-size:15px}
.held-vertrauen strong{color:var(--text)}
.held-vertrauen a:hover span,.held-vertrauen a:focus-visible span{text-decoration:underline}
.stimmen-abschnitt>p{max-width:62ch}
/* Vorspann links, Kennzahl rechts daneben (E118). Ueber die ganze Breite
   gesetzt las sich die Zahl wie ein angefangener Satz. Auf schmalen Geraeten
   steht sie darunter, dort ist neben zwei Zeilen Text kein Platz. */
.rezension-kopf{display:grid;gap:.9rem;margin-bottom:1.6rem}
.rezension-kopf .vorspann{margin:0}
.rezension-note{display:grid;gap:.15rem;justify-items:start}
.rezension-note .sterne{font-size:1.2rem}
.rezension-wert{font:600 1.05rem 'Poppins',sans-serif;margin:0;max-width:none}
.rezension-wert strong{font-size:1.35rem;color:var(--orange-text)}
.rezension-stand{font-size:13px;color:var(--neben);margin:0;max-width:none}
/* Aufruf zum Bewerten, gleiche Bauart wie der Anfahrtsblock auf /standort:
   Text links, Code rechts. Er steht oben, weil wer die Seite aufruft den
   Besuch gerade hinter sich hat. */
.bewerten{display:grid;gap:1.2rem;align-items:start}
/* Goldener Rand nur im dunklen Block, auf heller Flaeche bleibt die feine
   Linie. Dieselbe Bauform traegt seit E121 auch die Visitenkarte auf
   /standort, dort auf hellem Grund. */
.block-dunkel .qr img{border-color:var(--gold)}
.block-dunkel .qr figcaption{color:var(--creme-neben)}
/* Zitatkarten: Sterne oben, Text in der Mitte, Name unten rechts. Die Karten
   einer Reihe sind gleich hoch, der Name wird deshalb mit margin-top:auto an
   den unteren Rand gezogen und steht in allen Karten auf einer Linie. */
/* Kennzahl: die Zahl gross, die Erklaerung klein daneben. Sie ist das, was der
   Besucher mitnehmen soll (E119). */
.kennzahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;
 margin:1.4rem 0 1.2rem;max-width:none}
.kennzahl strong{font:700 2.2rem 'Poppins',sans-serif;color:var(--orange-text);line-height:1}
.kennzahl span{color:var(--neben)}
.stimmen{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.stimme{display:flex;flex-direction:column;background:var(--flaeche);
 border-radius:var(--r-gross);padding:1.3rem 1.4rem 1.1rem;max-width:none;
 border:1px solid var(--linie);border-bottom:4px solid var(--gold)}
/* Luft zwischen Sternen und Zitat: die Anfuehrung reicht mit ihrer Oberkante
   nach oben und ruecke sonst zu nah an die Sterne (E117). */
.stimme .sterne{margin-bottom:1.2rem}
.stimme blockquote{margin:0;position:relative;padding-left:1.9rem}
/* Anfuehrung als Zeichen, nicht als Bild. Gold und gross genug, um die Karte
   zu tragen, aber hinter dem Text, deshalb aria-hidden ueber content. */
.stimme blockquote::before{content:"\201C";position:absolute;left:0;top:-.55rem;
 font:700 3rem 'Poppins',sans-serif;color:var(--gold);opacity:.5;line-height:1}
.stimme blockquote p{margin:0;max-width:none}
.stimme-quelle{margin:auto 0 0;padding-top:1rem;text-align:right;
 font:600 14px 'Poppins',sans-serif;color:var(--neben)}

/* Sprungziele freihalten (E94). Wo eine Leiste am oberen Rand klebt, scrollt
   ein Anker sein Ziel darunter. main.js misst die Hoehe der Leiste und setzt
   sie als --klebehoehe, hier wird damit gerechnet. Die Regel gilt fuer jedes
   Element mit einer Kennung, sie wirkt ausschliesslich beim Springen und
   schadet dort nicht, wo keine Leiste klebt: dann sind es 0,8 rem Luft ueber
   dem Ziel, und die will man ohnehin. */
:where([id]){scroll-margin-top:calc(var(--klebehoehe, 0px) + .8rem)}

/* Filterleiste des Nachschlagewerks. Ohne JavaScript nicht sichtbar, dann
   stehen alle Eintraege alphabetisch untereinander. */
.glossarfilter{display:none}
.js .glossarfilter{display:block;position:sticky;top:0;z-index:5;
 background:var(--grund);padding:.9rem 0;margin:1.4rem 0 1.6rem;
 border-bottom:1px solid var(--gold)}
.pillen{display:flex;flex-wrap:wrap;gap:.5rem}
.pille{font:600 15px 'Poppins',sans-serif;background:var(--flaeche);color:var(--text);
 border:1px solid var(--linie);border-radius:999px;padding:.35rem .8rem;cursor:pointer}
.pille:hover,.pille:focus-visible{background:var(--akzent);color:var(--dunkel);
 border-color:var(--akzent)}
.pille[aria-pressed="true"]{background:var(--dunkel);color:var(--creme);border-color:var(--dunkel)}
.glossarsuche{margin-top:.8rem;max-width:22rem}
.glossarsuche label{font-size:14px;font-weight:600;display:block;margin-bottom:.2rem}
.glossarsuche input{width:100%;font:400 16px 'Nunito Sans',sans-serif;padding:.55rem .6rem;
 border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--grund)}
.glossar-treffer{font-size:14px;color:var(--neben);margin:.6rem 0 0}
/* Eintrag. Duenne Goldlinie zwischen den Eintraegen statt Kaesten: achtzig
   gerahmte Bloecke untereinander waeren eine Wand. */
.glossar{display:grid}
.eintrag{padding:1.4rem 0;border-top:1px solid var(--linie)}
.eintrag:first-child{border-top:0;padding-top:.4rem}
.eintrag[hidden]{display:none}
.eintrag h2{font-size:1.35rem;margin:0 0 .3rem}
.eintrag p{margin:0 0 .7rem;max-width:68ch}
.eintrag p:last-child{margin-bottom:0}
.eintrag-marken{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.eintrag-marke{font:600 12px 'Poppins',sans-serif;color:var(--gold-auf-grund);
 border:1px solid var(--gold);border-radius:999px;padding:.1rem .55rem}
.eintrag-mehr,.eintrag-produkte{font-size:15px}
.eintrag-mehr a,.eintrag-produkte a{color:var(--orange-text);font-weight:600}
.eintrag-produkte{color:var(--neben)}
.eintrag-produkte span{font-weight:600;color:var(--text)}
/* Gegenrichtung auf der Produktseite (E87), gleiche Bauart wie die
   Produktzeile im Nachschlagewerk. Sie steht unter dem Raster der Bloecke und
   nicht darin, sonst haengt sie in einer der beiden Spalten. */
.glossarzeile{font-size:15px;color:var(--neben);margin:0 0 2.5rem}
.glossarzeile span{font-weight:600;color:var(--text)}
.glossarzeile a{color:var(--orange-text);font-weight:600}
/* Zwei Einstiege statt drei wie auf der Startseite: gleiche Bauart, halbe
   Anzahl. Der Abstand nach unten ist kleiner, weil direkt darunter die
   Filterleiste folgt und nicht der naechste Abschnitt. */
.einstieg-zwei{padding-bottom:.6rem}
.platzhalter{border-left:3px solid var(--gold);background:var(--flaeche);padding:.7rem .9rem;
 border-radius:0 var(--r-klein) var(--r-klein) 0;font-size:15px;color:var(--neben);margin:0 0 1em}
/* Zwei Klassen, sonst gewinnt .textseite ul weiter unten mit hoeherer
   Spezifitaet und legt padding-left:1.2rem darueber. Die Kachelreihe stand
   dadurch bisher um gut ein Zeichen eingerueckt neben dem uebrigen Text. */
.textseite .pakete{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:1.2rem}
/* Fuenf Zeilen, die Merkmalliste bekommt den ganzen Rest. Dadurch stehen
   Preis, Zusatz und Aktionszeile in allen drei Kacheln auf derselben Hoehe,
   auch wenn ein Paket ein Merkmal mehr traegt als das andere. Ohne 1fr richtet
   sich jede Kachel nach ihrem eigenen Inhalt und die Preise treppen. */
.paket{position:relative;background:var(--flaeche);border-radius:var(--r-gross);padding:1.3rem;
 border-bottom:4px solid var(--akzent);display:grid;grid-template-rows:auto 1fr auto auto auto}
.paket h2{margin-top:0;font-size:1.3rem}
.textseite .paket ul{list-style:none;padding:0;margin:0 0 1rem}
.paket li{padding:.3rem 0;border-bottom:1px solid var(--linie);font-size:16px;max-width:none}
.paket-preis{font:700 1.2rem 'Poppins',sans-serif;display:block}
/* Reservierte Zeile, auch wo kein Zusatz steht. Sonst rutscht die Preiszeile
   der Kachel ohne Zusatz um eine Zeilenhoehe nach unten und die Ausrichtung
   der Zeile darueber ist wieder dahin. */
.paket-mwst{font-size:14px;color:var(--neben);display:block;min-height:1.5em}
/* Eine Flaeche mit Rahmen ist als Ganzes anklickbar, das verlangt E29
   ausdruecklich auch fuer die Verkostungspakete. Der Verweis liegt auf der
   Aktionszeile und wird per ::after ueber die ganze Kachel gezogen: der Name
   des Verweises bleibt dadurch kurz und sagt trotzdem, wohin er fuehrt, statt
   die halbe Kachel vorzulesen. */
.paket-aktion{margin-top:.9rem;font:700 16px 'Poppins',sans-serif;color:var(--orange-text);
 text-decoration:underline;justify-self:start}
.paket-aktion::after{content:"";position:absolute;inset:0;border-radius:var(--r-gross)}
.paket:hover .paket-aktion{text-decoration-thickness:3px}
/* Ablauf in vier Schritten (E68). Geordnete Liste, die Reihenfolge ist die
   Aussage. Die Ziffer zeichnet ein Zaehler, nicht ein Bild, und sie steht in
   Tiefbraun auf Orange, gemessen 4,80 zu 1 (ci.md Abschnitt 2). Der Schritt
   ist zusaetzlich betitelt, der Zustand haengt also nicht an der Farbe. */
.ablauf{list-style:none;counter-reset:schritt;margin:0 0 1.2rem;padding:0;display:grid;gap:1.1rem}
.ablauf li{counter-increment:schritt;display:grid;grid-template-columns:2.4rem minmax(0,1fr);
 gap:.9rem;max-width:none;margin:0}
.ablauf li::before{content:counter(schritt);grid-row:1 / span 2;width:2.4rem;height:2.4rem;
 border-radius:50%;background:var(--akzent);color:var(--dunkel);text-align:center;
 font:700 1.05rem/2.4rem 'Poppins',sans-serif}
.ablauf h3{font-size:1.1rem;margin:0 0 .2rem}
.ablauf p{margin:0;max-width:60ch}
/* Abstand nach oben, gesetzt mit E73, als der Block noch unter dem Formular
   auf /verkostungen stand: zwei cremefarbene Kaesten ohne Luft dazwischen
   lasen sich als einer mit einer Trennfuge. Seit E74 steht er nur noch auf
   /danke und /fehler, der Wert bleibt, er schadet dort nicht. */
.kontaktblock{background:var(--flaeche);border-radius:var(--r-gross);padding:1.3rem;
 margin:2.6rem 0 2rem}
/* Der Weg zum Standort ist eine Handlungsaufforderung, kein Nebensatz. Randknopf
   und nicht gefuellt, damit er nicht mit Anfrage senden darueber konkurriert,
   linksbuendig wie alle Aufforderungen der Seite (ci.md Abschnitt 4). */
.kontaktblock .aktionen{margin:1.2rem 0 0}
.kontaktblock h2{margin-top:0}
/* Vorspann einer Textseite: eine Zeile groesser als der Fliesstext und knapper
   gesetzt, damit er als Einordnung gelesen wird und nicht als erster Absatz. */
.textseite .vorspann{font-size:1.1rem;max-width:60ch}
/* Portraet auf /ueber-uns, einziges Foto der Seite (E54). Es steht im Textfluss
   und wird umflossen, nicht in einer eigenen Spalte (E58). Zwei Spalten liessen
   ueber und unter dem Bild eine leere Flaeche stehen, weil der Text deutlich
   hoeher ist als das Bild. Umflossen beginnt es auf Hoehe des ersten Absatzes
   und der Text schliesst darunter wieder auf. */
.portraet{margin:0 0 .4rem}
.portraet::after{content:"";display:block;clear:both}
.portraet p:last-child{margin-bottom:0}
.portraet-bild{margin:0 0 1.2rem}
.portraet-bild img{width:100%;height:auto;display:block;border-radius:var(--r-gross)}
/* Partner als Karten: Logo, Name, ein Satz, die Flaschen von dort. Beige
   Flaeche wie der Kontaktblock, bewusst ohne Rahmen: eine Flaeche mit Rahmen
   waere nach E29 als Ganzes anklickbar, hier fuehren aber zwei verschiedene
   Ziele heraus, die Website des Partners und die Produktseiten. */
.partnerliste{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1.2rem}
/* Der Deckel von 68 Zeichen aus .textseite li ist hier falsch, er hat die Karte
   auf gut die halbe Inhaltsbreite gestaucht. Gleiche Spezifitaet, spaetere Regel. */
.textseite .partnerliste li{max-width:none}
.partner{display:grid;gap:1.1rem;align-items:center;
 background:var(--flaeche);border-radius:var(--r-gross);padding:1.3rem}
.partner-text h3{font-size:1.2rem;margin-bottom:.3rem}
.partner-text h3 a{color:var(--orange-text)}
.partner-text p{margin:0 0 .5rem;max-width:62ch}
.partner-text p:last-child{margin-bottom:0}
/* Weisse Flaeche unter dem Logo: fremde Marken sind auf Weiss gezeichnet und
   verlieren auf Creme ihre Kanten. Feste Hoehe, damit mehrere Partner in einer
   Reihe stehen, egal wie hoch ihr Logo ist. */
.partner-logo{background:var(--grund);border-radius:var(--r-klein);padding:1rem;
 display:grid;place-items:center;min-height:7rem}
/* Fremde Marken werden nie verzerrt. width und height stehen beide auf auto,
   sonst greift bei einer der beiden Begrenzungen die Angabe aus dem Markup und
   das Logo wird gestaucht. object-fit ist der zweite Riegel fuer den Fall, dass
   spaeter doch einmal eine feste Groesse gesetzt wird. */
.partner-logo img{width:auto;height:auto;max-width:100%;max-height:5rem;object-fit:contain}
.partner-produkte{font-size:15px;color:var(--neben)}
.partner-produkte span{font-weight:600}
.partner-produkte a{color:var(--orange-text);font-weight:600}
.qr{margin:0;width:150px}
.qr img{width:100%;height:auto;border:1px solid var(--linie);border-radius:var(--r-klein);background:#fff}
.qr figcaption{font-size:12px;color:var(--neben);margin-top:.4rem;line-height:1.35;text-align:center}
@media (min-width:768px){
 .textseite .pakete{grid-template-columns:repeat(3,1fr)}
 /* Mehr Platz fuer das Netz, weniger fuer die Steuerung (E102). Die Balken
    sind kuerzer, fuenf Stufen brauchen keine breite Spur. */
 /* Oben ausgerichtet, damit die Frage auf einer Hoehe mit der obersten
    Achsenbeschriftung beginnt (E103). Der Rahmen des Netzes ist oben knapp
    geschnitten, der kleine Ausgleich hier faengt den Rest auf. */
 .radar-pult{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.8rem;align-items:start;
  padding:1.6rem 1.8rem}
 .radar-steuerung{margin-top:.2rem}
 .radar-kopfzeile{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem}
 .stimmen{grid-template-columns:repeat(3,1fr);gap:1.2rem}
 /* Eine einzelne Karte fuellt nicht drei Spalten, sie bekommt eine eigene
    Breite statt im linken Drittel zu stehen. */
 .stimmen-einzeln{grid-template-columns:minmax(0,42rem)}
 .bewerten{grid-template-columns:minmax(0,1fr) auto;gap:2rem}
 .rezension-kopf{grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start}
 .rezension-note{justify-items:end;text-align:right}
 /* Name, Balken, Wort in einer Zeile. Das Wort bekommt eine feste Breite,
    sonst wandert der Balken mit der Laenge des Wortes. */
 .radar-achse{grid-template-columns:6.5rem minmax(0,1fr) 8.5rem;gap:.5rem .7rem}
 .radar-achse input[type="range"]{max-width:11rem}
 .radar-achse label{margin:0}
 .radar-karten{grid-template-columns:repeat(3,1fr)}
 /* Senkrecht mittig statt oben: der Text ist deutlich hoeher als das Bild,
    oben ausgerichtet entsteht darunter ein leeres Feld von halber Texthoehe. */
 /* Etwas Luft nach oben, damit die Oberkante des Bildes mit der Oberkante der
    ersten Textzeile fluchtet und nicht mit deren Zeilenbox. */
 .portraet-bild{float:right;width:44%;margin:.35rem 0 1.4rem 2.2rem}
 .partner{grid-template-columns:13rem minmax(0,1fr);gap:1.6rem}
}

/* ---------- Kopfbereich mit Video ---------- */
.held-video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
 border-radius:var(--r-gross);background:var(--flaeche)}
.held-video[controls]{aspect-ratio:auto}

/* ---------- Galerie auf der Produktseite ---------- */
/* Produktgalerie, gleiche Bauart wie die Standortfotos, andere Proportion
   (E81). Der Zuschnitt auf 2 zu 1 aus .fotoauswahl-aktiv wuerde einer
   freigestellten Flasche den Hals abschneiden. Das Produktfoto wird deshalb
   eingepasst, die Galeriefotos fuellen die Flaeche.
   Quadratisch statt 3 zu 4 (E92): seit E90 fuehren die Galeriebilder, und die
   sind querformatig. In einem Hochformat verloeren sie links und rechts
   kraeftig. Die Flasche verliert nichts, sie wird eingepasst und fuellt in
   einem Quadrat weiterhin die volle Hoehe. */
.produkt-bild .fotoauswahl-aktiv img{aspect-ratio:1;object-fit:contain}
.produkt-bild .fotoauswahl-aktiv .galeriebild img{object-fit:cover}
.produkt-bild .galeriebild{background:var(--grund);border-radius:var(--r-klein)}
/* Miniaturen quadratisch wie die grosse Flaeche (E93). Sie waren hochformatig
   und stammten aus der Zeit vor E92. Der Zuschnitt folgt dem grossen Bild: die
   Flasche wird eingepasst, die Fotos fuellen. */
.produkt-bild .fotoauswahl-knopf img{width:56px;height:56px;object-fit:contain;
 background:var(--grund)}
.produkt-bild .knopf-galeriebild img{object-fit:cover}
/* Gleiche Aussenhoehe fuer beide Bildarten (E93). Die Flasche steckt in einer
   picture.foto, und die traegt aus der allgemeinen Regel einen unteren Abstand
   von 0,9 rem. Die Galeriebilder haben keinen, dadurch sprang die Hoehe beim
   Umschalten um genau diesen Wert. */
.produkt-bild .fotoauswahl .foto{margin-bottom:0}
.produkt-bild .galeriebild img{border:1px solid var(--linie)}