/* ---------- Funktionen: Kernaussagen und Karten mit Vorführung ---------- */
.pillen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.pillen span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 16px;
               background: #071630; border: 1px solid #1E3556; color: #efeaff; }
.pillen svg { width: 18px; height: 18px; fill: none; stroke: #7FF0FE; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Je Zeile eine Vorführung, abwechselnd links und rechts, offen ohne äußeren Kasten */
.zeile { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: var(--abstand); }
#mehr > .zeile:first-child { margin-top: 0; }
.zeile.rechts { grid-template-columns: 1fr 1.55fr; }
.zeile.rechts .demo { order: 2; }
.zeile .txt h3, .sprachzeile h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: -.02em; }
.zeile .txt p { color: var(--muted); margin-top: 12px; font-size: 18px; max-width: 460px; }
.zeilenbild { display: block; width: min(100%, 440px); height: auto; margin: 0 0 22px -8px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55)); }
@media (max-width: 860px) {
  .zeile, .zeile.rechts { grid-template-columns: 1fr; gap: 22px; }
  .zeile.rechts .demo { order: 0; }
}

/* Sprachen: ruhige Zeile mit Fahnen */
.sprachzeile { margin-top: var(--abstand); text-align: center; }
.fahnenreihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px clamp(18px, 3vw, 40px); margin-top: 28px; }
.fahnenreihe div { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; color: #C8D6E8; }
.fahnenreihe svg { width: 48px; height: 32px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 8px 20px rgba(0, 0, 0, .4); }

/* Bühne der Vorführung: 640 × 400 Einheiten, per Skript auf die Kartenbreite skaliert */
/* Die Beispielbilder in den Vorführungen sind mit KI erzeugt: Zeichen unten rechts (Art. 50 KI-VO) */
.demo::after { content: ""; position: absolute; right: 6px; bottom: 6px; z-index: 60; width: 18px; height: 18px; background: url(/bilder/ki-logo-schwarz.webp) center / contain no-repeat; pointer-events: none; }
.ki-varianten h3 { margin: 22px 0 10px; font-size: 15px; }
.ki-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.ki-reihe figure { margin: 0; width: 118px; font-size: 12.5px; line-height: 1.3; opacity: .92; }
.ki-reihe figure span { display: flex; align-items: center; justify-content: center; height: 92px; margin-bottom: 6px; border-radius: 10px; background: linear-gradient(180deg, #2b3a67 0%, #9a5b8f 55%, #f0996a 100%); }
.ki-reihe figure span.leer { background: none; border: 1px dashed rgba(255, 255, 255, .3); }
.ki-reihe img { display: block; max-width: 84%; max-height: 68px; width: auto; height: auto; }
.df-ki { position: absolute; background: url(/bilder/ki-logo-schwarz.webp) center / contain no-repeat; }
.demo { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
        background: radial-gradient(120% 90% at 50% 0%, #0E2A4F 0%, #071630 55%, #041226 100%); }
.df-buehne { position: absolute; left: 0; top: 0; width: 640px; height: 400px; transform-origin: 0 0; font: 12px/1.3 "Segoe UI", system-ui, sans-serif; color: #E3ECF6; }
.df-buehne > *, .df-buehne div { position: absolute; }
.df-kamera { inset: 0; transform-origin: 320px 59px; }

.df-fenster { background: #041226; border: 1px solid #332b47; border-radius: 9px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.df-fenster.hell { background: #F2F6FB; border-color: #D3DEEA; color: #12253F; }
.df-titel { left: 0; right: 0; top: 0; height: 26px; display: flex; align-items: center; padding-left: 10px; font-size: 11px; color: #9FB2CC; background: rgba(255, 255, 255, .03); }
.df-fenster.hell .df-titel { background: #e8e5ef; color: #4E6584; }
.df-titel span { flex: 1; white-space: nowrap; overflow: hidden; }
.df-titel i { font-style: normal; width: 30px; text-align: center; font-size: 10px; }

.df-th { left: 0; top: 0; border-radius: 5px; background: #0B1C38 center / cover no-repeat; will-change: transform, opacity; }
.df-th.offline::after { content: ""; position: absolute; inset: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.df-knopf { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 7px; background: #0B1C38; border: 1px solid #1E3556; font-weight: 600; white-space: nowrap; }
.df-knopf svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.df-knopf.an { background: #00E2FD; border-color: #4FE9FE; color: #02234F; }
.df-suche { display: flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 7px; background: #041226; border: 1px solid #1E3556; transition: box-shadow .2s, border-color .2s; }
.df-suche.fokus { border-color: #4FE9FE; box-shadow: 0 0 0 3px rgba(0, 226, 253, .35); }
.df-suche svg { position: static; width: 14px; height: 14px; fill: none; stroke: #9FB2CC; stroke-width: 2.4; flex: none; }
.df-suche em { position: static; font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #0E2A4F; color: #7FF0FE; flex: none; }
.df-suche span { position: static; white-space: nowrap; font-size: 13px; color: #fff; }
.df-suche u { display: inline-block; width: 1.5px; height: 14px; background: #7FF0FE; vertical-align: -2px; margin-left: 1px; }
.df-treffer { font-size: 11px; color: #7FF0FE; font-weight: 600; transition: opacity .3s; }
.df-seite { padding: 6px 0; border-right: 1px solid #0E2140; }
.df-seite p { position: static; padding: 5px 12px; font-size: 11px; color: #B4C3D8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-seite p.an { background: rgba(0, 226, 253, .22); color: #fff; }
.df-seite p.grau { color: #6F84A3; }
.df-seite p.neu { color: #fff; background: rgba(0, 226, 253, .45); }
.df-seite small { color: #8FA3BF; float: right; margin-left: 6px; }

.df-zeiger { left: 0; top: 0; width: 16px; height: 24px; z-index: 20; pointer-events: none; will-change: transform; }
.df-zeiger svg { width: 100%; height: 100%; fill: #fff; stroke: #000; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.df-zeiger.kreuz svg { display: none; }
.df-zeiger.kreuz::before, .df-zeiger.kreuz::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
.df-zeiger.kreuz::before { left: 7px; top: -2px; width: 1.5px; height: 18px; }
.df-zeiger.kreuz::after { left: -2px; top: 7px; width: 18px; height: 1.5px; }
.df-welle { left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #7FF0FE; opacity: 0; z-index: 19; pointer-events: none; }
.df-tasten { display: flex; align-items: center; gap: 6px; z-index: 15; opacity: 0; transform-origin: center; }
.df-tasten kbd { font: 600 13px "Segoe UI", system-ui, sans-serif; padding: 6px 11px; border-radius: 7px; background: #F2F6FB; color: #071630; box-shadow: 0 3px 0 #9a93ad, 0 8px 20px rgba(0, 0, 0, .5); }
.df-tasten b { position: static; color: #fff; font-size: 14px; }

/* Laufwerke */
.df-lw { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 12px; background: #0B1C38; border: 1px solid #1E3556; transition: opacity .3s, border-color .3s; }
.df-lw svg { position: static; width: 40px; height: 28px; fill: none; stroke: #7FF0FE; stroke-width: 2; flex: none; transition: stroke .3s; }
.df-lw div { position: static; display: flex; flex-direction: column; }
.df-lw b { font-size: 13px; }
.df-lw small { color: #8FA3BF; font-size: 11px; }
.df-lw em { font-style: normal; font-size: 11px; color: #7ee2a0; margin-top: 2px; }
.df-lw i { right: 14px; top: 30px; width: 10px; height: 10px; border-radius: 50%; background: #3fd17a; box-shadow: 0 0 10px #3fd17a; transition: background .3s, box-shadow .3s; }
.df-lw.ab { opacity: .6; border-style: dashed; }
.df-lw.ab svg { stroke: #6F84A3; }
.df-lw.ab em { color: #9FB2CC; }
.df-lw.ab i { background: #5b5668; box-shadow: none; }
.df-lwmark { right: 3px; bottom: 3px; width: 18px; height: 13px; padding: 1px; border-radius: 3px; background: rgba(10, 8, 16, .75); }
.df-lwmark svg { width: 100%; height: 100%; fill: none; stroke: #7FF0FE; stroke-width: 3; }
.df-th.offline .df-lwmark svg { stroke: #8FA3BF; }
.df-info { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; background: #0B1C38; border: 1px solid #2E5C8A; font-size: 12px; white-space: nowrap; transition: opacity .3s; }
.df-info svg { position: static; width: 26px; height: 18px; fill: none; stroke: #8FA3BF; stroke-width: 2; }
.df-info span { position: static; }

/* Screenshots */
.df-adresse { left: 14px; right: 14px; top: 34px; height: 24px; padding: 4px 12px; border-radius: 12px; background: #fff; border: 1px solid #D3DEEA; font-size: 11px; color: #4E6584; }
.df-foto { border-radius: 6px; background-repeat: no-repeat; }
.df-dunkel { inset: 0; background: #010814; opacity: 0; z-index: 8; }
.df-auswahl { z-index: 9; border: 2px solid #7FF0FE; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.df-auswahl.leer { background: rgba(127, 240, 254, .14); border-style: dashed; z-index: 3; }
.df-schnipsel { z-index: 10; border-radius: 4px; background-repeat: no-repeat; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.df-blitz { inset: 0; background: #fff; opacity: 0; z-index: 11; }

/* Ziehen */
.df-blatt { background: #fff; border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.df-zeile { height: 7px; border-radius: 4px; background: #dcd8e6; }
.df-ziel { display: grid; place-items: center; border: 2px dashed #b9b2cc; border-radius: 6px; background: #f6f4fa; overflow: hidden; transition: border-color .2s, background .2s; }
.df-ziel span { position: static; color: #8FA3BF; font-size: 12px; }
.df-ziel.drueber { border-color: #00E2FD; background: #E0FAFF; }
.df-gefuellt { inset: 0; background: center / cover no-repeat; opacity: 0; }
.df-geist { left: 0; top: 0; width: 60px; height: 60px; border-radius: 6px; background: center / cover no-repeat; z-index: 18; box-shadow: 0 14px 30px rgba(0, 0, 0, .55); opacity: 0; }
.df-geist b { position: absolute; left: 34px; top: 52px; white-space: nowrap; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #071630; color: #fff; }

/* Ausschnitt */
.df-meldung { left: 190px; top: 352px; padding: 8px 14px; border-radius: 9px; background: #1f6f45; color: #fff; font-weight: 600; white-space: nowrap; z-index: 12; opacity: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.df-blase { padding: 8px 10px; border-radius: 10px 10px 10px 2px; background: #e4e0ec; color: #12253F; font-size: 11px; }
.df-eingabe { border-radius: 8px; border: 1px solid #d0cadc; background: #fff; transition: box-shadow .2s, border-color .2s; }
.df-eingabe.fokus { border-color: #00E2FD; box-shadow: 0 0 0 3px rgba(0, 226, 253, .2); }
.df-geklebt { border-radius: 10px; background-repeat: no-repeat; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); opacity: 0; transform-origin: 100% 100%; }

/* Farben und Themen */
.df-farbe { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); transition: box-shadow .2s, transform .2s; }
.df-farbe.an { box-shadow: 0 0 0 2px #041226, 0 0 0 4px #fff; transform: scale(1.1); }
.df-chip { padding: 4px 12px; border-radius: 999px; background: #0B1C38; border: 1px solid #1E3556; font-size: 12px; white-space: nowrap; transition: background .2s, border-color .2s; }
.df-chip.an { background: #00E2FD; border-color: #4FE9FE; color: #02234F; }

/* Kontextmenü (Rechtsklick) */
.df-menue { width: max-content; min-width: 172px; padding: 6px; border-radius: 9px; background: #071630; border: 1px solid #1E3556; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); z-index: 16; opacity: 0; }
.df-menue p { position: static; height: 26px; line-height: 26px; padding: 0 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; color: #D5E0EE; }
.df-menue p.an { background: #00E2FD; color: #02234F; }
.df-chip { transition: background .2s, border-color .2s, opacity .3s; }

/* Pfadzeile nach dem Sprung in den Ordner */
.df-pfad { font-size: 13px; color: #D5E0EE; white-space: nowrap; transition: opacity .3s; }
.df-pfad b { color: #fff; }
.df-pfad small { color: #8FA3BF; margin-left: 8px; }
.df-suche { transition: box-shadow .2s, border-color .2s, opacity .3s; }

/* Detailspalte */
.df-detail { border-left: 1px solid #0E2140; transition: opacity .15s; }
.df-dbild { left: 16px; top: 12px; width: 294px; height: 150px; border-radius: 6px; background: #0B1C38 center / cover no-repeat; }
.df-dname { position: absolute; left: 16px; top: 172px; font-size: 13px; color: #fff; }
.df-dort { position: absolute; left: 16px; top: 192px; font-size: 11px; color: #8FA3BF; }
.df-dkopf { position: absolute; left: 16px; font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8FA3BF; }
.df-dfarben { left: 16px; top: 236px; display: flex; gap: 6px; }
.df-dfarben span { width: 22px; height: 22px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.df-deig { left: 16px; top: 288px; width: 294px; }
.df-deig p { position: static; display: flex; font-size: 11px; color: #E3ECF6; line-height: 1.55; }
.df-deig p span { width: 92px; color: #8FA3BF; }
.df-dtags { left: 16px; top: 342px; display: flex; gap: 6px; }
.df-dtags em { font-style: normal; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #0B1C38; border: 1px solid #1E3556; white-space: nowrap; }
.df-farbpop { width: max-content; min-width: 230px; padding: 8px; border-radius: 9px; background: #071630; border: 1px solid #1E3556; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); z-index: 16; opacity: 0; }
.df-farbpop div { position: static; display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid #2d2540; margin-bottom: 4px; }
.df-farbpop div span { width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.df-farbpop div b { font-size: 13px; }
.df-farbpop div small { color: #8FA3BF; font-size: 11px; margin-left: auto; }
.df-farbpop p { position: static; height: 26px; line-height: 26px; padding: 0 8px; border-radius: 5px; font-size: 12px; white-space: nowrap; color: #D5E0EE; }
.df-farbpop p.an { background: #00E2FD; color: #02234F; }
.df-farbpop p i { display: inline-block; width: 12px; height: 12px; margin-left: 8px; border-radius: 3px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
/* Betrachter: drehen und gerade richten */
.df-vname { left: 14px; top: 39px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.df-vedits { left: 14px; top: 34px; display: flex; gap: 8px; opacity: 0; }
.df-ib { padding: 0 7px; }
.df-vflaeche { overflow: hidden; background: #020B1A; }
.df-vwrap { will-change: transform; }
.df-vfoto { overflow: hidden; will-change: transform; }
.df-vinhalt { left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.df-vcrop { border: 1.5px solid transparent; z-index: 2; }
.df-vcrop::before { content: ""; position: absolute; inset: 0; opacity: var(--raster, 0); background-repeat: no-repeat;
  background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px; background-position: 33.33% 0, 66.67% 0, 0 33.33%, 0 66.67%; }
.df-dreh { left: 0; top: 0; width: 22px; height: 22px; z-index: 20; pointer-events: none; opacity: 0; will-change: transform; }
.df-dreh svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.df-dreh svg .u { stroke: #000; stroke-width: 4.6; }
.df-winkel { left: 0; top: 0; padding: 3px 8px; border-radius: 6px; background: rgba(2, 11, 26, .88); border: 1px solid #1E3556; color: #7FF0FE; font-weight: 600; white-space: nowrap; z-index: 21; opacity: 0; }

/* Orte: Globus mit Küsten und Ländergrenzen (globus.json), Fotos als runde Vorschaubilder mit Anzahl, Ort des gewählten Fotos */
.df-karte { background: #020b1a; overflow: hidden; }
.df-karte svg { position: absolute; left: 0; top: 0; width: 612px; height: 224px; }
.df-karte .land { fill: #1b4177; fill-rule: evenodd; }
.df-karte .grenze { fill: none; stroke: #5d82bd; stroke-width: .6; stroke-linejoin: round; }
.df-karte .netz { fill: none; stroke: #13294b; stroke-width: .5; }
.df-karte .rand { fill: none; stroke: #3d6fb5; stroke-opacity: .5; stroke-width: 1; }
.df-blase { left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #00E2FD; background: #0B1C38 center / cover no-repeat; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); will-change: transform, opacity; }
.df-blase.gewaehlt { border-color: #fff; box-shadow: 0 0 0 3px rgba(0, 226, 253, .6), 0 3px 10px rgba(0, 0, 0, .55); }
.df-blase b { position: absolute; right: -7px; bottom: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #00E2FD; color: #02234F; font: 700 11px/18px "Segoe UI", system-ui, sans-serif; text-align: center; }
.df-kartehinweis { left: 10px; bottom: 8px; padding: 4px 10px; border-radius: 7px; background: rgba(4, 18, 38, .88); color: #9db0cc; font-size: 11px; white-space: nowrap; }
.df-ortinfo { display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; border-radius: 8px; background: rgba(4, 30, 60, .92); border: 1px solid rgba(0, 226, 253, .55); opacity: 0; z-index: 5; white-space: nowrap; }
.df-ortinfo b { position: static; color: #fff; font-size: 12.5px; }
.df-ortinfo span { position: static; color: #9FB2CC; font-size: 11px; }
.df-th.gewaehlt { box-shadow: 0 0 0 2px #00E2FD; }
.df-fuss { font-size: 11px; color: #8FA3BF; white-space: nowrap; }
/* Zeitraum: Leiste mit Säulen je Jahr, zwei Griffe, Anzahl */
.df-zleiste { background: #071833; border-top: 1px solid #0E2140; border-bottom: 1px solid #0E2140; opacity: 0; }
.df-zd { font-weight: 600; font-size: 12px; color: #67eeff; text-align: center; font-variant-numeric: tabular-nums; }
.df-zbalken { background: #1b3a63; border-radius: 1px 1px 0 0; }
.df-zbalken.an { background: #00b8d0; }
.df-zschiene { background: #112542; border-radius: 2px; }
.df-zwahl { background: #00E2FD; border-radius: 2px; }
.df-zgriff { left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #f1f6ff; border: 2px solid #00E2FD; box-sizing: border-box; will-change: transform; }
.df-zanz { font-size: 11.5px; color: #9db0cc; white-space: nowrap; opacity: 0; }