/* Time Council · der gemeinsame Rahmen (Muster B, von Vikram abgenommen am 02.10.2026):
   heller Kopf mit Drache und Schriftzug über jeder Seite, darunter die helle Seite oder der dunkle Raum.
   baue_seite.py setzt den Kopf in jede Seite ein. Farben und Schriften stehen nur hier.
   Schriften: Marcellus für Überschriften, Source Sans 3 für Lesetext. Keine Kursive. */
@font-face{font-family:"Marcellus";src:url("marcellus-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --tc-papier:#fbf8f1;--tc-flaeche:#f3eee2;--tc-tinte:#1b2452;--tc-text:#2a2f45;--tc-leise:#5d6279;--tc-linie:#d9d0bd;
  --tc-kupfer:#a85418;--tc-gold:#d9a56b;--tc-gold-hell:#ecd3ae;--tc-nacht:#0d1430;--tc-tisch:#131b3a;
  --tc-titel:"Marcellus","Palatino Linotype",Palatino,Georgia,serif;
  --tc-lese:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}

/* ---------- der Kopf ---------- */
/* Vikram, 06.10.2026: Drache und Schriftzug eine Spur größer, der Drache deutlicher (vorher 46 bis 66 px und 30 bis 40 px hoch).
   Der Kopf läuft über die ganze Breite und steht ab 1180 px in einer Zeile: links die Marke, rechts das Menü. Damit das mit sieben
   Menüpunkten (seit 06.10.2026 mit Astrouhr und Transiten) auch am kleinen Rechner hält, wachsen Drache und Schriftzug mit der Breite
   (64 bis 86 px, 35 bis 46 px).
   Darunter stehen Marke und Menü mittig untereinander. */
/* Vikram, 06.10.2026: Der Kopf ist ein gerahmtes Feld mit einem Hauch Blau (Entwurf B „Rahmen“ von vier Entwürfen):
   außen eine feine blaue Linie, innen eine Kupferlinie. So setzt er sich als Titelkopf von der Seite ab. */
.tc-kopf{background:var(--tc-papier);color:var(--tc-text);font-family:var(--tc-lese);position:relative;padding:14px 14px 0}
.tc-kopf .tc-innen{max-width:1252px;margin:0 auto;padding:18px 28px 16px;display:flex;flex-wrap:nowrap;align-items:center;
  justify-content:space-between;gap:10px 22px;background:#f1f5fb;border:1px solid #b9c7df;outline:1px solid var(--tc-kupfer);outline-offset:-6px}
/* Vikram, 06.10.2026: Der Kreis im Drachen steht rein weiß im blauen Feld, damit das Pluto-Zeichen scharf hervortritt.
   drache.png ist außerhalb des Kreises durchscheinend und im Kreis deckend; die Farben des Drachen sind unverändert (Quelle: drache.jpg). */
.tc-marke{display:flex;align-items:center;gap:14px;text-decoration:none;border:0;flex:none}
.tc-drache{height:clamp(64px,calc(64px + (100vw - 1180px) * .22),86px);width:auto;display:block}
/* Vikram, 12.10.2026: Im Kopf steht nur noch „Time Council“, eine Zeile, eine Spur größer als zuvor (das Wort „Orakel“ ist heraus). */
.tc-wort{height:clamp(22px,calc(22px + (100vw - 1180px) * .09),30px);width:auto;display:block}
/* 12.10.2026: „Sabische Symbole“ ist länger als „Sabian-Orakel“; Abstand und Schrift eine Spur kleiner, damit der Kopf in einer Zeile bleibt. */
.tc-menue{display:flex;flex-wrap:nowrap;align-items:center;gap:6px 13px;font-size:17px;letter-spacing:.04em;line-height:1.4;white-space:nowrap}
.tc-menue a{color:var(--tc-text);text-decoration:none;border-bottom:1px solid transparent;padding:2px 0 3px}
.tc-menue a:hover{color:var(--tc-tinte);border-bottom-color:var(--tc-linie)}
.tc-menue a[aria-current="page"]{color:var(--tc-tinte);font-weight:600;border-bottom-color:var(--tc-kupfer)}
.tc-menue a.tc-beratung{border:1px solid var(--tc-kupfer);padding:6px 16px;color:var(--tc-tinte);font-weight:600}
.tc-menue a.tc-beratung:hover{background:var(--tc-flaeche)}
@media (max-width:720px){.tc-menue .tc-breit{display:none}}
.tc-kopf a:focus-visible{outline:2px solid var(--tc-kupfer);outline-offset:3px}
@media (max-width:1179px){
  .tc-kopf{padding:10px 10px 0}
  .tc-kopf .tc-innen{flex-direction:column;justify-content:center;padding:18px 14px 16px}
  .tc-drache{height:clamp(60px,9vw,80px)}
  .tc-wort{height:clamp(24px,3.4vw,32px)}
  .tc-menue{flex-wrap:wrap;justify-content:center;gap:4px 16px}
}
/* Vikram, 07.10.2026: Am Handy nahm der Kopf 226 von 844 Pixeln. Drache und Schriftzug stehen jetzt links, „Beratung“ rechts daneben,
   das Menü in zwei Zeilen darunter. Die Regel steht hinter dem Block für schmale Rechner, damit sie gilt. */
@media (max-width:720px){
  .tc-kopf{padding:8px 8px 0}
  .tc-kopf .tc-innen{position:relative;align-items:flex-start;padding:10px 12px 10px;gap:8px}
  .tc-marke{gap:8px}
  .tc-drache{height:42px}
  .tc-wort{height:16px}
  .tc-menue{justify-content:flex-start;gap:2px 16px;font-size:17px;width:100%}
  /* 12.10.2026: Der einzeilige Schriftzug braucht die Breite; „Beratung“ steht am Handy in der zweiten Menüzeile. */
  .tc-menue a.tc-beratung{padding:2px 12px}
}

/* ---------- die dunklen Räume (Horoskop, sabische Symbole, Fixsterne) ----------
   Die Apps bringen ihre eigenen Farbnamen mit. Hier werden sie auf Muster B gestellt. */
body.tc-raum{
  --nacht:var(--tc-nacht);--tisch:var(--tc-tisch);--tisch-2:#1b2550;--linie:rgba(217,165,107,.32);
  --gold:var(--tc-gold);--gold-hell:var(--tc-gold-hell);--text:#ece8de;--text-2:#b4b9cf;
  --display:var(--tc-titel);--titel:var(--tc-titel);--lese:var(--tc-lese);
  font-synthesis:none;
  background:radial-gradient(1200px 700px at 30% 0,#18224a 0,var(--tc-nacht) 65%) fixed,var(--tc-nacht)}
/* Der helle Raum (Horoskop mit Mond und Transiten, sabische Symbole; Vikram, 04.10.2026). Die Apps bringen ihre hellen
   Farben selbst mit, hier bleiben nur die Schriften des Rahmens. Dunkel bleibt das Sternen-Orakel. */
body.tc-raum.tc-licht{
  --nacht:var(--tc-papier);--tisch:#fffdf8;--tisch-2:var(--tc-flaeche);--linie:rgba(160,122,60,.42);
  --gold:var(--tc-gold);--gold-hell:var(--tc-tinte);--text:#1b2030;--text-2:#4a5068;
  background:var(--tc-papier)}
/* Vikram, 07.10.2026: Die hellen Räume stehen auf demselben Papierton wie die Leseseiten und tragen denselben Fuß. */
footer.tc-fuss{border-top:1px solid var(--tc-linie);margin-top:64px;padding:26px 0 40px;color:var(--text-2);font-size:1rem;text-align:left;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between}
footer.tc-fuss a{color:var(--text-2)}
/* Marcellus hat einen Schnitt: Was vorher in Cinzel halbfett und gesperrt stand, steht jetzt ruhig. */
body.tc-raum :is(h1,h2,h3,.marke){font-weight:400}
body.tc-raum .tc-kopf{position:relative;z-index:5}

/* ---------- Ein Formenkanon für alle Räume (Vikram, 03.10.2026: „das sieht alles so zerrissen aus“) ----------
   Der helle Kopf nennt schon Time Council; die zweite Titelzeile der Apps fällt weg. Knöpfe und Reiter haben die
   ruhige Form der Startseite (Rechteck, feine Linie) statt runder Pillen. Karten, Monde und Medaillons bleiben rund. */
body.tc-raum .kopf{border-bottom:0;padding-top:26px}
body.tc-raum .kopf .marke small{display:none}
body.tc-raum .kopf .marke{letter-spacing:.04em}
body.tc-raum .knopf,body.tc-raum .reiter button,body.tc-raum .art,body.tc-raum .art button,body.tc-raum .entwuerfe .wahl,
body.tc-raum .entwuerfe a,body.tc-raum .blattkopf button,body.tc-raum .zeitraum button,body.tc-raum .register .suche,
body.tc-raum .auswahl label{border-radius:2px}
body.tc-raum .knopf{font-family:var(--tc-lese);font-weight:600;letter-spacing:.05em;text-transform:none}
body.tc-raum .knopf.zart{background:transparent}
body.tc-raum .reiter button{font-family:var(--tc-lese);font-weight:600;letter-spacing:.03em}
body.tc-raum #mondfeld{display:none!important}   /* der Mond hat seinen Reiter und seinen Menüpunkt; die Eingabe steht oben */
/* „Auf diesem Gerät merken“ unter jeder Geburtsmaske (eingabe.js) */
body.tc-raum label.merken{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:.95rem;color:var(--text-2);cursor:pointer}
body.tc-raum label.merken input{width:20px;height:20px;accent-color:var(--gold);margin:0}

/* Der Satz zum Datenschutz über dem Fuß jeder Seite (Vikram, 07.10.2026) */

/* ---------- das Bildband unter dem Menü (Vikram, 07.10.2026) ----------
   Ein flaches Video, auf dem das Auge ankommt: Startseite (Time Council), Horoskop (Tierkreis im Kosmos), Mein Bereich (Milchstraße).
   Es läuft stumm; auf Startseite und Horoskop einmal, in „Mein Bereich“ als ruhige Schleife (Klasse „leise“, flacher). */
.filmband{max-width:1280px;margin:0 auto;padding:10px 14px 0}
.filmband .film{display:block;width:100%;height:auto;aspect-ratio:4.2/1;object-fit:cover;background:#0d1430;border:1px solid var(--tc-kupfer)}
.filmband.leise .film{aspect-ratio:5.6/1}
/* Vikram, 12.10.2026: Auf der Startseite ist das Band niedriger (vorher 4,2 : 1; 6,4 : 1 war „eine Spur zu klein“, jetzt dazwischen), damit Leitsatz und „Womit möchtest du beginnen?“ im ersten Bildschirm stehen. */
.filmband.titel .film{aspect-ratio:5.2/1}
@media (max-width:720px){.filmband{padding:8px 8px 0}.filmband .film{aspect-ratio:2.3/1}.filmband.leise .film{aspect-ratio:3.2/1}.filmband.titel .film{aspect-ratio:2.8/1}}


/* Sprungleiste (Vikram, 08.10.2026): lange Seiten bekommen oben kurze Leisten, über die man am Handy direkt in einen Abschnitt springt */
.sprung{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 28px}
.sprung a{display:inline-block;border:1px solid var(--tc-linie);background:#fffdf8;color:var(--tc-tinte);padding:7px 14px;font-size:1rem;line-height:1.3;text-decoration:none}
.sprung a:hover,.sprung a:focus-visible{border-color:var(--tc-kupfer)}
/* Vikram, 10.10.2026: am Handy steht die Sprungleiste in einer Zeile; sie lässt sich seitlich schieben, der Rand blendet aus */
@media (max-width:640px){
  .sprung{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:16px;
    margin-inline:-16px;padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .sprung::-webkit-scrollbar{display:none}
  .sprung a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}
:where(h2,section,article)[id]{scroll-margin-top:16px}
/* Aufklappen (Vikram, 08.10.2026): was nicht jeder braucht, steht hinter einer Leiste */
details.klapp,details.fi-mehr{border:1px solid var(--tc-linie);background:#fffdf8;margin:18px 0 0}
details.klapp>summary,details.fi-mehr>summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:var(--tc-titel);font-size:1.2rem;color:var(--tc-tinte);display:flex;justify-content:space-between;gap:12px;align-items:center}
details.klapp>summary::-webkit-details-marker,details.fi-mehr>summary::-webkit-details-marker{display:none}
details.klapp>summary::after,details.fi-mehr>summary::after{content:"+";color:var(--tc-kupfer);font-size:1.4rem;line-height:1}
details.klapp[open]>summary::after,details.fi-mehr[open]>summary::after{content:"\2212"}
details.klapp>.klapp-inhalt{padding:0 18px 16px}
details.fi-mehr>div{padding:0 14px 14px}

/* Der Kasten zu den Ausdrucken (Vikram, 14.10.2026: an mehreren Stellen sichtbar). Wortlaut in baue_seite.py, AUSDRUCK_HINWEIS. */
.ausdruck-hinweis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:26px;align-items:center;max-width:880px;margin:44px auto 10px;
  padding:22px 26px;background:#fff;border:1px solid var(--tc-linie,#d9d0bd);border-radius:14px;box-shadow:0 1px 2px rgba(27,36,82,.04),0 10px 28px rgba(27,36,82,.07);
  text-align:left;color:var(--tc-text,#2a2f45);font-family:var(--tc-lese)}
.ausdruck-hinweis .ah-bild img{display:block;width:100%;height:auto}
.ausdruck-hinweis .ah-ueber{margin:0 0 6px;font-size:.86rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#a07c3c}
.ausdruck-hinweis h2{margin:0 0 10px;font-family:var(--tc-titel);font-weight:400;font-size:clamp(1.5rem,3.4vw,1.9rem);line-height:1.2;color:var(--tc-tinte,#1b2452)}
.ausdruck-hinweis p{margin:0 0 10px;line-height:1.6}
.ausdruck-hinweis .ah-mass{font-family:var(--tc-titel);font-size:1.15rem;color:#a07c3c}
.ausdruck-hinweis .ah-wege{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.ausdruck-hinweis .knopf{border-radius:999px}
@media (max-width:640px){.ausdruck-hinweis{grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 18px 20px;text-align:center}
  .ausdruck-hinweis .ah-bild{max-width:320px;margin:0 auto}.ausdruck-hinweis .ah-wege{justify-content:center}}
@media print{.ausdruck-hinweis{display:none}}
.ausdruck-hinweis a.knopf{text-decoration:none}