/* ------------------------------------------------------------------------
   stil.css — Nachtblau, Gold, Serifen. Das Buch, nicht das Formular.
   --------------------------------------------------------------------- */
:root {
  --grund: #070810;
  --kagit: #0e1020;
  --kagit2: #141730;
  --schrift: #ece5d6;
  --gedaempft: #8b8471;
  --linie: rgba(236, 229, 214, 0.13);
  --ton: #c9a227;
  --ton-hell: #e7c65c;
  --rot: #9c4a3c;
}

* { box-sizing: border-box; }

/* Ein eigenes display: flex oder grid sticht sonst das hidden-Attribut aus —
   das Element bleibt sichtbar, obwohl es versteckt ist. Gilt für die ganze
   Seite, damit die Falle nirgends mehr zuschnappt. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* ------------------------------------------------------------ Hintergrund
   Astrolabien und Girih-Muster, weit nach hinten gedämpft: das Bild trägt
   die Stimmung, der Schleier hält den Text lesbar. */
#himmel, #schleier { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#himmel {
  background: var(--grund) url("bilder/hintergrund.jpg?v=1") center / cover no-repeat;
  opacity: .5;
}
#schleier {
  background:
    radial-gradient(ellipse 62% 55% at 50% 42%, rgba(7,8,16,.86) 0%, rgba(7,8,16,.55) 55%, rgba(7,8,16,.2) 100%),
    linear-gradient(180deg, rgba(7,8,16,.72) 0%, rgba(7,8,16,.45) 30%, rgba(7,8,16,.72) 100%);
}
#kopf, nav#reiter, main, footer { position: relative; z-index: 1; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--grund);
  color: var(--schrift);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-emoji: text;   /* Tierkreiszeichen als Schrift, nicht als Emoji */
}

/* --------------------------------------------------------------- Kopf */
#kopf {
  text-align: center;
  padding: 4.5rem 1.5rem 2rem;
  border-bottom: 1px solid var(--linie);
}
.arapUst {
  font-size: 2rem;
  color: var(--ton);
  opacity: .75;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}
#kopf h1 {
  margin: 0;
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  font-weight: 400;
  letter-spacing: .09em;
  color: var(--ton-hell);
}
.unterzeile {
  margin: .6rem 0 0;
  color: var(--gedaempft);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- Reiter */
#reiter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  padding: 1.2rem 1rem 0;
}
#reiter button {
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--gedaempft);
  font: inherit;
  font-size: .92rem;
  letter-spacing: .04em;
  padding: .45rem .95rem;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
#reiter button:hover { color: var(--schrift); }
#reiter button.etkin {
  color: var(--ton-hell);
  border-color: var(--linie);
  background: var(--kagit);
}

/* --------------------------------------------------------------- Rumpf */
main { max-width: 50rem; margin: 0 auto; padding: 2rem 1.5rem 6rem; }

.giriş { color: var(--gedaempft); font-style: italic; margin: 0 0 2rem; }

h2 {
  font-weight: 400; font-size: 1.9rem; color: var(--ton-hell);
  margin: 2.5rem 0 .2rem; letter-spacing: .03em;
}
h3 {
  font-weight: 400; font-size: 1.02rem; color: var(--ton);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 2rem 0 .5rem;
}
p { margin: 0 0 1rem; }
em { color: var(--ton-hell); font-style: italic; }
b { color: var(--ton-hell); font-weight: 400; }

.kucukNot {
  color: var(--gedaempft);
  font-size: .84rem;
  line-height: 1.55;
  border-left: 1px solid var(--linie);
  padding-left: .9rem;
  margin: 1.2rem 0;
}

/* -------------------------------------------------------------- Felder */
.alanlar { display: flex; flex-direction: column; gap: .2rem; }
.alan { display: block; margin-top: 1.1rem; }
.alan > span {
  display: block;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gedaempft); margin-bottom: .4rem;
}
input[type=text], textarea {
  width: 100%;
  background: var(--kagit);
  border: 1px solid var(--linie);
  border-radius: 2px;
  color: var(--schrift);
  font: inherit;
  padding: .6rem .8rem;
  transition: border-color .18s;
}
input[type=text]:focus, textarea:focus {
  outline: none; border-color: var(--ton);
}
textarea { resize: vertical; }

.cinsiyet {
  border: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap;
}
.cinsiyet legend {
  padding: 0; font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gedaempft); margin-bottom: .5rem;
}
.cinsiyet label { color: var(--gedaempft); cursor: pointer; font-size: .95rem; }
.cinsiyet input { accent-color: var(--ton); margin-right: .35rem; }

.buyukDugme {
  margin-top: 1.8rem;
  background: none;
  border: 1px solid var(--ton);
  border-radius: 2px;
  color: var(--ton-hell);
  font: inherit; font-size: .95rem; letter-spacing: .1em;
  padding: .6rem 1.6rem; cursor: pointer;
  transition: background .18s, color .18s;
}
.buyukDugme:hover { background: var(--ton); color: var(--grund); }

/* ------------------------------------------------------ Korrekturzeile */
.zincir {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  min-height: 2.2rem; margin-top: .5rem;
}
.cip {
  display: inline-flex; align-items: center; gap: .1rem;
  background: var(--kagit2);
  border: 1px solid var(--linie);
  border-radius: 2px;
  padding: .1rem .15rem .1rem .3rem;
}
.cip select {
  background: none; border: none; color: var(--schrift);
  font-family: inherit; font-size: 1.15rem; padding: .1rem .1rem;
  cursor: pointer; appearance: none; text-align: center;
}
.cip select:focus { outline: 1px solid var(--ton); }
.cip .deger { color: var(--ton); font-size: .68rem; padding: 0 .1rem; }
.cip .sil {
  background: none; border: none; color: var(--gedaempft);
  cursor: pointer; font-size: .85rem; line-height: 1; padding: .1rem .25rem;
}
.cip .sil:hover { color: var(--rot); }
.zincir .ekle {
  background: none; border: 1px dashed var(--linie); border-radius: 2px;
  color: var(--gedaempft); cursor: pointer; font: inherit;
  padding: .15rem .5rem;
}
.zincir .ekle:hover { color: var(--ton); border-color: var(--ton); }
.satirToplam { color: var(--ton); font-size: .9rem; margin-inline-start: .4rem; direction: ltr; }

/* ------------------------------------------------------------ Rechnung */
.hesap {
  margin-top: 3rem; padding: 2rem 1.5rem;
  background: var(--kagit);
  border: 1px solid var(--linie); border-radius: 2px;
  text-align: center;
}
.buyukToplam {
  font-size: clamp(3rem, 12vw, 5rem); line-height: 1;
  color: var(--ton-hell); letter-spacing: .03em;
}
.hesapNot { color: var(--gedaempft); font-size: .85rem; margin-top: .4rem; }

.kalanlar, .ikiBurc {
  display: grid; gap: .6rem; margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.kalanKutu {
  background: var(--kagit2); border: 1px solid var(--linie);
  border-radius: 2px; padding: .9rem .6rem;
}
.kalanBaslik { color: var(--gedaempft); font-size: .74rem; letter-spacing: .1em; }
.kalanSayi { color: var(--ton); font-size: 1.5rem; line-height: 1.3; }
.kalanAd {
  color: var(--gedaempft); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; margin-top: .3rem;
}
.kalanDeger { color: var(--schrift); font-size: .95rem; margin-top: .2rem; }
.hesap .kucukNot { text-align: left; margin-top: 1.6rem; }

/* ------------------------------------------------------------- Kapitel */
.kapitel { margin-top: 3.5rem; }
.kapitel h2 { text-align: center; margin-bottom: 0; }
.arapBaslik {
  text-align: center; color: var(--ton); opacity: .7;
  font-size: 1.6rem; margin-bottom: 2rem;
}

.kunye {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 2rem;
  border-block: 1px solid var(--linie);
  padding: 1rem 0; margin-bottom: 1rem;
}
.kunyeSatir {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem 0; border-bottom: 1px dotted var(--linie);
}
.kunyeSatir:last-child { border-bottom: none; }
.kunyeSatir dt {
  color: var(--gedaempft); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; padding-top: .25rem;
}
.kunyeSatir dd { margin: 0; text-align: right; font-size: .95rem; }

/* --------------------------------------------------------------- Niyet */
.hukum {
  margin-top: 1.6rem; text-align: center;
  font-size: clamp(2.2rem, 9vw, 3.4rem); color: var(--ton-hell);
  letter-spacing: .04em;
}
.hukumDe {
  text-align: center; color: var(--gedaempft);
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  margin-bottom: 1.8rem;
}
.niyetMetin { font-size: 1.08rem; }

/* --------------------------------------------------------- zwei Spalten */
.ikiSutun { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.ikiSutun h3 { margin-top: 0; }
@media (max-width: 40rem) { .ikiSutun { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Tabelle */
.tabloKutu { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--linie); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: .5rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
th {
  color: var(--ton); font-weight: 400; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
tbody tr:hover { background: var(--kagit); }
td.arap { font-size: 1.05rem; color: var(--ton-hell); white-space: nowrap; }
.ebcedTablo td { text-align: center; color: var(--schrift); white-space: nowrap; }

.teilungen { padding-left: 1.2rem; }
.teilungen li { margin-bottom: .5rem; }

/* --------------------------------------------------- Geist des 11. Hauses */
.geoZeile { display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap; }
.geoZeile .alan { flex:1 1 12rem; margin-top:1.1rem; }
.knopfKlein {
  background:none; border:1px solid var(--linie); border-radius:2px;
  color:var(--gedaempft); font:inherit; font-size:.85rem; padding:.55rem .9rem;
  cursor:pointer; white-space:nowrap; transition:border-color .18s, color .18s;
}
.knopfKlein:hover { border-color:var(--ton); color:var(--ton-hell); }
.geoStatus { font-size:.8rem; color:var(--gedaempft); align-self:center; min-height:1.2em; }
.geoStatus.fehler { color:var(--rot); }
.geoStatus.ok { color:var(--ton); }
.geoStatus.warnung { color:var(--ton-hell); opacity:.85; }

.almutenKarte {
  background:var(--kagit2); border:1px solid var(--linie); border-radius:2px;
  padding:1.6rem 1.2rem; text-align:center; margin-top:.5rem;
}
.almutenPlanet {
  font-size:clamp(2.1rem,7vw,2.8rem); color:var(--ton-hell); margin:.3rem 0 0; line-height:1.15;
}
.almutenPlanet .glyph { color:var(--ton); margin-right:.4rem; }

.wuerdeTablo th, .wuerdeTablo td { text-align:center; }
.wuerdeTablo td:first-child, .wuerdeTablo th:first-child { text-align:left; }
.wuerdeTablo td.treffer { color:var(--ton-hell); }
.wuerdeTablo td.summe { color:var(--ton-hell); }
.wuerdeTablo tr.sieger td { background:rgba(201,162,39,.08); }

.radKutu { text-align:center; margin-top:1.8rem; }
.radKutu svg { width:100%; max-width:20rem; height:auto; }
.radLegende { display:flex; justify-content:center; gap:1.3rem; flex-wrap:wrap; font-size:.78rem; color:var(--gedaempft); margin-top:.5rem; }
.radLegende .punkt { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.3rem; vertical-align:middle; }

.wuerdeTablo td .hebr { font-size:1.15rem; color:var(--ton-hell); direction:rtl; margin-right:.25rem; }

.geistName {
  margin-top:2.2rem; text-align:center; padding:2rem 1.2rem;
  background:linear-gradient(180deg, var(--kagit2), var(--kagit));
  border:1px solid var(--ton); border-radius:2px;
}
.geistName .buyukToplam { font-size:clamp(2.2rem,9vw,3.4rem); line-height:1.15; }
.geistName .buchstabe {
  display:block; font-size:1.6rem; color:var(--ton); direction:rtl;
  letter-spacing:.22em; margin-top:.5rem;
}
.geistName .kucukNot, .almutenKarte .kucukNot {
  border:none; padding:0; margin:.9rem 0 0; text-align:center;
}

/* -------------------------------------------------- Zeitleiste, Schieber */
.zeitleisteKutu {
  background:var(--kagit); border:1px solid var(--linie); border-radius:2px;
  padding:1.2rem 1rem 1.4rem; margin-top:1.6rem;
}
.zeitleisteKutu svg { width:100%; height:auto; display:block; cursor:pointer; }
.zeitleisteAblesung {
  text-align:center; margin-top:.7rem; color:var(--ton-hell); font-size:.95rem; line-height:1.5;
}
.naheDran { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.naheDranItem {
  background:var(--kagit2); border:1px solid var(--linie); border-radius:2px;
  padding:.4rem .7rem; font-size:.8rem; color:var(--gedaempft);
}
.naheDranItem b { color:var(--ton-hell); }
tr.naeheAktiv td { background:rgba(201,162,39,.14); }

/* --------------------------------------------------------------- Fuß */
footer {
  border-top: 1px solid var(--linie);
  padding: 2rem 1.5rem 3rem; text-align: center;
}
footer p { color: var(--gedaempft); font-size: .78rem; letter-spacing: .06em; margin: 0; }

/* Auf dem Handy weichen in der Örter-Tafel die beiden Herleitungsspalten —
   Länge und Sektor —, damit der Buchstabe im Bild bleibt. */
@media (max-width: 34rem) {
  .oerterTablo th:nth-child(2), .oerterTablo td:nth-child(2),
  .oerterTablo th:nth-child(4), .oerterTablo td:nth-child(4) { display:none; }
}

/* ---------------------------------- Monatsstreifen (Profektionen u. a.) */
.harfStreifenTitel { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gedaempft); margin:1.8rem 0 .5rem; text-align:center; }
.harfStreifen { display:flex; gap:.4rem; overflow-x:auto; padding:.3rem .2rem .8rem; }
.harfZelle {
  flex:0 0 auto; width:2.6rem; height:2.6rem; border:1px solid var(--linie); border-radius:2px;
  background:var(--kagit2); color:var(--gedaempft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.65rem;
}
.harfZelle .g { font-size:1.1rem; color:var(--schrift); }
.harfZelle.treffer { background:var(--ton); border-color:var(--ton); color:var(--grund); }
.harfZelle.treffer .g { color:var(--grund); }

/* ----------------------------------------------------------- Die Essenz */
.essenzKopf {
  margin:2rem 0 .5rem; text-align:center; padding:1.6rem 1.2rem;
  background:linear-gradient(180deg, var(--kagit2), var(--kagit));
  border:1px solid var(--ton); border-radius:2px;
}
.essenzKopf .buyukToplam { font-size:clamp(1.9rem,7vw,2.8rem); line-height:1.2; }
.essenzKopf .kucukNot { border:none; padding:0; margin:.7rem 0 0; text-align:center; }
#eCikti p { font-size:1.05rem; }

/* Auf dem Handy nehmen Kopf und Reiterleiste sonst zwei Drittel des ersten
   Schirms ein, ehe der erste Inhalt kommt. Also enger setzen. */
@media (max-width: 34rem) {
  #kopf { padding: 2.2rem 1rem 1.2rem; }
  .arapUst { font-size: 1.4rem; }
  .unterzeile { font-size: .68rem; letter-spacing: .16em; }
  #reiter { gap: .25rem; padding: .8rem .6rem 0; }
  #reiter button { font-size: .8rem; padding: .34rem .6rem; }
  main { padding-top: 1.4rem; }
}

/* Kopfzeile einer einzelnen Anwendung innerhalb von Oracle. */
.appKopf { text-align:center; border-bottom:1px solid var(--linie); padding-bottom:1.2rem; margin-bottom:2rem; }
.appKopf h2 { margin:.1rem 0 0; font-size:clamp(1.8rem,6vw,2.6rem); letter-spacing:.06em; }
.appKopf .arapUst { font-size:1.5rem; }
.appKopf .unterzeile { margin-top:.5rem; }

/* ------------------------------------------------------ Deutungskästen */
.deutungKasten {
  margin-top:2rem; padding:1.4rem 1.3rem;
  background:var(--kagit); border:1px solid var(--linie);
  border-left:2px solid var(--ton); border-radius:2px;
}
.deutungKasten h3:first-child { margin-top:0; }
.deutungKasten p { margin-bottom:.9rem; }
.deutungListe { margin:0 0 1rem; padding-left:1.1rem; }
.deutungListe li { margin-bottom:.6rem; }
.deutungKasten .kucukNot { margin-bottom:0; }

/* ----------------------------------------------------- Jahresüberblick */
.jahrKasten {
  margin-top:1.4rem; padding:1.3rem;
  background:linear-gradient(180deg, rgba(201,162,39,.07), transparent);
  border:1px solid var(--linie); border-left:2px solid var(--ton-hell); border-radius:2px;
}
.jahrKasten h3:first-child { margin-top:0; color:var(--ton-hell); }
.jahrKasten p { margin-bottom:.8rem; }
.jahrKasten .kucukNot { margin-bottom:0; }
.jahrPunkte { display:block; margin-top:.35rem; color:var(--gedaempft); font-size:.92rem; }

/* Der Hinweis auf der Hauptseite, solange nichts eingetragen ist. */
.torHinweis {
  margin-top:2rem; padding:1.2rem 1.3rem;
  border:1px dashed var(--linie); border-radius:2px;
  background:rgba(201,162,39,.05);
}
.torHinweis p { margin:0; color:var(--gedaempft); }
h4 {
  font-weight:400; font-size:.92rem; color:var(--gedaempft);
  letter-spacing:.1em; text-transform:uppercase; margin:1.4rem 0 .4rem;
}

/* ------------------------------------------------------- Das Horoskop */
.planetBlock {
  border-left:1px solid var(--linie); padding:.2rem 0 .2rem 1rem; margin-bottom:1.1rem;
}
.planetKopf { color:var(--schrift); margin-bottom:.25rem; }
.planetKopf .glyph { color:var(--ton); font-size:1.15rem; margin-right:.2rem; }
.planetBlock p { margin:0; color:var(--gedaempft); }
#hkZeit { margin-top:2.5rem; }

/* ------------------------------------------------------------ Elektion */
.deutungListe li.dafuer  { color:var(--schrift); }
.deutungListe li.dafuer::marker  { color:var(--ton); }
.deutungListe li.dagegen { color:var(--gedaempft); }
.deutungListe li.dagegen::marker { color:var(--rot); }
#ekCikti .geistName .buyukToplam { font-size:clamp(1.8rem,7vw,2.6rem); }

/* --------------------------------------------------------- ʿIlm al-Raml */
.ramlFigur { color:var(--ton-hell); display:block; margin:0 auto; }
.ramlKachel {
  background:var(--kagit2); border:1px solid var(--linie); border-radius:2px;
  padding:.6rem .4rem; text-align:center;
}
.ramlKachel.gross { padding:1rem .6rem; }
.ramlRolle { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gedaempft); margin-bottom:.4rem; }
.ramlName { font-size:.82rem; color:var(--schrift); margin-top:.35rem; }
.ramlAr { font-size:.85rem; color:var(--ton); direction:rtl; }
.ramlSchild { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:1rem; }
.ramlReihe { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1rem; }
.ramlRichter { margin:.6rem 0 .2rem; color:var(--ton-hell); }
.ramlRichter .ramlFigur { width:64px; }
.ramlUrteil { font-size:1.15rem; color:var(--ton-hell); margin-top:1.4rem; }
.ramlTafel td:last-child { min-width:16rem; }
.ramlTafel .ramlFigur { width:30px; }
@media (max-width: 34rem) {
  .ramlSchild { grid-template-columns:repeat(2,1fr); }
}

/* Der Gedanke auf der Startseite. */
.gedanke {
  margin: 0 0 2.5rem; padding: 1.5rem 1.4rem;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.gedanke p { margin: 0 0 1rem; }
.gedanke p:last-child { margin-bottom: 0; color: var(--gedaempft); }

/* Fehlt etwas, dann deutlich — nicht als graue Randnotiz. */
.mangelKasten {
  margin-top:1.6rem; padding:1.4rem 1.3rem; text-align:center;
  background:var(--kagit2); border:1px solid var(--rot); border-radius:2px;
}
.mangelKasten p { margin:.6rem 0; }
.mangelKasten .kucukNot { border:none; padding:0; text-align:center; }
.koordWarnung {
  margin:.7rem 0 0; padding:.7rem .9rem; font-size:.85rem; color:var(--schrift);
  background:rgba(156,74,60,.14); border-left:2px solid var(--rot); border-radius:2px;
}
tr.gipfel td { background:rgba(201,162,39,.10); }

/* Die Essenz auf der Hauptseite. */
#eStart { margin-top: 3.5rem; border-top: 1px solid var(--linie); padding-top: 2.5rem; }
.startEssenzKopf { border-bottom: none; margin-bottom: 1rem; padding-bottom: 0; }

/* ------------------------------------------------- Der Sand, inszeniert */
.ramlBuehne {
  position: relative; margin-top: 1.6rem; border: 1px solid var(--linie);
  border-radius: 2px; overflow: hidden;
  background: #0a0b12 url("bilder/ramel.jpg?v=1") center / cover no-repeat;
  min-height: 15rem;
}
.ramlBuehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,8,16,.15) 0%, rgba(7,8,16,.55) 55%, rgba(7,8,16,.8) 100%);
}
.ramlSand { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.sandFlaeche {
  fill: rgba(236,225,196,.10);
  stroke: rgba(236,225,196,.16);
  stroke-width: .6;
}
.sandPunkt {
  fill: #f0e4c8; opacity: 0;
  animation: sandTreffer .5s ease-out forwards;
}
@keyframes sandTreffer {
  0%   { opacity: 0; transform: translateY(-3px) scale(.4); }
  35%  { opacity: 1; transform: translateY(0) scale(1.5); }
  100% { opacity: .92; transform: translateY(0) scale(1); }
}
.ramlWerden {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; gap: .4rem; justify-content: center; padding: .5rem;
  min-height: 1px;
}
.ramlWerden .ramlKachel { background: rgba(10,11,18,.82); backdrop-filter: blur(2px); }
.kommtHervor { animation: hervor .55s ease-out both; }
.ramlWerden .ramlKachel { padding:.4rem .35rem; }
@keyframes hervor {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.ramlUeberspringen {
  position: absolute; z-index: 3; right: .7rem; top: .7rem;
  background: rgba(10,11,18,.8);
}
.ramlBuehne.still .ramlWerden { position: static; flex-direction: row; flex-wrap: wrap;
  justify-content: center; padding: .8rem; }
.ramlBuehne.still .ramlSand { display: none; }
.ramlBuehne.still { min-height: 0; }
@media (max-width: 34rem) {
  .ramlWerden { position: static; flex-direction: row; justify-content: center;
    flex-wrap: wrap; padding: .6rem; }
  .ramlBuehne { min-height: 11rem; }
}

/* ------------------------------------------------------ Spendenknopf */
.spende { margin-bottom: 2rem; }
.spende .kalanBaslik { margin-bottom: .8rem; }
.spendeReihe { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
/* Zwingt den Umbruch vor dem freien Betrag, ohne ihn über die ganze
   Zeilenbreite anklickbar zu machen. */
.spendeReihe::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
.spendeKnopf {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--ton); border-radius: 2px;
  color: var(--ton-hell); font-size: 1rem; letter-spacing: .06em;
  padding: .5rem 1.4rem; transition: background .18s, color .18s;
}
.spendeKnopf:hover { background: var(--ton); color: var(--grund); }
/* Der freie Betrag ist die Nebentür — er bekommt eine eigene Zeile und
   nicht dasselbe Gewicht wie die beiden Summen. */
.spendeKnopf.frei {
  order: 3; margin: .2rem 0 0;
  border: none; padding: .2rem .4rem;
  color: var(--gedaempft); font-size: .85rem;
  text-decoration: underline; text-decoration-color: var(--linie);
  text-underline-offset: .3em;
}
.spendeKnopf.frei:hover {
  background: none; color: var(--ton-hell); text-decoration-color: var(--ton);
}
.spendeReihe .spendeKnopf:not(.frei) { min-width: 6rem; text-align: center; }
.spende .kucukNot {
  border: none; padding: 0; margin: 1rem auto 0; max-width: 30rem; text-align: center;
}

/* Auf dem Handy weicht in den Periodentafeln die Datumsspalte — das Alter
   steht daneben, und abgeschnitten nützt das Datum niemandem. */
@media (max-width: 34rem) {
  .periodenTablo th:nth-child(5), .periodenTablo td:nth-child(5) { display: none; }
}

/* Der Schlussabschnitt der Essenz. */
.schlussKasten {
  margin-top: 2.5rem; padding: 1.8rem 1.5rem;
  background: linear-gradient(180deg, rgba(201,162,39,.06), transparent);
  border: 1px solid var(--linie); border-top: 2px solid var(--ton); border-radius: 2px;
}
.schlussKasten h3:first-child { margin-top: 0; }
.schlussKasten p { font-size: 1.05rem; }
.schlussWort {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  color: var(--gedaempft); font-size: .95rem !important; font-style: italic;
}

/* --------------------------------------------------- Speicher-Hinweis */
.gespeichert {
  margin-top: 1.2rem; padding: .9rem 1.1rem;
  background: rgba(201,162,39,.06);
  border: 1px solid var(--linie); border-left: 2px solid var(--ton); border-radius: 2px;
}
.gespeichertZeile { color: var(--schrift); font-size: .95rem; }
.gespeichertZeile .haken { color: var(--ton); margin-right: .3rem; }
.gespeichert .kucukNot { border: none; padding: 0; margin: .5rem 0 0; }
.sicherung { margin-top: 1.1rem; }

/* ------------------------------------------------------- Das Leuchten */
.lhBuehne {
  position: relative; margin: 1.5rem auto 0; max-width: 20rem;
  border: 1px solid var(--linie); border-radius: 2px; overflow: hidden;
  background: #05060b;
}
.lhFigur { display: block; width: 100%; height: auto; }
.lhAura {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen;
  transition: background .5s ease;
  animation: auraPuls var(--puls, 2.4s) ease-in-out infinite;
}
@keyframes auraPuls { 0%,100% { opacity:.85; } 50% { opacity:1; } }

.lhKern {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen; transition: background .5s ease;
}
.lhUnterton {
  display: block; font-size: .9rem; color: var(--gedaempft); margin-top: .15rem;
}
.lhChipUnter {
  display: block; font-size: .78rem; color: var(--gedaempft); margin-top: .3rem;
  padding-top: .3rem; border-top: 1px dotted var(--linie);
}
.lhAblesung { text-align: center; margin-top: 1rem; line-height: 1.5; }
.lhAlter { color: var(--schrift); font-size: 1.15rem; }
.lhHerr { font-size: 1.15rem; margin-left: .4rem; }
.lhEinig {
  display: block; color: var(--gedaempft); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; margin-top: .2rem;
}

.lhLeiste { display: flex; gap: .7rem; align-items: center; margin-top: 1.2rem; }
.lhLeiste input[type=range] { flex: 1; accent-color: var(--ton); }
.lhMarken {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--gedaempft); padding: 0 .2rem; margin-top: .2rem;
}

.lhStimmen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .5rem; margin-top: 1.4rem;
}
.lhChip {
  background: var(--kagit2); border: 1px solid var(--linie);
  border-left-width: 2px; border-radius: 2px; padding: .55rem .7rem;
}
.lhChipStern { font-size: 1.1rem; margin-right: .3rem; }
.lhChipQuelle { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft); }
.lhChipSagt { display: block; font-size: .85rem; color: var(--schrift); margin-top: .25rem; }

/* --------------------------------------------------- Die Jahresumdrehung */
.srSchritt { display: flex; gap: .9rem; margin-top: 1.8rem; }
.srNr {
  flex: 0 0 1.9rem; height: 1.9rem; line-height: 1.75rem; text-align: center;
  border: 1px solid var(--ton); border-radius: 50%;
  color: var(--ton-hell); font-size: .9rem;
}
.srInhalt { flex: 1; min-width: 0; }
.srInhalt h3 { margin-top: 0; }
.srInhalt p { margin-bottom: .6rem; }
.srInhalt p:last-child { margin-bottom: 0; }
.srJa { color: var(--ton-hell); }
.srNein { color: var(--gedaempft); }

/* ------------------------------------------------------- Das Lebensmaß */
.lmWarnung {
  margin: 1.6rem 0; padding: 1.2rem 1.3rem;
  background: rgba(156,74,60,.10);
  border: 1px solid var(--rot); border-radius: 2px;
  font-size: .95rem; line-height: 1.6;
}
/* Auf dem Handy weicht in der Hylech-Tafel die Gradspalte — die
   Entscheidung hängt am Haus, nicht am Grad, und die Ja/Nein-Spalte
   gehört ins Bild. */
@media (max-width: 34rem) {
  .hylechTablo th:nth-child(2), .hylechTablo td:nth-child(2) { display: none; }
}

/* ------------------------------------------------------------- Die Wahl */
.wahl { margin-top: 3rem; border-top: 1px solid var(--linie); padding-top: 2.2rem; }
.wahl > h3 { margin-top: 0; text-align: center; }
.wahlKarten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.2rem; }
.wahlKarte {
  position: relative; display: block; text-align: left; cursor: pointer;
  min-height: 11rem; padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid var(--linie); border-radius: 2px;
  background-size: cover; background-position: center;
  color: var(--schrift); font: inherit;
  transition: border-color .2s, transform .2s;
  overflow: hidden;
}
.wahlKarte::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,16,.45) 0%, rgba(7,8,16,.82) 65%, rgba(7,8,16,.94) 100%);
}
.wahlKarte > * { position: relative; }
.wahlKarte:hover { border-color: var(--ton); transform: translateY(-2px); }
.wahlKarte.gewaehlt { border-color: var(--ton); box-shadow: inset 0 0 0 1px var(--ton); }
.wahlName {
  display: block; font-size: 1.4rem; color: var(--ton-hell);
  letter-spacing: .05em; margin-top: 4.5rem;
}
.wahlText { display: block; font-size: .85rem; color: var(--gedaempft); margin-top: .5rem; line-height: 1.5; }
@media (max-width: 34rem) {
  .wahlKarten { grid-template-columns: 1fr; }
  .wahlName { margin-top: 5rem; }
}
.transitStark {
  margin-top: 1rem; padding: .9rem 1.1rem;
  background: rgba(201,162,39,.09);
  border-left: 2px solid var(--ton); border-radius: 2px;
}

/* ------------------------------------------------- die zwölf Felder */
.themaUeberschrift { margin-top: 2rem; }

.themaWahl {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.2rem 0 1.5rem;
}
.themaKnopf {
  flex: 1 1 auto; min-width: 9.5rem;
  padding: .55rem .8rem;
  font-family: inherit; font-size: .88rem;
  color: var(--schrift); background: rgba(255,255,255,.04);
  border: 1px solid rgba(212,175,110,.25); border-radius: .4rem;
  cursor: pointer; text-align: left; line-height: 1.3;
  transition: background .15s, border-color .15s;
}
.themaKnopf:hover { background: rgba(212,175,110,.1); border-color: rgba(212,175,110,.5); }
.themaKnopf.aktiv {
  background: rgba(212,175,110,.16); border-color: var(--ton); color: var(--ton);
}

.themaFrage {
  font-style: italic; color: var(--ton);
  margin: .2rem 0 1.1rem; font-size: 1.02rem;
}

.themaUrteil {
  border-left: 3px solid var(--ton);
  padding: .8rem 1rem; margin: 1rem 0 1.4rem;
  background: rgba(255,255,255,.03); border-radius: 0 .4rem .4rem 0;
}
.themaUrteilWort { font-size: 1.25rem; color: var(--ton); letter-spacing: .02em; }
.themaUrteil.u-stark    { border-left-color: #8fbf7a; }
.themaUrteil.u-stark .themaUrteilWort    { color: #a8d694; }
.themaUrteil.u-gut      { border-left-color: #a9c48e; }
.themaUrteil.u-gemischt { border-left-color: var(--ton); }
.themaUrteil.u-muehsam  { border-left-color: #c4915e; }
.themaUrteil.u-muehsam .themaUrteilWort  { color: #d7a873; }
.themaUrteil.u-schwer   { border-left-color: #bf7a7a; }
.themaUrteil.u-schwer .themaUrteilWort   { color: #d69494; }

.zeugenListe { list-style: none; padding: 0; margin: .6rem 0 1.2rem; }
.zeugenListe li {
  padding: .6rem .8rem .6rem 1rem; margin-bottom: .45rem;
  border-left: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025); border-radius: 0 .3rem .3rem 0;
  line-height: 1.55;
}
.zeugenListe li.z-gut      { border-left-color: #8fbf7a; }
.zeugenListe li.z-schlecht { border-left-color: #bf7a7a; }
.zGewicht {
  display: inline-block; margin-left: .4rem;
  font-size: .8rem; opacity: .55; white-space: nowrap;
}

.sonderKasten {
  margin: 1.6rem 0 1rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(212,175,110,.3); border-radius: .5rem;
  background: rgba(212,175,110,.045);
}
.sonderKasten h4 { margin-top: 0; }

@media (max-width: 480px) {
  .themaKnopf { min-width: 100%; }
  .themaWahl { gap: .4rem; }
}

.sonderKasten .buyukToplam { font-size: 1.9rem; line-height: 1.15; }
@media (max-width: 480px) { .sonderKasten .buyukToplam { font-size: 1.55rem; } }

/* ------------------------------------------------- der Crosscheck */
.ccKasten {
  margin: 1.6rem 0 .5rem; padding: 1.1rem 1.2rem;
  border: 1px solid rgba(212,175,110,.28); border-radius: .5rem;
  background: rgba(255,255,255,.028);
}
.ccKasten h4 { margin: 1.3rem 0 .4rem; font-size: 1rem; }
.ccKasten h4:first-of-type { margin-top: .8rem; }

.ccKopf { border-left: 3px solid var(--ton); padding: .2rem 0 .2rem .9rem; }
.ccWort { font-size: 1.18rem; color: var(--ton); letter-spacing: .02em; margin-bottom: .35rem; }
.ccSatz { line-height: 1.55; }
.ccKopf.cc-ja   { border-left-color: #8fbf7a; }
.ccKopf.cc-ja   .ccWort { color: #a8d694; }
.ccKopf.cc-nein { border-left-color: #bf7a7a; }
.ccKopf.cc-nein .ccWort { color: #d69494; }

/* ------------------------------------- „Was ist Oracle?" zum Aufklappen */
.wasIst {
  margin: 1.6rem 0 1.8rem;
  border: 1px solid rgba(212,175,110,.22); border-radius: .45rem;
  background: rgba(255,255,255,.022);
}
.wasIst > summary {
  padding: .7rem 1rem; cursor: pointer; list-style: none;
  color: var(--ton); font-size: .95rem; letter-spacing: .04em;
  user-select: none;
}
.wasIst > summary::-webkit-details-marker { display: none; }
.wasIst > summary::after {
  content: "+"; float: right; opacity: .6; font-size: 1.1rem; line-height: 1;
}
.wasIst[open] > summary::after { content: "–"; }
.wasIst > summary:hover { background: rgba(212,175,110,.07); }
.wasIst .gedanke {
  padding: 0 1rem 1rem; margin: 0;
  border: 0; background: none;
}

/* ------------------------------------------- die sieben Wandelsterne */
.sternKarten { display: flex; flex-direction: column; gap: 2rem; margin: 1.8rem 0 1.4rem; }

.sternKarte {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "bild name" "bild text";
  gap: .4rem 1.5rem; align-items: start;
  padding: 1.2rem; border-radius: .5rem;
  border: 1px solid rgba(212,175,110,.2);
  background: rgba(255,255,255,.022);
}
.sternBild { grid-area: bild; }
.sternName { grid-area: name; }
.sternText { grid-area: text; }
.sternBild {
  width: 100%; height: auto; display: block;
  border-radius: .35rem; box-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.sternText > p { line-height: 1.6; }
.sternText > p:last-child { margin-bottom: 0; }

.sternName { margin: 0 0 .7rem; font-size: 1.3rem; }
.sternGlyph { color: var(--ton); margin-right: .25rem; }
.sternTr { font-size: .8rem; opacity: .5; letter-spacing: .08em; margin-left: .4rem; }

.sternDaten {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin: 0 0 1rem; padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .87rem;
}
.sternDatum { white-space: nowrap; }
.sternSchild { color: var(--ton); opacity: .75; margin-right: .35rem; }

.sternGestalt {
  font-style: italic;
  border-left: 2px solid rgba(212,175,110,.35);
  padding-left: .9rem;
}
.sternGestalt b { font-style: normal; }
.sternGedanke { color: rgba(255,255,255,.72); }

@media (max-width: 680px) {
  /* Am Handy zuerst der Name, dann das Bild, dann der Text — sonst
     scrollt man in ein Bild hinein, ohne zu wissen, wen man sieht. */
  .sternKarte {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "name" "bild" "text";
    gap: .8rem; padding: 1rem;
  }
  .sternName { margin-bottom: 0; }
  .sternBild { max-width: 300px; margin: 0 auto; }
  .sternDaten { font-size: .83rem; gap: .25rem .7rem; }
}

/* ------------------------------------- Startseite: Kopf, Fuß, Rückweg */
#heimKnopf {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: inherit;
  font: inherit; text-align: center;
}
#heimKnopf h1, #heimKnopf .unterzeile { margin: 0; }
#heimKnopf h1 { transition: opacity .15s; }
#heimKnopf:hover h1 { opacity: .82; }

#heimFuss {
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: .7rem;
}

.wasIstKnopf {
  display: block; width: 100%; text-align: left;
  padding: .7rem 1rem; cursor: pointer;
  font-family: inherit; font-size: .95rem; letter-spacing: .04em;
  color: var(--ton);
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(212,175,110,.22); border-radius: .45rem;
  transition: background .15s;
}
.wasIstKnopf::after { content: "→"; float: right; opacity: .6; }
.wasIstKnopf:hover { background: rgba(212,175,110,.07); }

.zurueckKnopf {
  display: inline-block; margin: 0 0 1.2rem;
  padding: .4rem .9rem; cursor: pointer;
  font-family: inherit; font-size: .85rem; letter-spacing: .04em;
  color: var(--ton); background: none;
  border: 1px solid rgba(212,175,110,.25); border-radius: .35rem;
  transition: background .15s;
}
.zurueckKnopf:hover { background: rgba(212,175,110,.08); }

/* ------------------------------------------- die Maske zum Aufklappen */
.maskeRahmen {
  margin: 1.6rem 0 0;
  border: 1px solid rgba(212,175,110,.22); border-radius: .45rem;
  background: rgba(255,255,255,.022);
}
.maskeRahmen > summary {
  padding: .7rem 1rem; cursor: pointer; list-style: none;
  color: var(--ton); font-size: .95rem; letter-spacing: .04em;
  user-select: none;
}
.maskeRahmen > summary::-webkit-details-marker { display: none; }
.maskeRahmen > summary::after {
  content: "+"; float: right; opacity: .6; font-size: 1.1rem; line-height: 1;
}
.maskeRahmen[open] > summary::after { content: "–"; }
.maskeRahmen > summary:hover { background: rgba(212,175,110,.07); }
.maskeRahmen > *:not(summary) { margin-left: 1rem; margin-right: 1rem; }
.maskeRahmen > *:last-child { margin-bottom: 1rem; }

/* ------------------------------------- die Techniken des gewählten Weges */
.wegListe { margin: 2rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.wegListe h3 { margin: 0 0 .4rem; }

.wegFeld {
  display: block; width: 100%; text-align: left;
  padding: .95rem 1.1rem; cursor: pointer; font-family: inherit;
  color: var(--schrift);
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(212,175,110,.22); border-radius: .45rem;
  transition: background .15s, border-color .15s;
}
.wegFeld:hover { background: rgba(212,175,110,.09); border-color: rgba(212,175,110,.5); }
.wegName {
  display: block; color: var(--ton);
  font-size: 1.08rem; letter-spacing: .02em; margin-bottom: .3rem;
}
.wegWorum { display: block; font-size: .9rem; line-height: 1.5; opacity: .78; }

@media (max-width: 480px) {
  .wegFeld { padding: .85rem .9rem; }
  .wegName { font-size: 1.02rem; }
  .wegWorum { font-size: .86rem; }
}

/* ---------------------------------- das Leuchten unten auf der Startseite */
#leuchtenHeim {
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
#leuchtenHeim .appKopf { margin-bottom: 1rem; }

/* ======================================================================
   Die Essenz — die Deutung als Lesestück, nicht als Formularausgabe.
   ====================================================================== */

#eCikti, #eStartCikti { max-width: 38rem; margin-inline: auto; }

/* Die Eröffnung: ein Anfang statt eines Beginns. */
.essenzAuftakt {
  text-align: center;
  margin: .5rem 0 2.2rem;
  padding-bottom: 1.6rem;
  position: relative;
}
.auftaktDaten {
  margin: 1.1rem 0 0; font-size: .82rem; letter-spacing: .05em;
  opacity: .55; border: 0; padding: 0;
}
.essenzAuftakt::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 5rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,110,.6), transparent);
}
#eCikti .auftaktZeile, #eStartCikti .auftaktZeile, .auftaktZeile {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color: var(--ton); line-height: 1.25;
  margin: 0 0 .9rem; letter-spacing: .01em;
}
#eCikti .auftaktText, #eStartCikti .auftaktText, .auftaktText {
  font-style: italic; font-size: .97rem;
  line-height: 1.7; opacity: .8; margin: 0;
}

/* Die Kapitelüberschriften bekommen Luft und eine feine Marke. */
#eCikti > h3, #eStartCikti > h3, .jahrFach > h3 {
  margin: 2.5rem 0 .8rem;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ton); opacity: .85; font-weight: normal;
  position: relative; padding-top: .9rem;
}
#eCikti > h3::before, #eStartCikti > h3::before, .jahrFach > h3::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 1.6rem; height: 1px; background: rgba(212,175,110,.5);
}

#eCikti p, #eStartCikti p { line-height: 1.78; }

/* Eine Initiale im ersten Absatz — einmal, nicht überall. */
.erstesWort::first-letter {
  float: left; font-size: 3.1rem; line-height: .86;
  padding: .12em .14em 0 0; color: var(--ton);
  font-family: Georgia, "Times New Roman", serif;
}

/* Der Rat ist der persönlichste Satz der Seite und steht dafür allein. */
.ratBand {
  margin: 2.6rem 0; padding: 1.5rem 1.4rem;
  text-align: center;
  border-top: 1px solid rgba(212,175,110,.3);
  border-bottom: 1px solid rgba(212,175,110,.3);
  background: linear-gradient(180deg, rgba(212,175,110,.05), transparent 60%);
}
.ratSchild {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ton); opacity: .7; margin-bottom: .7rem;
}
#eCikti .ratWort, #eStartCikti .ratWort, .ratWort {
  font-size: 1.16rem; line-height: 1.65;
  font-style: italic; margin: 0;
}

/* Die Zusammenschau als Höhepunkt, nicht als weiterer Kasten. Nur hier:
   schlussKasten und schlussWort gibt es auch in der Jahresumdrehung und
   im Lebensmaß, und dort sollen sie bleiben, wie sie sind. */
#eCikti .schlussKasten, #eStartCikti .schlussKasten { margin-top: 2.8rem; }
#eCikti .schlussKasten > h3:first-child,
#eStartCikti .schlussKasten > h3:first-child {
  text-align: center; font-size: .86rem; letter-spacing: .18em;
  padding-top: 0;
}
#eCikti .schlussKasten > h3:first-child::before,
#eStartCikti .schlussKasten > h3:first-child::before { display: none; }
#eCikti .schlussWort, #eStartCikti .schlussWort {
  font-style: italic; opacity: .82;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.2rem; margin-top: 1.6rem;
}
.schlussZier {
  text-align: center; color: var(--ton); opacity: .45;
  font-size: 1.2rem; letter-spacing: .4em; margin-top: 1.4rem;
}

@media (max-width: 480px) {
  .erstesWort::first-letter { font-size: 2.7rem; }
  .ratBand { padding: 1.2rem 1rem; margin: 2.2rem 0; }
  #eCikti .ratWort, #eStartCikti .ratWort, .ratWort { font-size: 1.08rem; }
  #eCikti > h3, #eStartCikti > h3, .jahrFach > h3 { margin-top: 2.1rem; }
}

/* ------------------------------------------- Die Verteilung durch die Grenzen */
.vtKopf {
  border-left: 3px solid var(--ton); padding: .7rem 0 .7rem 1rem;
  margin: 1.2rem 0 1.6rem; line-height: 1.6;
}
.vtJetzt {
  text-align: center; padding: 1.3rem 1.1rem; margin: 1.4rem 0;
  border: 1px solid rgba(212,175,110,.3); border-radius: .5rem;
  background: rgba(212,175,110,.05);
}
.vtJetzt p { text-align: left; margin-top: 1rem; line-height: 1.7; }

.vtLeiste {
  display: flex; height: 2.4rem; margin: 1rem 0 1.6rem;
  border-radius: .3rem; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.vtBalken {
  min-width: 3px; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: rgba(0,0,0,.65);
  border-right: 1px solid rgba(0,0,0,.25);
}
.vtBalken.vtHier { outline: 2px solid #fff; outline-offset: -2px; z-index: 1; }

.vtTafel { width: 100%; border-collapse: collapse; font-size: .88rem; margin: .5rem 0 1rem; }
.vtTafel th {
  text-align: left; padding: .5rem .4rem; color: var(--ton);
  font-weight: normal; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(212,175,110,.3);
}
.vtTafel td { padding: .45rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.vtZeileHier { background: rgba(212,175,110,.1); }
.vtArt { opacity: .55; font-size: .8em; }

@media (max-width: 560px) {
  .vtTafel { font-size: .8rem; }
  .vtTafel th:nth-child(2), .vtTafel td:nth-child(2) { display: none; }
  .vtTafel th, .vtTafel td { padding: .4rem .25rem; }
}

/* ------------------------------------------------- Der Herr der Geburt */
.afKasten {
  text-align: center; padding: 1.4rem 1.2rem; margin: 1.4rem 0 1.8rem;
  border: 1px solid rgba(212,175,110,.3); border-radius: .5rem;
  background: rgba(212,175,110,.05);
}
.afKasten p { text-align: left; line-height: 1.7; margin-top: 1rem; }

.afTafel { width: 100%; border-collapse: collapse; font-size: .87rem; margin: .6rem 0 1.2rem; }
.afTafel th {
  text-align: left; padding: .5rem .4rem; color: var(--ton); font-weight: normal;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(212,175,110,.3);
}
.afTafel td { padding: .5rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
.afP { opacity: .5; font-size: .85em; }

.afListe { margin: .8rem 0 1.2rem; }
.afZeile { display: flex; align-items: center; gap: .7rem; margin-bottom: .45rem; }
.afName { flex: 0 0 7.5rem; font-size: .92rem; }
.afBalken { flex: 1; height: .95rem; background: rgba(255,255,255,.06); border-radius: .2rem; overflow: hidden; }
.afFuellung { height: 100%; background: rgba(212,175,110,.45); }
.afZahl { flex: 0 0 2.2rem; text-align: right; font-size: .85rem; opacity: .7; }
.afErster .afFuellung { background: var(--ton); }
.afErster .afName, .afErster .afZahl { color: var(--ton); opacity: 1; }

@media (max-width: 520px) {
  .afName { flex-basis: 5.8rem; font-size: .85rem; }
  .afTafel { font-size: .8rem; }
}

/* ------------------------------------------------- Die zwei Brillen */
.brilleWahl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0; }
.brilleKarte {
  position: relative; display: block; text-align: left; cursor: pointer;
  min-height: 11rem; padding: 7rem 1rem 1rem;
  border: 1px solid rgba(212,175,110,.25); border-radius: .5rem;
  background-size: cover; background-position: center; font-family: inherit;
  color: var(--schrift); overflow: hidden; transition: border-color .15s;
}
.brilleKarte::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,24,.25) 0%, rgba(10,12,24,.88) 55%, rgba(10,12,24,.96) 100%);
}
.brilleKarte > * { position: relative; }
.brilleKarte:hover { border-color: rgba(212,175,110,.6); }
.brilleKarte.gewaehlt { border-color: var(--ton); box-shadow: 0 0 0 1px var(--ton) inset; }
.brilleName {
  display: block; color: var(--ton); font-size: 1.12rem; margin-bottom: .4rem;
  letter-spacing: .01em;
}
.brilleText { display: block; font-size: .86rem; line-height: 1.5; opacity: .82; }

/* Die Deutung selbst */
.rdTeil { margin: 2.2rem 0; }
.rdTeil h3 { margin: 0 0 .7rem; }
.rdTeil p { line-height: 1.75; }
.rdNummer {
  float: left; margin: .1rem .8rem 0 0; color: var(--ton); opacity: .45;
  font-size: .95rem; letter-spacing: .08em;
}
.rdTempKasten {
  text-align: center; padding: 1.2rem; margin: 1rem 0 1.4rem;
  border: 1px solid rgba(212,175,110,.28); border-radius: .5rem;
  background: rgba(212,175,110,.045);
}
.rdTempName { font-size: 1.7rem; color: var(--ton); margin-bottom: .3rem; }
.rdWaage { margin-top: 1.1rem; }
.rdWaageZeile { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.rdPol { font-size: .76rem; opacity: .6; flex: 0 0 3.6rem; }
.rdPol:first-child { text-align: right; }
.rdWaageBalken {
  flex: 1; height: .5rem; position: relative;
  background: rgba(255,255,255,.07); border-radius: .25rem;
}
.rdWaageBalken::after {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: rgba(255,255,255,.2);
}
.rdWaagePunkt {
  position: absolute; top: 50%; width: .8rem; height: .8rem;
  margin: -.4rem 0 0 -.4rem; border-radius: 50%; background: var(--ton);
}
.rdQual { color: var(--ton); opacity: .8; font-size: .9em; }
.rdTafel { width: 100%; border-collapse: collapse; font-size: .86rem; margin: .6rem 0 1rem; }
.rdTafel th {
  text-align: left; padding: .5rem .35rem; color: var(--ton); font-weight: normal;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(212,175,110,.3);
}
.rdTafel td { padding: .45rem .35rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.rdStark td { color: #a8d694; }
.rdSchwach td { opacity: .6; }

@media (max-width: 680px) {
  .brilleWahl { grid-template-columns: 1fr; }
  .brilleKarte { min-height: 9.5rem; padding-top: 5.5rem; }
  .rdTafel { font-size: .78rem; }
  .rdTafel th:nth-child(4), .rdTafel td:nth-child(4) { display: none; }
}

@media (max-width: 680px) {
  /* Fünf Spalten passen am Telefon nicht nebeneinander, und gequetscht
     liest sich eine Tabelle schlechter als gar keine. Also wird aus
     jeder Zeile eine kleine Karte: Planet oben, der Rest darunter. */
  .rdTafel, .rdTafel tbody, .rdTafel tr, .rdTafel td { display: block; width: auto; }
  .rdTafel thead { display: none; }
  .rdTafel tr {
    padding: .6rem .75rem; margin-bottom: .5rem;
    border: 1px solid rgba(255,255,255,.09); border-radius: .35rem;
    background: rgba(255,255,255,.02);
  }
  .rdTafel td { border: 0; padding: .1rem 0; }
  .rdTafel td:first-child { font-size: 1.02rem; color: var(--ton); margin-bottom: .2rem; }
  .rdTafel td:nth-child(2)::before { content: "in "; opacity: .5; }
  .rdTafel td:nth-child(3)::before { content: "im "; opacity: .5; }
  .rdTafel td:nth-child(3)::after  { content: " Feld"; opacity: .5; }
  .rdTafel td:nth-child(4), .rdTafel td:nth-child(5) { display: inline-block; margin-right: .6rem; opacity: .75; font-size: .92em; }
  .rdTafel tr.rdStark { border-color: rgba(143,191,122,.45); }
  .rdTafel tr.rdSchwach { opacity: .62; }
}

/* ------------------------------------------------ Werk, Lebensalter, Punkte */
.wkKasten {
  text-align: center; padding: 1.4rem 1.2rem; margin: 1.3rem 0 1.6rem;
  border: 1px solid rgba(212,175,110,.3); border-radius: .5rem;
  background: rgba(212,175,110,.05);
}
.wkKasten p { text-align: left; line-height: 1.7; margin-top: 1rem; }
.wkPaar {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: .9rem;
}

.laDrittel {
  padding: 1rem 1.1rem; margin-bottom: .8rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: .45rem;
  background: rgba(255,255,255,.02);
}
.laDrittel.laHier { border-color: var(--ton); background: rgba(212,175,110,.07); }
.laKopf { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .5rem; flex-wrap: wrap; }
.laSpanne { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.laName { font-size: 1.15rem; color: var(--ton); }
.laDrittel p { margin: 0; line-height: 1.7; }
.laJetzt {
  margin-top: .7rem; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ton);
}

.apKarte {
  padding: .9rem 1rem; margin-bottom: .6rem;
  border-left: 2px solid rgba(212,175,110,.35);
  background: rgba(255,255,255,.022); border-radius: 0 .35rem .35rem 0;
}
.apKopf { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.apName { font-size: 1.08rem; color: var(--ton); }
.apOrt { font-size: .85rem; opacity: .7; white-space: nowrap; }
.apLat { font-size: .76rem; letter-spacing: .07em; opacity: .45; margin: .15rem 0 .5rem; font-style: italic; }
.apKarte p { margin: 0; line-height: 1.65; font-size: .95rem; }

/* Zwischenüberschriften in der Technikliste */
.wegGruppe {
  margin: 1.4rem 0 .2rem; font-size: .74rem; font-weight: normal;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ton); opacity: .6;
}
.wegListe > .wegGruppe:first-of-type { margin-top: .6rem; }

@media (max-width: 480px) {
  /* Siebzehn Felder mit voller Beschreibung sind drei Bildschirme Scrollen.
     Am Telefon reichen zwei Zeilen: Sie sagen, worum es geht, und der Rest
     steht im Abschnitt selbst. */
  .wegWorum {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.lbVerfahrenWahl { margin: 1rem 0; max-width: 28rem; }
.lbVerfahrenWahl select {
  width: 100%; padding: .5rem .6rem; font-family: inherit; font-size: .92rem;
  color: var(--schrift); background: var(--kagit2);
  border: 1px solid var(--linie); border-radius: .3rem;
}

/* ------------------------------------------------------- Sprachwahl */
#sprachWahl {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; gap: .25rem;
  justify-content: center; padding: .7rem 1rem .2rem;
}
#sprachWahl button {
  padding: .25rem .5rem; cursor: pointer;
  font-family: inherit; font-size: .72rem; letter-spacing: .09em;
  color: var(--gedaempft); background: none;
  border: 1px solid transparent; border-radius: .25rem;
  transition: color .15s, border-color .15s;
}
#sprachWahl button:hover { color: var(--ton); }
#sprachWahl button.aktiv {
  color: var(--ton); border-color: rgba(201,162,39,.4);
}
#spracheHinweis {
  position: relative; z-index: 2;
  max-width: 38rem; margin: 0 auto 1rem; padding: .7rem 1rem;
  text-align: center; border-left: 0; border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

/* Arabisch läuft von rechts nach links. */
body.rtl .wahlKarte, body.rtl .wegFeld, body.rtl .brilleKarte,
body.rtl .apKarte, body.rtl .laDrittel { text-align: right; }
body.rtl .apKarte { border-left: 0; border-right: 2px solid rgba(201,162,39,.35);
                    border-radius: .35rem 0 0 .35rem; }
body.rtl .vtKopf { border-left: 0; border-right: 3px solid var(--ton); padding: .7rem 1rem .7rem 0; }
body.rtl .rdNummer { float: right; margin: .1rem 0 0 .8rem; }
body.rtl .wasIstKnopf::after { content: "←"; float: left; }
body.rtl .zeugenListe li { border-left: 0; border-right: 2px solid rgba(255,255,255,.12);
                           padding: .6rem 1rem .6rem .8rem; border-radius: .3rem 0 0 .3rem; }

/* ------------------------------------------- Woher ein Absatz kommt
   Zugeklappt drei Worte, aufgeklappt die ganze Herleitung. Die Lesung
   soll eine Lesung bleiben; die Technik steht einen Klick tiefer. */
.herkunft { margin: -.4rem 0 1.6rem; }
.herkunft > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gedaempft); padding: .2rem 0;
  border-bottom: 1px dotted rgba(139,132,113,.45);
  transition: color .15s, border-color .15s;
}
.herkunft > summary::-webkit-details-marker { display: none; }
.herkunft > summary::after { content: " ⌄"; letter-spacing: 0; }
.herkunft[open] > summary::after { content: " ⌃"; }
.herkunft > summary:hover { color: var(--ton); border-color: rgba(201,162,39,.5); }

.herkunftInhalt {
  margin-top: .8rem; padding: .9rem 1.1rem;
  border-left: 2px solid rgba(201,162,39,.3);
  background: rgba(255,255,255,.022); border-radius: 0 .35rem .35rem 0;
}
.herkunftTechnik { color: var(--ton); font-size: 1.02rem; margin-bottom: .6rem; }
.herkunftZeile { font-size: .9rem !important; line-height: 1.6; margin: .35rem 0; }
.herkunftSchild {
  display: inline-block; min-width: 7.5rem;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gedaempft); vertical-align: top;
}
.herkunftKnopf {
  margin-top: .8rem; padding: .35rem .8rem; cursor: pointer;
  font-family: inherit; font-size: .82rem; letter-spacing: .03em;
  color: var(--ton); background: none;
  border: 1px solid rgba(201,162,39,.3); border-radius: .3rem;
}
.herkunftKnopf:hover { background: rgba(201,162,39,.08); }
.herkunftKnopf::after { content: " →"; }

body.rtl .herkunftInhalt {
  border-left: 0; border-right: 2px solid rgba(201,162,39,.3);
  border-radius: .35rem 0 0 .35rem;
}
@media (max-width: 520px) {
  .herkunftSchild { display: block; min-width: 0; margin-bottom: .15rem; }
}

/* ------------------------------------------------- die Lesung am Anfang
   Die Lesung ist auf der Startseite kein Unterpunkt mehr, sondern das
   Erste, was nach den eigenen Angaben kommt. Der Kopf darf darum etwas
   leiser sein als der einer eigenen Seite — er trennt, er kündigt nicht an. */
#lesungHeim { margin-top: 2.6rem; }
.lesungKopf { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.4rem; }
.lesungKopf h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
/* Ein ganzer Satz verträgt keine Versalien mit Sperrung: hier liest er
   sich als Zeile Prosa, nicht als Rubrik. */
.lesungKopf .unterzeile {
  text-transform: none; letter-spacing: .02em;
  font-style: italic;
  font-size: .95rem; line-height: 1.5;
  max-width: 26rem; margin-inline: auto;
}
#lesungCikti > h3:first-child { margin-top: 0; }

#technikFach { margin-top: 2.4rem; }
#technikFach .wegListe { margin-top: 1rem; }

/* Der Knopf, der den Rest der Lesung aufschlägt. Er sitzt mitten im
   Text und soll nicht wie ein Formularknopf aussehen, sondern wie eine
   Marke zwischen zwei Seiten. */
.lesungMehr {
  display: block; width: 100%; margin: 1.6rem 0 .4rem;
  padding: .85rem 1rem; cursor: pointer;
  font-family: inherit; font-size: .95rem; letter-spacing: .04em;
  color: var(--ton); background: rgba(201,162,39,.05);
  border: 1px solid rgba(201,162,39,.28); border-radius: .4rem;
  transition: background .15s, border-color .15s;
}
.lesungMehr:hover { background: rgba(201,162,39,.11); border-color: rgba(201,162,39,.45); }
.lesungMehr::after { content: " ⌄"; }
.lesungMehr.offen::after { content: " ⌃"; }
.lesungRest > h3:first-child { margin-top: 1.4rem; }

/* ------------------------------------------- was der Geburtsort ergab
   Statt dreier Zahlenfelder ein Satz: Koordinaten, Name der Zeitzone und
   der Abstand zur Weltzeit, den dieser Ort an diesem Tag wirklich hatte. */
.ortBefund {
  margin: .5rem 0 0; padding: .55rem .8rem;
  font-size: .86rem; letter-spacing: .02em; color: var(--gedaempft);
  background: rgba(255,255,255,.025);
  border-left: 2px solid rgba(201,162,39,.3); border-radius: 0 .3rem .3rem 0;
}
.ortBefund b { color: var(--ton); font-weight: normal; }
.ortAbweicht { color: #c98f6b; }

.vonHand { margin-top: .9rem; }
.vonHand > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gedaempft); padding: .2rem 0;
  border-bottom: 1px dotted rgba(139,132,113,.45);
}
.vonHand > summary::-webkit-details-marker { display: none; }
.vonHand > summary::after { content: " ⌄"; letter-spacing: 0; }
.vonHand[open] > summary::after { content: " ⌃"; }
.vonHand > summary:hover { color: var(--ton); border-color: rgba(201,162,39,.5); }
.vonHand .geoZeile { margin-top: .8rem; }

body.rtl .ortBefund {
  border-left: 0; border-right: 2px solid rgba(201,162,39,.3);
  border-radius: .3rem 0 0 .3rem;
}

/* ----------------------------------------- Geburtsstunde unbekannt
   Ein Kästchen in der Maske, und in der Lesung ein gerades Wort darüber,
   was ohne die Stunde wackelt und was trotzdem steht. */
.kaestchen {
  display: flex; align-items: center; gap: .55rem;
  margin: .2rem 0 .4rem; cursor: pointer;
  font-size: .9rem; color: var(--gedaempft);
}
.kaestchen input { width: 1rem; height: 1rem; accent-color: var(--ton); cursor: pointer; }
.kaestchen:hover { color: var(--schrift); }
.alan.stillgelegt { opacity: .45; }
.alan.stillgelegt input { cursor: not-allowed; }

.ohneStunde { margin-top: 1rem; }
.ohneStundeZeile {
  margin: 0; font-size: .88rem; color: #c98f6b; letter-spacing: .02em;
}
.ohneStundeFach { margin-top: .3rem; }
.ohneStundeFach > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gedaempft); padding: .15rem 0;
  border-bottom: 1px dotted rgba(139,132,113,.45);
}
.ohneStundeFach > summary::-webkit-details-marker { display: none; }
.ohneStundeFach > summary::after { content: " ⌄"; letter-spacing: 0; }
.ohneStundeFach[open] > summary::after { content: " ⌃"; }
.ohneStundeInhalt {
  margin-top: .7rem; padding: .85rem 1rem; text-align: left;
  border-left: 2px solid rgba(201,143,107,.35);
  background: rgba(255,255,255,.022); border-radius: 0 .35rem .35rem 0;
}
.ohneStundeInhalt p { font-size: .9rem !important; line-height: 1.65; margin: .4rem 0; }
.ohneStundeInhalt b { color: var(--ton); font-weight: normal; }
body.rtl .ohneStundeInhalt {
  border-left: 0; border-right: 2px solid rgba(201,143,107,.35);
  border-radius: .35rem 0 0 .35rem;
}

/* ------------------------------------------------ der Himmel von heute
   Was ein Fremder sieht, ehe er irgendetwas eingetragen hat. Er soll
   nicht wie ein Formularkopf wirken, sondern wie eine Tafel, die schon
   dastand, als man hereinkam. */
#heuteHeim {
  margin: 0 0 2.2rem; padding: 1.3rem 1.3rem 1.1rem;
  text-align: center;
  border: 1px solid rgba(201,162,39,.22); border-radius: .5rem;
  background: rgba(255,255,255,.02);
}
.heuteMarke {
  margin: 0 0 .7rem; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gedaempft);
}
.heuteSatz { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.heuteSatz b { color: var(--ton); font-weight: normal; }
.heuteRat { margin: .7rem 0 0; font-size: .9rem; color: var(--gedaempft); }
.heuteSchild {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(201,162,39,.75); margin-right: .35rem;
}
.heuteTrenner { margin: 0 .55rem; opacity: .4; }
.heuteLauf {
  margin: .5rem 0 0; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gedaempft);
}
.heuteLocken {
  margin: 1rem 0 0; padding-top: .9rem; font-size: .88rem; font-style: italic;
  color: var(--gedaempft); border-top: 1px solid rgba(201,162,39,.15);
}
@media (max-width: 520px) {
  #heuteHeim { padding: 1.1rem 1rem 1rem; }
  .heuteRat .heuteTrenner { display: block; height: 0; margin: .4rem 0; overflow: hidden; }
}

/* Der zweite Weg zurück, am Fuß eines Abschnitts. Er steht abgesetzt:
   oben ist er eine Rückfahrkarte, unten ein Schlussstrich. */
.zurueckUnten {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(201,162,39,.18);
  width: 100%;
}

/* Das Radixrad. Es steht ganz oben im Horoskop — wer das Horoskop
   aufschlägt, will es zuerst sehen und nicht erst eine Tabelle. */
.radixKutu { margin: 1.4rem 0 2rem; display: flex; justify-content: center; }
.radixRad { width: 100%; max-width: 360px; height: auto; }