/* vorschau.css — Schaufenster, Zenodo-Vorschau, Presse & Flyer · tschueller.com v0.66 · 2026-10-05
   Nutzt die Farb- und Schriftvariablen der Seite (--paper, --ink, --vermilion, --mono, --display). */

/* ---------- Gerät: html[data-geraet] wird von vorschau.js gesetzt (telefon | tablett | rechner | fernseher) ---------- */

/* ---------- Kopf der Startseite, kompakter ---------- */
.kopf-raster { display:grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 2.2rem; align-items: center; margin: 0.6rem 0 1.2rem; }
.kopf-raster .hero-logo { max-width: 100%; margin: 0; }
.kopf-raster .manifesto { margin: 0; }
@media (max-width: 760px) { .kopf-raster { grid-template-columns: 1fr; gap: 1rem; } .kopf-raster .hero-logo { max-width: 62%; } }

.aktuelles-leiste.kompakt { max-width: none; display:grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.4rem; align-items: start; }
.aktuelles-leiste.kompakt ul { list-style: none; padding: 0; margin: 0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.35rem 1.6rem; }
.aktuelles-leiste.kompakt li { font-size: 0.93rem; line-height: 1.45; }
.aktuelles-leiste.kompakt .al-datum { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); margin-right: 0.4rem; letter-spacing: 0.04em; }
.aktuelles-leiste.kompakt .al-alle { grid-column: 2; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.aktuelles-leiste.kompakt .al-alle a { color: var(--vermilion); text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 760px) { .aktuelles-leiste.kompakt { grid-template-columns: 1fr; } .aktuelles-leiste.kompakt ul { grid-template-columns: 1fr; } .aktuelles-leiste.kompakt .al-alle { grid-column: 1; } }

/* ---------- Schaufenster ---------- */
.schaufenster { position: relative; overflow: hidden; background: #141412; color: #f4efe1; margin: 2.4rem calc(50% - 50vw) 3rem; padding: 3.2rem max(1.2rem, calc(50vw - 36rem)) 2.6rem; }
.schaufenster a { color: inherit; }
.sf-hintergrund { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; }
.sf-hintergrund svg { position: absolute; right: -8rem; top: -6rem; width: 46rem; height: 46rem; }
.sf-hintergrund .bahn { fill: none; stroke: rgba(244,239,225,0.12); stroke-width: 1; }
.sf-hintergrund .dreh { transform-origin: 50% 50%; animation: sf-dreh 60s linear infinite; }
.sf-hintergrund .dreh2 { transform-origin: 50% 50%; animation: sf-dreh 95s linear infinite reverse; }
.sf-hintergrund .punkt { fill: #d83a13; }
@keyframes sf-dreh { to { transform: rotate(360deg); } }

.sf-kopf { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end; margin-bottom: 1.6rem; }
.sf-eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: #d83a13; margin-bottom: 0.6rem; }
.sf-titel { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 400; line-height: 1.12; margin: 0; }
.sf-titel em { color: #f0b49f; }
.sf-text { font-family: var(--serif); color: rgba(244,239,225,0.78); max-width: 38rem; margin: 0.7rem 0 0; line-height: 1.5; }
.sf-knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sf-knopf { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.6rem 0.9rem; border: 1px solid rgba(244,239,225,0.35); transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.sf-knopf:hover, .sf-knopf:focus-visible { background: #f4efe1; color: #141412; border-color: #f4efe1; }
.sf-knopf.voll { background: #b8300e; border-color: #b8300e; color: #fff; }
.sf-knopf.voll:hover { background: #f4efe1; color: #141412; border-color: #f4efe1; }
@media (max-width: 760px) { .sf-kopf { grid-template-columns: 1fr; } }

/* Laufband */
.sf-laufband { position: relative; overflow: hidden; border-top: 1px solid rgba(244,239,225,0.15); border-bottom: 1px solid rgba(244,239,225,0.15); margin: 0 0 1.6rem; padding: 0.55rem 0; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sf-laufband-spur { display: inline-flex; gap: 2.4rem; white-space: nowrap; animation: sf-lauf 48s linear infinite; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,239,225,0.7); }
.sf-laufband-spur b { color: #f4efe1; font-weight: 700; }
.sf-laufband-spur i { font-style: normal; color: #d83a13; }
.sf-laufband:hover .sf-laufband-spur { animation-play-state: paused; }
@keyframes sf-lauf { to { transform: translateX(-50%); } }

/* Kacheln */
.sf-raster { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.9rem; }
html[data-geraet="fernseher"] .sf-raster { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1100px) { .sf-raster { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) {
  .sf-raster { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.8rem; padding-bottom: 0.8rem; margin-right: -1.2rem; padding-right: 1.2rem; scrollbar-width: thin; }
  .sf-kachel { flex: 0 0 78%; scroll-snap-align: start; }
}
.sf-wisch { display: none; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,225,0.55); margin-top: 0.4rem; }
@media (max-width: 760px) { .sf-wisch { display: block; } }

.sf-kachel { position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 1.1rem 1rem; background: rgba(244,239,225,0.05); border: 1px solid rgba(244,239,225,0.12); text-decoration: none; min-height: 13.5rem; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.sf-kachel::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: #d83a13; transition: width .5s ease; }
.sf-kachel:hover, .sf-kachel:focus-visible { transform: translateY(-3px); background: rgba(244,239,225,0.09); border-color: rgba(244,239,225,0.3); }
.sf-kachel:hover::before, .sf-kachel.sichtbar::before { width: 100%; }
.sf-kachel-kopf { display: flex; align-items: center; gap: 0.7rem; }
.sf-signet { width: 2.6rem; height: 2.6rem; border-radius: 0.5rem; background: #f4efe1; padding: 0.3rem; flex: none; }
.sf-name { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; }
.sf-claim { font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1.3; color: #f4efe1; }
.sf-stand { font-size: 0.86rem; line-height: 1.4; color: rgba(244,239,225,0.7); }
.sf-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(244,239,225,0.65); }
.sf-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.18rem 0.45rem; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.sf-chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.sf-chip.live { color: #7fd38a; } .sf-chip.live::before { animation: sf-puls 1.8s ease-in-out infinite; }
.sf-chip.test { color: #f2c35b; } .sf-chip.betrieb { color: #8fc7f0; } .sf-chip.aufbau { color: rgba(244,239,225,0.6); }
@keyframes sf-puls { 0%,100% { box-shadow: 0 0 0 0 rgba(127,211,138,0.7); } 50% { box-shadow: 0 0 0 0.35rem rgba(127,211,138,0); } }

/* Einblenden beim Scrollen — nur wenn JS aktiv ist (html.js) */
html.js .einblenden { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
html.js .einblenden.sichtbar { opacity: 1; transform: none; }

/* ---------- Zenodo-Vorschau ---------- */
.research-feature .research-publications { grid-column: 1 / -1; }
.research-pub-cards.zv { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.9rem; }
@media (max-width: 900px) { .research-pub-cards.zv { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) {
  .research-pub-cards.zv { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; }
  .research-pub-cards.zv > * { flex: 0 0 82%; scroll-snap-align: start; }
}
.research-pub-cards.zv .research-pub-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem; background: var(--paper); border: 1px solid var(--rule-soft); border-top: 2px solid var(--vermilion); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; min-height: 9.5rem; }
.research-pub-cards.zv .research-pub-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.research-pub-cards.zv .pub-card-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.research-pub-cards.zv .pub-card-type { color: var(--vermilion); }
.research-pub-cards.zv .pub-card-title { font-family: var(--display); font-size: 1.08rem; line-height: 1.2; }
.research-pub-cards.zv .pub-card-desc { font-size: 0.88rem; line-height: 1.4; color: var(--ink-mid); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.research-pub-cards.zv .pub-card-foot { margin-top: auto; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); }
.research-pub-cards.zv .pub-card-doi { color: var(--vermilion); }
.zv-hinweis { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 0.9rem; }

/* ---------- Weitere Vorhaben und Werkzeuge, kürzer ---------- */
.feed-section.kompakt .feed-item { padding: 1rem 0; }
.tool-preview-mini-list.raster { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 2rem; }
@media (max-width: 760px) { .tool-preview-mini-list.raster { grid-template-columns: 1fr; } }
.werkzeuge-mehr summary { cursor: pointer; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vermilion); margin: 0.6rem 0 1rem; list-style: none; }
.werkzeuge-mehr summary::-webkit-details-marker { display: none; }
.werkzeuge-mehr summary::before { content: "+ "; }
.werkzeuge-mehr[open] summary::before { content: "− "; }

/* ---------- Presse & Flyer ---------- */
.pv-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; }
.pv-filter button { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; border: 1px solid var(--rule-soft); padding: 0.45rem 0.7rem; cursor: pointer; color: var(--ink); }
.pv-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pv-raster { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.6rem; }
@media (max-width: 900px) { .pv-raster { grid-template-columns: 1fr; } }
.pv-marke { border: 1px solid var(--rule-soft); background: var(--paper); display: grid; grid-template-rows: auto 1fr; }
.flyer { position: relative; overflow: hidden; aspect-ratio: 105 / 148; max-height: 34rem; background: #141412; color: #f4efe1; padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.flyer::after { content: ""; position: absolute; right: -30%; top: -20%; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(244,239,225,0.14); box-shadow: 0 0 0 2.2rem rgba(244,239,225,0.03), 0 0 0 4.4rem rgba(244,239,225,0.02); }
.flyer-kopf { display: flex; align-items: center; gap: 0.7rem; position: relative; z-index: 1; }
.flyer-kopf img { width: 3rem; height: 3rem; background: #f4efe1; border-radius: 0.5rem; padding: 0.3rem; }
.flyer-name { font-family: var(--display); font-size: 1.4rem; }
.flyer-claim { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; position: relative; z-index: 1; }
.flyer-text { font-size: 0.92rem; line-height: 1.45; color: rgba(244,239,225,0.82); position: relative; z-index: 1; }
.flyer ul { margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; }
.flyer li { font-size: 0.88rem; line-height: 1.4; padding: 0.3rem 0 0.3rem 1rem; border-top: 1px solid rgba(244,239,225,0.12); position: relative; }
.flyer li::before { content: "→"; position: absolute; left: 0; color: #d83a13; }
.flyer-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 0.8rem; position: relative; z-index: 1; }
.flyer-fuss .domain { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.04em; }
.flyer-fuss .absender { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: rgba(244,239,225,0.55); margin-top: 0.3rem; }
.flyer-fuss img.qr { width: 4.6rem; height: 4.6rem; background: #fff; padding: 0.25rem; }
.pv-presse { padding: 1.1rem 1.2rem 1.2rem; }
.pv-presse h3 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vermilion); margin: 0 0 0.5rem; font-weight: 700; }
.pv-presse p { font-size: 0.93rem; line-height: 1.5; margin: 0 0 0.6rem; }
.pv-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.pv-aktionen button, .pv-aktionen a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; border: 1px solid var(--rule-soft); padding: 0.4rem 0.65rem; cursor: pointer; color: var(--ink); text-decoration: none; }
.pv-aktionen button:hover, .pv-aktionen a:hover { border-color: var(--ink); }
.pv-meldungen { list-style: none; padding: 0; margin: 0 0 2.4rem; }
.pv-meldungen li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule-soft); }
.pv-meldungen .d { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-faint); }
@media (max-width: 600px) { .pv-meldungen li { grid-template-columns: 1fr; gap: 0.2rem; } }
.pv-abschnitt { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vermilion); margin: 2.2rem 0 1rem; font-weight: 700; }

/* Druck: nur der gewählte Flyer bzw. alle Flyer, je einer pro Seite */
@media print {
  body * { visibility: hidden; }
  .druck-ziel, .druck-ziel * { visibility: visible; }
  .druck-ziel { position: absolute; left: 0; top: 0; width: 105mm; height: 148mm; max-height: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.druck-alle .flyer { visibility: visible; position: relative; width: 105mm; height: 148mm; max-height: none; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.druck-alle .flyer * { visibility: visible; }
}
@page { size: A6; margin: 0; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-hintergrund .dreh, .sf-hintergrund .dreh2, .sf-laufband-spur, .sf-chip.live::before { animation: none; }
  html.js .einblenden { opacity: 1; transform: none; transition: none; }
  .sf-kachel, .research-pub-cards.zv .research-pub-card { transition: none; }
}

/* Korrekturen v0.66: Rasterkinder dürfen schrumpfen; lange Domains kürzen */
.research-feature > * { min-width: 0; }
.research-ids { flex-wrap: wrap; }
.sf-fuss > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-fuss .sf-chip { flex: none; }
.pv-meldungen a{color:var(--vermilion);text-decoration:none;border-bottom:1px solid currentColor;}

/* Operatio-Überblick: Statusschild (v0.66.1) */
.ob-chip { display:inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.45rem; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.ob-chip.live { color: #2f8a3c; } .ob-chip.test { color: #a67a10; } .ob-chip.betrieb { color: #2c6f9e; } .ob-chip.aufbau { color: var(--ink-faint); }

/* ===== v0.68 · Leitbild-Band, Myzel, Karten & Plakate ===== */
.leitbild{position:relative;overflow:hidden;margin:2.2rem calc(50% - 50vw) 0;padding:4.2rem 1.25rem 3.6rem;color:#f3efe4;background:#10130e;isolation:isolate}
.lb-foto{position:absolute;inset:-4%;z-index:-2;background:url("../img/gestaltung/myzel-waldboden.jpg") center 62%/cover no-repeat;opacity:.55;transform:scale(1.04)}
html.js .lb-foto{animation:lb-zoom 38s ease-in-out infinite alternate}
@keyframes lb-zoom{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-2%)}}
.leitbild::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,19,14,.82) 0%,rgba(16,19,14,.55) 45%,rgba(16,19,14,.9) 100%)}
.lb-myzel{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;z-index:-1;pointer-events:none}
.lb-myzel path{fill:none;stroke:#e9e2c9;stroke-width:.9;stroke-linecap:round;opacity:.32;stroke-dasharray:calc(var(--l)*1px);stroke-dashoffset:0}
html.js .lb-myzel path{stroke-dashoffset:calc(var(--l)*1px);transition:stroke-dashoffset 2.6s cubic-bezier(.3,.6,.3,1) var(--v)}
html.js .leitbild.sichtbar .lb-myzel path{stroke-dashoffset:0}
.lb-inhalt{max-width:68rem;margin:0 auto}
.lb-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#c9c08f}
.lb-titel{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.04;letter-spacing:.01em;margin:.6rem 0 2.4rem;color:#faf7ee}
.lb-titel em{font-style:italic;color:#c9c08f}
.lb-skala{list-style:none;margin:0 0 3rem;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;position:relative}
.lb-skala::before{content:"";position:absolute;left:4%;right:4%;top:2.5rem;height:1px;background:linear-gradient(90deg,#c9c08f,rgba(201,192,143,.15));transform-origin:left;transform:scaleX(1)}
html.js .lb-skala::before{transform:scaleX(0);transition:transform 2.2s ease .2s}
html.js .leitbild.sichtbar .lb-skala::before{transform:scaleX(1)}
.lb-stufe{display:grid;grid-template-rows:5rem auto;justify-items:center;align-items:center;gap:.35rem;position:relative;min-width:0}
.lb-kreis{display:grid;place-items:center;width:calc(4.6rem*var(--g));height:calc(4.6rem*var(--g));min-width:2.4rem;min-height:2.4rem;border-radius:50%;background:rgba(16,19,14,.72);border:1px solid rgba(233,226,201,.55);box-shadow:0 0 0 6px rgba(201,192,143,.06);transition:transform .4s ease,background .4s ease}
.lb-kreis svg{width:58%;height:58%;fill:none;stroke:#f3efe4;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.lb-stufe:hover .lb-kreis{transform:scale(1.12);background:rgba(201,192,143,.25)}
.lb-wort{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#ddd6bd;text-align:center}
.lb-triade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;border-top:1px solid rgba(233,226,201,.25);border-bottom:1px solid rgba(233,226,201,.25);padding:2rem 0}
.lb-tri{text-align:center;padding:0 .6rem;min-width:0}
.lb-tri + .lb-tri{border-left:1px solid rgba(233,226,201,.18)}
.lb-tri-icon svg{width:4.2rem;height:4.2rem;fill:none;stroke:#f3efe4;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lb-tri-wort{font-family:var(--mono);letter-spacing:.32em;text-transform:uppercase;font-size:.9rem;margin:.7rem 0 .4rem;color:#faf7ee}
.lb-tri:nth-child(3) .lb-tri-wort{color:#d9a35a}
.lb-tri p{margin:0;font-size:.95rem;line-height:1.45;color:#d4cdb3}
.lb-tri .iris{fill:rgba(201,192,143,.35)}
.lb-tri .pupille{fill:#f3efe4;stroke:none}
.lb-tri .knoten{fill:#10130e;stroke:#c9c08f}
.lb-tri .blatt{fill:rgba(140,160,90,.45)}
.lb-tri .boden{stroke:#d9a35a}
html.js .lb-tri .lid{transform-origin:32px 32px;animation:lb-blinzeln 6s infinite}
@keyframes lb-blinzeln{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
html.js .lb-tri .pupille{animation:lb-schauen 9s ease-in-out infinite}
@keyframes lb-schauen{0%,100%{transform:translateX(0)}30%{transform:translateX(3px)}60%{transform:translateX(-3px)}}
html.js .lb-tri .knoten{animation:lb-puls 3.2s ease-in-out infinite;animation-delay:calc(var(--k)*.4s);transform-box:fill-box;transform-origin:center}
@keyframes lb-puls{0%,100%{transform:scale(1);fill:#10130e}50%{transform:scale(1.45);fill:#c9c08f}}
html.js .lb-tri .stiel{stroke-dasharray:26;animation:lb-wachsen 5s ease-in-out infinite}
html.js .lb-tri .blatt{transform-box:fill-box;animation:lb-blatt 5s ease-in-out infinite}
html.js .lb-tri .b1{transform-origin:right bottom}
html.js .lb-tri .b2{transform-origin:left bottom;animation-delay:.25s}
@keyframes lb-wachsen{0%{stroke-dashoffset:26}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:26}}
@keyframes lb-blatt{0%,25%{transform:scale(0)}50%,85%{transform:scale(1)}100%{transform:scale(0)}}
.lb-motto{margin:1.6rem 0 0;text-align:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#c9c08f}

/* Karten & Plakate */
.lb-werkstatt{margin:2.6rem 0 1rem}
.lbw-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:.5rem;margin-bottom:1rem}
.lbw-kopf h2{font-family:var(--mono);font-weight:400;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0}
.lbw-kopf a{font-family:var(--mono);font-size:.75rem;color:var(--vermilion);text-decoration:none}
.lb-galerie{list-style:none;margin:0;padding:0 0 .6rem;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(10.5rem,1fr);gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.lb-galerie li{scroll-snap-align:start;min-width:0}
.lb-galerie.gross{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));overflow:visible}
.lb-bild{display:block;position:relative;width:100%;aspect-ratio:1/1;padding:0;border:1px solid var(--rule-soft);background:#fff;cursor:zoom-in;overflow:hidden}
.lb-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.lb-bild:hover img,.lb-bild:focus-visible img{transform:scale(1.06)}
.lb-bild-tag{position:absolute;top:.4rem;right:.4rem;font-family:var(--mono);font-size:.62rem;background:rgba(21,21,21,.78);color:#fff;padding:.1rem .35rem}
.lb-bild-unter{display:block;font-size:.8rem;line-height:1.35;color:var(--ink-mid);margin-top:.4rem}
.bild-dialog{max-width:min(94vw,64rem);max-height:94vh;padding:1rem;border:0;background:#faf8f2;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.bild-dialog::backdrop{background:rgba(10,12,9,.82)}
.bild-dialog img{display:block;max-width:100%;max-height:78vh;margin:0 auto;object-fit:contain}
.bd-zu{position:absolute;top:.3rem;right:.5rem;border:0;background:none;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--ink)}
.bd-titel{margin:.6rem 0 .2rem;font-size:.9rem;color:var(--ink-mid);text-align:center}
.bd-laden{display:block;text-align:center;font-family:var(--mono);font-size:.75rem;color:var(--vermilion)}

/* Schaufenster mit Myzel-Hintergrund */
.schaufenster{isolation:isolate}
.schaufenster::after{content:"";position:absolute;inset:0;z-index:-1;background:url("../img/gestaltung/myzel-netz-dunkel.jpg") center/cover no-repeat;opacity:.16;mix-blend-mode:screen;pointer-events:none}

/* Operatio-Band */
.op-band{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch;background:#0d1117;color:#f1ead6;margin:0 0 3rem;min-height:17rem}
.op-band-text{padding:2.4rem 2rem;display:flex;flex-direction:column;justify-content:center;gap:1rem;position:relative;z-index:1}
.op-band-text p{margin:0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;line-height:1.18;font-size:clamp(1.15rem,2.6vw,1.75rem)}
.op-band-text b{color:#f2b544;font-weight:400}
.op-band-text i{display:block;width:2.6rem;height:2px;background:#f2b544}
.op-band-bild{background:linear-gradient(90deg,#0d1117 0%,rgba(13,17,23,0) 30%),url("../img/gestaltung/systeme-landschaft.jpg") center/cover no-repeat}
html.js .op-band-bild{animation:op-schweben 24s ease-in-out infinite alternate}
@keyframes op-schweben{from{background-position:50% 40%}to{background-position:50% 70%}}

@media (max-width:760px){
  .leitbild{padding:3rem 1rem 2.6rem}
  .lb-skala{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.4rem}
  .lb-skala::before{display:none}
  .lb-triade{gap:.4rem;padding:1.4rem 0}
  .lb-tri{padding:0 .2rem}
  .lb-tri-icon svg{width:2.8rem;height:2.8rem}
  .lb-tri-wort{font-size:.68rem;letter-spacing:.14em;margin:.5rem 0 .3rem}
  .lb-tri p{font-size:.78rem;line-height:1.35}
  .lb-motto{letter-spacing:.12em;line-height:1.7}
  .op-band{grid-template-columns:1fr}
  .op-band-bild{min-height:11rem;order:-1}
}
html[data-geraet="fernseher"] .lb-titel{font-size:5rem}
@media (prefers-reduced-motion:reduce){
  .lb-foto,.lb-tri *,.op-band-bild{animation:none!important}
  .lb-myzel path{stroke-dashoffset:0!important;transition:none!important}
  .lb-skala::before{transform:none!important;transition:none!important}
}
@media print{.leitbild,.lb-werkstatt,.op-band,.bild-dialog{display:none!important}}
.lb-galerie.gross .lb-bild{aspect-ratio:auto}.lb-galerie.gross .lb-bild img{height:auto}

/* ===== v0.69 · einheitliche Abschnitte, Strang-Karte, Partnernetz, Bibliotheca, Suche, Teilen ===== */
:root{--olive:#5e6b32;--olive-hell:#c9c08f;--st-live:#2a7a35;--st-test:#c98a1b;--st-betrieb:#2f6f9f;--st-aufbau:#8f8c7e}
.ab-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:1.1rem;border-top:2px solid var(--ink);padding-top:1rem;margin-bottom:1.6rem}
.ab-nr{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--vermilion);border:1px solid var(--vermilion);padding:.2rem .45rem;align-self:start;margin-top:.15rem}
.ab-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.ab-titel{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.12;margin:.25rem 0 0}
.ab-link{font-family:var(--mono);font-size:.74rem;color:var(--vermilion);text-decoration:none;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:1px}
.feed-section.kompakt:has(>.ab-kopf),.lb-werkstatt,.strangkarte,.partnernetz{margin-top:4.2rem;margin-bottom:0}
.lb-werkstatt{margin-bottom:3rem}
@media (max-width:640px){.ab-kopf{grid-template-columns:auto minmax(0,1fr)}.ab-link{grid-column:2;justify-self:start}}

/* Strang-Karte */
.sk-lead,.pn-lead{max-width:44rem;color:var(--ink-mid);font-size:1.02rem;margin:-.4rem 0 1.2rem}
.sk-buehne{background:radial-gradient(circle at 50% 50%,#fbf8ef 0,#f1ead7 70%);border:1px solid var(--rule-soft);padding:.4rem}
.sk-svg{display:block;width:100%;height:auto;font-family:var(--mono)}
.sk-linie{fill:none;stroke:#8d8a7a;stroke-width:1.2;stroke-dasharray:calc(var(--l)*1px);stroke-dashoffset:0}
.sk-linie.haupt{stroke:var(--ink-soft);stroke-width:1.6}
html.js .strangkarte .sk-linie{stroke-dashoffset:calc(var(--l)*1px);transition:stroke-dashoffset 1.6s ease .2s}
html.js .strangkarte.sichtbar .sk-linie{stroke-dashoffset:0}
.sk-puls{fill:var(--vermilion);opacity:.85}
.sk-mitte circle{fill:var(--ink)}
.sk-mitte .ring{fill:none;stroke:var(--vermilion);stroke-width:1.2;stroke-dasharray:4 6}
html.js .sk-mitte .ring{transform-origin:500px 330px;animation:sk-dreh 40s linear infinite}
@keyframes sk-dreh{to{transform:rotate(360deg)}}
.sk-mitte text{fill:#f4efe1}.sk-mitte .n{font-family:var(--display);font-size:17px}.sk-mitte .u{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;fill:var(--olive-hell)}
.sk-feld rect{fill:#151515;transition:fill .25s}.sk-feld text{fill:#f4efe1;font-size:12.5px;letter-spacing:.04em}
.sk-marke circle{stroke:#fbf8ef;stroke-width:3;transition:r .2s}
.sk-marke text{fill:var(--ink);font-size:14px;transition:fill .2s}
.sk-marke.live circle{fill:var(--st-live)}.sk-marke.test circle{fill:var(--st-test)}.sk-marke.betrieb circle{fill:var(--st-betrieb)}.sk-marke.aufbau circle{fill:var(--st-aufbau)}
.sk-marke:hover circle,.sk-marke:focus circle{r:14}.sk-marke:hover text,.sk-marke:focus text{fill:var(--vermilion)}
.sk-gruppe{transition:opacity .25s}
.sk-svg:hover .sk-gruppe{opacity:.35}.sk-svg:hover .sk-gruppe:hover{opacity:1}
.sk-gruppe:hover .sk-feld rect{fill:var(--vermilion)}
.sk-gruppe:hover .sk-linie{stroke:var(--vermilion)}
html[lang="en"] .t-de,html:not([lang="en"]) .t-en{display:none}
.sk-liste{display:none}
.sk-legende{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.8rem}
.sk-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-mid);text-decoration:none}
.sk-chip i{width:.7rem;height:.7rem;border-radius:50%;background:var(--st-aufbau)}
.sk-chip.live i{background:var(--st-live)}.sk-chip.test i{background:var(--st-test)}.sk-chip.betrieb i{background:var(--st-betrieb)}
@media (max-width:700px){
  .sk-buehne{display:none}.sk-liste{display:grid;gap:.9rem}
  .sk-lgruppe{border-left:3px solid var(--ink);padding:.2rem 0 .2rem .8rem}
  .sk-lfeld{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.35rem}
  .sk-lchips{display:flex;flex-wrap:wrap;gap:.35rem}
  .sk-lchips .sk-chip{border:1px solid var(--rule-soft);padding:.35rem .6rem;background:#fbf8ef;color:var(--ink);font-size:.8rem}
}

/* Partnernetz */
.pn-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pn-karte{position:relative;border:1px solid var(--rule-soft);background:#fbf8ef;padding:1.1rem 1.1rem 1rem;min-width:0;transition:border-color .2s,transform .2s}
.pn-karte:hover{border-color:var(--ink);transform:translateY(-2px)}
.pn-karte svg{width:2rem;height:2rem;fill:none;stroke:var(--olive);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pn-karte h3{font-family:var(--display);font-weight:400;font-size:1.2rem;margin:.5rem 0 .3rem}
.pn-karte p{font-size:.92rem;line-height:1.45;color:var(--ink-mid);margin:0 0 .7rem}
.pn-karte a{font-family:var(--mono);font-size:.72rem;color:var(--vermilion);text-decoration:none}
.pn-fuss{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:1.2rem}
.pn-fuss .sf-knopf.voll{color:#fff}
.pn-zweit{font-family:var(--mono);font-size:.74rem;color:var(--ink-mid)}
@media (max-width:900px){.pn-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pn-raster{grid-template-columns:1fr}}
.bib-hinweis{display:block;margin:1.2rem 0 .4rem;font-family:var(--mono);font-size:.78rem;color:var(--ink);text-decoration:none;border-left:3px solid var(--vermilion);padding:.5rem .8rem;background:#fbf8ef}
.bib-hinweis:hover{color:var(--vermilion)}

/* Bibliotheca */
.bk-buecher{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;background:#151515;color:#f4efe1;padding:1.4rem;margin:0 0 2rem}
.bk-buecher svg{width:2.6rem;height:2.6rem;fill:none;stroke:var(--olive-hell);stroke-width:1.4}
.bk-buecher h2{font-family:var(--display);font-weight:400;margin:0 0 .4rem;font-size:1.5rem}
.bk-buecher p{margin:0 0 .6rem;color:#d8d2bf;font-size:.95rem;max-width:44rem}
.bk-buecher a{color:var(--olive-hell);font-family:var(--mono);font-size:.74rem}
.bk-werkzeug{position:sticky;top:0;z-index:5;background:var(--paper);padding:.8rem 0;border-bottom:1px solid var(--rule-soft);margin-bottom:1.2rem}
.bk-such{display:flex;align-items:center;gap:.5rem;border:1px solid var(--ink);background:#fff;padding:.45rem .7rem;margin-bottom:.6rem}
.bk-such svg,.such-knopf svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex:none}
.bk-such input{border:0;outline:0;font:inherit;font-size:1rem;width:100%;background:transparent;color:var(--ink)}
.bk-filter{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.bk-filter button{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;border:1px solid var(--rule-soft);background:#fbf8ef;padding:.35rem .6rem;cursor:pointer;color:var(--ink)}
.bk-filter button[aria-pressed="true"]{background:var(--ink);color:#f4efe1;border-color:var(--ink)}
.bk-trenn{width:1px;height:1.2rem;background:var(--rule-soft);margin:0 .3rem}
.bk-leer{font-family:var(--mono);font-size:.8rem;color:var(--ink-faint);margin:.6rem 0 0}
.bk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem}
.bk-karte{display:flex;flex-direction:column;border:1px solid var(--rule-soft);background:#fbf8ef;padding:1rem 1rem .8rem;min-width:0;scroll-margin-top:7rem}
.bk-karte:target{outline:2px solid var(--vermilion)}
.bk-kopf{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.bk-kopf svg{width:1.3rem;height:1.3rem;fill:none;stroke:var(--olive);stroke-width:1.5;stroke-linejoin:round}
.bk-datum{margin-left:auto}
.bk-karte h3{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2;margin:.6rem 0 .35rem}
.bk-karte p{font-size:.92rem;line-height:1.45;color:var(--ink-mid);margin:0 0 .7rem;flex:1}
.bk-meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);margin-bottom:.6rem}
.bk-strang{color:var(--olive);text-decoration:none;border-bottom:1px dotted currentColor}
.bk-links{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}
.bk-l{font-family:var(--mono);font-size:.68rem;text-decoration:none;color:var(--ink);border:1px solid var(--ink);padding:.25rem .5rem}
.bk-l:hover,.bk-l.seite{background:var(--ink);color:#f4efe1}
.bk-l.doi{border-color:var(--rule-soft);color:var(--ink-mid)}
.bk-teilen summary{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);cursor:pointer;list-style:none}
.bk-teilen summary::-webkit-details-marker{display:none}
.bk-teilen summary::before{content:"↗ "}
.bk-fuss{font-size:.85rem;color:var(--ink-faint);margin-top:2rem;max-width:44rem}

/* Teilen */
.teilen-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:.9rem 0;margin:3rem 0 1rem}
.tl-titel{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.tl-reihe{display:flex;flex-wrap:wrap;gap:.35rem}
.tl-ziel{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.7rem;color:var(--ink);text-decoration:none;border:1px solid var(--rule-soft);background:#fbf8ef;padding:.35rem .55rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tl-ziel svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tl-ziel:hover,.tl-ziel:focus-visible{background:var(--ink);color:#f4efe1;border-color:var(--ink)}
.tl-reihe.klein{margin-top:.4rem}.tl-reihe.klein .tl-ziel{padding:.3rem .4rem}
.tl-ziel.kopiert{background:var(--olive);color:#fff;border-color:var(--olive)}

/* Suche */
.such-knopf{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;padding:0;text-transform:uppercase}
.such-knopf:hover{color:var(--vermilion)}
@media (max-width:640px){.such-knopf span{display:none}}
.such-dialog{width:min(94vw,44rem);max-height:86vh;border:1px solid var(--ink);padding:0;background:var(--paper);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.such-dialog::backdrop{background:rgba(16,19,14,.6)}
.sd-kopf{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--ink)}
.sd-kopf svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8}
.sd-kopf input{flex:1;border:0;outline:0;font:inherit;font-size:1.1rem;background:transparent;color:var(--ink)}
.sd-zu{border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink)}
.sd-liste{list-style:none;margin:0;padding:.4rem 0;overflow:auto;max-height:66vh}
.sd-liste a{display:block;padding:.6rem 1rem;text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.sd-liste a:hover,.sd-liste a:focus,.sd-liste li.aktiv a{background:#fbf8ef;border-left-color:var(--vermilion);outline:0}
.sd-liste b{display:block;font-family:var(--display);font-weight:400;font-size:1.05rem}
.sd-liste small{display:block;font-size:.82rem;color:var(--ink-mid);line-height:1.4}
.sd-liste mark{background:#efe3a8;color:inherit}
.sd-liste .sd-u{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint)}
.sd-hinweis{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);padding:.6rem 1rem}
@media (prefers-reduced-motion:reduce){.sk-puls{display:none}.sk-mitte .ring{animation:none!important}.sk-linie{stroke-dashoffset:0!important;transition:none!important}}
@media print{.teilen-leiste,.such-knopf,.such-dialog,.bk-werkzeug,.bk-teilen,.strangkarte .sk-puls{display:none!important}}

.bibliotheca .page-head{margin-bottom:1.6rem}.bibliotheca .page-lead{margin-top:.9rem;max-width:44rem}
.lang .such-knopf+span{margin:0 .1rem}

/* v0.69 · Untermenü: Einträge untereinander (nav.tabs a überstimmte .tab-sub a) */
@media (min-width:721px){nav.tabs .tab-sub a{display:block;margin:0;padding:.4rem 1.1rem}}
/* v0.69 · Forschung und Werkzeuge im selben Raster wie die übrigen Abschnitte */
.research-feature:has(>.ab-kopf){max-width:none;background:none;border:0;padding:0;margin:4.2rem 0 0;column-gap:3rem;row-gap:0}
.research-feature>.ab-kopf{grid-column:1/-1}
.tool-preview-mini:has(>.ab-kopf){max-width:none;background:none;border-left:0;padding:0;margin:4.2rem 0 0}

.research-feature:has(>.ab-kopf){grid-template-columns:1fr}
.research-feature:has(>.ab-kopf) .research-publications{border-left:0;padding-left:0;margin-top:1.6rem;border-top:1px solid var(--rule-soft);padding-top:1.4rem}
.research-feature:has(>.ab-kopf) .research-body p{max-width:44rem}
.tool-preview-mini:has(>.ab-kopf) a{color:var(--vermilion)}
.schaufenster .sf-eyebrow::before{content:"02";font-family:var(--mono);color:#f4efe1;border:1px solid rgba(244,239,225,.5);padding:.15rem .4rem;margin-right:.7rem;letter-spacing:.1em}

/* v0.71 · Kontrast nach WCAG 2 AA (axe): Akzent- und Grautöne auf Papier ≥ 4,5:1 */
:root{--vermilion:#b8300e;--ink-faint:#605f56;--ink-mute:#605f56}
.orcid-icon{color:#16240a}
.ob-chip.live{color:#2a7a35}.ob-chip.test{color:#7d5a06}
footer p{opacity:1!important}
.orcid-pill{color:#4a6b12!important;border-color:#4a6b12!important}
.research-id-pill .orcid-icon,.orcid-icon{color:#16240a!important}
.faktur-cat-card-empty .faktur-cat-meta{color:#605f56!important;opacity:1!important}
.faktur-cat-card-empty{opacity:1!important;border-left-style:dashed}
.fs-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-family:var(--mono);font-size:.8rem;margin-top:1.8rem}.fs-links a{color:var(--vermilion);text-decoration:none;border-bottom:1px solid currentColor}
.pf-hinweis{border-left:3px solid var(--olive);background:#fbf8ef;padding:.6rem .9rem;font-family:var(--mono);font-size:.8rem;margin:0 0 1rem}.pf-hinweis a{color:var(--vermilion)}

/* Plattform-Link je Werkzeug (nur sichtbar, wenn daten/plattform.json werkzeuge_live = true) */
.tool-card-link-pf a{font-weight:600;color:var(--vermilion)}

/* ═══ ANSICHTEN v2 · v0.75 · 2026-10-14 — Handy, Tablet, Laptop, großer Bildschirm, Fernseher ═══ */

/* 1 · Menü-Abstände am Rechner: Einträge mit Untermenü hatten doppelten Abstand */
nav.tabs .tab-wrap > a, nav.tabs .tab-wrap > .tab-current { margin-right: 0; }

/* 2 · Lesbarkeit: kleine Beschriftungen nie unter 12 px (wachsen auf großen Bildschirmen weiter mit) */
.tl-ziel, .tl-titel, .bk-l, .bk-typ, .bk-strang, .bk-meta, .bk-datum, .bk-teilen summary, .bk-filter button, .bk-buecher a,
.sf-chip, .ob-chip, .sk-chip, .sf-fuss, .sf-wisch, .sk-lfeld, .ab-eyebrow, .ab-link, .al-datum, .lb-eyebrow, .lb-wort, .lb-tri-wort,
.lb-bild-tag, .pm-k, .pm-tab th, .pn-karte a, .pn-zweit, .zv-hinweis, .pv-aktionen, .pv-aktionen a, .pv-presse, .pv-filter button,
.sf-knopf, .pv-aktionen button, .pv-presse h3, .aktuelles-leiste.kompakt .al-datum, .aktuelles-leiste .al-datum { font-size: max(.75rem, 12px); }
/* Flyer in Prensa bleiben maßstäblich (Druckbild A6) und sind davon ausgenommen */
.lb-motto { font-size: max(.78rem, 12.5px); }

/* 3 · Kopfleiste auf Handy und Touch-Tablett: Menü, Suche und Sprache immer erreichbar,
       verdecken keinen Text, blenden sich beim Hinunterscrollen aus und beim Hinaufscrollen ein */
.kopfleiste { display: none; }
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  html.nav-js body { padding-top: 4.2rem; }
  html.nav-js .kopfleiste { display: block; position: fixed; top: 0; left: 0; right: 0; height: 4rem; z-index: 98;
    background: var(--paper, #f3ecdf); border-bottom: 1px solid var(--rule-soft, #d8d0bf);
    box-shadow: 0 2px 10px rgba(0,0,0,.04); transition: transform .25s ease; }
  html.nav-js .nav-toggle { position: fixed; top: .5rem; left: max(.75rem, env(safe-area-inset-left)); z-index: 101; margin: 0 !important;
    transition: transform .25s ease; }
  html.nav-js .lang { top: .5rem !important; right: max(.75rem, env(safe-area-inset-right)) !important; padding: 0 .35rem !important;
    min-height: 44px; transition: transform .25s ease; z-index: 101; }
  html.nav-js .lang button { min-width: 40px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  html.nav-js .lang .such-knopf { min-width: 42px; }
  html.kopf-weg:not(.nav-open) .kopfleiste, html.kopf-weg:not(.nav-open) .nav-toggle, html.kopf-weg:not(.nav-open) .lang { transform: translateY(-120%); }
  /* geöffnetes Menü als Vollfläche unter der Leiste */
  html.nav-js.nav-open nav.tabs[aria-label="Sections"] { position: fixed; top: 4rem; left: 0; right: 0; bottom: 0; z-index: 100;
    overflow-y: auto; overscroll-behavior: contain; background: var(--paper, #f3ecdf); margin: 0;
    padding: 1.2rem max(1.4rem, env(safe-area-inset-left)) 3rem; border-top: none; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  nav.tabs[aria-label="Sections"] > a, nav.tabs[aria-label="Sections"] .tab-wrap > a,
  nav.tabs[aria-label="Sections"] > .tab-current, nav.tabs[aria-label="Sections"] .tab-wrap > .tab-current
    { font-family: var(--display); font-style: italic; font-size: 1.35rem; padding: .55rem 0; display: block; margin: 0; letter-spacing: 0; text-transform: none; }
  nav.tabs[aria-label="Sections"] .tab-current { color: var(--vermilion); }
  nav.tabs[aria-label="Sections"] .tab-current::after { display: none; }
  nav.tabs[aria-label="Sections"] .tab-sub a { font-size: .95rem; min-height: 40px; display: flex; align-items: center; padding: .3rem 0; }
  nav.tabs[aria-label="Sections"] .tab-wrap { border-bottom: 1px solid var(--rule-soft, #ddd); padding-bottom: .3rem; margin-bottom: .3rem; }
  /* der Kopf brauchte oben Platz für die schwebende Sprachwahl — das übernimmt jetzt die Leiste */
  html.nav-js header, html.nav-js header.page-header { padding-top: 1.6rem; }
  html.nav-js header.page-header { padding-bottom: 1rem; }
  html.nav-js main.page { padding-top: 2rem; }
  /* Anker springen nicht unter die Leiste */
  html { scroll-padding-top: 4.6rem; }
}

/* 4 · Fingertaugliche Ziele (mindestens 44 px) auf Touch-Geräten */
@media (pointer: coarse) {
  .tl-ziel, .bk-l, .bk-filter button, .pv-filter button, .sf-knopf, .pn-zweit, .tool-filter button, .filter-btn, .tf-bar button { min-height: 44px; }
  .back-link { padding-top: .75rem; padding-bottom: .75rem; }
  .bk-teilen summary { min-height: 44px; display: flex; align-items: center; }
  /* reine Textverweise und Plaketten: unsichtbar größere Trefferfläche, Aussehen und Layout bleiben */
  .ab-link a, a.ab-link, .pn-karte a, .tool-card-link a, .company-link, .pv-aktionen a, .al-alle a, p.back-link a, .page-eyebrow a,
  .research-more-link, .callsign, .orcid-pill, .bk-strang, .wk-dl a, .bk-buecher a { position: relative; }
  .ab-link a::after, a.ab-link::after, .pn-karte a::after, .tool-card-link a::after, .company-link::after, .pv-aktionen a::after,
  .al-alle a::after, p.back-link a::after, .page-eyebrow a::after, .research-more-link::after, .callsign::after, .orcid-pill::after,
  .bk-strang::after, .wk-dl a::after, .bk-buecher a::after
    { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
  .bk-such input, input[type="search"], input[type="text"] { min-height: 44px; font-size: max(16px, 1rem); } /* 16 px: kein Auto-Zoom auf dem iPhone */
  .pv-aktionen button { min-height: 44px; }
}

/* 5 · Unterschriftzeile auf dem Handy ohne verwaiste Trennpunkte */
@media (max-width: 720px) {
  .signature { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; }
  .signature .sep { display: none; }
}

/* 6 · Handy quer und niedrige Fenster: Logo und Bühnenbilder nicht bildschirmfüllend */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-logo { max-height: 42vh; width: auto; }
  .leitbild, .lb-band { min-height: 0 !important; }
  html.nav-js body { padding-top: 3.8rem; }
  html.nav-js .kopfleiste { height: 3.4rem; }
  html.nav-js .nav-toggle, html.nav-js .lang { top: .25rem !important; }
  html.nav-js.nav-open nav.tabs[aria-label="Sections"] { top: 3.4rem; columns: 2; column-gap: 2rem; }
  html.nav-js.nav-open nav.tabs[aria-label="Sections"] .tab-wrap { break-inside: avoid; }
}

/* 7 · Weniger Bewegung, wenn im System eingestellt */
@media (prefers-reduced-motion: reduce) {
  .kopfleiste, .nav-toggle, .lang { transition: none !important; }
}

/* 8 · „Zurück zum Start“ oben: die Regel für den unteren Rückverweis (Linie, großer Abstand) galt auch hier */
header a.back-link { margin-top: 0; border-top: none; padding-top: .3rem; padding-bottom: .3rem; }
@media (pointer: coarse) { header a.back-link { padding-top: .75rem; padding-bottom: .75rem; } }

/* 9 · Aktueller Bereich mit Untermenü sieht aus wie die übrigen Menüeinträge (fehlte bisher) */
nav.tabs .tab-wrap > span.tab-current { display: inline-block; position: relative; padding: .4rem 0 .5rem; font-family: var(--display); font-size: 1.2rem;
  font-weight: 400; font-style: italic; letter-spacing: -.005em; color: var(--vermilion); cursor: default; }
nav.tabs .tab-wrap > span.tab-current::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--vermilion); }

/* 10 · Anzeige-Schalter („A“) auf allen Geräten unten rechts — oben lag er hinter der Sprachwahl */
.a11y-toggle { top: auto !important; bottom: max(.8rem, env(safe-area-inset-bottom)); right: max(.8rem, env(safe-area-inset-right)); }
.a11y-panel { top: auto !important; bottom: 3.6rem; max-height: 75vh; overflow-y: auto; }
@media print { .kopfleiste, .a11y-toggle, .teilen-leiste { display: none !important; } html.nav-js body { padding-top: 0 !important; } }

/* 11 · Große Bildschirme: Unterseiten nutzen die Breite (Raster, Karten, Tabellen), Fließtext bleibt gut lesbar schmal */
@media (min-width: 1500px) {
  .wrap:has(> main.page) { max-width: 74rem; }
  main.page p, main.page li, main.page dd, main.page blockquote { max-width: 48rem; }
  main.page .tool-card p, main.page .company-item p, main.page [class*="karte"] p, main.page [class*="kachel"] p, main.page td p { max-width: none; }
}
@media (min-width: 2400px) { .wrap:has(> main.page) { max-width: 78rem; } }
.contact-mini p { max-width: 48rem; }

/* ═══ SATIRE · Der ewige Schü(l)ler · v0.76 · 2026-10-19 ═══ */
.es-seite .page-title .es-l { color: var(--vermilion); font-style: italic; }
.es-held { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 2.4rem; align-items: start; margin: 2.2rem 0 3rem; }
.es-bildknopf { display: block; padding: 0; border: 1px solid var(--rule-soft, #d4ceba); background: #fff; cursor: zoom-in; box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: rotate(-1.2deg); transition: transform .3s ease; }
.es-bildknopf:hover, .es-bildknopf:focus-visible { transform: rotate(0) scale(1.01); }
.es-bildknopf img { display: block; width: 100%; height: auto; }
.es-steckbrief h2, .es-block > h2 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.es-steckbrief dl { margin: 0; border-top: var(--bar, 3px) solid var(--ink); }
.es-zeile { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule-soft, #d4ceba); }
.es-zeile dt { font-family: var(--mono); font-size: max(.75rem, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute, #605f56); padding-top: .2rem; }
.es-zeile dd { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.es-grundsatz { margin: 1.4rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid var(--vermilion); background: var(--paper-deep, #ebe4d0); font-size: .95rem; line-height: 1.55; }
.es-block { margin: 0 0 3.4rem; }
.es-hinweis { color: var(--ink-mid, #56564f); margin: -.4rem 0 1.4rem; }
.es-themen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .es-themen { grid-template-columns: 1fr; } }
.es-thema { background: #fbf8ef; border: 1px solid var(--rule-soft, #d4ceba); border-top: 3px solid var(--ink); padding: 1.1rem 1.2rem; }
.es-thema h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.25rem; margin: 0 0 .4rem; }
.es-thema p { margin: 0; font-size: .95rem; line-height: 1.55; }
.es-folge { margin: 0 0 2.2rem; }
.es-folge-kopf { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; }
.es-folge-kopf h3 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 0; }
.es-folge-nr, .es-datum { font-family: var(--mono); font-size: max(.75rem, 12px); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion); }
.es-datum { color: var(--ink-mute, #605f56); margin-left: auto; }
.es-streifen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.es-bild { position: relative; }
.es-bild svg { display: block; width: 100%; height: auto; }
.es-nr { position: absolute; top: .35rem; right: .45rem; font-family: var(--mono); font-size: 12px; background: var(--ink); color: #fbf8ef; min-width: 1.4rem; text-align: center; padding: .05rem .3rem; }
.es-abschrift { margin-top: .8rem; font-size: .92rem; }
.es-abschrift summary { cursor: pointer; font-family: var(--mono); font-size: max(.75rem, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid, #56564f); }
.es-abschrift ol { margin: .6rem 0 0; padding-left: 1.3rem; line-height: 1.6; }
.es-texte { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; }
.es-text { background: #fff; border: 1px solid var(--rule-soft, #d4ceba); padding: 1.3rem 1.4rem 1.1rem; position: relative;
  background-image: repeating-linear-gradient(#fff 0 1.62rem, #e6edf3 1.62rem calc(1.62rem + 1px)); background-position: 0 2.9rem; }
.es-text::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.2rem; border-left: 1px solid rgba(184,48,14,.35); }
.es-text h3 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.15rem; margin: 0 0 .6rem 1.4rem; }
.es-text p { margin: 0 0 0 1.4rem; line-height: 1.62rem; font-size: .98rem; }
.es-programm { background: var(--ink); color: #f4efe1; padding: 1.8rem 1.8rem 1.4rem; }
.es-programm h2 { color: #f4efe1; }
.es-programm .ob-chip { color: #f4efe1; }
.es-programm a { color: #f4efe1; }
.es-bausteine { margin: 1rem 0; padding-left: 1.2rem; line-height: 1.7; }
.es-kontakt { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(244,239,225,.25); }
/* Karte auf der Satire-Seite */
.es-liste { margin: 2rem 0 3rem; }
.es-karte { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.4rem; align-items: center; text-decoration: none; color: inherit;
  border: 1px solid var(--rule-soft, #d4ceba); border-left: 3px solid var(--vermilion); background: #fbf8ef; padding: 1rem; transition: background .2s; }
.es-karte:hover { background: #fff; }
.es-karte img { width: 100%; height: auto; display: block; }
.es-karte-text { display: flex; flex-direction: column; gap: .45rem; }
.es-karte-art { font-family: var(--mono); font-size: max(.75rem, 12px); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion); }
.es-karte-titel { font-family: var(--display); font-size: 1.8rem; line-height: 1.15; }
.es-karte-kurz { color: var(--ink-mid, #56564f); line-height: 1.5; }
.es-karte-los { font-family: var(--mono); font-size: max(.75rem, 12px); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) { .es-streifen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .es-held { grid-template-columns: 1fr; gap: 1.6rem; }
  .es-bildknopf { max-width: 420px; margin: 0 auto; }
  .es-zeile { grid-template-columns: 1fr; gap: .2rem; }
  .es-karte { grid-template-columns: 1fr; } .es-karte img { max-width: 260px; }
  .es-programm { padding: 1.4rem 1.1rem 1.1rem; }
}
@media (max-width: 420px) { .es-streifen { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .es-bildknopf { transform: none; transition: none; } }
@media print { .es-programm { background: none; color: inherit; border: 1px solid #999; } .es-programm h2, .es-programm a { color: inherit; } }

/* 12 · Unterer Rückverweis: der Pfeil steht schon im Verweistext — kein zweiter davor (21 Unterseiten) */
p.back-link::before { content: none; }

/* 13 · Schaufenster-Kacheln: Domain nie abschneiden — der Status-Chip rückt bei Platzmangel in die nächste Zeile */
.sf-fuss { flex-wrap: wrap; row-gap: .45rem; }
.sf-fuss > span:first-child { overflow: visible; text-overflow: clip; white-space: nowrap; }

/* 14 · Veröffentlichungen: statische Liste, Werkzeug-Link zur Plattform, nachgeladene Zenodo-Einträge (seit v0.80) */
.research-pub-item .pub-werkzeug { display: inline-block; margin-top: .35rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--vermilion); text-decoration: underline; text-underline-offset: 3px; border: 0; }
.research-pub-item .pub-werkzeug:hover { color: var(--ink); }
.research-pub-item .pub-neu { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vermilion); margin-right: .3rem; }

/* 15 · Media-Kit (prensa-media.html, seit v0.80) */
.mk { margin: 2rem 0 0; }
.mk-h { font-family: var(--display); font-size: 1.25rem; margin: 0 0 .8rem; }
.mk-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.mk-karte { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; background: var(--paper); border: 1px solid var(--rule-soft); border-top: 2px solid var(--vermilion); }
.mk-karte img { width: auto; max-width: 100%; height: 160px; object-fit: contain; align-self: flex-start; background: #fff; border: 1px solid var(--rule-soft); }
.mk-karte h3 { font-family: var(--display); font-size: 1.02rem; line-height: 1.25; margin: 0 0 .3rem; }
.mk-karte p { font-size: .9rem; line-height: 1.5; color: var(--ink-mid); margin: 0 0 .6rem; }
.mk-link { font-family: var(--mono); font-size: .78rem; color: var(--vermilion); text-decoration: underline; text-underline-offset: 3px; }
.mk-text { display: flex; flex-direction: column; flex: 1; }
.mk-text .mk-link { margin-top: auto; align-self: flex-start; }

/* 16 · Apparat: Werkzeug-Übersicht als Tabelle (seit v0.80) */
.ap { margin-top: 1.6rem; }
.ap-h { font-family: var(--display); font-size: 1.25rem; margin: 0 0 .5rem; }
.ap-lead, .ap-mehr { font-size: .95rem; color: var(--ink-mid); max-width: 44rem; }
.ap-rahmen { overflow-x: auto; margin: 1rem 0; }
.ap-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ap-tabelle th, .ap-tabelle td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--rule-soft); }
.ap-tabelle thead th { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 2px solid var(--vermilion); }
.ap-tabelle tbody th { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.ap-tabelle td:last-child { white-space: nowrap; font-family: var(--mono); font-size: .78rem; }
.ap-tabelle a { color: var(--vermilion); }
@media (max-width: 640px) {
  .ap-tabelle, .ap-tabelle tbody { display: block; width: 100%; }
  .ap-tabelle thead { display: none; }
  .ap-tabelle tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--rule-soft); }
  .ap-tabelle tbody th, .ap-tabelle tbody td, .ap-tabelle td:last-child { display: block; border: 0; padding: .15rem 0; white-space: normal; }
}