/* ============================================================
   Autozentrum Kozak · K1-Layer (Korrekturdurchlauf 1, 18.08.2026)
   Lädt nach style.css / v2.css / funnel.css und gewinnt.
   Themen: Chrom-Überschriften + oranger Kernbegriff, Hero ohne Logo,
   Full-Content-Width, Glow-Schatten + glühender Rand, gestreckte Nav,
   Mega-Menü, Sub-Nav (Scrollspy), FAQ ohne Container, Google-Stimmen,
   Hover-Farben, Sticky-Spalte, zusätzliche Motion (reduced-motion-sicher)
   ============================================================ */

:root {
  --chrome: linear-gradient(112deg, #FFFFFF 0%, #E4E4E7 22%, #A6A6AC 46%, #F1F1F3 60%, #C9C9CE 78%, #FFFFFF 100%);
  --glow-ring: rgba(249, 154, 64, 0.22);
  --glow-shadow: 0 0 0 1px rgba(249, 154, 64, 0.16), 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 42px rgba(249, 154, 64, 0.10);
  --glow-shadow-hover: 0 0 0 1px rgba(249, 154, 64, 0.45), 0 22px 54px rgba(0, 0, 0, 0.5), 0 0 60px rgba(249, 154, 64, 0.22);
  --subnav-h: 46px;
}

/* ============================================================
   1) Überschriften: metallischer Chrom-Verlauf, Kernbegriff orange
   ============================================================ */
h1, h2, .chrome {
  background-image: var(--chrome);
  background-size: 200% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
h1 .hl, h2 .hl, .chrome .hl {
  background: none;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 22px rgba(249, 154, 64, 0.35);
}
/* Chrom-Schimmer läuft einmal drüber, sobald der Kopf sichtbar wird */
@media (prefers-reduced-motion: no-preference) {
  .js .sec-head.in h2, .js .page-hero h1, .js .hero-v2 h1 { animation: chrome-sheen 1.6s var(--ease) 0.15s 1 both; }
  html.pl-open .page-hero h1 { animation: none !important; }
  @keyframes chrome-sheen { from { background-position: 100% 0%; } to { background-position: 0% 0%; } }
}
/* Ausnahmen: Stellen, an denen die Überschrift bewusst einfarbig bleibt */
.footer-h, .sr-only, .fn-step h3, .cta-band h2, .inglory-note p, .tb-copy h2.solid { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.footer-col .footer-h { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); }
.cta-band h2 { color: var(--text); -webkit-text-fill-color: var(--text); }
h1.chrome, h2 { text-wrap: balance; }

/* ============================================================
   2) Hero: Logo raus, Schrift deutlich größer, Wort-Reveal
   ============================================================ */
.hero-v2 .hero-inner-k1 { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: calc(var(--nav-h) + var(--subnav-h) + 64px); min-height: calc(100dvh - 140px); align-content: center; }
.hero-v2 h1.h1-xl { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 24ch; margin-bottom: 0.4em; }
.hero-v2 .hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 56ch; }
.hero-v2 .hero-ctas .btn-lg { padding: 1.05em 1.9em; font-size: 1.05rem; }
/* Wort-Reveal: jede Zeile ist eine Maske, Wörter kommen von unten */
.h1-xl { background: none; -webkit-text-fill-color: var(--text); color: var(--text); animation: none !important; opacity: 1 !important; transform: none !important; }
.h1-xl .l { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.h1-xl .w { display: inline-block; background-image: var(--chrome); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.h1-xl .w.hl { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); text-shadow: 0 0 22px rgba(249, 154, 64, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  /* Der Hero-Auftritt läuft HINTER dem Ladebildschirm und ist fertig, wenn das Tor aufgeht.
     Vorher lief er zeitgesteuert und je nach Ladezeit noch einmal danach (doppelte Bewegung). */
  html.js.pl-lock .h1-xl .w { transform: translateY(110%); animation: word-in 0.9s var(--ease) both; animation-delay: calc(0.12s + var(--i, 0) * 70ms); }
  @keyframes word-in { to { transform: translateY(0); } }
  html.js.pl-lock .hero-v2 .hero-sub { animation: fade-up 0.8s var(--ease) 0.55s both; }
  html.js.pl-lock .hero-v2 .hero-ctas { animation: fade-up 0.8s var(--ease) 0.7s both; }
  html.js.pl-lock .hero-v2 .hero-tiles { animation: fade-up 0.8s var(--ease) 0.85s both; }
  @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  /* Tor offen ODER Ladebildschirm übersprungen (Folgeaufruf): der Hero steht einfach.
     Schließt auch die alte V1-Regel `rise-in` aus style.css ein, sonst faded sie ein zweites Mal. */
  html.pl-open .h1-xl .w, html.pl-skip .h1-xl .w { animation: none !important; transform: none !important; }
  html.pl-open .hero-v2 .hero-sub, html.pl-open .hero-v2 .hero-ctas, html.pl-open .hero-v2 .hero-tiles,
  html.pl-skip .hero-v2 .hero-sub, html.pl-skip .hero-v2 .hero-ctas, html.pl-skip .hero-v2 .hero-tiles,
  html.pl-open .hero-copy h1, html.pl-open .hero-copy .hero-sub, html.pl-open .hero-copy .hero-ctas, html.pl-open .hero-copy .eyebrow,
  html.pl-skip .hero-copy h1, html.pl-skip .hero-copy .hero-sub, html.pl-skip .hero-copy .hero-ctas, html.pl-skip .hero-copy .eyebrow {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  html.pl-skip .page-hero h1, html.pl-open .page-hero h1 { animation: none !important; }
}
@media (max-width: 960px) {
  .hero-v2 .hero-inner-k1 { padding-top: calc(var(--nav-h) + 48px); }
  .hero-v2 h1.h1-xl { font-size: clamp(2.2rem, 10vw, 3.4rem); max-width: none; }
}
/* Seiten-Hero: größer, Kernbegriff orange */
.page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }

/* ============================================================
   3) Full Content Width: alle Sektionen auf .wrap-Breite
   ============================================================ */
.sec-head { max-width: none; }
.sec-head .lead { max-width: 68ch; }
.sec-head.center .lead, .sec-foot p, .faq-intro, .note.center { margin-inline: auto; }
.faq { max-width: none; }
.testi { max-width: none; }
.ray { max-width: none; }
.funnel-wrap { max-width: none; }
.article-wrap, .legal-wrap { max-width: none; }
.article-body { max-width: 76ch; }
.legal-body { max-width: 80ch; }
/* Texte konsequent: zentrierter Kopf = alles darunter zentriert, linker Kopf = alles links */
.sec-head.center, .sec-head.center * { text-align: center; }
.sec-head.center .btn { margin-inline: auto; }
.center > .btn, .wf-cta { text-align: center; }
.faq-section .sec-head { margin-bottom: 8px; }
.faq-intro { max-width: 62ch; }

/* ============================================================
   4) Glow-Schatten + animierter glühender Rand (.glow und Karten)
   ============================================================ */
@property --ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.glow, .svc-card, .vehicle-card, .post-card, .promise-list li, .wf-card, .why-card, .xref, .contact-card, .hero-tile,
.funnel, .steps-v2 li, .danke-card, .map-frame, .team-card, .stat, .infobox, .ray-card, .testi-card {
  position: relative;
  box-shadow: var(--glow-shadow);
  border-color: var(--glow-ring) !important;
  transition: box-shadow 0.35s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.glow::before, .svc-card::before, .vehicle-card::before, .post-card::before, .promise-list li::before, .wf-card::before, .why-card::before,
.xref::before, .contact-card::before, .hero-tile::before, .funnel::before, .steps-v2 li::before, .danke-card::before, .map-frame::before,
.team-card::before, .ray-card::before, .testi-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 2;
  padding: 1px;
  background: conic-gradient(from var(--ring-angle), transparent 0deg, transparent 300deg, rgba(249, 154, 64, 0.95) 336deg, rgba(255, 210, 160, 0.9) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
/* Alte Top-Linie des Kartenrahmens weicht dem Ring */
.map-frame::before { background: conic-gradient(from var(--ring-angle), transparent 0deg 300deg, rgba(249,154,64,0.95) 336deg, rgba(255,210,160,0.9) 348deg, transparent 360deg); height: auto; top: -1px; left: -1px; right: -1px; box-shadow: none; }
/* Ring läuft nur, wenn die Karte im Viewport ist (JS setzt .ring-on), nie bei reduced-motion, auf Touch-Geräten statisch */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ring-on::before { opacity: 1; animation: ring-spin 6s linear infinite; }
  @keyframes ring-spin { to { --ring-angle: 360deg; } }
}
@media (hover: hover) {
  .glow:hover, .svc-card:hover, .vehicle-card:hover, .post-card:hover, .promise-list li:hover, .wf-card:hover, .why-card:hover, .xref:hover,
  a.contact-card:hover, .hero-tile:hover, .steps-v2 li:hover, .team-card:hover, .ray-card:hover { box-shadow: var(--glow-shadow-hover); border-color: rgba(249, 154, 64, 0.5) !important; }
  .svc-card:hover::before, .vehicle-card:hover::before, .post-card:hover::before, .hero-tile:hover::before, .wf-card:hover::before, .promise-list li:hover::before, .why-card:hover::before, .xref:hover::before, .contact-card:hover::before { opacity: 1; animation-duration: 3.2s; }
}
/* Karten-Inhalt bleibt über dem Ring, Bilder unter dem Ring */
.svc-card > *, .vehicle-card > *, .post-card > * { position: relative; z-index: 1; }
/* Buttons: einheitlicher oranger Glow */
.btn-primary { box-shadow: 0 8px 26px rgba(249, 154, 64, 0.22), 0 0 0 1px rgba(249, 154, 64, 0.2); }
.btn-ghost { box-shadow: 0 0 0 1px rgba(249, 154, 64, 0.0); }
@media (hover: hover) {
  .btn-primary:hover { box-shadow: 0 0 34px rgba(249, 154, 64, 0.45), 0 10px 26px rgba(0, 0, 0, 0.45); }
  .btn-ghost:hover { box-shadow: 0 0 22px rgba(249, 154, 64, 0.22); }
}
/* Funnel-Kacheln: dezenter Glow beim Auswählen */
.fn-tile input:checked + .fn-tile-box { box-shadow: 0 0 0 1px var(--accent) inset, 0 0 28px rgba(249, 154, 64, 0.35); }

/* ============================================================
   5) Ablauf unter dem Hero (Unfall-Strahl): Linie hinter den Icons durchziehen, Text in Container
   ============================================================ */
.ray { padding: 24px 0 8px; }
.ray-line { top: -32px; height: calc(100% + 64px); z-index: 0;
  -webkit-mask: linear-gradient(transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask: linear-gradient(transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.ray-line line { stroke: rgba(249, 154, 64, 0.22); }
.ray-dot { z-index: 1; background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
.ray-step.lit .ray-dot { background: linear-gradient(rgba(249,154,64,0.14), rgba(249,154,64,0.14)), var(--bg); box-shadow: 0 0 0 6px var(--bg), 0 0 22px rgba(249,154,64,0.45); }
.section-alt .ray-dot, .section-alt .ray-step.lit .ray-dot { background-color: var(--surface); box-shadow: 0 0 0 6px var(--surface); }
/* Nur der aktive Schritt (nächster zur Bildschirmmitte) bekommt den laufenden Leuchtrand, die anderen bleiben ruhig */
.ray-card.ring-on::before, #ablauf .wf-card.ring-on::before { animation: none; opacity: 0; }
.ray-step.is-current .ray-card, #ablauf .wf-card.is-current { box-shadow: var(--glow-shadow-hover); border-color: rgba(249, 154, 64, 0.6) !important; }
.ray-step.is-current .ray-dot { border-color: var(--accent); background: linear-gradient(rgba(249,154,64,0.22), rgba(249,154,64,0.22)), var(--bg); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ray-step.is-current .ray-card::before, #ablauf .wf-card.is-current::before { opacity: 1; animation: ring-spin 4.5s linear infinite; }
}
.sec-foot .btn { padding: 1.05em 2.1em; font-size: 1.05rem; }
.ray-step { align-items: center; padding-bottom: 28px; }
.ray-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.ray-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ray-card p { margin: 0; }
@media (min-width: 900px) {
  .ray-step { grid-template-columns: 1fr 64px 1fr; gap: 32px; }
  .ray-step:nth-child(even) > .ray-card { text-align: left; }
  .ray-step:nth-child(odd) > .ray-card { justify-self: start; }
  .ray-step:nth-child(even) > .ray-card { justify-self: end; }
  .ray-card { max-width: 520px; width: 100%; }
}
/* Puls-Ring am beleuchteten Punkt (nur transform/opacity) */
.ray-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(249, 154, 64, 0.55); opacity: 0; transform: scale(1); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ray-step.lit .ray-dot::after { animation: dot-pulse 2.6s var(--ease) infinite; }
  @keyframes dot-pulse { 0% { opacity: 0.8; transform: scale(1); } 70% { opacity: 0; transform: scale(1.65); } 100% { opacity: 0; transform: scale(1.65); } }
}

/* ============================================================
   6) So arbeiten wir: linke Spalte sticky, Icons vertikal mittig
   ============================================================ */
/* Zweispaltig mit Fließtext links: Textspalte bleibt beim Scrollen stehen und sitzt
   vertikal in der Mitte (Offset setzt main.js, damit keine hohe Spalte oben abgeschnitten wird). */
@media (min-width: 961px) {
  /* align-self: start gibt der klebenden Spalte den vollen Weg innerhalb der Zeile;
     den vertikalen Sitz übernimmt der berechnete top-Offset. */
}
.promise-list li { align-items: center; }
.promise-list li > .ic { align-self: center; }

/* ============================================================
   7) Hover-Farben für alle Links (außer Karten/Buttons)
   ============================================================ */
main a:not(.btn):not([class*="card"]):not(.hero-tile):not(.fn-tile):not(.mega-tile):not(.credit-badge) { transition: color 0.18s var(--ease); }
main p a:not(.btn), .faq a, .article-body a, .legal-body a, .contact-list a, .fn-consent a, .map-consent a, .inglory-note a, .crumbs a, .footer-col a, .footer-contact a, .subnav a, .testi-more a { text-decoration-color: rgba(249, 154, 64, 0.5); }
@media (hover: hover) {
  main p a:not(.btn):hover, .faq a:hover, .article-body a:hover, .legal-body a:hover, .contact-list a:hover, .fn-consent a:hover, .map-consent a:hover, .crumbs a:hover, .footer-col a:hover, .footer-contact a:hover { color: var(--accent); }
  .svc-link:hover, .svc-card:hover .svc-link, .post-card:hover .svc-link, .vehicle-card .svc-link:hover { color: #FFB86B; }
  .subnav a:hover { color: #17110A; }
  /* Links, die ohnehin orange sind, werden beim Hover heller + unterstrichen */
  .article-body a:hover, .map-consent-inner a:not(.btn):hover, .legal-body a:hover, .infobox a:hover, .inglory-note a:hover, .danke p a:hover, .fn-consent a:hover { color: #FFB86B; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
  .subnav a:hover { color: var(--accent); }
  .svc-card:hover h3, .post-card:hover h3, .vehicle-card:hover h3, .xref:hover strong, a.contact-card:hover h3 { -webkit-text-fill-color: var(--accent); color: var(--accent); }
  .footer-social a:hover, .footer-social a.is-ig:hover { background: var(--accent); color: #17110A; border-color: var(--accent); }
  .testi-btn:hover { background: var(--accent); color: #17110A; border-color: var(--accent); }
  .credit-badge:hover strong { color: #C8E96B; }
  .quick-contact-item:hover { color: var(--accent); }
}
/* Karten-h3 sind bewusst einfarbig (Chrom nur h1/h2) */
.svc-body h3, .vehicle-body h3, .post-body h3, .why-card h3, .promise-list h3, .ray-card h3, .wf-body h3, .contact-card h3, .feature-list h3, .steps-v2 h3, .team-card h3, .fn-step h3, .article-body h3, .legal-body h3, h3 { background: none; -webkit-text-fill-color: var(--text); color: var(--text); }
.article-body h3 { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.svc-card:hover h3, .post-card:hover h3 { transition: color 0.2s var(--ease); }

/* ============================================================
   8) Ablauf-Sektion: Button größer, zentriert
   ============================================================ */
.wf-cta { margin-top: 48px; }
.wf-cta .btn-lg { padding: 1.05em 2.1em; font-size: 1.05rem; }

/* ============================================================
   9) Kundenstimmen mit Google
   ============================================================ */
.google-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 99px; background: rgba(244, 244, 245, 0.06); border: 1px solid var(--line-strong); color: var(--text-muted); font-size: 0.82rem; font-weight: 600; margin-bottom: 14px; }
.google-badge .g-logo { width: 18px; height: 18px; }
.g-logo { width: 16px; height: 16px; flex: none; }
.testi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px clamp(20px, 5vw, 72px) 34px; margin-top: 8px; }
.testi-track { min-height: 260px; }
.testi-item figcaption { gap: 8px; }
.testi-verified { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-muted); background: rgba(244, 244, 245, 0.05); border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px 4px 7px; }
.testi-more { margin-top: 22px; }
.testi-more .btn .g-logo { width: 18px; height: 18px; }
@media (max-width: 560px) { .testi { padding: 28px 18px 26px; } .testi-more .btn { width: 100%; } }

/* ============================================================
   10) FAQ: Einleitung als Infobox, jede Frage in einem eigenen Container
   ============================================================ */
.faq-info { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; max-width: 820px; margin: 0 auto var(--sp-6); text-align: left; }
.faq-info > .ic { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.faq-info p { margin: 0; color: var(--text); font-size: 0.98rem; line-height: 1.6; }
.faq-cards { margin-top: 0; display: grid; gap: 14px; align-items: start; }
.faq-cards.faq-2col { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.faq-cards.faq-1col { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
@media (max-width: 860px) { .faq-cards.faq-2col { grid-template-columns: 1fr; } }
.faq-card {
  position: relative; border: 1px solid var(--glow-ring); border-radius: var(--radius); background: var(--surface-2);
  box-shadow: var(--glow-shadow); overflow: hidden; align-self: start;
  transition: box-shadow 0.3s var(--ease), border-color 0.25s var(--ease);
}
.section-alt .faq-card { background: var(--bg); }
.faq-card summary {
  cursor: pointer; list-style: none; display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; gap: 14px;
  padding: 20px 22px; font-weight: 600; font-size: 1rem; color: var(--text); line-height: 1.4;
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::before {
  content: "?"; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: 0.78rem; font-weight: 700;
  background: rgba(249, 154, 64, 0.14); border: 1px solid rgba(249, 154, 64, 0.4); color: var(--accent);
}
.faq-card summary .ic { width: 20px; height: 20px; color: var(--accent); transition: transform 0.25s var(--ease); }
.faq-card[open] summary .ic { transform: rotate(180deg); }
.faq-card[open] { border-color: rgba(249, 154, 64, 0.45); box-shadow: var(--glow-shadow-hover); }
.faq-card[open] summary { padding-bottom: 12px; }
.faq-card .faq-a {
  padding: 0 22px 22px 60px; margin: 0; max-width: none;
  color: var(--text-muted); font-size: 0.96rem; line-height: 1.65;
}
@media (max-width: 560px) { .faq-card summary { padding: 16px 16px; gap: 10px; } .faq-card .faq-a { padding: 0 16px 18px 50px; } }
@media (hover: hover) { .faq-card:hover { border-color: rgba(249, 154, 64, 0.45); box-shadow: var(--glow-shadow-hover); } .faq-card summary:hover { color: var(--accent); } }
/* Leuchtrand wie bei den übrigen Karten */
.faq-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1px;
  background: conic-gradient(from var(--ring-angle), transparent 0deg, transparent 300deg, rgba(249, 154, 64, 0.95) 336deg, rgba(255, 210, 160, 0.9) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s var(--ease);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .faq-card.ring-on::before { opacity: 1; animation: ring-spin 6s linear infinite; } }

/* ============================================================
   11) Footer: Social-Zeile
   ============================================================ */
.footer-follow { color: var(--text-muted); font-size: 0.86rem; margin: 22px 0 8px; letter-spacing: 0.02em; }
.footer-social { margin-top: 0; }
.footer-social a.is-ig { color: var(--text); border-color: rgba(249, 154, 64, 0.5); }
.footer-social a.is-ig .ic { width: 20px; height: 20px; }

/* ============================================================
   12) Navigation: gestreckt, Unterstrich-Indikator, Mega-Menü
   ============================================================ */
@media (min-width: 861px) {
  .nav-inner { position: relative; gap: 40px; }
  .nav-links { flex: 1; justify-content: space-evenly; gap: 0; align-self: stretch; }
  .nav-links > a:not(.nav-cta-mobile), .nav-links > .nav-item > a {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    height: 40px; margin: auto 0; padding: 0 18px; font-size: 1rem; letter-spacing: 0.01em;
    border-radius: 99px; border: 1px solid transparent;
    transition: color 0.2s var(--ease), background 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease);
  }
  .nav-links > .nav-cta-mobile { display: none !important; }
  .nav-links { align-items: center; }
  .nav-links > a:hover, .nav-links > .nav-item > a:hover, .nav-item.open > a {
    color: var(--text); background: rgba(249, 154, 64, 0.12); border-color: rgba(249, 154, 64, 0.35);
  }
  .nav-links > a.active, .nav-links > .nav-item > a.active {
    color: #17110A; background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 18px rgba(249, 154, 64, 0.28);
  }
  .nav-links > a.active:hover, .nav-links > .nav-item > a.active:hover { background: #FFB059; border-color: #FFB059; color: #17110A; }
  /* Mega-Menü: volle Content-Breite unter der Leiste */
  .nav-item-mega { position: static; }
  .nav-item.kb-closed:not(.open):focus-within .nav-drop { opacity: 0; visibility: hidden; transform: translateY(8px); }
  .nav-mega { left: 0; right: 0; min-width: 0; top: 100%; padding: 12px 0 0; }
  .nav-mega .nav-mega-mobile { display: none; }
  .mega-panel { background: #101114; border: 1px solid rgba(249, 154, 64, 0.22); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 50px rgba(249, 154, 64, 0.10); padding: 16px; }
  .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .mega-panel .mega-tile { position: relative; display: grid; padding: 0; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
  .mega-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
  .mega-body { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: start; padding: 12px 40px 14px 14px; }
  .mega-body .ic { width: 18px; height: 18px; color: var(--accent); grid-row: 1 / 3; margin-top: 3px; }
  .mega-body strong { font-size: 0.95rem; color: var(--text); line-height: 1.3; }
  .mega-body small { grid-column: 2; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; margin-top: 3px; }
  .mega-panel .mega-tile .ic-arrow { position: absolute; right: 12px; bottom: 16px; width: 16px; height: 16px; color: var(--text-dim); transition: transform 0.22s var(--ease), color 0.22s var(--ease); }
  .mega-panel .mega-tile:hover { background: var(--surface-3); border-color: rgba(249, 154, 64, 0.55); transform: translateY(-2px); box-shadow: 0 0 26px rgba(249, 154, 64, 0.16); }
  .mega-panel .mega-tile:hover .mega-media img { transform: scale(1.05); }
  .mega-panel .mega-tile:hover .ic-arrow { transform: translateX(3px); color: var(--accent); }
  .mega-panel .mega-tile:hover strong { color: var(--accent); }
  .mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 6px 2px 14px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 0.9rem; }
  .mega-foot > span { display: inline-flex; align-items: center; gap: 10px; }
  .mega-foot .ic { width: 18px; height: 18px; color: var(--accent); }
  .mega-foot .btn, .nav-drop .mega-foot a.btn { color: #17110A !important; padding: 0.7em 1.2em; border-radius: var(--radius); }
  .mega-foot .btn .ic { color: #17110A; }
  /* Ist die Abschnittsleiste (Sub-Nav) sichtbar, hängt sich das Mega-Menü darunter ein statt sie zu überlagern */
  body.subnav-visible .nav-mega { top: calc(100% + var(--subnav-h)); }
  /* Stagger beim Öffnen */
  @media (prefers-reduced-motion: no-preference) {
    .mega-panel .mega-tile { opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease); }
    .nav-item.open .mega-panel .mega-tile, .nav-item:focus-within .mega-panel .mega-tile { opacity: 1; transform: none; transition-delay: calc(0.05s + var(--i, 0) * 45ms); }
    .nav-item.open .mega-panel .mega-tile:hover { transform: translateY(-2px); transition-delay: 0s; }
  }
}
@media (max-width: 860px) {
  .mega-panel { display: none; }
}

/* ============================================================
   13) Sub-Navigation (nur Home): sticky unter der Hauptleiste, Scrollspy
   ============================================================ */
.subnav { position: absolute; top: 100%; left: 0; right: 0; z-index: 49; height: var(--subnav-h);
  background: linear-gradient(90deg, #FDA24A 0%, #F99A40 50%, #E8842A 100%); border-bottom: 1px solid rgba(23, 17, 10, 0.25);
  box-shadow: 0 10px 30px rgba(249, 154, 64, 0.22), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.subnav-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-inner { align-items: center; gap: 6px; }
.subnav a {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px; font-size: 0.86rem; font-weight: 600; color: rgba(23, 17, 10, 0.74);
  text-decoration: none; white-space: nowrap; border-radius: 99px; border: 1px solid transparent;
  transition: color 0.2s var(--ease), background 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.subnav a.active { color: var(--accent); background: #17110A; border-color: #17110A; box-shadow: 0 4px 14px rgba(23, 17, 10, 0.3); }
@media (hover: hover) {
  .subnav a:hover { color: #17110A; background: rgba(255, 255, 255, 0.4); border-color: rgba(23, 17, 10, 0.2); }
  .subnav a.active:hover { color: #FFB86B; background: #17110A; border-color: #17110A; }
}
@media (min-width: 861px) { .subnav-inner { justify-content: space-between; } .subnav a { flex: 1; }}
/* Sub-Nav versteckt sich im Hero und erscheint ab der ersten Sektion */
.subnav:not(.is-visible) { transform: translateY(-100%); opacity: 0; pointer-events: none; }
body.has-subnav { --scroll-offset: calc(var(--nav-h) + var(--subnav-h)); }
body.has-subnav main section[id] { scroll-margin-top: var(--bar-h, calc(var(--nav-h) + var(--subnav-h))); }
body.has-subnav .nav-links a { transition-duration: 0.18s; }
@media (max-width: 860px) {
  :root { --subnav-h: 56px; }
  .subnav a { height: 40px; padding: 0 14px; font-size: 0.82rem; }
  .subnav a::after { content: ""; position: absolute; inset: -8px 0; }   /* Tippfläche ≥ 44px */
  body.nav-open .subnav { opacity: 0; pointer-events: none; }
}

/* ============================================================
   14) Kontakt: Funnel prominent, Karte danach
   ============================================================ */
#anfrage .funnel { scroll-margin-top: calc(var(--nav-h) + 24px); }
.tb-copy .btn { margin-top: 4px; }

/* ============================================================
   15) Weitere Motion (frei nach Ermessen), alle reduced-motion-sicher
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Versprechen-Liste gleitet von rechts, gestaffelt */
  .js #so-arbeiten-wir .promise-list li.reveal { transform: translateX(24px); }
  .js #so-arbeiten-wir .promise-list li.reveal.in { transform: none; }
  /* Karten-Grids: leichte Staffelung über nth-child */
  .js .svc-grid .reveal:nth-child(2), .js .vehicle-grid .reveal:nth-child(2), .js .post-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
  .js .vehicle-grid .reveal:nth-child(3), .js .post-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
  .js .svc-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
  .js .svc-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
  /* Werkstatt-Ablauf: Nummern leuchten, wenn sichtbar */
  .js .wf-card.reveal .wf-nr { opacity: 0.4; transform: scale(0.85); transition: opacity 0.6s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s; }
  .js .wf-card.reveal.in .wf-nr { opacity: 1; transform: none; }
  /* Google-Badge poppt kurz */
  .js .sec-head.in .google-badge { animation: pop-in 0.5s var(--ease) both; }
  @keyframes pop-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
  /* Hero-Kacheln: Pfeil atmet leicht */
  .hero-tile .ic-arrow { animation: nudge 3.2s ease-in-out infinite; }
  @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
  .hero-tile:hover .ic-arrow { animation: none; }
}
/* Skalierung auf kleinen Screens */
@media (max-width: 560px) {
  .ray-card { padding: 16px 16px; }
  .google-badge { font-size: 0.78rem; }
}

/* ============================================================
   16) Buttons: EIN Größensystem, echte Zentrierung
   Ursache des Versatzes: globales `p { max-width: 65ch }` – zentrierte
   Buttons in <p class="center"> saßen in der Mitte dieser Box (472px)
   statt in der Seitenmitte (720px).
   ============================================================ */
.center, p.center, .sec-foot, .sec-head.center, .note.center, .faq-intro { margin-inline: auto; }
p.center, .wf-cta, .testi-more, .sec-foot { max-width: none; }
.sec-foot p { max-width: 62ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; font-size: 0.98rem; font-weight: 600; line-height: 1.2;
  border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; white-space: nowrap;
}
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn-lg { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }
.btn-lg .ic { width: 20px; height: 20px; }
.wf-cta .btn, .sec-foot .btn, .cta-band .btn { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }
.wf-cta .btn .ic, .sec-foot .btn .ic, .cta-band .btn .ic { width: 20px; height: 20px; }
.testi-more .btn .g-logo, .btn .g-logo { width: 20px; height: 20px; }
/* Gruppen: gleiche Höhe, gleicher Abstand, saubere Zeilenumbrüche */
.hero-ctas, .map-consent-actions, .danke .hero-ctas, .fn-nav { gap: 14px; align-items: stretch; }
@media (max-width: 560px) {
  /* Lange Beschriftungen dürfen umbrechen, sonst sprengen sie schmale Container */
  .btn, .btn-lg { width: 100%; padding: 12px 18px; white-space: normal; text-align: center; height: auto; }
  .fn-nav .btn { width: 100%; }
  .nav .btn, .quick-contact .btn, .subnav .btn { width: auto; }
}
/* Der Header-CTA bleibt auf Mobil ausgeblendet (Burger übernimmt) – .btn darf das display:none nicht kippen */
@media (max-width: 860px) { .nav-cta { display: none !important; } }

/* ============================================================
   17) Ladebildschirm "Werkstatt wird geöffnet"
   Ablauf: Hallenlicht flutet den Raum → Chrom-Wortmarke wird von einem
   Lichtstreifen freigelegt → Drehzahl-Bogen zieht hoch → Hallentor öffnet
   sich (oben/unten) und gibt die Seite frei. Dauer ~1,5 s, danach weg.
   Ohne JS entfernt die Basisanimation (inline im <head>) die Schicht.
   ============================================================ */
.pl-lock, .pl-lock body { overflow: hidden; }
.preloader { display: grid; place-items: center; }

/* Bühne: Hallenboden, Lichtkegel, zwei Scheinwerfer-Durchgänge */
.pl-stage { position: absolute; inset: 0; overflow: hidden; }
.pl-floor {
  position: absolute; inset: 52% 0 0 0;
  background:
    linear-gradient(rgba(249,154,64,0.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(244,244,245,0.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(rgba(244,244,245,0.05) 0 1px, transparent 1px 40px);
  transform: perspective(520px) rotateX(64deg); transform-origin: top center;
  opacity: 0; animation: pl-floor-in 1.6s cubic-bezier(0.16,1,0.3,1) 0.15s forwards;
  mask-image: linear-gradient(transparent, #000 18%, #000 55%, transparent 88%); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 55%, transparent 88%);
}
@keyframes pl-floor-in { from { opacity: 0; transform: perspective(520px) rotateX(76deg) scale(1.18); } to { opacity: 1; transform: perspective(520px) rotateX(64deg) scale(1); } }
/* Hallenlicht zündet wie eine Neonröhre: kurzes Flackern, dann steht es */
.pl-glow {
  position: absolute; left: 50%; top: 44%; width: 120vmin; height: 120vmin; transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle, rgba(249,154,64,0.30), rgba(249,154,64,0.08) 38%, transparent 62%);
  opacity: 0; animation: pl-glow-in 2.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes pl-glow-in {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  6% { opacity: 0.85; } 9% { opacity: 0.15; } 13% { opacity: 0.9; } 16% { opacity: 0.25; }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(0.8); }
  60% { opacity: 0.92; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1.08); }
}
/* Zwei Scheinwerfer-Durchgänge, der zweite schneller */
.pl-beam {
  position: absolute; top: -20%; bottom: -20%; width: 42vmax; left: -55vmax;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10) 42%, rgba(249,154,64,0.22) 50%, rgba(255,255,255,0.10) 58%, transparent);
  filter: blur(6px); transform: skewX(-14deg);
  animation: pl-beam-run 1.7s cubic-bezier(0.16,1,0.3,1) 0.2s 1 forwards, pl-beam-run2 1.3s cubic-bezier(0.16,1,0.3,1) 1.75s 1 forwards;
}
@keyframes pl-beam-run { from { left: -55vmax; } to { left: 130vmax; } }
@keyframes pl-beam-run2 { from { left: -55vmax; } to { left: 130vmax; } }

/* Kern: Drehzahl-Bogen mit Skala + Wortmarke */
.pl-core { position: relative; display: grid; place-items: center; width: min(80vw, 440px); aspect-ratio: 1; }
.pl-gauge { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); overflow: visible; }
.pl-track { fill: none; stroke: rgba(244,244,245,0.10); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 490 1000; }
.pl-scale { fill: none; stroke: rgba(244,244,245,0.22); stroke-width: 10; stroke-dasharray: 2 18.4; stroke-dashoffset: 0; opacity: 0; animation: pl-scale-in 0.8s var(--ease) 0.3s forwards; }
@keyframes pl-scale-in { to { opacity: 1; } }
.pl-arc {
  fill: none; stroke: var(--accent, #F99A40); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 490 1000; stroke-dashoffset: 490;
  filter: drop-shadow(0 0 10px rgba(249,154,64,0.65));
  animation: pl-arc-up 2.05s cubic-bezier(0.33,0.9,0.3,1) 0.25s forwards;
}
/* Hochdrehen: erst zügig, kurz halten, dann bis Anschlag */
@keyframes pl-arc-up { 0% { stroke-dashoffset: 490; } 42% { stroke-dashoffset: 230; } 56% { stroke-dashoffset: 212; } 100% { stroke-dashoffset: 0; } }
.pl-needle { transform-origin: 120px 120px; transform: rotate(0deg); animation: pl-needle-run 2.05s cubic-bezier(0.33,0.9,0.3,1) 0.25s forwards; }
.pl-needle circle { fill: #FFD7A8; filter: drop-shadow(0 0 12px rgba(249,154,64,0.95)); }
@keyframes pl-needle-run { 0% { transform: rotate(0deg); } 42% { transform: rotate(143deg); } 56% { transform: rotate(153deg); } 100% { transform: rotate(270deg); } }
/* Anschlag erreicht: kurzer Impuls über den ganzen Kern */
.pl-core::after {
  content: ""; position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,215,168,0.45), rgba(249,154,64,0.18) 45%, transparent 68%);
  opacity: 0; transform: scale(0.85);
  animation: pl-hit 0.85s cubic-bezier(0.16,1,0.3,1) 2.2s forwards;
}
@keyframes pl-hit { 0% { opacity: 0; transform: scale(0.85); } 25% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.16); } }

/* Wortmarke: taucht auf, zwei Lichtstreifen laufen darüber */
.pl-logo { position: relative; width: 72%; opacity: 0; animation: pl-logo-in 1.1s cubic-bezier(0.16,1,0.3,1) 0.55s forwards; }
.pl-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(249,154,64,0.28)); }
@keyframes pl-logo-in { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
.pl-sheen {
  position: absolute; inset: -6% -12%; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,0.75) 48%, rgba(255,224,190,0.9) 52%, transparent 62%);
  mix-blend-mode: overlay; transform: translateX(-130%);
  animation: pl-sheen-run 1.35s cubic-bezier(0.16,1,0.3,1) 0.85s 1 forwards, pl-sheen-run 1.1s cubic-bezier(0.16,1,0.3,1) 2.2s 1 forwards;
}
@keyframes pl-sheen-run { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* Statuszeile, atmet leicht */
.pl-status { position: absolute; left: 0; right: 0; bottom: clamp(48px, 12vh, 120px); text-align: center; }
.pl-status-txt {
  display: inline-block;
  font-family: 'Michroma', sans-serif; font-size: clamp(0.6rem, 1.6vw, 0.72rem); letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(244,244,245,0.72); opacity: 0; animation: pl-status-in 0.7s var(--ease, ease) 1.05s forwards, pl-status-breathe 2s ease-in-out 1.75s infinite;
}
@keyframes pl-status-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pl-status-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Hallentor: unsichtbar während der Sequenz, übernimmt erst beim Abgang */
.pl-door { position: absolute; left: -2%; right: -2%; height: 51%; background: rgba(10,11,13,0); transition: background 0.22s ease-out; }
.preloader.is-done .pl-door { background: rgba(10,11,13,1); }
.pl-door-top { top: 0; }
.pl-door-bottom { bottom: 0; }
.pl-seam { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%) scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--accent, #F99A40), #FFD7A8, var(--accent, #F99A40), transparent); box-shadow: 0 0 26px rgba(249,154,64,0.85); opacity: 0; }

/* Abgang: Kern verschwindet, Tor fährt auf */
.preloader.is-done { animation: none; background: transparent; pointer-events: none; }
.preloader.is-done .pl-core, .preloader.is-done .pl-status, .preloader.is-done .pl-stage { animation: none; opacity: 0; transition: opacity 0.3s ease-out; }
.preloader.is-done .pl-seam { opacity: 1; animation: pl-seam 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; }
.preloader.is-done .pl-door-top { animation: pl-door-up 0.8s cubic-bezier(0.7,0,0.2,1) 0.28s forwards; }
.preloader.is-done .pl-door-bottom { animation: pl-door-down 0.8s cubic-bezier(0.7,0,0.2,1) 0.28s forwards; }
@keyframes pl-seam { 0% { transform: translateY(-50%) scaleX(0); opacity: 1; } 38% { transform: translateY(-50%) scaleX(1); opacity: 1; } 100% { transform: translateY(-50%) scaleX(1); opacity: 0; } }
@keyframes pl-door-up { to { transform: translateY(-102%); } }
@keyframes pl-door-down { to { transform: translateY(102%); } }

/* Reduced Motion: kein Kino, nur ein kurzer ruhiger Übergang */
@media (prefers-reduced-motion: reduce) {
  html .preloader { animation: pl-off 0.3s linear 0.3s forwards; }   /* muss die kritische Inline-Regel schlagen */
  .pl-floor, .pl-glow, .pl-beam, .pl-arc, .pl-sheen, .pl-logo, .pl-status-txt, .pl-needle, .pl-scale, .pl-core::after { animation: none !important; opacity: 1; transform: none; }
  .pl-core::after { opacity: 0; }
  .pl-needle { display: none; }
  .pl-beam { display: none; }
  .pl-arc { stroke-dashoffset: 0; }
  .preloader.is-done { animation: pl-off 0.25s linear forwards; }
  .preloader.is-done .pl-door-top, .preloader.is-done .pl-door-bottom, .preloader.is-done .pl-seam { animation: none !important; }
}

/* Stimmen: alle Zitate im selben Raster-Feld → Höhe = längstes Zitat, kein Sprung beim Wechsel
   (verhindert Layoutverschiebung und damit falsches Einrasten des Scrollspys) */
.testi-track { display: grid; align-items: start; min-height: 0; }
.testi-item { position: relative !important; inset: auto !important; grid-area: 1 / 1; }
.testi-item:not(.is-active) { pointer-events: none; }

/* ============================================================
   18) Funnel-Sektionen: Überschrift zentriert darüber (Hauptkontakt)
   ============================================================ */
.funnel-section .sec-head { max-width: 820px; margin-inline: auto; margin-bottom: var(--sp-6); }
.funnel-section .funnel-wrap { max-width: none; }
.funnel-section .note.center { margin-top: 20px; max-width: 70ch; }
.contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.contact-row li { display: flex; align-items: center; gap: 10px; }
.contact-row .ic { width: 18px; height: 18px; color: var(--accent); margin-top: 0; }
.contact-row div { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contact-row a, .contact-row span { color: var(--text-muted); font-size: 0.94rem; text-decoration: none; }
@media (hover: hover) { .contact-row a:hover { color: var(--accent); } }
@media (max-width: 640px) { .contact-row { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* Slide-in der Versprechen-Liste darf nicht seitlich überlaufen – nur schmale Viewports clippen,
   auf Desktop würde `overflow` die Sticky-Spalte deaktivieren. */
@media (max-width: 960px) { #so-arbeiten-wir { overflow-x: clip; } }

/* ============================================================
   19) Panels: Infos und Funktionen stehen nie blanko im Raum
   Textspalten neben Bild/Karte, Info-Spalten in zweispaltigen Sektionen und
   freistehende CTAs bekommen denselben Container wie die übrigen Karten.
   ============================================================ */
.panel {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--glow-ring);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--glow-shadow);
  transition: box-shadow 0.35s var(--ease), border-color 0.25s var(--ease);
}
.panel > :last-child { margin-bottom: 0; }
.section-alt .panel { background: var(--bg); }
/* Leuchtrand wie bei den Karten */
.panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1px;
  background: conic-gradient(from var(--ring-angle), transparent 0deg, transparent 300deg, rgba(249, 154, 64, 0.95) 336deg, rgba(255, 210, 160, 0.9) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .panel.ring-on::before { opacity: 1; animation: ring-spin 6s linear infinite; }
}
@media (hover: hover) { .panel:hover { box-shadow: var(--glow-shadow-hover); border-color: rgba(249, 154, 64, 0.45); } }

/* Textspalte als Panel: Innenabstand ersetzt den alten Rand-Abstand */
.tb > .tb-copy.panel { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; }
.split-wide > .sec-head.panel { margin-bottom: 0; }
.split-wide > .sec-head.panel .lead:last-of-type { margin-bottom: 0; }

/* CTA-Leiste: eine Zeile Kontext + Funktion, mittig */
.cta-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: var(--sp-7); text-align: center; }
.cta-panel p { color: var(--text-muted); margin: 0; max-width: 56ch; font-size: 0.98rem; }
.cta-panel .btn { flex: none; }
.sec-foot.cta-panel { margin-top: var(--sp-7); }
.sec-foot.cta-panel p { max-width: 62ch; }
@media (max-width: 640px) { .cta-panel { flex-direction: column; } .cta-panel .btn { width: 100%; } }

/* Funnel-Umfeld: Hinweis + Kontaktzeile in einem Container unter dem Funnel */
.funnel-aside { margin-top: 20px; text-align: center; }
.funnel-aside .note { margin: 0; }
.funnel-aside .contact-row { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }

/* Ratgeber-Artikel und Rechtstexte in einem Lese-Container */
.article-panel { max-width: 82ch; margin-inline: auto; padding: clamp(26px, 3.2vw, 46px); }
.article-panel .article-body { max-width: none; }
.article-panel .article-meta { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.legal-body.panel { max-width: 82ch; margin-inline: auto; padding: clamp(26px, 3.2vw, 46px); }
.legal-body.panel > h2:first-child { margin-top: 0; }

/* Leistungs-Liste: Karten statt loser Zeilen */
.feature-cards { gap: 16px; }
.feature-cards li {
  border-bottom: 0; padding: 20px 22px; align-items: start;
  background: var(--surface-2); border: 1px solid var(--glow-ring); border-radius: var(--radius); box-shadow: var(--glow-shadow);
  transition: box-shadow 0.3s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.section-alt .feature-cards li { background: var(--bg); }
@media (hover: hover) { .feature-cards li:hover { box-shadow: var(--glow-shadow-hover); border-color: rgba(249, 154, 64, 0.45); transform: translateY(-2px); } }

/* ============================================================
   20) Funnel über die volle Inhaltsbreite: Felder ins Raster,
   damit keine einzeiligen Eingaben über 1000px laufen.
   ============================================================ */
@media (min-width: 900px) {

  /* Textfelder (einzeilig) bekommen eine angenehme Lesebreite, Textareas dürfen breit sein */
  .funnel-section .field input[type="text"], .funnel-section .field input[type="tel"], .funnel-section .field input[type="email"] { max-width: 560px; }
  .funnel-section .field textarea { max-width: 900px; }
  /* Detail-Blöcke zweispaltig, Textarea über beide Spalten.
     WICHTIG: nur der aktive Block – sonst hebelt display:grid das Ausblenden der anderen aus. */
  .funnel-section .fn-detail.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-items: start; }
  .funnel-section .fn-detail > fieldset, .funnel-section .fn-detail > .field:has(textarea), .funnel-section .fn-detail > .field-row { grid-column: 1 / -1; }
  .funnel-section .fn-detail > .field:has(textarea) textarea { max-width: none; }
  /* Kontaktschritt: Name, Telefon, E-Mail nebeneinander, Nachricht darunter */
  .funnel-section .fn-step[data-step="4"] .field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 24px; }
  .funnel-section .fn-step[data-step="4"] .field input { max-width: none; }
  .funnel-section .fn-step[data-step="4"] > fieldset { display: grid; grid-template-columns: 1fr; gap: 18px; }
}