/* ============================================================
   Autozentrum Kozak · K2-Layer (Design-Durchlauf 18.08.2026)
   Problem davor: jede Fläche war dieselbe Karte (dunkel, oranger
   Hairline, gleicher Radius, gleicher Leuchtrand). Ergebnis: Monotonie.

   Jetzt vier Rollen mit unterschiedlichem Material:
     1 FEATURE  – Bildkarte (Leistungen, Fahrzeuge, Ratgeber, Team)
     2 LISTE    – Zeilen mit Haarlinie, ohne Kasten (Versprechen, Leistungspunkte, Warum, Schritte)
     3 PANEL    – ruhige Textfläche, randlos, anderes Grau (Fließtext, Artikel, Rechtstexte)
     4 AKZENT   – orange getönte Fläche (CTA-Leisten, Infoboxen, aktiver Schritt)
   Der laufende Leuchtrand bleibt einzig am Anfrage-Funnel: dort hat er Bedeutung.
   ============================================================ */

:root {
  --radius-card: 16px;
  --radius-panel: 14px;
  --hairline: rgba(244, 244, 245, 0.10);
  --hairline-strong: rgba(244, 244, 245, 0.16);
  --surface-panel: #16171A;          /* eigenes Material für Textflächen */
  --shadow-card: 0 16px 38px rgba(0, 0, 0, 0.42);
  --shadow-card-hover: 0 26px 60px rgba(0, 0, 0, 0.52), 0 0 44px rgba(249, 154, 64, 0.14);
  --accent-wash: linear-gradient(122deg, rgba(249, 154, 64, 0.16), rgba(249, 154, 64, 0.05) 58%, transparent);
}

/* ---------- 0) Einheits-Look zurücknehmen ---------- */
.svc-card, .vehicle-card, .post-card, .team-card, .promise-list li, .wf-card, .why-card, .xref,
.contact-card, .hero-tile, .steps-v2 li, .danke-card, .map-frame, .ray-card, .panel, .faq-card,
.feature-cards li, .infobox, .stat, .testi {
  box-shadow: none;
  border-color: var(--hairline) !important;
}
/* Laufender Leuchtrand: nur noch am Funnel */
.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, .steps-v2 li::before,
.danke-card::before, .map-frame::before, .team-card::before, .ray-card::before, .panel::before,
.faq-card::before, .glow::before {
  content: none !important;
}
.svc-card, .vehicle-card, .post-card, .team-card, .promise-list li, .wf-card, .why-card, .xref,
.contact-card, .steps-v2 li, .ray-card, .panel, .faq-card, .feature-cards li {
  animation: none !important;
}

/* ---------- 1) FEATURE: die einzigen echten Karten ---------- */
.svc-card, .vehicle-card, .post-card, .team-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s var(--ease);
}
@media (hover: hover) {
  .svc-card:hover, .vehicle-card:hover, .post-card:hover, .team-card:hover {
    transform: translateY(-4px);
    border-color: rgba(249, 154, 64, 0.45) !important;
    box-shadow: var(--shadow-card-hover);
  }
}
.svc-icon { background: rgba(10, 11, 13, 0.72); border-color: rgba(249, 154, 64, 0.45); backdrop-filter: blur(8px); }

/* ---------- 2) LISTE: Zeilen statt Kästen ---------- */
/* Versprechen ("So arbeiten wir") */
.promise-list { gap: 0; }
.promise-list li {
  background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0;
  padding: 22px 16px; grid-template-columns: 34px 1fr; gap: 18px;   /* kein negatives Margin: sprengt schmale Spalten */
  transition: background 0.25s var(--ease);
}
.promise-list li:last-child { border-bottom: 1px solid var(--hairline); }
.promise-list li > .ic { width: 26px; height: 26px; padding: 0; background: none; color: var(--accent); margin-top: 2px; }
@media (hover: hover) {
  .promise-list li:hover { background: rgba(249, 154, 64, 0.05); }
  .promise-list li > .ic { transition: transform 0.25s var(--ease); }
  .promise-list li:hover > .ic { transform: translateX(4px); }
}

/* Leistungspunkte ("Was wir … machen") */
.feature-cards { gap: 0 44px; }
.feature-cards li {
  background: none !important; border: 0; border-top: 1px solid var(--hairline); border-radius: 0;
  padding: 18px 0; box-shadow: none;
}
@media (hover: hover) { .feature-cards li:hover { transform: none; } .feature-cards li:hover h3 { color: var(--accent); } }

/* Warum-Punkte: Akzentlinie oben statt Kasten */
.why-grid { gap: 28px 32px; }
.why-card { background: none; border: 0; border-top: 2px solid rgba(249, 154, 64, 0.55); border-radius: 0; padding: 20px 0 0; }
.why-card > .ic { margin-bottom: 10px; }

/* Ablaufschritte auf den Leistungsseiten */
.steps-v2 li { background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; padding: 20px 0 0; }
.steps-v2 .step-nr { font-size: 1.7rem; color: rgba(249, 154, 64, 0.9); }

/* Querverweise: Zeile mit Pfeil */
.xref { background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; padding: 20px 0; }
@media (hover: hover) { .xref:hover { border-top-color: rgba(249, 154, 64, 0.5); } }

/* Ablauf mit Auto: leichte Flächen ohne Rahmen */
.wf-card { background: rgba(244, 244, 245, 0.035); border: 0; border-radius: var(--radius-panel); box-shadow: none; }
@media (hover: hover) { .wf-card:hover { background: rgba(249, 154, 64, 0.08); transform: none; } }

/* Unfall-Strecke: flache Fläche, der Strahl trägt die Struktur */
.ray-card { background: rgba(244, 244, 245, 0.035); border: 0; border-radius: var(--radius-panel); }
.ray-step.is-current .ray-card { background: rgba(249, 154, 64, 0.10); box-shadow: none; }

/* Kontaktkacheln: kompakter, ohne schwere Karte */
.contact-card { background: rgba(244, 244, 245, 0.035); border: 0; border-radius: var(--radius-panel); }
@media (hover: hover) { a.contact-card:hover { background: rgba(249, 154, 64, 0.10); transform: translateY(-2px); } }

/* Hero-Kacheln bleiben Glas, aber ohne Ring */
.hero-tile { border-radius: var(--radius-panel); }

/* ---------- 3) PANEL: ruhige Textfläche, randlos ---------- */
.panel {
  background: var(--surface-panel);
  border: 0 !important;
  border-radius: var(--radius-panel);
  box-shadow: none;
  padding: clamp(24px, 2.8vw, 40px);
}
/* .section-alt .panel hatte eine eigene, DUNKLERE Sonderfarbe (#101114) -
   damit lief die Flaechenlogik in zwei Richtungen. Ersetzt durch die
   kontextabhaengige Stufe in k3.css: ein Container steht immer eine Stufe
   UEBER seinem Grund, egal auf welchem Band er sitzt. */
@media (hover: hover) { .panel:hover { box-shadow: none; } }
/* Textspalten neben Bild/Karte bekommen eine kurze Akzentkante oben */
.tb > .tb-copy.panel { position: relative; padding-top: clamp(28px, 3vw, 44px); }
.tb > .tb-copy.panel::after {
  content: ""; position: absolute; top: 0; left: clamp(24px, 2.8vw, 40px);
  width: 44px; height: 2px; background: var(--accent); border-radius: 2px;
}
.article-panel, .legal-body.panel { background: var(--surface-panel); }

/* ---------- 4) AKZENT: orange getönte Flächen ---------- */
.cta-panel {
  background: var(--accent-wash), var(--surface);
  border: 1px solid rgba(249, 154, 64, 0.3) !important;
  border-radius: var(--radius-panel);
}
.section-alt .cta-panel { background: var(--accent-wash), var(--bg); }
.cta-panel p { color: var(--text); }
.infobox, .faq-info {
  background: rgba(249, 154, 64, 0.09);
  border: 1px solid rgba(249, 154, 64, 0.3) !important;
  border-radius: var(--radius-panel);
  padding: 18px 22px;
}
.funnel-aside { background: rgba(244, 244, 245, 0.035); }

/* ---------- 5) FAQ: einspaltig, keine Höhensprünge ---------- */
.faq-cards, .faq-cards.faq-2col, .faq-cards.faq-1col {
  grid-template-columns: 1fr; max-width: none; margin-inline: 0; gap: 10px;
}
.faq-card {
  background: rgba(244, 244, 245, 0.035); border: 0 !important; border-radius: var(--radius-panel);
  transition: background 0.25s var(--ease);
}
.faq-card summary { grid-template-columns: 26px 1fr 20px; padding: 20px 24px; font-size: 1.02rem; }
.faq-card[open] { background: rgba(249, 154, 64, 0.08); box-shadow: none; }
.faq-card[open] summary { color: var(--accent); }
.faq-card .faq-a { padding: 0 24px 22px 64px; max-width: 78ch; }
@media (hover: hover) { .faq-card:hover { background: rgba(244, 244, 245, 0.06); } }
@media (max-width: 560px) { .faq-card summary { padding: 16px 16px; grid-template-columns: 22px 1fr 18px; gap: 10px; } .faq-card .faq-a { padding: 0 16px 18px 48px; } }

/* ---------- 6) Funnel: einziges Element mit laufendem Leuchtrand ---------- */
.funnel { border-radius: var(--radius-card); border: 1px solid rgba(249, 154, 64, 0.28) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(249, 154, 64, 0.10); }
.fn-tile-box { border-radius: var(--radius-panel); }

/* ---------- 7) Rhythmus: nicht jede Sektion gleich hoch ---------- */
.section { padding: clamp(72px, 7.5vw, 118px) 0; }
.section-alt { padding: clamp(84px, 8.5vw, 132px) 0; }
#so-arbeiten-wir, #ratgeber { padding-block: clamp(64px, 6.5vw, 104px); }
/* .faq-section hatte clamp(64px,6.5vw,100px) = 93px bei 1440 und lag damit
   neben der Skala (108 normal / 122 alt). Ein dritter Wert liest sich als Fehler,
   nicht als Rhythmus. Sie laeuft jetzt auf der normalen Sektionsskala. */
.sec-head { margin-bottom: clamp(28px, 3.4vw, 52px); }

/* ---------- 8) Fahrzeug-Sektion: andere Komposition als die Leistungskarten ---------- */
@media (min-width: 961px) {
  .vehicle-grid { grid-template-columns: 1fr; gap: 18px; }
  .vehicle-card { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: stretch; }
  .vehicle-card img { height: 100%; aspect-ratio: auto; min-height: 220px; object-fit: cover; }
  .vehicle-body { padding: clamp(24px, 2.4vw, 34px); justify-content: center; }
  .vehicle-body h3 { font-size: 1.3rem; }
  .vehicle-body p { max-width: 78ch; }
}