/* --------------------------------------------------------------------------
   Inter, selbst gehostet (SIL Open Font License 1.1).
   Bewusst nicht ueber Google Fonts eingebunden: kein Drittanbieter-Request,
   damit datenschutzrechtlich unkritisch. Ohne eigene Schrift faellt Windows
   auf Segoe UI und macOS auf SF Pro zurueck — die Seite saehe je nach
   Betriebssystem deutlich anders aus.
   -------------------------------------------------------------------------- */

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   Tariffic — Design-System
   Mobile First. Kein Framework: die Seite braucht nur Grid, Flexbox und
   ~15 KB CSS; ein Bootstrap-Download waere hier reiner Ballast.
   ========================================================================== */

:root{
  --bg:#060B15;
  --bg-2:#0B1526;
  --surface:#0F1B2E;
  --surface-2:#15243B;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#EAF0FA;
  --muted:#94A4BE;
  --accent:#6C9BF5;
  --accent-2:#4B7BE8;
  --accent-soft:rgba(108,155,245,.14);
  --ink:#08111F;
  --ok:#5BE49B;
  --warn:#FFC961;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;
  --container:1240px;   /* auf grossen Bildschirmen weiter unten angehoben */
  --header-h:60px;
  color-scheme:dark;
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Basisschrift waechst mit der Fensterbreite: 17 px auf Mobilgeraeten,
     21 px ab etwa 1800 px. Damit wirkt die Seite auf grossen Bildschirmen so,
     wie sie vorher erst bei 125 % Browserzoom wirkte - ohne dass Handys
     riesige Schrift bekommen.
     Bewusst in rem statt px: 1rem ist hier die Browser-Grundschrift, eine
     groessere Einstellung des Nutzers skaliert also weiterhin alles mit. */
  font-size:clamp(1.0625rem, 0.65rem + 0.6vw, 1.33rem);
}

body{
  margin:0;
  font-family:var(--font);
  font-size:1rem;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Blauer Radial-Glow wie auf den Store-Grafiken */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(90rem 55rem at 78% -12%,rgba(75,123,232,.32),transparent 62%),
    radial-gradient(60rem 40rem at 6% 4%,rgba(108,155,245,.14),transparent 60%),
    linear-gradient(180deg,#0B1526 0%,#060B15 55%);
}

img{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.1rem,7.5vw,3.6rem)}
h2{font-size:clamp(1.55rem,4.6vw,2.4rem)}
h3{font-size:clamp(1.15rem,3vw,1.4rem)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin-bottom:.35em}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}

/* Grosse Bildschirme duerfen mehr Flaeche nutzen - 1240 px liessen auf einem
   1800-px-Schirm rund 280 px Rand je Seite ungenutzt. */
@media (min-width:1400px){
  :root{--container:1560px}
  .container{padding-inline:28px}
}

.lead{font-size:clamp(1.1rem,2.6vw,1.3rem);color:var(--muted);max-width:44ch}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.center{text-align:center}
.mt-0{margin-top:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--ink);padding:.7em 1.1em;border-radius:0 0 12px 0;font-weight:700;
}
.skip-link:focus{left:0}

#main:focus{outline:none}

/* Sprungmarken nicht unter der klebenden Kopfzeile verstecken */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* --------------------------------------------------------------- Header */

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(6,11,21,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}

.header-bar{
  min-height:var(--header-h);
  display:grid;
  grid-template-columns:48px 1fr 48px;
  grid-template-areas:"toggle brand lang" "nav nav nav";
  align-items:center;
  gap:0 8px;
}

.nav-toggle{grid-area:toggle}
.brand{grid-area:brand;justify-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 .3em}
.brand:hover{text-decoration:none}
.brand img{height:26px;width:auto}

.icon-btn{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--text);cursor:pointer;border-radius:12px;padding:0;
}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.lang-switch{
  grid-area:lang;justify-self:end;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:.5em .85em;border:1px solid var(--line);border-radius:var(--radius-pill);
}
.lang-switch:hover{color:var(--text);border-color:var(--line-strong);text-decoration:none}

/* Navigation: mobil als Panel unter dem Header */
.site-nav{grid-area:nav;display:none;border-top:1px solid var(--line);padding:10px 0 18px}
.site-nav.is-open{display:block}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav li{margin:0}
.site-nav a{
  display:block;padding:.9em .2em;color:var(--text);font-weight:600;font-size:1.05rem;
  border-bottom:1px solid var(--line);
}
.site-nav a:hover{color:var(--accent);text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--accent)}

@media (min-width:860px){
  :root{--header-h:74px}
  .header-bar{grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav lang";gap:0 24px}
  .nav-toggle{display:none}
  .brand{justify-self:start}
  .brand img{height:30px}
  .site-nav{display:block!important;border:0;padding:0;justify-self:center}
  .site-nav ul{display:flex;gap:6px}
  .site-nav a{border:0;padding:.6em .95em;border-radius:var(--radius-pill);font-size:1.02rem}
  .site-nav a:hover{background:rgba(255,255,255,.06)}
  .site-nav a[aria-current="page"]{background:var(--accent-soft)}
}

/* ---------------------------------------------------------------- Buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:.9em 1.7em;border-radius:var(--radius-pill);
  font-weight:700;font-size:1.05rem;line-height:1.2;text-align:center;
  border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:#83AEFF}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-block{display:flex;width:100%}
.btn svg{width:1.1em;height:1.1em;fill:currentColor}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479px){
  .btn-row .btn{flex:1 1 100%}
}

/* ----------------------------------------------------------------- Chips */

/* Faktenliste im Hero.
   Bewusst KEINE Pillenform mehr: die sah aus wie ein Button und stand damit
   in Konkurrenz zu den echten Handlungsflaechen darunter. Jetzt reine
   Aufzaehlung mit Haken - nicht anklickbar und auch nicht so aussehend. */
.facts{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:.55em 1.7em;padding:0;margin:1.7em 0 0;
  color:var(--muted);font-size:1.02rem;
}
.facts li{display:flex;align-items:center;gap:.55em;margin:0}
.facts li::before{
  content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%236C9BF5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.2 4.3 8.5 11 1.5'/%3E%3C/svg%3E") center/12px 10px no-repeat;
}

/* -------------------------------------------------------------- Sections */

.section{padding:clamp(48px,9vw,88px) 0}
.section-head{max-width:60ch;margin-bottom:clamp(24px,4vw,40px)}
.section-head p{color:var(--muted);margin-bottom:0}
.section-alt{background:rgba(255,255,255,.025);border-block:1px solid var(--line)}

/* ------------------------------------------------------------------ Hero */

.hero{padding:clamp(36px,8vw,80px) 0 clamp(40px,8vw,90px)}
.hero-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
.hero h1{margin-bottom:.4em}
.hero .lead{margin-bottom:1.5em}

.hero-media{position:relative;justify-self:center;max-width:320px;width:100%}
.hero-media::after{
  content:"";position:absolute;inset:auto 4% 6% 4%;height:52%;
  background:radial-gradient(55% 60% at 50% 50%,rgba(75,123,232,.42),transparent 70%);
  filter:blur(30px);z-index:-1;
}
/* Der Screenshot laeuft nach unten aus, statt mit runder Kante zu enden -
   sonst wirkte die Tastatur wie abgeschnitten. Oben bleibt die Rundung, unten
   uebernimmt eine Maske das Ausblenden. Kein box-shadow: Schatten werden nicht
   mitmaskiert und haetten die harte Kante zurueckgeholt. */
.phone{
  width:100%;
  aspect-ratio:9/15;
  object-fit:cover;object-position:top center;
  border:1px solid var(--line-strong);
  border-bottom:0;
  border-radius:34px 34px 0 0;
  background:var(--surface);
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,0) 100%);
}

@media (min-width:860px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-media{max-width:360px;justify-self:end}
}

/* ----------------------------------------------------------------- Cards */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(20px,4vw,30px);
}
/* Symbol auf den Vorzuege-Karten. Getoente Flaeche wie beim Hinweiskasten
   und den Bezahlsymbolen - kein neues Gestaltungsmittel. */
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);
  margin-bottom:14px;
}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}

.grid{display:grid;gap:16px}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ----------------------------------------------------------------- Steps */

.steps{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:16px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{
  counter-increment:step;margin:0;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,4vw,30px);
}
.steps li::before{
  content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-bottom:14px;
  border-radius:50%;background:var(--accent-soft);border:1px solid var(--line-strong);
  color:var(--accent);font-weight:800;font-size:1.05rem;
}
.steps h3{font-size:1.12rem;margin-bottom:.3em}
.steps p{margin:0;color:var(--muted);font-size:.97rem}

/* ---------------------------------------------------------------- Notice */

.notice{
  display:flex;gap:14px;
  background:rgba(255,201,97,.07);
  border:1px solid rgba(255,201,97,.32);
  border-radius:var(--radius);
  padding:18px 20px;
}
.notice .notice-icon{flex:0 0 auto;font-size:1.25rem;line-height:1.3}
.notice h3{font-size:1.05rem;margin-bottom:.3em;color:var(--warn)}
.notice p:last-child{margin-bottom:0}
.notice p{font-size:.95rem;color:var(--text)}

.notice-info{background:var(--accent-soft);border-color:rgba(108,155,245,.34)}
.notice-info h3{color:var(--accent)}

/* -------------------------------------------------------------- Laender */

.country-tools{display:grid;gap:12px;margin-bottom:26px}
@media (min-width:720px){.country-tools{grid-template-columns:1fr auto;align-items:end}}

.country-index{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}
.country-index li{margin:0}
.country-index a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 .5em;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text);font-weight:700;font-size:.98rem;
}
.country-index a:hover{background:var(--accent-soft);text-decoration:none}

.country-group{margin-bottom:30px;scroll-margin-top:calc(var(--header-h) + 12px)}
.country-group h2{font-size:1.2rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.7em}

.country-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:640px){.country-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.country-list{grid-template-columns:repeat(3,1fr)}}
.country-list li{margin:0}

.country-link{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:12px 14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  color:var(--text);font-weight:600;
}
.country-link:hover{background:var(--surface-2);border-color:var(--line-strong);text-decoration:none}
.country-link .flag{width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.country-link .country-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-link .country-rate{color:var(--muted);font-weight:600;font-size:.95rem;white-space:nowrap}
.country-link .chev{color:var(--muted);flex:0 0 auto}

.no-results{display:none;color:var(--muted);padding:20px 0;font-size:1.05rem}
.is-empty .no-results{display:block}

/* --------------------------------------------------------------- Tarife */

.rate-head{display:flex;align-items:center;gap:16px;margin-bottom:1em}
@media (max-width:559px){
  .rate-head{display:block}
  .rate-head .flag{margin-bottom:14px}
}
.rate-head .flag{width:56px;height:56px;border-radius:50%;flex:0 0 auto}
.rate-head h1{margin:0}

.rate-cards{display:grid;gap:16px;margin-bottom:24px}
@media (min-width:640px){.rate-cards{grid-template-columns:repeat(2,1fr)}}

.rate-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,4vw,28px);
}
/* Auch ausserhalb von .rate-card verwendet (Rufnummernanzeige der In-App-Seite) */
.rate-label{
  display:block;color:var(--muted);font-size:.92rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5em;
}
.rate-card .rate-value{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.rate-card .rate-prefix{color:var(--muted);font-size:1.05rem}
.rate-card .rate-price{font-size:clamp(2rem,7vw,2.7rem);font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.rate-card .rate-unit{color:var(--muted);font-size:1.05rem}

/* Das Einwahlland bestimmt den Preis - der Kasten muss als "hier musst du
   etwas tun" lesbar sein und nicht als Textbox. Deshalb Akzentfarbe statt der
   neutralen Flaeche, plus eine farbige Kante links. */
.dialin-form{
  display:grid;gap:10px;align-items:end;
  background:var(--accent-soft);
  border:1px solid rgba(108,155,245,.38);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:16px 18px;margin-bottom:24px;
}
.dialin-form .field-label{color:var(--text)}
.dialin-form .select{border-color:rgba(108,155,245,.55);background-color:var(--bg)}
.dialin-form .hint{color:#B9CBEC}

/* Ohne JavaScript steht hier noch der Absende-Button. */
@media (min-width:640px){.dialin-form:has(button){grid-template-columns:1fr auto}}

/* ------------------------------------------------------------- Formulare */

.field{display:block;margin-bottom:18px}
.field > .label,.field-label{display:block;font-weight:700;margin-bottom:.45em;font-size:1rem}
.field .hint{display:block;color:var(--muted);font-size:.92rem;margin-top:.5em}

.input,.select{
  width:100%;
  font:inherit;color:var(--text);
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:14px;
  min-height:52px;
  padding:.85em 1em;
  font-size:1.02rem;
  appearance:none;-webkit-appearance:none;
}
.input::placeholder{color:#7C8DA8}
.input:focus,.select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%2394A4BE' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;padding-right:2.6em;
}

.check{display:flex;gap:.75em;align-items:flex-start;margin-bottom:18px;font-size:1rem;line-height:1.55}
.check input{margin-top:.2em;width:24px;height:24px;flex:0 0 auto;accent-color:var(--accent)}

/* minmax(0,1fr) statt 1fr: sonst zieht ein laengerer Beschriftungstext seine
   Spalte breiter als die anderen. */
.amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
/* Das Label streckt sich als Rasterzelle auf die Zeilenhoehe, sein inneres
   span aber nicht - der 20-Euro-Knopf mit Bonuszeile waere sonst hoeher als
   die anderen beiden. flex + flex:1 gibt allen dreien dieselbe Hoehe. */
.amount{position:relative;display:flex}
.amount input{position:absolute;opacity:0;inset:0;cursor:pointer}

/* Direktes Kind, nicht jedes span im Label - der Bonushinweis darunter soll
   keinen eigenen Rahmen und Hintergrund bekommen. */
.amount > span{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:60px;padding:1em .5em;border-radius:14px;font-weight:800;font-size:1.15rem;
  background:var(--bg-2);border:1px solid var(--line-strong);
}

/* Bonus auf der 20-Euro-Stufe. Gruen statt der blauen Akzentfarbe, damit der
   Hinweis nicht mit dem Zustand "ausgewaehlt" verwechselt wird. Der Text steht
   im Label und wird deshalb zusammen mit dem Betrag vorgelesen. */
.amount em{
  font-style:normal;font-weight:700;font-size:.72rem;line-height:1;
  color:var(--ok);white-space:nowrap;
}
.amount input:checked + span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.amount input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px;padding:0;border:0}
.method{position:relative}
.method input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.method span{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  min-height:56px;padding:.9em 1em;border-radius:14px;font-weight:700;font-size:1.05rem;
  background:var(--bg-2);border:1px solid var(--line-strong);color:var(--text);
}
/* Anbieterlogos statt Namen. Beide liegen in Weiss vor und sind auf den
   Schriftzug beschnitten - die Hoehen sind so gewaehlt, dass die Wortmarken
   optisch gleich gross wirken (PaysafeCard ist deutlich flacher gezeichnet).
   In em, damit sie mit der fluiden Schriftgroesse mitwachsen. */
/* Die beiden Wortmarken sind unterschiedlich gezeichnet, gleiche Hoehe wirkt
   deshalb nicht gleich gross: PayPals viewBox hat rundum 1,81 Einheiten
   Leerraum (rund 11 % der Boxhoehe), PaysafeCard ist eng beschnitten. Die
   Werte sind daher optisch abgeglichen, nicht rechnerisch. */
.pay-logo{width:auto;display:block}
.pay-logo-paypal{height:1.36em}
.pay-logo-psc{height:1.35em}
.method input:checked + span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.method input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

/* Formularmeldung. Fehler treten bewusst deutlich hervor: der vorherige
   dezente Gelbton ging auf dem dunklen Grund unter, und wer gerade eine
   Zahlung versucht hat, muss die Meldung sofort sehen. */
.form-msg{
  display:flex;align-items:flex-start;gap:.85em;
  border-radius:14px;padding:16px 18px;margin-bottom:20px;
  font-size:1.02rem;line-height:1.55;font-weight:600;
  color:#FFD5D5;
  border:1px solid rgba(255,107,107,.55);
  background:rgba(255,107,107,.14);
  box-shadow:0 0 0 4px rgba(255,107,107,.07);
}

/* Symbol als Kreisscheibe - die Meldung ist damit auch ohne Farbwahrnehmung
   als Fehler bzw. Erfolg erkennbar. Die Grafik liegt im Hintergrund, damit
   Screenreader sie nicht als Zeichen vorlesen. */
.form-msg::before{
  content:"";
  flex:0 0 auto;width:26px;height:26px;margin-top:.12em;border-radius:50%;
  background:#FF6B6B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.2a2 2 0 0 1 2 2.2l-.62 6.3a1.38 1.38 0 0 1-2.76 0L10 7.4a2 2 0 0 1 2-2.2z' fill='%23300B0B'/%3E%3Ccircle cx='12' cy='18.1' r='2' fill='%23300B0B'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

.form-msg-ok{
  color:#CFF5E2;
  border-color:rgba(91,228,155,.5);
  background:rgba(91,228,155,.12);
  box-shadow:0 0 0 4px rgba(91,228,155,.06);
}
.form-msg-ok::before{background:#5BE49B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.6l4.4 4.4L18.6 7.6' fill='none' stroke='%2306251A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px 17px no-repeat}

/* -------------------------------------------------------------- Store-Badges */

/* Beide Badges randlos und exakt gleich hoch - so verlangen es die
   Guidelines von Apple und Google. Die Breite ergibt sich aus dem jeweiligen
   Seitenverhaeltnis. Der Abstand liegt ueber Googles Mindest-Schutzraum
   von einem Viertel der Badge-Hoehe (52 / 4 = 13 px). */
.stores{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.store-badge{display:inline-flex;border-radius:8px}
.store-badge:hover{text-decoration:none}
.stores img{height:52px;width:auto;display:block;max-width:none}

/* Bewertung unter den Store-Badges. Muss sichtbar sein, weil sie im
   JSON-LD ausgezeichnet wird - Google verlangt Deckung von Anzeige und
   Auszeichnung. Der Stern kommt aus der Schrift, nicht als Grafik. */
.store-rating{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45em;
  margin:16px 0 0;color:var(--muted);font-size:.98rem}
.store-rating strong{color:var(--warn);font-size:1.15rem;font-weight:800}
.store-rating strong::before{content:"\2605";margin-right:.28em}
.store-rating span{color:var(--muted)}

/* ------------------------------------------------------------- Screenshots */

/* Beide Systeme nebeneinander, je ein Screenshot */
.platforms{display:grid;gap:clamp(28px,5vw,44px)}
@media (min-width:720px){.platforms{grid-template-columns:repeat(2,1fr)}}
.platform{text-align:center}
.platform h3{font-size:clamp(1.3rem,3vw,1.6rem);margin-bottom:.3em}
.platform p{color:var(--muted);margin-bottom:1.6em}
/* Nur der Screenshot bekommt Rahmen und Schatten - NICHT die Store-Badges,
   die weiter unten im .stores-Block stecken. Deshalb der Kindselektor. */
.platform > img{
  margin-inline:auto;max-width:290px;
  border-radius:26px;border:1px solid var(--line-strong);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
}
.platform .stores{justify-content:center;margin-top:1.6em}

/* -------------------------------------------------------------------- FAQ */

.faq{display:grid;gap:12px}
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:0 clamp(16px,3vw,22px);
}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{
  list-style:none;cursor:pointer;font-weight:700;font-size:1.08rem;
  padding:20px 38px 20px 0;position:relative;
}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:-2px;border-radius:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq-body{padding-bottom:20px;color:var(--muted);font-size:1.02rem}
.faq .faq-body p:last-child,.faq .faq-body ul:last-child{margin-bottom:0}

/* ------------------------------------------------------------------- CTA */

.cta{
  background:linear-gradient(150deg,rgba(75,123,232,.24),rgba(108,155,245,.06));
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  padding:clamp(26px,5vw,48px);
  text-align:center;
}
.cta h2{margin-bottom:.35em}
.cta p{color:var(--muted);max-width:46ch;margin-inline:auto}
.cta .stores{justify-content:center;margin-top:1.4em}
/* Im CTA ist alles zentriert - die Bewertungszeile zieht mit. */
.cta .store-rating{justify-content:center;text-align:center}

/* Hinweis in einer Karte: Kasten im Kasten wirkt schwer, deshalb nur
   eine Trennlinie. Die Warnfarbe tragen Symbol und Ueberschrift. */
.card .notice{
  background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:18px 0 0;margin-top:20px;
}

/* --------------------------------------------------------------- Prosa */

.prose{max-width:72ch}
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.5em}
.prose table{width:100%;border-collapse:collapse;margin-bottom:1.4em;font-size:1rem}
.prose th,.prose td{text-align:left;padding:.7em .6em;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--muted);font-weight:700}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------------ Breadcrumb */

.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;padding:0;margin:0 0 1.2em;font-size:.95rem;color:var(--muted)}
.breadcrumb a{text-decoration:underline;text-underline-offset:.2em}
.breadcrumb li{margin:0}
.breadcrumb li + li::before{content:"/";margin-right:.4em;color:var(--line-strong)}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb a{display:inline-block;padding:.25em 0;color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}

/* ---------------------------------------------------------------- Footer */

.site-footer{
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.28);
  padding:clamp(36px,6vw,60px) 0 30px;
  margin-top:clamp(40px,8vw,80px);
}
.footer-grid{display:grid;gap:30px}
@media (min-width:720px){.footer-grid{grid-template-columns:1fr 1fr}}
/* In-App bleibt nur die Rechtsspalte - dann keine halbe leere Breite. */
.footer-grid-single{grid-template-columns:1fr!important}

.site-footer h2{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1em}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.2em}
.footer-links li{margin:0}
.footer-links a{display:inline-block;padding:.45em 0;color:var(--text);font-size:1.02rem}
.footer-links a:hover{color:var(--accent)}

/* Logo steht linksbuendig ueber der Anbieterzeile */
.footer-bottom{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
}
.footer-bottom .woopla-link{margin-bottom:.6em}
.footer-note{color:var(--muted);font-size:.95rem;margin:0;max-width:70ch}
.footer-copyright{color:var(--muted);font-size:.95rem;margin:.5em 0 0}
/* Verweis auf den Geschaeftskundenauftritt - bewusst unauffaellig, die
   Seite verkauft an Endkunden. 44px Hoehe fuer die Fingerkuppe. */
.footer-business{margin:.6em 0 0;font-size:.95rem}
.footer-business a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.footer-business a:hover{color:var(--accent)}
.woopla-link{display:inline-flex;align-items:center;gap:.7em;min-height:44px;padding:.3em 0}
.woopla-link:hover{text-decoration:none}
.woopla-link img{height:26px;width:auto;opacity:.85}
.woopla-link:hover img{opacity:1}

/* Marken- und Bildnachweise: bewusst zurueckhaltend, aber lesbar (>=4.5:1) */
.footer-legal{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;line-height:1.6;max-width:88ch;
}
.footer-legal p{margin:0 0 .7em}
.footer-legal p:last-child{margin-bottom:0}
.footer-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:.2em}
.footer-legal a:hover{color:var(--text)}

/* ------------------------------------------------------- Zahlungsstatus */

.status{max-width:34rem;margin-inline:auto;text-align:center}
.status h1{font-size:clamp(1.8rem,5.5vw,2.6rem);margin-bottom:.4em}
.status .lead{margin-inline:auto;margin-bottom:1.6em}

.status-icon{
  display:flex;align-items:center;justify-content:center;
  width:76px;height:76px;margin:0 auto 26px;
  border-radius:50%;font-size:2.1rem;font-weight:800;line-height:1;
}
/* Vorgangsnummer im Fehlerfall - muss ablesbar und markierbar sein */
.status-ref{
  display:inline-flex;flex-direction:column;gap:.35em;
  margin:0 auto 1.6em;padding:14px 22px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
}
.status-ref span{color:var(--muted);font-size:.86rem;letter-spacing:.12em;text-transform:uppercase}
.status-ref strong{font-size:1.15rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;user-select:all}

.status-ok{background:rgba(91,228,155,.13);border:1px solid rgba(91,228,155,.42);color:var(--ok)}
.status-cancel{background:rgba(255,201,97,.11);border:1px solid rgba(255,201,97,.38);color:var(--warn)}
.status-error{background:rgba(255,138,138,.11);border:1px solid rgba(255,138,138,.42);color:#FF9E9E}

/* --------------------------------------------------------- In-App-Layout */

/* In-App: ohne Kopfzeile und ohne Logo - die App zeigt ihre eigene.
   Die Fusszeile bleibt vollstaendig, damit Impressum und Datenschutz auch
   waehrend des Bezahlvorgangs erreichbar sind. */
body.inapp{background:var(--bg-2)}
body.inapp::before{background:radial-gradient(70rem 40rem at 50% -10%,rgba(75,123,232,.26),transparent 65%),var(--bg-2)}
.inapp-main{padding:36px 0 8px}
body.inapp .site-footer{margin-top:clamp(32px,6vw,56px)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  body::before,.site-header,.site-footer,.btn{display:none!important}
  body{background:#fff;color:#000}
}