/* landscape.css — Defence Landscape (isolierter Testaufbau, UI-Phase).
 * Liquid-Glass auf Creme: der Werter-Header bleibt dunkelgrün, darunter
 * ein cremefarbener Arbeitsraum mit matten Glasflächen. Werter-Tokens
 * geben Creme (--boden), Grün (--green) und die Schriften; der Rest
 * steht hier. Nichts Gemeinsames wird angefasst. */

:root {
  --dl-creme: #F4ECDA; --dl-creme2: #EFE6D1;
  --dl-glas: rgba(255,255,255,.55); --dl-glas-rand: rgba(255,255,255,.7);
  --dl-tinte: #23281d; --dl-leise: #6c7360; --dl-gruen: #003300; --dl-gold: #B8924A;
  --dl-schatten: 0 10px 34px rgba(40,50,25,.13);
}
* { box-sizing: border-box; }

/* ── Grund: Creme mit weichen Farbblobs (damit das Glas etwas bricht) ── */
body.dl {
  margin: 0; min-height: 100vh; color: var(--dl-tinte);
  font-family: var(--sans, "Open Sans", system-ui, sans-serif);
  background:
    radial-gradient(42% 38% at 14% 20%, rgba(0,80,40,.10), transparent 70%),
    radial-gradient(40% 40% at 88% 14%, rgba(184,146,74,.14), transparent 70%),
    radial-gradient(46% 44% at 78% 92%, rgba(60,110,150,.10), transparent 72%),
    linear-gradient(160deg, var(--dl-creme), var(--dl-creme2));
  background-attachment: fixed;
}

/* ── Werter-Header + Enclustra ──────────────────────────────────────── */
.dl-marken { display: flex; align-items: center; gap: 12px; }
.dl-marken__x { color: rgba(255,255,255,.4); font-size: 1rem; }
.dl-marken__enc { height: 20px; width: auto; display: block; opacity: .96; }
.lh .lh__tag.meta { margin-left: 4px; }

/* ── App-Fenster ────────────────────────────────────────────────────── */
.dl-app { max-width: 1480px; margin: 0 auto; padding: 16px 20px 40px; }

.dl-topbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.dl-icn {
  flex: none; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--dl-glas); border: 1px solid var(--dl-glas-rand); color: var(--dl-tinte);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 1rem;
  box-shadow: 0 2px 10px rgba(40,50,25,.08);
}
.dl-icn:hover { color: var(--dl-gruen); }
.dl-suche { flex: 1 1 auto; position: relative; }
.dl-suche__lupe { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--dl-leise); font-size: .95rem; }
.dl-suche__in {
  width: 100%; height: 44px; padding: 0 16px 0 40px; border-radius: 14px;
  background: var(--dl-glas); border: 1px solid var(--dl-glas-rand); color: var(--dl-tinte);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: .95rem; font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(40,50,25,.07);
}
.dl-suche__in::placeholder { color: var(--dl-leise); }
.dl-suche__in:focus { outline: none; border-color: var(--dl-gruen); box-shadow: 0 0 0 3px rgba(0,51,0,.12); }

/* ── Dreispaltiges Raster, Sidebars klappbar ────────────────────────── */
.dl-raster { display: grid; grid-template-columns: 244px minmax(0,1fr) 332px; gap: 18px; align-items: start; }
.dl-raster.lz { grid-template-columns: minmax(0,1fr) 332px; }
.dl-raster.lz .dl-links { display: none; }
.dl-raster.rz { grid-template-columns: 244px minmax(0,1fr); }
.dl-raster.rz .dl-rechts { display: none; }
.dl-raster.lz.rz { grid-template-columns: 1fr; }

/* Glas-Grundform für Sidebars + große Flächen. */
.dl-links, .dl-rechts, .dl-held, .dl-karte__glas, .dl-news {
  background: var(--dl-glas); border: 1px solid var(--dl-glas-rand);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--dl-schatten), inset 0 1px 0 rgba(255,255,255,.65);
}

/* ── Linke Sidebar ──────────────────────────────────────────────────── */
/* Sticky bleibt, aber mit eigener Scrollhoehe: wird die Navigation hoeher als
   das Fenster, scrollt sie in sich statt erst am Seitenende erreichbar zu sein
   (Nutzerwunsch 08.10.2026). overflow auf dem Sticky-Element selbst bricht das
   Sticky nicht (nur ein Overflow am Vorfahren taete das). */
.dl-links { border-radius: 20px; padding: 14px; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.dl-nav { display: flex; flex-direction: column; gap: 3px; }
.dl-nav__h { margin: 12px 8px 2px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dl-leise); }
.dl-nav__i {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 12px; padding: 10px 12px;
  font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--dl-tinte);
}
.dl-nav__ic { width: 20px; text-align: center; color: var(--dl-leise); }
.dl-nav__i:hover { background: rgba(255,255,255,.5); }
.dl-nav__i--an { background: var(--dl-gruen); color: #fff; }
.dl-nav__i--an .dl-nav__ic { color: var(--dl-gold); }
.dl-links__fuss { display: flex; align-items: center; gap: 10px; padding: 10px 8px 2px; border-top: 1px solid rgba(0,0,0,.06); }
.dl-links__logo { height: 18px; width: auto; }
.dl-links__fuss .meta { color: var(--dl-leise); }

/* ── Mitte ──────────────────────────────────────────────────────────── */
.dl-mitte { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dl-sek { display: flex; flex-direction: column; gap: 12px; }
.dl-sek.aus, .dl-held.aus, .dl-karte.aus { display: none; }
.dl-sek__kopf h2 { margin: 0; font-family: var(--serif, "Merriweather", Georgia, serif); font-weight: 700; font-size: 1.25rem; color: var(--dl-tinte); }

/* Featured-Banner */
.dl-held { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 32px; min-height: 164px;
  background-image: linear-gradient(120deg, rgba(0,51,0,.9), rgba(0,51,0,.55) 50%, rgba(184,146,74,.5)); color: #fff; }
.dl-held__kick { color: rgba(255,255,255,.75) !important; }
.dl-held__titel { margin: 8px 0 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; max-width: 22ch; }
.dl-held__dek { margin: 10px 0 0; max-width: 54ch; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.dl-held__glanz { position: absolute; right: -40px; top: -60px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), rgba(255,255,255,.05) 60%, transparent 70%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }

/* App-Kacheln */
.dl-karten { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dl-karten--2 { grid-template-columns: repeat(2, 1fr); }
.dl-karte { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; min-height: 210px;
  box-shadow: var(--dl-schatten); transition: transform .18s ease, box-shadow .18s ease; isolation: isolate; }
.dl-karte--gross { min-height: 280px; }
.dl-karte:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(40,50,25,.22); }
.dl-karte__bild { position: absolute; inset: 0; background-image: var(--bild); background-size: cover; background-position: center;
  filter: saturate(1.05) contrast(1.02); transition: transform .5s ease; z-index: 0; }
.dl-karte:hover .dl-karte__bild { transform: scale(1.05); }
.dl-karte::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,24,16,0) 30%, rgba(20,24,16,.35) 60%, rgba(20,24,16,.72) 100%); }
.dl-karte__glas { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: block;
  border-radius: 16px; padding: 14px 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); color: #fff; box-shadow: none; }
.dl-karte__tag { display: inline-block; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dl-gold); background: rgba(0,0,0,.28); border-radius: 4px; padding: 2px 7px; }
.dl-karte__titel { display: block; margin: 8px 0 0; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
.dl-karte__dek { display: block; margin: 6px 0 0; font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.9); }

/* ── Rechte Sidebar: Nachrichten ────────────────────────────────────── */
.dl-rechts { border-radius: 20px; padding: 16px; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 18px;
  max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.dl-rechts__kopf .meta { color: var(--dl-leise); }
.dl-news { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.dl-news__h { margin: 0 0 10px; font-family: var(--serif); font-weight: 700; font-size: 1rem; color: var(--dl-tinte); }
.dl-news__liste { display: flex; flex-direction: column; gap: 10px; }
.dl-meldung { display: grid; grid-template-columns: 56px 1fr; gap: 10px; text-decoration: none; color: inherit;
  border-radius: 12px; padding: 7px; background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.55); }
.dl-meldung:hover { background: rgba(255,255,255,.62); }
.dl-meldung__bild { width: 56px; height: 56px; border-radius: 9px; background-size: cover; background-position: center; background-color: #ded3bb; }
/* Quellen-Monogramm statt Foto: der Ticker hat kein Bild, und die CSP
   laesst keine fremden Bild-Hosts zu. Ehrliche Flaeche statt Stockfoto. */
.dl-meldung__mono { flex: none; width: 56px; height: 56px; border-radius: 9px; background: #e7dcc4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--dl-gruen); }
.dl-news__leer { margin: 2px 0; font-size: .8rem; line-height: 1.4; color: var(--dl-leise); }
.dl-meldung__txt { min-width: 0; }
.dl-meldung__titel { font-size: .82rem; font-weight: 600; line-height: 1.28; color: var(--dl-tinte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dl-meldung__meta { margin-top: 3px; font-family: var(--mono); font-size: .58rem; letter-spacing: .03em; text-transform: uppercase; color: var(--dl-leise); }

/* ── Schmale Fenster ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .dl-raster { grid-template-columns: 1fr; }
  .dl-links, .dl-rechts { position: static; }
  .dl-raster.rz .dl-rechts, .dl-raster.lz .dl-links { display: none; }
}
@media (max-width: 620px) { .dl-karten--2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dl-karte, .dl-karte__bild { transition: none; } }

/* Die Systeme-Karte trägt die Drohnen-Grafik (SVG) auf dunklem Grund. */
.dl-karte--drohne .dl-karte__bild { background-color: #0c131f; background-position: center 44%; }
.dl-karte--drohne::after { background: linear-gradient(180deg, rgba(8,12,20,0) 46%, rgba(8,12,20,.5) 72%, rgba(8,12,20,.82) 100%); }

/* Technikfoto (Triebwerk im Pruefstand, seit 15.10.2026): hell und blau,
   darum etwas entsaettigt und unten kraeftiger abgedunkelt, damit es zu
   den anderen Fotokacheln passt und die Schrift im Glas lesbar bleibt. */
.dl-karte--technik .dl-karte__bild { filter: saturate(.8) contrast(1.04) brightness(.86); background-position: center 50%; }
.dl-karte--technik::after { background: linear-gradient(180deg, rgba(14,22,14,.12) 0%, rgba(14,22,14,.38) 55%, rgba(14,22,14,.82) 100%); }


/* data-app-pflicht (seit 20.10.2026): verborgen heisst verborgen, auch gegen display-Regeln der Kacheln */
[data-app-pflicht][hidden] { display: none !important; }