/* Demo Studio · Design-System
   Schriften liegen lokal in /assets/fonts (keine externen Font-Server). */

@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/inter-tight-latin.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/inter-tight-italic-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-italic-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2')}

:root{
  /* Kernfarben */
  --ink:#141414;
  --ink-deep:#0B0B0B;
  --neon:#DDF94B;
  --signal:#F2491F;
  --paper:#EDEBE6;
  --paper-light:#F6F5F1;
  --grey-light:#CFCBC2;
  --grey-dark:#3A3936;
  --grey-mid:#6E6A63;
  /* Ergänzende Töne aus dem Entwurf */
  --signal-text:#FF3B1F;
  --signal-text-small:#C4330F; /* kleine Schrift, Kontrast mindestens 4,5:1 */
  --signal-button:#D33B15;
  --muted:#4A4741;
  --ink-soft:#232220;
  --line-dark:#2A2927;
  --white:#FFFFFF;
  --black:#000000;

  --font-sans:'Inter Tight',system-ui,sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);overflow-wrap:break-word}
img,video,svg{max-width:100%}
a{color:var(--ink)}
a:hover{color:var(--signal-text-small)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
[hidden]{display:none !important}

.page{min-height:100vh;background:var(--paper);overflow:hidden;overflow:clip}
.mono{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.serif{font-family:var(--font-serif);font-weight:400;font-style:italic;letter-spacing:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
.label{margin:0;font-weight:400}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:12px 16px;z-index:10}
.skip:focus{left:16px;top:16px;color:var(--white)}

/* REC-Punkt */
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.12}}
.rec{animation:rec 1.1s infinite}

/* Kopfzeile */
.mainnav a{text-decoration:none}
.mainnav a[aria-current="page"]{text-decoration:underline;font-weight:600}
.btn-header{background:var(--signal-button);color:var(--white) !important;padding:13px 20px;text-decoration:none;font-weight:600}
.btn-header:hover{background:var(--ink)}

/* Buttons: dezente Rückmeldung beim Überfahren */
.btn{transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--signal)}
.btn-dark:hover{color:var(--white)}
.btn-neon:hover{color:var(--ink)}

/* Sprachumschalter */
.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--ink)}
.lang-switch a{padding:6px 8px}
.lang-switch a[aria-current="true"]{font-weight:500;background:var(--ink);color:var(--white)}
.mainnav .lang-switch a[aria-current="true"]{text-decoration:none}
.lang-switch > span{display:none}

/* Menü-Button (nur auf schmalen Bildschirmen sichtbar) */
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:2px solid var(--ink);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Boxen werden beim Überfahren gelb */
.hover-neon{transition:background .15s ease}
@media (hover:hover){.hover-neon:hover{background:var(--neon) !important}}

/* Psst-Kacheln */
.jump{transition:background .15s ease}
.jump:hover{background:var(--neon);color:var(--ink)}

/* FAQ */
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.faq details{border-bottom:1px solid var(--ink);padding:20px 0}
.faq details summary{font-size:20px;font-weight:700;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:flex-start}
.faq details summary .plus{transition:transform .2s ease;flex:0 0 auto}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq details p,.faq details ul{font-size:17px;line-height:1.55;max-width:780px}

/* Formular */
.field{display:flex;flex-direction:column;gap:8px}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:14px;border:2px solid var(--ink);background:var(--white);color:var(--ink);border-radius:0;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--neon);outline-offset:0}
.hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;border:2px solid var(--ink);padding:16px 20px;font-size:16px;line-height:1.5}
.form-status.ok{background:var(--neon)}
.form-status.err{background:var(--white);border-color:var(--signal-button)}

/* Minute 28 */
.m28-tile{position:relative;overflow:hidden;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--grey-dark);border:1px solid var(--grey-dark)}
.m28-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m28-tile .on-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--neon);display:block}
.m28-tile .off-name{font-size:16px;font-weight:700;color:var(--grey-mid);letter-spacing:.04em;display:none}
.m28-tile .off-icon{position:absolute;top:5px;right:5px;display:none}
.m28-tile.is-off{background:var(--ink);border-color:var(--line-dark)}
.m28-tile.is-off img,.m28-tile.is-off .on-dot{display:none}
.m28-tile.is-off .off-name,.m28-tile.is-off .off-icon{display:block}
.m28-menu span{font-size:9px;padding:4px 6px;letter-spacing:.04em;color:var(--muted)}
.m28-menu span.is-active{background:var(--ink);color:var(--white)}

/* Minute 28: geteilte Software */
.m28-main{flex:1 1 auto;min-width:0;padding:10px 12px;display:flex;flex-direction:column;gap:7px;color:var(--ink);overflow:hidden}
.m28-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.m28-title{font-size:13px;font-weight:700}
.m28-action{font-size:8px;font-weight:600;background:var(--ink);color:var(--white);padding:3px 6px;white-space:nowrap}
.m28-view{display:none;flex-direction:column;gap:6px;font-size:9px;line-height:1.25;min-height:0}
.m28-view.is-active{display:flex}
.m28-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.m28-kpi{border:1px solid var(--grey-light);background:var(--white);padding:5px 6px}
.m28-kpi b{display:block;font-size:14px;line-height:1.1;letter-spacing:-0.02em}
.m28-kpi span,.m28-muted{color:var(--grey-mid);font-size:8px}
.m28-chart{flex:1 1 auto;display:flex;align-items:flex-end;gap:4px;height:92px;border-bottom:1px solid var(--grey-light)}
.m28-chart i{display:block;flex:1 1 0;background:var(--ink)}
.m28-chart i.hi{background:var(--signal)}
.m28-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid var(--grey-light);min-width:0}
.m28-row > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m28-toggle{flex:0 0 auto;width:20px;height:11px;border-radius:6px;background:var(--grey-light);position:relative}
.m28-toggle::after{content:"";position:absolute;top:2px;left:2px;width:7px;height:7px;border-radius:50%;background:var(--white)}
.m28-toggle.on{background:var(--ink)}
.m28-toggle.on::after{left:11px;background:var(--neon)}
.m28-table{display:grid;gap:0}
.m28-table div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:6px;padding:4.5px 0;border-bottom:1px solid var(--grey-light)}
.m28-table div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m28-table .head{font-weight:700;font-size:8px;color:var(--grey-mid)}
.m28-table.matrix div{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));padding:6px 0}
.m28-input{border:1px solid var(--grey-light);background:var(--white);padding:4px 6px;color:var(--grey-mid);font-size:8px}
.m28-flow{display:flex;align-items:center;gap:4px;min-width:0}
.m28-flow span{flex:1 1 0;min-width:0;border:1px solid var(--ink);background:var(--white);padding:5px 3px;text-align:center;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m28-flow span.done{background:var(--ink);color:var(--white)}
.m28-chips{display:flex;gap:4px}
.m28-chips span{border:1px solid var(--grey-light);background:var(--white);padding:4px 8px;font-size:8px}
.m28-chips span.sel{background:var(--ink);border-color:var(--ink);color:var(--white)}
.m28-progress{height:8px;background:var(--grey-light);position:relative}
.m28-progress i{position:absolute;left:0;top:0;bottom:0;width:68%;background:var(--signal)}
.m28-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.m28-cards div{border:1px solid var(--grey-light);background:var(--white);padding:7px 6px;display:flex;flex-direction:column;gap:2px;min-width:0}
.m28-cards b{font-size:9px}
.m28-ok{color:var(--signal-text-small);font-weight:600;font-size:8px}

/* Video-Umschalter */
.vtoggle button{font-size:12px;padding:14px 18px;min-height:44px;border:0;cursor:pointer;background:transparent;color:var(--paper)}
.vtoggle button[aria-pressed="true"]{background:var(--neon);color:var(--ink)}

/* Demo Check */
.dc-btn{font:inherit;font-size:15px;font-weight:600;min-width:72px;min-height:44px;padding:10px 16px;cursor:pointer;border:2px solid var(--ink);background:var(--white);color:var(--ink)}
.dc-btn.yes[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.dc-btn.no[aria-pressed="true"]{background:var(--grey-light);color:var(--ink)}
.tier{border:2px solid var(--ink);padding:16px 20px;background:var(--paper-light);transition:background .2s ease,opacity .2s ease}
.tiers.has-answer .tier{opacity:.7}
.tiers.has-answer .tier.is-active{background:var(--neon);opacity:1}

/* Rechtstexte */
.legal h2{margin:48px 0 0;font-size:28px;letter-spacing:-0.02em;font-weight:800}
.legal h3{margin:28px 0 0;font-size:20px;letter-spacing:-0.01em}
.legal p,.legal li{font-size:17px;line-height:1.6;max-width:760px}
.legal p{margin:12px 0 0}
.legal ul{margin:12px 0 0;padding-left:20px}
.ph{background:var(--neon);padding:0 4px}

/* Sanftes Einblenden beim Scrollen (nur wenn JS läuft und Bewegung erlaubt ist) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rec{animation:none}
  .btn,.btn:hover{transition:none;transform:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .faq details summary .plus{transition:none}
  .nav-toggle span{transition:none}
}

@media (max-width:760px){
  .wrap{padding-left:16px;padding-right:16px}
  .h1{font-size:52px !important}
  .h1.h1-s{font-size:48px !important}
  .h1.h1-l{font-size:56px !important}
  .h2{font-size:36px !important}
  .h2.h2-s{font-size:32px !important}
  .sec{padding-top:64px !important;padding-bottom:64px !important}
  .sec.sec-s{padding-top:56px !important;padding-bottom:56px !important}
  .js .nav-toggle{display:flex}
  header a[aria-label]{min-height:44px}
  .js .mainnav{display:none !important}
  .js .mainnav.is-open{display:flex !important;flex:0 0 100%;flex-direction:column;align-items:stretch !important;gap:0 !important;font-size:17px !important}
  .mainnav{gap:4px 18px !important}
  .mainnav > a:not(.btn-header){padding:12px 0;min-height:44px}
  .js .mainnav.is-open > a:not(.btn-header){border-bottom:1px solid var(--grey-light)}
  .js .mainnav.is-open > .mono{align-self:flex-start;margin:14px 0}
  .lang-switch a{padding:12px 14px}
  .js .mainnav.is-open > .btn-header{text-align:center;padding:15px 20px}
  a.tap{display:inline-block;padding:12px 0 !important}
  .jump{padding:14px 12px !important}
  /* Zellen-Raster: untereinander statt nebeneinander trennen */
  .cells > *{border-right:0 !important}
  .cells > *:not(:last-child){border-bottom:1px solid var(--cell-line,var(--ink))}
  .strip > *{padding-left:0 !important;padding-right:0 !important}
  .quote-big{padding:28px !important}
  .quote-big blockquote{font-size:26px !important}
  .stat-num{font-size:56px !important}
  .footer-nav{gap:0 18px !important}
  .footer-nav a,.footer-nav strong{display:inline-block;padding:14px 0}
}