/* Time Council · Ansicht „Porzellan“ (Vikram, 13.10.2026: „gerade das Porzellan gefällt mir sehr“).
   Hell und edel: Porzellangrund, weiße Kacheln mit feinem Goldrand, Nachtblau für Titel, Gold für Werte und Überzeilen,
   Schiefergrau für Beschriftungen. Bilder im eckigen Rahmen mit runden Kanten, damit die Tierkreiszeichen ganz bleiben.

   Probezeit: Jede Regel hier gilt nur unter html[data-stil="porzellan"]. Ohne dieses Merkmal sieht die Seite aus wie bisher.
   Das Merkmal setzt die Stilwahl, die baue_seite.py in jeden Kopf schreibt (Schalter unten links: „Neu“ und „Bisher“).
   Zurück zur alten Seite für alle: in baue_seite.py STILWAHL = False setzen und neu bauen. */

html[data-stil="porzellan"]{
  --tc-papier:#f4f6f9;--tc-flaeche:#e9edf3;--tc-linie:#d6c7a6;--tc-kupfer:#a07c3c;--tc-gold:#c9a463;--tc-gold-hell:#e9dcc0;
  --p-karte:#ffffff;--p-rand:#d6c7a6;--p-gold:#a07c3c;--p-nacht:#1b2452;--p-blau:#2c5a80;--p-schiefer:#5f6779;
  --p-schatten:0 1px 2px rgba(27,36,82,.04),0 10px 28px rgba(27,36,82,.07);
  --p-schatten-hoch:0 1px 2px rgba(27,36,82,.05),0 14px 34px rgba(27,36,82,.11);
  --p-rund:14px;
}
html[data-stil="porzellan"] body,
html[data-stil="porzellan"] body.tc-raum.tc-licht{background:linear-gradient(180deg,#f8f9fb 0%,#eef1f5 100%) fixed,#f4f6f9}

/* ---------- Kopf und Filmband ---------- */
html[data-stil="porzellan"] .tc-kopf{background:transparent}
html[data-stil="porzellan"] .tc-kopf .tc-innen{background:#fff;border:1px solid var(--p-rand);outline:1px solid rgba(160,124,60,.45);outline-offset:-6px;
  border-radius:var(--p-rund);box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] .tc-menue a[aria-current="page"]{border-bottom-color:var(--p-gold)}
html[data-stil="porzellan"] .tc-menue a.tc-beratung{border-color:var(--p-gold);border-radius:999px}
html[data-stil="porzellan"] .filmband .film{border:1px solid var(--p-rand);border-radius:var(--p-rund)}

/* ---------- Überzeilen und Knöpfe überall ---------- */
html[data-stil="porzellan"] :is(.ueber,.marke-klein,.mb-kicker,.g-ueber){color:var(--p-gold)}
html[data-stil="porzellan"] .knopf{border-radius:999px}
html[data-stil="porzellan"] .sprung a{border-radius:999px;background:#fff}

/* ---------- Startseite ---------- */
html[data-stil="porzellan"] .start .gruss{grid-template-columns:minmax(0,1fr);max-width:900px;margin-inline:auto;gap:40px;text-align:center}
html[data-stil="porzellan"] .start .gruss h1 .z{display:inline;white-space:normal}
html[data-stil="porzellan"] .start .gruss .unter{margin-inline:auto;max-width:none}
html[data-stil="porzellan"] .start .frage{font-size:.86rem;font-family:var(--tc-lese);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--p-gold);margin:40px 0 16px}
html[data-stil="porzellan"] .start .wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0}
html[data-stil="porzellan"] .start .wahl a{height:100%;grid-template-columns:66px minmax(0,1fr) 22px;padding:18px 18px 18px 16px;border:1px solid var(--p-rand);
  border-radius:var(--p-rund);background:var(--p-karte);box-shadow:var(--p-schatten);transition:box-shadow .2s,border-color .2s}
html[data-stil="porzellan"] .start .wahl a::before{display:none}
html[data-stil="porzellan"] .start .wahl a:hover,html[data-stil="porzellan"] .start .wahl a:focus-visible{border-color:var(--p-gold);box-shadow:var(--p-schatten-hoch)}
html[data-stil="porzellan"] .start .wahl .zeichen{width:66px;height:66px;padding:4px;border:1px solid var(--p-gold);border-radius:12px;background:#fff;overflow:hidden}
html[data-stil="porzellan"] .start .wahl img.karte{height:56px;width:auto;transform:none;border-radius:6px;box-shadow:none}
html[data-stil="porzellan"] .start .wahl img.kopfbild{width:56px;height:56px;border-radius:9px;box-shadow:none;object-fit:cover}
html[data-stil="porzellan"] .start .klein{text-align:center}
@media (max-width:700px){html[data-stil="porzellan"] .start .wahl{grid-template-columns:minmax(0,1fr)}}
/* Die Astrouhr als Kachel nach Vikrams Vorbild: Rad oben, darunter die Werte als kleine Beschriftung über großem Wert */
html[data-stil="porzellan"] .start .astrouhr{max-width:600px;width:100%;margin-inline:auto;background:var(--p-karte);border:1px solid var(--p-gold);border-radius:var(--p-rund);
  box-shadow:var(--p-schatten);padding:26px 22px 28px}
html[data-stil="porzellan"] .start .astrouhr::before{content:"Der Himmel jetzt";display:block;margin-bottom:12px;font-size:.86rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--p-gold)}
html[data-stil="porzellan"] .start .sternrad{max-width:440px}
html[data-stil="porzellan"] .start .au-titel{margin-top:14px}
html[data-stil="porzellan"] .start .au-werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid #ece4d2;
  font-family:var(--tc-titel);font-size:1.55rem;line-height:1.2;color:var(--p-gold)}
html[data-stil="porzellan"] .start .au-werte span{display:flex;flex-direction:column;gap:4px}
html[data-stil="porzellan"] .start .au-werte b{font-family:var(--tc-lese);font-size:.95rem;font-weight:600;color:var(--p-schiefer);letter-spacing:.02em}
@media (max-width:480px){html[data-stil="porzellan"] .start .au-werte{font-size:1.25rem;gap:8px}}
/* Der Mond heute: hell, mit einem Hauch Nachtblau statt der dunklen Fläche */
html[data-stil="porzellan"] .mondband{background:linear-gradient(180deg,#eef1f8,#e5e9f3);color:var(--p-nacht);border:1px solid #c9cfe0;outline:0;border-radius:var(--p-rund);box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] .mondband:hover,html[data-stil="porzellan"] .mondband:focus-visible{background:linear-gradient(180deg,#e8ecf6,#dfe4f0)}
html[data-stil="porzellan"] .mb-text strong{color:var(--p-nacht)}
html[data-stil="porzellan"] .mb-monde figcaption{color:var(--p-schiefer)}
html[data-stil="porzellan"] .mb-weiter{color:var(--p-gold)}
html[data-stil="porzellan"] #mb-unter{color:#3a4157}
/* Gratis-Konto, Wunsch, Beratung, Autor als Kacheln derselben Art */
html[data-stil="porzellan"] .konto{background:var(--p-karte);border-color:var(--p-rand);border-radius:var(--p-rund);box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] .band{background:#eef2f7;border-color:#d7deea}
html[data-stil="porzellan"] .unten .angebot,html[data-stil="porzellan"] .unten .autor{background:var(--p-karte);border:1px solid var(--p-rand);border-radius:var(--p-rund);
  box-shadow:var(--p-schatten);padding:26px 24px}
html[data-stil="porzellan"] .unten .autor img{border-radius:12px;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--p-gold);object-fit:cover}
html[data-stil="porzellan"] .angebot .zeile{font-family:var(--tc-titel);font-weight:400;font-size:1.3rem}

/* ---------- Horoskop: Grundbild, Kern, persönliche Planeten, Generation, stärkste Aspekte ----------
   Die Bausteine füllt die Horoskop-App nur in dieser Ansicht (werkzeuge/horoskop-app/app/index.html, Funktion ueberblick). */
html[data-stil="porzellan"] #ergebnis .bild{grid-template-columns:minmax(0,1fr)!important;max-width:880px;margin-inline:auto}
html[data-stil="porzellan"] #ergebnis .bild>div:first-child{position:static;background:var(--p-karte);border:1px solid var(--p-gold);border-radius:var(--p-rund);
  box-shadow:var(--p-schatten);padding:24px 22px 26px}
html[data-stil="porzellan"] #ergebnis .radrahmen{max-width:600px;margin-inline:auto}
html[data-stil="porzellan"] #ergebnis .tabellen{max-width:880px;margin:44px auto 0}
html[data-stil="porzellan"] #ergebnis details.klapp{background:var(--p-karte);border:1px solid var(--p-rand);border-radius:var(--p-rund);box-shadow:var(--p-schatten);padding-inline:18px}
.ue-kopf{text-align:center;margin:0 0 14px;font-size:.86rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--p-gold,#a07c3c)}
.grundwerte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:20px 0 6px;padding-top:20px;border-top:1px solid #ece4d2;text-align:left}
.grundwerte .gw{display:flex;flex-direction:column;gap:2px;min-width:0}
.grundwerte .gw.breit{grid-column:1/-1}
.gw .l,.ue-text .l,.ue-asp .l{font-size:.95rem;font-weight:600;color:var(--p-schiefer,#5f6779);letter-spacing:.02em}
.gw .v{font-family:var(--tc-titel);font-size:clamp(1.6rem,4.2vw,2.1rem);line-height:1.15;color:var(--p-gold,#a07c3c)}
.gw .v small{font-family:var(--tc-lese);font-size:1rem;color:var(--p-schiefer,#5f6779);margin-left:6px;white-space:nowrap}
.gw .v.konjunktion,.ue-asp .v.konjunktion{color:#17863f}.gw .v.spannung,.ue-asp .v.spannung{color:#c9301f}.gw .v.harmonie,.ue-asp .v.harmonie{color:#1f5fc0}.gw .v.neben,.ue-asp .v.neben{color:#b96a06}
.gw .v.feuer{color:#c8402a}.gw .v.erde{color:#2f8a45}.gw .v.luft{color:#a37c00}.gw .v.wasser{color:#2468bd}
.ueberblick{max-width:880px;margin:52px auto 0;display:flex;flex-direction:column;gap:52px;text-align:left}
.ue-abschnitt{display:flex;flex-direction:column;gap:16px}
.ue-abschnitt>header{display:flex;flex-direction:column;gap:6px}
.ue-abschnitt .ue-ueber{margin:0;font-size:.86rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--p-gold,#a07c3c)}
.ue-abschnitt h2{margin:0;font-family:var(--tc-titel);font-weight:400;font-size:clamp(1.75rem,4vw,2.25rem);line-height:1.2;color:var(--p-nacht,#1b2452)}
.ue-abschnitt header p{margin:0;color:var(--p-schiefer,#5f6779)}
.ue-karte{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--p-karte,#fff);border:1px solid var(--p-rand,#d6c7a6);border-radius:var(--p-rund,14px);box-shadow:var(--p-schatten);padding:20px;transition:border-color .2s,box-shadow .2s}
.ue-karte:hover,.ue-karte:focus-visible{border-color:var(--p-gold,#a07c3c);box-shadow:var(--p-schatten-hoch)}
.ue-karte:focus-visible{outline:2px solid var(--p-gold,#a07c3c);outline-offset:3px}
.ue-rahmen{display:block;width:150px;aspect-ratio:1/1;padding:5px;background:#fff;border:1px solid var(--p-gold,#a07c3c);border-radius:16px;box-shadow:0 4px 14px rgba(27,36,82,.10)}
.ue-rahmen img{display:block;width:100%;height:100%;object-fit:cover;border-radius:11px}
.ue-rahmen.leer{display:flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(160deg,#fff,#eef1f5)}
.ue-rahmen.leer .gbild{width:44%;height:44%}
.ue-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.ue-text .v{font-family:var(--tc-titel);font-size:clamp(1.75rem,4.4vw,2.15rem);line-height:1.1;color:var(--p-gold,#a07c3c)}
.ue-text .d{font-size:1rem;color:var(--p-schiefer,#5f6779);font-variant-numeric:tabular-nums}
.ue-text p{margin:0}
.ue-text .mehr{color:var(--p-gold,#a07c3c);font-weight:700}
@media (max-width:540px){
  .ue-karte{grid-template-columns:104px minmax(0,1fr);gap:6px 16px;align-items:start}
  .ue-text{display:contents}
  .ue-rahmen{width:104px;padding:4px;border-radius:13px;grid-column:1;grid-row:1/4}
  .ue-rahmen img{border-radius:9px}
  .ue-text .l,.ue-text .v,.ue-text .d{grid-column:2}
  .ue-text .l{align-self:end;margin-top:6px}
  .ue-text p,.ue-text .mehr{grid-column:1/-1}
  .ue-text p{margin-top:8px}
}
details.ue-klapp{background:var(--p-karte,#fff);border:1px solid var(--p-rand,#d6c7a6);border-radius:var(--p-rund,14px);box-shadow:var(--p-schatten)}
details.ue-klapp summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--tc-titel);font-size:1.45rem;color:var(--p-nacht,#1b2452)}
details.ue-klapp summary::-webkit-details-marker{display:none}
details.ue-klapp summary::after{content:"+";color:var(--p-gold,#a07c3c);font-family:var(--tc-lese);font-size:1.8rem;line-height:1}
details.ue-klapp[open] summary::after{content:"\2013"}
.ue-zeilen{list-style:none;margin:0;padding:0 22px 12px}
.ue-zeilen li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 0;border-top:1px solid #ece4d2;cursor:pointer;font-variant-numeric:tabular-nums}
.ue-zeilen li:focus-visible{outline:2px solid var(--p-gold,#a07c3c);outline-offset:2px}
.ue-zeilen .gbild{width:1.6rem;height:1.6rem}
.ue-zeilen .r{color:var(--p-schiefer,#5f6779);text-align:right}
.ue-aspekte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.ue-aspekte{grid-template-columns:minmax(0,1fr)}}
.ue-asp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--p-karte,#fff);border:1px solid var(--p-rand,#d6c7a6);border-radius:var(--p-rund,14px);box-shadow:var(--p-schatten);padding:16px 18px}
.ue-asp:hover,.ue-asp:focus-visible{border-color:var(--p-gold,#a07c3c)}
.ue-asp .sy{display:flex;gap:4px;align-items:center}
.ue-asp .sy .gbild{width:1.7rem;height:1.7rem}
.ue-asp .t{display:flex;flex-direction:column;min-width:0}
.ue-asp .v{font-family:var(--tc-titel);font-size:1.5rem;line-height:1.15}
.ue-asp .o{color:var(--p-schiefer,#5f6779);font-variant-numeric:tabular-nums}

/* ---------- Unterseiten wie die Titelseite (Vikram, 13.10.2026: „die Optik sollte auf der ganzen Webseite so sein wie auf der ersten“) ----------
   Beratung, Paare, Mein Bereich, Mappe, Astrouhr, Finsternisse, Sabische Symbole, Über Vikram: Die cremefarbenen Kästen mit doppeltem
   Rahmen werden weiße Kacheln mit feinem Goldrand, runden Ecken und leisem Schatten. Graue Hinweisflächen werden hell blaugrau.
   Porträts stehen im eckigen Rahmen mit runden Kanten wie auf der Titelseite. */
html[data-stil="porzellan"] :is(.angebot,.erst,.bereich .tafel,.bereich .karte,.mappe .tafel,.vormerken,.fi-ort,.fi-karte,.ortzeile .ohne-konto,.weg,
  details.klapp,details.fi-mehr){background:var(--p-karte);border:1px solid var(--p-rand);outline:0;border-radius:var(--p-rund);box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] .fi-karte{border-top:5px solid var(--mondfarbe)}
html[data-stil="porzellan"] :is(.tiefer,.tiefer-karte){background:var(--p-karte);border:1px solid var(--p-rand);border-left:4px solid var(--p-gold);border-radius:var(--p-rund);box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] :is(.meldung,.hinweis,.rueckzeile,.ortmeldung,.vormerken .meldung,#buchen .hinweis){background:#eef2f7;border-left-color:var(--p-gold);border-radius:0 10px 10px 0}
html[data-stil="porzellan"] .fi-hoch,html[data-stil="porzellan"] .fi-karte .sicht{background:#eef2f7;border-radius:10px}
html[data-stil="porzellan"] .bereich .hliste li{border-radius:12px;background:var(--p-karte)}
html[data-stil="porzellan"] .bereich .hliste li.aktiv{background:#eef2f7;border-color:var(--p-gold)}
html[data-stil="porzellan"] :is(.auftakt img,.vikram .auftakt img){border-radius:16px;object-fit:cover;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--p-gold),var(--p-schatten)}
html[data-stil="porzellan"] .stimmen-reihe .stimme{border-left-color:var(--p-gold)}
html[data-stil="porzellan"] details.klapp>summary{border-radius:var(--p-rund)}
html[data-stil="porzellan"] .platz{border-radius:var(--p-rund);background:#eef2f7}
/* Angebotskarten der Beratung: oben dieselbe Goldüberzeile wie auf der Titelseite, der Preis in Gold */
html[data-stil="porzellan"] .angebot{padding:30px 26px 28px}
html[data-stil="porzellan"] .angebot .mass{color:var(--p-gold)}
/* Astrouhr: Rad und Seitenspalte als Kacheln, Aspekte und Knöpfe mit runden Ecken */
html[data-stil="porzellan"] .uhr section[aria-label="Das Rad"]{background:var(--p-karte);border:1px solid var(--p-gold);border-radius:var(--p-rund);box-shadow:var(--p-schatten);padding:22px 20px;align-self:start}
html[data-stil="porzellan"] .aspektliste li{background:var(--p-karte);border-radius:10px;box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] .schalter button{background:var(--p-karte);border-radius:10px}
html[data-stil="porzellan"] .schalter button:hover{background:#eef2f7}
html[data-stil="porzellan"] .stellen tr.waehlbar:hover,html[data-stil="porzellan"] .stellen tr.waehlbar:focus-visible{background:#eef2f7}
html[data-stil="porzellan"] .zeitkarte{background:var(--p-karte);box-shadow:0 0 0 1px var(--p-gold),0 0 0 7px #fff,0 0 0 8px rgba(160,124,60,.35),0 30px 70px -20px rgba(17,24,56,.5)}
html[data-stil="porzellan"] .zeitkarte .zu{background:#fff}
html[data-stil="porzellan"] .zeit-kacheln img{border-radius:12px}
html[data-stil="porzellan"] .fi-wahl button{background:var(--p-karte);border-radius:999px}
html[data-stil="porzellan"] .sprung a{border-color:var(--p-rand)}

html[data-stil="porzellan"] .uhr .jetztknopf:has(>[hidden]){display:none}
/* Sabian-Gradseiten: Arcanum und Satz der Kraft als Kacheln, die Karte mit runden Kanten */
html[data-stil="porzellan"] .grad .arcanum{background:var(--p-karte);box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] .grad .kraft{background:var(--p-karte);border-color:var(--p-rand);border-radius:var(--p-rund);box-shadow:var(--p-schatten)}
html[data-stil="porzellan"] .grad .bildlink img{border-radius:14px}
/* ---------- Ein Seitenkopf für alle Seiten (Vikram, 14.10.2026 mittags) ----------
   „Die Sätze am Anfang sind in zu großer Schrift … linksbündig … auf allen Seiten gleich … ein einheitliches Bild.“
   Jede Unterseite öffnet gleich: Überzeile in Gold, Titel in Nachtblau, darunter der Leitsatz in ruhiger Leseschrift,
   alles linksbündig an der Kante des Inhalts. Nur die Titelseite bleibt mittig, sie ist das Tor.
   Die drei Größen stehen hier als Variablen und gelten überall. */
html[data-stil="porzellan"]{--k-ueber:.82rem;--k-titel:clamp(1.85rem,4.2vw,2.5rem);--k-leit:1.05rem}
@media (max-width:640px){html[data-stil="porzellan"]{--k-titel:1.75rem;--k-leit:.98rem}}
/* Überzeile */
html[data-stil="porzellan"] :is(main.lesen,main.lesen>.einstieg,.bereich [id="aussen"],.bereich [id="drin"],main.mappe,.uhr-kopf,.fi-auftakt,.auftakt) .ueberzeile{
  font-family:var(--tc-lese);font-size:var(--k-ueber);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--p-gold);text-align:left;margin:0 0 8px}
/* Titel */
html[data-stil="porzellan"] :is(main.lesen,main.lesen>.einstieg,.bereich [id="aussen"],.bereich [id="drin"],main.mappe,.uhr-kopf,.fi-auftakt,.auftakt) h1,
html[data-stil="porzellan"] body.tc-licht .kopf .marke,
html[data-stil="porzellan"] #ergebnis>#e-titel{font-family:var(--tc-titel);font-weight:400;font-size:var(--k-titel);line-height:1.15;letter-spacing:.01em;color:var(--p-nacht);text-align:left;margin:0 0 12px}
/* Leitsatz */
html[data-stil="porzellan"] :is(main.lesen,main.lesen>.einstieg,.bereich [id="aussen"],main.mappe)>h1+p,
html[data-stil="porzellan"] .auftakt h1+p,
html[data-stil="porzellan"] :is(.fi-auftakt,.uhr-kopf) :is(.leit,.uhr-willkommen,.uhr-sachsatz),
html[data-stil="porzellan"] body.tc-licht .kopf .willkommen,
html[data-stil="porzellan"] body.tc-licht .wasist,html[data-stil="porzellan"] body.tc-licht .einleitung{
  font-family:var(--tc-lese);font-size:var(--k-leit);line-height:1.6;color:#3a4157;text-align:left;max-width:40rem;margin:0 0 10px}
html[data-stil="porzellan"] .uhr-kopf .uhr-willkommen+.uhr-willkommen{color:var(--p-gold)}
html[data-stil="porzellan"] .uhr-kopf .uhr-trenner{display:none}
html[data-stil="porzellan"] .uhr-kopf .uhr-sachsatz{color:var(--p-schiefer);font-size:.95rem}
/* Kopfbereich: Abstand oben gleich, alles an die linke Kante */
html[data-stil="porzellan"] main.lesen{padding-top:12px}
html[data-stil="porzellan"] :is(.uhr-kopf,.fi-auftakt){text-align:left;padding-top:34px}
html[data-stil="porzellan"] .uhr-kopf{max-width:none}
html[data-stil="porzellan"] .bereich [id="aussen"]>.knoepfe{text-align:left}
/* Bildköpfe (Beratung, Paare, Über Vikram, Finsternisse): Bild links, Text rechts; am Handy das Bild klein darüber, ebenfalls links */
html[data-stil="porzellan"] .auftakt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center;
  justify-items:start;text-align:left;padding:36px 0 26px}
html[data-stil="porzellan"] .auftakt img{width:132px;height:132px}
html[data-stil="porzellan"] .auftakt p{margin-inline:0}
html[data-stil="porzellan"] .fi-auftakt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;align-items:start}
html[data-stil="porzellan"] .fi-auftakt svg{grid-row:1/span 3;width:120px;height:120px;margin:0}
@media (max-width:640px){
  html[data-stil="porzellan"] .auftakt{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 0 18px}
  html[data-stil="porzellan"] .auftakt img{width:96px;height:96px}
  html[data-stil="porzellan"] .fi-auftakt{grid-template-columns:minmax(0,1fr);padding-top:22px}
  html[data-stil="porzellan"] .fi-auftakt svg{grid-row:auto;width:84px;height:84px;margin-bottom:14px}
  html[data-stil="porzellan"] :is(.uhr-kopf){padding-top:22px}
}
/* Eine Kopfspalte für alle Seiten: 42rem breit, mittig auf der Seite, darin alles linksbündig. So beginnt der Titel auf jeder
   Seite an derselben Stelle, auch wo der Inhalt darunter breiter ist (Astrouhr, Beratung, Horoskop). */
html[data-stil="porzellan"]{--k-spalte:42rem}
html[data-stil="porzellan"] :is(main.lesen,.vikram,.fi){max-width:var(--k-spalte)}
html[data-stil="porzellan"] :is(.beratung>.auftakt,.uhr-kopf,.bereich>[id="aussen"],.bereich>[id="drin"]>:is(.ueberzeile,h1,.leise),
  body.tc-licht .kopf,body.tc-licht .reiter,body.tc-licht .wasist,body.tc-licht #eingabe>.einleitung){max-width:var(--k-spalte);margin-left:auto;margin-right:auto}
html[data-stil="porzellan"] body.tc-licht .kopf>*{max-width:none}
/* Horoskop und Sabian-Orakel tragen dieselbe goldene Überzeile wie die übrigen Seiten */
html[data-stil="porzellan"] body.tc-licht .kopf .marke::before{display:block;margin:0 0 8px;font-family:var(--tc-lese);font-size:var(--k-ueber);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--p-gold)}
html[data-stil="porzellan"] body.tc-licht .kopf:has(#willkommen) .marke::before{content:"Dein Geburtshoroskop"}
html[data-stil="porzellan"] body.tc-licht .kopf:not(:has(#willkommen)) .marke::before{content:"360 Bilder · 360 Grade"}
/* Über Vikram (Vikram, 14.10.2026): das große Porträt mittig, darunter Überzeile und Titel mittig, wie vorher */
html[data-stil="porzellan"] .vikram .auftakt{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:24px;padding:48px 0 26px}
html[data-stil="porzellan"] .vikram .auftakt img{width:300px;height:375px}
html[data-stil="porzellan"] .vikram .auftakt :is(.ueberzeile,h1){text-align:center}
@media (max-width:640px){html[data-stil="porzellan"] .vikram .auftakt{padding:30px 0 20px}html[data-stil="porzellan"] .vikram .auftakt img{width:240px;height:300px}}
/* Beratung und Paare: der Spiegelsatz als Zitat, mit Abstand unter Kopf und Sprungleiste */
html[data-stil="porzellan"] .haltung{border:0;margin:46px auto 46px;padding:0 8px;max-width:40rem}
html[data-stil="porzellan"] .haltung .leit{font-size:1.3rem;line-height:1.55;color:var(--p-nacht);text-align:center}
html[data-stil="porzellan"] .haltung .leit::before{content:"\201E";color:var(--p-gold)}html[data-stil="porzellan"] .haltung .leit::after{content:"\201C";color:var(--p-gold)}
html[data-stil="porzellan"] .haltung::before{content:"";display:block;width:56px;height:1px;margin:0 auto 22px;background:var(--p-gold)}
@media (max-width:640px){html[data-stil="porzellan"] .haltung{margin:32px auto}html[data-stil="porzellan"] .haltung .leit{font-size:1.12rem}}
/* Horoskop und Sabian-Orakel: der App-Kopf wie die übrigen Seiten */
html[data-stil="porzellan"] body.tc-licht .kopf{text-align:left;border-bottom:0;padding-top:14px}
html[data-stil="porzellan"] body.tc-licht .kopf .marke small{display:none}
html[data-stil="porzellan"] body.tc-licht .reiter{justify-content:flex-start}
html[data-stil="porzellan"] body.tc-licht[data-reiter="horoskop"] .wasist,html[data-stil="porzellan"] body.tc-licht:not([data-reiter]) #wasist{display:none}
html[data-stil="porzellan"] body.tc-licht .wasist{margin-top:8px}
/* Zum Selbstlesen: jedes Angebot als Kachel wie die vier Wege der Titelseite */
html[data-stil="porzellan"] main.lesen .analyse{background:var(--p-karte);border:1px solid var(--p-rand);border-radius:var(--p-rund);box-shadow:var(--p-schatten);
  padding:24px 26px 12px;margin-top:22px}
html[data-stil="porzellan"] main.lesen .analyse .mass{color:var(--p-gold)}
@media (max-width:640px){html[data-stil="porzellan"] main.lesen .analyse{padding:18px 18px 8px}}

/* ---------- Horoskopseite (und die hellen Orakelräume): Eingabe und Erklärkästen als Porzellan ----------
   Die Apps rechnen mit --tisch (Feld) und --kupfer (Zwischentitel). Hier werden sie weiß und gold. */
html[data-stil="porzellan"] body.tc-raum.tc-licht{--tisch:#ffffff;--kupfer:var(--p-gold)}
html[data-stil="porzellan"] body.tc-licht .maske{background:var(--p-karte);border:1px solid var(--p-rand);border-radius:var(--p-rund);box-shadow:var(--p-schatten);padding:20px}
html[data-stil="porzellan"] body.tc-licht .maske input:not([type="checkbox"]){background:#fff;border:1px solid #d9dee8;border-radius:10px}
html[data-stil="porzellan"] body.tc-licht .maske input:not([type="checkbox"]):focus{border-color:var(--p-gold)}
html[data-stil="porzellan"] body.tc-licht .einfuehrung{background:var(--p-karte);border:1px solid var(--p-rand);border-radius:var(--p-rund);box-shadow:var(--p-schatten);padding:26px 28px 12px}
html[data-stil="porzellan"] body.tc-licht .reiter button{border-radius:999px;background:var(--p-karte);border-color:var(--p-rand)}
html[data-stil="porzellan"] body.tc-licht .reiter button[aria-selected="true"]{background:var(--p-nacht);border-color:var(--p-nacht);color:#fff}
/* „Womit du beginnst“ (Vikram, 14.10.2026: in die Mitte, im Design angeglichen): eine Kachel mittig über dem Rad,
   der Titel als goldene Überzeile wie „Womit möchtest du beginnen?“ auf der Titelseite */
html[data-stil="porzellan"] .ueberblick>.startweg{max-width:none;margin:0;padding:22px 26px 20px;background:var(--p-karte);border:1px solid var(--p-rand);
  border-left:4px solid var(--p-gold);border-radius:var(--p-rund);box-shadow:var(--p-schatten);text-align:left}
html[data-stil="porzellan"] .ueberblick>.startweg h3{margin:0 0 10px;font-family:var(--tc-lese);font-weight:700;font-size:var(--k-ueber);letter-spacing:.2em;text-transform:uppercase;color:var(--p-gold)}
html[data-stil="porzellan"] .ueberblick>.startweg p{margin:0;font-size:var(--k-leit);line-height:1.6;color:#3a4157}
html[data-stil="porzellan"] #ergebnis #l-oben{display:none}

/* ---------- Titelseite: die Astrouhr zur Begrüßung (Vikram, 14.10.2026, Versuch) ----------
   Unter dem Leitsatz und „Dein Horoskop hält die Schlüssel dazu bereit“ steht die Astrouhr, darunter „Womit möchtest du beginnen?“
   mit den vier Wegen. Der innere Block des Grußes löst sich dafür auf, damit die Uhr zwischen seine Teile rücken kann. */
html[data-stil="porzellan"] .start .gruss{gap:0}
html[data-stil="porzellan"] .start .gruss>div{display:contents}
html[data-stil="porzellan"] .start .gruss>div>*{order:3}
html[data-stil="porzellan"] .start .gruss h1{order:1}
html[data-stil="porzellan"] .start .gruss .unter{order:2;margin-bottom:34px}
html[data-stil="porzellan"] .start .gruss .astrouhr{order:2;margin-bottom:8px}

/* Astrouhr: Der Kopf bleibt geschlossen über der Uhr wie in der bisherigen Ansicht (Vikram, 14.10.2026: der Versuch mit
   geteiltem Text und flacherem Filmband ist verworfen). Nur die Farben folgen der neuen Ansicht. */

/* ---------- Ergebnis der Horoskopseite: Kopf mittig, Brücke zum Gespräch als Kachel unter den fünf stärksten Aspekten ---------- */
html[data-stil="porzellan"] #ue-bruecke .uebergang{max-width:none;margin:10px 0 0;border:1px solid var(--p-rand);border-left:4px solid var(--p-gold);background:var(--p-karte);
  border-radius:var(--p-rund);box-shadow:var(--p-schatten);padding:24px 26px 22px}
html[data-stil="porzellan"] #ue-bruecke .uebergang .mitte{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Titelseite: das Gratis-Konto als ruhige Zeile ohne Kasten (Vikram, 14.10.2026: weniger Kästen untereinander) */
html[data-stil="porzellan"] .start .konto{background:transparent;border:0;box-shadow:none;max-width:44rem;margin:6px auto 34px;padding:0 8px;text-align:center}
html[data-stil="porzellan"] .start .ausdruck-hinweis{margin-bottom:14px}

/* ---------- Auftritt: das Rad zeichnet sich auf (stilwahl.js setzt die Klasse beim ersten Zeichnen) ---------- */
/* 14.10.2026: Während sich das Rad im Auftritt dreht, ragt es kurz über den Rand; am Handy ließ sich die Seite dann seitlich schieben. */
html[data-stil="porzellan"],html[data-stil="porzellan"] body{overflow-x:clip}
@keyframes tc-rad-auf{0%{clip-path:circle(0% at 50% 50%);transform:rotate(-60deg);opacity:.2}100%{clip-path:circle(71% at 50% 50%);transform:none;opacity:1}}
@keyframes tc-punkt-auf{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes tc-linie-auf{0%{opacity:0}100%{opacity:1}}
html[data-stil="porzellan"] svg.auftritt{animation:tc-rad-auf 1.6s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 50%}
html[data-stil="porzellan"] svg.auftritt :is(.au-punkt,.punkt,.scheibe,.schild){animation:tc-punkt-auf .8s cubic-bezier(.2,.7,.2,1) 1.2s both;transform-box:fill-box;transform-origin:center}
html[data-stil="porzellan"] svg.auftritt :is(.aspekt,.e-faden,.faden){animation:tc-linie-auf 1s ease 1.9s both}
@media (prefers-reduced-motion:reduce){html[data-stil="porzellan"] svg.auftritt,html[data-stil="porzellan"] svg.auftritt *{animation:none!important}}

/* ---------- der Schalter der Probezeit (stilwahl.js) ---------- */
.stilwahl{position:fixed;left:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:4px;padding:4px;background:#fff;border:1px solid #d6c7a6;border-radius:999px;
  box-shadow:0 6px 20px rgba(27,36,82,.16);font:600 14px/1 "Source Sans 3","Segoe UI",system-ui,sans-serif}
.stilwahl span{padding:0 6px 0 8px;color:#5f6779;letter-spacing:.04em}
.stilwahl button{font:inherit;border:0;background:transparent;color:#1b2452;padding:8px 12px;border-radius:999px;cursor:pointer}
.stilwahl button[aria-pressed="true"]{background:#1b2452;color:#fff}
.stilwahl button:focus-visible{outline:2px solid #a07c3c;outline-offset:2px}
@media print{.stilwahl{display:none}
  html[data-stil="porzellan"] #ergebnis .bild>div:first-child,html[data-stil="porzellan"] #ergebnis details.klapp{border:0;box-shadow:none;padding:0;background:transparent}
  html[data-stil="porzellan"] #ergebnis .tabellen{margin:0}}