/* 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; }

/* 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; }


/* 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; }
}