/* Easy PDR – Website. Farben aus dem Logo: Blau, Hellblau, Lavendel, Mint.
   Hell und dunkel; ohne gesetzte Wahl folgt die Seite dem System. */
:root{
  --grund:#F5F7FC; --grund2:#FFFFFF; --karte:rgba(11,18,32,.03); --rand:rgba(11,18,32,.11); --rand2:rgba(11,18,32,.20);
  --text:#0B1220; --text2:#3C4762; --muted:#5B6884;
  --akzent:#2563EB; --akzent2:#8B7BE8; --hell:#7FB8FF; --mint:#2FA37B; --warn:#B26A00; --rot:#D93A4A;
  --schein:rgba(37,99,235,.16); --schatten:0 30px 70px rgba(11,18,32,.18);
  --rinne:24px;   /* seitlicher Rand des Inhalts – das Klappmenü rechnet damit */
  --rahmen:linear-gradient(150deg,#C6CEE0,#8E98B2 58%,#B4BDD2);
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){
    --grund:#080D18; --grund2:#0D1526; --karte:rgba(255,255,255,.04); --rand:rgba(170,192,232,.15); --rand2:rgba(170,192,232,.28);
    --text:#E8EDF7; --text2:#B7C2D8; --muted:#8B99B4;
    --akzent:#3B82F6; --akzent2:#B9AAFF; --hell:#7FB8FF; --mint:#7FD8B4; --warn:#FFB020; --rot:#FF6B7A;
    --schein:rgba(110,162,248,.30); --schatten:0 40px 90px rgba(0,0,0,.55);
    --rahmen:linear-gradient(150deg,#39415B,#141A2A 58%,#2A3148);
  }
}
:root[data-thema="dunkel"]{
  --grund:#080D18; --grund2:#0D1526; --karte:rgba(255,255,255,.04); --rand:rgba(170,192,232,.15); --rand2:rgba(170,192,232,.28);
  --text:#E8EDF7; --text2:#B7C2D8; --muted:#8B99B4;
  --akzent:#3B82F6; --akzent2:#B9AAFF; --hell:#7FB8FF; --mint:#7FD8B4; --warn:#FFB020; --rot:#FF6B7A;
  --schein:rgba(110,162,248,.30); --schatten:0 40px 90px rgba(0,0,0,.55);
  --rahmen:linear-gradient(150deg,#39415B,#141A2A 58%,#2A3148);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font-size:16px;line-height:1.55;overflow-x:hidden;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:700;line-height:1.08;margin:0;letter-spacing:-.028em;text-wrap:balance}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--rinne)}
.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* Kopf */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--grund) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--rand)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;text-decoration:none;letter-spacing:-.02em}
.brand img{width:30px;height:30px}
.brand span{color:var(--akzent)}
nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
/* Klappmenü: auf dem Handy ist die Leiste sonst mehr als doppelt so breit wie der
   Bildschirm. Der Umschalter ist ein Kontrollkästchen, damit das Menü auch ohne
   JavaScript auf- und zugeht. */
.burger{display:none;width:44px;height:44px;border:1px solid var(--rand2);border-radius:10px;
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:none}
.burger span{display:block;width:19px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
.menuchk:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuchk:checked ~ .burger span:nth-child(2){opacity:0}
.menuchk:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn.mobil-cta{display:none}
nav a{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:8px;font-size:14.5px;font-weight:500}
nav a:hover{color:var(--text)}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;border:1px solid var(--rand2);text-decoration:none;
  font-weight:600;font-size:15px;background:transparent;color:var(--text);transition:transform .15s,filter .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--akzent);border-color:var(--akzent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
nav .btn.ghost{padding:9px 17px;font-size:14px;margin:0 8px 0 6px}
.lang{display:flex;gap:2px;margin-left:8px}
.lang a{padding:6px 8px;border-radius:6px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-decoration:none}
.lang a.on{color:var(--text);background:var(--karte)}
.themebtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rand);background:transparent;color:var(--muted);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer;margin-left:6px}
.themebtn:hover{color:var(--text)}
.themebtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Bühne */
.buehne{position:relative;padding-top:22px;text-align:center;overflow:hidden}
.buehne::before{content:"";position:absolute;left:50%;top:-200px;width:1200px;height:900px;transform:translateX(-50%);
  pointer-events:none;background:radial-gradient(closest-side,var(--schein),transparent 72%);animation:atmen 9s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.buehne::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rand) 1px,transparent 1px),linear-gradient(90deg,var(--rand) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%)}
.buehne .inhalt{position:relative;z-index:2}
.stempel{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);
  border:1px solid var(--rand);border-radius:999px;padding:6px 15px;margin-bottom:18px;background:var(--karte)}
.buehne h1{font-size:clamp(34px,4.2vw,52px);max-width:20ch;margin:0 auto 16px}
.buehne h1 em{font-style:normal;color:var(--akzent)}
.buehne .lead{font-size:16px;color:var(--muted);max-width:66ch;margin:0 auto 24px}
.tat{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.checks{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin-bottom:30px}
.checks span::before{content:"●";color:var(--mint);margin-right:8px;font-size:9px;vertical-align:2px}

/* Geräte */
/* Bühne: die App in einem Browserfenster.
   Gewählt am 25.09.2026 aus drei Varianten. Der Rahmen sagt in einem Bild, was sonst
   ein Satz erklären müsste: Webanwendung, nichts zu installieren. Keine Kippung und
   kein Perspektivwinkel mehr – gekippt war vom Bildschirm weniger zu sehen, und genau
   der ist das Verkaufsargument. */
.geraete{position:relative;max-width:940px;margin:0 auto;padding:0 96px 34px 0;z-index:2}
.fenster{border-radius:16px;overflow:hidden;border:1px solid var(--rand);background:var(--grund2);
  box-shadow:var(--schatten);animation:schweb1 9s ease-in-out infinite}
@keyframes schweb1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fenster .leiste{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--rand);background:var(--grund)}
.fenster .punkt{width:11px;height:11px;border-radius:50%;background:var(--rand2);flex:0 0 auto}
.fenster .adresse{flex:1;margin-left:10px;height:24px;border-radius:999px;background:var(--grund2);
  border:1px solid var(--rand);display:flex;align-items:center;padding:0 12px;
  font-size:12px;color:var(--muted);overflow:hidden;white-space:nowrap}
.schirm{position:relative;overflow:hidden;background:#080D18}
.schirm img{width:100%;height:auto;display:block}
.fenster .schirm{aspect-ratio:1180/820}
.schirm .sweep{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 48%,transparent 58%);
  transform:translateX(-120%);animation:wischen 6.5s ease-in-out 1.2s infinite}
@keyframes wischen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.handy{position:absolute;right:0;bottom:0;width:196px;border-radius:30px;padding:8px;z-index:3;
  background:var(--rahmen);box-shadow:var(--schatten),0 0 0 1px rgba(255,255,255,.12) inset;
  animation:schweb2 7.4s ease-in-out .6s infinite}
@keyframes schweb2{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.handy .schirm{border-radius:23px;aspect-ratio:390/844}
.handy .kerbe{position:absolute;left:50%;top:0;transform:translateX(-50%);width:74px;height:15px;
  background:#0D1220;border-radius:0 0 11px 11px;z-index:3}
.wechsel{position:absolute;inset:0;opacity:0;animation:blenden 9s infinite}
.wechsel:nth-of-type(2){animation-delay:4.5s}
@keyframes blenden{0%{opacity:0}4%,46%{opacity:1}52%,100%{opacity:0}}
.marke-aw{position:absolute;left:-18px;bottom:44px;z-index:4;background:var(--grund2);
  border:1px solid var(--rand);border-radius:14px;padding:15px 20px;text-align:left;box-shadow:var(--schatten);
  animation:schweb3 6.4s ease-in-out 1.2s infinite}
@keyframes schweb3{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.marke-aw .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marke-aw .v{font-size:31px;font-weight:700;letter-spacing:-.03em;color:var(--mint);line-height:1.15}
.marke-aw .s{font-size:12px;color:var(--muted)}

/* Zahlenband */
.band{background:var(--grund2);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);margin-top:-40px;position:relative;z-index:5}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-block:30px}
.band b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.band small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* Abschnitte */
section{padding-block:76px}
.kap{text-align:center;margin-bottom:40px}
.kap .k{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
h2{font-size:clamp(27px,3.3vw,40px);max-width:20ch;margin:0 auto 12px}
.kap p{color:var(--muted);max-width:60ch;margin:0 auto}
.eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin-bottom:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-block:28px}
.card{background:var(--karte);border:1px solid var(--rand);border-radius:16px;padding:26px 24px 28px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;margin:0}
.card .ic{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding-inline:10px;
  border-radius:10px;background:var(--grund2);border:1px solid var(--rand);color:var(--akzent);font-weight:700;font-size:14px;margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block:10px 30px}
.stat{background:var(--karte);border:1px solid var(--rand);border-radius:16px;padding:22px 22px 24px}
.stat b{display:block;font-size:17px;margin-bottom:6px}
.stat b em{font-style:normal;font-size:30px;color:var(--akzent);margin-right:8px;letter-spacing:-.03em}
.stat span{color:var(--muted);font-size:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps>div{background:var(--karte);border:1px solid var(--rand);border-radius:16px;padding:22px 20px 24px;counter-increment:s}
.steps>div::before{content:counter(s,decimal-leading-zero);display:block;font-size:12px;letter-spacing:.12em;color:var(--akzent2);margin-bottom:10px;
  font-family:"IBM Plex Mono",monospace}
.steps b{display:block;font-size:16.5px;margin-bottom:6px}
.steps span{color:var(--muted);font-size:14px}
.sec{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.sec ul{margin:0;padding-left:20px;color:var(--muted)}
.sec li{margin-bottom:8px}

/* Bildstrecke */
.shots .shotgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.shots figure{margin:0}
.screen{border-radius:16px;overflow:hidden;border:1px solid var(--rand);background:var(--grund2);box-shadow:var(--schatten)}
.screen img{width:100%;height:auto;display:block}
.shots figcaption{color:var(--muted);font-size:13.5px;margin-top:10px}

/* Preise */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block:28px 40px}
.price{background:var(--karte);border:1px solid var(--rand);border-radius:18px;padding:26px 24px 28px;display:flex;flex-direction:column;position:relative;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease}
.price:hover{transform:translateY(-4px);box-shadow:0 14px 34px -18px rgba(8,13,24,.45);border-color:color-mix(in srgb,var(--akzent) 35%,var(--rand))}
.price.hi{background:var(--grund2);outline:1.5px solid var(--akzent);outline-offset:-1.5px}
/* Der hervorgehobene Plan bekommt auf breiten Schirmen etwas mehr Gewicht – sonst
   unterscheidet ihn nur eine dünne Linie und die Empfehlung geht unter. */
@media(min-width:900px){ .price.hi{transform:scale(1.03)} .price.hi:hover{transform:scale(1.03) translateY(-4px)} }
.price .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--akzent);color:#fff;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px}
.price h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.price .amt{font-size:40px;font-weight:700;letter-spacing:-.035em;margin:12px 0 4px}
.price .amt small{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.price .jahr{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.price .sub{font-size:14px;color:var(--text2);margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--rand);min-height:2.8em}
.price ul{list-style:none;margin:0 0 18px;padding:0;font-size:14.5px;color:var(--text2);flex:1}
.price li{padding:6px 0 6px 24px;position:relative}
/* Häkchen statt Strich: ein Minuszeichen vor einer Leistung liest sich wie ein Abzug. */
.price li::before{content:"";position:absolute;left:2px;top:12px;width:10px;height:5px;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg);border-radius:1px}
/* Eine Grenze ist keine Leistung und bekommt darum ein anderes Zeichen. */
.price li.nein{color:var(--muted)}
.price li.nein::before{width:10px;height:0;border-left:0;border-bottom:2px solid var(--muted);transform:none;top:15px;opacity:.7}
/* «Enthält alles aus …»: kein Merkmal unter vielen, sondern die Aussage, die den
   Vergleich zwischen den Plänen überhaupt erst lesbar macht. Darum abgesetzt, in
   Akzentfarbe und mit Pfeil nach oben statt Häkchen. */
.price li.erbt{font-weight:600;color:var(--text);margin:0 0 8px;padding:8px 12px 8px 30px;
  background:color-mix(in srgb,var(--akzent) 9%,transparent);border-radius:9px}
.price li.erbt::before{content:"";left:11px;top:15px;width:8px;height:8px;border-radius:0;
  border-left:2px solid var(--akzent);border-bottom:0;border-top:2px solid var(--akzent);
  transform:rotate(45deg)}

.price .note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 0 18px;padding-top:14px;border-top:1px solid var(--rand)}
.price .btn{text-align:center}
@media(max-width:899px){ .price .sub{min-height:0} }

/* Formulare */
.trial,.kform{display:grid;gap:10px;max-width:520px}
.trial label,.kform label{font-size:13px;color:var(--muted)}
.trial input,.kform input,.kform textarea,.kform select{font:inherit;color:var(--text);background:var(--grund2);
  border:1px solid var(--rand2);border-radius:10px;padding:11px 12px;width:100%}
.hp{position:absolute;left:-9999px}
.msg{font-size:14px;min-height:20px}
.msg.ok{color:var(--mint)} .msg.err{color:var(--rot)}
.cta-box{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  background:var(--grund2);border:1px solid var(--rand);border-radius:18px;padding:28px 26px;margin-block:40px}
/* Rechtsseiten: die Kopfzeile sitzt sonst zu weit über dem Text. */
.page:has(+ .wrap .rechtstext){padding-bottom:0}
.page h1{font-size:clamp(30px,3.8vw,44px);margin-bottom:12px}
/* Rechtstexte: eigene, schmalere Spalte. Über die volle Seitenbreite gesetzt wäre
   ein Absatz über 150 Zeichen lang – das liest niemand gern. */
.rechtstext{max-width:74ch;margin:0 0 72px;padding-top:4px}
/* max-width und margin:auto der globalen h2-Regel zurücknehmen – die ist für
   zentrierte Abschnittstitel gedacht, nicht für Fliesstext-Überschriften. */
.rechtstext h2{font-size:21px;max-width:none;margin:34px 0 8px;scroll-margin-top:80px;text-wrap:wrap;letter-spacing:-.01em}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:18px;max-width:none;margin:26px 0 6px;text-wrap:wrap}
.rechtstext p{color:var(--text2);margin:10px 0;line-height:1.65}
.rechtstext .cap{color:var(--muted);font-size:13.5px;line-height:1.6}
.rechtstext .two{margin-block:0 26px}
.rechtstext .two .card{padding:22px 22px 24px}
.rechtstext .two .card p{margin:8px 0}
.rechtstext hr{border:0;border-top:1px solid var(--rand);margin:34px 0}
@media(max-width:1000px){ .rechtstext .two{grid-template-columns:1fr} }
.page .lead{color:var(--muted);max-width:70ch;font-size:17px}
.faq{border-top:1px solid var(--rand)}
.faq details{border-bottom:1px solid var(--rand);padding-block:16px}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:10px 0 0}

footer{border-top:1px solid var(--rand);padding-block:30px 50px;color:var(--muted);font-size:13px;margin-top:40px}
footer nav{gap:16px;margin-bottom:12px}
footer nav a{padding:0;color:var(--muted)}
footer nav a:hover{color:var(--text)}

/* Einblenden beim Scrollen */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .reveal.d1.in{transition-delay:.07s} .js .reveal.d2.in{transition-delay:.14s} .js .reveal.d3.in{transition-delay:.21s} .js .reveal.d4.in{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .buehne::before,.fenster,.handy,.marke-aw,.schirm .sweep,.wechsel{animation:none!important}
  .wechsel:first-of-type{opacity:1}
  /* Wer Bewegung abbestellt hat, meint auch das Anheben beim Überfahren. */
  .price,.price:hover{transition:none;transform:none}
  @media(min-width:900px){ .price.hi,.price.hi:hover{transform:none} }
}

@media(max-width:1000px){
  .wrap{padding-inline:var(--rinne)}
  .geraete{padding:0 0 18px}
  .fenster{animation:none}
  .handy,.marke-aw{display:none}
  .band{margin-top:0}
  .band .wrap{grid-template-columns:1fr 1fr;gap:18px}
  .grid3,.steps,.prices,.two,.sec,.stats,.shots .shotgrid{grid-template-columns:1fr}
  .cta-box{flex-direction:column;align-items:flex-start}
  /* Kopfzeile auf dem Handy: Marke, kurzer Aufruf, Klappknopf – mehr passt nicht nebeneinander.
     Der Rest fährt als Liste darunter aus, statt seitlich aus dem Bild zu laufen. */
  :root{--rinne:18px}
  header{gap:10px;flex-wrap:nowrap;position:relative}
  .brand{font-size:18px;min-width:0}
  .brand img{width:26px;height:26px}
  .burger{display:flex}
  .btn.mobil-cta{display:inline-block;margin-left:auto;padding:10px 14px;font-size:14px;white-space:nowrap}
  /* Diese Regeln gehören dem Klappmenü hinter dem Burger – und NUR ihm. Bis
     0.55.4 stand hier ein nacktes «nav», und das trifft jedes <nav> der Seite:
     unter 1000 px verschwand damit auch die Fusszeile mit Impressum, AGB und
     Datenschutz, auf jeder Seite und in jeder Sprache. Dass es niemandem auffiel,
     liegt daran, dass am Schreibtisch alles richtig aussah. Deshalb «#hauptnav»:
     die Kennung trägt genau das Menü, zu dem der Burger gehört. Geprüft in
     tests/fusszeile_handy_test.js. */
  #hauptnav{position:absolute;top:100%;left:calc(var(--rinne) * -1);right:calc(var(--rinne) * -1);display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--rinne) 18px;background:var(--grund);border-bottom:1px solid var(--rand);
    box-shadow:0 18px 40px rgba(0,0,0,.28);max-height:calc(100dvh - 70px);overflow-y:auto}
  .menuchk:checked ~ #hauptnav{display:flex}
  #hauptnav a{padding:14px 2px;font-size:16px;border-bottom:1px solid var(--rand);border-radius:0;color:var(--text)}
  #hauptnav .btn{border:0;background:transparent;color:var(--text);text-align:left}
  #hauptnav .btn.ghost{margin:0;padding:14px 2px;font-size:16px}
  #hauptnav .nav-cta{display:none}          /* steckt schon oben in der Leiste */
  #hauptnav a:last-of-type{border-bottom:0}
  #hauptnav .lang{margin:12px 0 0}
  #hauptnav .themebtn{margin:12px 0 0;align-self:flex-start}
  /* Die Fusszeile bleibt eine gewöhnliche Liste, nur untereinander statt
     nebeneinander – auf 390 px stünden sieben Links sonst in sieben Reihen. */
  footer nav{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Geräteaufnahmen je Farbschema: ohne gesetzte Wahl entscheidet das System.

   «!important» steht hier mit Absicht. Jede Regel der Form «… img{display:block}» –
   davon gibt es mehrere, etwa «.schirm img» – ist spezifischer als eine einzelne
   Klasse und hat die Auswahl ausgehebelt: Beide Aufnahmen lagen übereinander, und auf
   der hellen Seite stand ein schwarzer Bildschirm. Spezifischer schreiben half nur für
   die heute bekannten Fälle; die nächste Bildregel hätte es wieder gekippt. */
.nurdunkel{display:none!important}
.nurhell{display:block!important}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]) .nurhell{display:none!important}
  :root:not([data-thema="hell"]) .nurdunkel{display:block!important}
}
:root[data-thema="dunkel"] .nurhell{display:none!important}
:root[data-thema="dunkel"] .nurdunkel{display:block!important}
.wechsel{position:absolute;inset:0;display:block}


/* ---------- Bewegung ----------
   Sparsam und kurz: die Seite soll lebendig wirken, nicht zappeln. Alles hier
   reagiert auf eine Handlung des Benutzers (Überfahren, Antippen, Aufklappen);
   nichts bewegt sich von selbst dauerhaft. Wer Bewegung abbestellt hat, bekommt
   weiter unten alles ruhiggestellt. */

/* ---------- Kacheln im Stil von iOS ----------
   Drei Merkmale machen den Eindruck aus, und alle drei sind hier nachgebaut:
   weiche, grosszügige Rundungen; ein Federn beim Bewegen statt eines gleichmässigen
   Gleitens; und ein Lichtschein, der über die Fläche wandert, als läge Glas darauf.
   Dazu der Druckpunkt: iOS verkleinert beim Antippen, es fühlt sich an wie eine
   echte Taste. */

/* Feder mit leichtem Überschwingen – das ist der Unterschied zu «gleitet einfach». */
:root{--feder:cubic-bezier(.34,1.56,.64,1)}

.card{position:relative;border-radius:22px;overflow:hidden;isolation:isolate;
  transition:transform .42s var(--feder),box-shadow .35s ease,border-color .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px -26px rgba(8,13,24,.55);
  border-color:color-mix(in srgb,var(--akzent) 32%,var(--rand))}
/* Antippen drückt die Kachel ein, wie ein Symbol auf dem Startbildschirm. */
.card:active{transform:translateY(-2px) scale(.985);transition-duration:.12s}

/* Der Lichtschein. Die Position kommt per JS als --mx/--my; ohne JS bleibt er in
   der Mitte und unsichtbar, die Kachel sieht dann aus wie vorher. */
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  transition:opacity .35s ease;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--akzent) 14%,transparent), transparent 70%)}
.card:hover::before{opacity:1}

/* Das Symbol wird zur App-Kachel: abgerundetes Quadrat, Verlauf, Lichtkante oben. */
.card .ic{min-width:44px;height:44px;border-radius:13px;font-size:15px;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--akzent) 22%,var(--grund2)),
    color-mix(in srgb,var(--akzent) 6%,var(--grund2)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -6px rgba(8,13,24,.5);
  transition:transform .42s var(--feder),box-shadow .35s ease}
.card:hover .ic{transform:translateY(-2px) scale(1.08) rotate(-3deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 20px -10px color-mix(in srgb,var(--akzent) 60%,transparent)}

/* Auftritt: leicht vergrössern statt nur einblenden – iOS lässt Dinge aufpoppen. */
.js .grid3 .card.reveal{transform:translateY(18px) scale(.97)}
.js .grid3 .card.reveal.in{transform:none;transition:opacity .5s ease,transform .55s var(--feder)}

/* Knöpfe: ein spürbarer Druckpunkt statt eines harten Farbwechsels. */
.btn{transition:transform .16s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.primary:hover{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--akzent) 70%,transparent)}

/* Verweise in Fliesstext bekommen eine Linie, die von links einläuft. */
main p a:not(.btn),footer a{background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s cubic-bezier(.2,.8,.2,1)}
main p a:not(.btn):hover,footer a:hover{background-size:100% 1px}

/* Aufklappbare Fragen: der Inhalt fährt aus, statt zu springen. */
details summary{transition:color .2s ease}
details summary::marker{color:var(--muted)}
details[open] > *:not(summary){animation:aufklappen .28s cubic-bezier(.2,.8,.2,1)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Die Schritte auf der Startseite: die Nummer wächst kurz beim Erscheinen. */
.steps .reveal.in b{animation:zahlauf .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes zahlauf{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}

/* Bildschirmfotos: leichtes Anheben, damit sie anklickbar wirken. */
.shots figure{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.shots figure:hover{transform:translateY(-5px)}

/* Navigation: der aktive Punkt bekommt einen mitlaufenden Unterstrich. */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--akzent);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .card,.card:hover,.card:active,.card .ic,.card:hover .ic,.btn,.btn:hover,.btn:active,
  .shots figure,.shots figure:hover,.nav a::after{transition:none;transform:none;animation:none}
  .card::before,.card:hover::before{opacity:0}
  .js .grid3 .card.reveal,.js .grid3 .card.reveal.in{transform:none}
  details[open] > *:not(summary),.steps .reveal.in b{animation:none}
  main p a:not(.btn),footer a{background-size:0 1px;transition:none}
}

/* ---------- Einwilligung ----------
   Unten angedockt statt als Vorhang über der Seite: der Besucher kann lesen, was er
   gesucht hat, und entscheidet danach. «Nur Notwendige» sieht aus wie «Alle
   akzeptieren» – gleich gross, gleich erreichbar. Eine Ablehnung, die man suchen
   muss, ist keine Wahl. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 var(--rinne) 16px;
  opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.cookiebar.in{opacity:1;transform:none}
.cb-inner{max-width:1100px;margin:0 auto;background:var(--grund);border:1px solid var(--rand);
  border-radius:16px;box-shadow:0 24px 60px -28px rgba(8,13,24,.55);padding:20px 22px;
  display:grid;grid-template-columns:1fr auto;gap:18px 26px;align-items:center}
.cb-text h2{font-size:16px;margin:0 0 6px}
.cb-text p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text2)}
.cb-kat{margin-top:14px;display:grid;gap:10px}
.cb-kat[hidden]{display:none}
.cb-kat label{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text2);line-height:1.5}
.cb-kat input{margin-top:3px;flex:none}
.cb-btns{display:flex;flex-direction:column;gap:8px;min-width:200px}
.cb-btns .btn{text-align:center;white-space:nowrap}
.cb-btns .btn.ghost{background:none;border-color:transparent;color:var(--muted);font-weight:400}
.cb-btns .btn.ghost:hover{color:var(--text);border-color:var(--rand)}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;opacity:.75}
.link-btn:hover{opacity:1}
@media(max-width:760px){
  .cb-inner{grid-template-columns:1fr;padding:18px}
  .cb-btns{flex-direction:row;flex-wrap:wrap;min-width:0}
  .cb-btns .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ .cookiebar{transition:none} }

/* Die Auswertung ist breiter als hoch und in zwei Spalten nicht mehr lesbar –
   sie bekommt die ganze Zeile. */
@media(min-width:900px){ .shots .shotgrid .breit{grid-column:1 / -1} }

/* Sprachflaggen im Zahlenband. «7 Sprachen» allein sagt nicht, welche sieben –
   die Flaggen sagen es in einer Zeile. Dieselben SVG wie in der App: Emoji-Flaggen
   zeigt Windows nur als zwei Buchstaben, und eine Bilddatei wäre ein zusätzlicher
   Abruf für ein paar hundert Byte Fläche. Jede Sprache trägt die Flagge ihres
   Ursprungslands (DE, FR, IT, GB, NL, ES, PT).
   Rein schmückend: Die Reihe steht auf aria-hidden, die Zahl daneben trägt die Aussage. */
.band .fahnen{display:flex;gap:5px;margin:6px 0 2px}
.fahne{display:block;width:18px;height:13px;border-radius:2px;background-size:cover;
  background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.10)}
.fahne[data-lang=de]{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'><rect width='5' height='3' fill='%23000'/><rect y='1' width='5' height='2' fill='%23D00'/><rect y='2' width='5' height='1' fill='%23FFCE00'/></svg>")}
.fahne[data-lang=fr]{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23fff'/><rect width='1' height='2' fill='%23002395'/><rect x='2' width='1' height='2' fill='%23ED2939'/></svg>")}
.fahne[data-lang=it]{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23fff'/><rect width='1' height='2' fill='%23009246'/><rect x='2' width='1' height='2' fill='%23CE2B37'/></svg>")}
.fahne[data-lang=en]{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='c'><path d='M0,0 v30 h60 v-30 z'/></clipPath><clipPath id='t'><path d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/></clipPath><g clip-path='url(%23c)'><rect width='60' height='30' fill='%23012169'/><path d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/><path d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/><path d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/><path d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/></g></svg>")}
.fahne[data-lang=nl]{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'><rect width='9' height='6' fill='%23fff'/><rect width='9' height='2' fill='%23AE1C28'/><rect y='4' width='9' height='2' fill='%2321468B'/></svg>")}
.fahne[data-lang=es]{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23AA151B'/><rect y='0.5' width='3' height='1' fill='%23F1BF00'/></svg>")}
.fahne[data-lang=pt]{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><rect width='600' height='400' fill='%23F00'/><rect width='240' height='400' fill='%23060'/><circle cx='240' cy='200' r='72' fill='none' stroke='%23FF0' stroke-width='16'/><rect x='204' y='164' width='72' height='80' rx='8' fill='%23fff' stroke='%23F00' stroke-width='10'/></svg>")}

/* Die Verweise auf Instagram und Facebook in der Fussleiste.
   Bewusst nur Symbole und in der gedämpften Schriftfarbe: Sie sollen auffindbar
   sein, aber nicht mit dem Anmeldeknopf um Aufmerksamkeit streiten – ein Klick
   dorthin führt von der Seite weg, auf der sich jemand anmelden soll.
   Die Unterstreichungs-Animation der übrigen Fussleistenlinks gilt hier nicht:
   Unter einem Symbol sieht ein wachsender Strich nach einem Fehler aus. */
footer p.sozial{display:flex;gap:14px;margin-top:10px}
footer p.sozial a{display:inline-flex;color:var(--muted);background-image:none;padding:2px}
footer p.sozial a:hover{color:var(--text)}
footer p.sozial a:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------- Der Demo-Weg auf der Kontaktseite
 * Kein Formular, sondern ein Weg: zwei Sätze und der Knopf, der zum Testzugang
 * führt. Bewusst ruhig gehalten – er steht an derselben Stelle wie vorher die
 * Felder, und ein Kasten mit Rahmen und Farbe wirkte dort wie eine Werbung.
 */

/* ---------------------------------------- Geräterahmen im Radar-Abschnitt
 *
 * Dieselben Rahmen wie in der Bühne, mit drei Unterschieden:
 *
 *   * Volle Breite statt 940 Punkte – hier ist das Bildschirmfoto die Aussage
 *     und nicht die Kulisse, also darf es so gross sein, wie der Abschnitt ist.
 *   * Langsamerer Wechsel. In der Bühne laufen 9 Sekunden, weil dort niemand
 *     liest. Hier soll jemand eine Karte und eine Länderwahl ansehen, und ein
 *     Wechsel mitten im Hinsehen ärgert.
 *   * Etwas grösseres Handy, weil die Meldungen darin lesbar bleiben sollen.
 *
 * Bei «Bewegung reduzieren» steht der Wechsel still – das regelt die Regel
 * weiter oben für .wechsel, und zwar für beide Abschnitte zugleich.
 */
#radarGeraete{max-width:none;padding:0 150px 34px 0}
/* In der Bühne steht die Marke bei -18px, weil der Rahmen dort 940 Punkte breit
   und mittig ist – links davon ist Platz. Hier füllt er die ganze Spalte, und
   -18px schnitt die Marke am Bildrand ab. Auf dem gerenderten Abschnitt
   gesehen. */
#radarGeraete .marke-aw{left:6px}
#radarGeraete .wechsel{animation-duration:15s}
#radarGeraete .wechsel:nth-of-type(2){animation-delay:7.5s}
#radarGeraete .handy{width:226px}
@media(max-width:1000px){ #radarGeraete{padding:0 0 18px} }

/* ------------------------------------------------- Rundschirm und Beispielmeldung
 *
 * Enzo wollte einen Radarschirm «so wie bei einem flugtower wo man die
 * flugzeuge auf dem radar sieht». Der Unterschied zum Mitbewerber liegt nicht
 * in der runden Form – die hat jeder Radarschirm –, sondern darin, was
 * daraufsteht: Peilskala, beschriftete Entfernungsringe und Ziele mit
 * Datenschild. Dessen Scheibe zeigt drei namenlose Punkte.
 *
 * Gezeichnet wird der Inhalt von tools/radarbild.py aus unseren Geodaten; hier
 * steht nur, wie er aussieht und wie er sich bewegt.
 */
.radarduo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:34px;align-items:center;max-width:860px;margin:0 auto}
@media(max-width:760px){ .radarduo{grid-template-columns:1fr;gap:26px;justify-items:center} }

/* Der Schirm ist in beiden Farbschemen dunkel. Ein Radarschirm IST dunkel –
   eine weisse Scheibe sähe aus wie ein Tortendiagramm. */
.radarschirm{position:relative;aspect-ratio:1;width:100%;max-width:470px;
  border-radius:50%;overflow:hidden;background:#070C16;
  border:1px solid rgba(127,216,180,.22);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6),var(--schatten)}
.radarschirm svg{position:relative;z-index:1;width:100%;height:100%;display:block}

/* Der Strahl: ein Kegelverlauf, der dem Winkel nach ausblendet.
   Ein SVG-Dreieck mit linearem Verlauf wurde zum massiven Tortenstück – der
   lineare Verlauf läuft quer durch das Dreieck, nicht dem Winkel nach. */
.radarschirm .strahl{position:absolute;inset:0;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,
    rgba(127,216,180,.80) 0deg 1deg,
    transparent 2.5deg 250deg,
    rgba(127,216,180,.20) 360deg);
  animation:radardreh 6s linear infinite}
@keyframes radardreh{ to{transform:rotate(360deg)} }

.radarschirm .rbringe circle,.radarschirm .rbringe line{fill:none;
  stroke:rgba(127,216,180,.20);stroke-width:1}

/* Die Ziele leuchten auf, wenn der Strahl darüberstreicht – darum hängt der
   Versatz an der Peilung und nicht an einer laufenden Nummer. Negativer Versatz
   heisst: schon im Takt, nicht erst nach einer Umdrehung. */
.radarschirm .rbziel{animation:rbblip 6s linear infinite;
  animation-delay:calc((var(--rbpeilung) / 360 - 1) * 6s)}
@keyframes rbblip{ 0%{opacity:1} 55%{opacity:.5} 100%{opacity:.42} }
.radarschirm .rbs2{fill:#FFB020}
.radarschirm .rbs3{fill:#FF6B7A}
/* Hohl heisst «nur das Land bekannt» – dieselbe Unterscheidung wie im Radar der
   Anwendung, wo dort eine Marke statt einer Fläche steht. */
.radarschirm .rbziel.hohl{fill:none;stroke-width:1.8}
.radarschirm .rbs3.hohl{stroke:#FF6B7A}
.radarschirm .rbs2.hohl{stroke:#FFB020}

/* Die Beispielmeldung auf einem Telefon: Sperrbildschirm mit Uhr und Datum,
   darauf die Mitteilung, wie unsere App sie schickt. */
.pushseite{width:100%;max-width:280px;margin:0 auto}
.pushhandy{border-radius:34px;padding:9px;background:var(--rahmen);
  box-shadow:var(--schatten)}
.pushschirm{position:relative;border-radius:26px;overflow:hidden;padding:30px 10px 16px;
  background:linear-gradient(170deg,#101A2E,#060A13 70%);min-height:330px}
.pushschirm .kerbe{position:absolute;left:50%;top:9px;transform:translateX(-50%);
  width:62px;height:13px;border-radius:0 0 11px 11px;background:#05080F}
.pushschirm .uhr{margin-top:22px;text-align:center;color:#EFF4FF;font-size:46px;
  font-weight:300;letter-spacing:-.02em;line-height:1}
.pushschirm .datum{text-align:center;color:rgba(239,244,255,.65);font-size:12.5px;
  margin-top:4px}
.pushschirm .pushkarte{margin-top:26px}

/* Die Mitteilung selbst. Sie liegt auf dem Sperrbildschirm, also hell auf
   dunkel – und mit eigenen Farben statt der Variablen, weil der Bildschirm in
   beiden Farbschemen dunkel ist.

   Diese Regeln waren beim Umbau auf den Rundschirm versehentlich mit
   herausgeschnitten worden. Auf dem Bild stand die Mitteilung danach als
   unsichtbarer Text auf dunklem Grund – kein Fehler im Bau, nur nichts mehr da.
   Meine .replace-Aufrufe liefen ins Leere und meldeten nichts; gesehen habe ich
   es erst am gerenderten Bild. */
.pushkarte{background:rgba(248,250,255,.97);border-radius:16px;padding:12px 13px;
  box-shadow:0 12px 34px rgba(0,0,0,.4)}
.pushkarte .kopf{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.pushkarte .kopf img{width:22px;height:22px;border-radius:6px;display:block}
.pushkarte .kopf b{font-size:12.5px;color:#0B1220;letter-spacing:.01em}
.pushkarte .kopf span{margin-left:auto;font-size:11.5px;color:#5B6884}
.pushkarte .titel{font-weight:700;font-size:15px;margin:0 0 2px;color:#0B1220}
.pushkarte .zeile{font-size:13.5px;color:#3C4762;margin:0}

.pushetikett{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;text-align:center}
.radarcap{color:var(--muted);font-size:12.5px;line-height:1.6;max-width:62ch;
  margin:20px auto 0;text-align:center}

}