/* X-Sitter · Theme und Bausteine für Bootstrap 5.3 · automatisch zusammengeführt aus assets/css */
/* theme.css */
/* ==========================================================================
   X-Sitter Theme für Bootstrap 5.3
   Eine Datei für alle Marken-Werte: Farben, Schrift, Radien, Schatten.
   Bootstrap wird ausschließlich über seine CSS-Variablen angepasst,
   dadurch bleibt die Bootstrap-Datei unverändert austauschbar.
   ========================================================================== */

/* Schriften, selbst gehostet (keine Verbindung zu Google, DSGVO) */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:local("Poppins SemiBold"),local("Poppins-SemiBold"),url("../fonts/poppins-700.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff") format("woff")}
/* DM Mono: Dateien dm-mono-400.woff2 und dm-mono-500.woff2 in assets/fonts ablegen und die url()-Angaben ergänzen.
   Bis dahin nutzt die Seite eine installierte DM Mono oder die Systemschrift ui-monospace. */
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:local("DM Mono"),local("DMMono-Regular")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:local("DM Mono Medium"),local("DMMono-Medium")}

:root,[data-bs-theme="light"]{
  /* Marke */
  --xs-green:#1DD908;        /* CI-Grün: Flächen, Buttons, Marker */
  --xs-green-press:#16B806;
  --xs-green-text:#0D7404;   /* Grün für Text auf hellem Grund (lesbar) */
  --xs-on-green:#0A1D07;     /* Text auf Grün */
  --xs-soft:#E6F7E1;
  --xs-soft-2:#D2F1C8;

  /* Neutrale Töne mit leichtem Grünstich */
  --xs-ground:#F3F6F2;
  --xs-surface:#FFFFFF;
  --xs-ink:#1F241F;
  --xs-ink-2:#3A423A;
  --xs-muted:#5B655B;
  --xs-line:#D8E1D7;
  --xs-line-2:#C3CFC2;

  /* Dunkles Band (CI #2E332E) */
  --xs-band:#2E332E;
  --xs-band-2:#252A25;
  --xs-band-ink:#EEF3EE;
  --xs-band-muted:#AEB9AE;
  --xs-band-line:#465046;

  /* Hinweise und Platzhalter */
  --xs-warn:#9A4A06;
  --xs-warn-soft:#FFF1DE;
  --xs-warn-line:#E3B57E;

  /* Form */
  --xs-radius:.75rem;
  --xs-radius-lg:1rem;
  --xs-radius-xl:1.375rem;
  --xs-shadow:0 18px 40px -22px rgba(30,45,30,.38);
  --xs-shadow-sm:0 8px 20px -14px rgba(30,45,30,.4);
  --xs-font:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  --xs-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --xs-sec-y:clamp(3.5rem,7vw,6.5rem);
  --xs-header-offset:0px;    /* wird im Prototyp um die Steuerleiste erhöht */

  /* Bootstrap-Variablen auf die Marke setzen */
  --bs-primary:#1DD908;            --bs-primary-rgb:29,217,8;
  --bs-secondary:#5B655B;          --bs-secondary-rgb:91,101,91;
  --bs-success:#0D7404;            --bs-success-rgb:13,116,4;
  --bs-dark:#2E332E;               --bs-dark-rgb:46,51,46;
  --bs-light:#F3F6F2;              --bs-light-rgb:243,246,242;
  --bs-primary-text-emphasis:#0D7404;
  --bs-primary-bg-subtle:#E6F7E1;
  --bs-primary-border-subtle:#D2F1C8;
  --bs-body-font-family:var(--xs-font);
  --bs-font-sans-serif:var(--xs-font);
  --bs-font-monospace:var(--xs-mono);
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.6;
  --bs-body-color:#1F241F;         --bs-body-color-rgb:31,36,31;
  --bs-body-bg:#F3F6F2;            --bs-body-bg-rgb:243,246,242;
  --bs-emphasis-color:#1F241F;     --bs-emphasis-color-rgb:31,36,31;
  --bs-heading-color:#1F241F;
  --bs-secondary-color:#5B655B;    --bs-secondary-color-rgb:91,101,91;
  --bs-secondary-bg:#E9EFE8;
  --bs-tertiary-bg:#FFFFFF;
  --bs-border-color:#D8E1D7;
  --bs-border-color-translucent:rgba(31,36,31,.12);
  --bs-border-radius:.625rem;
  --bs-border-radius-sm:.5rem;
  --bs-border-radius-lg:1rem;
  --bs-border-radius-xl:1.375rem;
  --bs-link-color:#0D7404;         --bs-link-color-rgb:13,116,4;
  --bs-link-hover-color:#0A5A03;   --bs-link-hover-color-rgb:10,90,3;
  --bs-link-decoration:none;
  --bs-focus-ring-color:rgba(29,217,8,.35);
  --bs-box-shadow:var(--xs-shadow);
}

/* Grundlage */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--xs-header-offset) + 5.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:var(--xs-ground);color:var(--xs-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-weight:700;letter-spacing:-.018em;line-height:1.14;text-wrap:balance;color:var(--xs-ink)}
h2,.h2{font-size:clamp(1.7rem,3.1vw,2.5rem)}
h3,.h3{font-size:1.19rem;letter-spacing:-.005em;line-height:1.3}
p{text-wrap:pretty}
a{text-decoration:none}
:focus-visible{outline:3px solid var(--xs-green);outline-offset:3px;border-radius:6px}
.xs-mono{font-family:var(--xs-mono);font-variant-numeric:tabular-nums}
.xs-lead{font-size:clamp(1.06rem,1.6vw,1.22rem);color:var(--xs-ink-2);max-width:60ch}
.xs-micro{font-size:.845rem;color:var(--xs-muted)}
.xs-eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--xs-green-text)}
.xs-i{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Container etwas schmaler als Bootstrap-Standard, damit Zeilen lesbar bleiben */
@media (min-width:1200px){.container{max-width:1160px}}
@media (min-width:1400px){.container{max-width:1200px}}
/* Handy: 20 px Seitenrand. Große Spaltenabstände (g-5) nur, wenn Spalten nebeneinander stehen,
   sonst ragt die Zeile über den Rand hinaus. */
@media (max-width:575.98px){.container{--bs-gutter-x:2.5rem}}
@media (max-width:991.98px){.row.g-5,.row.gx-5{--bs-gutter-x:1.5rem}}

/* Buttons */
.btn{--bs-btn-font-weight:600;--bs-btn-padding-x:1.375rem;--bs-btn-padding-y:.85rem;--bs-btn-font-size:1rem;--bs-btn-border-radius:.625rem;--bs-btn-line-height:1.25;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-shadow:none;background-image:none}
.btn .xs-i{width:1.1rem;height:1.1rem;stroke-width:2.2}
.btn-primary{
  --bs-btn-color:#0A1D07;--bs-btn-bg:#1DD908;--bs-btn-border-color:#1DD908;
  --bs-btn-hover-color:#0A1D07;--bs-btn-hover-bg:#16B806;--bs-btn-hover-border-color:#16B806;
  --bs-btn-focus-shadow-rgb:29,217,8;
  --bs-btn-active-color:#0A1D07;--bs-btn-active-bg:#14A605;--bs-btn-active-border-color:#14A605;
  --bs-btn-disabled-color:#0A1D07;--bs-btn-disabled-bg:#1DD908;--bs-btn-disabled-border-color:#1DD908;
  background-image:none}
.btn-sm{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.6rem;--bs-btn-font-size:.9rem}
.btn-link{--bs-btn-color:var(--xs-ink-2);--bs-btn-hover-color:var(--xs-ink);--bs-btn-font-weight:600;text-decoration:none}

/* Formulare */
.form-label{font-size:.845rem;font-weight:600;color:var(--xs-ink-2);margin-bottom:.35rem}
.form-control,.form-select{background-color:var(--xs-ground);border:1.5px solid var(--xs-line);border-radius:.6rem;min-height:2.9rem;color:var(--xs-ink)}
.form-control:focus,.form-select:focus{background-color:var(--xs-surface);border-color:var(--xs-green);box-shadow:0 0 0 .22rem rgba(29,217,8,.22);color:var(--xs-ink)}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--xs-warn);background-image:none}
.invalid-feedback{color:var(--xs-warn);font-size:.8rem}
.form-check-input{border-color:var(--xs-line-2)}
.form-check-input:checked{background-color:var(--xs-green-press);border-color:var(--xs-green-press)}
.form-check-input:focus{border-color:var(--xs-green);box-shadow:0 0 0 .22rem rgba(29,217,8,.22)}

/* Navigation (Bootstrap navbar) */
.navbar{--bs-navbar-color:var(--xs-ink-2);--bs-navbar-hover-color:var(--xs-ink);--bs-navbar-active-color:var(--xs-ink);--bs-navbar-brand-color:var(--xs-ink);--bs-navbar-brand-hover-color:var(--xs-ink);--bs-navbar-nav-link-padding-x:.8rem;--bs-navbar-toggler-border-color:var(--xs-line-2);--bs-navbar-toggler-focus-width:.2rem;
  --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231F241F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.nav-link,.navbar-brand{text-shadow:none}
.dropdown-menu{--bs-dropdown-bg:var(--xs-surface);--bs-dropdown-border-color:var(--xs-line);--bs-dropdown-border-radius:.875rem;--bs-dropdown-link-color:var(--xs-ink);--bs-dropdown-link-hover-bg:var(--xs-ground);--bs-dropdown-link-hover-color:var(--xs-ink);--bs-dropdown-link-active-bg:var(--xs-soft);--bs-dropdown-link-active-color:var(--xs-ink);--bs-dropdown-padding-y:.5rem;--bs-dropdown-box-shadow:var(--xs-shadow);box-shadow:var(--xs-shadow)}

/* Akkordeon (Häufige Fragen) */
.accordion{--bs-accordion-bg:transparent;--bs-accordion-color:var(--xs-ink);--bs-accordion-border-color:var(--xs-line);--bs-accordion-border-radius:0;--bs-accordion-inner-border-radius:0;--bs-accordion-btn-padding-x:0;--bs-accordion-btn-padding-y:1.2rem;--bs-accordion-btn-color:var(--xs-ink);--bs-accordion-btn-bg:transparent;--bs-accordion-active-color:var(--xs-ink);--bs-accordion-active-bg:transparent;--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-body-padding-x:0;--bs-accordion-body-padding-y:0;--bs-accordion-btn-icon-width:1.1rem;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230D7404' stroke-width='1.8' stroke-linecap='round' d='M8 2v12M2 8h12'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230D7404' stroke-width='1.8' stroke-linecap='round' d='M8 2v12M2 8h12'/%3e%3c/svg%3e")}
.accordion-button{font-weight:600;font-size:1.09rem;line-height:1.4}
.accordion-button:not(.collapsed)::after{transform:rotate(45deg)}

/* Karten */
.card{--bs-card-bg:var(--xs-surface);--bs-card-border-color:var(--xs-line);--bs-card-border-radius:var(--xs-radius-lg);--bs-card-inner-border-radius:var(--xs-radius-lg)}

/* components/base.css */
/* Baustein-Grundlagen: Abschnitte, Überschriftenblöcke, Marken, Platzhalter */
.xs-sec{padding-block:var(--xs-sec-y)}
.xs-sec--surface{background:var(--xs-surface);border-block:1px solid var(--xs-line)}
.xs-sec--band{background:var(--xs-band);color:var(--xs-band-ink)}
.xs-sec--band h1,.xs-sec--band h2,.xs-sec--band h3{color:var(--xs-band-ink)}
.xs-sec--band .xs-eyebrow{color:var(--xs-green)}
.xs-sec--tight{padding-top:0}
.xs-sec--compact{padding-block:clamp(2.75rem,5vw,4.5rem)}
.xs-sh{display:grid;gap:.9rem;max-width:760px;margin-bottom:clamp(1.75rem,3.5vw,3rem)}
.xs-sh p{font-size:1.125rem;color:var(--xs-ink-2);max-width:62ch;margin:0}
.xs-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .5rem;border-radius:.3rem;background:var(--xs-soft);color:var(--xs-green-text);width:max-content}
.xs-tag--dark{background:var(--xs-band);color:var(--xs-band-ink)}
.xs-flag{display:inline-flex;align-items:center;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--xs-ink-2);background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:.4rem;padding:.25rem .55rem;width:max-content}
.xs-chip{display:inline-flex;align-items:center;font-family:var(--xs-mono);font-size:.78rem;line-height:1.3;padding:.3rem .55rem;border-radius:.4rem;background:var(--xs-ground);border:1px solid var(--xs-line);color:var(--xs-ink-2);white-space:nowrap;max-width:100%}
.xs-chip.is-hint{white-space:normal;font-family:inherit}
.xs-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.xs-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.94rem;color:var(--xs-green-text)}
.xs-arrow .xs-i{width:1rem;height:1rem;stroke-width:2.2;transition:transform .15s}
.xs-arrow:hover{color:var(--xs-green-text)}
.xs-arrow:hover .xs-i{transform:translateX(3px)}
.xs-sec--band .xs-arrow{color:var(--xs-green)}
.xs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.4rem}
.xs-stack{display:grid;gap:.6rem;justify-items:start}
.xs-ok{color:var(--xs-green-text);font-weight:600;font-size:.75rem}

/* Platzhalter: sichtbar markiert, bis der Inhalt freigegeben ist */
.xs-ph{font-family:var(--xs-mono);font-size:.86em;font-weight:500;color:var(--xs-warn);background:var(--xs-warn-soft);border:1px dashed var(--xs-warn-line);border-radius:.3rem;padding:.05rem .4rem}
.xs-ph-box{display:grid;place-items:center;text-align:center;gap:.4rem;border:1.5px dashed var(--xs-warn-line);background:var(--xs-warn-soft);color:var(--xs-warn);border-radius:var(--xs-radius-lg);padding:1.1rem;font-family:var(--xs-mono);font-size:.78rem;line-height:1.45}
.xs-ph-off .xs-ph{color:inherit;background:transparent;border-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0}
.xs-ph-off .xs-ph-box{border-color:var(--xs-line-2);background:var(--xs-surface);color:var(--xs-muted)}
.xs-ftr .xs-ph{color:#F4C38C;background:rgba(244,195,140,.08);border-color:rgba(244,195,140,.4)}

/* Häkchenliste */
.xs-ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--xs-line)}
.xs-ticks li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.9rem;padding:1.1rem 0;border-bottom:1px solid var(--xs-line);font-size:1.03rem;color:var(--xs-ink-2)}
.xs-ticks b{color:var(--xs-ink);font-weight:600}
.xs-tick{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--xs-soft);display:grid;place-items:center;margin-top:.1rem;color:var(--xs-green-text)}
.xs-tick .xs-i{width:.9rem;height:.9rem;stroke-width:3}
.xs-split-stick{position:sticky;top:calc(var(--xs-header-offset) + 6.5rem)}
@media (max-width:991.98px){.xs-split-stick{position:static}}
/* A/B-Test der Landingpage: Variante A ist Standard, B nur mit data-variant="B" am html-Element */
html:not([data-variant="B"]) .xs-v-b{display:none}
html[data-variant="B"] .xs-v-a{display:none}

/* components/header.css */
/* Kopfbereich mit Bootstrap-Navbar und Untermenüs */
.xs-header{position:sticky;top:var(--xs-header-offset);z-index:1030;background:rgba(243,246,242,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--xs-line)}
.xs-header .navbar{min-height:4.5rem;padding-block:.6rem}
.xs-logo{font-weight:700;font-size:1.4rem;letter-spacing:-.02em;color:var(--xs-ink)}
.xs-logo b{color:var(--xs-green)}
.xs-header .nav-link{font-weight:500;font-size:.95rem;border-radius:.5rem}
.xs-header .nav-link.active,.xs-header .nav-link[aria-current]{box-shadow:inset 0 -2px 0 var(--xs-green)}
.xs-mega{min-width:22rem;padding:.5rem}
.xs-mega .dropdown-item{display:grid;gap:.05rem;padding:.7rem .9rem;border-radius:.6rem;white-space:normal}
.xs-mega .dropdown-item b{font-weight:600;font-size:.95rem}
.xs-mega .dropdown-item span{font-size:.8rem;color:var(--xs-muted)}
@media (min-width:992px){
  .xs-header .dropdown:hover>.dropdown-menu{display:block}
  .xs-header .dropdown>.dropdown-menu{margin-top:.4rem}
  .xs-header .dropdown>.dropdown-menu::before{content:"";position:absolute;top:-.8rem;left:0;right:0;height:.8rem}
}
@media (max-width:991.98px){
  .xs-header .navbar-collapse{padding-block:.75rem 1rem}
  .xs-header .navbar-nav .nav-link{padding-block:.7rem;border-bottom:1px solid var(--xs-line);border-radius:0}
  .xs-mega{min-width:0;box-shadow:none;border:0;padding:0 0 .5rem .5rem;background:transparent}
}

.xs-logo img{display:block;height:2.6rem;width:auto}
.xs-ftr .xs-logo img{height:2.4rem}
@media (max-width:575.98px){
  .xs-header .xs-logo img{height:2rem}
  .xs-header .btn-sm{font-size:.8rem;padding:.35rem .7rem;white-space:nowrap}
}

/* components/footer.css */
/* Fußbereich */
.xs-ftr{background:var(--xs-band);color:var(--xs-band-muted);font-size:.88rem}
.xs-ftr .xs-logo{color:var(--xs-band-ink)}
.xs-ftr-claim{color:var(--xs-band-ink);font-weight:600;font-size:1.06rem;line-height:1.35;margin:.75rem 0 .9rem;max-width:24ch}
.xs-ftr .xs-ftr-h{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--xs-band-ink);font-weight:600;margin-bottom:.75rem}
.xs-ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.xs-ftr a{color:var(--xs-band-muted)}
.xs-ftr a:hover{color:var(--xs-band-ink)}
.xs-ftr-base{border-top:1px solid var(--xs-band-line);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;font-size:.8rem}
/* Schlanke Hülle der Landingpage */
.xs-lp-header{position:sticky;top:var(--xs-header-offset);z-index:1030;background:rgba(243,246,242,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--xs-line)}
.xs-lp-header .container{display:flex;align-items:center;justify-content:space-between;min-height:4.1rem}
.xs-lp-header .xs-link{font-size:.92rem;font-weight:600;color:var(--xs-ink);border-bottom:2px solid var(--xs-green);padding-bottom:2px}
.xs-lp-ftr{border-top:1px solid var(--xs-line);font-size:.8rem;color:var(--xs-muted)}
.xs-lp-ftr .container{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;padding-block:1.75rem}
.xs-lp-ftr a{color:var(--xs-muted)}

/* components/hero.css */
/* Heldenbereich der Startseite und der Landingpage, Kopf der Unterseiten */
.xs-hero{padding-block:clamp(2rem,5vw,4.25rem) clamp(3rem,6.5vw,5.75rem)}
.xs-hero h1{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.06;letter-spacing:-.025em;margin:.9rem 0 1.25rem}
.xs-hero h1 .xs-tri{display:block}
.xs-hero h1 em,.xs-phero h1 em{font-style:normal;background:linear-gradient(transparent 60%,var(--xs-soft-2) 60%);padding-inline:2px}
.xs-hero .xs-lead{margin-bottom:1.1rem}
.xs-only{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.06rem;color:var(--xs-ink);margin-bottom:1.6rem}
.xs-only .xs-i{color:var(--xs-green-text);width:1.4rem;height:1.4rem}
.xs-phero{padding-block:clamp(1.75rem,4.5vw,3.75rem) clamp(2.75rem,6vw,5.25rem)}
.xs-phero h1{font-size:clamp(2rem,4.3vw,3.35rem);line-height:1.08;letter-spacing:-.022em;margin:.9rem 0 1.1rem;max-width:21ch}
.xs-phero .xs-lead{margin-bottom:1.6rem}
.xs-crumb{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--xs-green-text);margin:0;padding:0;list-style:none}
.xs-crumb a{color:var(--xs-muted)}
.xs-crumb li+li::before{content:"/";color:var(--xs-line-2);margin-right:.5rem}
.xs-demo{display:grid;gap:.75rem}
.xs-try{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-size:.88rem;color:var(--xs-ink-2)}
.xs-try label{font-weight:600}
.xs-try input{flex:1 1 12rem;min-width:0;min-height:2.75rem;font-weight:500;background:var(--xs-surface)}
.xs-demo-note{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;font-size:.78rem;color:var(--xs-muted)}
/* Nutzenpunkte unter der Unterzeile */
.xs-benefits{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.6rem}
.xs-benefits li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.65rem;font-size:1rem;line-height:1.5;color:var(--xs-ink-2)}
.xs-benefits b{color:var(--xs-ink);font-weight:600}
.xs-benefits .xs-i{width:1.3rem;height:1.3rem;padding:.22rem;border-radius:50%;background:var(--xs-green);color:var(--xs-on-green);stroke-width:3;margin-top:.08rem}

/* components/window.css */
/* Produkt-Oberflächen: Portal, Lager, Prognosen, kleine Belege */
.xs-win{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);box-shadow:var(--xs-shadow);overflow:hidden;font-size:.82rem}
.xs-win-bar{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--xs-line)}
.xs-plogo{width:2.4rem;height:2.4rem;border-radius:.55rem;display:grid;place-items:center;font-weight:700;font-size:.85rem;letter-spacing:-.01em;color:var(--xs-on-green);background:var(--xs-green);flex:none;transition:transform .25s}
.xs-plogo.is-empty{font-size:.66rem;font-weight:600}
.xs-plogo.is-bump{transform:scale(1.1)}
.xs-pname{font-weight:600;font-size:.97rem;line-height:1.2;overflow-wrap:anywhere}
.xs-psub{font-size:.75rem;color:var(--xs-muted)}
.xs-win-tabs{display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem .75rem;border-bottom:1px solid var(--xs-line);font-size:.78rem}
/* Handy: Reiter in einer Zeile zum Wischen, rechts ausgeblendet */
@media (max-width:575.98px){.xs-win-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}.xs-win-tabs::-webkit-scrollbar{display:none}}
.xs-win-tabs span{padding:.35rem .6rem;border-radius:.4rem;color:var(--xs-muted);white-space:nowrap;display:inline-flex;gap:.35rem;align-items:center}
.xs-win-tabs span.is-on{background:var(--xs-soft);color:var(--xs-green-text);font-weight:600}
.xs-win-tabs em{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--xs-band);background:var(--xs-ground);border:1px solid var(--xs-line);border-radius:.25rem;padding:0 .25rem}
.xs-kpis{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:1px;background:var(--xs-line)}
.xs-kpi{background:var(--xs-surface);padding:.75rem .85rem;display:grid;gap:.1rem}
.xs-kpi b{font-family:var(--xs-mono);font-weight:500;font-size:1.25rem;line-height:1.2;font-variant-numeric:tabular-nums}
.xs-kpi span{font-size:.72rem;color:var(--xs-muted);line-height:1.3}
.xs-alert{margin:.75rem .9rem;display:flex;gap:.6rem;align-items:flex-start;background:var(--xs-warn-soft);border-radius:.55rem;padding:.6rem .75rem;font-size:.78rem;line-height:1.45}
.xs-alert i{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--xs-warn);margin-top:.35rem;animation:xs-pulse 2.4s ease-in-out infinite}
.xs-alert strong{color:var(--xs-warn)}
@keyframes xs-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.xs-rows{list-style:none;margin:0;padding:.4rem .9rem .9rem;display:grid}
.xs-rows li{display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.5rem 0;border-bottom:1px dashed var(--xs-line)}
.xs-rows li:last-child{border-bottom:0}
.xs-st{display:inline-block;font-size:.68rem;font-weight:600;padding:.12rem .45rem;border-radius:.3rem;background:var(--xs-soft);color:var(--xs-green-text);white-space:nowrap}
.xs-st--wait{background:var(--xs-ground);color:var(--xs-muted);border:1px solid var(--xs-line)}
.xs-st--warn{background:var(--xs-warn-soft);color:var(--xs-warn)}
.xs-tbl{width:100%;border-collapse:collapse;font-size:.78rem;margin:0}
.xs-tbl th{font-weight:600;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--xs-muted);text-align:left;padding:.6rem .9rem;border-bottom:1px solid var(--xs-line);background:var(--xs-ground)}
.xs-tbl td{padding:.6rem .9rem;border-bottom:1px dashed var(--xs-line);vertical-align:top}
.xs-tbl tr:last-child td{border-bottom:0}
.xs-tbl .xs-num{text-align:right;font-family:var(--xs-mono);font-variant-numeric:tabular-nums}
.xs-win-foot{display:flex;flex-wrap:wrap;gap:.35rem 1rem;justify-content:space-between;padding:.7rem .9rem;border-top:1px solid var(--xs-line);background:var(--xs-ground);font-size:.75rem;color:var(--xs-muted)}
.xs-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.25rem;padding:.75rem .9rem .35rem}
.xs-months i{height:1.6rem;border-radius:.3rem;background:var(--xs-soft-2)}
.xs-months i:first-child{background:var(--xs-band)}
.xs-months-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;padding:.15rem .9rem .9rem;font-size:.72rem;color:var(--xs-muted)}
.xs-months-legend span{display:inline-flex;align-items:center;gap:.4rem}
.xs-months-legend i{width:.6rem;height:.6rem;border-radius:.2rem;background:var(--xs-soft-2)}
.xs-months-legend span:first-child i{background:var(--xs-band)}
/* Kleine Belege in den drei Säulen */
.xs-mini{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius);box-shadow:var(--xs-shadow-sm);font-size:.78rem;overflow:hidden}
.xs-mini .xs-win-bar{padding:.6rem .75rem;gap:.6rem}
.xs-mini .xs-plogo{width:2rem;height:2rem;font-size:.75rem;border-radius:.5rem}
.xs-mini .xs-plogo.is-empty{font-size:.58rem}
.xs-mini .xs-pname{font-size:.85rem}
.xs-mini .xs-psub{font-size:.72rem}
.xs-mini .xs-rows{padding:.25rem .75rem .5rem}
.xs-mini .xs-rows li{padding:.42rem 0}
.xs-mini .xs-mono{font-size:.75rem;color:var(--xs-green-text)}
@media (max-width:575.98px){.xs-kpis{--cols:2!important}.xs-kpis.xs-kpis--keep{--cols:3!important}.xs-kpi b{font-size:1.05rem}}

/* components/cta.css */
/* Handlungsaufruf am Seitenende */
.xs-cta-sec{padding-block:clamp(2.5rem,5vw,4.5rem)}
.xs-cta{background:var(--xs-soft);border-radius:var(--xs-radius-xl);padding:clamp(1.75rem,4vw,3.5rem)}
.xs-cta h2{font-size:clamp(1.55rem,2.8vw,2.25rem);margin:0}
.xs-cta .xs-micro b{color:var(--xs-ink-2)}

/* components/diagrams.css */
/* Schaubilder: CONNECT vor dem Lagersystem, Zentralverteilung */
.xs-pull{font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.4;font-weight:600;letter-spacing:-.01em;max-width:34ch}
.xs-pull em{font-style:normal;color:var(--xs-green-text)}
.xs-flow{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem minmax(0,1.2fr) 2.75rem minmax(0,.85fr);align-items:center}
.xs-flow-col{display:grid;gap:.6rem}
.xs-flow-col>.xs-label{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--xs-muted)}
.xs-flow-arrow{display:grid;place-items:center;color:var(--xs-green-text)}
.xs-flow-arrow .xs-i{width:1.6rem;height:1.6rem;stroke-width:2}
.xs-sys{display:flex;justify-content:space-between;align-items:center;gap:.6rem;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:.55rem;padding:.5rem .7rem;font-size:.82rem}
.xs-sys small{font-size:.7rem;color:var(--xs-muted)}
.xs-plat{background:var(--xs-surface);border:2px solid var(--xs-green);border-radius:var(--xs-radius-lg);box-shadow:var(--xs-shadow);overflow:hidden}
.xs-plat ul{list-style:none;margin:0;padding:.4rem 1rem .6rem}
.xs-plat li{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px dashed var(--xs-line);font-size:.85rem}
.xs-plat li:last-child{border-bottom:0}
.xs-plat li .xs-i{width:1.05rem;height:1.05rem;color:var(--xs-green-text)}
.xs-plat-by{padding:.55rem 1rem;border-top:1px solid var(--xs-line);background:var(--xs-ground);font-size:.72rem;color:var(--xs-muted)}
.xs-house{background:var(--xs-band);color:var(--xs-band-ink);border-radius:var(--xs-radius-lg);padding:1.25rem 1.1rem;display:grid;gap:.5rem;justify-items:start}
.xs-house .xs-i{width:1.9rem;height:1.9rem;color:var(--xs-green)}
.xs-house b{font-size:1rem}
.xs-house span{font-size:.78rem;color:var(--xs-band-muted)}
.xs-flow-cap{margin-top:1.1rem;font-size:.82rem;color:var(--xs-muted)}
.xs-truck{display:flex;align-items:center;gap:.6rem;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:.6rem;padding:.6rem .75rem;font-size:.85rem}
.xs-truck .xs-i{color:var(--xs-muted)}
.xs-dc{background:var(--xs-band);color:var(--xs-band-ink);border-radius:var(--xs-radius-lg);padding:1.4rem 1.25rem;display:grid;gap:.5rem}
.xs-dc b{font-size:1.06rem}
.xs-dc span{font-size:.82rem;color:var(--xs-band-muted)}
.xs-region{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:.6rem;padding:.6rem .75rem;display:grid;gap:.1rem}
.xs-region b{font-size:.88rem}
.xs-region span{font-size:.75rem;color:var(--xs-muted);font-family:var(--xs-mono)}
@media (max-width:767.98px){
  .xs-flow{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .xs-flow-arrow{height:2.1rem}
  .xs-flow-arrow .xs-i{transform:rotate(90deg)}
}

/* components/doors.css */
/* Vier Türen mit „Sie“ in der Mitte */
.xs-doors{position:relative}
.xs-door{display:grid;grid-template-rows:auto auto 1fr auto;gap:.75rem;height:100%;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:1.6rem 1.6rem 1.5rem;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.xs-door:hover{border-color:var(--xs-green);box-shadow:var(--xs-shadow-sm);transform:translateY(-2px);color:inherit}
.xs-door-top{display:flex;align-items:center;gap:.75rem}
.xs-door-ico{width:2.6rem;height:2.6rem;border-radius:.7rem;display:grid;place-items:center;background:var(--xs-soft);color:var(--xs-green-text);flex:none}
.xs-door-ico .xs-i{width:1.4rem;height:1.4rem}
.xs-door h3{font-size:1.25rem;margin:0}
.xs-door .xs-sit{color:var(--xs-muted);font-size:.97rem;margin:0}
.xs-door .xs-res{color:var(--xs-ink);font-size:1rem;font-weight:500;border-top:1px solid var(--xs-line);padding-top:.75rem;margin:0}
.xs-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3.6rem;height:3.6rem;border-radius:50%;background:var(--xs-band);color:var(--xs-band-ink);display:grid;place-items:center;font-weight:700;font-size:.95rem;box-shadow:0 0 0 6px var(--xs-ground),0 0 0 7px var(--xs-line);pointer-events:none;z-index:2}
@media (max-width:767.98px){.xs-hub{display:none}}

/* components/faq.css */
/* Häufige Fragen */
.xs-faq{max-width:900px;border-top:1px solid var(--xs-line)}
.xs-faq .accordion-item{border-left:0;border-right:0;border-top:0}
.xs-faq .accordion-body{padding-bottom:1.35rem;color:var(--xs-ink-2);max-width:70ch}

/* components/features.css */
/* Leistungsraster, Funktionsliste, Sicherheitsleiste */
.xs-feat{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1px;background:var(--xs-line);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);overflow:hidden}
.xs-feat>div{background:var(--xs-surface);padding:1.4rem 1.5rem;display:grid;gap:.5rem;align-content:start}
.xs-feat>.is-wide{grid-column:span 2}
.xs-feat .xs-ico{width:2.4rem;height:2.4rem;border-radius:.6rem;display:grid;place-items:center;background:var(--xs-soft);color:var(--xs-green-text)}
.xs-feat b{font-size:1.03rem}
.xs-feat span{color:var(--xs-ink-2);font-size:.94rem}
@media (max-width:991.98px){.xs-feat{--cols:2!important}.xs-feat>.is-wide:first-child{grid-column:1 / -1}.xs-feat>.is-wide:last-child{grid-column:auto}}
@media (max-width:767.98px){.xs-feat{grid-template-columns:minmax(0,1fr)}.xs-feat>.is-wide,.xs-feat>.is-wide:first-child{grid-column:auto}}
.xs-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.25rem}
.xs-checks li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.75rem;padding:.9rem 0;border-bottom:1px solid var(--xs-line);color:var(--xs-ink-2)}
.xs-checks .xs-i{width:1.1rem;height:1.1rem;color:var(--xs-green-text);stroke-width:2.4;margin-top:.25rem}
@media (max-width:767.98px){.xs-checks{grid-template-columns:minmax(0,1fr)}}
.xs-seclist{display:flex;flex-wrap:wrap;gap:.6rem}
.xs-seclist span{display:inline-flex;align-items:center;gap:.5rem;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:.6rem;padding:.6rem .9rem;font-size:.9rem;font-weight:500}
.xs-seclist .xs-i{width:1.1rem;height:1.1rem;color:var(--xs-green-text)}

/* components/ki.css */
/* Und die KI? */
.xs-ki h2{font-size:clamp(2.1rem,4.5vw,3.6rem);margin-bottom:1.4rem}
.xs-ki .xs-q{font-size:clamp(1.19rem,2vw,1.44rem);line-height:1.5;color:var(--xs-band-ink);font-weight:500}
.xs-uses{border-top:1px solid var(--xs-band-line);margin:1.1rem 0 1.5rem}
.xs-use{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--xs-band-line)}
.xs-use .xs-ico{width:2.25rem;height:2.25rem;border-radius:.55rem;display:grid;place-items:center;background:var(--xs-band-2);color:var(--xs-green);border:1px solid var(--xs-band-line)}
.xs-use b{display:block;color:var(--xs-band-ink);font-weight:600;font-size:.97rem}
.xs-use span{color:var(--xs-band-muted);font-size:.94rem}
.xs-own{color:var(--xs-band-ink);font-size:1.03rem}
.xs-own b{color:var(--xs-green)}

/* components/mobile-cta.css */
/* Fester Handlungsaufruf am unteren Rand, nur auf dem Handy */
.xs-mcta{display:none;position:sticky;bottom:0;z-index:1020;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--xs-line)}
.xs-mcta .btn{width:100%}
@media (max-width:767.98px){.xs-mcta{display:block}}

/* components/pages.css */
/* Referenzen, Team, Fließtext, Rechtliches, Danke */
.xs-study{padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--xs-line)}
.xs-study:first-child{border-top:0;padding-top:0}
.xs-study h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:0}
.xs-study .xs-fact{border-top:0;padding-top:.25rem}
.xs-team .xs-ph-box{aspect-ratio:4/5}
.xs-legal{max-width:760px}
.xs-thanks{max-width:760px}
.xs-thanks h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.08;letter-spacing:-.022em;margin:.9rem 0 1.1rem}
.xs-echo{margin-top:1.6rem;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:1.4rem 1.5rem;display:grid;gap:.75rem}
.xs-echo small{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--xs-muted)}
.xs-meta{display:flex;gap:.6rem;align-items:center;color:var(--xs-ink-2)}
.xs-meta .xs-i{color:var(--xs-green-text)}
/* Rechtstexte */
.xs-legal-text{max-width:52rem}
.xs-legal-intro{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg,1rem);padding:1.1rem 1.3rem;margin-bottom:1.5rem}
.xs-legal-sec{margin-top:2rem}
.xs-legal-sec h2{font-size:1.25rem;margin-bottom:.7rem}
.xs-legal-sec p{color:var(--xs-ink-2)}
.xs-legal-text a{color:var(--xs-green-text);text-decoration:underline}

/* components/pains.css */
/* Kennen Sie das? */
.xs-pains{border-top:1px solid var(--xs-line);border-bottom:1px solid var(--xs-line)}
.xs-pain{padding:1.5rem 1.5rem 1.6rem 0;display:grid;gap:.6rem;align-content:start;height:100%}
.xs-pain::before{content:"";width:.6rem;height:.6rem;border-radius:.15rem;background:var(--xs-green)}
.xs-pain p{font-size:1.09rem;font-weight:500;color:var(--xs-ink);line-height:1.45;margin:0}
@media (min-width:768px){.xs-pains>.col+.col .xs-pain{padding-left:1.5rem;border-left:1px solid var(--xs-line)}}
@media (max-width:767.98px){.xs-pains>.col+.col .xs-pain{border-top:1px solid var(--xs-line)}.xs-pain{padding:1.1rem 0}}
.xs-bridge{margin-top:1.9rem;font-size:clamp(1.19rem,2vw,1.44rem);line-height:1.5;color:var(--xs-ink-2);max-width:48ch}
.xs-bridge b{color:var(--xs-ink);font-weight:600}

/* components/path-duo.css */
/* Wege, Zweierkarten */
.xs-path{border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);overflow:hidden;background:var(--xs-surface)}
.xs-path a{display:grid;gap:.4rem;padding:1.4rem 1.5rem;color:inherit;height:100%}
.xs-path a:hover{background:var(--xs-ground)}
.xs-path small{font-size:.8rem;color:var(--xs-muted);font-weight:500}
.xs-path b{font-size:1.12rem}
@media (min-width:768px){.xs-path>.col+.col a{border-left:1px solid var(--xs-line)}}
@media (max-width:767.98px){.xs-path>.col+.col a{border-top:1px solid var(--xs-line)}}
.xs-duo{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:1.5rem 1.6rem;display:grid;gap:.6rem;align-content:start;height:100%}
.xs-duo p{color:var(--xs-ink-2);margin:0}
.xs-duo h3{margin:0}

/* components/pillars.css */
/* Drei Säulen: Ihre Plattform, Ihr Geschäft, Ihre Kunden */
.xs-pillar{display:grid;gap:1.1rem;align-content:start;border-top:2px solid var(--xs-ink);padding-top:1.4rem;height:100%}
.xs-pillar h2{font-size:clamp(1.9rem,3.4vw,2.75rem);letter-spacing:-.025em;margin:0}
.xs-pillar>p{color:var(--xs-ink-2);font-size:1.03rem;margin:0}
.xs-pillar>ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.xs-pillar>ul>li{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.6rem;font-size:.94rem;color:var(--xs-ink-2)}
.xs-pillar>ul .xs-i{width:1rem;height:1rem;color:var(--xs-green-text);stroke-width:2.4;margin-top:.25rem}

/* components/pricing.css */
/* Preise: Pakete, Preislogik, Preisleiste */
.xs-pkg{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-xl);padding:clamp(1.4rem,3vw,2.1rem);display:grid;gap:1.1rem;align-content:start;height:100%}
.xs-pkg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem}
.xs-pkg-head h3{font-size:1.32rem;margin:0}
.xs-amount{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.xs-amount small{font-size:.94rem;color:var(--xs-ink-2);font-weight:500}
.xs-amount b{font-family:var(--xs-mono);font-weight:500;font-size:clamp(2.75rem,5.2vw,3.9rem);letter-spacing:-.03em;line-height:1}
.xs-amount span{font-size:.94rem;color:var(--xs-ink-2)}
.xs-dots{list-style:none;margin:0;padding:1rem 0 0;display:grid;gap:.6rem;border-top:1px solid var(--xs-line)}
.xs-dots li{display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.6rem;color:var(--xs-ink-2);font-size:.97rem}
.xs-dots li::before{content:"";width:.5rem;height:.5rem;border-radius:.12rem;background:var(--xs-green);margin-top:.55rem}
.xs-logic{margin-top:1.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--xs-line);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);overflow:hidden}
.xs-logic>div{background:var(--xs-surface);padding:1.25rem 1.4rem;display:grid;gap:.25rem;align-content:start}
.xs-logic>.is-wide{grid-column:1 / -1}
.xs-logic b{font-size:1.03rem;font-weight:600}
.xs-logic span{color:var(--xs-ink-2);font-size:.94rem}
@media (max-width:767.98px){.xs-logic{grid-template-columns:minmax(0,1fr)}.xs-logic>.is-wide{grid-column:auto}}
.xs-pstrip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.1rem 2rem;align-items:center;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-xl);padding:clamp(1.25rem,3vw,1.9rem) clamp(1.25rem,3vw,2.1rem)}
.xs-pstrip p{color:var(--xs-ink-2);max-width:44ch;margin:0}
@media (max-width:991.98px){.xs-pstrip{grid-template-columns:minmax(0,1fr)}.xs-pstrip .btn{justify-self:start}}

/* components/proof.css */
/* Zitat und Fälle */
.xs-quote{margin:0;height:100%;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:clamp(1.4rem,3vw,2.25rem);box-shadow:var(--xs-shadow);display:flex;flex-direction:column;gap:1.1rem}
.xs-quote blockquote{margin:0;font-size:clamp(1.1rem,1.9vw,1.38rem);line-height:1.5;font-weight:500}
.xs-quote blockquote::before{content:"„";color:var(--xs-green-text);font-weight:700}
.xs-who{display:flex;align-items:center;gap:.75rem;font-size:.88rem;color:var(--xs-muted)}
.xs-face{width:2.75rem;height:2.75rem;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.62rem;line-height:1.1;text-align:center;font-family:var(--xs-mono);border:1.5px dashed var(--xs-warn-line);background:var(--xs-warn-soft);color:var(--xs-warn)}
.xs-ph-off .xs-face{border-color:var(--xs-line-2);background:var(--xs-ground);color:var(--xs-muted)}
.xs-fact{border-top:1px solid var(--xs-line);padding-top:1rem;display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap}
.xs-fact b{font-family:var(--xs-mono);font-weight:500;font-size:2rem;color:var(--xs-green-text);line-height:1}
.xs-fact span{color:var(--xs-ink-2);font-size:.94rem}
.xs-case{border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:1.4rem 1.5rem;background:var(--xs-surface);display:grid;gap:.5rem;align-content:start}
.xs-case p{color:var(--xs-ink-2);font-size:.97rem;margin:0}
.xs-case h3{margin:0}
.xs-where{font-size:.8rem;color:var(--xs-muted)}

/* components/request.css */
/* Formulare: Kurzformular, Anfrage in drei Fragen, Landingpage */
.xs-form{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--xs-shadow);display:grid;gap:1rem}
.xs-form h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.015em;margin:0}
.xs-form .xs-req{color:var(--xs-green-text)}
.xs-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--xs-muted);margin:0}
.xs-consent .form-check-input{margin-top:.15rem;width:1.1rem;height:1.1rem;flex:none}
.xs-consent.is-invalid{color:var(--xs-warn)}
.xs-prog{display:grid;gap:.5rem}
.xs-prog-top{display:flex;justify-content:space-between;gap:.75rem;font-size:.82rem;color:var(--xs-muted);font-weight:500}
.xs-prog-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.xs-prog-bar i{height:.3rem;border-radius:.2rem;background:var(--xs-line)}
.xs-prog-bar i.is-on{background:var(--xs-green)}
.xs-step{display:grid;gap:1rem}
.xs-step h3{font-size:clamp(1.25rem,2.2vw,1.55rem)}
.xs-quick small{font-size:.78rem;color:var(--xs-muted)}
.xs-quick .btn{--bs-btn-padding-y:.45rem;--bs-btn-padding-x:.65rem;--bs-btn-font-size:.78rem;--bs-btn-font-weight:500;--bs-btn-color:var(--xs-ink-2);--bs-btn-border-color:var(--xs-line-2);--bs-btn-bg:var(--xs-surface);--bs-btn-hover-bg:var(--xs-ground);--bs-btn-hover-border-color:var(--xs-line-2);--bs-btn-hover-color:var(--xs-ink);font-family:var(--xs-mono);border-radius:.45rem}
.xs-quick .btn[aria-pressed="true"]{background:var(--xs-soft);border-color:var(--xs-green);color:var(--xs-green-text)}
.xs-opts{display:grid;gap:.6rem}
.xs-opts.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:419.98px){.xs-opts.is-2{grid-template-columns:minmax(0,1fr)}}
.xs-opt{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.75rem;align-items:start;border:1.5px solid var(--xs-line);border-radius:.75rem;padding:.85rem 1rem;cursor:pointer;background:var(--xs-ground);margin:0}
.xs-opt:has(input:checked){border-color:var(--xs-green);background:var(--xs-soft)}
.xs-opt .form-check-input{margin:.2rem 0 0;width:1.1rem;height:1.1rem}
.xs-opt b{display:block;font-size:.97rem}
.xs-opt span{font-size:.84rem;color:var(--xs-muted)}
.xs-opt .form-control{margin-top:.5rem;background:var(--xs-surface)}
.xs-fieldset.is-invalid .invalid-feedback{display:block}
.xs-hint{display:none;align-items:center;gap:.6rem;background:var(--xs-band);color:var(--xs-band-ink);border-radius:.6rem;padding:.75rem .9rem;font-size:.88rem}
.xs-hint.is-show{display:flex}
.xs-hint b{color:var(--xs-green)}
.xs-step-nav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center}
.xs-qa{list-style:none;margin:.9rem 0 0;padding:0;border-top:1px solid var(--xs-line)}
.xs-qa li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--xs-line)}
.xs-qa .xs-n{font-family:var(--xs-mono);font-size:.8rem;font-weight:500;color:var(--xs-green-text);padding-top:.2rem}
.xs-qa b{display:block;font-weight:600;font-size:.97rem}
.xs-qa span{font-size:.9rem;color:var(--xs-ink-2)}
.xs-req-page h1{font-size:clamp(2rem,4.3vw,3.25rem);line-height:1.08;letter-spacing:-.022em;margin:.9rem 0 1.1rem}
.xs-done{display:none;background:var(--xs-soft);border-radius:.6rem;padding:.9rem 1rem;font-size:.94rem}
.xs-done.is-show{display:block}
@media (max-width:419.98px){.xs-form .btn .xs-i{display:none}}

/* components/stairs.css */
/* Plattform-Treppe (Baustein stairs, Grafik G03). Dunkler Abschnitt: .xs-sec--panel aus visuals.css.
   Desktop: fünf Spalten, jede Stufe beginnt eine Stufenhöhe höher als die vorige, die Böden liegen auf einer Linie.
   Stufe 1 und 2 grau („Portal“), 3 bis 5 grün („Ihre Plattform“). Mobil: senkrechte Liste mit Stufenkante links. */
.xs-stairs{--rise:3.25rem;--grey:var(--xs-ink-2,#4A504A);--green:var(--xs-green,#1DD908);--card:var(--xs-panel-2,#2A2F2A);margin:0}
.xs-stairs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--steps,5),minmax(0,1fr));gap:.75rem;align-items:stretch}
.xs-stair{margin-top:calc((var(--steps,5) - var(--n)) * var(--rise));background:var(--card);border-top:4px solid var(--grey);border-radius:4px 4px 0 0;padding:1.1rem 1rem 1.4rem;display:grid;gap:.6rem;align-content:start;min-width:0;position:relative}
.xs-stair.is-plattform{border-top-color:var(--green);background:rgba(29,217,8,.07)}
.xs-stair-k{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.xs-stair-n{font-weight:700;font-size:2rem;line-height:1;color:#AEB9AE;font-variant-numeric:tabular-nums}
.xs-stair.is-plattform .xs-stair-n{color:var(--green)}
.xs-stair-zone{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#AEB9AE;white-space:nowrap}
.xs-stair.is-plattform .xs-stair-zone{color:var(--green)}
.xs-stair h3{font-size:1.15rem;line-height:1.25;font-weight:500;color:#FFFFFF;margin:0;overflow-wrap:anywhere;hyphens:auto}
.xs-stair dl{margin:0;display:grid;gap:.7rem}
.xs-stair dt{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#AEB9AE;margin:0}
.xs-stair dd{font-size:.9rem;line-height:1.45;color:#E9EEE8;margin:.15rem 0 0;hyphens:auto}
.xs-stair dl>div:last-child dd{color:#FFFFFF;font-weight:500}

/* Zonenleiste unter der Treppe: Portal endet bei Stufe 2, darüber beginnt Ihre Plattform */
.xs-stairs-zones{display:grid;grid-template-columns:repeat(var(--steps,5),minmax(0,1fr));gap:.75rem;margin-top:.75rem}
.xs-stairs-zones span{border-top:2px solid var(--grey);padding-top:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#AEB9AE}
.xs-stairs-zones .is-plattform{border-top-color:var(--green);color:var(--green)}
/* Auf breiten Bildschirmen trägt die Zonenleiste die Zuordnung, die Marke je Stufe bleibt für Screenreader */
@media (min-width:992px){
  .xs-stair-zone{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

.xs-stairs-close{display:grid;gap:.9rem;justify-items:start;margin-top:clamp(1.75rem,3.5vw,2.75rem);max-width:70ch}
.xs-stairs-close p{font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.5;color:#FFFFFF!important;margin:0}

/* Schmaler als 992 px: senkrechte Liste, Stufe 1 oben. Die Stufenkante links rückt je Stufe weiter ein. */
@media (max-width:991.98px){
  .xs-stairs-list{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .xs-stair{margin-top:0;margin-left:calc((var(--n) - 1) * .6rem);border-top:0;border-left:4px solid var(--grey);border-radius:0 4px 4px 0;padding:1rem 1.1rem}
  .xs-stair.is-plattform{border-left-color:var(--green)}
  .xs-stair-k{justify-content:flex-start;gap:.75rem}
  .xs-stair-n{font-size:1.6rem}
  .xs-stairs-zones{display:none}
}

/* components/talk.css */
/* Gespräch und Termin */
.xs-talk-me{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1.6rem;align-items:start}
.xs-portrait{aspect-ratio:4/5;max-width:100%}
.xs-talk-me p{font-size:1.09rem;color:var(--xs-ink-2)}
.xs-sig{font-weight:600;color:var(--xs-ink)}
.xs-contact{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.9rem;color:var(--xs-muted)}
@media (max-width:575.98px){.xs-talk-me{grid-template-columns:minmax(0,1fr)}.xs-portrait{max-width:10rem}}
.xs-event{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.4rem;align-items:center;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:1.25rem 1.5rem}
.xs-date{display:grid;justify-items:center;width:4.9rem;padding:.6rem 0;border-radius:.75rem;background:var(--xs-band);color:var(--xs-band-ink);font-family:var(--xs-mono);line-height:1.1}
.xs-date b{font-size:1.75rem;font-weight:500}
.xs-date span{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--xs-band-muted)}
.xs-event h3{font-size:1.12rem;margin-bottom:.25rem}
.xs-event p{color:var(--xs-ink-2);font-size:.94rem;margin:0}
@media (max-width:767.98px){.xs-event{grid-template-columns:auto minmax(0,1fr)}.xs-event .xs-arrow{grid-column:1 / -1}}

.xs-portrait-img{width:100%;max-width:9.5rem;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--xs-radius-lg,1rem)}
.xs-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

/* components/thesis.css */
/* Kernthese im dunklen Band */
.xs-thesis h2{font-size:clamp(1.8rem,3.5vw,2.9rem)}
.xs-thesis p{color:var(--xs-band-muted);font-size:1.125rem}
.xs-points{border-top:1px solid var(--xs-band-line)}
.xs-points div{display:grid;gap:.25rem;padding:1rem 0;border-bottom:1px solid var(--xs-band-line)}
.xs-points b{color:var(--xs-band-ink);font-size:1.06rem;font-weight:600}
.xs-points span{color:var(--xs-band-muted);font-size:.97rem}

/* components/timeline.css */
/* Ablauf in Arbeitstagen, Einführungsschritte */
.xs-days{list-style:none;margin:0;padding:0}
.xs-day{display:grid;gap:.75rem;align-content:start;height:100%}
.xs-day-mark{display:flex;align-items:center;gap:.75rem}
.xs-day-mark b{font-family:var(--xs-mono);font-weight:500;font-size:.8rem;color:var(--xs-on-green);background:var(--xs-green);border-radius:999px;padding:.25rem .7rem;white-space:nowrap}
.xs-day-mark i{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--xs-line-2) 0 6px,transparent 6px 12px)}
.xs-days>.col:last-child .xs-day-mark i{background:linear-gradient(90deg,var(--xs-green),transparent)}
.xs-day-card{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:1.4rem 1.5rem;display:grid;gap:.5rem;height:100%}
.xs-day-card small{font-family:var(--xs-mono);font-size:.78rem;color:var(--xs-muted)}
.xs-day-card b{font-size:1.12rem;line-height:1.35}
.xs-day-card span{color:var(--xs-ink-2);font-size:.97rem}
.xs-rollout{list-style:none;margin:0;padding:0;counter-reset:s}
.xs-rollout li>div{counter-increment:s;background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:.75rem;padding:1rem .9rem;display:grid;gap:.6rem;align-content:start;font-size:.88rem;color:var(--xs-ink-2);line-height:1.4;height:100%}
.xs-rollout li>div::before{content:counter(s);font-family:var(--xs-mono);font-size:.75rem;color:var(--xs-on-green);background:var(--xs-green);width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center}
.xs-rollout li.is-after>div{background:var(--xs-soft);border-color:var(--xs-soft-2)}
.xs-span{display:grid;grid-template-columns:5fr 1fr;gap:.6rem;margin-top:.75rem;font-size:.78rem;font-family:var(--xs-mono)}
.xs-span span{border-top:2px solid var(--xs-ink);padding-top:.4rem;color:var(--xs-ink-2)}
.xs-span span+span{border-top-color:var(--xs-green)}
@media (max-width:991.98px){.xs-span{display:none}}
.xs-steps3 li>div{background:var(--xs-surface);border:1px solid var(--xs-line);border-radius:.9rem;padding:1.4rem;height:100%}
.xs-steps3 .xs-n{font-family:var(--xs-mono);font-size:.8rem;font-weight:500;color:var(--xs-on-green);background:var(--xs-green);width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;margin-bottom:.9rem}
.xs-steps3 b{display:block;font-size:1.06rem;margin-bottom:.4rem;line-height:1.35}
.xs-steps3 span{color:var(--xs-muted);font-size:.94rem}

/* components/trust.css */
/* Vertrauensleiste */
.xs-trust{background:var(--xs-surface);border-block:1px solid var(--xs-line)}
.xs-trust .container{display:grid;gap:.6rem;padding-block:1.1rem}
.xs-trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.6rem;font-size:.94rem}
.xs-trust-row .xs-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--xs-muted);font-weight:600}
.xs-trust-row strong{font-weight:600}
.xs-trust-row .xs-group{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;color:var(--xs-ink-2);font-weight:500}
.xs-trust-sys{font-size:.8rem;color:var(--xs-muted);margin:0}
@media (max-width:767.98px){.xs-trust-row .xs-group{margin-left:0}}
/* Belegte Zahlen unter den Kundennamen */
.xs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2.5rem;margin:.35rem 0 0;padding-top:1rem;border-top:1px dashed var(--xs-line)}
.xs-stats>div{display:grid;gap:.2rem;align-content:start}
.xs-stats dt{font-family:var(--xs-mono);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15;letter-spacing:-.02em;color:var(--xs-ink)}
.xs-stats dd{margin:0;font-size:.86rem;line-height:1.45;color:var(--xs-muted)}
.xs-trust--stats .container{padding-block:1.25rem 1.4rem}
@media (max-width:767.98px){.xs-stats{grid-template-columns:minmax(0,1fr);gap:.85rem}}

/* components/visuals.css */
/* Grafiken G01 bis G11 (Design-Briefing v1.0, Kapitel 4) und ihre Einbindung in die Bausteine.
   Farben nur über Variablen. Werte aus dem Briefing, wo das Theme keine eigene Variable hat (Rückfallwert in var()).
   Keine Verläufe, keine Glanzeffekte. Schatten nur auf der Portal-Oberfläche G01. */
.xs-g,.xs-gsym{
  --g-ink:var(--xs-ink,#2E332E);
  --g-ink2:var(--xs-ink-2,#4A504A);
  --g-muted:var(--xs-muted,#5B655B);
  --g-line:var(--xs-line,#DDDDDD);
  --g-ground:var(--xs-ground,#F5F5F3);
  --g-white:#FFFFFF;
  --g-green:var(--xs-green,#1DD908);
  --g-green-t:var(--xs-green-text,#15A806);
  --g-on-green:var(--xs-on-green,#0A1D07);
  --g-soft:var(--xs-soft,#E6F7E1);
  --g-panel:var(--xs-panel,#1F231F);
  --g-panel2:var(--xs-panel-2,#2A2F2A);
  --g-signal:var(--xs-signal,#FFB020);
  --g-cut:var(--xs-surface,#FFFFFF);       /* Aussparung in Symbolen = Grundfarbe darunter */
}
.xs-g{margin:0;position:relative}
.xs-g figcaption{margin-top:.8rem;font-size:.86rem;line-height:1.45;color:var(--xs-muted);max-width:70ch}
.xs-gs{display:block;width:100%;height:auto;overflow:visible}
.xs-gs text{font-family:var(--xs-font,"Poppins",sans-serif)}

/* Zwei Fassungen: breit (Standard) und hoch (schmale Bildschirme) */
.xs-g--resp .xs-gs--tall{display:none}
@media (max-width:575.98px){
  .xs-g--resp .xs-gs--wide{display:none}
  .xs-g--resp .xs-gs--tall{display:block;max-width:420px}
  .xs-g--resp .xs-gs--tall+.xs-gs--tall{margin-top:1.5rem}
}

/* Text */
.g-fs10{font-size:10px}.g-fs11{font-size:11px}.g-fs12{font-size:12px}.g-fs13{font-size:13px}.g-fs14{font-size:14px}
.g-fs15{font-size:15px}.g-fs16{font-size:16px}.g-fs18{font-size:18px}.g-fs26{font-size:26px}
.g-w5{font-weight:500}.g-w7{font-weight:700}
.g-num{font-variant-numeric:tabular-nums}
.g-caps{letter-spacing:.08em;text-transform:uppercase}
.g-ink-t{fill:var(--g-ink)}.g-ink2-t{fill:var(--g-ink2)}.g-muted-t{fill:var(--g-muted)}
.g-green-t{fill:var(--g-green-t)}.g-white-t{fill:var(--g-white)}
.g-price-t{fill:var(--g-green-t)}

/* Flächen und Linien, hell */
.g-ink{fill:var(--g-ink)}
.g-green{fill:var(--g-green)}
.g-white{fill:var(--g-white)}
.g-card{fill:var(--g-white);stroke:var(--g-line);stroke-width:1.5}
.g-card--strong{stroke:var(--g-green);stroke-width:2.5}
.g-box{fill:var(--g-white);stroke:var(--g-line);stroke-width:1.5}
.g-chip{fill:var(--g-ground);stroke:var(--g-line);stroke-width:1}
.g-q{fill:var(--g-ground);stroke:var(--g-ink);stroke-width:1.5}
.g-plat{fill:var(--g-white);stroke:var(--g-green);stroke-width:2.5}
.g-house{fill:var(--g-panel)}
.g-rule{stroke:var(--g-line);stroke-width:1}
.g-rule-strong{stroke:var(--g-ink);stroke-width:1.5}
.g-line-path{fill:none;stroke:var(--g-ink2);stroke-width:1.5}
.g-line-path--strong{stroke:var(--g-green);stroke-width:3}
.g-head{fill:var(--g-ink2)}
.g-head--strong{fill:var(--g-green)}
.g-price{fill:var(--g-soft);stroke:var(--g-green-t);stroke-width:1}
.g-hollow{fill:var(--g-white);stroke:var(--g-green-t);stroke-width:2.5}
.g-track{fill:var(--g-line)}
.g-track-line{stroke:var(--g-line);stroke-width:4;stroke-linecap:round}
.g-green-line{stroke:var(--g-green);stroke-width:4;stroke-linecap:round}
.g-dash{stroke:var(--g-ink2);stroke-width:2;stroke-dasharray:6 6}
.g-lid{fill:var(--g-ink)}
.g-step{fill:var(--g-ground);stroke:var(--g-line);stroke-width:1}
.g-step--first{fill:var(--g-soft);stroke:var(--g-green-t)}
.g-signal{fill:var(--g-signal)}
.g-tick circle{fill:var(--g-green)}
.g-tick path{fill:none;stroke:var(--g-on-green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Flächen und Linien, dunkler Leitstand (G01, Häuser) */
.g-panel{fill:var(--g-panel)}
.g-panel2{fill:var(--g-panel2)}
.g-d-rule{stroke:rgba(255,255,255,.1);stroke-width:1}
.g-d-track{fill:rgba(255,255,255,.12)}
.g-d-strong{fill:#FFFFFF}
.g-d-text{fill:#DDE4DC}
.g-d-muted{fill:#AEB9AE}
.g-signal-soft{fill:rgba(255,176,32,.1);stroke:rgba(255,176,32,.5);stroke-width:1}

/* Schloss */
.g-lock path{fill:none;stroke:var(--g-ink);stroke-width:2.4}
.g-lock rect{fill:var(--g-ink)}
.g-lock circle{fill:var(--g-white)}
.g-lock--w path{stroke:var(--g-white)}
.g-lock--w rect{fill:var(--g-white)}
.g-lock--w circle{fill:var(--g-panel)}

/* Flächensymbole G05 und G11 */
.g-sym{fill:var(--g-ink)}
.g-cut{fill:var(--g-cut)}
.g-sym-line{fill:none;stroke:var(--g-ink);stroke-width:3;stroke-linecap:round}
.g-cut-line{fill:none;stroke:var(--g-cut);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.xs-gsym{width:3rem;height:3rem;flex:none;display:block}

/* Logo-Platzhalter und Namensprobe (Briefing 3.3 und G12): leer „Ihr Logo“ auf grauem Feld,
   mit Namen der Firmenname in Poppins 700. Der Zustand kommt aus [data-xs-initials].is-empty (assets/js/main.js). */
.xs-gfo{width:100%;height:100%;display:flex;align-items:center;font-family:var(--xs-font,"Poppins",sans-serif)}
.xs-glogo{display:inline-flex;align-items:center;max-width:100%;height:100%;padding:0 .75em;border-radius:6px;background:var(--g-line,#DDD);color:var(--g-ink2,#4A504A);font-size:12px;font-weight:400;line-height:1;transition:background-color .2s,color .2s,padding .2s}
.xs-glogo-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.xs-glogo:not(:has(.is-empty)){background:transparent;padding:0;font-size:15px;font-weight:700;color:var(--g-ink,#2E332E)}
.xs-glogo--dark:not(:has(.is-empty)){color:#FFFFFF}
.xs-gline{padding-left:18px;font-size:12px;color:var(--g-ink2,#4A504A)}
.xs-gline b{font-weight:700;color:var(--g-ink,#2E332E)}

/* G01 im Hero: Schatten, auf großen Bildschirmen leicht gekippt (höchstens 6 Grad) */
.xs-g--g01 .xs-gs{border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.18)}
@media (min-width:992px){
  .xs-g--tilt{perspective:1800px}
  .xs-g--tilt .xs-gs{transform:rotateY(-5deg) rotateX(1.5deg);transform-origin:left center}
}
@media (prefers-reduced-motion:reduce){.xs-glogo,.xs-glogo-t{transition:none}}
.xs-demo--g01{gap:1rem}
.xs-hero-lead{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.35;font-weight:600;color:var(--xs-ink);margin:-.25rem 0 1rem;max-width:30ch}
.xs-hero-lead em{font-style:normal;background:linear-gradient(transparent 62%,var(--xs-soft-2,#D2F1C8) 62%)}

/* Dreiklang: das Wort aus dem Dachsatz mit grüner Unterlegung, darunter G04 */
.xs-pillar .xs-mark{background:linear-gradient(transparent 62%,var(--xs-soft-2,#D2F1C8) 62%);padding-inline:2px}
.xs-g--card .xs-gs{max-width:520px}

/* Vier Türen: Flächensymbol oben links statt Linien-Symbol im Kreis */
.xs-door-sym{display:block;flex:none;--g-cut:var(--xs-surface,#FFFFFF)}
.xs-door-sym .xs-gsym{width:3rem;height:3rem}
.xs-door .xs-sit{font-style:italic}

/* Sicherheit mit den Symbolen aus G11 */
.xs-secrow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem}
.xs-secrow li{display:grid;gap:.75rem;align-content:start;font-size:.97rem;font-weight:500;color:var(--xs-ink);line-height:1.4}
.xs-secrow .xs-gsym{width:3rem;height:3rem}
@media (max-width:991.98px){.xs-secrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:575.98px){.xs-secrow{grid-template-columns:minmax(0,1fr)}.xs-secrow li{grid-template-columns:3rem minmax(0,1fr);align-items:center;gap:1rem}}

/* Grafik auf heller Karte innerhalb eines dunklen Abschnitts (tiers mit ladder) */
.xs-g-card{background:#FFFFFF;border-radius:12px;padding:clamp(1rem,3vw,2rem);margin:1.5rem 0}
.xs-g-card .xs-g figcaption{color:var(--xs-muted)}

/* Dunkler Leitstand-Abschnitt (Treppe, Preisstufen). Unabhängig von premium.css, das nur Landingpages laden. */
.xs-sec--panel{background:var(--xs-panel,#1F231F);color:#E9EEE8}
.xs-sec--panel h1,.xs-sec--panel h2,.xs-sec--panel h3{color:#FFFFFF}
.xs-sec--panel .xs-sh p,.xs-sec--panel p{color:#C9D2C8}
.xs-sec--panel .xs-eyebrow,.xs-sec--panel .xs-arrow,.xs-sec--panel .xs-arrow:hover{color:var(--xs-green,#1DD908)}

/* components/vows.css */
/* Zusagen als Vertragsliste */
.xs-vows{border-top:2px solid var(--xs-ink)}
.xs-vow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--xs-line);align-items:baseline}
.xs-vow b{font-size:clamp(1.1rem,1.9vw,1.38rem);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.xs-vow span{color:var(--xs-ink-2)}
@media (max-width:767.98px){.xs-vow{grid-template-columns:minmax(0,1fr);gap:.25rem}}

/* components/ways.css */
/* Zwei Wege mit Weichenfrage */
.xs-ways-q{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;margin-bottom:1.4rem}
.xs-ways-q>span{font-size:1.19rem;font-weight:600}
.xs-seg{display:inline-flex;flex-wrap:wrap;background:var(--xs-surface);border:1.5px solid var(--xs-line-2);border-radius:.7rem;padding:.25rem;gap:.25rem}
.xs-seg .btn{--bs-btn-padding-y:.55rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:.9rem;--bs-btn-color:var(--xs-ink-2);--bs-btn-hover-color:var(--xs-ink);--bs-btn-active-bg:var(--xs-band);--bs-btn-active-color:var(--xs-band-ink);border:0;flex:1 1 auto}
.xs-seg .btn[aria-pressed="true"]{background:var(--xs-band);color:var(--xs-band-ink)}
.xs-way{background:var(--xs-surface);border:1.5px solid var(--xs-line);border-radius:var(--xs-radius-lg);padding:1.6rem;display:grid;gap:1.1rem;align-content:start;height:100%;transition:opacity .2s,border-color .2s,box-shadow .2s}
[data-pick="connect"] .xs-way[data-card="wms"],[data-pick="wms"] .xs-way[data-card="connect"]{opacity:.42}
[data-pick="connect"] .xs-way[data-card="connect"],[data-pick="wms"] .xs-way[data-card="wms"]{border-color:var(--xs-green);box-shadow:var(--xs-shadow)}
.xs-way-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.xs-way-head h3{font-size:1.4rem;margin:0}
.xs-dl{margin:0;border-top:1px solid var(--xs-line)}
.xs-dl>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.9rem;padding:.8rem 0;border-bottom:1px solid var(--xs-line)}
.xs-dl dt{font-size:.8rem;font-weight:600;color:var(--xs-muted);padding-top:.1rem}
.xs-dl dd{margin:0;font-size:.97rem;color:var(--xs-ink-2)}
.xs-price-line{font-family:var(--xs-mono);font-size:1.25rem!important;font-weight:500;color:var(--xs-ink)!important}
@media (max-width:575.98px){.xs-dl>div{grid-template-columns:minmax(0,1fr);gap:.1rem}}