/* FormIQ – gemeinsames Stylesheet der Unterseiten (Impressum, Datenschutz, AGB, AV-Vertrag, Support).
   Gleiche Gestaltung wie die Startseite: Papier, Kugelschreiberblau, Textmarker. */

@font-face { font-family: "Young Serif"; src: url(fonts/young-serif.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/schibsted-grotesk.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(fonts/space-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(fonts/space-mono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url(fonts/reenie-beanie.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #f3eee4; --paper-2: #e9e2d3; --card: #fffdf8;
  --panel: #17171c; --panel-fg: #f3eee4; --panel-fg-2: #bdbac2; --field: #ffffff; --dot: rgba(23,23,28,.035);
  --top-bg: rgba(243,238,228,.88); --note-bg: #fff8c9; --line-strong: rgba(23,23,28,.25); --btn-blue: #1f3fd1; --btn-blue-2: #142c9e;
  --ink: #17171c; --ink-2: #4a4953; --ink-3: #85838c; --line: rgba(23, 23, 28, .14);
  --blue: #1f3fd1; --blue-2: #142c9e; --marker: #f4e24a; --red: #cf3d2b; --green: #1f7a4d;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --hand: "Reenie Beanie", "Comic Sans MS", cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 5px 5px;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--marker); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hand { font-family: var(--hand); font-size: 26px; line-height: 1; color: var(--blue); }
.mark { background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%); padding: 0 .08em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; margin: 0; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 36em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 0; cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--paper); padding: 14px 22px; border-radius: 999px; font-weight: 650;
  box-shadow: 0 2px 0 rgba(0,0,0,.25); transition: transform .15s, background .15s;
}
.btn:hover { background: var(--blue); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn.blue { background: var(--btn-blue); } .btn.blue:hover { background: var(--btn-blue-2); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.link { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--marker); }
.link:hover { background: var(--marker); }

/* ---------- Kopf ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--top-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { font-family: var(--serif); font-size: 25px; text-decoration: none; display: flex; align-items: baseline; gap: 1px; }
.logo b { font: 700 15px var(--mono); background: var(--ink); color: var(--paper); padding: 2px 5px 1px; border-radius: 4px; margin-left: 3px; transform: translateY(-2px); }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 550; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current] { border-bottom: 2px solid var(--marker); }
.top .actions { display: flex; align-items: center; gap: 18px; }
.top .btn { padding: 10px 17px; font-size: 15px; }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px auto; transition: transform .2s, opacity .2s; }
.top.open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.top.open .burger span:nth-child(2) { opacity: 0; }
.top.open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--blue); }
@media (max-width: 860px) {
  .burger { display: block; }
  .nav, .top .actions { display: none; }
  .top.open .nav, .top.open .actions { display: flex; position: absolute; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: var(--paper); padding: 8px 16px 18px; gap: 14px; border-bottom: 1px solid var(--line); }
  .top.open .nav { top: 68px; }
  .top.open .actions { top: calc(68px + 190px); flex-direction: row; }
  .top.open .nav a { font-size: 19px; }
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.page-head { padding: clamp(40px, 7vw, 80px) 0 clamp(26px, 4vw, 44px); }
.page-head h1 { font-size: clamp(44px, 7vw, 84px); line-height: .98; margin: 14px 0 16px; }
.page-head .lead { margin: 0; }
.crumbs { display: flex; gap: 8px; align-items: center; color: var(--ink-3); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--blue); }

/* ---------- Rechtstexte: Inhaltsverzeichnis + Blatt ---------- */
.doc { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 5vw, 70px); align-items: start; padding-bottom: clamp(60px, 9vw, 110px); }
.toc { position: sticky; top: 100px; }
.toc .mono { color: var(--ink-3); margin-bottom: 12px; display: block; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-2); font-size: 15px; line-height: 1.35; transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-left-color: var(--blue); font-weight: 600; }
.toc .tools { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.toc .tools button, .toc .tools a { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.toc details { display: none; }
.sheet {
  position: relative; background: var(--card); border-radius: 6px; padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 64px);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 24px 50px -30px rgba(40,30,10,.45), 0 3px 8px rgba(40,30,10,.06);
}
.sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(10px, 2.4vw, 30px); border-left: 1.5px solid rgba(207,61,43,.28); } /* Heftrand */
.stamp { position: absolute; right: clamp(16px, 4vw, 40px); top: clamp(16px, 3vw, 30px); border: 2.5px solid var(--red); color: var(--red); border-radius: 7px; padding: 4px 10px; font: 700 12px var(--mono); letter-spacing: .1em; transform: rotate(-7deg); opacity: .85; text-transform: uppercase; background: rgba(255,253,248,.7); }
.sheet section { padding: 26px 0; border-top: 1px dashed var(--line); }
.sheet section:first-of-type { border-top: 0; padding-top: 0; }
.sheet h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; margin: 0 0 12px; padding-right: 110px; }
.sheet section + section h2 { padding-right: 0; }
.sheet p, .sheet li { color: var(--ink-2); max-width: 44em; }
.sheet p { margin: 0 0 10px; }
.sheet ul { margin: 8px 0 12px; padding-left: 1.2em; }
.sheet li { margin: 4px 0; }
.sheet li::marker { color: var(--blue); }
.sheet strong { color: var(--ink); }
.sheet a { color: var(--blue); text-underline-offset: 3px; word-break: break-word; }
.sheet .note { background: var(--note-bg); border-left: 4px solid var(--marker); padding: 14px 18px; border-radius: 4px; margin-bottom: 26px; color: var(--ink); font-size: 16px; }
.sheet .num { font-family: var(--mono); font-size: 13px; color: var(--red); margin-right: 8px; }
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc > .mono, .toc > ol, .toc > .tools { display: none; }
  .toc details { display: block; background: var(--card); border-radius: 10px; border: 1px solid var(--line); }
  .toc summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary::after { content: "+"; font-family: var(--mono); color: var(--blue); }
  .toc details[open] summary::after { content: "–"; }
  .toc details ol { border: 0; padding: 0 16px 12px; }
  .toc details a { padding-left: 0; border: 0; }
  .sheet h2 { padding-right: 0; }
  .sheet section:first-of-type h2 { padding-right: 96px; }
}
@media print {
  .top, .toc, footer { display: none !important; }
  body { background: #fff; }
  .doc { display: block; }
  .sheet { box-shadow: none; padding: 0; }
  .sheet::before, .stamp { display: none; }
}

/* ---------- Footer ---------- */
footer { background: var(--panel); color: var(--panel-fg-2); padding: 44px 0 36px; font-size: 15px; margin-top: auto; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; }
footer a { text-decoration: none; color: var(--panel-fg); }
footer a:hover, footer a[aria-current] { color: var(--marker); }
footer nav { display: flex; flex-direction: column; gap: 8px; }
footer .logo { color: var(--panel-fg); }
footer .logo b { background: var(--panel-fg); color: var(--panel); }

/* ---------- Einblenden ---------- */
.rise { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }

.hidden { display: none !important; }

/* ---------- Konto-Seiten (Login, Registrieren, Passwort) ---------- */
.auth { flex: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 100vh; }
.auth-side { background: var(--panel); color: var(--panel-fg); padding: 34px clamp(28px, 4vw, 60px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-side .logo { color: var(--panel-fg); }
.auth-side .logo b { background: var(--panel-fg); color: var(--panel); }
.auth-side .say { margin: auto 0; padding: 40px 0; }
.auth-side h2 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.02; }
.auth-side .lead { color: var(--panel-fg-2); margin-top: 18px; }
.auth-side .hand { color: var(--marker); display: inline-block; margin-top: 26px; transform: rotate(-3deg); }
.auth-side ol { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; counter-reset: s; }
.auth-side li { display: flex; gap: 14px; align-items: baseline; color: var(--panel-fg); counter-increment: s; }
.auth-side li::before { content: "0" counter(s); font: 700 13px var(--mono); color: var(--marker); }
.auth-side .foot { position: relative; z-index: 2; font-size: 13px; color: #85838c; display: flex; gap: 16px; flex-wrap: wrap; }
.auth-side .foot a { color: var(--panel-fg-2); text-decoration: none; }
.auth-side .foot a:hover { color: var(--marker); }
.stub { position: absolute; right: -40px; bottom: 130px; width: 230px; background: #fffdf8; color: #17171c; border-radius: 8px; padding: 16px 18px; transform: rotate(-9deg); box-shadow: 0 20px 40px rgba(0,0,0,.4); opacity: .95; }
.stub::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 44px; border-top: 2px dashed var(--line); }
.stub .mono { color: var(--ink-3); font-size: 10px; }
.stub b { display: block; font: 400 21px var(--serif); margin: 4px 0 26px; }
.stub span { font-size: 12px; color: var(--ink-2); }
.auth-main { display: flex; flex-direction: column; padding: 28px clamp(16px, 4vw, 48px); }
.auth-main .mobile-logo { display: none; }
.auth-main .back { align-self: flex-end; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.auth-main .back:hover { color: var(--blue); }
.auth-card { width: min(440px, 100%); margin: auto; padding: 30px 0; }
.auth-card h1 { font-size: clamp(34px, 4vw, 46px); line-height: 1.05; }
.auth-card .sub { color: var(--ink-2); margin: 10px 0 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 6px; }
.field input, .input { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--field); outline: none; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31,63,209,.12); background: var(--field); }
.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw { position: relative; }
.pw input { padding-right: 70px; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 8px; }
.meter { height: 5px; border-radius: 99px; background: var(--paper-2); margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; margin: -4px 0 18px; }
.row-between a, .auth-card .alt a, .check a { color: var(--blue); font-weight: 600; text-decoration: none; }
.row-between a:hover, .auth-card .alt a:hover, .check a:hover { text-decoration: underline; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin: 6px 0 20px; line-height: 1.45; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); margin-top: 1px; flex-shrink: 0; }
.auth-card .btn { width: 100%; padding: 15px 22px; font-size: 16px; }
.auth-card .alt { text-align: center; color: var(--ink-2); font-size: 15px; margin-top: 22px; }
.alert { background: rgba(207,61,43,.1); border: 1.5px solid rgba(207,61,43,.35); color: var(--red); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.done-box { text-align: center; }
.done-box .big { font-size: 46px; margin-bottom: 8px; }
.done-box h2 { font-size: 32px; margin-bottom: 10px; }
.done-box p { color: var(--ink-2); margin: 0 0 22px; }
.code-input { letter-spacing: .5em; text-align: center; font-family: var(--mono) !important; font-size: 20px !important; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-main .mobile-logo { display: flex; }
  .auth-main { padding-top: 18px; }
  .auth-main > .top-row { display: flex; justify-content: space-between; align-items: center; }
}
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Ratgeber-Seiten (SEO) ---------- */
.article { width: min(860px, 100% - 32px); margin-inline: auto; padding-bottom: clamp(60px, 9vw, 110px); }
.article .page-head { padding-left: 0; padding-right: 0; }
.article .page-head .btn { margin-top: 28px; }
.article h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.05; margin: clamp(48px, 7vw, 76px) 0 20px; }
.article p { color: var(--ink-2); }
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 20px 0; border-top: 1px dashed var(--line); }
.numbered li:last-child { border-bottom: 1px dashed var(--line); }
.numbered li::before { content: counter(n, decimal-leading-zero); font: 400 44px/1 var(--serif); color: var(--blue); grid-row: span 2; }
.numbered b { font-weight: 650; }
.numbered span { color: var(--ink-2); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checks li { background: var(--card); border-radius: 10px; padding: 14px 16px 14px 44px; position: relative; box-shadow: 0 10px 22px -20px rgba(40,30,10,.5); }
.checks li::before { content: "✓"; position: absolute; left: 16px; top: 13px; font: 700 16px var(--mono); color: var(--green); }
@media (max-width: 640px) { .checks { grid-template-columns: 1fr; } }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reasons div { background: var(--card); border-radius: 6px; padding: 22px; box-shadow: 0 14px 28px -24px rgba(40,30,10,.55); border-top: 5px solid var(--blue); }
.reasons div:nth-child(2) { border-color: var(--marker); } .reasons div:nth-child(3) { border-color: var(--red); } .reasons div:nth-child(4) { border-color: var(--green); }
.reasons h3 { font-size: 23px; margin-bottom: 6px; }
.reasons p { margin: 0; }
@media (max-width: 640px) { .reasons { grid-template-columns: 1fr; } }
.price-note { background: var(--note-bg); border-left: 5px solid var(--marker); border-radius: 4px; padding: 22px 24px; margin-top: 40px; }
.price-note h2 { margin: 0 0 8px; font-size: 28px; }
.price-note p { margin: 0 0 10px; color: var(--ink); }
.cmp-wrap { overflow-x: auto; background: var(--card); border-radius: 6px; box-shadow: 0 18px 34px -28px rgba(40,30,10,.55); }
.cmp { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px; }
.cmp th { text-align: left; padding: 16px 18px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
.cmp th.us { color: var(--blue); }
.cmp td { padding: 14px 18px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.cmp td:first-child { font-weight: 650; }
.cmp td.us { background: rgba(244,226,74,.22); }
.cmp td.them { color: var(--ink-3); }
.fine { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa details:first-child { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 28px var(--mono); color: var(--blue); transition: transform .25s; }
.qa details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa p { margin: -6px 0 22px; max-width: 40em; }
.cta-box { background: var(--panel); color: var(--panel-fg); border-radius: 18px; padding: clamp(28px, 5vw, 48px); margin-top: clamp(50px, 7vw, 80px); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.cta-box h2 { margin: 0 0 8px; color: var(--panel-fg); }
.cta-box p { color: var(--panel-fg-2); margin: 0; }
.cta-box .btn { background: var(--marker); color: var(--ink); }
.cta-box .btn:hover { background: #fff; }
@media (max-width: 700px) { .cta-box { grid-template-columns: 1fr; } }
.more { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.more span { color: var(--ink-3); }
.more a { text-decoration: none; border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 7px 14px; font-size: 15px; }
.more a:hover { border-color: var(--ink); }

@media (max-height: 760px) { .stub { display: none; } }


/* Papier bleibt Papier: Tickets, Zettel und App-Ausschnitte sind auch im Dunkelmodus hell */
.stub { --paper: #f3eee4; --paper-2: #e9e2d3; --card: #fffdf8; --ink: #17171c; --ink-2: #4a4953; --ink-3: #85838c; --line: rgba(23,23,28,.14); --line-strong: rgba(23,23,28,.25); --field: #ffffff; --blue: #1f3fd1; --red: #cf3d2b; --green: #1f7a4d; color-scheme: light; }
/* ---------- Dunkelmodus: dunkles Papier mit hellem Punktraster ---------- */
@media screen {
  :root[data-theme="dark"] { --paper: #141418; --paper-2: #1d1d23; --card: #1f1f26; --ink: #eee8dc; --ink-2: #bdb7ab; --ink-3: #8c8880;
    --line: rgba(238,232,220,.13); --line-strong: rgba(238,232,220,.28); --blue: #8ea2ff; --blue-2: #a9b8ff; --red: #ff806c; --green: #52c592;
    --panel: #0b0b0e; --panel-fg: #eee8dc; --panel-fg-2: #a9a49b; --field: #26262e; --dot: rgba(238,232,220,.075);
    --top-bg: rgba(20,20,24,.86); --note-bg: rgba(244,226,74,.12); --btn-blue: #3c58ee; --btn-blue-2: #5570ff; color-scheme: dark; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #141418; --paper-2: #1d1d23; --card: #1f1f26; --ink: #eee8dc; --ink-2: #bdb7ab; --ink-3: #8c8880;
    --line: rgba(238,232,220,.13); --line-strong: rgba(238,232,220,.28); --blue: #8ea2ff; --blue-2: #a9b8ff; --red: #ff806c; --green: #52c592;
    --panel: #0b0b0e; --panel-fg: #eee8dc; --panel-fg-2: #a9a49b; --field: #26262e; --dot: rgba(238,232,220,.075);
    --top-bg: rgba(20,20,24,.86); --note-bg: rgba(244,226,74,.12); --btn-blue: #3c58ee; --btn-blue-2: #5570ff; color-scheme: dark; }
}
.theme-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0; transition: background .15s, border-color .15s; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
}
/* Textmarker bleibt gelb, darauf dunkle Schrift */
@media screen {
  :root[data-theme="dark"] .mark, :root[data-theme="dark"] mark { color: #17171c; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark, :root:not([data-theme="light"]) mark { color: #17171c; }
}

@media (max-width: 860px) { .top .theme-btn { margin-left: auto; } .top .burger { margin-left: 8px; } }