/* ==========================================================================
   Strukturogramm-Seite: Passwortabfrage und Programmoberfläche.
   Farben und Schriften stammen aus tokens.css.

   WICHTIG: Die Farben des Rads (gelb = Seele, blau = Geist, rot = Körper,
   grün = Struktur) gehören zur Zeichnung und bleiben unverändert. Angepasst
   ist nur die Umgebung: Leiste, Eingabefelder, Knöpfe, Blatt.
   ========================================================================== */

:root {
  /* Ein Gelb für alles auf dem Blatt: dasselbe wie in der Zeichnung (FC in
     bauen/strukturogramm-app.js). Bis zum 24.09.2026 standen hier zwei Werte -
     ein kräftiges für Text und Legenden, ein helles für die Zeichnung. Auf dem
     gedruckten Blatt sah das nach zwei verschiedenen Gelbs aus, obwohl es
     dieselbe Qualität meint.

     Der Preis ist niedriger Kontrast: #FFEFA6 auf Weiß sind 1,16:1. Die
     seelische Schwingungszahl steht damit sehr zart da - so gewollt. Blau und
     Rot daneben tragen die Zeile. */
  --gelb: #FFEFA6;
  --blau: #0033CC;
  --rot:  #E00000;
  --gruen: #00A000;
}

/* ---------------------------------------------------------- Passwortabfrage */
.tor { max-width: 30rem; margin: 0 auto; text-align: center; }
.tor .schloss { width: 54px; margin: 0 auto var(--raum-m); color: var(--gold); opacity: .8; }
.tor p { color: var(--tinte-zart); }

.tor-formular {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  margin-top: var(--raum-l);
}
.tor-formular label { flex: 1 1 100%; }
.tor-feld {
  flex: 1 1 15rem; min-width: 0;
  font-family: var(--schrift-text); font-size: 1rem;
  padding: .85rem 1rem; color: var(--tinte);
  /* Eingabefelder reinweiss (seit 08.10.2026), damit sie sich vom warmen
     Papierton der Flaechen abheben - var(--weiss) war davon kaum zu unterscheiden. */
  background: #FFFFFF; border: 1px solid var(--gold-zart); border-radius: 0;
}
.tor-feld:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 2px; }

.tor-meldung {
  flex: 1 1 100%; margin: 0; color: #A63A3A; font-size: .95rem;
}
.tor-hinweis { margin-top: var(--raum-l); font-size: .95rem; color: var(--tinte-zart); }

/* ---------------------------------------------------------- Programmoberfläche */
.stru-app[hidden] { display: none; }

/* Bedienleiste */
.stru-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
  /* Die Leiste selbst im zweiten Papierton, damit die reinweissen Felder
     darin als Felder erkennbar sind (seit 08.10.2026, vorher var(--weiss)). */
  background: var(--creme-tief); border: 1px solid var(--gold-zart);
  padding: 1rem 1.2rem; margin-bottom: var(--raum-m);
}
.stru-leiste .ctl { display: flex; align-items: center; gap: .45rem; }
.stru-leiste .titel-klein {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .78rem;
  letter-spacing: var(--sperrung-mittel); text-transform: uppercase;
  color: var(--gold-tief); margin: 0 .6rem 0 0; white-space: nowrap;
}

.stru-app select,
.stru-app input[type=text] {
  font-family: var(--schrift-text); font-size: .95rem;
  padding: .55rem .7rem; color: var(--tinte);
  background: #FFFFFF; border: 1px solid var(--gold-zart); border-radius: 0;
}
.stru-app select { max-width: 100%; }
.stru-app input[type=text] { width: 9.5rem; max-width: 100%; }
/* Datum als drei Auswahlfelder Tag / Monat / Jahr. Auf dem Telefon oeffnen
   sie die Scrollwalze des Systems - ein Textfeld mit Ziffernblock hatte dort
   keinen Punkt zur Eingabe. */
.stru-app select.datum-teil { font-variant-numeric: tabular-nums; padding-left: .5rem; padding-right: .5rem; }
.stru-app select:focus-visible,
.stru-app input:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 2px; }

.stru-app button {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .74rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase;
  padding: .6rem 1rem; cursor: pointer;
  /* Knoepfe reinweiss wie die Felder (seit 08.10.2026, vorher transparent) -
     auf der cremefarbenen Leiste sonst nur als Linie sichtbar. */
  color: var(--gold-tief); background: #FFFFFF; border: 1px solid var(--gold);
  transition: background var(--sanft), color var(--sanft);
}
.stru-app button:hover { background: var(--gold); color: var(--weiss); }
.stru-app button.step {
  width: 2.4rem; padding: .6rem 0; font-size: 1rem; letter-spacing: 0;
  font-family: var(--schrift-text); line-height: 1;
}
.stru-app button.primary { background: var(--gold); color: var(--weiss); }
.stru-app button.primary:hover { background: var(--gold-tief); border-color: var(--gold-tief); }
.stru-nach-rechts { margin-left: auto; }

/* Das Blatt mit dem Rad.
   Wichtig: Das Website-Stylesheet setzt -webkit-font-smoothing: antialiased.
   Diese Eigenschaft wirkt bis in die Zeichenfläche hinein und verändert die
   Kantenglättung der Zahlen im Rad. Hier wird sie deshalb auf den
   Ausgangswert zurückgesetzt, damit das Rad pixelgenau so aussieht wie im
   Originalprogramm. */
.stru-app, .stru-blatt, .stru-blatt canvas {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.stru-blatt {
  background: #fff; border: 1px solid var(--gold-zart);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem) .8rem;
  display: flex; flex-direction: column;
  max-width: 900px; margin-inline: auto;   /* wie im Originalprogramm nicht über die ganze Breite */
}
.stru-blatt .titel-zeile-app {
  font-family: var(--schrift-versal); font-weight: 300; font-size: 1.15rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase; margin: 0 0 .2rem;
}
.stru-blatt .titel-zeile-app span {
  font-family: var(--schrift-schreib); text-transform: none;
  letter-spacing: 0; font-size: 2.3rem; color: var(--gold);
  /* Die Schreibschrift sitzt hoch auf der Grundlinie; ohne den Ausgleich
     würde die größere Größe die ganze Zeile nach unten schieben. */
  line-height: .85; vertical-align: -.06em;
}
.stru-blatt .kopf {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; margin: .7rem 0 .3rem;
}
.stru-blatt .anlass { font-weight: 700; }
.stru-blatt .datum { text-align: right; color: var(--tinte-zart); font-variant-numeric: tabular-nums; }
.stru-blatt .schwing {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem;
  margin: .5rem 0 .2rem; font-size: .95rem;
}
.stru-blatt .schwing .lab { color: var(--tinte-zart); }
.stru-blatt .schwing .val {
  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-weight: 700; letter-spacing: .3px;
}
/* Kopfbereich des Blattes: Schwingungszahlen links, Umrechnung rechts */
.stru-blatt .schwing-reihe {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: flex-start; justify-content: space-between;
}
.stru-blatt .schwing-reihe .schwing { flex: 1 1 22rem; margin: .5rem 0 .2rem; }

/* Der Umrechnungsschlüssel. Auf dem Vordruck sind das nur zwei kleine
   Zahlengruppen am rechten Rand, ohne Kasten – eine Gedächtnisstütze, keine
   Tabelle, die Aufmerksamkeit verlangt. Deshalb bleibt hier nur eine feine
   Haarlinie unter den Bezeichnungen; Rahmen und Trennstriche entfallen, und
   die Beschriftung tritt in die Sekundärfarbe zurück. */
.stru-blatt .schluessel {
  flex: 0 0 auto; border-collapse: collapse;
  font-size: .52rem; color: var(--tinte-zart);
  opacity: .7; line-height: 1.3;
}
.stru-blatt .schluessel caption {
  font-family: var(--schrift-versal); font-size: .42rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase;
  color: var(--tinte-zart); text-align: left; padding-bottom: .1rem;
}
.stru-blatt .schluessel th,
.stru-blatt .schluessel td {
  padding: .01rem .22rem; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 400;
}
.stru-blatt .schluessel th {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .4rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase;
  color: var(--tinte-zart); border-bottom: 1px solid var(--gold-zart);
  padding-bottom: .12rem;
}
.stru-blatt .schluessel tbody tr:first-child td { padding-top: .18rem; }

@media (max-width: 620px) {
  .stru-blatt .schwing-reihe { gap: .8rem; }
  /* Auf schmalen Bildschirmen eine Spur größer, damit die Ziffernpaare
     lesbar bleiben - aber weiterhin kleiner als der Fließtext. */
  .stru-blatt .schluessel { font-size: .58rem; }
}

.stru-blatt .sq { margin: .5rem 0 .2rem; font-size: .95rem; line-height: 1.55; }

/* Die Hilfen-Zeile wird nicht angezeigt - auch nicht im Druck.
   Sie bleibt im Programm erhalten und liesse sich jederzeit wieder einblenden. */
.stru-blatt #hilfe { display: none !important; }
/* Das Rad wird immer 1,16-mal so hoch wie breit gezeichnet. Ohne Begrenzung
   ragt es auf üblichen Bildschirmen unten aus dem Fenster. Die Breite wird
   deshalb zusätzlich an der Fensterhöhe gedeckelt, damit das Rad stets
   vollständig sichtbar ist. Die Zeichnung selbst bleibt unverändert – sie
   richtet sich, wie im Original, nach der Breite der Zeichenfläche. */
.stru-blatt canvas {
  width: 100%; max-width: min(100%, 64vh);
  /* Abstand nach oben: die Zeichnung soll nicht direkt unter den Angaben
     kleben. Im Druck ist der Wert groesser gesetzt (siehe @media print);
     dort ist unter dem Rad genug Raum, das Blatt bleibt eine Seite. */
  height: auto; display: block; margin: 3rem auto 0;
}
/* Symbolkacheln aus der Bildkarte (zehn Kacheln zu je 192 Bildpunkten,
   Reihenfolge 0-9). Verwendet auf dem zweiten Blatt in der Planetentafel.
   Dieselbe Karte wie im Rad, damit Tafel und Zeichnung nicht auseinanderlaufen.

   Die Karte ist golden eingefaerbt; eine Bitmap laesst sich nicht per color
   umfaerben. Deshalb dient sie als MASKE, und die Farbe kommt aus der Flaeche
   darunter. Wo Masken fehlen, bleibt das goldene Bild als Rueckfall stehen -
   lieber gold als gar kein Symbol. */
.lg-sym {
  flex: 0 0 auto; width: .95rem; height: .95rem;
  background-image: url("../img/planeten.png");
  background-size: 1000% 100%; background-repeat: no-repeat;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
@supports (mask-image: url("../img/planeten.png")) or (-webkit-mask-image: url("../img/planeten.png")) {
  .lg-sym {
    background-image: none;
    background-color: var(--legende-sym);
    -webkit-mask-image: url("../img/planeten.png");
            mask-image: url("../img/planeten.png");
    -webkit-mask-size: 1000% 100%;  mask-size: 1000% 100%;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  }
}

/* Die Nennung des Programmierers stand bis zum 02.09.2026 auch auf dem Blatt.
   Sie steht jetzt nur noch oben im Seitenkopf (.programmierer). */
.stru-fehler { color: #A63A3A; }

@media (max-width: 620px) {
  .stru-leiste { padding: .9rem; gap: .6rem .7rem; }
  .stru-leiste .titel-klein { flex: 1 1 100%; margin: 0; }
  .stru-nach-rechts { margin-left: 0; flex: 1 1 100%; }
  .stru-nach-rechts button { width: 100%; }
  .stru-app input[type=text] { width: 100%; flex: 1 1 8rem; }
  .stru-leiste .ctl { flex-wrap: wrap; }
  /* Mindestgröße 14 px auf dem Telefon (07.10.2026): Knöpfe und Titel der
     Leiste. Blatt 2 (Legende, Umrechnung) bleibt bewusst unverändert - es
     ist für den Ausdruck gesetzt, und die Tafeln sind bei 320-480 px auf
     Überlauf abgestimmt. */
  .stru-app button, .stru-leiste .titel-klein { font-size: .875rem; }
  .stru-app button.step { font-size: 1rem; }
  /* Datumszeile auf dem Telefon in zwei Reihen: oben die drei Auswahlfelder
     ueber die volle Breite, darunter die Pfeile und "Heute". Die Felder
     bekommen je 28 % Grundbreite - zu dritt fuellen sie die Reihe, der erste
     Pfeil passt nicht mehr daneben und bricht mit den uebrigen Knoepfen um. */
  .stru-leiste .datum-ctl .datum-teil { order: 0; flex: 1 1 28%; min-width: 0; }
  .stru-leiste .datum-ctl .step { order: 1; }
  .stru-leiste .datum-ctl #heute { order: 2; flex: 1 1 auto; }
  .stru-blatt .kopf { grid-template-columns: 1fr; }
  .stru-blatt .datum { text-align: left; }
  /* Bezeichnung über den Wert statt daneben – sonst bricht sie zweizeilig um */
  .stru-blatt .schwing { grid-template-columns: 1fr; gap: 0; }
  .stru-blatt .schwing .val { margin-bottom: .45rem; }
}

/* Programmierer-Hinweis – bewusst zurückhaltend */
/* Der Programmierer-Hinweis ist eine Fußnote, keine Aussage über die Seite –
   an beiden Stellen entsprechend klein und zurückgenommen. */
.programmierer {
  margin-top: .9rem !important;
  font-size: .6rem; letter-spacing: .02em;
  color: var(--tinte-zart); opacity: .6;
}

/* ---------------------------------------------------------- Planeten-Hinweis */
.stru-blatt.hat-hinweis { position: relative; }

.planet-hinweis {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -145%);
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--gold); border-radius: 2px;
  padding: .35rem .7rem; white-space: nowrap;
  font-family: var(--schrift-text); font-size: .9rem; line-height: 1.3;
  box-shadow: var(--schatten-zart);
}
.planet-hinweis[hidden] { display: none; }
/* kleine Spitze zum Symbol hin */
.planet-hinweis::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--weiss);
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------- Druckansicht
   Ziel: eine einzige A4-Seite mit weißem Rand.

   Wichtig: Das Programm legt die Höhe der Zeichenfläche fest in Pixeln fest
   (canvas.style.height). Wenn im Druck nur die Breite auf 100 % gezogen wird,
   bleibt diese Höhe stehen und das Rad wird verzerrt. Deshalb hier
   ausdrücklich height:auto – dann behält es sein Seitenverhältnis. */

@page {
  size: A4 portrait;
  margin: 10mm;
}

/* Dieser Block steht VOR den allgemeinen Regeln. Eine Media Query erhöht die
   Spezifität nicht – wo ein Selektor weiter unten noch einmal vorkommt und
   dieselbe Eigenschaft setzt, gewinnt die untere Regel. Hier stehen deshalb
   nur noch die Regeln, die weiter unten nicht mehr vorkommen (Ausblenden,
   Seitenrahmen, Blatt 1). Alles zum zweiten Blatt steht im Druckblock AM
   DATEIENDE – dort gewinnt es gegen die Bildschirm- und Handy-Regeln. */
@media print {
  .kopfleiste, .seitenfuss, .seitenkopf, .stru-leiste,
  .tor, .stru-hinweis, .sprungmarke, .planet-hinweis { display: none !important; }


  html, body { background: #fff !important; }
  body { font-size: 10pt; line-height: 1.4; }
  .abschnitt { padding: 0 !important; }
  /* Eigener Rand links und rechts. Der Seitenrand aus @page wird von den
     Randeinstellungen im Druckdialog überstimmt – bei „ohne Rand" liefe der
     Text sonst bis an die Papierkante. Dieser Innenabstand bleibt dagegen in
     jedem Fall erhalten. */
  .huelle { max-width: none !important; padding: 6mm 10mm 2mm !important; }

  .stru-app { display: block !important; }

  /* Zweites Blatt (Legende): siehe Druckblock am Dateiende. */
  .stru-blatt {
    border: 0; padding: 0; max-width: none; margin: 0;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Kopfzeilen des Blattes kompakt halten, damit alles auf eine Seite passt */
  .stru-blatt .titel-zeile-app { font-size: 13pt; margin-bottom: 1mm; }
  .stru-blatt .titel-zeile-app span { font-size: 23pt; line-height: .85; vertical-align: -.06em; }
  .stru-blatt .kopf { margin: 2mm 0 1mm; }
  .stru-blatt .schwing { margin: 1mm 0; font-size: 10pt; gap: 0 6mm; }
  .stru-blatt .sq { margin: 1mm 0; font-size: 10pt; }

  /* Breite UND Höhe begrenzen, Rest macht das Seitenverhältnis von selbst.
     Die Höhendeckelung ist entscheidend: ohne sie wird das Rad höher als der
     verbleibende Platz und der Browser schiebt es komplett auf eine zweite
     Seite. Die 68 % lassen bewusst Luft – viele Browser drucken zusätzlich
     eine eigene Kopf- und Fußzeile, die den Platz weiter verkleinert. */
  .stru-blatt canvas {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;      /* ohne das wird das Rad gequetscht */
    max-height: 68vh !important;
    margin: 20mm auto 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
}

/* ---- Schriftfarbe auf beiden Blättern ----
   Alle Texte auf den Blättern stehen seit dem 24.09.2026 einheitlich in 90 %
   Schwarz. Vorher waren es drei Töne: --tinte (warmes Anthrazit) für den
   Fließtext, --tinte-zart für Beschriftungen und #6E6E6E für das zweite Blatt.
   Auf Papier las sich das uneinheitlich; die Abstufungen macht jetzt die
   Schriftgröße, nicht die Farbe.

   Nur hier, nicht auf der übrigen Website: Dort bleibt es beim warmen Anthrazit.
   Die Farben der Methode – gelb, blau, rot und das Gold – sind nicht betroffen. */
.stru-blatt {
  --tinte: #1A1A1A;
  --tinte-zart: #1A1A1A;
  color: #1A1A1A;
}

/* ============================================================ Zweites Blatt
   Legende und Nachschlag. Im Druck beginnt es auf einer neuen Seite.
   Alles hier ist Nachschlagestoff – Regeln und Begriffe der Methode. */
.stru-blatt--legende {
  /* Die Symbolkacheln bleiben grau – sie sind Zeichen, kein Text. */
  --legende-sym: #6E6E6E;
  margin-top: var(--raum-m);
}
.stru-blatt--legende h3 {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .68rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase;
  color: var(--tinte); margin: 0 0 .35rem;
  border-bottom: 1px solid var(--gold-zart); padding-bottom: .2rem;
}
.stru-blatt--legende .lg-vor,
.stru-blatt--legende .lg-fuss { margin: .25rem 0; font-size: .72rem; }
.stru-blatt--legende .lg-fuss { color: var(--tinte-zart); }

.lg-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.1rem 1.6rem; margin-top: .8rem;
}
.lg-block { break-inside: avoid; page-break-inside: avoid; }
.lg-block--breit { margin-top: 1.1rem; }

.lg-tab { border-collapse: collapse; font-size: .78rem; margin: .2rem 0; }
.lg-tab th, .lg-tab td { padding: .06rem .5rem .06rem 0; text-align: left; font-weight: 400; }
.lg-tab th {
  font-family: var(--schrift-versal); font-size: .6rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase;
  padding-bottom: .15rem;
}
.lg-tab td { font-variant-numeric: tabular-nums; }
.lg-tab--links td:first-child { white-space: nowrap; }
.lg-tab--striche td { padding-right: .8rem; }

/* Ein Zahlenpaar bricht nicht auf; das Komma bleibt bei seinem Paar. */
.lg-paar { white-space: nowrap; font-variant-numeric: tabular-nums; }

.lg-farbtab td:nth-child(2) { font-weight: 700; color: var(--tinte); white-space: nowrap; }
.lg-farbtab td:nth-child(3) { color: var(--tinte-zart); }
.lg-punkt {
  /* display fehlte: Ein span ist inline, dort greifen width und height nicht –
     der Farbtupfer war deshalb 0 Pixel breit und nie zu sehen. */
  display: inline-block; vertical-align: -.05em;
  width: .62rem; height: .62rem; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.30) inset;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}

/* Die Punkte im Rad: kleine Skizze links, Erklaerung rechts. */
.lg-zitat {
  margin: .3rem 0; padding-left: .7rem; border-left: 2px solid var(--gold-zart);
  font-style: italic; font-size: .72rem; color: var(--tinte-zart);
}
.lg-tab--faelle td:first-child { white-space: nowrap; font-weight: 700; color: var(--tinte); }

/* Die beiden Tabellen nebeneinander ueber die volle Blattbreite.
   Ohne feste Anteile richten sie sich nach ihrem Inhalt, zusammen sind sie
   dann breiter als das Blatt und die zweite bricht darunter um - mit einem
   grossen Zeilenabstand dazwischen. Mit flex-basis teilen sie sich die Breite
   und der lange Erklaertext bricht innerhalb seiner Spalte um. */
.lg-linien { display: flex; gap: .4rem 2rem; align-items: flex-start; flex-wrap: wrap; }
.lg-linien > .lg-tab:first-child { flex: 5 1 18rem; }
.lg-linien > .lg-linienarten     { flex: 4 1 15rem; }
/* Dieselbe Schriftgröße wie die Tabellen daneben (.lg-tab). Ohne Angabe erbte
   der Absatz die Größe der Seite – 18px statt 12,48px. */
.lg-linienarten p { margin: 0; font-size: .78rem; }
.lg-linienarten p + p { margin-top: .45rem; }
.lg-linienarten strong { font-weight: 700; }

.lg-strich { display: inline-block; width: 1.6rem; height: 0; vertical-align: middle; }
.lg-strich--voll { border-top: 2px solid var(--rot); }
.lg-strich--gestrichelt { border-top: 2px dashed var(--gruen); }
.lg-strich--senk { border-top: 2px solid var(--gruen); }

/* Die zehn Planeten */
/* minmax(0, 1fr) statt der voreingestellten auto-Spalte: sonst bemisst sich
   das Gitter am breitesten Inhalt und die Zeilen laufen auf schmalen Fenstern
   ueber den Rand, statt umzubrechen. */
.lg-planeten { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem .6rem; font-size: .76rem; }
.lg-preihe {
  display: grid; grid-template-columns: 1.1rem .8rem 4.2rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: .4rem; min-width: 0;
}
/* Abnehmender Mond – dieselbe Drehung wie in der Zeichnung. Die Kachel ist ein
   Rasterfeld und damit auf Blockebene, transform greift also. */
.lg-sym--mond { transform: rotate(180deg); }

.lg-preihe .lg-name { font-weight: 700; color: var(--tinte); }
.lg-preihe .lg-kern { color: var(--tinte); }
.lg-preihe .lg-pfeil { color: var(--tinte-zart); font-size: .72rem; }

/* Die 28 Seelenqualitäten */
.lg-qualitaeten {
  /* Die Schwelle muss unter der nutzbaren Druckbreite liegen - und die ist
     kleiner als gedacht: A4 minus dem Seitenrand des Druckdialogs minus dem
     eigenen Innenabstand. Bei grosszuegigem Rand (25 mm) bleiben nur rund
     529 px. Faellt die Tabelle dort auf EINE Spalte, wird sie doppelt so hoch
     (111 statt 59 mm) und erzwingt eine dritte Seite. 15,5rem = 248 px passt
     auch dann noch zweispaltig. */
  /* max-content statt 1fr als Obergrenze: Die Spuren waren breiter als ihr
     Inhalt, und der Trennstrich stand dadurch weit rechts im leeren Raum.
     Das Mindestmass von 15,5rem bleibt – es ist der Schutz davor, dass die
     Tabelle im Druck auf eine Spalte fällt und eine dritte Seite erzwingt. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), max-content));
  justify-content: start;
  gap: 0 1.2rem; font-size: .66rem; margin-top: .3rem;
}
/* Die Spalten richten sich nach dem Inhalt statt nach einem festen Mass.
   Fest gesetzt lief die laengste Zahlenreihe ("10 · 38 · 66 · 94 · 122") aus
   ihrer Spalte heraus und in den Begriff hinein - nowrap verhindert nur den
   Umbruch, nicht den Ueberlauf. Das Raster liegt deshalb auf der Tabelle,
   nicht auf der einzelnen Zeile: so richten sich alle Zeilen einer Spalte
   gemeinsam aus. */
.lg-qspalte {
  /* Drei Spalten: Zahlenreihe, Aufgabe, Farbe. Alle drei auf max-content und
     die Gruppe linksbündig – vorher dehnte sich die Aufgabenspalte auf den
     ganzen Platz und schob das Farbwort an den rechten Rand, weit weg von dem
     Begriff, zu dem es gehört. */
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: start;
  min-width: 0;
  gap: .02rem .8rem; align-content: start;
}
/* Zarter Trennstrich zwischen den beiden Hälften – dieselbe Haarlinie wie
   unter den Überschriften. */
.lg-qspalte + .lg-qspalte {
  border-left: 1px solid var(--gold-zart);
  padding-left: 1.2rem;
}
.lg-qspalte > span { padding: .03rem 0; }
/* Die Zahlenreihe darf nicht umbrechen – sonst wird jede Zeile doppelt hoch
   und die Tabelle passt nicht mehr neben die übrigen Blöcke auf die Seite. */
.lg-qzahlen {
  font-variant-numeric: tabular-nums; color: var(--tinte-zart);
  white-space: nowrap; letter-spacing: -.01em;
}
.lg-qname { color: var(--tinte); }
.lg-qfarbe { font-size: .66rem; }

/* Schmale Fenster: die fünfspaltige Planetenreihe und die Zahlenspalte der
   Qualitäten passen dort nicht mehr nebeneinander. Beide brechen dann um,
   statt über den Rand zu laufen.

   660px statt 560px seit dem 24.09.2026: Bei rund 620px war die Qualitätentafel
   gemessen 2px breiter als ihr Kasten, weil die Zahlenreihe nicht umbrechen
   durfte. */
@media (max-width: 660px) {
  /* minmax(0, 1fr) statt 1fr: eine reine 1fr-Spalte darf nicht unter ihre
     Mindestinhaltsbreite schrumpfen und schob die Zeile sonst über den Rand. */
  .lg-preihe {
    grid-template-columns: 1.1rem .8rem minmax(0, 1fr);
    row-gap: .05rem;
  }
  .lg-preihe .lg-kern,
  .lg-preihe .lg-pfeil { grid-column: 3; }
  .lg-preihe .lg-name,
  .lg-preihe .lg-kern,
  .lg-preihe .lg-pfeil { overflow-wrap: anywhere; }
  .lg-qspalte { font-size: .62rem; gap: .1rem .5rem; }
  .lg-qzahlen { white-space: normal; }
}

.lg-quelle {
  margin: 1rem 0 0; font-size: .68rem; color: var(--tinte-zart);
  border-top: 1px solid var(--gold-zart); padding-top: .35rem;
}

/* ---------------------------------------------------------- Druck, Blatt 2
   Bewusst am DATEIENDE: Nur hier gewinnen die Druckregeln gegen die
   Bildschirmregeln oben (gleiche Spezifität, spätere Regel gewinnt). Bis zum
   08.10.2026 standen sie im Druckblock weiter oben und blieben wirkungslos –
   die Legende wurde im Druck in Bildschirmgröße (12,5 px) gesetzt.

   Zweite Ursache für eine dritte Seite: Die Druckbreite ist nicht die
   Fensterbreite. Bei 20 mm Rand (Safari, Firefox: 12–25 mm, je nach Dialog)
   misst die Seite unter 660 px, und die Handy-Regeln (@media max-width: 660px)
   griffen auch im Druck: die Planetenliste stapelte sich dreizeilig (179 →
   469 px), die Qualitäten fielen enger. Deshalb hier die Druckfassung ohne
   Rücksicht auf die Breite – ein A4-Blatt ist nie ein Telefon.

   Ziel: Die Legende passt auch bei 25 mm Rand und eingeschalteter Kopf- und
   Fußzeile des Browsers auf EINE Seite. Geprüft mit bauen/druck-pruefen.mjs
   (Chromium, 10/20/25 mm, mit und ohne Kopfzeile).

   Mindestschriftgröße im Browser (08.10.2026): sbrands Chrome hebt alle
   Schriften auf 14 px an (chrome://settings/fonts). Dann wird jede Zeile der
   Legende 14 px groß, gleich welche Größe hier steht - die Legende wuchs auf
   1011 px und die Schlusszeile rutschte auf Seite 3. Dagegen helfen nur
   knappe Zeilen- und Blockabstände, keine kleineren Schriften; beides ist
   hier eingestellt (Zeilenabstand 1.1, Abstände 1-1,5 mm). Die Schriften
   sind auf Wunsch von sbrand trotzdem um 0,4 pt verkleinert: Fließtext
   7,8 pt, Tabellen 7,6 pt, Planeten 7,4 pt, Qualitäten 6,7 pt. */
@media print {
  /* Blatt 1: die Handy-Regeln (@media max-width: 620px) griffen bei schmaler
     Druckbreite ebenfalls – Datum unter dem Anlass, Bezeichnung über der
     Schwingungszahl. Im Druck bleibt es bei der Desktop-Anordnung. */
  .stru-blatt .kopf { grid-template-columns: 1fr auto; }
  .stru-blatt .datum { text-align: right; }
  .stru-blatt .schwing { grid-template-columns: auto 1fr; gap: 0 6mm; }
  .stru-blatt .schwing .val { margin-bottom: 0; }

  .stru-blatt--legende {
    break-before: page; page-break-before: always;
    border: 0; padding: 0; max-width: none; margin: 0;
    font-size: 7.8pt; line-height: 1.1;
  }
  .stru-blatt--legende .titel-zeile-app { font-size: 11pt; margin: 0 0 2mm; }
  .stru-blatt--legende .titel-zeile-app span { font-size: 16pt; }
  .stru-blatt--legende h3 { font-size: 7.2pt; margin: 0 0 1mm; padding-bottom: .6mm; }
  .stru-blatt--legende .lg-vor,
  .stru-blatt--legende .lg-fuss { font-size: 7.2pt; margin: .5mm 0; }

  .lg-raster { grid-template-columns: 1fr 1fr; gap: 1.5mm 7mm; margin-top: 1mm; }
  .lg-block--breit { margin-top: 1.5mm; }
  .lg-tab { font-size: 7.6pt; margin: .3mm 0; }
  .lg-tab th { font-size: 6.3pt; }
  .lg-tab th, .lg-tab td { padding-top: 0; padding-bottom: 0; }
  .lg-zitat { font-size: 7pt; margin: .6mm 0; }
  .lg-linienarten p { font-size: 7.6pt; }

  /* Planeten: immer die fünfspaltige Reihe, nie die gestapelte Handyfassung */
  .lg-planeten { font-size: 7.4pt; gap: 0 2mm; }
  .lg-preihe { grid-template-columns: 4mm 3mm 16mm minmax(0, 1fr) minmax(0, 1fr); gap: 1.5mm; row-gap: 0; }
  .lg-preihe .lg-kern,
  .lg-preihe .lg-pfeil { grid-column: auto; }
  .lg-preihe .lg-pfeil { font-size: 7.2pt; }
  .lg-sym { width: 3.1mm; height: 3.1mm; }

  /* Qualitäten: zwei Hälften nebeneinander, Zahlenreihe ohne Umbruch */
  .lg-qualitaeten { font-size: 6.7pt; margin-top: 1mm; gap: 0 4mm; }
  .lg-qspalte { font-size: inherit; gap: 0 2.5mm; }
  .lg-qzahlen { white-space: nowrap; }
  .lg-qfarbe { font-size: inherit; }

  .lg-qspalte > span { padding: 0; }
  .lg-quelle { font-size: 6.8pt; margin: 1.5mm 0 0; padding-top: .8mm; break-before: avoid-page; }

  /* Der Innenabstand der Hülle zählt unter dem letzten Block noch einmal mit.
     Zusammen mit dem Seitenkasten reichte das für eine LEERE dritte Seite.
     Das zweite Blatt schließt deshalb ohne eigenen Abstand ab. */
  .stru-blatt--legende { padding-bottom: 0; margin-bottom: 0; }
  .stru-blatt--legende > *:last-child { margin-bottom: 0; }
}