html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}

/* =====================================================================
   Hans Dampf Mobile Detailing — Designsystem v5
   Welt: warmes Tageslicht, tiefe Tinte, ein einziger Messing-Akzent.
   Gewählt, weil die Fotos helle Innenräume sind und die Seite draussen
   am Handy gelesen wird – nicht im abgedunkelten Raum.
   ===================================================================== */
:root{
  /* Flächen */
  --ground:  #F7F5F0;
  --card:    #FFFFFF;
  --deep:    #17191C;
  --sand:    #EFEBE2;

  /* Text */
  --ink:     #15171A;
  --ink-2:   #525860;
  --on-deep: #EDEAE3;
  --on-deep-2:#9BA1AA;

  /* Marke */
  --brass:   #7A5D18;   /* Messing für Text auf Hell – 5,66:1 */
  --gold:    #C9A227;   /* Markengold – nur als Fläche unter dunklem Text */
  --on-gold: #1A1509;

  /* Linien */
  --rule:    #E4DFD5;
  --rule-2:  #D6CEBE;
  --field:   #948976;   /* Formularrahmen – 3,44:1 auf Weiss */

  /* Raster */
  --wrap: 1140px;
  --gut: clamp(20px, 5vw, 44px);
  --sect: clamp(72px, 9vw, 128px);

  /* Abstände */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;

  /* Radien – weicher als vorher */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:9999px;

  /* Bewegung */
  --t-press: 160ms;
  --t-hover: 200ms;
  --t-enter: 260ms;
  --t-reveal: 620ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  /* Schrift */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
  accent-color: var(--brass);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  caret-color:var(--brass);
  scrollbar-color: var(--rule-2) var(--ground);
}

/* --- Browser-Oberflächen mitgestalten --- */
::selection{background:#EADFBC;color:var(--ink)}
.deep ::selection{background:#45392090;color:var(--on-deep)}

/* height:auto ist Pflicht: sonst gewinnt das height-Attribut des <img>
   gegen aspect-ratio und das Bild wird in die Länge gezogen. */
img{max-width:100%;display:block;height:auto}
p{margin:0}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}

h1,h2{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0;
  font-variation-settings:"opsz" 96;
}
h1{font-size:clamp(2.45rem, 6.2vw, 4.05rem);letter-spacing:-.028em}
h2{font-size:clamp(1.85rem, 4vw, 2.7rem)}
h3{
  font-family:var(--text);font-weight:600;font-size:1.08rem;
  line-height:1.35;letter-spacing:-.008em;margin:0;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:var(--sect)}
/* Sprungziele nicht unter den klebenden Kopf schieben */
[id]{scroll-margin-top:calc(88px + env(safe-area-inset-top,0px))}

.deep{background:var(--deep);color:var(--on-deep)}
.deep h2{color:#FBF9F4}
.deep .lede{color:var(--on-deep-2)}

.lede{color:var(--ink-2);max-width:58ch;margin-top:var(--s5);font-size:1.06rem}
.sect-head{margin-bottom:clamp(40px,5.5vw,64px);max-width:44ch}

/* Zahlen in Preisen laufen in gleicher Breite */
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--r-full);
  font-family:var(--text);font-size:1rem;font-weight:600;
  letter-spacing:-.005em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out),
             border-color var(--t-hover) var(--ease-out),
             color var(--t-hover) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:scale(.97)}

.btn--primary{background:var(--gold);color:var(--on-gold);
  box-shadow:0 2px 3px rgba(60,44,10,.14), 0 10px 22px -10px rgba(60,44,10,.42)}
.btn--primary:hover{background:#D8B03A}

.btn--quiet{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--quiet:hover{border-color:var(--ink);background:#FFFFFF}

.deep .btn--quiet{color:var(--on-deep);border-color:#3A3F46}
.deep .btn--quiet:hover{border-color:var(--on-deep);background:#22262A}

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.shot:focus-visible{
  outline:3px solid var(--brass);outline-offset:3px;border-radius:var(--r-sm);
}
.deep a:focus-visible,.deep button:focus-visible,.deep summary:focus-visible{
  outline-color:var(--gold);
}

/* ---------- Kopf ---------- */
.head{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:rgba(247,245,240,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.head .wrap{display:flex;align-items:center;gap:var(--s5);padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:44px;width:44px;object-fit:cover;border-radius:10px;flex:none;
  border:1px solid var(--rule)}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.06rem;line-height:1.15;
  letter-spacing:-.02em}
.brand-name span{display:block;font-family:var(--text);font-weight:400;font-size:.82rem;
  color:var(--ink-2);letter-spacing:0;margin-top:1px}
.nav{display:flex;gap:var(--s6);margin-left:auto}
.nav a{font-size:1rem;color:var(--ink-2);text-decoration:none;padding-block:12px;
  transition:color var(--t-hover) var(--ease-out)}
.nav a:hover{color:var(--ink)}
.head .btn{min-height:46px;padding:0 20px;font-size:.96rem}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);
  border-radius:12px;color:var(--ink);width:46px;height:46px;cursor:pointer;
  align-items:center;justify-content:center}
.burger svg{width:21px;height:21px}
@media (max-width:1000px){
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--card);border-bottom:1px solid var(--rule);
    box-shadow:0 12px 28px -18px rgba(24,20,10,.4)}
  .nav[hidden]{display:none}
  .nav a{padding:16px var(--gut);border-top:1px solid var(--rule)}
  .burger{display:flex}
  .head .btn{display:none}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(56px,7vw,96px) clamp(56px,7vw,92px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero h1 em{font-style:italic;font-variation-settings:"opsz" 144;color:var(--brass)}
.hero-sub{margin-top:var(--s5);font-size:1.13rem;color:var(--ink-2);max-width:46ch}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero-note{margin-top:var(--s5);font-size:.98rem;color:var(--ink-2);max-width:44ch}

.hero-figure{position:relative;margin:0}
.hero-figure img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:0 3px 6px rgba(28,22,10,.06), 0 26px 50px -26px rgba(28,22,10,.38)}
.hero-rating{
  position:absolute;left:-18px;bottom:28px;display:flex;align-items:center;gap:13px;
  background:var(--card);border-radius:var(--r-md);
  padding:14px 20px;box-shadow:0 4px 10px -2px rgba(28,22,10,.16), 0 14px 24px -14px rgba(28,22,10,.34);
}
.hero-rating .score{font-family:var(--display);font-weight:600;font-size:1.72rem;line-height:1}
.hero-rating small{display:block;font-size:.84rem;color:var(--ink-2);margin-top:3px}
.stars{display:flex;gap:2px;color:var(--gold)}
.stars svg{width:17px;height:17px}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero-figure img{aspect-ratio:4/3}
  .hero-rating{left:16px;bottom:16px}
}

/* ---------- Vertrauensband ---------- */
.trust{background:var(--sand);border-block:1px solid var(--rule)}
.trust .wrap{padding-block:var(--s7)}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s7)}
.trust h3{margin-bottom:var(--s2)}
.trust p{color:var(--ink-2);font-size:.99rem;max-width:32ch}
.trust svg{width:26px;height:26px;color:var(--brass);margin-bottom:var(--s4)}
@media (max-width:820px){
  .trust ul{grid-template-columns:1fr;gap:var(--s6)}
  .trust p{max-width:52ch}
}

/* ---------- Arbeiten ---------- */
/* Ausgerichtete Galerie: gleiche Zeilenhöhe, Breite nach Seitenverhältnis.
   So darf ein Querformat mitspielen, ohne dass etwas beschnitten oder verzogen wird. */
.gallery{display:flex;flex-wrap:wrap;gap:var(--s4)}
.shot{
  margin:0;padding:0;border:0;background:transparent;cursor:zoom-in;
  text-align:left;flex:var(--g) 1 0;min-width:0;
}
.shot--wide{--ar:1100/768;--g:1.432}
.shot--hoch{--ar:3/4;--g:.75}
.shot .frame{aspect-ratio:var(--ar);border-radius:var(--r-md);overflow:hidden;background:var(--sand)}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 520ms var(--ease-out)}
.shot:hover img{transform:scale(1.035)}
.shot figcaption{
  padding-top:var(--s3);font-size:.95rem;color:var(--ink-2);
  transition:color var(--t-hover) var(--ease-out);
}
.shot:hover figcaption{color:var(--ink)}
@media (max-width:920px){
  .gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
  .shot{flex:none}
  .shot--wide,.gallery .shot:last-child{grid-column:1 / -1}
}
.gal-note{margin-top:var(--s5);font-size:.92rem;color:var(--ink-2)}

/* Der eine gestaltete Moment: Bilder schieben sich beim Scrollen von unten frei */
.reveal{clip-path:inset(0 0 100% 0);opacity:.001}
.reveal.is-in{clip-path:inset(0 0 0 0);opacity:1;
  transition:clip-path var(--t-reveal) var(--ease-out), opacity 380ms var(--ease-out)}

/* Lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(94vw,940px);max-height:92vh}
dialog.lb::backdrop{background:rgba(20,17,12,.84)}
.lb-inner{position:relative;background:var(--card);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.2), 0 40px 80px -30px rgba(0,0,0,.6)}
.lb-inner img{width:100%;max-height:74vh;object-fit:contain;background:#12100C}
.lb-cap{padding:16px 20px;font-size:.96rem;color:var(--ink-2)}
.lb-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:var(--r-full);
  background:rgba(255,255,255,.94);border:1px solid var(--rule);color:var(--ink);
  font-size:1.3rem;line-height:1;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out), background-color var(--t-hover)}
.lb-close:hover{background:#fff}
.lb-close:active{transform:scale(.94)}

/* ---------- Bewertungen ---------- */
.rev{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.rev-summary .score-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.rev-summary .big{font-family:var(--display);font-weight:600;font-size:3.1rem;line-height:1;
  color:#FBF9F4}
.rev-summary p{color:var(--on-deep-2);margin-top:var(--s4);font-size:.99rem}
.rev-summary .btn{margin-top:var(--s5)}
.rev-write{display:inline-block;margin-top:var(--s4);font-size:.95rem;color:var(--on-deep-2);
  text-decoration:underline;padding-block:12px}
.rev-write:hover{color:var(--gold)}
.rev-list{display:grid;gap:var(--s4)}
.rev-item{background:#1E2126;border:1px solid #2C3037;border-radius:var(--r-md);
  padding:var(--s5) var(--s5) var(--s4)}
.rev-item blockquote{margin:0;font-size:1.04rem;line-height:1.55;color:#F3F0E9}
.rev-item figcaption{font-size:.9rem;color:var(--on-deep-2);margin-top:var(--s4);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rev-item .stars svg{width:14px;height:14px}
@media (max-width:880px){.rev{grid-template-columns:1fr}}

/* ---------- Leistungen & Preise ---------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-bottom:var(--s8)}
.tier{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,36px)}
.tier--delux{border-color:var(--rule-2);background:linear-gradient(180deg,#FFFDF6,#FFFFFF 52%)}
.tier-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-bottom:var(--s3)}
.tier h3{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.02em}
.tier-tag{font-size:.88rem;color:var(--ink-2)}
.tier--delux .tier-tag{color:var(--brass);font-weight:600}
.tier > p{color:var(--ink-2);font-size:1rem}
.tier ul{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:11px}
.tier li{position:relative;padding-left:27px;font-size:1rem;line-height:1.5}
.tier li svg{position:absolute;left:0;top:.28em;width:17px;height:17px;color:var(--brass)}
@media (max-width:800px){.tiers{grid-template-columns:1fr}}

.tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.tab{font-family:var(--text);font-size:.99rem;font-weight:500;
  background:transparent;color:var(--ink-2);border:1px solid var(--rule-2);
  border-radius:var(--r-full);min-height:48px;padding:0 20px;cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out),
             color var(--t-hover) var(--ease-out),
             border-color var(--t-hover) var(--ease-out),
             transform var(--t-press) var(--ease-out)}
.tab:hover{color:var(--ink);border-color:var(--ink)}
.tab:active{transform:scale(.97)}
.tab[aria-selected="true"]{background:var(--ink);color:#FBF9F4;border-color:var(--ink)}

.tscroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--card)}
.ptable{width:100%;border-collapse:collapse;min-width:560px}
.ptable caption{text-align:left;color:var(--ink-2);font-size:.95rem;
  padding:18px 22px 4px}
.ptable th,.ptable td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--rule);
  vertical-align:top}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable th{font-size:.92rem;color:var(--ink-2);font-weight:600}
.ptable td:nth-child(n+2),.ptable th:nth-child(n+2){text-align:right;white-space:nowrap}
.pname{font-weight:600;font-size:1.02rem}
.pdesc{display:block;color:var(--ink-2);font-size:.9rem;margin-top:4px;font-weight:400}
.amount{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.015em}
.amount--delux{color:var(--brass)}

.extras{margin-top:var(--s6);display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.extra{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  border:1px solid var(--rule);border-radius:var(--r-md);padding:15px 18px;background:var(--card)}
.extra b{font-weight:500;font-size:.98rem}
.extra span{color:var(--brass);font-weight:600;white-space:nowrap}
.price-note{margin-top:var(--s5);color:var(--ink-2);font-size:.95rem;max-width:66ch}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.step{padding-top:var(--s5);border-top:2px solid var(--ink)}
.step .no{font-family:var(--display);font-weight:600;font-size:2.4rem;line-height:1;
  color:var(--brass);display:block;margin-bottom:var(--s4);letter-spacing:-.03em}
.step p{color:var(--ink-2);font-size:1rem;margin-top:var(--s3);max-width:34ch}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:var(--s6)}
  .step p{max-width:52ch}}

/* ---------- Ausrüstung ---------- */
.kit{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(32px,5vw,68px);align-items:center}
.kit img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:0 3px 6px rgba(28,22,10,.06), 0 24px 46px -24px rgba(28,22,10,.36)}
.areas{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.areas li{font-size:.95rem;border:1px solid var(--rule-2);border-radius:var(--r-full);
  padding:9px 16px;background:var(--card)}
@media (max-width:880px){.kit{grid-template-columns:1fr}.kit img{aspect-ratio:3/2}}

/* ---------- FAQ ---------- */
.faq{max-width:780px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);
  padding-block:var(--s5);cursor:pointer;list-style:none;min-height:60px;
  font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq .chev{width:20px;height:20px;flex:none;color:var(--brass);
  transition:transform var(--t-enter) var(--ease-out)}
.faq details[open] .chev{transform:rotate(180deg)}
.faq p{color:var(--ink-2);font-size:1.02rem;padding-bottom:var(--s5);max-width:64ch}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,68px);align-items:start}
.form{display:grid;gap:var(--s4);background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:clamp(24px,3.4vw,34px)}
.field{display:grid;gap:7px}
.field label{font-size:.95rem;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{
  background:var(--card);border:1px solid var(--field);border-radius:12px;
  color:var(--ink);font-family:var(--text);font-size:16px;padding:14px 15px;width:100%;
  min-height:52px;
  transition:border-color var(--t-hover) var(--ease-out)}
.field input::placeholder,.field textarea::placeholder{color:#6E747E}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field textarea{resize:vertical;min-height:104px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form-note{font-size:.9rem;color:var(--ink-2)}
.direct{display:grid;margin-top:var(--s6)}
.direct a{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  min-height:64px;padding:var(--s4) 0;border-top:1px solid var(--rule);text-decoration:none;
  transition:color var(--t-hover) var(--ease-out)}
.direct a:last-child{border-bottom:1px solid var(--rule)}
.direct .k{font-size:.95rem;color:var(--ink-2)}
.direct .v{font-size:1.06rem;font-weight:600}
.direct a:hover .v{color:var(--brass)}
@media (max-width:880px){.contact{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}}

/* ---------- Fuss ---------- */
.foot{background:var(--deep);color:var(--on-deep);
  padding-block:var(--s8) calc(96px + env(safe-area-inset-bottom,0px))}
.foot-top{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s8);justify-content:space-between;
  align-items:flex-start}
.foot-logo{width:clamp(96px,14vw,124px);border-radius:var(--r-md)}
.foot-name{font-family:var(--display);font-weight:600;font-size:1.3rem;margin-top:var(--s4);
  letter-spacing:-.02em;color:#FBF9F4}
.socials{display:flex;gap:var(--s2);margin-top:var(--s4)}
.socials a{border:1px solid #3A3F46;border-radius:var(--r-full);min-height:46px;
  display:inline-flex;align-items:center;padding:0 18px;text-decoration:none;
  font-size:.96rem;color:var(--on-deep-2);
  transition:color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out)}
.socials a:hover{color:var(--gold);border-color:var(--gold)}
.foot-contact{color:var(--on-deep-2);font-size:1rem;line-height:1.95}
.foot-contact a{color:var(--on-deep);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--t-hover) var(--ease-out)}
.foot-contact a:hover{color:var(--gold)}
.foot-legal{margin-top:var(--s8);display:grid;gap:10px;max-width:820px}
.foot details{border:1px solid #2C3037;border-radius:var(--r-md);background:#1E2126}
.foot summary{cursor:pointer;padding:16px 20px;min-height:54px;font-size:.99rem;
  font-weight:500;color:var(--on-deep);list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s4)}
.foot summary::-webkit-details-marker{display:none}
.foot summary .chev{width:18px;height:18px;color:var(--on-deep-2);flex:none;
  transition:transform var(--t-enter) var(--ease-out)}
.foot details[open] summary .chev{transform:rotate(180deg)}
.foot details div{padding:4px 20px 20px;font-size:.96rem;color:var(--on-deep-2);line-height:1.72}
.foot details div b{color:var(--on-deep);font-weight:600}
.copy{margin-top:var(--s6);font-size:.92rem;color:var(--on-deep-2)}
@media (max-width:880px){.foot{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}}

/* ---------- Mobile Leiste ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:var(--s2);
  background:rgba(247,245,240,.96);backdrop-filter:blur(12px);border-top:1px solid var(--rule);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px))}
.dock .btn{flex:1;padding:0 14px;min-height:50px}
@media (max-width:880px){.dock{display:flex}}

/* ---------- Bewegungsempfindlichkeit ---------- */
@media (prefers-reduced-motion:reduce){
  /* Endzustand sofort, statt jede Rückmeldung abzuschalten */
  .reveal{clip-path:inset(0 0 0 0);opacity:1;transition:none}
  .shot:hover img{transform:none}
  .btn:active,.tab:active,.lb-close:active{transform:none}
  .shot img{transition:none}
  .faq .chev,.foot summary .chev{transition:none}
}

/* =====================================================================
   ERGÄNZUNGEN – Rechtliches, Hinweisband, Unterseiten, Dampf
   Bestehende Regeln oben sind unverändert.
   ===================================================================== */

/* ---------- Rechts-Links im Fuss ---------- */
.foot-links{margin-top:var(--s8);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.foot-links a,.foot-links button{
  font-family:var(--text);font-size:.99rem;color:var(--on-deep-2);
  text-decoration:none;background:none;border:0;padding:12px 0;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--t-hover) var(--ease-out)}
.foot-links a:hover,.foot-links button:hover{color:var(--gold)}

/* ---------- Hinweisband (keine nicht notwendigen Cookies) ---------- */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);
  border-top:1px solid var(--rule-2);
  box-shadow:0 -4px 12px -6px rgba(28,22,10,.18), 0 -18px 32px -24px rgba(28,22,10,.3);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.cbar .wrap{display:flex;align-items:center;gap:var(--s5);padding-block:var(--s4)}
.cbar p{font-size:.97rem;color:var(--ink-2);max-width:74ch}
.cbar p b{color:var(--ink);font-weight:600}
.cbar a{color:var(--brass);font-weight:500}
.cbar .btn{flex:none;min-height:48px;padding:0 22px}
@media (max-width:760px){
  .cbar .wrap{flex-direction:column;align-items:stretch;gap:var(--s4)}
  .cbar .btn{width:100%}
}
body.hat-dock .cbar{bottom:0}
@media (max-width:880px){.cbar{bottom:0}.cbar~.dock{display:none}}

/* ---------- Unterseiten ---------- */
.seite{padding-block:clamp(48px,6vw,88px) var(--sect)}
.seite .wrap{max-width:820px}
.seite h1{font-size:clamp(2.1rem,4.6vw,3rem);margin-bottom:var(--s5)}
.seite h2{font-size:clamp(1.25rem,2.4vw,1.55rem);margin-top:var(--s8);margin-bottom:var(--s4)}
.seite h2:first-of-type{margin-top:var(--s7)}
.seite h3{font-size:1.04rem;margin-top:var(--s6);margin-bottom:var(--s2)}
.seite p{margin-bottom:var(--s4);max-width:70ch}
.seite ul{margin:0 0 var(--s4);padding-left:1.25em;max-width:70ch}
.seite li{margin-bottom:var(--s2)}
.seite a{color:var(--brass)}
.seite .stand{color:var(--ink-2);font-size:.95rem;margin-bottom:var(--s7)}
.seite .karte{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);margin-bottom:var(--s6)}
.seite .karte p:last-child{margin-bottom:0}
.seite dl{margin:0 0 var(--s5);display:grid;gap:var(--s3)}
.seite dt{font-weight:600}
.seite dd{margin:0;color:var(--ink-2)}
.seite .hinweis{background:var(--sand);border:1px solid var(--rule-2);border-radius:var(--r-md);
  padding:18px 20px;font-size:.96rem;color:var(--ink-2);margin-bottom:var(--s6)}
.luecke{background:#FBE9C6;color:#4A3A10;border-bottom:2px solid #D8B03A;
  padding:1px 7px;border-radius:4px;font-weight:600;white-space:nowrap}
.zurueck{display:inline-flex;align-items:center;gap:9px;min-height:48px;
  color:var(--ink-2);text-decoration:none;font-size:1rem;margin-top:var(--s7)}
.zurueck:hover{color:var(--brass)}
.zurueck svg{width:17px;height:17px}

/* ---------- 404 ---------- */
.nf{text-align:center;padding-block:clamp(72px,12vw,140px)}
.nf .code{font-family:var(--display);font-weight:600;font-size:clamp(4rem,14vw,8rem);
  line-height:1;color:var(--brass);letter-spacing:-.04em}
.nf h1{margin-top:var(--s4)}
.nf p{margin:var(--s5) auto 0;max-width:46ch;color:var(--ink-2)}
.nf .btn{margin-top:var(--s6)}

/* =====================================================================
   DIE EINE ANIMATION – Dampf über dem Hero-Foto
   Liegt als eigene Ebene im Bildrahmen. Nur transform und opacity.
   Kein Einfluss auf Layout, Abstände oder Text.
   ===================================================================== */
.dampf{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;
  pointer-events:none;z-index:1}
.dampf i{
  position:absolute;left:50%;bottom:-24%;
  width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 42%, rgba(255,255,255,0) 72%);
  filter:blur(16px);
  opacity:0;
  transform:translate3d(-50%,0,0) scale(.72);
  animation:dampf-auf 15s cubic-bezier(.4,.05,.55,.95) infinite;
}
.dampf i:nth-child(2){left:28%;width:48%;filter:blur(13px);
  animation-duration:19s;animation-delay:-6s}
.dampf i:nth-child(3){left:74%;width:54%;filter:blur(19px);
  animation-duration:23s;animation-delay:-12s}
@keyframes dampf-auf{
  0%   {opacity:0;   transform:translate3d(-50%,0,0)      scale(.72)}
  18%  {opacity:.18}
  62%  {opacity:.11}
  100% {opacity:0;   transform:translate3d(-50%,-150%,0)  scale(1.5)}
}
.hero-rating{z-index:2}

@media (prefers-reduced-motion:reduce){
  .dampf{display:none}
}

/* Honeypot – für Menschen unsichtbar, für Bots ein Köder */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}