/* Stackschmiede Chat — Werkstatt-DE Custom Styles */
/* Self-hosted webfonts (DSGVO-clean) — generated 2026-05-04, see fonts/fonts.css */
@import url("/sfonts/fonts.css");

:root {
  --color-bg:           #0F0F10;
  --color-surface:      #1A1A1C;
  --color-surface-2:    #222225;
  --color-fg:           #EDEAE3;
  --color-muted:        #8A8680;
  --color-primary:      #D4A574;
  --color-primary-soft: #E8C493;
  --color-accent:       #6B8E7F;
  --color-border:       #26262A;
  --color-warn:         #E0A96D;
  --color-danger:       #C97064;
  --font-sans:    "Inter", "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Instrument Serif", Georgia, serif;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-glow: 0 0 0 1px rgba(212,165,116,.3), 0 8px 32px -8px rgba(212,165,116,.25);
}

/* Login page */
.mx_AuthPage {
  background: linear-gradient(160deg, #0F0F10 0%, #1A1A1C 60%, #1E1A16 100%) !important;
  font-family: var(--font-sans) !important;
}

/* Auth card */
.mx_AuthPage .mx_AuthPage_modal {
  background-color: #1A1A1C !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-card), 0 0 40px rgba(212, 165, 116, 0.08) !important;
  border-radius: var(--radius-lg) !important;
}

/* Auth header logo */
.mx_AuthPage .mx_AuthHeader img {
  max-height: 48px !important;
  opacity: 0.92;
}

/* Auth body text */
.mx_AuthPage .mx_AuthBody {
  color: var(--color-fg) !important;
  font-family: var(--font-sans) !important;
}

/* Input fields */
.mx_AuthPage input[type="text"],
.mx_AuthPage input[type="password"] {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-fg) !important;
  font-family: var(--font-sans) !important;
}

.mx_AuthPage input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.2) !important;
}

/* Primary buttons */
.mx_AuthPage .mx_Login_submit,
.mx_AuthPage .mx_AccessibleButton_kind_primary {
  background-color: var(--color-primary) !important;
  color: #0F0F10 !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-md) !important;
  letter-spacing: -0.01em;
}

.mx_AuthPage .mx_Login_submit:hover,
.mx_AuthPage .mx_AccessibleButton_kind_primary:hover {
  background-color: var(--color-primary-soft) !important;
}

/* Links */
.mx_AuthPage a {
  color: var(--color-primary) !important;
}

/* Server picker ausblenden */
.mx_AuthPage .mx_ServerPicker {
  display: none !important;
}

/* Footer */
.mx_AuthPage .mx_AuthFooter {
  color: var(--color-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mx_AuthPage .mx_AuthFooter a {
  color: var(--color-muted) !important;
}

.mx_AuthPage .mx_AuthFooter a[href*="matrix.org"],
.mx_AuthPage .mx_AuthFooter a[href*="element.io"],
.mx_AuthPage .mx_AuthFooter a[href*="github.com"] {
  display: none !important;
}

/* Welcome page headings */
.mx_Welcome h1, .mx_Welcome h2 {
  color: var(--color-primary) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────
   Pre-Login: Code-Rain (randomisierte Spalten-Geschwindigkeiten)
   7 Single-Column-SVG-Layers, jede mit eigener Tile-Hoehe + Scroll-
   Distance pro Cycle → unterschiedliche Visual-Speeds.
   CSS-only, CSP-safe, prefers-reduced-motion beachtet.
   ───────────────────────────────────────────── */

.mx_AuthPage,
.mx_WelcomePage,
.mx_Welcome,
.mx_HomePage_body {
  position: relative !important;
  isolation: isolate !important;
  background: linear-gradient(160deg, #0F0F10 0%, #1A1A1C 60%, #1E1A16 100%) !important;
  font-family: var(--font-sans) !important;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 1rem 5rem !important;   /* bottom-padding reserviert Platz fuer fixed footer */
}

/* mx_HomePage = Element's AutoHideScrollbar-wrapper im logged-in state.
   NUR isolation + positions, KEIN flex-layout (sonst broken scroll). */
.mx_HomePage {
  position: relative !important;
  isolation: isolate !important;
  background: linear-gradient(160deg, #0F0F10 0%, #1A1A1C 60%, #1E1A16 100%) !important;
}

.mx_AuthPage::before,
.mx_WelcomePage::before,
.mx_Welcome::before,
.mx_HomePage::before,
.mx_HomePage_body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* 14 Spalten: variable Breiten (80/100/120px), variable Hoehen,
     links-dichter (10/14 im 0–50% Bereich), keine grossen Luecken. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='580' viewBox='0 0 80 580'><text x='40' y='20' font-family='ui-monospace,monospace' font-size='11' fill='%23D4A574' opacity='0.16' letter-spacing='2' transform='rotate(90,40,20)'>const await /_matrix/client/v3 200 OK olm megolm keys</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='620' viewBox='0 0 100 620'><text x='50' y='20' font-family='ui-monospace,monospace' font-size='13' fill='%23D4A574' opacity='0.22' letter-spacing='2' transform='rotate(90,50,20)'>lambda stack forge hetzner e2ee synapse v1.104 tls1.3</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='660' viewBox='0 0 120 660'><text x='60' y='20' font-family='ui-monospace,monospace' font-size='15' fill='%23D4A574' opacity='0.28' letter-spacing='2' transform='rotate(90,60,20)'>element-web v1.11 signal bridge ok discord whatsapp</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='700' viewBox='0 0 80 700'><text x='40' y='20' font-family='ui-monospace,monospace' font-size='11' fill='%23D4A574' opacity='0.16' letter-spacing='2' transform='rotate(90,40,20)'>systemctl restart nginx reload synapse healthy coturn</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='640' viewBox='0 0 100 640'><text x='50' y='20' font-family='ui-monospace,monospace' font-size='13' fill='%23D4A574' opacity='0.22' letter-spacing='2' transform='rotate(90,50,20)'>forge equiv delta sum arrow matrix encrypt olm megolm</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='620' viewBox='0 0 120 620'><text x='60' y='20' font-family='ui-monospace,monospace' font-size='15' fill='%23D4A574' opacity='0.28' letter-spacing='2' transform='rotate(90,60,20)'>GET versions 200 POST r0/login 200 WebSocket sync ok</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='680' viewBox='0 0 80 680'><text x='40' y='20' font-family='ui-monospace,monospace' font-size='11' fill='%23D4A574' opacity='0.16' letter-spacing='2' transform='rotate(90,40,20)'>rustc release synapse restart signing keys megolm 200</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='720' viewBox='0 0 100 720'><text x='50' y='20' font-family='ui-monospace,monospace' font-size='13' fill='%23D4A574' opacity='0.22' letter-spacing='2' transform='rotate(90,50,20)'>room.create@stack olm send_encrypted device_keys ok</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='600' viewBox='0 0 120 600'><text x='60' y='20' font-family='ui-monospace,monospace' font-size='15' fill='%23D4A574' opacity='0.28' letter-spacing='2' transform='rotate(90,60,20)'>signal link sms verify phone matrix-sync encrypted</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='660' viewBox='0 0 80 660'><text x='40' y='20' font-family='ui-monospace,monospace' font-size='11' fill='%23D4A574' opacity='0.16' letter-spacing='2' transform='rotate(90,40,20)'>qdrant vector llama rag stackschmiede deploy docker</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='750' viewBox='0 0 100 750'><text x='50' y='20' font-family='ui-monospace,monospace' font-size='13' fill='%23D4A574' opacity='0.22' letter-spacing='2' transform='rotate(90,50,20)'>fn main async await tokio axum sqlx postgres redis</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='640' viewBox='0 0 120 640'><text x='60' y='20' font-family='ui-monospace,monospace' font-size='15' fill='%23D4A574' opacity='0.28' letter-spacing='2' transform='rotate(90,60,20)'>TypeScript Rust Go Python Dart Flutter React Astro</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='690' viewBox='0 0 80 690'><text x='40' y='20' font-family='ui-monospace,monospace' font-size='11' fill='%23D4A574' opacity='0.16' letter-spacing='2' transform='rotate(90,40,20)'>hetzner CX22 4GB 2GB swap 40GB nvme de-falkenstein</text></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='610' viewBox='0 0 100 610'><text x='50' y='20' font-family='ui-monospace,monospace' font-size='13' fill='%23D4A574' opacity='0.22' letter-spacing='2' transform='rotate(90,50,20)'>dsgvo TLS ipv4 ipv6 HSTS ssl-hardening backup nightly</text></svg>");
  background-repeat: repeat-y;
  background-size:
     80px 580px,
    100px 620px,
    120px 660px,
     80px 700px,
    100px 640px,
    120px 620px,
     80px 680px,
    100px 720px,
    120px 600px,
     80px 660px,
    100px 750px,
    120px 640px,
     80px 690px,
    100px 610px;
  background-position:
     3% 0,
     7% 0,
    11% 0,
    15% 0,
    19% 0,
    24% 0,
    29% 0,
    34% 0,
    41% 0,
    48% 0,
    58% 0,
    69% 0,
    82% 0,
    94% 0;
  animation: mx-rain-randomized 14s linear infinite;
}

@keyframes mx-rain-randomized {
  from {
    background-position:
       3% 0,  7% 0, 11% 0, 15% 0, 19% 0, 24% 0, 29% 0,
      34% 0, 41% 0, 48% 0, 58% 0, 69% 0, 82% 0, 94% 0;
  }
  to {
    background-position:
       3% 1160px,   /* col01: 2 tiles of 580 — medium   */
       7% 620px,    /* col02: 1 tile         — slow     */
      11% 1980px,   /* col03: 3 tiles of 660 — fast     */
      15% 2800px,   /* col04: 4 tiles of 700 — fastest  */
      19% 1280px,   /* col05: 2 tiles of 640 — medium   */
      24% 620px,    /* col06: 1 tile  of 620 — slow     */
      29% 1360px,   /* col07: 2 tiles of 680 — medium   */
      34% 2160px,   /* col08: 3 tiles of 720 — fast     */
      41% 600px,    /* col09: 1 tile  of 600 — slowest  */
      48% 2640px,   /* col10: 4 tiles of 660 — fastest  */
      58% 1500px,   /* col11: 2 tiles of 750 — medium   */
      69% 1920px,   /* col12: 3 tiles of 640 — fast     */
      82% 690px,    /* col13: 1 tile  of 690 — slow     */
      94% 1220px;   /* col14: 2 tiles of 610 — medium   */
  }
}

.mx_AuthPage::after,
.mx_WelcomePage::after,
.mx_Welcome::after,
.mx_HomePage::after,
.mx_HomePage_body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(15,15,16,0.78) 80%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, repeat;
  background-size: cover, 160px 160px;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .mx_AuthPage::before,
  .mx_WelcomePage::before,
  .mx_Welcome::before,
  .mx_HomePage::before,
  .mx_HomePage_body::before { animation: none; }
}


/* ─────────────────────────────────────────────
   Welcome-Screen Rebrand (mx_Parent = Welcome-Card)
   Selektoren ohne .mx_WelcomePage-Prefix (mx_Parent ist Welcome-exklusiv)
   ───────────────────────────────────────────── */

/* Card-Container: weiss → Stackschmiede-Surface */
.mx_Parent {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card), 0 0 40px rgba(212, 165, 116, 0.10) !important;
  color: var(--color-fg) !important;
  max-width: 480px !important;
  padding: 2.5rem 2rem !important;
  backdrop-filter: none !important;
}

.mx_Parent .mx_Logo {
  height: 64px !important;
  width: auto !important;
  margin: 0 auto 1rem !important;
}

/* Headline: Original "Willkommen bei Element" kollabieren, eigenen Text setzen */
.mx_Parent .mx_Header_title {
  color: var(--color-fg) !important;
  font-family: var(--font-sans) !important;
  font-weight: 640 !important;
  letter-spacing: -0.025em !important;
  font-size: 0 !important;
  line-height: 1.2 !important;
  margin: 0.5rem 0 !important;
}
.mx_Parent .mx_Header_title::before {
  content: "Willkommen bei Stackschmiede";
  font-size: 28px;
  font-weight: 640;
  color: var(--color-fg);
  letter-spacing: -0.025em;
}
.mx_Parent .mx_Header_title::after {
  content: "." !important;
  font-size: 28px;
  color: var(--color-primary) !important;
}

.mx_Parent .mx_Header_subtitle {
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0.5rem 0 1.25rem !important;
}
.mx_Parent .mx_Header_subtitle img {
  opacity: 0.55;
  vertical-align: middle;
}

/* Buttons */
.mx_Parent .mx_ButtonSignIn {
  background-color: var(--color-primary) !important;
  color: var(--color-bg) !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-md) !important;
  letter-spacing: -0.01em;
}
.mx_Parent .mx_ButtonSignIn:hover {
  background-color: var(--color-primary-soft) !important;
}

.mx_Parent .mx_ButtonCreateAccount {
  background-color: transparent !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-md) !important;
  letter-spacing: -0.01em;
}
.mx_Parent .mx_ButtonCreateAccount:hover {
  background-color: rgba(107, 142, 127, 0.15) !important;
}

.mx_Parent .mx_SecondaryButton {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-fg) !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-md) !important;
}
.mx_Parent .mx_SecondaryButton:hover {
  background-color: var(--color-surface-2) !important;
}

.mx_Parent .mx_Button_iconSignIn {
  filter: brightness(0) saturate(100%) !important;
}
.mx_Parent .mx_Button_iconCreateAccount {
  filter: brightness(0) saturate(100%) invert(56%) sepia(20%) saturate(450%) hue-rotate(88deg) brightness(85%) !important;
}


/* ─────────────────────────────────────────────
   Stackschmiede-Footer (unter der Welcome-Card)
   Markup in welcome.html: <div class="mx_StackFooter">…</div>
   ───────────────────────────────────────────── */

.mx_StackFooter {
  margin: 2rem auto 1rem;
  max-width: 520px;
  padding: 1.25rem 1.25rem;
  text-align: center;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  background: rgba(15, 15, 16, 0.45);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  z-index: 1;
}

.mx_StackFooter_eyebrow {
  color: var(--color-primary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  margin-bottom: 0.6rem;
  opacity: 0.9;
}

.mx_StackFooter_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin: 0.35rem 0;
  flex-wrap: wrap;
}

.mx_StackFooter_nav a {
  color: var(--color-fg) !important;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-muted);
  padding-bottom: 1px;
  transition: color 150ms ease, border-color 150ms ease;
}

.mx_StackFooter_nav a:hover {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary);
}

.mx_StackFooter_nav span {
  color: var(--color-muted);
  opacity: 0.5;
  user-select: none;
}

.mx_StackFooter_copyright {
  color: var(--color-muted);
  font-size: 10.5px;
  margin-top: 0.6rem;
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0.02em;
}


/* ─────────────────────────────────────────────
   Auth-Screen Deep-Brand (Login-Form Panels)
   Element's aktuelle Split-Layout hat weisse Child-Panels im Modal
   → aggressive Override damit alle inneren Auth-Container dunkel sind.
   ───────────────────────────────────────────── */

/* Alle inneren Wrapper im Modal transparent machen → Modal-Surface scheint durch */
.mx_AuthPage .mx_AuthPage_modal > *,
.mx_AuthPage .mx_AuthPage_modalBlock,
.mx_AuthPage .mx_AuthPage_modal_title,
.mx_AuthPage .mx_AuthPage_modal_content,
.mx_AuthPage .mx_AuthPage_modal_inner,
.mx_AuthPage .mx_AuthHeader,
.mx_AuthPage .mx_AuthBody,
.mx_AuthPage .mx_Login,
.mx_AuthPage .mx_Login_form,
.mx_AuthPage .mx_Register,
.mx_AuthPage .mx_ForgotPassword,
.mx_AuthPage form,
.mx_AuthPage fieldset {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-fg) !important;
  border-color: var(--color-border) !important;
}

/* Headings: "Anmelden", "Konto erstellen", etc. */
.mx_AuthPage h1,
.mx_AuthPage h2,
.mx_AuthPage h3,
.mx_AuthPage .mx_AuthBody_sectionTitle {
  color: var(--color-fg) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.025em;
  font-weight: 640;
}

/* Kleines "Anmelden mit"-Label (nicht Heading!) */
.mx_AuthPage .mx_Login_type_label {
  color: var(--color-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0.35rem !important;
}

/* Field-Labels (floating labels in Inputs) — match Input-Background */
.mx_AuthPage label,
.mx_AuthPage .mx_Field label,
.mx_AuthPage .mx_Field_label {
  color: var(--color-muted) !important;
  background-color: var(--color-bg) !important;
  padding: 0 0.3rem;
}

/* Allgemeiner Text in AuthBody (Descriptions, Hints) */
.mx_AuthPage .mx_AuthBody_text,
.mx_AuthPage p,
.mx_AuthPage span {
  color: var(--color-fg);
}
.mx_AuthPage .mx_AuthBody_text--muted,
.mx_AuthPage .mx_AuthBody_hint {
  color: var(--color-muted) !important;
}

/* Dropdowns / Selects — "Anmelden mit" → Benutzername etc. */
.mx_AuthPage select,
.mx_AuthPage .mx_Dropdown,
.mx_AuthPage .mx_Dropdown_input,
.mx_AuthPage .mx_Field_select {
  background: var(--color-bg) !important;
  color: var(--color-fg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
}
.mx_AuthPage .mx_Dropdown_menu,
.mx_AuthPage .mx_Dropdown_option,
.mx_AuthPage .mx_Dropdown_option_highlight {
  background-color: var(--color-surface) !important;
  color: var(--color-fg) !important;
  border-color: var(--color-border) !important;
}
.mx_AuthPage .mx_Dropdown_option:hover {
  background-color: var(--color-surface-2) !important;
}

/* Auth-Logo (links im split-Layout) — unser animiertes /logo.svg erzwingen */
.mx_AuthPage .mx_AuthHeader_logo,
.mx_AuthPage .mx_AuthHeader img,
.mx_AuthPage img[class*="AuthHeader"],
.mx_AuthPage img.mx_Logo {
  content: url("/logo.svg") !important;
  max-height: 72px !important;
  width: auto !important;
  opacity: 1 !important;
}

/* Auth-Footer Language-Picker unten im linken Panel */
.mx_AuthPage .mx_AuthFooter,
.mx_AuthPage .mx_LanguageDropdown,
.mx_AuthPage .mx_LanguageDropdown_option {
  color: var(--color-muted) !important;
  background: transparent !important;
}
.mx_AuthPage .mx_LanguageDropdown {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-bg) !important;
}

/* "Passwort vergessen?" / "Erstelle ein Konto" — Primary Amber */
.mx_AuthPage .mx_AuthBody_changeFlow,
.mx_AuthPage .mx_AuthBody_changeFlow a,
.mx_AuthPage .mx_Login_forgot {
  color: var(--color-primary) !important;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-primary);
}
.mx_AuthPage .mx_AuthBody_changeFlow a:hover,
.mx_AuthPage .mx_Login_forgot:hover {
  color: var(--color-primary-soft) !important;
}

/* "Neu hier?" muted hint next to Create-Account-Link */
.mx_AuthPage .mx_AuthBody_changeFlow {
  color: var(--color-muted) !important;
  border-bottom: none;
}


/* ─────────────────────────────────────────────
   Auth-Layout-Tweaks
   - "Neu hier? Erstelle ein Konto" ausblenden
   - "Passwort vergessen?" unter den Anmelde-Button verschieben (flex order)
   - Logo im linken Panel vertikal + horizontal zentrieren
   ───────────────────────────────────────────── */

/* 1) "Neu hier?"-Zeile komplett ausblenden */
.mx_AuthPage .mx_AuthBody_changeFlow,
.mx_AuthPage .mx_AuthBody_changeFlow_username {
  display: none !important;
}

/* 2) Form-Container als Flex-Column machen, damit order greift */
.mx_AuthPage form,
.mx_AuthPage .mx_Login,
.mx_AuthPage .mx_Login_form,
.mx_AuthPage .mx_AuthBody form {
  display: flex !important;
  flex-direction: column !important;
}

/* 2a) "Passwort vergessen?" nach unten (order 100) */
.mx_AuthPage .mx_Login_forgot,
.mx_AuthPage .mx_AuthBody_forgotPassword,
.mx_AuthPage a.mx_Login_forgot {
  order: 100 !important;
  margin: 0.85rem auto 0 !important;
  text-align: center !important;
  display: block !important;
  width: fit-content;
}

/* 2b) Anmelde-Button vor "Passwort vergessen?" (order 90) */
.mx_AuthPage .mx_Login_submit,
.mx_AuthPage button[type="submit"],
.mx_AuthPage .mx_AccessibleButton_kind_primary {
  order: 90 !important;
}

/* 3+4) Single-Column-Layout statt Split:
   - Modal als flex-column + max-width + viewport-centered
   - Original-Logo im linken Panel ausblenden (wird unsichtbar/leerer Platz)
   - Logo als Pseudo-Element oberhalb der Form (mx_AuthBody::before)
   - Alle Elemente zentriert in der Karte */

.mx_AuthPage_modal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 520px !important;
  max-width: 520px !important;
  min-width: 520px !important;
  flex: 0 0 520px !important;
  margin: 2rem auto !important;
  padding: 2.5rem 2rem !important;
  box-sizing: border-box !important;
}

/* Nur bei kleinen Viewports / mobile: Karte passt sich an */
@media (max-width: 560px) {
  .mx_AuthPage_modal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 1rem auto !important;
    padding: 1.5rem 1.25rem !important;
  }
}

/* Original-Logo-Container (Split-Layout linker Panel) komplett weg */
.mx_AuthPage .mx_AuthHeader,
.mx_AuthPage .mx_AuthPage_modal_title {
  display: none !important;
}

/* Body ueber volle Breite, Flex-Column zum zentrieren */
.mx_AuthPage .mx_AuthBody {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 440px;
  margin: 0 auto;
}

/* Logo als Pseudo-Element oberhalb der Form, zentriert (25% groesser) */
.mx_AuthPage .mx_AuthBody::before {
  content: "";
  display: block;
  width: 90px;
  height: 90px;
  background-image: url("/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto 1.75rem;
}

/* Headings in Form zentriert */
.mx_AuthPage .mx_AuthBody h1,
.mx_AuthPage .mx_AuthBody h2 {
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

/* Inputs volle Breite, aber Login-Type-Row ist flex-row mit auto-dropdown */
.mx_AuthPage .mx_Field {
  width: 100% !important;
  max-width: 100% !important;
}

.mx_AuthPage .mx_Login_type_container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 1rem !important;
}

/* "Anmelden mit"-Dropdown: Box komplett weg (kein Border, kein BG) */
.mx_AuthPage .mx_Login_type_container .mx_Dropdown,
.mx_AuthPage .mx_Login_type_container .mx_Field_select {
  width: auto !important;
  max-width: none !important;
  min-width: 140px !important;
  flex: 0 0 auto !important;
  padding: 0.4rem 0.5rem !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nuklear-Ansatz: ALLES innerhalb mx_Login_type_container zentrieren
   (Element nutzt .mx_Field-Wrapper um Dropdown, Klassenname variiert) */
.mx_AuthPage .mx_Login_type_container .mx_Field,
.mx_AuthPage .mx_Login_type_container .mx_Dropdown,
.mx_AuthPage .mx_Login_type_container [class*="mx_Field"],
.mx_AuthPage .mx_Login_type_container [class*="Dropdown"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Alle Descendants (Text, Input, Div, Span, alles) auch zentriert */
.mx_AuthPage .mx_Login_type_container .mx_Field *,
.mx_AuthPage .mx_Login_type_container .mx_Dropdown *,
.mx_AuthPage .mx_Login_type_container [class*="mx_Field"] *,
.mx_AuthPage .mx_Login_type_container [class*="Dropdown"] *,
.mx_AuthPage .mx_Login_type_container input,
.mx_AuthPage .mx_Login_type_container select,
.mx_AuthPage .mx_Login_type_container div,
.mx_AuthPage .mx_Login_type_container span {
  text-align: center !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Label "ANMELDEN MIT" links bleibt (wird vom type_container space-between gesteuert) */
.mx_AuthPage .mx_Login_type_container > .mx_Login_type_label {
  text-align: left !important;
  justify-content: flex-start !important;
  flex: 0 0 auto;
}

/* Chevron direkt neben Text */
.mx_AuthPage .mx_Login_type_container .mx_Dropdown_arrow {
  position: relative !important;
  right: auto !important;
  margin-left: 0.4rem;
  flex: 0 0 auto;
}

/* Submit-Button zentriert */
.mx_AuthPage .mx_Login_submit {
  margin: 1.25rem auto 0 !important;
  width: 100% !important;
  padding: 0.75rem 1.5rem !important;
}

/* Deutsch-Sprachdropdown im Footer zentrieren */
.mx_AuthPage .mx_AuthFooter,
.mx_AuthPage .mx_LanguageDropdown {
  margin: 1.5rem auto 0 !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  width: auto !important;
  max-width: 200px;
}

/* Eigener Footer — fest am unteren Bildschirmrand */
.mx_AuthPage_modal::after {
  content: "© 2026 Stackschmiede · Privater Matrix-Server · DSGVO-konform";
  position: fixed !important;
  bottom: 1.25rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5;
  display: block;
  text-align: center;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(15, 15, 16, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.85;
  white-space: nowrap;
}
/* ─────────────────────────────────────────────
   COMPLETE-SECURITY / SETUP-ENCRYPTION FULL-PAGE OVERLAY
   Element rendert post-login crypto-setup als full-page mx_AuthPage,
   NICHT als mx_Dialog. Container-chain:
     .mx_AuthPage > .mx_AuthPage_modal > .mx_AuthPage_modalContent
       > .mx_Dialog_border._glass_<hash>     (Compound Glass card)
         > .mx_CompleteSecurityBody
           > .mx_EncryptionCard.mx_SetupEncryptionBody
   Compound Glass deklariert --cpd-color-bg-canvas-default lokal,
   :root-override greift dort nicht → scope-override + bg-direct nötig.
   ───────────────────────────────────────────── */

/* Compound CSS-vars im AuthPage-scope umlenken (höhere specificity als :root) */
.mx_AuthPage,
.mx_AuthPage .mx_Dialog_border,
.mx_AuthPage [class*="_glass_"],
.mx_AuthPage .mx_CompleteSecurityBody,
.mx_AuthPage .mx_EncryptionCard,
.mx_AuthPage .mx_SetupEncryptionBody {
  --cpd-color-bg-canvas-default: var(--color-surface) !important;
  --cpd-color-bg-canvas-default-level-1: var(--color-surface-2) !important;
  --cpd-color-bg-subtle-primary: var(--color-surface-2) !important;
  --cpd-color-bg-subtle-secondary: var(--color-surface-2) !important;
  --cpd-color-text-primary: var(--color-fg) !important;
  --cpd-color-text-secondary: var(--color-muted) !important;
  --cpd-color-text-action-primary: var(--color-primary) !important;
  --cpd-color-icon-primary: var(--color-fg) !important;
  --cpd-color-icon-secondary: var(--color-muted) !important;
  --cpd-color-border-default: var(--color-border) !important;
}

/* Glass-card wrapper (weisser container) → dark surface
   Compound Glass setzt inline-size: 100% → ohne max-width nimmt die card
   die volle modalContent-breite (= ganzes viewport). Constrain hier. */
.mx_AuthPage .mx_Dialog_border,
.mx_AuthPage [class*="_glass_"] {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card), 0 0 40px rgba(212, 165, 116, 0.10) !important;
  color: var(--color-fg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: min(92vw, 520px) !important;
  inline-size: min(92vw, 520px) !important;
  width: min(92vw, 520px) !important;
  padding: 2.25rem 2rem !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Inner body-container (CompleteSecurity + EncryptionCard nested) */
.mx_AuthPage .mx_CompleteSecurityBody,
.mx_AuthPage .mx_CompleteSecurity_body,
.mx_AuthPage .mx_EncryptionCard,
.mx_AuthPage .mx_EncryptionCard_noBorder,
.mx_AuthPage .mx_SetupEncryptionBody,
.mx_AuthPage .mx_EncryptionCard_header,
.mx_AuthPage .mx_EncryptionCard_buttons {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-fg) !important;
  border: none !important;
}

/* Headlines (h1/h2 in CompleteSecurity + EncryptionCard) — Compound hashed h2 */
.mx_AuthPage .mx_CompleteSecurity_header,
.mx_AuthPage .mx_EncryptionCard_header h2,
.mx_AuthPage .mx_EncryptionCard h2,
.mx_AuthPage [class*="_typography_"][class*="heading"] {
  color: var(--color-fg) !important;
  background: transparent !important;
}

/* Body-text + paragraphs */
.mx_AuthPage .mx_CompleteSecurity_body p,
.mx_AuthPage .mx_EncryptionCard p,
.mx_AuthPage .mx_EncryptionCard span,
.mx_AuthPage .mx_SetupEncryptionBody p,
.mx_AuthPage .mx_SetupEncryptionBody span,
.mx_AuthPage [class*="_content_"] {
  color: var(--color-fg) !important;
  background: transparent !important;
}

/* Lock-icon container im EncryptionCard (graue square mit lock) */
.mx_AuthPage .mx_EncryptionCard_header svg,
.mx_AuthPage .mx_EncryptionCard [class*="iconCircle"],
.mx_AuthPage .mx_EncryptionCard [class*="IconCircle"] {
  background: var(--color-surface-2) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 50% !important;
}

/* Close-button (X) rechts oben */
.mx_AuthPage .mx_Dialog_border [aria-label*="lose"],
.mx_AuthPage .mx_Dialog_border [aria-label*="chlie"],
.mx_AuthPage .mx_CompleteSecurityBody button[aria-label*="lose"],
.mx_AuthPage button[class*="_button_"][aria-label*="lose"] {
  color: var(--color-muted) !important;
  background: transparent !important;
  border: none !important;
}

/* Compound-Buttons im EncryptionCard
   Default: kein border, kein bg (link/tertiary look).
   Primary: bernstein bg.  Secondary (data-kind="secondary"): outline.
   "Abmelden" ist tertiary/link → bleibt undecorated.                 */
.mx_AuthPage .mx_EncryptionCard_buttons button,
.mx_AuthPage .mx_EncryptionCard_buttons button[class*="_button_"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-fg) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500;
}

.mx_AuthPage .mx_EncryptionCard_buttons button[data-kind="primary"],
.mx_AuthPage .mx_EncryptionCard_buttons button[class*="_button_"][class*="primary" i]:not([class*="link" i]):not([class*="tertiary" i]) {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border: none !important;
  font-weight: 600;
}

.mx_AuthPage .mx_EncryptionCard_buttons button[data-kind="secondary"],
.mx_AuthPage .mx_EncryptionCard_buttons button[class*="_button_"][class*="secondary" i] {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-fg) !important;
  font-weight: 600;
}

.mx_AuthPage .mx_EncryptionCard_buttons button[data-kind="primary"]:hover,
.mx_AuthPage .mx_EncryptionCard_buttons button[class*="_button_"][class*="primary" i]:hover {
  background: var(--color-primary-soft, #E8C493) !important;
}

.mx_AuthPage .mx_EncryptionCard_buttons button[data-kind="secondary"]:hover {
  background: rgba(212, 165, 116, 0.08) !important;
  border-color: var(--color-primary) !important;
}

/* Inline-links in CompleteSecurity (z.B. "Mehr erfahren", "Abmelden") */
.mx_AuthPage .mx_CompleteSecurityBody a,
.mx_AuthPage .mx_EncryptionCard a,
.mx_AuthPage .mx_SetupEncryptionBody a,
.mx_AuthPage .mx_CompleteSecurityBody [class*="link"]:not(button),
.mx_AuthPage .mx_EncryptionCard [class*="_link_"] {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted var(--color-primary) !important;
  background: transparent !important;
}

.mx_AuthPage .mx_CompleteSecurityBody a:hover,
.mx_AuthPage .mx_EncryptionCard a:hover {
  color: var(--color-primary-soft, #E8C493) !important;
}

/* Outer mx_AuthPage_modal hat login-form-style (520px+border+padding).
   Bei verification flow: outer transparent, glass-card als einzige card. */
.mx_AuthPage .mx_AuthPage_modal:has(.mx_CompleteSecurityBody),
.mx_AuthPage .mx_AuthPage_modal:has(.mx_EncryptionCard),
.mx_AuthPage .mx_AuthPage_modal:has(.mx_SetupEncryptionBody) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 auto !important;
}

/* mx_AuthPage_modalContent als transparenter wrapper — card constrained selbst */
.mx_AuthPage .mx_AuthPage_modalContent:has(.mx_CompleteSecurityBody) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Inhalts-stack innerhalb glass-card: spacing zwischen icon, header, body, buttons */
.mx_AuthPage .mx_CompleteSecurityBody {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

.mx_AuthPage .mx_EncryptionCard_buttons,
.mx_AuthPage [class*="_actions_"],
.mx_AuthPage .mx_EncryptionCard [class*="_buttonGroup_"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0.5rem !important;
}

.mx_AuthPage .mx_EncryptionCard_buttons button,
.mx_AuthPage .mx_EncryptionCard [class*="_actions_"] > button {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.75rem 1.25rem !important;
}

/* glass-card erzwingen dass children innen bleiben */
.mx_AuthPage .mx_Dialog_border,
.mx_AuthPage [class*="_glass_"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

/* ─────────────────────────────────────────────
   USER SETTINGS DIALOG (post-login Profile/Settings)
   Element 1.12+ rendert das settings dialog als mx_SettingsDialog
   (legacy mx_UserSettingsDialog existiert nicht mehr).
   Compound-glass card limitiert die breite via hashed class —
   override am wrapper + attribute-selector für build-resilience.
   ───────────────────────────────────────────── */
.mx_Dialog_wrapper:has(.mx_SettingsDialog) .mx_Dialog,
.mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog {
  max-width: min(95vw, 1200px) !important;
  width: min(95vw, 1200px) !important;
  inline-size: min(95vw, 1200px) !important;
  max-height: 90vh !important;
  height: 90vh !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Glass-card im settings-dialog: full-width im konstrainten dialog */
.mx_Dialog_wrapper:has(.mx_SettingsDialog) [class*="_glass_"],
.mx_Dialog_wrapper:has(.mx_SettingsDialog) .mx_Dialog_border,
.mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) [class*="_glass_"],
.mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog_border {
  max-width: 100% !important;
  width: 100% !important;
  inline-size: 100% !important;
  max-height: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mx_SettingsDialog,
.mx_SpaceSettingsDialog {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.mx_SettingsDialog .mx_TabbedView,
.mx_SpaceSettingsDialog .mx_TabbedView {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

/* ─────────────────────────────────────────────
   VERIFICATION DIALOGS (post-login)
   Klassen: mx_IncomingSasDialog, mx_VerifyEMailDialog,
   bzw. mx_EncryptionCard im mx_Dialog_wrapper (nicht mx_AuthPage).
   Buttons werden ausserhalb der card gerendert wenn der
   button-container kein padding-inline hat.
   ───────────────────────────────────────────── */
.mx_Dialog_wrapper:has(.mx_IncomingSasDialog) .mx_Dialog,
.mx_Dialog_wrapper:has(.mx_VerifyEMailDialog) .mx_Dialog {
  max-width: min(92vw, 540px) !important;
  width: min(92vw, 540px) !important;
  inline-size: min(92vw, 540px) !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

.mx_Dialog_wrapper:has(.mx_IncomingSasDialog) [class*="_glass_"],
.mx_Dialog_wrapper:has(.mx_VerifyEMailDialog) [class*="_glass_"] {
  width: 100% !important;
  max-width: 100% !important;
  inline-size: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.mx_IncomingSasDialog,
.mx_VerifyEMailDialog {
  padding: 0.5rem 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* Button-row in verify dialogs: bleibt in card */
.mx_IncomingSasDialog .mx_Dialog_buttons,
.mx_IncomingSasDialog [class*="_actions_"],
.mx_IncomingSasDialog [class*="_buttonGroup_"],
.mx_VerifyEMailDialog .mx_Dialog_buttons,
.mx_VerifyEMailDialog [class*="_actions_"],
.mx_VerifyEMailDialog [class*="_buttonGroup_"] {
  padding: 0.5rem 0 0 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  justify-content: flex-end !important;
}

.mx_IncomingSasDialog .mx_Dialog_buttons button,
.mx_VerifyEMailDialog .mx_Dialog_buttons button,
.mx_IncomingSasDialog [class*="_actions_"] > button,
.mx_VerifyEMailDialog [class*="_actions_"] > button {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}