/* ============================================================================
   RedFlag – Über-mich-Seite /milo/ (seit 2026-10-26)
   ----------------------------------------------------------------------------
   Nur auf /milo/ eingebunden, nach rf.css. Erzeugt von
   /root/redflag-design-neu/gen_milo.py über gen_live.py.
   ============================================================================ */

/* ── Plakate mit Symbol ── */
.plakat__symbol { width: 74px; height: 74px; margin-bottom: 4px; transition: transform .3s; }
.plakat:hover .plakat__symbol { transform: rotate(-12deg) scale(1.08); }
.plakat:nth-child(3n+3) .plakat__symbol { color: var(--rot); }

/* ── Zitat mit Quelle ── */
.milo-zitat { margin: 30px 0 0; }
.milo-zitat .zitat { margin-top: 0; max-width: 22ch; }
.milo-zitat footer { margin-top: 16px; font: 700 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.milo-zitat footer::before { content: ""; display: inline-block; width: 40px; height: 4px; background: var(--rot); vertical-align: middle; margin-right: 12px; }

/* ── Haltung: langer Text mit Inhaltsverzeichnis ── */
.lesen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.lesen__inhalt { position: sticky; top: 96px; border-top: 6px solid var(--rot); padding-top: 12px; }
.lesen__inhalt b { display: block; font: 900 26px/1 var(--plakat); text-transform: uppercase; margin-bottom: 10px; }
.lesen__inhalt ol { list-style: none; counter-reset: k; }
.lesen__inhalt li { counter-increment: k; border-bottom: 2px solid var(--tinte); }
.lesen__inhalt a {
  display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 9px 2px;
  font: 700 14px/1.3 var(--text); text-decoration: none; transition: background .15s, color .15s;
}
.lesen__inhalt a::before { content: counter(k, decimal-leading-zero); font: 700 12px/1.6 var(--mono); color: var(--rot); }
.lesen__inhalt a:hover { background: var(--tinte); color: var(--papier); }
.lesen__text { max-width: 72ch; }
.lesen__einstieg { font: 900 clamp(30px, 3.4vw, 46px)/1.02 var(--plakat); text-transform: uppercase; margin-bottom: 8px; }
.lesen__einstieg::first-line { color: var(--rot); }
.lesen .unterkopf { scroll-margin-top: 96px; }
.lesen .fliess { max-width: none; }

/* Werkstatt und freie Software: Fließtext in zwei Spalten */
.werkstatt-text { columns: 2 340px; column-gap: 48px; margin-top: 34px; }
.werkstatt-text .fliess { break-inside: avoid; max-width: none; }

/* ── Werkstatt: Plan ── */
.schaltplan { margin: 0 auto; max-width: 920px; }
.schaltplan svg { width: 100%; height: auto; display: block; overflow: visible; }
.schaltplan__hoch { display: none !important; }
.schaltplan figcaption { margin-top: 14px; font-size: 15px; color: var(--grau); border-left: 4px solid var(--rot); padding-left: 12px; }

.schaltplan .leitung { fill: none; stroke: var(--rot); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 18 10; animation: fluss 1.4s linear infinite; }
.schaltplan .leitung--neben { stroke: var(--tinte); stroke-dasharray: 8 8; animation-duration: 2.4s; }
.schaltplan .loetpunkt { fill: var(--tinte); }
.schaltplan .knoten rect { fill: var(--papier); stroke: var(--tinte); stroke-width: 5; }
.schaltplan .knoten text { fill: var(--tinte); font: 900 32px var(--plakat); text-transform: uppercase; letter-spacing: .06em; text-anchor: middle; }
.schaltplan .knoten--rot rect { fill: var(--rot); }
.schaltplan .knoten--rot text { fill: var(--papier); }
.schaltplan .knoten--neben rect { fill: var(--papier-2); stroke-dasharray: 10 6; }
.schaltplan .knoten--neben .neben__name { font: 900 34px var(--plakat); text-transform: uppercase; letter-spacing: .08em; }
.schaltplan .knoten--neben .neben__dienste { font: 700 19px var(--mono); text-transform: none; letter-spacing: 0; fill: var(--rot); }
.schaltplan .zentrale rect { fill: var(--tinte); }
.schaltplan .zentrale text { fill: var(--papier); text-anchor: middle; }
.schaltplan .zentrale__name { font: 900 54px var(--plakat); text-transform: uppercase; letter-spacing: .08em; }
.schaltplan .zentrale__ort { font: 700 18px var(--mono); fill: var(--rot) !important; }
.schaltplan:hover .leitung { animation-duration: .6s; }

@keyframes fluss { to { stroke-dashoffset: -28; } }

@media (max-width: 900px) {
  .lesen { grid-template-columns: 1fr; gap: 26px; }
  .lesen__inhalt { position: static; }
}
@media (max-width: 620px) {
  .schaltplan__breit { display: none !important; }
  .schaltplan__hoch { display: block !important; max-width: 400px; margin: 0 auto; }
  .schaltplan__hoch .knoten text { font-size: 26px; letter-spacing: .02em; }
  .schaltplan__hoch .knoten--neben .neben__dienste { font-size: 19px; }
  .kacheln { grid-template-columns: 1fr 1fr; }
  .kachel b { font-size: 46px; }
  .plakat__symbol { width: 60px; height: 60px; }
}