:root { --text:#111; --leise:#3d3d3d; --grund:#fff; --flaeche:#f2f2ee; --linie:#8a8a8a; --akzent:#0a4aa8; --akzent-text:#fff; --fokus:#ffbf00; }
@media (prefers-color-scheme: dark) { :root { --text:#f5f5f5; --leise:#d0d0d0; --grund:#0c0c0c; --flaeche:#1c1c1c; --linie:#8a8a8a; --akzent:#ffd92e; --akzent-text:#0c0c0c; --fokus:#ffd92e; } }
* { box-sizing:border-box; }
html { font-size:112.5%; }
body { margin:0; background:var(--grund); color:var(--text); font-family:Verdana, "DejaVu Sans", Geneva, sans-serif; line-height:1.7; letter-spacing:.02em; }
a { color:var(--akzent); text-underline-offset:.2em; text-decoration-thickness:2px; }
a:focus-visible, summary:focus-visible, input:focus-visible { outline:4px solid var(--fokus); outline-offset:3px; border-radius:4px; }
.sprung { position:absolute; left:1rem; top:-4rem; background:var(--akzent); color:var(--akzent-text); padding:.6rem 1rem; border-radius:8px; z-index:10; }
.sprung:focus { top:1rem; }
.kopf { border-bottom:2px solid var(--linie); background:var(--flaeche); }
.innen { max-width:46rem; margin:0 auto; padding:0 16px; }
.kopf .innen { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; padding-top:.9rem; padding-bottom:.9rem; }
.marke { display:flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none; font-weight:bold; font-size:1.25rem; }
.marke img { width:48px; height:48px; border-radius:11px; }
nav ul { display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; list-style:none; margin:0; padding:0; }
nav a { display:inline-block; padding:.35rem .1rem; font-weight:bold; text-decoration:none; }
nav a:hover, nav a[aria-current="page"] { text-decoration:underline; }
.wechsel { margin-left:auto; font-size:.9rem; }
.schritte li { margin-bottom:.7rem; }
main, main.innen { padding-top:2rem; padding-bottom:3rem; }
h1 { font-size:2rem; line-height:1.3; margin:0 0 1rem; }
h2 { font-size:1.35rem; margin:2.2rem 0 .6rem; }
h3 { font-size:1.1rem; margin:1.6rem 0 .4rem; }
.einleitung { font-size:1.15rem; color:var(--leise); }
.knopf { display:inline-block; background:var(--akzent); color:var(--akzent-text); padding:.8rem 1.4rem; border-radius:12px; font-weight:bold; text-decoration:none; margin:.5rem 0; }
.merkmale { list-style:none; padding:0; display:grid; gap:.9rem; }
.merkmale li { display:flex; gap:1rem; align-items:flex-start; background:var(--flaeche); border:2px solid var(--linie); border-radius:12px; padding:.9rem 1.1rem; }
.merkmale .symbol { width:32px; height:32px; flex:none; color:var(--akzent); margin-top:.2rem; }
.merkmale strong { display:block; }
figure { margin:1.2rem 0; }
figure img { width:100%; height:auto; border:2px solid var(--linie); border-radius:8px; background:#fff; }
figcaption { font-weight:bold; margin-bottom:.4rem; }
ol.schritte li { margin-bottom:.7rem; }
details { border:2px solid var(--linie); border-radius:12px; padding:.6rem 1rem; margin:.8rem 0; }
summary { font-weight:bold; cursor:pointer; padding:.3rem 0; }
.fuss { border-top:2px solid var(--linie); background:var(--flaeche); }
.fuss .innen { padding-top:1.2rem; padding-bottom:1.5rem; font-size:.9rem; color:var(--leise); }
.fuss a { margin-right:1rem; }
.apps { list-style:none; padding:0; display:grid; gap:1rem; }
.apps > li { display:flex; gap:1rem; align-items:flex-start; background:var(--flaeche); border:2px solid var(--linie); border-radius:12px; padding:1rem 1.1rem; }
.apps img { width:64px; height:64px; border-radius:14px; flex:none; }
.apps h3 { margin:0 0 .3rem; font-size:1.1rem; }
.apps p { margin:0; }
img.foto { width:14rem; height:auto; border:2px solid var(--linie); border-radius:8px; }
@media (max-width:560px) { h1 { font-size:1.6rem; } .wechsel { margin-left:0; } }