/* biorhythmus/extras.js Styling (Mike 2026-06-19) — passt sich an den bestehenden Look an. */
#bio-extras-section .ex-card { margin-bottom: 22px; }

.ex-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }
.ex-stat { background: #fff; border: 1px solid var(--border, #e8dcc4); border-left: 5px solid #bbb; border-radius: 10px; padding: 12px 14px; }
.ex-stat.good { border-left-color: #6aa84f; }
.ex-stat.mid  { border-left-color: #e8b500; }
.ex-stat.low  { border-left-color: #c84141; }
.ex-stat-name { font-size: 13px; color: var(--ink, #2a2620); font-weight: 600; }
.ex-stat-sub  { color: var(--ink-soft, #6a6555); font-weight: 400; font-size: 11px; }
.ex-stat-val  { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; font-weight: 700; color: var(--teal, #1f4d44); line-height: 1.1; }
.ex-stat-phase { font-size: 12px; color: var(--ink-soft, #6a6555); }

.ex-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ex-list li { padding: 7px 10px; border-bottom: 1px solid var(--border, #e8dcc4); font-size: 13.5px; color: var(--ink, #2a2620); }
.ex-list li:last-child { border-bottom: 0; }

.ex-best, .ex-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }

/* Entscheidungs-Orakel ueber die volle Breite: links Frage, rechts
   Antwort. Eigene Klasse statt .ex-2col, damit dort nichts mitwandert
   (Mike 2026-08-09). */
.ora-2col { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 26px; align-items: start; }
.ora-2col #ora-out:empty { display: none; }
@media (max-width: 820px) { .ora-2col { grid-template-columns: 1fr; gap: 14px; } }

/* 2 Spalten: links Bester Tag, rechts Kritische Tage */
.ex-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ex-2col .ex-card { margin-bottom: 0; }
@media (max-width: 760px) { .ex-2col { grid-template-columns: 1fr; } }

/* Datums-Karten (gleiche Optik fuer beide Spalten), vertikal von oben nach unten */
.ex-vlist { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ex-daycard { background: #fff; border: 1px solid var(--border, #e8dcc4); border-left: 5px solid #bbb; border-radius: 10px; padding: 12px 16px; text-align: center; }
.ex-daycard.good { border-left-color: #6aa84f; background: linear-gradient(180deg, #e8f4dd 0%, #fff 80%); }
.ex-daycard.krit { border-left-color: #c84141; background: linear-gradient(180deg, #fdebe9 0%, #fff 80%); }
.ex-daycard-day { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 700; color: var(--teal, #1f4d44); line-height: 1.1; }
.ex-daycard-label { font-size: 13.5px; font-weight: 600; color: var(--ink, #2a2620); margin-top: 2px; }
.ex-daycard-hint { font-size: 11.5px; color: var(--ink-soft, #6a6555); margin-top: 2px; }
.ex-best-box { background: #fff; border: 1px solid var(--border, #e8dcc4); border-radius: 10px; padding: 14px; text-align: center; }
.ex-best-box.good { background: linear-gradient(180deg, #e8f4dd 0%, #fff 80%); }
.ex-best-day { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 700; color: var(--teal, #1f4d44); }
.ex-best-label { font-size: 13px; font-weight: 600; color: var(--ink, #2a2620); margin-top: 2px; }
.ex-best-hint { font-size: 11.5px; color: var(--ink-soft, #6a6555); margin-top: 2px; }

.ex-num-box { background: #fffbf3; border: 1px solid var(--border, #e8dcc4); border-radius: 10px; padding: 14px; text-align: center; }
.ex-num-n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 700; color: var(--gold, #b89556); line-height: 1; }
.ex-num-l { font-size: 12.5px; font-weight: 600; color: var(--ink, #2a2620); margin-top: 4px; }
.ex-num-h { font-size: 11px; color: var(--ink-soft, #6a6555); }
.ex-num-deut { margin-top: 14px; background: #fffbf3; border: 1px solid var(--gold-soft, #d8b87a); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; color: var(--ink, #2a2620); line-height: 1.55; }

.ex-partner-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.ex-partner-form input { padding: 9px 11px; border: 1px solid var(--border, #e8dcc4); border-radius: 8px; font-family: inherit; font-size: 14px; }
.ex-partner-head { font-size: 14px; color: var(--ink, #2a2620); margin: 14px 0 6px; }
.ex-compat { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.ex-compat-score { font-family: "Cormorant Garamond", Georgia, serif; font-size: 38px; font-weight: 700; color: var(--teal, #1f4d44); }
.ex-compat-label { font-size: 13px; color: var(--ink-soft, #6a6555); }

.ex-journal-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ex-mood { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-mood-btn { padding: 7px 14px; border: 1px solid var(--border, #e8dcc4); background: #fff; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-soft, #6a6555); transition: all 0.15s; }
.ex-mood-btn.active { background: var(--teal, #1f4d44); color: #fff; border-color: var(--teal, #1f4d44); }
.ex-journal-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border, #e8dcc4); border-radius: 8px; font-family: inherit; font-size: 14px; resize: vertical; }
.ex-journal-items { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ex-journal-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 8px 10px; background: #fff; border: 1px solid var(--border, #e8dcc4); border-radius: 8px; font-size: 13px; }
.ex-j-date { font-weight: 700; color: var(--teal, #1f4d44); }
.ex-j-mood { color: var(--gold, #b89556); font-weight: 600; }
.ex-j-bio { color: var(--ink-soft, #6a6555); font-size: 12px; }
.ex-j-text { color: var(--ink, #2a2620); flex: 1 1 100%; }

/* --- Neue Tageswerte (Mike 2026-06-22) --- */
/* Tagesform-Gauge */
.ex-gauge { text-align: center; margin-top: 8px; }
.ex-gauge-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 56px; font-weight: 700; line-height: 1; }
.ex-gauge-num span { font-size: 22px; color: #6a6555; }
.ex-gauge-bar { height: 12px; background: #f3ebd6; border-radius: 6px; overflow: hidden; margin: 12px auto 10px; max-width: 480px; }
.ex-gauge-bar div { height: 100%; border-radius: 6px; transition: width .6s; }
.ex-gauge-txt { font-size: 14px; color: var(--ink, #2a2620); }
/* Wochen-Balken */
.ex-weeks { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 10px; }
.ex-week { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; }
.ex-week-lbl { font-size: 12.5px; color: var(--ink-soft, #6a6555); }
.ex-week-bar { background: #f3ebd6; height: 12px; border-radius: 6px; overflow: hidden; }
.ex-week-bar i { display: block; height: 100%; border-radius: 6px; }
.ex-week-val { font-size: 12.5px; font-weight: 700; color: var(--ink, #2a2620); text-align: right; }
/* Chinesisches Tierkreiszeichen */
.ex-cz { margin-top: 14px; background: #fffbf3; border: 1px solid var(--gold-soft, #d8b87a); border-radius: 10px; padding: 14px 16px; }
.ex-cz-head { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 700; color: var(--teal, #1f4d44); }
.ex-cz-head span { font-size: 13px; color: var(--ink-soft, #6a6555); font-family: Inter, sans-serif; font-weight: 400; }
.ex-cz-txt { font-size: 13.5px; color: var(--ink, #2a2620); line-height: 1.55; margin-top: 4px; }


/* biorhythmus4: ALLES in Verdana, normale Gross-/Kleinschreibung (Mike 2026-08-09) */
body, body *, .wrap, h1, h2, h3, h4, h5, h6, p, div, span, li, td, th, a, button, input, select, textarea, label {
  font-family: Verdana, Geneva, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .ex-head, [id^="ex-head"], .card-head h2, .nav a, .nav-pill, .hp-sumlbl, .cat-nav a, .ov-name {
  text-transform: none !important; font-variant: normal !important; letter-spacing: 0 !important;
}
/* biorhythmus4: grosse vedische Karten aufklappbar (grosser Titel bleibt, Hinweis rechts) */
/* Innere Blöcke (Lebensphase, 9 Planeten-Kräfte, Lebenszeitstrahl, Ernährung im Detail) einklappbar */
.v4-blk { position: relative; }
.v4-blk > .v4-blkhead { cursor: pointer; padding-right: 120px; }
.v4-blk::after { position: absolute; top: 10px; right: 14px; font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; color: var(--gold-deep, #9a7a3e); white-space: nowrap; pointer-events: none; z-index: 2; }
.v4-blk:not(.open)::after { content: "Klicken für mehr"; }
.v4-blk.open::after { content: "Schliessen"; }
.v4-blk:not(.open) > .v4-blkbody { display: none; }
/* Ganze Sektion "Vedisches Tages-Chart" eingeklappt/aufklappbar — Kopf wie "Dein Tag heute" */
.v4-sec { position: relative; }
.v4-sec > .v4-sechead { cursor: pointer; position: relative; max-width: 1480px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; border-bottom: 3px solid var(--gold, #b89556); padding-bottom: 10px; margin-bottom: 6px; }
.v4-sec > .v4-sechead h2 { font-family: Verdana, Geneva, sans-serif !important; text-transform: none !important; font-size: 27px !important; font-weight: 700 !important; color: var(--teal, #1f4d44) !important; margin: 0 !important; line-height: 1.2 !important; }
.v4-sec > .v4-sechead::after { position: absolute; right: 24px; bottom: 12px; font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; color: var(--gold-deep, #9a7a3e); white-space: nowrap; }
.v4-sec:not(.open) > .v4-sechead::after { content: "Klicken für mehr"; }
.v4-sec.open > .v4-sechead::after { content: "Schliessen"; }
.v4-sec:not(.open) > .v4-secbody { display: none; }
/* Hinweis IMMER oben rechts als eigene Zeile, Titel eine Zeile tiefer — überall einheitlich */
.v4-coll { position: relative; }
.v4-coll > .card-head { cursor: pointer; padding-top: 22px; padding-right: 0; }
.v4-coll::after { position: absolute; top: 12px; right: 20px; font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; color: var(--gold-deep, #9a7a3e); white-space: nowrap; pointer-events: none; z-index: 2; }
.v4-coll:not(.open)::after { content: "Klicken für mehr"; }
.v4-coll.open::after { content: "Schliessen"; }
.v4-coll:not(.open) > *:not(.card-head) { display: none !important; }
/* biorhythmus4: "Dein Tag heute"-Box im gleichen Stil — Hinweis statt Pfeil */
#vedisch-extras .vx-collapse-arrow { font-size: 0 !important; transform: none !important; }
#vedisch-extras .vx-collapse-arrow::after { font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; color: var(--gold-deep, #9a7a3e); white-space: nowrap; }
#vedisch-extras .vx-card:not(.vx-open) .vx-collapse-arrow::after { content: "Klicken für mehr"; }
#vedisch-extras .vx-card.vx-open .vx-collapse-arrow::after { content: "Schliessen"; }
/* Titel so gross wie die Zonen-Überschriften ("Was ist heute" / "Was ist diese Woche") */
#vedisch-extras .vx-collapse-head h2 { font-family: Verdana, Geneva, sans-serif !important; text-transform: none !important; font-size: 27px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--teal, #1f4d44) !important; line-height: 1.2 !important; }
#vedisch-extras .vx-card { border: none !important; box-shadow: none !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
#vedisch-extras .vx-collapse-head { border-bottom: 3px solid var(--gold, #b89556); padding-bottom: 10px; margin-bottom: 6px; }
/* biorhythmus4: einheitliche, breitere Seitenbreite über die ganze Page (Haupt-Sektionen wie Extras) */
.wrap { max-width: 1480px; }
/* biorhythmus4: Günstig = grünes Feld, Besser meiden = rötliches Feld (wie Stunden-Plan) */
.planet-lists { gap: 18px; }
.planet-lists .list-block.nutze { background: #e8f4dd; border-left: 5px solid #43a047; border-radius: 0 12px 12px 0; padding: 16px 20px; }
.planet-lists .list-block.vermeide { background: #fdebe9; border-left: 5px solid #c84141; border-radius: 0 12px 12px 0; padding: 16px 20px; }
.planet-lists .list-block.nutze h4 { color: #2c7a3e; }
.planet-lists .list-block.vermeide h4 { color: #c84141; }
/* biorhythmus4: Stunden-Plan zugeklappt (nur aktuelle Stunde) — "Klicken für mehr" zeigt alle 24 */
.hp-plan .hp-full { display: none; }
.hp-plan.hp-open .hp-full { display: flex; }
/* Zugeklappt: aktuelle + nächste Stunde nebeneinander */
.hp-now-summary { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.hp-sumcol { flex: 1 1 340px; min-width: 0; }
.hp-sumlbl { font-size: 11px; letter-spacing: .09em; font-weight: 700; color: var(--gold-deep, #9a7a3e); margin: 0 0 5px 14px; }
.hp-plan.hp-open .hp-now-summary { display: none; }
.hp-toggle { display: inline-block; margin: 8px 0 2px; background: #fff; border: 1px solid var(--gold-soft, #d8b87a); color: var(--gold-deep, #9a7a3e); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-family: inherit; }
.hp-toggle:hover { background: #fbf5e9; }
/* biorhythmus4: jede Stunde im Stunden-Plan anklickbar für eigenes "gut / meiden" */
.hp-detail { display: none; }
.hp-hour.open > .hp-detail { display: flex; }
.hp-hour:not(.open) .hp-row { transition: background .12s; }
.hp-hour:not(.open):hover .hp-row { background: #fbf4e6 !important; }
/* biorhythmus4: aufklappbare Übersichts-Kästchen — Titel + kurze Übersicht sichtbar, Rest per Klick */
/* Titel einzeilig in Verdana, normale Gross-/Kleinschreibung; Hinweis oben rechts */
.ex-card.ex-collapsible { position: relative; }
.ex-card.ex-collapsible > h2 {
  font-family: Verdana, Geneva, sans-serif; text-transform: none; font-variant: normal;
  font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.3;
  /* Ganzer Titel sichtbar: bis zu 2 Zeilen, überall gleich viel Platz reserviert,
     damit der Text in allen Kästchen auf derselben Höhe beginnt (Mike 2026-08-09) */
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 39px; margin-bottom: 8px;
  padding-top: 20px; padding-right: 0; user-select: none;
}
/* Hinweis IMMER oben rechts als eigene Zeile (Titel steht eine Zeile tiefer) */
.ex-card.ex-collapsible::after { position: absolute; right: 18px; top: 12px; font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .01em; color: var(--gold-deep, #9a7a3e); text-transform: none; white-space: nowrap; pointer-events: none; z-index: 2; }
.ex-card.ex-collapsible:not(.open)::after { content: "Klicken für mehr"; }
.ex-card.ex-collapsible.open::after { content: "Schliessen"; }
.ex-card.ex-collapsible:not(.open) > *:not(h2):not(.micro) { display: none !important; }
/* Alle eingeklappten Kästchen gleich hoch -> sauberes Raster; Teaser auf 3 Zeilen gekürzt */
.ex-card.ex-collapsible:not(.open) { height: 190px; overflow: hidden; cursor: pointer; }
.ex-card.ex-collapsible:not(.open) > h2 { margin-top: 0; }
.ex-card.ex-collapsible:not(.open) > .micro { margin-bottom: 0; opacity: .9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ex-card.ex-collapsible.open { height: auto; overflow: visible; }
.ex-card.ex-collapsible { transition: box-shadow .15s, border-color .15s; }
.ex-card.ex-collapsible:not(.open):hover { box-shadow: 0 4px 16px rgba(184, 149, 86, .18); border-color: var(--gold-soft, #d8b87a); }

/* v3: JS-Masonry Zwei-Spalten (Mike 2026-06-24) — balanciert per kuerzeste-Spalte, keine Leerspalten */
.ex-grid { display: block; }
/* Grosszuegige Lese-Breite statt enger 1100px-Mitte; Spaltenzahl waechst mit dem Bildschirm (JS) — Mike 2026-06-24 */
.wrap.ex-grid { max-width: 1480px; }
/* "Dein Tag heute" (kommt aus /vedisch/extras.js als .row>.card) auf denselben Container zentrieren,
   damit Titel und Inhalt buendig fluchten. NUR auf biorhythmus3 (diese CSS laedt /vedisch/ nicht). */
#vedisch-extras .row { max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
/* Duo-Spalten (z.B. Maya "Deine Signatur" / "Heute") exakt gleich breit: min-width:0 laesst die 1fr greifen,
   sonst zwingt ein langes Wort wie "Himmelswanderer" die rechte Spalte breiter — Mike 2026-06-24 */
.ex-duo > * { min-width: 0; overflow-wrap: break-word; }
.ex-mrow { display: flex; gap: 22px; align-items: flex-start; }
.ex-mcol { flex: 1 1 0; min-width: 0; }
.ex-grid > .ex-card, .ex-grid > .ex-full, .ex-mcol > .ex-card { width: 100%; margin: 0 0 22px; }
.ex-grid > div[id^="ex-head"], .ex-grid > .ex-full { display: block; }
/* Handy: alles einspaltig + breite vedische Tabelle scrollbar (nur biorhythmus3, Original unberuehrt) */
@media (max-width: 820px) {
  .ex-mrow { flex-direction: column; gap: 0; }
  .hp-divider { display: none; }
  #vedisch-section .diag-grid > *, #vedisch-section .diag-block { min-width: 0; }
  #vedisch-section table.grahas { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* interne 2-Spalten-Grids (z.B. Maya) auf dem Handy einspaltig — verhindert Grid-Blowout */
  .ex-duo { grid-template-columns: 1fr !important; }
  .ex-card [style*="grid-template-columns"] > * { min-width: 0; }
}