/* VINORUM Marketing-Site — gemeinsame Basis aller Seiten.
   Design-Tokens und Shell (Topbar, Burger, Footer-Umfeld) aus dem Design-Handoff;
   Layout-Werte stehen 1:1 als Inline-Styles im Markup, Hover-Zustände hier als Klassen. */

html {
  scroll-behavior: smooth;
  /* WCAG 2.4.11 „Focus Not Obscured": Anker- und Fokus-Sprünge sollen
     nicht unter dem klebenden Kopf landen. Die Topbar ist 59 px hoch;
     etwas mehr Luft dazu, damit der fokussierte Rand nicht am Kopf klebt. */
  scroll-padding-top: 76px;
}

:root {
  --hg: #FBFAF8;
  --karte: #FFFFFF;
  --karte-hover: #FDFCFA;
  --linie: #EAE5DD;
  --linie-fein: #F0ECE5;
  --linie-zart: #E3DED6;
  /* Rand fuer Bedienelemente (Formularfelder, Preisrechner-Optionen,
     Terminwunsch-Karten). --linie erreicht auf --hg nur 1,25:1 und
     verfehlt WCAG 1.4.11 (3:1 fuer nicht-textliche Kontraste). Dieses
     Grau steht auf Weiss/--hg messbar bei 3,4:1 — nur dort einsetzen,
     wo die Linie die Grenze eines Bedienelements ist. Dekorative
     Kartenraender bleiben --linie. */
  --linie-bedien: #928779;
  --tinte: #232323;
  --matt: #696561;
  --matt2: #6C665E;
  --wein: #6D2330;
  --wein-tief: #551A25;
  --zart: #FAF7F1;
  --band: #EFE9D8;
  /* Gold traegt Flaechen, Raender und Schmuck. Fuer Zeichen ist es zu
     hell: #D8BF92 auf Papier sind gemessen 1,71:1. Fuer Text auf hellem
     Grund gibt es deshalb den dunklen Bruder - 5,9:1 auf Weiss, 5,7:1
     auf --hg, 5,0:1 auf --band. Auf dunklem Grund bleibt #D8BF92. */
  --gold-tief: #7E5F1F;
  --ok2: #1E7E34;
  --warn2: #9A6600;
}
body { margin: 0; background: var(--hg) !important; }

/* Sinnabschnitte — der Boden wechselt, sonst nichts.
   ==========================================================================

   Jede Seite besteht aus Sinnabschnitten: eine Frage, eine Antwort, ein
   Beweis. Sie waren bisher nur durch Abstand getrennt, und Abstand allein
   gliedert schlecht — auf dem Handy steht ohnehin alles untereinander, und
   sechzig Pixel Luft sehen aus wie ein Absatz, nicht wie ein Schnitt.

   Deshalb wechselt jetzt der Untergrund. Jeder zweite Abschnitt steht auf
   --band statt auf --hg, ueber die volle Breite. Der Farbabstand betraegt
   dE 9,9 — sichtbar, wenn man darauf achtet, und mitgenommen, wenn man
   es nicht tut. Er stand zuerst auf 4,2; das war Rene zu wenig.

   Nach oben ist der Ton nicht frei: Auf dem Band steht Text in --matt,
   und der muss 4,5:1 halten. Bei #EFE9D8 sind es 4,76:1 — bei einem
   Ton, der noch eine Spur kraeftiger waere, faellt --matt darunter. Der
   Bandton ist also nicht gewaehlt, sondern ausgereizt.

   Und der Wechsel ist ein Verlauf, keine Kante. Er laeuft ueber genau das
   Polster des Abschnitts — also ueber den leeren Raum zwischen zwei
   Inhalten. Damit steht jeder Text auf fertigem Grund, und die Farbe
   aendert sich nur dort, wo ohnehin nichts steht. Deshalb haengen Polster
   und Verlauf an denselben zwei Variablen: Wer eine aendert, aendert
   beides, und sie koennen nicht auseinanderlaufen.

   Zwei Regeln haelt die ganze Site durch:

     1. Wo eine Seite mehrere Abschnitte hat, steht der letzte auf dem
        Band; von dort laeuft der Wechsel rueckwaerts. So lernt der Leser
        nach zwei Seiten, woran ein Seitenende zu erkennen ist, ohne dass
        es ihm jemand sagt. Eine Seite aus einem einzigen Abschnitt - eine
        Gebietsseite etwa - bleibt ungetoent: Ein Band ueber die ganze
        Seite trennt nichts, es faerbt nur.
     2. Nie zwei getoente Abschnitte nebeneinander — sonst entstuende ein
        Loch im Band statt einer Kante.

   Der senkrechte Rhythmus gehoert dem Wrapper, nicht mehr dem Inhalt: .ab
   traegt 56px oben und unten, der Container darin nur noch das seitliche
   Polster (0 24px). Zwischen zwei Abschnitten liegen damit 112px, innerhalb
   eines Abschnitts 12 bis 20. Dieses Verhaeltnis — knapp zehn zu eins —
   macht die Gruppierung lesbar, bevor ein Wort gelesen ist.

   Der Rundgang bleibt aussen vor: Er ist keine gestapelte Seite, sondern
   eine Station nach der anderen. Die Rechtstexte auch — ein Vertrag ist ein
   Text, kein Aufbau. */

.ab {
  --ab-oben:  56px;
  --ab-unten: 56px;
  padding: var(--ab-oben) 0 var(--ab-unten);
}
/* Die Linientoene gelten auf dem Band nicht mehr: --linie kommt gegen
   #EFE9D8 nur noch auf 1,03:1 — eine Kartenkontur, die man nicht mehr
   sieht, und Trennlinien, die direkt auf dem Grund liegen (der Strich
   ueber dem VINI-Dialog etwa), verschwinden ganz. Die drei Ersatztoene
   sind so gerechnet, dass sie auf dem Band genau das Verhaeltnis halten,
   das ihre Vorlagen auf --hg haben: 1,20, 1,13 und 1,28. Sie gelten im
   ganzen Abschnitt, also auch in weissen Karten darin — dort wird die
   Haarlinie eine Spur schaerfer als in einem ungetoenten Abschnitt. Das
   faellt bei 1px nicht auf; eine unsichtbare Kartenkontur schon. */
.ab-ton {
  --linie:      #DFD5C0;
  --linie-fein: #E4DCC7;
  --linie-zart: #D8CFBA;
  background: linear-gradient(
    var(--hg)   0,
    var(--band) var(--ab-oben),
    var(--band) calc(100% - var(--ab-unten)),
    var(--hg)   100%);
}

/* Der erste Abschnitt unter einem Seitenkopf. Der Kopf hat unten kein
   Polster: Seine Goldlinie schliesst buendig mit der Unterkante ab.
   Gemessen lagen Goldlinie und Bandkante damit 14px auseinander — zwei
   waagerechte Kanten so dicht beieinander liest man als Fehler, nicht
   als Gliederung. 26px trennen sie eindeutig. */
.ab-auftakt { margin-top: 26px; --ab-oben: 30px; }

/* Der letzte Abschnitt vor dem dunklen Fuss braucht mehr Boden als einer
   mitten im Text, sonst klebt das Band am Fuss. Nach unten laeuft er als
   einziger ohne Verlauf aus: Ein Grund, der sich kurz vor der dunklen
   Fusskante noch einmal aufhellt, sieht nach Fehler aus, nicht nach
   Uebergang. Das Band trifft den Fuss also voll. */
.ab-schluss     { --ab-unten: 84px; }
.ab-ton.ab-schluss {
  background: linear-gradient(var(--hg) 0, var(--band) var(--ab-oben), var(--band) 100%);
}

@media (max-width: 760px) {
  .ab         { --ab-oben: 40px; --ab-unten: 40px; }
  .ab-auftakt { margin-top: 16px; --ab-oben: 24px; }
  .ab-schluss { --ab-unten: 62px; }
}

/* Hover-Zustände (ersetzen die style-hover-Attribute des Prototyps).
   !important nötig, weil die Grundwerte inline am Element stehen. */
.hov-wein:hover { color: var(--wein) !important; }
.hov-wein-tief:hover { color: var(--wein-tief) !important; }
.hov-unterstrich:hover { text-decoration: underline !important; }
.hov-btn-dunkel:hover { background: #3a3a3a !important; }
.hov-btn-gold:hover { background: #E3CEA5 !important; }
.hov-btn-glas:hover { background: rgba(255, 255, 255, .08) !important; }
.hov-karte:hover { background: var(--karte-hover) !important; }
.hov-rand-wein:hover { border-color: var(--wein) !important; color: var(--wein) !important; }
.hov-rand:hover { border-color: var(--wein) !important; }
.hov-opak9:hover { opacity: .9 !important; }
.hov-opak8:hover { opacity: .8 !important; }

/* Die Rebe am rechten Rand (js/rebe.js) — erst ab 1181 px Viewportbreite */
@media (max-width: 1180px) { #rebe { display: none; } }

/* Burger-Menü: unterhalb des Breakpoints wird die Nav zum vollbreiten
   Dropdown. Der Wert steht am @media weiter unten — er wurde schon zweimal
   nachgezogen, weil die Navigation gewachsen ist. */
#burger {
  display: none;
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--tinte);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
/* Die Topbar klappt bei 1060px zusammen, nicht erst bei 760.
   Der Rest der Mobilregeln bleibt bei 760: Ein Tablet soll seine
   zweispaltigen Raster behalten, nur eben ein Menue mit Knopf.

   NEU GEMESSEN AM 31.08.2026, weil die Navigation gewachsen ist. Der Wert
   stand auf 1000, damals gerechnet mit einer 772px breiten Nav. Heute sind
   es neun Eintraege; die deutsche Fassung bricht bis einschliesslich 1038px
   zweizeilig um und passt erst ab 1039px in eine Zeile. Zwischen 1001 und
   1038 stand also die volle Nav da, ohne hineinzupassen — der Burger kam zu
   spaet. Gemessen wurde die HOEHE der Nav (60px einzeilig, 81px umgebrochen),
   nicht der seitliche Ueberlauf: Sie bricht um, statt ueberzulaufen, deshalb
   meldet scrollWidth dabei nichts.

   Warum 1060 und nicht 1039: Media Queries messen die Fensterbreite
   einschliesslich einer klassischen Scrollleiste, das Layout bekommt sie
   aber nicht. 1039 + 17px Scrollleiste = 1056, aufgerundet 1060.

   Die englische Fassung braucht weniger (bricht nur bis etwa 1029 um) — es
   gilt der groessere der beiden Werte, sonst waere eine Sprache kaputt. */
@media (max-width: 1060px) {
  #burger { display: inline-flex; margin-left: auto; }
  #logo-topbar { height: 28px !important; }
  #topnav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hg);
    border-bottom: 1px solid var(--linie);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 12px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
  }
  #topnav.offen { display: flex !important; }
  #topnav a { padding: 13px 24px; font-size: 15px; }
  #topnav a:last-child { margin: 10px 24px 0; text-align: center; }
}

@media (max-width: 760px) {
  h1 { font-size: 29px !important; line-height: 1.2 !important; }
  h2 { font-size: 22px !important; }
}

/* ---------------------------------------------------------------- Huelle */
/* Skip-Link: erste fokussierbare Stelle jeder Seite. Sichtbar nur bei Fokus,
   damit Tastaturnutzer die achtteilige Navigation ueberspringen koennen. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--tinte);
  color: #fff;
  padding: 11px 18px;
  border-radius: 0 0 9px 9px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

main:focus { outline: none; }

/* ------------------------------------------------------- Sprachumschalter */
/* Natives <details> statt Klapp-JavaScript — funktioniert ohne Skript und
   per Tastatur. Aufbau nach dem Vorbild von noa.life. */
.lang-switch { position: relative; }
.lang-switch > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  color: var(--tinte);
  font-size: 13.5px;
  font-weight: 600;
  /* Rahmen und Innenabstand: Ohne sie stand das Kuerzel neben dem dunklen
     Knopf wie ein Resttext da und sah nicht bedienbar aus. */
  padding: 7px 11px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--karte);
  transition: border-color .2s, color .2s;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { color: var(--wein); border-color: #D8BF92; }
.lang-switch > summary:focus-visible { outline: 2px solid var(--wein); outline-offset: 2px; }
.lang-switch[open] > summary { border-color: var(--wein); color: var(--wein); }
@media (prefers-reduced-motion: reduce) { .lang-switch > summary { transition: none; } }
.lang-switch[open] > summary .lang-switch-chevron { transform: rotate(180deg); }
.lang-switch-chevron { display: inline-flex; transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .lang-switch-chevron { transition: none; } }
.lang-switch-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  min-width: 168px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
  z-index: 60;
}
.lang-switch-item {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--tinte);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.lang-switch-item:hover { background: var(--zart); color: var(--wein); }
.lang-switch-item.ist-aktiv { font-weight: 600; color: var(--wein); }
.lang-switch-hinweis { color: var(--matt2); font-size: 12px; font-weight: 400; }
@media (max-width: 760px) {
  .lang-switch-menu { position: static; box-shadow: none; border: 0; margin: 0; min-width: 0; }
  .lang-switch > summary { padding: 13px 24px; }
}

/* Nur fuer Screenreader sichtbar — z. B. Labels, die optisch durch ein
   Platzhalter-Attribut ersetzt sind. */
.nur-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------ Barrierefreiheit */

/* Sichtbarer Fokus fuer Tastaturbedienung. Gilt fuer alles Fokussierbare,
   auch fuer Elemente mit Inline-Styles — deshalb !important. Der Ring liegt
   ausserhalb des Elements, damit er auch auf gefuellten Flaechen sichtbar
   bleibt. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wein) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* Auf dunklem Grund (Footer, Hero) waere Weinrot zu dunkel. */
footer :where(a, button, summary):focus-visible,
#hero-inhalt :where(a, button):focus-visible {
  outline-color: #E8D0A6 !important;
}

/* Klickziele: WCAG 2.2 SC 2.5.8 verlangt mindestens 24x24 px, Apple und
   Google empfehlen 44. Gemessen lagen 31 Ziele darunter, die FAQ-Aufklapper
   bei 95x20. Auf Zeigergeraeten ohne feine Steuerung (Finger) aufpolstern —
   auf der Maus bleibt das Layout unveraendert. */
@media (pointer: coarse) {
  #faq summary { padding-top: 17px; padding-bottom: 17px; }
  .lang-switch > summary { min-height: 44px; }
  #topnav a { min-height: 44px; display: flex; align-items: center; }
  /* Im Fuss: 32px Trefferhoehe. Das zusaetzliche Polster machte daraus 42 -
     in den Faessern sind das sechs Zeilen zu 42 statt zu 34, und der Kreis
     traegt sie nicht mehr. Die Mindesthoehe reicht. */
  footer nav a { min-height: 32px; display: flex; align-items: center; }
  footer nav:not(.fuss-seitenliste):not(.fuss-inhalt) a { padding: 4px 0 }
  /* Fliesstextlinks bekommen Luft nach oben und unten, ohne die Zeile zu
     sprengen: der Klickbereich waechst, die Textzeile nicht. */
  main p a, main span a, main div > a:not([class*="btn"]) {
    padding-block: 6px;
    margin-block: -6px;
  }
}

/* Kleinste Schriftgroessen anheben. Unter 12 px wird es auf dem Handy
   unlesbar; besonders unglueklich war der Datenschutzhinweis am Formular
   mit 11 px — die eine rechtlich bedeutsame Zeile war die kleinste Schrift
   der Seite. */
@media (max-width: 760px) {
  main [style*="font-size:11px"],
  main [style*="font-size:11.5px"] { font-size: 12.5px !important; }
  footer [style*="font-size:10.5px"] { font-size: 12px !important; }
  footer [style*="font-size:12px"] { font-size: 12.5px !important; }
}

/* Reduzierte Bewegung: auch die Uebergaenge, die inline gesetzt sind. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Die Textlinks in den Footer-Faessern liegen ausserhalb der <nav>-Listen
   (Marke-Fass: METEO, Telefon, E-Mail) und waren mit 19 px Hoehe noch unter
   dem Mindestmass. */
@media (pointer: coarse) {
  footer a.hov-unterstrich {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding-block: 5px;
  }
  /* Im Fass nicht: Dort steht ein Kreis im Weg, und aus 30px Mindesthoehe
     werden mit Polster 40 - sechs Zeilen zu 40 sprengen den Kreis. */
  .fuss-fass a.hov-unterstrich { padding-block: 0 }
}
/* Der Claim im Marke-Fass stand auf 9 px. Gesperrte Versalien vertragen
   kleine Grade, 9 px sind auf dem Handy trotzdem zu wenig. */
@media (max-width: 760px) {
  footer [style*="font-size:9px"] { font-size: 11px !important; }
}

/* Die Kontaktseite stand auf dem Handy zweispaltig.
   Die Umbruchregel fuer den Kontaktbereich lag in css/startseite.css und
   griff deshalb nur auf der Startseite (#kontakt-grid). Die Kontaktseite
   benutzt dieselbe Aufteilung als KLASSE und hat keine eigene Stildatei —
   also blieb sie bei 375 px zweispaltig, mit 170 px je Spalte. Aufgefallen
   ist es erst, als der Terminwunsch in die schmalere Spalte kam.
   Die Regel gehoert deshalb hierher, wo sie beide Faelle deckt. */
@media (max-width: 760px) {
  .kontakt-grid { grid-template-columns: 1fr !important; }
  /* Auch die zweispaltigen Feldpaare im Formular selbst — auf der
     Startseite erledigt das startseite.css, hier gilt es ueberall. */
  #anfrage div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------- Fuss: Seitenliste
   Das mittlere Fass traegt die Seitenlinks, und die sind von acht auf
   zwoelf gewachsen (Glossar, Meldefristen, Was Software kostet, Nach
   Region). In einer Spalte lief die Liste unten aus dem Kreis heraus —
   die letzten Eintraege standen auf dem Fassrand oder darunter.

   Zwei Spalten statt einer: In einem Kreis ist die nutzbare Breite in der
   Mitte am groessten, und genau dort sitzt die Liste. Der Kreis selbst ist
   dafuer von 246 auf 310 Pixel gewachsen; die beiden aeusseren stehen auf
   240 und sind damit gleich gross. */
/* -------------------------------------------------------- Faesser im Fuss
   Ein Kreis traegt weniger, als sein Durchmesser verspricht: Ein Feld der
   Breite W und Hoehe H passt nur hinein, wenn W² + H² ≤ D². Deshalb stehen
   Groesse, Polster und Hoechstbreite hier zusammen und nicht als Inline-Stil
   verstreut - eine Medienabfrage erreicht Inline-Stile nicht. */
.fuss-fass       { width: min(240px, 70vw) }
.fuss-fass-mitte { width: min(310px, 82vw) }

.fuss-inhalt {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  max-width: 76%;
}
/* Die Rubrik sitzt auf einem Bogen mit Radius 80 von 100 - der Inhalt muss
   darunter beginnen. Gemessen reicht ein knappes Viertel des Durchmessers. */
.fuss-inhalt-marke { gap: 7px;  padding-top: 16% }
.fuss-inhalt-recht { gap: 8px;  padding-top: 15% }
/* Der Claim und die Betreiberzeile sind die beiden laengsten Zeilen im
   Fuss. Gemessen standen sie 28 und 14 Pixel ausserhalb des Kreises; sie
   duerfen umbrechen. */
.fuss-claim      { max-width: 100%; line-height: 1.5 }
.fuss-betreiber  { max-width: 62% }

.fuss-seitenliste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3px 18px;
  align-items: center;
  justify-items: center;
  padding-top: 14%;
  max-width: 78%;
}

@media (max-width: 560px) {
  /* NICHT einspaltig: Elf Links untereinander sind hoeher als der Kreis,
     und der Kreis schneidet ab (overflow:hidden am Fassrand). Also zwei
     Spalten wie am Schreibtisch, dafuer eine Stufe kleiner und enger.
     Das !important gilt der Schriftgroesse, die in partials/footer.php
     am Element steht. */
  /* Am Handy liegen die drei Faesser untereinander - dann darf jedes die
     ganze Breite nehmen. Bei 70vw blieben auf einem 320er Geraet 60 Pixel
     links und rechts ungenutzt, waehrend der Inhalt innen anstiess. */
  .fuss-fass       { width: min(320px, 88vw) }
  .fuss-fass-mitte { width: min(340px, 92vw) }
  .fuss-seitenliste { grid-template-columns: repeat(2, auto); gap: 2px 12px; max-width: 82%; }
}

/* Unter 400px wird der Kreis so klein, dass zwei Spalten zu 12,5px in der
   vorletzten Zeile gemessen 4px anstiessen. Enger und einen halben Grad
   kleiner - darunter geht es nicht mehr, und diese Geraete gibt es. */
@media (max-width: 400px) {
  .fuss-seitenliste { gap: 2px 8px; max-width: 86%; }
  .fuss-seitenliste a { font-size: 11px !important; }
  .fuss-seitenliste a { font-size: 11.5px !important; line-height: 1.35; }
}

/* -------------------------------------------------- Tablet-Zwischenstufe
   Zwischen 761 und 1000 Pixeln gab es keine Regel: Raster mit vier oder
   drei Spalten blieben dort vierspaltig und liefen aus dem Bild. Gemessen
   auf einem 834er Hochformat lief die Kostenseite 14 Pixel ueber, weil vier
   Preiskacheln mit 186 Pixeln schmaler waren als ihr Inhalt — der klassische
   1fr-Ueberlauf, denn 1fr heisst minmax(auto,1fr) und faellt nie unter die
   Mindestbreite.

   Zwei Spalten statt vier: Ein Tablet soll nicht die Handyansicht bekommen,
   aber auch keine Desktopansicht, die nicht passt. */
@media (max-width: 1000px) and (min-width: 761px) {
  #stufen-grid, #stufen-grid2,
  #cloud-grid,
  #wetter-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Der Klimabereich ist 7fr/5fr — zwei ungleiche Spalten, die nebeneinander
     nur mit Platz funktionieren. Untereinander behaelt beides seine Breite. */
  #klima-grid { grid-template-columns: 1fr !important; }
  /* Die neun Bereiche der Startseite: drei Spalten sind hier zu eng fuer
     einen Satz je Kachel. */
  #bereiche-grid { grid-template-columns: 1fr 1fr !important; }
  /* Zwei alte Ueberlaeufe, die nur in diesem Band auftraten: Das
     Kontaktraster hielt hier zwei Spalten, und in der schmaleren lief die
     Terminwahl 37 Pixel ueber. Die Kompetenzkarten standen zu dritt. */
  #kontakt-grid { grid-template-columns: 1fr !important; }
  #kompetenz > div[style*="1fr auto 1fr"] { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------ Wetterampel auf dem Handy
   Die vier Kennzahlen haben eine Mindestbreite von zusammen 458 Pixeln —
   vierspaltig sprengen sie jedes Telefon. Die Regeln lagen bis zum
   28.08.2026 in css/warum-vinorum.css; seit der Block auf der Startseite
   steht, gehoeren sie hierher. */
@media (max-width: 760px) {
  #klima-grid  { grid-template-columns: 1fr !important; }
  #wetter-kpis { grid-template-columns: 1fr 1fr !important; }
  #wetter-kpis > div { border-right: 0 !important; border-bottom: 1px solid var(--linie); }
  #wetter-kpis > div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ------------------------------------------------ Wege auf der 404
   Drei Karten statt einer flachen Linkzeile. Steht hier und nicht in
   einer eigenen Datei, weil die Fehlerseite kein Registereintrag ist
   und deshalb kein eigenes Stylesheet laden kann. */
.vf-wege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .vf-wege { grid-template-columns: 1fr; }
}


/* ------------------------------------------ Waagerecht scrollbare Felder
   Drei Stellen der Site sind breiter als ein Handy: die Grenztabelle, die
   Dazu-Tabelle und das Register des Glossars. Dass man sie schieben kann,
   sah man ihnen nicht an - iOS und Android blenden die Bildlaufleiste aus,
   solange niemand schiebt.

   Zwei Signale, beide ohne ein Wort Text: eine Bildlaufleiste, die stehen
   bleibt, und eine weiche Blende an der Seite, auf der noch etwas kommt.
   Die Blende verschwindet am Ende - darin liegt der Unterschied zu einem
   festen Schatten, der auch dann noch mehr verspricht, wenn nichts folgt. */
.querscroll {
  position: relative;
  --querscroll-grund: var(--karte);
  --querscroll-radius: 0px;
}
.querscroll-feld {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* Wer ::-webkit-scrollbar gestaltet, bekommt in Chrome und Safari eine
   dauerhafte Leiste statt einer, die sich nach dem Schieben ausblendet -
   und genau das war der Punkt. Achtung: Sobald daneben scrollbar-width
   steht, gewinnt die Kurzform, und die Leiste blendet wieder aus. Deshalb
   steht sie unten in einem @supports fuer Firefox, das die Pseudoelemente
   nicht kennt. */
.querscroll-feld::-webkit-scrollbar { height: 9px }
.querscroll-feld::-webkit-scrollbar-track {
  background: var(--linie-fein); border-radius: 99px;
}
.querscroll-feld::-webkit-scrollbar-thumb {
  background: var(--linie-zart); border-radius: 99px;
}
.querscroll-feld::-webkit-scrollbar-thumb:hover { background: var(--matt2) }
@supports not selector(::-webkit-scrollbar) {
  .querscroll-feld {
    scrollbar-width: thin;
    scrollbar-color: var(--linie-zart) var(--linie-fein);
  }
}

/* Die Blenden liegen ueber dem Feld, nicht darin - sonst wanderten sie mit.
   Unten bleiben sie ueber der Bildlaufleiste stehen, die soll man sehen. */
.querscroll::before,
.querscroll::after {
  content: ""; position: absolute; top: 0; bottom: 11px; width: 44px;
  pointer-events: none; opacity: 0; transition: opacity .18s ease; z-index: 2;
}
.querscroll::before {
  left: 0; border-radius: var(--querscroll-radius) 0 0 0;
  background: linear-gradient(90deg, var(--querscroll-grund), transparent);
}
.querscroll::after {
  right: 0; border-radius: 0 var(--querscroll-radius) 0 0;
  background: linear-gradient(270deg, var(--querscroll-grund), transparent);
}
.querscroll.mehr-links::before { opacity: 1 }
.querscroll.mehr-rechts::after { opacity: 1 }
@media (prefers-reduced-motion: reduce) {
  .querscroll::before, .querscroll::after { transition: none }
}

/* Die Dazu-Tabelle traegt Rahmen, Rundung und Grund jetzt an der Huelle -
   sonst laege die Blende ueber dem Rahmen statt darin. */
.ko-dazu-huelle.querscroll { --querscroll-radius: 13px }
.gl-register-huelle        { --querscroll-grund: var(--hg) }
/* Einwilligungsband
   ==========================================================================

   Das Band lag frueher als volle Leiste am unteren Rand und trug Times New
   Roman: Es haengt an <body> und damit AUSSERHALB von .huelle, wo die
   Grundschrift gesetzt wird (partials/head.php). Ein Overlay gehoert an den
   Body — die Schrift muss es deshalb selbst mitbringen.

   Jetzt eine schwebende Karte statt einer Leiste. Eine Leiste am Rand liest
   sich wie ein Fusszeilen-Hinweis und wird uebersehen; eine Karte, die
   hereinkommt, ist eine Frage. Genau das ist es auch: Ohne Antwort laedt
   Google Analytics nicht.

   Die Formensprache ist die der uebrigen Site — weisse Karte, Sandlinie
   #D8BF92 als Signatur, 12-14px Rundung, dunkler Hauptknopf. Die Einblendung
   nimmt dieselbe Kurve wie die Stempel im Rundgang: cubic-bezier(.2,1.4,.4,1),
   also mit leichtem Ueberschwingen.

   Das Band startet mit [hidden]. js/einwilligung.js nimmt das Attribut weg,
   sobald feststeht, dass noch nichts entschieden ist — deshalb haengt die
   Anzeige an :not([hidden]) und nicht an einer Klasse. */

#einwilligung {
  display: none;
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  box-sizing: border-box;
  font-family: var(--font-ui, 'Montserrat', 'Century Gothic', 'Segoe UI', sans-serif);
  color: var(--tinte);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: 3px solid #D8BF92;
  border-radius: 14px;
  padding: 20px 22px;
  /* Warmer Schatten statt neutralem Grau — der Grund der Site ist warm. */
  box-shadow: 0 18px 44px rgba(36, 24, 18, .18), 0 2px 6px rgba(36, 24, 18, .06);
}

#einwilligung:not([hidden]) {
  display: block;
  animation: einwilligung-auf .42s cubic-bezier(.2, 1.4, .4, 1) .5s both;
}

@keyframes einwilligung-auf {
  from { opacity: 0; transform: translateX(-50%) translateY(22px) scale(.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}

/* Ohne Bewegung: dieselbe Karte, nur ohne Weg dorthin. Die Verzoegerung
   bleibt, damit sie nicht mitten in den Seitenaufbau springt. */
@media (prefers-reduced-motion: reduce) {
  #einwilligung:not([hidden]) {
    animation: einwilligung-ein .01s linear .5s both;
  }
  @keyframes einwilligung-ein { from { opacity: 0 } to { opacity: 1 } }
}

.ew-titel {
  display: block;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 7px;
}

.ew-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--matt);
}

.ew-mehr { color: var(--wein); text-decoration: none; font-weight: 500; white-space: nowrap; }
.ew-mehr:hover { text-decoration: underline; }

.ew-knoepfe {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.ew-knopf {
  flex: 1 1 auto;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
@media (prefers-reduced-motion: reduce) { .ew-knopf { transition: none } }

/* Der ablehnende Knopf traegt --linie-bedien, nicht --linie: Ein
   Bedienelement muss sich vom Grund abheben (WCAG 1.4.11). */
.ew-nein {
  background: var(--karte);
  color: var(--tinte);
  border: 1px solid var(--linie-bedien);
}
.ew-nein:hover { border-color: var(--wein); color: var(--wein); }

.ew-ja {
  background: var(--tinte);
  color: #fff;
  border: 1px solid var(--tinte);
}
.ew-ja:hover { background: #3a3a3a; border-color: #3a3a3a; }

/* Schmale Fenster: mehr Breite, weniger Polster, Knoepfe untereinander —
   nebeneinander waeren sie unter 360px zu schmal fuer ihre Beschriftung.
   Der Hauptknopf steht unten, also dort, wo der Daumen zuerst hinkommt.

   Die Karte bleibt hier ueber left:50% zentriert und behaelt ihr
   translateX(-50%). Der erste Entwurf schaltete stattdessen auf
   left/right/transform:none um und brauchte dafuer eigene Keyframes — und
   die ueberschrieben, weil sie spaeter standen, die Ruhe-Variante wieder
   mit einer bewegten. Wer „Bewegung reduzieren" gesetzt hatte, bekam auf
   dem Handy also doch den Weg von unten. Eine Positionierung fuer alle
   Breiten macht diesen Fehler unmoeglich. */
@media (max-width: 420px) {
  #einwilligung { width: calc(100% - 24px); bottom: 12px; padding: 17px 18px; }
  .ew-knoepfe { flex-direction: column-reverse; }
}

/* --------------------------------------------- Wetterampel auf 320er-Handys
   Zweispaltig brauchen die vier Kennzahlen zusammen 257px min-content. Auf
   einem 320px breiten Telefon bleiben nach Abschnittspolster (2x18) und
   Kartenpolster (2x22) aber nur 240px — gemessen lief die Startseite dort
   16px seitlich ueber, und zwar als einzige Stelle der ganzen Site.
   Ab 360px (die schmalste heute uebliche Geraetebreite) passt es; die Regel
   greift deshalb nur darunter. */
@media (max-width: 359px) {
  #wetter-kpis { grid-template-columns: 1fr !important; }
  #wetter-kpis > div { border-bottom: 1px solid var(--linie); }
  #wetter-kpis > div:last-child { border-bottom: 0; }
}