:root{
  --paper:#efe1bc;
  --paper2:#f7efd8;
  --paper3:#fff8ea;
  --ink:#24180f;
  --red:#81241c;
  --gold:#b1842d;
  --gold2:#d8b86b;
  --line:#9b7f50;
  --dark:#171411;
  --shadow:#4f3b1a22;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#2a251e;color:var(--ink);font-family:Georgia,"Times New Roman",serif}
button,input{font:inherit}
a{color:var(--red)}
.app{min-height:100vh;background:radial-gradient(circle at top,var(--paper3) 0,var(--paper2) 40%,var(--paper) 100%)}
main{max-width:1680px;margin:auto;padding:16px}
.view{display:none}.view.active{display:block}

.panel-shell,.parchment,.panel-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,#fbf3dd 0,#f1e2bc 100%);
  box-shadow:0 8px 22px var(--shadow), inset 0 0 0 1px #fff4;
}
.parchment,.panel-card{padding:16px}

.site-header{padding:10px 16px 0;position:sticky;top:0;z-index:25;background:linear-gradient(180deg,rgba(247,239,216,.98),rgba(247,239,216,.92));backdrop-filter:blur(8px);border-bottom:2px solid #5a4522}
.banner{position:relative;overflow:hidden}
.banner-image{display:block;width:100%;height:140px;object-fit:cover}
.banner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(255,248,234,.55),rgba(255,248,234,.2),rgba(255,248,234,.55))}
.brand-text{text-align:center;padding:10px 24px;background:rgba(255,248,234,.58);border-radius:18px;border:1px solid #00000018}
.eyebrow{font-size:16px;font-weight:bold;letter-spacing:.03em}
.brand-text h1{margin:2px 0 0;font-size:60px;line-height:.92}
.subtitle{font-size:20px;margin-top:6px}
.top-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 4px 14px}
.main-nav{display:flex;gap:10px;flex-wrap:wrap}
.navbtn,.modebtn,.action{
  border:1px solid #6f5228;
  background:linear-gradient(180deg,#f9efd4,#e7d1a5);
  color:var(--ink);
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 #fff8, 0 3px 8px #0001;
  transition:.18s ease;
}
.navbtn:hover,.modebtn:hover,.action:hover{transform:translateY(-1px)}
.navbtn.active,.modebtn.active,.action.primary{
  background:linear-gradient(180deg,var(--red),#5d1813);
  color:#fff;
  border-color:#48120e;
}
.mode{display:flex;gap:8px;flex-wrap:wrap}

.today-layout{display:grid;grid-template-columns:340px minmax(620px,1fr) 240px;gap:16px;align-items:start}
.oracle-center{display:grid;gap:16px}
.datebox{text-align:center;font-size:20px;line-height:1.25;margin-bottom:10px}
.datebox strong{display:block;font-size:46px;color:var(--red)}
.daily-card-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;border:1px solid #6c542f;box-shadow:0 5px 14px #0002}
.daily-card-wrap h2{text-align:center;margin:12px 0 4px;font-size:38px}
.theme{text-align:center;font-style:italic;color:#5b3922}
.button-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.metrics-box{margin-top:14px;padding-top:10px;border-top:1px solid #baa06e}
.metrics-box h3,.small-panel h3,.reading-card h3,.panel-card h2{margin-top:0}
.metric-note{font-size:13px;color:#6a5538;margin-top:8px}
.traits{display:grid;gap:10px}
.trait{display:grid;grid-template-columns:110px 1fr 36px;gap:10px;align-items:center}
.trait span:first-child{font-size:17px}
.bar{height:14px;border-radius:99px;background:#ded0aa;overflow:hidden;border:1px solid #c3ae84}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--red))}

.reading-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.reading-head h2{margin-bottom:4px}
.reading-head p{margin:0;color:#5f4933}
.asc-mini{min-width:140px;max-width:160px;text-align:center;background:#fff8e9;border:1px solid #c7ae79;border-radius:14px;padding:10px}
.asc-label,.small-label{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#7a5837;margin-bottom:6px}
.asc-mini img{width:88px;height:118px;object-fit:cover;border-radius:10px;border:1px solid #8f7448}
.asc-name{font-weight:bold;margin-top:6px;font-size:15px}
.reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reading-card{padding:14px;border:1px solid #c6ab77;border-radius:14px;background:#fff8e9;box-shadow:inset 0 1px 0 #fff7}
.reading-card h3{color:#63211b;margin-bottom:8px}
.reading-card p{margin:0;line-height:1.5}
.combo-card{grid-column:1/-1}
.mobile-tabs{display:none}

.section-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:14px}
.section-head.compact h2{margin:0 0 2px}
.section-head p{margin:0;color:#5d4935}
.archive-tools input{min-width:260px;padding:10px 12px;border:1px solid #a78c60;border-radius:999px;background:#fffaf0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.card{background:#f9efcf;border:1px solid #b49664;border-radius:12px;padding:7px;cursor:pointer;transition:.18s ease;box-shadow:0 3px 8px #0001}
.card:hover{transform:translateY(-3px);box-shadow:0 7px 15px #0002}
.card.active{outline:3px solid var(--red);background:#fff7e8}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid #b59666}
.card h3{font-size:15px;text-align:center;margin:6px 2px 2px;line-height:1.2}

.detail-top{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center;margin-bottom:12px}
.detail-top img{width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid #8e7448}
.detail-top h2{margin:0 0 5px}
.detail-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.static-show{display:block}

.small-panel p{margin-bottom:0;line-height:1.45}
.mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.mini-cal span{display:block;padding:7px 4px;border-radius:50%;background:#fff4d7;border:1px solid #d0b98c}
.mini-cal .today{background:var(--red);color:#fff;border-color:#5c1813}
.quote-panel{font-size:20px;line-height:1.5}

.calendar-large{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day{min-height:132px;border:1px solid #b59568;border-radius:12px;padding:8px;background:#fff8e7}
.day img{width:56px;height:74px;float:right;object-fit:cover;border-radius:6px;margin-left:8px;border:1px solid #c1a77c}
.day.today{outline:3px solid var(--red)}

.about-panel{max-width:980px;margin:auto;line-height:1.55}
footer{margin-top:24px;background:linear-gradient(180deg,#171411,#241d16);color:#ead7ae;text-align:center;padding:24px 18px;display:grid;gap:6px}

@media (max-width:1280px){
  .today-layout{grid-template-columns:320px 1fr}
  .oracle-right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:900px){
  .brand-text h1{font-size:46px}
  .subtitle{font-size:16px}
  .today-layout{grid-template-columns:1fr}
  .oracle-right{grid-template-columns:1fr}
  .detail-columns,.reading-grid{grid-template-columns:1fr}
  .combo-card{grid-column:auto}
  .section-head{display:block}
  .archive-tools{margin-top:12px}
}
@media (max-width:760px){
  .site-header{position:relative}
  .banner-image{height:110px}
  .brand-text h1{font-size:34px}
  .eyebrow{font-size:14px}.subtitle{font-size:14px}
  .top-controls{display:block}
  .main-nav{margin-bottom:10px;overflow-x:auto;flex-wrap:nowrap}
  .mode{overflow-x:auto}
  main{padding:10px}
  .parchment,.panel-card{padding:12px}
  .datebox{font-size:18px}.datebox strong{font-size:34px}
  .daily-card-wrap h2{font-size:30px}
  .trait{grid-template-columns:88px 1fr 32px}
  .reading-head{display:block}
  .asc-mini{margin-top:12px}
  .mobile-tabs{display:flex;gap:6px;margin-bottom:10px}
  .mobile-tabs button{flex:1;padding:8px;border:1px solid #a58859;border-radius:999px;background:#f7e8c4}
  .mobile-tabs button.active{background:var(--red);color:#fff}
  .reading-grid .reading-card{display:none}
  .reading-grid .reading-card.active{display:block}
  .grid{grid-template-columns:repeat(2,1fr)}
  .detail-top{grid-template-columns:96px 1fr}
  .detail-top img{width:96px}
  .calendar-large{grid-template-columns:1fr}
  .day{min-height:84px}
}
body.force-desktop{min-width:1100px}
body.force-mobile .today-layout{grid-template-columns:1fr}
body.force-mobile .oracle-right{display:grid;grid-template-columns:1fr}
body.force-mobile .reading-grid{grid-template-columns:1fr}
body.force-mobile .reading-grid .reading-card{display:none}
body.force-mobile .reading-grid .reading-card.active{display:block}
body.force-mobile .mobile-tabs{display:flex}

/* Layout v4: Tagesorakel links als 2x2-Matrix, Kartendeck Mitte, Kalender rechts */
main{max-width:1880px}
.today-layout{display:grid;grid-template-columns:minmax(650px,1.18fr) minmax(520px,1fr) 270px;gap:16px;align-items:start}
.oracle-left-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;align-items:stretch}
.oracle-quadrant{min-width:0}
.daily-quadrant{grid-column:1;grid-row:1}
.reading-quadrant{grid-column:2;grid-row:1}
.metrics-quadrant{grid-column:1;grid-row:2}
.ascendant-quadrant{grid-column:2;grid-row:2}
.oracle-quadrant h2{margin:0 0 12px;text-align:center;font-size:27px}
.daily-quadrant .daily-card-wrap{max-width:285px;margin:auto}
.daily-quadrant .daily-card-wrap h2{font-size:30px;margin:9px 0 3px}
.daily-quadrant .datebox{font-size:17px;margin-bottom:8px}
.daily-quadrant .datebox strong{font-size:31px}
.daily-quadrant .button-row{margin-bottom:0}
.reading-quadrant .reading-grid{display:grid;grid-template-columns:1fr;gap:10px}
.reading-quadrant .reading-card{padding:12px}
.reading-quadrant .reading-card h3{font-size:18px;margin-bottom:5px}
.reading-quadrant .reading-card p{font-size:15.5px}
.metrics-quadrant{display:flex;flex-direction:column;justify-content:center}
.metrics-quadrant .traits{gap:14px}
.metrics-quadrant .trait{grid-template-columns:112px 1fr 32px}
.ascendant-quadrant{display:flex;flex-direction:column}
.asc-card{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.asc-card img{width:150px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid #8f7448;box-shadow:0 4px 12px #0002}
.asc-card h3{font-size:24px;margin:4px 0 10px;text-align:left}
.asc-saying{grid-column:1/-1;font-size:16px;line-height:1.55;margin-top:4px;padding:0;border:0;border-radius:0;background:transparent}
.oracle-center{display:grid;gap:16px}
.deck-panel .section-head{align-items:center}
.deck-panel .section-head h2{margin:0}
.grid{grid-template-columns:repeat(5,minmax(90px,1fr));gap:8px}
.card{padding:5px}
.card h3{font-size:13px}
.oracle-right{display:grid;gap:16px}
.month-panel h3,.quote-panel h3{text-align:center}
.mini-cal-title{text-align:center;font-weight:bold;color:var(--red);margin:2px 0 8px}
.mini-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px;font-weight:bold;margin-bottom:4px}
.mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.mini-cal span{padding:5px 1px;border-radius:6px;background:#fff4d7;border:1px solid #d0b98c;font-size:12px}
.mini-cal span.empty{visibility:hidden}
.quote-panel{font-size:18px}

@media(max-width:1450px){
  .today-layout{grid-template-columns:minmax(600px,1.15fr) minmax(470px,1fr) 235px}
  .grid{grid-template-columns:repeat(4,minmax(90px,1fr))}
  .asc-card{grid-template-columns:125px 1fr}
  .asc-card img{width:125px}
}
@media(max-width:1180px){
  .today-layout{grid-template-columns:1fr 1fr}
  .oracle-left-grid{grid-column:1/-1}
  .oracle-right{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(5,minmax(90px,1fr))}
}
@media(max-width:850px){
  .today-layout{grid-template-columns:1fr}
  .oracle-left-grid{grid-template-columns:1fr 1fr}
  .oracle-right{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(3,minmax(90px,1fr))}
}
@media(max-width:620px){
  .oracle-left-grid{grid-template-columns:1fr}
  .daily-quadrant,.reading-quadrant,.metrics-quadrant,.ascendant-quadrant{grid-column:1;grid-row:auto}
  .asc-card{grid-template-columns:105px 1fr}
  .asc-card img{width:105px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
body.force-mobile .oracle-left-grid{grid-template-columns:1fr}
body.force-mobile .daily-quadrant,
body.force-mobile .reading-quadrant,
body.force-mobile .metrics-quadrant,
body.force-mobile .ascendant-quadrant{grid-column:1;grid-row:auto}
.center-note{text-align:center;padding:12px 18px}
.center-note h3{margin:0 0 4px;color:var(--red)}
.center-note p{margin:0;font-size:18px;font-style:italic}
.oracle-right .detail-top{grid-template-columns:88px 1fr;gap:10px}
.oracle-right .detail-top img{width:88px}
.oracle-right .detail-top h2{font-size:22px}
.oracle-right .detail-columns{grid-template-columns:1fr;gap:9px}
.oracle-right .reading-card{padding:11px;font-size:14px}
.oracle-right .reading-card h3{font-size:16px}
.oracle-right .detail-panel{margin-top:16px}
.trait b{white-space:nowrap;font-size:13px}

/* Echte erzwungene PC-Ansicht – muss am Dateiende stehen. */
html.force-desktop,
body.force-desktop {
  min-width: 1500px !important;
  overflow-x: auto !important;
}
body.force-desktop main {
  width: 1500px !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 16px !important;
}
body.force-desktop .site-header {
  position: sticky !important;
  min-width: 1500px !important;
}
body.force-desktop .banner-image { height: 140px !important; }
body.force-desktop .brand-text h1 { font-size: 60px !important; }
body.force-desktop .eyebrow { font-size: 16px !important; }
body.force-desktop .subtitle { display: block !important; font-size: 20px !important; }
body.force-desktop .top-controls { display: flex !important; }
body.force-desktop .main-nav { flex-wrap: wrap !important; overflow: visible !important; margin-bottom: 0 !important; }
body.force-desktop .mode { overflow: visible !important; }
body.force-desktop .today-layout {
  display: grid !important;
  grid-template-columns: minmax(650px,1.18fr) minmax(520px,1fr) 270px !important;
  gap: 16px !important;
}
body.force-desktop .oracle-left-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
}
body.force-desktop .daily-quadrant { grid-column: 1 !important; grid-row: 1 !important; }
body.force-desktop .reading-quadrant { grid-column: 2 !important; grid-row: 1 !important; }
body.force-desktop .metrics-quadrant { grid-column: 1 !important; grid-row: 2 !important; }
body.force-desktop .ascendant-quadrant { grid-column: 2 !important; grid-row: 2 !important; }
body.force-desktop .oracle-right {
  display: grid !important;
  grid-column: auto !important;
  grid-template-columns: 1fr !important;
}
body.force-desktop .grid { grid-template-columns: repeat(5,minmax(90px,1fr)) !important; }
body.force-desktop .reading-grid { display: grid !important; grid-template-columns: 1fr !important; }
body.force-desktop .reading-grid .reading-card { display: block !important; }
body.force-desktop .mobile-tabs { display: none !important; }
body.force-desktop .section-head { display: flex !important; }
body.force-desktop .calendar-large { grid-template-columns: repeat(7,1fr) !important; }
body.force-desktop .detail-columns { grid-template-columns: 1fr !important; }

/* Echte erzwungene Mobilansicht auch auf breiten Geräten. */
html.force-mobile,
body.force-mobile { min-width: 0 !important; }
body.force-mobile main { max-width: 760px !important; margin: auto !important; padding: 10px !important; }
body.force-mobile .today-layout { grid-template-columns: 1fr !important; }
body.force-mobile .oracle-left-grid { grid-template-columns: 1fr !important; }
body.force-mobile .oracle-right { grid-template-columns: 1fr !important; grid-column: auto !important; }
body.force-mobile .grid { grid-template-columns: repeat(2,1fr) !important; }

/* PC-Modus auf schmalen Geräten: vollständiges Desktop-Raster erzwingen. */
html.force-desktop body,
body.force-desktop {
  width: 1500px !important;
  min-width: 1500px !important;
  max-width: none !important;
}
body.force-desktop .app {
  width: 1500px !important;
  min-width: 1500px !important;
}
body.force-desktop .today-layout {
  display: grid !important;
  grid-template-columns: 650px 520px 270px !important;
  align-items: start !important;
}
body.force-desktop .oracle-left-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "daily reading"
    "metrics ascendant" !important;
}
body.force-desktop .daily-quadrant { grid-area: daily !important; }
body.force-desktop .reading-quadrant { grid-area: reading !important; }
body.force-desktop .metrics-quadrant { grid-area: metrics !important; }
body.force-desktop .ascendant-quadrant { grid-area: ascendant !important; }
body.force-desktop #cardGrid.grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(90px, 1fr)) !important;
}
body.force-desktop .oracle-center,
body.force-desktop .oracle-right {
  display: grid !important;
}
/* Titelbild klein links statt als Hintergrund */
.banner {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 24px;
  min-height: 150px;
  padding: 16px 24px;
  overflow: hidden;
}

.banner-image {
  width: 230px;
  height: 120px;
  object-fit: contain;
  border-radius: 12px;
}

.banner-overlay {
  position: static;
  inset: auto;
  display: block;
  background: none;
}

.brand-text {
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

@media (max-width: 760px) {
  .banner {
    grid-template-columns: 95px 1fr;
    gap: 12px;
    min-height: 100px;
    padding: 10px;
  }

  .banner-image {
    width: 95px;
    height: 75px;
  }

  .brand-text h1 {
    font-size: 30px;
  }

  .brand-text .subtitle {
    font-size: 13px;
  }
}

/* Kalendernavigation auf kleinen Displays und im erzwungenen Mobilmodus ausblenden. */
@media (max-width: 760px) {
  body:not(.force-desktop) .navbtn[data-view="calendar"] {
    display: none !important;
  }
}
body.force-mobile .navbtn[data-view="calendar"] {
  display: none !important;
}
body.force-desktop .navbtn[data-view="calendar"] {
  display: inline-block !important;
}


/* Hinweis zum täglich auf diesem Browser gezogenen persönlichen Aszendenten */
.asc-device-note{
  margin:-8px 0 12px;
  text-align:center;
  font-size:13px;
  line-height:1.2;
  font-style:italic;
  color:#7a5837;
}


/* Layout-Korrektur v21: rechte Spalte darf auf üblichen PC-Breiten nicht abgeschnitten werden. */
.today-layout > *,
.oracle-left-grid > *,
.oracle-center,
.oracle-right,
.month-panel,
.detail-panel,
.mini-cal {
  min-width: 0;
}

/* Zwischen schmalem Notebook und großem Desktop zweispaltig statt überbreit darstellen. */
@media (min-width: 1181px) and (max-width: 1540px) {
  body:not(.force-desktop) .today-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr) !important;
  }

  body:not(.force-desktop) .oracle-left-grid {
    grid-column: 1 / -1 !important;
  }

  body:not(.force-desktop) .oracle-center {
    grid-column: 1 !important;
  }

  body:not(.force-desktop) .oracle-right {
    grid-column: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Auch der bewusst erzwungene PC-Modus bleibt innerhalb seiner 1500-Pixel-Fläche. */
body.force-desktop .today-layout {
  grid-template-columns: 640px 500px 250px !important;
}

/* Persönlicher Aszendent: Name neben der Karte, Erläuterung über die volle Breite darunter. */
.asc-card-title{align-self:center;min-width:0}
.asc-card-title h3{margin:0;text-align:left}

/* Filmumschaltung */
.world-switch{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 7px 5px 12px;
  border:1px solid #6f5228;
  border-radius:999px;
  background:linear-gradient(180deg,#f9efd4,#e7d1a5);
  box-shadow:inset 0 1px 0 #fff8,0 3px 8px #0001;
  white-space:nowrap;
}
.world-switch span{font-size:14px;font-weight:bold}
.world-switch select{
  max-width:210px;
  padding:5px 28px 5px 8px;
  border:1px solid #a78c60;
  border-radius:999px;
  background:#fffaf0;
  color:var(--ink);
}
.preparation-panel{max-width:760px;margin:28px auto;text-align:center;padding:36px 28px}
.preparation-panel h2{font-size:38px;margin:5px 0 12px}
.preparation-panel p{font-size:19px;line-height:1.55}
.preparation-mark{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);font-weight:bold}

@media(max-width:760px){
  .world-switch{flex:0 0 auto}
  .world-switch span{display:none}
  .world-switch select{max-width:180px}
  .preparation-panel{margin:12px auto;padding:25px 16px}
  .preparation-panel h2{font-size:30px}
}


/* Mehrfilm-Struktur */
.loading-note{padding:24px;text-align:center;font-style:italic;color:#6a5538}
#aboutContent p{line-height:1.55}