/* GPS Studio Web — EINE Optik für alle Seiten (Grilling 2, Marc 08.10.2026: „viel zu wirr“).
 *
 * Farben = Desktop-App, Farbwelt „Trailframe“ (Reisezoom-GPS-Studio/ui/css/app.css, 05.10.2026): Anthrazit als Grund,
 * Schiefer für Felder, Türkis für Auswahl/Regler/Route, Koralle NUR für die eine Hauptaktion je Seite, Text in warmem
 * Off-White. Schrift wie in der App: IBM Plex Sans (keine Serifen mehr).
 *
 * Wie das wirkt, ohne jede Seite umzuschreiben: Diese Datei wird auf JEDER Seite NACH den eigenen Stilen geladen und
 * belegt die Variablen der drei Seitenfamilien neu —
 *   Werkzeug-/Text-Seiten (pages/build_pages.py):  --bg --paper --paper2 --ink --muted --rule --green --terra …
 *   Startseite (index.html):                       --color-bg --color-paper … --font-sans --font-serif
 *   Video-Studio (assets/video/studio.css):        --bar --panel --raised --line --text --sub --accent …
 * Neue Seite? Ihre Variablen hier mit Trailframe belegen, nicht eigene Farben erfinden.
 * Ausnahme: die erzeugten Blog-Bausteine (laufen auf fremden Seiten) — die bleiben hell, eigene Stile im Baustein.
 */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); }

:root {
  /* Trailframe (Werte aus der Desktop-App) */
  --tf-bg0: #10151b; --tf-bg1: #151b22; --tf-bg2: #1c252e; --tf-bg3: #25313b; --tf-bg4: #2f3d49;
  --tf-line: #2a3742; --tf-line2: #3c4b58;
  --tf-text: #f4f1e9; --tf-dim: #c2c5c3; --tf-muted: #8e979c;
  --tf-accent: #48d6c4; --tf-accent-dim: #35b8a8; --tf-accent-ink: #0b2622;
  --tf-cta: #ff896b; --tf-cta-dim: #f2765a; --tf-cta-ink: #2b120b;
  --tf-ok: #5fd3a2; --tf-warn: #f2c46b; --tf-err: #ef6b62;
  --tf-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;

  /* Werkzeug-/Text-Seiten */
  --bg: var(--tf-bg1); --paper: var(--tf-bg2); --paper2: var(--tf-bg3); --ink: var(--tf-text); --muted: var(--tf-muted);
  --rule: var(--tf-line); --green: var(--tf-accent); --terra: var(--tf-cta); --terra-soft: rgba(255, 137, 107, .12);
  --yt: #e3352b; --sans: var(--tf-font); --serif: var(--tf-font);
  --on-accent: var(--tf-accent-ink); --accent-hover: #6fe0d2; --err: var(--tf-err); --field: var(--tf-bg3);
  --hint-bg: rgba(242, 196, 107, .08); --hint-line: rgba(242, 196, 107, .3);

  /* Startseite (index.html) */
  --color-bg: var(--tf-bg1); --color-paper: var(--tf-bg2); --color-paper-2: var(--tf-bg3); --color-ink: var(--tf-text);
  --color-muted: var(--tf-muted); --color-rule: var(--tf-line); --color-green: var(--tf-accent);
  --color-green-soft: rgba(72, 214, 196, .12); --color-terra: var(--tf-cta); --color-terra-soft: rgba(255, 137, 107, .12);
  --font-sans: var(--tf-font); --font-serif: var(--tf-font);

  /* Video-Studio */
  --bar: var(--tf-bg1); --panel: var(--tf-bg2); --raised: var(--tf-bg3); --line: var(--tf-line2); --text: var(--tf-text);
  --sub: var(--tf-dim); --accent: var(--tf-accent); --accent-ink: var(--tf-accent-ink); --route: var(--tf-cta);
  --font: var(--tf-font);

  /* ältere Studio-Namen (studio-shell.css, rzkarte.js-Stile) */
  --st-bg: var(--tf-bg1); --st-panel: var(--tf-bg2); --st-raised: var(--tf-bg3); --st-line: var(--tf-line); --st-text: var(--tf-text);
  --st-sub: var(--tf-dim); --st-muted: var(--tf-muted); --st-accent: var(--tf-accent); --st-accent-ink: var(--tf-accent-ink);
  --st-warn: var(--tf-warn);
}
html, body { background: var(--tf-bg1) !important; color: var(--tf-text); font-family: var(--tf-font); }
h1, h2, h3, h4 { font-family: var(--tf-font); font-weight: 700; letter-spacing: -.01em; color: var(--tf-text); }
a { color: var(--tf-accent); }
a:hover { color: #8be8dc; }
::selection { background: rgba(72, 214, 196, .35); }
:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }
input, select, textarea { color-scheme: dark; }

/* ── Knöpfe: Türkis für normale Aktionen, Koralle nur für die Hauptaktion (Datei wählen / Track laden / Anwenden) ── */
.btn, .rz-btn.primary, .tn-conv button { background: var(--tf-accent) !important; border-color: var(--tf-accent) !important; color: var(--tf-accent-ink) !important; }
.btn:hover, .rz-btn.primary:hover { background: #6fe0d2 !important; color: var(--tf-accent-ink) !important; }
.rz-btn { background: var(--tf-bg3); color: var(--tf-text); border-color: var(--tf-line2); }
.rz-btn.ghost { background: transparent; }
.drop-btn, .rz-drop-btn, .haupt, .btn.haupt, .rz-btn.haupt, .sk-haupt {
  background: var(--tf-cta) !important; border-color: var(--tf-cta) !important; color: var(--tf-cta-ink) !important; }
.drop-btn:hover, .rz-drop-btn:hover, .haupt:hover, .sk-haupt:hover { background: #ffa38a !important; }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

/* Felder */
select, input[type=text], input[type=number], input[type=email], input[type=search], input[type=datetime-local], textarea {
  background: var(--tf-bg3) !important; color: var(--tf-text) !important; border-color: var(--tf-line2) !important; }
input[type=range] { accent-color: var(--tf-accent); }
input[type=checkbox], input[type=radio] { accent-color: var(--tf-accent); }

/* Flächen, die in den Vorlagen fest hell waren */
.lang { display: inline-flex; gap: 2px; border: 1px solid var(--tf-line2); border-radius: 999px; padding: 2px; }
.lang a, .lang button { appearance: none; border: 0; background: none; cursor: pointer; font: 700 12px/1 var(--tf-font); color: var(--tf-muted);
  padding: 6px 10px; border-radius: 999px; min-width: 30px; min-height: 30px; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; }
.lang a:hover { color: var(--tf-text); }
.lang { background: transparent !important; border-color: var(--tf-line2) !important; }
.lang a.active, .lang button.active { background: var(--tf-accent) !important; color: var(--tf-accent-ink) !important; }
.fb-box textarea, .fb-box input { background: var(--tf-bg3) !important; color: var(--tf-text) !important; }
.fb-modal { background: rgba(5, 8, 11, .7) !important; }
.rz-privacy { background: var(--hint-bg) !important; border-color: var(--hint-line) !important; color: var(--tf-dim) !important; }
.rz-example { background: rgba(255, 137, 107, .1) !important; color: #ffb9a6 !important; border-color: rgba(255, 137, 107, .45) !important; }
.rz-status.ok, .st.ok { color: var(--tf-ok) !important; }
.rz-status.err, .st.err { color: var(--tf-err) !important; }
.rz-area { fill: rgba(72, 214, 196, .16); }
.rz-line { stroke: var(--tf-accent); }
.leaflet-container { background: var(--tf-bg3); }

/* Der Werkzeug-Arbeitsbereich: kein „Kasten im Kasten“ mehr — nur noch eine ruhige Fläche */
.werkbank { background: var(--tf-bg2); color: var(--tf-text); border: 1px solid var(--tf-line); border-radius: 16px;
  padding: 18px 18px 14px; margin: 18px 0 10px; position: relative; }
.werkbank::before { content: none; }
.werkbank [hidden], .weiter-studio[hidden], .rz-weiter[hidden] { display: none !important; }
@media (max-width: 560px) { .werkbank { margin-left: -6px; margin-right: -6px; padding: 14px 12px 10px; } }

/* ── Der Studio-Kopf (pages/bauteile.py: studio_kopf) ── */
.sk { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px 20px; min-height: 60px;
  background: var(--tf-bg0); border-bottom: 1px solid var(--tf-line); font-family: var(--tf-font); }
.sk-marke { display: flex; align-items: center; gap: 10px; color: var(--tf-text) !important; text-decoration: none; flex-shrink: 0; }
.sk-marke img { width: 30px; height: 30px; }
.sk-marke span { display: flex; flex-direction: column; line-height: 1.1; }
.sk-marke b { font-size: 16.5px; font-weight: 700; }
.sk-marke small { font-size: 11px; color: var(--tf-muted); letter-spacing: .02em; }
.sk-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.sk-nav a { padding: 8px 11px; border-radius: 9px; color: var(--tf-dim) !important; text-decoration: none; font-weight: 600;
  font-size: 14px; white-space: nowrap; border: 1px solid transparent; min-height: 36px; display: inline-flex; align-items: center; }
.sk-nav a:hover { color: var(--tf-text) !important; background: var(--tf-bg2); }
.sk-nav a[aria-current="page"] { color: var(--tf-text) !important; background: var(--tf-bg3); border-color: var(--tf-line2); }
.sk-nav a.sk-app { margin-left: auto; color: var(--tf-accent) !important; }
.sk-nav a.sk-app[aria-current="page"] { color: var(--tf-accent) !important; }
.sk .lang { flex-shrink: 0; }
.sk .lang a { min-height: 30px; }
.sk-menue { display: none; appearance: none; font: 600 14px/1 var(--tf-font); color: var(--tf-text); background: var(--tf-bg2);
  border: 1px solid var(--tf-line2); border-radius: 10px; padding: 9px 12px; min-height: 40px; cursor: pointer; margin-left: auto; }
.sk-menue b { color: var(--tf-accent); font-weight: 600; }
@media (max-width: 1080px) {
  .sk { flex-wrap: wrap; padding: 8px 14px; gap: 10px; }
  .sk-menue { display: inline-flex; gap: 6px; align-items: center; }
  .sk-nav { display: none; order: 9; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 4px; }
  .sk.offen .sk-nav { display: flex; }
  .sk-nav a { font-size: 15.5px; padding: 11px 12px; min-height: 44px; }
  .sk-nav a.sk-app { margin-left: 0; }
}
@media (max-width: 420px) { .sk-marke small { display: none; } .sk-menue span { display: none; } }

/* Fuß */
footer { border-top: 1px solid var(--tf-line) !important; color: var(--tf-muted) !important; }
footer a { color: var(--tf-dim) !important; }
footer a:hover { color: var(--tf-accent) !important; }

/* ── Desktop-App-Hinweis nach Ergebnissen (eine Zeile, dezent) ── */
.rz-app-zeile { margin: 12px 0 0; font-size: 13.5px; color: var(--tf-muted); }
.rz-app-zeile a { color: var(--tf-accent); font-weight: 600; }

/* ── Werkzeug-Karte (assets/rzkarte.js, MapLibre + OpenFreeMap, 08.10.2026) ── */
.rz-map { position: relative; background: #242a2e; }
.rz-map.rz-karte-laedt::after { content: "🗺️ …"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--st-sub, #aab3af); font-size: 15px; }
.rz-karte-ohne { margin: 0; padding: 40px 20px; text-align: center; color: var(--st-sub, #aab3af); font-size: 14px; }
.rz-karte-stile { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(21, 24, 27, .82); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px); }
.rz-karte-stile button { appearance: none; border: 0; background: none; color: #d6dcd9; font: 700 12px/1 Manrope, system-ui, sans-serif;
  padding: 7px 11px; min-height: 28px; border-radius: 999px; cursor: pointer; }
.rz-karte-stile button[aria-pressed="true"] { background: var(--st-accent, #96c9bf); color: var(--st-accent-ink, #0f1b18); }
.rz-karte-nadel { font-size: 20px; line-height: 1; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.rz-map .maplibregl-popup-content { font: 600 13px/1.4 Manrope, system-ui, sans-serif; color: #1c1814; padding: 7px 10px; }

/* Video-Hinweis auf Werkzeug-/Konverterseiten (früher App-Werbekasten in Koralle): ruhig, wie jede andere Fläche */
.cta { background: var(--tf-bg2) !important; border: 1px solid var(--tf-line) !important; }
.cta h3 { color: var(--tf-text); }
.cta p { color: var(--tf-muted) !important; }
.flow-note { background: transparent !important; border-color: var(--tf-line) !important; color: var(--tf-muted) !important; }
.guide { background: var(--tf-bg2) !important; border-color: var(--tf-line) !important; }
.guide ol li:before { background: var(--tf-accent) !important; color: var(--tf-accent-ink) !important; }
.related .chips a { background: var(--tf-bg2) !important; border-color: var(--tf-line2) !important; color: var(--tf-text) !important; }
.hero .kicker { color: var(--tf-accent) !important; }
#embed { border-color: var(--tf-line) !important; }
.em-badge { background: var(--tf-accent) !important; color: var(--tf-accent-ink) !important; }

/* App-Seite: Download = Hauptaktion (Koralle), Windows daneben als ruhiger Knopf */
.dl-btn { background: var(--tf-cta) !important; color: var(--tf-cta-ink) !important; box-shadow: none !important; }
.dl-btn:hover { background: #ffa38a !important; }
.dl-btn.win { background: transparent !important; color: var(--tf-text) !important; border: 1px solid var(--tf-line2) !important; }
.dl-btn.win:hover { border-color: var(--tf-accent) !important; }

/* Handy-Kopf: Marke · Sprache · ☰ in einer Zeile */
@media (max-width: 1080px) {
  .sk .lang { order: 2; margin-left: auto; }
  .sk-menue { order: 3; margin-left: 0; }
}
@media (max-width: 520px) {
  .sk-menue span, .sk-menue b { display: none; }
  .sk-menue { font-size: 18px; padding: 8px 12px; min-width: 44px; justify-content: center; }
  .sk-marke small { display: none; }
}

/* Video-Studio: die Hauptaktionen in Koralle (Datei wählen, Video erstellen, MP4 herunterladen) — der Rest Türkis */
#datei-knopf, #erstellen, #ex-laden { background: var(--tf-cta) !important; border-color: var(--tf-cta) !important; color: var(--tf-cta-ink) !important; }
#datei-knopf:hover, #erstellen:hover, #ex-laden:hover { background: #ffa38a !important; }

/* Fuß (pages/bauteile.py: fuss) — Aufbau hier, damit er auch auf Startseite und Video gleich aussieht */
footer:not(.fuss) { margin-top: 40px; padding: 22px 16px 60px; font-size: 13.5px; text-align: center; }
footer .row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
footer .row a { display: inline-block; min-height: 24px; line-height: 24px; font-weight: 600; }
/* Feedback-Fenster (pages/bauteile.py: feedback) — auch für Seiten ohne die Vorlagen-Stile (Video) */
.fb-modal { display: none; position: fixed; inset: 0; z-index: 4000; align-items: center; justify-content: center; padding: 20px; }
.fb-modal.open { display: flex; }
.fb-box { background: var(--tf-bg2); border: 1px solid var(--tf-line2); border-radius: 16px; max-width: 430px; width: 100%; padding: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); color: var(--tf-text); text-align: left; }
.fb-box h3 { margin: 0 0 6px; font-size: 20px; }
.fb-hint { margin: 0 0 12px; color: var(--tf-muted); font-size: 14px; }
.fb-box textarea, .fb-box input { width: 100%; font: 400 14px var(--tf-font); padding: 10px 11px; border: 1px solid var(--tf-line2); border-radius: 10px; box-sizing: border-box; }
.fb-box textarea { resize: vertical; min-height: 90px; margin-bottom: 9px; }
.fb-row { display: flex; gap: 9px; justify-content: flex-end; margin-top: 11px; }
.fb-row .btn { padding: 10px 16px; border-radius: 10px; font: 700 14px var(--tf-font); cursor: pointer; }
.fb-row .fb-ghost { background: transparent !important; color: var(--tf-text) !important; border: 1px solid var(--tf-line2) !important; }
.fb-status { min-height: 18px; font-size: 13px; font-weight: 700; text-align: right; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Neue Optik (Marc, 08.10.2026: „mach alles hübscher“ — Vorlage docs/mockups/20261008-neue-optik/)
   Grund mit leichtem Licht, Kopf mit Pillen-Navigation, Augenbrauen-Zeilen („— 01 / BEARBEITEN“), große zweifarbige
   Überschriften, Bereichskarten, Werkzeug-Zeilen, „Zuletzt im Studio“-Leiste, ruhiger Fuß.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --tf-gold: #f2c46b; --tf-radius: 20px; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 84% -4%, rgba(72, 214, 196, .07), transparent 32%),
              radial-gradient(ellipse at 8% 48%, rgba(255, 137, 107, .04), transparent 36%); }
html, body { background: var(--tf-bg0) !important; }

/* Kopf */
.sk { min-height: 70px; padding: 10px 28px; gap: 22px; background: rgba(16, 21, 27, .92); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid #27313b; }
.sk-marke img { width: 34px; height: 34px; }
.sk-marke b { font-size: 16.5px; }
.sk-marke small { font-size: 10px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--tf-accent) !important; margin-top: 3px; }
.sk-nav { gap: 2px; margin-left: 14px; }
.sk-nav a { font-size: 13.5px; color: #aebbbd !important; padding: 9px 12px; border-radius: 10px; border: 0; }
.sk-nav a:hover { background: var(--tf-bg3); }
.sk-nav a[aria-current="page"] { background: var(--tf-bg3); color: var(--tf-text) !important; box-shadow: inset 0 -2px var(--tf-accent); border: 0; }
.sk-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tf-dim); white-space: nowrap; }
.sk-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--tf-accent); box-shadow: 0 0 0 4px rgba(72, 214, 196, .15); }
.sk-status[hidden] { display: none; }
@media (max-width: 1240px) { .sk-status { display: none; } }

/* Augenbraue, große Überschriften, Leittext */
.rz-eyebrow, .hero .kicker, .start-eyebrow, .bereich-eyebrow {
  display: flex !important; align-items: center; gap: 10px; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .2em !important; text-transform: uppercase; color: var(--tf-accent) !important;
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
.rz-eyebrow::before, .hero .kicker::before, .start-eyebrow::before, .bereich-eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--tf-accent); flex: none; }
.rz-display, .start h1 { font-size: clamp(42px, 5vw, 76px) !important; line-height: 1.03 !important; letter-spacing: -.05em !important;
  font-weight: 600 !important; margin: 20px 0 22px !important; }
.rz-display em, .start h1 em, .hero h1 em { font-style: normal; color: var(--tf-accent); }

/* Werkzeug-, Konverter-, Fotos-, Teilen-Seiten: Kopfbereich links, groß */
.hero { text-align: left !important; padding: 54px 0 26px !important; }
.hero h1 { font-size: clamp(38px, 4.4vw, 64px) !important; line-height: 1.05 !important; letter-spacing: -.045em !important;
  font-weight: 600 !important; margin: 18px 0 14px !important; max-width: 920px; }
.hero p { font-size: 18px !important; line-height: 1.6; color: var(--tf-dim) !important; max-width: 640px; margin: 0 !important; }

/* Knöpfe: leicht anheben beim Darüberfahren */
.btn, .rz-btn, .drop-btn, .rz-drop-btn, .haupt, .bk, .bk-gross, .bk-konv, .rz-weiter-link { transition: transform .18s, background .18s, border-color .18s; }
.btn:hover, .rz-btn:hover, .drop-btn:hover, .rz-drop-btn:hover, .haupt:hover { transform: translateY(-2px); }

/* Flächen */
.werkbank, .card, .fold, .guide, .projekt, .rz-card { border-radius: var(--tf-radius) !important; }
.werkbank { background: linear-gradient(160deg, #1f2a32, #1a232b) !important; border-color: var(--tf-line) !important; padding: 22px !important; }

/* „Danach geht es weiter“ (pages/bauteile.py: weiter) */
.rz-weiter-block { margin: 70px 0 10px; }
.rz-weiter-block h2 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.035em; margin: 10px 0 20px; }
.rz-zeilen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rz-zeile { padding: 16px 18px; border: 1px solid var(--tf-line); border-radius: 14px; background: #1b242c; display: flex; align-items: center;
  gap: 13px; font-size: 14px; font-weight: 600; color: var(--tf-text) !important; text-decoration: none; min-height: 64px; }
.rz-zeile:hover { background: var(--tf-bg3); border-color: var(--tf-accent); }
.rz-zeile .glyph { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #183b3a; color: var(--tf-accent); font-size: 18px; }
.rz-zeile small { font-weight: 400; color: var(--tf-muted); display: block; margin-top: 2px; font-size: 12.5px; }
.rz-zeile .go { margin-left: auto; color: var(--tf-accent); }
@media (max-width: 900px) { .rz-zeilen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rz-zeilen { grid-template-columns: 1fr; } }

/* Fuß: links © , rechts Links */
footer:not(.fuss) { margin-top: 90px !important; padding: 30px 28px 46px !important; text-align: left !important; font-size: 12.5px !important; }
footer:not(.fuss) .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; }
footer:not(.fuss) .row { justify-content: flex-end; gap: 16px; }
footer:not(.fuss) .row a { font-weight: 500 !important; }
.rz-copy { color: var(--tf-muted); }
@media (max-width: 720px) { footer:not(.fuss) .wrap { display: block; } footer:not(.fuss) .row { justify-content: flex-start; margin-top: 12px; } }

/* Werkzeug-/Konverterseiten: Arbeitsbereich breit, Lesetext schmal (Entwurf: 1240 px Raster) */
main.wrap { max-width: 1160px !important; }
main.wrap > article, main.wrap > .guide, main.wrap > .related, main.wrap > .flow-note, main.wrap > .latest, main.wrap > .tools-nav,
.abgeleitet-text > article, .abgeleitet-text > .guide, .abgeleitet-text > .related, .abgeleitet-text > .flow-note { max-width: 820px; }
.hero { padding-left: 0 !important; }
/* Ablagefläche: ruhiger Rahmen, Türkis beim Darüberziehen (Koralle bleibt dem Knopf) */
.rz-drop, .drop { border-color: var(--tf-line2) !important; background: rgba(16, 21, 27, .35) !important; border-radius: 16px !important; }
.rz-drop:hover, .rz-drop.over, .drop:hover, .drop.over { border-color: var(--tf-accent) !important; background: rgba(72, 214, 196, .05) !important; }
/* Werkzeug-Übersicht am Seitenende leiser */
.tn-grid a { background: transparent !important; border-color: var(--tf-line2) !important; color: var(--tf-dim) !important; }
.tn-grid a:hover { border-color: var(--tf-accent) !important; color: var(--tf-text) !important; }
.tn-full { background: transparent !important; border-color: var(--tf-line2) !important; color: var(--tf-accent) !important; }
@media (max-width: 1080px) { .sk { padding: 8px 14px; gap: 10px; min-height: 60px; } .sk-nav { margin-left: 0; } }
/* Video-Studio: Augenbraue mit Strich wie überall */
.start .kicker:first-child { display: flex; align-items: center; gap: 10px; letter-spacing: .2em; font-size: 11px; color: var(--tf-accent); }
.start .kicker:first-child::before { content: ""; width: 26px; height: 1px; background: var(--tf-accent); }
footer:not(.fuss) a { text-decoration: none !important; }