/* voiceOne Gestaltung 2026 – Ergänzung für die Blogübersicht und die Blogartikel.
   Stand 08.10.2026. Wird NACH /css/vo-2026.css eingebunden: /css/vo-2026-blog.css?v=JJJJMMTT
   (30 Tage Zwischenspeicher, „unveränderlich“ – jede neue Fassung braucht eine neue Versionsnummer im Verweis).
   Fahrplan: senkrechte Linie von Haltepunkt zu Haltepunkt. Mitte aller Haltepunkte bei x = 7 px und
   y = 28 px über der Oberkante des Eintrags; die Linie (2 px) läuft von Mitte zu Mitte. */

/* Kopf der Blogseiten */
.blog-kopf h1{max-width:34ch}
.blog-kopf .kopf-grid.ohne-bild{grid-template-columns:minmax(0,1fr)}
.blog-kopf .kopf-grid.ohne-bild h1{max-width:40ch}
.blog-kopf .zeile+h1{margin-top:30px}
.blog-kopf .meta-zeile{align-items:center}
.blog-bild{margin:0;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(26,26,46,.35)}
.blog-bild img{width:100%;height:auto}
.blog-bild figcaption{font-size:12.5px;color:var(--ink-3);padding:9px 14px;border-top:1px solid var(--line-2);background:#FBFBF9}

/* Artikeltext: Elemente, die es nur in Blogartikeln gibt */
.text h4{font-size:17px;font-weight:600;letter-spacing:-.005em;margin:26px 0 0;color:var(--ink)}
.text blockquote{margin-top:22px;padding:2px 0 2px 20px;border-left:3px solid var(--blue)}
.text blockquote p{margin-top:0;color:var(--ink)}
.text blockquote p+p{margin-top:12px}
.text pre{margin-top:22px;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);font:14px/1.6 var(--mono);overflow-x:auto;white-space:pre;color:var(--ink)}
.text code{font-family:var(--mono);font-size:.88em}
.text img{margin-top:26px;border-radius:8px;border:1px solid var(--line)}
.text p img{margin-top:0}
.text .kasten{margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.text .kasten>:first-child{margin-top:0}
.text .kasten p,.text .kasten ul,.text .kasten ol{font-size:17px}
.text .kurz.fazit{margin:56px 0 0}
.text h2+.kurz.fazit{margin-top:22px}
.text .kurz ul,.text .kurz ol{margin-top:10px;font-size:17.5px;color:var(--ink)}
.text .kurz li{margin-top:6px}
.text .kurz p+p{margin-top:12px!important}
.tabelle-rahmen{margin-top:28px;overflow-x:auto}
.text .tabelle-rahmen .tabelle{margin-top:0;min-width:560px}

/* Fahrplan: Beiträge als Haltestellen auf einer senkrechten Linie */
.fahrplan{list-style:none;margin-top:44px;padding:0}
.fahrplan::before{content:"";display:block;margin-left:40px;border-top:1px solid var(--ink)}
.fahrplan li{position:relative;padding-left:40px}
.fahrplan li::before{content:"";position:absolute;left:0;top:21px;width:14px;height:14px;border-radius:50%;border:3px solid var(--blue);background:var(--paper);box-sizing:border-box;z-index:1;transition:background .2s}
.fahrplan li:first-child::before,.fahrplan li:last-child::before{left:-3px;top:18px;width:20px;height:20px;border:5px solid var(--ink)}
.fahrplan li:not(:last-child)::after{content:"";position:absolute;left:6px;top:28px;width:2px;height:100%;background:var(--blue)}
.fahrplan li:hover::before{background:var(--blue)}
.fahrplan li:first-child:hover::before,.fahrplan li:last-child:hover::before{background:var(--ink)}
.fahrplan a{display:block;padding:18px 0 20px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.fp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;font-size:13.5px;line-height:20px;color:var(--ink-3)}
.fp-meta time{font-family:var(--mono);font-size:13px;color:var(--blue-d);font-variant-numeric:tabular-nums}
.fp-meta .tag{line-height:1.45}
.fp-titel{display:block;margin-top:6px;font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.35;max-width:62ch;overflow-wrap:break-word}
.fahrplan a:hover .fp-titel,.fahrplan a:focus-visible .fp-titel{color:var(--blue-d);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.dunkel .fahrplan::before{border-top-color:#fff}
.dunkel .fahrplan a{color:#fff;border-bottom-color:rgba(255,255,255,.16)}

/* Neuester Beitrag */
.neu{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);margin-top:44px;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 30px 60px -40px rgba(26,26,46,.35)}
.neu img{width:100%;height:100%;object-fit:cover;border-right:1px solid var(--line)}
.neu-text{display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px}
.neu-titel{font-size:clamp(1.25rem,1.9vw,1.55rem);font-weight:600;letter-spacing:-.02em;line-height:1.25;overflow-wrap:break-word}
.neu-weiter{margin-top:auto;padding-top:6px;font-size:15px;font-weight:600;color:var(--blue-d)}
.neu:hover .neu-titel,.neu:focus-visible .neu-titel{color:var(--blue-d)}
.neu+.fahrplan{margin-top:36px}

/* Seitenzahlen als Haltestellen auf einer waagerechten Linie (Mitte bei y = 18 px) */
.seiten{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 24px;margin-top:44px}
.seiten ol{list-style:none;position:relative;display:flex;gap:12px;padding:0}
.seiten ol::before{content:"";position:absolute;left:18px;right:18px;top:17px;height:2px;background:var(--blue)}
.seiten li{position:relative}
.seiten a,.seiten .s-akt,.seiten .s-luecke{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--blue);background:var(--paper);font-size:14px;font-weight:600;line-height:1;text-decoration:none;color:var(--ink);font-variant-numeric:tabular-nums;box-sizing:border-box}
.seiten a:hover{background:var(--blue);color:#fff}
.seiten .s-akt{background:var(--blue);color:#fff}
.seiten .s-luecke{border-color:transparent;color:var(--ink-3)}
.seiten-wechsel{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:15px;font-weight:600}
.seiten-wechsel a{color:var(--blue-d);text-decoration:none}
.seiten-wechsel a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){.fahrplan li::before{transition:none}}
@media (max-width:820px){
  .neu{grid-template-columns:minmax(0,1fr)}
  .neu img{height:auto;border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .fp-titel{font-size:17.5px}
  .text .tabelle-rahmen .tabelle{min-width:0}
  .seiten ol{gap:8px}
  .seiten ol::before{left:16px;right:16px;top:15px}
  .seiten a,.seiten .s-akt,.seiten .s-luecke{width:32px;height:32px;font-size:13px}
  .neu-text{padding:18px 18px 20px}
}