/* ==========================================================================
   Schrift Poppins, lokal eingebunden (keine Verbindung zu Google-Servern).
   Lizenz: SIL Open Font License, siehe fonts/LICENSE-Poppins.txt
   ========================================================================== */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/poppins-latin-ext-300-normal.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/poppins-latin-300-normal.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:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-latin-ext-400-normal.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-latin-400-normal.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:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/poppins-latin-ext-500-normal.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/poppins-latin-500-normal.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:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-latin-ext-600-normal.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-latin-600-normal.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:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-latin-ext-700-normal.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-latin-700-normal.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}

/* ==========================================================================
   Das Blau steht fest und ist in allen Kombinationen gleich.
   Unterschiedlich ist nur die Signalfarbe. Die Liste der Signalfarben steht
   in app.js (THEMES) und wird zur Laufzeit gesetzt.
   ========================================================================== */

/* ---------- Startwert: Apricot ---------- */
:root{
  --p-dark:#1E2A76;    --p-dark-rgb:30,42,118;
  --p-light:#3A4FA5;   --p-light-rgb:58,79,165;
  --accent:#FFBFA2;    --accent-rgb:255,191,162;
  --accent-hover:#FF8D55;
  --on-accent:#682E12;
  --mesh-base:#4459BE; --mesh-deep:#18215F;
  --mesh-top-rgb:150,170,235;
}

:root{
  /* Die alten Namen bleiben bestehen und zeigen jetzt auf das Farbschema */
  --blue:var(--p-light);
  --blue-2:var(--p-dark);
  --blue-ink:var(--p-dark);
  --cherry:var(--accent);
  --cherry-hover:var(--accent-hover);

  --grad:linear-gradient(205deg,var(--p-light) 0%,var(--p-dark) 78%);
  --grad-soft:linear-gradient(205deg,var(--mesh-base) 0%,var(--p-dark) 80%);
  /* Mesh-Verlauf, nur noch auf den farbigen Flaechen */
  --grad-mesh:
    radial-gradient(72% 62% at 7% -8%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(66% 60% at 99% 2%, rgba(var(--mesh-top-rgb),.90) 0%, rgba(var(--mesh-top-rgb),0) 58%),
    radial-gradient(86% 82% at 90% 110%, rgba(var(--accent-rgb),.78) 0%, rgba(var(--accent-rgb),0) 60%),
    radial-gradient(58% 54% at 38% 64%, rgba(var(--p-dark-rgb),.55) 0%, rgba(var(--p-dark-rgb),0) 70%),
    linear-gradient(200deg,var(--mesh-base) 0%,var(--mesh-deep) 86%);
  /* Breite, flache Flaechen wie die Fusszeile */
  --grad-mesh-wide:
    radial-gradient(44% 130% at 3% -25%, rgba(255,255,255,.44) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(40% 135% at 58% -18%, rgba(var(--mesh-top-rgb),.88) 0%, rgba(var(--mesh-top-rgb),0) 62%),
    radial-gradient(50% 175% at 92% 106%, rgba(var(--accent-rgb),.82) 0%, rgba(var(--accent-rgb),0) 64%),
    radial-gradient(34% 125% at 30% 72%, rgba(var(--p-dark-rgb),.55) 0%, rgba(var(--p-dark-rgb),0) 72%),
    linear-gradient(200deg,var(--mesh-base) 0%,var(--mesh-deep) 86%);
  /* Ueberschriften bleiben in der Primaerfarbe, damit sie immer gut lesbar sind.
     Die Aktionsfarbe traegt die Knoepfe, nicht den Text. */
  /* Fuer hohe, schmale Flaechen wie die Fusszeile auf dem Handy:
     dieselben Lichter, aber auf das Hochformat gerechnet, damit der
     Verlauf nicht in die Breite gezogen wirkt. */
  --grad-mesh-hoch:
    radial-gradient(120% 34% at 0% -2%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(115% 32% at 100% 6%, rgba(var(--mesh-top-rgb),.88) 0%, rgba(var(--mesh-top-rgb),0) 64%),
    radial-gradient(135% 44% at 92% 101%, rgba(var(--accent-rgb),.80) 0%, rgba(var(--accent-rgb),0) 66%),
    radial-gradient(100% 30% at 28% 66%, rgba(var(--p-dark-rgb),.52) 0%, rgba(var(--p-dark-rgb),0) 74%),
    linear-gradient(196deg,var(--mesh-base) 0%,var(--mesh-deep) 88%);
  --grad-text:linear-gradient(96deg,var(--p-dark) 0%,var(--p-light) 100%);

  --paper:#FEFEFE;
  --mist:#F4F5F7;              /* helles Grau, einfarbig */
  --mist-2:#ECEEF2;
  --card:#FFFFFF;
  --ink:#2A2E38;
  --ink-mid:#4A505C;
  --ink-soft:#6F7684;
  --line:#E4E6EB;
  --line-strong:#D3D7DE;
  --on-blue:#FFFFFF;
  --on-blue-soft:rgba(255,255,255,.86);

  --r-s:12px; --r-m:18px; --r-l:24px; --r-xl:30px;
  --shadow:0 18px 44px -30px rgba(var(--p-dark-rgb),.4);
  --shadow-lg:0 40px 80px -40px rgba(42,46,56,.4);

  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --gut:24px;
  --nav-h:78px;
  color-scheme:light;
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overscroll-behavior-y:none;
  /* Was hinter der Seite liegt: oben dasselbe Weiss wie die Kopfzeile,
     unten dasselbe Blau wie die Fusszeile. So entsteht beim Ueberziehen
     an keiner Seite ein fremdfarbiger Streifen. */
  background-color:var(--paper);
  background-image:linear-gradient(180deg,var(--paper) 0 50%,var(--mesh-deep) 50% 100%);
  background-attachment:fixed}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
html.lang-pending body{visibility:hidden}
main,.footer{overflow-x:clip}
img,svg{max-width:100%}
img{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.03em;line-height:1.14}
p{margin:0}
:focus-visible{outline:2px solid var(--cherry);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(60px,8vw,110px);position:relative}
.section--tight{padding-block:clamp(44px,5vw,70px)}

/* Weisse und graue Flaechen sind einfarbig. Verlauf gibt es nur noch auf den
   farbigen Flaechen: Halbseiten, Fusszeile und hervorgehobene Karten. */
.hero,.pagehead,.split,.section:not(.section--tint){background-color:var(--paper)}
.section--tint{background-color:var(--mist)}
.section > .wrap{position:relative;z-index:1}

/* Trennlinie nur, wenn zwei graue Flaechen aneinanderstossen */
.section--tint + .section--tint,.section--tint + .close-cta{
  border-top:1px solid var(--line-strong);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-2);margin-bottom:18px;
}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;flex:0 0 auto}
.pagehead .eyebrow::before{display:none}
/* Kopfzeile jeder Unterseite: Titel-Pill, daneben bei Bedarf "Coming soon" */
.pagehead__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
.pagehead .pagehead__top .eyebrow{margin-bottom:0}
/* Seitentitel ganz oben: roter Button wie Warteliste */
.pagehead .badge{background:var(--cherry)}
.pagehead .eyebrow{
  display:inline-flex;align-items:center;background:var(--cherry);color:var(--on-accent);
  padding:9px 20px;border-radius:999px;font-size:.72rem;letter-spacing:.12em;margin-bottom:22px;
}
.h1{
  font-size:clamp(2.1rem,4.4vw,3.3rem);letter-spacing:-.04em;line-height:1.05;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* Unterlaengen (g, y, ß) brauchen Luft, sonst schneidet background-clip sie ab.
     Die negative Aussenkante haelt den Abstand zum Folgetext gleich. */
  padding-bottom:.22em;margin-bottom:-.16em;
}
.split__panel .h1,.band .h1{background:none;color:#fff}
.h2{font-size:clamp(1.75rem,3.4vw,2.6rem);letter-spacing:-.035em}
.h3{font-size:1.16rem;letter-spacing:-.02em}
.lede{color:var(--ink-soft);max-width:58ch;margin-top:18px;font-size:1.05rem}
.measure{max-width:20ch}
.measure-wide{max-width:26ch}

/* ---------- Badges, alle in Dunkelrot ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;
  background:var(--cherry);color:var(--on-accent);
}
.badge--blue{background:var(--grad)}
.plan--lead .badge{background:#fff;color:var(--blue-2)}
.soon{
  display:inline-flex;font-size:.56rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:var(--cherry);color:var(--on-accent);
}
.ph{
  display:inline-block;font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border:1px dashed var(--line-strong);border-radius:999px;padding:4px 10px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  font-weight:500;font-size:.98rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,filter .2s ease,
             transform .16s ease,box-shadow .2s ease;
}
.btn--primary{background:var(--cherry);color:var(--on-accent)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn.is-tap{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
/* Die Farbe bleibt gleich, nur ein leichter Schatten und der Anhub zeigen die Reaktion */
.btn--primary:focus-visible,.btn--primary:active{
  background:var(--cherry);color:var(--on-accent);
  box-shadow:0 14px 28px -16px rgba(var(--p-dark-rgb),.45)}
@media (hover:hover){.btn--primary:hover{
  background:var(--cherry);color:var(--on-accent);
  box-shadow:0 14px 28px -16px rgba(var(--p-dark-rgb),.45)}}
.btn--primary.is-tap{
  background:var(--cherry);color:var(--on-accent);
  box-shadow:0 14px 28px -16px rgba(var(--p-dark-rgb),.45)}
.btn--blue,.btn--navy{background:var(--grad);color:#fff}
@media (hover:hover){.btn--blue:hover,.btn--navy:hover{filter:brightness(1.08);box-shadow:0 16px 30px -18px rgba(47,98,166,.8)}}
.btn--blue.is-tap,.btn--navy.is-tap{filter:brightness(1.08);box-shadow:0 16px 30px -18px rgba(47,98,166,.8)}
/* Zweite Aktion: Rahmen in der Aktionsfarbe, Text bleibt dunkel und lesbar */
.btn--line{border-color:var(--accent);border-width:2px;color:var(--on-accent);background:transparent}
@media (hover:hover){.btn--line:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}}
.btn--line.is-tap{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--line:active{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
/* Auf blauen Flaechen: hell umrandet, beim Beruehren und Klicken dunkler Text auf Weiss */
.split__panel .btn--line,.on-blue .btn--line{border-color:rgba(255,255,255,.55);color:#fff;border-width:2px}
.split__panel .btn--line:focus-visible,.on-blue .btn--line:focus-visible{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
@media (hover:hover){.split__panel .btn--line:hover,.on-blue .btn--line:hover{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}}
.split__panel .btn--line.is-tap,.on-blue .btn--line.is-tap{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
.split__panel .btn--line:active,.on-blue .btn--line:active{
  background:var(--accent-hover);color:var(--on-accent);border-color:var(--accent-hover);
}
.btn--sm{padding:11px 20px;font-size:.9rem}
.link{font-weight:600;color:var(--cherry);text-decoration:none;font-size:.95rem}
@media (hover:hover){.link:hover{text-decoration:underline;text-underline-offset:4px}}
.link.is-tap{text-decoration:underline;text-underline-offset:4px}

/* ---------- Navigation: alles hellblau, nur Warteliste rot ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(254,254,254,.93);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:16px;height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;color:var(--ink)}
.logo__mark{width:38px;height:38px;border-radius:11px;border:1px dashed var(--line-strong);
  display:grid;place-items:center;font-size:.52rem;font-weight:500;color:var(--ink-soft)}
.logo__word{font-size:1.24rem;font-weight:600;letter-spacing:-.045em}
.nav__links{display:none;gap:20px;margin-left:auto;align-items:center;flex:0 1 auto;min-width:0}
.nav__links a{text-decoration:none;font-weight:500;font-size:.92rem;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding-block:4px;border-bottom:2px solid transparent}
@media (hover:hover){.nav__links a:hover{border-bottom-color:var(--blue)}}
.nav__links a.is-tap{border-bottom-color:var(--blue)}
.nav__links a[aria-current="page"]{border-bottom-color:var(--ink);font-weight:600}
.nav__links .soon{display:none}
.nav__end{display:flex;align-items:center;gap:9px;margin-left:auto;flex:0 0 auto}
.nav__links+.nav__end{margin-left:18px}
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;flex:0 0 auto}
.lang button{background:transparent;border:0;padding:7px 11px;font-weight:600;font-size:.74rem;
  cursor:pointer;flex:0 0 auto;line-height:1.2;color:var(--blue-ink)}
.lang button[aria-pressed="true"]{background:var(--grad);color:#fff}
.nav__cta{display:none}
.burger{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;
  place-items:center;gap:5px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
.menu{display:none;position:fixed;inset:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 0 0;
  z-index:55;background:var(--paper);padding:14px 20px 40px;overflow-y:auto}
/* Das Menue oeffnet ueber die Adresszeile und braucht dafuer kein
   JavaScript. Ein Klick auf einen Eintrag wechselt die Adresse und
   schliesst es damit wieder. */
.menu:target{display:block}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;
  font-weight:600;font-size:1.4rem;letter-spacing:-.03em;padding:16px 18px;border-radius:var(--r-m);
  color:var(--ink)}
.menu a[aria-current="page"]{background:var(--mist)}
.menu .btn{width:100%;margin-top:14px}
@media (min-width:1180px){
  .nav__links{display:flex}.nav__cta{display:inline-flex}.burger{display:none}.menu{display:none!important}
}

/* ==========================================================================
   Halbseitige Blauflaechen
   ========================================================================== */
.split{position:relative;isolation:isolate}
.split__grid{display:grid;gap:28px;align-items:center;position:relative;z-index:1}
.split__panel{background:var(--grad-mesh);background-size:100% 100%;background-position:0% 0%;color:#fff;
  border-radius:var(--r-xl);padding:clamp(28px,4vw,52px)}
.split__panel .eyebrow{color:rgba(255,255,255,.8)}
.split__panel .lede,.split__panel p{color:var(--on-blue-soft)}
.split__panel h2,.split__panel h3,.split__panel h4{color:#fff}
.split__text{padding-block:8px}
@media (min-width:920px){
  .split{--sp:clamp(24px,3vw,46px);padding-block:var(--sp)}
  .split::before{content:"";position:absolute;z-index:0;top:var(--sp);bottom:var(--sp);width:50vw;
    background:var(--grad-mesh);background-size:100% 100%;background-position:0% 0%;
    will-change:auto}
  .split--right::before{right:0;border-radius:44px 0 0 44px}
  .split--left::before{left:0;border-radius:0 44px 44px 0}
  .split__grid{grid-template-columns:1fr 1fr;gap:0}
  .split__panel{background:none;border-radius:0;padding:clamp(48px,6vw,92px) 0 clamp(48px,6vw,92px) clamp(36px,4.5vw,64px)}
  .split--left .split__panel{padding:clamp(48px,6vw,92px) clamp(36px,4.5vw,64px) clamp(48px,6vw,92px) 0;order:-1}
  .split__text{padding-block:clamp(48px,6vw,92px);padding-right:clamp(36px,4.5vw,64px)}
  .split--left .split__text{padding-right:0;padding-left:clamp(36px,4.5vw,64px)}
}
@media (max-width:919px){.split{padding-block:clamp(44px,7vw,68px)}}

/* ---------- Hero ---------- */
/* Der Hero startet auf derselben Hoehe wie der Kopf jeder Unterseite,
   und sein Kennzeichen hat dasselbe Mass wie der Titel-Pill der Unterseiten */
.hero .badge{padding:9px 20px;font-size:.72rem;letter-spacing:.12em}
.hero{padding-block:clamp(56px,6vw,86px) clamp(44px,6vw,80px)}
.hero__grid{display:grid;gap:44px;align-items:start}
/* Rasterfelder duerfen auf schmalen Schirmen nicht ueber ihre Spalte hinauswachsen */
.hero__grid > *,.split__grid > *,.partner__grid > *,.shop__grid > *,
.close__grid > *,.grid > *,.steps > *,.plans > *,.cities > *{min-width:0}
@media (min-width:1000px){.hero__grid{grid-template-columns:1fr 1fr;gap:36px}}
.hero__sub{margin-top:22px;font-size:1.02rem;color:var(--ink-soft);max-width:52ch}

.form{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:520px}
.form input[type="email"]{flex:1 1 220px;min-width:0;padding:15px 20px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font:inherit;font-size:1rem}
.form input[type="email"]::placeholder{color:var(--ink-soft)}
.form input[type="email"]:focus{border-color:var(--blue)}
.form__note{margin-top:14px;font-size:.82rem;color:var(--ink-soft);max-width:46ch}
.split__panel .form__note{color:var(--on-blue-soft)}
.form__ok{margin-top:14px;display:none;gap:9px;align-items:flex-start;background:var(--mist);
  border-radius:var(--r-m);padding:14px 16px;font-size:.94rem}
.split__panel .form__ok{background:rgba(255,255,255,.18);color:#fff}
.form__ok[data-visible="true"]{display:flex}

.getapp{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{position:relative;display:flex;align-items:center;gap:10px;padding:9px 17px 9px 14px;
  border-radius:12px;background:var(--grad);color:#fff;border:0;
  cursor:not-allowed;text-align:left;min-width:156px}
.store small{display:block;font-size:.58rem;line-height:1.2;color:var(--on-blue-soft);letter-spacing:.02em}
.store b{display:block;font-size:.98rem;line-height:1.2;font-weight:500;letter-spacing:-.02em}
.store__soon{position:absolute;top:-9px;right:9px;background:var(--cherry);color:var(--on-accent);
  font-size:.54rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.qr{display:none;align-items:center;gap:12px;padding:9px 15px 9px 9px;border:1px solid var(--line);
  border-radius:14px;background:var(--mist)}
.qr__box{width:54px;height:54px;border-radius:10px;border:1px dashed var(--line-strong);
  display:grid;place-items:center;color:var(--blue-2);background:#fff}
.qr span{font-size:.74rem;color:var(--ink-soft);line-height:1.35;max-width:15ch}
@media (min-width:780px){.qr{display:flex}}

/* ---------- Kennzahlen, hellblaue Kaesten ---------- */
.stats{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){.stats{grid-template-columns:repeat(3,1fr);gap:18px}}
/* Mesh-Verlauf wie zuvor, aber ohne Bewegung und ohne Hover */
.stat{background:var(--grad-mesh-wide);background-size:100% 100%;color:#fff;border-radius:var(--r-l);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:10px}
.stat b{font-size:clamp(2rem,4vw,2.7rem);line-height:1;letter-spacing:-.05em;
  font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
.stat span{font-size:.92rem;color:var(--on-blue-soft);max-width:26ch}

/* ---------- Kaesten, ein Muster fuer die ganze Website ---------- */
.grid{display:grid;gap:18px;margin-top:40px}
.grid--3{grid-template-columns:1fr}
@media (min-width:760px){.grid--3{grid-template-columns:repeat(3,1fr);gap:20px}}
.grid--2{grid-template-columns:1fr}
@media (min-width:820px){.grid--2{grid-template-columns:repeat(2,1fr);gap:20px}}
.grid--4{grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:860px){.grid--4{grid-template-columns:repeat(4,1fr);gap:16px}}

.feature{display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(20px,2.4vw,26px);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.feature,.step,.quote,.plan,.tile,.city,.pbenefit,.faqlist details{
  position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.feature::after,.step::after,.quote::after,.plan::after,.tile::after,
.city::after,.pbenefit::after,.faqlist details::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-text);transform:scaleX(0);transform-origin:left;
  transition:transform .32s ease;pointer-events:none;
}
@media (hover:hover){.feature:hover::after,.step:hover::after,.quote:hover::after,.plan:hover::after,.tile:hover::after,.city:hover::after,.pbenefit:hover::after,.faqlist details:hover::after{transform:scaleX(1)}}
.feature.is-tap::after,.step.is-tap::after,.quote.is-tap::after,.plan.is-tap::after,.tile.is-tap::after,.city.is-tap::after,.pbenefit.is-tap::after,.faqlist details.is-tap::after{transform:scaleX(1)}
@media (hover:hover){.feature:hover,.step:hover,.quote:hover,.plan:hover,.city:hover,.pbenefit:hover,.faqlist details:hover{
  transform:translateY(-3px);box-shadow:0 20px 42px -28px rgba(47,98,166,.55);
}}
.feature.is-tap,.step.is-tap,.quote.is-tap,.plan.is-tap,.city.is-tap,.pbenefit.is-tap,.faqlist details.is-tap{
  transform:translateY(-3px);box-shadow:0 20px 42px -28px rgba(47,98,166,.55);
}
@media (hover:hover){.feature:hover,.step:hover,.quote:hover,.plan:hover,.faqlist details:hover{border-color:var(--line-strong)}}
.feature.is-tap,.step.is-tap,.quote.is-tap,.plan.is-tap,.faqlist details.is-tap{border-color:var(--line-strong)}
/* Auf blauen Karten laeuft die Kante in Weiss, sonst waere sie unsichtbar */
.split__panel .feature::after,.pbenefit::after,.plan--lead::after{
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.25))}
@media (hover:hover){.split__panel .feature:hover,.pbenefit:hover{
  box-shadow:0 20px 42px -28px rgba(0,0,0,.45);border-color:rgba(255,255,255,.5)
}}
.split__panel .feature.is-tap,.pbenefit.is-tap{
  box-shadow:0 20px 42px -28px rgba(0,0,0,.45);border-color:rgba(255,255,255,.5)
}
.feature__icon{width:42px;height:42px;border-radius:12px;background:var(--mist);color:var(--blue-2);
  display:grid;place-items:center}
.feature h3{font-size:1.1rem}
.feature p{color:var(--ink-soft);font-size:.95rem}
.split__panel .feature{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.split__panel .feature__icon{background:rgba(255,255,255,.22);color:#fff}
.split__panel .feature p{color:var(--on-blue-soft)}
.split__panel .feature+.feature,.split__text .feature+.feature{margin-top:14px}

.tile{display:flex;flex-direction:column;gap:5px;padding:20px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--card);color:inherit;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.tile b{font-size:1rem;font-weight:600}
.tile span{font-size:.85rem;color:var(--ink-soft);transition:color .18s ease}
.tile__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:.78rem;font-weight:600;color:#fff;
  opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;
}
a.tile:focus-visible,a.tile:active{
  background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)
}
@media (hover:hover){a.tile:hover{
  background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)
}}
a.tile.is-tap{
  background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)
}
a.tile:focus-visible b,a.tile:active b{color:#fff}
@media (hover:hover){a.tile:hover b{color:#fff}}
a.tile.is-tap b{color:#fff}
a.tile:focus-visible span,a.tile:active span{color:rgba(255,255,255,.88)}
@media (hover:hover){a.tile:hover span{color:rgba(255,255,255,.88)}}
a.tile.is-tap span{color:rgba(255,255,255,.88)}
a.tile:focus-visible .tile__go,a.tile:active .tile__go{opacity:1;transform:none}
@media (hover:hover){a.tile:hover .tile__go{opacity:1;transform:none}}
a.tile.is-tap .tile__go{opacity:1;transform:none}

.steps{display:grid;gap:18px;margin-top:clamp(40px,5vw,64px);grid-template-columns:1fr}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:20px}}
/* Abstand zwischen Abschnittsueberschrift und dem, was darunter folgt */
.section h2 + .steps,.section .h2 + .steps{margin-top:clamp(44px,5.5vw,70px)}
.eyebrow + .h2,.eyebrow + h2{margin-top:2px}
.h2 + .grid,.h2 + .cities,.h2 + .plans{margin-top:clamp(40px,5vw,60px)}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.split__panel .step{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.step__n{width:34px;height:34px;border-radius:10px;background:var(--cherry);color:var(--on-accent);
  display:grid;place-items:center;font-size:.8rem;font-weight:600}
.step h3{font-size:1.06rem;margin-bottom:10px}
.step p{color:var(--ink-soft);font-size:.93rem;line-height:1.6}
.step > div > h3 + p{margin-top:0}
.split__panel .step p{color:var(--on-blue-soft)}

/* ==========================================================================
   Telefone
   ========================================================================== */
.phones{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:10px}
.phones__caption{color:var(--ink-soft);font-size:.74rem;line-height:1.35;text-align:center;margin-top:18px}
.phones__caption a{color:inherit;text-decoration:underline}
.phone{border:8px solid #2A2E38;border-radius:36px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow-lg);position:relative;flex:0 0 auto}
.phone--map{width:min(250px,44vw);margin-top:40px;margin-right:-58px;z-index:1}
.phone--deal{width:min(296px,57vw);margin-top:-20px;z-index:2}
.phone__status{display:flex;justify-content:space-between;padding:8px 13px 4px;font-size:.5rem;font-weight:600;color:#2A2E38}
/* Kartenansicht im Handy, aufgebaut wie der App-Screenshot */
.phone__mapwrap{position:relative;line-height:0}
.phone__search{
  position:absolute;left:5%;right:5%;top:3.2%;
  background:#fff;border-radius:999px;padding:8px 13px;
  display:flex;align-items:center;gap:8px;
  font-size:.58rem;font-weight:500;color:#6F7684;line-height:1.2;
  box-shadow:0 4px 12px -4px rgba(42,46,56,.28);
}
.phone__search svg{flex:0 0 auto;color:#6F7684}
.phone__card{
  position:absolute;left:4%;right:4%;bottom:3.2%;
  background:#fff;border-radius:14px;padding:9px 10px;
  display:flex;gap:9px;align-items:flex-start;
  box-shadow:0 8px 20px -8px rgba(42,46,56,.4);
}
.phone__thumb{flex:0 0 40px;height:40px;border-radius:9px;background:var(--mist-2)}
.phone__cardbody{flex:1;min-width:0;line-height:1.3}
.phone__cardtop{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.phone__cardtop b{font-size:.63rem;font-weight:600;color:#2A2E38;line-height:1.25}
.phone__x{font-size:.72rem;color:#9AA0AC;line-height:1}
.phone__rate{font-size:.5rem;color:#6F7684;margin-top:2px}
.phone__rate span[aria-hidden]{color:var(--p-dark)}
.phone__deals{display:flex;gap:5px;margin-top:6px;overflow:hidden}
.phone__deals i{
  font-style:normal;font-size:.48rem;font-weight:600;white-space:nowrap;
  background:var(--p-light);color:#fff;padding:4px 8px;border-radius:999px;
}
.phone__mapimg{display:block;width:100%;height:auto}
.phone__pins{position:absolute;inset:0;width:100%;height:100%}

/* ==========================================================================
   Detailansicht im rechten Handy, aufgebaut wie die Airbnb-Ansicht.
   Ablauf in einer Schleife von 12 Sekunden:
   0 bis 4 s    Bild oben (randlos bis unter die Statusleiste), Wechsel nach
                2 Sekunden. Darunter das weisse Blatt mit stark gerundeten Ecken.
   4 bis 6 s    Das Blatt wird hochgezogen, das Bild blendet langsam zu Weiss aus,
                die Statusleiste wechselt von weisser auf dunkle Schrift.
   6 bis 9,6 s  Oben stehen die Eckdaten, darunter fuellen die Deals den
                Bildschirm, der dritte Deal kommt dazu.
   danach       Zurueck in den Ausgangszustand.
   Bewegt wird nur per transform und opacity, die Groesse des Handys ist fest.
   ========================================================================== */
.phone--deal{--sheet-overlap:22px;--status-h:24px;--img-ratio:.56;
  container-type:inline-size;aspect-ratio:296/620;display:flex;flex-direction:column}
.phone--deal .phone__status{position:absolute;top:0;left:0;right:0;z-index:4;height:var(--status-h);
  align-items:center;padding:0 14px;color:#fff;background:transparent;
  animation:deal-status 10s ease-in-out infinite}
@keyframes deal-status{
  0%,44%{color:#fff;background:rgba(255,255,255,0)}
  53%,82%{color:#2A2E38;background:#fff}
  90%,100%{color:#fff;background:rgba(255,255,255,0)}
}
.deal__inner{--pull:calc(var(--sheet-overlap) + var(--status-h) - var(--img-ratio) * 100cqw);
  animation:deal-pull 10s cubic-bezier(.45,.05,.25,1) infinite}
@keyframes deal-pull{
  0%,40%{transform:translateY(0)}
  57%,82%{transform:translateY(var(--pull))}
  93%,100%{transform:translateY(0)}
}
.deal__imgwrap{position:relative;line-height:0;aspect-ratio:auto;height:calc(var(--img-ratio) * 100cqw);
  overflow:hidden;flex:0 0 auto;animation:deal-fade 10s ease-in-out infinite}
@keyframes deal-fade{0%,40%{opacity:1}52%,82%{opacity:0}92%,100%{opacity:1}}
.deal__imgwrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(20,22,30,.34) 0%,rgba(20,22,30,0) 28%,rgba(20,22,30,0) 70%,rgba(20,22,30,.18) 100%);
}
/* Zwei Bilder, sie blenden ineinander ueber. Wechsel nach zwei Sekunden;
   waehrend das Bild ausgeblendet ist, springt es unsichtbar auf das erste zurueck. */
.deal__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  opacity:1;transition:opacity .5s ease}
.deal__img--aus{opacity:0}
.deal__imgwrap [data-bild="1"]{animation:bild-eins 10s linear infinite}
.deal__imgwrap [data-bild="2"]{animation:bild-zwei 10s linear infinite}
.deal__imgwrap.is-hand .deal__img{animation:none}
@keyframes bild-eins{0%,19%{opacity:1}22%,62%{opacity:0}64%,100%{opacity:1}}
@keyframes bild-zwei{0%,19%{opacity:0}22%,62%{opacity:1}64%,100%{opacity:0}}
/* Bildzaehler unten rechts wie "1 / 7" bei Airbnb */
.deal__count{position:absolute;right:10px;bottom:calc(var(--sheet-overlap) + 8px);z-index:2;
  display:inline-flex;align-items:center;line-height:1;font-size:.5rem;font-weight:600;color:#fff;
  background:rgba(34,36,44,.62);border-radius:6px;padding:4px 7px}
.deal__countn{display:inline-grid}
.deal__countn i{grid-area:1/1;font-style:normal}
.deal__countn i:first-child{animation:bild-eins 10s linear infinite}
.deal__countn i:last-child{animation:bild-zwei 10s linear infinite}
.deal__imgwrap.is-hand .deal__countn i{animation:none;opacity:0}
.deal__imgwrap.is-hand:not([data-now="1"]) .deal__countn i:first-child,
.deal__imgwrap.is-hand[data-now="1"] .deal__countn i:last-child{opacity:1}
/* Weiter-Pfeil: nur der Pfeil, ohne Kreis */
.deal__next{position:absolute;right:4px;top:calc(50% - var(--sheet-overlap) / 2 + var(--status-h) / 2);
  transform:translateY(-50%);z-index:2;width:24px;height:24px;padding:0;border:0;background:transparent;
  cursor:pointer;color:#fff;display:grid;place-items:center;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));transition:transform .2s ease}
@media (hover:hover){.deal__next:hover{transform:translateY(-50%) translateX(2px)}}
.deal__next.is-tap{transform:translateY(-50%) translateX(2px)}
.deal__next svg{width:12px;height:12px}

/* Das weisse Blatt ueber dem Bild */
.deal__body{position:relative;z-index:2;background:#fff;margin-top:calc(-1 * var(--sheet-overlap));
  border-radius:22px 22px 0 0;padding:9px 12px 14px;color:#2A2E38;
  box-shadow:0 -8px 18px -12px rgba(42,46,56,.3)}
.deal__grab{display:block;width:28px;height:3px;border-radius:3px;background:#D5D8DE;margin:2px auto 18px}
.deal__summary{text-align:center}
.deal__ttl{font-size:1.14rem;font-weight:600;line-height:1.15;letter-spacing:-.025em}
.deal__addr{font-size:.62rem;color:#6F7684;margin-top:5px}
.deal__meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px;font-size:.54rem;color:#4A505C}
.deal__meta .deal__open{background:rgba(58,64,80,.08);border-radius:6px;padding:2px 7px;font-weight:600;color:var(--p-dark)}
.deal__ratingrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:20px;padding-bottom:20px;border-bottom:1px solid #E4E6EB}
.deal__stat{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
.deal__stat b{font-size:.86rem;font-weight:600}
.deal__stat span{font-size:.5rem;font-weight:500;color:#2A2E38}
.deal__stars{letter-spacing:.5px}
.deal__stat:first-child{border-right:1px solid #E4E6EB}
.deal__stat:last-child{border-left:1px solid #E4E6EB}
.deal__fav{display:flex;align-items:center;gap:3px;margin:0 8px;padding:4px 7px;border-radius:12px;
  background:var(--accent);color:var(--on-accent);font-size:.54rem;font-weight:600;line-height:1.08;text-align:center}
.deal__laurel{flex:0 0 auto;width:9px;height:17px}
.deal__laurel--r{transform:scaleX(-1)}
.deal__actions{display:flex;gap:6px;margin-top:18px}
.deal__actions span{flex:1;border:1px solid #E4E6EB;border-radius:9px;padding:9px 4px;font-size:.58rem;font-weight:500;text-align:center}
.deal__actions span:last-child,.deal__actions span:nth-last-child(2){flex:0 0 28px}
/* Deals in hellem Grau wie die grauen Flaechen der Seite: Titel, drei Labels,
   zwei Zeilen Beschreibung, Button im blauen Verlauf. */
.deal__card{margin-top:12px;background:var(--mist);border:1px solid var(--line);border-radius:13px;
  padding:10px 12px 11px;color:#2A2E38}
.deal__name{font-size:.84rem;font-weight:600;color:var(--p-dark);letter-spacing:-.015em;line-height:1.2}
.deal__chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.deal__chips i{font-style:normal;font-size:.52rem;font-weight:500;background:rgba(58,64,80,.08);
  border:1px solid rgba(58,64,80,.12);color:#3F4552;padding:2px 7px;border-radius:6px}
.deal__txt{font-size:.58rem;margin-top:6px;color:#5B6270;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deal__btn{display:block;margin-top:8px;background:var(--grad);color:#fff;border-radius:9px;
  padding:8px;font-size:.66rem;font-weight:600;text-align:center;position:relative}
/* Ablauf in 10 Sekunden, danach beginnt alles von vorn:
   bei 5,9 s faehrt der Mauszeiger auf "Jetzt buchen" beim zweiten Deal,
   bei 7,3 s klickt er, kurz danach rutscht die Ansicht zurueck zum Bild. */
.deal__card--2{position:relative}
.deal__card--2 .deal__btn{animation:deal-press 10s ease infinite}
@keyframes deal-press{0%,73%{transform:none;filter:none}74.5%{transform:scale(.95);filter:brightness(.82)}
  77%,82%{transform:none;filter:brightness(.92)}86%,100%{transform:none;filter:none}}
.deal__cursor{position:absolute;left:58%;bottom:6px;z-index:3;pointer-events:none;
  animation:deal-cursor 10s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes deal-cursor{
  0%,59%{opacity:0;transform:translate(46px,-78px)}
  62%{opacity:1}
  72.5%,80%{opacity:1;transform:translate(0,0)}
  84%,100%{opacity:0;transform:translate(0,0)}
}
.deal__cursorin{display:block;transform-origin:2px 2px;animation:deal-click 10s ease infinite;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
@keyframes deal-click{0%,73%{transform:none}75%{transform:scale(.82)}77%,100%{transform:none}}
.deal__cursorin::before{content:"";position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;
  background:rgba(var(--p-dark-rgb),.28);opacity:0;animation:deal-ring 10s ease-out infinite}
@keyframes deal-ring{0%,73%{opacity:0;transform:scale(.3)}73.5%{opacity:.9;transform:scale(.3)}79%,100%{opacity:0;transform:scale(1.5)}}
.phones__note{text-align:center;font-size:.68rem;color:var(--ink-soft);margin-top:18px}

/* Auf schmalen Schirmen stehen die Handys untereinander und behalten dabei
   eine Breite, bei der der Text nicht in Einzelwoerter zerfaellt. Nebeneinander
   wuerden sie sonst schmal und extrem lang. */
/* Auf dem Handy stehen beide Telefone nebeneinander wie am Rechner.
   Damit die Texte darin nicht in Einzelwoerter zerfallen, bleibt der Block
   innerlich 500 px breit; app.js rechnet ihn auf die Bildschirmbreite herunter. */
@media (max-width:759px){
  .phones{flex-direction:row;align-items:flex-start;justify-content:center;
    padding-top:0;margin-top:26px}
  .phone--map{width:250px;margin:40px -58px 0 0;z-index:1}
  .phone--deal{width:296px;margin-top:-20px}
  .hero__grid > div:last-child{overflow:hidden}
  .phones__note{margin-top:12px}
}
/* Zwischen 760 und 999 px steht der Telefon-Block allein in einer Spalte und
   hat genug Platz, deshalb behalten beide Telefone dort die volle Groesse. */

/* ---------- Preise ---------- */
.toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px;margin-top:28px;gap:3px;max-width:100%}
.toggle button{border:0;background:transparent;padding:10px 22px;border-radius:999px;font-weight:500;
  font-size:.9rem;cursor:pointer;white-space:nowrap;color:var(--ink-soft);min-width:0}
/* Auf sehr schmalen Schirmen ruecken die beiden Schalter enger zusammen */
@media (max-width:359px){
  .toggle button{padding:10px 14px;font-size:.84rem}
  .toggle__save{margin-left:6px;padding:3px 7px}
}
.toggle button[aria-pressed="true"]{background:var(--grad);color:#fff}
.toggle__save{font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--grad);color:#fff;padding:3px 9px;border-radius:999px;margin-left:8px}
.plans{display:grid;gap:18px;margin-top:0}
@media (min-width:860px){.plans{grid-template-columns:repeat(3,1fr);gap:20px}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:30px;
  display:flex;flex-direction:column;gap:12px}
.plan--lead{background:var(--grad-mesh);background-size:100% 100%;background-position:0% 0%;border-color:transparent;color:#fff;
  box-shadow:var(--shadow)}
.plan__amount{font-size:2.5rem;font-weight:600;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.plan__amount span{font-size:.92rem;font-weight:400;color:var(--ink-soft);letter-spacing:0}
.plan--lead .plan__amount span{color:var(--on-blue-soft)}
.plan__sub{font-size:.82rem;color:var(--ink-soft)}
.plan ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:.94rem;color:var(--ink-soft)}
.plan li::before{content:"";flex:0 0 6px;height:6px;margin-top:9px;border-radius:99px;background:var(--blue-2)}
.plan--soon{background:var(--mist-2);border-color:var(--line-strong)}
.plan.plan--lead li,.plan.plan--lead .plan__sub{color:rgba(255,255,255,.92)}
.plan.plan--lead li::before{background:#fff}
.plan .btn{margin-top:auto;align-self:stretch}
.plan--lead .btn{background:#fff;color:var(--blue-2)}
@media (hover:hover){.plan--lead .btn:hover{background:rgba(255,255,255,.88)}}
.plan--lead .btn.is-tap{background:rgba(255,255,255,.88)}

/* ---------- Zitate, Presse ---------- */
.quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:28px;
  display:flex;flex-direction:column;gap:16px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.quote p{font-size:1rem;color:var(--ink-mid)}
.quote footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote__av{width:38px;height:38px;border-radius:999px;background:var(--mist);border:1px dashed var(--line-strong)}
.quote__who{font-size:.86rem;font-weight:600}
.quote__who small{display:block;font-weight:400;color:var(--ink-soft)}
.press{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.press__slot{flex:1 1 128px;height:46px;border:1px dashed var(--line-strong);border-radius:var(--r-s);
  display:grid;place-items:center;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Staedte ---------- */
.country{margin-top:40px}
.country__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.cities{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.city{background:var(--mist);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-l);padding:18px 20px}
.city b{display:block;font-size:1rem;font-weight:600}
.city span{display:block;font-size:.74rem;color:var(--blue-2);margin-top:5px;font-weight:500}
.city--first{background:var(--grad);border-color:transparent;color:#fff}
.city--first b{color:#fff}
.city--first span{color:rgba(255,255,255,.92);font-weight:600}

/* ---------- Abschluss ---------- */
.close__grid{display:grid;gap:34px;align-items:center}
@media (min-width:900px){.close__grid{grid-template-columns:1.12fr .88fr;gap:52px}}

/* ---------- Partner ---------- */
.partner__grid{display:grid;gap:36px;align-items:start}
@media (min-width:940px){.partner__grid{grid-template-columns:1.05fr .95fr;gap:52px}}
.shop__grid{display:grid;gap:36px;align-items:center}
.pbenefit{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:var(--r-l)}
.pbenefit+.pbenefit{margin-top:14px}
.pbenefit__i{flex:0 0 38px;height:38px;border-radius:11px;background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center}
.pbenefit h4{font-size:1rem;margin-bottom:4px;color:#fff}
.pbenefit p{font-size:.9rem;color:var(--on-blue-soft)}
.pform{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;
  display:grid;gap:14px;color:var(--ink);box-shadow:var(--shadow)}
.pform label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.pform input,.pform select{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem}
/* Nur das Dropdown zeigt einen grauen Hinweis, solange nichts gewaehlt ist */
.pform select:has(option[value=""]:checked){color:var(--ink-soft)}
.pform select option{color:var(--ink)}
/* Eigener Pfeil im Dropdown, mit gleichem Abstand zum Rand wie der Text */
.pform select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F7684' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 12px}
.pform input:focus,.pform select:focus{border-color:var(--blue)}

/* ---------- Gutschein ---------- */
.voucher{background:var(--grad-mesh);background-size:100% 100%;background-position:0% 0%;color:#fff;border-radius:var(--r-xl);padding:30px;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.voucher::after{content:"";position:absolute;right:-70px;bottom:-80px;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.14)}
.voucher__row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative}
.voucher__amount{font-size:2.2rem;font-weight:600;letter-spacing:-.05em;line-height:1}
.voucher__city{font-size:.8rem;color:var(--on-blue-soft);position:relative}
.voucher__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;letter-spacing:.22em;
  background:rgba(255,255,255,.2);border-radius:10px;padding:10px 13px;position:relative}
.voucher .logo__mark{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.85)}
.voucher .ph{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.85)}

/* ---------- FAQ ---------- */
.faqtabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
.faqtabs :is(button,label,a){border:1px solid var(--line-strong);background:#fff;border-radius:999px;
  padding:9px 18px;font-size:.88rem;font-weight:500;cursor:pointer;color:var(--blue-ink)}
.faqtabs :is(button,label,a)[aria-selected="true"]{background:var(--grad);color:#fff;border-color:transparent}
.faqlist{margin-top:26px;max-width:860px;display:grid;gap:12px}
.faqlist details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:4px 22px}
.faqlist summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:1rem;
  display:flex;gap:16px;align-items:flex-start;letter-spacing:-.015em}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";margin-left:auto;font-size:1.3rem;line-height:1;color:var(--blue-2);font-weight:400}
.faqlist details[open] summary::after{content:"\2013"}
.faqlist p{padding:0 0 20px;color:var(--ink-soft);max-width:64ch}

/* ---------- Seitenkopf ---------- */
.pagehead{padding-block:clamp(48px,6vw,86px) clamp(30px,3.5vw,48px)}
.pagehead .lede{font-size:1.08rem}

/* ---------- Footer ---------- */
.footer{background:var(--grad-mesh-wide);background-size:100% 100%;background-position:0% 0%;color:var(--on-blue-soft);
  padding-block:64px calc(32px + env(safe-area-inset-bottom,0px))}
.footer__grid{display:grid;gap:34px}
@media (min-width:820px){.footer__grid{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.footer h4{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer a{text-decoration:none;font-size:.91rem}
@media (hover:hover){.footer a:hover{color:#fff}}
.footer a.is-tap{color:#fff}
.footer .logo{color:#fff}
.footer .logo__word{color:#fff}
.footer .logo__mark{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.85)}
.footer .ph{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.85)}
.social{display:flex;gap:9px;margin-top:18px}
.social a{width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.4);
  display:grid;place-items:center;color:#fff}
@media (hover:hover){.social a:hover{background:#fff;border-color:#fff;color:var(--blue-2)}}
.social a.is-tap{background:#fff;border-color:#fff;color:var(--blue-2)}
.footer__bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.79rem}


/* ---------- Langsame Bewegung in den Blauflaechen ---------- */
/* Nur noch die weissen und grauen Flaechen bewegen sich, und zwar innerhalb
   eines Bildes, das nur 18 Prozent groesser ist als die Flaeche. Dadurch bleibt
   die Komposition immer im Bild. Die blauen Flaechen stehen fest. */
@keyframes drift{
  0%{background-position:0% 0%}
  100%{background-position:100% 100%}
}
@keyframes drift-rev{
  0%{background-position:100% 0%}
  100%{background-position:0% 100%}
}

/* ---------- Einblenden beim Scrollen ---------- */
/* Ohne JavaScript ist alles sofort sichtbar. Erst wenn das Skript laeuft
   (dann traegt <html> die Klasse "js"), wird ueberhaupt etwas eingeblendet. */
.reveal{opacity:1;transform:none}
/* Jeder Abschnitt ausser dem ersten fliegt beim Scrollen von unten ein,
   auf allen Seiten mit genau derselben Bewegung. */
.js .reveal{opacity:0;transform:translateY(72px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.16,.84,.26,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* Karten einer Gruppe laufen kurz nacheinander ein, 90 ms Versatz je Karte */
.stagger > *{opacity:1;transform:none}
.js .stagger > *{
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
  /* Der Versatz wird nach acht Karten gedeckelt, sonst dauert eine lange Liste zu lange */
  transition-delay:calc(min(var(--i,0), 8) * 90ms);
}
.js .stagger.is-in > *{opacity:1;transform:none}
/* Bei 01, 02, 03 laeuft zusaetzlich die Ziffer selbst auf */
.js .stagger.steps.is-in .step__n{animation:pop .42s cubic-bezier(.2,.9,.3,1.25) both;
  animation-delay:calc(min(var(--i,0), 8) * 90ms + 140ms)}
@keyframes pop{0%{transform:scale(.6) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- Lesefortschritt unter der Navigation ---------- */
.progress{position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));left:0;right:0;height:3px;z-index:59;pointer-events:none}
.progress i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:var(--grad-text);border-radius:0 3px 3px 0}
.nav{transition:box-shadow .25s ease,background .25s ease}
.nav.is-stuck{box-shadow:0 10px 30px -22px rgba(42,46,56,.6);background:rgba(254,254,254,.97)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  .stagger > *{opacity:1!important;transform:none!important;transition-delay:0s!important}
  *{animation:none!important;transition:none!important;background-position:0% 0%!important}
}

/* ==========================================================================
   Feinbewegung: gilt auf allen Seiten gleich, alles dezent und abschaltbar
   ========================================================================== */

/* Navigation: der Strich waechst von links, statt einfach da zu sein */
.nav__links a{position:relative;border-bottom-color:transparent!important}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){.nav__links a:hover::after{transform:scaleX(1)}}
.nav__links a.is-tap::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]::after{background:var(--ink);transform:scaleX(1)}

/* Sprachumschalter und Preisumschalter gleiten statt zu springen */
.lang button{transition:background .22s ease,color .22s ease}
.toggle button,.switch button{transition:background .24s ease,color .24s ease,box-shadow .24s ease}

/* Eingabefelder bekommen einen weichen Ring */
.form input[type="email"],.pform input,.pform select{
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.form input[type="email"]:focus,.pform input:focus,.pform select:focus{
  box-shadow:0 0 0 4px rgba(94,147,212,.16);outline:none;
}

/* Textlinks mit Pfeil: der Pfeil laeuft mit */
.link{display:inline-flex;align-items:center;gap:7px}
.link svg{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover){.link:hover svg{transform:translateX(4px)}}
.link.is-tap svg{transform:translateX(4px)}

/* Kacheln: der Pfeil rueckt nach, wenn die Karte aktiv wird */
a.tile .tile__go svg{transition:transform .24s cubic-bezier(.2,.7,.3,1)}
a.tile:focus-visible .tile__go svg{transform:translateX(4px)}
@media (hover:hover){a.tile:hover .tile__go svg{transform:translateX(4px)}}
a.tile.is-tap .tile__go svg{transform:translateX(4px)}
a.tile:active{transform:translateY(0) scale(.99)}

/* Staedte: heben sich leicht und faerben ihren Rand blau */
.city{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
@media (hover:hover){.city:hover{border-color:var(--blue);background:#fff}}
.city.is-tap{border-color:var(--blue);background:#fff}
/* Startstaedte: beim Beruehren und Klicken wird der Kasten weiss, deshalb muss
   die Schrift mitwechseln, sonst steht Weiss auf Weiss (wie bei "Ich bin Anbieter"). */
.city--first{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,
  background .22s ease,color .22s ease}
.city--first b,.city--first span{transition:color .22s ease}
.city--first:focus-visible{background:#fff;border-color:var(--blue);color:var(--blue-2)}
@media (hover:hover){.city--first:hover{background:#fff;border-color:var(--blue);color:var(--blue-2)}}
.city--first.is-tap{background:#fff;border-color:var(--blue);color:var(--blue-2)}
.city--first:focus-visible b{color:var(--blue-2)}
@media (hover:hover){.city--first:hover b{color:var(--blue-2)}}
.city--first.is-tap b{color:var(--blue-2)}
.city--first:focus-visible span{color:var(--blue-2)}
@media (hover:hover){.city--first:hover span{color:var(--blue-2)}}
.city--first.is-tap span{color:var(--blue-2)}
.city--first:active{background:#fff;border-color:var(--cherry);color:var(--cherry)}
.city--first:active b,.city--first:active span{color:var(--cherry)}

/* FAQ: das Zeichen dreht sich, die Antwort faehrt auf */
.faqlist summary::after{transition:transform .26s cubic-bezier(.2,.7,.3,1),color .2s ease}
.faqlist details[open] summary::after{content:"+";transform:rotate(45deg)}
@media (hover:hover){.faqlist summary:hover::after{color:var(--blue)}}
.faqlist summary.is-tap::after{color:var(--blue)}
.faqlist details[open] > *:not(summary){animation:slideDown .3s ease both}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Vorteilskarten auf Blau reagieren wie die Karten auf Weiss */
.pbenefit{transition:transform .22s ease,background .22s ease,border-color .22s ease}
@media (hover:hover){.pbenefit:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);transform:translateX(4px)}}
.pbenefit.is-tap{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);transform:translateX(4px)}

/* Die Handys stehen still, kein Schweben mehr */

/* Bilder in Karten ziehen beim Beruehren leicht an */
.figure,.imgbox{overflow:hidden}
.figure img,.imgbox img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover){.figure:hover img,.imgbox:hover img{transform:scale(1.035)}}
.figure.is-tap img,.imgbox.is-tap img{transform:scale(1.035)}

/* Footer und Social */
.footer a{transition:color .2s ease,transform .2s ease}
@media (hover:hover){.footer li a:hover{transform:translateX(3px);display:inline-block}}
.footer li a.is-tap{transform:translateX(3px);display:inline-block}
.social a{transition:background .2s ease,color .2s ease,transform .2s ease}
@media (hover:hover){.social a:hover{transform:translateY(-2px)}}
.social a.is-tap{transform:translateY(-2px)}

/* App-Button: atmet leicht, bleibt aber als "kommt noch" erkennbar */



/* ==========================================================================
   Signalfarbe waehlen: ein Knopf, dahinter ein Feld mit allen Farben
   ========================================================================== */
.theme{position:relative;flex:0 0 auto}
.theme__btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:999px;background:#fff;
  padding:5px 9px 5px 6px;color:var(--ink-soft);
  transition:border-color .2s ease,background .2s ease;
}
@media (hover:hover){.theme__btn:hover{border-color:var(--p-light)}}
.theme__btn.is-tap{border-color:var(--p-light)}
.theme__now{width:18px;height:18px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 1px rgba(42,46,56,.16) inset}
.theme__panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:80;
  width:276px;max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);padding:14px;box-shadow:0 22px 46px -22px rgba(42,46,56,.5);
}
.theme__panel[hidden]{display:none}
.theme__title{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px}
/* Ueberschrift je Farbfamilie, damit verwandte Toene beieinander stehen */
.theme__grp{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-dark);margin:14px 0 6px;padding-top:10px;border-top:1px solid var(--line)}
.theme__title + .theme__grp{margin-top:0;padding-top:0;border-top:0}
.theme__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.theme__grid button{
  display:flex;align-items:center;gap:7px;cursor:pointer;text-align:left;
  border:1px solid transparent;border-radius:9px;background:transparent;
  padding:6px 7px;font-size:.72rem;font-weight:500;color:var(--ink-mid);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.theme__grid button span{flex:0 0 16px;height:16px;border-radius:5px;
  box-shadow:0 0 0 1px rgba(42,46,56,.16) inset}
@media (hover:hover){.theme__grid button:hover{background:var(--mist)}}
.theme__grid button.is-tap{background:var(--mist)}
.theme__grid button[aria-pressed="true"]{border-color:var(--p-light);color:var(--ink);font-weight:600}
/* Die Farbwahl bleibt in der Leiste, gleich neben DE und EN.
   Der Menue-Knopf steht immer ganz rechts und zeigt nur noch die Seiten. */
@media (max-width:1179px){
  .theme__btn{padding:5px 6px}
  .theme__btn .theme__label{display:none}
  .nav__end{gap:7px}
  .burger{margin-left:2px;order:9}
  /* Das Feld haengt unter der Leiste und passt sich der Bildschirmbreite an */
  .nav__end .theme__panel{position:fixed;left:12px;right:12px;width:auto;
    top:calc(var(--nav-h) + 8px);max-height:calc(100vh - var(--nav-h) - 24px)}
}
@media (max-width:400px){
  .logo__word{font-size:1.06rem}
  .lang button{padding:7px 9px}
}
.theme__label{display:none}
@media (min-width:1180px){.theme__label{display:inline}}

/* ==========================================================================
   App Download: kleines Fenster ueber der Seite
   ========================================================================== */
.sheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;
  background:rgba(26,30,40,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet{grid-template-columns:minmax(0,1fr)}
.sheet[hidden]{display:none}
/* Das Einrichtungsfenster oeffnet ueber die Adresszeile, ganz ohne Skript */
.setup{display:none}
.setup:target{display:grid}
.sheet__box{position:relative;width:min(520px,100%);background:var(--card);
  border-radius:var(--r-xl);padding:clamp(26px,4vw,38px);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:14px;
  animation:sheetIn .28s cubic-bezier(.2,.8,.3,1) both}
@keyframes sheetIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sheet__box .badge{align-self:flex-start}
.sheet__box p{color:var(--ink-soft);font-size:.97rem}
.sheet__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;cursor:pointer;
  border-radius:50%;background:var(--mist);color:var(--ink-mid);display:grid;place-items:center;
  transition:background .2s ease,color .2s ease}
@media (hover:hover){.sheet__x:hover{background:var(--mist-2);color:var(--ink)}}
.sheet__x.is-tap{background:var(--mist-2);color:var(--ink)}
.form--sheet{margin-top:4px}

/* ==========================================================================
   Hero ohne Formular
   ========================================================================== */
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__hint{margin-top:16px;font-size:.86rem;color:var(--ink-soft);max-width:44ch}

/* Abschluss mittig, ohne Zitat daneben */
.close__center{max-width:640px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.close__center .lede{margin-top:0}

/* ==========================================================================
   Pins auf der Kartenansicht im Handy
   Die Farben kommen aus dem Farbschema, der ausgewaehlte Pin ist groesser
   und traegt die Aktionsfarbe.
   ========================================================================== */
.pin{cursor:default}
/* Alle Standortpins tragen dieselbe Primaerfarbe, nur die Groesse unterscheidet sie */
.pin__body{fill:var(--p-dark);transition:fill .25s ease}
.pin__txt{fill:#fff;font-family:var(--font);font-weight:700}
/* Der Pin hat die Form der Bildmarke und traegt nur die Primaerfarbe */
/* Alle Pins teilen sich dieselbe <path>-Definition in <defs>; damit ein
   einzelner <use>-Pin trotzdem eine andere Farbe tragen kann, laeuft die
   Fuellung ueber eine custom property, die in den Klon hinein vererbt wird. */
.phone__pins .pin__body{fill:var(--pin-fill,var(--p-dark))}
.phone__pins .pin{filter:drop-shadow(0 1px 2px rgba(42,46,56,.35))}
/* Alle Pins sind gleich gross. Der Kundenfavorit (Unser Kinocenter) traegt die Aktionsfarbe. */
.phone__pins .pin--special{--pin-fill:var(--accent)}

/* ==========================================================================
   Handy-Ansicht: Schriftgroessen und Abstaende zurueckdrehen, damit die
   Startansicht nicht ueber mehrere Bildschirme laeuft.
   ========================================================================== */
@media (max-width:620px){
  .h1{font-size:clamp(1.72rem,7.4vw,2.35rem);letter-spacing:-.035em}
  .h2{font-size:clamp(1.45rem,6.4vw,1.95rem)}
  .hero{padding-block:clamp(34px,7vw,56px) clamp(32px,7vw,54px)}
  .hero__sub{font-size:.95rem;line-height:1.58;margin-top:16px}
  .lede{font-size:.97rem;margin-top:14px}
  .hero__cta{gap:10px;margin-top:22px}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .section{padding-block:clamp(46px,11vw,72px)}
  .pagehead{padding-block:clamp(40px,10vw,64px) clamp(26px,6vw,40px)}
  .split__panel{padding:clamp(24px,6vw,36px)}
}


/* ==========================================================================
   Einrichtungsfenster fuer die Links
   ========================================================================== */
.footer__setup{text-decoration:none;display:inline-block;
  background:transparent;border:1px dashed rgba(255,255,255,.45);border-radius:999px;
  color:rgba(255,255,255,.9);font-size:.62rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 12px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
@media (hover:hover){.footer__setup:hover{background:#fff;border-color:#fff;color:var(--p-dark)}}
.footer__setup.is-tap{background:#fff;border-color:#fff;color:var(--p-dark)}
.setup__box{width:min(560px,100%);max-height:86vh;overflow-y:auto;gap:10px}
.setup__gruppe{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--p-dark);margin-top:10px}
.setup__feld{display:grid;gap:5px}
.setup__feld span{font-size:.74rem;font-weight:600;color:var(--ink-mid)}
.setup__feld input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem}
.setup__feld input:focus{border-color:var(--p-light);outline:none;
  box-shadow:0 0 0 4px rgba(var(--p-light-rgb),.16)}
.setup__reihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.setup__code{margin-top:8px;border-top:1px solid var(--line);padding-top:12px}
.setup__code summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--p-dark)}
.setup__hinweis{font-size:.82rem;color:var(--ink-soft);margin:10px 0}
.setup__text{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
  line-height:1.5;border:1px solid var(--line-strong);border-radius:12px;padding:12px;
  background:var(--mist);color:var(--ink);resize:vertical;margin-bottom:10px}

/* Auf dem Handy ist die Kopfzeile deckend, damit beim Scrollen nichts
   durchscheint und sich der Inhalt nicht mit ihr zu ueberlappen scheint. */
@media (max-width:1179px){
  .nav,.nav.is-stuck{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}


/* Auf dem Handy ist die Fusszeile hoch und schmal, dort greift der
   auf das Hochformat gerechnete Verlauf. */
@media (max-width:759px){
  .footer{background-image:var(--grad-mesh-hoch)}
}


/* ==========================================================================
   Randlos auf dem Handy
   Der Rahmen um die Seite bekommt keinen eigenen Abstand mehr. Stattdessen
   wachsen Kopf- und Fusszeile selbst in die Bereiche unter Statusleiste und
   Home-Anzeige hinein. Dadurch endet die Seite oben mit dem Weiss der
   Kopfzeile und unten mit dem Verlauf der Fusszeile, auch auf gewoelbten
   Bildschirmen und bei Geraeten mit Aussparung.
   ========================================================================== */
:root{padding-top:0 !important;padding-bottom:0 !important}
.nav{padding-top:env(safe-area-inset-top,0px)}
.sheet,.setup{padding-top:calc(20px + env(safe-area-inset-top,0px));
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}


/* ==========================================================================
   Telefon-Block auf dem Handy: dieselbe Verkleinerung wie im Skript, aber
   in reinem CSS. So stehen beide Telefone auch dann nebeneinander, wenn
   JavaScript nicht laeuft. Laeuft es, rechnet es den Wert genauer nach.
   ========================================================================== */
@media (max-width:759px){
  .phones{width:500px;margin-left:calc((100% - 500px) / 2);transform-origin:top center}
}
@media (max-width:531px){ .phones{transform:scale(.89);margin-bottom:-69px} }
@media (max-width:479px){ .phones{transform:scale(.79);margin-bottom:-131px} }
@media (max-width:429px){ .phones{transform:scale(.73);margin-bottom:-169px} }
@media (max-width:399px){ .phones{transform:scale(.68);margin-bottom:-200px} }
@media (max-width:374px){ .phones{transform:scale(.61);margin-bottom:-244px} }
@media (max-width:339px){ .phones{transform:scale(.53);margin-bottom:-294px} }


/* Auf dem Handy wirkt der grosse Schlagschatten unter den Telefonen wie ein
   grauer Kasten, deshalb dort nur noch ein sehr dezenter Schatten. */
@media (max-width:759px){
  .phone{box-shadow:0 10px 22px -18px rgba(42,46,56,.4)}
}


/* ==========================================================================
   Social Proof: Wartelisten-Zahl, Anbieter-Zahl und kurze Stimmen.
   Die Zahlen zaehlen beim Sichtbarwerden hoch (data-count in app.js).
   ========================================================================== */
.proof{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.proof__faces{display:flex;flex:0 0 auto}
.proof__faces i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:.6rem;font-weight:600;color:#fff;background:var(--grad);box-shadow:0 0 0 2px #fff;margin-left:-8px}
.proof__faces i:first-child{margin-left:0}
/* Die Nutzer-Kreise stehen bewusst in Grautoenen, damit sie nicht mit Farbe konkurrieren */
.proof__faces i:nth-child(1){background:#DADDE3;color:#4A505C}
.proof__faces i:nth-child(2){background:#BCC1CA;color:#2A2E38}
.proof__faces i:nth-child(3){background:#9CA2AD;color:#fff}
.proof__faces i:nth-child(4){background:#7D838F;color:#fff}
.proof__note{font-size:.7rem;color:var(--ink-soft);opacity:.8;margin-top:6px;letter-spacing:.02em}
.proof--center + .proof__note{margin-top:-8px;text-align:center}
.proof__txt b{color:var(--p-dark);font-weight:700}
.proof__dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-strong);
  margin:0 9px;vertical-align:middle}
.proof--center{justify-content:center;margin-top:0}
.proof--form{margin:-4px 0 4px;font-size:.84rem}
.proof--sheet{margin:0;font-size:.84rem}
@media (max-width:620px){
  .proof{font-size:.8rem;gap:10px;margin-top:18px}
  .proof--center{margin-top:0;text-align:left}
  /* Auf dem Handy stehen die beiden Zahlen in zwei eigenen Zeilen */
  .proof__dot{display:block;height:0;margin:0;visibility:hidden}
}

.quotes{display:grid;gap:16px;margin-top:46px}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,1fr);gap:20px}}
.quotes .quote{margin:0;padding:26px}
.quotes .quote p{font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.5}
.quote__ini{flex:0 0 38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:.72rem;font-weight:600}
.quotes .quote:nth-child(2) .quote__ini{background:var(--accent);color:var(--on-accent)}
.close-cta .phones__note{margin-top:22px}

/* ==========================================================================
   Feste Leiste unten auf dem Handy (Sticky CTA)
   ========================================================================== */
.stickycta{display:none}
@media (max-width:759px){
  .js .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;
    justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(254,254,254,.97);border-top:1px solid var(--line);
    box-shadow:0 -12px 30px -20px rgba(42,46,56,.55);
    transform:translateY(115%);transition:transform .38s cubic-bezier(.2,.8,.3,1);pointer-events:none}
  .js .stickycta.is-on{transform:none;pointer-events:auto}
}
.stickycta .btn{flex:0 0 auto;padding:12px 22px}
.stickycta__hint{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--ink-soft);line-height:1.25}
.stickycta__hint b{color:var(--p-dark)}

/* ==========================================================================
   FAQ-Seite: Themen links (auf dem Handy als Leiste oben), Fragen rechts
   ========================================================================== */
.faq{display:grid;gap:26px;min-width:0}
.faq > *{min-width:0}
.faqtabs{display:none}
.js .faqtabs,html:not(.js) .faqtabs--nj{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;
  scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
.js .faqtabs::-webkit-scrollbar,html:not(.js) .faqtabs--nj::-webkit-scrollbar{display:none}
.faqtabs :is(button,label,a){display:flex;align-items:center;gap:10px;white-space:nowrap;scroll-snap-align:start;
  transition:background .22s ease,color .22s ease,border-color .22s ease}
@media (hover:hover){.faqtabs :is(button,label,a):hover{border-color:var(--p-light)}}
.faqtabs :is(button,label,a).is-tap{border-color:var(--p-light)}
.faqtabs :is(button,label,a) i{font-style:normal;font-size:.7rem;font-weight:600;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;display:grid;place-items:center;background:var(--mist);color:var(--p-dark)}
.faqtabs :is(button,label,a)[aria-selected="true"] i{background:rgba(255,255,255,.24);color:#fff}
@media (min-width:980px){
  .faq{grid-template-columns:250px 1fr;gap:48px;align-items:start}
  .js .faqtabs,html:not(.js) .faqtabs--nj{flex-direction:column;overflow:visible;position:sticky;top:calc(var(--nav-h) + 28px);margin:0;padding:0}
  .faqtabs :is(button,label,a){justify-content:space-between;text-align:left;padding:12px 16px 12px 20px}
}
.faqgroups{display:grid;gap:34px}
.faqgroups .faqlist{margin-top:0;max-width:none}
.faqlist[hidden]{display:none}
.faqlist__h{font-size:1.15rem;letter-spacing:-.02em;margin:0 0 4px}
.js .faqlist__h{display:none}
.faqgroups .faqlist:not([hidden]) details{animation:faqIn .45s cubic-bezier(.2,.7,.2,1) both}
.faqgroups .faqlist details:nth-of-type(2){animation-delay:.05s}
.faqgroups .faqlist details:nth-of-type(3){animation-delay:.1s}
.faqgroups .faqlist details:nth-of-type(4){animation-delay:.15s}
.faqgroups .faqlist details:nth-of-type(5){animation-delay:.2s}
@keyframes faqIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Das Plus sitzt in einem runden Feld und dreht sich beim Aufklappen zum Kreuz */
.faqgroups .faqlist summary{align-items:center}
.faqgroups .faqlist summary::after{flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--mist);color:var(--p-dark);font-size:1.25rem;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),background .22s ease,color .22s ease}
.faqgroups .faqlist details[open] summary::after{background:var(--accent);color:var(--on-accent)}
.faqmore{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.faqmore .lede{margin-top:10px}

/* Leiste unten im rechten Handy, wie die Buchungsleiste bei Airbnb */
.deal__bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:8px 12px 12px;background:#fff;border-top:1px solid var(--line)}
.deal__barinfo{display:flex;flex-direction:column;line-height:1.2}
.deal__barinfo b{font-size:.66rem;font-weight:600;color:#2A2E38}
.deal__barinfo span{font-size:.48rem;color:#6F7684}
.deal__barbtn{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:6px 14px;
  font-size:.56rem;font-weight:600;white-space:nowrap}
/* "Fiktive Zahlen" steht unter dem Text, nicht unter den Kreisen */
.hero .proof__note{padding-left:100px}
@media (max-width:620px){.hero .proof__note{padding-left:98px}}
.proof__note--form{margin:-10px 0 2px;padding-left:80px}

/* Ausserhalb des Bildes ruht die Handy-Animation, das spart Rechenzeit beim Scrollen */
.phone--deal.is-off,.phone--deal.is-off *,.phone--deal.is-off *::before{animation-play-state:paused!important}


/* ==========================================================================
   v5: ViaLocal
   ========================================================================== */
/* gleiche Schriftdarstellung in Safari und Chrome */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Seite bleibt auch bei offenem Fenster scrollbar */
.split__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- Live-Zaehler ---------- */
.proof[hidden]{display:none!important}
.proof__faces i:nth-child(1){background:#DADDE3;color:#4A505C}
.proof__faces i:nth-child(2){background:#BCC1CA;color:#2A2E38}
.proof__faces i:nth-child(3){background:#9CA2AD;color:#fff}
.proof__faces i:nth-child(4){background:#7D838F;color:#fff}
.proof--center{margin-bottom:4px}

/* ---------- Formulare: Felder mit Beschriftung, alles Pflichtfelder ---------- */
.form--sheet{display:flex;flex-direction:column;gap:12px;margin-top:4px;max-width:none}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.form__row{grid-template-columns:1fr}}
.form__field{display:flex;flex-direction:column;gap:6px}
.form__field label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.form__field input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;
  -webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease}
.form__field input:focus{border-color:var(--p-light);outline:none;box-shadow:0 0 0 4px rgba(var(--p-light-rgb),.14)}
.form--sheet .btn{align-self:flex-start;margin-top:4px}
.form__fail{display:none;margin:0;font-size:.86rem;color:#A33A1A;background:#FFF1EA;border-radius:10px;padding:10px 12px}
.has-fail .form__fail{display:block}
.form__privacy{font-size:.74rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.pform .form__privacy{margin-top:-4px}
form.is-busy .btn[type=submit]{opacity:.6;pointer-events:none}
/* nach dem Absenden: statt des Formulars die Bestaetigung */
.sheet__box .form__ok{margin-top:0;display:block}
.sheet__box.is-done .form--sheet{display:none}
.sheet__box.is-done .form__ok{display:flex}
/* Partneranfrage: Bestaetigungsfenster */
.sheet__box--done{align-items:flex-start}
.sheet__check{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;font-weight:700;
  background:var(--accent);color:var(--on-accent)}
.pform__hint{margin:0 0 6px;font-size:.8rem;color:var(--ink-soft)}
.pform label{display:block;margin-bottom:6px}
/* iOS Safari vergroessert die Seite bei Eingabefeldern unter 16 px, deshalb auf dem Handy 16 px */
@media (max-width:759px){
  .form__field input,.pform input,.pform select{font-size:16px}
}

/* ---------- Telefone: Filter unter der Suche ---------- */

.phone__filters{position:absolute;left:5%;right:5%;top:10.8%;display:flex;gap:5px;line-height:1.2}
.phone__filters i{font-style:normal;font-size:.5rem;font-weight:600;color:#2A2E38;background:#fff;
  padding:5px 9px;border-radius:999px;box-shadow:0 3px 8px -4px rgba(42,46,56,.35)}
.phone__pins .pin{filter:drop-shadow(0 1px 2px rgba(42,46,56,.35))}

/* ---------- Footer ohne Copyright-Zeile ---------- */
.footer{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}

/* ---------- Rechtstexte ---------- */
.pagehead--legal{padding-bottom:clamp(18px,2.5vw,28px)}
.legal__draft{margin-top:14px;font-size:.86rem;color:var(--on-accent);background:#FFF1EA;border-radius:12px;
  padding:10px 14px;display:inline-block;max-width:70ch}
.legal__en:empty{display:none}
.legal__en{font-size:.86rem;color:var(--ink-soft);margin-top:10px}
.section--legal{padding-top:clamp(18px,3vw,30px)}
.legal{max-width:760px}
.legal h2{font-size:1.15rem;letter-spacing:-.015em;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-mid);font-size:.97rem;line-height:1.7}
.legal p + p{margin-top:10px}
.legal ul{padding-left:20px;margin:0;display:grid;gap:8px}
.legal a{color:var(--p-dark)}
.legal__intro{background:var(--mist);border-radius:14px;padding:14px 16px}
mark.ph{background:#FFE3D4;color:#682E12;border-radius:5px;padding:1px 4px}
.form--sheet .form__field input{flex:none;height:auto;min-height:48px;border-radius:12px}
.proof__faces i:nth-child(1){background:#E4E8F6;color:#3A4FA5}
.proof__faces i:nth-child(2){background:#FFE3D4;color:#B4583A}
.proof__faces i:nth-child(3){background:#3A4FA5;color:#fff}
mark.ph{display:inline;text-transform:none;letter-spacing:0;font-size:inherit;font-weight:500;line-height:inherit;margin:0;border:0;min-height:0;height:auto;width:auto;justify-content:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ==========================================================================
   v6: Handy-Ansicht ohne weisse Balken
   Oben schwebt die Navigation als abgerundete Glas-Leiste mit Abstand zum
   Rand, unten erscheint statt einer weissen Leiste ein schwebender Knopf.
   ========================================================================== */
/* (v11: schwebende Navigation entfernt, Kopfzeile wie am Laptop) */

/* ---------- Hinweis unten (z. B. E-Mail-Adresse kopiert) ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:120;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);
  background:var(--p-dark);color:#fff;font-size:.86rem;font-weight:500;padding:12px 18px;border-radius:14px;
  box-shadow:0 16px 34px -14px rgba(30,42,118,.6);transition:opacity .25s ease,transform .25s ease;text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:759px){ .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }

[data-live-users],[data-live-partners]{white-space:nowrap}
@media (max-width:759px){
  .menu{inset:0;padding-top:calc(84px + env(safe-area-inset-top,0px))}
}
@media (max-width:1179px){ .nav__links+.nav__end{margin-left:auto} }

/* ---------- Tally-Formulare ---------- */
iframe.tally{display:block;width:100%;min-height:300px;border:0;margin:0 -2px}
.sheet__box.is-done .form--tally{display:none}
#portal[data-form-tally] iframe.tally{margin-top:4px}
/* Zaehler zweizeilig: Nutzer oben, Partner darunter */
.proof--live .proof__txt{display:flex;flex-direction:column;gap:1px}
.proof--live .proof__dot{display:none!important}
.proof--live [data-live-first]{white-space:normal}
.proof--live.proof--center{text-align:left}

/* ---------- v8: Pflichtfelder, Sonstiges, Mail-Auswahl ---------- */
.req{color:#C2562E;font-weight:700}
.form__req{margin:0;font-size:.74rem;color:var(--ink-soft)}
.pform__other[hidden]{display:none}
.mailhilfe{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:125;
  width:min(420px,calc(100% - 24px));background:#fff;border-radius:20px;padding:18px 18px 14px;
  box-shadow:0 24px 60px -24px rgba(30,42,118,.55),0 0 0 1px rgba(30,42,118,.07)}
.mailhilfe[hidden]{display:none}
.mailhilfe__h{margin:0 26px 12px 0;font-weight:600;font-size:.92rem;color:var(--ink)}
.mailhilfe__btns{display:flex;flex-wrap:wrap;gap:8px}
.mailhilfe__adr{margin:10px 0 0;font-size:.78rem;color:var(--ink-soft)}
.mailhilfe__x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.3rem;line-height:1;color:var(--ink-soft);cursor:pointer}
/* H1 etwas kleiner, damit der Einstieg luftiger wirkt */
/* Eine Groesse fuer alle H1, nichts auf der Seite ist groesser als sie */
.h1,.hero .h1{font-size:clamp(1.9rem,3.5vw,2.7rem);letter-spacing:-.035em;line-height:1.08}
.h2{font-size:clamp(1.6rem,3.1vw,2.35rem)}
.stat b{font-size:clamp(1.7rem,3.1vw,2.35rem)}
@media (max-width:759px){
  .h1,.hero .h1{font-size:clamp(1.55rem,6.4vw,1.95rem)}
  .h2{font-size:clamp(1.4rem,5.8vw,1.75rem)}
  .stat b{font-size:clamp(1.4rem,5.8vw,1.75rem)}
}
/* Partner: Abstand unter "Vier Gruende" wie auf Home, Inhalt oben statt mittig */
.split__panel .h2 + .pbenefit{margin-top:18px}
@media (max-width:759px){ .split__panel .h2 + .pbenefit{margin-top:14px} }
.split__grid:has(.pbenefit){align-items:start}

/* ---------- Schwebender App-Download-Knopf als Glas (wie iOS) ----------
   Leicht getoent und weichgezeichnet, sodass der Inhalt beim Scrollen
   sichtbar durchscheint, ohne vom Knopf abzulenken. */
@media (max-width:759px){
  .js .stickycta{
    background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.46));
    -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 10px 30px -12px rgba(30,42,118,.35),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(30,42,118,.06)}
  .stickycta__hint{color:var(--p-dark);font-weight:600}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:759px){ .js .stickycta{background:rgba(255,255,255,.94)} }
}
.sheet__box.is-doi .form__ok{background:var(--mist);color:var(--blue-ink)}
.sheet__box.is-doi .proof--sheet{display:none}
.sheet__box.is-doi .form__doi{display:block;line-height:inherit;font-weight:600}


/* ==========================================================================
   v10: Handy-Ansicht
   ========================================================================== */
/* Telefon-Block: Verkleinern mit zoom statt transform, dadurch stimmt die
   Hoehe im Layout und nichts wird unten abgeschnitten (auch ohne Skript). */

/* H1 auf dem Handy deutlich groesser als der Fliesstext, weniger Weiss oben */
@media (max-width:759px){
  .h1,.hero .h1{font-size:clamp(1.85rem,8.4vw,2.25rem);line-height:1.06}
  .hero{padding-top:14px}
  .pagehead{padding-top:18px}
  .hero__sub{font-size:1rem}
}

/* Partner: die vier Karten fuellen die blaue Flaeche gleichmaessig */
@media (min-width:920px){
  .split__panel:has(.pbenefit) .h2{margin-bottom:0}
  .split__panel:has(.pbenefit) .h2 + .pbenefit{margin-top:34px!important}
  .split__panel:has(.pbenefit) .pbenefit + .pbenefit{margin-top:22px!important}
  .split__panel:has(.pbenefit) .pbenefit{padding:22px 24px}
}

/* Ohne Skript (z. B. Dateivorschau): Fenster ueber die Adresse oeffnen */
html:not(.js) .sheet:target{display:grid!important}
/* Staedte auf dem Handy zweispaltig, damit die Liste nicht endlos wird */
@media (max-width:759px){
  .cities{grid-template-columns:1fr 1fr!important;gap:8px}
  .city{padding:12px 14px}
  .city b{font-size:.92rem}
  .city span{font-size:.68rem}
}


/* ==========================================================================
   v11: Handy wie am Laptop, randlos und ohne weisse Balken
   ========================================================================== */
@media (max-width:759px){
  /* Kopfzeile: weiss, volle Breite, Linie und Fortschrittsstrich wie am Laptop.
     Sie waechst in den Bereich unter der Statusleiste hinein (Notch, Dynamic Island). */
  :root{--nav-h:64px}
  .nav,.nav.is-stuck{background:var(--paper);border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:none;backdrop-filter:none;padding-top:env(safe-area-inset-top,0px)}
  .nav.is-stuck{box-shadow:0 10px 30px -22px rgba(42,46,56,.6)}
  .progress{display:block}

  /* weniger Weiss oben und zwischen den Bloecken */
  .hero{padding-top:20px;padding-bottom:36px}
  .hero__cta{margin-top:20px}
  .proof{margin-top:16px}
  .hero__grid{gap:20px}
  .section{padding-block:44px}
  .split{padding-block:36px}

  /* Kinocenter-Grafik: oben Platz lassen, damit nichts abgeschnitten wird */
  .hero__grid > div:last-child{overflow:visible;padding-top:22px}
  .phones{margin-top:0}

  /* App Download unten: nur der Knopf schwebt, als dezentes Glas, keine Leiste */
  .js .stickycta{left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    width:auto;padding:0;border:0;border-radius:999px;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    transform:translate(-50%,calc(100% + 40px))}
  .js .stickycta.is-on{transform:translate(-50%,0)}
  .stickycta__hint{display:none}
  .stickycta .btn{padding:13px 28px;font-size:1rem;
    background:rgba(255,191,162,.86);
    -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 12px 28px -12px rgba(30,42,118,.45),inset 0 1px 0 rgba(255,255,255,.7)}

  /* Rechtstexte: weniger Leerraum unter der Ueberschrift */
  .pagehead--legal{padding-bottom:6px}
  .section--legal{padding-top:14px}
  .legal__draft{margin-top:0}
}
/* Kein Hochziehen ueber den Rand hinaus (sonst blitzt oben und unten Weiss auf) */
html,body{overscroll-behavior-y:none}
.footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* ==========================================================================
   v12
   ========================================================================== */
/* Menü als Ebene: Seite bleibt stehen, Burger wird zum Kreuz */
html.menu-open .menu{display:block}
html.menu-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.burger span{transition:transform .25s ease,opacity .2s ease}
html.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.menu-open .burger span:nth-child(2){opacity:0}
html.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){ .burger span{transition:none} }

.country__soon{font-size:.82rem;color:var(--ink-soft);font-weight:500}
.pagehead__cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}

/* Zurück-Link auf den Rechtstexten */
.backlink{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px -4px;padding:6px 10px 6px 4px;
  border-radius:999px;color:var(--p-dark);font-weight:600;font-size:.9rem;text-decoration:none}
.backlink:focus-visible{background:var(--mist)}
@media (hover:hover){.backlink:hover{background:var(--mist)}}
.backlink.is-tap{background:var(--mist)}

/* Partnerformular: optionales Kennenlerngespräch */
.pform__check{display:flex!important;align-items:flex-start;gap:10px;font-size:.9rem!important;line-height:1.45;color:var(--ink-mid);
  text-transform:none!important;letter-spacing:0!important;font-weight:500!important;margin:2px 0 4px;cursor:pointer}
.pform__check input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--p-light)}

/* Zähler im App-Download-Fenster */
.proof--sheet{margin:0}

/* Seite endet unten mit dem Footer, auch hinter der Home-Leiste und beim Wischen */
html{background-color:#1E2A76}
body{background-color:var(--paper)}
.footer{border-radius:0}

/* Handy: gleiche Verhältnisse wie am Laptop */
@media (max-width:759px){
  .h2{font-size:clamp(1.5rem,6.6vw,1.8rem)}
  .lede,.hero__sub{font-size:1rem;line-height:1.6}
  .feature h3,.step h3{font-size:1.06rem}
  .stat b{font-size:clamp(1.5rem,6.6vw,1.8rem)}
  .backlink{margin-bottom:8px}
}
.burger{align-content:center}
[data-live-users]{white-space:normal}
.wrap.legal{max-width:var(--wrap)}
.legal > *{max-width:760px}
.pagehead--legal .h1{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:759px){ .pagehead--legal .h1{font-size:clamp(1.6rem,7.4vw,2.1rem)} }

/* ==========================================================================
   v13
   ========================================================================== */
/* Schritte 01 02 03 wieder in Apricot */
.step__n{background:var(--cherry);color:var(--on-accent)}

/* Handy: Telefon-Block in exakt dem Aufbau wie am Laptop (548 x 610),
   nur gleichmaessig verkleinert. transform statt zoom, weil Safari zoom
   bei Bildern und Schrift unterschiedlich umrechnet. */
@media (max-width:759px){
  .phones{width:548px!important;zoom:1!important;padding-top:10px!important;
    transform-origin:top center!important;margin-left:calc((100% - 548px) / 2)!important;margin-right:0!important}
  .hero__grid{gap:44px}
  .section{padding-block:72px}
  .split{padding-block:60px}
  .hero{padding-bottom:56px}
  /* Zaehler unter den Knoepfen mittig */
  .hero .proof{flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}
  .hero .proof__txt{flex:0 1 auto;align-items:center;text-align:center;text-wrap:balance}
}
@media (min-width:300px) and (max-width:309.99px){.phones{transform:scale(0.518)!important;margin-bottom:-294px!important}}
@media (min-width:310px) and (max-width:319.99px){.phones{transform:scale(0.536)!important;margin-bottom:-283px!important}}
@media (min-width:320px) and (max-width:329.99px){.phones{transform:scale(0.555)!important;margin-bottom:-271px!important}}
@media (min-width:330px) and (max-width:339.99px){.phones{transform:scale(0.573)!important;margin-bottom:-260px!important}}
@media (min-width:340px) and (max-width:349.99px){.phones{transform:scale(0.591)!important;margin-bottom:-249px!important}}
@media (min-width:350px) and (max-width:359.99px){.phones{transform:scale(0.609)!important;margin-bottom:-239px!important}}
@media (min-width:360px) and (max-width:369.99px){.phones{transform:scale(0.628)!important;margin-bottom:-227px!important}}
@media (min-width:370px) and (max-width:379.99px){.phones{transform:scale(0.646)!important;margin-bottom:-216px!important}}
@media (min-width:380px) and (max-width:389.99px){.phones{transform:scale(0.664)!important;margin-bottom:-205px!important}}
@media (min-width:390px) and (max-width:399.99px){.phones{transform:scale(0.682)!important;margin-bottom:-194px!important}}
@media (min-width:400px) and (max-width:409.99px){.phones{transform:scale(0.701)!important;margin-bottom:-182px!important}}
@media (min-width:410px) and (max-width:419.99px){.phones{transform:scale(0.719)!important;margin-bottom:-171px!important}}
@media (min-width:420px) and (max-width:429.99px){.phones{transform:scale(0.737)!important;margin-bottom:-160px!important}}
@media (min-width:430px) and (max-width:439.99px){.phones{transform:scale(0.755)!important;margin-bottom:-149px!important}}
@media (min-width:440px) and (max-width:449.99px){.phones{transform:scale(0.774)!important;margin-bottom:-138px!important}}
@media (min-width:450px) and (max-width:459.99px){.phones{transform:scale(0.792)!important;margin-bottom:-127px!important}}
@media (min-width:460px) and (max-width:469.99px){.phones{transform:scale(0.81)!important;margin-bottom:-116px!important}}
@media (min-width:470px) and (max-width:479.99px){.phones{transform:scale(0.828)!important;margin-bottom:-105px!important}}
@media (min-width:480px) and (max-width:489.99px){.phones{transform:scale(0.847)!important;margin-bottom:-93px!important}}
@media (min-width:490px) and (max-width:499.99px){.phones{transform:scale(0.865)!important;margin-bottom:-82px!important}}
@media (min-width:500px) and (max-width:509.99px){.phones{transform:scale(0.883)!important;margin-bottom:-71px!important}}
@media (min-width:510px) and (max-width:519.99px){.phones{transform:scale(0.901)!important;margin-bottom:-60px!important}}
@media (min-width:520px) and (max-width:529.99px){.phones{transform:scale(0.92)!important;margin-bottom:-49px!important}}
@media (min-width:530px) and (max-width:539.99px){.phones{transform:scale(0.938)!important;margin-bottom:-38px!important}}
@media (min-width:540px) and (max-width:549.99px){.phones{transform:scale(0.956)!important;margin-bottom:-27px!important}}
@media (min-width:550px) and (max-width:559.99px){.phones{transform:scale(0.974)!important;margin-bottom:-16px!important}}
@media (min-width:560px) and (max-width:569.99px){.phones{transform:scale(0.993)!important;margin-bottom:-4px!important}}
@media (min-width:570px) and (max-width:579.99px){.phones{transform:scale(1)!important;margin-bottom:0px!important}}
@media (min-width:580px) and (max-width:589.99px){.phones{transform:scale(1)!important;margin-bottom:0px!important}}
@media (min-width:590px) and (max-width:599.99px){.phones{transform:scale(1)!important;margin-bottom:0px!important}}

/* Vorschau-Rahmen (z. B. Claude-App) setzen oben und unten einen Innenabstand
   aufs Dokument. Die Leiste und der Footer reichen selbst bis an den Rand
   (safe-area), deshalb wird dieser Abstand hier entfernt. */
:root,html{padding-top:0!important;padding-bottom:0!important}

/* ==========================================================================
   v14
   ========================================================================== */
label.btn{cursor:pointer;-webkit-user-select:none;user-select:none}

/* Handy: Grafik mit gleichem Abstand nach oben und unten eingebettet */
@media (max-width:759px){
  .hero__grid{gap:64px}
  .hero{padding-bottom:16px}
}

/* Einfliegen ohne Skript (z. B. Dateivorschau): CSS-Scroll-Animationen,
   gleiche Strecke (18 px) wie die Skript-Fassung am Laptop. */
@keyframes vl-rein{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  html:not(.js) main section:first-of-type :is(.wrap,.hero__grid > div:first-child,.split__grid,.split__panel,.split__text,.close__center,.faq,.faqmore,.faqmore > div,.steps,.stats,.quotes,.country,.cities,.legal) > :not(.wrap,.hero__grid > div:first-child,.split__grid,.split__panel,.split__text,.close__center,.faq,.faqmore,.faqmore > div,.steps,.stats,.quotes,.country,.cities,.legal,script,style){
    animation:vl-rein .35s ease-out both}
  html:not(.js) main section:first-of-type :is(.wrap,.hero__grid > div:first-child) > :nth-child(2){animation-delay:.04s}
  html:not(.js) main section:first-of-type :is(.wrap,.hero__grid > div:first-child) > :nth-child(3){animation-delay:.08s}
  html:not(.js) main section:first-of-type :is(.wrap,.hero__grid > div:first-child) > :nth-child(4){animation-delay:.12s}
  html:not(.js) main section:first-of-type :is(.wrap,.hero__grid > div:first-child) > :nth-child(5){animation-delay:.16s}
  html:not(.js) main section:first-of-type .hero__grid > div:last-child{animation:vl-rein .45s .18s ease-out both}
  @supports (animation-timeline: view()){
    html:not(.js) main section:not(:first-of-type) :is(.wrap,.split__grid,.split__panel,.split__text,.close__center,.faq,.faqmore,.faqmore > div,.steps,.stats,.quotes,.country,.cities,.legal) > :not(.wrap,.split__grid,.split__panel,.split__text,.close__center,.faq,.faqmore,.faqmore > div,.steps,.stats,.quotes,.country,.cities,.legal,script,style){
      animation:vl-rein linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}

/* ==========================================================================
   v15
   ========================================================================== */
/* Haken "Kennenlerngespraech": modern, ueberall gleich, ohne Schatten-Ring */
.pform .pform__check input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;flex:0 0 22px;width:22px;height:22px;min-width:22px;
  padding:0;margin:1px 0 0;border:1.5px solid var(--line-strong);border-radius:7px;
  background:#fff center/14px 14px no-repeat;box-shadow:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .12s ease}
.pform .pform__check input[type="checkbox"]:checked{
  background-color:var(--p-dark);border-color:var(--p-dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pform .pform__check input[type="checkbox"]:focus{box-shadow:none;outline:none}
.pform .pform__check input[type="checkbox"]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (hover:hover){.pform .pform__check:hover input[type="checkbox"]{border-color:var(--blue)}}
.pform .pform__check.is-tap input[type="checkbox"]{border-color:var(--blue)}
.pform .pform__check input[type="checkbox"]:active{transform:scale(.92)}

/* Antippen = gleiche Rueckmeldung wie Hover am Laptop (Knoepfe, Links, Menue) */
.btn:active{transform:translateY(-1px)}
.btn--blue:active,.btn--navy:active{filter:brightness(1.08);box-shadow:0 16px 30px -18px rgba(47,98,166,.8)}
.split__panel .btn--line:active,.on-blue .btn--line:active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.link:active{text-decoration:underline;text-underline-offset:4px}
.link:active svg{transform:translateX(4px)}
.footer a:active{color:#fff}
.footer li a:active{transform:translateX(3px);display:inline-block}
.social a:active{background:#fff;border-color:#fff;color:var(--blue-2);transform:translateY(-2px)}
.menu a:active{background:var(--mist)}
.sheet__x:active{background:var(--mist-2);color:var(--ink)}
.faqlist summary:active::after{color:var(--blue)}
.faqtabs :is(button,label,a):active{border-color:var(--p-light)}
.backlink:active{background:var(--mist)}
a.tile:active .tile__go svg{transform:translateX(4px)}
.lang button[aria-pressed="false"]:active{background:var(--mist)}
.btn,.link,.menu a,.footer a,.social a,.faqlist summary,.lang button{-webkit-tap-highlight-color:transparent}

/* ==========================================================================
   v16
   Hover-Effekte gibt es nur mit Maus (@media (hover:hover)). Auf Touch-Geraeten
   setzt app.js beim Antippen kurz die Klasse .is-tap, damit Safari und Chrome
   auf dem Handy denselben kurzen Effekt zeigen und nichts haengen bleibt.
   Neue Hover-Regeln deshalb immer so schreiben:
   @media (hover:hover){ .x:hover{...} }  und  .x.is-tap{...}
   ========================================================================== */
/* Kein Fokus-Rahmen und keine Markierung nach einem Mausklick (Safari wie Chrome) */
:focus:not(:focus-visible){outline:none}
.feature,.step,.quote,.plan,.city,.pbenefit,.tile{-webkit-tap-highlight-color:transparent}

/* Handy: Eingabefelder mit 16 px, sonst zoomt Safari beim Antippen in die Seite */
@media (max-width:759px){
  .pform input,.pform select,.pform textarea,.form input,.form select{font-size:16px}
}
@media (max-width:759px){
  .close-cta .proof{flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;margin-top:24px}
  .close-cta .proof__txt{align-items:center;text-align:center;text-wrap:balance}
}
.close-cta .proof{margin-top:26px}

/* ==========================================================================
   v17
   ========================================================================== */
/* Pflichtfeld-Hinweise: eigene, ruhige Meldung direkt unter dem Feld */
.form__field input.is-invalid,.pform input.is-invalid,.pform select.is-invalid{
  border-color:#D93025;box-shadow:0 0 0 4px rgba(217,48,37,.12)}
.feld__fehler{display:flex;align-items:center;gap:7px;margin:7px 2px 0;font-size:.82rem;line-height:1.35;
  font-weight:500;color:#C5221F;letter-spacing:0;text-transform:none;animation:vl-fehler .22s ease-out both}
.feld__fehler::before{content:"";flex:0 0 16px;width:16px;height:16px;border-radius:50%;
  background:#D93025 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1.05' fill='%23fff'/%3E%3C/svg%3E") center/16px 16px no-repeat}
@keyframes vl-fehler{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.feld__fehler{animation:none}}

/* Sprung ins Formular: Feld landet mit Abstand unter der Leiste */
.pform input,.pform select,.form__field input{scroll-margin-top:calc(var(--nav-h) + 96px);scroll-margin-bottom:120px}

/* Tipp-Effekte ohne Skript: werden fuer die Einzeldatei aus den Hover-Regeln gemessen (build_single.py) */

/* ==========================================================================
   v18: Handy-Grafik mit echten App-Screenshots (gleiche Groesse wie bisher)
   Rechts dieselbe 10-Sekunden-Schleife: Bild 1 zwei Sekunden, Wechsel zu Bild 2,
   dann zieht sich die Seite fliessend nach oben, das Bild blendet transparent aus,
   oben erscheint die App-Kopfzeile, danach zurueck.
   ========================================================================== */
.phone__shot{display:block;width:100%;height:auto}
.phone--map{background:#fff}
.phone--deal .app{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.app__seite{position:absolute;left:0;top:0;width:100%;will-change:transform;
  animation:app-zug 10s cubic-bezier(.45,.05,.25,1) infinite}
@keyframes app-zug{0%,40%{transform:translateY(0)}57%,82%{transform:translateY(-82.36cqw)}93%,100%{transform:translateY(0)}}
.app__foto{position:relative;height:88.214cqw;background:#fff;animation:deal-fade 10s ease-in-out infinite}
.app__rest{display:block;width:100%;height:auto;margin-top:-.1px}
.app__kopf{position:absolute;left:0;top:0;width:100%;height:auto;display:block;opacity:0;pointer-events:none;
  animation:app-kopf 10s ease-in-out infinite}
/* v21: Kopfzeile blendet genau dann ein, wenn der grosse Titel die Hoehe der Knoepfe erreicht:
   "Treetop Muenster" steht so mittig zwischen Zurueck, Teilen und Merken */
/* v22: erst die weisse Leiste (wenn das Foto unter ihr durch ist), dann der kleine Titel
   (wenn der grosse Titel unter der Leiste verschwunden ist), wie in iOS */
@keyframes app-kopf{0%,47.5%{opacity:0}49%,85%{opacity:1}86.5%,100%{opacity:0}}
.app__kopftitel{animation-name:app-kopftitel}
@keyframes app-kopftitel{0%,49.5%{opacity:0}51.5%,83%{opacity:1}84.3%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.app__seite,.app__foto,.app__kopf{animation:none}}

/* v19: Safari schneidet bewegte Inhalte sonst nicht sauber an den runden Ecken ab
   (kurz sichtbare dunkle Ecken beim Hochziehen) */
.phone{-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate}
.phone--deal .app{border-radius:28px;-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}

/* Ende der Schleife: Klick auf "Einloesen" beim Familien-Deal ("Jetzt gueltig") */
/* v21: "Einloesen" als eigenes Bild, beim Klick kleiner und dunkler wie "Jetzt buchen" beim Kinocenter */
.app__einloesen{position:absolute;left:67.857%;top:129.069cqw;width:21.786%;display:grid;pointer-events:none;
  opacity:0;animation:app-einloesen 10s linear infinite}
.app__einloesen img{grid-area:1/1;display:block;width:100%;height:auto}
.app__einloesen-knopf{animation:deal-press 10s ease infinite}
@keyframes app-einloesen{0%,57.5%{opacity:0}58%,81.8%{opacity:1}82%,100%{opacity:0}}
/* rechtes Handy etwas weiter rechts: der grosse Pin bleibt fast ganz sichtbar */
.phone--map{margin-right:-50px!important}

/* ==========================================================================
   v20: rechtes Handy, Wisch von Bild 1 zu Bild 2 wie in der echten App
   Nur das Foto wischt nach links, Statusleiste, Knoepfe, Zaehler und der Rand
   des weissen Blatts bleiben stehen. Danach faehrt der Mauszeiger auf
   "Einloesen" und klickt, wie bei der ersten Version mit dem Kinocenter.
   ========================================================================== */
.app__foto{overflow:hidden}
.app__spur{position:absolute;left:0;top:0;width:200%;height:100%;display:flex;will-change:transform;
  animation:app-wisch 10s linear infinite}
.app__spur .app__bild{display:block;width:50%;height:100%;flex:0 0 50%}
@keyframes app-wisch{
  0%,19%{transform:translateX(0);animation-timing-function:cubic-bezier(.25,.8,.25,1)}
  25%,62%{transform:translateX(-50%)}
  62.1%,100%{transform:translateX(0)}}
.app__status{position:absolute;left:0;top:0;width:100%;height:auto;display:block;pointer-events:none}
.app__knopf{position:absolute;top:18.1cqw;width:12.14cqw;height:12.14cqw;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.42);border:.5px solid rgba(255,255,255,.75);
  box-shadow:0 .4cqw 1.6cqw rgba(20,22,30,.10),inset 0 .3cqw .5cqw rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(2.4cqw) saturate(1.5);backdrop-filter:blur(2.4cqw) saturate(1.5)}
.app__knopf svg{width:46%;height:46%;fill:none;stroke:#1C1C1E;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app__knopf--zurueck{left:4.11%}
.app__knopf--teilen{left:69.46%}
.app__knopf--merken{left:83.75%}
.app__zahl{position:absolute;left:85.83%;top:74.4cqw;width:10.12%;display:grid}
.app__zahl img{grid-area:1/1;display:block;width:100%;height:auto}
.app__zahl img:last-child{opacity:0;animation:zahl-zwei 10s linear infinite}
@keyframes zahl-zwei{0%,22.5%{opacity:0}23%,62%{opacity:1}62.1%,100%{opacity:0}}
.app__blatt{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block}

/* Mauszeiger exakt wie beim Kinocenter (gleiche Form, Groesse, Schatten, Klick und Ring):
   kommt von oben rechts, klickt auf "Einloesen" */
.app__zeiger{position:absolute;left:calc(78.7% - 1.5px);top:calc(134.5cqw - 1px);width:15px;z-index:3;pointer-events:none;opacity:0;
  animation:deal-cursor 10s cubic-bezier(.3,.7,.2,1) infinite}
.app__zeigerin{display:block;position:relative;transform-origin:2px 2px;animation:deal-click 10s ease infinite;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.app__zeigerin svg{display:block;width:15px;height:18px}
.app__zeigerin::before{content:"";position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;
  background:rgba(var(--p-dark-rgb),.28);opacity:0;animation:deal-ring 10s ease-out infinite}
.app__druck{display:none}
@media (prefers-reduced-motion:reduce){.app__spur,.app__zahl img,.app__einloesen,.app__einloesen-knopf,.app__zeiger,.app__zeigerin,.app__zeigerin::before{animation:none}
  .app__zeiger{opacity:0}}

/* v20: Zaehlerzeile auf dem Handy immer so breit wie die Spalte und dort umbrechen
   (verhindert, dass Safari die Zeile breiter als den Bildschirm macht und links
   und rechts Buchstaben abschneidet) */
@media (max-width:759px){
  .close-cta .proof,.hero .proof{width:100%;max-width:100%}
  .close-cta .proof__txt,.hero .proof__txt{align-self:stretch;max-width:100%;min-width:0;overflow-wrap:break-word}
  .close__center > *{max-width:100%;overflow-wrap:break-word}
}

/* v21: Pflichtfeld-Hinweise ueberall gleich rot (auch im App-Download-Fenster, dessen
   Absatzfarbe sonst grau ist) und rot auch, solange das Feld den Cursor hat */
p.feld__fehler{color:#C5221F!important}
.form__field input.is-invalid,.form__field input.is-invalid:focus,
.pform input.is-invalid,.pform input.is-invalid:focus,.pform select.is-invalid,.pform select.is-invalid:focus{
  border-color:#D93025!important;box-shadow:0 0 0 4px rgba(217,48,37,.12)!important}

/* v22: Links im Fliesstext (z. B. "App Download", "Partner werden" in der FAQ) gleich gross
   wie der Text davor und danach */
:is(p,li,dd) .link{font-size:inherit;line-height:inherit;display:inline;gap:0}
.faqtabs a{color:var(--ink);text-decoration:none}

/* v23: Telefonnummer in den Rechtstexten in normaler Textfarbe (nur die E-Mail ist ein farbiger Link) */
.legal a.tel{color:inherit;text-decoration:none;font-weight:inherit}