/* ── What Should I Do? — Landing Page Stylesheet ─────────────────────────
   Tokens 1:1 aus dem WSD Design System. Eine Schrift (Figtree), self-hosted.
   Kein JS nötig: die Seite ist vollständig statisch und crawlbar.
   Kontrast: Orange (--accent, #EE9A54) nie als Text auf Cream (2,06:1) – nur als
   Fläche oder auf Ink. Akzent-Text auf hellem Grund nutzt --accent-press. */

/* Figtree — nur die zwei benötigten Subsets, variabel 300–800 */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url("fonts/figtree-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:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url("fonts/figtree-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --orange-50:#FDF1E6;--orange-100:#FBE7D4;--orange-200:#F8D5B4;--orange-300:#F4BC8C;
  --orange-400:#F1A96D;--orange-500:#EE9A54;--orange-600:#E5873B;--orange-700:#C96F27;
  --cream-50:#FDF7F1;--cream-100:#FCF4EC;--cream-200:#F7EFE6;--cream-300:#F1E8DD;
  --stone-100:#EDEAE5;--stone-200:#E7E0D7;--stone-300:#D6CEC4;
  --ink-900:#1F1D1B;--ink-800:#332F2B;--ink-600:#57534E;--ink-500:#75706A;--ink-400:#8A8480;
  --white:#FFFFFF;
  --surface-page:var(--cream-100);--surface-page-alt:var(--cream-200);
  --surface-card:#FFFDFA;--surface-card-muted:var(--stone-100);--surface-inverse:var(--ink-900);
  --surface-tint:var(--orange-100);--surface-tint-soft:var(--orange-50);
  --text-title:var(--ink-900);--text-body:var(--ink-600);--text-muted:var(--ink-400);
  --text-accent:var(--orange-600);--text-on-inverse:var(--cream-50);
  --text-on-inverse-muted:rgba(253,247,241,.58);
  --line-hairline:var(--stone-200);--line-strong:var(--stone-300);
  --line-accent:rgba(238,154,84,.45);
  --line-on-inverse:rgba(253,247,241,.14);
  --accent:var(--orange-500);--accent-hover:var(--orange-600);--accent-press:var(--orange-700);
  --focus-ring:rgba(238,154,84,.5);

  --font-sans:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --weight-light:300;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
  --text-display:clamp(2.5rem,6vw,4.75rem);
  --text-h1:clamp(2rem,4.4vw,3.25rem);
  --text-h2:clamp(1.5rem,3vw,2.25rem);
  --text-h3:1.3125rem;
  --text-h4:1.0625rem;--text-lg:1.0625rem;--text-base:.9375rem;
  --text-sm:.875rem;--text-xs:.8125rem;--text-label:.75rem;
  --leading-tight:1.14;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.7;
  --tracking-display:-.03em;--tracking-title:-.02em;--tracking-label:.14em;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:56px;--space-16:72px;--space-20:96px;
  --gutter-page:32px;--section-y:112px;--gap-list:12px;

  --radius-xs:8px;--radius-md:14px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:28px;
  --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(31,29,27,.04);--shadow-sm:0 2px 8px rgba(31,29,27,.05);
  --shadow-md:0 10px 28px rgba(31,29,27,.07);--shadow-lg:0 20px 52px rgba(31,29,27,.10);
  --shadow-accent:0 8px 24px rgba(238,154,84,.38);
  --ease-out:cubic-bezier(.22,.61,.36,1);--dur-base:200ms;--dur-reveal:600ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-title);
  font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul{list-style:none;padding:0}
h1,h2,h3,h4{letter-spacing:var(--tracking-title);line-height:var(--leading-snug);font-weight:var(--weight-bold)}
/* Links im Fließtext: Ink mit orangem Unterstrich (Orange als Fläche, nicht als Textfarbe). */
a{color:var(--text-title);text-decoration:underline;text-decoration-color:var(--line-accent);
  text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color var(--dur-base) var(--ease-out),text-decoration-color var(--dur-base) var(--ease-out)}
a:hover{text-decoration-color:var(--accent)}
.btn,.brand,.play-badge,.skip,.footer nav a{text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}}

/* Screenreader-only (Skip-Link, versteckte Labels) */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--surface-card);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);box-shadow:var(--shadow-md)}
.skip:focus{top:var(--space-4)}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter-page)}
.section{padding:var(--section-y) 0}
.section--alt{background:var(--surface-page-alt)}
.section--inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}
.center{text-align:center}
.section-head{max-width:720px;margin:0 auto var(--space-12);text-align:center}
.section-head h2{font-size:var(--text-h1);letter-spacing:var(--tracking-display);line-height:var(--leading-tight)}
.section-head .lead{margin-top:var(--space-5);margin-bottom:0}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(252,244,236,.82);border-bottom:1px solid var(--line-hairline)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:64px}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--text-title);
  font-weight:var(--weight-bold);font-size:var(--text-lg)}
.brand img{border-radius:var(--radius-xs);display:block}
.brand .q{color:var(--accent-press)}
.brand > span{white-space:nowrap}
@media(max-width:430px){.brand{font-size:var(--text-base)}.brand img{width:26px;height:26px}}
.topbar nav{display:flex;align-items:center;gap:var(--space-2)}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:0 var(--space-6);border:1px solid transparent;cursor:pointer;
  border-radius:var(--radius-pill);background:var(--accent);color:var(--ink-900);
  font-weight:var(--weight-semibold);font-size:var(--text-sm);white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out)}
/* Orange Fläche mit Ink-Text (≈ 8:1); Weiß auf Orange erreicht nur ≈ 2,2:1. */
.btn:hover{background:var(--accent-hover);color:var(--ink-900);transform:translateY(-2px);
  box-shadow:var(--shadow-accent)}
.btn:active{transform:scale(.97)}
.btn--sm{min-height:38px;padding:0 var(--space-4);font-size:var(--text-xs)}
.btn--secondary{background:transparent;border-color:var(--line-strong);color:var(--text-title)}
.btn--secondary:hover{background:var(--surface-card);border-color:var(--accent);
  color:var(--text-title);box-shadow:var(--shadow-sm)}
.btn--inverse{background:var(--ink-900);color:var(--cream-50)}
.btn--inverse:hover{background:var(--ink-800);color:var(--cream-50);box-shadow:var(--shadow-md)}
.btn--full{width:100%}

/* ── Badge / Eyebrow ────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-4);border-radius:var(--radius-pill);
  background:var(--surface-tint);color:var(--text-title);
  font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.badge svg{color:var(--accent-press)}
.eyebrow{display:block;font-size:var(--text-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--space-3)}
.eyebrow--inverse{color:var(--orange-300)}
.accent{color:var(--accent-press)}
.section--inverse .accent{color:var(--accent)}

/* ── Hero ───────────────────────────────────────────────────
   Desktop: Text links, Bild rechts. Mobil: Bild direkt unter der H1. */
.hero{position:relative;overflow:hidden;padding:var(--space-16) 0 var(--space-20)}
.hero__glow{position:absolute;width:680px;height:680px;top:45%;left:72%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(238,154,84,.16) 0%,transparent 68%)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-rows:1fr auto auto auto auto 1fr;column-gap:var(--space-16);
  grid-template-areas:". media" "claim media" "title media" "sub media" "cta media" ". media"}
.hero__claim{grid-area:claim}
.hero h1{grid-area:title;font-size:var(--text-h1);letter-spacing:var(--tracking-display);
  line-height:var(--leading-tight);margin:var(--space-5) 0 var(--space-6)}
.hero__sub{grid-area:sub;max-width:520px;margin:0 0 var(--space-8)}
.hero__cta{grid-area:cta;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.hero__media{grid-area:media;margin:0;align-self:center}
@media(max-width:900px){
  .hero__in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"claim" "title" "media" "sub" "cta"}
  .hero__media{max-width:360px;width:100%;justify-self:center;margin-bottom:var(--space-8)}
  .hero__glow{left:50%;top:55%}
}
/* Platzhalter für das Hero-Bild (3:4), solange assets/img/hero.webp fehlt. */
.hero__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg)}
.hero__placeholder{display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:3/4;border-radius:var(--radius-2xl);background:var(--surface-tint);
  border:1px solid var(--line-accent)}
.hero__placeholder img{width:96px;height:96px;border-radius:var(--radius-lg);opacity:.9}
.lead{max-width:540px;margin:0 auto var(--space-8);font-size:var(--text-lg);
  font-weight:var(--weight-light);line-height:var(--leading-relaxed);color:var(--text-body)}
.hint{font-size:var(--text-xs);color:var(--text-body)}

/* ── Google-Play-Badge (offizielle Grafik, nur skaliert) ── */
.play-badge{display:inline-block;line-height:0;border-radius:var(--radius-xs);
  transition:transform var(--dur-base) var(--ease-out)}
.play-badge:hover{transform:translateY(-2px)}
.play-badge img{height:56px;width:auto}
.ios-note{margin:var(--space-10) 0 var(--space-4);font-size:var(--text-sm);color:var(--text-body)}

/* ── Problem ────────────────────────────────────────────── */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);counter-reset:p}
@media(max-width:820px){.points{grid-template-columns:1fr}}
.points li{border-top:2px solid var(--accent);padding-top:var(--space-5)}
.points h3{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.points p{font-weight:var(--weight-light);line-height:var(--leading-relaxed);color:var(--text-body)}

/* ── Karten / Schritte ──────────────────────────────────── */
.grid{display:grid;gap:var(--space-6)}
.grid--steps{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid--steps{grid-template-columns:1fr}}
.card{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-xs)}
.card--inverse{background:rgba(253,247,241,.04);border-color:var(--line-on-inverse);
  color:var(--text-on-inverse)}
.card h3{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.card p{font-weight:var(--weight-light);line-height:var(--leading-relaxed);color:var(--text-body)}
.card--inverse p{color:var(--text-on-inverse-muted)}
.tile{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--radius-pill);background:var(--orange-100);color:var(--orange-700);
  margin-bottom:var(--space-5)}
.card--inverse .tile{background:rgba(244,188,140,.14);color:var(--orange-300)}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--radius-pill);background:var(--ink-900);color:var(--cream-50);
  font-size:var(--text-sm);font-weight:var(--weight-bold);margin-bottom:var(--space-4)}
.note-line{max-width:640px;margin:var(--space-10) auto 0;text-align:center;
  color:var(--text-body);font-weight:var(--weight-light);line-height:var(--leading-relaxed)}

/* ── Unterschied (dunkle Sektion) ───────────────────────── */
.section--inverse h2{color:var(--text-on-inverse)}
.section--inverse .lead{color:var(--text-on-inverse-muted)}
.grid--ideas{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid--ideas{grid-template-columns:1fr}}
.idea__kind{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--orange-300);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}
.section--inverse .note-line{color:var(--text-on-inverse-muted)}

/* ── Screenshots ────────────────────────────────────────── */
.shots{display:flex;gap:var(--space-5);justify-content:center;align-items:flex-end}
.phone{border-radius:var(--radius-2xl);border:8px solid var(--ink-900);overflow:hidden;
  background:var(--ink-900);box-shadow:var(--shadow-lg);line-height:0}
.phone--l{width:216px;transform:rotate(-3deg)}
.phone--r{width:252px}
@media(max-width:560px){.phone--l{display:none}.phone--r{width:230px}}

/* ── FAQ ────────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--gap-list)}
.faq details{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-lg)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-5) var(--space-6);
  font-weight:var(--weight-semibold);font-size:var(--text-lg);display:flex;
  justify-content:space-between;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-press);font-weight:var(--weight-bold)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 var(--space-6) var(--space-5);color:var(--text-body);
  font-weight:var(--weight-light);line-height:var(--leading-relaxed)}

/* ── Ratgeber-Teaser ────────────────────────────────────── */
.grid--teaser{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.teaser{display:block;color:var(--text-title)}
.teaser h3{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.teaser p{color:var(--text-body);font-weight:var(--weight-light);line-height:var(--leading-relaxed)}

/* ── Formulare ──────────────────────────────────────────── */
.form-inline{display:flex;gap:var(--space-3);max-width:470px;margin:0 auto;
  flex-wrap:wrap;justify-content:center}
.input{flex:1;min-width:220px;min-height:48px;padding:0 var(--space-5);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--surface-card);color:var(--text-title);font-size:var(--text-base)}
.input::placeholder{color:var(--text-muted)}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.input--box{border-radius:var(--radius-md);width:100%;min-width:0}
textarea.input--box{min-height:104px;padding:var(--space-3) var(--space-4);
  line-height:var(--leading-normal);resize:vertical}
select.input--box{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--space-4) center}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field > label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-body)}
.form-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.hp{display:none}

/* ── Footer ─────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line-hairline);padding:var(--space-10) 0}
.footer__in{display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-4);flex-wrap:wrap}
.footer nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-sm)}
.footer nav a{color:var(--text-body)}
.footer nav a:hover{color:var(--text-title)}
.footer small{font-size:var(--text-sm);color:var(--text-muted)}
.footer__fine{margin-top:var(--space-6);font-size:var(--text-label);color:var(--text-muted)}

@media(max-width:700px){:root{--section-y:72px;--gutter-page:20px}}

/* ── Rechtstexte (Impressum / Datenschutz) ──────────────── */
.prose{max-width:760px;margin:0 auto;padding:var(--space-16) var(--gutter-page) var(--space-20)}
.prose h1{font-size:var(--text-h1);letter-spacing:var(--tracking-display)}
.prose h2{font-size:1.375rem;margin:var(--space-12) 0 var(--space-4)}
.prose h3{font-size:var(--text-h4);margin:var(--space-8) 0 var(--space-3)}
.prose p,.prose li{color:var(--text-body);line-height:var(--leading-relaxed);
  font-weight:var(--weight-light);font-size:var(--text-lg)}
.prose p + p{margin-top:var(--space-4)}
.prose ul{list-style:none;margin:var(--space-4) 0;display:flex;flex-direction:column;gap:var(--space-3)}
.prose ul > li{position:relative;padding-left:var(--space-6)}
.prose ul > li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.prose strong{color:var(--text-title);font-weight:var(--weight-semibold)}
.prose .meta{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-3)}
.prose address{font-style:normal;color:var(--text-body);line-height:var(--leading-relaxed);
  font-weight:var(--weight-light);font-size:var(--text-lg)}
.prose .note{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-left:3px solid var(--accent);border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-6);margin:var(--space-6) 0}
.prose .note p{font-size:var(--text-base)}
.toc{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin:var(--space-8) 0}
.toc ol{margin:0;padding-left:var(--space-5);display:flex;flex-direction:column;gap:6px}
.toc li{font-size:var(--text-sm);color:var(--text-body)}

/* ── Ratgeber ───────────────────────────────────────────── */
.breadcrumb ol{list-style:none;margin:0 0 var(--space-8);padding:0;display:flex;flex-wrap:wrap;
  gap:var(--space-2);font-size:var(--text-sm);color:var(--text-body)}
.breadcrumb li + li::before{content:"›";margin-right:var(--space-2);color:var(--text-muted)}
.draft-flag{display:inline-block;margin-bottom:var(--space-4);padding:4px var(--space-3);
  border-radius:var(--radius-pill);background:var(--surface-tint);font-size:var(--text-xs)!important;
  color:var(--text-title)!important;font-weight:var(--weight-semibold)!important}
.answer{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-left:3px solid var(--accent);border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-6);margin:var(--space-8) 0 var(--space-10)}
.answer h2{margin:0 0 var(--space-2);font-size:var(--text-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.answer p{color:var(--text-title)!important;font-weight:var(--weight-medium)!important}
.article__body ol{padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);
  margin:var(--space-4) 0}
.sources ol{padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.sources li{font-size:var(--text-base)!important}
.author-box{display:flex;gap:var(--space-5);align-items:flex-start;margin:var(--space-12) 0 var(--space-6);
  padding:var(--space-6);background:var(--surface-page-alt);border-radius:var(--radius-lg)}
.author-box img{border-radius:var(--radius-md);flex:0 0 auto}
.author-box p{font-size:var(--text-base)!important}
.author-box__name{font-weight:var(--weight-semibold)!important;color:var(--text-title)!important}
.author-box__role{font-size:var(--text-sm)!important;color:var(--text-muted)!important}
.article-list{display:flex;flex-direction:column;gap:var(--space-6)!important;margin-top:var(--space-10)!important}
.article-list li{padding-left:0!important}
.article-list li::before{display:none}
.article-list a{font-weight:var(--weight-semibold);font-size:var(--text-h4)}