:root{
    --navy:#22366F; --red:#DB6B15; --red-ui:#F5851F;
    --ink:#160510; --panel:#1E2632; --line:#29323F; --line2:#454F5D;
    --paper:#E8E3DA; --paper-line:#CEC6B9; --text:#FFFFFF; --muted:#A6ACB2; --dim:#5A6068; --sec-alt:#100309;
    --sans:'Archivo',Helvetica,Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:21px;-webkit-font-smoothing:antialiased}
  a{color:var(--red-ui);text-decoration:none}
  a:hover{color:#FF9E42}
  .wrap{max-width:1200px;margin:0 auto;padding:0 40px}
  .sec{border-bottom:1px solid var(--line);padding-block:80px}
  .sec--alt{background:var(--sec-alt)}
  .mono{font-family:var(--mono)}
  .kicker{font-family:var(--mono);font-size:21px;letter-spacing:.26em;color:var(--red-ui)}
  .btn{display:inline-block;font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:.1em;padding:15px 26px;white-space:nowrap;cursor:pointer}
  .btn-primary{background:var(--red-ui);color:var(--ink)}
  .btn-primary:hover{background:#FF9E42;color:var(--ink)}
  .btn-ghost{border:1px solid var(--line2);color:var(--text)}
  .btn-ghost:hover{border-color:#5A6470;color:var(--text)}
  .btn-navy{background:var(--navy);color:var(--paper)}
  .btn-navy:hover{background:#2C4489;color:var(--paper)}

  header{position:sticky;top:0;z-index:20;background:rgba(24,22,28,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:16px 28px;max-width:1200px;margin:0 auto}
  .brand{display:flex;align-items:center;gap:12px;color:#fff}
  .brand:hover{color:#fff}
  .brand span{font-size:15px;font-weight:800;white-space:nowrap}
  .brand .tld{color:#7C8288}
  nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
  nav a{font-family:var(--mono);font-size:21px;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
  nav a:hover{color:#fff}
  .lang{position:relative}
  .lang-btn{display:flex;align-items:center;gap:8px;border:1px solid #2A323C;background:transparent;color:#fff;padding:6px 10px;cursor:pointer;font-family:var(--mono);font-size:21px;letter-spacing:.08em;white-space:nowrap}
  .lang-btn:hover{border-color:#3A424C}
  .lang-btn .caret{color:#7C8288;font-size:21px}
  .flag{width:18px;height:13px;display:block;border:1px solid rgba(255,255,255,.14);background:#2A323C center/cover no-repeat}
  .lang-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:186px;background:#141920;border:1px solid #2A323C;box-shadow:0 18px 40px rgba(0,0,0,.55);padding:4px;z-index:40;max-height:340px;overflow:auto}
  .lang-menu.open{display:block}
  .lang-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--sans)}
  .lang-row:hover{background:#1B222B}
  .lang-row[aria-current="true"]{background:#1B222B}
  .lang-row .flag{width:20px;height:14px}
  .lang-row .lang-name{flex:1;font-size:21px;color:var(--muted)}
  .lang-row[aria-current="true"] .lang-name{color:#fff}
  .lang-row .lang-code{font-family:var(--mono);font-size:21px;letter-spacing:.1em;color:var(--dim)}

  .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-block:88px 76px}
  .hero h1{font-size:60px;font-weight:900;letter-spacing:-.035em;line-height:1.02;margin:0}
  .lead{font-size:21px;line-height:1.6;color:var(--muted);max-width:480px;text-wrap:pretty}
  .stats{display:flex;gap:28px;padding-top:20px;margin-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
  .stat b{display:block;font-family:var(--mono);font-size:22px;font-weight:400}
  .stat small{font-family:var(--mono);font-size:21px;letter-spacing:.14em;color:var(--dim)}
  .media{background:var(--panel);border:1px solid var(--line);aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;overflow:hidden}
  .media .stripes{position:absolute;inset:0;opacity:.5}
  .media .label{position:relative;font-family:var(--mono);font-size:21px;letter-spacing:.16em;color:#6B7076}
  .play{position:relative;width:60px;height:60px;border:2px solid var(--red-ui);border-radius:50%;display:flex;align-items:center;justify-content:center}
  .play i{width:0;height:0;border-left:16px solid var(--red-ui);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}

  h2{font-size:38px;font-weight:900;letter-spacing:-.025em;margin:0}
  .num{font-family:var(--mono);font-size:21px;letter-spacing:.2em;color:var(--red-ui)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 36px}
  .card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--navy);padding:30px;display:flex;flex-direction:column;gap:11px}
  .card:first-child{border-top-color:var(--red-ui)}
  .card b{font-size:21px}
  .card p{margin:0;font-size:21px;line-height:1.6;color:var(--muted)}

  .light{background:var(--paper);color:#14161A;border:0}
  .light h2{color:#14161A}
  .light p{color:#4A4E52}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .badge{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:.16em;padding:5px 10px}
  .tags{display:flex;flex-wrap:wrap;gap:8px}
  .tag{font-family:var(--mono);font-size:21px;letter-spacing:.1em;color:#4A4E52;border:1px solid var(--paper-line);padding:8px 12px;white-space:nowrap}
  .steps{display:flex;flex-direction:column;gap:1px;background:var(--paper-line);border:1px solid var(--paper-line)}
  .step{background:#FBF9F5;padding:22px 26px;display:flex;align-items:center;gap:18px}
  .sec .steps{background:var(--line);border-color:var(--line)}
  .sec .step{background:var(--panel)}
  .sec .tag{color:var(--muted);border-color:var(--line2)}
  .step em{font-family:var(--mono);font-size:21px;font-style:normal;color:var(--red);width:22px}
  .step b{display:block;font-size:21px}
  .step small{font-family:var(--mono);font-size:21px;color:#8A8E91}

  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .grid4 div{background:var(--ink);padding:30px;display:flex;flex-direction:column;gap:10px}
  .grid4 b{font-family:var(--mono);font-size:21px;font-weight:400}
  .grid4 b.hot{color:var(--red-ui)}
  .grid4 p{margin:0;font-size:21px;line-height:1.6;color:var(--muted)}

  .vids{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .vid{border:1px solid var(--line);display:flex;flex-direction:column;color:inherit}
  .vid .thumb{background:var(--panel);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:21px;letter-spacing:.16em;color:var(--dim)}
  .vid .body{padding:22px;display:flex;flex-direction:column;gap:8px}
  .vid b{font-size:21px}
  .vid p{margin:0;font-size:21px;line-height:1.55;color:var(--muted)}

  .contact{background:var(--navy);padding:76px 0}
  .contact h2{font-size:34px}
  .contact p{color:#B6C0DC;font-size:21px;line-height:1.6;max-width:400px}
  form{display:flex;flex-direction:column;gap:14px}
  input,textarea{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:15px 16px;font-family:var(--mono);font-size:21px;letter-spacing:.08em;color:#fff}
  input::placeholder,textarea::placeholder{color:#9AA6C8}
  textarea{min-height:104px;resize:vertical}
  form button{align-self:flex-start;border:0}

  footer{border-top:1px solid var(--line)}
  .ftr{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:44px 40px;max-width:1200px;margin:0 auto}
  .ftr nav a{font-size:21px;letter-spacing:.1em;color:#7C8288}
  .ftr .claim{font-family:var(--mono);font-size:21px;letter-spacing:.2em;color:var(--dim)}
  .copy{font-family:var(--mono);font-size:21px;color:#4A5058}

  @media (max-width:900px){
    .wrap{padding:0 20px}
    .hero,.split{grid-template-columns:1fr;gap:32px;padding-block:56px}
    .hero h1{font-size:40px}
    .cards,.vids{grid-template-columns:1fr}
    .grid4{grid-template-columns:1fr 1fr}
    .sec{padding-block:56px}
  }

  /* --- Unterseiten --- */
  .crumb{font-family:var(--mono);font-size:21px;letter-spacing:.12em;color:var(--dim);padding-block:26px 0}
  .crumb a{color:var(--dim)} .crumb a:hover{color:var(--muted)}
  .phero{padding-block:34px 56px;border-bottom:1px solid var(--line)}
  .phero h1{font-size:46px;font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:14px 0 18px;max-width:15ch}
  .phero .lead{font-size:21px;max-width:640px}
  .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
  .prose{font-size:21px;line-height:1.7;color:var(--muted);max-width:70ch}
  .prose h3{font-size:20px;color:#fff;margin:28px 0 10px;font-weight:800}
  .prose ul{margin:0;padding-left:18px} .prose li{margin:6px 0}
  .spec{width:100%;border-collapse:collapse;border:1px solid var(--line)}
  .spec th,.spec td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:21px}
  .spec th{font-family:var(--mono);font-size:21px;letter-spacing:.12em;color:var(--dim);font-weight:400;width:210px;vertical-align:top}
  .spec td{color:var(--muted)}
  .spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
  .faq{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
  .faq div{background:var(--ink);padding:22px 24px}
  .faq b{display:block;font-size:21px;color:#fff;margin-bottom:7px}
  .faq p{margin:0;font-size:21px;line-height:1.6;color:var(--muted)}
  .cta-band{background:var(--navy);padding:56px 0}
  .cta-band h2{font-size:30px;margin-bottom:12px}
  .cta-band p{color:#B6C0DC;font-size:21px;max-width:520px;margin:0 0 24px}
  .shot{border:1px solid var(--line);background:var(--panel);padding:26px;display:flex;justify-content:center}
  .shot img{max-width:100%;height:auto;display:block}
  .note{font-family:var(--mono);font-size:21px;line-height:1.7;color:var(--dim);border-left:2px solid var(--line2);padding-left:14px}
  @media (max-width:900px){ .phero h1{font-size:34px} .spec th{width:auto;display:block;border-bottom:0;padding-bottom:0} .spec td{display:block} }

  /* --- Ergaenzungen: klickbares Medium + Video-Lightbox (Produktseiten) --- */
  .media video,.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .media.clickable{cursor:pointer}
  .media.clickable::after{content:"";position:absolute;inset:0;background:rgba(9,12,16,.28);transition:background .2s;z-index:1}
  .media.clickable:hover::after{background:rgba(9,12,16,.12)}
  .media:focus-visible,.shot:focus-visible{outline:2px solid var(--red-ui);outline-offset:3px}
  .media .play{z-index:2;background:rgba(24,22,28,.55);transition:transform .2s}
  .media.clickable:hover .play{transform:scale(1.08)}

  .shot{position:relative}
  .shot.clickable{cursor:pointer}
  .shot.clickable:hover{border-color:var(--line2)}
  .shot .playwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .shot .play{background:rgba(24,22,28,.55);transition:transform .2s}
  .shot.clickable:hover .play{transform:scale(1.08)}

  .vbox{display:none;position:fixed;inset:0;z-index:100;background:rgba(6,9,13,.86);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
  .vbox.open{display:flex}
  .vbox-inner{position:relative;width:min(960px,94vw)}
  .vbox video{width:100%;display:block;background:#000;border:1px solid var(--line)}
  .vbox-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border:0;background:var(--red-ui);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;font-family:var(--sans)}
  .vbox-close:hover{background:#FF9E42}
  @media (max-width:900px){ .vbox-close{top:-10px;right:0} }

  /* Kontaktformular-Hilfsklassen (Startseite + Kontaktseite) */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .formmsg{font-family:var(--mono);font-size:21px;letter-spacing:.04em;margin:0;min-height:1em}
  .formmsg.ok{color:#8FE3B0}
  .formmsg.err{color:#FFB3AB}

  /* === Navy-Baender: Text immer hell (beide Themes) === */
  .contact h2,.cta-band h2{color:#fff}

  /* === Theme-Umschalter (Button im Header) === */
  .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;border:1px solid #2A323C;background:transparent;color:var(--text);cursor:pointer;padding:0}
  .theme-toggle:hover{border-color:#3A424C}
  .theme-toggle svg{width:16px;height:16px;display:block}
  .theme-toggle .i-sun{display:block}
  .theme-toggle .i-moon{display:none}

  /* === Helles Theme (komplementaer; bisher helle Baender werden dunkle Kontrast-Baender) === */
  :root[data-theme="light"]{
    --ink:#F4F1EA; --panel:#FFFFFF; --line:#E3DED2; --line2:#CDC6B6;
    --paper:#201D24; --paper-line:#2E2A33; --sec-alt:#EAE5DB;
    --text:#1B1712; --muted:#5C574E; --dim:#8A8378;
  }
  :root[data-theme="light"] header{background:rgba(244,241,234,.9)}
  :root[data-theme="light"] .brand,:root[data-theme="light"] .brand:hover,:root[data-theme="light"] nav a:hover,:root[data-theme="light"] .lang-btn,:root[data-theme="light"] .lang-row[aria-current="true"] .lang-name,:root[data-theme="light"] .prose h3,:root[data-theme="light"] .faq b,:root[data-theme="light"] .ftr nav a:hover{color:var(--text)}
  :root[data-theme="light"] .lang-btn{border-color:#D8D2C6}
  :root[data-theme="light"] .theme-toggle{border-color:#D8D2C6}
  :root[data-theme="light"] .theme-toggle .i-sun{display:none}
  :root[data-theme="light"] .theme-toggle .i-moon{display:block}
  :root[data-theme="light"] .lang-menu{background:#FFFFFF;border-color:#E3DED2;box-shadow:0 18px 40px rgba(40,34,28,.18)}
  :root[data-theme="light"] .lang-row:hover,:root[data-theme="light"] .lang-row[aria-current="true"]{background:#F0ECE3}
  :root[data-theme="light"] .flag{border-color:rgba(0,0,0,.14)}
  :root[data-theme="light"] .btn-navy,:root[data-theme="light"] .btn-navy:hover{color:#EFEBE3}
  :root[data-theme="light"] .light{color:#EDEAE3}
  :root[data-theme="light"] .light h2{color:#FFFFFF}
  :root[data-theme="light"] .light p{color:#AEB4BC}
  :root[data-theme="light"] .light .step{background:#26222C}
  :root[data-theme="light"] .light .step small{color:#9AA0A6}
  :root[data-theme="light"] .light .tag{color:#AEB4BC}