/*  ============================================================================
    SG ProView — Scheunengut Enterprise Brand Stylesheet
    ============================================================================
    Spiegelt das Design-System von apps.scheunengut.de auf Chatwoot.
    Wird via Caddy `replace-response` vor </head> in jede HTML-Antwort injiziert.
    ============================================================================ */

/* --------------------------------------------------------------------------
   1. Schriftarten — Glypha (Display) + Univers (Body), aus dem Shopify CDN
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "SG Glypha";
  src: url("https://cdn.shopify.com/s/files/1/0629/7554/1341/files/Glypha-Black.woff2?v=1763043375") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SG Univers";
  src: url("https://cdn.shopify.com/s/files/1/0629/7554/1341/files/UniversLTStd.woff2?v=1763043375") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design Tokens — exakt wie auf apps.scheunengut.de
   -------------------------------------------------------------------------- */
:root {
  /* Marken-Kernfarben */
  --sg-forest:        #09180b;
  --sg-forest-soft:   #17311c;
  --sg-leaf:          #2f5d50;
  --sg-gold:          #c7a77e;
  --sg-amber:         #e0a100;
  --sg-amber-hover:   #e6b433;
  --sg-terracotta:    #c16452;
  --sg-red:           #b84a3a;

  /* Flächen */
  --sg-cream:         #fbfaf7;
  --sg-sand-soft:     #f4efe7;
  --sg-sand:          #e9e2d6;
  --sg-panel:         #ffffff;
  --sg-line:          #e3dbce;

  /* Typografie */
  --sg-ink:           #362f2f;
  --sg-body:          #5c5c5c;
  --sg-muted:         #746f68;

  /* Statusfarben */
  --sg-tone-success:        #2e7d32;
  --sg-tone-success-soft:   #e7f3e8;
  --sg-tone-warning:        #b87a14;
  --sg-tone-warning-soft:   #fff5e0;
  --sg-tone-danger:         #b3261e;
  --sg-tone-danger-soft:    #fde8e6;
  --sg-tone-info:           #1f5d7a;
  --sg-tone-info-soft:      #e3f1f7;

  /* Maße */
  --sg-radius-xs: 4px;
  --sg-radius-sm: 6px;
  --sg-radius:    8px;
  --sg-radius-md: 8px;
  --sg-radius-lg: 12px;
  --sg-radius-xl: 18px;
  --sg-radius-pill: 999px;

  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 24px;
  --sg-space-6: 32px;
  --sg-space-8: 48px;

  /* Schatten */
  --sg-elev-1: 0 1px 2px rgba(9,24,11,0.06), 0 1px 1px rgba(9,24,11,0.04);
  --sg-elev-2: 0 4px 14px rgba(9,24,11,0.08), 0 2px 4px rgba(9,24,11,0.04);
  --sg-elev-3: 0 12px 32px rgba(9,24,11,0.12), 0 4px 8px rgba(9,24,11,0.06);
  --sg-shadow-soft: 0 8px 28px rgba(9, 24, 11, 0.06);
  --sg-shadow:      0 18px 48px rgba(9, 24, 11, 0.08);

  /* Animation */
  --sg-dur-fast: 120ms;
  --sg-dur-base: 180ms;
  --sg-dur-slow: 320ms;
  --sg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sg-focus-ring: 0 0 0 3px rgba(199,167,126,0.45);

  /* Chatwoot-Variablen überschreiben — primary color, accent etc. */
  --color-woot:        #09180b;          /* SG Forest als Primary */
  --w-100: #09180b;
  --w-200: #0d1f10;
  --w-300: #122815;
  --w-400: #17311c;
  --w-500: #1c3a23;
  --w-600: #29563a;
  --w-700: #2f5d50;
  --w-800: #436b5d;
  --w-900: #6a8a7f;

  --bg-light:    var(--sg-cream);
  --color-body:  var(--sg-ink);
  --color-heading: var(--sg-forest);
  --color-secondary: var(--sg-gold);
}

/* --------------------------------------------------------------------------
   3. Globale Defaults — Schrift, Hintergrund, Anti-Aliasing
   -------------------------------------------------------------------------- */
html,
body {
  font-family: "SG Univers", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--sg-ink);
}

body {
  background:
    linear-gradient(180deg, rgba(233,226,214,0.52), rgba(255,255,255,0) 320px),
    var(--sg-cream) !important;
}

h1, h2, h3, h4 {
  font-family: "SG Glypha", "SG Univers", Georgia, serif !important;
  color: var(--sg-forest) !important;
  letter-spacing: 0;
}

a {
  color: var(--sg-leaf);
}

a:hover {
  color: var(--sg-forest);
}

/* --------------------------------------------------------------------------
   4. Login / Sign-up Page (Rails view rendered at /auth/sign_in)
   --------------------------------------------------------------------------
   Chatwoot hüllt die Login-Form in `.app-wrapper > .auth-wrap`. Wir
   restylen das komplett zur SG-Login-Optik, mit Story-Sidebar, Logo-
   Lockup und großer Anrede — analog apps.scheunengut.de.
   -------------------------------------------------------------------------- */
.app-wrapper.app-wrapper--auth,
.auth-wrap {
  background:
    radial-gradient(circle at 78% 12%, rgba(199,167,126,0.18), transparent 38%),
    radial-gradient(circle at 12% 88%, rgba(47,93,80,0.10), transparent 42%),
    linear-gradient(135deg, var(--sg-cream) 0%, var(--sg-sand-soft) 100%) !important;
  min-height: 100vh;
  padding: 32px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-wrap > .row,
.auth-wrap > .columns,
.auth-wrap > .login,
.auth-wrap > .signup,
.auth-wrap > .reset-password,
.auth-wrap > .confirmation--email {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow);
  overflow: hidden;
  position: relative;
}

/* Großes Markenpanel oben — mit Logo + Eyebrow + Headline */
.auth-wrap > .row::before,
.auth-wrap > .columns::before,
.auth-wrap > .login::before,
.auth-wrap > .signup::before,
.auth-wrap > .reset-password::before,
.auth-wrap > .confirmation--email::before {
  content: "Scheunengut · Customer Service";
  display: block;
  font-family: "SG Univers", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sg-gold);
  padding: 28px 36px 0;
  background:
    radial-gradient(circle at 86% 18%, rgba(199,167,126,0.20), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, var(--sg-sand-soft) 100%);
}

.auth-wrap > .row::after,
.auth-wrap > .columns::after,
.auth-wrap > .login::after,
.auth-wrap > .signup::after,
.auth-wrap > .reset-password::after,
.auth-wrap > .confirmation--email::after {
  content: "Enterprise Customer Operations · 2FA-geschützt · auditiert · datenschutzkonform";
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sg-muted);
  padding: 18px 36px 24px;
  border-top: 1px solid var(--sg-line);
  background: var(--sg-sand-soft);
  text-align: center;
}

/* Standard-Logo durch SG-Logo ersetzen */
.auth-wrap img,
.app-wrapper--auth img.brand-logo,
.column.text-center img,
img[alt="logo"] {
  content: url("/sg-proview/sg-logo.png") !important;
  width: 132px !important;
  height: auto !important;
  margin: 22px auto 12px !important;
  display: block !important;
  filter: none !important;
}

/* Login-Formular Container */
.app-wrapper--auth .login-box,
.app-wrapper--auth .signup-box,
.auth-wrap .login-box,
.auth-wrap .signup-box,
.auth-wrap form,
.auth-wrap > .login > form,
.auth-wrap > .signup > form,
.auth-wrap > .reset-password > form,
.auth-wrap .row.column.medium-6,
.auth-wrap .row.column.medium-12 {
  padding: 28px 56px 36px !important;
  background: transparent !important;
}

/* Headlines */
.auth-wrap h1,
.auth-wrap h2,
.auth-wrap h3,
.auth-wrap .login h2,
.auth-wrap .signup h2,
.auth-wrap .reset-password h2 {
  font-family: "SG Glypha", "SG Univers", Georgia, serif !important;
  color: var(--sg-forest) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.04 !important;
  text-transform: uppercase;
  margin: 8px 0 18px !important;
  font-weight: 900;
}

.auth-wrap h2 + p,
.auth-wrap p {
  color: var(--sg-body);
  font-size: 15px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   5. Inputs / Form Controls — überall (Login, Sidebar, Modale)
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
.multiselect__tags,
.multiselect__input {
  border: 1px solid var(--sg-line) !important;
  border-radius: var(--sg-radius) !important;
  background: var(--sg-panel) !important;
  color: var(--sg-ink) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  padding: 10px 12px !important;
  transition: border-color var(--sg-dur-fast) var(--sg-ease-out),
              box-shadow var(--sg-dur-fast) var(--sg-ease-out);
}

input:focus,
textarea:focus,
select:focus,
.multiselect__tags:focus-within {
  outline: none !important;
  border-color: var(--sg-gold) !important;
  box-shadow: var(--sg-focus-ring) !important;
}

label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-muted);
}

/* --------------------------------------------------------------------------
   6. Buttons — Primary = SG Forest, Hover = darker; Secondary = sand
   -------------------------------------------------------------------------- */
.button,
button.button,
button.button.large,
.button.success,
.button.button--primary,
input[type="submit"],
.woot-button,
.woot-button--primary {
  background: var(--sg-forest) !important;
  border: 1px solid var(--sg-forest) !important;
  color: var(--sg-cream) !important;
  border-radius: var(--sg-radius) !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: 0.02em;
  padding: 11px 22px !important;
  min-height: 42px;
  text-transform: none !important;
  box-shadow: var(--sg-elev-1);
  transition: background var(--sg-dur-fast) var(--sg-ease-out),
              transform var(--sg-dur-fast) var(--sg-ease-out);
}

.button:hover,
button.button:hover,
.button.button--primary:hover,
input[type="submit"]:hover,
.woot-button:hover {
  background: var(--sg-forest-soft) !important;
  border-color: var(--sg-forest-soft) !important;
  color: var(--sg-cream) !important;
  transform: translateY(-1px);
  box-shadow: var(--sg-elev-2);
}

.button.hollow,
.button--secondary,
.woot-button--secondary,
.button.clear {
  background: var(--sg-panel) !important;
  border: 1px solid var(--sg-line) !important;
  color: var(--sg-forest) !important;
}

.button.hollow:hover,
.button--secondary:hover {
  border-color: var(--sg-forest) !important;
  background: var(--sg-sand-soft) !important;
}

.button.alert,
.button--danger,
.woot-button--danger {
  background: var(--sg-tone-danger) !important;
  border-color: var(--sg-tone-danger) !important;
}

/* --------------------------------------------------------------------------
   7. Dashboard — Sidebar (left rail), Header, Conversation Cards
   -------------------------------------------------------------------------- */
.app-wrapper {
  background: var(--sg-cream) !important;
}

.app-sidebar,
.sidebar,
.layout--with-sidebar > .sidebar {
  background: var(--sg-forest) !important;
  border-right: 1px solid var(--sg-forest-soft);
  color: var(--sg-cream) !important;
}

.app-sidebar a,
.app-sidebar .menu-item,
.sidebar a,
.sidebar .menu-link {
  color: var(--sg-cream) !important;
  border-radius: var(--sg-radius);
}

.app-sidebar a:hover,
.app-sidebar .menu-item:hover,
.app-sidebar .menu-item.active,
.sidebar a:hover,
.sidebar a.is-active,
.sidebar .menu-link.active,
.sidebar .menu-link:hover {
  background: rgba(199, 167, 126, 0.14) !important;
  color: #fff !important;
}

.app-sidebar .menu-item.active::before,
.sidebar .menu-link.active::before {
  background: var(--sg-gold) !important;
}

.app-sidebar svg,
.sidebar svg,
.app-sidebar .icon,
.sidebar .icon {
  color: var(--sg-gold) !important;
  fill: var(--sg-gold) !important;
}

/* Top-Header über der App */
.app-header,
header.app-header,
.header,
.layout-with-sidebar header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--sg-line) !important;
  backdrop-filter: blur(14px);
  color: var(--sg-forest);
}

.app-header h1,
.app-header h2,
.app-header .title {
  font-family: "SG Glypha", "SG Univers", Georgia, serif !important;
  color: var(--sg-forest) !important;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Conversation List + Cards */
.conversations-list,
.conversation--list,
.conversation--container {
  background: var(--sg-cream) !important;
}

.conversation,
.conversation--card {
  border-bottom: 1px solid var(--sg-line) !important;
  background: var(--sg-panel) !important;
  transition: background var(--sg-dur-fast) var(--sg-ease-out);
}

.conversation:hover,
.conversation--card:hover {
  background: rgba(199, 167, 126, 0.08) !important;
}

.conversation.active,
.conversation--card.active {
  background: var(--sg-sand-soft) !important;
  border-left: 3px solid var(--sg-gold) !important;
}

/* Conversation Detail / Right Pane */
.conversation--details,
.conversation-details,
.conversation-panel {
  background: var(--sg-panel) !important;
  border-left: 1px solid var(--sg-line) !important;
}

/* Messages */
.message-text,
.bubble {
  font-size: 14px;
  line-height: 1.5;
}

.bubble.is-outgoing,
.message--outgoing .bubble {
  background: var(--sg-leaf) !important;
  color: var(--sg-cream) !important;
}

.bubble.is-incoming,
.message--incoming .bubble {
  background: var(--sg-sand-soft) !important;
  color: var(--sg-ink) !important;
  border: 1px solid var(--sg-line);
}

.bubble.is-private,
.message--private .bubble {
  background: var(--sg-tone-warning-soft) !important;
  color: var(--sg-ink) !important;
  border: 1px dashed var(--sg-tone-warning);
}

/* --------------------------------------------------------------------------
   8. Tags / Labels / Status Pills
   -------------------------------------------------------------------------- */
.label,
.tag,
.chip,
.badge {
  border-radius: var(--sg-radius-pill) !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px !important;
}

.label.success,
.label--success {
  background: var(--sg-tone-success-soft) !important;
  color: var(--sg-tone-success) !important;
}

.label.warning,
.label--warning {
  background: var(--sg-tone-warning-soft) !important;
  color: var(--sg-tone-warning) !important;
}

.label.alert,
.label--danger {
  background: var(--sg-tone-danger-soft) !important;
  color: var(--sg-tone-danger) !important;
}

/* --------------------------------------------------------------------------
   9. Modale + Dropdowns
   -------------------------------------------------------------------------- */
.modal-container,
.modal,
.dropdown-pane,
.popover {
  background: var(--sg-panel) !important;
  border: 1px solid var(--sg-line) !important;
  border-radius: var(--sg-radius-lg) !important;
  box-shadow: var(--sg-elev-3) !important;
}

.modal-overlay,
.modal__overlay {
  background: rgba(9, 24, 11, 0.42) !important;
  backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   10. Custom Attributes Sidebar (rechts in Conversation View)
   -------------------------------------------------------------------------- */
.contact--profile,
.conversation-action,
.sidebar-section {
  background: var(--sg-panel) !important;
  border: 1px solid var(--sg-line) !important;
  border-radius: var(--sg-radius-lg);
  margin: 8px;
  padding: 12px;
}

.attribute--row,
.custom-attribute-row {
  border-bottom: 1px dashed var(--sg-line);
  padding: 8px 0;
}

.attribute--row .label,
.custom-attribute-row .label-name {
  font-family: "SG Univers", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sg-muted);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. Help-Center / Knowledge Base Inline
   -------------------------------------------------------------------------- */
.help-center {
  background: var(--sg-cream) !important;
}

.help-center__hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(199,167,126,0.22), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, var(--sg-sand-soft) 100%) !important;
}

/* --------------------------------------------------------------------------
   12. Scrollbars
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sg-sand-soft); }
::-webkit-scrollbar-thumb {
  background: var(--sg-gold);
  border-radius: var(--sg-radius-pill);
  border: 2px solid var(--sg-sand-soft);
}
::-webkit-scrollbar-thumb:hover { background: var(--sg-leaf); }

/* --------------------------------------------------------------------------
   12.5  Split-Pane Login (über sg-brand.js injiziert)
   --------------------------------------------------------------------------
   sg-brand.js erkennt Login/Signup/Reset-Routen, packt die Vue-Auth-View in
   ein zwei-spaltiges Shell und fügt links eine Story-Sidebar mit Logo,
   Headline und Modul-Highlights ein. Die Form bleibt unverändert in der
   rechten Karte — Chatwoot kann sie nach Belieben re-rendern.
   --------------------------------------------------------------------------*/

/* Wrapper-Host bekommt mehr Luft, damit das Shell darunter passt. */
.sgpv-login-host,
.app-wrapper.app-wrapper--auth.sgpv-login-host,
.auth-wrap.sgpv-login-host {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(199,167,126,0.18), transparent 38%),
    radial-gradient(circle at 12% 88%, rgba(47,93,80,0.10), transparent 42%),
    linear-gradient(135deg, var(--sg-cream) 0%, var(--sg-sand-soft) 100%) !important;
}

/* Wenn wir das Shell injiziert haben, neutralisieren wir die ::before/::after-
   Branding-Streifen aus Block 4 — die werden hier durch echte DOM-Elemente
   ersetzt und brauchen sich nicht zu doppeln. */
.sgpv-login-host > .sgpv-login-shell ~ .row::before,
.sgpv-login-host > .sgpv-login-shell ~ .row::after,
.sgpv-login-host > .sgpv-login-shell::before,
.sgpv-login-host > .sgpv-login-shell::after {
  display: none !important;
  content: none !important;
}

.app-wrapper.app-wrapper--auth.sgpv-login-host > .row::before,
.app-wrapper.app-wrapper--auth.sgpv-login-host > .row::after,
.auth-wrap.sgpv-login-host > .row::before,
.auth-wrap.sgpv-login-host > .row::after {
  content: none !important;
  display: none !important;
}

/* Outer shell: zwei Spalten, gleiche Höhe, gemeinsamer Schatten. */
.sgpv-login-shell {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 460px);
  gap: 0;
  align-items: stretch;
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow);
  overflow: hidden;
  position: relative;
  font-family: "SG Univers", system-ui, -apple-system, sans-serif;
}

/* --- Linke Spalte: Story Sidebar --- */
.sgpv-login-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sg-space-6);
  padding: var(--sg-space-6) var(--sg-space-6) var(--sg-space-5);
  color: var(--sg-ink);
  background:
    radial-gradient(circle at 84% 18%, rgba(199, 167, 126, 0.22), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, var(--sg-sand-soft) 100%);
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid var(--sg-line);
}

/* Dekorativer Gold-Ring unten rechts — analog apps.scheunengut.de */
.sgpv-login-story::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(199, 167, 126, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.sgpv-login-story > * {
  position: relative;
  z-index: 1;
}

.sgpv-login-story__header {
  display: grid;
  gap: var(--sg-space-2);
}

.sgpv-login-story__logo {
  width: 132px;
  height: auto;
  display: block;
  margin-bottom: var(--sg-space-3);
  filter: none;
  /* Override unseres aggressiven globalen img-Replacements aus Block 4. */
  content: normal !important;
}

.sgpv-login-story__body {
  display: grid;
  gap: var(--sg-space-4);
  max-width: 540px;
}

.sgpv-login-story h2 {
  margin: 0 !important;
  color: var(--sg-forest) !important;
  font-family: "SG Glypha", "SG Univers", Georgia, serif !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 900 !important;
}

.sgpv-login-story p {
  margin: 0;
  color: var(--sg-body);
  font-size: 15px;
  line-height: 1.55;
  max-width: 520px;
}

.sgpv-login-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sg-space-2);
  margin-top: var(--sg-space-3);
}

.sgpv-login-module {
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  background: rgba(255, 255, 255, 0.78);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  box-shadow: var(--sg-shadow-soft);
}

.sgpv-login-module strong {
  font-family: "SG Univers", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--sg-forest);
  letter-spacing: 0.02em;
}

.sgpv-login-module span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--sg-body);
}

.sgpv-login-story__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-2);
  padding-top: var(--sg-space-4);
  border-top: 1px solid var(--sg-line);
}

.sgpv-login-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--sg-radius-pill);
  background: rgba(199, 167, 126, 0.15);
  color: var(--sg-forest);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Rechte Spalte: Form Card --- */
.sgpv-login-card {
  background: var(--sg-panel);
  padding: var(--sg-space-6) var(--sg-space-5) var(--sg-space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sg-space-3);
  min-width: 0;
  position: relative;
}

/* Headline / form padding inside the card normalisieren — Chatwoot kommt
   mit eigenen Foundation-Klassen, wir killen nur die Outer-Margins. */
.sgpv-login-card .row,
.sgpv-login-card .columns,
.sgpv-login-card .column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.sgpv-login-card form {
  padding: 0 !important;
}

.sgpv-login-card h2,
.sgpv-login-card h3 {
  margin: 0 0 var(--sg-space-3) !important;
  font-size: clamp(22px, 2.8vw, 32px) !important;
}

.sgpv-login-card .button,
.sgpv-login-card button.button,
.sgpv-login-card input[type="submit"] {
  width: 100% !important;
  margin-top: var(--sg-space-3);
}

/* Log-in/Sign-up Footer Links unter der Form */
.sgpv-login-card .footer-text,
.sgpv-login-card .reset__link,
.sgpv-login-card .small-12,
.sgpv-login-card a.text-link {
  font-size: 13px;
  color: var(--sg-muted);
}

/* --------------------------------------------------------------------------
   13. Mobile Responsiveness — Login bleibt sauber zentriert
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .sgpv-login-shell {
    grid-template-columns: 1fr;
  }
  .sgpv-login-story {
    border-right: none;
    border-bottom: 1px solid var(--sg-line);
    padding: var(--sg-space-5) var(--sg-space-5) var(--sg-space-4);
    gap: var(--sg-space-4);
  }
  .sgpv-login-story__logo {
    width: 96px;
  }
  .sgpv-login-modules {
    grid-template-columns: 1fr;
  }
  .sgpv-login-card {
    padding: var(--sg-space-5) var(--sg-space-4) var(--sg-space-4);
  }
}
@media (max-width: 720px) {
  .auth-wrap > .row,
  .auth-wrap > .columns,
  .auth-wrap > .login,
  .auth-wrap > .signup {
    border-radius: var(--sg-radius);
  }
  .app-wrapper--auth .login-box,
  .auth-wrap form {
    padding: 20px 24px 28px !important;
  }
  .auth-wrap h2 {
    font-size: 28px !important;
  }
}