/* =========================================================================
   Imkerei Margret Rhode — stil.css
   Dunkel, warm, ein Akzent (Honiggold). Zwei Schriften: Fraunces + Karla.
   Zwei Radien: --r (14px) und --pill (999px). Eine Hebungsfarbe (--hebung),
   am Untergrund gekippt.
   ========================================================================= */

/* ---- Schriften: nur selbst gehostet ---- */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:500;
  src:url("schrift/fraunces-500.woff2") format("woff2"); font-display:swap;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:700;
  src:url("schrift/fraunces-700.woff2") format("woff2"); font-display:swap;
}
@font-face{
  font-family:"Karla"; font-style:normal; font-weight:400;
  src:url("schrift/karla-400.woff2") format("woff2"); font-display:swap;
}
@font-face{
  font-family:"Karla"; font-style:normal; font-weight:500;
  src:url("schrift/karla-500.woff2") format("woff2"); font-display:swap;
}
@font-face{
  font-family:"Karla"; font-style:normal; font-weight:700;
  src:url("schrift/karla-700.woff2") format("woff2"); font-display:swap;
}

/* ---- Token ---- */
:root{
  --grund:#17110A;        /* tiefer, warmer Grund, nicht reinschwarz */
  --grund-2:#20180E;      /* leicht angehoben */
  --grund-3:#2A2013;      /* Karten auf dunkel */
  --linie:rgba(240,190,80,.16);
  --linie-stark:rgba(240,190,80,.30);
  --tinte:#F3ECDC;        /* Wachs/Creme, Fliesstext auf dunkel */
  --tinte-2:#C7B593;      /* gedaempft */
  --akzent:#F0B429;       /* Honiggold, Flaeche + grosse Schrift auf dunkel */
  --akzent-dunkel:#7A4E09;/* Honiggold fuer helle Kaesten */
  --karte-hell:#F4ECD8;   /* heller Kasten */
  --tinte-dunkel:#2A2013; /* Text auf hellem Kasten */

  --hebung:var(--akzent); /* eine Hebungsfarbe, am Untergrund gekippt */

  --r:14px;
  --pill:999px;

  --breite:70rem;
  --luft:clamp(3.5rem,7vw,6rem);

  --f-display:"Fraunces",Georgia,serif;
  --f-text:"Karla",system-ui,sans-serif;
}

/* helle Kaesten kippen die Hebung, damit kein heller Akzent auf hell steht */
.hell{
  --hebung:var(--akzent-dunkel);
  background:var(--karte-hell);
  color:var(--tinte-dunkel);
}

/* dunkles Band, gibt den Abschnitten Rhythmus ohne zweite Helligkeit */
.band{ background:var(--grund-2); border-block:1px solid var(--linie); }

/* gedaempftes Kleinlabel (KEIN Eyebrow: nicht in Akzentfarbe) */
.klein{
  display:inline-block; font-family:var(--f-text); font-weight:700;
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinte-2); hyphens:manual; margin:0 0 .6rem;
}
.nur-breit{ display:none; }
@media (min-width:560px){ .nur-breit{ display:inline; } }

*{box-sizing:border-box;}
/* Die Grundfarbe sitzt auf `html`, nicht auf `body`: Der Body-Hintergrund
   wuerde die feste Wabenebene (z-index:-1) sonst zudecken — dann sieht man
   nur dort Waben, wo zufaellig kein Abschnitt daruebersteht (02.08.2026). */
html{-webkit-text-size-adjust:100%;background:var(--grund);}
body{
  margin:0;
  background:transparent;
  color:var(--tinte);
  font-family:var(--f-text);
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block;}

/* ---- Fortschrittslinie ---- */
.fortschritt{
  position:fixed; inset:0 auto auto 0; height:2px; width:0;
  background:var(--akzent); z-index:60;
  transition:width .1s linear;
}
@media (prefers-reduced-motion:reduce){ .fortschritt{transition:none;} }

/* ---- Typografie / Auszeichnung (eine Ebene) ---- */
h1,h2,h3{
  font-family:var(--f-display); font-weight:700;
  line-height:1.08; letter-spacing:-.01em;
  text-wrap:balance; hyphens:manual; margin:0 0 .6rem;
}
h1{ font-size:clamp(2.5rem,1.7rem + 4.2vw,4.6rem); }
h2{ font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem); }
h3{ font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem); }
p{ margin:0 0 1rem; text-wrap:pretty; hyphens:auto; }
p:last-child{ margin-bottom:0; }

/* 1 Rubrik (Kicker) */
.rubrik{
  display:inline-block; font-family:var(--f-text); font-weight:700;
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hebung); hyphens:manual; margin:0 0 1rem;
}
/* 2 Datenwert */
.wert{
  font-family:var(--f-text); font-weight:700; color:var(--hebung);
  font-variant-numeric:tabular-nums; hyphens:manual;
}
/* 3 Betonung im Fliesstext */
strong,.betont{ font-weight:700; color:var(--hebung); }
/* 4 Kennzahl — die Groesse traegt, nicht die Farbe */
.kennzahl{
  font-family:var(--f-display); font-weight:700; color:var(--tinte);
  font-size:clamp(2.2rem,1.6rem + 3vw,3.6rem); line-height:1;
  font-variant-numeric:tabular-nums; hyphens:manual; letter-spacing:-.02em;
}
.hell .kennzahl{ color:var(--tinte-dunkel); }

a{ color:var(--hebung); }
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--akzent); outline-offset:3px; border-radius:4px;
}

/* ---- Layout ---- */
.mitte{ width:min(var(--breite),100% - 2.4rem); margin-inline:auto; }
.abschnitt{ padding-block:var(--luft); }
.kopf{ max-width:44rem; }
.kopf p{ color:var(--tinte-2); font-size:1.05rem; }

/* ---- Kopfzeile / Navigation ---- */
.top{
  position:sticky; top:0; z-index:50;
  /* Deckend statt weichgezeichnet: Ein Weichzeichner ueber dem Wabengitter
     sah aus wie ein verschmierter Streifen. */
  background:var(--grund);
  border-bottom:1px solid var(--linie);
}
.top__reihe{
  display:flex; align-items:center; gap:1rem;
  height:64px; width:min(var(--breite),100% - 2.4rem); margin-inline:auto;
}
.marke{
  font-family:var(--f-display); font-weight:700; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--tinte); text-decoration:none;
  hyphens:manual; white-space:nowrap;
}
.marke span{ color:var(--akzent); }
.top__nav{ display:none; gap:1.4rem; margin-left:auto; }
.top__nav a{ color:var(--tinte-2); text-decoration:none; font-size:.95rem; }
.top__nav a:hover{ color:var(--tinte); }
.top__tel{ margin-left:auto; }
.top__nav + .top__tel{ margin-left:1.4rem; }

.knopf{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-text); font-weight:700; font-size:1rem;
  padding:.7rem 1.3rem; border-radius:var(--pill);
  text-decoration:none; cursor:pointer; border:0;
  min-height:44px; line-height:1.1;
}
.knopf--voll{ background:var(--akzent); color:#241802; }
.knopf--voll:hover{ background:#ffca4d; }
.knopf--rand{
  background:transparent; color:var(--tinte);
  border:1px solid var(--linie-stark);
}
.knopf--rand:hover{ border-color:var(--akzent); color:var(--tinte); }
.top .knopf{ padding:.5rem 1.05rem; min-height:40px; font-size:.95rem; }

@media (min-width:840px){
  .top__nav{ display:flex; }
  .top__tel{ margin-left:0; }
}

/* ---- Hero ---- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(4.5rem,10vw,8.5rem);
  /* 02.08.2026 auf Ansage: kein weicher Verlauf mehr. Hier lagen ein
     radialer Lichtfleck und ein Farbverlauf uebereinander — beide haben das
     Wabengitter zugedeckt. Der Hero ist jetzt durchsichtig, das Gitter
     traegt den Grund. */
  background:transparent;
}
/* Die alte Hero-Wabentextur ist entfernt (02.08.2026): Sie lag in einem
   anderen Raster als das durchgehende Gitter und kreuzte sich damit sichtbar. */
.hero__inhalt{ position:relative; z-index:1; max-width:38rem; }
.hero h1{ margin-bottom:1.2rem; }
.hero__lead{
  font-size:clamp(1.1rem,1rem + .6vw,1.35rem); color:var(--tinte-2);
  max-width:34rem; margin-bottom:2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* ---- Zwei-Spalten (Text neben Inhalt) ---- */
.zug{ display:grid; gap:2rem; align-items:start; }
@media (min-width:820px){
  .zug{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
}
.zug > *{ min-width:0; }

/* ---- Kartenraster ---- */
.raster{ display:grid; gap:1.4rem; }
@media (min-width:640px){ .raster--2{ grid-template-columns:1fr 1fr; } }
@media (min-width:820px){ .raster--3{ grid-template-columns:repeat(3,1fr); } }
.raster > *{ min-width:0; }

.kachel{
  background:var(--grund-2); border:1px solid var(--linie);
  border-radius:var(--r); padding:1.5rem;
}
.kachel h3{ margin-bottom:.5rem; }
.kachel p{ color:var(--tinte-2); }
.kachel .rubrik{ margin-bottom:.75rem; }

/* ---- Station: Sorten (Signatur, Honigband) ---- */
.honig{ display:grid; gap:1.6rem; align-items:start; }
@media (min-width:820px){ .honig{ grid-template-columns:1.05fr .95fr; gap:2.4rem; } }
.honig > *{ min-width:0; }

.honig__feld{
  border-radius:var(--r); min-height:clamp(220px,34vw,360px);
  background:var(--honigfarbe,#DDA02A);
  transition:background-color .55s ease;
  border:1px solid rgba(0,0,0,.25);
  position:relative; overflow:hidden;
}
.honig__feld::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 45%);
  mix-blend-mode:soft-light; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .honig__feld{ transition:none; } }

.honig__name{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.6vw,2.2rem); margin:0 0 .3rem;
}
.honig__char{ color:var(--tinte-2); min-height:3.2em; }
.honig__regler{ margin-top:1.4rem; }
.honig__regler label{
  display:block; font-size:.85rem; color:var(--tinte-2); margin-bottom:.5rem;
}

/* ganze Sortenliste — auch ohne JavaScript lesbar */
.honig__liste{ margin-top:1.6rem; border-top:1px solid var(--linie); }
.honig__liste div{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem;
  padding:.7rem 0; border-bottom:1px solid var(--linie);
}
.honig__liste b{ color:var(--tinte); font-weight:700; min-width:11rem; }
.honig__liste span{ color:var(--tinte-2); flex:1; min-width:0; }

/* ---- Regler (range) ---- */
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%;
  height:8px; border-radius:var(--pill); margin:0;
  background:linear-gradient(90deg,var(--akzent) 0%,var(--akzent) var(--fuell,50%),var(--grund-3) var(--fuell,50%),var(--grund-3) 100%);
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--akzent); border:3px solid #241802; cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:var(--akzent); border:3px solid #241802; cursor:pointer;
}

/* ---- Station: Rechner ---- */
.rechner__zahl{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.rechner__gitter{
  display:grid; gap:1rem; margin-top:1.6rem;
}
@media (min-width:560px){ .rechner__gitter{ grid-template-columns:repeat(3,1fr); } }
.rechner__gitter > div{
  background:var(--grund-2); border:1px solid var(--linie);
  border-radius:var(--r); padding:1.2rem; min-width:0;
}
.rechner__gitter .kennzahl{ display:block; margin-bottom:.2rem; }
.rechner__gitter small{ color:var(--tinte-2); }
.fuss-note{ color:var(--tinte-2); font-size:.85rem; margin-top:1.4rem; }
.fuss-note a{ color:var(--tinte-2); }

/* ---- Station: Kalender ---- */
.kal__strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:1.4rem; }
@media (min-width:560px){ .kal__strip{ grid-template-columns:repeat(12,1fr); } }
.kal__strip button{
  border:1px solid var(--linie); background:var(--grund-2); color:var(--tinte-2);
  border-radius:var(--r); padding:.55rem 0; min-height:44px; min-width:0; cursor:pointer;
  font-family:var(--f-text); font-weight:500; font-size:.8rem;
}
.kal__strip button[aria-pressed="true"]{
  background:var(--akzent); color:#241802; border-color:var(--akzent); font-weight:700;
}
.kal__tafel{
  background:var(--grund-2); border:1px solid var(--linie);
  border-radius:var(--r); padding:1.6rem;
}
.kal__tafel h3{ color:var(--akzent); }
.kal__zeile{ display:grid; gap:.2rem 1rem; padding:.7rem 0; border-top:1px solid var(--linie); }
/* 02.08.2026 auf Ansage: „Im Blumenladen" und „Bei den Bienen" brachen auf
   zwei Zeilen um — 8rem reichten fuer die laengste Beschriftung nicht. Die
   Spalte richtet sich jetzt nach dem laengsten Eintrag statt nach einem
   geratenen Mass, und die Beschriftung bleibt in einer Zeile. */
@media (min-width:560px){
  .kal__zeile{ grid-template-columns:max-content 1fr; align-items:baseline; }
  .kal__zeile > b{ white-space:nowrap; }
}
.kal__zeile:first-of-type{ border-top:0; }
.kal__zeile b{ color:var(--tinte); }
.kal__zeile span{ color:var(--tinte-2); }
/* volle Liste ohne JavaScript */
.kal__voll{ margin-top:1.4rem; }
.kal__voll[hidden]{ display:none; }

/* ---- Station: Verkaufsstellen (Umschalter) ---- */
.stellen__wahl{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.stellen__wahl button{
  border:1px solid var(--linie-stark); background:transparent; color:var(--tinte);
  border-radius:var(--pill); padding:.7rem 1.3rem; min-height:44px; cursor:pointer;
  font-family:var(--f-text); font-weight:700; font-size:.95rem;
}
.stellen__wahl button[aria-pressed="true"]{
  background:var(--akzent); color:#241802; border-color:var(--akzent);
}
.stellen__tafel{
  background:var(--grund-2); border:1px solid var(--linie);
  border-radius:var(--r); padding:1.6rem;
}
.stellen__tafel dl{ margin:0; display:grid; gap:.3rem 1rem; }
@media (min-width:520px){ .stellen__tafel dl{ grid-template-columns:9rem 1fr; } }
.stellen__tafel dt{ color:var(--tinte-2); }
.stellen__tafel dd{ margin:0; color:var(--tinte); }

/* ---- Kontakt / Formular ---- */
.kontakt{ display:grid; gap:2rem; align-items:start; }
@media (min-width:820px){ .kontakt{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); } }
.kontakt > *{ min-width:0; }
.feldliste{ display:grid; gap:1.1rem; }
.feld{ display:grid; gap:.4rem; }
.feld label{ font-size:.9rem; color:var(--tinte-2); }
.feld input,.feld textarea{
  width:100%; font:inherit; color:var(--tinte);
  background:var(--grund-2); border:1px solid var(--linie-stark);
  border-radius:var(--r); padding:.8rem .9rem; min-width:0;
}
.feld textarea{ min-height:8rem; resize:vertical; }
.feld input:focus,.feld textarea:focus{ outline:none; border-color:var(--akzent); }

.direkt{ display:grid; gap:.9rem; }
.direkt a{ color:var(--tinte); text-decoration:none; font-weight:700; }
.direkt a:hover{ color:var(--akzent); }
.direkt .rubrik{ margin-bottom:.2rem; }

/* ---- Karte + Cookie-Sperre ---- */
.karte-block{ margin-top:var(--luft); }
.karte{
  position:relative; width:100%;
  height:clamp(280px,38vw,460px); background:var(--grund-2);
  border-top:1px solid var(--linie); overflow:hidden;
}
.karte iframe{ width:100%; height:100%; border:0; display:block; }
.karte__sperre{
  position:absolute; inset:0; display:grid; place-content:center;
  gap:1rem; text-align:center; padding:1.6rem;
  background:var(--grund-2);
}
.karte.ks-frei .karte__sperre{ display:none; }
.karte__sperre p{ max-width:32rem; margin-inline:auto; color:var(--tinte-2); }
.karte__sperre .wege{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; }

/* ---- Fussbereich ---- */
.fuss{
  background:var(--grund-2); border-top:1px solid var(--linie);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.fuss__reihe{ display:grid; gap:1.6rem; }
@media (min-width:720px){ .fuss__reihe{ grid-template-columns:1.4fr 1fr 1fr; } }
.fuss h3{ font-family:var(--f-text); font-size:.85rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinte-2); margin:0 0 .8rem; }
.fuss a{ color:var(--tinte-2); text-decoration:none; }
.fuss a:hover{ color:var(--tinte); }
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.fuss__unten{
  margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:center;
  color:var(--tinte-2); font-size:.85rem;
}
.fuss__unten .ks-cookie-oeffnen{
  background:transparent; border:1px solid var(--linie-stark); color:var(--tinte-2);
  border-radius:var(--pill); padding:.5rem 1rem; min-height:36px; cursor:pointer;
  font:inherit; font-size:.85rem;
}
.fuss__unten .ks-cookie-oeffnen:hover{ color:var(--tinte); border-color:var(--akzent); }

/* Rechtstexte (Impressum/Datenschutz) im Fuss, aufklappbar nur fuer Pflichttext */
.recht{ margin-top:1.6rem; }
.recht summary{
  cursor:pointer; color:var(--tinte-2); font-weight:700;
  padding:.6rem 0; list-style:none;
}
.recht summary::-webkit-details-marker{ display:none; }
.recht summary::before{ content:"+ "; color:var(--akzent); }
.recht[open] summary::before{ content:"– "; }
.recht__text{ color:var(--tinte-2); font-size:.9rem; max-width:52rem; }
.recht__text h5{ color:var(--tinte); margin:1.2rem 0 .3rem; font-size:.95rem; }

/* ---- Reduzierte Bewegung ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}


/* ---- Wabenraster ueber die ganze Seite (02.08.2026 auf Ansage) -------------
   Einzelne Sechsecke, die beim Scrollen von OBEN RECHTS nach UNTEN LINKS
   volllaufen, in mehreren zusammenpassenden Gelbtoenen.

   Warum als SVG und nicht als Hintergrundmuster mit Maske: Ein Muster kann
   man nur als Ganzes ein- und ausblenden. Gefordert war aber, dass sich die
   Zellen NACH UND NACH fuellen — dafuer muss jede Wabe ein eigenes Element
   mit eigener Reihenfolge und eigener Farbe sein.

   Die Ebene liegt fest hinter der Seite. Die Grundfarbe sitzt auf `html`,
   nicht auf `body`: Der Body-Hintergrund wuerde eine Ebene mit z-index:-1
   sonst zudecken. */
.waben-grund{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--grund)}
/* Schleier ueber dem Raster: Ohne ihn stand kleiner Text direkt auf einer
   gefuellten Wabe und kam auf 2,7:1 statt der geforderten 4,5:1 (gemessen
   02.08.2026, Zeile „E-Mail"). Das Muster bleibt sichtbar, bekommt aber
   ueberall genug Grund darunter. */
.waben-grund::after{
  content:"";position:absolute;inset:0;
  background:color-mix(in srgb,var(--grund) 46%,transparent);
}
.waben-grund__netz{width:100%;height:100%;display:block}
.waben-grund__netz polygon{
  fill:transparent;stroke:var(--akzent);stroke-opacity:.13;stroke-width:1.1;
  transition:fill .55s ease, stroke-opacity .55s ease;
}
.waben-grund__netz polygon.voll{stroke-opacity:.34}

/* Die Abschnitte duerfen das Raster nicht zudecken. */
/* 02.08.2026 auf Ansage: keine Brauntoene mehr im Hintergrund. Die Baender
   der Abschnitte legten sich als grosse Flaechen ueber das Wabengitter — sie
   sind jetzt ganz durchsichtig, nur die Trennlinien bleiben. Die Kacheln
   behalten ihren Grund: Ohne ihn stuende ihr Text direkt auf dem Muster. */
.band{background:transparent}

@media (prefers-reduced-motion:reduce){
  .waben-grund__netz polygon{transition:none}
}

/* ---- Kein Springen beim Umschalten (02.08.2026 auf Ansage) ----------------
   Beim Wechsel zwischen „Hof in Sanne" und „Pavillon Bahnhof Stendal" bzw.
   zwischen den Monaten aendert sich die Texthoehe — auf schmalen Geraeten
   sprang der Inhalt darunter um 27 bzw. 53 Pixel (gemessen bei 390 px; bei
   768 und 1440 px gibt es keinen Sprung). Der Platz fuer den laengsten
   Zustand wird deshalb vorgehalten. Die Werte stammen aus der Messung, nicht
   aus dem Gefuehl — bei laengeren Texten neu messen. */
@media (max-width:560px){
  .stellen__tafel{min-height:318px}
  .kal__tafel{min-height:297px}
}

/* ---- Nachbesserung 02.08.2026 --------------------------------------------- */
/* Kopfzeile lief bis 273 px hoch (gemessen), weil die Navigation umbrach.
   Sie bleibt jetzt einreihig und laesst sich schmal seitlich schieben —
   das ist ehrlicher als Links wegzublenden, die es gibt. */
.top__reihe{flex-wrap:nowrap;min-width:0}
.top__reihe nav{
  display:flex;gap:1rem;min-width:0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.top__reihe nav::-webkit-scrollbar{display:none}
.top__reihe nav a{white-space:nowrap}

/* Tippflaechen (WCAG 2.5.8): Fuss-, Navigations- und Kontaktlinks waren
   17 Pixel hoch. Ueber die Innenabstaende geloest, das Schriftbild bleibt. */
.top__reihe nav a,.fuss a,.fuss__spalte a,.recht a,
a[href^="tel:"],a[href^="mailto:"]{
  display:inline-flex;align-items:center;min-height:24px;
}

/* Karte direkt an den Fuss (02.08.2026 auf Ansage): Der Abschnitt hatte
   96 px Innenabstand nach unten, dadurch stand die Karte frei im Raum. */
#kontakt{padding-bottom:0}
.karte-block{margin-bottom:0}

/* Schieberegler: Die Spur war 8 px hoch, der Griff damit kaum zu treffen
   (WCAG 2.5.8 verlangt 24). Die Spur bleibt schlank, die Trefferflaeche
   waechst ueber die Hoehe des Elements. */
/* Trefferflaeche vergroessern, OHNE die Leiste zu verlieren (03.08.2026).
   Gestern stand hier `background:transparent` am Element — damit war die
   Spur schlicht weg, denn sie wurde ueber den Element-Hintergrund gemalt.
   Jetzt wird sie auf die Spur selbst gezeichnet: sichtbar wie zuvor,
   Trefferflaeche 26 statt 8 Pixel. */
input[type="range"]{height:26px;background:transparent}
input[type="range"]::-webkit-slider-runnable-track{
  height:8px;border-radius:var(--pill);background:linear-gradient(90deg,var(--akzent) 0%,var(--akzent) var(--fuell,50%),var(--grund-3) var(--fuell,50%),var(--grund-3) 100%);
}
input[type="range"]::-moz-range-track{
  height:8px;border-radius:var(--pill);background:linear-gradient(90deg,var(--akzent) 0%,var(--akzent) var(--fuell,50%),var(--grund-3) var(--fuell,50%),var(--grund-3) 100%);
}
input[type="range"]::-webkit-slider-thumb{margin-top:-9px}

/* Der Schleier ueber dem Wabengitter war knapp zu duenn: kleiner Text kam
   auf 4,26:1 statt 4,5:1 (gemessen). */
.waben-grund::after{background:color-mix(in srgb,var(--grund) 56%,transparent)}


/* ---- Kopfzeile mobil: Hamburger statt Linkzeile (Ansage 04.08.2026) -------
   Auf dem Handy standen Marke, vier scrollbare Links UND der Telefonknopf in
   einer 64px-Zeile. Der Telefonknopf ist dort jetzt weg, die Punkte liegen
   hinter dem Hamburger — die Rufnummer steht als letzter Eintrag im Menue,
   damit sie nicht verschwindet. Reines CSS, kein Skript noetig. */
.menue-schalter{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.menue-knopf{ display:none; }
.top__nav-tel{ display:none; }

@media (max-width:839.98px){
  .top{ position:sticky; top:0; z-index:60; }
  .top__reihe{ position:relative; }
  /* Telefonknopf raus aus der Leiste. Zwei Klassen tief, sonst gewinnt
     die spaetere Regel a[href^="tel:"]{display:inline-flex}. */
  .top__reihe .top__tel{ display:none; }
  /* Hamburger rechts */
  .menue-knopf{
    display:grid; gap:5px; align-content:center; margin-left:auto;
    width:44px; height:44px; padding:10px 9px; cursor:pointer;
    border:1px solid var(--linie); border-radius:var(--r);
  }
  .menue-strich{ display:block; height:2px; background:var(--tinte); border-radius:2px; }
  .menue-schalter:focus-visible + .menue-knopf{ outline:2px solid var(--akzent); outline-offset:2px; }
  /* Die Punkte klappen darunter auf, statt seitlich zu scrollen */
  .top__reihe nav.top__nav{
    display:none; position:absolute; left:0; right:0; top:64px;
    flex-direction:column; gap:0; overflow:visible;
    background:var(--grund); border-bottom:1px solid var(--linie);
    padding:.4rem 0 .8rem;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .menue-schalter:checked ~ nav.top__nav{ display:flex; }
  .top__reihe nav.top__nav a{
    display:flex; align-items:center; min-height:48px;
    padding:.2rem 0; font-size:1.02rem; color:var(--tinte);
    border-bottom:1px solid var(--linie);
  }
  .top__reihe nav.top__nav a:last-child{ border-bottom:0; }
  .top__nav-tel{ display:flex; font-weight:700; color:var(--akzent) !important; }
}