/* Blog (Redesign 2026-09, Entwurf "Wissenszentrum").

   Eigenes Stylesheet und bewusst nicht in style.css eingearbeitet, aus demselben Grund wie bei
   home.css: die alte Datei bedient die uebrigen Unterseiten und belegt dieselben Klassennamen
   (.header, .container, .logo, .post-info) fuer voellig andere Bausteine. Beide gleichzeitig
   geladen wuerden sich gegenseitig zerlegen.

   Quelle: homepage-v2/entwuerfe-blog/a-wissenszentrum.html. Aenderungen bitte dort und hier,
   sonst laufen Entwurf und Auslieferung auseinander.

   Enthaelt bereits die Regeln fuer die Uebersichtsseite (.khead, .answers, .clusters, .freshgrid).
   Die Seite selbst kommt mit Schritt 3, bis dahin laeuft blog/index.php noch auf style.css.
*/

@font-face{font-family:"Open Sans";src:url("font/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("font/OpenSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("font/OpenSans-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("font/Caveat-Medium.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#222831; --ink-2:#31363F; --muted:#5B6E70; --faint:#8A9C9D;
  --teal:#76ABAE; --teal-deep:#3F7377; --teal-dark:#2C5457; --teal-soft:#DCEAEB;
  --paper:#FFFFFF; --ground:#F5F8F8; --sunken:#EEF3F3; --line:#DCE6E6; --line-soft:#E9F0F0;
  --good:#3F7D53; --good-soft:#E3F0E6; --warn:#B9822F; --warn-soft:#F6ECDA; --crit:#B84B3B; --crit-soft:#F6E1DD;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace;
  --shadow-soft:0 1px 2px rgba(34,40,49,.05), 0 12px 30px -16px rgba(34,40,49,.16);
  --r:10px; --r-lg:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800;line-height:1.13;letter-spacing:-.026em}
p{margin:0}
a{color:var(--teal-dark)}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:26px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep)}
/* Trenner zwischen zwei Angaben in einer Beschriftung, z.B. Themenfeld und Aufhaenger
   ueber der Ueberschrift eines Beitrags. Eigener Abstand, weil das grosse letter-spacing
   der Beschriftung sonst rechts vom Punkt deutlich mehr Luft laesst als links. */
.label .sep{margin:0 .2em 0 .45em;opacity:.5}
.num{font-variant-numeric:tabular-nums}
.sect{padding:64px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700;
  text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.btn-sm{padding:8px 15px;font-size:13.5px}
.btn-md{padding:13px 25px;font-size:15px}
.btn-primary{background:var(--teal-deep);color:#fff}
.btn-primary:hover{background:var(--teal-dark)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--faint);background:var(--ground)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--teal-soft)}

/* ---------- Navigation (identisch zur Startseite) ---------- */
.nav{position:sticky;top:0;z-index:60;height:58px;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line-soft)}
.nav-in{height:100%;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink)}
.brand img{width:24px;height:24px}
.nav-links{display:flex;gap:24px}
.nav-links a{font-size:14px;color:var(--muted);text-decoration:none;font-weight:400}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a.on{font-weight:700}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-login{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}

/* ---------- Kopf des Wissenszentrums ---------- */
.khead{background:linear-gradient(180deg,var(--ground) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line-soft);padding:58px 0 46px}
.khead h1{font-size:clamp(31px,4vw,45px);letter-spacing:-.035em;margin-top:14px;max-width:19ch}
.khead .lead{margin-top:16px;font-size:17.5px;color:var(--muted);max-width:60ch;line-height:1.66}
.kstats{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.kstat b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em}
.kstat span{font-size:12.5px;color:var(--faint)}

/* ---------- Antwortindex: das GEO-Herzstueck ---------- */
/* Abstand nach oben liegt hier und nicht am Absatz darueber: der Absatz ist abschaltbar
   (hub_answers_text), ohne ihn soll der Abstand trotzdem stehen. */
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:30px}
.answer{border-top:1px solid var(--line);padding:22px 0}
.answer h3{font-size:16.5px;line-height:1.35}
.answer p{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.62}
.answer a{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:13px;
  font-weight:700;text-decoration:none;color:var(--teal-dark)}
.answer a:hover{color:var(--ink)}
.answer a::after{content:"→";font-weight:400}

/* ---------- Themenfelder ---------- */
/* Abstand nach oben wie bei .answers: der Absatz darueber ist abschaltbar (hub_topics_text). */
.clusters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.cluster{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 18px;background:var(--paper);
  display:flex;flex-direction:column}
.cluster:hover{border-color:var(--teal)}
.cluster-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cluster h3{font-size:16.5px}
.cluster-n{font-family:var(--mono);font-size:11px;color:var(--faint);flex:none}
.cluster p{margin-top:8px;font-size:13.5px;color:var(--faint);line-height:1.6}
.cluster ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.cluster li a{display:block;padding:7px 0;font-size:13.5px;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--line-soft)}
.cluster li a:hover{color:var(--teal-dark)}
.cluster .more{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--teal-deep);text-decoration:none}
/* Die eigenen Auswertungen bekommen die volle Breite. Sieben Felder gehen in einem
   Dreierraster sonst als einzelne Karte in der letzten Zeile unter, und ausgerechnet
   die Primaerquellen sind das, was von aussen zitiert wird. */
.cluster-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px 40px;align-items:center;border-color:var(--teal);background:#fbfdfd}
.cluster-wide p{max-width:52ch}
.cluster-wide ul{margin-top:0}

/* ---------- Neu und aktualisiert ---------- */
.freshgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.prow:hover h3{color:var(--teal-dark)}
.prow time{font-family:var(--mono);font-size:11px;color:var(--faint)}
.prow h3{font-size:15.5px;line-height:1.42;font-weight:700}
.prow .kick{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px;letter-spacing:0}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;flex:none}
.badge-upd{background:var(--good-soft);color:var(--good)}
.badge-new{background:var(--teal-soft);color:var(--teal-dark)}
.rail{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--ground)}
.rail h3{font-size:15px;margin-bottom:12px}
.rail p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.rail ol{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.rail ol a{color:var(--ink);text-decoration:none;font-weight:600}
.rail ol a:hover{color:var(--teal-dark)}

/* ---------- Beitragsseite ---------- */
.crumbs{font-size:12.5px;color:var(--faint);padding:22px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 7px}

/* padding-block und nicht die Kurzform padding: sonst setzt sie padding-inline aus .wrap auf 0,
   und dieses Raster lief als einziges bis an den Rand, waehrend alles andere 26px eingerueckt war. */
.art-grid{display:grid;grid-template-columns:212px minmax(0,1fr) 268px;gap:52px;
  align-items:start;padding-block:28px 76px}
.toc{position:sticky;top:82px}
.toc h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px;font-weight:800}
.toc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;font-size:13px;line-height:1.45;color:var(--muted);text-decoration:none;
  padding:6px 0 6px 13px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink);border-left-color:var(--faint)}
.toc a.on{color:var(--teal-dark);font-weight:700;border-left-color:var(--teal-deep)}
/* Gehoert zum dynamischen Verzeichnis (blog/inc_toc.php), das der Entwurf nicht hat: solange
   es nicht gefuellt ist, bleibt die Spalte stehen, damit das dreispaltige Raster nicht
   verrutscht. Schmal steht es ohnehin ueber dem Text, dort darf es ganz verschwinden. */
.toc.is-empty{visibility:hidden}

.art h1{font-size:clamp(28px,3.5vw,40px);letter-spacing:-.033em;line-height:1.1;margin-top:12px}
.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding-bottom:22px;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.art-meta img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.art-meta b{color:var(--ink)}
.art-meta .dot{color:var(--line)}

/* Kurzantwort: das Feld, aus dem Antwortmaschinen zitieren */
.kurz{margin-top:28px;border:1px solid var(--teal);border-left-width:3px;border-radius:var(--r);
  background:var(--teal-soft);padding:22px 24px}
.kurz h2{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-dark);font-weight:800}
.kurz p{margin-top:11px;font-size:16.5px;line-height:1.62;color:var(--ink)}

.facts{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts h2{font-size:14px;padding:13px 18px;background:var(--ground);border-bottom:1px solid var(--line)}
.facts dl{margin:0;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr)}
.facts dt,.facts dd{margin:0;padding:11px 18px;font-size:14px;border-bottom:1px solid var(--line-soft)}
.facts dt{color:var(--muted);background:#fbfdfd}
.facts dd{font-weight:600}
.facts dl>*:nth-last-child(-n+2){border-bottom:0}

.body{margin-top:34px;font-size:16.5px;line-height:1.75;max-width:70ch}
.body h2{font-size:24px;margin:40px 0 14px;letter-spacing:-.028em;scroll-margin-top:80px}
.body h3{font-size:18px;margin:28px 0 10px}
.body p{margin-bottom:17px;color:#2c343d}
.body ul,.body ol{margin:0 0 18px;padding-left:22px;color:#2c343d}
.body li{margin-bottom:7px}
.body a{color:var(--teal-dark);text-underline-offset:3px}
.body figure{margin:26px 0}
.body figcaption{margin-top:9px;font-size:12.5px;color:var(--faint)}
.dtable{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.dtable th,.dtable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--ground);font-size:12.5px;letter-spacing:.02em;border-bottom:1px solid var(--line)}
.dtable td.n{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Inhalte aus dem Beitragsfeld bringen keine eigenen Huellen mit. Der Bestand nutzt
   <table class="styled">, kuenftige Beitraege koennen alles Moegliche einsetzen. Damit nichts
   ungestylt oder ueber den Rand hinaus steht, bekommen die gaengigen Bausteine hier eine
   Grundform. Schmal duerfen Tabellen fuer sich waagerecht rollen, statt die ganze Seite zu
   schieben (Regel weiter unten im Abschnitt fuer schmale Geraete). */
.body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.body th,.body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.body thead th{background:var(--ground);font-size:12.5px;border-bottom:1px solid var(--line)}
.body img{border-radius:var(--r);margin:22px 0}
.body pre{overflow-x:auto;background:var(--ground);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;font-size:13.5px}
.body blockquote{margin:24px 0;padding:2px 0 2px 20px;border-left:3px solid var(--teal);
  color:var(--muted)}
.body iframe,.body video{max-width:100%}

.note{margin:24px 0;border-left:3px solid var(--warn);background:var(--warn-soft);
  padding:16px 20px;border-radius:0 var(--r) var(--r) 0}
.note b{display:block;margin-bottom:5px;font-size:14px}
.note p{font-size:14.5px;color:#5a4a2c;margin:0;line-height:1.62}

/* FAQ am Beitragsende, speist zugleich das FAQPage-Schema */
.faq{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}
.faq h2{font-size:22px;margin-bottom:6px}
.faq details{border-bottom:1px solid var(--line-soft);padding:15px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;display:flex;
  justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--faint);font-size:18px;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:11px;font-size:15px;color:var(--muted);line-height:1.66;max-width:68ch}

.sources{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.sources h2{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:800;margin-bottom:14px}
.sources ol{margin:0;padding-left:20px;font-size:13.5px;color:var(--muted);line-height:1.7}

.authorbox{margin-top:38px;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  display:flex;gap:18px;align-items:flex-start;background:var(--ground)}
.authorbox img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none}
.authorbox h3{font-size:16px}
.authorbox .role{font-size:12.5px;color:var(--teal-deep);font-weight:700;margin-top:2px}
.authorbox p{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.62}

/* Rechte Schiene */
/* Klebt durchgehend. Die beiden Bloecke sind zusammen rund 660px hoch, das passt bei
   ueblichen Fensterhoehen bequem unter die Kopfleiste. Wird das Fenster flacher, rollt die
   Leiste in sich selbst, statt das Kleben abzuschalten: so bleibt der Knopf am Ende der
   Produktkarte in jedem Fall erreichbar. Oberhalb von rund 760px Fensterhoehe erscheint gar
   kein Rollbalken, weil der Inhalt dann kuerzer ist als der erlaubte Platz.
   Das seitliche Polster mit negativem Aussenabstand verhindert, dass der Rollbereich den
   Schatten der Produktkarte links und rechts abschneidet. */
.side{position:sticky;top:82px;display:flex;flex-direction:column;gap:18px;
  max-height:calc(100vh - 100px);overflow-y:auto;
  padding-inline:8px;margin-inline:-8px;scrollbar-width:thin}
/* Ohne das schrumpfen die beiden Bloecke auf die erlaubte Hoehe zusammen, statt
   ueberzulaufen: Flex-Kinder haben von Haus aus flex-shrink:1. Die Produktkarte wuerde dann
   von innen beschnitten (sie traegt overflow:hidden fuer ihre runden Ecken) und der Knopf
   verschwaende, ohne dass ein Rollbalken erscheint. */
.side > *{flex:none}
.cta-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow-soft)}
.cta-card .top{background:var(--ink);color:#fff;padding:18px 20px}
.cta-card .top h3{font-size:16px;color:#fff}
.cta-card .top p{margin-top:7px;font-size:13px;color:#9FB2B3;line-height:1.55}
.cta-card .bd{padding:18px 20px}
.cta-card ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cta-card li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.cta-card li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--teal-soft);
  box-shadow:inset 0 0 0 2px var(--teal-deep);flex:none;margin-top:3px}
.cta-card .btn{width:100%}
.rel{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.rel h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px;font-weight:800}
.rel a{display:block;font-size:13.5px;line-height:1.45;color:var(--ink);text-decoration:none;
  padding:9px 0;border-top:1px solid var(--line-soft)}
.rel a:first-of-type{border-top:0;padding-top:0}
.rel a:hover{color:var(--teal-dark)}

/* ---------- Schluss ---------- */
.endcta{background:var(--ink);color:#fff;padding:66px 0}
.end-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.endcta h2{font-size:clamp(25px,3.2vw,34px);color:#fff;max-width:20ch}
.endcta p{color:#93A6A7;margin-top:12px;max-width:46ch;font-size:15.5px}
.footer{background:var(--ink-2);color:#9FB2B3;padding:32px 0 28px;font-size:13.5px}
.footer-in{display:flex;align-items:center;gap:16px 30px;flex-wrap:wrap}
.footer .brand{color:#fff;font-size:15.5px}
.footer .brand img{width:22px;height:22px}
.footer nav{display:flex;gap:8px 20px;flex-wrap:wrap;margin-left:auto}
.footer nav a,.footer nav button{color:#9FB2B3;text-decoration:none;background:none;border:0;padding:0;
  font:inherit;cursor:pointer}
.footer nav a:hover,.footer nav button:hover{color:#fff}
/* Textlink-Optik fuer die Aidbase-Elemente (Kontaktformular), die keine echten Links sind. */
.fake-link{color:var(--teal-dark);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.footer .fake-link{color:#9FB2B3;text-decoration:none}
.footer .fake-link:hover{color:#fff}
.footer-legal{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;gap:8px 22px;flex-wrap:wrap;font-size:12.5px;color:#7E9293}

[hidden]{display:none!important}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .art-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{position:static;margin-bottom:26px;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
  .toc.is-empty{display:none}
  .side{position:static;margin-top:34px}
  .clusters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cluster-wide{grid-template-columns:minmax(0,1fr);gap:0}
  .freshgrid{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media (max-width:760px){
  .nav-links{display:none}
  .answers{grid-template-columns:minmax(0,1fr)}
  .clusters{grid-template-columns:minmax(0,1fr)}
  .sect{padding:46px 0}
  .wrap{padding-inline:18px}
  .prow{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .prow time{grid-column:1/-1}
  .facts dl{grid-template-columns:minmax(0,1fr)}
  .facts dt{border-bottom:0;padding-bottom:0;background:none}
  .body{font-size:16px}
  /* Tabellen aus dem Beitragsfeld rollen fuer sich, statt die Seite zu schieben. */
  .body table{display:block;overflow-x:auto;white-space:normal}
  .authorbox{flex-direction:column}
}