@font-face{font-family:"BodoniXT";src:url("uploads/BodoniXT.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("assets/fonts/Roboto-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("assets/fonts/Roboto-Medium.ttf") format("truetype");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("assets/fonts/Roboto-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
:root{
  --ink:#12141C; --ink-soft:#4B5468; --ink-faint:#8A90A2; --line:rgba(18,20,28,0.07);
  --green:#2E7D6B; --green-bright:#37977E; --green-deep:#1F5A4D; --amber:#E7A73E;
  --gpanel:linear-gradient(150deg,rgba(255,255,255,0.78),rgba(255,255,255,0.42));
  --gbrd:rgba(255,255,255,0.85);
  --gsh:0 12px 40px -14px rgba(20,25,40,0.18), inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -6px 14px -8px rgba(255,255,255,0.6);
  --serif:"BodoniXT",Georgia,serif; --sans:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; --mono:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#FFFFFF;color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
/* Ambient-Verlauf als eigene fixe Ebene statt background-attachment:fixed —
   sonst reissen scrollbare Container (Karussell) sichtbare Kanten hinein. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1100px 720px at 84% 0%,rgba(46,125,107,0.14),transparent 60%),radial-gradient(900px 620px at 6% 12%,rgba(231,167,62,0.11),transparent 58%),radial-gradient(1000px 900px at 62% 100%,rgba(124,140,224,0.09),transparent 62%);background-repeat:no-repeat}
a{color:var(--green-deep);text-decoration:none}
a:hover{color:var(--green)}
img,svg{display:block}
@keyframes scroll-chips{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
details summary::-webkit-details-marker{display:none}

/* Rechtstexte (Impressum, Datenschutz) */
.legal{max-width:74ch;margin:0 auto;padding:136px 32px 24px}
.legal h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-0.015em;margin-bottom:26px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.2vw,24px);line-height:1.25;letter-spacing:-0.01em;margin:46px 0 12px}
.legal p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:14px}
.legal ul{margin:0 0 18px;list-style:none}
.legal li{position:relative;color:var(--ink-soft);font-size:15.5px;line-height:1.7;padding-left:18px;margin-bottom:7px}
.legal li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:0.55}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.legal .addr{font-style:normal}
.legal hr{border:0;height:1px;background:var(--line);margin:38px 0 22px}
.legal em{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
/* Platzhalter, die vor Veroeffentlichung gefuellt werden */
.ph{background:rgba(231,167,62,0.18);border-bottom:1px dashed rgba(231,167,62,0.7);border-radius:3px;padding:0 3px;color:var(--ink)}
.note,.todo{border-radius:16px;background:rgba(231,167,62,0.10);border:1px solid rgba(231,167,62,0.34)}
.note{margin:0 0 34px;padding:16px 20px;color:var(--ink-soft);font-size:14px;line-height:1.65}
.todo{margin:8px 0 16px;padding:11px 16px;color:var(--ink-soft);font-size:13.5px;line-height:1.6}
.todo strong{font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber)}
html[data-theme="dark"] .note,html[data-theme="dark"] .todo{background:rgba(231,167,62,0.10);border-color:rgba(231,167,62,0.26)}
html[data-theme="dark"] .ph{background:rgba(231,167,62,0.20);border-bottom-color:rgba(231,167,62,0.5)}

.icon-sun{display:none}
.icon-moon{display:block}
html[data-theme="dark"] .icon-sun{display:block}
html[data-theme="dark"] .icon-moon{display:none}
html[data-theme="dark"]{--ink:#EEF1F6;--ink-soft:#AEB6C8;--ink-faint:#7A8296;--line:rgba(255,255,255,0.10);--green:#4FB89C;--green-bright:#5FCFAF;--green-deep:#8AD9C1;--gpanel:linear-gradient(155deg,rgba(255,255,255,0.10),rgba(255,255,255,0.035));--gbrd:rgba(255,255,255,0.16);--gsh:0 18px 50px -18px rgba(0,0,0,0.6), inset 0 1px 1.5px rgba(255,255,255,0.18), inset 0 -10px 20px -12px rgba(255,255,255,0.05)}
html[data-theme="dark"] body{background:#0E1017!important;color:var(--ink)}
html[data-theme="dark"] body::before{background:radial-gradient(1100px 720px at 84% 0%,rgba(55,151,126,0.22),transparent 60%),radial-gradient(900px 620px at 6% 12%,rgba(231,167,62,0.14),transparent 58%),radial-gradient(1000px 900px at 62% 100%,rgba(124,140,224,0.18),transparent 62%);background-repeat:no-repeat}
html[data-theme="dark"] header>div{background:linear-gradient(155deg,rgba(255,255,255,0.10),rgba(255,255,255,0.03))!important;border-color:rgba(255,255,255,0.16)!important;box-shadow:0 18px 46px -16px rgba(0,0,0,0.6), inset 0 1.5px 1px rgba(255,255,255,0.18)!important}
html[data-theme="dark"] header svg rect,html[data-theme="dark"] footer svg rect{fill:#EEF1F6}
html[data-theme="dark"] [style*="color:#2E7D6B"]{color:#5FCFAF!important}
html[data-theme="dark"] [style*="rgba(255,255,255,0.6)"]{background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.10)!important}
html[data-theme="dark"] [style*="rgba(255,255,255,0.65)"]{background:rgba(255,255,255,0.06)!important}
html[data-theme="dark"] [style*="rgba(18,20,28,0.05)"],html[data-theme="dark"] [style*="rgba(18,20,28,0.07)"],html[data-theme="dark"] [style*="rgba(18,20,28,0.08)"]{background:rgba(255,255,255,0.07)!important}

/* ============================================================
   Responsive — schmale Screens (Phones, Tablets hochkant).
   Markup nutzt Inline-Styles -> Attribut-Selektoren + !important.
   ============================================================ */
@media (max-width: 820px){
  /* Selektoren matchen NUR die Spaltenwerte (ohne "grid-template-columns:"),
     damit ein Leerzeichen nach dem Doppelpunkt (Linter) den Match nicht bricht. */
  /* Zweispaltige Raster -> eine Spalte */
  [style*="1.05fr 0.95fr"]{grid-template-columns:1fr!important;gap:8px!important;padding-top:104px!important}
  [style*="repeat(3,1fr)"],[style*="repeat(3, 1fr)"]{grid-template-columns:1fr!important}
  [style*="0.72fr 1fr"],
  [style*="1fr 0.72fr"]{grid-template-columns:1fr!important;gap:24px!important}
  /* In "Bild-links"-Funktionszeilen den Text nach oben ziehen */
  [style*="1fr 0.72fr"] > div:first-child{order:2}
  /* Ueber: Memoji oben (mittig ueber justify-self), Text bleibt linksbuendig */
  [style*="1fr auto"]{grid-template-columns:1fr!important;justify-items:center;gap:24px!important}
  /* Memoji bleibt oben, obwohl es auf dem Desktop rechts steht */
  [style*="1fr auto"] > [style*="order:2"]{order:-1!important}
  /* Einleitungsabsatz so breit wie der uebrige Fliesstext */
  [style*="1fr auto"] p{max-width:none!important}
  /* Geraete-Bilder begrenzen und mittig */
  [style*="1.05fr 0.95fr"] > div:last-child,
  [style*="0.72fr 1fr"] > div:last-child,
  [style*="1fr 0.72fr"] > div:first-child{max-width:460px;margin:0 auto;width:100%}
  /* Verknuepfungs-Graph verkleinert (feste Positionen passen sonst nicht) */
  #linkVisual{transform:scale(0.62);transform-origin:top center;height:235px!important}
  /* Alle Fliesstext-Absaetze linksbuendig (zentrierter Text liest sich schmal schlecht) */
  main p{text-align:left!important}
}

/* ============================================================
   Burger-Menue: unter 640px werden die Nav-Links zum Dropdown.
   ============================================================ */
.nav-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:100px;border:1px solid var(--gbrd);background:var(--gpanel);backdrop-filter:blur(18px) saturate(190%);-webkit-backdrop-filter:blur(18px) saturate(190%);cursor:pointer;color:var(--ink);box-shadow:inset 0 1px 1px rgba(255,255,255,0.5);margin-left:auto}
/* Menue-Panel liegt AUSSERHALB der Glas-Pill (direkt im header). Sonst greift
   der backdrop-filter nicht — verschachtelte Blur-Ebenen rendern nicht. */
.nav-panel{display:none}
@media (max-width: 640px){
  .nav-burger{display:inline-flex}
  header nav{display:none!important}
  .nav-panel{position:absolute;top:84px;right:20px;flex-direction:column;gap:6px;min-width:200px;padding:12px;border-radius:20px;pointer-events:auto;background:linear-gradient(155deg,rgba(255,255,255,0.32),rgba(255,255,255,0.08));border:1px solid rgba(255,255,255,0.65);box-shadow:0 18px 46px -16px rgba(20,25,40,0.30), 0 2px 6px -3px rgba(20,25,40,0.10), inset 0 1.5px 1px rgba(255,255,255,0.9), inset 0 -8px 16px -10px rgba(255,255,255,0.45);backdrop-filter:blur(32px) saturate(210%);-webkit-backdrop-filter:blur(32px) saturate(210%)}
  html[data-nav="open"] .nav-panel{display:flex}
  .nav-panel a{padding:9px 14px;border-radius:12px;font-size:15px;color:var(--ink-soft)}
  .nav-panel a:hover{color:var(--green)}
  html[data-theme="dark"] .nav-panel{background:linear-gradient(155deg,rgba(255,255,255,0.10),rgba(255,255,255,0.03));border-color:rgba(255,255,255,0.16)}
  /* Hilfe im Burger-Menue als hervorgehobener Button, mit Abstand nach oben abgesetzt */
  .nav-panel a.panel-help{margin-top:6px;text-align:center;font-weight:600;color:#fff!important;background:linear-gradient(180deg,var(--green-bright),var(--green));box-shadow:0 8px 20px -8px rgba(46,125,107,0.55),inset 0 1px 0 rgba(255,255,255,0.35)}
  .nav-panel a.panel-help:hover{color:#fff!important;filter:brightness(1.06)}
}

/* ============================================================
   Changelog-Akkordeon (Updates-Seite)
   ============================================================ */
.clog{border:1px solid rgba(255,255,255,0.72);border-radius:16px;margin-bottom:12px;overflow:hidden;background:linear-gradient(150deg,rgba(255,255,255,0.40),rgba(255,255,255,0.12));backdrop-filter:blur(30px) saturate(205%);-webkit-backdrop-filter:blur(30px) saturate(205%);box-shadow:0 12px 34px -18px rgba(20,25,40,0.22),inset 0 1.5px 1px rgba(255,255,255,0.85)}
.clog summary{cursor:pointer;list-style:none;padding:15px 20px;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px}
.clog summary::-webkit-details-marker{display:none}
.clog summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:20px;color:var(--ink-faint);font-weight:400}
.clog[open] summary::after{content:"–"}
.clog-body{padding:0 20px 18px}
.clog-body h3{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);margin:14px 0 8px}
.clog-body ul{margin:0;list-style:none}
.clog-body li{position:relative;color:var(--ink-soft);font-size:15px;line-height:1.6;padding-left:18px;margin-bottom:6px}
.clog-body li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:0.55}

/* ============================================================
   Hero (Landing): breit zweispaltig, ab 640px (Burger-Grenze) gestapelt.
   ============================================================ */
.hero{max-width:1180px;margin:0 auto;padding:124px 32px 56px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center}
.hero-media{position:relative}
/* Hero-Gerätefamilie: Mac gross im Hintergrund, iPad + iPhone davor */
.hm-mac{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 46px rgba(20,25,40,0.24))}
.hm-ipad{position:absolute;left:-5%;bottom:-13%;width:55%;height:auto;z-index:2;filter:drop-shadow(0 22px 40px rgba(20,25,40,0.26))}
.hm-iphone{position:absolute;right:-1%;bottom:-18%;width:18.5%;height:auto;z-index:3;filter:drop-shadow(0 18px 32px rgba(20,25,40,0.30))}
@media (max-width: 640px){
  .hero{grid-template-columns:1fr;gap:16px;text-align:center;padding-top:104px}
  .hero-text p{max-width:52ch;margin-left:auto;margin-right:auto;text-align:center!important}
  .hero-cta,.hero-chips{justify-content:center}
  .hero-media{max-width:440px;margin:28px auto 0}
}

/* ============================================================
   Funktionen-Karussell (Landing) — Swipe via scroll-snap, Pfeile via JS.
   ============================================================ */
.carousel{position:relative;max-width:1180px;margin:0 auto}
/* Vertikaler Innenabstand grosszuegig, damit overflow-y (durch overflow-x:auto
   erzwungen) den weichen Schatten nicht abschneidet. translateZ(0) legt jedes
   Bild auf eine eigene Kompositionsebene — verhindert den WebKit-Fehler, bei
   dem der drop-shadow beim Scrollen sporadisch als harter Kasten rendert. */
.car-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:30px 32px 34px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 clamp(250px,78vw,340px);scroll-snap-align:center}
.car-media{position:relative}
.car-media img:first-child{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 38px rgba(20,25,40,0.22));transform:translateZ(0)}
.car-media img:last-child{position:absolute;right:-2%;bottom:-8%;width:27%;height:auto;filter:drop-shadow(0 14px 26px rgba(20,25,40,0.28));transform:translateZ(0)}
.car-slide h3{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.15;margin-top:30px}
.car-slide p{margin-top:8px;color:var(--ink-soft);font-size:15px;line-height:1.6}
.car-btn{position:absolute;top:32%;z-index:2;width:44px;height:44px;border-radius:100px;border:1px solid var(--gbrd);background:var(--gpanel);backdrop-filter:blur(18px) saturate(190%);-webkit-backdrop-filter:blur(18px) saturate(190%);box-shadow:var(--gsh);cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.car-prev{left:8px}
.car-next{right:8px}
@media (max-width: 640px){ .car-btn{display:none} }  /* auf dem Handy genuegt Wischen */

/* Einheitlicher, deutlich sichtbarer "Alle Funktionen ansehen"-Button */
.btn-features{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px;padding:15px 28px;border-radius:100px;color:var(--green-deep);background:linear-gradient(150deg,rgba(46,125,107,0.22),rgba(46,125,107,0.07));border:1px solid rgba(46,125,107,0.42);backdrop-filter:blur(18px) saturate(190%);-webkit-backdrop-filter:blur(18px) saturate(190%);box-shadow:0 10px 26px -12px rgba(46,125,107,0.5),inset 0 1.5px 1px rgba(255,255,255,0.7),inset 0 -8px 16px -10px rgba(255,255,255,0.4)}
.btn-features:hover{background:linear-gradient(150deg,rgba(46,125,107,0.30),rgba(46,125,107,0.12));color:var(--green-deep)}
html[data-theme="dark"] .btn-features{background:linear-gradient(150deg,rgba(79,184,156,0.24),rgba(79,184,156,0.07));border-color:rgba(79,184,156,0.38);box-shadow:0 10px 26px -12px rgba(0,0,0,0.55),inset 0 1.5px 1px rgba(255,255,255,0.16)}

/* ---------- Funktionsseite: Suche + Detailkarten ---------- */
.fsearch{position:relative;max-width:560px;margin:0 auto}
.fsearch input{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);padding:15px 20px 15px 48px;border-radius:100px;border:1px solid rgba(255,255,255,0.72);background:linear-gradient(150deg,rgba(255,255,255,0.40),rgba(255,255,255,0.12));backdrop-filter:blur(30px) saturate(205%);-webkit-backdrop-filter:blur(30px) saturate(205%);box-shadow:0 14px 38px -18px rgba(20,25,40,0.24),inset 0 1.5px 1px rgba(255,255,255,0.85);outline:none;-webkit-appearance:none;appearance:none}
.fsearch input::placeholder{color:var(--ink-faint)}
.fsearch input:focus{border-color:rgba(46,125,107,0.45);box-shadow:var(--gsh),0 0 0 3px rgba(46,125,107,0.14),inset 0 1.5px 1px rgba(255,255,255,0.6)}
.fsearch svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}
.fsearch-count{margin-top:14px;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:0.04em;color:var(--ink-faint)}
html[data-theme="dark"] .fsearch input:focus{border-color:rgba(79,184,156,0.45);box-shadow:var(--gsh),0 0 0 3px rgba(79,184,156,0.16)}

/* Glaskaesten: deutlich transparenter als --gpanel, dafuer staerkerer Blur —
   gleiche Rezeptur wie die Nav-Pille, damit die Seite einheitlich wirkt. */
.feat{scroll-margin-top:120px;border-radius:26px;padding:34px;background:linear-gradient(150deg,rgba(255,255,255,0.40),rgba(255,255,255,0.12));border:1px solid rgba(255,255,255,0.72);box-shadow:0 16px 46px -18px rgba(20,25,40,0.26),inset 0 1.5px 1px rgba(255,255,255,0.9),inset 0 -10px 22px -12px rgba(255,255,255,0.5);backdrop-filter:blur(30px) saturate(205%);-webkit-backdrop-filter:blur(30px) saturate(205%)}
.feat + .feat{margin-top:26px}
.feat[hidden]{display:none}
.feat h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-0.01em;margin:0}
.feat-lead{font-size:17.5px;line-height:1.55;color:var(--ink);font-weight:600;margin:10px 0 0}
.feat-text p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);margin:0}
.feat-text p + p{margin-top:16px}
.feat-text strong{color:var(--ink);font-weight:600}
.feat-solo{margin-top:22px}
@media (max-width: 820px){
  .feat{padding:28px 22px}
}

/* ---------- Datenschutz-Seite ---------- */
.ds-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:6px}
.ds-tile{border-radius:20px;padding:24px;background:linear-gradient(150deg,rgba(255,255,255,0.40),rgba(255,255,255,0.12));border:1px solid rgba(255,255,255,0.72);box-shadow:0 14px 40px -18px rgba(20,25,40,0.24),inset 0 1.5px 1px rgba(255,255,255,0.9),inset 0 -10px 22px -12px rgba(255,255,255,0.5);backdrop-filter:blur(30px) saturate(205%);-webkit-backdrop-filter:blur(30px) saturate(205%)}
.ds-tile svg{color:var(--green-deep)}
.ds-tile h3{font-size:16px;font-weight:600;color:var(--ink);margin:12px 0 0}
.ds-tile p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:6px 0 0}
@media (max-width: 640px){ .ds-tiles{grid-template-columns:1fr} }

/* Liste in den Erklaerkaesten */
.ds-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ds-list li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.ds-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--green)}
.ds-list strong{color:var(--ink);font-weight:600}

/* Hinweiskasten (bernstein) innerhalb einer Karte */
.ds-warn{margin-top:20px;border-radius:16px;padding:16px 20px;background:rgba(231,167,62,0.13);border:1px solid rgba(231,167,62,0.30);font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.ds-warn strong{color:var(--ink);font-weight:600}
html[data-theme="dark"] .ds-warn{background:rgba(231,167,62,0.10);border-color:rgba(231,167,62,0.26)}

/* Verweis auf die Rechtstexte */
.ds-legal{margin-top:26px;text-align:center;font-size:15px;color:var(--ink-soft);line-height:1.8}
.ds-legal a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

/* Dunkelmodus fuer die transparenteren Glaskaesten (feste Weisswerte oben
   wuerden sonst hell durchschlagen). */
html[data-theme="dark"] .feat,
html[data-theme="dark"] .ds-tile{background:linear-gradient(150deg,rgba(255,255,255,0.09),rgba(255,255,255,0.025));border-color:rgba(255,255,255,0.14);box-shadow:0 18px 50px -18px rgba(0,0,0,0.6),inset 0 1px 1.5px rgba(255,255,255,0.16),inset 0 -10px 20px -12px rgba(255,255,255,0.05)}

/* Inline gesetzte Glaskaesten (Landing-Karten, FAQ) auf dieselbe Rezeptur
   ziehen — Inline-Styles brauchen dafuer !important. */
[style*="var(--gpanel)"]{background:linear-gradient(150deg,rgba(255,255,255,0.40),rgba(255,255,255,0.12))!important;border-color:rgba(255,255,255,0.72)!important;backdrop-filter:blur(30px) saturate(205%)!important;-webkit-backdrop-filter:blur(30px) saturate(205%)!important}
html[data-theme="dark"] [style*="var(--gpanel)"],
html[data-theme="dark"] .clog,
html[data-theme="dark"] .fsearch input{background:linear-gradient(150deg,rgba(255,255,255,0.09),rgba(255,255,255,0.025))!important;border-color:rgba(255,255,255,0.14)!important;box-shadow:0 18px 50px -18px rgba(0,0,0,0.6),inset 0 1px 1.5px rgba(255,255,255,0.16)!important}

/* ---------- Funktionen im Detail ---------- */
.det + .det{margin-top:22px}
.det dl{margin:20px 0 0}
.det dt{font-size:15.5px;font-weight:600;color:var(--ink);margin-top:20px}
.det dt:first-of-type{margin-top:0}
.det dd{margin:5px 0 0;font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.det code{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;background:rgba(46,125,107,0.10);border-radius:4px;padding:1px 5px}
html[data-theme="dark"] .det code{background:rgba(79,184,156,0.16)}

/* Verweis von einem Funktionskasten in die Detailliste */
.feat-more{margin-top:20px}
.feat-more a{font-size:15px;font-weight:600;color:var(--green-deep)}

/* ---------- Hilfe: Übersicht + Anleitungen ---------- */
.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
@media (max-width: 640px){ .help-grid{grid-template-columns:1fr} }
.help-cat-title{font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin:34px 0 2px}
.help-card{display:flex;flex-direction:column;gap:6px;border-radius:20px;padding:22px 24px;background:linear-gradient(150deg,rgba(255,255,255,0.40),rgba(255,255,255,0.12));border:1px solid rgba(255,255,255,0.72);box-shadow:0 12px 34px -18px rgba(20,25,40,0.24);backdrop-filter:blur(30px) saturate(205%);-webkit-backdrop-filter:blur(30px) saturate(205%)}
.help-card[hidden]{display:none}
.help-card h3{font-size:16.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.help-card h3::after{content:"→";margin-left:auto;color:var(--green-deep);font-weight:400;transition:transform .15s ease}
.help-card:hover h3::after{transform:translateX(3px)}
.help-card p{font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
html[data-theme="dark"] .help-card{background:linear-gradient(150deg,rgba(255,255,255,0.09),rgba(255,255,255,0.025));border-color:rgba(255,255,255,0.14)}
.help-empty{margin-top:18px;text-align:center;color:var(--ink-faint);font-family:var(--mono);font-size:12.5px}

/* Anleitung: nummerierte Schritte */
.help-lead{font-size:17.5px;line-height:1.55;color:var(--ink);font-weight:600;margin:12px 0 0}
.help-intro{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:14px 0 0;max-width:62ch}
.help-intro a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
ol.steps{list-style:none;counter-reset:st;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
ol.steps li{position:relative;padding-left:48px;font-size:15.5px;line-height:1.65;color:var(--ink-soft);min-height:34px;padding-top:4px}
ol.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,var(--green-bright),var(--green));color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(46,125,107,0.6)}
ol.steps strong{color:var(--ink);font-weight:600}
.help-note{margin-top:24px;border-radius:16px;padding:16px 20px;background:rgba(46,125,107,0.09);border:1px solid rgba(46,125,107,0.22);font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.help-note strong{color:var(--ink);font-weight:600}
/* Zwischenüberschrift bei mehreren Schritt-Abschnitten */
.steps-sub{font-size:16px;font-weight:600;color:var(--ink);margin:28px 0 0}
.feat > .steps-sub:first-child{margin-top:0}
.steps-sub + ol.steps{margin-top:14px}
/* Aufbau-Hinweis auf der Hilfe-Übersicht */
.help-wip{border-radius:16px;padding:14px 18px;background:rgba(46,125,107,0.08);border:1px solid rgba(46,125,107,0.20);font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.help-wip a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] .help-wip{background:rgba(79,184,156,0.12);border-color:rgba(79,184,156,0.22)}
html[data-theme="dark"] .help-note{background:rgba(79,184,156,0.12);border-color:rgba(79,184,156,0.24)}

/* Plattform-Umschalter auf den Hilfe-Detailseiten */
.plat-switch{display:inline-flex;gap:6px;margin-top:22px;padding:5px;border-radius:100px;border:1px solid var(--gbrd);background:var(--gpanel);backdrop-filter:blur(18px) saturate(190%);-webkit-backdrop-filter:blur(18px) saturate(190%);box-shadow:inset 0 1px 1px rgba(255,255,255,0.5)}
/* nicht ausgewaehlt: weiss mit gruener Schrift; ausgewaehlt: gruener Button, weisse Schrift */
.plat-switch button{font:inherit;font-size:14px;font-weight:600;padding:8px 18px;border:0;border-radius:100px;background:#fff;color:var(--green-deep);cursor:pointer;transition:background .15s ease,color .15s ease}
.plat-switch button.on{background:linear-gradient(180deg,var(--green-bright),var(--green));color:#fff;box-shadow:0 8px 20px -8px rgba(46,125,107,0.6),inset 0 1px 0 rgba(255,255,255,0.35)}
html[data-theme="dark"] .plat-switch button{background:rgba(255,255,255,0.10)}
html[data-theme="dark"] .plat-switch button.on{background:linear-gradient(180deg,var(--green-bright),var(--green));color:#0E1017}
/* Plattformabhaengige Schritte umschalten (display:none haelt die Nummerierung korrekt) */
[data-plat="ios"] li[data-mac]{display:none}
[data-plat="mac"] li[data-ios]{display:none}

/* Hervorgehobener Hilfe-Button in der Navigation */
.nav-help{transition:filter .15s ease,box-shadow .15s ease}
.nav-help:hover{color:#fff;filter:brightness(1.06)}
@media (max-width: 640px){ .nav-help{display:none!important} }  /* auf dem Handy im Burger-Menue */

/* Aufzählung im "Gut zu wissen"-Kasten */
.help-note-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.help-note-list li{position:relative;padding-left:16px}
.help-note-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:0.7}

/* Karussell-Plattform-Umschalter (iPhone/iPad ↔ Mac): nur der aktive Satz zeigt */
.carousel[data-plat="ios"] .plat-mac{display:none}
.carousel[data-plat="mac"] .plat-ios{display:none}
/* Mac-Karte: breites Fenster, ohne iPhone-Overlay */
.car-media-mac img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 38px rgba(20,25,40,0.22));transform:translateZ(0)}