/* 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(var(--pp-breite, 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(--pp-ecken, var(--radius-lg, 10px));
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.45);
}
dialog.pano-popup:not([open]) { display: none !important; }
/* Das Fenster selbst bekommt beim Oeffnen den Fokus (laufzeit.js §13) - ohne Ring, es ist kein Bedienelement. */
dialog.pano-popup:focus { outline: none; }
dialog.pano-popup::backdrop { background: rgba(0,0,0,var(--pp-dunkel, .55)); }
/* Seit 2.23.0 (Popup-Baukasten): feste Hoehe (rollt innen), Lage, Bild seitlich oder als Hintergrund, mehrere
   Bilder als Slider. Werte kommen als Variablen am Fenster (funktionen.js popupHtml). */
dialog.pano-popup.pano-popup--hoch { height: min(var(--pp-hoehe, auto), calc(100dvh - 2rem)); }
dialog.pano-popup.pano-popup--mitte { margin: auto; }
dialog.pano-popup.pano-popup--oben { margin-top: 1rem; margin-bottom: auto; }
dialog.pano-popup.pano-popup--unten { margin-top: auto; margin-bottom: 1rem; }
dialog.pano-popup.pano-popup--unten-links { margin: auto auto 1rem 1rem; }
dialog.pano-popup.pano-popup--unten-rechts { margin: auto 1rem 1rem auto; }
/* Unten und in den Ecken nicht modal (show statt showModal): fest ueber der Seite, die bedienbar bleibt. */
dialog.pano-popup.pano-popup--frei { position: fixed; z-index: 2147483000; max-height: calc(100dvh - 2rem); }
dialog.pano-popup.pano-popup--zentriert .pano-popup__innen { text-align: center; justify-items: center; }
/* Eigene Farben (oder Bild als Hintergrund): auch die Ueberschrift in der Schrift des Popups - sonst gewinnt die
   Ueberschriftenfarbe der Website (gemessen: dunkler Titel auf dunklem Bild). */
dialog.pano-popup.pano-popup--farben .pano-popup__titel { color: inherit; }
dialog.pano-popup.pano-popup--zentriert .pano-popup__knopf { justify-self: center; }
dialog.pano-popup .pano-popup__bilder { position: relative; overflow: hidden; }
dialog.pano-popup .pano-popup__bilder > .pano-popup__bild:not(:first-child) { display: none; }
dialog.pano-popup .pano-popup__bilder[data-laeuft] > .pano-popup__bild { display: none; }
dialog.pano-popup .pano-popup__bilder[data-laeuft] > .pano-popup__bild.ist-aktiv { display: block; }
dialog.pano-popup .pano-popup__pfeil { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; min-width: 0; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: #1b1b1b; box-shadow: 0 1px 6px rgba(0,0,0,.2); font: 400 1.4rem/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; }
dialog.pano-popup .pano-popup__pfeil[data-richtung="-1"] { left: .6rem; }
dialog.pano-popup .pano-popup__pfeil[data-richtung="1"] { right: .6rem; }
dialog.pano-popup .pano-popup__punkte { position: absolute; left: 0; right: 0; bottom: .6rem; z-index: 1; display: flex; justify-content: center; gap: .45rem; margin: 0; padding: 0; }
dialog.pano-popup .pano-popup__punkt { width: .65rem; height: .65rem; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; }
dialog.pano-popup .pano-popup__punkt[aria-current="true"] { background: #fff; }
dialog.pano-popup.pano-popup--bild-oben .pano-popup__bild { display: block; }
/* Bildformat: Variable am Fenster; „original" ohne Zuschnitt. */
dialog.pano-popup .pano-popup__bild { aspect-ratio: var(--pp-bildformat, 16 / 9); }
dialog.pano-popup.pano-popup--bild-original .pano-popup__bild { aspect-ratio: auto; max-height: 60vh; object-fit: contain; }
/* Bild links oder rechts neben dem Text; auf schmalen Schirmen untereinander. */
dialog.pano-popup.pano-popup--bild-links[open], dialog.pano-popup.pano-popup--bild-rechts[open] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; }
dialog.pano-popup.pano-popup--bild-rechts[open] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
dialog.pano-popup.pano-popup--bild-rechts > .pano-popup__bild, dialog.pano-popup.pano-popup--bild-rechts > .pano-popup__bilder { order: 2; }
dialog.pano-popup.pano-popup--bild-links > .pano-popup__bild, dialog.pano-popup.pano-popup--bild-rechts > .pano-popup__bild,
dialog.pano-popup.pano-popup--bild-links > .pano-popup__bilder, dialog.pano-popup.pano-popup--bild-rechts > .pano-popup__bilder { min-height: 100%; }
dialog.pano-popup.pano-popup--bild-links .pano-popup__bild, dialog.pano-popup.pano-popup--bild-rechts .pano-popup__bild { height: 100%; max-height: none; aspect-ratio: auto; min-height: 12rem; }
dialog.pano-popup.pano-popup--bild-links .pano-popup__innen, dialog.pano-popup.pano-popup--bild-rechts .pano-popup__innen { align-content: center; }
@media (max-width: 640px) {
  dialog.pano-popup.pano-popup--bild-links[open], dialog.pano-popup.pano-popup--bild-rechts[open] { display: block; }
  dialog.pano-popup.pano-popup--bild-links .pano-popup__bild, dialog.pano-popup.pano-popup--bild-rechts .pano-popup__bild { height: auto; aspect-ratio: var(--pp-bildformat, 16 / 9); max-height: 38vh; min-height: 0; }
}
/* „Original" (ohne Zuschnitt): das Bild bestimmt seine Spalte, der Kasten liegt eng darum - so sitzen Pfeile auf dem
   Bild. Ringsum gleicher Rand, runde Ecken, die Punkte des Sliders im Rand darunter statt auf dem Bild. Gemessen bei
   zwibbel-giessen (27.10., Plakat 1044x1507 links, „breit"): vorher 133x192 px in einer 288 px breiten Spalte, oben
   und unten kaum Rand, die Pfeile im Leeren daneben (Aashir: „top and bottom padding is bad"). Bild als Hintergrund
   bleibt, wie es war.
   Wie gross das Bild wird, sagen Breite und Hoehe des Popups (--pp-bildhoehe): Jacob stellte „Groß" (960 px) ein,
   und das Plakat blieb bei fest 26rem (288x416) - nur der Kasten wurde breiter (28.10.). */
dialog.pano-popup.pano-popup--bild-original { --pp-bildhoehe: min(calc(var(--pp-breite, 30rem) * .9), calc(100dvh - 14rem)); }
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links, dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts { --pp-bildhoehe: min(calc(var(--pp-breite, 30rem) * .9), calc(100dvh - 7rem)); }
dialog.pano-popup.pano-popup--bild-original.pano-popup--hoch { --pp-bildhoehe: max(8rem, calc(min(var(--pp-hoehe, 30rem), 100dvh - 2rem) - 13rem)); }
dialog.pano-popup.pano-popup--bild-original.pano-popup--hoch.pano-popup--bild-links, dialog.pano-popup.pano-popup--bild-original.pano-popup--hoch.pano-popup--bild-rechts { --pp-bildhoehe: calc(min(var(--pp-hoehe, 30rem), 100dvh - 2rem) - 3rem); }
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links[open] { grid-template-columns: fit-content(55%) minmax(0, 1fr); align-items: center; }
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts[open] { grid-template-columns: minmax(0, 1fr) fit-content(55%); align-items: center; }
dialog.pano-popup.pano-popup--bild-original:not(.pano-popup--bild-hintergrund) > .pano-popup__bild,
dialog.pano-popup.pano-popup--bild-original:not(.pano-popup--bild-hintergrund) > .pano-popup__bilder { width: fit-content; max-width: calc(100% - 2 * var(--pp-rand, 1.25rem)); min-height: 0; margin: var(--pp-rand, 1.5rem) auto 0; overflow: visible; }
dialog.pano-popup.pano-popup--bild-original:not(.pano-popup--bild-hintergrund) .pano-popup__bild { width: auto; max-width: 100%; height: auto; max-height: var(--pp-bildhoehe); min-height: 0; aspect-ratio: auto; object-fit: contain;
  border-radius: min(8px, var(--pp-ecken, 8px)); box-shadow: 0 2px 12px rgba(0,0,0,.14); }
dialog.pano-popup.pano-popup--bild-original:not(.pano-popup--bild-hintergrund) .pano-popup__punkte { bottom: -1.05rem; gap: .4rem; }
dialog.pano-popup.pano-popup--bild-original:not(.pano-popup--bild-hintergrund) .pano-popup__punkt { width: .5rem; height: .5rem; background: currentColor; opacity: .25; box-shadow: none; }
dialog.pano-popup.pano-popup--bild-original:not(.pano-popup--bild-hintergrund) .pano-popup__punkt[aria-current="true"] { background: currentColor; opacity: .75; }
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links > .pano-popup__bild,
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links > .pano-popup__bilder { margin: var(--pp-rand, 1.5rem) 0 var(--pp-rand, 1.5rem) var(--pp-rand, 1.5rem); max-width: calc(100% - var(--pp-rand, 1.5rem)); }
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts > .pano-popup__bild,
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts > .pano-popup__bilder { margin: var(--pp-rand, 1.5rem) var(--pp-rand, 1.5rem) var(--pp-rand, 1.5rem) 0; max-width: calc(100% - var(--pp-rand, 1.5rem)); }
/* Neben dem Bild mehr Luft; links steht das × ueber dem Text, also haelt der Titel Abstand. */
dialog.pano-popup.pano-popup--bild-links .pano-popup__innen, dialog.pano-popup.pano-popup--bild-rechts .pano-popup__innen { padding: var(--pp-rand, 2rem) var(--pp-rand, 2.25rem); }
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links .pano-popup__innen { padding-left: var(--pp-rand, 2rem); }
dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts .pano-popup__innen { padding-right: var(--pp-rand, 2rem); }
dialog.pano-popup.pano-popup--bild-links .pano-popup__innen .pano-popup__titel { padding-right: 2rem; }
@media (max-width: 640px) {
  /* Untereinander: Bild oben mit Rand, Text darunter. */
  dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links > .pano-popup__bild,
  dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links > .pano-popup__bilder,
  dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts > .pano-popup__bild,
  dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts > .pano-popup__bilder { margin: var(--pp-rand, 1.5rem) auto 0; max-width: calc(100% - 2 * var(--pp-rand, 1.25rem)); }
  dialog.pano-popup.pano-popup--bild-original, dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links, dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts { --pp-bildhoehe: max(12rem, calc(100dvh - 17rem)); }
  dialog.pano-popup.pano-popup--bild-original.pano-popup--hoch, dialog.pano-popup.pano-popup--bild-original.pano-popup--hoch.pano-popup--bild-links,
  dialog.pano-popup.pano-popup--bild-original.pano-popup--hoch.pano-popup--bild-rechts { --pp-bildhoehe: max(8rem, calc(min(var(--pp-hoehe, 30rem), 100dvh - 2rem) - 13rem)); }
  dialog.pano-popup.pano-popup--bild-links .pano-popup__innen, dialog.pano-popup.pano-popup--bild-rechts .pano-popup__innen,
  dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-links .pano-popup__innen,
  dialog.pano-popup.pano-popup--bild-original.pano-popup--bild-rechts .pano-popup__innen { padding: var(--pp-rand, 1.5rem) var(--pp-rand, 1.5rem) var(--pp-rand, 1.4rem); }
  dialog.pano-popup.pano-popup--bild-links .pano-popup__innen .pano-popup__titel { padding-right: 0; }
}
/* „Nur das Bild" (Jacob, 28.10.: „Ich benötige den weißen Bereich nicht, sondern möchte, dass ausschließlich das Bild
   im Pop-up angezeigt wird" - sein Vorbild: ein Plakat fast in Bildschirmhoehe, das × auf der Ecke). Kein Text, kein
   Rahmen: das Fenster liegt eng um das Bild, ungeschnitten. Breite = hoechstens so breit, feste Hoehe = hoechstens so
   hoch, sonst bis knapp an den Bildschirmrand. Mit „Rand" ein Rahmen in der Farbe des Popups. Die Laufzeit (§13) gibt
   dem Bild beim Oeffnen die volle Breite als sizes - sonst bliebe es bei der Breite, die es geschlossen hatte. */
dialog.pano-popup.pano-popup--bild-nur { width: fit-content; max-width: calc(100vw - 2rem); height: fit-content; padding: 0; overflow: visible;
  background: transparent; box-shadow: none; border-radius: 0; }
dialog.pano-popup.pano-popup--bild-nur.pano-popup--rand { padding: var(--pp-rand); background: var(--pano-popup-grund, var(--papier, #fff));
  border-radius: var(--pp-ecken, var(--radius-lg, 10px)); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
dialog.pano-popup.pano-popup--bild-nur > .pano-popup__bilder { width: fit-content; margin: 0; overflow: visible; }
dialog.pano-popup.pano-popup--bild-nur .pano-popup__bild { display: block; width: auto; height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain;
  max-width: min(var(--pp-breite, 30rem), calc(100vw - 2rem - 2 * var(--pp-rand, 0px)));
  max-height: calc(100dvh - 2rem - 2 * var(--pp-rand, 0px));
  border-radius: var(--pp-ecken, 6px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); }
dialog.pano-popup.pano-popup--bild-nur.pano-popup--rand .pano-popup__bild { border-radius: min(8px, var(--pp-ecken, 8px)); box-shadow: none; }
dialog.pano-popup.pano-popup--bild-nur.pano-popup--hoch { height: fit-content; }
dialog.pano-popup.pano-popup--bild-nur.pano-popup--hoch .pano-popup__bild { max-height: calc(min(var(--pp-hoehe, 30rem), 100dvh - 2rem) - 2 * var(--pp-rand, 0px)); }
/* Bild als Hintergrund: Bild fuellt das Fenster, darueber eine Abdunklung, Text oben drauf. */
dialog.pano-popup.pano-popup--bild-hintergrund { min-height: min(22rem, calc(100dvh - 2rem)); }
dialog.pano-popup.pano-popup--bild-hintergrund[open] { display: grid; align-items: end; }
dialog.pano-popup.pano-popup--bild-hintergrund > .pano-popup__bild, dialog.pano-popup.pano-popup--bild-hintergrund > .pano-popup__bilder { position: absolute; inset: 0; }
dialog.pano-popup.pano-popup--bild-hintergrund .pano-popup__bild { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
dialog.pano-popup.pano-popup--bild-hintergrund .pano-popup__innen { position: relative; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,0)); padding-top: 3rem; }
dialog.pano-popup.pano-popup--bild-hintergrund .pano-popup__punkte { top: .9rem; bottom: auto; }
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: var(--pp-rand, 1.5rem) var(--pp-rand, 1.5rem) var(--pp-rand, 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; }
  dialog.pano-popup .pano-popup__bilder[data-laeuft] > .pano-popup__bild.ist-aktiv { animation: panoPopupAuf .35s 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; }