/* ===========================================================================
   sentavel: das gemeinsame Aussehen. Eine Datei, damit eine Änderung eine
   Änderung ist und nicht zehn.

   Simon am 08.08.2026: *„ich möchte eher diesen schwarzen edleren modernen look
   wie bei einer amex zenturion für unser ganzes designsystem."*

   WAS DIESE KARTE AUSMACHT, und was hier davon übernommen ist:

   1. **Ein Metall, nicht zwei.** Die Centurion ist Schwarz und Platin, sonst
      nichts. Zwei Metalle nebeneinander sehen nach Auszeichnung aus, nicht nach
      Zurückhaltung. Deshalb gibt es hier genau ein `--metall`, und Grün, Gold und
      Rot kommen nur dort vor, wo eine Information eine Farbe braucht.
   2. **Das Schwarz ist nicht schwarz.** Reines #000 wirkt auf Bildschirmen wie ein
      Loch. Der Grund ist ein sehr dunkles, leicht warmes Anthrazit, und Flächen
      darüber sind heller statt umrandet. Tiefe entsteht durch Helligkeit, nicht
      durch Schatten.
   3. **Haarlinien statt Kästen.** Eine Linie von 1 px in gedämpftem Metall trennt
      genauso gut wie ein Rahmen und drängt sich nicht auf.
   4. **Der Knopf ist hell auf dunkel.** Platin auf Schwarz als Text hätte zu wenig
      Kontrast für eine Fläche, auf die man drücken soll. Also die Fläche in Metall
      und die Schrift darin im Grundton. Das ist genau der Umschlag, den die Karte
      auch macht.
   5. **Weite Sperrung nur in Kapitälchen.** Gesperrte Kleinbuchstaben wirken
      technisch, gesperrte Großbuchstaben wirken teuer. Deshalb nur in Vorspann und
      Tabellenköpfen.

   Nicht übernommen: Glanz, Verläufe, Schimmer-Animationen. Eine Metallkarte
   glänzt, weil Licht darauf fällt. Ein Bildschirm, der Glanz nachmacht, sieht
   nach Spielhalle aus. „Edel" ist Simons wichtigstes Kriterium, und es entsteht
   hier durch Ruhe.
   =========================================================================== */

:root{
  /* Der Browser zeichnet ein paar Dinge selbst, und er tat es hell auf einer dunklen Seite:
     Das Kalendersymbol im Geburtsdatum war ein dunkles Zeichen auf #121315, praktisch
     unsichtbar, und der Kalender, der sich beim Antippen öffnet, wäre weiß aus schwarzem
     Grund gesprungen. Dasselbe gilt für Bildlaufleisten und Kästchen. Am 12.08.2026 im
     Browser nachgesehen und mit dieser Zeile behoben.
     Sie tut noch ein Zweites: Chrome auf Android dunkelt helle Seiten von sich aus nach,
     überspringt aber jede, die selbst sagt, sie sei dunkel. */
  color-scheme:dark;

  /* Grund und Flächen. Jede Stufe ist heller als die darunter. */
  --grund:#0A0A0B;
  --flaeche:#121315;
  --erhoben:#191B1E;
  --linie:#282B30;
  --linieStark:#3A3E45;

  /* Schrift. Warmes Off-White, kein reines Weiß: das brennt auf Schwarz. */
  --text:#EBE9E6;
  --leise:#8B8F96;
  --sehrLeise:#5F646B;

  /* Das eine Metall. Platin, leicht kühl, damit es sich vom warmen Text abhebt. */
  --metall:#CBD0D6;
  --metallLeise:#9AA0A8;

  /* Nur wo eine Information eine Farbe braucht. Nie als Schmuck. */
  --gut:#7FA88C;
  --warn:#C9A96B;
  --schlecht:#C97B6B;

  --r-klein:6px; --r:12px; --r-gross:18px;

  --disp:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--grund);
  color:var(--text);
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Eine sehr feine Körnung. Auf großen schwarzen Flächen entstehen sonst
   Farbbänder, besonders auf Telefonen mit OLED. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

/* Links: in der Struktur ohne Unterstreichung, im Lesetext mit.
   Ein unterstrichener Menüpunkt sieht aus wie ein Fehler, ein nicht unterstrichener
   Link mitten in einem Absatz ist keiner: Dort ist die Unterstreichung das Einzige,
   was ihn von Text unterscheidet, denn Farbe allein reicht nicht. */
a{color:inherit;text-decoration:none}
a:hover{color:#F5F3F1}
.rechtsteil p a,.rechtsteil li a,.absatz p a,details p a,.hinweis a,.fein a{
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--linieStark)}
.rechtsteil p a:hover,.rechtsteil li a:hover,.absatz p a:hover,details p a:hover,
.hinweis a:hover,.fein a:hover{text-decoration-color:var(--metall)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--metall);outline-offset:2px}

h1,h2,h3{
  font-family:var(--disp);
  color:#F5F3F1;
  font-weight:400;
  letter-spacing:-.028em;
  line-height:1.04;
  text-wrap:balance;
}
h1{font-size:clamp(36px,7vw,64px)}
h2{font-size:clamp(22px,2.8vw,31px);font-weight:500;letter-spacing:-.02em}
h3{font-size:19px;font-weight:500;letter-spacing:-.014em}
p+p{margin-top:15px}
strong{color:#F7F5F3;font-weight:500}

/* ---- Kopf und Fuß -------------------------------------------------------- */
.kopfleiste{border-bottom:1px solid var(--linie)}
.kopf{max-width:1100px;margin:0 auto;padding:17px 24px;display:flex;
      align-items:center;justify-content:space-between;gap:20px}
.marke{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.035em;
       color:#F5F3F1;text-decoration:none}
.slogan{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
        text-transform:uppercase;color:var(--metallLeise)}

.fussleiste{border-top:1px solid var(--linie)}
.fuss{max-width:740px;margin:0 auto;padding:26px 24px 52px;font-size:14.5px;
      color:var(--leise);display:flex;gap:20px;flex-wrap:wrap}
.fuss a:hover{color:var(--text)}

/* ---- Satzspiegel --------------------------------------------------------- */
.blatt{max-width:740px;margin:0 auto;padding:0 24px clamp(70px,9vw,110px)}
.vorspann{font-family:var(--mono);font-size:11px;letter-spacing:.19em;
          text-transform:uppercase;color:var(--metallLeise);display:block;
          padding-top:clamp(42px,7vw,78px);margin-bottom:22px}
.gross{font-size:clamp(19px,2.2vw,22px);margin-top:22px;max-width:44ch;color:var(--text)}
.absatz{margin-top:clamp(44px,6vw,70px)}
.absatz p,.absatz li{max-width:60ch}
.hinweis{color:var(--leise);font-size:14.5px;margin-top:8px}
.fein{color:var(--sehrLeise);font-size:13.5px;margin-top:10px}

/* Der Trenner ist in der Mitte am hellsten. Eine Linie, die an den Rändern
   ausläuft, wirkt eingelegt statt aufgemalt. */
.trenner{height:1px;margin:clamp(44px,6vw,70px) 0;border:0;
         background:linear-gradient(90deg,transparent,var(--linieStark) 22%,
                                    var(--linieStark) 78%,transparent)}

/* ---- Flächen ------------------------------------------------------------- */
.kasten{background:var(--flaeche);border:1px solid var(--linie);
        border-radius:var(--r-gross);padding:25px 23px;margin-top:26px}
.kasten.stark{background:var(--erhoben);border-color:var(--linieStark)}
.kasten h2,.kasten h3{margin-bottom:9px}

/* ---- Knöpfe: Metall auf Schwarz, Schrift im Grundton --------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;
       font:inherit;font-size:16px;font-weight:500;min-height:48px;
       padding:12px 27px;border-radius:100px;cursor:pointer;text-decoration:none;
       background:var(--metall);color:var(--grund);border:1px solid var(--metall);
       transition:background .16s ease,transform .12s ease,border-color .16s ease}
.knopf:hover:not(:disabled){background:#E4E8EC;border-color:#E4E8EC;transform:translateY(-1px)}
.knopf:active:not(:disabled){transform:translateY(0)}
.knopf:disabled{opacity:.35;cursor:not-allowed;transform:none}
.knopf.klar{background:transparent;color:var(--text);border-color:var(--linieStark)}
.knopf.klar:hover:not(:disabled){background:var(--erhoben);border-color:var(--metallLeise)}
.reihe{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}

/* ---- Formulare ----------------------------------------------------------- */
.feld{margin-top:18px}
label{display:block;font-size:14px;color:var(--leise);margin-bottom:7px}
input,select,textarea{width:100%;font:inherit;font-size:17px;
  background:var(--flaeche);color:var(--text);border:1px solid var(--linie);
  border-radius:var(--r);padding:13px 15px}
input::placeholder,textarea::placeholder{color:var(--sehrLeise)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--metallLeise)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.paar{grid-template-columns:1fr}}

/* ---- Meldungen ----------------------------------------------------------- */
.meldung{font-size:15.5px;margin-top:16px;min-height:1.4em}
.meldung.gut{color:var(--gut)}
.meldung.schlecht{color:var(--schlecht)}

/* ---- Tabellen: Zahlen rechts, mit gleichbreiten Ziffern ------------------ */
table{width:100%;border-collapse:collapse;margin-top:18px;font-size:16px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--linie)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
   color:var(--metallLeise);font-weight:400}
td.zahl{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
        color:#F5F3F1}

/* ---- Etwas zum Abtippen: Kürzel, Links, Codes ---------------------------- */
.gepraegt{font-family:var(--mono);background:var(--flaeche);
          border:1px solid var(--linieStark);border-radius:var(--r);
          padding:16px 18px;margin-top:14px;user-select:all;word-break:break-all;
          color:#F5F3F1}
.gepraegt.gross{font-size:clamp(28px,6vw,42px);letter-spacing:.16em;text-align:center}

/* ---- Satzspiegel, zweite Breite ------------------------------------------
   740px ist die Lesebreite. Wo zwei Karten nebeneinander stehen müssen
   (Rollenwahl, Kalender), wird es zu eng, ohne dass die Lesebreite falsch wäre. */
.blatt.breit{max-width:900px}
.blatt.weit{max-width:1100px}

/* ---- Kopf: Rückweg ------------------------------------------------------- */
.zurueck{font-size:15px;color:var(--leise);text-decoration:none}
.zurueck:hover{color:var(--text)}
.kopf nav{display:flex;gap:22px;font-size:15px;color:var(--leise)}
.kopf nav a:hover{color:var(--text)}

/* ---- Fortschritt in Stufen ----------------------------------------------- */
.stufen{display:flex;gap:9px;margin:34px 0 8px}
.stufen i{height:2px;flex:1;background:var(--linie);border-radius:2px;transition:background .3s}
.stufen i.an{background:var(--metall)}
.stufenwort{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
            text-transform:uppercase;color:var(--metallLeise)}

/* ---- Wählbare Karten ---------------------------------------------------- */
.karten{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.wahl{border:1px solid var(--linie);border-radius:var(--r-gross);background:var(--flaeche);
      padding:26px 24px;text-align:left;font:inherit;color:inherit;cursor:pointer;
      display:flex;flex-direction:column;transition:border-color .15s,background .15s}
.wahl:hover{border-color:var(--linieStark);background:var(--erhoben)}
.wahl.gewaehlt{border-color:var(--metall);background:var(--erhoben)}
.wahl h2{margin-bottom:9px}
.wahl p{font-size:16px;color:var(--text);flex:1}
.wahl .preis{font-family:var(--disp);font-size:26px;color:#F5F3F1;margin-top:18px}
.wahl .preis span{font-family:var(--body);font-size:15px;color:var(--leise)}
.wahl .haken{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
             text-transform:uppercase;color:var(--sehrLeise);margin-top:14px}
.wahl.gewaehlt .haken{color:var(--metall)}
@media(max-width:720px){.karten{grid-template-columns:1fr}}

/* ---- Zustimmung: Häkchen mit Rechtstext --------------------------------- */
.zustimmung{display:flex;gap:12px;align-items:flex-start;margin-top:20px;
            font-size:15px;color:var(--text);line-height:1.5;cursor:pointer}
.zustimmung input{margin-top:4px;width:17px;height:17px;flex:0 0 auto;
                  accent-color:var(--metall)}
.zustimmung a{color:var(--metall)}

/* ---- Nummerierte Schritte ----------------------------------------------- */
.schritte{list-style:none;counter-reset:s;margin-top:24px}
.schritte li{counter-increment:s;position:relative;padding-left:52px;margin-bottom:22px}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-1px;
  width:34px;height:34px;border-radius:50%;background:var(--erhoben);
  border:1px solid var(--linieStark);color:var(--metall);font-family:var(--mono);
  font-size:13.5px;display:flex;align-items:center;justify-content:center}
.schritte h3{margin-bottom:4px}
.schritte p{font-size:16.5px}

/* ---- Aufzählung mit Punkt, auch als Verbot ------------------------------ */
.regeln{list-style:none;margin-top:16px}
.regeln li{position:relative;padding-left:26px;margin-bottom:12px;font-size:16.5px}
.regeln li::before{content:"";position:absolute;left:3px;top:11px;width:7px;height:7px;
                   border-radius:50%;background:var(--metallLeise)}
.regeln li.nein::before{background:var(--schlecht)}

/* ---- Rechtsseiten ------------------------------------------------------- */
.rechtsteil{margin-top:clamp(38px,5vw,58px)}
.rechtsteil h2{display:flex;gap:14px;align-items:baseline}
.rechtsteil h2 .ziffer{font-family:var(--mono);font-size:13px;color:var(--metallLeise);
                       letter-spacing:.1em;flex:0 0 auto}
.rechtsteil h3{margin-top:24px}
.rechtsteil p,.rechtsteil li{max-width:62ch}
.rechtsteil ul,.rechtsteil ol{margin:12px 0 0 22px}
.rechtsteil li{padding:4px 0;font-size:16.5px}
.stand{font-family:var(--mono);font-size:12px;letter-spacing:.13em;
       text-transform:uppercase;color:var(--sehrLeise);margin-top:18px}

.inhalt{margin-top:30px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
        padding:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.inhalt a{font-size:15.5px;color:var(--leise);text-decoration:none;padding:4px 0;
          display:flex;gap:10px}
.inhalt a:hover{color:var(--text)}
.inhalt a span{font-family:var(--mono);font-size:12px;color:var(--sehrLeise);
               padding-top:3px;flex:0 0 22px}
@media(max-width:620px){.inhalt{grid-template-columns:1fr}}

.platzhalter{border-left:2px solid var(--warn);background:rgba(201,169,107,.05);
             padding:14px 18px;margin-top:16px;font-size:15.5px;color:var(--leise)}
.platzhalter b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
               text-transform:uppercase;color:var(--warn);display:block;margin-bottom:6px;
               font-weight:400}

.etikett{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
         color:var(--metallLeise);border:1px solid var(--linieStark);border-radius:100px;
         padding:5px 11px;display:inline-block}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}