/* Funkraum – Website. Farben wie im Client (dunkel zuerst, hell nach Systemeinstellung). Keine externen Schriften, nichts von Dritten. */
:root{
  --rail:#0e1315; --side:#151c1f; --main:#1b2326; --raise:#232e32; --line:#2b383d;
  --fg:#e4ebe8; --muted:#94a6a0; --faint:#6b7d78;
  --accent:#f2a641; --accent-ink:#1b1306; --accent-soft:#3a2e1c; --teal:#2ec4b6; --ok:#57c98a;
  --hover:rgba(228,235,232,.06);
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,Menlo,monospace;
  --r-sm:6px; --r:10px; --r-lg:16px; --gut:clamp(16px,5vw,48px); --max:1160px;
  --sh:0 24px 60px rgba(0,0,0,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --rail:#dde5e2; --side:#eaf0ed; --main:#f7faf8; --raise:#ffffff; --line:#d2dcd8;
  --fg:#16211d; --muted:#4f615b; --faint:#8a9a94;
  --accent:#b5670a; --accent-ink:#ffffff; --accent-soft:#f6e3c8; --teal:#16897e; --ok:#2e8b57;
  --hover:rgba(22,33,29,.06);
  --sh:0 24px 50px rgba(22,33,29,.18);
  color-scheme:light;}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--main);color:var(--fg);font:1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.35em;height:1.35em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:var(--r-sm);z-index:10}
.skip:focus{left:8px}

h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.7rem,5.6vw,4.6rem);font-weight:800;letter-spacing:-.028em;word-spacing:.1em}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.62em 1.1em;border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--fg);font:600 .95rem/1.2 var(--f-body);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--hover);border-color:var(--faint)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08);background:var(--accent)}
.btn.big{padding:.85em 1.5em;font-size:1.05rem}
.btn.sm{padding:.5em .9em;font-size:.88rem}

/* Kopf und Fuß */
.top,.foot{display:flex;align-items:center;gap:24px;max-width:var(--max);margin:0 auto;padding:18px var(--gut)}
.top nav{display:flex;gap:6px;margin-left:auto}
.top nav a{padding:.4em .8em;border-radius:var(--r-sm);text-decoration:none;color:var(--muted);font-size:.95rem}
.top nav a:hover{color:var(--fg);background:var(--hover)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 1.2rem var(--f-display);letter-spacing:-.02em}
.brand img{border-radius:9px}
.foot{border-top:1px solid var(--line);margin-top:96px;padding-top:28px;padding-bottom:40px;flex-wrap:wrap}
.foot nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap;font-size:.92rem}
.foot nav a{color:var(--muted);text-decoration:none}
.foot nav a:hover{color:var(--fg);text-decoration:underline}
.foot .dim{font-size:.82rem;color:var(--faint)}

main{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* Hero */
.hero{padding:clamp(40px,7vw,96px) 0 24px;position:relative;overflow-x:clip;overflow-y:visible}
.hero-text{position:relative;z-index:1;max-width:46rem}
.lead{margin-top:24px;font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.6;color:var(--muted);max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{margin-top:16px;font-size:.9rem;color:var(--faint)}
/* Auf Systemen ohne App führt der erste Knopf selbst in den Browser, der zweite entfällt */
html[data-os="other"] #heroWeb{display:none}

/* Screenshots der echten Oberfläche; im Hero stehen Strahlen wie im Symbol dahinter */
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--side);box-shadow:var(--sh);aspect-ratio:16/10}
.shot img{display:block;width:100%;height:auto}
.hero::before{content:"";position:absolute;left:50%;top:62%;width:min(120vw,1500px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 8deg,var(--raise) 0 9deg,transparent 9deg 30deg);opacity:.7;
  -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%)}
.hero-shot{position:relative;z-index:1;margin-top:clamp(36px,5vw,64px)}

/* Abschnitte */
.sec{padding-top:clamp(64px,10vw,120px)}
.sec>h2{max-width:20ch}
.lead2{margin-top:16px;color:var(--muted);max-width:40em;font-size:1.1rem}

/* Kacheln: sechs Spalten, Breiten 4 und 2 wechseln sich ab */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px}
.tile{grid-column:span 2;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--side);display:flex;flex-direction:column;gap:10px}
.tile.w4{grid-column:span 4}
.tile .ic{width:28px;height:28px;color:var(--accent);margin-bottom:8px}
.tile p{color:var(--muted);font-size:1rem;max-width:36em}
.chips{list-style:none;margin:auto 0 0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;background:var(--raise);border:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.chips li em{font-style:normal;font-weight:700;color:var(--faint)}
.chips .ic{width:1.1em;height:1.1em;margin:0;color:var(--faint)}

/* Funktionszeilen: Bild und Text im Wechsel */
.row{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(48px,7vw,88px)}
.row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr)}
.row.flip .shot{order:2}
.row-t>.ic{width:28px;height:28px;color:var(--accent);margin-bottom:12px}
.row-t p{margin-top:12px;color:var(--muted)}
.row-t ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.row-t li{position:relative;padding-left:20px;color:var(--muted);font-size:.98rem}
.row-t li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;border-radius:2px;background:var(--accent)}

/* Sicherheit */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,88px);align-items:start}
.facts{margin:36px 0 0;display:grid;gap:22px}
.facts dt{display:flex;align-items:center;gap:10px;font:700 1.05rem var(--f-display)}
.facts dt .ic{width:1.3em;height:1.3em;color:var(--teal)}
.facts dd{margin:4px 0 0 calc(1.3em + 10px);color:var(--muted);max-width:36em}
.host{padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--side);display:flex;flex-direction:column;gap:12px}
.host>.ic{width:28px;height:28px;color:var(--accent)}
.host p{color:var(--muted)}
.term{margin:8px 0 0;padding:16px 18px;border-radius:var(--r);background:var(--rail);border:1px solid var(--line);font:.86rem/1.7 var(--f-mono);overflow-x:auto;color:var(--muted)}
.term code{font:inherit}
.term .p{color:var(--faint)} .term .ok{color:var(--ok)}

/* Download: Zeilen statt Kacheln */
.dl{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.dl li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:6px 20px;padding:24px 14px;border-bottom:1px solid var(--line);border-radius:var(--r-sm);position:relative}
.dl li>.ic{width:28px;height:28px;color:var(--muted)}
.dl-t p{color:var(--muted);font-size:.98rem;margin-top:2px;max-width:34em}
.ver{color:var(--faint);font-variant-numeric:tabular-nums}
.dl details{grid-column:2/-1;color:var(--muted);font-size:.93rem}
.dl summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--faint);list-style:none;border-radius:var(--r-sm)}
.dl summary::-webkit-details-marker{display:none}
.dl summary:hover{color:var(--fg)}
.dl summary .ic{width:1.15em;height:1.15em}
.dl details p{margin-top:8px;max-width:44em;padding:12px 14px;background:var(--side);border:1px solid var(--line);border-radius:var(--r)}
/* Das System des Besuchers hervorheben (data-os an <html> setzt app.js) */
html[data-os="mac"] #dl-mac,html[data-os="win"] #dl-win,html[data-os="other"] #dl-web{background:var(--side);box-shadow:inset 3px 0 0 var(--accent)}
html[data-os="mac"] #dl-mac>.ic,html[data-os="win"] #dl-win>.ic,html[data-os="other"] #dl-web>.ic{color:var(--accent)}
html[data-os="mac"] #dl-mac h3::after,html[data-os="win"] #dl-win h3::after,html[data-os="other"] #dl-web h3::after{content:"Für dein System";margin-left:10px;padding:2px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font:600 .74rem var(--f-body);letter-spacing:0;vertical-align:.15em}
html[data-os="mac"] #dl-win .btn.pri,html[data-os="win"] #dl-mac .btn.pri,html[data-os="other"] .dl .btn.pri{background:transparent;color:var(--fg);border-color:var(--line)}
html[data-os="mac"] #dl-win .btn.pri:hover,html[data-os="win"] #dl-mac .btn.pri:hover,html[data-os="other"] .dl .btn.pri:hover{background:var(--hover);filter:none}
html[data-os="other"] #dl-web .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Rechtsseiten */
.legal{max-width:44rem;margin:0 auto;padding:clamp(32px,6vw,72px) var(--gut)}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:28px}
.legal h2{font-size:1.25rem;margin:32px 0 8px}
.legal p{color:var(--muted);margin-bottom:12px}

/* Tablet und Handy */
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .row,.row.flip{grid-template-columns:1fr}
  .row.flip .shot{order:0}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile,.tile.w4{grid-column:span 1}
  .tile.w4,.tile:nth-last-child(2){grid-column:1/-1}
}
@media (max-width:640px){
  .top{gap:12px;flex-wrap:wrap}
  .top nav{display:none}
  .top .btn{margin-left:auto}
  .bento{grid-template-columns:1fr}
  .dl li{grid-template-columns:28px minmax(0,1fr)}
  .dl li .btn{grid-column:1/-1;margin-top:10px}
  .dl details{grid-column:1/-1}
  .btn.big{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .speak::after{animation:none;opacity:0}
  .btn{transition:none}
}
.push{margin-left:auto}
.legal h3{font-size:1.05rem;margin:22px 0 6px}
.legal ul{margin:0 0 12px;padding-left:1.2em;color:var(--muted)}
.legal li{margin-bottom:8px}
.legal strong{color:var(--fg)}
.legal a{color:var(--accent)}
.legal code{font:.88em var(--f-mono);overflow-wrap:anywhere}
.legal .stand{margin-top:36px;font-size:.9rem;color:var(--faint)}