:root {
  --paper: #f2f4ee; --card: #fbfcf8; --ink: #1f2a1f; --ink-soft: #55614f; --line: #d5dccd;
  --moss: #3d6a36; --moss-tint: #e3ecdc; --bark: #6e5038; --bark-tint: #efe6dc; --sun: #a8641c; --sun-tint: #f6ead9;
  --good: #2f7d3a; --warn: #b7791f; --crit: #b23a2b;
  --font-display: "Vollkorn", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121a14; --card: #18221a; --ink: #e6ece1; --ink-soft: #a7b39f; --line: #2c3a2e;
    --moss: #8cc47f; --moss-tint: #22331f; --bark: #c9a27f; --bark-tint: #2c241c; --sun: #e8a65c; --sun-tint: #33281a;
    --good: #6fc77a; --warn: #e3ad4f; --crit: #ef7d6c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121a14; --card: #18221a; --ink: #e6ece1; --ink-soft: #a7b39f; --line: #2c3a2e;
  --moss: #8cc47f; --moss-tint: #22331f; --bark: #c9a27f; --bark-tint: #2c241c; --sun: #e8a65c; --sun-tint: #33281a;
  --good: #6fc77a; --warn: #e3ad4f; --crit: #ef7d6c; color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: 32px;
}
main { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 8vw, 54px); line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 5vw, 30px); line-height: 1.15; margin: 0; text-wrap: balance; }
h3 { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: var(--moss); }
.eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--bark); font-weight: 700; }
.soft { color: var(--ink-soft); }
.small { font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.btn { font: inherit; font-weight: 700; font-size: 16px; border-radius: 999px; padding: 11px 20px; cursor: pointer; border: 2px solid var(--moss); background: transparent; color: var(--moss); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.btn.solid { background: var(--moss); color: var(--card); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tool:focus-visible { outline: 3px solid var(--bark); outline-offset: 2px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }


/* Gemeinsame Bausteine der Inhaltsseiten */
.page-head { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.page-head .lead { font-size: 18px; color: var(--ink-soft); max-width: 60ch; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; text-decoration: none; }
.tab[aria-pressed="true"], .tab.on { border-color: var(--moss); background: var(--moss-tint); color: var(--moss); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.k { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--bark); font-weight: 700; }
.trig { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--moss-tint); color: var(--moss); padding: 1px 7px; border-radius: 6px; }
.cta { background: var(--moss); color: var(--card); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.cta h2, .cta p { color: var(--card); }
.cta .btn { border-color: var(--card); color: var(--card); }
.cta .btn.solid { background: var(--card); color: var(--moss); }
ul.clean { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.search { font: inherit; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.field .hint { font-weight: 400; color: var(--ink-soft); font-size: 14px; }
input, select, textarea { font: inherit; font-weight: 400; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; min-width: 0; }
textarea { min-height: 110px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; } }
.msg { border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.msg.ok { background: var(--moss-tint); }
.msg.err { background: var(--bark-tint); color: var(--crit); border: 1px solid var(--crit); }