/* Normalisierung – enthaelt bewusst keine Gestaltung. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
img,picture,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =====================================================================
   Zwibbel Gießen – Musikkneipe & Biergarten
   Stylesheet, handgeschrieben. Grundton: Cremeweiß, Schwarz/Grau,
   Orange als Akzent. Kantige Kanten (4px), kräftige Slab-Überschriften.
   ===================================================================== */

:root{
  /* Flächen */
  --papier:#F6F0E4;        /* helle Grundfläche, Cremeweiß */
  --creme:#EBE2CF;         /* zweite, warme Fläche */
  --gruen:#17120F;         /* dunkler Anker, Schwarz */
  --gruen-tief:#0B0807;
  --gruen-hell:#4A443E;
  --kohle:#17120F;         /* zweiter dunkler Anker, Schwarz */
  /* Akzent */
  --gelb:#C55B12;
  --gelb-hell:#E8873A;
  /* Schrift */
  --tinte:#17120F;
  --grau:#6B6257;
  --linie:#DFD5C0;
  --linie-dunkel:rgba(246,240,228,.22);
  /* Typo */
  --schrift-h:'Bitter',Georgia,'Times New Roman',serif;
  --schrift-t:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Maße */
  --innen:1260px;
  --kopf-h:76px;
  --radius:4px;
  --uebergang:.35s ease;
}

/* ---------------------------------------------------------------- Basis */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 12px);-webkit-text-size-adjust:100%}
body{
  background:var(--papier);
  color:var(--tinte);
  font:400 17px/1.65 var(--schrift-t);
  overflow-x:hidden;
}
img{max-width:100%;height:auto}

::selection{background:var(--gelb);color:var(--kohle)}

:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}

/* --------------------------------------------------------------- Typo */
h1,h2,h3,h4{font-family:var(--schrift-h);font-weight:700;line-height:1.14;letter-spacing:-.02em;margin:0 0 .6rem}
h1{font-size:clamp(2rem,1.25rem + 3.3vw,3.35rem);line-height:1.06;letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,1.22rem + 1.6vw,2.45rem)}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.38rem);letter-spacing:-.01em}
h4{font-size:1.02rem;font-weight:600;letter-spacing:0}
p{margin:0 0 1rem;max-width:40rem}
p:last-child{margin-bottom:0}
strong{font-weight:600}
small{font-size:.86rem}

a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--uebergang)}
a:hover{color:var(--gruen-hell)}

.rubrik{
  display:inline-block;margin:0 0 .7rem;
  font:600 12px/1 var(--schrift-t);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gruen);
}
.strich{display:block;width:56px;height:3px;background:var(--gelb);margin:1rem 0 1.4rem;border:0}
.strich--mitte{margin-left:auto;margin-right:auto}
.vorspann{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--grau);max-width:42rem}
.zentriert{text-align:center}
.zentriert p,.zentriert .vorspann{margin-left:auto;margin-right:auto}

/* --------------------------------------------------- Layout & Abschnitte */
.innen{width:min(100% - 2.4rem,var(--innen));margin-inline:auto}
.innen--schmal{width:min(100% - 2.4rem,860px)}

.abschnitt{padding:clamp(2.3rem,1.6rem + 2.2vw,3.4rem) 0;position:relative}
.abschnitt--weit{padding:clamp(3rem,2rem + 3.2vw,4.6rem) 0}
.abschnitt--eng{padding:clamp(1.1rem,.8rem + 1vw,1.7rem) 0}

.abschnitt--creme{background:var(--creme)}
.abschnitt--dunkel{background:var(--gruen)}
.abschnitt--kohle{background:var(--kohle)}

/* Jede dunkle Fläche bekommt ihre Textfarben ausdrücklich */
.abschnitt--dunkel,.abschnitt--kohle,
.abschnitt--dunkel p,.abschnitt--kohle p,
.abschnitt--dunkel li,.abschnitt--kohle li,
.abschnitt--dunkel span,.abschnitt--kohle span,
.abschnitt--dunkel small,.abschnitt--kohle small,
.abschnitt--dunkel h2,.abschnitt--kohle h2,
.abschnitt--dunkel h3,.abschnitt--kohle h3,
.abschnitt--dunkel h4,.abschnitt--kohle h4{color:var(--creme)}
.abschnitt--dunkel .vorspann,.abschnitt--kohle .vorspann{color:#D9D2C1}
.abschnitt--dunkel .rubrik,.abschnitt--kohle .rubrik{color:var(--gelb)}
.abschnitt--dunkel a:not(.knopf),.abschnitt--kohle a:not(.knopf){color:var(--gelb-hell)}
.abschnitt--dunkel a:not(.knopf):hover,.abschnitt--kohle a:not(.knopf):hover{color:#F2B183}

/* ------------------------------------------------- Flächen mit Bild */
.abschnitt--bild{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:var(--creme);
}
.abschnitt--bild h2,.abschnitt--bild h3,.abschnitt--bild p,
.abschnitt--bild li,.abschnitt--bild span{color:var(--creme)}
.abschnitt--bild .rubrik{color:var(--gelb)}
.abschnitt--bild a:not(.knopf){color:var(--gelb-hell)}

.flaeche--biergarten{background-image:linear-gradient(rgba(23,18,15,.74),rgba(23,18,15,.74)),url('bilder/zwibbel-biergarten-hd.jpg')}
.flaeche--innen{background-image:linear-gradient(rgba(23,18,15,.76),rgba(23,18,15,.76)),url('bilder/zwibbel-innenbereich-hd.jpg')}
.flaeche--party{background-image:linear-gradient(rgba(23,18,15,.78),rgba(23,18,15,.78)),url('bilder/zwibbel-fotobox-hd.jpg')}
.flaeche--theke{background-image:linear-gradient(rgba(23,18,15,.76),rgba(23,18,15,.76)),url('bilder/dsc-4271-640.jpg')}
.flaeche--gaeste{background-image:linear-gradient(rgba(23,18,15,.78),rgba(23,18,15,.78)),url('bilder/dsc-4313-640.jpg')}
.flaeche--tresen{background-image:linear-gradient(rgba(23,18,15,.76),rgba(23,18,15,.76)),url('bilder/dsc-4266-640.jpg')}

/* ------------------------------------------------------------- Kopfzeile */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:linear-gradient(rgba(11,8,7,.72),rgba(11,8,7,0));
  transition:background var(--uebergang),box-shadow var(--uebergang);
}
.kopf.gescrollt{
  background:var(--gruen);
  box-shadow:0 1px 0 rgba(197,91,18,.45);
}
.kopf__innen{
  position:relative;
  width:min(100% - 2rem,var(--innen));margin-inline:auto;
  min-height:var(--kopf-h);
  display:flex;align-items:center;gap:1rem;
}
.marke{display:flex;align-items:center;flex:none;text-decoration:none;padding:.4rem 0}
.marke img{height:40px;width:auto;max-width:170px;object-fit:contain;display:block}

.menue-box{position:absolute;opacity:0;width:1px;height:1px;left:-9999px}
.menue-taste{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.5rem .8rem;cursor:pointer;
  color:var(--creme);font:600 13px/1 var(--schrift-t);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--linie-dunkel);border-radius:var(--radius);
  transition:border-color var(--uebergang),color var(--uebergang);
}
.menue-taste:hover{border-color:var(--gelb);color:var(--gelb-hell)}
.menue-box:focus-visible + .menue-taste{outline:3px solid var(--gelb);outline-offset:3px}

.nav{display:none}
.menue-box:checked ~ .nav,.nav.offen{
  display:block;position:absolute;top:100%;left:0;right:0;
  background:var(--gruen);border-top:2px solid var(--gelb);
  padding:.6rem 1.2rem 1.4rem;
}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.nav a:not(.knopf){
  display:block;min-height:44px;padding:.8rem .2rem;
  color:var(--creme);text-decoration:none;
  font:600 15px/1.2 var(--schrift-t);letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--linie-dunkel);
  transition:color var(--uebergang)
}
.nav a:not(.knopf):hover,.nav a[aria-current='page']:not(.knopf){color:var(--gelb)}
.nav .knopf{margin-top:1rem;width:100%;justify-content:center}

@media (min-width:980px){
  .menue-taste{display:none}
  .nav{display:block;margin-left:auto}
  .menue-box:checked ~ .nav{position:static;background:none;border:0;padding:0}
  .nav ul{flex-direction:row;align-items:center;gap:1.6rem}
  .nav a:not(.knopf){border:0;padding:.6rem 0;font-size:14px}
  .nav a:not(.knopf)::after{content:'';display:block;height:2px;margin-top:5px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform var(--uebergang)}
  .nav a:not(.knopf):hover::after,.nav a[aria-current='page']:not(.knopf)::after{transform:scaleX(1)}
  .nav .knopf{margin:0 0 0 .8rem;width:auto}
}

/* ---------------------------------------------------------- Schaltflächen */
.knopf,a.knopf,button.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:50px;padding:14px 30px;
  background:var(--gruen);color:var(--creme);
  border:2px solid var(--gruen-tief);border-radius:2px;
  font:700 14.5px/1 var(--schrift-h);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background var(--uebergang),color var(--uebergang),border-color var(--uebergang),transform var(--uebergang);
}
.knopf [data-symbol],a.knopf [data-symbol],button.knopf [data-symbol]{width:1.3em;height:1.3em}
.knopf:hover,a.knopf:hover,button.knopf:hover{background:var(--gelb);border-color:var(--gruen-tief);color:var(--kohle);transform:translateY(-3px)}
.knopf--zweit,a.knopf--zweit{background:transparent;color:var(--gruen-tief);border-color:var(--gruen)}
.knopf--zweit:hover,a.knopf--zweit:hover{background:var(--gelb);border-color:var(--gruen-tief);color:var(--kohle)}
.knopf--hell,a.knopf--hell{background:transparent;color:var(--creme);border-color:var(--creme)}
.knopf--hell:hover,a.knopf--hell:hover{background:var(--gelb);border-color:var(--gelb);color:var(--kohle)}
.knopf--gelb,a.knopf--gelb{background:var(--creme);border-color:var(--gruen-tief);color:var(--kohle)}
.knopf--gelb:hover,a.knopf--gelb:hover{background:var(--gelb);border-color:var(--gruen-tief);color:var(--kohle)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* ------------------------------------------------------------- Symbole */
[data-symbol]{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.15em;height:1.15em;color:inherit}
[data-symbol] svg{width:100%;height:100%;display:block}
.symbol-halter--gross{
  box-sizing:border-box;
  width:clamp(2.7rem,2.4rem + 1vw,3.2rem);height:clamp(2.7rem,2.4rem + 1vw,3.2rem);
  padding:.62rem;
  background:var(--creme);
  border:2px solid var(--gruen);border-radius:50%;
  color:var(--gruen);
}
.abschnitt--dunkel .symbol-halter--gross,.abschnitt--kohle .symbol-halter--gross,
.abschnitt--bild .symbol-halter--gross{background:rgba(197,91,18,.16);border-color:var(--gelb);color:var(--gelb)}

/* ---------------------------------------------------------------- Hero */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:clamp(520px,76vh,700px);
  padding:calc(var(--kopf-h) + 2.5rem) 0 clamp(2.4rem,1.8rem + 3vw,4rem);
  color:var(--creme);
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  animation:heranfahren 14s ease-out forwards;
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,18,15,.72) 0%,rgba(23,18,15,.52) 42%,rgba(23,18,15,.90) 100%);
}
.hero--events::before{background-image:url('bilder/zwibbel-fotobox-hd.jpg')}
.hero--getraenke::before{background-image:url('bilder/dsc-4266-640.jpg')}
.hero__inhalt{max-width:46rem}
.hero h1{color:var(--creme);margin-bottom:1rem}
.hero p{color:#E7E0CE;font-size:clamp(1.05rem,1rem + .4vw,1.22rem);max-width:38rem}
.hero .rubrik{color:var(--gelb)}
.hero__zusatz{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.3rem;color:#D9A441;font-size:.95rem}
.hero__zusatz [data-symbol]{color:#C08F2E}
@keyframes heranfahren{from{transform:scale(1.07)}to{transform:scale(1)}}

/* -------------------------------------------------------------- Infoband */
.infoband{background:var(--kohle);color:var(--creme);padding:1rem 0}
.infoband ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:center}
.infoband li{display:flex;align-items:center;gap:.55rem;color:var(--creme);font:600 12.5px/1.3 var(--schrift-t);letter-spacing:.12em;text-transform:uppercase}
.infoband li [data-symbol]{color:var(--gelb);width:1.4em;height:1.4em}

/* ------------------------------------------------------- Medien (Text+Bild) */
.medien{display:grid;gap:clamp(1.4rem,1rem + 2vw,2.8rem);align-items:center}
@media (min-width:860px){
  .medien{grid-template-columns:5fr 7fr}
  .medien--gedreht{grid-template-columns:7fr 5fr}
  .medien--gedreht .medien__text{order:2}
}
.medien__text{max-width:42rem}
.bildkasten{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--creme)}
.bildkasten img{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;transition:transform .4s ease}
.bildkasten:hover img{transform:scale(1.05)}
.bildkasten--hoch img{aspect-ratio:3/4}
.bildkasten--breit img{aspect-ratio:16/9}
.bildkasten__marke{
  position:absolute;left:0;bottom:0;
  background:var(--gelb);color:var(--kohle);
  font:600 11.5px/1 var(--schrift-t);letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem .9rem;
}

/* --------------------------------------------------------- Hakenlisten */
.hakenliste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
@media (min-width:720px){.hakenliste--zwei{grid-template-columns:1fr 1fr;gap:.7rem 2rem}}
.hakenliste li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5;padding-bottom:.7rem;border-bottom:1px solid var(--linie)}
.hakenliste li [data-symbol]{color:var(--gruen);width:1.3em;height:1.3em;margin-top:.1em}
.abschnitt--dunkel .hakenliste li,.abschnitt--kohle .hakenliste li,.abschnitt--bild .hakenliste li{border-bottom-color:var(--linie-dunkel)}
.abschnitt--dunkel .hakenliste [data-symbol],.abschnitt--kohle .hakenliste [data-symbol],.abschnitt--bild .hakenliste [data-symbol]{color:var(--gelb)}

/* ------------------------------------------------------------- Karten */
.karten{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.karte{
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);
  padding:1.5rem 1.4rem;
  transition:border-color var(--uebergang),transform var(--uebergang),background var(--uebergang);
}
.karte:hover{border-color:var(--gelb);transform:translateY(-3px)}
.karte h3{margin-bottom:.45rem}
.karte p{font-size:.97rem;color:var(--grau);margin:0}
.karte__kopf{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.abschnitt--creme .karte{background:#F6F0E4}
.abschnitt--dunkel .karte,.abschnitt--kohle .karte{background:rgba(246,240,228,.06);border-color:var(--linie-dunkel)}
.abschnitt--dunkel .karte p,.abschnitt--kohle .karte p{color:#D5CDBB}

/* Eventkarten */
.event{
  display:grid;gap:.4rem;position:relative;overflow:hidden;
  background:rgba(246,240,228,.06);border:1px solid var(--linie-dunkel);
  border-left:4px solid var(--gelb);border-radius:var(--radius);
  padding:1.4rem 1.3rem;
  transition:background var(--uebergang),transform var(--uebergang)
}
.event:hover{background:rgba(246,240,228,.12);transform:translateY(-3px)}
.event__tag{font:600 12px/1 var(--schrift-t);letter-spacing:.18em;text-transform:uppercase;color:var(--gelb)}
.event h3{margin:0}
.event p{color:#D5CDBB;font-size:.97rem;margin:0}

/* Preis-/Kartenzeilen (Getränke) */
.tafel{list-style:none;margin:1.2rem 0 0;padding:0}
.tafel li{display:flex;align-items:baseline;gap:.8rem;padding:.6rem 0;border-bottom:1px dashed var(--linie)}
.tafel__name{font-weight:600}
.tafel__punkte{flex:1;border-bottom:1px dotted var(--linie);transform:translateY(-.25em)}
.tafel__wert{font-variant-numeric:tabular-nums;color:var(--grau);white-space:nowrap}

/* ------------------------------------------------------------- Zahlen */
.zahlen{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));text-align:center}
.zahl__wert{display:block;font-family:var(--schrift-h);font-weight:700;font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem);line-height:1.05;color:var(--gelb);font-variant-numeric:tabular-nums}
.zahl__text{display:block;margin-top:.35rem;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;color:var(--creme)}

/* ------------------------------------------------------------- Galerie */
.galerie{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(7rem,17vw,14rem)}
.galerie li{overflow:hidden;border-radius:var(--radius);background:var(--creme)}
.galerie li.breit{grid-column:span 2;grid-row:span 2}
.galerie li.hoch{grid-row:span 2}
.galerie a{display:block;height:100%}
.galerie img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;transition:transform .4s ease}
.galerie a:hover img{transform:scale(1.06)}
@media (min-width:760px){
  .galerie{grid-template-columns:repeat(4,1fr);gap:.9rem}
  .galerie li.breit{grid-row:span 1}
}

/* ---------------------------------------------------------- Kundenstimmen */
.stimmen{background:var(--creme)}
.stimme{
  background:#F6F0E4;border:1px solid var(--linie);border-radius:var(--radius);
  padding:1.6rem 1.4rem;height:100%;
}
.stimme__sterne{color:var(--gelb);letter-spacing:.2em;font-size:1rem;margin-bottom:.6rem}
.stimme__text{font-family:var(--schrift-h);font-size:1.02rem;line-height:1.5;margin:0 0 .9rem}
.stimme__text::before{content:'„'}
.stimme__text::after{content:'“'}
.stimme__wer{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin:0}
.stimme.platzhalter{border-style:dashed;background:transparent}
.stimme.platzhalter .stimme__text{color:var(--grau);font-style:italic}

/* -------------------------------------------------------------- Zitat */
.zitat{
  border-left:4px solid var(--gelb);padding:.4rem 0 .4rem 1.4rem;margin:1.6rem 0 0;
  font-family:var(--schrift-h);font-size:clamp(1.2rem,1.05rem + .8vw,1.65rem);line-height:1.35;
}
.zitat cite{display:block;margin-top:.8rem;font:600 12.5px/1 var(--schrift-t);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--gelb)}

/* --------------------------------------------------------------- Ablauf */
.schritte{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));counter-reset:schritt}
.schritte li{counter-increment:schritt;padding-top:1rem;border-top:3px solid var(--gelb)}
.schritte li::before{content:counter(schritt,decimal-leading-zero);display:block;font-family:var(--schrift-h);font-weight:700;font-size:1.4rem;color:var(--gruen-hell);margin-bottom:.3rem}
.abschnitt--dunkel .schritte li::before,.abschnitt--kohle .schritte li::before{color:var(--gelb)}

/* ------------------------------------------------------------- Aufklapper */
.faq{display:grid;gap:.6rem;margin-top:1.4rem}
.faq details{border:1px solid var(--linie);border-radius:var(--radius);background:var(--papier)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 1.1rem;font-family:var(--schrift-h);font-weight:700;font-size:1.02rem;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gruen-hell);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{border-bottom:1px solid var(--linie)}
.faq p{padding:1rem 1.1rem;margin:0;color:var(--grau)}

/* ------------------------------------------------------------ Kontakt */
.kontaktliste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.9rem}
.kontaktliste li{display:flex;gap:.8rem;align-items:flex-start}
.kontaktliste [data-symbol]{color:var(--gruen-hell);margin-top:.2em;width:1.3em;height:1.3em}
.abschnitt--dunkel .kontaktliste [data-symbol],.abschnitt--kohle .kontaktliste [data-symbol],.abschnitt--bild .kontaktliste [data-symbol]{color:var(--gelb)}
.zeiten{list-style:none;margin:1.1rem 0 0;padding:0}
.zeiten li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--linie)}
.abschnitt--dunkel .zeiten li,.abschnitt--kohle .zeiten li{border-bottom-color:var(--linie-dunkel)}
.zeiten span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}

[data-karte]{margin-top:1.6rem;min-height:340px;display:flex;align-items:center;justify-content:center;background:var(--creme);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
[data-karte] iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* ----------------------------------------------------------- Formular */
.formular{display:grid;gap:1rem;max-width:44rem}
@media (min-width:680px){.formular .zwei{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
.feld{display:grid;gap:.35rem}
.feld > span,.formular label > span.beschriftung{font:600 12.5px/1 var(--schrift-t);letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;padding:.85rem .9rem;min-height:46px;
  font:400 16px/1.4 var(--schrift-t);color:var(--tinte);
  background:#FFFDF8;border:1px solid var(--linie);border-radius:var(--radius);
  transition:border-color var(--uebergang),background var(--uebergang);
}
input:focus,textarea:focus{border-color:var(--gruen-hell);background:#fff;outline-offset:1px}
textarea{min-height:160px;resize:vertical}
.einwilligung{display:block;font-size:.93rem;color:var(--grau);line-height:1.5}
.einwilligung input{margin-right:.5rem;width:20px;height:20px;accent-color:var(--gruen)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular-hinweis{padding:.9rem 1.1rem;border-radius:var(--radius);font-size:.97rem;margin-bottom:1rem}
.hinweis-ok{background:#E4EFE2;border:1px solid #2F6B3C;color:#1E4A2A}
.hinweis-fehler{background:#F6E3DF;border:1px solid #9A3324;color:#7B2719}

/* ------------------------------------------------------------ Fusszeile */
.fuss{background:var(--kohle);color:#D9D2C1;padding:clamp(2.4rem,1.8rem + 2vw,3.4rem) 0 1.6rem;font-size:.97rem}
.fuss h3{color:var(--creme);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem}
.fuss p{color:#D9D2C1;max-width:30rem}
.fuss a{color:#E7DFCC;text-decoration:none}
.fuss a:hover{color:var(--gelb)}
.fuss__raster{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.fuss__logo{height:48px;width:auto;object-fit:contain;margin-bottom:1rem;display:block}
.fuss__liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss__liste a{display:inline-block;padding:.25rem 0}
.fuss .kontaktliste [data-symbol]{color:var(--gelb)}
.sozial{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;gap:.7rem;flex-wrap:wrap}
.sozial a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .9rem;border:1px solid var(--linie-dunkel);border-radius:var(--radius);transition:border-color var(--uebergang),color var(--uebergang)}
.sozial a:hover{border-color:var(--gelb)}
.fuss__unten{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;align-items:center;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--linie-dunkel);font-size:.9rem}
.fuss__unten ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem}

/* ----------------------------------------------------------- Rechtstext */
.rechtstext{
  width:min(100% - 2.4rem,52rem);margin-inline:auto;
  padding:calc(var(--kopf-h) + 2.8rem) 0 4rem;
}
.rechtstext h1{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);margin-bottom:1.4rem}
.rechtstext h2{font-size:1.4rem;margin:2.2rem 0 .7rem}
.rechtstext h3{font-size:1.1rem;margin:1.6rem 0 .5rem}
.rechtstext p,.rechtstext li{max-width:none;font-size:16.5px;line-height:1.7}
.rechtstext ul{padding-left:1.2rem;margin:0 0 1rem}
.rechtstext li{margin-bottom:.4rem}
.rechtstext a{word-break:break-word}

/* ------------------------------------------------------- Zustände / Rest */
.offen{display:block}
.sichtbar{will-change:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* === Breite: body > header img#0 === */
body > header > .kopf__innen > .marke { max-width: 330px !important; }
/* === Ende Breite body > header img#0 === */

/* === Textfarbe Zustände: zx2h1jq === */
[data-zustand="zx2h1jq"], [data-zustand="zx2h1jq"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #f6f0e4 !important; }
/* === Ende Textfarbe Zustände zx2h1jq === */

/* === Angepasst über das Wunsch-Feld === */
/* === Breite: body > header img#0 === */
body > header > .kopf__innen > .marke { max-width: 430px !important; }
/* === Ende Breite body > header img#0 === */

/* Logo breiter, Kopfhöhe praktisch unverändert */
.kopf__innen .marke.hat-logo{ padding-block:0; flex:none; }
.kopf__innen .marke.hat-logo img{
  height:100px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}
@media (max-width:620px){
  .kopf__innen .marke.hat-logo img{ height:72px; }
}

/* Schaltfläche "Heute in der Zwibbel" in Dunkelgrün */
.kopf .nav a.knopf.knopf--gelb{
  background:#012b13;
  border-color:#012b13;
}
.kopf .nav a.knopf.knopf--gelb:hover,
.kopf .nav a.knopf.knopf--gelb:focus-visible{
  background:#024a22;
  border-color:#024a22;
}

/* Linie unter der Kopfzeile beim Scrollen im Goldton des Logos */
.kopf.gescrollt{
  box-shadow:0 1px 0 #C9A227;
}
/* === Ende Anpassungen === */

.rubrik--gold{color:#c9a227}

/* === Textfarbe Zustände: zqczig0 === */
[data-zustand="zqczig0"], [data-zustand="zqczig0"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #dfd5c0 !important; }
/* === Ende Textfarbe Zustände zqczig0 === */

/* === Textfarbe Zustände: zozf05d === */
[data-zustand="zozf05d"], [data-zustand="zozf05d"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ebe2cf !important; }
[data-zustand="zozf05d"]:hover, [data-zustand="zozf05d"]:hover *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ebe2cf !important; }
/* === Ende Textfarbe Zustände zozf05d === */

/* === Breite: #bilder ul#0.galerie === */
#bilder > .innen { max-width: 1244px !important; width: min(100% - 48px, 1244px) !important; }
/* === Ende Breite #bilder ul#0.galerie === */

/* === Textfarbe Zustände: zf5efpb === */
[data-zustand="zf5efpb"], [data-zustand="zf5efpb"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #17120f !important; }
[data-zustand="zf5efpb"]:hover, [data-zustand="zf5efpb"]:hover *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ebe2cf !important; }
[data-zustand="zf5efpb"]:active, [data-zustand="zf5efpb"]:active *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ebe2cf !important; }
/* === Ende Textfarbe Zustände zf5efpb === */

/* === Textfarbe Zustände: zp4bqvj === */
[data-zustand="zp4bqvj"], [data-zustand="zp4bqvj"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #fb9d50 !important; }
/* === Ende Textfarbe Zustände zp4bqvj === */

/* === Textfarbe Zustände: z837nre === */
[data-zustand="z837nre"], [data-zustand="z837nre"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #fb9d50 !important; }
/* === Ende Textfarbe Zustände z837nre === */

/* === Textfarbe Zustände: z1t1z6m === */
[data-zustand="z1t1z6m"], [data-zustand="z1t1z6m"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #fb9d50 !important; }
/* === Ende Textfarbe Zustände z1t1z6m === */

/* === Schrift: scvx430 === */
@media (max-width: 600px) { [data-schrift="scvx430"] { font-size: 11px !important; } }
/* === Ende Schrift scvx430 === */

/* === Schrift: ssifawg === */
@media (max-width: 600px) { [data-schrift="ssifawg"] { font-size: 11px !important; } }
/* === Ende Schrift ssifawg === */

/* === Schrift: slceh1d === */
@media (max-width: 600px) { [data-schrift="slceh1d"] { font-size: 11px !important; } }
/* === Ende Schrift slceh1d === */

/* === Schrift: sbzck7e === */
@media (max-width: 600px) { [data-schrift="sbzck7e"] { font-size: 11px !important; } }
/* === Ende Schrift sbzck7e === */

/* === Schrift: s6mcd5j === */
@media (max-width: 600px) { [data-schrift="s6mcd5j"] { font-size: 11px !important; } }
/* === Ende Schrift s6mcd5j === */

/* === Schrift: s75uxzv === */
@media (max-width: 600px) { [data-schrift="s75uxzv"] { font-size: 11px !important; } }
/* === Ende Schrift s75uxzv === */

/* === Schrift: sxl2ji4 === */
@media (max-width: 600px) { [data-schrift="sxl2ji4"] { font-size: 11px !important; } }
/* === Ende Schrift sxl2ji4 === */

/* === Schrift: swrat2q === */
@media (max-width: 600px) { [data-schrift="swrat2q"] { font-size: 11px !important; } }
/* === Ende Schrift swrat2q === */

/* === Schrift: sxm5a2j === */
@media (max-width: 600px) { [data-schrift="sxm5a2j"] { font-size: 11px !important; } }
/* === Ende Schrift sxm5a2j === */


/* Getränkekarte: Bilderabschnitt braucht genug Innenabstand, damit die
   Galerie nicht an den angrenzenden Abschnitt stösst. */
body[data-seite="getraenkekarte"] #bilder{
  padding-block:clamp(2.3rem,1.6rem + 2.2vw,3.4rem);
  overflow:hidden;
}

.hero__zusatz--zahlung{margin-left:clamp(.8rem,2vw,1.5rem)}


/* ---------- Vorschalt-Bild ---------- */
html.laedt { overflow: hidden; }
.lader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  /* Halbdurchsichtig mit Weichzeichner: die Seite ist dahinter zu erahnen
     und kommt beim Ausblenden zum Vorschein - statt einer toten Flaeche. */
  background: color-mix(in srgb, var(--lader-farbe, var(--papier, var(--paper, #fff))) var(--lader-deckung, 68%), transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  transition: opacity .7s cubic-bezier(.4,0,.2,1),
              visibility .7s,
              -webkit-backdrop-filter .7s ease,
              backdrop-filter .7s ease;
}
/* Kein Weichzeichner im Browser? Dann deckend, damit nichts flackert. */
@supports not (backdrop-filter: blur(2px)) {
  .lader { background: var(--lader-farbe, var(--papier, var(--paper, #fff))); }
}
.lader--fertig {
  opacity: 0; visibility: hidden;
  /* Sobald das Vorschaltbild fertig ist, darf es KEINE Klicks mehr
     abfangen. Bisher haing das allein an visibility:hidden - und das
     wird ueber 0,7 s hinweg uebergeblendet. In dieser Zeit lag eine
     unsichtbare Flaeche mit z-index 9999 ueber der ganzen Seite, und
     jeder Fingertipp landete dort statt auf dem Menue.
     pointer-events wird nicht uebergeblendet, gilt also sofort. */
  pointer-events: none;
  -webkit-backdrop-filter: blur(0) saturate(1);
  backdrop-filter: blur(0) saturate(1);
}
/* Das Sicherheitsnetz der Laufzeit setzt nach 700 ms das hidden-Attribut.
   Ohne diese Regel bleibt es wirkungslos: .lader mit display:grid hat
   dieselbe Gewichtung und steht spaeter, gewinnt also. Auf der Seite von
   Motorgeraete Freitag war genau das zu messen - hidden gesetzt, display
   trotzdem grid. */
.lader[hidden] { display: none !important; }
.lader--fertig .lader-inhalt { transform: scale(1.04); opacity: 0; }
.lader-inhalt { transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.lader-inhalt { display: grid; justify-items: center; gap: 1.5rem; }
/* Grundhoehe etwas groesser als frueher (40-72 px war auf dem Handy winzig),
   mal --lader-groesse aus den Firmen-Einstellungen; nie breiter als 86vw. */
.lader-logo { height: calc(clamp(52px, 12vw, 84px) * var(--lader-groesse, 1)); width: auto; max-width: 86vw; }

/* SVG-Logo: wird von links mit der Akzentfarbe gefuellt */
.lader-logo--svg svg { height: 100%; width: auto; display: block; }
.lader-logo--svg svg * { fill: color-mix(in srgb, currentColor 16%, transparent) !important; stroke: none !important; }
.lader-logo--svg .lader-fuellung * { fill: var(--gold, var(--accent, #C8901F)) !important; }
.lader-logo--svg .lader-fuellung {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoFuellen 1.25s cubic-bezier(.5,0,.2,1) forwards;
}
.lader-logo--svg { position: relative; display: inline-block; }
@keyframes logoFuellen { to { clip-path: inset(0 0 0 0); } }

/* Bild-Logo: Graustufen, wird farbig aufgedeckt */
.lader-logo--bild { position: relative; display: inline-block; height: calc(clamp(52px, 12vw, 84px) * var(--lader-groesse, 1)); max-width: 86vw; }
.lader-logo--bild img { height: 100%; width: auto; max-width: 86vw; object-fit: contain; display: block; }
.lader-logo--bild > img:first-child { filter: grayscale(1) opacity(.22); }
.lader-logo__farbe {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoFuellen 1.25s cubic-bezier(.5,0,.2,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .lader-logo--svg .lader-fuellung, .lader-logo__farbe { clip-path: none; }
  .lader-logo--bild > img:first-child { filter: none; }
}
/* Der Firmenname (kein Logo): mittig, nie breiter als der Bildschirm. Bricht
   er auf dem Handy um, fuellt sich jede Zeile fuer sich (clone) - sonst lief
   das Gold zeilenweise versetzt und der Text wirkte schief (Vogtlandperle). */
.lader-wort {
  display: inline-block; max-width: 86vw; text-align: center; line-height: 1.12; overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font-family: var(--font-display, var(--schrift-display, serif));
  font-size: calc(clamp(1.5rem, 1rem + 2.6vw, 2.75rem) * var(--lader-groesse, 1));
  font-weight: 700; letter-spacing: -.03em;
  color: color-mix(in srgb, var(--tinte, var(--ink, #222)) 18%, transparent);
  background-image: linear-gradient(90deg,
    var(--gold, var(--accent, #C8901F)) 0 50%,
    color-mix(in srgb, var(--tinte, var(--ink, #222)) 18%, transparent) 50% 100%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laderFuellen 1.15s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes laderFuellen { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .lader-wort { -webkit-text-fill-color: currentColor; color: var(--tinte, var(--ink, #222)); }
}

/* ---------- Cookie-Hinweis ---------- */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9000;
  max-width: 34rem; margin-inline: auto;
  display: grid; gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--tinte, var(--paper-deep, #1b1b1b)); color: #fff;
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  transform: translateY(130%); transition: transform .45s cubic-bezier(.16,1,.3,1);
  font-size: .9375rem;
}
.cookie.sichtbar { transform: none; }
.cookie b { display: block; margin-bottom: .4rem; }
.cookie p { color: rgba(255,255,255,.78); line-height: 1.55; margin: 0; max-width: none; }
.cookie a { color: #fff; }
.cookie-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-knoepfe button { padding: .65rem 1.2rem; border-radius: var(--radius, 5px); border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; cursor: pointer; font-size: .9rem; }
.cookie-ok { background: var(--gold, var(--accent, #C8901F)) !important; border-color: transparent !important; color: #1b1b1b !important; font-weight: 600; }
@media (min-width: 620px) { .cookie { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- WhatsApp ---------- */
.wa-knopf {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 8000;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.7);
  transition: transform .2s ease;
}
.wa-knopf:hover { transform: scale(1.07); }
.wa-knopf svg { width: 28px; height: 28px; }

/* ---------- Nach oben ---------- */
.nach-oben {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 7900;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--tinte, var(--paper-deep, #1b1b1b)); color: #fff; border: 0;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; transform: none; }
.nach-oben svg { width: 20px; height: 20px; }

/* ---------- Schwebende Knoepfe: ein Stapel ----------
   Beide Knoepfe stehen in .pano-schwebend (funktionen.js, schwebendHtml):
   der Stapel ist fest, die Knoepfe darin liegen untereinander - nie mehr
   aufeinander. --s-sockel setzt die Laufzeit: die Hoehe einer festen Leiste
   am unteren Rand („Anrufen / Route"), ueber die der Stapel ruecken muss.
   Der Abstand gilt dann ueber der Leiste. Handy = bis 600 px.
   (0,2,0) schlaegt Regeln des Entwurfs wie .nach-oben { position: fixed;
   right: …; bottom: … } (Harmonie, Kampfsportschule). */
.pano-schwebend {
  position: fixed; z-index: 8000; right: 1.1rem; left: auto;
  bottom: calc(var(--s-unten, 1.1rem) + var(--s-sockel, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  pointer-events: none;
  transition: bottom .25s ease;
}
.pano-schwebend[data-seite="links"] { right: auto; left: 1.1rem; }
@media (max-width: 600px) {
  .pano-schwebend { bottom: calc(var(--s-unten-handy, var(--s-unten, 1.1rem)) + var(--s-sockel, 0px)); }
}
.pano-schwebend > .nach-oben, .pano-schwebend > .wa-knopf { position: static; inset: auto; margin: 0; flex: none; }
.pano-schwebend > .wa-knopf { pointer-events: auto; }
/* Farben des Pfeils: eigene aus dem Werkzeug, sonst wie bisher. Ist die
   Flaeche hell, setzt die Laufzeit einen dunklen Pfeil (--s-oben-zeichen-auto):
   bei der Schaedlingsbekaempfung lag ein weisser Pfeil auf #f2f5f3 und war
   praktisch unsichtbar. !important, weil die Kontrastheilung des Baus
   (kontrast.js) sonst „.pano-schwebend button.nach-oben { color: #1a1a1a }"
   anhaengt - gerechnet mit der Flaeche des Entwurfs, nicht mit der eigenen:
   ein gewaehlter Pfeil haette nie gegriffen, und auf einer dunkel gewaehlten
   Flaeche waere er dunkel geblieben. Die Laufzeit misst die echte Flaeche. */
.pano-schwebend > .nach-oben {
  background: var(--s-oben-farbe, var(--tinte, var(--paper-deep, #1b1b1b)));
  color: var(--s-oben-zeichen, var(--s-oben-zeichen-auto, #fff)) !important;
}
/* Groesse S / M (Standard, wie bisher) / L - fuer beide Knoepfe. */
.pano-schwebend[data-groesse="S"] > .nach-oben { width: 38px; height: 38px; }
.pano-schwebend[data-groesse="S"] > .nach-oben svg { width: 17px; height: 17px; }
.pano-schwebend[data-groesse="S"] > .wa-knopf { width: 44px; height: 44px; }
.pano-schwebend[data-groesse="S"] > .wa-knopf svg { width: 23px; height: 23px; }
.pano-schwebend[data-groesse="L"] > .nach-oben { width: 56px; height: 56px; }
.pano-schwebend[data-groesse="L"] > .nach-oben svg { width: 24px; height: 24px; }
.pano-schwebend[data-groesse="L"] > .wa-knopf { width: 64px; height: 64px; }
.pano-schwebend[data-groesse="L"] > .wa-knopf svg { width: 33px; height: 33px; }

/* Sicherheitsnetz gegen riesige Symbole. Ein eingebettetes SVG ohne Breite
   und Hoehe waechst auf die volle Zeilenbreite - bei Jacob fuellte eine Uhr
   den halben Bildschirm, nachdem ein Umbau den Abschnitt mit Klassen
   versehen hatte, fuer die das Stylesheet keine Regel kennt. :where() haelt
   die Gewichtung bei null, damit jede echte Gestaltungsregel gewinnt. */
main :where(svg.symbol:not([width]):not([height])) { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
main :where(svg:not([width]):not([height]):not([class])) { width: 2.25rem; height: 2.25rem; max-width: 100%; }
/* Seiten, die noch vor dem Stapel gebaut wurden: Pfeil ueber WhatsApp.
   Im Stapel ist der Pfeil position: static - dort wirkt bottom nicht. */
.wa-knopf ~ .nach-oben, body:has(.wa-knopf) .nach-oben { bottom: 4.9rem; }

/* ---------- Einblenden ---------- */
.js-zeigen [data-zeigen] {
  opacity: 0; transform: translateY(18px);
  transition:opacity 0.45s cubic-bezier(.16,1,.3,1), transform 0.45s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--verzug, 0ms);
}
.js-zeigen [data-zeigen].sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-zeigen [data-zeigen] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- Lightbox ---------- */
dialog.lichtkasten { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
dialog.lichtkasten::backdrop { background: rgba(0,0,0,.9); }
dialog.lichtkasten img { max-height: 88vh; max-width: 90vw; width: auto; border-radius: 4px; }
dialog.lichtkasten button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; }
.lk-zu { top: -2.6rem; right: 0; font-size: 2.2rem; }
.lk-vor, .lk-nach { top: 50%; transform: translateY(-50%); font-size: 3.2rem; padding: 0 1rem; opacity: .7; }
.lk-vor { left: -3.5rem; } .lk-nach { right: -3.5rem; }
.lk-vor:hover, .lk-nach:hover { opacity: 1; }
@media (max-width: 780px) { .lk-vor { left: -.5rem; } .lk-nach { right: -.5rem; } }

/* ---------- Popup (Hinweisfenster) ----------
   Steht hier und nicht in funktionen.css: dieser Teil kommt ans ENDE von
   stil.css, gewinnt also gegen gleich starke Regeln des Entwurfs (eine
   Website hat ein globales dialog::backdrop), und die Pruefung „Klassen
   ohne Regel" kennt die Klassen. Grund und Schrift misst die Laufzeit an
   der Seite (--pano-popup-grund/-schrift) - die Variablennamen der
   Entwuerfe sind je Website anders. Keine Scroll-Sperre: beim Oeffnen
   gemessen 0 px Verschiebung (scrollY, Ueberschrift, Breite). Auf 360x640
   passt der Kasten (322x455), ohne inneres Rollen. */
dialog.pano-popup {
  border: 0; padding: 0; margin: auto; inset: 0;
  width: min(30rem, calc(100vw - 2rem)); max-width: none;
  max-height: calc(100dvh - 2rem);
  overflow: auto; overscroll-behavior: contain;
  background: var(--pano-popup-grund, var(--papier, #fff)); color: var(--pano-popup-schrift, var(--tinte, #1b1b1b));
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.45);
}
dialog.pano-popup:not([open]) { display: none !important; }
dialog.pano-popup::backdrop { background: rgba(0,0,0,.55); }
dialog.pano-popup .pano-popup__bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 38vh; object-fit: cover; margin: 0; border-radius: 0; }
/* Lange Woerter und Adressen bleiben im Kasten. Ohne feste Spalte wuchs die
   automatische Rasterspalte auf die Breite des laengsten Wortes - gemessen
   bei gynevo: „Weihnachtsfeiertagsöffnungszeiten" machte die Spalte 474 px
   breit im 432-px-Kasten (Titelende unter dem ×), eine Doctolib-Adresse im
   Text 362 px bei 310 px Platz (rechts abgeschnitten). minmax(0, 1fr) haelt
   die Spalte auf Kastenbreite; overflow-wrap: anywhere bricht, was dann
   immer noch nicht passt - auch wenn der Entwurf overflow-wrap anders setzt.
   Getrennt wird wie auf der restlichen Seite (funktionen.css: H2 nur auf dem
   Handy), gebrochen nur, wenn ein Wort wirklich nicht in die Zeile passt. */
dialog.pano-popup .pano-popup__innen { padding: 1.5rem 1.5rem 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
dialog.pano-popup .pano-popup__titel { margin: 0; padding-right: 2rem; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1.2; max-width: none; overflow-wrap: anywhere; }
dialog.pano-popup .pano-popup__bild ~ .pano-popup__innen .pano-popup__titel { padding-right: 0; }
dialog.pano-popup .pano-popup__text { margin: 0; line-height: 1.55; white-space: pre-line; max-width: none; color: inherit; overflow-wrap: anywhere; }
/* Rueckfall ohne Knopfklasse der Website - :where() haelt die Gewichtung bei
   null, damit .knopf der Website gewinnt. */
:where(.pano-popup__knopf) { display: inline-block; padding: .75rem 1.3rem; border-radius: var(--radius, 6px);
  background: var(--accent, var(--gold, #C8901F)); color: var(--accent-ink, #fff); font-weight: 600; text-decoration: none; }
/* white-space: normal, weil manche Entwuerfe .knopf auf nowrap setzen (live:
   dr-med-suna-cataltepe-neumaeuer und grit). Bei dr-med-suna lief ein
   Knopftext mit 40 Zeichen bei 390 px 37 px aus dem Kasten. Im Popup darf
   er umbrechen. */
dialog.pano-popup .pano-popup__knopf { justify-self: start; margin: .25rem 0 0; max-width: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere; }
/* Die Laufzeit schaltet hierauf um, wenn die Knopfklasse der Website im Popup
   unlesbar waere (Farben kommen dann inline: Schrift und Grund des Popups vertauscht). */
dialog.pano-popup .pano-popup__knopf--eigen { display: inline-block; padding: .75rem 1.3rem; border: 0; border-radius: var(--radius, 6px); font-weight: 600; text-decoration: none; }
dialog.pano-popup .pano-popup__zu { position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 2.75rem; height: 2.75rem; min-width: 0; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #1b1b1b; box-shadow: 0 1px 6px rgba(0,0,0,.18);
  font: 400 1.6rem/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; }
dialog.pano-popup .pano-popup__zu:focus-visible, dialog.pano-popup .pano-popup__knopf:focus-visible { outline: 3px solid var(--accent, #C8901F); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  dialog.pano-popup[open] { animation: panoPopupAuf .2s ease-out; }
  dialog.pano-popup[open]::backdrop { animation: panoPopupAuf .2s ease-out; }
}
@keyframes panoPopupAuf { from { opacity: 0; } to { opacity: 1; } }


/* Kontrast nachgezogen – spezifischere Regeln hatten die
   Schriftfarbe überschrieben, ohne den Grund mitzunehmen. */
.stimmen p.stimme__sterne{ color:#1a1a1a; }
.infoband span.symbol-halter{ color:#fff; }
.bildkasten figcaption.bildkasten__marke{ color:#fff; }
.bildkasten--hoch figcaption.bildkasten__marke{ color:#fff; }
.abschnitt--kohle span.rubrik{ color:#fff; }
.fuss span.symbol-halter{ color:#fff; }
.abschnitt--kohle span.symbol-halter{ color:#fff; }
.abschnitt--dunkel span.rubrik{ color:#fff; }
.abschnitt--dunkel span.symbol-halter.symbol-halter--gross{ color:#fff; }
.knopf--gelb span.symbol-halter{ color:#1a1a1a; }
.abschnitt--weit a.knopf.knopf--zweit{ color:#fff; }
.abschnitt--weit span.rubrik{ color:#fff; }
.abschnitt--kohle span.symbol-halter.symbol-halter--gross{ color:#fff; }