/* ============================================================
   REIFEN TREFF — Stand 2
   Aufbau und Designsprache nach dem Vorbild allreifen.de:
   Oswald-Versalien + Roboto, Schwarz/Hellgrau/Signalfarbe,
   Karten die in den Hero ragen, Verfügbarkeits-Balken.
   Signalfarbe hier: das Rot der eigenen Hallenfassade.
   ============================================================ */

@font-face{font-family:'Oswald';src:url('fonts/oswald-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/oswald-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/oswald-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Roboto';src:url('fonts/roboto-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('fonts/roboto-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Roboto';src:url('fonts/roboto-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --dunkel:#171717;
  --dunkel-2:#1F1F1F;
  --hell:#F2F2F2;
  --hell-2:#E7E7E7;
  --weiss:#fff;
  --text:#32333E;
  --text-leise:#5A5F66;
  --rot:#C8161D;
  --rot-tief:#A21015;
  --rot-hell:#E4141B;
  --rot-auf-dunkel:#FF3A2E;   /* Rot mit genug Kontrast auf #171717 (5,1:1) */
  --linie:rgba(255,255,255,.14);
  --linie-hell:#DCDCDC;
  --gruen:#237F52;
  --radius:8px;
  --breite:1240px;
  --rand:clamp(1.1rem,4vw,2.5rem);
  --titel:'Oswald','Oswald Fallback',Impact,sans-serif;
  --text-schrift:'Roboto',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--weiss);color:var(--text);
  font-family:var(--text-schrift);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
h1,h2,h3,h4{
  margin:0;font-family:var(--titel);font-weight:400;text-transform:uppercase;
  line-height:1.06;letter-spacing:.005em;
}
:focus-visible{outline:3px solid var(--rot-hell);outline-offset:3px}
::selection{background:var(--rot);color:#fff}
.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}
.skip{position:absolute;left:50%;top:-100px;transform:translateX(-50%);background:var(--rot);color:#fff;padding:.75rem 1.25rem;z-index:200;font-weight:700}
.skip:focus{top:.75rem}

.huelle{width:min(100% - var(--rand)*2,var(--breite));margin-inline:auto}
.abschnitt{padding:clamp(3.5rem,7vw,6rem) 0}

/* ---------- Kopfzeile ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:90;background:var(--dunkel);border-bottom:1px solid transparent;transition:border-color .3s}
.kopf.geklebt{border-bottom-color:var(--linie)}
.kopf__innen{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);height:clamp(62px,6vw,74px)}
.marke{display:flex;align-items:center;gap:.6rem;margin-right:auto;flex:none;position:relative;z-index:3;color:#fff}
.marke__zeichen{width:34px;height:34px;border-radius:50%;background:var(--rot);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2)}
.marke__zeichen svg{width:20px;height:20px;color:#fff}
.marke__name{font-family:var(--titel);font-size:1.32rem;letter-spacing:.02em;line-height:1;color:#fff}
.marke__ort{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{padding:.5rem .75rem;font-size:.94rem;color:rgba(255,255,255,.86);transition:color .2s}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"],
.nav a[data-hier="true"]{color:var(--rot-auf-dunkel)}
/* Finger: kein hover — deshalb färbt sich der Punkt beim Antippen */
.nav a:active{color:var(--rot-auf-dunkel)}
@media (hover:none){.nav a{transition:color .1s}}
.kopf__tel{display:none;font-family:var(--titel);font-size:1.22rem;color:#fff;letter-spacing:.01em;white-space:nowrap;padding-inline:.5rem}
@media (min-width:1100px){.kopf__tel{display:block}}
.burger{display:grid;place-items:center;width:42px;height:42px;background:transparent;border:1px solid var(--linie);border-radius:4px;cursor:pointer;color:#fff;position:relative;z-index:3}
.burger svg{width:22px;height:22px;grid-area:1/1}
.burger .zu{display:none}
.burger[aria-expanded="true"] .auf{display:none}
.burger[aria-expanded="true"] .zu{display:block}
@media (min-width:1000px){.burger{display:none}}
@media (max-width:999px){
  .nav{position:fixed;inset:0;z-index:1;background:var(--dunkel);flex-direction:column;justify-content:center;
    gap:.3rem;padding:clamp(62px,6vw,74px) var(--rand) 2rem;transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.7,0,.2,1);overflow-y:auto}
  .nav[data-offen="true"]{transform:translateY(0)}
  .nav a{font-family:var(--titel);font-size:1.7rem;padding:.55rem}
  .nav__extra{display:flex;flex-direction:column;gap:.7rem;margin-top:1.5rem;width:min(90vw,340px)}
}
.nav__extra{display:none}
@media (max-width:999px){.nav__extra{display:flex}}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--rot);color:#fff;border:0;border-radius:6px;cursor:pointer;
  padding:.72rem 1.25rem;font-size:1.02rem;font-weight:500;line-height:1.2;
  transition:background .2s,transform .15s;text-align:center;
}
.knopf:hover{background:var(--rot-tief);transform:translateY(-1px)}
.knopf svg{width:19px;height:19px;flex:none}
.knopf--gross{padding:.95rem 1.7rem;font-size:1.1rem}
.knopf--weiss{background:#fff;color:var(--dunkel)}
.knopf--weiss:hover{background:var(--hell)}
.knopf--linie{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.knopf--linie:hover{background:rgba(255,255,255,.1)}
/* Zweitrangige Knöpfe im Dialog (Zurück, Schließen, Kopieren).
   Fehlte bisher komplett — dadurch sahen sie aus wie der rote Hauptknopf. */
.knopf--hell{background:var(--hell);color:var(--text)}
.knopf--hell:hover{background:var(--hell-2);color:var(--dunkel)}
.knopf--dunkel{background:var(--dunkel)}
.knopf--dunkel:hover{background:#000}
.knopf--voll{width:100%}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--dunkel);color:#fff;padding-top:clamp(62px,6vw,74px);overflow:hidden}
.hero__bild{position:absolute;inset:0;z-index:0}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:center 52%;opacity:.82}
.hero__bild::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(78% 62% at 50% 44%,rgba(23,23,23,.82) 0%,rgba(23,23,23,.46) 58%,rgba(23,23,23,.12) 100%),
    linear-gradient(180deg,rgba(23,23,23,.78) 0%,rgba(23,23,23,.05) 26%,rgba(23,23,23,.72) 100%);
}
.hero__innen{
  position:relative;z-index:1;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(2.6rem,5.5vw,4.2rem) 0 clamp(6.5rem,11vw,9.5rem);
}
.hero__ort{
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin:0 0 1.1rem;
}
.hero h1{
  font-weight:400;font-size:clamp(2.2rem,1.5rem + 2.4vw,3.4rem);
  letter-spacing:.06em;line-height:1.05;margin:0;
}
.hero__satz{
  margin:.85rem 0 0;max-width:44ch;font-size:clamp(1rem,.97rem + .25vw,1.16rem);
  color:rgba(255,255,255,.94);line-height:1.55;
}
.hero__aktion{margin-top:1.8rem;justify-content:center}
.hero__note{
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  margin:1.4rem 0 0;font-size:.9rem;color:rgba(255,255,255,.85);
}
.hero__note .sterne svg{width:15px;height:15px}
.hero__quelle{
  position:absolute;right:clamp(.8rem,3vw,1.6rem);top:calc(clamp(62px,6vw,74px) + .7rem);z-index:2;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0;
}

/* Karten, die in den Hero ragen */
.karten{
  display:grid;gap:1.1rem;grid-template-columns:1fr;
  margin-top:clamp(-5.5rem,-8vw,-8rem);position:relative;z-index:2;
}
@media (min-width:760px){.karten{grid-template-columns:repeat(3,1fr)}}
.karte{
  background:var(--weiss);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.55);display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.karte:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(0,0,0,.6)}
.karte__text{padding:clamp(1.25rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.karte h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem)}
.karte p{margin:0;color:var(--text-leise);font-size:.98rem}
.karte__preis{margin-top:auto;padding-top:.4rem;font-family:var(--titel);font-size:1.25rem;color:var(--rot)}
.karte__preis small{font-family:var(--text-schrift);font-size:.78rem;color:var(--text-leise);text-transform:none;margin-left:.4rem}
.karte img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center}

/* ---------- Verfügbarkeits-Balken ---------- */
.balken{
  position:relative;overflow:hidden;background:var(--rot);border-radius:var(--radius);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  padding:clamp(1.1rem,2.5vw,1.5rem) clamp(1.2rem,3vw,2rem);margin-top:clamp(2.5rem,5vw,3.5rem);
}
.balken__bild{position:absolute;right:0;top:0;bottom:0;width:38%;z-index:0;opacity:.32}
.balken__bild img{width:100%;height:100%;object-fit:cover}
.balken__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--rot),rgba(200,22,29,.1))}
.balken__status{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid rgba(255,255,255,.55);border-radius:6px;padding:.6rem 1rem;
  color:#fff;font-weight:500;background:rgba(0,0,0,.12);
}
.punkt{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);flex:none}
.punkt--an{background:#5BE08C;box-shadow:0 0 0 0 rgba(91,224,140,.7);animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(91,224,140,0)}100%{box-shadow:0 0 0 0 rgba(91,224,140,0)}}
.balken .knopf{position:relative;z-index:1;margin-left:auto}

/* ---------- Abschnittskopf ---------- */
.kopfzeile{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.kopfzeile h2{font-size:clamp(2rem,1.2rem + 3vw,3.4rem)}
.kopfzeile p{margin:.9rem 0 0;max-width:62ch;color:var(--text-leise)}
.abschnitt--dunkel .kopfzeile p{color:rgba(255,255,255,.75)}

/* ---------- Fakten-Bento ---------- */
.bento{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.bento{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.15fr)}}
.fakt{background:var(--hell);border-radius:var(--radius);padding:clamp(1.1rem,2.2vw,1.5rem)}
.fakt h3{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);color:var(--rot)}
.fakt p{margin:.5rem 0 0;font-size:.95rem;color:var(--text-leise)}
.fakt--foto{grid-row:span 3;position:relative;padding:0;overflow:hidden;background:var(--dunkel);min-height:260px}
.fakt--foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.bewertung{
  position:absolute;left:1rem;bottom:1rem;right:1rem;z-index:1;
  background:rgba(255,255,255,.95);border-radius:6px;padding:.7rem .9rem;
  display:flex;align-items:center;gap:.7rem;
}
.bewertung__logo{font-family:var(--titel);font-size:1.15rem;letter-spacing:.02em;color:var(--text)}
.sterne{display:flex;gap:2px;color:#FFC531}
.sterne svg{width:16px;height:16px}
.bewertung__zahl{font-family:var(--titel);font-size:1.5rem;line-height:1;color:var(--text)}
.bewertung__zahl small{font-family:var(--text-schrift);font-size:.8rem;color:var(--text-leise)}
@media (max-width:1039px){.fakt--foto{grid-row:auto;min-height:300px}}

/* ---------- Dunkler Bildabschnitt ---------- */
.abschnitt--dunkel{position:relative;background:var(--dunkel);color:#fff;overflow:hidden}
.abschnitt--dunkel .huelle{position:relative;z-index:1}
.abschnitt__bild{position:absolute;inset:0;z-index:0}
.abschnitt__bild img{width:100%;height:100%;object-fit:cover;opacity:.42}
.abschnitt__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dunkel) 25%,rgba(23,23,23,.55) 75%)}
.haken{display:grid;gap:1.1rem 2rem;grid-template-columns:1fr}
@media (min-width:620px){.haken{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.haken{grid-template-columns:repeat(3,1fr)}}
.haken li{display:flex;gap:.8rem;align-items:flex-start;font-weight:500;font-size:1.02rem}
.haken svg{width:24px;height:24px;color:var(--rot-hell);flex:none;margin-top:1px}
.haken small{display:block;font-weight:400;font-size:.88rem;color:rgba(255,255,255,.68);margin-top:.15rem}

/* ---------- Preisrechner ---------- */
.rechner{background:var(--hell)}
.rechner__grid{display:grid;gap:clamp(1.4rem,3vw,2.2rem);grid-template-columns:1fr}
@media (min-width:960px){.rechner__grid{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:start}}
.posten{display:grid;gap:.6rem}
.posten__zeile{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;
  background:#fff;border:1px solid var(--linie-hell);border-radius:var(--radius);padding:.85rem 1rem;
  transition:border-color .2s,box-shadow .2s;
}
.posten__zeile[data-aktiv="true"]{border-color:var(--rot);box-shadow:0 8px 24px -18px rgba(200,22,29,.9)}
.posten__icon{width:38px;height:38px;border-radius:6px;background:var(--hell);display:grid;place-items:center;flex:none;color:var(--dunkel)}
.posten__icon svg{width:21px;height:21px}
.posten__zeile[data-aktiv="true"] .posten__icon{background:var(--rot);color:#fff}
.posten__name{font-weight:500;font-size:1rem;line-height:1.3}
.posten__name small{display:block;font-weight:400;color:var(--text-leise);font-size:.85rem}
.posten__preis{font-family:var(--titel);font-size:1.1rem;white-space:nowrap}
.zaehler{display:flex;align-items:center;gap:.1rem;background:var(--hell);border-radius:100px;padding:3px}
.zaehler button{width:32px;height:32px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--dunkel);transition:background .2s,color .2s}
.zaehler button:hover:not(:disabled){background:var(--dunkel);color:#fff}
.zaehler button:disabled{opacity:.3;cursor:not-allowed}
.zaehler button svg{width:16px;height:16px}
.zaehler output{width:28px;text-align:center;font-family:var(--titel);font-size:1.05rem}
@media (max-width:560px){
  .posten__zeile{grid-template-columns:38px 1fr auto;grid-template-areas:"i n n" "p p z";gap:.7rem .8rem}
  .posten__icon{grid-area:i}.posten__name{grid-area:n}.posten__preis{grid-area:p;align-self:center}
  .zaehler{grid-area:z;justify-self:end}
}
.zoll{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
.zoll input{position:absolute;opacity:0;width:0;height:0}
.zoll label{padding:.5rem .9rem;border:1px solid var(--linie-hell);border-radius:100px;background:#fff;cursor:pointer;font-size:.94rem;transition:.2s}
.zoll input:checked + label{background:var(--dunkel);color:#fff;border-color:var(--dunkel)}
.zoll input:focus-visible + label{outline:3px solid var(--rot);outline-offset:2px}
.gruppentitel{font-family:var(--titel);font-size:1.05rem;color:var(--text-leise);margin:1.6rem 0 .5rem}
.gruppentitel:first-of-type{margin-top:0}
.summe{position:sticky;top:96px;background:var(--dunkel);color:#fff;border-radius:var(--radius);padding:clamp(1.3rem,2.5vw,1.8rem);overflow:hidden}
.summe__liste{display:grid;gap:.5rem;margin:1rem 0;font-size:.95rem;min-height:2.4rem}
.summe__zeile{display:flex;justify-content:space-between;gap:1rem;color:rgba(255,255,255,.8)}
.summe__zeile span:last-child{color:#fff;white-space:nowrap;font-weight:500}
.summe__leer{color:rgba(255,255,255,.5);font-size:.92rem;margin:0}
.summe__strich{height:1px;background:rgba(255,255,255,.16);margin:.9rem 0}
.summe__gesamt{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.summe__gesamt b{font-family:var(--titel);font-weight:500;font-size:clamp(1.9rem,1.5rem + 1.3vw,2.6rem);line-height:1}
.summe__hinweis{font-size:.82rem;color:rgba(255,255,255,.62);line-height:1.55;margin:1rem 0 0}

/* ---------- Zusatzleistungen ---------- */
.zusatz{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:820px){.zusatz{grid-template-columns:repeat(2,1fr)}}
.zusatz article{background:var(--hell);border-radius:var(--radius);padding:clamp(1.3rem,2.5vw,1.9rem);display:flex;flex-direction:column;gap:.7rem}
.zusatz h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.zusatz p{margin:0;color:var(--text-leise)}
.zusatz__preis{margin-top:auto;padding-top:.6rem;font-family:var(--titel);font-size:1.35rem;color:var(--rot)}
.zusatz__preis small{font-family:var(--text-schrift);font-size:.8rem;color:var(--text-leise);text-transform:none;margin-left:.4rem}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:700px){.stimmen{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.stimmen{grid-template-columns:repeat(3,1fr)}}
.stimme{background:var(--hell);border-radius:var(--radius);padding:clamp(1.2rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.8rem}
.stimme p{margin:0;font-size:.98rem}
.stimme__wer{margin-top:auto;padding-top:.3rem;font-size:.85rem;color:var(--text-leise)}
.stimme__wer b{color:var(--text)}

/* ---------- Abschluss-Balken ---------- */
.abschluss{position:relative;background:var(--rot);color:#fff;overflow:hidden}
.abschluss__bild{position:absolute;right:0;top:0;bottom:0;width:46%;z-index:0;opacity:.35}
.abschluss__bild img{width:100%;height:100%;object-fit:cover}
.abschluss__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--rot) 8%,rgba(200,22,29,.15))}
.abschluss .huelle{position:relative;z-index:1;padding:clamp(3rem,6vw,5rem) 0}
.abschluss h2{font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem);max-width:18ch}
.abschluss p{max-width:52ch;margin:1rem 0 1.8rem;color:rgba(255,255,255,.9)}

/* ---------- Anfahrt ---------- */
.anfahrt{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media (min-width:900px){.anfahrt{grid-template-columns:1.1fr .9fr;align-items:start}}
.anfahrt__bild{border-radius:var(--radius);overflow:hidden}
.anfahrt__bild img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 34%}
.infokarte{background:var(--hell);border-radius:var(--radius);padding:clamp(1.3rem,2.5vw,1.9rem);display:grid;gap:1.1rem}
.zeile-icon{display:flex;gap:.75rem;align-items:flex-start}
.zeile-icon svg{width:20px;height:20px;color:var(--rot);flex:none;margin-top:3px}
.zeiten{width:100%;border-collapse:collapse;font-size:.96rem}
.zeiten th{text-align:left;font-weight:400;color:var(--text-leise);padding:.4rem 0}
.zeiten td{text-align:right;padding:.4rem 0;font-weight:500}
.zeiten tr[data-heute="true"] th,.zeiten tr[data-heute="true"] td{color:var(--rot);font-weight:700}
.zeiten tr + tr th,.zeiten tr + tr td{border-top:1px solid var(--linie-hell)}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--dunkel);color:rgba(255,255,255,.8);padding-top:clamp(2.5rem,5vw,4rem)}
.fuss__grid{display:grid;gap:2rem;grid-template-columns:1fr;padding-bottom:2.5rem}
@media (min-width:760px){.fuss__grid{grid-template-columns:1.2fr 1fr 1fr}}
.fuss__tel{font-family:var(--titel);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);color:#fff;line-height:1.25;display:block}
.fuss h4{font-family:var(--titel);font-size:1.05rem;color:#fff;margin:0 0 .9rem}
.fuss li{margin-bottom:.5rem;font-size:.96rem}
.fuss a:hover{color:#fff}
.fuss__unten{border-top:1px solid var(--linie);padding:1.3rem 0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.86rem;color:rgba(255,255,255,.55)}
.fuss__unten span:last-child{margin-left:auto}

/* ---------- Formular / Modal (Klassen aus app.js) ---------- */
.feld{display:grid;gap:.4rem;margin-bottom:1rem}
.feld label{font-size:.88rem;font-weight:500}
.feld input,.feld select,.feld textarea{width:100%;padding:.8rem .95rem;border:1px solid var(--linie-hell);border-radius:6px;background:#fff;transition:border-color .2s,box-shadow .2s}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--rot);box-shadow:0 0 0 3px rgba(200,22,29,.15)}
.feld textarea{min-height:110px;resize:vertical}
.feld--zwei{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.feld--zwei{grid-template-columns:1fr 1fr}}
.feld__hinweis{font-size:.84rem;color:var(--text-leise)}
.feld[data-fehler="true"] input,.feld[data-fehler="true"] select,.feld[data-fehler="true"] textarea{border-color:var(--rot);background:#FFF6F6}
.fehlertext{color:var(--rot-tief);font-size:.84rem;font-weight:500;display:none}
.feld[data-fehler="true"] .fehlertext{display:block}
#wZeitHinweis:not([hidden]),#wGekuerzt:not([hidden]){display:block}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--text-leise);line-height:1.5}
.zustimmung input{width:20px;height:20px;flex:none;accent-color:var(--rot);margin-top:2px}

.modal{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center}
.modal[data-offen="true"]{display:flex}
@media (min-width:760px){.modal{align-items:center}}
.modal__schleier{position:absolute;inset:0;background:rgba(10,10,10,.7);animation:einblenden .3s ease both}
.modal__box{position:relative;background:var(--weiss);width:min(100%,720px);max-height:92vh;overflow-y:auto;border-radius:var(--radius) var(--radius) 0 0;animation:hoch .4s cubic-bezier(.2,.7,.2,1) both}
@media (min-width:760px){.modal__box{border-radius:var(--radius)}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@keyframes hoch{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.modal__kopf{position:sticky;top:0;z-index:2;background:var(--dunkel);color:#fff;padding:1rem clamp(1.1rem,3vw,1.75rem);display:flex;align-items:center;gap:1rem}
.modal__kopf h2{font-size:1.3rem;margin-right:auto}
.modal__zu{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.modal__zu:hover{background:rgba(255,255,255,.14)}
.modal__zu svg{width:19px;height:19px}
.stufen{display:flex;gap:.5rem;padding:0 clamp(1.1rem,3vw,1.75rem);background:var(--dunkel)}
.stufe{flex:1;height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.stufe span{display:block;height:100%;width:0;background:var(--rot-hell);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.stufe[data-fertig="true"] span{width:100%}
.modal__inhalt{padding:clamp(1.1rem,3vw,1.75rem)}
.schrittkopf{font-family:var(--titel);font-size:.95rem;color:var(--text-leise);margin-bottom:.7rem}
.wizard__seite{display:none}
.wizard__seite[data-aktiv="true"]{display:block;animation:einblenden .3s ease both}
.wizard__fuss{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}
.wizard__fuss .knopf{flex:1;min-width:140px}
.uebersicht{background:var(--hell);border-radius:6px;padding:1rem;margin-bottom:1.2rem;font-size:.95rem}
.uebersicht dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0}
.uebersicht dt{color:var(--text-leise)}
.uebersicht dd{margin:0;text-align:right;font-weight:500}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
/* app.js schreibt Hinweise („Bitte zuerst ein Datum wählen“, „Sonntag ist geschlossen“)
   direkt in dieses Raster. Ohne diese Zeile landen sie in einer 88-px-Spalte. */
.slots > p{grid-column:1 / -1;margin:0}
.slots input{position:absolute;opacity:0;width:0;height:0}
.slots label{display:grid;place-items:center;padding:.6rem .3rem;background:#fff;border:1px solid var(--linie-hell);border-radius:6px;cursor:pointer;font-size:.92rem;transition:.2s}
.slots input:checked + label{background:var(--rot);border-color:var(--rot);color:#fff}
.slots input:disabled + label{opacity:.35;cursor:not-allowed}
.slots input:focus-visible + label{outline:3px solid var(--rot);outline-offset:2px}
.fertig{text-align:center;padding:1.4rem 0}
.fertig__haken{width:64px;height:64px;border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;margin:0 auto 1.2rem}
.fertig__haken svg{width:32px;height:32px;stroke-width:2.5}
.fertig h3{font-size:1.6rem;margin-bottom:.6rem}
.fertig__nr{font-family:var(--titel);font-size:1rem;background:var(--hell);display:inline-block;padding:.4rem .8rem;border-radius:6px;margin:.6rem 0 1rem}

/* ---------- Helfer / Rufleiste ---------- */
.helfer{position:fixed;right:clamp(.8rem,3vw,1.4rem);bottom:clamp(.8rem,3vw,1.4rem);z-index:95;transition:opacity .3s,transform .3s}
@media (max-width:719px){.helfer{bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}}
.helfer[data-weg="true"]{opacity:0;transform:translateY(12px);pointer-events:none}
.helfer__knopf{display:inline-flex;align-items:center;gap:.5rem;background:var(--dunkel);color:#fff;border:0;border-radius:100px;padding:.75rem 1.1rem;font-weight:500;cursor:pointer;box-shadow:0 12px 28px -14px rgba(0,0,0,.7)}
.helfer__knopf svg{width:18px;height:18px}
@media (max-width:719px){.helfer__knopf{width:46px;height:46px;padding:0;justify-content:center;border-radius:50%}.helfer__knopf .beschriftung{display:none}}
.helfer__box{position:absolute;right:0;bottom:calc(100% + .7rem);width:min(88vw,340px);background:#fff;border-radius:var(--radius);box-shadow:0 24px 60px -20px rgba(0,0,0,.5);overflow:hidden;display:none}
.helfer[data-offen="true"] .helfer__box{display:block;animation:hoch .3s cubic-bezier(.2,.7,.2,1) both}
.helfer__kopf{background:var(--dunkel);color:#fff;padding:.85rem 1rem;font-weight:500;display:flex;align-items:center;gap:.6rem;font-family:var(--titel);font-size:1.05rem}
.helfer__kopf button{margin-left:auto;background:transparent;border:0;color:#fff;cursor:pointer;display:grid;place-items:center}
.helfer__kopf svg{width:18px;height:18px}
.helfer__liste{padding:.7rem;display:grid;gap:.4rem;max-height:52vh;overflow-y:auto}
.helfer__frage{text-align:left;background:var(--hell);border:1px solid transparent;border-radius:6px;padding:.65rem .8rem;font-size:.92rem;cursor:pointer;font-weight:500;transition:.2s}
.helfer__frage:hover{border-color:var(--rot)}
.helfer__antwort{background:var(--hell);border-left:3px solid var(--rot);padding:.85rem;font-size:.92rem;line-height:1.55}
.helfer__antwort p{margin:0 0 .6rem}
.helfer__antwort p:last-child{margin:0}

.rufleiste{position:fixed;left:0;right:0;bottom:0;z-index:96;display:grid;grid-template-columns:1fr 1fr;background:var(--dunkel);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:720px){.rufleiste{display:none}}
.rufleiste a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem .5rem;font-weight:500;color:#fff}
.rufleiste a + a{background:var(--rot)}
.rufleiste svg{width:19px;height:19px}
@media (max-width:719px){body{padding-bottom:60px}}

/* ---------- Einblenden ---------- */
.js .zeig{opacity:0;transform:translateY(20px)}
.js .zeig[data-sichtbar="true"]{opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.zeig[data-verzug="1"]{transition-delay:.08s}
.zeig[data-verzug="2"]{transition-delay:.16s}
.zeig[data-verzug="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .zeig{opacity:1!important;transform:none!important}
}

/* Kopf-CTA erst ab Tablet — mobil übernimmt das die Ruf-Leiste unten.
   Muss ans Ende (bzw. mit .kopf__innen davor), sonst schlägt .knopf{display:inline-flex} zurück. */
.kopf__innen .kopf__cta{display:none;white-space:nowrap}
@media (min-width:720px){.kopf__innen .kopf__cta{display:inline-flex}}

/* ==========================================================================
   Nachtrag 11.09.2026 — Kundenwünsche
   Logo im Kopf und im Hero · Bewertungs-Laufband · Fotos in der Terminanfrage
   ========================================================================== */

/* ---------- Wortmarke: echtes Logo statt gesetzter Schrift ---------- */
/* Das Logo bleibt unverändert. Weil „REIFEN" schwarz ist und der Kopf dunkel,
   bekommt es eine weiße Fläche darunter — so hängt es auch an der Halle. */
.marke{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.marke__logo{
  display:block;width:auto;height:clamp(21px,2.6vw,27px);
  background:#fff;border-radius:5px;padding:5px 8px;
  box-shadow:0 1px 0 rgba(255,255,255,.25);transition:box-shadow .2s;
  box-sizing:content-box;
}
.marke:hover .marke__logo,.marke:focus-visible .marke__logo{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.marke__ort{margin-top:5px;padding-left:2px}

/* ---------- Hero: Logo in der Mitte ---------- */
.hero__logo{margin:0;line-height:0}
.hero__logo img{
  display:block;margin-inline:auto;height:auto;
  width:clamp(196px,27vw,392px);
  background:#fff;border-radius:8px;padding:clamp(.5rem,1vw,.8rem) clamp(.7rem,1.4vw,1.1rem);
  box-shadow:0 14px 40px -18px rgba(0,0,0,.8);
  box-sizing:content-box;
}

/* ---------- Bewertungs-Laufband ---------- */
.abschnitt--laufband{background:var(--weiss);overflow:hidden}
.laufband{
  position:relative;overflow:hidden;padding-block:.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.laufband__band{display:flex;width:max-content;animation:laufband var(--dauer,120s) linear infinite}
.laufband[data-laeuft="aus"] .laufband__band{animation-play-state:paused}
.laufband__spur{display:flex;align-items:stretch;gap:1rem;padding-inline:.5rem}
.laufband .stimme{flex:none;width:clamp(262px,74vw,358px)}
@keyframes laufband{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.laufband__leiste{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.2rem)}
.laufband__halt{
  display:inline-flex;align-items:center;gap:.45rem;
  background:transparent;border:1px solid var(--linie-hell);border-radius:999px;
  padding:.45rem .95rem;font:inherit;font-size:.84rem;color:var(--text-leise);
  cursor:pointer;transition:border-color .2s,color .2s;
}
.laufband__halt svg{width:16px;height:16px}
.laufband__halt:hover{border-color:var(--rot);color:var(--rot-tief)}

/* „Weniger Bewegung": nichts läuft, die Karten bleiben von Hand scrollbar */
.laufband[data-von-hand="true"]{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.laufband[data-von-hand="true"] .laufband__band{animation:none;width:auto}
.laufband[data-von-hand="true"] .stimme{scroll-snap-align:center}

/* ---------- Fotos in der Terminanfrage ---------- */
.fotofeld{
  display:flex;align-items:center;gap:.8rem;
  padding:.9rem 1rem;border:1.5px dashed var(--linie-hell);border-radius:var(--radius);
  background:#FAFAFA;cursor:pointer;transition:border-color .2s,background .2s;
}
.fotofeld:hover,
.fotofeld[data-ueber="true"]{border-color:var(--rot);background:#FFF6F6}
#wFotos:focus-visible + .fotofeld{outline:3px solid var(--rot);outline-offset:2px}
.fotofeld[data-voll="true"]{opacity:.5;pointer-events:none}
.fotofeld svg{width:26px;height:26px;color:var(--rot);flex:none}
.fotofeld span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.fotofeld small{color:var(--text-leise);font-size:.8rem}

.fotoliste{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fotoliste__eintrag{
  display:flex;align-items:center;gap:.75rem;
  padding:.45rem .55rem;border:1px solid var(--linie-hell);border-radius:var(--radius);background:#fff;
}
.fotoliste__eintrag img{width:46px;height:46px;object-fit:cover;border-radius:4px;flex:none}
.fotoliste__text{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.3}
.fotoliste__text b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fotoliste__text small{color:var(--text-leise);font-size:.78rem}
.fotoliste__weg{
  margin-left:auto;flex:none;display:grid;place-items:center;width:34px;height:34px;
  background:transparent;border:0;border-radius:4px;color:var(--text-leise);cursor:pointer;transition:color .2s,background .2s;
}
.fotoliste__weg svg{width:19px;height:19px}
.fotoliste__weg:hover{color:var(--rot-tief);background:#FFF0F0}
.laufband[data-von-hand="true"]:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

/* ---------- Sprungziele ----------
   Der Kopf ist fest, ohne Abstand landet ein Abschnitt genau darunter und wirkt
   angeschnitten. Kopfhöhe plus etwas Luft, damit sauber alles darunter steht. */
#leistungen,#rechner,#preise,#bewertungen,#anfahrt{
  scroll-margin-top:calc(clamp(62px,6vw,74px) + 1.4rem);
}

/* ============ Begrüßung: der Reifen rollt die Wortmarke auf ============
   Vorbild ist der Ladeschirm von Röschmann — dort rollt eine Farbrolle das Logo auf.
   Hier macht das der Reifen aus der eigenen Wortmarke.

   Der Reifendurchmesser ist ein fester Bruchteil der Bahnbreite (14 %). Dadurch ist das
   Verhältnis Strecke/Umfang auf JEDEM Bildschirm gleich — 1 / (π · 0,14) = 2,274 Umdrehungen
   = 818°. Der Reifen rutscht also nie durch, ganz ohne Rechnerei in JavaScript.

   Ohne JavaScript ist der Vorhang gar nicht erst da. Und selbst wenn das Skript unterwegs
   scheitert, zieht ihn die Notbremse nach 4 s von selbst weg — die Seite darunter ist
   vollständig sichtbar, weil `body.intro` nur von JavaScript gesetzt wird. */
.ladeschirm{display:none}
.js .ladeschirm{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;
  background:var(--dunkel);will-change:transform;
  animation:intro-notbremse 0s linear 4s forwards;
}
@keyframes intro-notbremse{to{transform:translateY(-101%);visibility:hidden}}
.js .ladeschirm.ist-weg{
  transform:translateY(-101%);
  transition:transform .9s cubic-bezier(.76,0,.24,1);
  animation:none;pointer-events:none;
}
.ladeschirm__box{
  display:grid;justify-items:center;gap:clamp(1.1rem,3vw,1.9rem);
  padding:24px;transform:translateY(-4vh);
}

/* Bühne: die Platte wird aufgedeckt, der Reifen läuft obendrüber —
   deshalb Geschwister und nicht verschachtelt, sonst würde clip-path ihn mitschneiden. */
.ladeschirm__buehne{
  --bahn:min(72vw,420px);
  --reifen:calc(var(--bahn) * .14);
  position:relative;display:block;width:var(--bahn);
}
.ladeschirm__platte{
  display:block;background:#fff;border-radius:8px;
  padding:clamp(.5rem,1vw,.8rem) clamp(.7rem,1.4vw,1.1rem);
  clip-path:inset(0 100% 0 0);
  animation:intro-aufrollen .85s cubic-bezier(.62,.04,.24,1) .25s forwards;
}
.ladeschirm__platte img{display:block;width:100%;height:auto}
@keyframes intro-aufrollen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Das Rad fährt UNTER dem Schild auf einer eigenen Bahn.
   Auf dem Schild selbst würde es die Wortmarke zumatschen; hier bleibt es immer
   auf dunklem Grund und damit lesbar. Ein Speichenrad dreht sich sichtbar —
   die perspektivisch gezeichneten Reifen-Icons werden beim Drehen zu Kringeln. */
.ladeschirm__bahn{
  position:relative;display:block;height:var(--reifen);margin-top:clamp(10px,1.4vw,16px);
}
.ladeschirm__bahn::after{                       /* die Fahrbahn, wächst mit dem Rad */
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
  background:var(--rot-auf-dunkel);opacity:.5;
  transform:scaleX(0);transform-origin:left center;
  animation:intro-bahn .85s cubic-bezier(.62,.04,.24,1) .25s forwards;
}
@keyframes intro-bahn{
  0%{transform:scaleX(0);opacity:.5}
  80%{opacity:.5}
  100%{transform:scaleX(1);opacity:0}
}
.ladeschirm__rad{
  position:absolute;left:0;bottom:0;
  width:var(--reifen);height:var(--reifen);
  margin-left:calc(var(--reifen) / -2);
  color:var(--rot-auf-dunkel);opacity:0;
  animation:intro-rollen .85s cubic-bezier(.62,.04,.24,1) .25s forwards;
}
.ladeschirm__rad svg{width:100%;height:100%;display:block}
@keyframes intro-rollen{
  0%  {opacity:0;transform:translateX(0) rotate(0deg)}
  9%  {opacity:1}
  84% {opacity:1}
  100%{opacity:0;transform:translateX(var(--bahn)) rotate(818deg)}
}

.ladeschirm__claim{
  font-size:clamp(.72rem,1.3vw,.86rem);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);opacity:0;
  animation:intro-claim .5s ease-out 1s forwards;
}
@keyframes intro-claim{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Die Seite wartet hinter dem Vorhang und wird dann hochgezogen */
.js body.intro{overflow:hidden}
.js body.intro .kopf,
.js body.intro main,
.js body.intro .fuss,
.js body.intro .helfer,
.js body.intro .rufleiste{opacity:0}
.js body.intro main{transform:translateY(46px) scale(.99);transform-origin:top center}
.js body.intro-fertig .kopf{opacity:1;transition:opacity .5s ease-out .2s}
.js body.intro-fertig .helfer,
.js body.intro-fertig .rufleiste{opacity:1;transition:opacity .5s ease-out .5s}
.js body.intro-fertig main,
.js body.intro-fertig .fuss{
  opacity:1;transform:none;
  transition:transform .9s cubic-bezier(.2,.7,.3,1) .08s,opacity .65s ease-out .08s;
}

/* Wer „weniger Bewegung" eingestellt hat, sieht die Seite sofort */
@media (prefers-reduced-motion:reduce){
  .js .ladeschirm{display:none}
  .js body.intro .kopf,
  .js body.intro main,
  .js body.intro .fuss,
  .js body.intro .helfer,
  .js body.intro .rufleiste{opacity:1}
  .js body.intro main{transform:none}
}

/* Agentur-Nennung in der Fußzeile: Zeichen + Wortmarke in einer Zeile.
   Das Zeichen ist ein Leucht-Logo — bei unter 20 px wird es zum Schmierfleck,
   deshalb 24 px und der Schriftzug bleibt als Text daneben stehen. */
.fuss__macher{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.fuss__macher a{display:inline-flex;align-items:center;gap:.4rem}
.fuss__macher img{height:24px;width:auto;display:block;opacity:.85;transition:opacity .2s}
.fuss__macher a:hover img,.fuss__macher a:focus-visible img{opacity:1}