@font-face{font-family:Archivo;src:url(/static/archivo-500.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/archivo-600.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/archivo-600.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/static/jetbrains-mono-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/static/jetbrains-mono-500.ttf) format('truetype');font-weight:500;font-display:swap}

:root{
  --grund:#0A0A0E; --flaeche:#14141A; --erhoben:#1C1C24; --tief:#101015;
  --linie:#2A2A34; --linie-fein:#1F1F27;
  --text:#ECEDF3; --matt:#8B8C9E; --leise:#5E5F70;
  --glut:#FF7A2F; --glut-matt:#C25A1F; --gut:#3FC080;
  --ui:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font:500 14px/1.5 var(--ui);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glut);outline-offset:2px;border-radius:2px}

/* ---------- Kopfleiste ---------- */
.kopf{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:22px;
  padding-inline:20px;background:rgba(10,10,14,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:9px;font:700 17px/1 var(--ui);letter-spacing:-.02em}
.marke svg{width:24px;height:24px;display:block}
.marke i{font:500 9px/1 var(--mono);letter-spacing:.26em;color:var(--glut);font-style:normal;
  padding-top:2px}
.nav{display:flex;gap:2px;margin-left:8px}
.nav a{padding:7px 11px;border-radius:4px;color:var(--matt);text-decoration:none;font-size:13px}
.nav a:hover{background:var(--flaeche);color:var(--text)}
.nav a.an{color:var(--text);background:var(--flaeche)}
.konto{margin-left:auto;display:flex;align-items:center;gap:9px;padding:5px 11px 5px 5px;
  border:1px solid var(--linie);border-radius:999px;background:var(--flaeche);font-size:13px}
.konto img{width:24px;height:24px;border-radius:50%;display:block}

/* ---------- Titelzeile ---------- */
.titelzeile{display:flex;align-items:center;gap:12px;padding:22px 20px 16px;max-width:1500px;margin:0 auto}
.titelzeile h1{margin:0;font:700 22px/1.2 var(--ui);letter-spacing:-.02em}
.plakette{font:500 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--glut);
  border:1px solid var(--glut-matt);border-radius:3px;padding:5px 7px}
.zurueck{color:var(--matt);text-decoration:none;font-size:13px;display:flex;align-items:center;gap:6px}
.zurueck:hover{color:var(--text)}

/* ---------- Werkbank ---------- */
.werkbank{display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:20px;
  max-width:1500px;margin:0 auto;padding:0 20px 80px;align-items:start}

.block{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;margin-bottom:14px}
.block > header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--linie-fein)}
.block > header h2{margin:0;font:500 9.5px/1 var(--mono);letter-spacing:.20em;
  text-transform:uppercase;color:var(--matt)}
.block > header .rechts{margin-left:auto;font:400 11px/1 var(--mono);color:var(--leise)}
.block .inhalt{padding:16px}

.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label.feld{display:block}
label.feld > span{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;
  font:500 11px/1 var(--ui);color:var(--matt)}
label.feld > span b{margin-left:auto;font:400 10px/1 var(--mono);color:var(--leise)}
input[type=text],select,textarea{width:100%;background:var(--erhoben);border:1px solid var(--linie);
  border-radius:5px;padding:9px 11px;font-size:13px;transition:border-color .12s}
input[type=text]:hover,select:hover,textarea:hover{border-color:#37374333}
input[type=text]:focus,select:focus,textarea:focus{border-color:var(--glut);outline:none}
textarea{resize:vertical;min-height:62px;line-height:1.5}
.mono{font-family:var(--mono);font-size:12px}
.hinweis{margin:7px 0 0;font:400 11px/1.5 var(--ui);color:var(--leise)}

/* App-Zeile */
.app{display:flex;align-items:center;gap:11px;margin-top:12px;padding:10px 12px;
  background:var(--tief);border:1px solid var(--linie-fein);border-radius:6px}
.app .wuerfel{width:30px;height:30px;border-radius:6px;background:#0A0A0E;display:grid;place-items:center}
.app .wuerfel svg{width:19px;height:19px}
.app b{display:block;font:600 13px/1.3 var(--ui)}
.app small{display:block;font:400 10.5px/1.3 var(--mono);color:var(--leise)}
.app .zustand{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gut)}
.punkt{width:6px;height:6px;border-radius:50%;background:var(--gut);flex:none}

/* Bauform-Auswahl */
.formen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.form{display:flex;gap:10px;align-items:center;padding:11px;border:1px solid var(--linie);
  border-radius:6px;background:var(--erhoben);cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.form:hover{border-color:#3A3A46}
.form[aria-pressed=true]{border-color:var(--glut);background:#20160F}
.form .skizze{width:34px;height:24px;border-radius:3px;background:#08080B;flex:none;
  display:grid;gap:2px;padding:3px}
.form .skizze i{background:#3A3A46;border-radius:1px;display:block}
.form[aria-pressed=true] .skizze i{background:var(--glut-matt)}
.form b{display:block;font:600 12.5px/1.3 var(--ui)}
.form small{display:block;font-size:10.5px;color:var(--leise);font-family:var(--mono)}

/* Kacheln */
.kachelzeile{display:grid;grid-template-columns:22px 1fr 1fr 44px;gap:9px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--linie-fein)}
.kachelzeile:last-child{border-bottom:0;padding-bottom:0}
.kachelzeile .nr{font:400 11px/1 var(--mono);color:var(--leise);text-align:center}
.kachelzeile .vorschau{width:44px;height:30px;border-radius:4px;object-fit:cover;
  background:var(--tief);border:1px solid var(--linie-fein);display:block}

/* Auto-Füllung */
.fuellen{display:flex;gap:10px;align-items:flex-end}
.fuellen label.feld{flex:1}
.knopf{border:1px solid var(--linie);background:var(--erhoben);border-radius:5px;
  padding:9px 14px;font-size:13px;cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s}
.knopf:hover{border-color:var(--glut);color:var(--glut)}
.knopf.voll{background:var(--glut);border-color:var(--glut);color:#120A04;font-weight:600}
.knopf.voll:hover{background:#FF8A45;color:#120A04}
.knopf:disabled{opacity:.45;cursor:default}

/* ---------- Vorschau ---------- */
.vorschau-spalte{position:sticky;top:76px;display:grid;gap:12px}
.schild{display:flex;align-items:center;gap:8px;font:500 9.5px/1 var(--mono);
  letter-spacing:.20em;text-transform:uppercase;color:var(--matt)}
.schild .live{color:var(--glut);display:flex;align-items:center;gap:5px;margin-left:auto;letter-spacing:.12em}
.schild .live i{width:5px;height:5px;border-radius:50%;background:var(--glut);
  animation:puls 2.4s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}

.buehne{position:relative;padding:18px;border-radius:10px;
  background:radial-gradient(120% 90% at 50% 0%,#221A2E 0%,#121218 55%,#0D0D12 100%);
  border:1px solid var(--linie)}
.buehne::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  box-shadow:inset 0 1px 0 #FFFFFF0A}

/* Die Discord-Karte */
.karte{background:#1A1A1E;border-radius:10px;overflow:hidden;
  box-shadow:0 12px 32px #00000066,0 0 0 1px #FFFFFF0D}
.karte .leiste{display:flex;align-items:center;gap:7px;padding:9px 12px}
.karte .leiste .ikon{width:17px;height:17px;border-radius:4px;background:#0A0A0E;
  display:grid;place-items:center;flex:none}
.karte .leiste .ikon svg{width:12px;height:12px}
.karte .leiste b{font:600 12.5px/1 var(--ui)}
.karte .held{position:relative;height:126px;background:#101014;overflow:hidden}
.karte .held img{width:100%;height:100%;object-fit:cover;display:block}
.karte .held::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#1A1A1E00 30%,#1A1A1ECC 78%,#1A1A1E 100%)}
.karte.gerahmt .held{height:104px;padding:12px 12px 0;background:transparent}
.karte.gerahmt .held img{border-radius:6px;height:92px;width:auto;max-width:100%}
.karte.gerahmt .held::after{display:none}
.karte .titelblock{padding:0 14px 13px;margin-top:-30px;position:relative;z-index:1}
.karte.gerahmt .titelblock{margin-top:6px}
.karte .titelblock h3{margin:0;font:700 19px/1.25 var(--ui);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.karte .titelblock p{margin:3px 0 0;font:500 12px/1.4 var(--ui);color:#B6B7C4}
.karte .raster{display:grid;gap:11px 14px;padding:13px 14px 15px;border-top:1px solid #FFFFFF12;
  background:#202027}
.karte .raster.vier{grid-template-columns:1fr 1fr}
.karte .raster.sechs{grid-template-columns:1fr 1fr;gap:9px 14px}
.karte .kachel{display:flex;align-items:center;gap:9px;min-width:0}
.karte .kachel img{width:30px;height:30px;border-radius:6px;object-fit:cover;flex:none;background:#101014}
.karte .raster.sechs .kachel img{width:22px;height:22px;border-radius:5px}
.karte .kachel div{min-width:0}
.karte .kachel b{display:block;font:600 13px/1.25 var(--ui);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.karte .raster.sechs .kachel b{font-size:12px}
.karte .kachel small{display:block;font:500 11px/1.3 var(--ui);color:#9A9BA8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.karte .fortschritt{padding:14px;border-top:1px solid #FFFFFF12;background:#202027}
.karte .fortschritt .zeile{display:flex;justify-content:space-between;font:600 12px/1 var(--ui);margin-bottom:8px}
.karte .fortschritt .bahn{height:7px;border-radius:99px;background:#0F0F13;overflow:hidden}
.karte .fortschritt .bahn i{display:block;height:100%;background:var(--glut);border-radius:99px;
  transition:width .5s cubic-bezier(.2,.7,.2,1)}

/* Eingeklappt */
.klein{display:flex;align-items:center;gap:9px;background:#1A1A1E;border-radius:8px;padding:9px 11px;
  box-shadow:0 0 0 1px #FFFFFF0D}
.klein .ikon{width:16px;height:16px;border-radius:4px;background:#0A0A0E;display:grid;place-items:center;flex:none}
.klein .ikon svg{width:11px;height:11px}
.klein .txt{min-width:0}
.klein b{display:block;font:600 13px/1.25 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klein small{display:block;font:500 11px/1.3 var(--ui);color:#9A9BA8}
.klein .bild{margin-left:auto;width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none}

/* Ausgaben */
.ausgaben{display:grid;gap:7px}
.ausgabe{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:6px}
.ausgabe .k{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);
  width:46px;flex:none}
.ausgabe code{font:400 11.5px/1.3 var(--mono);color:var(--matt);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ausgabe button{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.ausgabe button:hover{color:var(--glut)}

.veroeffentlichen{display:flex;gap:9px;align-items:center;padding-top:2px}
.veroeffentlichen .stand{font:400 11px/1.4 var(--mono);color:var(--leise)}
.veroeffentlichen .knopf{flex:none}

.melde{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);opacity:0;
  background:var(--erhoben);border:1px solid var(--glut-matt);border-radius:6px;
  padding:10px 16px;font-size:13px;pointer-events:none;transition:opacity .18s,transform .18s;z-index:40}
.melde.da{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1100px){
  .werkbank{grid-template-columns:minmax(0,1fr)}
  .vorschau-spalte{position:static;order:-1}
}
@media (max-width:560px){
  .feldpaar{grid-template-columns:1fr}
  .kachelzeile{grid-template-columns:18px 1fr 44px;gap:7px}
  .kachelzeile .wert{grid-column:2/4}
  .nav{display:none}
}

.ladestand{margin-left:auto;font:400 11px/1.4 var(--mono);color:var(--leise)}
.knopfreihe{display:flex;gap:9px;margin-top:12px}
.feld-weit{margin-top:14px}
.punkt.aus{background:var(--leise)}
.zustand.offen{color:var(--leise)}
.leerbild{width:30px;height:30px;border-radius:6px;background:#101014;flex:none;display:block}
.raster.sechs .leerbild{width:22px;height:22px;border-radius:5px}
.melde.schlimm{border-color:#8A3B2E;background:#20120F}
.veroeffentlichen .knopf{margin-left:auto}
.kachelzeile .vorschau{display:block}

/* Ohne Bild soll kein schwarzer Streifen stehenbleiben. */
.karte .held:has(img[hidden]){display:none}
.klein .bild[hidden]{display:none}

/* --- Einstieg --- */
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px;
  font:400 11px/1 var(--mono);color:var(--leise)}
.einstieg{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center;
  max-width:1180px;margin:0 auto;padding:clamp(40px,9vh,96px) 20px 80px}
.einstieg.schmal{grid-template-columns:minmax(0,1fr);max-width:620px;text-align:left}
.einstieg h1{margin:0 0 16px;font:700 clamp(30px,4.6vw,46px)/1.1 var(--ui);
  letter-spacing:-.03em;text-wrap:balance}
.einstieg .fuehrung{margin:0 0 26px;max-width:46ch;font:500 15px/1.65 var(--ui);color:var(--matt)}
.knopf.gross{padding:12px 20px;font-size:14px;border-radius:6px;display:inline-block;
  text-decoration:none}
.punkte{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:11px;
  border-top:1px solid var(--linie);padding-top:22px}
.punkte li{font:500 13px/1.55 var(--ui);color:var(--matt);max-width:52ch}
.punkte li b{color:var(--text);font-weight:600}
.punkte code{font:400 12px/1 var(--mono);color:var(--text)}
.bild-teil{display:grid;gap:12px}
@media (max-width:880px){
  .einstieg{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:36px}
  .bild-teil{max-width:400px}
}

/* --- Oeffentliche Profilseite --- */
.profil{display:grid;grid-template-columns:400px minmax(0,1fr);gap:40px;
  max-width:1180px;margin:0 auto;padding:36px 20px 80px;align-items:start}
.profil-karte{display:grid;gap:12px;position:sticky;top:76px}
.profil-zahlen{display:grid;gap:14px;min-width:0}
.zahlreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--linie-fein);border:1px solid var(--linie-fein)}
.zahlfeld{background:var(--grund);padding:13px 15px}
.zahlfeld b{display:block;margin-top:4px;font:600 19px/1.2 var(--ui);letter-spacing:-.02em}
.spiele{list-style:none;margin:0;padding:0;display:grid;
  border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.spiel{display:grid;grid-template-columns:52px minmax(0,1fr) 150px 74px;gap:14px;
  align-items:center;padding:9px 14px;background:var(--flaeche);
  border-bottom:1px solid var(--linie-fein)}
.spiel:last-child{border-bottom:0}
.spiel img{width:52px;height:24px;object-fit:cover;border-radius:3px;display:block;
  background:var(--tief)}
.spielname{font:500 13px/1.3 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spielbalken{height:5px;border-radius:99px;background:var(--tief);overflow:hidden}
.spielbalken i{display:block;height:100%;background:var(--glut);border-radius:99px}
.spielzeit{font:400 12px/1 var(--mono);text-align:right;color:var(--matt)}
.fussnote{margin:2px 0 0;font:400 11px/1.6 var(--mono);color:var(--leise)}
@media (max-width:900px){
  .profil{grid-template-columns:minmax(0,1fr);gap:28px}
  .profil-karte{position:static;max-width:400px}
  .spiel{grid-template-columns:52px minmax(0,1fr) 74px}
  .spielbalken{display:none}
}

/* --- Platzhalter --- */
.katalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:6px}
.marke-knopf{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:7px 9px;border:1px solid var(--linie);border-radius:5px;background:var(--erhoben);
  cursor:pointer;min-width:0;transition:border-color .12s}
.marke-knopf:hover{border-color:var(--glut)}
.marke-knopf code{font:400 11px/1.3 var(--mono);color:var(--glut);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marke-knopf span{font:500 11px/1.3 var(--ui);color:var(--matt);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Galerie --- */
.galerie{max-width:1280px;margin:0 auto;padding:36px 20px 80px}
.galerie-kopf{margin-bottom:26px}
.galerie-kopf h1{margin:0 0 8px;font:700 30px/1.15 var(--ui);letter-spacing:-.03em}
.vorlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.vorlage{display:grid;gap:10px}
.vorlage .buehne{padding:14px}
.vorlage-fuss{display:flex;align-items:center;gap:12px}
.vorlage-fuss b{display:block;font:600 13px/1.3 var(--ui)}
.vorlage-fuss small{display:block;font:400 11px/1.4 var(--mono);color:var(--leise)}
.vorlage-fuss .knopf{margin-left:auto;flex:none;text-decoration:none}

/* --- Hülle: Banner, Kontomenü, Fußzeile --- */
.banner{display:flex;justify-content:center;gap:6px;padding:8px 20px;font:500 12px/1.4 var(--ui);
  color:var(--matt);background:#17110C;border-bottom:1px solid #2A1D12;text-align:center}
.banner a{color:var(--glut)}
.kopf .marke{text-decoration:none;color:inherit}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.kontomenue{position:relative}
.kontomenue summary{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;
  border:1px solid var(--linie);border-radius:999px;background:var(--flaeche);
  font-size:13px;cursor:pointer;list-style:none}
.kontomenue summary::-webkit-details-marker{display:none}
.kontomenue summary:hover{border-color:#3A3A46}
.kontomenue summary img,.kontomenue .ohne-bild{width:24px;height:24px;border-radius:50%;
  display:block;background:var(--erhoben);flex:none}
.kontomenue summary svg{width:12px;height:12px;color:var(--leise)}
.kontomenue[open] summary svg{transform:rotate(180deg)}
.menue{position:absolute;right:0;top:calc(100% + 7px);min-width:214px;z-index:30;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:5px;
  box-shadow:0 14px 34px #00000073}
.menue a,.menue button{display:block;width:100%;text-align:left;padding:8px 10px;
  border:0;border-radius:5px;background:none;color:var(--text);font:500 13px/1.3 var(--ui);
  text-decoration:none;cursor:pointer}
.menue a:hover,.menue button:hover{background:var(--erhoben)}
.menue hr{border:0;border-top:1px solid var(--linie-fein);margin:5px 2px}

.fuss-leiste{border-top:1px solid var(--linie);margin-top:60px;padding:28px 20px 34px}
.fuss-innen{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;
  max-width:1180px;margin:0 auto}
.fuss-innen b{display:block;font:600 14px/1.3 var(--ui)}
.fuss-innen small{display:block;margin-top:3px;font:500 12px/1.5 var(--ui);color:var(--leise)}
.fuss-innen nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:16px}
.fuss-innen nav a{font:500 13px/1 var(--ui);color:var(--matt);text-decoration:none}
.fuss-innen nav a:hover{color:var(--text)}
.fuss-klein{max-width:1180px;margin:18px auto 0;font:400 11px/1.5 var(--mono);color:var(--leise)}

/* --- Startseite --- */
.start .einstieg{padding-top:clamp(32px,7vh,72px)}
.zaehler{margin:18px 0 0;font:500 13px/1.5 var(--ui);color:var(--matt)}
.zaehler b{color:var(--text)}
.abschnitt{max-width:1180px;margin:0 auto;padding:54px 20px 0}
.abschnitt h2{margin:0 0 22px;font:700 22px/1.2 var(--ui);letter-spacing:-.02em}
.kann-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--linie-fein);border:1px solid var(--linie-fein)}
.kann{background:var(--grund);padding:18px 20px}
.kann b{display:block;margin-bottom:6px;font:600 14px/1.3 var(--ui)}
.kann p{margin:0;font:500 13px/1.6 var(--ui);color:var(--matt)}
.kann code{font:400 12px/1 var(--mono);color:var(--glut)}
.schritte{list-style:none;margin:0 0 26px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.schritte li{display:flex;gap:13px}
.schritte .nr{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--glut-matt);color:var(--glut);font:500 12px/1 var(--mono)}
.schritte b{display:block;margin-bottom:5px;font:600 14px/1.3 var(--ui)}
.schritte p{margin:0;font:500 13px/1.6 var(--ui);color:var(--matt)}

/* --- Textseiten --- */
.text-seite{max-width:680px;margin:0 auto;padding:40px 20px 0}
.text-seite h1{margin:0 0 8px;font:700 30px/1.15 var(--ui);letter-spacing:-.03em}
.text-seite h2{margin:32px 0 8px;font:600 16px/1.3 var(--ui)}
.text-seite p{margin:0;font:500 14px/1.7 var(--ui);color:var(--matt)}
.text-seite code{font:400 13px/1 var(--mono);color:var(--glut)}
.text-seite a{color:var(--glut)}

.konto-zeile{display:flex;align-items:center;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--linie-fein)}
.konto-zeile:last-of-type{border-bottom:0}
.konto-zeile b{display:block;font:600 14px/1.3 var(--ui)}
.konto-zeile small{display:block;margin-top:3px;font:500 12.5px/1.6 var(--ui);color:var(--matt)}
.konto-zeile small a{color:var(--glut)}
.konto-zeile .knopf{margin-left:auto;flex:none;text-decoration:none}
.knopf.gefahr:hover{border-color:#B3503C;color:#E8785F}