/* ═══════════════════════════════════════════════════════════════════════════
   Amberald: shared stylesheet for the legal pages (imprint, privacy, terms).

   The landing page carries its own CSS inline, because it is one page with one
   very specific design. The legal pages are three plain documents that must
   look identical to each other; a shared file is the only way that stays true
   when one of them is edited. The palette is the amber half of the brand; the
   emerald half belongs to the develop module and has nothing to say here.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0c0b09;
  --bg-soft:#100f0c;
  --panel:#161411;
  --line:#2a2620;
  --line-soft:#211e19;
  --text:#ede9e2;
  --muted:#a49d90;
  --faint:#6f6a60;
  --amber:#e79721;
  --amber-bright:#ffc770;
  --radius:14px;
  --font-body:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:Georgia,"Times New Roman",ui-serif,serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
/* `hidden` muss gewinnen. Die Skripte schalten Preis, Founders-Etikett,
   Pruefsummen-Link und Sandbox-Hinweis ueber das Attribut, und jede Regel mit
   eigenem `display` (.card .sum, .price-tag) ueberstimmte es: unter einem
   leeren macOS-Download stand ein Pruefsummen-Link auf "#" (2026-09-13). */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:color-mix(in srgb,var(--amber) 35%,transparent)}
a{color:var(--amber-bright);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--panel);border:1px solid var(--line);padding:10px 16px;border-radius:8px}

/* ---------- header ---------- */
header.top{border-bottom:1px solid var(--line-soft);background:var(--bg-soft)}
header.top .bar{
  max-width:820px;margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;gap:20px;
}
.brand{
  display:inline-flex;align-items:center;gap:11px;color:var(--text);
  font-family:var(--font-display);font-weight:700;font-size:1.14rem;letter-spacing:.02em;
}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px;border-radius:7px}
.spacer{flex:1}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;font-size:.78rem;font-family:var(--font-mono)}
.lang button{background:none;border:0;color:var(--faint);padding:6px 12px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--panel);color:var(--text)}

/* ---------- document ---------- */
main{max-width:820px;margin:0 auto;padding:64px 28px 110px}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:-0.015em;line-height:1.15}
h2{
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;line-height:1.25;
  margin:52px 0 14px;padding-top:26px;border-top:1px solid var(--line-soft);
}
h3{font-family:var(--font-body);font-weight:700;font-size:1.02rem;margin:26px 0 8px}
p{color:var(--muted);margin-bottom:15px}
p strong,li strong{color:var(--text);font-weight:650}
.lead{
  color:var(--muted);font-size:1.05rem;margin:16px 0 8px;
  padding-bottom:8px;
}
ul,ol{color:var(--muted);margin:0 0 15px 22px}
li{margin-bottom:8px}
code{font-family:var(--font-mono);font-size:.88em;color:var(--text);background:var(--panel);padding:2px 6px;border-radius:5px}
address{font-style:normal;color:var(--muted)}
.note{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--radius);padding:20px 24px;margin:24px 0;
}
.note p:last-child{margin-bottom:0}
.updated{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:10px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:22px 0}
table{width:100%;border-collapse:collapse;background:var(--panel);min-width:460px}
th,td{padding:13px 18px;text-align:left;font-size:.93rem;border-bottom:1px solid var(--line-soft);color:var(--muted);vertical-align:top}
tr:last-child td,tr:last-child th{border-bottom:0}
th{color:var(--text);font-weight:650;white-space:nowrap}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:36px 0 60px;font-size:.86rem;color:var(--faint)}
footer .bar{max-width:820px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--faint)}
footer a:hover{color:var(--muted)}

/* ---------- shop: Downloadkarten, Kaufknopf, Schritte -----------------------
   Die Rechtsseiten sind reine Dokumente; Download-, Kauf- und Danke-Seite
   brauchen drei Bausteine mehr. Sie liegen hier und nicht in einer eigenen
   Datei, weil sie dieselbe Palette und dieselben Abstaende benutzen: ein
   zweites Stylesheet waere ein zweiter Ort, an dem eine Farbe altert. */
.btn{
  display:inline-block;padding:12px 22px;border-radius:11px;
  font-weight:650;font-size:.95rem;text-decoration:none;border:1px solid var(--line);
  color:var(--text);background:var(--panel);transition:border-color .15s,color .15s;
}
.btn:hover{border-color:var(--amber);color:var(--amber-bright)}
.btn-primary{
  background:linear-gradient(100deg,var(--amber),#2f9e6b);
  color:#120d05;border-color:transparent;
}
.btn-primary:hover{color:#120d05;filter:brightness(1.08)}
.btn-off{opacity:.5;cursor:default;pointer-events:none}
button.btn{font-family:inherit;cursor:pointer}

.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:24px 0}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;
}
.card h3{margin-top:0}
.card .meta{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.card .sum{display:block;margin-top:12px;font-size:.8rem;color:var(--faint)}

.price{font-family:var(--font-display);font-size:2.6rem;color:var(--text);margin:6px 0 2px}
.price small{font-family:var(--font-body);font-size:.9rem;color:var(--faint);margin-left:8px}
.price-sub{font-size:.88rem;color:var(--faint);margin-bottom:18px}
/* Founders-Label ueber dem Preis (Downloadseite), Gegenstueck zu .notify .price-tag in site.css. */
.price-tag{display:inline-block;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#1c160c;background:var(--amber);padding:6px 12px;border-radius:999px;margin:0 0 8px}
.checkout-note{margin-top:14px;font-size:.88rem;color:var(--amber-bright)}

.steps{counter-reset:s;list-style:none;margin:22px 0 22px 0;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:20px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);color:var(--amber);
  font-family:var(--font-mono);font-size:.82rem;
}
.steps h3{margin:0 0 4px}
.steps p{margin-bottom:0}