/* Bildvariablen als <url> angemeldet - siehe bildvariablenAnmelden (freibauen.js). */
@property --bild{syntax:'<url> | none';inherits:true;initial-value:none}
/* 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}}

/* =====================================================================
   Das Neue Mühlchen · Zum Mühlchen 47 · 65582 Diez
   Farben aus dem Logo: Mühlrad-Bordeaux, Naturgrün, Wasserblau
   Grundflächen hell (Creme/Weiß), dunkler Anker Tiefgrün,
   Akzent Bordeaux. Alles kantig-dezent gerundet (4px).
   ===================================================================== */

:root{
  /* Flächen */
  --creme:#F7F4ED;
  --sand:#E8E0D3;
  --weiss:#FFFFFF;
  /* dunkler Anker */
  --gruen:#456D4C;
  --gruen-tief:#24392A;
  /* Akzent */
  --bordeaux:#68213A;
  --bordeaux-dunkel:#4F182B;
  --blau:#203BA3;
  /* Schrift */
  --tinte:#292B29;
  --grau:#5E635E;
  --hell:#F2EFE7;
  /* Linien */
  --linie:#D9D2C4;
  --linie-dunkel:rgba(247,244,237,.22);

  --serif:"Crimson Pro", Georgia, "Times New Roman", serif;
  --grotesk:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --rund:4px;
  --innen:1180px;
  --spalte:clamp(1.1rem,4vw,2rem);
  /* drei Abstandsstufen, mehr nicht */
  --luft-s:clamp(1.5rem,1.1rem + 1vw,2rem);
  --luft-m:clamp(2.3rem,1.7rem + 1.8vw,3.1rem);
  --luft-l:clamp(3.2rem,2.4rem + 2.4vw,4.5rem);
}

/* ------------------------------ Grundlagen ------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--tinte);
  font:400 17px/1.62 var(--grotesk);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;
  letter-spacing:-.01em;color:var(--bordeaux);margin:0 0 .55em}
h1{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.1rem)}
h2{font-size:clamp(1.65rem,1.2rem + 1.5vw,2.35rem)}
h3{font-size:clamp(1.18rem,1.05rem + .5vw,1.42rem)}
h4{font:700 1.02rem/1.35 var(--grotesk);color:var(--gruen-tief);margin:0 0 .5em}
p{margin:0 0 1.1em;max-width:40rem}
ul,ol{margin:0 0 1.1em;padding-left:1.15rem}
li{margin-bottom:.35em}
a{color:var(--bordeaux);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .3s ease}
a:hover{color:var(--gruen)}
small{font-size:.86rem}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}

/* ------------------------------ Bausteine ------------------------------- */
.innen{width:100%;max-width:var(--innen);margin-inline:auto;padding-inline:var(--spalte)}
.innen--schmal{max-width:58rem}

.rubrik{font:600 .76rem/1.4 var(--grotesk);letter-spacing:.17em;
  text-transform:uppercase;color:var(--gruen);margin:0 0 .7rem}
.strich{width:62px;height:2px;background:var(--bordeaux);border:0;margin:0 0 1.3rem}
.strich--mitte{margin-inline:auto}
.abschnitt__kopf{max-width:44rem;margin-bottom:var(--luft-s)}
.abschnitt__kopf--mitte{margin-inline:auto;text-align:center}
.vorlauf{font-size:1.1rem;color:var(--grau);max-width:42rem}
.zitat{font-family:var(--serif);font-size:clamp(1.3rem,1.05rem + 1vw,1.9rem);
  line-height:1.3;color:var(--gruen-tief);max-width:34rem;margin:0}

/* Abschnitte und ihr Flächenwechsel */
.abschnitt{padding-block:var(--luft-m)}
.abschnitt--eng{padding-block:var(--luft-s)}
.abschnitt--weit{padding-block:var(--luft-l)}
.abschnitt--creme{background:var(--creme)}
.abschnitt--weiss{background:var(--weiss)}
.abschnitt--sand{background:var(--sand)}
.abschnitt--gruen{background:var(--gruen-tief)}
/* Bildfläche: die Datei kommt per --bild als inline-Variable */
.abschnitt--bild{
  background-image:linear-gradient(rgba(25,40,29,.74),rgba(25,40,29,.74)),var(--bild);
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* Textfarben auf dunklen Flächen – ausdrücklich, auch für Links */
.abschnitt--gruen,.abschnitt--gruen p,.abschnitt--gruen li,.abschnitt--gruen span,
.abschnitt--gruen small,.abschnitt--gruen dd,.abschnitt--gruen dt,
.abschnitt--bild,.abschnitt--bild p,.abschnitt--bild li,.abschnitt--bild span,
.abschnitt--bild small{color:var(--hell)}
.abschnitt--gruen h1,.abschnitt--gruen h2,.abschnitt--gruen h3,.abschnitt--gruen h4,
.abschnitt--bild h1,.abschnitt--bild h2,.abschnitt--bild h3,.abschnitt--bild h4{color:var(--weiss)}
.abschnitt--gruen .rubrik,.abschnitt--bild .rubrik{color:var(--sand)}
.abschnitt--gruen .strich,.abschnitt--bild .strich{background:var(--sand)}
.abschnitt--gruen a:not(.knopf),.abschnitt--bild a:not(.knopf){color:var(--sand)}
.abschnitt--gruen a:not(.knopf):hover,.abschnitt--bild a:not(.knopf):hover{color:var(--weiss)}
.abschnitt--gruen :focus-visible,.abschnitt--bild :focus-visible{outline-color:var(--sand)}

/* ------------------------------- Symbole -------------------------------- */
[data-symbol]{width:1.2rem;height:1.2rem;flex:none;vertical-align:-.18em}
.symbol-halter{display:inline-flex}
.kreis{display:inline-flex;align-items:center;justify-content:center;
  width:2.8rem;height:2.8rem;border-radius:50%;background:var(--sand);
  color:var(--bordeaux);margin-bottom:.9rem}
.kreis [data-symbol]{width:1.35rem;height:1.35rem}
.abschnitt--gruen .kreis,.abschnitt--bild .kreis{background:rgba(247,244,237,.14);color:var(--sand)}

/* ----------------------------- Hakenlisten ------------------------------ */
.haken{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.62rem}
.haken li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5;margin:0}
.haken [data-symbol]{color:var(--gruen);margin-top:.22em}
.haken--zwei{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:.62rem 1.6rem}
.abschnitt--gruen .haken [data-symbol],.abschnitt--bild .haken [data-symbol]{color:var(--sand)}

/* ------------------------------ Schaltflächen --------------------------- */
.knopf{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 15px/1 var(--grotesk);letter-spacing:.02em;padding:15px 28px;min-height:46px;
  border-radius:var(--rund);border:1px solid transparent;text-decoration:none;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,
    transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease}
.knopf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.26) 50%,transparent 85%);
  transform:translateX(-130%);transition:transform .65s cubic-bezier(.22,.8,.3,1)}
.knopf:hover::before,.knopf:focus-visible::before{transform:translateX(130%)}
.knopf [data-symbol]{transition:transform .35s cubic-bezier(.22,.8,.3,1)}
.knopf:hover [data-symbol]{transform:translateX(3px)}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0);box-shadow:none}
.knopf--haupt{background:var(--bordeaux);color:var(--weiss)}
.knopf--haupt:hover{background:var(--bordeaux-dunkel);color:var(--weiss);
  box-shadow:0 10px 22px -12px rgba(104,33,58,.75)}
.knopf--linie{background:transparent;color:var(--bordeaux);border-color:var(--bordeaux)}
.knopf--linie:hover{background:var(--bordeaux);color:var(--weiss);
  box-shadow:0 10px 22px -12px rgba(104,33,58,.6)}
.knopf--hell{background:var(--creme);color:var(--bordeaux)}
.knopf--hell::before{background:linear-gradient(115deg,transparent 15%,rgba(104,33,58,.14) 50%,transparent 85%)}
.knopf--hell:hover{background:var(--sand);color:var(--bordeaux-dunkel);
  box-shadow:0 10px 22px -12px rgba(36,57,42,.55)}
.knopf--randhell{background:transparent;color:var(--hell);border-color:rgba(247,244,237,.6)}
.knopf--randhell:hover{background:rgba(247,244,237,.16);color:var(--weiss);
  border-color:var(--sand);box-shadow:0 10px 22px -14px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){
  .knopf,.knopf::before,.knopf [data-symbol]{transition:none}
  .knopf:hover,.knopf:hover [data-symbol]{transform:none}
  .knopf:hover::before,.knopf:focus-visible::before{transform:translateX(-130%)}
}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}

/* -------------------------- Zweispaltige Blöcke -------------------------- */
.medien{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.medien__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;
  border-radius:var(--rund)}
.medien__bild{overflow:hidden;border-radius:var(--rund)}
.bildpaar{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
.bildpaar img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--rund)}
@media(min-width:860px){
  .medien{grid-template-columns:1.06fr .94fr}
  .medien--bildlinks{grid-template-columns:.94fr 1.06fr}
  .medien--bildlinks .medien__bild{order:-1}
}

/* -------------------------------- Karten -------------------------------- */
.raster{display:grid;gap:clamp(1rem,2.4vw,1.7rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  overflow:hidden;transition:transform .4s ease,border-color .4s ease}
.karte:hover{transform:translateY(-4px);border-color:var(--gruen)}
.karte__bild{overflow:hidden}
.karte__bild img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s ease}
.karte:hover .karte__bild img{transform:scale(1.05)}
.karte__text{padding:1.25rem 1.35rem 1.45rem}
.karte h3{margin-bottom:.35em}
.karte p{font-size:.97rem;color:var(--grau);margin-bottom:0}
.karte--sand{background:var(--sand);border-color:#D6CBB8}
.karte--leer{padding:1.4rem}
.abschnitt--sand .karte{background:var(--weiss)}

/* Ablauf-Schritte */
.schritte{list-style:none;padding:0;margin:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.schritte li{margin:0;padding-top:1rem;border-top:2px solid var(--bordeaux)}
.schritt__nr{font-family:var(--serif);font-size:1.6rem;color:var(--gruen);display:block;line-height:1}

/* -------------------------------- Aufmacher ------------------------------ */
.aufmacher{position:relative;display:grid;align-items:end;min-height:84vh;
  padding-block:var(--luft-l);color:var(--hell)}
.aufmacher .innen{position:relative;z-index:2}
.aufmacher__text{max-width:46rem}
.aufmacher h1{color:var(--weiss)}
.aufmacher p{color:var(--hell);font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);max-width:38rem}
.aufmacher .rubrik{color:var(--sand)}

/* Unterseiten-Aufmacher: ein Foto als Fläche, fährt langsam heran */
.seitenkopf{position:relative;display:grid;align-items:end;overflow:hidden;
  min-height:clamp(250px,40vh,400px);padding-block:var(--luft-m);color:var(--hell)}
.seitenkopf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;animation:heranfahren 14s ease-out both}
.seitenkopf::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(25,40,29,.82),rgba(25,40,29,.45))}
.seitenkopf .innen{position:relative;z-index:2}
.seitenkopf h1{color:var(--weiss);margin-bottom:.25em}
.seitenkopf p{color:var(--hell);max-width:36rem;margin-bottom:0}
.seitenkopf .rubrik{color:var(--sand)}
@keyframes heranfahren{from{transform:scale(1.07)}to{transform:scale(1)}}

/* --------------------------------- Zahlen -------------------------------- */
.zahlen{list-style:none;padding:0;margin:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.zahlen li{margin:0}
.zahl__wert{display:block;font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(2rem,1.6rem + 1.4vw,2.7rem);color:var(--sand);
  font-variant-numeric:tabular-nums}
.zahl__wort{display:block;margin-top:.45rem;font-size:.95rem;color:var(--hell)}

/* ----------------------------- Öffnungszeiten ---------------------------- */
.zeiten{list-style:none;padding:0;margin:0;max-width:32rem}
.zeiten li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.2rem;
  padding:.62rem 0;border-bottom:1px dashed var(--linie);margin:0}
.zeiten li:last-child{border-bottom:0}
.zeiten__tag{font-weight:600}
.zeiten__ruhe{color:var(--bordeaux);font-weight:600}
.abschnitt--gruen .zeiten li,.abschnitt--bild .zeiten li{border-color:var(--linie-dunkel)}
.abschnitt--gruen .zeiten__ruhe,.abschnitt--bild .zeiten__ruhe{color:var(--sand)}

/* Kontaktzeilen */
.kontaktliste{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.8rem}
.kontaktliste li{display:flex;gap:.7rem;align-items:flex-start;margin:0}
.kontaktliste [data-symbol]{color:var(--gruen);margin-top:.22em}
.abschnitt--gruen .kontaktliste [data-symbol]{color:var(--sand)}

/* -------------------------------- Speisen -------------------------------- */
.speisen{list-style:none;padding:0;margin:0}
.speisen li{margin:0;padding:.95rem 0;border-bottom:1px solid var(--linie)}
.speisen li:last-child{border-bottom:0}
.speise__name{font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--gruen-tief);display:block}
.speise__text{font-size:.97rem;color:var(--grau);display:block;margin-top:.2rem}
.hinweis-kasten{background:var(--sand);border-left:3px solid var(--bordeaux);
  padding:1.2rem 1.4rem;border-radius:var(--rund);max-width:44rem}
.hinweis-kasten p{margin-bottom:0}

/* -------------------------------- Galerie -------------------------------- */
.galerie{list-style:none;padding:0;margin:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.galerie li{margin:0}
.galerie a{display:block;overflow:hidden;border-radius:var(--rund)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;
  transition:transform .4s ease}
.galerie a:hover img,.galerie a:focus-visible img{transform:scale(1.05)}

/* ----------------------------- Kundenstimmen ----------------------------- */
/* Spur, Pfeile und Punkte macht das Kit – hier nur die Karte */
.stimmen__liste{list-style:none;padding:0;margin:0}
.stimme{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:1.6rem 1.5rem;height:100%}
.stimme__text{font-family:var(--serif);font-size:1.12rem;line-height:1.45;
  color:var(--gruen-tief);margin:0 0 .9rem}
.stimme__text::before{content:"„";color:var(--bordeaux);font-size:1.6em;line-height:0;
  vertical-align:-.25em;margin-right:.1em}
.stimme__wer{font-size:.9rem;color:var(--grau);margin:0}
.stimme.platzhalter{background:var(--sand);border-style:dashed;border-color:#C9BEA9}
.stimme.platzhalter .stimme__text{color:var(--grau)}

/* -------------------------------- Personen ------------------------------- */
.personen{list-style:none;padding:0;margin:0;display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.personen li{margin:0}
.person__bild{width:112px;height:112px;border-radius:50%;background:var(--gruen);
  color:var(--creme);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.9rem;letter-spacing:.04em;margin-bottom:.9rem;
  overflow:hidden}
.person__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.person__rolle{font-size:.92rem;color:var(--grau)}

/* ---------------------------------- FAQ ---------------------------------- */
.faq{max-width:48rem}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  gap:1.2rem;align-items:baseline;padding:1rem 0;
  font-family:var(--serif);font-size:1.18rem;color:var(--gruen-tief);
  transition:color .3s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--bordeaux);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--bordeaux)}
.faq details p{padding-bottom:1rem;margin:0;color:var(--grau)}

/* -------------------------------- Formular ------------------------------- */
.formular{display:grid;gap:1rem;max-width:40rem}
.feld{display:grid;gap:.35rem}
.feld label{font-size:.9rem;font-weight:600;color:var(--gruen-tief)}
.formular input[type="text"],.formular input[type="email"],.formular input[type="tel"],
.formular textarea{width:100%;font:400 16px/1.5 var(--grotesk);color:var(--tinte);
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:.8rem .9rem;transition:border-color .3s ease}
.formular input:focus,.formular textarea:focus{border-color:var(--gruen);outline:none;
  box-shadow:0 0 0 2px rgba(69,109,76,.25)}
.formular textarea{min-height:150px;resize:vertical}
.einwilligung{display:block;font-size:.92rem;color:var(--grau)}
.einwilligung input{margin-right:.5rem}
.feld-paar{display:grid;gap:1rem}
@media(min-width:680px){.feld-paar{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular-hinweis{border-radius:var(--rund);padding:.9rem 1.1rem;margin-bottom:1rem;
  font-size:.95rem;border:1px solid transparent}
.hinweis-ok{background:#E7F0E6;border-color:#456D4C;color:#20401F}
.hinweis-fehler{background:#F6E3E8;border-color:#68213A;color:#5A1127}

/* ---------------------------------- Karte -------------------------------- */
[data-karte]{min-height:320px;background:var(--sand);border:1px solid var(--linie);
  border-radius:var(--rund);display:grid;place-items:center;gap:.8rem;padding:1.4rem;
  text-align:center;overflow:hidden}
[data-karte] iframe,[data-karte] img{width:100%;height:100%;min-height:320px;border:0;
  border-radius:var(--rund)}
.pano-einbettung{min-height:280px;background:var(--sand);border:1px dashed #C9BEA9;
  border-radius:var(--rund);display:grid;place-items:center;padding:1.4rem;text-align:center}

/* -------------------------------- Kopfzeile ------------------------------- */
.kopfzeile{position:sticky;top:0;z-index:60;background:var(--creme);
  border-bottom:1px solid var(--linie);transition:background-color .3s ease,border-color .3s ease}
.kopfzeile.gescrollt{background:rgba(247,244,237,.97);border-bottom-color:#C9BEA9}
.kopfzeile__innen{display:flex;align-items:center;gap:.9rem;min-height:76px;
  width:100%;max-width:var(--innen);margin-inline:auto;padding-inline:var(--spalte);
  position:relative;flex-wrap:nowrap}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.marke img{height:44px;width:auto;object-fit:contain}
.marke__text{display:none;font:600 .72rem/1.3 var(--grotesk);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gruen)}
.menue-schalter{position:absolute;opacity:0;width:1px;height:1px}
.menue-knopf{order:3;display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.5rem .8rem;border:1px solid var(--linie);
  border-radius:var(--rund);font:600 14px/1 var(--grotesk);color:var(--gruen-tief);
  cursor:pointer;background:var(--weiss);transition:border-color .3s ease,color .3s ease}
.menue-knopf:hover{border-color:var(--gruen);color:var(--bordeaux)}
.menue-schalter:focus-visible+.menue-knopf{outline:2px solid var(--bordeaux);outline-offset:3px}
.nav{order:4;display:none;position:absolute;top:100%;left:0;right:0;
  background:var(--creme);border-bottom:1px solid var(--linie);
  padding:.4rem var(--spalte) 1.2rem}
.menue-schalter:checked~.nav{display:block}
.nav__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nav__liste li{margin:0;border-bottom:1px solid var(--linie)}
.nav__liste li:last-child{border-bottom:0}
.nav a:not(.knopf){display:flex;align-items:center;min-height:48px;
  text-decoration:none;color:var(--tinte);font:500 16px/1.3 var(--grotesk);
  transition:color .3s ease}
.nav a:not(.knopf):hover,.nav a:not(.knopf)[aria-current="page"]{color:var(--bordeaux)}
.kopfzeile__knopf{order:2;margin-left:auto;padding:12px 18px;min-height:44px;font-size:14px}
.nur-gross{display:none}
@media(min-width:1050px){
  .menue-knopf{display:none}
  .nav{order:2;display:block;position:static;background:none;border:0;padding:0;
    margin-left:auto}
  .nav__liste{flex-direction:row;gap:1.45rem;align-items:center}
  .nav__liste li{border-bottom:0}
  .nav a:not(.knopf){min-height:0;font-size:15px;position:relative;padding:.35rem 0}
  .nav a:not(.knopf)::after{content:"";position:absolute;left:0;right:100%;bottom:0;
    height:1px;background:var(--bordeaux);transition:right .3s ease}
  .nav a:not(.knopf):hover::after,.nav a:not(.knopf)[aria-current="page"]::after{right:0}
  .nav__punkt--knopf .kopfzeile__knopf.kopfzeile__knopf{order:3;margin-left:1.4rem;font-size:15px;padding:13px 22px}
  .marke__text{display:block}
  .nur-gross{display:inline}
  .nur-klein{display:none}
}

/* -------------------------------- Fusszeile ------------------------------- */
.fuss{background:var(--gruen-tief);color:var(--hell);padding-block:var(--luft-m)}
.fuss h3{color:var(--weiss);font-size:1.12rem;margin-bottom:.7rem}
.fuss p,.fuss li,.fuss span,.fuss small{color:var(--hell)}
.fuss a:not(.knopf){color:var(--sand);text-decoration:none}
.fuss a:not(.knopf):hover{color:var(--weiss);text-decoration:underline}
.fuss__raster{display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.fuss__logo{display:inline-block;background:var(--creme);padding:.55rem .75rem;
  border-radius:var(--rund);margin-bottom:1rem}
.fuss__logo img{height:52px;width:auto;object-fit:contain}
.fuss__liste{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.fuss__liste li{margin:0}
.fuss .kontaktliste [data-symbol]{color:var(--sand)}
.fuss__welle{display:block;color:rgba(232,224,211,.45);margin-bottom:.8rem}
.fuss__welle [data-symbol]{width:2.4rem;height:2.4rem}
.fuss__unten{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--linie-dunkel);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;
  font-size:.86rem}
.fuss__unten ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0;padding:0}
.fuss__unten li{margin:0}

/* ------------------------------- Rechtstexte ------------------------------ */
.rechtstext{max-width:46rem;margin-inline:auto;padding:var(--luft-m) var(--spalte)}
.rechtstext h1{margin-bottom:.6em}
.rechtstext h2{font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem);margin-top:1.8em}
.rechtstext h3{font-size:1.15rem;margin-top:1.4em;color:var(--gruen-tief)}
.rechtstext p,.rechtstext li{max-width:none;font-size:16px;line-height:1.7}
.rechtstext ul{padding-left:1.3rem}
.rechtstext a{word-break:break-word}

/* -------------------------- Bewegung, sparsam ----------------------------- */
/* Das Einblenden beim Scrollen übernimmt die Laufzeitbibliothek (data-zeigen).
   Hier bewusst keine eigene Regel dafür – sonst bleiben Inhalte verborgen,
   wenn das Skript nicht läuft. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* -------------------------------- Kleinkram ------------------------------- */
.mitte{text-align:center}
.breit{max-width:none}
@media(max-width:600px){
  .bildpaar{grid-template-columns:1fr}
  .bildpaar img{aspect-ratio:4/3}
}



/* === Ausrichtung: #aufmacher === */
#aufmacher { align-items: center !important; align-content: center !important; }
/* === Ende Ausrichtung #aufmacher === */






/* === Ausrichtung: #kueche === */
#kueche { text-align: center !important; }
#kueche :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, img, .strich, hr):not([style*="--pano-m"]) { margin-left: auto !important; margin-right: auto !important; }
#kueche :where(a[class*="knopf"], button) { justify-self: center; }
#kueche :where([style*="display: grid"], [class*="raster"], [class*="grid"], [class*="karten"]) { justify-items: center; }
#kueche { display: flex !important; flex-direction: column !important; justify-content: center !important; }
#kueche > * { width: 100%; }
/* === Ende Ausrichtung #kueche === */

/* === Bildwechsel: #willkommen === */
/* Reihenfolge und Anzahl kommen aus dem HTML - hier nur die Zeiten (6 Bilder, je 6 s). */
#willkommen [data-pano-wechsel] > * { animation: panoWechsel-willkommen 36s linear infinite !important; opacity: 0; }
#willkommen [data-pano-wechsel] > :first-child { opacity: 1; }
#willkommen [data-pano-wechsel] > :nth-child(1) { animation-delay: 0s !important; }
#willkommen [data-pano-wechsel] > :nth-child(2) { animation-delay: 6s !important; }
#willkommen [data-pano-wechsel] > :nth-child(3) { animation-delay: 12s !important; }
#willkommen [data-pano-wechsel] > :nth-child(4) { animation-delay: 18s !important; }
#willkommen [data-pano-wechsel] > :nth-child(5) { animation-delay: 24s !important; }
#willkommen [data-pano-wechsel] > :nth-child(6) { animation-delay: 30s !important; }
@keyframes panoWechsel-willkommen { 0% { opacity: 0; transform: scale(1.06); } 2.8% { opacity: 1; } 16.7% { opacity: 1; } 19.4% { opacity: 0; } 22.4% { transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
/* === Ende Bildwechsel #willkommen === */

/* === Textfarbe manuell: #fuss === */
#fuss, #fuss :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,blockquote,dt,dd,figcaption,a:not([class*="knopf"]):not([class*="button"])):not([data-farbe]):not([data-farbe] *):not([data-zustand]):not([data-zustand] *):not([data-symbol-eigen]):not([data-symbol-eigen] *):not(a *):not(button *):not([class*="knopf"] *):not([class*="button"] *) { color: #203ba3 !important; }
/* === Ende Textfarbe #fuss === */

/* === Angepasst über das Wunsch-Feld (Fuß) === */
/* === Fusszeile: Logo-Kasten ohne helle Flaeche === */
.fuss__raster > div:first-child .fuss__logo{background:transparent;padding:0;border-radius:0}

/* === Fusszeile: dunkles, elegantes Bordeaux statt Gruen === */
.fuss{
  background:linear-gradient(180deg,#4F182B 0%,#3A1120 55%,#240A15 100%);
  color:var(--hell);
  border-top:3px solid var(--sand)}
.fuss h3{color:var(--weiss)}
.fuss p,.fuss li,.fuss span,.fuss small{color:var(--hell)}
.fuss p{color:rgba(242,239,231,.78)}
.fuss a:not(.knopf){color:var(--sand)}
.fuss a:not(.knopf):hover{color:var(--weiss)}
.fuss .kontaktliste [data-symbol]{color:var(--sand)}
.fuss .zeiten li{border-bottom-color:var(--linie-dunkel)}
.fuss .zeiten__ruhe{color:var(--sand)}
.fuss__welle{color:rgba(232,224,211,.45)}
.fuss__unten{border-top-color:var(--linie-dunkel)}
.fuss__unten small{color:rgba(242,239,231,.72)}
.fuss :focus-visible{outline-color:var(--sand)}
/* === Ende === */
/* === Ende Anpassungen (Fuß) === */

/* === Angepasst über das Wunsch-Feld === */
/* Reservierungs-Knopf liegt jetzt in der Navigation */
.menue-knopf{margin-left:auto}
.nav__liste li.nav__punkt--knopf{border-bottom:0}
.nav__punkt--knopf .kopfzeile__knopf{display:flex;width:100%;margin:.9rem 0 0;padding:14px 18px;font-size:15px}
@media(min-width:1050px){
  .menue-knopf{margin-left:0}
  .nav__liste li.nav__punkt--knopf{margin-left:.55rem}
  .nav__punkt--knopf .kopfzeile__knopf{width:auto;margin:0;padding:13px 22px}
}
/* === Ende Anpassungen === */

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

/* === Ausrichtung: #seitenkopf === */
#seitenkopf { align-items: center !important; align-content: center !important; }
/* === Ende Ausrichtung #seitenkopf === */

/* === Bildwechsel: #aufmacher === */
/* Reihenfolge und Anzahl kommen aus dem HTML - hier nur die Zeiten (5 Bilder, je 6 s). */
#aufmacher [data-pano-wechsel] > * { animation: panoWechsel-aufmacher 30s linear infinite !important; opacity: 0; }
#aufmacher [data-pano-wechsel] > :first-child { opacity: 1; }
#aufmacher [data-pano-wechsel] > :nth-child(1) { animation-delay: 0s !important; }
#aufmacher [data-pano-wechsel] > :nth-child(2) { animation-delay: 6s !important; }
#aufmacher [data-pano-wechsel] > :nth-child(3) { animation-delay: 12s !important; }
#aufmacher [data-pano-wechsel] > :nth-child(4) { animation-delay: 18s !important; }
#aufmacher [data-pano-wechsel] > :nth-child(5) { animation-delay: 24s !important; }
@keyframes panoWechsel-aufmacher { 0% { opacity: 0; transform: scale(1.06); } 3.3% { opacity: 1; } 20% { opacity: 1; } 23.3% { opacity: 0; } 26.3% { transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
/* === Ende Bildwechsel #aufmacher === */


.galerie-knopf{margin:clamp(1.2rem,3vw,1.8rem) 0 0}

/* === Breite: #wiederkommen img#0 === */
#wiederkommen > .innen > .medien > .medien__bild { max-width: 550px !important; }
/* === Ende Breite #wiederkommen img#0 === */


/* Eventspeisekarten: gleichmäßiger Abstand zwischen den Bildreihen */
#event-speisekarten .galerie{row-gap:clamp(1rem,2.5vw,1.75rem);column-gap:clamp(1rem,2.5vw,1.75rem)}
#event-speisekarten .galerie li{overflow:hidden}


/* Eventspeisekarten: einheitliche Bildgroessen, gleiche Abstaende */
#event-speisekarten .galerie{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem)}
#event-speisekarten .galerie img{width:100%;max-width:none;aspect-ratio:1 / 1;object-fit:contain}
@media (max-width:860px){
  #event-speisekarten .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  #event-speisekarten .galerie{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 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; } }


/* Bauteile wiederhergestellt – spätere Regeln hatten Polster
   oder Rahmen entfernt, die zum Bauteil gehören. */
.kopfzeile__innen nav.nav{ padding:.4rem var(--spalte) 1.2rem; }
.fuss__raster span.fuss__logo{ padding:.55rem .75rem; }


/* Kontrast nachgezogen – spezifischere Regeln hatten die
   Schriftfarbe überschrieben, ohne den Grund mitzunehmen. */
.kopfzeile__knopf span.symbol-halter{ color:#fff; }
.kopfzeile__knopf span.nur-gross{ color:#fff; }
.kopfzeile__knopf span.nur-klein{ color:#fff; }
.knopf--haupt span.symbol-halter{ color:#fff; }
.cookie p{ color:#fff; }