/* Blaupause: Lichtpause-Blau, weisse Linien, Orange nur fuer Handlungen, Signalgelb nur fuer Markierungen */
:root {
  /* 1 % der kleinen Bildschirmhoehe. Touch: in px eingefroren (index.html), Brave/iOS rechnet svh sonst beim Leisten-Umklappen neu */
  --svh: 1svh;
  --papier: #0c3470;
  --papier-tief: #072149;
  --linie: #e9f1ff;
  --linie-2: rgba(233, 241, 255, .62);
  --linie-3: rgba(233, 241, 255, .3);
  --raster: rgba(233, 241, 255, .055);
  --raster-grob: rgba(233, 241, 255, .09);
  --akzent: #ff6b2c;
  --schrift: 'Barlow', system-ui, sans-serif;
  --titel: 'Anton', 'Barlow', sans-serif;
  --zahl: 'Space Mono', ui-monospace, monospace;
  /* Stempeltinte: Stempel sind Buerotinte, kein Akzent. Orange bleibt Handlungen vorbehalten */
  --tinte: #1d5bd6;
  /* Signalgelb = Markierung (Marlon 29.09., Farbtafel f2): wo du gerade bist, was markiert ist. Traegt immer dunkle Schrift.
     Kraeftig nur fuer kleine Markierungen, grosse Flaechen gedaempft: grell wirkte das Gelb ueber die Flaeche (Marlon 29.09., Tafel skizzen/farbtafel-gelb-*) */
  --markierung: #ffc629; --markierung-flaeche: #efc469; --auf-farbe: #14171b;
}
/* Sechs Schriftstufen fuer die ganze Seite (Premium-Messung 29.09.: Referenzen 4-6, wir hatten 11).
   Space Mono nur fuer Nummern und Masse. Der Handy-Schirm im Ankauf zaehlt als Gegenstand und hat eigene Groessen */
:root {
  --t-label: 11px; --t-ui: 13px; --t-text: 17px; --t-zahl: 22px;
  --t-titel: clamp(32px, 3vw, 44px); --t-display: clamp(52px, 5.6vw, 84px);
}
@media (min-width: 800px) and (max-height: 860px) { :root { --t-titel: clamp(28px, 2.5vw, 40px); --t-display: clamp(48px, 5.2vw, 72px); } }
@media (max-width: 799px) { :root { --t-text: 15px; --t-zahl: 18px; --t-titel: 28px; --t-display: 44px; } }
/* Rollen statt Einzelfarben: Text fuehrt, Zeichnung traegt, Masse und Rahmen treten zurueck */
:root {
  --text: var(--linie); --text-2: var(--linie-2); --zeichnung: var(--linie); --rahmen: var(--linie); --rahmen-2: var(--linie-2);
  --mass: var(--linie); --mass-2: var(--linie-2); --raster-mix: screen; --vignette: rgba(4, 18, 40, .45);
  --seite: var(--papier); --tabelle: var(--papier); --tabelle-linie: var(--linie-3); --nav-rechts: var(--text);
}
/* Weisspause: Graphit auf warmem Papier, Blau nur fuer Masse und Positionsnummern (Marlon 26.09.: komplett blau = unuebersichtlich) */
:root[data-look="misch"] {
  --seite: #f3f1ec; --text: #14171b; --text-2: rgba(20, 23, 27, .66);
  --tabelle: #f3f1ec; --tabelle-linie: rgba(28, 32, 38, .2); --nav-rechts: var(--linie);
}
:root[data-look="weiss"] {
  --papier: #f3f1ec; --linie: #1c2026; --linie-2: rgba(28, 32, 38, .6); --linie-3: rgba(28, 32, 38, .22);
  --raster: rgba(28, 32, 38, .045); --raster-grob: rgba(28, 32, 38, .075); --raster-mix: multiply; --vignette: rgba(120, 110, 90, .12);
  --text: #14171b; --text-2: rgba(20, 23, 27, .66); --zeichnung: #22262c; --rahmen: #1c2026; --rahmen-2: rgba(28, 32, 38, .5);
  --mass: #1d5bd6; --mass-2: rgba(29, 91, 214, .62);
}

* { box-sizing: border-box; margin: 0; }
/* Auch html: #bestand ist beim Blattwechsel gedreht und 4-6 px breiter, nur body abzuschneiden liess die Seite seitlich wackeln */
html { overflow-x: clip; }
body { background: var(--seite); color: var(--text); font-family: var(--schrift); overflow-x: clip; }

/* Millimeterraster unter der Zeichnung: 8 px fein, 40 px grob */
.tafel::before, .tafel-blatt::before, .buehne-handy::before, .buehne-anfahrt::before {
  content: ''; position: absolute; inset: var(--tafel-o, 0) var(--tafel-r, 0) var(--tafel-u, 0) var(--tafel-l, 0); pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(var(--raster-grob) 1px, transparent 1px), linear-gradient(90deg, var(--raster-grob) 1px, transparent 1px),
    linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  mix-blend-mode: var(--raster-mix);
}
/* Lichtpause ist nie ganz gleichmaessig: leichte Vignette zum Rand */
.tafel::after, .tafel-blatt::after, .buehne-handy::after, .buehne-anfahrt::after { content: ''; position: absolute; inset: var(--tafel-o, 0) var(--tafel-r, 0) var(--tafel-u, 0) var(--tafel-l, 0); pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 45% 45%, transparent 55%, var(--vignette)); }


.blatt .duenn { stroke: var(--mass-2); stroke-width: 1; fill: none; }
.blatt .mittel { stroke: var(--rahmen); stroke-width: 1.5; fill: none; }
.blatt .dick { stroke: var(--rahmen); stroke-width: 2; fill: none; }
.blatt .strichpunkt { stroke: var(--mass-2); stroke-width: 1; stroke-dasharray: 22 4 2 4; fill: none; }
.blatt .pfeil { fill: var(--mass); }
.blatt .zone { fill: var(--rahmen-2); font: 500 var(--t-label) var(--schrift); text-anchor: middle; dominant-baseline: central; }
.blatt .masszahl { paint-order: stroke; stroke: var(--papier); stroke-width: 4px; stroke-linejoin: round; fill: var(--mass); font: 400 var(--t-ui) var(--zahl); text-anchor: middle; letter-spacing: .02em; }
.blatt .ballon .kreis { fill: var(--papier); stroke: var(--mass); stroke-width: 1.5; }
.blatt .ballon .punkt { fill: var(--mass); }
.blatt .ballon .nummer { fill: var(--mass); font: 700 var(--t-ui) var(--zahl); text-anchor: middle; dominant-baseline: central; }
.blatt .ballon.klein .nummer { font-size: var(--t-label); }
.blatt .ballon.aktiv .kreis { fill: var(--markierung); stroke: var(--markierung); }
.blatt .ballon.aktiv .nummer { fill: var(--auf-farbe); }

/* Nav und Titel liegen ueber der Buehne und scrollen mit der Seite weg (die Buehne ist sticky) */
.leiste, .titel { position: absolute; z-index: 6; }
.leiste { top: 40px; left: 48px; right: 72px; display: flex; justify-content: space-between; align-items: center; }
.marke { font: 400 var(--t-zahl)/1 var(--titel); letter-spacing: .04em; color: var(--text); text-decoration: none; }
.links { display: flex; gap: 32px; align-items: center; }
.links a { color: var(--nav-rechts); text-decoration: none; font: 500 var(--t-ui) var(--schrift); letter-spacing: .14em; text-transform: uppercase; }

.knopf { background: var(--akzent); color: var(--auf-farbe) !important; padding: 12px 20px; text-decoration: none; font: 600 var(--t-ui) var(--schrift);
  letter-spacing: .12em; text-transform: uppercase; display: inline-block; }
.zweit { color: var(--text); font: 600 var(--t-ui) var(--schrift); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--text-2); padding-bottom: 4px; }

.titel { top: 104px; left: 72px; max-width: 460px; }
/* Laptop-Hoehen: Titel kleiner, damit er ueber der Stueckliste endet */
@media (min-width: 800px) and (max-height: 860px) { .titel .unter { margin-top: 16px; } .titel .aktion { margin-top: 24px; } }
.kicker { font: 500 var(--t-label) var(--schrift); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
/* Blatt-Kicker als gelbes Etikett: sagt, wo man auf der Seite ist */
.titel > .kicker, .seite-text > .kicker, .spalte .kicker { width: fit-content; padding: 5px 10px 4px; background: var(--markierung); color: var(--auf-farbe); rotate: -1.2deg; }
/* Textmarker auf dem Wort, das die Aussage traegt (ein Wort je Ueberschrift) */
mark { color: inherit; background: linear-gradient(transparent 52%, var(--markierung) 52% 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }
h1 { font: 400 var(--t-display)/.9 var(--titel); text-transform: uppercase; letter-spacing: .01em; }
.unter { margin-top: 24px; font: 400 var(--t-text)/1.5 var(--schrift); color: var(--text-2); max-width: 36ch; }
.aktion { margin-top: 32px; display: flex; gap: 24px; align-items: center; }

/* Fuehrung an Halt 0: drei Schritte, der aktuelle steht voll da (strecke.js setzt body[data-fuehrung]) */
.fuehrung { list-style: none; padding: 0; margin-top: 48px; border-top: 1px solid var(--tabelle-linie); counter-reset: schritt; }
.fuehrung li { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--tabelle-linie);
  color: var(--text-2); transition: color .3s ease; counter-increment: schritt; }
.fuehrung li::before { content: '0' counter(schritt); grid-row: span 2; align-self: start; width: 28px; height: 28px; border: 1px solid currentColor;
  display: grid; place-items: center; font: 700 var(--t-label) var(--zahl); transition: background-color .3s ease, color .3s ease; }
.fuehrung b { font: 600 var(--t-ui) var(--schrift); letter-spacing: .12em; text-transform: uppercase; }
.fuehrung span { margin-top: 2px; font: 400 var(--t-ui)/1.45 var(--schrift); }
body[data-fuehrung="1"] .fuehrung [data-schritt="1"], body[data-fuehrung="2"] .fuehrung [data-schritt="2"] { color: var(--text); }
body[data-fuehrung="1"] .fuehrung [data-schritt="1"]::before, body[data-fuehrung="2"] .fuehrung [data-schritt="2"]::before { background: var(--text); color: var(--seite); border-color: var(--text); }

/* Hinweis auf der Tafel an Halt 0, oben mittig: erst Drehen, dann Zerlegen (Pfeil wippt in die Richtung) */
/* Tuschestift an Halt 0 (stift.js): ueber Zeichnung und Nummern, faengt keine Klicks */
.strecke .tafel svg.stift { z-index: 4; pointer-events: none; overflow: visible; }
.stift .tusche { fill: none; stroke: var(--linie); stroke-width: 2.4; stroke-linecap: round; }
.stift .tusche.nass { stroke-width: 3.1; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--linie) 70%, transparent)); }
.stift .tropfen { fill: var(--linie); }
.stift .schatten polygon { fill: var(--papier-tief); filter: blur(5px); }
.dreh-hinweis { position: absolute; z-index: 3; top: 88px; left: 50%; translate: -50% 0; pointer-events: none; white-space: nowrap;
  padding: 8px 14px; border: 1px solid var(--linie-2); background: rgba(7, 33, 73, .72); color: var(--linie);
  font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; transition: opacity .3s ease; }
.dreh-hinweis span { display: none; align-items: center; gap: 10px; }
.dreh-hinweis span::before { content: ''; width: 18px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px; flex-shrink: 0; }
.dreh-hinweis .h-drehen::before { animation: wippen 1.4s ease-in-out infinite; }
.dreh-hinweis .h-zerlegen::before { width: 8px; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); height: 8px; animation: sinken 1.4s ease-in-out infinite; }
@keyframes wippen { 50% { transform: translateX(6px); } }
@keyframes sinken { 50% { transform: translateY(3px) rotate(45deg); } }
body[data-fuehrung="1"] .dreh-hinweis .h-drehen, body[data-fuehrung="2"] .dreh-hinweis .h-zerlegen { display: inline-flex; }
body:not(.eingezeichnet) .dreh-hinweis, body.dreht .dreh-hinweis, .strecke .tafel:not(.drehbar) .dreh-hinweis { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dreh-hinweis span::before { animation: none; } }

table { width: 100%; border-collapse: collapse; }
.schriftfeld { border: 2px solid var(--rahmen); background: var(--papier); }
.schriftfeld { color: var(--linie); }
.schriftfeld td { border: 1px solid var(--linie-2); padding: 8px 10px; font: 500 var(--t-ui) var(--schrift); text-transform: uppercase; letter-spacing: .08em; vertical-align: top; }
.schriftfeld .gross { font: 400 var(--t-zahl)/1 var(--titel); letter-spacing: .03em; }
.schriftfeld .klein { font-size: var(--t-label); letter-spacing: .16em; color: var(--linie-2); width: 30%; }
.schriftfeld .klein b { display: block; margin-top: 4px; font: 400 var(--t-ui) var(--zahl); color: var(--linie); letter-spacing: .02em; }

@media (max-width: 799px) {
  .leiste { top: 28px; left: 28px; right: 28px; } .links a:not(.knopf) { display: none; }
  /* Mobil: Titel als Block ueber der Buehne, erst danach rastet die Strecke ein */
  .titel { position: relative; top: auto; left: auto; max-width: none; z-index: 1; padding: 88px 28px 40px; }
  .aktion { flex-wrap: wrap; gap: 16px 24px; }
  /* Mobil stehen die Schritte in der Einfuehrungskarte unter der Tafel, sonst rutscht die Zeichnung aus dem ersten Bildschirm */
  .titel .fuehrung { display: none; }
  .fuehrung.kompakt { display: flex; gap: 16px; margin-top: 14px; padding-top: 10px; border-bottom: 0; }
  .fuehrung.kompakt li { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
  .fuehrung.kompakt li::before { width: 24px; height: 24px; } .fuehrung.kompakt span { display: none; }
  .dreh-hinweis { top: 60px; padding: 6px 10px; letter-spacing: .1em; }
}

/* An Halt 0 dreht Ziehen die Zeichnung, auf Touch bleibt senkrechtes Scrollen frei */
.tafel.drehbar { cursor: grab; touch-action: pan-y; }
body.dreht, body.dreht .tafel { cursor: grabbing; }
.blatt .ansicht-name { fill: var(--linie); font: 600 var(--t-label) var(--schrift); letter-spacing: .22em; }
.blatt .ansicht-name.rechts { text-anchor: end; font-family: var(--zahl); letter-spacing: .08em; }

.ansichten { display: flex; align-items: center; gap: 0; }
.ansichten .feldname { margin-right: 12px; }
.ansichten button { background: transparent; color: var(--linie); border: 1px solid var(--linie-2); margin-left: -1px; padding: 6px 10px;
  font: 600 var(--t-label) var(--schrift); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ansichten button:hover { background: rgba(233, 241, 255, .1); }
.ansichten button[aria-pressed="true"] { background: var(--markierung); color: var(--auf-farbe); border-color: var(--markierung); }
.ansichten button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.ansichten button:disabled { opacity: .35; cursor: default; }
.ansichten button:disabled:hover { background: transparent; }

/* Nach dem Plotter: Masslinien ziehen sich ein, Zahlen und Nummern folgen */
@keyframes ziehen { to { stroke-dashoffset: 0; } }
@keyframes auf { from { opacity: 0; } }
@keyframes ploppen { from { opacity: 0; transform: scale(.4); } }
body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .mass line, body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .mass path:not(.pfeil), body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .hilfs line, body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .ballon line {
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ziehen .6s cubic-bezier(.2, .7, .2, 1) forwards; }
body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .pfeil, body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .masszahl, body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .achse { animation: auf .4s .35s both; }
body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .ballon circle { transform-box: fill-box; transform-origin: center; animation: ploppen .35s calc(.25s + var(--i) * 45ms) cubic-bezier(.3, 1.4, .5, 1) both; }
body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg .ballon text { animation: auf .3s calc(.35s + var(--i) * 45ms) both; }
@media (prefers-reduced-motion: reduce) { body.gezeichnet:not(.eingezeichnet) .strecke .tafel svg * { animation: none !important; stroke-dashoffset: 0 !important; } }