/* ReifenDoc – Stylesheet
   Farben: dunkler Grundton + EINE Signalfarbe (Gelb) für Anruf-/Notruf-Elemente. */

:root{
  --bg:          #15181a;
  --bg-2:        #1b1f22;
  --bg-3:        #222729;
  --line:        #2e3438;
  --line-soft:   #262b2e;
  --text:        #e9ebec;
  --text-muted:  #99a2a7;
  --signal:      #ffc400;
  --signal-dark: #e0ac00;
  --on-signal:   #14161a;

  --wrap: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);
  --sec-y: clamp(4rem, 9vw, 7.5rem);
  --radius: 2px;

  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4,.h{
  font-family:var(--font-head);
  overflow-wrap:break-word; hyphens:auto;
  font-weight:800;
  font-stretch:112%;
  line-height:1.02;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
}

.wrap{ width:min(100% - 2*var(--gap), var(--wrap)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--on-signal);
  padding:.75rem 1.25rem; font-weight:700;
}
.skip-link:focus{ left:0; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--signal); outline-offset:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; white-space:nowrap; align-items:center; justify-content:center; gap:.6rem;
  min-height:56px; padding:.9rem 1.6rem;
  font-family:var(--font-head); font-weight:800; font-stretch:106%;
  font-size:1rem; letter-spacing:.02em; text-transform:uppercase;
  text-decoration:none; border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background-color .15s linear, border-color .15s linear, color .15s linear;
}
.btn svg{ flex:none; }

/* Signalfarbe: ausschließlich Anruf- und Notruf-Buttons */
.btn--call{ background:var(--signal); color:var(--on-signal); border-color:var(--signal); }
.btn--call:hover{ background:var(--signal-dark); border-color:var(--signal-dark); }

.btn--ghost{ background:transparent; color:var(--text); border-color:#4a5257; }
.btn--ghost:hover{ background:#20262a; border-color:#6b7479; }

.btn--solid{ background:var(--text); color:var(--bg); border-color:var(--text); }
.btn--solid:hover{ background:#ffffff; border-color:#ffffff; }

.btn--block{ width:100%; }

/* ---------- Kopfzeile ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(21,24,26,.97);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; gap:1rem;
  min-height:72px;
}
.logo{
  font-family:var(--font-head); font-weight:900; font-stretch:118%;
  font-size:1.45rem; letter-spacing:-.01em; text-transform:uppercase;
  text-decoration:none; color:var(--text); margin-right:auto; white-space:nowrap;
}
.logo span{ color:var(--signal); }

.nav{ display:flex; align-items:center; gap:.25rem; }
.nav a{
  text-decoration:none; color:var(--text-muted); white-space:nowrap;
  font-size:.9rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.65rem .8rem; border-radius:var(--radius);
}
.nav a:hover,.nav a.is-current{ color:var(--text); }

.header-call{ margin-left:.75rem; min-height:48px; padding:.7rem 1.2rem; font-size:.9rem; }

.nav-toggle{
  display:none; width:52px; height:52px; margin-left:auto;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--text); cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:currentColor; position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor;
}
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:.5rem var(--gap) 1rem;
  }
  .nav[hidden]{ display:none; }
  .nav a{ padding:1rem .25rem; font-size:1rem; border-bottom:1px solid var(--line-soft); }
  .header-call{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; isolation:isolate; background:#000; overflow:hidden; }
.hero__slides{ position:relative; display:grid; min-height:clamp(560px,86svh,880px); }
.hero__slide{
  grid-area:1/1; position:relative;
  display:flex; align-items:flex-end;
  opacity:0; visibility:hidden; transition:opacity .5s linear, visibility .5s linear;
}
.hero__slide.is-active{ opacity:1; visibility:visible; }

.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,14,16,.94) 0%, rgba(12,14,16,.72) 45%, rgba(12,14,16,.45) 100%);
}

.hero__content{ min-width:0; padding-block:clamp(2.5rem,7vw,5rem) clamp(3.25rem,7vw,5rem); }
.hero h1{
  font-weight:900; font-stretch:118%;
  font-size:clamp(2.1rem,9vw,6.5rem);
  margin-bottom:1.1rem;
  overflow-wrap:break-word;
}
.hero h1 .line2{ display:block; color:var(--signal); }
.hero__sub{
  max-width:46ch; margin:0 0 2rem;
  font-size:clamp(1.0625rem,.98rem + .45vw,1.3125rem);
  color:#d3d8da;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero__dots{
  position:absolute; left:0; right:0; bottom:1.1rem; z-index:3;
  display:flex; justify-content:center; gap:.6rem;
}
.hero__dots button{
  width:40px; height:4px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.3);
}
.hero__dots button[aria-current="true"]{ background:var(--signal); }

/* ---------- Zielgruppen-Leiste ---------- */
.targets{ background:var(--bg-2); border-bottom:1px solid var(--line); }
.targets ul{
  list-style:none; margin:0; padding:1.25rem 0;
  display:flex; flex-wrap:wrap; gap:.5rem 2.25rem; justify-content:center;
}
.targets li{
  font-family:var(--font-head); font-weight:700; font-stretch:106%;
  font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
}

/* ---------- Abschnitte ---------- */
.section{ padding-block:var(--sec-y); }
.section--alt{ background:var(--bg-2); }
.section__head{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section__eyebrow{
  display:block; margin-bottom:.9rem;
  font-family:var(--font-head); font-weight:700; font-stretch:104%;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted);
}
.section h2{ font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem); margin-bottom:1rem; }
.section__lead{ margin:0; color:var(--text-muted); font-size:1.075rem; }

/* Slogan */
.claim{
  max-width:54ch; margin:1.25rem 0 0;
  padding-top:1.25rem; border-top:1px solid var(--line);
  color:#d3d8da; line-height:1.5;
  font-size:clamp(1.1rem,1rem + .55vw,1.4rem);
}

.placeholder{
  display:inline-block; padding:.1rem .45rem;
  background:#3a3414; color:var(--signal);
  font-family:var(--font-head); font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; vertical-align:middle;
}

/* ---------- Über uns ---------- */
.about > *,.breakdown > *,.area > *,.contact > *{ min-width:0; }

.about{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){ .about{ grid-template-columns:minmax(0,420px) minmax(0,1fr); } }

.about__photo{
  position:relative; aspect-ratio:4/5; background:var(--bg-3);
  border:1px solid var(--line); display:grid; place-items:center; text-align:center; padding:1.5rem;
}
.about__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about__photo p{ margin:.75rem 0 0; color:var(--text-muted); font-size:.9rem; }
.about__text p{ margin:0 0 1.25rem; color:#c9cfd2; }
.about__text p:last-child{ margin-bottom:0; }

/* ---------- Leistungs-Karten ---------- */
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
}
.card{ background:var(--bg-3); border:1px solid var(--line); display:flex; flex-direction:column; }
.card__media{ aspect-ratio:16/10; overflow:hidden; background:#101214; }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:1.4rem 1.4rem 1.6rem; }
.card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.card p{ margin:0; color:var(--text-muted); font-size:.975rem; }

/* ---------- Pannendienst ---------- */
.breakdown{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .breakdown{ grid-template-columns:minmax(0,1fr) minmax(0,420px); } }

.icon-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.icon-list li{
  display:flex; gap:1.15rem; align-items:flex-start;
  padding:1.3rem 0; border-bottom:1px solid var(--line);
}
.icon-list svg{ flex:none; width:30px; height:30px; margin-top:.2rem; color:var(--text-muted); }
.icon-list h3{ font-size:1.1rem; margin-bottom:.3rem; }
.icon-list p{ margin:0; color:var(--text-muted); font-size:.975rem; }
.breakdown__photo img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line); }

/* ---------- Einsatzgebiet ---------- */
.area{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .area{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.area__photo img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }
.area__list{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.6rem; }
.area__list li{ display:flex; gap:.7rem; color:#c9cfd2; }
.area__list li::before{ content:""; flex:none; width:10px; height:10px; margin-top:.55rem; background:var(--text-muted); }

/* ---------- Kontakt ---------- */
.contact{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .contact{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); } }

.phone-block{ border:1px solid var(--line); background:var(--bg-3); padding:clamp(1.5rem,3vw,2.25rem); }
.phone-block__label{
  display:block; margin-bottom:.5rem;
  font-family:var(--font-head); font-weight:700; font-stretch:104%;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted);
}
.phone-block__number{
  display:inline-block; margin-bottom:1.25rem; text-decoration:none;
  font-family:var(--font-head); font-weight:900; font-stretch:112%;
  font-size:clamp(1.7rem,1rem + 2.4vw,2.2rem);
  color:var(--signal); line-height:1.1; overflow-wrap:break-word;
}
.phone-block__number:hover{ color:var(--signal-dark); }
.phone-block p{ margin:0 0 1.5rem; color:var(--text-muted); font-size:.975rem; }
.phone-block .btn{ width:100%; }

.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; gap:1.1rem; }
@media (min-width:560px){ .form__row{ grid-template-columns:1fr 1fr; } }
.field label{
  display:block; margin-bottom:.45rem;
  font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
}
.field input,.field select,.field textarea{
  width:100%; min-height:54px; padding:.85rem 1rem;
  background:var(--bg-3); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:1rem;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--text-muted); }
.field--hp{ position:absolute; left:-9999px; }

.consent{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; color:var(--text-muted); }
.consent input{ flex:none; width:22px; height:22px; margin-top:.15rem; accent-color:var(--signal); }
.form__note{ margin:0; font-size:.85rem; color:var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer{ background:#101314; border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:720px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.site-footer h3{ font-size:.85rem; letter-spacing:.16em; color:var(--text-muted); margin-bottom:1rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.site-footer a{ color:#c9cfd2; text-decoration:none; font-size:.95rem; }
.site-footer a:hover{ color:var(--text); text-decoration:underline; }
.site-footer .logo{ font-size:1.6rem; margin:0 0 .9rem; display:inline-block; }
.site-footer__intro p{ margin:0; color:var(--text-muted); font-size:.95rem; max-width:42ch; line-height:1.6; }
.footer-bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  color:var(--text-muted); font-size:.85rem;
}

/* Auf Mobilgeraeten die erste Bildschirmseite so bemessen, dass Ueberschrift,
   Untertitel und beide Buttons ueber der fixen Anrufleiste Platz haben. */
@media (max-width:900px){
  .hero__slides{ min-height:clamp(520px,calc(100svh - 72px),820px); }
  .hero__content{ padding-bottom:calc(2rem + 88px); }
  .hero__dots{ bottom:calc(.85rem + 88px); }
}

/* ---------- Fixe Anrufleiste (mobil) ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  display:none; gap:.6rem; padding:.6rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(16,19,20,.97); border-top:1px solid var(--line);
}
.callbar .btn{ flex:1; min-height:54px; padding:.8rem .5rem; font-size:.95rem; }
@media (max-width:900px){
  .callbar{ display:flex; }
  body{ padding-bottom:84px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- Rechtstexte (Unterseiten) ---------- */
.legal{ padding-block:clamp(3rem,7vw,5.5rem); }
.legal .wrap{ max-width:760px; }
.legal h1{ font-size:clamp(2rem,1.3rem + 2.6vw,3rem); margin-bottom:2rem; }
.legal h2{ font-size:1.3rem; margin:2.5rem 0 .75rem; }
.legal p,.legal li{ color:#c9cfd2; }
.legal ul{ padding-left:1.2rem; }
.legal .back{
  display:inline-block; margin-top:3rem; color:var(--text-muted);
  font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
}
.legal .back:hover{ color:var(--text); }