/* ============================================================
   Look „Landschaft“ (24.10.2026): gemaltes Landschaftsbild über die
   ganze Fläche, ein dunkler Verlauf darüber, Karten und Panels aus
   dunklem Rauchglas mit heller Schrift, auch im hellen Modus.
   Aktiv nur mit <html data-look="landschaft">; das setzt
   look-landschaft.js, und nur dort, wo main.py data-landschaft
   stempelt (AIOS_CHAT_LOOK_LANDSCHAFT=1, heute nur die Demo).
   Ohne data-look="landschaft" ändert diese Datei nichts.

   Herkunft der Gestaltung: die Open-Source-Mac-App von
   https://github.com/maxtrigify/Otto (Apache License 2.0). Übernommen
   sind nur Zahlenwerte aus deren Code (Verlauf über dem Bild, Glas,
   Rand, Lichtkante, Schatten, Radien, Schriftbild der Beschriftungen).
   Bilder, Name und Logo stammen nicht von dort; die drei Motive unter
   static/look-landschaft/ sind eigens erzeugt (GPT Image 2.5).

   Farben: Akzent aus BRAND_ACCENT der Instanz (theme.css), für Schrift
   auf dunklem Glas aufgehellt. Nichts fest eingebaut.
   Kontrast gemessen am 24.10.2026 auf der Demo (Werte unten).
   ============================================================ */

/* ─── Grundwerte ─────────────────────────────────────────────────── */
/* html behält die Marken-Tokens aus theme.css. --look-marke friert den
   Markenton dort ein, body leitet daraus die hellen Akzente ab (auf
   demselben Element wäre das ein Zirkelbezug). */
[data-look="landschaft"] {
  --look-marke: var(--accent);
  --look-grund: 8 11 15;                 /* dunkle Grundfarbe des Verlaufs */
  --look-scrim-a: .68; --look-scrim-b: .66; --look-scrim-c: .80;
  --look-glas: rgb(0 0 0 / .34);
  --look-bild: url("/static/look-landschaft/berge.webp");
  background: rgb(var(--look-grund));
  color-scheme: dark;
}
[data-look="landschaft"][data-theme="light"] {
  --look-scrim-a: .64; --look-scrim-b: .60; --look-scrim-c: .76;
  --look-glas: rgb(0 0 0 / .48);
}
[data-look="landschaft"][data-motiv="nebelwald"] { --look-bild: url("/static/look-landschaft/nebelwald.webp"); }
[data-look="landschaft"][data-motiv="abendrot"] { --look-bild: url("/static/look-landschaft/abendrot.webp"); }

/* Neutrale Tokens: in beiden Themes dunkles Glas, helle Schrift. */
[data-look="landschaft"] body {
  --font: var(--font-inter);
  --bg: transparent;
  --bg-elev: var(--look-glas);
  --surface: var(--look-glas);
  --surface-2: rgb(255 255 255 / .07);
  --border: rgb(255 255 255 / .10);
  --border-strong: rgb(255 255 255 / .16);
  --text: #f5f7fa;
  --text-mid: rgb(255 255 255 / .84);
  --text-dim: rgb(255 255 255 / .74);
  --overlay: rgb(255 255 255 / .06);
  --overlay-faint: rgb(255 255 255 / .03);
  --overlay-hover: rgb(255 255 255 / .07);
  --overlay-soft: rgb(255 255 255 / .04);
  --overlay-hairline: rgb(255 255 255 / .02);
  --code-bg: rgb(255 255 255 / .09);
  --pre-bg: rgb(0 0 0 / .55);
  --header-bg: transparent;
  --scrim-bg: rgb(0 0 0 / .45);
  --scrim-bg-strong: rgb(0 0 0 / .55);
  --rm-bg: rgb(14 17 22 / .92);
  /* Akzent: Markenton zu Weiß gemischt, damit er auf dunklem Glas trägt */
  --accent: color-mix(in oklch, var(--look-marke) 42%, #fff);
  --accent-2: color-mix(in oklch, var(--look-marke) 32%, #fff);
  --accent-bright: color-mix(in oklch, var(--look-marke) 25%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-glow-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --on-accent: #0b0e12;
  --danger: #ff8f86; --danger-strong: #ff8f86;
  --warn: #ffcf6b; --warn-text: #ffd27a; --warn-bg: rgb(255 200 80 / .12); --warn-border: rgb(255 200 80 / .45);
  --orange: #ffab5e;
  --ok: #6ee09a;
  --info: #9cc2ff;
  --ton-claude: #f0a283;
  --ton-gpt: #b8adff;
  background: transparent;
  color: var(--text);
}

/* ─── Bild, Zoom, Verlauf ────────────────────────────────────────── */
/* Beide Ebenen hängen am Wurzel-Element, also ohne neues HTML. */
[data-look="landschaft"]::before,
[data-look="landschaft"]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
}
[data-look="landschaft"]::before {
  z-index: -2;
  background: var(--look-bild) center 62% / cover no-repeat;
  transform-origin: 50% 62%;
  animation: landschaft-zoom 60s ease-in-out infinite alternate;
}
[data-look="landschaft"]::after {
  z-index: -1;
  background: linear-gradient(to bottom,
    rgb(var(--look-grund) / var(--look-scrim-a)) 0%,
    rgb(var(--look-grund) / var(--look-scrim-b)) 55%,
    rgb(var(--look-grund) / var(--look-scrim-c)) 100%);
}
@keyframes landschaft-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }

/* Die Orbit-Kugel bleibt unter diesem Look aus (look-landschaft.js) */
[data-look="landschaft"] #look-fx { display: none; }

/* ─── Glas: Karten, Panels, Eingabefeld ──────────────────────────── */
[data-look="landschaft"] :is(
  .sidebar, .sb-rail, .sb-spalte, .settings-sheet, .tab-sheet, .auth-card,
  .kz-kachel, .kz-box, .tb-karte, .apps-kachel
),
[data-look="landschaft"] .msg.assistant .bubble {
  background: linear-gradient(90deg, rgb(255 255 255 / .10), transparent 50%) top / 100% 1px no-repeat,
              var(--look-glas);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgb(255 255 255 / .10);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 14px 20px rgba(0, 0, 0, .08);
}
[data-look="landschaft"] :is(.msg.assistant .bubble, .kz-kachel, .kz-box, .tb-karte, .apps-kachel,
  .sb-user-popover, .auth-card) {
  border: 1px solid rgb(255 255 255 / .10);
  border-radius: 14px;
}
[data-look="landschaft"] :is(.settings-sheet, .tab-sheet) { border-radius: 16px 16px 0 0; }
/* Seitenleisten liegen am Rand: kein Schatten, nur die Trennlinie */
[data-look="landschaft"] :is(.sidebar, .sb-rail, .sb-spalte) { box-shadow: none; }
[data-look="landschaft"] .msg.assistant .bubble { border-bottom-left-radius: 6px; }

/* Eingabefeld des Chats: fast deckend dunkel, Radius 16 */
[data-look="landschaft"] .compose-card {
  background: rgb(var(--look-grund) / .94);
  border: 1px solid rgb(255 255 255 / .10);
  border-radius: 16px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 14px 20px rgba(0, 0, 0, .08);
}
[data-look="landschaft"] .compose-card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 14px 20px rgba(0, 0, 0, .08);
}
[data-look="landschaft"] .send-btn { border-radius: 9px; }
[data-look="landschaft"] .send-btn:not(:disabled) { background: var(--accent); color: var(--on-accent); }

/* Nutzer-Blase: Akzent als getöntes Glas statt voller Fläche */
[data-look="landschaft"] .msg.user .bubble {
  background: color-mix(in srgb, var(--look-marke) 45%, rgb(0 0 0 / .55));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Kopfzeile des Chats und Reiterleiste: leichtes Glas */
[data-look="landschaft"] :is(.header, .chat-tabs) {
  background: var(--look-glas);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Blätter (Profil, Chat-Einstellungen): kräftigeres Glas, sie liegen über
   der Oberfläche statt über dem Bild; der feste Kopf deckt beim Scrollen */
[data-look="landschaft"] :is(.settings-sheet, .tab-sheet) { background: rgb(var(--look-grund) / .82); }
[data-look="landschaft"] :is(.settings-sheet .sheet-kopf, .pf-page-head) { background: rgb(var(--look-grund) / .92); }

/* Alles, was ÜBER dem Inhalt liegt (Dialoge, Menüs, Schubladen, Leisten):
   fast deckend, sonst scheinen Zahlen und Text darunter durch (Phillip
   24.10.2026, Einstellungen der Kennzahlen). Liste aus index.html: jede
   Regel mit position fixed/absolute und Fläche aus --bg/--bg-elev/--surface. */
[data-look="landschaft"] :is(
  dialog, [popover], [role="dialog"], [role="menu"], [role="listbox"],
  .ac-review, .ac-unten-leiste, .au-fach, .au-filter-panel, .au-mikro, .bp-treffer,
  .conn-banner, .crm-leiste, .ct-pop, .ein-sp, .fi-fach, .fi-mikro, .file-add-menu,
  .inspector, .mkdir-prompt, .modul-hinweis, .preview-panel, .project-menu, .row-menu,
  .rv-bar, .rv-toast, .seo-vleiste .seo-knoepfe, .sk-epick, .sk-gmenue, .sk-kmenue,
  .sk-melde, .sk-pop, .sk-tb, .stop-menue, .tb-fach, .tb-menue, .tb-plan-mikro,
  .topic-assign-menu, .upload-status, .uv-at, .viewer-modal, .leiste-unten, .sb-user-popover
) {
  background: rgb(var(--look-grund) / .94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgb(255 255 255 / .12);
}
[data-look="landschaft"] dialog::backdrop { background: rgb(0 0 0 / .55); }
/* Am Handy schiebt sich die Seitenleiste über den Chat */
@media (max-width: 767px) {
  [data-look="landschaft"] body .sidebar { background: rgb(var(--look-grund) / .94); }
}

/* Knöpfe ohne eigene Fläche bekommen eine, sonst stehen sie auf dem Bild */
[data-look="landschaft"] .knopf:not(.haupt) { background-color: rgb(0 0 0 / .28); }
/* Gewählt: Akzentrand, getönte Fläche, weiße Schrift */
[data-look="landschaft"] :is(.knopf.an, .knopf[aria-pressed="true"], .seg button.active) {
  background: color-mix(in srgb, var(--accent) 24%, rgb(0 0 0 / .35));
  border-color: var(--accent);
  color: #fff;
}

/* Die Mitte der Leiste scrollt; der Rand blendet aus, statt Namen hart abzuschneiden */
[data-look="landschaft"] body.zentrale-an .sb-rail .sb-rail-mitte {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

/* Chips 6 bis 8 px statt Pillen */
[data-look="landschaft"] :is(.hchip, .compose-config .hchip, .kz-chip, .seg button, .knopf,
  .tab-trigger, .msg-actions button, .tb-knopf, .task-tag, .tool-tag, .file-chip) {
  border-radius: 8px;
}
[data-look="landschaft"] :is(.sb-nav-btn, .session-item, .sb-apps-zeile) { border-radius: 10px; }

/* ─── Schrift ────────────────────────────────────────────────────── */
[data-look="landschaft"] :is(h1, h2, h3, .empty h1, .kz-kopf h2, .header-title, .sheet-kopf h2) {
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Kleine Beschriftungen: Monospace, Versalien, gesperrt, gedämpft */
[data-look="landschaft"] :is(
  .sidebar-section-label, .session-when, .sb-apps-abschnitt, .msg-meta, .sheet-label:not(.pf-section),
  .tb-stunde-schild, .tb-quelle, .apps-ziel, .kz-kachel .n, .compose-hint, .empty-label
) {
  font-family: var(--font-code);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-dim);
}
/* Diese stehen direkt auf dem Bild, nicht auf Glas: eine Stufe heller */
[data-look="landschaft"] :is(.kz-stand, .kz-zeitraum, .chat-topic-chip) { color: var(--text-mid); }
[data-look="landschaft"] .tb-gitter .tb-stunde-schild { color: var(--text); }

/* ─── Weniger Bewegung, weniger Transparenz ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-look="landschaft"]::before { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  [data-look="landschaft"]::before, [data-look="landschaft"]::after { display: none; }
  [data-look="landschaft"], [data-look="landschaft"][data-theme] { --look-glas: rgb(24 28 34); }
  [data-look="landschaft"] body { --bg: rgb(var(--look-grund)); }
  [data-look="landschaft"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}