/*
Theme Name: Klarheitscoach
Description: Datenblatt-Theme für klarheitscoach.ch. Registerspalte links, Sidebar rechts, Silo-Farben als Informationsträger. Ersetzt Twenty Nineteen und den Umgehungscode im Core-Plugin.
Author: Maik Möhring Media
Version: 1.5.1
Requires PHP: 7.4
Text Domain: klarheitscoach
*/

:root{
  --ink:#10243B; --ink-2:#3C4E60; --ink-3:#78808A;
  --paper:#F5F2EC; --karte:#FFFFFF; --line:#CBD1CA;
  --akzent:#C2571F; --akzent-bg:#F6E7DE; --stempel:#8A6A1F;
  --s-kosten:#1D5D74; --s-abzug:#C2571F; --s-abgrenzung:#5A6B7B;
  --s-anerkennung:#4A6B52; --s-ausbildung:#8A6A1F;
  --rail:15rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 Literata,Georgia,serif;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,nav,button,input,select,table,.ui,.zahl,.kkc-meta,.kkc-silo-label{
  font-family:Archivo,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
img{max-width:100%;height:auto}

/* Registerspalte */
.kc-wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.kc-rail{background:var(--ink);color:#DDE4EA;padding:1.4rem 1.1rem;position:sticky;top:0;height:100vh;
  overflow:auto;font-family:Archivo,sans-serif;font-size:.86rem}
.kc-marke{font-weight:700;font-size:1.06rem;color:#fff;letter-spacing:-.01em;line-height:1.2;
  text-decoration:none;display:block}
.kc-marke span{display:block;font-weight:400;font-size:.76rem;color:#8FA3B5;margin-top:.35rem}
.kc-rail nav{margin-top:1.6rem}
.kc-rail nav p{margin:1.3rem 0 .45rem;font-size:.7rem;letter-spacing:.1em;color:#6C8299;font-weight:600}
.kc-rail nav a{display:flex;justify-content:space-between;gap:.5rem;color:#DDE4EA;text-decoration:none;
  padding:.28rem 0 .28rem .6rem;border-left:3px solid transparent}
.kc-rail nav a:hover,.kc-rail nav a[aria-current]{color:#fff;border-left-color:var(--silo,#6C8299)}
.kc-rail nav a b{font-weight:500;color:#7D93A8;font-size:.78rem}
.kc-rail .kc-fuss{margin-top:2rem;font-size:.74rem;color:#6C8299;line-height:1.5}

.kkc-main,.kc-main{padding:2.2rem 3rem 5rem;max-width:74rem;margin:0}
.kc-footer{grid-column:2;padding:1.4rem 3rem 2.5rem;border-top:1px solid var(--line);
  font-family:Archivo;font-size:.84rem;color:var(--ink-3);display:flex;gap:1.4rem;flex-wrap:wrap}
.kc-footer a{color:var(--ink-2);text-decoration:none}

/* Beitrag mit Sidebar rechts */
.kc-artikel{display:grid;grid-template-columns:minmax(0,38rem) 17rem;gap:2.6rem;align-items:start}
.kc-side{position:sticky;top:1.5rem;font-family:Archivo;font-size:.9rem}
.kc-side .kc-box{background:var(--karte);border:1px solid var(--line);border-left:3px solid var(--silo,var(--ink));
  padding:.85rem 1rem;margin:0 0 1.1rem}
.kc-side .kc-box > p.t{margin:0 0 .5rem;font-size:.74rem;letter-spacing:.07em;color:var(--ink-3);font-weight:600}
.kc-side ol,.kc-side ul{margin:0;padding-left:1.1rem}
.kc-side li{padding:.2rem 0}
.kc-side a{text-decoration:none}
.kc-side a:hover{text-decoration:underline}
.kc-side .kc-mehr{margin:.7rem 0 0;font-weight:600}
.kc-werbung{background:var(--paper);border-left-color:var(--stempel)!important;min-height:6rem}

.kc-hero{margin:0 0 1.5rem}
.kc-hero img{width:100%;display:block;border:1px solid var(--line)}
.kc-hero figcaption{font-size:.85rem;color:var(--ink-3);padding-top:.45rem;font-family:Archivo}

.kc-post h1,.kkc-art h1{font-size:1.95rem;line-height:1.18;margin:0 0 1.1rem;
  letter-spacing:-.02em;font-weight:600;max-width:30ch}
.kc-post h2{font-size:1.22rem;font-weight:600;margin:2.4rem 0 .7rem;padding-top:.8rem;
  border-top:1px solid var(--silo,var(--line))}
.kc-post p{max-width:38rem}
.kc-meta{font-family:Archivo;font-size:.84rem;color:var(--ink-3);margin:0 0 1rem}

@media (max-width:1050px){
  /* Auf schmalen Schirmen steht die Sidebar im Quelltext nach dem Artikel.
     Das Inhaltsverzeichnis wäre dort nutzlos, deshalb rückt es per Reihenfolge nach oben. */
  .kc-artikel{display:flex;flex-direction:column}
  .kc-artikel .kc-side{order:-1}
  .kc-side .kc-box.kc-werbung{order:2}
  .kc-wrap{grid-template-columns:1fr}
  .kc-rail{position:static;height:auto}
  .kkc-main,.kc-main{padding:1.6rem 1.2rem 3rem}
  .kc-footer{grid-column:1;padding:1.4rem 1.2rem 2.5rem}
  .kc-artikel{grid-template-columns:1fr;gap:1.5rem}
  .kc-side{position:static}
}

/* ================= Inhalte aus dem Core-Plugin ================= */

/* Startseite */
.kc-hero-block{background:var(--ink);color:#fff;padding:2.4rem 2.2rem;margin:0 0 1.8rem}
.kc-hero-block h1{font-size:clamp(1.8rem,3.4vw,2.2rem);line-height:1.16;margin:0 0 .9rem;
  max-width:24ch;font-weight:600;letter-spacing:-.02em;color:#fff}
.kc-hero-block p{color:#B9C6D2;max-width:48ch;margin:0;font-size:1.02rem}
.kc-zaehler{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#22405F;margin-top:1.9rem}
.kc-zaehler div{background:var(--ink);padding:1rem 1.1rem}
.kc-zaehler b{display:block;font-family:Archivo;font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.kc-zaehler span{font-family:Archivo;font-size:.78rem;color:#8FA3B5}

.kc-silos{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:2rem}
.kc-silo{background:var(--karte);padding:1.1rem 1.2rem;border-top:4px solid var(--silo);
  text-decoration:none;display:block}
.kc-silo:hover{background:var(--paper)}
.kc-silo b{display:block;font-family:Archivo;font-size:1.02rem;font-weight:600;margin-bottom:.3rem}
.kc-silo span{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.kc-register-nav .kkc-links{list-style:none;padding:0;margin:0;font-family:Archivo}
.kc-register-nav li{border-bottom:1px solid var(--line);padding:.5rem 0}
.kc-register-nav a{text-decoration:none;font-weight:500}

/* Datenblatt-Kopf */
.kc-blatt{background:var(--karte);border:1px solid var(--line);border-top:4px solid var(--silo,var(--ink));
  padding:1.6rem 1.8rem;margin:0 0 1.6rem}
.kc-blatt h1{margin:0 0 1.2rem}
.kc-messwert{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.6rem;
  border-top:1px solid var(--line);padding-top:1.1rem}
.kc-zahl{font-family:Archivo;font-size:3.4rem;line-height:.95;font-weight:700;letter-spacing:-.03em;
  color:var(--silo,var(--ink))}
.kc-zahl small{display:block;font-size:.8rem;font-weight:500;letter-spacing:0;color:var(--ink-2);
  margin-top:.5rem;max-width:24ch;line-height:1.45}
.kc-beleg{font-family:Archivo;font-size:.82rem;color:var(--ink-2);line-height:1.55;max-width:26rem;
  background:var(--paper);padding:.75rem .9rem;border-left:3px solid var(--line)}
.kc-beleg b{color:var(--ink)}

/* Bausteine des Plugins */
.kkc-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .7rem;padding:0;
  font-family:Archivo;font-size:.85rem;color:var(--ink-3)}
.kkc-crumb li+li:before{content:"›";margin-right:.4rem;color:var(--line)}
.kkc-crumb a{text-decoration:none;color:var(--ink-2)}
.kkc-antwort{background:var(--akzent-bg);border-left:3px solid var(--akzent);padding:1rem 1.2rem;
  margin:0 0 1.5rem;max-width:42rem}
.kkc-tipp,.kkc-hinweis,.kkc-autor,.kkc-offen{background:var(--karte);border:1px solid var(--line);
  border-left:3px solid var(--ink-3);padding:.9rem 1.1rem;margin:1.2rem 0;max-width:42rem}
.kkc-hinweis{border-left-color:var(--stempel)}
.kkc-box-title{margin:0 0 .35rem;font-family:Archivo;font-size:.76rem;font-weight:600;
  letter-spacing:.07em;color:var(--ink-3)}
.kkc-antwort p:last-child,.kkc-tipp p:last-child,.kkc-hinweis p:last-child,.kkc-autor p:last-child{margin-bottom:0}
.kkc-meta{font-family:Archivo;font-size:.84rem;color:var(--ink-3);margin:0 0 .5rem}
.kkc-stempel{display:inline-block;font-family:Archivo;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  color:var(--stempel);border:1px solid var(--stempel);padding:.3rem .55rem}
.kkc-lead{font-size:1.1rem;color:var(--ink-2);max-width:44ch}
.kkc-disc{font-size:.85rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:.8rem;
  margin-top:2.2rem;max-width:42rem}
.kkc-dim{color:var(--ink-3);font-size:.9rem}

.kkc-art h2,.kkc-post-main h2{font-size:1.22rem;font-weight:600;margin:2.4rem 0 .7rem;
  padding-top:.8rem;border-top:1px solid var(--silo,var(--line))}
.kkc-art p{max-width:38rem}

.kkc-tab{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:.94rem;background:var(--karte)}
.kkc-tab caption{text-align:left;font-family:Archivo;font-size:.78rem;color:var(--ink-3);padding-bottom:.45rem}
.kkc-tab thead th{background:var(--ink);color:#fff;font-size:.76rem;font-weight:600;text-align:left;padding:.5rem .6rem}
.kkc-tab th,.kkc-tab td{border-bottom:1px solid var(--line);padding:.55rem .6rem;text-align:left;vertical-align:top}
.kkc-tab tbody th{width:44%;font-weight:500;color:var(--ink-2)}
.kkc-tab td{font-family:Archivo}
.kkc-quellen td{font-family:Literata,serif;font-size:.88rem}

.kkc-links{list-style:none;padding:0;margin:1rem 0}
.kkc-links li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.kkc-cols{list-style:none;padding:0;margin:1rem 0;columns:3;column-gap:2rem;font-family:Archivo;font-size:.93rem}
.kkc-cols li{break-inside:avoid;padding:.22rem 0}
.kkc-faq details{border-bottom:1px solid var(--line);padding:.55rem 0;max-width:42rem}
.kkc-faq summary{cursor:pointer;font-weight:600;font-family:Archivo}
.kkc-faq p{margin:.5rem 0 .2rem;color:var(--ink-2)}
.kkc-silo-label{font-family:Archivo;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  color:var(--silo,var(--ink-3));margin:0 0 .6rem}
.kkc-silo-label a{color:inherit;text-decoration:none;border-bottom:2px solid var(--silo,var(--line));padding-bottom:2px}

/* Rechner */
.kkc-tool{background:var(--karte);border:1px solid var(--line);border-left:3px solid var(--silo,var(--akzent));
  padding:1.1rem 1.2rem;margin:0 0 1.6rem;max-width:44rem}
.kkc-feld{display:grid;grid-template-columns:1fr 12rem;gap:.7rem;align-items:center;margin-bottom:.6rem}
.kkc-feld label{font-family:Archivo;font-size:.92rem;color:var(--ink-2)}
.kkc-feld select,.kkc-feld input{font:500 .96rem Archivo;padding:.45rem .55rem;border:1px solid var(--line);
  background:#fff;width:100%}
.kkc-feld input{text-align:right}
.kkc-ergebnis{margin-top:1rem;border-top:1px solid var(--line);padding-top:.5rem}
.kkc-tool-fuss,.kkc-basis{font-family:Archivo;font-size:.84rem;color:var(--ink-3);line-height:1.5}
.kkc-warn-t{color:var(--stempel);font-size:.9rem}

@media (max-width:900px){
  .kc-zaehler{grid-template-columns:1fr}
  .kkc-cols{columns:1}
  .kkc-feld{grid-template-columns:1fr}
}

/* ================= Kacheln und Register ================= */
.kc-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem;margin:1.4rem 0 2rem}
.kc-kacheln-schmal{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.7rem}
.kc-kachel{background:var(--karte);border:1px solid var(--line);border-top:4px solid var(--silo);
  padding:.95rem 1.05rem;text-decoration:none;display:block;transition:border-color .12s ease}
a.kc-kachel:hover{border-color:var(--silo)}
.kc-kachel i{font-style:normal;font-family:Archivo;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  color:var(--silo);display:block;margin-bottom:.35rem}
.kc-kachel b{display:block;font-family:Archivo;font-size:1rem;font-weight:600;line-height:1.3;margin-bottom:.35rem}
.kc-kachel span{display:block;font-size:.87rem;color:var(--ink-2);line-height:1.5}
.kc-kachel u{display:block;text-decoration:none;font-family:Archivo;font-size:1.5rem;font-weight:700;
  letter-spacing:-.02em;color:var(--silo);margin:.15rem 0 .2rem}
.kc-kachel-daten span{font-size:.82rem;color:var(--ink-3)}

.kc-register{columns:3;column-gap:2rem;font-family:Archivo;font-size:.93rem;margin:.6rem 0 1.8rem}
.kc-register a{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;
  border-bottom:1px solid var(--line);text-decoration:none;break-inside:avoid}
.kc-register a:hover{border-bottom-color:var(--silo)}
.kc-register a b{font-weight:600;color:var(--silo)}

@media (max-width:900px){
  .kc-register{columns:1}
  .kc-kacheln{grid-template-columns:1fr}
  .kc-kacheln-schmal{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
}

/* ================= Magazin-Raster ================= */
.kc-abschnitt{font-size:1.22rem;font-weight:600;margin:2.4rem 0 1rem;padding-top:.8rem;
  border-top:2px solid var(--ink)}
.kc-mag{margin:1.2rem 0 2.4rem}
.kc-mag-kopf{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.2rem;margin-bottom:1.2rem}
.kc-mag-neben{display:grid;gap:1.2rem;align-content:start}
.kc-mag-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem}

.kc-mag-item{display:block;text-decoration:none;background:var(--karte);border:1px solid var(--line);
  transition:border-color .12s ease}
.kc-mag-item:hover{border-color:var(--silo)}
.kc-mag-bild{display:block;position:relative;overflow:hidden;background:var(--paper);
  border-bottom:4px solid var(--silo)}
.kc-mag-bild img{display:block;width:100%;height:100%;object-fit:cover}
.kc-mag-leer{background:linear-gradient(160deg,var(--ink) 0%,var(--silo) 180%)}
.kc-mag-text{display:block;padding:.9rem 1.05rem 1.05rem}
.kc-mag-text i{font-style:normal;font-family:Archivo;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  color:var(--silo);display:block;margin-bottom:.35rem}
.kc-mag-text b{display:block;font-family:Archivo;font-weight:600;line-height:1.28;
  letter-spacing:-.01em;margin-bottom:.35rem}
.kc-mag-text span{display:block;font-size:.88rem;color:var(--ink-2);line-height:1.5}

.kc-mag-gross .kc-mag-bild{aspect-ratio:16/9}
.kc-mag-gross .kc-mag-text b{font-size:1.4rem}
.kc-mag-gross .kc-mag-text span{font-size:.98rem}
.kc-mag-klein{display:grid;grid-template-columns:7.5rem minmax(0,1fr)}
.kc-mag-klein .kc-mag-bild{height:100%;min-height:5.2rem;border-bottom:0;border-right:4px solid var(--silo)}
.kc-mag-klein .kc-mag-text{padding:.7rem .85rem}
.kc-mag-klein .kc-mag-text b{font-size:.98rem}
.kc-mag-klein .kc-mag-text span{display:none}
.kc-mag-mittel .kc-mag-bild{aspect-ratio:16/9}
.kc-mag-mittel .kc-mag-text b{font-size:1.06rem}

@media (max-width:900px){
  .kc-mag-kopf{grid-template-columns:1fr}
  .kc-mag-klein{grid-template-columns:6rem minmax(0,1fr)}
  .kc-mag-reihe{grid-template-columns:1fr}
}

/* Bildmarke: fünf gestaffelte Registerkarten, eine je Silo */
.kc-mark{display:block;margin:0 0 .7rem;max-width:5.4rem}
.kc-mark i{display:block;height:.42rem;margin-bottom:.16rem;border-radius:0}
.kc-wort{display:block;font-weight:700;font-size:1.06rem;color:#fff;letter-spacing:-.01em;line-height:1.2}
.kc-claim{display:block;font-weight:400;font-size:.76rem;color:#8FA3B5;margin-top:.35rem;line-height:1.4}
.kkc-werkzeug-link{display:inline-block;background:var(--silo,var(--akzent));color:#fff;
  padding:.55rem .95rem;text-decoration:none;font-family:Archivo;font-weight:600;font-size:.95rem}
.kkc-werkzeug-link:hover{color:#fff;opacity:.9}