/* hilfmirmal v11 · Paket blog: Hub „Wissen“ (blog/index.html), Artikel (blog/<slug>.html) und Themenseiten
   (<slug>.html im Webroot). Wird über das Frontmatter (css: [assets/v11/blog.css]) nach schale.css und seite.css
   geladen und nutzt deren Variablen (Tokens aus designsystem/tokens.json, definiert in seite.css auf :root).
   Keine eigenen Farbwerte: nur var(--…). Die Abbildungen in № 001 tragen ihre Farben im SVG (beim Import auf
   Tokens umgestellt, siehe quellen/blog/README.md).
   Gliederung: gemeinsame Bausteine, Hub, Artikel, Themenseiten, Bewegung, Druck. */

/* ---------- gemeinsame Bausteine ---------- */
.wissen-h2{font-family:var(--serif);font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);font-weight:400;line-height:1.05;letter-spacing:-.005em;margin:0 0 1.3rem;text-wrap:balance}
.wissen-abschnitt{padding-block:clamp(1.4rem,4vh,2.8rem)}
.wissen-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.4rem;max-width:58rem}
/* Karte mit ganzflächigem Link (Titel-Link spannt sich über die Karte) */
.wissen-karte{position:relative;padding:clamp(1.3rem,1rem + 1.2vw,2rem);background:var(--sky-air);border-radius:26px;box-shadow:var(--card-shadow)}
.wissen-karte-art{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.wissen-karte-titel{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);line-height:1.08;margin-top:.45rem;text-wrap:balance}
.wissen-karte-titel a{color:var(--ink);text-decoration:none}
.wissen-karte-titel a::after{content:"";position:absolute;inset:0;border-radius:26px}
.wissen-karte-titel a:focus-visible{outline:none}
.wissen-karte:focus-within{outline:2px solid var(--blue);outline-offset:4px}
.wissen-karte:hover .wissen-karte-titel a{color:var(--blue-deep)}
.wissen-karte-text{margin-top:.7rem;color:var(--ink-2);font-size:.98rem;line-height:1.5}

/* ---------- Hub ---------- */
.wissen-kopf{padding-bottom:clamp(20px,4vh,44px)}
.wissen-kopf .dm{margin-top:1.8rem}
.notizen{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;max-width:58rem}
.notiz{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.6rem clamp(1.2rem,1rem + 2.4vw,3rem);padding:clamp(1.4rem,1rem + 2vw,2.6rem);background:var(--paper);border-radius:26px;box-shadow:var(--card-shadow)}
.notiz:focus-within{outline:2px solid var(--blue);outline-offset:4px}
/* Große Nummer wie eine Ausgabe: № klein darüber, Ziffern in Instrument Serif */
.notiz-nummer{margin:0;font-family:var(--serif);font-size:clamp(3.6rem,2.2rem + 5vw,7.2rem);line-height:.82;letter-spacing:-.02em;color:var(--blue-deep);white-space:nowrap}
.notiz-zeichen{display:block;margin-bottom:.35rem;font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.14em;line-height:1;color:var(--blue-deep)}
.notiz-text{min-width:0}
.notiz-meta{display:flex;flex-wrap:wrap;gap:.2rem .55rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.notiz-meta>:not(:last-child)::after{content:"·";margin-left:.55rem;color:var(--ink-3)}
.notiz-titel{margin-top:.7rem;font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.2rem + 2.2vw,3.1rem);line-height:1.04;letter-spacing:-.005em;text-wrap:balance}
.notiz-link{color:var(--ink);text-decoration:none}
.notiz-link::after{content:"";position:absolute;inset:0;border-radius:26px}
.notiz-link:focus-visible{outline:none}
.notiz-auszug{margin-top:.9rem;max-width:34rem;color:var(--ink-2);line-height:1.55}
/* sieht aus wie ein Konturknopf, ist aber nur Teil der Karte (der Link ist der Titel) */
.notiz-weiter{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;margin-top:1.4rem;padding:.7rem 1.4rem;border:1.5px solid var(--ink);border-radius:999px;font-weight:600;font-size:1rem;line-height:1.2;color:var(--ink);transition:background-color .3s,border-color .3s,color .3s}
.notiz-weiter::after{content:"";flex:none;width:.42rem;height:.42rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.notiz:hover .notiz-weiter,.notiz:focus-within .notiz-weiter{background:var(--ink);color:var(--paper)}
.notiz:hover .notiz-link{color:var(--blue-deep)}
.wissen-ende{padding-bottom:clamp(48px,8vh,96px)}
.wissen-ende .erstgespraech{margin-top:clamp(1rem,3vh,2rem)}
.wissen-weiter{margin-top:1.6rem}
.wissen-feed{max-width:40rem;margin-top:1.4rem;font-size:.92rem;color:var(--ink-2)}
.wissen-feed a{color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.wissen-feed a:hover{color:var(--blue)}

/* ---------- Artikel ---------- */
.artikel-kopf{padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(16px,3vh,32px)}
.artikel-titel{font-size:clamp(2.5rem,1rem + 4.4vw,5.4rem);max-width:12.5em}
/* betonte Wörter aus № 001: .blue kursiv in Markenblau, .outline kursiv mit hellblauer Linie */
.artikel .blue{font-style:italic;color:var(--blue)}
.artikel .outline{font-style:italic;text-decoration:underline;text-decoration-color:var(--sky-2);text-decoration-thickness:.06em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.artikel-titel sup{position:relative;top:-1.7em;margin-left:.2em;font-family:var(--sans);font-size:.2em;font-weight:600;letter-spacing:.08em;line-height:0;vertical-align:baseline;color:var(--blue-deep)}
.artikel-lead{max-width:36em}
.artikel-meta{display:flex;align-items:center;gap:.8rem;margin-top:1.8rem;font-size:.88rem;color:var(--ink-2)}
.artikel-meta .dm-avatar{width:40px;height:40px}
.artikel-meta-text{display:flex;flex-wrap:wrap;gap:.1rem .55rem}
.artikel-meta-text>:not(:last-child)::after{content:"·";margin-left:.55rem;color:var(--ink-3)}
.artikel-meta-name{font-weight:600;color:var(--ink)}
.artikel-rumpf{padding-bottom:clamp(16px,3vh,32px)}
.artikel-rumpf>.artikel-text{padding-bottom:0}
/* Lesebreite 40rem (seite.css .prosa), Abbildungen, Inhaltsverzeichnis und Kasten etwas breiter */
.artikel-text>figure,.artikel-text>.toc,.artikel-text>.callout{max-width:48rem}
.artikel-text figure{margin:2.2em 0 0}
.artikel-text figure svg{width:100%;height:auto;border-radius:20px;box-shadow:var(--card-shadow)}
.artikel-text figcaption{max-width:40rem;margin-top:.9rem;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.artikel-text :is(p,li,figcaption) em{color:inherit}
.artikel-text>h2:first-of-type{margin-top:2em}
/* Kapitelmarke „№ 01 ─ Erkunden & Planen“: Kicker mit Haarlinie darüber */
.artikel-text .section-num{display:block;margin-top:3.4em;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.artikel-text .section-num strong{color:var(--ink);font-weight:700}
.artikel-text .section-num+h2{margin-top:.55em}
.artikel-text p>.btn{margin-top:.2rem}
.artikel-text .btn .arrow{font-weight:400}
/* Inhaltsverzeichnis „In diesem Eintrag“ */
.artikel-text .toc{margin-top:2em;padding:clamp(1.2rem,1rem + 1vw,1.8rem);background:var(--paper);border-radius:24px;box-shadow:var(--bubble-shadow)}
.artikel-text .toc h4{margin:0 0 .6rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.artikel-text .toc ol{margin:0;padding-left:1.5em;columns:2 15rem;column-gap:2.4rem}
.artikel-text .toc li{break-inside:avoid;margin:0;padding:.15rem 0}
.artikel-text .toc li::marker{color:var(--ink-3);font-size:.9em}
.artikel-text .toc a{display:inline-block;padding:.3rem 0;color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.artikel-text .toc a:hover{color:var(--blue)}
/* Schlusskasten mit Erstgespräch */
.artikel-text .callout{margin-top:2.4em;padding:clamp(1.3rem,1rem + 1.4vw,2.2rem);background:var(--sky-air);border-radius:26px;box-shadow:var(--card-shadow)}
.artikel-text .callout h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);line-height:1.1;text-wrap:balance}
.artikel-text .callout p{margin-top:.8em;color:var(--ink-2)}
.artikel-text .callout .artikel-aktion{margin-top:1.3rem}
.artikel-text .artikel-zeile{font-size:.74rem;font-weight:600;letter-spacing:.12em;line-height:1.6;text-transform:uppercase;color:var(--ink-2)}
.artikel-fuss{padding-bottom:clamp(48px,8vh,96px)}
.artikel-thema{max-width:40rem;margin-bottom:1.4rem;color:var(--ink-2)}
.artikel-thema a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:.2em}
.artikel-autor{align-items:flex-start}
.autor-inhalt{min-width:0}
.autor-rolle{margin-top:.1rem;font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--blue-deep)}
.autor-inhalt .autor-text{margin-top:.55rem;line-height:1.5}
.autor-links{margin-top:.4rem;font-size:.95em}
.autor-links a{display:inline-block;padding:.35rem 0;color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.autor-links a:hover{color:var(--blue)}
.autor-stand{margin-top:.2rem;font-size:.82rem;color:var(--ink-3)}
.artikel-weiter{margin-top:2rem}

/* ---------- Themenseiten ---------- */
.thema-titel{max-width:12em}
.fuer-wen{max-width:40rem;margin-bottom:clamp(1.4rem,4vh,2.4rem);padding:clamp(1.2rem,1rem + 1vw,1.8rem);background:var(--sky-air);border-radius:24px;box-shadow:var(--bubble-shadow)}
.fuer-wen-titel{margin-bottom:.8rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.fuer-wen-liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fuer-wen-liste li{position:relative;padding-left:1.7rem;line-height:1.45}
.fuer-wen-liste li::before{content:"";position:absolute;left:0;top:.42em;width:.72rem;height:.72rem;border-radius:50%;background:var(--sky-2);box-shadow:0 0 0 3px var(--sky)}
.fuer-wen .platzhalter{margin-top:1.1rem}
.thema-text>.platzhalter{margin-top:1em}
.thema-mehr{padding-bottom:1rem}
.thema-mehr-liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;max-width:40rem}
.thema-mehr-liste a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:.2em}
.thema-mehr-liste time{margin-left:.4rem;font-size:.86rem;color:var(--ink-3)}
.thema-ende{padding-bottom:clamp(28px,5vh,56px)}
.thema-ende .erstgespraech{margin-top:0}

/* ---------- schmale Bildschirme ---------- */
@media (max-width:640px){
  .notiz{grid-template-columns:minmax(0,1fr)}
  .notiz-nummer{font-size:3.4rem}
  .notiz-zeichen{display:inline-block;margin:0 .5rem 0 0;vertical-align:.9em}
  .artikel-text figure svg{border-radius:14px}
  .artikel-text .toc ol{columns:1}
}
@media (max-width:480px){
  .artikel-autor{flex-direction:column;gap:.8rem}
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:no-preference){
  .notiz,.wissen-karte{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
  .notiz:hover,.wissen-karte:hover{transform:translateY(-3px)}
}

/* ---------- Druck ---------- */
@media print{
  .notiz,.wissen-karte,.artikel-text figure svg,.artikel-text .toc,.artikel-text .callout,.fuer-wen{box-shadow:none}
  .artikel-weiter,.notiz-weiter{display:none}
}