/* Kopf, Fuss, Farben und Grundtypografie stehen jetzt zentral in /assets/vda.css */
/* ==========================================================================
   vergleichdeinauto.de – gemeinsames Stylesheet fuer die neuen Unterseiten
   Farben und Schriften sind 1:1 aus deiner Startseite uebernommen.
   Datei ablegen unter:  /assets/vda-seiten.css
   ========================================================================== */

:root{
  --nacht:#0E0D10; --nacht2:#141317; --karte:#1A181D;
  --haar:#2B2831; --haar2:#3A3640;
  --elfenbein:#F2EFE9; --gedaempft:#A8A49B; --leise:#7E7A73;
  --gold:#D9BC78; --gold-tief:#B9974B;
  --blau:#0F4DA8; --gruen:#7FBF98; --rot:#E37070;
  --radius:14px;
}


/* ---------- Header ---------- */


@media(max-width:720px){ .wortmarke{display:none} }

/* Auf dem Handy nur Logo und Button, die Navigation steht im Footer.
   Das haelt den Kopf ruhig und verhindert abgeschnittene Links. */
@media(max-width:640px){
  .nav{flex-wrap:nowrap; padding:0; min-height:64px}
  .btn{padding:11px 16px; font-size:.78rem}
}


/* ---------- Buttons ---------- */
.btn{display:inline-block; background:transparent; color:var(--gold); text-decoration:none; font-weight:600; font-size:.88rem;
  letter-spacing:.08em; text-transform:uppercase; padding:12px 24px; border-radius:3px; border:1px solid var(--gold-tief);
  cursor:pointer; transition:background .2s,color .2s}


/* ---------- Bausteine ---------- */
.kicker{display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.24em; color:var(--gold); margin-bottom:18px}

.lead{font-size:1.15rem; color:var(--gedaempft)}

section{padding:56px 0}

.karte{background:var(--karte); border:1px solid var(--haar); border-radius:var(--radius); padding:26px}

.karten{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.hinweis{border-left:3px solid var(--gold-tief); background:var(--nacht2); padding:16px 20px; border-radius:0 var(--radius) var(--radius) 0; color:var(--gedaempft); font-size:.95rem}

.gut{color:var(--gruen)}
 .schlecht{color:var(--rot)}

.klein{font-size:.86rem; color:var(--leise); line-height:1.75}

ul.liste{list-style:none; padding:0; margin:0}

ul.liste li{padding-left:26px; position:relative; margin-bottom:10px}

ul.liste li::before{content:"➔"; position:absolute; left:0; color:var(--gold-tief); font-size:.85rem; top:2px}


/* ---------- Tabellen ---------- */
.tabelle-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--haar); border-radius:var(--radius)}

table{border-collapse:collapse; width:100%; min-width:640px; font-size:.93rem}

th,td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--haar); vertical-align:top}

thead th{background:var(--nacht2); color:var(--gedaempft); font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600}

tbody tr:last-child td{border-bottom:none}


/* ---------- Partnerlink-Kennzeichnung (Punkt 7) ---------- */
.partner-hinweis{display:inline-block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leise); margin-top:8px}

.partner-hinweis::before{content:"◆"; color:var(--gold-tief); margin-right:6px; font-size:.6rem}


/* ---------- Breadcrumb ---------- */
.krumen{font-size:.8rem; color:var(--leise); letter-spacing:.06em; margin:28px 0 0}

.krumen a{color:var(--gedaempft); text-decoration:none}


/* ---------- Footer ---------- */


/* ---------- Bildbaender ---------- */
.bildband{position:relative; margin:0; overflow:hidden; background:var(--nacht2)}

.bildband img{width:100%; aspect-ratio:16/6.5; object-fit:cover; display:block}

.bildband::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,16,.55) 0%,rgba(14,13,16,0) 40%,rgba(14,13,16,.9) 100%)}

.bildband figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom:22px}

.bildband figcaption .wrap{color:var(--gedaempft); font-size:.82rem; letter-spacing:.04em}

@media(max-width:640px){ .bildband img{aspect-ratio:4/3} }


.bild-rund{margin:26px 0 0; border-radius:var(--radius); border:1px solid var(--haar); overflow:hidden}

.bild-rund img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}

.bild-rund figcaption{padding:12px 16px; font-size:.8rem; color:var(--leise); background:var(--nacht2)}


/* ---------- Netlify-Badge ausblenden (Punkt 4) ---------- */
#nl-badge-frame, iframe[src*="netlify"], .netlify-badge{display:none !important}
/* Ablauf-Grafik je Portal, ersetzt das Stimmungsbild */
.ablaufband{margin:0;padding:26px 0 8px;background:var(--nacht2);border-top:1px solid var(--haar);border-bottom:1px solid var(--haar)}
.ablaufband img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--haar)}
.ablaufband figcaption{padding-top:14px}
.ablaufband figcaption .wrap{color:var(--leise);font-size:.86rem;letter-spacing:.03em}
.ablaufband.eng{padding:22px;margin:26px 0;border-radius:14px}
.ablaufband.eng figcaption{padding-top:12px;color:var(--leise);font-size:.86rem}