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

/* =========================================================
   NUAD-Thaimassage Wolfsburg
   Cormorant Garamond (Ueberschriften) + Manrope (Text)
   Creme / Anthrazit / Champagner-Gold / Lotus-Rosa
   ========================================================= */

:root{
  /* Flaechen */
  --creme:#FFF9F2;
  --creme2:#F7EFE5;
  --papier:#FFFFFF;
  --tinte:#1A1512;
  --tinte2:#241C16;
  /* Schrift */
  --text:#2C231C;
  --text-leise:#6B5A4C;
  --hell:#F2E9DD;
  --hell-leise:#D8CBBA;
  /* Akzente */
  --gold:#D9A44E;
  --gold-hell:#E8BC69;
  --gold-tief:#8A6220;
  --rose:#D86F80;
  --rose-tief:#B0455A;
  --rose-zart:#F7E2E4;
  /* Linien und Masse */
  --linie:#E4D6C3;
  --linie-gold:rgba(217,164,78,.30);
  --radius:4px;
  --innen:1180px;
  --s-eng:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  --s-mittel:clamp(2.4rem, 1.8rem + 2.2vw, 3.3rem);
  --s-weit:clamp(3.2rem, 2.3rem + 3vw, 4.6rem);
  --serif:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Grundlagen ---------- */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--creme);
  color:var(--text);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--text);
  margin:0 0 .6rem;
  line-height:1.12;
}
h1{ font-size:clamp(2.1rem, 1.35rem + 3.2vw, 3.25rem); letter-spacing:-.005em; }
h2{ font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }
h3{ font-size:clamp(1.18rem, 1.05rem + .5vw, 1.45rem); }
h4{ font-size:1.12rem; }
p{ margin:0 0 1rem; max-width:42rem; }
ul,ol{ margin:0 0 1rem; padding-left:1.1rem; }
li{ margin-bottom:.35rem; }
strong{ font-weight:700; }
small{ font-size:.86rem; }
a{ color:var(--rose-tief); text-underline-offset:3px; transition:color .3s ease; }
a:hover{ color:var(--gold-tief); }
:focus-visible{ outline:2px solid var(--rose-tief); outline-offset:3px; }

/* Symbole aus dem mitgelieferten Satz */
[data-symbol]{ display:inline-flex; align-items:center; justify-content:center; flex:none; }
[data-symbol] svg{ width:1em; height:1em; display:block; }
.symbol-kreis{
  width:46px; height:46px; font-size:1.3rem; border-radius:50%;
  background:#F3E5CD; color:var(--gold-tief);
  transition:background .3s ease, color .3s ease;
}
.symbol-kreis--rose{ background:var(--rose-zart); color:var(--rose-tief); }

/* ---------- Layout ---------- */
.innen{ width:100%; max-width:var(--innen); margin:0 auto; padding-inline:clamp(1.1rem, 4vw, 2.4rem); }
.innen--schmal{ max-width:52rem; }

.abschnitt{ padding-block:var(--s-mittel); background:var(--creme); position:relative; }
.abschnitt--eng{ padding-block:var(--s-eng); }
.abschnitt--weit{ padding-block:var(--s-weit); }
.abschnitt--getoent{ background:var(--creme2); }
.abschnitt--papier{ background:var(--papier); }

/* dunkle Flaeche – Schriftfarben ausdruecklich setzen */
.abschnitt--dunkel{ background:var(--tinte); color:var(--hell); }
.abschnitt--dunkel h1,.abschnitt--dunkel h2,.abschnitt--dunkel h3,.abschnitt--dunkel h4{ color:#FBF5EC; }
.abschnitt--dunkel p,.abschnitt--dunkel li,.abschnitt--dunkel span,
.abschnitt--dunkel small,.abschnitt--dunkel dd,.abschnitt--dunkel dt,
.abschnitt--dunkel address,.abschnitt--dunkel td,.abschnitt--dunkel th{ color:var(--hell); }
.abschnitt--dunkel a:not(.knopf){ color:var(--gold-hell); }
.abschnitt--dunkel a:not(.knopf):hover{ color:#F6DDAD; }
.abschnitt--dunkel .rubrik{ color:var(--gold-hell); }
.abschnitt--dunkel .leise{ color:var(--hell-leise); }

/* Bildflaeche: Foto ueber CSS-Variable --bild, darueber ein Schleier */
.abschnitt--bild{
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--tinte); color:var(--hell);
}
.abschnitt--bild::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background-image:var(--bild); background-size:cover; background-position:center;
}
.abschnitt--bild::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(21,17,13,.78), rgba(21,17,13,.78));
}
.abschnitt--bild h1,.abschnitt--bild h2,.abschnitt--bild h3{ color:#FBF5EC; }
.abschnitt--bild p,.abschnitt--bild li,.abschnitt--bild span,
.abschnitt--bild small,.abschnitt--bild address{ color:var(--hell); }
.abschnitt--bild a:not(.knopf){ color:var(--gold-hell); }
.abschnitt--bild .rubrik{ color:var(--gold-hell); }

/* ---------- Aufmacher ---------- */
.hero{
  display:flex; align-items:center;
  min-height:clamp(440px, 74vh, 660px);
  padding-block:clamp(3rem, 2rem + 5vw, 6rem);
}
.hero::after{
  background:linear-gradient(100deg, rgba(20,15,11,.90) 0%, rgba(20,15,11,.74) 46%, rgba(20,15,11,.36) 100%);
}
.hero::before{ animation:heranfahren 14s ease-out both; }
.hero__inhalt{ max-width:46rem; }
.hero h1{ margin-bottom:.8rem; }
.hero__vor{ font-size:1.25rem; font-family:var(--serif); color:var(--gold-hell); margin-bottom:1rem; }
.hero p{ max-width:38rem; color:var(--hell); }
.hero__knoepfe{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }
.hero--klein{ min-height:clamp(320px, 46vh, 430px); }
@keyframes heranfahren{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

/* ---------- Ueberschriften-Bloecke ---------- */
.rubrik{
  display:block;
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose-tief); margin-bottom:.7rem;
}
.kopfzeile{ max-width:44rem; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.kopfzeile--mitte{ margin-inline:auto; text-align:center; }
.kopfzeile--mitte p{ margin-inline:auto; }
.lotus-linie{
  display:flex; align-items:center; gap:.7rem;
  color:var(--gold-tief); font-size:1.1rem; margin:.9rem 0 1.1rem;
}
.lotus-linie::before,.lotus-linie::after{ content:''; height:1px; width:56px; background:var(--gold); opacity:.6; }
.kopfzeile--mitte .lotus-linie{ justify-content:center; }
.abschnitt--dunkel .lotus-linie,.abschnitt--bild .lotus-linie{ color:var(--gold-hell); }
.leise{ color:var(--text-leise); }

/* ---------- Schaltflaechen ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:48px; padding:.9rem clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.05em;
  border:1px solid transparent; border-radius:999px;
  text-decoration:none; cursor:pointer;
  transition:background .6s cubic-bezier(.22,.61,.36,1), background-color .6s cubic-bezier(.22,.61,.36,1),
             color .6s cubic-bezier(.22,.61,.36,1), border-color .6s cubic-bezier(.22,.61,.36,1),
             box-shadow .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.knopf--gold{
  background:linear-gradient(145deg, #C4657A 0%, var(--rose-tief) 62%, #9A3A4D 100%);
  color:#FFF6F7; border-color:rgba(255,255,255,.4);
  box-shadow:0 10px 24px -12px rgba(176,69,90,.6);
}
.knopf--gold:hover{
  background:linear-gradient(145deg, var(--gold-hell) 0%, var(--gold) 62%, #C9913E 100%);
  color:#1A1512; border-color:rgba(255,255,255,.35);
  box-shadow:0 6px 18px -10px rgba(138,98,32,.55); transform:translateY(-2px);
}
.knopf--linie{
  background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  color:#FBF5EC; border-color:rgba(232,188,105,.55);
  box-shadow:0 6px 18px -14px rgba(0,0,0,.5);
}
.knopf--linie:hover{
  background:linear-gradient(145deg, rgba(176,69,90,.30), rgba(176,69,90,.16));
  color:#FFF0F2; border-color:rgba(216,111,128,.75);
  box-shadow:0 10px 24px -14px rgba(176,69,90,.55); transform:translateY(-2px);
}
.knopf--dunkel{
  background:linear-gradient(145deg, var(--tinte2) 0%, var(--tinte) 100%);
  color:#FBF5EC; border-color:rgba(232,188,105,.25);
  box-shadow:0 6px 18px -12px rgba(26,21,18,.6);
}
.knopf--dunkel:hover{
  background:linear-gradient(145deg, #9A3A4D 0%, var(--rose-tief) 100%);
  color:#FFF6F7; border-color:rgba(255,255,255,.28);
  box-shadow:0 10px 24px -12px rgba(176,69,90,.55); transform:translateY(-2px);
}
.knopf--rand-dunkel{
  background:linear-gradient(145deg, rgba(255,255,255,.7), rgba(247,239,229,.35));
  color:var(--text); border-color:rgba(228,214,195,.9);
  box-shadow:0 6px 18px -14px rgba(44,35,28,.35);
}
.knopf--rand-dunkel:hover{
  background:linear-gradient(145deg, rgba(247,226,228,.75), rgba(247,226,228,.4));
  color:var(--rose-tief); border-color:rgba(176,69,90,.5);
  box-shadow:0 10px 24px -14px rgba(176,69,90,.4); transform:translateY(-2px);
}

.mehr{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:600; color:var(--rose-tief);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:color .3s ease, gap .3s ease;
}
.mehr:hover{ color:var(--gold-tief); gap:.8rem; }

/* ---------- Zwei Spalten, asymmetrisch ---------- */
.duo{ display:grid; gap:clamp(1.6rem, 3vw, 3rem); align-items:center; }
.duo__text p{ max-width:40rem; }
.duo--bildlinks .duo__bild{ order:-1; }

/* ---------- Bilder ---------- */
.bildrahmen{ overflow:hidden; border-radius:var(--radius); background:var(--creme2); }
.bildrahmen img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.bildrahmen:hover img{ transform:scale(1.05); }
.bildrahmen--hoch img{ aspect-ratio:4/5; }
.bildrahmen--quer img{ aspect-ratio:4/3; }
.bildrahmen--breit img{ aspect-ratio:16/9; }
figure{ margin:0; }
figcaption{ font-size:.86rem; color:var(--text-leise); margin-top:.6rem; }

/* ---------- Vertrauensband ---------- */
.band{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(min(15rem,100%),1fr)); }
.band__punkt{ display:flex; gap:.9rem; align-items:flex-start; padding-left:1.1rem; border-left:1px solid var(--linie); }
.band__punkt b{ display:block; font-size:.98rem; }
.band__punkt span.text{ font-size:.9rem; color:var(--text-leise); }
.abschnitt--dunkel .band__punkt{ border-left-color:var(--linie-gold); }

/* ---------- Hakenlisten ---------- */
.haken-liste{ list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.6rem; }
.haken-liste li{ display:flex; align-items:flex-start; gap:.65rem; margin:0; }
.haken-liste li [data-symbol]{ color:var(--gold-tief); margin-top:.28em; font-size:1.05rem; }
.abschnitt--dunkel .haken-liste li [data-symbol],
.abschnitt--bild .haken-liste li [data-symbol]{ color:var(--gold-hell); }
.haken-liste--zwei{ grid-template-columns:repeat(auto-fit, minmax(min(16rem,100%),1fr)); gap:.6rem 1.6rem; }

/* ---------- Kacheln (Leistungen) ---------- */
.kacheln{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit, minmax(min(16rem,100%),1fr)); }
.kachel{
  background:var(--papier); border:1px solid var(--linie); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.kachel:hover{ border-color:var(--gold); transform:translateY(-3px); }
.kachel__bild{ overflow:hidden; }
.kachel__bild img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .4s ease; }
.kachel:hover .kachel__bild img{ transform:scale(1.05); }
.kachel__inhalt{ padding:1.15rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.kachel__kopf{ display:flex; align-items:center; gap:.7rem; }
.kachel h3{ margin:0; font-size:1.2rem; }
.kachel p{ margin:0; font-size:.94rem; color:var(--text-leise); }
.kachel .mehr{ margin-top:auto; align-self:flex-start; }

/* ---------- Ablauf in Schritten ---------- */
.schritte{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit, minmax(min(15rem,100%),1fr)); counter-reset:s; }
.schritt{ padding-top:1rem; border-top:2px solid var(--gold); }
.schritt__nr{ font-family:var(--serif); font-size:2rem; line-height:1; color:var(--gold-tief); display:block; margin-bottom:.4rem; }
.abschnitt--dunkel .schritt__nr{ color:var(--gold-hell); }
.schritt h3{ font-size:1.15rem; }
.schritt p{ font-size:.94rem; color:var(--text-leise); margin:0; }
.abschnitt--dunkel .schritt p{ color:var(--hell-leise); }

/* ---------- Zahlen ---------- */
.zahlen{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit, minmax(min(14rem,100%),1fr)); }
.zahl{ text-align:left; border-left:1px solid var(--linie-gold); padding-left:1.1rem; }
.zahl__wert{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); line-height:1.05;
  color:var(--gold-hell); font-variant-numeric:tabular-nums;
}
.zahl__text{ font-size:.92rem; letter-spacing:.02em; }

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

/* ---------- Team ---------- */
.team{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit, minmax(min(16rem,100%),1fr)); }
.person{ background:var(--papier); border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; transition:border-color .3s ease; }
.person:hover{ border-color:var(--gold); }
.person img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%; transition:transform .4s ease; }
.person:hover img{ transform:scale(1.04); }
.person__inhalt{ padding:1.1rem 1.2rem 1.4rem; }
.person h3{ margin-bottom:.15rem; }
.person__rolle{ display:block; font-size:.83rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-tief); margin-bottom:.8rem; }
.person dl{ margin:.4rem 0 0; font-size:.92rem; }
.person dt{ font-weight:700; color:var(--text); }
.person dd{ margin:0 0 .5rem; color:var(--text-leise); }

/* ---------- Preise ---------- */
.preistafeln{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(min(19rem,100%),1fr)); }
.preistafel{ background:var(--papier); border:1px solid var(--linie); border-top:3px solid var(--gold); border-radius:var(--radius); padding:1.4rem 1.4rem 1.6rem; }
.preistafel h3{ margin-bottom:.4rem; }
.preistafel > p{ font-size:.93rem; color:var(--text-leise); }
.preis-liste{ list-style:none; margin:.8rem 0 0; padding:0; }
.preis-zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--linie); margin:0; }
.preis-zeile:last-child{ border-bottom:0; }
.preis-zeile b{ font-weight:500; }
.preis-zeile span{ font-family:var(--serif); font-size:1.2rem; color:var(--gold-tief); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- Kundenstimmen (Karussell kommt aus dem Kit) ---------- */
.stimme{
  background:var(--papier); border:1px solid var(--linie); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:1.3rem 1.3rem 1.4rem; height:100%;
}
.stimme__text{ font-family:var(--serif); font-size:1.18rem; line-height:1.45; margin-bottom:.9rem; }
.stimme__wer{ font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-leise); margin:0; }
.stimme.platzhalter{ border-style:dashed; border-left-style:solid; background:transparent; }
.stimme.platzhalter .stimme__text{ color:var(--text-leise); }

/* ---------- Fragen und Antworten ---------- */
.faq{ max-width:48rem; }
.faq details{ border-bottom:1px solid var(--linie); }
.faq summary{
  cursor:pointer; list-style:none; padding:1rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--serif); font-size:1.22rem; color:var(--text);
  transition:color .3s ease;
}
.faq summary:hover{ color:var(--gold-tief); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--sans); font-size:1.3rem; color:var(--gold-tief); }
.faq details[open] summary::after{ content:'\2013'; }
.faq details > *:not(summary){ margin-bottom:1rem; }

/* ---------- Kontakt ---------- */
.kontakt-liste{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.kontakt-liste li{ display:flex; gap:.8rem; align-items:flex-start; margin:0; }
.kontakt-liste [data-symbol]{ color:var(--gold-hell); font-size:1.15rem; margin-top:.2em; }
.abschnitt:not(.abschnitt--dunkel):not(.abschnitt--bild) .kontakt-liste [data-symbol]{ color:var(--gold-tief); }
.kontakt-liste b{ display:block; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.15rem; }
.zeiten{ width:100%; border-collapse:collapse; max-width:26rem; }
.zeiten td{ padding:.5rem 0; border-bottom:1px dashed var(--linie); font-variant-numeric:tabular-nums; }
.abschnitt--dunkel .zeiten td{ border-bottom-color:var(--linie-gold); }
.zeiten td:last-child{ text-align:right; }

.karte-platz{ position:relative; min-height:340px; border:1px solid var(--linie); border-radius:var(--radius); background:var(--creme2); display:grid; place-items:center; overflow:hidden; }
.karte-platz iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ---------- Formular ---------- */
.formular{ display:grid; gap:1rem; max-width:44rem; }
.feld-paar{ display:grid; gap:1rem; }
.formular label{ display:block; font-size:.88rem; font-weight:600; letter-spacing:.04em; margin-bottom:.35rem; }
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular textarea,.formular select{
  width:100%; font:inherit; font-size:1rem; color:var(--text);
  background:var(--papier); border:1px solid var(--linie); border-radius:var(--radius);
  padding:.8rem .9rem; min-height:48px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.formular textarea{ min-height:150px; resize:vertical; }
.formular input:focus,.formular textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,164,78,.22); }
.einwilligung{ display:block; font-weight:400; font-size:.9rem; }
.einwilligung input{ margin-right:.5rem; width:18px; height:18px; vertical-align:-2px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.formular-hinweis{ border-radius:var(--radius); padding:.9rem 1.1rem; font-size:.95rem; border:1px solid var(--linie); }
.formular-hinweis:empty{ display:none; }
.hinweis-ok{ background:#EDF5EC; border-color:#9EC29A; color:#28502A; }
.hinweis-fehler{ background:#FBECEC; border-color:#D79A9A; color:#7C2020; }

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky; top:0; z-index:60;
  background:var(--tinte);
  border-bottom:1px solid var(--linie-gold);
  transition:box-shadow .3s ease, background-color .3s ease;
}
.kopf.gescrollt{ box-shadow:0 2px 20px rgba(0,0,0,.4); }
.kopf__innen{ display:flex; align-items:center; gap:clamp(.8rem, 2.4vw, 2rem); min-height:76px; }
.marke{ display:inline-flex; align-items:center; flex:none; }
.marke img{ height:40px; width:auto; object-fit:contain; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(.9rem, 2vw, 1.8rem); }
.nav__liste{ list-style:none; display:flex; align-items:center; gap:clamp(.8rem, 1.7vw, 1.6rem); margin:0; padding:0; }
.nav__liste li{ margin:0; }
.nav a:not(.knopf){
  display:flex; align-items:center; min-height:44px;
  color:#F1E7DA; text-decoration:none; font-size:.95rem; letter-spacing:.02em;
  border-bottom:2px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.nav a:not(.knopf):hover{ color:var(--gold-hell); border-bottom-color:var(--gold); }
.nav a[aria-current=page]:not(.knopf){ color:var(--gold-hell); border-bottom-color:var(--gold); }
.kopf__knopf{ padding:.7rem 1.2rem; min-height:44px; font-size:.9rem; }
.menue-taste{
  display:none; margin-left:auto;
  width:46px; height:46px; font-size:1.5rem;
  background:transparent; color:#F1E7DA;
  border:1px solid var(--linie-gold); border-radius:var(--radius);
  cursor:pointer; align-items:center; justify-content:center;
  transition:color .3s ease, border-color .3s ease;
}
.menue-taste:hover{ color:var(--gold-hell); border-color:var(--gold); }

/* ---------- Fusszeile ---------- */
.fuss{ background:var(--tinte); color:var(--hell); padding-block:var(--s-mittel) 0; }
.fuss h3{ color:#FBF5EC; font-size:1.15rem; margin-bottom:.8rem; }
.fuss p,.fuss li,.fuss address,.fuss span,.fuss small,.fuss td{ color:var(--hell); }
.fuss address{ font-style:normal; }
.fuss a{ color:var(--hell); text-decoration:none; transition:color .3s ease; }
.fuss a:hover{ color:var(--gold-hell); }
.fuss__raster{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit, minmax(min(15rem,100%),1fr)); }
.fuss__marke img{ height:52px; width:auto; object-fit:contain; margin-bottom:.9rem; }
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.fuss__sozial{ display:flex; gap:.7rem; margin-top:1rem; }
.fuss__sozial a{
  width:42px; height:42px; border-radius:50%; font-size:1.15rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linie-gold); color:var(--gold-hell);
  transition:background-color .3s ease, color .3s ease;
}
.fuss__sozial a:hover{ background:var(--gold); color:#1A1512; }
.fuss__unten{
  margin-top:2.2rem; padding-block:1.1rem; border-top:1px solid var(--linie-gold);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between;
  font-size:.88rem;
}
.fuss__unten ul{ display:flex; flex-wrap:wrap; gap:1.2rem; }

/* ---------- Rechtstexte ---------- */
.rechtstext{ max-width:46rem; margin:0 auto; padding-block:var(--s-mittel); }
.rechtstext h1{ font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem); margin-bottom:1.2rem; }
.rechtstext h2{ font-size:1.5rem; margin-top:2.2rem; }
.rechtstext h3{ font-size:1.2rem; margin-top:1.6rem; }
.rechtstext p,.rechtstext li{ font-size:1rem; max-width:44rem; }
.rechtstext ul{ padding-left:1.2rem; }

/* ---------- Zustaende aus der Laufzeitbibliothek ---------- */
.sichtbar{ opacity:1; }

/* ---------- Breitere Schirme ---------- */
@media (min-width:760px){
  .duo{ grid-template-columns:1.05fr .95fr; }
  .duo--schmal-bild{ grid-template-columns:1.25fr .75fr; }
  .feld-paar{ grid-template-columns:1fr 1fr; }
  .hero--klein{ min-height:clamp(340px, 42vh, 460px); }
}
@media (min-width:1000px){
  .duo--weit{ grid-template-columns:7fr 5fr; gap:4rem; }
}

/* ---------- Schmale Schirme ---------- */
@media (max-width:980px){
  .menue-taste{ display:inline-flex; }
  .kopf{ position:sticky; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--tinte); border-top:1px solid var(--linie-gold);
    padding:.6rem clamp(1.1rem,4vw,2.4rem) 1.4rem;
    display:none; box-shadow:0 12px 24px rgba(0,0,0,.35);
  }
  .nav.offen{ display:flex; }
  .nav__liste{ flex-direction:column; align-items:stretch; gap:0; }
  .nav a:not(.knopf){ padding:.5rem 0; border-bottom:1px solid rgba(232,188,105,.16); }
  .nav a:not(.knopf):hover{ border-bottom-color:rgba(232,188,105,.16); }
  .kopf__knopf{ margin-top:1rem; justify-content:center; }
}
@media (max-width:620px){
  .band__punkt{ border-left:0; padding-left:0; }
  .zahl{ border-left:0; padding-left:0; border-top:1px solid var(--linie-gold); padding-top:.8rem; }
  .hero__knoepfe .knopf{ width:100%; justify-content:center; }
}

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

/* === Angepasst über das Wunsch-Feld === */
/* Kopfzeile: zunaechst transparent ueber dem Inhalt, beim Scrollen schwarz */
.kopf{
  position:fixed; top:0; left:0; right:0;
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.kopf.gescrollt{
  background:var(--tinte);
  border-bottom-color:var(--linie-gold);
  box-shadow:0 2px 20px rgba(0,0,0,.4);
}

/* Logo beim Scrollen hell/weiss, damit es sich vom schwarzen Kopf abhebt */
.marke img{ transition:filter .3s ease; }
.kopf.gescrollt .marke img{ filter:brightness(0) invert(1); }

/* Geoeffnetes Mobilmenue: Kopf bekommt ebenfalls Flaeche und helles Logo */
@media (max-width:980px){
  .kopf:has(.nav.offen){ background:var(--tinte); border-bottom-color:var(--linie-gold); }
  .kopf:has(.nav.offen) .marke img{ filter:brightness(0) invert(1); }
}

/* Termin-Knopf NUR in der Kopfzeile: standardmaessig Gold, Rosa erst beim Hover */
.kopf .kopf__knopf.knopf--gold{
  background:linear-gradient(145deg, var(--gold-hell) 0%, var(--gold) 62%, #C9913E 100%);
  color:#1A1512;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 10px 24px -12px rgba(138,98,32,.55);
}
.kopf .kopf__knopf.knopf--gold:hover,
.kopf .kopf__knopf.knopf--gold:focus-visible{
  background:linear-gradient(145deg, #C4657A 0%, var(--rose-tief) 62%, #9A3A4D 100%);
  color:#FFF6F7;
  border-color:rgba(255,255,255,.4);
  box-shadow:0 10px 24px -12px rgba(176,69,90,.6);
  transform:translateY(-2px);
}
/* === Ende Anpassungen === */

/* Aufmacher: Bildwechsel */
#start .hero-slider{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#start .hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  opacity:0; animation:heroBildwechsel 40s linear infinite;
}
#start .hero-slide:nth-child(1){ animation-delay:0s; }
#start .hero-slide:nth-child(2){ animation-delay:8s; }
#start .hero-slide:nth-child(3){ animation-delay:16s; }
#start .hero-slide:nth-child(4){ animation-delay:24s; }
#start .hero-slide:nth-child(5){ animation-delay:32s; }
@keyframes heroBildwechsel{
  0%{ opacity:0; } 3%{ opacity:1; } 20%{ opacity:1; } 23%{ opacity:0; } 100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #start .hero-slide{ opacity:0; }
  #start .hero-slide:nth-child(1){ opacity:1; }
}

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

/* === Breite: #mensch img#0 === */
#mensch > .innen { max-width: 1200px !important; width: auto !important; }
#mensch > .innen > .duo { max-width: 1200px !important; width: auto !important; }
#mensch > .innen > .duo > .duo__bild { max-width: 1200px !important; }
#mensch > .innen > .duo > .duo__bild > .bildrahmen { max-width: 1200px !important; width: auto !important; }
/* === Ende Breite #mensch img#0 === */

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

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

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

/* === Textfarbe Zustände: z1vtr7n === */
[data-zustand="z1vtr7n"], [data-zustand="z1vtr7n"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #1a1512 !important; }
[data-zustand="z1vtr7n"]:hover, [data-zustand="z1vtr7n"]:hover *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #1a1512 !important; }
[data-zustand="z1vtr7n"]:active, [data-zustand="z1vtr7n"]:active *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #241c16 !important; }
/* === Ende Textfarbe Zustände z1vtr7n === */

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

@media (max-width:640px){
  #galerie .galerie{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* === Textfarbe Zustände: z0h04pv === */
[data-zustand="z0h04pv"], [data-zustand="z0h04pv"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #f7efe5 !important; }
[data-zustand="z0h04pv"]:hover, [data-zustand="z0h04pv"]:hover *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #2c231c !important; }
[data-zustand="z0h04pv"]:active, [data-zustand="z0h04pv"]:active *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #1a1512 !important; }
/* === Ende Textfarbe Zustände z0h04pv === */

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

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

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

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

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

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


/* ---------- 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. */
.kopf a.marke{ color:#fff; }
.hero__knoepfe a.knopf.knopf--gold{ color:#1a1a1a; }
.innen--schmal a.knopf.knopf--gold{ color:#1a1a1a; }
.innen a.knopf.knopf--gold{ color:#1a1a1a; }
.kontakt-knoepfe a.knopf.knopf--gold{ color:#1a1a1a; }
.karte-platz button.knopf.knopf--gold{ color:#1a1a1a; }
.band__punkt span.symbol-halter.symbol-kreis{ color:#1a1a1a; }
.kachel__kopf span.symbol-halter.symbol-kreis{ color:#1a1a1a; }
.band__punkt span.symbol-halter.symbol-kreis.symbol-kreis--rose{ color:#1a1a1a; }
.kachel__kopf span.symbol-halter.symbol-kreis.symbol-kreis--rose{ color:#1a1a1a; }
.tafel-kopf span.symbol-halter.symbol-kreis{ color:#1a1a1a; }
.tafel-kopf span.symbol-halter.symbol-kreis.symbol-kreis--rose{ color:#1a1a1a; }
.formular button.knopf.knopf--gold{ color:#1a1a1a; }
.beratung__knoepfe a.knopf.knopf--gold{ color:#1a1a1a; }