/* ============ SteadyPoint — ruhige, barrierearme Produktseite ============
   Zielgruppe: Menschen mit zittrigen Händen, oft 60+, oft mit Angehörigen
   am Bildschirm. Darum: Atkinson Hyperlegible (für geringe Sehschärfe
   entworfen), Fließtext 20 px, Kontraste mindestens AAA (7:1) für Text,
   große Klickflächen (>= 48 px, Hauptknöpfe 56 px), unterstrichene Links,
   sichtbarer Fokus, nichts Bewegtes, nichts, das nur beim Darüberfahren
   erscheint. Hell und dunkel folgen dem System; kein Umschalter, damit es
   weniger Ziele gibt. Wiederkehrendes Motiv: der zittrige und der ruhige Weg
   zum Ziel (Petrol = ruhig, Rot = zittrig). */
@font-face{font-family:"Atkinson Hyperlegible";src:url(/static/fonts/ah-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/static/fonts/ah-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#f6faf9; --panel:#ffffff; --tint:#e4f0f0;
  --ink:#0b1c20; --ink-mid:#2c4046; --line:#648389; --line-soft:#c3d6d8;
  --petrol:#0a5c66; --petrol-dark:#064a53; --on-petrol:#ffffff;
  --shaky:#a31d16;
  --ok-bg:#dff1e6; --ok-ink:#0b3d22; --err-bg:#fbe4e1; --err-ink:#6e150e;
  --focus:#ffbf00;
  --radius:14px; --wrap:1080px; --text:68ch;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1619; --panel:#11262b; --tint:#102429;
  --ink:#eaf5f6; --ink-mid:#c5d8db; --line:#6b8c92; --line-soft:#2f4b51;
  --petrol:#6fd0dc; --petrol-dark:#8fdce6; --on-petrol:#031418;
  --shaky:#ff9a8f;
  --ok-bg:#12382a; --ok-ink:#cdeedb; --err-bg:#43191a; --err-ink:#ffd6d1;
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;font-size:1.25rem;line-height:1.7}
p,ul,ol{margin:0 0 1.1em}
h1,h2,h3{line-height:1.25;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.2vw,2.1rem);font-weight:700;margin-top:1.8em}
h3{font-size:1.3rem;font-weight:700;margin-top:1.4em}
h2:first-child,h3:first-child{margin-top:0}
a{color:var(--petrol-dark);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.09em}
a:hover{text-decoration-thickness:.18em}
strong{font-weight:700}
img,svg{max-width:100%}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--focus)}
::selection{background:var(--petrol);color:var(--on-petrol)}

.skip{position:absolute;left:-9999px;top:.5rem;background:var(--ink);color:var(--bg);padding:.8rem 1.2rem;
  border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:.5rem}
#main:focus{outline:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.wrap-text > *{max-width:var(--text)}
.wrap-text > .cards{max-width:none}
.lead{font-size:1.4rem;line-height:1.55;color:var(--ink)}
.fine{font-size:1.05rem;color:var(--ink-mid)}
.note{font-size:1.05rem;color:var(--ink-mid);border-top:2px solid var(--line-soft);padding-top:1rem;margin-top:2rem}

/* ---- header ---- */
.site-header{border-bottom:2px solid var(--line-soft);background:var(--panel)}
.header-inner{max-width:var(--wrap);margin:0 auto;padding:.9rem clamp(1.1rem,4vw,2rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.wordmark{display:inline-flex;align-items:center;gap:.7rem;min-height:48px;font-size:1.5rem;font-weight:700;
  color:var(--ink);text-decoration:none}
.wordmark:hover{text-decoration:none}
.mark{width:38px;height:38px;flex:none}
.mark-bg{fill:var(--petrol)}
.mark-arrow{fill:var(--on-petrol)}
.mark-line{fill:none;stroke:var(--on-petrol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lang{display:inline-flex;align-items:center;min-height:48px;padding:0 1.1rem;border:2px solid var(--line);
  border-radius:var(--radius);font-weight:700;text-decoration:none;color:var(--ink)}
.lang:hover{border-color:var(--ink)}
.nav{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem) .9rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 1.1rem;border-radius:var(--radius);
  font-weight:700;color:var(--ink);text-decoration:none;border:2px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current="page"]{background:var(--tint);border-color:var(--petrol)}

/* ---- Knöpfe ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.6rem 1.6rem;
  border-radius:var(--radius);border:2px solid var(--petrol);font:inherit;font-weight:700;font-size:1.15rem;
  line-height:1.3;text-align:center;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--petrol);color:var(--on-petrol)}
.btn-primary:hover{background:var(--petrol-dark);border-color:var(--petrol-dark);text-decoration:none}
.btn-secondary{background:var(--panel);color:var(--petrol-dark)}
.btn-secondary:hover{background:var(--tint);text-decoration:none}
.btn-lg{min-height:64px;padding:.7rem 2rem;font-size:1.25rem}
.btn[hidden]{display:none}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0 1.2rem}
.textlink{display:inline-flex;align-items:center;min-height:48px;font-weight:700}

/* ---- Abschnitte ---- */
.section{padding:clamp(2.2rem,6vw,4rem) 0}
.section-tint{background:var(--tint)}
.hero{padding:clamp(2.2rem,6vw,4.5rem) 0 clamp(1.6rem,4vw,3rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.hero h1{margin-bottom:.5em}

.trace{margin:0;background:var(--panel);border:2px solid var(--line-soft);border-radius:var(--radius);
  padding:1.2rem 1.2rem 1rem}
.trace svg{display:block;width:100%;height:auto}
.trace-target{fill:none;stroke:var(--ink-mid);stroke-width:3}
.trace-dot{fill:var(--ink-mid)}
.trace-start{fill:var(--ink)}
.trace-shaky{fill:none;stroke:var(--shaky);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.trace-calm{fill:none;stroke:var(--petrol);stroke-width:5;stroke-linecap:round}
.trace figcaption{display:grid;gap:.5rem;margin-top:.9rem;font-size:1.05rem;color:var(--ink-mid)}
.trace-label{display:flex;gap:.7rem;align-items:center}
.swatch{flex:none;width:26px;height:6px;border-radius:3px}
.swatch-shaky{background:var(--shaky)}
.swatch-calm{background:var(--petrol)}

.cards{list-style:none;margin:1.5rem 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:var(--panel);border:2px solid var(--line-soft);border-radius:var(--radius);padding:1.4rem}
.card h3{margin-top:0;font-size:1.25rem}
.card p{margin:0}

.checks{list-style:none;padding:0}
.checks li{position:relative;padding-left:2.1rem;margin-bottom:.7rem}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:1.3rem;height:1.3rem;background:var(--petrol);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.steps{list-style:none;padding:0;counter-reset:step}
.steps li{position:relative;counter-increment:step;padding:0 0 1.6rem 4.2rem;margin:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:3rem;height:3rem;border-radius:50%;
  background:var(--petrol);color:var(--on-petrol);display:grid;place-items:center;font-weight:700;font-size:1.4rem}
.steps h3{margin-top:0}
.quote{border:2px solid var(--petrol);padding:.7rem 1.1rem;background:var(--tint);font-weight:700;border-radius:var(--radius)}

.page-family ol,.page-family ul{padding-left:1.6rem}
.page-family h2{border-top:2px solid var(--line-soft);padding-top:1.2rem}
.page-help .faq-q{font-size:1.4rem;margin-top:1.6em}
.bigmail{font-size:1.6rem;font-weight:700;word-break:break-word}

.summary{background:var(--tint);border:2px solid var(--petrol);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.6rem 0}
.summary p{margin:0 0 .6rem}
.summary .checks{margin:0}

/* ---- Formular ---- */
.form{background:var(--panel);border:2px solid var(--line-soft);border-radius:var(--radius);padding:1.4rem;margin:1rem 0}
.field-label{display:block;font-weight:700;margin-bottom:.5rem}
.field{display:block;width:100%;min-height:56px;padding:.6rem 1rem;font:inherit;font-size:1.2rem;color:var(--ink);
  background:var(--bg);border:2px solid var(--line);border-radius:var(--radius)}
.field:focus-visible{border-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.message{padding:1rem 1.2rem;border-radius:var(--radius);font-weight:700;border:2px solid transparent}
.message-ok{background:var(--ok-bg);color:var(--ok-ink)}
.message-err{background:var(--err-bg);color:var(--err-ink)}

/* ---- Fuß ---- */
.site-footer{border-top:2px solid var(--line-soft);background:var(--panel);padding:2rem 0 2.4rem}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.footer-inner p{margin:0 0 .8rem}
.footer-disclaimer{font-weight:700}
.footer-rights{color:var(--ink-mid);font-size:1.05rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:1rem}
.footer-links a{display:inline-flex;align-items:center;min-height:48px;font-weight:700}

/* ---- schmale Bildschirme ---- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:1.15rem}
  .btn,.btn-lg{width:100%}
  .btn + .btn{margin-top:.8rem}
  .actions{flex-direction:column}
  .steps li{padding-left:3.6rem}
  .steps li::before{width:2.6rem;height:2.6rem;font-size:1.2rem}
}

/* ---- Druck (Angehörigen-Anleitung) ---- */
@media print{
  :root{--bg:#fff;--panel:#fff;--tint:#fff;--ink:#000;--ink-mid:#000;--line-soft:#999;--petrol:#000;--petrol-dark:#000}
  body{font-size:12pt;line-height:1.5;background:#fff;color:#000}
  .skip,.nav,.lang,.no-print,.btn,.actions,.footer-links{display:none!important}
  .site-header,.site-footer{border:0;background:none}
  .header-inner{padding:0 0 .5rem}
  .section{padding:0}
  .wrap-text > *{max-width:none}
  h2,h3{break-after:avoid}
  li,.quote{break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* ---- Bildschirmfotos aus der App ---- */
.shot{margin:1.2rem 0 1.8rem;max-width:34rem}
.shot img{display:block;width:100%;height:auto;border:2px solid var(--line-soft);border-radius:var(--radius);background:#fff}
.shot figcaption{margin-top:.6rem;font-size:1.05rem;color:var(--ink-mid)}
@media print{.shot{break-inside:avoid;max-width:60%}}
.shot-small{max-width:12rem}
.shot-pair div{display:flex;gap:1rem}
.shot-pair img{width:calc(50% - .5rem);max-width:10rem;border:0;background:transparent}

/* ---- Vergleichstabelle ---- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.table-wrap{overflow-x:auto;margin:1rem 0}
.compare{width:100%;border-collapse:collapse;background:var(--panel);border:2px solid var(--line-soft);font-size:1.1rem}
.compare th,.compare td{padding:.8rem 1rem;text-align:left;border-bottom:2px solid var(--line-soft);vertical-align:top}
.compare thead th{background:var(--tint);border-bottom:2px solid var(--line)}
.compare tbody th{font-weight:400}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.note-top{font-weight:700}
@media (max-width:640px){
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  .compare tr{border-bottom:2px solid var(--line);padding:.6rem 0}
  .compare tr:last-child{border-bottom:0}
  .compare tbody th{font-weight:700;border:0;padding:.4rem 1rem}
  .compare td{border:0;padding:.2rem 1rem}
  .compare td::before{content:attr(data-label) ": ";font-weight:700}
}

.trace-miss{fill:none;stroke:var(--shaky);stroke-width:5;stroke-linecap:round}
.trace-hit{fill:none;stroke:var(--petrol);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}