/* thermik.css — Thermik-Cockpit */
:root {
  --blau: #0b3d91; --blau2: #1e6fd9; --himmel: #cfe8ff; --orange: #ff8c1a; --rot: #d62728; --gruen: #2a9d5c;
  --grau: #4b5563; --hell: #eef1f5; --rand: #cfd6de; --text: #111827; --karte: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--hell); font-size: 14px; line-height: 1.4; }
a { color: var(--blau2); text-decoration: none; }
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 6px 16px; background: #10233f; color: #fff; }
.marke { color: #fff; font-weight: 700; font-size: 1.1rem; display: flex; align-items: baseline; gap: 8px; }
.marke small { font-weight: 400; opacity: .8; font-size: .8rem; }
.logo { font-size: 1.5rem; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs a { color: #fff; padding: 4px 10px; border-radius: 6px; opacity: .85; font-size: .92rem; }
.tabs a:hover { background: rgba(255,255,255,.15); }
.tabs a.aktiv { background: #fff; color: var(--blau); opacity: 1; font-weight: 600; }
.app { max-width: 1400px; margin: 0 auto; padding: 10px 16px 30px; }
.fuss { max-width: 1240px; margin: 0 auto; padding: 12px 20px 30px; color: var(--grau); font-size: .8rem; }
.laden { color: var(--grau); }
h1 { font-size: 1.25rem; margin: 4px 0 8px; }
h2 { font-size: 1.02rem; margin: 10px 0 6px; color: var(--blau); }
h3 { font-size: .95rem; margin: 8px 0 4px; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; }
.zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.raster { display: grid; gap: 10px; }
.raster.zwei { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .raster.zwei { grid-template-columns: 1fr; } }
button, .knopf { font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rand); background: #fff; cursor: pointer; color: var(--text); }
button:hover { border-color: var(--blau2); }
button.aktiv { background: var(--blau2); color: #fff; border-color: var(--blau2); }
button.klein { padding: 3px 8px; font-size: .85rem; }
input[type=date], input[type=text], select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 8px; }
input[type=range] { width: 220px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #e8eef7; color: var(--blau); }
.badge.r0 { background: #dff5e6; color: #1b6b3a; } .badge.r1 { background: #fff1d6; color: #9a5b00; } .badge.r2 { background: #e2ecff; color: #234a9a; }
.badge.r3 { background: #eee; color: #555; } .badge.r4 { background: #e4e4e4; color: #444; } .badge.r5 { background: #fde0e0; color: #9b1c1c; }
.badge.sz { background: var(--orange); color: #fff; }
.badge.gewitter { background: var(--rot); color: #fff; } .badge.top { background: var(--gruen); color: #fff; } .badge.hitze { background: #e07b00; color: #fff; } .badge.offen { background: #888; color: #fff; }
/* Instrumente */
.instrumente { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin: 8px 0; }
.instr { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 8px 10px; position: relative; overflow: hidden; }
.instr .l { font-size: .72rem; color: var(--grau); text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; }
.instr .w { font-size: 1.35rem; font-weight: 700; margin-top: 1px; }
.instr .w small { font-size: .8rem; font-weight: 400; color: var(--grau); margin-left: 3px; }
.instr .w.text { font-size: 1.05rem; line-height: 1.25; }
.instr .u { font-size: .78rem; color: var(--grau); line-height: 1.25; }
.instr .balken { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--blau2); }
.instr.gut .balken { background: var(--gruen); } .instr.mittel .balken { background: var(--orange); } .instr.schlecht .balken { background: var(--rot); }
/* Stüve */
.stueve { width: 100%; height: auto; display: block; border-radius: 10px; }
.stueve text { font-family: inherit; }
.steuer { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 8px 0; font-size: .9rem; }
.steuer .gruppe { display: flex; align-items: center; gap: 6px; }
.steuer label { color: var(--grau); }
.wert { font-variant-numeric: tabular-nums; font-weight: 600; }
.rechenwerte { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rechenwerte td { padding: 5px 8px; border-bottom: 1px solid var(--rand); }
.rechenwerte td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.excel { font-family: Calibri, Carlito, Arial, sans-serif; background: #fff; }
.excel td { border: 1px solid #bfbfbf; }
.excel td:first-child { background: #f2f2f2; }
/* Tagesgang */
.tagesgang svg { width: 100%; height: auto; display: block; }
/* Kalender */
.kalender { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.monat { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; }
.monat h4 { margin: 0 0 6px; font-size: .85rem; color: var(--blau); }
.monat .tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.monat .wt { font-size: .6rem; color: var(--grau); text-align: center; }
.tagz { aspect-ratio: 1; border-radius: 4px; font-size: .62rem; display: flex; align-items: center; justify-content: center; color: #234; cursor: pointer; border: 1px solid transparent; position: relative; }
.tagz:hover { outline: 2px solid var(--blau2); z-index: 1; }
.tagz.leer { background: transparent; cursor: default; }
.tagz.sz { border: 2px solid var(--orange); font-weight: 700; }
.tagz.flug::before { content: "✈"; position: absolute; left: 1px; bottom: -1px; font-size: .5rem; color: #234; opacity: .8; }
.tagz.exp { text-decoration: underline; text-decoration-thickness: 2px; }
.tagz.gewitter::after { content: ""; position: absolute; right: 1px; top: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--rot); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--grau); margin: 8px 0 14px; }
.legende .f { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
/* Tabellen */
table.liste { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.liste th { text-align: left; color: var(--grau); font-weight: 600; padding: 6px 8px; border-bottom: 2px solid var(--rand); }
table.liste td { padding: 6px 8px; border-bottom: 1px solid var(--rand); font-variant-numeric: tabular-nums; }
table.liste tr.klick { cursor: pointer; } table.liste tr.klick:hover { background: #eef4fc; }
table.liste tr.szen td { background: #fff7ea; }
.ja { color: var(--gruen); font-weight: 600; } .nein { color: #999; }
.warum p { margin: 6px 0; line-height: 1.45; }
.warum h3 { margin-top: 10px; }
.vortage { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.vortag { border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; background: #fff; font-size: .85rem; cursor: pointer; }
.vortag:hover { border-color: var(--blau2); }
.vortag b { display: block; margin-bottom: 4px; }
.vortag.heute { background: #eef4fc; border-color: var(--blau2); }
.hinweis { color: var(--grau); font-size: .85rem; }
.sz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sz-karte { border-left: 5px solid var(--grau); }
.sz-karte.top { border-left-color: var(--gruen); } .sz-karte.gewitter { border-left-color: var(--rot); } .sz-karte.hitze { border-left-color: #e07b00; }
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; align-items: end; }
.formular label { display: block; font-size: .8rem; color: var(--grau); margin-bottom: 3px; }
.formular input, .formular select, .formular textarea { width: 100%; }
.check-block { margin-bottom: 18px; }
.mini { font-size: .8rem; color: var(--grau); }
.fehler { background: #fde0e0; color: #9b1c1c; padding: 10px 14px; border-radius: 10px; }

/* Render-Ruhe (v0.8.0): nichts darf beim Abspielen die Höhe ändern */
.app { overflow-anchor: none; transition: opacity .2s; }
.app.laedt { opacity: .55; pointer-events: none; }
.instr { min-height: 88px; }
.instr .w { min-height: 1.9rem; display: flex; align-items: flex-end; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; hyphens: auto; }
.instr .w.text { font-size: .95rem; line-height: 1.2; }
.instr .balken { transition: width .35s ease; }
.rechenwerte td:last-child { min-width: 7em; white-space: nowrap; }

/* Kontrast und Dichte (Theme-Durchgang 13.09.) */
.hinweis, .mini, .laden { color: var(--grau); }
.warum p { margin: 4px 0; font-weight: 400; }
.warum p b, .warum p > strong { font-weight: 600; }
.vortag { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rand); font-size: .9rem; line-height: 1.35; }
.vortag.heute { border-color: var(--blau2); background: #eef4ff; }
.vortage { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.steuer { margin: 4px 0; font-size: .88rem; gap: 6px 14px; }
/* Woche */
.woche { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 8px 0; }
.wtag { background: #fff; border: 1px solid var(--rand); border-left-width: 5px; border-radius: 8px; padding: 8px 10px; font-size: .86rem; line-height: 1.35; }
.wtag.gut { border-left-color: var(--gruen); } .wtag.mittel { border-left-color: var(--orange); } .wtag.schlecht { border-left-color: #9aa3ad; }
.wkopf { display: flex; justify-content: space-between; align-items: baseline; font-size: .95rem; }
.wkopf span { color: var(--grau); font-size: .82rem; }
.wampel { font-weight: 600; margin: 2px 0 4px; }
.wampel.gut { color: #1b6b3a; } .wampel.mittel { color: #9a5b00; } .wampel.schlecht { color: #5b6470; }
.wzahl { font-size: 1.05rem; margin: 2px 0; } .wzahl b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.wzeile { color: #374151; } .wzeile b { color: var(--text); font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 44px; display: block; margin: 4px 0; background: #f7f9fb; border-radius: 4px; }

/* Briefing-Struktur (13.09.): Abschnitte, Quelle, Unternavigation, ⓘ und Hilfe-Seitenleiste */
.tagkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin-bottom: 4px; }
.quelle { font-size: .82rem; padding: 3px 10px; border-radius: 999px; background: #e5e7eb; color: #374151; }
.quelle.archiv { background: #dcfce7; color: #14532d; } .quelle.heute, .quelle.morgen { background: #fef3c7; color: #78350f; } .quelle.prognose { background: #fee2e2; color: #7f1d1d; }
.abschnitt { margin-top: 10px; }
.abschnitt > h2 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rand); font-size: .95rem; letter-spacing: .01em; text-transform: uppercase; color: var(--grau); }
.raster.zwei > .abschnitt, .raster.zwei > div > .abschnitt:first-child { margin-top: 0; }
.unternav { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--rand); }
.unternav a { padding: 6px 12px; color: var(--grau); border-bottom: 2px solid transparent; }
.unternav a.aktiv { color: var(--blau); border-bottom-color: var(--blau2); font-weight: 600; }
.tabs .hilfeknopf { border: 1px solid rgba(255,255,255,.5); border-radius: 50%; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
button.i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; margin-left: 2px; border-radius: 50%; border: 1px solid #9aa3ad; background: #fff; color: #4b5563; font: 700 10px/1 Georgia, serif; vertical-align: middle; cursor: help; }
button.i:hover { border-color: var(--blau2); color: var(--blau2); }
.instr .l button.i { text-transform: none; }
.hilfe { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw; background: #fff; border-left: 1px solid var(--rand); box-shadow: -4px 0 16px rgba(0,0,0,.08); padding: 14px 18px; overflow-y: auto; transform: translateX(105%); transition: transform .25s ease; z-index: 50; font-size: .92rem; line-height: 1.5; }
.hilfe.offen { transform: none; }
.hilfe .hkopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 1.05rem; }
.hilfe h4 { margin: 12px 0 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); }
.hilfe p { margin: 0 0 4px; }
@media (max-width: 700px) { .hilfe { top: auto; left: 0; width: auto; max-width: none; max-height: 60vh; border-left: 0; border-top: 1px solid var(--rand); transform: translateY(105%); } }
@media (min-width: 1500px) { body.hilfe-offen .app { margin-right: 380px; } }
.baro { width: 100%; max-width: 620px; height: auto; display: block; margin-top: 6px; }
.abschnitt.blind { border-left: 4px solid var(--orange); }
.abschnitt.ochs { border-left: 4px solid var(--blau2); background: #f8fbff; }
.mailtext p { margin: 0 0 6px; max-width: 80ch; }
.mailtext p.heute { background: #fff4d6; border-left: 3px solid var(--orange); padding: 4px 8px; margin-left: -8px; }
h2.zwischen { margin: 14px 0 6px; font-size: .95rem; text-transform: uppercase; color: var(--grau); letter-spacing: .01em; }
details.fruehere { margin-top: 8px; } details.fruehere > summary { cursor: pointer; color: var(--blau2); font-size: .9rem; }
details.mail { margin: 6px 0 0 8px; border-left: 2px solid var(--rand); padding-left: 10px; } details.mail > summary { cursor: pointer; }
/* Einführung (Präsentation) als Pop-up hinter dem „?“ */
.einfuehrung { width: min(1180px, 94vw); height: min(860px, 92vh); padding: 0; border: 0; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; background: #fff; }
.einfuehrung::backdrop { background: rgba(16,35,63,.55); backdrop-filter: blur(2px); }
.einfuehrung .ekopf { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 16px; background: #10233f; color: #fff; font-size: .95rem; }
.einfuehrung .ekopf .mini { color: rgba(255,255,255,.7); flex: 1; }
.einfuehrung .ekopf a { color: #fff; opacity: .85; }
.einfuehrung .ekopf button { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.einfuehrung iframe { width: 100%; height: calc(100% - 40px); border: 0; display: block; }
@media (max-width: 700px) { .einfuehrung { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; } }
details.mailauf > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
details.mailauf > summary::-webkit-details-marker { display: none; }
details.mailauf > summary::before { content: "▸"; color: var(--blau2); margin-right: 2px; }
details.mailauf[open] > summary::before { content: "▾"; }