/*!
 * Deutscher-Chat — Login/Onboarding Styles
 * (c) Deutscher-Chat. Alle Rechte vorbehalten.
 *
 * Dieser Code ist ausschliesslich fuer den Betrieb auf deutscher-chat.de
 * bestimmt. Jede Vervielfaeltigung, Weitergabe, Veroeffentlichung oder
 * Nutzung ausserhalb von Deutscher-Chat – ganz oder in Teilen – ist ohne
 * ausdrueckliche schriftliche Genehmigung untersagt.
 */
/* Manrope (self-hosted, latin). Statische Gewichte – exakt die, die das Design
   nutzt: 200, 400, 600, 700, 800. Dateien liegen in /login/assets/fonts/. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("/login/assets/fonts/manrope-v20-latin-200.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/login/assets/fonts/manrope-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/login/assets/fonts/manrope-v20-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/login/assets/fonts/manrope-v20-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/login/assets/fonts/manrope-v20-latin-800.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --brand-violet: #7c3aed;
  --brand-purple: #8a2be2;
  --brand-magenta: #d600d6;
  --brand-pink: #e43bb8;
  --brand-pink-hover: #d42aa6;
  --brand-pink-soft: #ff6db5;

  --grad: linear-gradient(135deg, #5b2d8b 0%, #e43bb8 55%, #d42aa6 100%);
  --grad-soft: linear-gradient(135deg, #a25bef 0%, #e85ad6 100%);
  --grad-wash: linear-gradient(135deg, #f7ecfb, #fdecf6);

  --accent-halo: 0 0 0 3px rgba(228, 59, 184, .18);
  --accent-tint: rgba(228, 59, 184, .10);

  --bg: #f7f5fb;
  --bg-2: #fbf3f8;
  --surface: #ffffff;
  --surface-2: #f6f3fb;
  --tint-violet: #f3ecfb;
  --tint-violet-2: #ece2f7;
  --tint-pink: #fdecf6;

  --text: #241d31;
  --text-2: #564d63;
  --text-3: #8a7f98;
  --on-brand: #ffffff;

  --border: #ece1f4;
  --border-2: #ddccea;

  --ok: #1ea97c;   --ok-bg: #e7f7ef;   --ok-bd: #bfe9d4;
  --warn: #b86a00; --warn-bg: #fdf2e2; --warn-bd: #f0dcb8;
  --err: #d6336c;  --err-bg: #fdecf2;  --err-bd: #f5c6d6;
  --info: #7c3aed; --info-bg: #f4ecfd; --info-bd: #ddccea;

  --ring: rgba(228, 59, 184, .28);
  --ring-w: 3px;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-feat: "cv11" 1, "ss01" 1, "calt" 1, "liga" 1;

  --fs-display: clamp(1.7rem, 1.25rem + 1.9vw, 2.2rem);
  --fs-h2: clamp(1.45rem, 1.2rem + 1vw, 1.7rem);
  --fs-h3: 1.1rem;
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --ls-tight: -0.02em;
  --ls-snug: -0.011em;
  --ls-caps: 0.05em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px;

  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --e-1: 0 1px 2px rgba(124, 58, 237, .06), 0 1px 3px rgba(124, 58, 237, .05);
  --e-2: 0 4px 14px rgba(138, 43, 226, .08), 0 2px 6px rgba(214, 0, 214, .05);
  --e-3: 0 14px 38px rgba(138, 43, 226, .13), 0 5px 12px rgba(214, 0, 214, .06);
  --e-brand: 0 8px 24px rgba(214, 0, 214, .22);

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 340ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --t: var(--dur-2) var(--ease-out);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feat);
  font-optical-sizing: auto;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(255, 109, 181, .10), transparent 70%),
    radial-gradient(55% 45% at 92% 8%, rgba(138, 43, 226, .10), transparent 70%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}

.bg-bubbles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-bubbles span {
  position: absolute; border-radius: 50% 50% 50% 6px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(228, 59, 184, .12));
  filter: blur(1px); opacity: .55;
}
.bg-bubbles span:nth-child(1) { width: 190px; height: 190px; top: 7%; left: -46px; }
.bg-bubbles span:nth-child(2) { width: 130px; height: 130px; top: 60%; right: -34px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(138, 43, 226, .12)); }
.bg-bubbles span:nth-child(3) { width: 96px; height: 96px; bottom: 7%; left: 10%; }
.bg-bubbles span:nth-child(4) { width: 60px; height: 60px; top: 22%; right: 14%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(255, 109, 181, .14)); }
@media (prefers-reduced-motion: no-preference) {
  .bg-bubbles span { animation: floaty 15s var(--ease-out) infinite; }
  .bg-bubbles span:nth-child(2) { animation-delay: -4s; }
  .bg-bubbles span:nth-child(3) { animation-delay: -8s; }
  .bg-bubbles span:nth-child(4) { animation-delay: -2s; }
  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
}

a { color: var(--brand-violet); text-decoration: none; }
a:hover { color: var(--brand-pink); text-decoration: underline; }

a.btn, a.btn:hover { text-decoration: none; }
a.btn-primary, a.btn-primary:hover { color: var(--on-brand); }
a.btn-ghost, a.btn-ghost:hover, a.btn-soft, a.btn-soft:hover { color: var(--brand-violet); }
a.btn-danger, a.btn-danger:hover { color: var(--err); }

.ic { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

.wrap { max-width: 480px; margin: 0 auto; padding: 32px 18px 56px; position: relative; z-index: 1; }
.wrap--wide { max-width: 564px; }
.wrap--wizard { max-width: 540px; }

.brand { display: flex; justify-content: center; margin: 0 0 var(--s-6); }
.brand:hover { text-decoration: none; }
.brand-logo { height: 42px; width: auto; display: block; }

.bubble {
  position: relative; display: block; margin: 0 0 var(--s-5);
  padding: 16px 20px; background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 7px;
  box-shadow: var(--e-2); color: var(--text);
}
.bubble::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -8px;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 9px solid var(--surface);
  filter: drop-shadow(0 1px 0 var(--border-2));
}
.bubble__row { display: flex; align-items: center; gap: var(--s-3); }
.bubble__host {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--grad); color: #fff; box-shadow: var(--e-brand);
}
.bubble__host .ic { width: 20px; height: 20px; }
.bubble__text { font-weight: 700; font-size: 1.05rem; letter-spacing: var(--ls-snug); }
.bubble__text b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .bubble { animation: bubbleIn .5s var(--ease-spring) both; }
  .bubble__host { animation: hostPop .55s var(--ease-spring) both; }
  @keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
  @keyframes hostPop { 0% { transform: scale(0) rotate(-14deg); } 100% { transform: scale(1) rotate(0); } }
}

.bubble__typing { display: inline-flex; gap: 5px; align-items: center; height: 1.05rem; }
.bubble__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-purple); opacity: .35; animation: typing 1.1s var(--ease-out) infinite; }
.bubble__typing i:nth-child(2) { animation-delay: .15s; }
.bubble__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--e-3); padding: clamp(22px, 6vw, 32px);
  animation: cardIn var(--dur-3) var(--ease-out) both; overflow: hidden;
}

.card::before {
  content: ""; position: absolute; top: -90px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 190px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse, rgba(228, 59, 184, .12) 0%, transparent 70%);
}
.card > * { position: relative; z-index: 1; }
.card + .card { margin-top: var(--s-4); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }

.wrap--wizard .card { box-shadow: var(--e-3), 0 0 0 6px rgba(255,255,255,.55); }
@media (min-width: 600px) {
  .wrap--wizard .card { padding: 38px 40px; }
}

h1 { font-size: var(--fs-display); font-weight: 800; line-height: 1.12; letter-spacing: var(--ls-tight); margin: 0 0 var(--s-3); color: var(--text); }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.16; letter-spacing: var(--ls-tight); margin: 0 0 var(--s-2); color: var(--text); }
.eyebrow { margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--brand-pink); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--text-2); margin: 0 0 var(--s-6); }
.muted { color: var(--text-3); font-size: var(--fs-sm); }
.reassure { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-xs); margin-top: var(--s-3); }
.reassure .ic { width: 14px; height: 14px; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; min-height: 52px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-weight: 800; line-height: 1; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--t), background var(--t), border-color var(--t), filter var(--t), opacity var(--t);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-w) var(--ring); }
.btn:active { transform: translateY(1px); }
.btn + .btn { margin-top: var(--s-3); }
.btn .ic { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--grad); color: var(--on-brand); box-shadow: 0 10px 34px rgba(228, 59, 184, .24), 0 2px 10px rgba(20, 10, 30, .12); }
.btn-primary:hover { filter: brightness(1.04); box-shadow: 0 14px 44px rgba(228, 59, 184, .32), 0 2px 12px rgba(20, 10, 30, .14); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--brand-violet); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--tint-violet); }
.btn-soft { background: var(--tint-violet); color: var(--brand-violet); }
.btn-soft:hover { background: var(--tint-violet-2); }
.btn-sm { width: auto; min-height: 44px; padding: 0 18px; font-size: var(--fs-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: #fff; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-sm { display: block; text-align: center; margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-2); }
.link-row { display: flex; align-items: center; justify-content: center; gap: 5px; }
.foot-note { text-align: center; margin-top: var(--s-6); color: var(--text-3); font-size: var(--fs-xs); }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--s-4); color: var(--text-3); font-size: var(--fs-sm); }
.back-link:hover { color: var(--text); text-decoration: none; }
.back-link .ic { width: 16px; height: 16px; }

.field { margin-bottom: var(--s-5); }
label.lbl { display: block; font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--ls-snug); color: var(--text-2); margin-bottom: var(--s-2); }
input[type=text], input[type=password], input[type=number], input[type=email] {
  width: 100%; min-height: 52px; padding: 0 16px; font: inherit; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border-2); border-radius: var(--r-md);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input::placeholder { color: var(--text-3); }
input:hover { border-color: var(--brand-pink-soft); }
input:focus-visible { outline: none; background: var(--surface); border-color: var(--brand-pink); box-shadow: 0 0 0 var(--ring-w) var(--ring); }

.input-wrap { position: relative; }
.input-wrap input { padding-right: 50px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-3); display: grid; place-items: center; border-radius: var(--r-sm);
}
.pw-toggle:hover { color: var(--brand-violet); background: var(--tint-violet); }
.pw-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.pw-toggle .ic { width: 20px; height: 20px; }

.choice-grid { display: grid; gap: var(--s-3); }
.choice {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  padding: 15px 16px; cursor: pointer; font-weight: 700; font-size: var(--fs-body); color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border-2); border-radius: var(--r-md);
  transition: border-color var(--t), background var(--t), transform var(--dur-1) var(--ease-out), box-shadow var(--t);
}
.choice:hover { background: var(--tint-violet); border-color: var(--brand-pink-soft); }
.choice:active { transform: translateY(1px); }
.choice .emoji { font-size: 1.5rem; line-height: 1; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 var(--ring-w) var(--ring); }
.choice:has(input:checked), .choice.sel {
  border-color: var(--brand-pink); background: var(--accent-tint);
  box-shadow: var(--accent-halo);
}
.choice:has(input:checked)::after, .choice.sel::after {
  content: ""; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 11 3 7.5l1.1-1.1L6.5 8.8 11.9 3.4 13 4.5z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 11 3 7.5l1.1-1.1L6.5 8.8 11.9 3.4 13 4.5z'/%3E%3C/svg%3E") center/14px no-repeat;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 16px; border-radius: var(--r-pill); cursor: pointer;
  font-weight: 700; font-size: var(--fs-sm); color: var(--text); user-select: none;
  background: var(--surface); border: 1.5px solid var(--border-2);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--dur-1) var(--ease-out);
}
.chip:hover { border-color: var(--brand-pink-soft); transform: translateY(-1px); }
.chip:active { transform: scale(.96); }
.chip .emoji { font-size: 1rem; line-height: 1; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { box-shadow: 0 0 0 var(--ring-w) var(--ring); }
.chip.sel, .chip:has(input:checked) { background: var(--accent-tint); border-color: var(--brand-pink); color: var(--brand-pink-hover); box-shadow: var(--accent-halo); }
@media (prefers-reduced-motion: no-preference) {
  .chip.sel, .chip:has(input:checked) { animation: pop .2s var(--ease-spring); }
  @keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
}
.chip.is-disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.chip-hint { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-3); }
.chip-hint b { color: var(--brand-violet); font-weight: 800; }

.consent {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: 16px;
  border-radius: var(--r-lg); background: var(--tint-violet); border: 1.5px solid var(--border-2); cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.consent:hover { border-color: var(--brand-pink-soft); }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent__box {
  flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px;
  background: var(--surface); border: 1.5px solid var(--border-2); display: grid; place-items: center;
  transition: background var(--t), border-color var(--t);
}
.consent:has(input:checked) .consent__box { background: var(--grad); border-color: transparent; }
.consent:has(input:checked) .consent__box::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.consent:has(input:focus-visible) { box-shadow: 0 0 0 var(--ring-w) var(--ring); }
.consent__text { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.consent__text a { color: var(--brand-violet); font-weight: 800; text-decoration: underline; }

.check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand-purple); flex: none; }

.js-mini .mini-step { display: none; }
.js-mini .mini-step.is-active { display: block; }
.mini-step + .mini-step { margin-top: var(--s-6); }
.js-mini .mini-step + .mini-step { margin-top: 0; }

[data-mini-next], [data-mini-prev] { display: none; }
.js-mini [data-mini-next] { display: inline-flex; }
.js-mini [data-mini-prev] { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .mini-step.is-active { animation: stepIn .34s var(--ease-out) both; }
  @keyframes stepIn { from { opacity: 0; transform: translateX(14px); } }
  .mini-step.is-active.back { animation: stepInBack .34s var(--ease-out) both; }
  @keyframes stepInBack { from { opacity: 0; transform: translateX(-14px); } }
}
.btn-row { display: flex; gap: var(--s-3); }
.btn-row .btn { margin-top: 0; }
.btn-row .btn-ghost { flex: 0 0 auto; width: auto; padding: 0 18px; }

.steps-wrap { margin-bottom: var(--s-6); }
.steps-eyebrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.steps-eyebrow .now { color: var(--brand-pink); }
.steps-track { height: 8px; border-radius: var(--r-pill); background: var(--tint-violet); overflow: hidden; }
.steps-fill { height: 100%; border-radius: inherit; background: var(--grad); transition: width var(--dur-3) var(--ease-out); }

.strength { margin-top: var(--s-3); }
.strength-bar { display: flex; gap: 4px; height: 7px; }
.strength-bar > i { flex: 1; border-radius: var(--r-pill); background: var(--border); transition: background var(--dur-2) var(--ease-out); }
.strength[data-score="1"] > .strength-bar > i:nth-child(-n+1),
.strength[data-score="2"] > .strength-bar > i:nth-child(-n+2),
.strength[data-score="3"] > .strength-bar > i:nth-child(-n+3),
.strength[data-score="4"] > .strength-bar > i:nth-child(-n+4) { background: var(--meter); }
.strength[data-score="1"] { --meter: var(--err); }
.strength[data-score="2"] { --meter: var(--warn); }
.strength[data-score="3"] { --meter: var(--ok); }
.strength[data-score="4"] { --meter: #12b886; }
.strength-text { margin-top: var(--s-2); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }

.alert { display: flex; gap: var(--s-3); align-items: flex-start; padding: 13px 15px; margin-bottom: var(--s-5);
  border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--fs-sm); line-height: 1.45; }
.alert .ic { width: 18px; height: 18px; margin-top: 1px; }
.alert-error { background: var(--err-bg); color: var(--err); border-color: var(--err-bd); }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.alert a { color: inherit; font-weight: 800; }

.inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-3); padding: 13px 14px;
  background: var(--info-bg); border: 1.5px solid var(--brand-pink-soft);
  border-left: 4px solid var(--brand-pink); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text); font-weight: 600;
}
.inline-cta a {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--grad); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: var(--e-1); white-space: nowrap;
}
.inline-cta a:hover { filter: brightness(1.05); text-decoration: none; }
.inline-cta .ic { width: 15px; height: 15px; }

.rules { display: flex; flex-direction: column; margin: var(--s-2) 0 var(--s-6); }
.rule { display: grid; grid-template-columns: 38px 1fr; column-gap: var(--s-3); align-items: center; padding: var(--s-3) 2px; }
.rule + .rule { border-top: 1px solid var(--border); }
.rule__icon { grid-row: span 2; align-self: center; width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--grad-wash); color: var(--brand-violet); }
.rule__icon .ic { width: 20px; height: 20px; }
.rule__title { font-weight: 800; font-size: var(--fs-sm); color: var(--text); letter-spacing: var(--ls-snug); }
.rule__desc { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); margin-top: 1px; }
.rule--danger .rule__icon { background: var(--err-bg); color: var(--err); }

.section-head { margin: var(--s-7) 0 var(--s-3); }
.section-head .eyebrow { margin-bottom: 2px; }
.section .sub, .sub { color: var(--text-3); font-size: var(--fs-sm); margin: 0 0 var(--s-4); }
.acct-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-2); }
.acct-name { font-weight: 800; font-size: 1.2rem; letter-spacing: var(--ls-snug); }

/* Header darf das Inline-Edit-Popover ueberstehen lassen und MUSS ueber den
   nachfolgenden Karten/Tabs liegen. animation entfernt, da sie sonst einen
   Stacking-Kontext aufmacht, der das Popover einsperrt. */
.acct-card { overflow: visible; position: relative; z-index: 100; animation: none; }
/* Ist ein Chip aufgeklappt, hebt sich die ganze Karte ueber die Panels darunter
   und der Hero ueber seine Geschwister (Buttons/Hinweis), sonst liegt das
   Popover hinter ihnen (alle .card > * teilen sich z-index:1). */
.acct-card:has(.edit-chip[open]) { z-index: 300; }
.acct-card:has(.edit-chip[open]) .acct-hero { z-index: 60; }
.acct-hero { display: flex; align-items: center; gap: var(--s-4); }
.avatar-lg { position: relative; width: 76px; height: 76px; border-radius: 50%; flex: none;
  padding: 3px; background: var(--grad); box-shadow: var(--e-brand); }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
  background: var(--surface); }
.avatar-lg__fb { position: absolute; inset: 3px; border-radius: 50%; display: none;
  place-items: center; background: var(--surface); color: var(--brand-violet);
  font-weight: 800; font-size: 1.9rem; }
.avatar-lg.avatar--empty img { display: none; }
.avatar-lg.avatar--empty .avatar-lg__fb { display: grid; }
.acct-meta { min-width: 0; }
.acct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acct-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.acct-actions .btn { width: auto; flex: 1 1 auto; }
.acct-actions .acct-enter { flex: 1 1 auto; display: flex; }
.acct-actions .acct-enter .btn { width: 100%; }

/* Settings-Shell: Flex-Column, damit die Tab-Nav optisch UEBER dem Header
   liegt, obwohl Nav/Header/Panels DOM-Geschwister bleiben (CSS-only-Tabs). */
.tabs { margin-top: var(--s-4); display: flex; flex-direction: column; }
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.tabs > .tab-nav    { order: 1; }
.tabs > .acct-card  { order: 2; margin-top: var(--s-4); }
.tabs > .tab-panel  { order: 3; margin-top: var(--s-5); position: relative; z-index: 1; }
.tab-nav { display: flex; gap: 4px; padding: 5px; margin-bottom: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); }
.tab-nav label { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px; border-radius: var(--r-pill); cursor: pointer; font-weight: 800;
  font-size: var(--fs-sm); color: var(--text-2); transition: background var(--t), color var(--t); }
.tab-nav label .ic { width: 17px; height: 17px; }
.tab-nav label:hover { color: var(--text); }
.tab-panel { display: none; }

#tab-profil:checked ~ .tab-panel.tp-profil,
#tab-sicherheit:checked ~ .tab-panel.tp-sicherheit,
#tab-account:checked ~ .tab-panel.tp-account { display: block; animation: stepIn .28s var(--ease-out) both; }
#tab-profil:checked ~ .tab-nav label[for="tab-profil"],
#tab-sicherheit:checked ~ .tab-nav label[for="tab-sicherheit"],
#tab-account:checked ~ .tab-nav label[for="tab-account"] {
  background: var(--grad); color: #fff; box-shadow: var(--e-1); }
.tab-radio:focus-visible ~ .tab-nav label[for="tab-profil"],
.tab-radio:focus-visible ~ .tab-nav label[for="tab-sicherheit"],
.tab-radio:focus-visible ~ .tab-nav label[for="tab-account"] { outline: none; }
#tab-profil:focus-visible ~ .tab-nav label[for="tab-profil"],
#tab-sicherheit:focus-visible ~ .tab-nav label[for="tab-sicherheit"],
#tab-account:focus-visible ~ .tab-nav label[for="tab-account"] { box-shadow: 0 0 0 var(--ring-w) var(--ring); }
@media (max-width: 420px) { .tab-nav label span { display: none; } }
.avatar-ring { width: 56px; height: 56px; border-radius: 50%; flex: none; padding: 2px; background: var(--grad); display: grid; place-items: center; }
.avatar-ring > span { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); color: var(--brand-violet); display: grid; place-items: center; font-weight: 800; font-size: 1.35rem; overflow: hidden; }
.avatar-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; margin-top: 4px; }
.badge .ic { width: 13px; height: 13px; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.tag { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px; font-weight: 600; font-size: var(--fs-xs); color: var(--text-2); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--s-6) 0; }
.subhead { display: flex; align-items: center; gap: var(--s-2); font-weight: 800; font-size: var(--fs-sm); margin: 0 0 var(--s-3); color: var(--text); }
.subhead .ic { width: 17px; height: 17px; color: var(--brand-violet); }
.danger-zone { border-color: var(--err-bd); }
.danger-zone .eyebrow { color: var(--err); }
.btn-danger { background: transparent; color: var(--err); border-color: var(--err-bd); }
.btn-danger:hover { background: var(--err-bg); }

.wrap--hero {
  max-width: 600px;
  min-height: calc(100dvh - 130px);
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; position: relative;
}

.hero-bubbles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hb {
  position: absolute; bottom: -60px; left: 10%;
  padding: 9px 15px; font-size: .92rem; font-weight: 600; white-space: nowrap;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 16px 16px 16px 5px;
  box-shadow: 0 8px 24px rgba(138, 43, 226, .10);
  opacity: 0;
}
.hb--r { border-radius: 16px 16px 5px 16px; }
.hb:nth-child(1) { left: 7%;  }
.hb:nth-child(2) { left: 68%; }
.hb:nth-child(3) { left: 20%; }
.hb:nth-child(4) { left: 74%; }
.hb:nth-child(5) { left: 12%; }
.hb:nth-child(6) { left: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .hb { animation: hbFloat 15s linear infinite; }
  .hb:nth-child(1) { animation-delay: 0s; }
  .hb:nth-child(2) { animation-delay: 2.5s; }
  .hb:nth-child(3) { animation-delay: 5s; }
  .hb:nth-child(4) { animation-delay: 7.5s; }
  .hb:nth-child(5) { animation-delay: 10s; }
  .hb:nth-child(6) { animation-delay: 12.5s; }
  @keyframes hbFloat {
    0%   { transform: translateY(0) scale(.92); opacity: 0; }
    10%  { opacity: .9; }
    85%  { opacity: .9; }
    100% { transform: translateY(-108vh) scale(1); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb:nth-child(1), .hb:nth-child(2), .hb:nth-child(6) { opacity: .8; }
  .hb:nth-child(1) { bottom: auto; top: 14%; }
  .hb:nth-child(2) { bottom: auto; top: 26%; }
  .hb:nth-child(6) { bottom: 18%; }
}

@media (max-width: 560px) {
  .hb { font-size: .82rem; padding: 7px 12px; opacity: 0; }
  .hb:nth-child(3), .hb:nth-child(5) { display: none; }
  .hb:nth-child(1) { left: -2%; }
  .hb:nth-child(2) { left: 70%; }
  .hb:nth-child(4) { left: 72%; }
  .hb:nth-child(6) { left: -4%; }
  .hero::before { inset: -16% -20%;
    background: radial-gradient(ellipse 96% 60% at 50% 48%,
      rgba(247, 245, 251, .97) 0%,
      rgba(247, 245, 251, .88) 52%,
      rgba(247, 245, 251, 0) 82%);
  }
}

.hero { position: relative; z-index: 1; animation: cardIn var(--dur-3) var(--ease-out) both; }

.hero::before {
  content: ""; position: absolute; inset: -10% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 78% 64% at 50% 46%,
    rgba(247, 245, 251, .94) 0%,
    rgba(247, 245, 251, .80) 46%,
    rgba(247, 245, 251, 0) 78%);
}
.hero-title {
  font-size: clamp(2.4rem, 1.6rem + 4.5vw, 3.6rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 var(--s-4); color: var(--text);
}
.hero-title .grad-text { letter-spacing: -.03em; }
.hero-sub { font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); color: var(--text-2); margin: 0 auto var(--s-7); max-width: 30ch; }
.hero-sub b { color: var(--text); }
.hero-cta { display: flex; flex-direction: column; gap: var(--s-3); max-width: 360px; margin: 0 auto; }
.hero-cta .btn { margin-top: 0; }

.hero-guest {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-5);
  padding: 9px 18px; border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-sm); color: var(--brand-violet);
  background: var(--tint-violet); border: 1px solid var(--border-2);
  transition: background var(--t), border-color var(--t), transform var(--dur-1) var(--ease-out);
}
.hero-guest:hover { background: var(--tint-violet-2); border-color: var(--brand-pink-soft); text-decoration: none; transform: translateY(-1px); }
.hero-guest .ic { width: 16px; height: 16px; }
.btn-lg { min-height: 60px; font-size: 1.08rem; border-radius: var(--r-pill); }

.ts-field { display: flex; justify-content: center; min-height: 66px; }
.ts-field .cf-turnstile { margin: 0 auto; }

.avatar-upload { margin-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); }

.avatar-upload .btn { margin-top: 0; }
.avatar-upload [data-av-msg]:empty { display: none; }
.avatar-upload .av-skip-form { margin: 0; text-align: center; }
/* "ohne Profilbild fortfahren": bewusst dezenter Textlink statt Button, damit
   moeglichst viele ein Bild hochladen (das Bild-Speichern ist die klare CTA). */
.link-skip {
  background: none; border: 0; padding: 4px; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--text-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.link-skip:hover { color: var(--text-2); }
.av-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s-7) var(--s-5); text-align: center; cursor: pointer;
  border: 2px dashed var(--border-2); border-radius: var(--r-lg); background: var(--surface-2);
  transition: border-color var(--t), background var(--t);
  width: 100%; font: inherit;
}
.av-drop:hover, .av-drop.is-over { border-color: var(--brand-pink); background: var(--tint-violet); }

.av-drop--compact {
  flex-direction: row; gap: var(--s-2); padding: 10px 14px;
  border-style: solid; border-width: 1.5px;
}
.av-drop--compact .av-drop__ic { width: 26px; height: 26px; margin-bottom: 0; }
.av-drop--compact .av-drop__ic .ic { width: 15px; height: 15px; }
.av-drop--compact .av-drop__t { font-size: var(--fs-sm); }
.av-drop__ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-wash); color: var(--brand-violet); margin-bottom: 4px; }
.av-drop__ic .ic { width: 24px; height: 24px; }
.av-drop__t { font-weight: 800; color: var(--text); }
.av-stage { margin-bottom: 0; }
.av-frame {
  width: 220px; height: 220px; margin: 0 auto var(--s-3); border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand-pink-soft), var(--e-2);
  background: #fff; touch-action: none;
}
.av-frame canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.av-frame canvas:active { cursor: grabbing; }
.av-zoom { display: flex; align-items: center; gap: var(--s-3); max-width: 280px; margin: 0 auto var(--s-2); color: var(--text-3); }
.av-zoom .ic { width: 18px; height: 18px; }
.av-zoom input[type=range] { flex: 1; accent-color: var(--brand-purple); }

.hero-mark { width: 66px; height: 66px; margin: 0 auto var(--s-4); border-radius: 50%; padding: 3px; background: var(--grad); display: grid; place-items: center; position: relative; box-shadow: var(--e-brand); }
.hero-mark > span { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); color: var(--brand-violet); display: grid; place-items: center; }
.hero-mark .ic { width: 32px; height: 32px; stroke-width: 2.5; }
.hero-mark::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand-pink-soft); opacity: 0; animation: pulse 1.8s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.4); opacity: 0; } }
.confetti-pc { position: fixed; top: -24px; z-index: 60; pointer-events: none; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* E-Mail-Tippfehler-Vorschlag ("Meintest du …?") */
.email-suggest {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.email-suggest__btn {
  border: 0;
  background: var(--accent-tint);
  color: var(--brand-pink-hover);
  font: inherit;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.email-suggest__btn:hover { background: var(--brand-pink); color: #fff; }

/* "Doch lieber ein Bild?"-Nudge beim Ueberspringen des Profilbilds */
.av-nudge {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 12, 30, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: var(--s-4);
  animation: avFade .18s ease;
}
@keyframes avFade { from { opacity: 0; } to { opacity: 1; } }
.av-nudge__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-6) var(--s-5);
  max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  animation: avPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes avPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.av-nudge__emo { font-size: 46px; line-height: 1; margin-bottom: var(--s-3); }
.av-nudge__title { margin: 0 0 var(--s-2); font-size: var(--fs-h3, 1.25rem); color: var(--text); }
.av-nudge__text { margin: 0 0 var(--s-5); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.av-nudge__btns { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; }
.av-nudge__btns .btn-primary { width: 100%; }

/* Treueflamme – Vorstellungsseite (flame.php) + Settings-Badge */
.flame-hero { text-align: center; margin-bottom: var(--s-5); }
.flame-emoji {
  font-size: 64px; line-height: 1; margin-bottom: var(--s-2);
  filter: drop-shadow(0 6px 16px rgba(255, 120, 40, .35));
  animation: flamePulse 2.4s ease-in-out infinite;
}
@keyframes flamePulse {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.08) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .flame-emoji { animation: none; } }
.flame-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.flame-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.flame-list .fl-ic { font-size: 22px; flex: none; width: 28px; text-align: center; }
.flame-list b { color: var(--text); }
.flame-toggle { font-weight: 600; }

/* Flammen-Tag im Settings-Account-Header */
.tag-flame {
  background: linear-gradient(135deg, #ff8a3c, #ff5e62) !important;
  color: #fff !important; border: 0 !important;
}
.tag-flame .muted { color: rgba(255,255,255,.8); }

/* Supporter-Teaser auf der Flamme-Seite */
.supp-teaser {
  margin: var(--s-5) 0; padding: var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(124,58,237,.07), rgba(228,59,184,.07));
  border: 1px solid var(--border);
}
.supp-teaser__head { font-weight: 800; font-size: 1.05rem; margin-bottom: 2px; }
.supp-teaser__sub { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.supp-perks { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: 7px; }
.supp-perks li { font-size: var(--fs-sm); }
.supp-perks b { color: var(--text); }

/* === Breiteres Settings-Layout (Desktop) ================================= */
.wrap--settings { max-width: 860px; }

/* 2-Spalten-Grid fuer die Tab-Panels; auf Mobil einspaltig. */
.set-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
@media (min-width: 720px) {
  .set-grid { grid-template-columns: 1fr 1fr; }
  .set-grid .set-span { grid-column: 1 / -1; }   /* volle Breite (z.B. Flamme) */
}
/* Karten im Grid fuellen die Spaltenhoehe nicht erzwungen – natuerliche Hoehe. */
.set-grid .card { margin: 0; }

/* Gestapeltes Layout (volle Breite, untereinander) – fuer den Profil-Tab. */
.set-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.set-stack .card { margin: 0; }

/* Tab-Leiste auf Desktop etwas luftiger zentriert. */
@media (min-width: 720px) {
  .tab-nav { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* === Supporter-Werbekarte ================================================ */
.supp-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2a1442 0%, #4a1d5e 55%, #6b1f53 100%);
  color: #fff; border: 0; margin-bottom: var(--s-4);
}
.supp-card .sub { color: rgba(255,255,255,.82); }
.supp-card__glow {
  position: absolute; top: -60px; right: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,109,181,.45), transparent 70%);
  pointer-events: none;
}
.supp-card__body { position: relative; z-index: 1; }
.supp-card__eyebrow { color: var(--brand-pink-soft); }
.supp-card__title { margin: 2px 0 4px; font-size: 1.25rem; font-weight: 800; color: #fff; }
.supp-card .btn-primary { background: #fff; color: #5b1f53; margin-top: var(--s-2); }
.supp-card a.btn-primary,
.supp-card a.btn-primary:hover { color: #5b1f53; text-decoration: none; }
.supp-card .btn-primary:hover { background: #ffe9f6; }
.supp-perks--cols { display: grid; grid-template-columns: 1fr; gap: 7px; }
@media (min-width: 560px) { .supp-perks--cols { grid-template-columns: 1fr 1fr; } }
.supp-card .supp-perks b { color: #fff; }

/* === Inline-editierbare Chips im Settings-Header (Geschlecht/Alter) ======= */
.edit-chip { display: inline-block; position: relative; }
.edit-chip[open] { z-index: 40; }
.edit-chip > summary {
  list-style: none; cursor: pointer; user-select: none;
}
.edit-chip > summary::-webkit-details-marker { display: none; }
.tag-edit { transition: background var(--dur-1), box-shadow var(--dur-1); }
.tag-edit:hover { box-shadow: var(--accent-halo); }
.edit-pen { opacity: .55; font-size: .85em; margin-left: 2px; }
.edit-chip[open] > summary .edit-pen { opacity: 1; }
/* Aufklapp-Popover unter dem Chip */
.edit-pop {
  position: absolute; z-index: 50; top: calc(100% + 8px); left: 0;
  min-width: 240px; max-width: 88vw;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--e-3); padding: var(--s-4);
}
.edit-pop .choice-grid { margin-bottom: var(--s-3); }
.edit-pop .field { margin-bottom: var(--s-3); }
.edit-pop .check { margin-bottom: var(--s-3); }
@media (max-width: 560px) {
  /* Auf Mobil das Popover bildschirmbreit unter dem Chip */
  .edit-pop { position: fixed; left: 12px; right: 12px; min-width: 0; max-width: none; }
}

.set-hint {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--text-3); font-size: var(--fs-sm); text-align: center;
  margin: var(--s-4) 0 0;
}
.set-hint .ic { width: 15px; height: 15px; flex: none; }
/* Hinweis innerhalb der Header-Karte: dezente Trennlinie darueber. */
.acct-card .set-hint { padding-top: var(--s-4); border-top: 1px solid var(--border); }