/* ==================================================================
   Theme NETZ — Layout-Raster und Blocktypen
   Ergänzt theme.css und pages.css. Als dritte Datei einbinden.
   ================================================================== */

/* ---------- Layout-Sektionen ---------- */
.lay{padding:clamp(38px,4.4vw,68px) 24px;position:relative}
.lay + .lay{padding-top:0}
.lay--paper{background:var(--paper)}
.lay--mist{background:var(--mist)}
.lay--ink{background:var(--ink);color:rgba(255,255,255,.86)}
.lay--mist + .lay--mist,
.lay--ink + .lay--ink{padding-top:0}
.lay--paper + .lay--mist,
.lay--mist + .lay--paper,
.lay--ink + .lay--paper,
.lay--paper + .lay--ink,
.lay--mist + .lay--ink,
.lay--ink + .lay--mist{padding-top:clamp(56px,6.5vw,104px)}

.lay--ink :is(h1,h2,h3,h4,.display){color:#fff}
.lay--ink .prose{color:rgba(255,255,255,.84)}
.lay--ink a{color:var(--b)}
.lay--ink .b-list__items li{border-color:var(--line-dark)}
.lay--ink .b-faq details{border-color:var(--line-dark)}
.lay--ink .b-faq summary{color:#fff}
.lay--ink .cap{background:var(--ink-2);border-color:var(--line-dark)}
.lay--ink figcaption{color:rgba(255,255,255,.45)}

.lay__in{max-width:var(--wide);margin:0 auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 40px}
.lay--text .lay__in{max-width:820px}
.lay--full{padding-left:0;padding-right:0}
.lay--full .lay__in{max-width:none;gap:0}
.lay__col{grid-column:span var(--w,12);min-width:0}
@media(max-width:860px){
  .lay__in{grid-template-columns:1fr;gap:0}
  .lay__col{grid-column:1 / -1}
}

/* Abstände zwischen Blöcken */
.lay__b + .lay__b{margin-top:26px}
.lay__b--heading + .lay__b{margin-top:14px}
.lay__b + .lay__b--heading{margin-top:44px}
.lay__b--divider + .lay__b,
.lay__b + .lay__b--divider{margin-top:0}
.lay__b--hero{margin:0}

/* ---------- Fließtext ---------- */
.prose{max-width:68ch;font-size:1.04rem;line-height:1.74}
.lay__col[style*="span 12"] .b-text .prose{max-width:72ch}
.prose > * + *{margin-top:1.05em}
.prose a{color:var(--a);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose strong{font-weight:600;color:inherit}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--mist);
  padding:2px 6px;border-radius:2px}
.prose table{width:100%;border-collapse:separate;border-spacing:0;
  font-size:.93rem;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;margin:1.6em 0}
.prose thead th{background:var(--ink);color:#fff;font-family:var(--mono);
  font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 15px;text-align:left}
.prose td{padding:12px 15px;border-top:1px solid var(--line);vertical-align:top}
.prose tbody tr:nth-child(odd){background:var(--mist)}

/* ---------- Überschriften ---------- */
.b-heading .kicker{color:var(--muted);margin-bottom:12px}
.lay--ink .b-heading .kicker{color:var(--b)}
.b-heading h2{scroll-margin-top:96px}
.b-heading h3,.b-heading h4{scroll-margin-top:96px}

/* ---------- Liste ---------- */
.b-list__title{margin:0 0 12px}
.b-list .prose{margin-bottom:14px}
.b-list__items{list-style:none;padding:0;margin:0;max-width:68ch}
.b-list__items li{display:flex;gap:14px;align-items:flex-start;
  padding:11px 0;border-top:1px solid var(--line);font-size:.99rem;line-height:1.6}
.b-list__items li:last-child{border-bottom:1px solid var(--line)}
.b-list__items svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--k,var(--a))}
.b-list__no{font-family:var(--mono);font-size:.78rem;color:var(--k,var(--a));
  flex:none;margin-top:3px;min-width:22px}
.b-list--disc{list-style:disc;padding-left:1.3em}
.b-list--disc li{display:list-item;border:0;padding:5px 0}
.b-list--disc li::marker{color:var(--k,var(--a))}

/* ---------- Zitat ---------- */
.b-quote{margin:0;border-left:3px solid var(--b);padding:6px 0 6px 26px;max-width:64ch}
.b-quote blockquote{margin:0;font-size:1.16rem;line-height:1.6;
  font-variation-settings:'wdth' 104,'wght' 400}
.b-quote figcaption{margin-top:14px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.05em;color:var(--muted)}
.b-quote__who{color:var(--ink);font-weight:500}
.lay--ink .b-quote__who{color:#fff}
.b-quote__role::before{content:" · "}

/* ---------- Bild ---------- */
.b-image{margin:0}
.b-image img{width:100%;height:auto;border-radius:2px}
.b-image--text{max-width:820px}
.b-image--full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.b-image--full img{border-radius:0}
.b-image figcaption,.b-gallery figcaption,.b-imagetext figcaption{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.02em;
  color:var(--muted);margin-top:10px;line-height:1.5}

/* ---------- Galerie ---------- */
.b-gallery{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:20px}
.b-gallery figure{margin:0}
.b-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:2px}
@media(max-width:640px){.b-gallery{grid-template-columns:1fr}}

/* ---------- Bild mit Text ---------- */
.b-imagetext{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.b-imagetext--right figure{order:2}
.b-imagetext figure{margin:0}
.b-imagetext img{width:100%;border-radius:2px}
.b-imagetext__body h3{margin:0 0 14px;color:var(--ink)}
.lay--ink .b-imagetext__body h3{color:#fff}
.b-imagetext__body .prose{max-width:52ch}
@media(max-width:860px){
  .b-imagetext{grid-template-columns:1fr;gap:26px}
  .b-imagetext--right figure{order:0}
}

/* ---------- FAQ ---------- */
.b-faq{max-width:76ch}
.b-faq > h3{margin:0 0 18px}
.b-faq details{border-top:1px solid var(--line)}
.b-faq details:last-of-type{border-bottom:1px solid var(--line)}
.b-faq summary{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:18px 0;cursor:pointer;list-style:none;
  font-variation-settings:'wdth' 106,'wght' 600;font-size:1.06rem;line-height:1.4;
  color:var(--ink);transition:color .2s}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq summary:hover{color:var(--a)}
.b-faq summary svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--b);
  transition:transform .3s var(--ease)}
.b-faq details[open] summary svg{transform:rotate(45deg)}
.b-faq__a{padding:0 0 20px;max-width:68ch}
.b-faq__a p:first-child{margin-top:0}

/* ---------- Karten und Symbolliste ---------- */
.b-cards__h{margin:0 0 22px}
.cap__tag{position:absolute;top:22px;right:24px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--k,var(--a))}
.cap h4{margin:0 0 10px}
.cap__link{margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--k,var(--a));text-decoration:none}
.cap__link svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.cap__link:hover svg{transform:translateX(4px)}

/* ---------- Handlungsaufruf ---------- */
.b-cta h2{margin:0 0 20px}
.b-cta .lede{margin-bottom:28px}

/* ---------- Schaltflächen ---------- */
.b-links{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.b-links:first-child{margin-top:0}

/* ---------- Trenner und Abstand ---------- */
.b-divider{padding:16px 0}
.b-divider__line{border:0;border-top:1px solid var(--line);margin:26px 0}
.lay--ink .b-divider__line{border-color:var(--line-dark)}
.b-divider--space{padding:22px 0}
.rail-mark{display:block;width:74px;height:11px;
  background:
    radial-gradient(circle 5.5px at 68px 5.5px,transparent 0 2.6px,var(--a) 2.6px 5.5px,transparent 5.5px),
    linear-gradient(var(--a),var(--a)) 0 4.5px/58px 2px no-repeat;
  background-repeat:no-repeat}
.lay--ink .rail-mark{background:
    radial-gradient(circle 5.5px at 68px 5.5px,transparent 0 2.6px,#fff 2.6px 5.5px,transparent 5.5px),
    linear-gradient(#fff,#fff) 0 4.5px/58px 2px no-repeat;background-repeat:no-repeat}
.b-spacer--s{height:20px}
.b-spacer--m{height:44px}
.b-spacer--l{height:84px}

/* ---------- Hero als Block ---------- */
.hero--block{padding:clamp(56px,7vw,104px) 0;margin:0}
.hero--block .hero__grid{max-width:var(--wide);margin:0 auto;padding:0 24px}
.hero__img img{border-radius:2px;width:100%}

/* ---------- Beitragsliste im Inhalt ---------- */
.b-articles .post:first-of-type{border-top:1px solid var(--line)}
.lay--ink .b-articles .post{border-color:var(--line-dark)}
.lay--ink .b-articles .post h3{color:#fff}

/* ---------- Titelbild eines Beitrags ---------- */
.article-cover{margin:-44px auto 0;position:relative;z-index:2;max-width:1040px;padding:0 24px}
.article-cover img{width:100%;border-radius:2px}

/* ---------- Reduzierte Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  .b-faq summary svg,.cap__link svg{transition:none}
}

/* ---------- Nachtrag ---------- */
.b-markdown{max-width:72ch}
.b-iconlist{width:100%}
.num{font-variant-numeric:tabular-nums}

/* ==================================================================
   Venn / Schnittmengen-Diagramm
   ================================================================== */
.venn{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.venn__svg{width:100%;height:auto;overflow:visible}
.venn__c{cursor:pointer;transition:opacity .35s var(--ease)}
.venn__c circle,.venn__c path{transition:fill-opacity .35s var(--ease)}
.venn__c text{font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase}
.venn--js .venn__c.dim{opacity:.3}
.venn__panel{border-left:3px solid var(--k,var(--line));padding-left:30px}
.venn__body{--k:var(--a)}
.venn__body h3{margin:0 0 14px}
.venn__lede{color:var(--muted);margin:0}
.lay--ink .venn__lede{color:var(--muted-dark)}
.venn__body ul{list-style:none;padding:0;margin:20px 0 0}
.venn__body li{display:flex;gap:13px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--line);font-size:.97rem;line-height:1.55}
.lay--ink .venn__body li{border-color:var(--line-dark)}
.venn__body li svg{width:17px;height:17px;flex:none;margin-top:4px}
.venn__body .kicker{margin-bottom:12px}

/* Ohne JavaScript stehen alle Bereiche untereinander */
.venn__body + .venn__body{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.venn--js .venn__body + .venn__body{margin-top:0;padding-top:0;border-top:0}
.venn--js .venn__body[data-off]{display:none}
.venn--js .venn__body{animation:vennIn .4s var(--ease)}
@keyframes vennIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.venn__tabs{display:none;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.venn__tabs button{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  padding:12px 16px;min-height:44px;border:1px solid var(--line);background:none;
  border-radius:2px;cursor:pointer;color:inherit;text-align:left}
.venn__tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.lay--ink .venn__tabs button{border-color:var(--line-dark)}
.lay--ink .venn__tabs button[aria-selected="true"]{background:#fff;color:var(--ink)}

@media(max-width:940px){
  .venn{grid-template-columns:1fr;gap:34px}
  .venn__svg{max-width:420px;margin:0 auto}
}
@media(max-width:640px){
  .venn__svg{display:none}
  .venn--js .venn__tabs{display:flex}
  .venn__panel{border-left:0;padding-left:0}
  .venn--js .venn__panel{border-left:3px solid var(--k,var(--line));padding-left:22px}
}

/* ==================================================================
   Presseerwähnungen
   ================================================================== */
.b-press__h{margin:0 0 14px}
.b-press__intro{color:var(--muted);max-width:60ch;margin:0 0 26px}
.lay--ink .b-press__intro{color:var(--muted-dark)}
.b-press__list{list-style:none;padding:0;margin:0;counter-reset:none}

.b-press__year{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--muted);padding:26px 0 8px;display:flex;align-items:center;gap:16px}
.b-press__year:first-child{padding-top:0}
.b-press__year::after{content:"";flex:1;height:1px;background:var(--line)}
.lay--ink .b-press__year::after{background:var(--line-dark)}

.b-press__item{display:grid;grid-template-columns:190px 1fr 26px;gap:24px;
  align-items:start;padding:20px 0;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left .3s var(--ease)}
.lay--ink .b-press__item{border-color:var(--line-dark)}
.b-press__list li:last-child .b-press__item{border-bottom:1px solid var(--line)}
.lay--ink .b-press__list li:last-child .b-press__item{border-bottom-color:var(--line-dark)}
a.b-press__item:hover{padding-left:12px}

.b-press__meta{display:flex;flex-direction:column;gap:5px;padding-top:2px}
.b-press__outlet{font-variation-settings:'wdth' 108,'wght' 600;font-size:.95rem;
  line-height:1.3;color:var(--ink)}
.lay--ink .b-press__outlet{color:#fff}
a.b-press__item:hover .b-press__outlet{color:var(--a)}
.lay--ink a.b-press__item:hover .b-press__outlet{color:var(--b)}
.b-press__meta time{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--muted)}

.b-press__body{min-width:0}
.b-press__headline{display:block;font-size:1.02rem;line-height:1.45;margin-bottom:6px}
.b-press__quote{display:block;color:var(--muted);font-size:.93rem;line-height:1.55;
  border-left:2px solid var(--line);padding-left:14px;margin:10px 0 0;max-width:58ch}
.lay--ink .b-press__quote{color:var(--muted-dark);border-color:var(--line-dark)}

.b-press__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.b-press__kind,.b-press__pay{font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;white-space:nowrap}
.b-press__kind{border:1px solid var(--line);color:var(--muted)}
.lay--ink .b-press__kind{border-color:var(--line-dark);color:var(--muted-dark)}
.b-press__pay{background:var(--b);color:var(--ink);font-weight:500}

.b-press__go{color:var(--muted);padding-top:3px;justify-self:end;
  transition:transform .3s var(--ease),color .3s}
.b-press__go svg{width:17px;height:17px}
a.b-press__item:hover .b-press__go{color:var(--a);transform:translate(2px,-2px)}
.lay--ink a.b-press__item:hover .b-press__go{color:var(--b)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:760px){
  .b-press__item{grid-template-columns:1fr 22px;gap:6px 16px;padding:18px 0}
  .b-press__meta{flex-direction:row;align-items:baseline;gap:12px;
    grid-column:1;order:1}
  .b-press__body{grid-column:1 / -1;order:3}
  .b-press__go{grid-column:2;order:2;justify-self:end}
  a.b-press__item:hover{padding-left:0}
}

/* ==================================================================
   Nachbesserungen
   ================================================================== */

/* Kennzahlenleiste: vier Kacheln passten nicht in ein Dreierraster */
.caps--auto{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cap__note{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--muted);margin:14px 0 0;line-height:1.5}
.lay--ink .cap__note{color:var(--muted-dark)}
.cap__text{margin-top:2px}
.cap__text p{font-size:.94rem;color:var(--muted);margin:0}
.cap__text p + p{margin-top:.8em}
.lay--ink .cap__text p{color:var(--muted-dark)}

/* Tabellen aus dem alten Seitenbaukasten tragen eigene Inline-Farben.
   Auf dunklem Grund ergab das weiße Schrift auf weißem Grund. */
.b-markdown table,.b-text table{
  background:transparent!important;box-shadow:none!important;
  border-radius:2px!important;width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);font-size:.93rem;font-variant-numeric:tabular-nums;
  margin:1.6em 0;overflow:hidden}
.lay--ink .b-markdown table,.lay--ink .b-text table{border-color:var(--line-dark)}
.b-markdown th,.b-text th{
  background:var(--ink)!important;color:#fff!important;
  font-family:var(--mono);font-size:.7rem!important;font-weight:500!important;
  letter-spacing:.1em;text-transform:uppercase;padding:13px 16px;text-align:left}
.lay--ink .b-markdown th,.lay--ink .b-text th{background:var(--ink-3)!important}
.b-markdown td,.b-text td{padding:13px 16px;border-top:1px solid var(--line);
  vertical-align:top;color:var(--ink)}
.lay--ink .b-markdown td,.lay--ink .b-text td{
  color:rgba(255,255,255,.86);border-top-color:var(--line-dark)}
.b-markdown tbody tr:nth-child(odd) td,.b-text tbody tr:nth-child(odd) td{background:var(--mist)}
.lay--ink .b-markdown tbody tr:nth-child(odd) td,
.lay--ink .b-text tbody tr:nth-child(odd) td{background:rgba(255,255,255,.04)}
.b-markdown td strong,.b-text td strong{color:inherit}
/* Rahmen des alten Baukastens neutralisieren */
.b-markdown .uk-overflow-auto,.b-text .uk-overflow-auto{overflow-x:auto;margin:0}

/* Punktlisten: Symbol und Aufzählungszeichen schlossen sich aus */
.b-list--disc{list-style:disc;padding-left:1.3em}
.b-list--disc li{display:list-item;border:0;padding:6px 0}
.b-list--disc li:last-child{border-bottom:0}
.b-list--disc li::marker{color:var(--k,var(--a))}

/* Beim Erstellen von Seitenabbildern feuert der Sichtbarkeits-Beobachter
   nicht — dann blieben Abschnitte unsichtbar. */
@media print{
  [data-rise]{opacity:1!important;transform:none!important}
  .venn__body[data-off]{display:block!important}
}

/* ---------- Netzdiagramm als Hintergrund, wenn zusätzlich ein Bild da ist ---------- */
.hero--backdrop{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  display:flex;align-items:center;justify-content:flex-end;overflow:hidden}
.hero__bg .net{width:min(760px,72%);opacity:.3;transform:translateX(6%)}
.hero__bg .net__cap{display:none}
.hero--backdrop .hero__grid{position:relative;z-index:1}
.hero--backdrop .hero__img img{box-shadow:0 24px 60px rgba(0,0,0,.45)}
@media(max-width:1000px){
  .hero__bg .net{width:110%;opacity:.16;transform:none}
  .hero__bg{justify-content:center}
}

/* ---------- Tabellenspalten: erste Spalte braucht Platz ---------- */
.b-markdown table,.b-text table{table-layout:fixed}
.b-markdown th:first-child,.b-markdown td:first-child,
.b-text th:first-child,.b-text td:first-child{width:22%;min-width:132px}
.b-markdown th,.b-markdown td,.b-text th,.b-text td{
  overflow-wrap:break-word;word-break:normal;hyphens:auto}
.b-markdown th,.b-text th{hyphens:none;white-space:nowrap}
@media(max-width:900px){
  .b-markdown th:first-child,.b-markdown td:first-child,
  .b-text th:first-child,.b-text td:first-child{width:26%;min-width:120px}
}