/* ============================================================
   techmacherOS — Website als futuristisches Betriebssystem
   Basis: techmacher Design System (Dark-first · Signal-Green)
   ============================================================ */

/* ---------- Fonts (self-hosted, DSGVO-konform) ---------- */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/space-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-var.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-700.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --ink-900: #0B0826; --ink-850: #100C30; --ink-800: #16113B; --ink-700: #1F1950; --ink-600: #2B2468;
  --green-300: #8BFFBE; --green-400: #45FF93; --green-500: #00FF6C; --green-600: #00E061; --green-700: #00BB51;
  --fg-1: #FFFFFF; --fg-2: #C7C4E0; --fg-3: #8B87AE; --fg-on-green: #062012;
  --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.16);
  --danger: #FF5A6E; --warn: #FFC24B;
  --acryl: rgba(16, 12, 48, 0.72);
  --acryl-solid: rgba(16, 12, 48, 0.94);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;
  --shadow-win: 0 24px 80px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
  --glow-green: 0 0 0 1px rgba(0,255,108,0.30), 0 12px 48px -8px rgba(0,255,108,0.45);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --tb-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--ink-900); color: var(--fg-1);
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* hidden-Attribut muss auch gegen display:flex-Regeln gewinnen (BSOD, Shutdown, Fenster) */
[hidden] { display: none !important; }
a { color: var(--green-400); text-decoration: none; }
a:hover { color: var(--green-300); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
svg { display: block; }

.os { position: fixed; inset: 0; overflow: hidden; }

/* Nur für Screenreader — visuell ausgeblendet, aber im Dokument vorhanden */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ============ WALLPAPER ============ */
.wallpaper { position: absolute; inset: 0; background: radial-gradient(120% 140% at 70% 110%, var(--ink-700) 0%, var(--ink-850) 45%, var(--ink-900) 100%); }
.wp-glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 32% at 72% 78%, rgba(0,255,108,0.13), transparent 70%),
    radial-gradient(30% 28% at 18% 22%, rgba(43,36,104,0.55), transparent 70%);
  animation: wpDrift 26s ease-in-out infinite alternate;
}
@keyframes wpDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }

/* ============ WALLPAPER-MEDIA (Ambient-Video-Slider) ============ */
.wp-media { position: absolute; inset: 0; }
.wp-media video, .wp-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1800ms ease;
  /* Grund-Grading, damit jedes Material in die Markenwelt passt */
  filter: saturate(0.8) brightness(0.72) contrast(1.05);
}
.wp-media .active { opacity: 1; }
/* Standbild-Fallback (Reduced Motion / Datensparmodus): langsamer Ken-Burns-Zoom */
.wp-media img.kb { animation: kenburns 20s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(1.5%, -1.5%); } }

/* Farb-Grade: Ink-Ton + dezenter Signal-Grün-Hauch über dem Video */
.wp-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 70% 78%, rgba(0,255,108,0.07), transparent 70%),
    linear-gradient(rgba(11,8,38,0.5), rgba(11,8,38,0.5));
}
/* Vignette: Kanten & Ecken laufen ohne harte Übergänge ins Wallpaper aus */
.wp-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 90% at 50% 45%, transparent 36%, rgba(11,8,38,0.55) 68%, rgba(11,8,38,0.94) 100%),
    linear-gradient(180deg, rgba(11,8,38,0.75) 0%, transparent 16% 80%, rgba(11,8,38,0.9) 100%);
}
/* Grade + Vignette nur zeigen, wenn Media aktiv ist */
.wp-grade, .wp-vignette { opacity: 0; transition: opacity 1200ms ease; }
.wallpaper.has-media .wp-grade, .wallpaper.has-media .wp-vignette { opacity: 1; }

/* ============ WALLPAPER-CAPTION (Szenen-Botschaft) ============ */
.wp-caption {
  position: absolute; top: 52px; right: 52px; z-index: 1;
  max-width: 460px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  text-align: right;
  pointer-events: none;
}
/* lokales Scrim: dunkelt den hellen Himmel hinter dem Text ab */
.wp-caption::before {
  content: ""; position: absolute; z-index: -1;
  inset: -70px -90px -70px -140px;
  background: radial-gradient(75% 75% at 65% 45%, rgba(11,8,38,0.55), transparent 78%);
}
.wpc-kicker {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--green-400);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.wpc-title {
  font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.12;
  color: var(--fg-1);
  text-shadow: 0 2px 28px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45);
}
.wpc-sub {
  font-size: 15px; line-height: 1.55; max-width: 42ch;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 16px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.4);
}
.wpc-link {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px; padding: 4px 0;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  color: var(--green-400);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  transition: color 140ms, gap 200ms var(--ease-out);
}
.wpc-link svg { width: 16px; height: 16px; transition: translate 200ms var(--ease-out); }
.wpc-link:hover { color: var(--green-300); }
.wpc-link:hover svg { translate: 4px 0; }
/* gestaffeltes Einblenden pro Szenenwechsel */
.wp-caption > * { opacity: 0; translate: 0 16px; transition: opacity 600ms var(--ease-out), translate 700ms var(--ease-out); }
.wp-caption.show > * { opacity: 1; translate: 0 0; }
.wp-caption.show .wpc-kicker { transition-delay: 900ms; }
.wp-caption.show .wpc-title { transition-delay: 1060ms; }
.wp-caption.show .wpc-sub { transition-delay: 1220ms; }
.wp-caption.show .wpc-link { transition-delay: 1380ms; }

/* ============ DESKTOP-REVEAL nach dem Boot ============ */
.os.ready .wallpaper { animation: wpReveal 1800ms var(--ease-out) backwards; }
@keyframes wpReveal { from { transform: scale(1.22); filter: brightness(0.25) saturate(0.6); } }
.os.ready .dicon { animation: iconIn 650ms var(--ease-spring) backwards; }
@keyframes iconIn { from { opacity: 0; translate: 0 34px; scale: 0.7; } }
.os.ready .dicon:nth-child(1) { animation-delay: 500ms; }
.os.ready .dicon:nth-child(2) { animation-delay: 640ms; }
.os.ready .dicon:nth-child(3) { animation-delay: 780ms; }
.os.ready .dicon:nth-child(4) { animation-delay: 920ms; }
.os.ready .dicon:nth-child(5) { animation-delay: 1060ms; }
.os.ready .dicon:nth-child(6) { animation-delay: 1200ms; }
.os.ready .taskbar { animation: tbIn 750ms var(--ease-out) 250ms backwards; }
@keyframes tbIn { from { translate: 0 120%; } }

.noscript-info { position: relative; z-index: 50; max-width: 640px; margin: 10vh auto; padding: 32px; background: var(--acryl-solid); border: 1px solid var(--line); border-radius: var(--r-lg); }
.noscript-info h1 { margin-bottom: 12px; font-size: 24px; }

/* ============ BOOT / SHUTDOWN / BSOD ============ */
.boot, .shutdown, .bsod { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; text-align: center; }
.boot { background: #070517; transition: opacity 700ms var(--ease-out), visibility 700ms; }
/* pointer-events sofort abschalten: Falls die Transition hängt (z. B. weil der
   Tab beim Laden im Hintergrund war), darf das Overlay keine Klicks abfangen.
   Zusätzlich setzt das Skript nach dem Ausblenden hidden. */
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.boot-logo { display: block; animation: bootPulse 1.8s ease-in-out infinite; }
.boot-name { display: flex; align-items: flex-end; gap: 7px; }
.boot-name span { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--fg-1); }
.boot-bar { width: 220px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green-700), var(--green-500)); transition: width 300ms var(--ease-out); position: relative; overflow: hidden; }
.boot-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent); animation: barShine 900ms linear infinite; }
@keyframes barShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.boot-msg { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); min-height: 18px; }
@keyframes bootPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.96); } }

.shutdown { background: #070517; flex-direction: column; }
.shutdown-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; }
.shutdown-inner p { font-family: var(--font-display); font-size: 20px; }
.shutdown-hint { font-size: 14px !important; font-family: var(--font-body) !important; color: var(--fg-3); }

.bsod { background: #0a24a8; cursor: pointer; }
.bsod-inner { max-width: 640px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; text-align: left; }
.bsod-face { font-size: 96px; font-family: var(--font-display); animation: glitch 2.4s steps(1) infinite; }
@keyframes glitch {
  0%, 91%, 100% { transform: none; text-shadow: none; }
  92% { transform: translateX(-4px) skewX(-6deg); text-shadow: 4px 0 var(--green-500), -4px 0 var(--danger); }
  94% { transform: translateX(3px); text-shadow: -3px 0 var(--green-500), 3px 0 var(--danger); }
  96% { transform: translateX(-1px) skewX(3deg); text-shadow: 2px 0 var(--danger); }
}
.bsod-inner p { font-size: 20px; }
.bsod-small { font-size: 15px !important; opacity: 0.85; }
.bsod-small.mono { font-family: var(--font-mono); font-size: 12px !important; }
.bsod-close { color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: underline; padding: 4px 0; }

/* ============ MOBILE STATUS BAR ============ */
.statusbar { display: none; }

/* ============ DESKTOP ICONS ============ */
.desktop-icons {
  position: absolute; inset: 20px 16px calc(var(--tb-h) + 8px) 20px; z-index: 1;
  display: block;
  /* Der Container deckt den ganzen Desktop ab — ohne das hier würde er Klicks
     auf darunterliegende Elemente (z. B. den Wallpaper-CTA) abfangen */
  pointer-events: none;
}
.dicon { pointer-events: auto; }
.dicon {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 96px; padding: 12px 6px 10px; border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background 160ms, border-color 160ms, transform 160ms var(--ease-out), left 160ms var(--ease-out), top 160ms var(--ease-out);
  touch-action: none;
}
.dicon.dragging { z-index: 90; opacity: 0.85; transform: scale(1.06); transition: background 160ms, transform 120ms; cursor: grabbing; }
.dicon:hover { background: rgba(255,255,255,0.05); border-color: var(--line); }
.dicon:active { transform: scale(0.95); }
.dicon-img {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--ink-700), var(--ink-850));
  border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--green-400);
}
.dicon-img svg { width: 24px; height: 24px; }
.dicon-label { font-size: 12.5px; font-weight: 600; color: var(--fg-2); text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.dicon-accent .dicon-img { background: linear-gradient(145deg, var(--green-600), var(--green-700)); color: var(--fg-on-green); box-shadow: 0 6px 22px rgba(0,255,108,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }

/* ============ WINDOWS ============ */
.windows { position: absolute; inset: 0 0 var(--tb-h); z-index: 2; pointer-events: none; }
.window {
  position: absolute; display: flex; flex-direction: column;
  min-width: 480px; min-height: 320px;
  width: min(860px, calc(100vw - 48px)); height: min(600px, calc(100vh - var(--tb-h) - 48px));
  background: var(--acryl);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-win);
  overflow: hidden; pointer-events: auto;
  opacity: 0; transform: scale(0.9) translateY(22px);
  transition: opacity 160ms ease, transform 180ms ease;
}
.window.open {
  opacity: 1; transform: none;
  transition: opacity 240ms var(--ease-out), transform 380ms var(--ease-spring);
}
/* Minimieren: fliegt zur Taskbar (Ziel via --mx/--my aus JS) */
.window.minning {
  opacity: 0;
  transform: translate(var(--mx, 0px), var(--my, 40vh)) scale(0.08);
  transition: opacity 300ms ease, transform 340ms cubic-bezier(0.5, 0, 0.85, 0.4);
}
/* Maximieren / Wiederherstellen / Snap: Geometrie animieren */
.window.geo {
  transition: left 280ms var(--ease-out), top 280ms var(--ease-out),
              width 280ms var(--ease-out), height 280ms var(--ease-out),
              border-radius 280ms var(--ease-out);
}
.window.focus { border-color: rgba(0,255,108,0.35); box-shadow: var(--shadow-win), 0 0 0 1px rgba(0,255,108,0.12); }
.window.maxi { width: calc(100vw - 16px) !important; height: calc(100vh - var(--tb-h) - 16px) !important; left: 8px !important; top: 8px !important; border-radius: var(--r-md); }
.window[hidden] { display: none; }

.win-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 6px 0 14px; flex: none;
  background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line);
  cursor: grab; user-select: none; touch-action: none;
}
.win-head:active { cursor: grabbing; }
.win-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.win-title svg { width: 16px; height: 16px; color: var(--green-400); }
.win-btns { display: flex; gap: 2px; }
.wbtn { width: 40px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--fg-3); transition: background 140ms, color 140ms; }
.wbtn svg { width: 14px; height: 14px; fill: none; }
.wbtn:hover { background: rgba(255,255,255,0.08); color: var(--fg-1); }
.wbtn-close:hover { background: var(--danger); color: #fff; }

/* margin-right rückt die Scrollbar von der Fensterkante ab, damit sie sich
   nie mit der Resize-Zone (.rz-e, 3px) überschneidet */
.win-body { flex: 1; overflow: auto; overscroll-behavior: contain; margin-right: 4px; }
.win-body.pad { padding: 28px 24px 28px 28px; }
.window { scrollbar-color: var(--ink-600) transparent; }
/* Chromium ignoriert ::-webkit-scrollbar-Styling, solange scrollbar-color
   gesetzt ist → dort zurück auf auto, damit die Inset-Thumbs greifen */
@supports selector(::-webkit-scrollbar) {
  .window { scrollbar-color: auto; }
}
.window ::-webkit-scrollbar, .window::-webkit-scrollbar { width: 13px; height: 13px; }
.window ::-webkit-scrollbar-thumb, .window::-webkit-scrollbar-thumb {
  background: var(--ink-600); border-radius: 999px;
  border: 4px solid transparent; background-clip: padding-box;
}
.window ::-webkit-scrollbar-thumb:hover { background-color: var(--green-700); }
.window ::-webkit-scrollbar-track { background: transparent; }

/* Resize-Zonen an allen Kanten & Ecken (unsichtbar, nur Cursor) */
.rz { position: absolute; z-index: 6; touch-action: none; }
.rz-n { top: 0; left: 14px; right: 14px; height: 5px; cursor: ns-resize; }
.rz-s { bottom: 0; left: 14px; right: 14px; height: 5px; cursor: ns-resize; }
/* Seitenstreifen bewusst schmal (3px): dürfen die Scrollbar nicht verdecken */
.rz-e { right: 0; top: 14px; bottom: 14px; width: 3px; cursor: ew-resize; }
.rz-w { left: 0; top: 14px; bottom: 14px; width: 3px; cursor: ew-resize; }
.rz-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.rz-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.rz-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.window.maxi .rz { display: none; }

.win-body h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 14px; }
.win-body .lead { color: var(--fg-2); max-width: 640px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  transition: transform 160ms var(--ease-out), box-shadow 160ms, background 160ms;
}
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-primary { background: linear-gradient(135deg, var(--green-400), var(--green-600)); color: var(--fg-on-green); box-shadow: var(--glow-green); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,255,108,0.45), 0 16px 56px -8px rgba(0,255,108,0.6); }
.btn-secondary { background: rgba(255,255,255,0.06); border: 1px solid var(--line-strong); color: var(--fg-1); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* CTA Shine + Pulse-Glow (Conversion-Buttons) */
.btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.btn-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: ctaSweep 3.4s var(--ease-out) infinite !important;
}
.btn-cta { animation: ctaPulse 3.4s ease-in-out infinite !important; }
@keyframes ctaSweep { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,255,108,0.30), 0 12px 48px -8px rgba(0,255,108,0.45); }
  50% { box-shadow: 0 0 0 1px rgba(0,255,108,0.5), 0 14px 60px -6px rgba(0,255,108,0.65); }
}

/* ============ EXPLORER ============ */
.explorer { display: flex; min-height: 0; }
.exp-side {
  position: relative;
  width: clamp(168px, 28%, 224px); flex: none; padding: 16px 10px; overflow: auto;
  border-right: 1px solid var(--line); background: rgba(0,0,0,0.14);
  display: flex; flex-direction: column; gap: 3px;
}
/* Gleitender Aktiv-Indikator (Position/Größe setzt JS) */
.exp-ind {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: var(--r-sm);
  background: rgba(0,255,108,0.1);
  border: 1px solid rgba(0,255,108,0.2);
  box-shadow: 0 0 18px -6px rgba(0,255,108,0.35);
  transition: top 380ms var(--ease-spring), left 380ms var(--ease-spring),
              width 380ms var(--ease-spring), height 380ms var(--ease-spring);
}
.exp-side-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-3); padding: 0 10px 8px; }
.exp-cat {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 10px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--fg-2);
  transition: background 140ms, color 140ms;
}
.exp-cat svg { width: 16px; height: 16px; color: var(--fg-3); flex: none; }
.exp-cat:hover { background: rgba(255,255,255,0.06); }
.exp-cat.active { color: var(--green-300); } /* Hintergrund liefert der gleitende Indikator */
.exp-cat.active svg { color: var(--green-400); }
.exp-cat.kick svg { animation: catKick 360ms var(--ease-spring); }
@keyframes catKick { 30% { transform: rotate(-12deg) scale(1.2); } 60% { transform: rotate(7deg); } }
.exp-side-cta { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.exp-side-cta p { font-size: 12.5px; color: var(--fg-3); }

/* min-width: 0 — sonst kann das Flex-Kind nicht unter seine Inhaltsbreite
   schrumpfen und erzeugt in schmalen Fenstern horizontalen Überlauf */
.exp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.exp-side { min-width: 0; }
.exp-crumb {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
}
.exp-crumb svg { width: 14px; height: 14px; color: var(--green-400); }
.exp-crumb i { font-style: normal; opacity: 0.5; }
.exp-crumb span:last-child { color: var(--fg-2); }
.crumb-anim { display: inline-block; animation: crumbIn 260ms var(--ease-out); }
@keyframes crumbIn { from { opacity: 0; translate: 0 6px; } }
.exp-files {
  flex: 1; overflow: auto; padding: 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(142px, 100%), 1fr)); gap: 8px; align-content: start;
  /* Keine erzwungene Zeilenhöhe — sonst läuft langer Text unten aus der Kachel.
     Einheitliche Höhe entsteht über die Mindesthöhe von .file-name (2 Zeilen)
     plus stretch; braucht ein Name mehr Zeilen, wächst die ganze Zeile mit. */
  grid-auto-rows: auto;
  --dir: 1; /* Richtung des Kategorie-Switches: 1 = abwärts, -1 = aufwärts */
  transition: opacity 150ms ease, translate 150ms ease;
}
.exp-files.leaving { opacity: 0; translate: 0 calc(-16px * var(--dir)); }
.file {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 8px 13px; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; color: var(--fg-2); text-align: center; line-height: 1.35;
  transition: background 140ms, border-color 140ms, transform 140ms var(--ease-out);
  animation: fileIn 300ms var(--ease-out) backwards;
  animation-delay: var(--fd, 0ms);
}
@keyframes fileIn { from { opacity: 0; translate: 0 calc(18px * var(--dir, 1)); } }
/* Datei→Detail: geklickte Datei zoomt auf */
.file.zooming { transform: scale(1.14); opacity: 0; transition: transform 180ms var(--ease-out), opacity 180ms ease; }
/* Hover-Polish: 3D-Tilt + pulsierende Akzentlinie */
.file { perspective: 480px; }
.file-ico { transition: transform 220ms var(--ease-out), color 180ms, box-shadow 220ms; }
.file:hover .file-ico { transform: rotateX(11deg) rotateY(-9deg) translateY(-2px); color: var(--green-300); box-shadow: 0 6px 18px rgba(0,255,108,0.22); }
.file:hover { background: rgba(255,255,255,0.05); border-color: var(--line); transform: translateY(-2px); }
/* Datei-Form mit dem jeweiligen Fachsymbol darin — wie ein Dateityp-Icon */
.file-ico {
  position: relative; flex: none;
  width: 40px; height: 48px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--ink-600), var(--ink-800));
  border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  color: var(--green-400);
}
.file-ico::before { content: ""; position: absolute; top: -1px; right: -1px; width: 13px; height: 13px; background: var(--ink-850); border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-radius: 0 6px 0 7px; }
.file-ico svg { width: 21px; height: 21px; margin-top: 3px; }
/* Platz für zwei Textzeilen reservieren: ein- und zweizeilige Namen ergeben
   dieselbe Kachelhöhe, längere Namen dürfen die Zeile wachsen lassen.
   flex-shrink: 0 ist entscheidend — sonst staucht der Flex-Container den
   Textblock und die Schrift läuft unten aus der Kachel heraus. */
.file-name {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  min-height: 2.7em; /* 2 × line-height 1.35 */
  overflow-wrap: anywhere; hyphens: auto;
}

.exp-detail { flex: 1; overflow: auto; overflow-x: clip; padding: 24px 28px; animation: detailIn 300ms var(--ease-out); transition: opacity 150ms ease, transform 150ms ease; }
@keyframes detailIn { from { opacity: 0; transform: translateX(44px); } }
.exp-detail.leaving { opacity: 0; transform: translateX(34px); }
.exp-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--green-400); margin-bottom: 18px; }
.exp-back svg { width: 15px; height: 15px; }
.exp-back:hover { color: var(--green-300); }
.svc h3 { font-size: 22px; margin-bottom: 12px; }
.svc-lead { font-size: 15px; line-height: 1.6; color: var(--fg-2); max-width: 680px; }
/* auto-fit statt Media Query: reagiert auf die Fensterbreite, nicht auf den Viewport.
   min(260px, 100%) lässt die Spalte auch in sehr schmalen Fenstern schrumpfen */
.svc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-top: 20px; }
/* Der Wrapper um die beiden Blöcke wird aufgelöst, damit "Was wir genau tun" und
   "Worauf es ankommt" als gleich hohe Spalten nebeneinander stehen (kein HTML-Umbau
   nötig) — das Praxisbeispiel liegt darunter über die volle Breite. */
.svc-cols > div:first-child { display: contents; }
.svc-block {
  padding: 17px 19px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
}
.svc-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.svc-block ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.svc-block li { position: relative; padding-left: 23px; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.svc-block li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px; border-right: 2px solid var(--green-500); border-bottom: 2px solid var(--green-500);
  transform: rotate(-45deg);
}
/* Praxisbeispiel: hervorgehobene Karte über die volle Breite */
.svc-example {
  grid-column: 1 / -1;
  padding: 19px 21px; border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(0,255,108,0.08), rgba(0,255,108,0.015));
  border: 1px solid rgba(0,255,108,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.svc-example .svc-label { color: var(--green-400); }
.svc-example p { font-size: 13.5px; line-height: 1.62; color: var(--fg-2); font-style: italic; }
.svc-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.svc-cta span { font-size: 12.5px; color: var(--fg-3); }

/* ============ BRANCHEN ============ */
/* overflow-x: clip — die Slide-in-Animation der Detailansicht darf keine
   horizontale Scrollbar erzeugen */
.branchen { padding: 26px 28px 28px; overflow-x: clip; }
.br-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.br-intro { max-width: 620px; }
.br-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--green-400); }
.br-intro h2 { margin: 8px 0 10px; }
.br-intro .lead { font-size: 14px; }
.br-search {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 10px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
  transition: border-color 160ms, box-shadow 160ms;
}
.br-search:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(0,255,108,0.15); }
.br-search svg { width: 15px; height: 15px; color: var(--fg-3); flex: none; }
.br-search input { width: 190px; background: none; border: 0; outline: none; color: var(--fg-1); font: inherit; font-size: 13.5px; }
.br-search input::placeholder { color: var(--fg-3); }

.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(196px, 100%), 1fr)); gap: 10px; margin-bottom: 22px; }
.br-tile {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 15px 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--fg-2); line-height: 1.3;
  transition: background 160ms, border-color 160ms, transform 160ms var(--ease-out), color 160ms;
  animation: fileIn 300ms var(--ease-out) backwards; animation-delay: var(--fd, 0ms);
}
/* Grüner Lichtstreif beim Hover */
.br-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(0,255,108,0.09) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 620ms var(--ease-out);
}
.br-tile:hover { background: rgba(0,255,108,0.06); border-color: rgba(0,255,108,0.28); color: var(--fg-1); transform: translateY(-3px); }
.br-tile:hover::after { transform: translateX(120%); }
.br-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--ink-700), var(--ink-850));
  border: 1px solid var(--line-strong); color: var(--green-400);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 220ms var(--ease-spring), box-shadow 220ms;
}
.br-ico svg { width: 21px; height: 21px; }
.br-tile:hover .br-ico { transform: scale(1.08) rotate(-4deg); box-shadow: 0 6px 20px rgba(0,255,108,0.25), inset 0 1px 0 rgba(255,255,255,0.12); }
.br-tile.hit-hidden { display: none; }
.br-empty { padding: 26px 4px; font-size: 14px; color: var(--fg-3); }

.br-detail { animation: detailIn 300ms var(--ease-out); }
.br-detail-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.br-ico.big { width: 62px; height: 62px; border-radius: 18px; }
.br-ico.big svg { width: 30px; height: 30px; }
.br-case {
  display: inline-block; padding: 3px 10px; border-radius: 999px; margin-bottom: 7px;
  background: rgba(0,255,108,0.1); border: 1px solid rgba(0,255,108,0.25);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--green-300);
}
.br-detail-head h3 { font-size: 23px; }
.br-detail-text { font-size: 15px; line-height: 1.65; color: var(--fg-2); max-width: 660px; }
/* Ausarbeitung: Was wir tun / Was sich ändert */
.br-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin-top: 22px; }
.br-block { padding: 18px 20px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.br-block:last-child { background: linear-gradient(135deg, rgba(0,255,108,0.07), rgba(0,255,108,0.015)); border-color: rgba(0,255,108,0.2); }
.br-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.br-block:last-child .br-label { color: var(--green-400); }
.br-block ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.br-block li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
/* Maßnahmen: grüner Pfeil */
.br-block li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px; border-right: 2px solid var(--green-500); border-bottom: 2px solid var(--green-500);
  transform: rotate(-45deg);
}
/* Ergebnisse: Häkchen */
.br-wins li::before {
  width: 6px; height: 10px; top: 4px; left: 3px;
  border-right: 2.5px solid var(--green-400); border-bottom: 2.5px solid var(--green-400);
  transform: rotate(45deg);
}
.br-wins li { color: var(--fg-1); font-weight: 500; }

.br-svcs { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.br-svcs-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.br-svcs div { display: flex; flex-wrap: wrap; gap: 8px; }
.br-svc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  transition: background 140ms, border-color 140ms, color 140ms, transform 140ms var(--ease-out);
}
.br-svc::after { content: "→"; color: var(--green-400); transition: translate 200ms var(--ease-out); }
.br-svc:hover { background: rgba(0,255,108,0.08); border-color: rgba(0,255,108,0.3); color: var(--fg-1); transform: translateY(-2px); }
.br-svc:hover::after { translate: 3px 0; }

/* ============ PANELS / SHARED APP STYLES ============ */
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.chip { padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--fg-2); }
.panel-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(0,255,108,0.09), rgba(0,255,108,0.02));
  border: 1px solid rgba(0,255,108,0.22);
}
.panel-cta h3 { font-size: 17px; margin-bottom: 4px; }
.panel-cta p { font-size: 13.5px; color: var(--fg-2); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 22px 0; }
.stat { padding: 16px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.stat b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.stat b i { font-style: normal; color: var(--green-500); }
.stat span { font-size: 12.5px; color: var(--fg-3); }

.gf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 22px; }
.gf { display: flex; gap: 16px; padding: 20px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.gf-avatar { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; background: linear-gradient(145deg, var(--green-500), var(--green-700)); color: var(--fg-on-green); }
.gf-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green-400); }
.gf h3 { font-size: 18px; margin: 3px 0 8px; }
.gf p { font-size: 13.5px; color: var(--fg-2); }
.gf-quote { margin-top: 8px; font-style: italic; color: var(--fg-3) !important; }

.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 22px; }
.why { padding: 16px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.why h3 { font-size: 15px; margin-bottom: 6px; color: var(--green-300); }
.why p { font-size: 13px; color: var(--fg-2); }

/* ============ FAQ ============ */
.faq-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 24px; }
.faq-list details { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.04); overflow: hidden; }
.faq-list summary { list-style: none; cursor: pointer; padding: 15px 18px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; position: relative; padding-right: 40px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--green-400); font-size: 18px; transition: transform 180ms var(--ease-out); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 18px 16px; font-size: 13.5px; color: var(--fg-2); }

/* ============ KONTAKT ============ */
/* minmax(0, …) verhindert, dass breite Kinder (z. B. das 300px-Turnstile-Widget)
   die Grid-Spalte aufblähen und das Fenster horizontal scrollen lassen */
.contact { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.contact-aside { padding: 28px; border-right: 1px solid var(--line); background: rgba(0,0,0,0.14); }
.contact-aside h2 { font-size: 21px; }
.contact-aside > p { margin: 12px 0 22px; font-size: 13.5px; color: var(--fg-2); }
.contact-lines { display: flex; flex-direction: column; gap: 13px; }
.contact-lines a, .contact-lines span { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; color: var(--fg-1); }
.contact-lines svg { width: 17px; height: 17px; color: var(--green-400); flex: none; }
.contact-lines a:hover { color: var(--green-300); }

.lead-form { padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-content: start; }
.cf-turnstile { max-width: 100%; }
.field { position: relative; display: flex; flex-direction: column-reverse; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: var(--fg-3); margin-bottom: 6px; order: 1; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
  color: var(--fg-1); font: inherit; font-size: 14px;
  transition: border-color 140ms, box-shadow 140ms;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(0,255,108,0.15); }
.field input:focus + label, .field textarea:focus + label { color: var(--green-400); }
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--fg-2); cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--green-500); }
.form-status { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; min-height: 0; }
.form-status.err { color: var(--danger); }
.form-status.ok { color: var(--green-400); }
.cf-turnstile { grid-column: 1 / -1; }
.form-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-submit span { font-size: 12.5px; color: var(--fg-3); }

/* ============ TERMINAL ============ */
.win-dark .win-body { background: rgba(4, 2, 16, 0.55); }
/* CRT-Scanlines + dezentes Flackern */
.win-dark::after {
  content: ""; position: absolute; inset: 44px 0 0; pointer-events: none; z-index: 4;
  background: repeating-linear-gradient(0deg, rgba(139,255,190,0.035) 0 1px, transparent 1px 3px);
  animation: crtFlicker 3.6s steps(2) infinite;
}
@keyframes crtFlicker { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
.term-ps1 { animation: ps1Glow 2.4s ease-in-out infinite; }
@keyframes ps1Glow { 0%, 100% { text-shadow: 0 0 6px rgba(0,255,108,0.25); } 50% { text-shadow: 0 0 12px rgba(0,255,108,0.6); } }
.term { padding: 16px; font-family: var(--font-mono); font-size: 13px; display: flex; flex-direction: column; cursor: text; }
.term-out { white-space: pre-wrap; word-break: break-word; color: var(--fg-2); }
.term-out b { color: var(--green-400); font-weight: 700; }
.term-out .t-err { color: var(--danger); }
.term-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.term-ps1 { color: var(--green-500); white-space: nowrap; }
.term input { flex: 1; background: none; border: 0; outline: none; color: var(--fg-1); font: inherit; caret-color: var(--green-500); }

/* ============ KONTEXTMENÜ ============ */
.ctxmenu {
  position: fixed; z-index: 800; min-width: 236px; padding: 6px;
  border-radius: var(--r-md);
  background: var(--acryl-solid);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-win);
  animation: ctxIn 140ms var(--ease-out);
}
@keyframes ctxIn { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--fg-2);
  transition: background 120ms, color 120ms;
}
.ctx-item svg { width: 15px; height: 15px; color: var(--fg-3); flex: none; }
.ctx-item:hover { background: rgba(255,255,255,0.07); color: var(--fg-1); }
.ctx-item:hover svg { color: var(--green-400); }
.ctx-item.accent { color: var(--green-400); }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 8px; }

/* ============ TOASTS ============ */
/* pointer-events: none auf dem Container — sonst blockiert die (oft leere)
   Toast-Spalte Klicks auf den Desktop dahinter */
.toasts { position: absolute; right: 16px; bottom: calc(var(--tb-h) + 14px); z-index: 500; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; }
.toast {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r-md);
  background: var(--acryl-solid);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-win);
  transform: translateX(calc(100% + 24px)); transition: transform 460ms var(--ease-spring), opacity 320ms;
}
.toast.show { transform: none; }
.toast.hide { opacity: 0; transform: translateY(8px); }
.toast-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(0,255,108,0.12); color: var(--green-400); }
.toast-ico svg { width: 18px; height: 18px; }
.toast-body { flex: 1; min-width: 0; }
.toast-body b { display: block; font-family: var(--font-display); font-size: 13.5px; margin-bottom: 2px; }
.toast-body p { font-size: 12.5px; color: var(--fg-2); }
.toast-body .btn { margin-top: 10px; }
.toast-x { flex: none; color: var(--fg-3); padding: 2px; }
.toast-x svg { width: 14px; height: 14px; }
.toast-x:hover { color: var(--fg-1); }

/* ============ START MENU ============ */
.startmenu {
  position: absolute; left: 50%; bottom: calc(var(--tb-h) + 12px); z-index: 600;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  padding: 20px; border-radius: var(--r-xl);
  background: var(--acryl-solid);
  -webkit-backdrop-filter: blur(32px) saturate(1.4); backdrop-filter: blur(32px) saturate(1.4);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-win);
  transform-origin: 50% 100%;
  opacity: 0; translate: 0 16px; scale: 0.96;
  transition: opacity 200ms var(--ease-out), translate 320ms var(--ease-spring), scale 320ms var(--ease-spring), visibility 320ms;
  visibility: hidden;
}
.startmenu.open { opacity: 1; translate: 0 0; scale: 1; visibility: visible; }
.startmenu.open .sm-app { animation: smIn 300ms var(--ease-out) backwards; }
@keyframes smIn { from { opacity: 0; translate: 0 12px; } }
.startmenu.open .sm-app:nth-child(1) { animation-delay: 50ms; }
.startmenu.open .sm-app:nth-child(2) { animation-delay: 90ms; }
.startmenu.open .sm-app:nth-child(3) { animation-delay: 130ms; }
.startmenu.open .sm-app:nth-child(4) { animation-delay: 170ms; }
.startmenu.open .sm-app:nth-child(5) { animation-delay: 210ms; }
.startmenu.open .sm-app:nth-child(6) { animation-delay: 250ms; }
.startmenu[hidden] { display: none; }
.sm-search { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid var(--line-strong); margin-bottom: 18px; }
.sm-search svg { width: 16px; height: 16px; color: var(--fg-3); flex: none; }
.sm-search input { flex: 1; background: none; border: 0; outline: none; color: var(--fg-1); font: inherit; font-size: 14px; }
.sm-search input::placeholder { color: var(--fg-3); }
.sm-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-3); }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 12px 0 18px; }
.sm-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 6px 11px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  transition: background 140ms;
}
.sm-app:hover { background: rgba(255,255,255,0.06); }
.sm-app.hit-hidden { display: none; }
.sm-accent .dicon-img { background: linear-gradient(145deg, var(--green-600), var(--green-700)); color: var(--fg-on-green); }
.sm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.sm-user { display: flex; align-items: center; gap: 11px; }
.sm-user img { border-radius: 8px; }
.sm-user b { display: block; font-family: var(--font-display); font-size: 13.5px; }
.sm-user span { font-size: 12px; color: var(--fg-3); }
.sm-actions { display: flex; gap: 4px; }
.sm-action { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--fg-2); transition: background 140ms, color 140ms; }
.sm-action svg { width: 18px; height: 18px; }
.sm-action:hover { background: rgba(255,255,255,0.08); color: var(--green-400); }
/* ============ SOCIAL ============ */
/* Icon-Variante (Startmenü, Taskleiste) */
.social-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--fg-3);
  transition: background 140ms, color 140ms, transform 160ms var(--ease-out);
}
.social-icon svg { width: 17px; height: 17px; }
.social-icon:hover { background: rgba(0,255,108,0.1); color: var(--green-400); transform: translateY(-2px); }
.sm-social, .tb-social { display: inline-flex; align-items: center; gap: 2px; }
.tb-social { margin-right: 4px; }
.tb-social .social-icon { width: 30px; height: 30px; }
.tb-social .social-icon svg { width: 15px; height: 15px; }
.sm-social { margin-right: 4px; padding-right: 6px; border-right: 1px solid var(--line); }

/* Label-Variante (Kontakt-Fenster) */
.contact-social { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.contact-social-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.social-row { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  transition: background 140ms, border-color 140ms, color 140ms, transform 140ms var(--ease-out);
}
.social-link svg { width: 16px; height: 16px; flex: none; }
.social-link:hover { background: rgba(0,255,108,0.08); border-color: rgba(0,255,108,0.3); color: var(--fg-1); transform: translateY(-2px); }

.sm-legal { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 12px; font-size: 12px; color: var(--fg-3); }
.sm-legal a { color: var(--fg-3); }
.sm-legal a:hover { color: var(--green-400); }

/* ============ TASKBAR ============ */
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb-h); z-index: 700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 8, 38, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
  border-top: 1px solid var(--line);
  padding: 0 14px;
}
.tb-center { display: flex; align-items: center; gap: 5px; }
.tb-btn {
  position: relative; width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--fg-2);
  transition: background 140ms, transform 140ms var(--ease-out), color 140ms;
}
.tb-btn svg { width: 21px; height: 21px; }
.tb-btn:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.tb-btn:active { transform: scale(0.92); }
.tb-btn.running::after { content: ""; position: absolute; bottom: 3px; left: 50%; translate: -50% 0; width: 14px; height: 3px; border-radius: 999px; background: var(--green-500); }
.tb-btn.bounce { animation: tbBounce 600ms var(--ease-out); }
@keyframes tbBounce {
  0%, 100% { translate: 0 0; }
  30% { translate: 0 -10px; }
  55% { translate: 0 0; }
  75% { translate: 0 -4px; }
}
.tb-btn.min-state::after { width: 5px; opacity: 0.6; }
.tb-start.active, .tb-btn.active { background: rgba(255,255,255,0.1); }
.tb-accent { color: var(--green-400); }
.tb-tray { position: absolute; right: 14px; display: flex; align-items: center; gap: 16px; }
/* Das Tray liegt absolut rechts und würde bei schmalen Desktop-Breiten die
   zentrierten Taskleisten-Buttons überlappen. Deshalb nach Wichtigkeit
   ausdünnen: Social zuerst, dann die Uhr — die Rechtslinks bleiben. */
@media (max-width: 1150px) { .tb-social { display: none; } }
@media (max-width: 1000px) { .tb-clock { display: none; } }
.tb-link { font-size: 11.5px; color: var(--fg-3); }
.tb-link:hover { color: var(--fg-2); }
.tb-clock { text-align: right; font-family: var(--font-mono); line-height: 1.35; }
.tb-clock b { display: block; font-size: 13px; font-weight: 700; }
.tb-clock span { font-size: 10.5px; color: var(--fg-3); }

/* ============ PHONE MODE ============ */
@media (max-width: 860px) {
  :root { --tb-h: 68px; }

  /* Höhe der Statusleiste inkl. Notch-Bereich — Fenster und Icons richten
     sich danach aus, damit nichts überlappt */
  :root { --sb-h: 40px; }
  .statusbar {
    display: flex; align-items: center; justify-content: space-between;
    position: absolute; top: 0; left: 0; right: 0; z-index: 400;
    height: calc(var(--sb-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 18px 0;
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  }
  .statusbar-right { display: flex; gap: 8px; }
  .statusbar svg { width: 15px; height: 15px; }

  .desktop-icons {
    inset: auto; top: calc(var(--sb-h) + env(safe-area-inset-top) + 22px); left: 50%; transform: translateX(-50%);
    width: min(400px, calc(100vw - 32px));
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  }
  .dicon { position: static; width: auto; left: auto !important; top: auto !important; }
  .dicon-img { width: 56px; height: 56px; border-radius: 17px; }
  .dicon-img svg { width: 27px; height: 27px; }

  /* Fenster = Fullscreen-Sheets, beginnen UNTER der Statusleiste —
     sonst verdeckt diese die Kopfzeile samt Schließen-Button */
  .window, .window.maxi {
    inset: calc(var(--sb-h) + env(safe-area-inset-top)) 0 var(--tb-h) 0 !important;
    width: auto !important; height: auto !important;
    min-width: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line);
    transform: translateY(24px);
  }
  .window.open { transform: none; }
  .win-head { cursor: default; padding-top: 0; height: 48px; }
  .wbtn-min, .wbtn-max { display: none; }
  /* Touch-Ziel des Schließen-Buttons auf 44px vergrößern */
  .wbtn { width: 44px; height: 44px; }
  .rz { display: none; }

  .explorer { flex-direction: column; }
  /* Kategorien scrollen horizontal in sich — max-width/min-width verhindern,
     dass sie das ganze Fenster breiter machen */
  .exp-side { width: auto; max-width: 100%; min-width: 0; flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; gap: 6px; }
  .exp-side-label, .exp-side-cta { display: none; }
  /* min-height 44px: bequemes Touch-Ziel nach den gängigen Empfehlungen */
  .exp-cat { flex: none; padding: 10px 14px; min-height: 44px; font-size: 12.5px; }
  /* zwei breitere Spalten statt drei enger — sonst brechen die Namen 4-5-mal um */
  .exp-files { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); padding: 14px; }
  /* Breadcrumb darf umbrechen — der volle Pfad passt sonst nicht in eine Zeile
     und macht das ganze Fenster horizontal scrollbar */
  .exp-crumb { flex-wrap: wrap; padding: 10px 14px; }

  .branchen { padding: 20px; }
  .br-top { flex-direction: column; align-items: stretch; gap: 14px; }
  .br-search { width: 100%; }
  .br-search input { width: 100%; }
  .br-grid { grid-template-columns: 1fr; }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .lead-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .win-body.pad { padding: 20px; }

  /* Terminal: Prompt und Eingabe dürfen umbrechen, sonst sprengt die Zeile
     auf schmalen Geräten das Fenster */
  .term { font-size: 12.5px; }
  .term-line { flex-wrap: wrap; }
  .term input { min-width: 0; flex: 1 1 120px; }
  .term-out { overflow-x: auto; }

  .taskbar { justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
  .tb-tray { display: none; }
  .tb-center { gap: 12px; }
  .tb-btn { width: 52px; height: 52px; border-radius: 16px; }
  .tb-btn svg { width: 24px; height: 24px; }

  .startmenu { bottom: calc(var(--tb-h) + 10px); }
  .toasts { bottom: calc(var(--tb-h) + 12px); }

  /* Mobil: Caption unten mittig über der Taskbar statt oben rechts */
  .wp-caption {
    top: auto; right: 16px; left: 16px; bottom: calc(var(--tb-h) + 22px);
    max-width: none; align-items: center; text-align: center;
  }
  .wp-caption::before { inset: -50px -40px; background: radial-gradient(80% 90% at 50% 60%, rgba(11,8,38,0.6), transparent 80%); }
  .wpc-title { font-size: 24px; }
  .wpc-sub { font-size: 13.5px; }
  /* CTA als vollwertiges Touch-Ziel (mind. 44px hoch) */
  .wpc-link { padding: 11px 0; min-height: 44px; }

  /* Turnstile hat eine feste Breite von 300px — auf sehr schmalen Geräten
     (iPhone SE & Co.) leicht herunterskalieren, damit es ins Formular passt */
  @media (max-width: 379px) {
    .cf-turnstile { transform: scale(0.88); transform-origin: left top; height: 60px; }
  }

  /* Mobil: stärkere Vignette, damit der 16:9-Beschnitt unsichtbar bleibt */
  .wp-vignette {
    background:
      radial-gradient(140% 80% at 50% 42%, transparent 22%, rgba(11,8,38,0.65) 58%, rgba(11,8,38,0.96) 100%),
      linear-gradient(180deg, rgba(11,8,38,0.85) 0%, transparent 20% 74%, rgba(11,8,38,0.95) 100%);
  }
}

/* ============ HANDY IM QUERFORMAT ============
   Wenig Höhe, viel Breite: Icons in eine Reihe legen und die Wallpaper-Botschaft
   straffen, sonst überlappen sich beide. */
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {
  .desktop-icons {
    top: calc(var(--sb-h) + env(safe-area-inset-top) + 6px);
    width: min(660px, calc(100vw - 24px));
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }
  .dicon { padding: 8px 4px 7px; gap: 5px; }
  .dicon-img { width: 42px; height: 42px; border-radius: 13px; }
  .dicon-img svg { width: 21px; height: 21px; }
  .dicon-label { font-size: 11px; }
  .wp-caption { bottom: calc(var(--tb-h) + 8px); gap: 6px; }
  .wp-caption::before { inset: -26px -40px; }
  .wpc-title { font-size: 19px; }
  .wpc-sub { display: none; }
  .wpc-kicker { font-size: 10px; }
  .taskbar { --tb-h: 58px; }
}

/* ============ TOUCH-BEDIENUNG ============
   Greift auf jedem Gerät ohne präzisen Zeiger — also auch auf Tablets im
   Querformat, die oberhalb des Phone-Breakpoints liegen. */
@media (pointer: coarse) {
  .wpc-link { min-height: 44px; padding: 10px 0; }
  .social-icon { width: 42px; height: 42px; }
  .tb-social .social-icon { width: 40px; height: 40px; }
  .wbtn { width: 46px; height: 40px; }
  .exp-cat { min-height: 44px; }
  .file { padding-top: 18px; padding-bottom: 15px; }
  .tb-link { padding: 8px 4px; }
  /* Fenster-Ecken zum Greifen vergrößern, schmale Kantenstreifen entfallen */
  .rz-n, .rz-s, .rz-e, .rz-w { display: none; }
  .rz-ne, .rz-nw, .rz-se, .rz-sw { width: 26px; height: 26px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .wp-glow { animation: none; }
  .boot-logo { animation: none; }
  .window, .startmenu, .toast, .dicon, .tb-btn, .file, .btn { transition-duration: 1ms; }
  .os.ready .wallpaper, .os.ready .dicon, .os.ready .taskbar,
  .startmenu.open .sm-app, .file, .tb-btn.bounce,
  .bsod-face, .win-dark::after, .term-ps1, .boot-bar span::after,
  .exp-detail, .exp-cat.kick svg, .crumb-anim, .file:hover .file-ico::after,
  .wp-media img.kb, .br-detail, .br-tile { animation: none !important; }
  .br-tile, .br-ico, .br-svc { transition-duration: 1ms; }
  .exp-ind, .exp-files, .file-ico { transition-duration: 1ms; }
  /* CTA-Buttons behalten Sweep+Glow bewusst (!important in der Definition) */
}