:root{
  --ink:#060A12; --g1:#F7E7B4; --g2:#C79A3C; --g3:#7C5C1C;
  --metall:linear-gradient(135deg,#F7E7B4,#D9B45C 28%,#9C7526 54%,#EBD292 76%,#C79A3C);
  --paper:#E9E5DB; --haze:#6F7A8E; --haze2:#98A2B4;
  --line:rgba(233,229,219,.09); --line2:rgba(199,154,60,.28);
  --fd:"Fraunces",Georgia,serif; --fb:"IBM Plex Sans",system-ui,sans-serif; --fm:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--paper);font-family:var(--fb);font-weight:300;
 font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora b{position:absolute;display:block;border-radius:50%;filter:blur(130px)}
.aurora b:nth-child(1){width:60vw;height:60vw;left:-20vw;top:10vh;background:#C79A3C;opacity:.09}
.aurora b:nth-child(2){width:50vw;height:50vw;right:-16vw;top:60vh;background:#2B4A9E;opacity:.1}

nav{position:sticky;top:0;z-index:20;background:rgba(6,10,18,.86);backdrop-filter:blur(18px);
 border-bottom:1px solid var(--line)}
nav .in{max-width:820px;margin:0 auto;padding:16px 26px;display:flex;align-items:center;gap:12px}
nav .dot{width:5px;height:5px;border-radius:50%;background:var(--g2);box-shadow:0 0 10px var(--g2)}
nav .mk{font-family:var(--fd);font-size:15px;letter-spacing:.32em;font-weight:400}
nav a{margin-left:auto;color:var(--haze2);text-decoration:none;font-size:12.5px;letter-spacing:.06em;transition:.25s}
nav a:hover{color:var(--g1)}

main{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:70px 26px 110px}
h1{font-family:var(--fd);font-weight:300;font-size:clamp(34px,5vw,52px);line-height:1.1;margin-bottom:10px}
.stand{font-family:var(--fm);font-size:10px;letter-spacing:.24em;color:var(--g2);
 text-transform:uppercase;margin-bottom:54px}
h2{font-family:var(--fd);font-weight:300;font-size:25px;margin:52px 0 16px;
 padding-top:26px;border-top:1px solid var(--line)}
h3{font-family:var(--fm);font-size:10.5px;letter-spacing:.22em;color:var(--g2);
 text-transform:uppercase;margin:30px 0 10px}
p{color:var(--haze2);margin-bottom:16px;max-width:70ch}
p strong,li strong{color:var(--paper);font-weight:400}
ul{list-style:none;margin:0 0 20px}
li{color:var(--haze2);padding:9px 0 9px 20px;position:relative;max-width:70ch}
li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--g2)}
a{color:var(--g1)}
.karte{border:1px solid var(--line);padding:24px 26px;margin:22px 0;background:rgba(255,255,255,.018)}
.karte p:last-child{margin-bottom:0}
/* Ein freundlicher Hinweis: dieselbe Form, aber in der Hausfarbe
   statt in Rot. Rot ist fuer Maengel reserviert, und auf einer
   Rechtstexteseite liest ein Kunde Rot als Problem. */
table{width:100%;border-collapse:collapse;margin:22px 0;font-size:13.5px}
th{text-align:left;font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;color:var(--g2);
 text-transform:uppercase;font-weight:400;padding:10px 12px 10px 0;border-bottom:1px solid var(--line2)}
td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);color:var(--haze2);vertical-align:top}
td:first-child{color:var(--paper)}
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:44px 26px;text-align:center;
 color:var(--haze);font-size:12.5px}
footer a{margin:0 12px;text-decoration:none;color:var(--haze)}
footer a:hover{color:var(--g1)}
@media(max-width:640px){main{padding:44px 18px 70px}table{font-size:12.5px}}

/* ══════════════════════════════ Datenschutz, neue Bausteine */

/* Aufzaehlung mit Haken statt Punkten. Liest sich als "das ist erledigt",
 * nicht als "hier ist noch eine Bedingung". */
.kurz{list-style:none;margin:14px 0 26px;padding:0}
.kurz li{position:relative;padding:9px 0 9px 26px;line-height:1.75;
 border-bottom:1px solid rgba(255,255,255,.05)}
.kurz li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:5px;
 border-left:1.5px solid var(--g2);border-bottom:1.5px solid var(--g2);
 transform:rotate(-45deg);opacity:.85}

/* Ein Hinweis, der wirklich wichtig ist. Bewusst sparsam einsetzen,
 * sonst liest ihn niemand mehr. */

/* Die Tabelle der Dienstleister. Auf dem Handy werden aus Spalten Zeilen,
 * weil vier Spalten dort nicht lesbar sind. */
.dienste{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:14.5px}
.dienste th{text-align:left;font-family:var(--fm,monospace);font-size:10px;
 letter-spacing:.16em;text-transform:uppercase;color:var(--g2);
 padding:0 12px 10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-weight:400}
.dienste td{padding:11px 12px 11px 0;border-bottom:1px solid rgba(255,255,255,.05);
 vertical-align:top;line-height:1.6}
.dienste td:first-child{white-space:nowrap}
@media(max-width:720px){
  .dienste,.dienste tbody,.dienste tr,.dienste td{display:block;width:100%}
  .dienste thead{display:none}
  .dienste tr{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .dienste td{border:none;padding:2px 0}
  .dienste td:first-child{font-weight:400;color:var(--g1)}
  .dienste td:nth-child(2)::before{content:"Wofür: ";color:var(--haze)}
  .dienste td:nth-child(3)::before{content:"Erhält: ";color:var(--haze)}
  .dienste td:nth-child(4)::before{content:"Ort: ";color:var(--haze)}
}

/* Ein ruhiger Zwischensatz, kein Kasten.
   Am 24.08.2026 sind alle roten Kaesten von den Rechtstexteseiten
   entfernt worden. Auf einer Seite ueber Erstattungen oder Datenschutz
   liest ein Kunde Rot als Problem, wo keines ist, und Paddle prueft
   genau diese Seiten. */
.stand2{opacity:.75;line-height:1.75;margin:0 0 22px}