/* SEGELKEN JARVIS — Look „klar" (Jarvis-Umbau, Vorschau 26.09.2026)
   Ruhiger als das Command-Center: eine Schrift (Inter wie kh-segelken.de), Segelken-Grün als
   einziger Akzent, ruhige Flächen statt Glühen, Neuronen-Netz und Scanlines aus.
   Alles hängt an body[data-look="klar"] — „LOOK: COMMAND" schaltet die alte Optik zurück.
   Dazu: Menü MEHR, Unterreiter, Vorschau-Kennung (gelten in beiden Looks). */

/* ---------- gilt in beiden Looks ---------- */
.nur-klar { display: none; }
body[data-look="klar"] .nur-klar { display: inline; }
body[data-look="klar"] .nur-command { display: none; }

.tabs { align-items: center; }
.tabs-mehr { position: relative; display: inline-flex; }
.tabs-mehr > button { background: none; border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer; color: var(--ink2);
  font-size: 12.5px; letter-spacing: 2px; font-weight: 700; }
.tabs-mehr > button:hover, .tabs-mehr > button.aktiv { color: var(--akz); }
.mehr-menue { position: absolute; top: calc(100% + 8px); right: 0; z-index: 25; min-width: 220px; display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--linie2); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.mehr-menue button { text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 12px; cursor: pointer;
  color: var(--ink2); font-size: 12.5px; letter-spacing: 1.5px; font-weight: 700; }
.mehr-menue button:hover, .mehr-menue button.aktiv { background: rgba(var(--akz-rgb), .12); color: var(--akz); }

.unterreiter { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 10px;
  border: 1px solid var(--linie); background: rgba(0,0,0,.25); flex-wrap: wrap; }
.unterreiter button { background: none; border: 0; border-radius: 7px; padding: 8px 14px; cursor: pointer; color: var(--ink3);
  font-size: 11.5px; letter-spacing: 1.4px; font-weight: 700; }
.unterreiter button.an { background: rgba(var(--akz-rgb), .16); color: var(--akz); }

.vorschau-chip { display: inline-block; margin-right: 6px; font-size: 10.5px; letter-spacing: 1.6px; font-weight: 700;
  color: var(--warn); border: 1px solid rgba(232,163,58,.45); border-radius: 999px; padding: 3px 9px; vertical-align: middle; }

/* ---------- Look „klar" ---------- */
body[data-look="klar"] {
  --bg: #0d1311; --bg2: #121a17;
  --glas: #141c19; --glas2: #111815;
  --linie: rgba(255,255,255,.07); --linie2: rgba(255,255,255,.13);
  --ink: #eef3f0; --ink2: #c9d3ce; --ink3: #93a39b;
  --akz: #34b36b; --akz-tief: #008739; --akz-rgb: 52,179,107; --akz-glow: rgba(52,179,107,.28);
  --mono: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --r: 12px;
  font-size: 15px;
}
body[data-look="klar"]::after { display: none; }
body[data-look="klar"] #bgnetz { display: none; }
body[data-look="klar"] #accentbtn, body[data-look="klar"] button[onclick="App.farbe()"] { display: none; }
body[data-look="klar"] .tabs-mehr > button { letter-spacing: .06em; font-weight: 600; font-size: 13.5px; }

/* Kopf: Marke, Reiter, Uhr ruhiger */
body[data-look="klar"] .kopf { background: var(--bg); border-bottom: 1px solid var(--linie); padding: 12px 22px; }
body[data-look="klar"] .puls { animation: none; box-shadow: none; background: var(--akz); }
body[data-look="klar"] .marke h1 { font-size: 17px; letter-spacing: .08em; font-weight: 700; }
body[data-look="klar"] .marke h1 b { color: var(--ink); }
body[data-look="klar"] .marke h1 .nur-klar { color: var(--akz); margin-left: 4px; }
body[data-look="klar"] .marke p { display: none; }
body[data-look="klar"] .tabs { background: var(--glas2); border-radius: 12px; padding: 4px; gap: 2px; }
body[data-look="klar"] .tabs button { letter-spacing: .06em; font-weight: 600; font-size: 13.5px; padding: 10px 20px; border-radius: 9px; }
body[data-look="klar"] .tabs button.aktiv { background: var(--akz); color: #06130b; box-shadow: none; }
body[data-look="klar"] #uhr { font-size: 22px; font-weight: 600; letter-spacing: .02em; text-shadow: none; }
body[data-look="klar"] .klein { letter-spacing: .02em; }
body[data-look="klar"] .mini { letter-spacing: .06em; font-weight: 600; border-radius: 8px; }
body[data-look="klar"] .mehr-menue button, body[data-look="klar"] .unterreiter button { letter-spacing: .05em; font-weight: 600; font-size: 13px; }

/* Karten: Fläche statt Glas-Glühen */
body[data-look="klar"] .karte { background: var(--glas); backdrop-filter: none; box-shadow: none; border-radius: var(--r); }
body[data-look="klar"] .karte::before { display: none; }
body[data-look="klar"] .karte h2 { letter-spacing: .08em; font-weight: 600; font-size: 12px; }
body[data-look="klar"] h1, body[data-look="klar"] h2, body[data-look="klar"] h3 { text-shadow: none; }
body[data-look="klar"] .aufg, body[data-look="klar"] .heute { border-radius: 10px; }
body[data-look="klar"] .aufg .titel, body[data-look="klar"] .heute .titel { font-weight: 600; font-size: 14px; }

/* Untere Frage-Leiste */
body[data-look="klar"] .kleiste { background: var(--bg); border-top: 1px solid var(--linie); }
body[data-look="klar"] .kleiste input { background: var(--glas2); }
body[data-look="klar"] .kleiste .senden, body[data-look="klar"] #login button { background: var(--akz); color: #06130b; box-shadow: none; }
body[data-look="klar"] .kleiste input::placeholder { letter-spacing: .04em; }

/* Anmeldung */
body[data-look="klar"] #login .ring { display: none; }
body[data-look="klar"] #login form { backdrop-filter: none; background: var(--glas); }
body[data-look="klar"] #login h1 b { text-shadow: none; color: var(--akz); }

/* Angebots-Arbeitsplatz im klaren Look */
body[data-look="klar"] .ak-btn, body[data-look="klar"] .ak-kt button.an, body[data-look="klar"] .ak-schritte .laeuft { color: #06130b; }
body[data-look="klar"] .ak-btn { font-family: var(--mono); letter-spacing: .06em; font-weight: 600; }

/* Handy: Kopf einspaltig, Reiter wischbar, Uhr weg */
@media (max-width: 760px) {
  body[data-look="klar"] .kopf { padding: 10px 14px; gap: 8px; }
  body[data-look="klar"] .zeit #uhr, body[data-look="klar"] .zeit #datum, body[data-look="klar"] .zeit #sync { display: none; }
  body[data-look="klar"] .tabs { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  body[data-look="klar"] .tabs button { padding: 10px 14px; white-space: nowrap; flex: 1 0 auto; }
  body[data-look="klar"] .view { padding: 12px 14px 120px; }
  .mehr-menue { position: fixed; top: 118px; left: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { body[data-look="klar"] * { transition: none !important; } }