/* DADA – Website. Bewusst ohne externe Dienste: die Schrift Nunito liegt
   selbst auf dem Server, es gibt keine Google-Fonts, keine Skripte, keine
   Cookies. Sprachwahl und häufige Fragen sind reine <details>-Elemente, die
   Bildvergrösserung arbeitet mit Kontrollkästchen – alles ohne JavaScript.
   Die Kopfzeile Content-Security-Policy (.htaccess) erlaubt weder Skripte
   noch style-Attribute im HTML: Gestaltung steht ausschliesslich hier.

   Breiten: Handy bis 699 px, Tablet 700 bis 1079 px, Computer ab 1080 px. */

@font-face{font-family:Nunito; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#150E13; --panel:rgba(246,228,234,.04); --panel2:rgba(246,228,234,.025);
  --line:rgba(246,228,234,.1); --ink:#F6E4EA; --mut:rgba(246,228,234,.7);
  --mut2:rgba(246,228,234,.58); --white:#FFFFFF;
  --prim:#E8759A; --prim-soft:#F293B4; --green:#8FD5AF; --gold:#E8C57A; --blue:#9BC0E2;
  --maxw:1200px;
  --gut:clamp(20px,5vw,36px);          /* Seitenrand, überall derselbe */
  --gap:clamp(56px,8vw,104px);         /* Abstand zwischen Abschnitten */
  --ph-r:13.75% / 6.33%;               /* Eckenradius der Bildschirmfotos (88 px von 640 × 1391) */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font:400 16.5px/1.6 Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word}
img{max-width:100%; height:auto}
a{color:var(--prim-soft); text-decoration:none}
a:hover{color:var(--white)}
:focus-visible{outline:2px solid var(--prim-soft); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:#221720; padding:10px 14px; border-radius:10px; z-index:9; color:var(--white)}
.defs{position:absolute; width:0; height:0; overflow:hidden}
.center{text-align:center}
.eyebrow{font-weight:800; font-size:12px; line-height:1; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px}
.eyebrow.green{color:var(--green)}
.eyebrow.rose{color:var(--prim-soft)}

/* Kopf: eine Zeile. Auf dem Handy nur Logo und Sprachwahl, die drei
   Textverweise stehen dort im Fuss. */
header{position:relative; z-index:5}
/* Startseite: der Kopf liegt über dem Himmel des Hero (.room hält den Platz frei) */
header.over{position:absolute; left:0; right:0; top:0}
header.over + main > .room{padding-top:72px}
@media (min-width:700px){header.over + main > .room{padding-top:84px}}
.nav{display:flex; align-items:center; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:11px; color:var(--white); margin-right:auto; min-height:44px}
.brand img{display:block; border-radius:12px; width:40px; height:40px}
.brand span{font-weight:900; font-size:24px; line-height:1; letter-spacing:.01em}
.nav > ul{list-style:none; display:flex; align-items:center; gap:clamp(4px,1.4vw,14px); margin:0; padding:0}
.nav > ul a{display:flex; align-items:center; min-height:44px; padding:0 10px; font-weight:700; font-size:15px; color:rgba(246,228,234,.78)}
.nav > ul a:hover,.nav > ul a[aria-current]{color:var(--white)}
@media (max-width:699px){
  .nav .nav-link{display:none}
}
@media (min-width:700px){
  .nav{padding:20px 0}
  .brand img{width:42px; height:42px}
  .brand span{font-size:26px}
}

/* Sprachwahl */
.lang{position:relative; margin-left:6px}
.lang summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  min-height:44px; padding:0 15px; border-radius:999px; border:1px solid rgba(246,228,234,.2);
  background:rgba(21,14,19,.35);
  font-weight:800; font-size:14.5px; line-height:1; color:var(--ink); user-select:none; -webkit-user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:18px; height:18px; flex:none; color:rgba(246,228,234,.66)}
.lang summary::after{content:""; width:7px; height:7px; border:solid rgba(246,228,234,.55);
  border-width:0 1.7px 1.7px 0; transform:rotate(45deg); margin:-3px 0 0 2px}
.lang[open] summary{border-color:rgba(242,147,180,.55)}
.lang ul{position:absolute; right:0; top:calc(100% + 8px); z-index:20; min-width:200px; margin:0; padding:8px;
  list-style:none; background:#221720; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:2px}
.lang li{margin:0}
.lang ul a,.lang ul span{display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:11px;
  font-weight:700; font-size:15px; color:rgba(246,228,234,.76)}
.lang ul a:hover{background:rgba(246,228,234,.06); color:var(--white)}
.lang ul span{background:rgba(246,228,234,.08); color:var(--white); font-weight:800}

/* Hintergrund hinter Kopf und Hero: Abendhimmel aus Farbverläufen, darüber
   scharfe Sterne (SVG). Kein Foto, nichts Verwischtes. */
.room{position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% 100%,rgba(21,14,19,1) 0%,rgba(21,14,19,0) 60%),
    radial-gradient(70% 46% at 50% 62%,rgba(232,117,154,.2) 0%,rgba(232,117,154,0) 70%),
    radial-gradient(90% 40% at 0% 0%,rgba(143,213,175,.07) 0%,rgba(143,213,175,0) 70%),
    linear-gradient(180deg,#2B1925 0%,#21141D 46%,#150E13 100%)}
.room > .sky{position:absolute; left:0; top:0; width:100%; height:min(640px,100%); z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%); mask-image:linear-gradient(180deg,#000 30%,transparent 100%)}
@media (min-width:1080px){
  .room{background:
    radial-gradient(120% 60% at 50% 100%,rgba(21,14,19,1) 0%,rgba(21,14,19,0) 60%),
    radial-gradient(46% 62% at 74% 40%,rgba(232,117,154,.22) 0%,rgba(232,117,154,0) 70%),
    radial-gradient(50% 50% at 0% 0%,rgba(143,213,175,.07) 0%,rgba(143,213,175,0) 70%),
    linear-gradient(180deg,#2B1925 0%,#21141D 46%,#150E13 100%)}
}

/* Hero */
.hero{position:relative; z-index:4; display:grid; gap:clamp(34px,5vw,56px); align-items:center;
  padding-top:clamp(18px,3.4vw,44px); padding-bottom:clamp(40px,5vw,64px)}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
}
.hero-text{min-width:0}
.hero h1{margin:0 0 clamp(16px,2.2vw,24px); font-weight:900; font-size:clamp(33px,9.6vw,48px);
  line-height:1.04; letter-spacing:-.035em; color:var(--white); text-wrap:balance}
@media (min-width:700px){.hero h1{font-size:clamp(48px,5.6vw,68px)}}
.hero h1 span{display:block}
.hero h1 .accent{color:var(--prim-soft)}
.hero-text > p{margin:0 0 clamp(24px,3.2vw,34px); font-size:clamp(17px,1.6vw,20px);
  line-height:1.5; color:rgba(246,228,234,.82); max-width:34ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:clamp(24px,3.2vw,34px)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 26px; border-radius:999px;
  font-weight:900; font-size:17px; line-height:1.1; text-align:center}
.btn-primary{background:var(--prim); color:#1A0F14; box-shadow:0 12px 34px rgba(232,117,154,.32)}
.btn-primary:hover{background:var(--prim-soft); color:#1A0F14}
.btn-ghost{border:1.5px solid rgba(246,228,234,.3); color:var(--white); font-weight:800}
.btn-ghost:hover{border-color:rgba(246,228,234,.65); color:var(--white)}
.btn svg{width:22px; height:22px; flex:none}
.btn svg.lead{margin:-2px -2px 0 -4px}
@media (max-width:479px){
  .hero-actions .btn{flex:1 1 100%}
  /* Die zwei Store-Knöpfe teilen sich auf dem Handy eine Zeile. */
  .hero-actions .btn-store{flex:1 1 calc(50% - 6px); padding:0 14px}
}
.lock{display:flex; gap:14px; align-items:flex-start; max-width:40ch; margin:0}
.lock .ico{flex:none; width:44px; height:44px; border-radius:14px; background:rgba(143,213,175,.14);
  display:flex; align-items:center; justify-content:center; color:var(--green)}
.lock .ico svg{width:23px; height:23px}
.lock span{font-size:14.5px; line-height:1.5; color:var(--mut)}
.lock strong{display:block; font-weight:800; color:var(--white); font-size:16px; margin-bottom:2px}

/* Bildschirmfotos als Telefon: runde Ecken wie im Bild, schmaler Rahmen */
.ph{display:block; width:100%; border-radius:var(--ph-r); background:#0E090C;
  box-shadow:0 0 0 4px #0E090C,0 0 0 5px rgba(246,228,234,.2),0 26px 60px rgba(0,0,0,.55)}
.zoomable{display:block; position:relative; cursor:zoom-in; border-radius:var(--ph-r); -webkit-tap-highlight-color:transparent}
.zoomable:focus-visible{outline-offset:8px; border-radius:var(--ph-r)}

/* Hero-Bühne: Startbildschirm vorn, Nachtmodus dahinter, Hinweis-Karte davor.
   Alle Masse in Prozent der Bühne, damit sie auf jeder Breite gleich aussieht. */
.hero-visual{min-width:0; display:flex; justify-content:center}
.stage{position:relative; width:min(100%,400px); aspect-ratio:100/124}
@media (min-width:900px){.stage{width:min(100%,470px)}}
.orbits{position:absolute; left:50%; top:47%; width:210%; aspect-ratio:1; transform:translate(-50%,-50%);
  pointer-events:none; overflow:visible}
.stage .zoomable{position:absolute}
.stage .ph-front{left:4%; top:0; width:55.5%; z-index:2}
.stage .ph-back{right:3%; top:11.5%; width:45%; z-index:1}
.stage .ph-back .ph{box-shadow:0 0 0 4px #0E090C,0 0 0 5px rgba(246,228,234,.16),0 26px 60px rgba(0,0,0,.6)}
.stage .ph-front .ph{box-shadow:0 0 0 5px #0E090C,0 0 0 6px rgba(246,228,234,.24),0 30px 70px rgba(0,0,0,.6),0 0 70px rgba(232,117,154,.22)}
.zoom{position:absolute; right:0; bottom:3%; width:64%; z-index:3; margin:0; padding:14px 16px; border-radius:20px;
  background:#261923; border:1.5px solid rgba(242,147,180,.5); box-shadow:0 22px 50px rgba(0,0,0,.6)}
.zoom-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.zoom-head .ico{flex:none; width:32px; height:32px; border-radius:11px; background:rgba(242,147,180,.18);
  display:flex; align-items:center; justify-content:center; color:var(--prim-soft)}
.zoom-head .ico svg{width:18px; height:18px}
.zoom-head strong{font-weight:900; font-size:15.5px; line-height:1.15; color:var(--prim-soft)}
.zoom p{margin:0; font-size:13px; line-height:1.45; color:rgba(246,228,234,.86)}
@media (min-width:900px){
  .zoom{padding:17px 19px}
  .zoom p{font-size:13.5px}
  .zoom-head strong{font-size:16.5px}
}

/* Nacht-Banner: Ausschnitt aus dem Nachtmodus, daneben der Text */
.night{position:relative; z-index:4; display:grid; overflow:hidden; border-radius:26px; margin-bottom:clamp(40px,5vw,64px);
  background:#241821; border:1px solid var(--line); color:var(--ink)}
.night:hover{border-color:rgba(242,147,180,.45); color:var(--ink)}
/* Ausschnitt: „Letzte Nacht“ und die zwei grossen Schaltflächen (im Bild von
   y 836 bis 1306 von 1391). Hintergrund = Farbe des Nachtmodus. */
.night-img{position:relative; min-width:0; background:#150F14; border-bottom:1px solid var(--line)}
.night-img img{display:block; width:100%; height:100%; aspect-ratio:640/470; object-fit:cover; object-position:50% 90.8%}
.pill{grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; margin-bottom:8px; border-radius:999px;
  background:rgba(232,117,154,.14); border:1px solid rgba(232,117,154,.3)}
.pill i{width:6px; height:6px; border-radius:50%; background:var(--prim)}
.pill span{font-weight:800; font-size:11px; line-height:1; color:var(--prim-soft); letter-spacing:.1em}
.night-text{min-width:0; padding:20px 20px 22px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:center}
.night-text h2{grid-column:1 / -1; margin:0 0 4px; font-weight:900; font-size:clamp(22px,2.4vw,27px); line-height:1.15; letter-spacing:-.02em; color:var(--white)}
.night-text p{grid-column:1 / -1; margin:0 0 10px; font-size:15px; line-height:1.5; color:var(--mut); max-width:46ch}
.night-meta{display:flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px; line-height:1.2; color:var(--green)}
.night-meta svg{width:17px; height:17px; flex:none}
.night .go{flex:none; width:44px; height:44px; border-radius:50%; background:rgba(242,147,180,.16);
  border:1px solid rgba(242,147,180,.3); display:flex; align-items:center; justify-content:center; color:var(--prim-soft)}
.night .go svg{width:20px; height:20px}
@media (min-width:700px){
  .night{grid-template-columns:minmax(0,42%) minmax(0,1fr); align-items:stretch}
  .night-img img{aspect-ratio:auto; position:absolute; inset:0; object-position:50% 95.5%}
  .night-img{min-height:270px; border-bottom:0; border-right:1px solid var(--line)}
  .night-text{padding:clamp(24px,3vw,36px); align-content:center}
  .night .go{width:52px; height:52px}
}

/* Vertrauens-Leiste: auf dem Handy zwei mal zwei, sonst eine Zeile */
.trust-bar{border-top:1px solid rgba(246,228,234,.08); border-bottom:1px solid rgba(246,228,234,.08); background:var(--panel2)}
.trust{list-style:none; margin:0 auto; padding-top:20px; padding-bottom:20px; display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content)); justify-content:center; gap:14px clamp(22px,8vw,44px)}
.trust li{display:flex; align-items:center; gap:9px; font-weight:800; font-size:14.5px; line-height:1.2; color:rgba(246,228,234,.84)}
.trust svg{width:18px; height:18px; flex:none; color:var(--green)}
@media (min-width:700px){
  .trust{display:flex; flex-wrap:wrap; gap:12px clamp(20px,4vw,44px)}
}

/* Abschnitte */
main section{padding:0 0 var(--gap)}
section.privacy{padding:var(--gap) 0}
h2{font-weight:900; letter-spacing:-.025em; color:var(--white); margin:0 0 16px;
  font-size:clamp(28px,3.6vw,42px); line-height:1.1; text-wrap:balance}
h3{font-weight:900; color:var(--white); margin:0 0 10px}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(28px,4vw,52px); align-items:start}
.privacy p{font-size:clamp(15.5px,1.4vw,17px); line-height:1.6; color:var(--mut); max-width:44ch; margin:0 0 22px; text-wrap:pretty}
.arrow-link{display:inline-flex; align-items:center; gap:9px; min-height:44px; font-weight:800; font-size:15.5px; color:var(--prim-soft)}
.arrow-link svg{width:18px; height:18px}
.priv-list{display:flex; flex-direction:column; gap:12px; min-width:0}
.priv-card{display:flex; gap:15px; padding:18px; border-radius:22px; background:var(--panel); border:1px solid rgba(246,228,234,.09)}
.priv-card .ico{flex:none; width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center}
.priv-card .ico svg{width:23px; height:23px}
.priv-card h3{font-size:16.5px; line-height:1.2; margin:0 0 5px}
.priv-card p{margin:0; font-size:14.5px; line-height:1.5; color:var(--mut); max-width:none}

/* Funktionen */
.feats{display:flex; flex-direction:column; gap:clamp(16px,2vw,22px); margin:clamp(22px,3vw,30px) 0 clamp(16px,2vw,22px)}
.feat{display:grid; gap:24px; padding:22px 22px 0; border-radius:28px; overflow:hidden;
  background:var(--panel); border:1px solid rgba(246,228,234,.09)}
.feat.warm{background:rgba(242,147,180,.06); border-color:rgba(242,147,180,.16)}
.feat-text{min-width:0}
.feat h3{font-size:clamp(22px,2.4vw,27px); line-height:1.15; letter-spacing:-.015em}
.feat p{margin:0; font-size:15.5px; line-height:1.6; color:var(--mut); max-width:40ch}
.feat-img{min-width:0; display:flex; justify-content:center}
.feat-img .zoomable{width:min(250px,78%)}
/* Handy: das Telefon ragt unten aus der Karte, statt sie um eine ganze
   Bildschirmhöhe zu verlängern. Antippen zeigt das ganze Bild. */
@media (max-width:699px){
  .feat-img .zoomable{border-radius:0}
  .feat-img .ph{aspect-ratio:640/800; object-fit:cover; object-position:top;
    border-radius:13.75% 13.75% 0 0 / 11% 11% 0 0}
  /* Nachtmodus: nur der Kopf mit der grossen Uhr, nach unten ausgeblendet
     (die Schaltflächen zeigt schon das Banner unter dem Hero) */
  .feat-img.short .ph{aspect-ratio:640/540;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
}
@media (min-width:700px){
  .feat{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,46px); align-items:center;
    padding:clamp(26px,3vw,36px); border-radius:30px}
  .feat.flip .feat-text{order:2}
  .feat.flip .feat-img{order:1}
}
.ico-box{display:inline-flex; width:48px; height:48px; border-radius:16px; align-items:center; justify-content:center; margin-bottom:16px}
.ico-box svg{width:26px; height:26px}
.minis{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(16px,2vw,22px)}
.mini{padding:22px; border-radius:26px; background:rgba(246,228,234,.035); border:1px solid rgba(246,228,234,.09)}
.mini .ico-box{width:44px; height:44px; border-radius:15px; margin-bottom:14px}
.mini .ico-box svg{width:24px; height:24px}
.mini h3{font-size:19px; line-height:1.2; margin:0 0 8px}
.mini p{margin:0; font-size:15px; line-height:1.55; color:var(--mut)}
.tint-pink{background:rgba(242,147,180,.14); color:var(--prim-soft)}
.tint-pink2{background:rgba(242,147,180,.18); color:var(--prim-soft)}
.tint-green{background:rgba(143,213,175,.13); color:var(--green)}
.tint-gold{background:rgba(232,197,122,.14); color:var(--gold)}
.tint-blue{background:rgba(155,192,226,.15); color:var(--blue)}

/* Partner-Sync */
.sync{padding:22px 22px 0; border-radius:28px; overflow:hidden;
  background:linear-gradient(160deg,rgba(242,147,180,.1),rgba(246,228,234,.03)); border:1px solid rgba(242,147,180,.16)}
.sync .two{align-items:center; gap:clamp(26px,4vw,48px)}
.sync h2{font-size:clamp(25px,3vw,34px); line-height:1.1; letter-spacing:-.02em; margin:0 0 10px}
.sync-text > p{margin:0 0 24px; font-size:15.5px; line-height:1.6; color:var(--mut); max-width:42ch}
.steps{display:flex; flex-direction:column; gap:14px}
.step{display:flex; gap:13px; align-items:flex-start}
.step i{flex:none; width:28px; height:28px; border-radius:9px; background:rgba(242,147,180,.18); color:var(--prim-soft);
  font-weight:900; font-size:14px; line-height:28px; text-align:center; font-style:normal}
.step span{font-size:15px; line-height:1.5; color:rgba(246,228,234,.78)}
.step strong{font-weight:800; color:var(--white)}
.sync-img{min-width:0; display:flex; justify-content:center}
.sync-img .zoomable{width:min(250px,78%)}
@media (max-width:699px){
  .sync-img .zoomable{border-radius:0}
  .sync-img .ph{aspect-ratio:640/940; object-fit:cover; object-position:top;
    border-radius:13.75% 13.75% 0 0 / 9.4% 9.4% 0 0}
}
@media (min-width:700px){
  .sync{padding:clamp(28px,4vw,44px); border-radius:32px}
}

/* Galerie: auf Handy und Tablet eine Reihe zum Wischen, am Computer sechs nebeneinander */
.gallery-hint{margin:-6px 0 0; font-size:14.5px; line-height:1.5; color:var(--mut2)}
.gallery{display:flex; gap:16px; margin:clamp(20px,3vw,28px) calc(-1 * var(--gut)) 0; padding:10px var(--gut) 26px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut);
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery figure{flex:0 0 min(62%,250px); margin:0; display:flex; flex-direction:column; gap:14px; scroll-snap-align:start}
.gallery .ph{box-shadow:0 0 0 4px #0E090C,0 0 0 5px rgba(246,228,234,.2),0 14px 26px rgba(0,0,0,.45)}
.gallery figcaption{font-weight:700; font-size:13.5px; line-height:1.4; color:var(--mut)}
@media (min-width:1080px){
  .gallery{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; margin-left:0; margin-right:0;
    padding:6px 5px 0; overflow:visible}
  .gallery figure{flex:none}
}

/* Vergrösserung ohne JavaScript und ohne Sprungziele: je Bild ein
   unsichtbares Kontrollkästchen (.lb-t) direkt vor der grossen Ansicht (.lb).
   Das Bild in der Seite und die grosse Ansicht sind Beschriftungen desselben
   Kästchens – ein Tipp öffnet, ein Tipp irgendwohin schliesst. Die Adresse
   ändert sich nicht, deshalb rollt kein Browser die Seite (mit :target sprang
   Safari auf dem iPhone ans Seitenende). Das Kästchen liegt fest oben links im
   Fenster, damit auch ein Fokus nichts verschiebt. */
.lb-t{position:fixed; left:0; top:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.lb{position:fixed; inset:0; z-index:100; visibility:hidden; opacity:0; pointer-events:none;
  background:rgba(12,7,10,.9); touch-action:pinch-zoom; cursor:zoom-out; -webkit-tap-highlight-color:transparent;
  transition:opacity .22s ease,visibility 0s linear .22s}
.lb-t:checked + .lb{visibility:visible; opacity:1; pointer-events:auto; transition:opacity .22s ease,visibility 0s}
.lb-t:focus-visible + .lb{outline:2px solid var(--prim-soft); outline-offset:-6px}
.lb-in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); color:var(--ink)}
.lb img{display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 96px); min-height:0;
  border-radius:var(--ph-r); background:#0E090C;
  box-shadow:0 0 0 5px #0E090C,0 0 0 6px rgba(246,228,234,.22),0 30px 80px rgba(0,0,0,.7);
  transform:scale(.9); transition:transform .28s cubic-bezier(.2,.8,.2,1)}
@supports (height:100dvh){.lb img{max-height:calc(100dvh - 96px)}}
.lb-t:checked + .lb img{transform:none}
.lb-cap{display:flex; align-items:center; gap:12px; max-width:100%; font-weight:700; font-size:14px; line-height:1.3; color:rgba(246,228,234,.86); text-align:center}
.lb-x{flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(246,228,234,.3); background:rgba(246,228,234,.08); color:var(--white); font-weight:800; font-size:20px; line-height:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lb,.lb-t:checked + .lb,.lb img{transition:none}
  .lb img{transform:none}
  .faq summary::after{transition:none}
}

/* Download */
.download{position:relative; overflow:hidden; padding:clamp(30px,5vw,56px) clamp(22px,4vw,48px); border-radius:32px; text-align:center;
  background:radial-gradient(90% 120% at 50% 0%,rgba(232,117,154,.16) 0%,rgba(232,117,154,0) 62%),var(--panel);
  border:1px solid rgba(242,147,180,.2)}
.dl-logo{display:block; width:72px; height:72px; margin:0 auto 18px; border-radius:20px; box-shadow:0 14px 34px rgba(0,0,0,.45)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(143,213,175,.14); margin-bottom:16px}
.badge i{width:7px; height:7px; border-radius:50%; background:var(--green)}
.badge span{font-weight:800; font-size:12.5px; line-height:1; color:var(--green); letter-spacing:.05em}
.download h2{font-size:clamp(30px,3.6vw,40px); margin:0 0 12px}
.download > p{font-size:16px; line-height:1.6; color:var(--mut); margin:0 auto clamp(24px,3vw,32px); max-width:50ch; text-wrap:pretty}
.store-buttons{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:stretch; margin-bottom:22px}
.store-btn{display:inline-flex; align-items:center; gap:12px; min-height:62px; padding:9px 22px 9px 18px; border-radius:16px; text-align:left}
.store-btn svg{flex:none; width:34px; height:34px}
.store-btn small{display:block; font-weight:700; font-size:12px; line-height:1.15; letter-spacing:.01em}
.store-btn b{display:block; font-weight:800; font-size:21px; line-height:1.15; letter-spacing:-.01em}
/* Aktiv: heller Knopf im Stil der Store-Plaketten */
.store-btn.live{background:var(--white); color:#000; border:1px solid var(--white);
  box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.08)}
.store-btn.live:hover{background:#F6E4EA; border-color:#F6E4EA; color:#000}
.store-btn.live svg{margin-top:-3px}
/* Noch nicht verfügbar: gestrichelt, zurückgenommen, kein Verweis */
.store-btn.soon{cursor:default; border:1.5px dashed rgba(246,228,234,.24); color:rgba(246,228,234,.6)}
.store-btn.soon svg{width:26px; height:26px; opacity:.6}
.store-btn.soon b{font-size:15.5px; line-height:1.2}
.store-btn.soon small{font-weight:600; font-size:12px; color:rgba(246,228,234,.55); margin-top:2px}
@media (max-width:479px){
  .store-btn{flex:1 1 100%; justify-content:center}
}
.download .meta{font-size:14.5px; line-height:1.5; color:var(--mut2); margin:0}

/* Häufige Fragen */
.faq{max-width:calc(840px + 2 * var(--gut)); margin:0 auto}
.faq h2{font-size:clamp(27px,3.4vw,38px); margin:0 0 clamp(20px,3vw,30px)}
.faq-list{display:flex; flex-direction:column; gap:10px}
.faq details{border-radius:20px; background:var(--panel); border:1px solid rgba(246,228,234,.09); overflow:hidden}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; min-height:60px; padding:16px 20px;
  font-weight:800; font-size:16.5px; line-height:1.35; color:var(--white)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:9px; height:9px; margin-left:auto;
  border:solid var(--prim-soft); border-width:0 2px 2px 0; transform:rotate(-45deg); transition:transform .18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 20px 20px; font-size:15px; line-height:1.6; color:var(--mut); max-width:64ch}

/* Wichtiger Hinweis */
.notice{display:flex; gap:15px; padding:clamp(18px,3vw,26px); border-radius:24px;
  background:rgba(232,197,122,.07); border:1px solid rgba(232,197,122,.2)}
.notice .ico{flex:none; width:40px; height:40px; border-radius:14px; background:rgba(232,197,122,.14);
  display:flex; align-items:center; justify-content:center; color:var(--gold)}
.notice .ico svg{width:22px; height:22px}
.notice p{margin:0; font-size:14.5px; line-height:1.6; color:var(--mut); max-width:78ch; text-wrap:pretty}
.notice strong{font-weight:800; color:var(--white)}

/* Fuss */
footer{border-top:1px solid rgba(246,228,234,.09); background:rgba(246,228,234,.02)}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between;
  padding-top:clamp(26px,4vw,40px); padding-bottom:clamp(30px,4vw,40px)}
footer ul{list-style:none; display:flex; flex-wrap:wrap; gap:0 24px; margin:0; padding:0}
footer ul a{display:flex; align-items:center; min-height:44px; font-weight:700; font-size:15px; color:var(--mut)}
footer a:hover{color:var(--white)}
footer p{margin:0; font-weight:600; font-size:13.5px; line-height:1.4; color:var(--mut2)}
@media (max-width:699px){
  footer .wrap{flex-direction:column; align-items:flex-start}
  footer .brand{margin-right:0}
}

/* Unterseiten: Support, Datenschutz, Impressum */
.page{padding-top:clamp(20px,4vw,44px); padding-bottom:clamp(56px,7vw,84px); max-width:calc(860px + 2 * var(--gut))}
.page h1{font-weight:900; font-size:clamp(32px,4vw,44px); line-height:1.08; letter-spacing:-.03em; color:var(--white); margin:0 0 18px}
.page h2{font-size:clamp(23px,2.6vw,29px); margin:44px 0 14px}
.page h3{font-size:18.5px; line-height:1.3; margin:26px 0 8px}
.page p,.page li{color:rgba(246,228,234,.76); font-size:16px}
.page .lead{font-size:17.5px; color:rgba(246,228,234,.84)}
.page ul{padding-left:22px}
.page li{margin:6px 0}
.card{background:var(--panel); border:1px solid rgba(246,228,234,.09); border-radius:22px; padding:20px 22px; margin:16px 0}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); margin:18px 0}
.grid .card{margin:0}
.note{background:rgba(242,147,180,.08); border:1px solid rgba(242,147,180,.18); border-radius:22px; padding:18px 20px; margin:20px 0}
.note p:first-child{margin-top:0}
.note p:last-child{margin-bottom:0}
.meta{color:var(--mut2); font-size:14.5px}
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:15px}
th,td{text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top; color:rgba(246,228,234,.76)}
th{font-weight:800; color:var(--white)}
code{background:rgba(246,228,234,.08); padding:2px 6px; border-radius:6px; font-size:14px}
hr{border:0; border-top:1px solid var(--line); margin:34px 0}