/* ============================================================
   news blog
   Nur die Seiten /news und /news/<slug> laden diese Datei.
   Von Hand gepflegt, von scripts/build-news.mjs mitverwendet.
   Tokens kommen aus v3.css, hier steht nichts, was eine andere
   Seite braucht. /stories bringt sein eigenes CSS mit.
   ============================================================ */

/* ---------- Artikel-Kopf ---------- */
.art-head{background:var(--cream);padding:clamp(120px,13vw,170px) 0 clamp(22px,3vw,34px)}
.art-head .wrap{max-width:920px}
.art-meta{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:clamp(16px,2vw,22px)}
.art-meta .sep{opacity:.5}
.art-cat{color:var(--hib)}
.art-cat:hover{color:var(--ink)}
.art-head h1{font-size:clamp(38px,5.6vw,76px);line-height:.96;color:var(--ink);max-width:20ch}
.art-head h1 .dotacc{color:var(--hib)}
.art-lead{max-width:60ch;font-size:17px;line-height:1.7;color:var(--ink-600);margin-top:clamp(18px,2.4vw,26px)}
.art-by{display:flex;align-items:center;gap:10px;margin-top:clamp(20px,2.6vw,28px);font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.art-by .ava{width:32px;height:32px;border-radius:50%;background:var(--hib);color:#fff;display:grid;place-items:center;font-family:var(--bc);font-weight:800;font-size:12px;letter-spacing:.04em;flex:0 0 auto}
.art-by img.ava{object-fit:cover;object-position:center 25%}

/* ---------- Hero-Bild ---------- */
.art-hero{margin:0 var(--gutter);border-radius:30px;overflow:hidden;max-width:1340px}
@media(min-width:1452px){.art-hero{margin:0 auto}}
.art-hero img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover}
@media(max-width:760px){.art-hero img{aspect-ratio:4/3}}

/* ---------- Kurzfakten ---------- */
.art-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,3.4vw,40px)}
.art-facts .f{background:var(--cream-card);border-radius:14px;padding:12px 18px}
.art-facts .f b{display:block;font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:24px;line-height:1;color:var(--ink)}
.art-facts .f span{display:block;margin-top:5px;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}

/* ---------- Lesespalte + Inhaltsverzeichnis ---------- */
.art-body{max-width:1340px;margin:0 auto;padding:clamp(40px,5.5vw,72px) var(--gutter) clamp(30px,4vw,48px);display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
@media(min-width:1100px){
  .art-body{grid-template-columns:230px minmax(0,1fr);align-items:start}
  .art-body.no-toc{grid-template-columns:minmax(0,1fr);max-width:860px}
}
/* Genau EIN .art-body pro Beitrag, mit genau einem .art-toc darin - der
   ganze Beitrag (Text, Bilder, Karussells) liegt in einem zusammenhaengenden
   .art-col, damit die sticky Navigation (ab 1100px) ueber alles mitscrollt.
   FEHLERBEHEBUNG 10.09.2026: vorher gab es pro Textstueck ein eigenes
   .art-body (siehe build-news.mjs/articlePage()), weil Galerien als eigene,
   randlose Abschnitte dazwischenlagen. Das Inhaltsverzeichnis steckte damit
   im ERSTEN .art-body und hoerte beim ersten Karussell auf mitzuscrollen.
   Seit die Karussells in der Lesespalte bleiben, ist die Aufteilung nicht
   mehr noetig. */
.art-toc{background:var(--cream-card);border-radius:18px;padding:16px 18px}
.art-toc>summary{list-style:none;cursor:pointer;font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);display:flex;justify-content:space-between;gap:10px}
.art-toc>summary::-webkit-details-marker{display:none}
.art-toc>summary::after{content:"+";font-family:var(--m)}
.art-toc[open]>summary::after{content:"–"}
.art-toc ol{list-style:none;margin:12px 0 0;counter-reset:toc}
.art-toc li{counter-increment:toc;margin-bottom:9px;font-size:13px;line-height:1.4}
.art-toc li a{color:var(--ink-600);display:block}
.art-toc li a:hover{color:var(--hib)}
.art-toc li a::before{content:counter(toc,decimal-leading-zero);font-family:var(--m);font-size:9.5px;letter-spacing:.1em;color:var(--hib);margin-right:8px}
@media(min-width:1100px){
  .art-toc{position:sticky;top:calc(var(--anchor-off) + 8px);background:none;padding:0;border-left:1px solid var(--rule);padding-left:18px}
  .art-toc>summary{display:none}
  .art-toc ol{margin-top:0}
}
.art-col{max-width:72ch}
.art-col p{font-size:15.5px;line-height:1.75;color:var(--ink-600);margin:0 0 20px}
.art-col p.intro{font-size:17.5px;line-height:1.72}
.art-col h2{font-size:clamp(26px,3vw,38px);line-height:1.02;color:var(--ink);margin:clamp(40px,4.6vw,58px) 0 16px;scroll-margin-top:var(--anchor-off)}
.art-col h2 .dotacc{color:var(--hib)}
.art-col h2 .num{font-family:var(--m);font-size:13px;letter-spacing:.1em;color:var(--hib);display:block;margin-bottom:8px}
.art-col h3{font-family:var(--m);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);margin:28px 0 10px}
.art-col h3+h2{margin-top:0}
.art-col ul,.art-col ol{margin:0 0 20px;padding-left:22px}
.art-col li{font-size:15.5px;line-height:1.72;color:var(--ink-600);margin-bottom:9px}
.art-col ol li{margin-bottom:14px}
.art-col strong{color:var(--ink);font-weight:700}
.art-col a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(63,109,104,.35)}
.art-col a:hover{color:var(--hib)}
.art-col hr{border:0;border-top:1px solid var(--rule);margin:clamp(32px,4vw,48px) 0}
.art-col blockquote{border-left:3px solid var(--hib);padding-left:20px;margin:0 0 24px}
.art-col blockquote p{font-family:var(--bc);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(22px,2.8vw,34px);line-height:1.08;color:var(--ink)}
.art-col blockquote em{font-style:italic;font-weight:500;text-transform:none;color:var(--hib)}
.art-fig{margin:32px 0;border-radius:20px;overflow:hidden}
.art-fig img{width:100%;display:block;height:auto;max-height:82vh;object-fit:contain;background:var(--cream-card,#f3efe6)}
.art-cap{margin-top:9px;font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.art-video{margin:32px 0}
.art-video .frame{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--ink-section)}
.art-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-quick{background:var(--cream-card);border-radius:20px;padding:clamp(24px,3vw,34px);margin:32px 0}
.art-quick dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.art-quick dt{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);white-space:nowrap}
.art-quick dd{margin:0;font-size:14px;color:var(--ink-600);line-height:1.6}
@media(max-width:560px){.art-quick dl{grid-template-columns:1fr;gap:2px 0}.art-quick dd{margin-bottom:12px}}

/* ---------- Programm-CTA ---------- */
.art-progs{margin:clamp(40px,5vw,68px) 24px 0;border-radius:30px;background:var(--ink-section);color:#fff;padding:clamp(34px,4.4vw,54px)}
.art-progs .in{max-width:1000px;margin:0 auto}
.art-progs h2{font-size:clamp(24px,2.8vw,34px);color:#fff;margin-bottom:12px}
.art-progs h2 .dotacc{color:var(--hib)}
.art-progs>.in>p{color:rgba(247,245,240,.82);max-width:58ch;margin-bottom:26px;font-size:14.5px;line-height:1.7}
.art-pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.art-pcard{display:block;border-radius:22px;overflow:hidden;background:rgba(247,245,240,.06);border:1px solid var(--rule-dark);transition:border-color .2s ease}
.art-pcard:hover{border-color:rgba(247,245,240,.5)}
.art-pcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.art-pcard .tx{padding:14px 16px 18px}
.art-pcard .k{font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.art-pcard h3{font-family:var(--d);font-weight:700;text-transform:none;letter-spacing:0;font-size:15px;line-height:1.3;color:#fff;margin:8px 0 0}

/* ---------- Keep reading ---------- */
.art-more{padding:clamp(48px,6vw,84px) 0 0}
.art-more h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:clamp(18px,2.4vw,28px)}
.art-more h2 .dotacc{color:var(--hib)}
.art-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}
@media(max-width:600px){.art-mgrid{grid-template-columns:1fr}}

/* ---------- Teilen ---------- */
.art-share{padding:clamp(36px,4.5vw,60px) 0 clamp(56px,7vw,90px)}
.art-share .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--rule);padding-top:22px}
.art-share .lbl{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-right:6px}
.art-share a,.art-share button{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--cream-card);transition:background .2s ease,color .2s ease}
.art-share a:hover,.art-share button:hover{background:var(--hib);color:#fff;border-color:var(--hib)}
.art-back{padding:0 0 clamp(40px,5vw,60px);font-size:13px}
.art-back a{color:var(--stone)}
.art-back a:hover{color:var(--hib)}

/* ---------- Karte (Keep reading) ---------- */
.ix-card{display:block;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--rule)}
/* v3.css hat eine globale .ph-Regel fuer ein ganz anderes Bauteil:
   display:grid mit grid-template-columns:150px 1fr auto. Die Karten hier
   benutzen dieselbe allgemeine Klasse und haben das Raster geerbt, das Bild
   sass dadurch eingequetscht in der ersten 150-Pixel-Spalte, rechts daneben
   blieb die Karte leer. Betraf "Keep reading" unter jedem Beitrag und den
   News-Teaser auf den Programmseiten. .nl-card .ph weiter unten setzt
   display:block und war deshalb nie betroffen. Gefunden am 10.09.2026. */
.ix-card .ph{display:block;grid-template-columns:none;gap:0;align-items:initial;padding:0;border-bottom:0;overflow:hidden}
.ix-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .48s var(--ease)}
.ix-card:hover img{transform:scale(1.03)}
.ix-card .tx{padding:18px 20px 22px}
.ix-card .k{font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.ix-card h3{font-family:var(--d);font-weight:700;text-transform:none;letter-spacing:0;font-size:17px;line-height:1.3;color:var(--ink);margin:9px 0 7px}
.ix-card p{font-size:13px;line-height:1.6;color:var(--stone);margin:0}
.ix-card .m{display:block;margin-top:12px;font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.ix-card .badge{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:var(--hib)}
/* Teaser auf den Programmseiten: Vorzeile mit dem Jahrgang und ein sichtbarer
   Aufruf auf der Karte. Vorher stand dort nur "From the news", man sah der
   Kachel nicht an, dass es der eigene, gerade gelaufene Kurs ist. */
.nt-eyebrow{display:block;margin-bottom:10px;font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hib)}
.nt-eyebrow[hidden]{display:none}
.nt-go{display:flex;width:fit-content;align-items:center;gap:7px;margin-top:14px;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.nt-go .arr{display:inline-block;transition:transform .3s var(--ease)}
.ix-card:hover .nt-go{color:var(--hib)}
.ix-card:hover .nt-go .arr{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.ix-card:hover .nt-go .arr{transform:none}}
.ix-card[hidden]{display:none}

/* Hochformat-Portraets (Student Voices): das Heldenbild wird nicht auf 16:7
   beschnitten, sondern bleibt im Originalformat und mittig gesetzt. */
.art-hero.portrait{max-width:520px;margin-left:auto;margin-right:auto}
.art-hero.portrait img{aspect-ratio:4/5}
@media(max-width:760px){.art-hero.portrait img{aspect-ratio:4/5}}

/* ---------- Breadcrumb ueber dem Artikelkopf ---------- */
.art-crumb{background:var(--cream);padding:clamp(96px,11vw,140px) 0 0;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.art-crumb a{color:var(--stone)}
.art-crumb a:hover{color:var(--hib)}
.art-crumb .sep{opacity:.45;margin:0 4px}
.art-crumb+.art-head{padding-top:clamp(18px,2.4vw,28px)}

/* ============================================================
   /news · Kopf (bis 07.09.2026 seitenlokal in news.html)
   ============================================================ */
.nw-hero{position:relative;background:var(--ink-section);color:#fff;padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,76px);overflow:hidden}
.nw-hero .bg{position:absolute;inset:0;background:url('/assets/site/study-in-bali-general-students-student-orientation-and-cultural-welcom.webp') center 30%/cover}
.nw-hero .grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,6,2,.8) 0%,rgba(10,6,2,.48) 42%,rgba(10,6,2,.34) 100%)}
.nw-hero .wrap{position:relative;z-index:2}
.nw-hero h1{font-size:clamp(44px,6vw,96px);line-height:.94;color:#fff;margin-top:16px}
.nw-hero h1 .dotacc{color:var(--hib)}
.nw-hero .nw-bar{margin-top:clamp(20px,2.6vw,32px);max-width:58ch}
.nw-hero .nw-bar .bar{font-size:clamp(19px,2.4vw,34px)}

/* ============================================================
   /news · Zeitachse (Meldungen + Artikel in einer Liste)
   ============================================================ */
.nl{background:#fff;padding:clamp(36px,4.5vw,64px) 0 clamp(80px,9vw,130px);border-top:1px solid var(--rule)}

/* Filter, Themen, Archiv und Zaehler stehen zusammen in der Seitenleiste.
   Die Filterbloecke sind ohne JavaScript per <noscript> ausgeblendet, Archiv
   und Liste bleiben dann vollstaendig sichtbar und bedienbar. */
.nl-chip{font-family:var(--d);font-size:12.5px;font-weight:600;color:var(--ink);background:var(--cream-card);border:1px solid var(--rule);border-radius:999px;padding:7px 15px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.nl-chip:hover{border-color:var(--hib);color:var(--hib)}
.nl-chip.is-on{background:var(--hib);border-color:var(--hib);color:#fff}
.nl-chip:focus-visible{outline:2px solid var(--hib);outline-offset:3px}
.nl-chips{display:flex;flex-wrap:wrap;gap:7px}
.nl-count{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin:0}

.nl-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
@media(min-width:1000px){.nl-grid{grid-template-columns:minmax(0,1fr) 216px;align-items:start}
  .nl-side{order:2;position:sticky;top:calc(var(--anchor-off) + 8px)}}

/* Seitenleiste. Mobil ueber der Liste, eingeklappt in ein <details>. */
.nl-side-det{border:1px solid var(--rule);border-radius:18px;padding:14px 16px}
.nl-side-det>summary{list-style:none;cursor:pointer;position:relative;padding-right:36px;font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep)}
.nl-side-det>summary::-webkit-details-marker{display:none}
.nl-side-det>summary:focus-visible{outline:2px solid var(--hib);outline-offset:4px}
.nl-side-det>summary .nl-ind{top:-2px;width:22px;height:22px}
.nl-side-det>summary .nl-ind::before{width:9px}
.nl-side-det>summary .nl-ind::after{height:9px}
.nl-side-det[open]>summary .nl-ind{background:var(--hib);border-color:var(--hib)}
.nl-side-det[open]>summary .nl-ind::before,.nl-side-det[open]>summary .nl-ind::after{background:#fff}
.nl-side-det[open]>summary .nl-ind::after{transform:translate(-50%,-50%) rotate(90deg)}
.nl-side-in{padding-top:18px}
.nl-block{margin-bottom:22px}
.nl-count{margin-top:2px}
@media(min-width:1000px){
  .nl-side-det{border:0;border-radius:0;padding:0;border-left:1px solid var(--rule);padding-left:18px}
  .nl-side-det>summary{display:none}
  .nl-side-in{padding-top:0}
}

/* Archiv. */
.nl-alabel{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:12px}
.nl-archive ul{list-style:none;margin:0;padding:0}
.nl-archive li{margin-bottom:7px}
.nl-archive .nl-yr{font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:20px;line-height:1;color:var(--ink);margin:16px 0 10px}
.nl-archive li:first-child.nl-yr{margin-top:0}
.nl-archive a{font-size:13px;color:var(--ink-600);display:flex;justify-content:space-between;gap:8px}
.nl-archive a:hover{color:var(--hib)}
.nl-archive a .n{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;color:var(--stone)}
.nl-archive li.is-off{opacity:.35}
@media(max-width:999px){
  .nl-archive ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
  .nl-archive li{margin:0}
  .nl-archive .nl-yr{margin:0 4px 0 0;font-size:16px}
  .nl-archive a{display:inline-flex}
}

/* Monatsmarke links, Eintraege rechts. Mobil untereinander. */
.nl-month{display:grid;grid-template-columns:1fr;gap:14px;padding:0 0 clamp(24px,3vw,38px)}
@media(min-width:760px){.nl-month{grid-template-columns:clamp(110px,12vw,150px) minmax(0,1fr);gap:clamp(20px,3vw,40px)}}
.nl-month[hidden]{display:none}
.nl-mark{font-family:var(--bc);font-weight:900;text-transform:uppercase;line-height:.92;color:var(--ink);margin:0;scroll-margin-top:var(--anchor-off);padding-top:6px;border-top:2px solid var(--ink)}
.nl-mark .mo{display:block;font-size:clamp(20px,2.2vw,28px)}
.nl-mark .yr{display:block;font-family:var(--m);font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--stone);margin-top:5px}
@media(max-width:759px){.nl-mark{display:flex;align-items:baseline;gap:10px}.nl-mark .yr{margin-top:0}}
.nl-items{border-top:1px solid var(--rule)}

/* Ein Eintrag */
.nl-e{border-bottom:1px solid var(--rule);padding:clamp(18px,2.2vw,26px) 0}
.nl-e[hidden]{display:none}
.nl-meta{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin:0 0 8px;display:block}
.nl-meta .sep{opacity:.5;margin:0 2px}
.nl-meta .tg{color:var(--hib)}
.nl-h{display:block;font-family:var(--bc);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(18px,1.9vw,26px);line-height:1.06;color:var(--ink)}
.nl-t{display:block;margin-top:7px;font-size:13.5px;line-height:1.65;color:var(--ink-600);max-width:64ch}
.nl-go{display:inline-block;margin-top:14px;font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--hib);border-bottom:1px solid var(--hib);padding-bottom:3px}
.nl-go .arr{display:inline-block;transition:transform .3s var(--ease)}
.nl-go:hover .arr{transform:translateX(4px)}

/* Meldung: aufklappbar ueber <details>, ohne JavaScript bedienbar */
.nl-det>summary{list-style:none;cursor:pointer;position:relative;padding-right:42px}
.nl-det>summary::-webkit-details-marker{display:none}
.nl-det>summary:focus-visible{outline:2px solid var(--hib);outline-offset:4px}
.nl-det>summary:hover .nl-h{color:var(--hib)}
.nl-ind{position:absolute;right:0;top:2px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(33,33,33,.28);display:block;transition:background .25s var(--ease),border-color .25s var(--ease)}
.nl-ind::before,.nl-ind::after{content:'';position:absolute;left:50%;top:50%;background:var(--ink);transition:transform .3s var(--ease),background .25s var(--ease)}
.nl-ind::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.nl-ind::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.nl-det[open] .nl-ind{background:var(--hib);border-color:var(--hib)}
.nl-det[open] .nl-ind::before,.nl-det[open] .nl-ind::after{background:#fff}
.nl-det[open] .nl-ind::after{transform:translate(-50%,-50%) rotate(90deg)}
.nl-more{padding:16px 42px 2px 0;max-width:66ch}
.nl-more p{font-size:14px;line-height:1.75;color:var(--ink-600);margin:0}

/* Karte. Dasselbe Muster fuer Artikel (ein Link auf /news/<slug>) und fuer
   Meldungen (Bild plus aufklappbarer Text), damit die Zeitachse eine Form hat. */
.nl-card{display:grid;grid-template-columns:clamp(120px,16vw,210px) minmax(0,1fr);gap:clamp(16px,2.2vw,28px);align-items:start;color:inherit}
@media(max-width:520px){.nl-card{grid-template-columns:1fr}}
/* 10.09.2026: die globale .ph-Regel aus v3.css (Preisliste: padding 16px 0,
   border-bottom, grid) schlug hier durch, das Bild bekam oben und unten
   16px Kartengrund als beigen Rand. Alles zurueckgesetzt. */
.nl-card .ph{display:block;grid-template-columns:none;gap:0;align-items:initial;padding:0;border-bottom:0;border-radius:16px;overflow:hidden;background:var(--cream-deep);line-height:0}
.nl-card .ph img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
/* 10.09.2026: Hover galt nur fuer Artikel (a.nl-card). Meldungen sind ein div
   mit details/summary und hatten keinen. Jetzt reagiert jede Karte. */
.nl-card:hover .ph img{transform:scale(1.04)}
.nl-card:hover .nl-h{color:var(--hib)}
.nl-card .tx{display:block}
/* Meldung ohne Bild: ruhige Flaeche statt Luecke, Tag als Mono-Label. */
.nl-card .ph.is-blank{aspect-ratio:4/3;background:var(--cream-card);border:1px solid var(--rule);display:grid;place-items:center;padding:10px;text-align:center}
.nl-card .ph.is-blank .ph-tag{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep)}
.nl-news .nl-card .tx>.nl-meta{margin-top:0}
.nl-rt{display:block;margin-top:12px;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

.nl-none{padding:clamp(40px,5vw,64px) 0;text-align:center;font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.nl-none[hidden]{display:none}
.nl-feed{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule);padding-top:20px}
.nl-feed a{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.nl-feed a:hover{color:var(--hib)}
.nl-feed .arr{display:inline-block;transition:transform .3s var(--ease)}
.nl-feed a:hover .arr{transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){
  .nl-card:hover .ph img{transform:none}
  .nl-go:hover .arr,.nl-feed a:hover .arr{transform:none}
}

/* ============================================================
   Karussell (:::gallery). Hell im Kanon der Seite, Kacheln gerundet mit
   Abstand - und seit dem 10.09.2026 wieder IN der Lesespalte (.art-col),
   nicht mehr randlos ueber den Schirm.

   FEHLERBEHEBUNG 10.09.2026: davor lag das Karussell als eigener, randloser
   Abschnitt direkt unter <article>, ausserhalb von .art-col. Dafuer musste
   build-news.mjs jeden Beitrag in Textstueck/Galerie/Textstueck zerlegen und
   jedem Textstueck eine eigene .art-body/.art-toc-Huelle geben. Das
   Inhaltsverzeichnis (.art-toc, sticky ab 1100px) steckte dadurch im ERSTEN
   .art-body und hoerte beim ersten Karussell auf mitzuscrollen. Die
   Auftraggeberin hat sich fuer genau diese helle, spaltenbreite Fassung
   entschieden, das Herausziehen ist also nicht mehr noetig - das Karussell
   ist jetzt ein Block wie jeder andere in .art-col (siehe galleryHtml() in
   build-news.mjs).

   .art-col begrenzt Fliesstext auf max-width:72ch. Ab 1100px - demselben
   Bruch, ab dem das Inhaltsverzeichnis als Sidebar neben .art-col steht und
   dort nachweislich Luft neben der 72ch-Spalte ist - darf das Karussell
   moderat breiter sein als der Text: ein fester Pixel-Ueberhang je Seite,
   kein 100vw und kein Margin relativ zur Viewport-Breite, bleibt also immer
   innerhalb der Grid-Spalte.

   Der Fehler, der hier vorher steckte (unabhaengig von obigem): .ag-slide
   bezog seine Breite aus dem Bild (width:auto). Lazy geladene Bilder melden
   Breite 0, also fielen alle Kacheln ab der zweiten auf 0 Pixel zusammen und
   der Kartengrund schien als beiger Streifen durch. Jetzt traegt jede
   Kachel ihr eigenes aspect-ratio aus photos.json, die Breite steht also vor
   dem Laden fest. Das Bild liegt absolut darin, weil height:100% sich nicht
   gegen eine per aspect-ratio berechnete Elternhoehe aufloest.
   ============================================================ */
.art-gallery{margin:32px 0}
@media(min-width:1100px){
  .art-gallery{margin-left:-40px;margin-right:-40px}
}
/* .ag-stage buendelt Track + Pfeile in einem eigenen position:relative-
   Kasten, damit die Pfeile exakt auf der Bildmitte liegen - unabhaengig
   davon, ob/wo der Bildzaehler (.ag-count) noch etwas Hoehe dazugibt. */
.ag-stage{position:relative}
/* Bildzaehler bewusst UNTER dem Karussell, rechtsbuendig, statt als eigene
   Kopfzeile darueber: eine separate Zeile mit der Bildanzahl ("N photos")
   ist auf Wunsch der Auftraggeberin ganz entfallen, und der Zaehler allein
   wirkte oben rechts ueber der ersten Kachel verloren. Unter dem Band ist er
   ein ruhiges, dezentes Detail. */
.ag-count{display:block;text-align:right;margin:10px 0 0;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.ag-count .tot{color:var(--stone);opacity:.62}
.ag-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.ag-track::-webkit-scrollbar{display:none}
/* Feste Hoehe, freie Breite je Kachel (aus aspect-ratio) - so stehen Hoch-
   und Querformat gemischt sauber nebeneinander. */
.ag-slide{position:relative;flex:0 0 auto;height:clamp(300px,42vw,500px);overflow:hidden;border-radius:16px;background:var(--cream-card);scroll-snap-align:start}
.ag-slide img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;cursor:zoom-in}
/* FEHLERBEHEBUNG 10.09.2026: Bildunterschrift stand vorher nur 14px/11px von
   Rand/Rand/Unten eingerueckt - weniger als der 16px-Radius der Kachel -
   und lief unten links/rechts in die abgerundete Ecke, der Text wurde dort
   optisch angeschnitten. Jetzt sind links/rechts/unten mindestens so weit
   eingerueckt wie der Radius, beide Rundungen bleiben frei. Haelt auch bei
   zwei Zeilen Text, weil bottom fix bleibt und die Box nur nach oben waechst,
   und bei sehr schmalen Hochformat-Kacheln genauso wie bei breiten
   Querformaten, weil es reines Padding ist, nicht von der Kachelbreite
   abhaengig. */
.ag-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;background:linear-gradient(to top,rgba(10,6,2,.74),rgba(10,6,2,.05) 62%,transparent);color:#fff;font-family:var(--m);font-size:10px;letter-spacing:.07em;line-height:1.4}
.ag-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);background:rgba(247,245,240,.92);color:var(--ink);display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease}
.ag-nav:hover{background:var(--hib);border-color:var(--hib);color:#fff}
.ag-prev{left:10px}
.ag-next{right:10px}
/* Auf Touch reicht das native Wischen ueber overflow-x, Pfeile stoeren nur. */
@media (hover:none) and (pointer:coarse){.ag-nav{display:none}}
@media(max-width:640px){
  .ag-nav{display:none}
  .ag-slide{height:clamp(210px,66vw,340px);border-radius:12px}
  .ag-cap{padding:24px 14px 13px}
}

/* Lightbox: eigenes <dialog>. Escape schliesst nativ, Klick auf den
   Hintergrund (::backdrop) ebenfalls (siehe Skript in build-news.mjs).
   Der Rahmen bleibt dunkel, damit das Foto darin frei steht. */
.ag-light{border:0;border-radius:20px;padding:0;max-width:min(94vw,1200px);max-height:90vh;background:var(--ink-section);position:fixed;inset:0;margin:auto}
.ag-light::backdrop{background:rgba(10,6,2,.9)}
.ag-light[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:44px 20px 26px}
.ag-light-img{max-width:100%;max-height:72vh;display:block;border-radius:10px;object-fit:contain}
.ag-light-cap{font-family:var(--m);font-size:11px;letter-spacing:.08em;color:rgba(247,245,240,.82);max-width:70ch;text-align:center}
.ag-light-close{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(247,245,240,.24);background:rgba(247,245,240,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.ag-light-close:hover{background:var(--hib);border-color:var(--hib)}
.ag-light-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(247,245,240,.24);background:rgba(247,245,240,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}
.ag-light-nav:hover{background:var(--hib);border-color:var(--hib)}
.ag-light-prev{left:14px}
.ag-light-next{right:14px}

/* ============================================================
   Video (:::video). YouTube nutzt bereits .art-video/.frame aus dem
   Artikel-Video oben, hier nur die Ergaenzung fuer das native Cloudinary-Video.
   ============================================================ */
/* Hoch- und Querformat: die Hoehe begrenzen und zentrieren, sonst wuerde ein
   9:16-Video in voller Spaltenbreite die halbe Seite fuellen (09.09.2026). */
.art-video-native{display:flex;flex-direction:column;align-items:center}
.art-video-native video{display:block;max-width:100%;width:auto;max-height:78vh;border-radius:20px;background:var(--ink-section)}
.art-video-native figcaption{text-align:center}

/* ============================================================
   Paar (:::pair). Zwei Hochformate im Grid, auf schmalen Schirmen gestapelt.
   ============================================================ */
.art-pair{margin:32px 0}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ap-img{display:block;border-radius:20px;overflow:hidden;background:var(--cream-card)}
.ap-img img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.ap-cap{display:block;margin-top:9px;font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
@media(max-width:640px){.ap-grid{grid-template-columns:1fr;gap:20px}}

/* ============================================================
   O-Ton (:::quote). Ruhiger und kleiner als das grosse Versal-Blockquote in
   .art-col, das fuer normale > Zitate unveraendert bleibt.
   ============================================================ */
.art-oton{background:var(--cream-card);border-radius:20px;padding:clamp(22px,3vw,32px);margin:32px 0}
.art-oton blockquote{margin:0}
.art-oton blockquote p{font-family:var(--d);font-weight:500;font-style:italic;font-size:16.5px;line-height:1.6;color:var(--ink-600);margin:0}
.art-oton blockquote p::before{content:"\201C"}
.art-oton blockquote p::after{content:"\201D"}
.art-oton figcaption{margin-top:14px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.art-oton figcaption .nm{font-family:var(--bc);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:13px;color:var(--ink)}
.art-oton figcaption .pg{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}

/* ============================================================
   Wochenuebersicht (:::weeks). Ueberarbeitet 10.09.2026, auf Wunsch der
   Auftraggeberin: die vorherige Fassung (vier gleiche Cream-Kacheln mit
   Nummer/Titel/Stichworten) wirkte zu schwach, man las darueber hinweg.
   Jetzt ist die Nummer der fuehrende Blickfang (gross, --bc, in --hib statt
   klein und mono), jede Karte kann ein Bild tragen und, wenn eine Anker-id
   gesetzt ist, auf den passenden Abschnitt im Beitrag verlinken (siehe
   weeksHtml() in build-news.mjs). Eine duenne Kontur-Linie oben in --hib
   markiert jede Karte als Wegmarke statt als eine von vier austauschbaren
   Kacheln; der Hover-Zustand (Anheben + Schatten) greift nur bei verlinkten
   Karten (Selektor "a.aw-card", nicht ".aw-card") - unverlinkte Karten
   bleiben ruhig. Kein Schatten im Ruhezustand auf allen Karten, keine
   Farbverlaeufe, nichts zentriert.
   Grid-Standard ist align-items:stretch: alle Karten einer Zeile fuellen
   dieselbe Zeilenhoehe, eine Karte ohne Bild bekommt also automatisch etwas
   mehr Weissraum am Fuss statt die Reihe zu verkuerzen oder zu verschieben.
   ============================================================ */
.art-weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0}
.art-weeks .aw-card{position:relative;display:block;background:var(--cream-card);border-top:2px solid var(--hib);border-radius:20px;padding:22px 20px 24px}
.art-weeks a.aw-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.art-weeks a.aw-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(33,33,33,.14)}
.art-weeks .aw-num{display:block;font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:clamp(30px,3vw,40px);line-height:1;color:var(--hib);margin-bottom:12px;transition:color .3s var(--ease)}
.art-weeks a.aw-card:hover .aw-num{color:var(--ink)}
.art-weeks .aw-img{display:block;border-radius:12px;overflow:hidden;background:var(--cream-deep);aspect-ratio:4/3;margin-bottom:14px}
.art-weeks .aw-img img{width:100%;height:100%;object-fit:cover;display:block}
.art-weeks .aw-tx h3{font-family:var(--d);font-weight:700;text-transform:none;letter-spacing:0;font-size:14.5px;line-height:1.32;color:var(--ink);margin:0 0 8px}
.art-weeks .aw-kw{font-size:12px;line-height:1.6;color:var(--ink-600);margin:0}
@media(max-width:900px){.art-weeks{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.art-weeks{grid-template-columns:1fr}}