/*
Theme Name: versandkompass
Theme URI: https://versandkompass.de/
Author: Maik Möhring Media
Description: Eigenes Theme für versandkompass.de. Setzt Vorschlag C um: dunkles Grundgerüst mit automatischem Hellmodus, vier Silo-Farben, Chip-Navigation, Artikel-Sidebar mit Inhaltsverzeichnis, verwandten Beiträgen und Werbeplatz, Werbeplatz im Text nach dem ersten Drittel. Kein Webfont, kein Framework.
Version: 1.1.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: versandkompass
*/

/* ---------- Tokens (identisch zum Core-Plugin, hier als Fallback) ---------- */
:root{
  --vk-bg:#0B0F17; --vk-karte:#141B27; --vk-feld:#1B2432; --vk-rand:#25303F;
  --vk-text:#EEF2F7; --vk-muted:#8A99AD; --vk-ok:#3ED9A0; --vk-stop:#FF7A6B;
  --vk-s-format:#8B7BFF; --vk-s-einschreiben:#2FD3BE; --vk-s-porto:#FF9E5E; --vk-s-zoll:#6BB4FF;
  --vk-silo:var(--vk-s-format);
  /* Markenfarbe. Fest, wechselt nie mit dem Silo. */
  --vk-marke:#3A8DFF;
  --vk-r:18px; --vk-r-s:13px;
  --vk-mono:ui-monospace,"SF Mono","Cascadia Mono","Liberation Mono",monospace;
  --vk-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --vk-breit:1180px; --vk-text-breit:720px; --vk-seite:300px;
}
@media (prefers-color-scheme:light){
  :root{
    --vk-bg:#FBFBFC; --vk-karte:#FFFFFF; --vk-feld:#F3F5F8; --vk-rand:#E4E7ED;
    --vk-text:#111318; --vk-muted:#646C7A; --vk-ok:#10794F; --vk-stop:#C0392B;
    --vk-s-format:#5B4BE0; --vk-s-einschreiben:#0B6F66; --vk-s-porto:#A24813; --vk-s-zoll:#2C6BB5;
    --vk-marke:#1746C4;
  }
}
body.vk-silo-format{--vk-silo:var(--vk-s-format)}
body.vk-silo-einschreiben{--vk-silo:var(--vk-s-einschreiben)}
body.vk-silo-porto{--vk-silo:var(--vk-s-porto)}
body.vk-silo-zoll{--vk-silo:var(--vk-s-zoll)}
body.vk-silo-neutral{--vk-silo:var(--vk-muted)}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--vk-bg);color:var(--vk-text);font-family:var(--vk-font);
  font-size:17px;line-height:1.62;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0}
h1{font-size:clamp(31px,7.5vw,46px);letter-spacing:-.033em;margin:0 0 12px}
h2{font-size:clamp(20px,4.4vw,27px);font-weight:660;margin:44px 0 12px;scroll-margin-top:90px}
h3{font-size:19px;font-weight:640;margin:26px 0 6px;scroll-margin-top:90px}
p{margin:0 0 15px}
a{color:var(--vk-silo);text-decoration-thickness:1px;text-underline-offset:2px}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--vk-silo);outline-offset:3px}
.vk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopf ---------- */
.vk-kopf{border-bottom:1px solid var(--vk-rand);background:var(--vk-bg)}
.vk-kopf-inner{max-width:var(--vk-breit);margin:0 auto;padding:0 20px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.vk-marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--vk-text)}
.vk-marke svg{width:30px;height:30px;color:var(--vk-marke);flex:none}
.vk-wort{font-size:20px;font-weight:700;letter-spacing:-.03em}
.vk-wort b{font-weight:700;color:var(--vk-marke)}
.vk-kopf-meta{font-size:13px;color:var(--vk-muted);display:none}
@media(min-width:760px){.vk-kopf-meta{display:block}}

/* Chip-Navigation */
.vk-chips{background:var(--vk-bg);border-bottom:1px solid var(--vk-rand)}
.vk-chips-inner{display:flex;gap:6px;overflow-x:auto;padding:11px 20px;
  max-width:var(--vk-breit);margin:0 auto;scrollbar-width:none}
.vk-chips-inner::-webkit-scrollbar{display:none}
.vk-chips a{flex:none;font-size:14px;text-decoration:none;color:var(--vk-muted);
  padding:7px 15px;border-radius:99px;border:1px solid var(--vk-rand);white-space:nowrap}
.vk-chips a.hier{color:var(--vk-bg);background:var(--vk-silo);border-color:var(--vk-silo);font-weight:640}
.vk-chips a[data-s="format"]:hover{color:var(--vk-s-format);border-color:var(--vk-s-format)}
.vk-chips a[data-s="einschreiben"]:hover{color:var(--vk-s-einschreiben);border-color:var(--vk-s-einschreiben)}
.vk-chips a[data-s="porto"]:hover{color:var(--vk-s-porto);border-color:var(--vk-s-porto)}
.vk-chips a[data-s="zoll"]:hover{color:var(--vk-s-zoll);border-color:var(--vk-s-zoll)}

/* ---------- Raster ---------- */
.vk-raster{max-width:var(--vk-breit);margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media(min-width:1040px){
  .vk-raster{grid-template-columns:minmax(0,var(--vk-text-breit)) var(--vk-seite);
    justify-content:center;gap:48px}
}
.vk-haupt{min-width:0;padding-bottom:56px}
.vk-krume{font-size:13px;color:var(--vk-muted);padding:24px 0 6px}
.vk-krume a{color:var(--vk-muted)}
.vk-tag{display:inline-block;font-size:13px;font-weight:640;color:var(--vk-silo);
  border:1.5px solid var(--vk-silo);border-radius:99px;padding:3px 12px;margin:0 0 14px}
.vk-lead{font-size:19px;color:var(--vk-muted);margin:0 0 22px}

/* ---------- Sidebar ---------- */
.vk-seite{min-width:0}
@media(min-width:1040px){.vk-seite-inner{position:sticky;top:20px}}
.vk-modul{background:var(--vk-karte);border:1px solid var(--vk-rand);border-radius:var(--vk-r);
  padding:18px;margin:0 0 20px}
.vk-modul h2{font-size:14px;font-weight:640;color:var(--vk-muted);margin:0 0 12px;
  letter-spacing:0;text-transform:none}
.vk-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.vk-toc li{margin:0 0 2px}
.vk-toc a{display:block;padding:6px 10px;border-radius:8px;font-size:15px;
  text-decoration:none;color:var(--vk-text);border-left:2px solid transparent}
.vk-toc a:hover{background:var(--vk-feld)}
.vk-toc a.aktiv{border-left-color:var(--vk-silo);background:var(--vk-feld);color:var(--vk-silo);font-weight:600}
.vk-toc .stufe-3 a{padding-left:24px;font-size:14px;color:var(--vk-muted)}
.vk-verwandt a{display:block;padding:10px 0;border-top:1px solid var(--vk-rand);
  text-decoration:none;color:var(--vk-text);font-weight:560;font-size:15px;line-height:1.35}
.vk-verwandt a:first-child{border-top:0;padding-top:0}
.vk-verwandt em{display:block;font-style:normal;font-size:13px;color:var(--vk-muted);font-weight:400;margin-top:2px}

/* ---------- Werbeplätze, feste Höhe gegen CLS ---------- */
.vk-werbung,.vk-werbung-seite{border:1px dashed var(--vk-rand);border-radius:var(--vk-r-s);
  display:flex;align-items:center;justify-content:center;color:var(--vk-muted);font-size:12px;
  letter-spacing:.02em;background:var(--vk-feld)}
.vk-werbung{min-height:280px;margin:34px 0}
.vk-werbung-seite{min-height:600px;margin:0}
@media(max-width:1039px){.vk-werbung-seite{min-height:280px}}

/* ---------- Startseite ---------- */
.vk-hero{padding:36px 0 8px}
.vk-hero h1{max-width:15ch}
.vk-einstiege{display:grid;grid-template-columns:1fr;gap:12px;margin:26px 0 8px}
@media(min-width:620px){.vk-einstiege{grid-template-columns:repeat(3,1fr)}}
.vk-einstieg{display:block;background:var(--vk-karte);border:1px solid var(--vk-rand);
  border-left:3px solid var(--vk-e,var(--vk-silo));border-radius:0 var(--vk-r-s) var(--vk-r-s) 0;
  padding:16px 18px;text-decoration:none;color:var(--vk-text)}
.vk-einstieg:hover{border-color:var(--vk-e,var(--vk-silo))}
.vk-einstieg strong{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:3px}
.vk-einstieg span{font-size:14px;color:var(--vk-muted)}
.vk-silos{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0}
@media(min-width:620px){.vk-silos{grid-template-columns:1fr 1fr}}

/* ---------- Tabellen und Boxen, falls Plugin fehlt ---------- */
table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0}
th,td{text-align:left;padding:11px 8px 11px 0;border-bottom:1px solid var(--vk-rand);vertical-align:top}
th{font-size:13px;color:var(--vk-muted);font-weight:600}

/* ---------- Fuß ---------- */
.vk-fuss{border-top:1px solid var(--vk-rand);background:var(--vk-karte);padding:28px 0;
  font-size:14px;color:var(--vk-muted)}
.vk-fuss-inner{max-width:var(--vk-breit);margin:0 auto;padding:0 20px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.vk-fuss a{color:var(--vk-muted);margin-right:14px}
.vk-fuss .vk-stand{font-family:var(--vk-mono);font-size:13px}

@media print{.vk-chips,.vk-seite,.vk-werbung,.vk-bar{display:none}}

/* ==========================================================
   Magazin-Übersicht — volle Breite, ohne Sidebar
   ========================================================== */
.vk-mag-wrap{padding-bottom:56px}
.vk-mag-innen{max-width:var(--vk-breit);margin:0 auto;padding:0 20px}

.vk-mag-kopf{border-bottom:1px solid var(--vk-rand);
  background:linear-gradient(180deg,color-mix(in srgb,var(--vk-silo) 9%,transparent),transparent);
  padding:34px 0 26px;margin-bottom:28px}
.vk-mag-kopf h1{margin:0 0 10px;max-width:18ch}
.vk-mag-kopf .vk-lead{max-width:62ch;margin:0 0 10px}
.vk-mag-zahl{font-family:var(--vk-mono);font-size:13px;color:var(--vk-muted);margin:0}

/* ---------- Aufmacher ---------- */
.vk-aufmacher{position:relative;border-radius:var(--vk-r);overflow:hidden;margin:0 0 20px;
  background:var(--vk-karte);border:1px solid var(--vk-rand)}
.vk-aufmacher a{display:block;position:relative;text-decoration:none;color:#fff;
  min-height:320px;display:flex;align-items:flex-end}
@media(min-width:900px){.vk-aufmacher a{min-height:420px}}
.vk-auf-bild{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.vk-auf-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,14,.05) 0%,rgba(6,9,14,.55) 48%,rgba(6,9,14,.92) 100%)}
.vk-auf-text{position:relative;padding:26px 24px 26px;max-width:64ch}
@media(min-width:900px){.vk-auf-text{padding:38px 40px 36px}}
.vk-auf-kicker{display:inline-block;font-family:var(--vk-mono);font-size:12px;
  color:#fff;background:var(--vk-silo);border-radius:99px;padding:4px 12px;margin-bottom:12px}
.vk-auf-titel{display:block;font-size:clamp(25px,4.2vw,40px);font-weight:700;letter-spacing:-.035em;
  line-height:1.06;color:#fff;margin-bottom:10px;text-wrap:balance}
.vk-auf-teaser{display:block;font-size:17px;line-height:1.5;color:rgba(255,255,255,.82);margin-bottom:16px}
.vk-auf-mehr{display:inline-block;font-size:15px;font-weight:640;color:#fff;
  border-bottom:2px solid var(--vk-silo);padding-bottom:2px}
.vk-aufmacher:hover .vk-auf-bild,.vk-aufmacher:focus-within .vk-auf-bild{transform:scale(1.035)}
.vk-aufmacher a:focus-visible{outline:2px solid #fff;outline-offset:-6px}

/* ---------- Kartenraster ---------- */
.vk-mag{display:grid;grid-template-columns:1fr;gap:20px;margin:0 0 8px}
@media(min-width:640px){.vk-mag{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vk-mag{grid-template-columns:repeat(3,1fr)}}

.vk-karte{background:var(--vk-karte);border:1px solid var(--vk-rand);border-radius:var(--vk-r);
  overflow:hidden;position:relative;display:flex;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.vk-karte-link{display:flex;flex-direction:column;text-decoration:none;color:var(--vk-text);width:100%}
.vk-karte::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:var(--vk-silo);transform:scaleX(.18);transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}

.vk-karte-bild{display:block;aspect-ratio:16/9;background:var(--vk-feld);background-size:cover;
  background-position:center;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
@supports not (aspect-ratio:16/9){.vk-karte-bild{height:190px}}
.vk-karte-marke{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--vk-silo);opacity:.2}
.vk-karte-marke svg{width:56px;height:56px}

.vk-karte-text{display:flex;flex-direction:column;flex:1;padding:16px 18px 16px}
.vk-karte-titel{display:block;font-size:19px;font-weight:660;letter-spacing:-.022em;line-height:1.24;
  margin-bottom:7px;transition:color .18s ease;text-wrap:balance}
.vk-karte-teaser{display:block;font-size:15px;color:var(--vk-muted);line-height:1.5;flex:1}
.vk-karte-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--vk-rand)}
.vk-karte-focus{font-family:var(--vk-mono);font-size:11px;color:var(--vk-silo);
  border:1px solid var(--vk-rand);border-radius:99px;padding:3px 9px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:70%;
  transition:border-color .18s ease, background .18s ease}
.vk-karte-datum{font-family:var(--vk-mono);font-size:11px;color:var(--vk-muted);white-space:nowrap}

.vk-karte:hover,.vk-karte:focus-within{border-color:var(--vk-silo);transform:translateY(-4px);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}
.vk-karte:hover::before,.vk-karte:focus-within::before{transform:scaleX(1)}
.vk-karte:hover .vk-karte-bild,.vk-karte:focus-within .vk-karte-bild{transform:scale(1.05)}
.vk-karte:hover .vk-karte-titel,.vk-karte:focus-within .vk-karte-titel{color:var(--vk-silo)}
.vk-karte:hover .vk-karte-focus,.vk-karte:focus-within .vk-karte-focus{border-color:var(--vk-silo);background:var(--vk-feld)}
.vk-karte-link:focus-visible{outline:2px solid var(--vk-silo);outline-offset:-4px;border-radius:var(--vk-r)}

.vk-werbung-band{min-height:250px;margin:32px 0 8px}

.vk-blaettern{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 8px}
.vk-blaettern a,.vk-blaettern span{display:inline-block;padding:8px 14px;border-radius:99px;
  border:1px solid var(--vk-rand);text-decoration:none;color:var(--vk-muted);font-size:15px}
.vk-blaettern .current{background:var(--vk-silo);border-color:var(--vk-silo);color:var(--vk-bg);font-weight:640}
.vk-blaettern a:hover{border-color:var(--vk-silo);color:var(--vk-silo)}

@media (prefers-reduced-motion:reduce){
  .vk-karte,.vk-karte::before,.vk-karte-bild,.vk-karte-titel,.vk-karte-focus,.vk-auf-bild{transition:none}
  .vk-karte:hover,.vk-karte:focus-within{transform:none}
  .vk-karte:hover .vk-karte-bild,.vk-karte:focus-within .vk-karte-bild,
  .vk-aufmacher:hover .vk-auf-bild{transform:none}
  .vk-karte::before{transform:scaleX(1)}
}

/* Kleines Kartenraster im Textbereich der Startseite */
.vk-mag-klein{grid-template-columns:1fr;gap:16px;margin:18px 0 8px}
@media(min-width:620px){.vk-mag-klein{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.vk-mag-klein{grid-template-columns:repeat(3,1fr)}}
.vk-mag-klein .vk-karte-titel{font-size:17px}
.vk-mag-klein .vk-karte-teaser{font-size:14px}

/* Gleichmäßige Kartenhöhen: Titel zwei Zeilen, Teaser drei. */
.vk-karte-titel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-karte-teaser{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vk-auf-titel{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vk-auf-teaser{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Sicherheitsnetz: Karten dürfen unter keinen Umständen wie Fließtext aussehen. */
.vk-karte-link,.vk-aufmacher a{text-decoration:none}
.vk-karte-link:hover,.vk-aufmacher a:hover{text-decoration:none}