/* =====================================================================
   Prime Car Repair - Stylesheet
   Farbwelt aus dem Logo abgeleitet (Oliv / Gold)
   Inhalt:  1 Tokens  2 Reset  3 Layout  4 Typografie  5 Buttons
            6 Header  7 Hero  8 Marken  9 Karten 10 Warum wir
           11 Ablauf 12 FAQ 13 Kontakt 14 CTA 15 Footer
           16 Unterseiten 17 Animation 18 Responsive 19 A11y/Druck
   ===================================================================== */

/* ---------- 1. Design-Tokens ---------- */
:root{
  color-scheme:dark;
  --ink:            #100f08;
  --ink-2:          #16150c;
  --olive-900:      #23200f;
  --olive-800:      #2d2914;
  --gold:           #e7d094;
  --gold-strong:    #f6ecca;
  --gold-dim:       #b9a469;
  --gold-deep:      #8d7c46;

  --text:           #ece8db;
  --text-soft:      #c7c1ac;
  --muted:          #948e7c;

  --line:           rgba(231, 208, 148, .14);
  --line-strong:    rgba(231, 208, 148, .30);
  --card:           linear-gradient(180deg, rgba(231,208,148,.055), rgba(231,208,148,.012));
  --card-hover:     linear-gradient(180deg, rgba(231,208,148,.10), rgba(231,208,148,.025));

  --shadow-md:      0 18px 40px -18px rgba(0,0,0,.85);
  --shadow-gold:    0 18px 45px -22px rgba(231,208,148,.45);

  --font-display:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container:      1180px;
  --radius:         16px;
  --radius-sm:      10px;
  --header-h:       78px;

  --ease:           cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 18px);
}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(16px, .55vw + 14.4px, 17.5px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--gold-strong); }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0 0 .6em; line-height:1.15; font-weight:500; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }
strong{ font-weight:600; color:var(--gold-strong); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:var(--ink); }

/* ---------- 3. Layout-Helfer ---------- */
.container{ width:min(100% - 2.6rem, var(--container)); margin-inline:auto; }
.section{ padding:clamp(4.5rem, 9vw, 8rem) 0; position:relative; }
.section--alt{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(231,208,148,.05), transparent 60%),
    var(--ink-2);
}
/* Feine Goldlinie am oberen Rand abgesetzter Abschnitte */
.section--alt::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px, 76%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(231,208,148,.45), transparent);
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:.8rem 1.3rem;
  border-radius:0 0 var(--radius-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- 4. Typografie-Bausteine ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.875rem; font-weight:600; letter-spacing:.04em; text-transform:none;
  color:var(--gold-dim); margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-dim));
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.85rem, 3.4vw, 2.9rem);
  letter-spacing:.055em; text-transform:uppercase;
  color:var(--gold-strong); margin-bottom:.5em;
  text-wrap:balance;
}
.section-lead{ max-width:62ch; color:var(--text-soft); font-size:1.03rem; }
.section-head{ margin-bottom:clamp(2.4rem, 5vw, 3.6rem); max-width:760px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow::after{
  content:""; width:34px; height:1px;
  background:linear-gradient(90deg, var(--gold-dim), transparent);
}
.section-head--center .section-lead{ margin-inline:auto; }

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-pad: .95rem 1.7rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:var(--btn-pad);
  border-radius:999px; border:1px solid transparent;
  font-size:.94rem; font-weight:600; letter-spacing:.01em; text-transform:none;
  cursor:pointer; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn--primary{
  background:linear-gradient(135deg, var(--gold-strong), var(--gold) 45%, var(--gold-dim));
  color:#151206; box-shadow:var(--shadow-gold);
}
.btn--primary:hover{ transform:translateY(-2px); color:#151206; box-shadow:0 22px 50px -20px rgba(231,208,148,.7); }
.btn--ghost{ border-color:var(--line-strong); color:var(--gold); background:rgba(231,208,148,.04); }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(231,208,148,.1); transform:translateY(-2px); }
.btn--block{ width:100%; }
.btn--lg{ --btn-pad: 1.1rem 2.1rem; font-size:.95rem; }

/* ---------- 6. Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h); display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease),
             backdrop-filter .3s var(--ease), height .3s var(--ease);
}
.header.is-stuck{
  background:rgba(16,15,8,.92);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom-color:var(--line);
  height:66px;
}
.header__inner{
  display:flex; align-items:center; gap:1.2rem;
  width:min(100% - 2.6rem, var(--container)); margin-inline:auto;
}
.brand{ display:flex; align-items:center; gap:.75rem; margin-right:auto; }
.brand img{ width:auto; height:40px; transition:height .3s var(--ease); }
.header.is-stuck .brand img{ height:34px; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  position:relative; padding:.55rem .75rem; border-radius:8px;
  font-size:.87rem; font-weight:500; color:var(--text-soft); white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.28rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover, .nav a.is-active{ color:var(--gold-strong); }
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); }
.header__cta{ display:flex; align-items:center; gap:.7rem; }
.header__phone{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; color:var(--gold); white-space:nowrap;
}
.header__phone svg{ width:16px; height:16px; }

/* Runder Anruf-Button - ersetzt den Text-Button auf kleinen Bildschirmen */
.header__call{
  display:none; width:44px; height:44px; border-radius:50%;
  place-items:center; flex:none;
  border:1px solid var(--line-strong); background:rgba(231,208,148,.08); color:var(--gold);
}
.header__call svg{ width:18px; height:18px; }
.header__call:hover{ background:rgba(231,208,148,.18); }

.burger{
  display:none; width:44px; height:44px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--line-strong); border-radius:10px;
  background:rgba(231,208,148,.05); cursor:pointer;
}
.burger span{
  display:block; width:19px; height:1.5px; background:var(--gold); margin:0;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:linear-gradient(180deg, rgba(22,21,12,.99), rgba(16,15,8,.99));
  backdrop-filter:blur(10px);
  padding:calc(var(--header-h) + 1.5rem) 1.6rem 2rem;
  display:flex; flex-direction:column; gap:.2rem;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  overflow-y:auto;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-nav a{
  padding:1rem .4rem; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text);
}
.mobile-nav a:hover{ color:var(--gold-strong); }
.mobile-nav .btn{
  margin-top:1.6rem; border-bottom:0;
  font-family:var(--font-body); font-size:.92rem; letter-spacing:.06em;
  padding:1.05rem 1.7rem;
}
.mobile-nav .btn--primary{ color:#151206; }
.mobile-nav .btn--ghost{ color:var(--gold); }
.mobile-nav__meta{ margin-top:auto; padding-top:2rem; color:var(--muted); font-size:.88rem; }
.mobile-nav .mobile-nav__meta a{
  padding:0; border:0; font:inherit; letter-spacing:0; text-transform:none; color:var(--text-soft);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong);
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height:min(100svh, 900px);
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 2.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow:hidden;
  /* Steinbild (dunkles Gestein, altes Logo herausgerechnet) unter Abdunklung, unten weich in den Seitengrund */
  background:
    linear-gradient(180deg, rgba(16,15,8,.30) 0%, rgba(16,15,8,.52) 58%, var(--ink) 100%),
    radial-gradient(60% 45% at 50% 28%, rgba(231,208,148,.10), transparent 70%),
    url("../assets/hero-stein.jpg") center 30% / cover no-repeat,
    var(--ink);
}
.hero__glow{
  position:absolute; left:50%; top:26%;
  width:min(760px, 90vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(231,208,148,.22), transparent 62%);
  filter:blur(38px); pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:.75;   /* frueher pulsierend - ohne Animation sonst dauerhaft volle Helligkeit */
}
.hero__inner{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
/* Logo im Hero: gestapelte Vektorfassung (PR-Monogramm, PRIME, CAR REPAIR) -
   bleibt auf jedem Bildschirm gestochen scharf. */
.hero__brand{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.7rem, 1.6vw, 1.1rem);
  margin-bottom:clamp(1.1rem, 2.2vw, 1.5rem);
}
.hero__logo{
  width:clamp(230px, 26vw, 330px); height:auto;
  filter:drop-shadow(0 12px 40px rgba(231,208,148,.2));
}

/* Zierlinie mit Raute zwischen Marke und Aussage */
.hero__rule{
  position:relative; width:min(240px, 56vw); height:9px;
  margin:0 auto clamp(1.1rem, 2.2vw, 1.6rem);
  background:linear-gradient(90deg,
    transparent 0%, var(--gold-dim) 43%, transparent 43%,
    transparent 57%, var(--gold-dim) 57%, transparent 100%) center / 100% 1px no-repeat;
}
.hero__rule::after{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px;
  transform:translate(-50%, -50%) rotate(45deg); background:var(--gold);
}
/* Anfahrtszeile ueber der Hauptzeile: Wo bin ich? - ein Tipp fuehrt zur Karte */
.hero__place{
  display:inline-flex; align-items:center; gap:.45rem;
  margin:0 auto .9rem; padding:.25rem .2rem;
  font-size:.875rem; font-weight:500; letter-spacing:.02em; text-transform:none; min-height:44px;
  white-space:normal;
  color:var(--gold); text-decoration:none;   /* --gold-dim waere im hellen Leuchtbereich unter AA-Kontrast */
  transition:color .2s var(--ease);
}
.hero__place svg{ width:14px; height:14px; color:var(--gold); flex:none; }
.hero__place:hover, .hero__place:focus-visible{ color:var(--gold-strong); }
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 4.2vw, 3.05rem);
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-strong); margin-bottom:.45em; text-wrap:balance;
}
.hero h1 .thin{
  display:block; font-size:max(.44em, 13px); letter-spacing:.3em;
  color:var(--gold); margin-top:.9em; font-weight:400;
}
.hero__lead{
  max-width:60ch; color:var(--text-soft); text-wrap:pretty;
  font-size:clamp(1rem,1.5vw,1.12rem); margin-bottom:2.2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.hero__trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem .5rem;
  margin-top:clamp(2.4rem, 5vw, 3.4rem);
}
.trust-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px;
  background:rgba(231,208,148,.035);
  font-size:.875rem; font-weight:500; letter-spacing:.01em;
  text-transform:none; color:var(--text-soft);
}
.trust-chip svg{ width:14px; height:14px; color:var(--gold); flex:none; }

/* ---------- 8. Marken-Laufband ---------- */
.marquee{ border-block:1px solid var(--line); background:var(--ink-2); padding:1.15rem 0; overflow:hidden; }
/* Namen blenden an den Raendern weich aus, statt hart abgeschnitten zu werden */
.marquee__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 52s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  display:inline-flex; align-items:center; gap:1.8rem; padding-right:1.8rem;
  font-family:var(--font-display); font-size:.92rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-deep); white-space:nowrap;
}
.marquee span::after{
  content:""; width:5px; height:5px; transform:rotate(45deg);
  background:var(--gold-deep); opacity:.55;
}
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- 9. Karten-Raster (Leistungen) ---------- */
.grid{ display:grid; gap:1.15rem; }
/* Karten fliessen und zentrieren sich - eine angebrochene letzte Reihe
   steht damit mittig statt linksbuendig mit Loch rechts. */
.grid--3{ display:flex; flex-wrap:wrap; justify-content:center; }
.grid--3 > *{ flex:1 1 290px; max-width:381px; }

.card{
  position:relative; padding:1.9rem 1.7rem; border-radius:var(--radius);
  display:flex; flex-direction:column;   /* Anfrage-Link steht in jeder Reihe auf einer Linie */
  background:var(--card); border:1px solid var(--line); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), box-shadow .3s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
  background:radial-gradient(80% 60% at 50% 0%, rgba(231,208,148,.13), transparent 70%);
}
.card:hover{
  transform:translateY(-5px); border-color:var(--line-strong);
  background:var(--card-hover); box-shadow:var(--shadow-md);
}
.card:hover::before{ opacity:1; }
/* Goldkante, die beim Ueberfahren von der Mitte aus aufzieht */
.card::after{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transition:transform .45s var(--ease);
}
.card:hover::after{ transform:scaleX(1); }
.card__icon{
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center; margin-bottom:1.15rem;
  background:linear-gradient(140deg, rgba(231,208,148,.16), rgba(231,208,148,.03));
  border:1px solid var(--line-strong); color:var(--gold);
  transition:box-shadow .35s var(--ease);
}
.card:hover .card__icon{
  box-shadow:0 0 0 4px rgba(231,208,148,.06), 0 10px 30px -12px rgba(231,208,148,.55);
}
.card__icon svg{ width:25px; height:25px; }
.card h3{
  font-family:var(--font-display); font-size:1.08rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-strong); margin-bottom:.55em;
}
.card p{ color:var(--text-soft); font-size:.93rem; margin:0; }
/* Nutzen in einem Satz, darunter der direkte Weg zur Anfrage */
.card .card__benefit{
  display:flex; gap:.55rem; align-items:flex-start; margin-top:1.05rem;
  font-size:.89rem; font-weight:500; line-height:1.5; color:var(--gold);
}
.card__benefit svg{ width:16px; height:16px; flex:none; margin-top:.2em; }
.card__link{
  display:block; align-self:flex-start; margin-top:auto; padding:1rem 0 .5rem;
  font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold);
}
.card__link svg{
  display:inline-block; vertical-align:-2px; margin-left:.45rem;
  width:15px; height:15px; transition:transform .25s var(--ease);
}
.card__link:hover svg{ transform:translateX(3px); }

/* ---------- 10. Warum wir ---------- */
/* Das Hintergrundsymbol ragt bewusst ueber den Textblock hinaus -
   am Abschnittsrand wird es abgeschnitten, sonst waere die Seite
   auf dem Handy breiter als der Bildschirm und wuerde herauszoomen. */
#warum{ overflow:hidden; }
.why{
  display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:clamp(2.5rem, 6vw, 5.5rem); align-items:center;
}
.why__intro{ position:relative; isolation:isolate; }
.why__intro .section-lead{ margin-bottom:2rem; }
/* Grosses, kaum sichtbares Motor-Symbol als Hintergrundzeichen */
.why__mark{
  position:absolute; z-index:-1; pointer-events:none;
  width:min(420px, 82%); left:-10%; top:50%; transform:translateY(-50%);
  opacity:.05;
}
.why__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.why__phone{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; letter-spacing:.02em; color:var(--gold);
}
.why__phone svg{ width:17px; height:17px; }
.why__list{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); overflow:hidden;
}
.why__item{
  display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start;
  padding:clamp(1.3rem, 2.4vw, 1.75rem) clamp(1.3rem, 2.6vw, 2rem);
  transition:background .3s var(--ease);
}
.why__item + .why__item{ border-top:1px solid var(--line); }
.why__item:hover{ background:rgba(231,208,148,.035); }
/* Nummern als Kontur - ruhig, aber praesent */
.why__num{
  font-family:var(--font-display); font-size:1.55rem; line-height:1;
  min-width:2.2ch; padding-top:.1rem;
  color:transparent; -webkit-text-stroke:1px var(--gold-dim);
}
@supports not (-webkit-text-stroke:1px black){
  .why__num{ color:var(--gold-dim); }
}
.why__item h3{ font-size:1.03rem; font-weight:600; color:var(--gold-strong); margin-bottom:.35em; }
.why__item p{ color:var(--text-soft); font-size:.93rem; margin:0; }


/* ---------- 11. Ablauf ---------- */
.steps{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.15rem;
}
/* Zeitstrahl: verbindet die Nummern von Schritt 1 bis 4 */
.steps::before{
  content:""; position:absolute; top:19px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg, rgba(231,208,148,.15), var(--gold-dim) 18%, var(--gold-dim) 82%, rgba(231,208,148,.15));
}
.step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
.step__badge{
  position:relative; z-index:1; flex:none;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--gold-strong), var(--gold-dim)); color:#171407;
  font-weight:700; font-size:.95rem; /* Grundschrift: Cinzel-1 waere ein I */
  /* Ring in Hintergrundfarbe: unterbricht den Zeitstrahl sauber um jede Nummer */
  box-shadow:0 0 0 6px var(--ink), 0 8px 20px -10px rgba(231,208,148,.8);
}
.step__card{
  flex:1; width:100%; padding:1.6rem 1.4rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.step:hover .step__card{ border-color:var(--line-strong); transform:translateY(-3px); }
.step h3{ font-family:var(--font-display); font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-strong); }
.step p{ color:var(--text-soft); font-size:.9rem; margin:0; }

/* ---------- 12. FAQ ---------- */
.faq{ max-width:860px; margin-inline:auto; display:grid; gap:.7rem; }
.faq details{
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.faq details[open]{ border-color:var(--line-strong); background:var(--card-hover); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 3.2rem 1.15rem 1.4rem;
  position:relative; font-weight:600; font-size:1rem; color:var(--gold-strong);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.4rem; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-25%) rotate(225deg); }
.faq__body{ padding:0 1.4rem 1.3rem; color:var(--text-soft); font-size:.95rem; }
.faq__body p:last-child{ margin-bottom:0; }

/* ---------- 13. Kontakt ---------- */
.contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 4vw, 3.5rem); align-items:start; }
.contact > .form, .contact > .form__done{ grid-column:1; grid-row:1; }
.contact > .info-list{ grid-column:2; grid-row:1; }
.info-list{ display:grid; gap:1.35rem; }
.info{ display:flex; gap:1rem; }
.info__icon{
  flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(231,208,148,.07); border:1px solid var(--line-strong); color:var(--gold);
}
.info__icon svg{ width:19px; height:19px; }
.info h3{
  font-family:var(--font-body); font-size:.875rem; font-weight:600; letter-spacing:.04em;
  text-transform:none; color:var(--muted); margin-bottom:.3em;
}
.info p, .info a{ margin:0; font-size:1rem; color:var(--text); }
.info a:hover{ color:var(--gold); }
.info .info__route{
  display:inline-flex; gap:.35rem; margin-top:.35rem;
  font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
}
.info .info__route:hover{ color:var(--gold-strong); }
.info .info__rueckruf{ margin-top:.3rem; }
.info .info__rueckruf a{ font-size:.88rem; font-weight:600; color:var(--gold); }
.info .info__rueckruf a:hover{ color:var(--gold-strong); }

.form{
  padding:clamp(1.6rem, 3vw, 2.4rem); border-radius:var(--radius); border:1px solid var(--line);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(231,208,148,.07), transparent 60%),
    linear-gradient(180deg, var(--olive-900), var(--ink-2));
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1rem; }
.field label{ font-size:.875rem; font-weight:600; letter-spacing:.02em; text-transform:none; color:#a39d8a; }
.field label .req{ color:var(--gold); }
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.28); border:1px solid var(--gold-deep); color:var(--text); font-size:1rem;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold-dim); background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(231,208,148,.12);
}
.field input::placeholder, .field textarea::placeholder{ color:#8f8a78; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%, var(--gold-dim) 50%),
                   linear-gradient(135deg, var(--gold-dim) 50%, transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.6rem;
}
.field select option{ background:var(--olive-900); color:var(--text); }
.field--error input, .field--error textarea, .field--error select{ border-color:#c96a5a; }
.field__error{ font-size:.78rem; color:#e08b7c; display:none; }
.field--error .field__error{ display:block; }
.checkbox{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--text-soft); margin-bottom:1.3rem; }
.checkbox input{ width:18px; height:18px; margin-top:.2rem; flex:none; accent-color:var(--gold-dim); }
.form__note{ font-size:.78rem; color:var(--muted); margin:1rem 0 0; text-align:center; }
.form__status{ display:none; margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--radius-sm); font-size:.9rem; }
.form__status.is-ok{ display:block; background:rgba(231,208,148,.1); border:1px solid var(--line-strong); color:var(--gold-strong); }
.form__status.is-error{ display:block; background:rgba(201,106,90,.12); border:1px solid rgba(201,106,90,.4); color:#e5a294; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form:focus, .form__done:focus{ outline:none; }
/* "Bitte waehlen" im Anliegen-Feld so blass wie die uebrigen Platzhalter */
.field select:invalid{ color:#8a8471; }
.field__hint{ font-size:.78rem; line-height:1.45; color:var(--muted); }
.field--error .field__hint{ display:none; }
.form__urgent{
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.4rem; padding:.75rem 1rem;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:rgba(231,208,148,.06);
  font-size:.88rem; line-height:1.45; color:var(--text-soft);
}
.form__urgent svg{ width:18px; height:18px; flex:none; color:var(--gold); }
.form__urgent a{ font-weight:600; white-space:nowrap; }
/* "So geht es weiter" direkt vor dem Absende-Knopf */
.form__next{
  margin:0 0 1.4rem; padding:1rem 1.1rem 1.05rem; border-radius:var(--radius-sm);
  border:1px dashed rgba(231,208,148,.22); background:rgba(0,0,0,.18);
}
.form__next-title{
  margin:0 0 .65rem; font-size:.74rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-dim);
}
.form__next ol{ margin:0; padding:0; list-style:none; counter-reset:schritt; display:grid; gap:.5rem; }
.form__next li{
  counter-increment:schritt; display:grid; grid-template-columns:1.45rem 1fr; gap:.6rem;
  font-size:.87rem; line-height:1.5; color:var(--text-soft);
}
.form__next li::before{
  content:counter(schritt); width:1.45rem; height:1.45rem; border-radius:50%;
  display:grid; place-items:center; margin-top:.05rem;
  font-size:.72rem; font-weight:700; line-height:1; color:#171407;
  background:linear-gradient(140deg, var(--gold-strong), var(--gold-dim));
}
.form__fallback{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.form__fallback .btn{ flex:1 1 200px; --btn-pad:.8rem 1.1rem; font-size:.8rem; white-space:normal; text-align:center; }
/* Bestaetigung nach dem Absenden - ersetzt das Formular */
.form__done{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(1.8rem, 4vw, 2.8rem); border-radius:var(--radius); border:1px solid var(--line-strong);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(231,208,148,.1), transparent 60%),
    linear-gradient(180deg, var(--olive-900), var(--ink-2));
}
.form__fallback[hidden], .form__done[hidden], .field[hidden], .form [data-modus][hidden]{ display:none; }
/* Umschalter Termin / Rueckruf - echte Auswahlknoepfe, per Pfeiltasten bedienbar */
.form__modus{ margin:0 0 1.2rem; padding:0; border:0; min-width:0; }
.form__modus-legend{
  padding:0; margin:0 0 .5rem;
  font-size:.875rem; font-weight:600; letter-spacing:.02em; text-transform:none; color:#a39d8a;
}
.form__modus-optionen{
  display:grid; grid-template-columns:1fr 1fr; gap:.3rem; padding:.3rem;
  border-radius:999px; border:1px solid var(--line); background:rgba(0,0,0,.28);
}
.form__modus-option{ position:relative; display:block; cursor:pointer; }
.form__modus-option input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.form__modus-option span{
  display:flex; align-items:center; justify-content:center; min-height:44px; padding:.45rem .8rem;
  border-radius:999px; border:1px solid transparent;
  font-size:.88rem; font-weight:600; line-height:1.25; text-align:center; color:var(--text-soft);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.form__modus-option:hover input:not(:checked) + span{ color:var(--text); background:rgba(231,208,148,.05); }
.form__modus-option input:checked + span{
  background:rgba(231,208,148,.14); border-color:var(--gold-dim); color:var(--gold-strong);
}
.form__modus-option input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
@media (forced-colors: active){
  /* Windows-Kontrastmodus entfernt Hintergruende - die Auswahl bleibt so erkennbar */
  .form__modus-option input:checked + span{ forced-color-adjust:none; background:Highlight; color:HighlightText; border-color:Highlight; }
  .form__modus-option input:focus-visible + span{ outline-color:CanvasText; }
}
.form__rueckruf-info{ margin:-.2rem 0 1.2rem; font-size:.9rem; line-height:1.55; color:var(--text-soft); }
/* Terminangaben: Gruppe ohne eigenen Rahmen */
.form__termin{ margin:0; padding:0; border:0; min-width:0; }
.form__abholung .checkbox{ margin-bottom:1rem; font-size:.92rem; color:var(--text); }
.checkbox__zusatz{ color:var(--muted); white-space:nowrap; }
.form__done-icon{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.2rem;
  border:1px solid var(--line-strong); background:rgba(231,208,148,.08); color:var(--gold);
}
.form__done-icon svg{ width:30px; height:30px; }
.form__done-title{
  margin:0 0 .6rem; font-family:var(--font-display); font-size:clamp(1.1rem, 2.4vw, 1.4rem);
  line-height:1.3; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-strong);
  text-wrap:balance;
}
.form__done-text{ max-width:46ch; margin:0 0 1rem; color:var(--text-soft); text-wrap:pretty; }
.form__done-small{ margin:0 0 1.4rem; font-size:.85rem; color:var(--muted); }
.form__done-small a{ font-weight:600; white-space:nowrap; }

/* Anfahrt: gezeichnete Karte mit Adresse. Google Maps erst nach Klick (DSGVO). */
.map{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:clamp(2.5rem, 5vw, 3.5rem); min-height:380px;
  display:flex; align-items:center;
  padding:clamp(1.25rem, 4vw, 3rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(60% 90% at 62% 45%, rgba(231,208,148,.10), transparent 70%),
    var(--ink-2);
}
.map__art{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.map__road{ stroke:rgba(231,208,148,.13); stroke-width:3; }
.map__road--minor{ stroke:rgba(231,208,148,.07); stroke-width:1.6; }
.map__road--main{ stroke:rgba(231,208,148,.24); stroke-width:7; }
.map__pin{ fill:var(--gold); }
.map__pin-dot{ fill:var(--ink); }
.map__pulse{
  fill:none; stroke:var(--gold); stroke-width:2;
  transform-box:fill-box; transform-origin:center;
}
.map__panel{
  position:relative; width:min(430px, 100%);
  padding:clamp(1.4rem, 3vw, 2rem);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:rgba(16,15,8,.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--shadow-md);
}
.map__panel .eyebrow{ margin-bottom:.8rem; }
/* Grundschrift statt Cinzel: dort sieht die Ziffer 1 aus wie ein I ("1c" -> "IC") */
.map__address{
  font-size:clamp(1.15rem, 2vw, 1.3rem); font-weight:600;
  line-height:1.45; color:var(--gold-strong); margin-bottom:1.3rem;
}
.map__area{ margin:-.7rem 0 1.3rem; font-size:.9rem; line-height:1.5; color:var(--text-soft); }
.map__actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.map__alt{ margin:.85rem 0 0; font-size:.84rem; }
.map__alt a{ font-weight:600; }
.map__actions .btn{ --btn-pad:.8rem 1.15rem; font-size:.84rem; }
.map__note{ font-size:.78rem; color:var(--muted); margin:1rem 0 0; }
.map.is-loaded{ padding:0; display:block; min-height:0; }
.map iframe{ width:100%; height:420px; border:0; display:block; }

/* ---------- 14. CTA-Band ---------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(231,208,148,.16), transparent 62%),
    linear-gradient(180deg, var(--olive-900), var(--ink));
  border-block:1px solid var(--line);
}
.cta-band h2{
  font-family:var(--font-display); font-size:clamp(1.5rem, 3.2vw, 2.4rem);
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-strong); text-wrap:balance;
}
.cta-band p{ color:var(--text-soft); max-width:56ch; margin-inline:auto; }
.cta-band__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }
.cta-band__mark{
  width:96px; height:auto; margin:0 auto 1.4rem;
  filter:drop-shadow(0 8px 24px rgba(231,208,148,.3));
}

/* ---------- 15. Footer ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer__brand img{ width:170px; height:auto; margin-bottom:1.2rem; }
.footer__brand p{ color:var(--muted); font-size:.9rem; max-width:34ch; }
.footer h3, .footer h4{
  font-size:.74rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:1.1rem;
}
.footer ul{ display:grid; gap:.55rem; }
.footer li a, .footer li span{ font-size:.92rem; color:var(--text-soft); }
.footer li a:hover{ color:var(--gold); }
.footer__bottom{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.82rem; color:var(--muted);
}
.footer__bottom nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer__claim{
  font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase;
  font-size:.72rem; color:var(--gold-deep);
}

.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(231,208,148,.12); border:1px solid var(--line-strong); color:var(--gold);
  backdrop-filter:blur(8px); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:rgba(231,208,148,.22); }
.to-top svg{ width:18px; height:18px; }

/* Feste Kontaktleiste auf dem Handy - erscheint nach dem Hero,
   verschwindet im Kontaktbereich, wo das Formular eigene Knoepfe hat */
.mobile-bar{ display:none; }

/* ---------- 16. Unterseiten ---------- */
.page-head{
  padding:calc(var(--header-h) + 4rem) 0 3rem;
  background:radial-gradient(80% 100% at 50% 0%, rgba(57,51,12,.8), transparent 70%), var(--ink);
  border-bottom:1px solid var(--line); text-align:center;
}
.page-head h1{
  font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.8rem);
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold-strong); margin:0;
}
.prose{ max-width:780px; margin-inline:auto; }
.prose h2{
  font-family:var(--font-display); font-size:1.25rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gold-strong); margin-top:2.6rem;
}
.prose h3{ font-size:1.02rem; font-weight:600; color:var(--gold); margin-top:1.8rem; }
.prose p, .prose li{ color:var(--text-soft); font-size:.97rem; }
.prose ul{ list-style:disc; padding-left:1.3rem; margin:0 0 1.1em; display:grid; gap:.4rem; }
.prose .note{
  padding:1.1rem 1.3rem; border-left:2px solid var(--gold-dim); background:rgba(231,208,148,.05);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:.9rem; color:var(--text-soft);
}
.thanks{ min-height:80svh; display:grid; place-items:center; text-align:center; padding:calc(var(--header-h) + 4rem) 0 5rem; }
.thanks__icon{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1.8rem;
  border:1px solid var(--line-strong); background:rgba(231,208,148,.08); color:var(--gold);
}
.thanks__icon svg{ width:38px; height:38px; }

/* ---------- 17. Scroll-Animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1220px){
  .header__phone{ display:none; }
}
@media (max-width: 760px){
  .header .btn--primary{ display:none; }
  .header__call{ display:grid; }

  .mobile-bar{
    position:fixed; z-index:95; left:.75rem; right:.75rem;
    bottom:calc(.75rem + env(safe-area-inset-bottom, 0px));
    display:grid; grid-template-columns:1fr 1.35fr; gap:.5rem;
    padding:.45rem; border-radius:999px;
    background:rgba(16,15,8,.92); border:1px solid var(--line-strong);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 18px 40px -12px rgba(0,0,0,.9);
    transform:translateY(calc(100% + 1.5rem)); visibility:hidden;
    transition:transform .35s var(--ease), visibility .35s;
  }
  .mobile-bar.is-visible{ transform:none; visibility:visible; }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    min-height:46px; border-radius:999px;
    font-size:.84rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  }
  .mobile-bar svg{ width:17px; height:17px; }
  .mobile-bar__call{ color:var(--gold); border:1px solid var(--line-strong); }
  .mobile-bar__cta{
    color:#151206;
    background:linear-gradient(135deg, var(--gold-strong), var(--gold) 45%, var(--gold-dim));
  }
  .mobile-bar--call-first{ grid-template-columns:1fr 1fr; }
  .mobile-bar--call-first .mobile-bar__call{
    color:#151206; border-color:transparent;
    background:linear-gradient(135deg, var(--gold-strong), var(--gold) 45%, var(--gold-dim));
  }
  .mobile-bar--call-first .mobile-bar__cta{ color:var(--gold); background:none; border:1px solid var(--line-strong); }
  body.has-bar .to-top{ bottom:calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
  .footer{ padding-bottom:calc(2rem + 76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1080px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2.2rem; }
  .nav a{ padding:.55rem .6rem; font-size:.84rem; }
}
@media (max-width: 960px){
  .nav, .header__phone{ display:none; }
  .burger{ display:flex; }
  .contact{ grid-template-columns:minmax(0, 1fr); }
  .contact > .info-list, .contact > .form, .contact > .form__done{ grid-column:1; grid-row:auto; }

  .why{ grid-template-columns:1fr; }
  .why__mark{ left:auto; right:-12%; top:-8%; transform:none; width:min(320px, 64%); }

  .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:2.2rem; }
  .steps::before{ display:none; }
}
@media (max-width: 620px){
  :root{ --header-h:66px; }
  .container{ width:min(100% - 2rem, var(--container)); }
  .header__inner{ width:min(100% - 2rem, var(--container)); }
  .brand img{ height:30px; }
  .form__row{ grid-template-columns:1fr; }
  .hero__actions .btn, .cta-band__actions .btn{ width:100%; }
  .footer__grid{ grid-template-columns:1fr; }

  /* Hero kompakter: Ort, Aussage und Knoepfe im ersten Bildschirm.
     Massstab ist die SICHTBARE Hoehe im Browser (iPhone SE mit Safari-Leisten
     ca. 553 px), nicht die Bildschirmhoehe. Name und Logo stehen auf dem Handy
     ohnehin direkt darueber in der Kopfzeile - im Hero entfaellt das Logo. */
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 1.25rem); }
  .hero__brand{ margin-bottom:.9rem; }
  .hero__rule{ display:none; }
  .hero__place{ letter-spacing:.08em; }
  .hero__lead{ margin-bottom:1.4rem; }
  .hero__trust{ margin-top:1.2rem; }

  /* Ablauf als senkrechter Zeitstrahl */
  .steps{ grid-template-columns:1fr; row-gap:1.1rem; }
  .steps::before{
    display:block; top:19px; bottom:19px; left:19px; right:auto;
    width:1px; height:auto;
    background:linear-gradient(180deg, var(--gold-dim), rgba(231,208,148,.15));
  }
  .step{ flex-direction:row; align-items:flex-start; gap:1rem; text-align:left; }
  .step__card{ padding:1.2rem 1.2rem 1.3rem; }

  /* Anfahrt: Kartengrafik oben, Adresse darunter */
  .map{ flex-direction:column; align-items:stretch; padding:0; min-height:0; }
  .map__art{ position:relative; height:210px; z-index:0; }
  .map__panel{
    width:auto; border:0; border-top:1px solid var(--line);
    border-radius:0; box-shadow:none; background:rgba(16,15,8,.6);
  }
}

/* ---------- 18b. Schnellwahl, Ablauf-Aufruf, FAQ-Nachsatz ---------- */
/* Schnellwahl direkt unter dem Hero: vier haeufige Anlaesse, ein Tipp fuehrt weiter */
.quick{ padding:clamp(1.6rem, 3vw, 2.2rem) 0 clamp(2rem, 4vw, 2.8rem); background:var(--ink); }
.quick__title{
  margin:0 0 1rem; text-align:center;
  font-family:var(--font-body); font-size:1.1rem; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--gold-strong);
}
.quick__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.7rem;
  max-width:940px; margin-inline:auto;
}
.quick__item{
  display:flex; align-items:center; gap:.8rem; min-height:66px; padding:.85rem 1.05rem;
  border-radius:14px; border:1px solid var(--line); background:var(--card);
  font-size:.9rem; font-weight:600; line-height:1.3; color:var(--text);
  transition:transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.quick__item:hover{ transform:translateY(-2px); border-color:var(--line-strong); color:var(--gold-strong); }
.quick__item svg{ width:24px; height:24px; flex:none; color:var(--gold); }
/* Leuchten-Symbole wie im Armaturenbrett: eigene Farbe mit Nachleuchten */
.quick__item .quick__lamp{ width:30px; height:30px; color:var(--wl); filter:drop-shadow(0 0 6px var(--wl-glow)); }

.steps__cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.6rem; margin-top:clamp(2.2rem, 4vw, 3rem);
}
.steps__phone{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; color:var(--gold); }
.steps__phone svg{ width:17px; height:17px; }

.faq__more{ max-width:860px; margin:1.6rem auto 0; text-align:center; font-size:.95rem; color:var(--text-soft); }
.faq__more a{
  font-weight:600; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(231,208,148,.4);
}

@media (max-width: 760px){
  .quick__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; }
}
@media (max-width: 620px){
  .quick__item{ gap:.65rem; min-height:60px; padding:.75rem .85rem; font-size:.85rem; }
  /* Lange Knopftexte duerfen hier umbrechen - sonst schieben sie die Seite breiter als den Bildschirm */
  .steps__cta .btn, .form button[type="submit"]{ width:100%; white-space:normal; text-align:center; text-wrap:balance; line-height:1.35; }
}

@media (max-width: 380px){
  .quick__item{ gap:.5rem; padding-inline:.7rem; }
  .quick__item .quick__lamp{ width:24px; height:24px; }
}

/* ---------- 19. Bewegung reduzieren / Druck ---------- */
@media (max-width: 359px){
  /* Sehr schmale Handys (u. a. iPhone SE/mini mit "Ansicht: Vergroessert"):
     sonst laeuft das Logo in den runden Anruf-Knopf */
  .brand img{ height:26px; }
  .mobile-bar a{ font-size:.76rem; letter-spacing:.03em; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}
@media print{
  .header,.mobile-nav,.mobile-bar,.to-top,.hero__scroll,.marquee,.map{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card,.form,.step{ border-color:#ccc; background:none; }
}

/* ---------- 20. Warnleuchten-Check ---------- */
:root{
  --wl-rot:#ff5b48;  --wl-rot-glow:rgba(255,91,72,.55);
  --wl-gelb:#ffb224; --wl-gelb-glow:rgba(255,178,36,.5);
  --wl-info:#e7d094; --wl-info-glow:rgba(231,208,148,.45);
  --wl-ok:#7fd49a;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Fuellung und Schrift der Symbole stehen als Attribute direkt im SVG: CSS-Regeln wie
   ".wl-sprite .f" erreichen die per <use> eingebundenen Kopien nicht. */

/* Farben wie im Armaturenbrett - rot, gelb, info - mit leichtem Nachleuchten */
.lamp--rot { --wl:var(--wl-rot);  --wl-glow:var(--wl-rot-glow); }
.lamp--gelb{ --wl:var(--wl-gelb); --wl-glow:var(--wl-gelb-glow); }
.lamp--info{ --wl:var(--wl-info); --wl-glow:var(--wl-info-glow); }

.page-head--lamps{ padding-bottom:clamp(2.2rem, 5vw, 3.2rem); }
.page-head--lamps .eyebrow{ justify-content:center; }
.page-head--lamps .eyebrow::after{
  content:""; width:34px; height:1px; background:linear-gradient(90deg, var(--gold-dim), transparent);
}
.page-head__lead{ max-width:58ch; margin:1.1rem auto 0; color:var(--text-soft); font-size:1.05rem; }
.nav a[aria-current="page"]{ color:var(--gold-strong); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.section--lamps{ padding-top:clamp(2.5rem, 5vw, 4rem); }
.lamps{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
  gap:clamp(2rem, 4vw, 3.5rem); align-items:start;
}
.lamps__picker{ display:grid; gap:1.5rem; }
.lamps__group h2{
  display:flex; align-items:center; gap:.6rem; margin:0 0 .8rem;
  font-family:var(--font-body); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.lamps__group h2::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:currentColor; box-shadow:0 0 10px currentColor;
}
.lamps__group--rot  h2{ color:#ff8b7c; }
.lamps__group--gelb h2{ color:#ffc75a; }
.lamps__group--info h2{ color:var(--gold-dim); }
.lamps__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem; }

/* Kachel = ein Symbol im dunklen Armaturenbrett */
.lamp{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem;
  min-height:108px; padding:.9rem .5rem .8rem; border-radius:14px;
  background:radial-gradient(120% 90% at 50% 0%, #17150d, #0a0905 75%);
  border:1px solid rgba(231,208,148,.1);
  color:var(--text-soft); font-size:.78rem; font-weight:600; letter-spacing:.03em;
  line-height:1.25; text-align:center;
  transition:transform .25s var(--ease), border-color .25s var(--ease),
             box-shadow .25s var(--ease), color .25s var(--ease);
}
.lamp svg{ width:42px; height:42px; color:var(--wl); filter:drop-shadow(0 0 6px var(--wl-glow)); }
.lamp:hover{ transform:translateY(-2px); border-color:var(--line-strong); color:var(--text); }
.lamp[aria-current="true"]{
  border-color:var(--wl); color:var(--gold-strong);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--wl) 18%, transparent), 0 14px 30px -18px var(--wl-glow);
}

/* Erklaerung zur gewaehlten Leuchte */
.lamp-info{
  padding:clamp(1.4rem, 3vw, 2.2rem); border-radius:var(--radius);
  border:1px solid var(--line); background:var(--card);
  scroll-margin-top:calc(var(--header-h) + 1rem);
}
.lamp-info + .lamp-info{ margin-top:1.2rem; }        /* ohne JavaScript: alle untereinander */
.is-enhanced .lamp-info{ display:none; margin-top:0; }
.is-enhanced .lamp-info.is-active{ display:block; animation:lamp-in .35s var(--ease); }
@keyframes lamp-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.lamp-info__head{
  display:flex; align-items:center; gap:1.2rem;
  margin-bottom:1.4rem; padding-bottom:1.3rem; border-bottom:1px solid var(--line);
}
.lamp-info__icon{
  flex:none; width:76px; height:76px; border-radius:18px; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 0%, #17150d, #0a0905 75%);
  border:1px solid color-mix(in srgb, var(--wl) 35%, transparent);
}
.lamp-info__icon svg{ width:50px; height:50px; color:var(--wl); filter:drop-shadow(0 0 9px var(--wl-glow)); }
.lamp-info__head > div{ min-width:0; }
.lamp-info h3{
  overflow-wrap:break-word; hyphens:manual;
  font-family:var(--font-display); font-size:clamp(1.05rem, 2vw, 1.4rem); line-height:1.2;
  letter-spacing:.05em; text-transform:uppercase; color:var(--gold-strong); margin:0 0 .55rem;
}
.lamp-info__pills{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pill{
  display:inline-flex; align-items:center; gap:.45rem; padding:.28rem .75rem;
  border:1px solid; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.pill::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:currentColor; box-shadow:0 0 8px currentColor;
}
.pill--stop{ color:#ff8b7c; background:rgba(255,91,72,.1);    border-color:rgba(255,91,72,.35); }
.pill--bald{ color:#ffc75a; background:rgba(255,178,36,.08);  border-color:rgba(255,178,36,.3); }
.pill--ok  { color:var(--wl-ok); background:rgba(127,212,154,.08); border-color:rgba(127,212,154,.3); }

.lamp-info h4{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dim); margin:1.3rem 0 .5rem;
}
.lamp-info h4:first-of-type{ margin-top:0; }
.lamp-info p{ color:var(--text-soft); font-size:.96rem; margin:0; }
.lamp-info__steps{ display:grid; gap:.55rem; }
.lamp-info__steps li{ position:relative; padding-left:1.4rem; color:var(--text); font-size:.95rem; }
.lamp-info__steps li::before{
  content:""; position:absolute; left:0; top:.72em; width:.7rem; height:1px; background:var(--gold);
}
.lamp-info .lamp-info__note, .lamp-info .lamp-info__hu{
  margin-top:1.1rem; padding:.85rem 1rem; border-radius:var(--radius-sm); font-size:.88rem;
}
.lamp-info .lamp-info__note{ background:rgba(231,208,148,.04); border:1px dashed rgba(231,208,148,.22); }
.lamp-info .lamp-info__hu{ background:rgba(231,208,148,.07); border-left:3px solid var(--gold); }
.lamp-info__hu strong, .lamp-info__us strong{ color:var(--gold-strong); }
.lamp-info__us{ margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.lamp-info__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem; }
.lamps__legal{
  margin:0; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted);
}

/* Teaser auf der Startseite: Armaturenbrett bei Nacht */
.lamp-teaser{
  padding-block:clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(55% 120% at 78% 50%, rgba(255,178,36,.07), transparent 62%),
    #0b0a06;
  border-block:1px solid var(--line);
}
.lamp-teaser__inner{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.lamp-teaser .section-lead{ margin-bottom:1.8rem; }
.lamp-teaser__panel{
  padding:clamp(1rem, 2.5vw, 1.5rem); border-radius:22px;
  background:#070604; border:1px solid rgba(231,208,148,.12);
  box-shadow:inset 0 2px 30px rgba(0,0,0,.6), 0 30px 60px -35px rgba(0,0,0,.9);
}

@media (min-width: 961px) and (min-height: 820px){
  /* Auf grossen Bildschirmen bleibt die Erklaerung beim Scrollen stehen */
  .lamps__detail{ position:sticky; top:calc(var(--header-h) + 1.2rem); }
}
@media (max-width: 960px){
  /* minmax(0, 1fr) statt 1fr: sonst druecken lange Knoepfe die Spalte ueber den Rand */
  .lamps{ grid-template-columns:minmax(0, 1fr); }
  .lamp-teaser__inner{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 620px){
  .lamp{ min-height:96px; font-size:.74rem; }
  .lamp svg{ width:38px; height:38px; }
  .lamp-info__head{ gap:1rem; }
  .lamp-info__icon{ width:64px; height:64px; }
  .lamp-info__icon svg{ width:42px; height:42px; }
  .lamp-info__actions .btn{ width:100%; white-space:normal; text-align:center; }
}

/* Vorbelegtes Nachrichtenfeld kurz hervorheben */
.field.is-prefilled textarea{
  border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(231,208,148,.14);
}

/* ---------- 21. Saison-Hinweis im Hero und Seite Reifenwechsel ---------- */
/* Winterreifen-Hinweis: sichtbar nur vom 1.10. bis 15.12. (main.js, Abschnitt 13) */
.hero__season{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 auto .9rem; padding:.4rem .95rem;
  border-radius:999px; border:1px solid rgba(255,178,36,.38); background:rgba(255,178,36,.08);
  min-height:44px; font-size:.875rem; font-weight:600; letter-spacing:.01em; line-height:1.3; color:var(--gold-strong);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.hero__season:hover{ color:var(--gold-strong); border-color:rgba(255,178,36,.65); background:rgba(255,178,36,.14); }
.hero__season[hidden]{ display:none; }
/* Hinweis und Adresszeile teilen sich am Rechner eine Zeile - so rutschen die
   Knoepfe nicht aus dem ersten Bildschirm. Auf dem Handy brechen sie um. */
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.45rem 1.1rem; margin:0 auto .9rem;
}
.hero__meta .hero__season, .hero__meta .hero__place{ margin:0; }
.hero__season-punkt{
  flex:none; width:8px; height:8px; border-radius:50%;
  background:#ffb224; box-shadow:0 0 8px rgba(255,178,36,.75);
}
.page-head__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.8rem; }
.prose ol{ padding-left:1.3rem; margin:0 0 1.1em; display:grid; gap:.4rem; }
.prose a, .faq__body a, .lamp-info__us a:not(.btn), .lamp-info__note a{
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(231,208,148,.45);
}
@media (max-width: 620px){
  .hero__season{ font-size:.875rem; padding:.45rem .9rem; }
  .page-head__actions .btn{ width:100%; }
}
/* Leistungsseiten: verlinkte Kartentitel auf der Startseite, Querverweise */
.card h3 a{ color:inherit; }
.card h3 a:hover{ color:var(--gold); }
.prose .leistungen-weitere{ margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.92rem; }
.cta-band p a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(231,208,148,.45); }

/* ---------- 22. Umbau 11/2026: Klartext-Startseite ----------
   Auftragszettel, Leistungsliste, Rueckruf-Zeilen, Direktknoepfe.
   Die alten Bloecke fuer Laufband, .why, .steps, .card und .lamp-teaser
   duerfen stehen bleiben (Unterseiten nutzen .card/.cta-band teils weiter). */
.nowrap{ white-space:nowrap; }
.hero__claim{ margin:0 auto .5rem; max-width:32ch; font-family:var(--font-body); font-weight:600;
  font-size:clamp(1.15rem, 2.3vw, 1.45rem); line-height:1.35; color:var(--gold-strong); text-wrap:balance; }
.hero__rueckruf{ margin:1rem auto 0; max-width:46ch; font-size:.94rem; color:var(--text-soft); }
.hero__rueckruf a, .page-head__direkt a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.hero__trust a.trust-chip{ min-height:44px; color:var(--text-soft); }
.hero__trust a.trust-chip:hover, .hero__trust a.trust-chip:focus-visible{ color:var(--gold-strong); border-color:var(--line-strong); }
.hero__place--unten{ margin:1.1rem auto 0; }
.quick__lamps{ max-width:620px; margin:1.6rem auto 0; text-align:center; }
.quick__lamps-text{ margin:0 0 .9rem; color:var(--text-soft); font-size:.97rem; }
.quick__lamps-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 1.4rem; margin:.4rem 0 0; }
.quick__lamps-link, .auftrag__tel, .leistung__link{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.auftrag{ list-style:none; padding:0; max-width:820px; margin:0 auto; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--card); }
.auftrag__schritt{ display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:1rem; padding:1.3rem clamp(1rem,3vw,1.8rem); }
.auftrag__schritt + .auftrag__schritt{ border-top:1px dashed var(--line-strong); }
.auftrag__nr{ display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid var(--line-strong); border-radius:8px; font-weight:600; color:var(--gold); }
.auftrag h3, .leistung h3{ margin:0 0 .3rem; font-family:var(--font-body); font-size:1.05rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--gold-strong); }
.auftrag p, .leistung p{ margin:0; color:var(--text-soft); font-size:.96rem; }
.stufen{ display:grid; gap:.5rem; margin:.8rem 0 0; }
.stufen li{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; color:var(--text-soft); font-size:.95rem; }
.stufen .pill{ font-size:.875rem; letter-spacing:.01em; text-transform:none; }
.pill--info{ color:var(--gold); background:rgba(231,208,148,.08); border-color:rgba(231,208,148,.3); }
.auftrag__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.6rem; margin-top:2rem; }
.leistungen-liste{ max-width:900px; margin:0 auto; border-top:1px solid var(--line); }
.leistung{ display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:.4rem 1rem; align-items:start; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.leistung__icon{ width:24px; height:24px; margin-top:.25rem; color:var(--gold); }
.leistung h3 a{ color:inherit; }
.leistung h3 a:hover{ color:var(--gold); }
.leistung__link{ align-self:center; font-size:.9rem; white-space:nowrap; }
.leistungen__schluss{ max-width:900px; margin:1.4rem auto 0; color:var(--text-soft); }
.leistungen__schluss a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.kontakt__direkt{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.6rem; margin:0 0 1.6rem; }
.kontakt__direkt .btn{ min-height:48px; white-space:normal; }
.optional{ font-weight:400; color:var(--muted); }
.form__privacy{ margin:0 0 .9rem; font-size:.85rem; color:var(--muted); text-align:center; }
.page-head__direkt{ max-width:58ch; margin:1.2rem auto 0; font-size:.94rem; color:var(--text-soft); }
.map__pulse{ display:none; }
/* Datenschutz-Haekchen: sichtbare Fehlermeldung (bis es durch einen Hinweis ersetzt wird) */
.checkbox{ flex-wrap:wrap; }
.checkbox .field__error{ flex-basis:100%; padding-left:calc(18px + .7rem); }
.checkbox > label{ flex:1 1 0%; min-width:0; }   /* Text bleibt neben dem Kaestchen, nur die Fehlermeldung bricht um */
.checkbox.field--error label{ color:#e5a294; }
/* Grossbuchstaben nur noch in Cinzel-Ueberschriften */
.form__next-title, .info .info__route, .footer h3, .footer h4, .lamps__group h2, .lamp-info h4{
  font-size:.875rem; letter-spacing:.02em; text-transform:none; }
.pill{ font-size:.8rem; letter-spacing:.01em; text-transform:none; }
.mobile-nav .btn{ letter-spacing:.01em; text-transform:none; }   /* sonst setzt ".mobile-nav a" die Knoepfe in Versalien */
@media (max-width:760px){
  .mobile-bar a{ font-size:.9rem; letter-spacing:.01em; text-transform:none; }
  .to-top{ display:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}
@media (max-width:620px){
  .hero{ padding-top:calc(var(--header-h) + .75rem); }
  .hero__brand{ margin-bottom:0; }
  .hero__logo{ display:none; }
  .hero__place{ letter-spacing:.02em; }
  .hero__lead{ margin-bottom:1.1rem; }
  .hero__actions .btn{ --btn-pad:.85rem 1.2rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand, .footer__grid > div:last-child{ grid-column:1 / -1; }  /* Kontakt-Spalte voll breit, sonst passt die E-Mail-Adresse nicht */
  .leistung{ grid-template-columns:1.6rem minmax(0,1fr); }
  .leistung__link{ grid-column:2; align-self:start; }
  .kontakt__direkt{ grid-template-columns:1fr; }
}
@media (max-width:359px){
  .mobile-bar a{ font-size:.8rem; }
}

/* ---------- 23. Moderne Ueberschriften (11/2026) ----------
   Zum kantigen PR-Logo: Inter in kraeftigen Schnitten statt Cinzel-Versalien.
   Ueberschreibt die Angaben weiter oben - die alten Werte bleiben als Rueckweg stehen. */
.section-title, .page-head h1, .cta-band h2, .prose h2, .card h3, .step h3, .lamp-info h3, .form__done-title{
  font-weight:800; letter-spacing:-.02em; text-transform:none; line-height:1.12;
}
.section-title{ font-size:clamp(1.9rem, 3.6vw, 3rem); }
.page-head h1{ font-size:clamp(2rem, 4.6vw, 3.2rem); }
.cta-band h2{ font-size:clamp(1.6rem, 3.4vw, 2.5rem); }
.prose h2{ font-size:1.35rem; letter-spacing:-.01em; }
.card h3, .step h3{ font-size:1.12rem; letter-spacing:-.005em; }
.lamp-info h3{ letter-spacing:-.01em; }
.mobile-nav a{ font-weight:600; font-size:1.1rem; letter-spacing:.01em; text-transform:none; }
.marquee span{ font-weight:600; letter-spacing:.18em; }
.footer__claim{ font-weight:500; letter-spacing:.3em; }
.why__num{ font-weight:800; }

/* ---------- 24. Hero 11/2026: zwei Spalten + Fahrzeugschein-Karte ----------
   Links Logo, Aussage und Knoepfe, rechts die Karte; unter 960 px untereinander.
   Hintergrund: Steinbild aus Abschnitt 7. */
.hero__grid{
  display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(330px, .92fr);
  gap:clamp(2rem, 4.5vw, 4.5rem); align-items:center; width:100%; text-align:left;
}
.hero__text{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.hero__text .hero__brand{ align-items:flex-start; margin-bottom:clamp(1.1rem, 2.2vw, 1.6rem); }
.hero__text .hero__logo{ width:clamp(190px, 16vw, 230px); }
.hero__text .hero__meta{ justify-content:flex-start; margin:0 0 1rem; }
.hero__kicker{
  display:flex; align-items:center; gap:.75rem; margin:0 0 .7rem;
  font-size:.76rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.hero__kicker::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); }
.hero h1{
  font-weight:800; font-size:clamp(2.3rem, 5vw, 4.1rem); line-height:1.02;
  letter-spacing:-.035em; text-transform:none; color:var(--text); margin:0 0 .4em;
}
.hero__h1-gold{ display:block; color:var(--gold); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__h1-gold{
    background:linear-gradient(95deg, #b39a5e, #f6ecca 40%, #e7d094 62%, #a8945c);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.hero__text .hero__claim{ margin:0 0 .55rem; max-width:none; }
.hero__text .hero__lead{ margin:0 0 1.9rem; }
.hero__text .hero__actions{ justify-content:flex-start; }
.hero__text .hero__rueckruf{ margin:1.1rem 0 0; }
.hero__unten{ width:100%; display:flex; flex-direction:column; align-items:center; }

.schein{
  position:relative; width:100%; padding:clamp(1.15rem, 2.2vw, 1.6rem);
  border:1px solid var(--line-strong); border-radius:22px;
  background:linear-gradient(180deg, rgba(30,28,16,.86), rgba(14,13,8,.92));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.85), 0 8px 24px -8px rgba(0,0,0,.5);
  text-align:left;
}
.schein__titel{
  display:flex; align-items:center; gap:.6rem; margin:0 0 .45rem;
  font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.015em;
  text-transform:none; color:var(--text);
}
.schein__titel svg{ width:22px; height:22px; color:var(--gold); flex:none; }
.schein__text{ margin:0 0 1rem; font-size:.92rem; color:var(--text-soft); }

/* Papier mit Sicherheitsmuster: Rosette oben rechts, feine Wellenlinien, hellgruener Grund */
.schein__papier{
  border-radius:12px; padding:.8rem .95rem .85rem; color:#21301f;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%233f6b45' stroke-opacity='.15' stroke-width='.55'%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(0 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(12 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(24 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(36 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(48 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(60 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(72 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(84 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(96 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(108 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(120 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(132 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(144 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(156 70 70)'/%3E%3Cellipse cx='70' cy='70' rx='62' ry='20' transform='rotate(168 70 70)'/%3E%3Ccircle cx='70' cy='70' r='10'/%3E%3Ccircle cx='70' cy='70' r='24'/%3E%3Ccircle cx='70' cy='70' r='40'/%3E%3Ccircle cx='70' cy='70' r='66'/%3E%3C/svg%3E") right -34px top -40px / 150px 150px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' fill='none' stroke='%233f6b45' stroke-opacity='.17' stroke-width='.6'%3E%3Cpath d='M0 4.0L6 5.8L12 6.9L18 6.9L24 5.8L30 4.0L36 2.2L42 1.1L48 1.1L54 2.2L60 4.0L66 5.8L72 6.9L78 6.9L84 5.8L90 4.0L96 2.2L102 1.1L108 1.1L114 2.2L120 4.0L126 5.8L132 6.9L138 6.9L144 5.8L150 4.0L156 2.2L162 1.1L168 1.1L174 2.2L180 4.0L186 5.8L192 6.9L198 6.9L204 5.8L210 4.0L216 2.2L222 1.1L228 1.1L234 2.2L240 4.0'/%3E%3Cpath d='M0 14.3L6 15.0L12 14.5L18 13.0L24 11.2L30 9.7L36 9.0L42 9.5L48 11.0L54 12.8L60 14.3L66 15.0L72 14.5L78 13.0L84 11.2L90 9.7L96 9.0L102 9.5L108 11.0L114 12.8L120 14.3L126 15.0L132 14.5L138 13.0L144 11.2L150 9.7L156 9.0L162 9.5L168 11.0L174 12.8L180 14.3L186 15.0L192 14.5L198 13.0L204 11.2L210 9.7L216 9.0L222 9.5L228 11.0L234 12.8L240 14.3'/%3E%3Cpath d='M0 22.9L6 22.0L12 20.3L18 18.4L24 17.2L30 17.1L36 18.0L42 19.7L48 21.6L54 22.8L60 22.9L66 22.0L72 20.3L78 18.4L84 17.2L90 17.1L96 18.0L102 19.7L108 21.6L114 22.8L120 22.9L126 22.0L132 20.3L138 18.4L144 17.2L150 17.1L156 18.0L162 19.7L168 21.6L174 22.8L180 22.9L186 22.0L192 20.3L198 18.4L204 17.2L210 17.1L216 18.0L222 19.7L228 21.6L234 22.8L240 22.9'/%3E%3Cpath d='M0 29.3L6 27.4L12 25.8L18 25.0L24 25.4L30 26.7L36 28.6L42 30.2L48 31.0L54 30.6L60 29.3L66 27.4L72 25.8L78 25.0L84 25.4L90 26.7L96 28.6L102 30.2L108 31.0L114 30.6L120 29.3L126 27.4L132 25.8L138 25.0L144 25.4L150 26.7L156 28.6L162 30.2L168 31.0L174 30.6L180 29.3L186 27.4L192 25.8L198 25.0L204 25.4L210 26.7L216 28.6L222 30.2L228 31.0L234 30.6L240 29.3'/%3E%3Cpath d='M0 34.7L6 33.3L12 33.0L18 33.9L24 35.5L30 37.3L36 38.7L42 39.0L48 38.1L54 36.5L60 34.7L66 33.3L72 33.0L78 33.9L84 35.5L90 37.3L96 38.7L102 39.0L108 38.1L114 36.5L120 34.7L126 33.3L132 33.0L138 33.9L144 35.5L150 37.3L156 38.7L162 39.0L168 38.1L174 36.5L180 34.7L186 33.3L192 33.0L198 33.9L204 35.5L210 37.3L216 38.7L222 39.0L228 38.1L234 36.5L240 34.7'/%3E%3Cpath d='M0 41.1L6 41.3L12 42.5L18 44.3L24 46.0L30 46.9L36 46.7L42 45.5L48 43.7L54 42.0L60 41.1L66 41.3L72 42.5L78 44.3L84 46.0L90 46.9L96 46.7L102 45.5L108 43.7L114 42.0L120 41.1L126 41.3L132 42.5L138 44.3L144 46.0L150 46.9L156 46.7L162 45.5L168 43.7L174 42.0L180 41.1L186 41.3L192 42.5L198 44.3L204 46.0L210 46.9L216 46.7L222 45.5L228 43.7L234 42.0L240 41.1'/%3E%3C/svg%3E") 0 0 / 240px 48px repeat,
    radial-gradient(120% 90% at 0% 0%, #f3f7ec, #dde8d1 72%);
  box-shadow:inset 0 0 0 1px rgba(40,72,40,.22), 0 14px 34px -14px rgba(0,0,0,.75);
}
.schein__kopf{
  display:flex; align-items:center; gap:.5rem; margin:0 0 .55rem; padding-bottom:.5rem;
  border-bottom:1px solid rgba(40,72,40,.22);
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#36513a;
}
.schein__d{
  display:grid; place-items:center; width:20px; height:20px; border-radius:4px;
  background:#1e3f99; color:#ffd84a; font-size:.7rem; font-weight:800; letter-spacing:0;
}
.schein__zeile{
  display:grid; grid-template-columns:2.2rem 1fr; align-items:center; gap:.5rem;
  min-height:1.7rem; border-bottom:1px dotted rgba(40,72,40,.28);
}
.schein__zeile--ab{ grid-template-columns:1.2rem 1fr 1.2rem 1fr; border-bottom-style:dotted; }
.schein__zeile--p{ grid-template-columns:auto 1fr auto 1fr auto 1.2fr; border-bottom:0; }
.schein__nrklein{ font-size:.6rem; font-weight:800; color:#4f644f; letter-spacing:.02em; }
.schein__wert{
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-family:"Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size:.8rem; font-weight:700; letter-spacing:.08em; color:#1b2a1b;
}
.schein__wert:empty::before{
  content:""; display:block; height:5px; max-width:9rem; border-radius:3px; background:rgba(40,72,40,.16);
}

/* Lupe ueber den Feldern 2.1/2.2: Glas, Metallring, Griff unten rechts */
.schein__lupe{
  position:relative; margin:.75rem -.35rem .8rem; padding:.6rem .6rem .5rem; border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(236,243,230,.42));
  box-shadow:0 12px 26px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9);
}
.schein__lupe::before{
  content:""; position:absolute; inset:-6px; border-radius:24px; padding:6px; pointer-events:none;
  background:linear-gradient(135deg, #fdfdfd, #a4aab2 32%, #f2f3f5 52%, #7f858e 78%, #d9dce1);
  -webkit-mask:linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.schein__lupe::after{
  content:""; position:absolute; right:-24px; bottom:-20px; width:48px; height:13px; border-radius:8px;
  background:linear-gradient(180deg, #4a4e55, #121316); transform:rotate(40deg);
  box-shadow:0 5px 10px rgba(0,0,0,.5); pointer-events:none;
}
.schein__felder{ display:grid; grid-template-columns:1fr 1fr; gap:.15rem .6rem; }
.schein__feld{
  padding:.4rem .5rem .35rem; border-radius:12px; background:rgba(251,253,247,.92);
  box-shadow:inset 0 0 0 1px rgba(40,72,40,.28);
}
.schein__nr{
  display:inline-block; padding:.08rem .38rem; border-radius:4px;
  background:#2e4a31; color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.02em;
}
.schein__feld input{
  display:block; width:100%; margin:.15rem 0 0; padding:.1rem 0; border:0; border-radius:6px;
  background:transparent; color:#101b10; text-align:center;
  font-family:"Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size:clamp(1.45rem, 2.4vw, 1.85rem); font-weight:800; letter-spacing:.28em; text-indent:.28em;
}
.schein__feld input::placeholder{ color:rgba(16,27,16,.25); }
.schein__feld input:focus{ outline:2px solid #b8913f; outline-offset:2px; }
.schein__hinweis{ display:block; font-size:.68rem; line-height:1.3; text-align:center; color:#41553f; padding-top:.2rem; }

/* Ergebnis unter dem Schein: erkannt (gruen) oder nicht gefunden */
.schein__erkannt{
  display:flex; align-items:flex-start; gap:.8rem; margin:.95rem 0 0; padding:.8rem .9rem;
  border:1px solid rgba(74,180,120,.35); border-radius:14px; background:rgba(22,60,42,.55);
}
.schein__erkannt[hidden]{ display:none; }
.schein__haken{
  flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:rgba(74,180,120,.18); color:#6fdc9c; font-size:1.15rem; font-weight:800;
}
.schein__haken::before{ content:"\2713"; }
.schein__erkannt p{ margin:0; }
.schein__erkannt-kopf{ font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#9fb6a7; }
.schein__erkannt-titel{ margin-top:.15rem !important; font-size:1.05rem; font-weight:800; line-height:1.25; color:var(--text); }
.schein__erkannt-daten{ margin-top:.2rem !important; font-size:.86rem; color:var(--text-soft); }
.schein__erkannt.is-leer{ border-color:rgba(240,165,150,.35); background:rgba(70,30,22,.45); }
.schein__erkannt.is-leer .schein__haken{ background:rgba(240,165,150,.16); color:#f0a596; }
.schein__erkannt.is-leer .schein__haken::before{ content:"!"; }

.schein__fehler{ margin:.75rem 0 0; font-size:.86rem; color:#f0a596; }
.schein__knopf{ width:100%; justify-content:center; margin-top:1rem; }
.schein__klein{ margin:.7rem 0 0; font-size:.78rem; line-height:1.45; color:var(--muted); }
.schein__hilfe{ margin-top:.4rem; font-size:.85rem; }
.schein__hilfe summary{ display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--gold); }
.schein__hilfe p{ margin:0; color:var(--text-soft); font-size:.85rem; }

@media (max-width: 960px){
  .hero__grid{ grid-template-columns:1fr; text-align:center; }
  .hero__text{ align-items:center; }
  .hero__text .hero__brand{ align-items:center; }
  .hero__text .hero__meta, .hero__text .hero__actions{ justify-content:center; }
  .hero__kicker{ justify-content:center; }
  .hero__kicker::after{ content:""; width:34px; height:1px; background:linear-gradient(90deg, var(--gold), transparent); }
  .hero__text .hero__claim, .hero__text .hero__lead, .hero__text .hero__rueckruf{ margin-inline:auto; }
  .schein{ max-width:480px; margin-inline:auto; }
}
@media (max-width: 620px){
  .hero h1{ font-size:clamp(2rem, 9.4vw, 2.6rem); }
  .hero__kicker{ font-size:.7rem; letter-spacing:.2em; gap:.6rem; }   /* sonst bricht der Spruch auf dem Handy um */
  .hero__kicker::before, .hero__kicker::after{ width:24px; }
  .schein__feld input{ font-size:1.45rem; letter-spacing:.22em; text-indent:.22em; }
}