/* Soltair Marketing-Webseite — Mailbox-/Portal-Stil.
   Design-Tokens 1:1 aus dem Portal (styles.css :root + [data-theme="light"]),
   damit Webseite und Portal eine durchgängige Marke bilden. */

:root{
  color-scheme:dark;
  --bg:#0b0f14;
  --panel:#121924;
  /* Heisst im Admin-Cockpit --surface-2 und traegt dort #0f1620. */
  --panel-2:#0f1620;
  --text:#e7eef6;
  --muted:#9fb0c2;
  /* Wert bleibt deckungsgleich mit dem Portal (tests/designTokenConsistency).
     Achtung: --muted-2 trägt auf --surface nur 4,48:1 und ist damit für
     Fließtext zu schwach; auf --bg (4,88:1) und --panel-2 (4,64:1) genügt er.
     Deshalb steht der Formularhinweis auf --muted statt auf --muted-2. */
  --muted-2:#6e829b;
  --border:#1f2b3a;
  --surface:#121924;
  --accent:#ff8800;
  --accent-2:#ffd700;
  /* Statusfamilie des Admin-Cockpits, seit 2026-09-02 fuer alle vier Oberflaechen gleich
     (Cockpit, Portal, Angebotsseite, Marketing). Dunkel ist es der kraeftige Ton, aus dem
     das Cockpit --success-soft/--warning-soft/--danger-soft mischt.
     Vorher standen hier noch die Portal-Werte von vor der Angleichung: #ffd166 und #ff5d73.
     Der Rahmen ungueltiger Formularfelder gewinnt dadurch von 5,94:1 auf 6,36:1. */
  --good:#3bd671;
  /* --warn hat derzeit keinen Abnehmer (die Platzhalter-Auszeichnung der
     Rechtsseiten ist entfallen), bleibt aber als dritter Statuston stehen. */
  --warn:#f7b500;
  --bad:#ff6b6b;
  /* Textfarbe AUF Akzentflaechen. Gestaltungsentscheidung des Betreibers vom 2026-09-02:
     einheitlich Weiss, nach dem Vorbild von admin-cockpit.html. Gemessen und in Kenntnis
     der Messung entschieden: Weiss traegt auf dem Akzent 2,39:1 (dunkel) und 4,13:1 (hell),
     der zuvor hier stehende dunkle Ton 8,03:1 und 4,65:1. Gleicher Wert wie im Portal. */
  --accent-contrast:#ffffff;
  /* Ausnahme fuer die beiden Plaketten auf einem VERLAUF von --accent nach --accent-2:
     Der Verlauf endet in Gold bzw. Hellblau, dort traegt Weiss nur 1,40:1 bzw. 2,40:1 und
     ist praktisch unsichtbar. Das ist nicht "unter der Schwelle", sondern unlesbar, deshalb
     bleibt es hier beim dunklen Ton (er traegt ueber den ganzen Verlauf). */
  --accent-gradient-contrast:#0b0f14;
  /* Akzentfarbe FUER Text auf normalen Flaechen. Im dunklen Thema deckungsgleich
     mit --accent, im hellen Thema abgedunkelt, weil #0077ff dort nur 3,91:1 traegt.
     Regel: --accent fuellt Flaechen und Rahmen, --accent-text schreibt. */
  --accent-text:var(--accent);
  --good-text:var(--good);
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.02);
  --surface-hover-border:color-mix(in srgb,var(--accent) 32%,var(--border));
  --surface-card-bg:
    radial-gradient(120% 110% at 0 0, color-mix(in srgb,var(--accent) 12%,transparent), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 54%),
    color-mix(in srgb,var(--panel) 88%,var(--panel-2));
  --surface-soft-bg:
    radial-gradient(120% 90% at 0 0, color-mix(in srgb,var(--accent) 6%,transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
    color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  --surface-soft-border:color-mix(in srgb,var(--border) 82%,transparent);
  --surface-card-shadow:0 22px 54px rgba(5,10,20,.28);
  --surface-focus-ring:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);
  --scrollbar-track:rgba(255,255,255,.06);
  --scrollbar-thumb:rgba(255,255,255,.24);
  --scrollbar-thumb-hover:rgba(255,255,255,.32);

  /* Abstandsstufen. Alles im Raster 4/6/8/10/12/14/16/20/22/28/40/56, damit
     Luecken und Innenabstaende nicht mehr aus Einzelwerten entstehen. */
  --space-3xs:4px;
  --space-2xs:6px;
  --space-xs:8px;
  --space-sm:10px;
  --space-md:12px;
  --space-lg:14px;
  --space-xl:16px;
  --space-2xl:20px;
  --space-3xl:28px;
  --space-4xl:40px;
  --space-5xl:56px;
  /* Seitenrand: gilt fuer Kopf, Hero, Abschnitte und Fuss gemeinsam, damit die
     linke Kante ueber alle Baender hinweg auf einer Linie liegt. */
  --page-pad:20px;
  /* Innenabstand der Karten (grosse Kachel) und der Listenzeilen (schmale Zeile). */
  --pad-card:22px;
  --pad-panel:18px;
  --pad-row:14px;
  /* Luecke zwischen Kacheln eines Rasters bzw. zwischen Zeilen einer Liste. */
  --grid-gap:14px;
  --list-gap:6px;

  --radius-large:14px;
  --radius-medium:12px;
  --radius-small:10px;
  --radius-tiny:8px;
  --badge-radius:999px;
  --border-strong:1.5px solid var(--border);
  --border-thin:1px solid var(--border);
  --label-size:11px;
  --label-tracking:.5px;
  --site-max-width:1120px;
}
@media (max-width: 600px){
  :root{ --page-pad:16px; --pad-card:18px; }
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f9fc; --panel:#ffffff; --panel-2:#edf2f7; --surface:#ffffff; --text:#0d2438;
  --muted:#4a5b6b; --muted-2:#5b6b7d; --border:#dbe5ef; --accent:#0077ff; --accent-2:#66aaff;
  /* Statusfamilie hell = --success/--warning/--danger des Cockpits. Das Cockpit ueberschreibt
     die drei im Hellmodus nicht, zeigt dort also diese Werte. Gemessen: der Statuspunkt im
     Kopfbereich gewinnt von 3,07:1 auf 3,13:1, die Plakette von 4,64:1 auf 4,65:1.
     Verschlechterung, bewusst in Kauf genommen: Der Rahmen ungueltiger Formularfelder faellt
     von 5,81:1 auf 4,55:1 (Grenze fuer Bedienelemente ist 3:1, also weiterhin klar darueber),
     und der Rahmen der Fehlermeldung im Kontaktformular von 2,98:1 auf 2,30:1. Der lag schon
     vorher unter der Schwelle; getragen wird die Meldung ohnehin vom Text auf --text
     (13,11:1) und vom Symbol davor, nicht vom Rahmen. */
  --good:#28a745; --warn:#b88300; --bad:#d04545; --shadow:0 8px 24px rgba(10,20,30,.08);
  /* Abgedunkelte Schreibfarben: #0077ff traegt auf Weiss nur 4,13:1, #28a745 nur 3,13:1.
     --accent-text ist der gleichnamige Token des Cockpits (vorher #0060d0 mit 5,86:1,
     jetzt 6,62:1). --good-text kennt das Cockpit nicht und bleibt hausgemacht: der
     Cockpit-Gruenton wuerde als Schrift auf der eigenen Toenung nur 3,13:1 tragen. */
  --accent-text:#0056c9;
  --good-text:#0a7a3d;
  --scrollbar-track:#edf2f7;
  --scrollbar-thumb:rgba(0,86,201,.35);
  --scrollbar-thumb-hover:rgba(0,86,201,.5);
  --surface-card-bg:
    radial-gradient(120% 110% at 0 0, color-mix(in srgb,var(--accent) 12%,transparent), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,0) 54%),
    color-mix(in srgb,var(--panel) 88%,var(--panel-2));
  --surface-soft-bg:
    radial-gradient(120% 90% at 0 0, color-mix(in srgb,var(--accent) 6%,transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 58%),
    color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  --surface-card-shadow:0 20px 42px rgba(12,32,54,.1);
}

*,*::before,*::after{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-track{background:var(--scrollbar-track); border-radius:var(--badge-radius)}
*::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:var(--badge-radius); border:2px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover); background-clip:content-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html,body{margin:0}

/* Sichtbarer Tastaturfokus auf allem, was bedienbar ist. Ohne diese Regel bleibt
   nur der Browserstandard (1px, fast schwarz), der im dunklen Thema verschwindet. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Fuer Maus- und Fingerbedienung keinen Ring zeichnen. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus:not(:focus-visible){outline:none}

/* Sprunglink. Er steht als erstes Element im Rumpf und bleibt verborgen, bis ihn jemand
   mit der Tastatur erreicht. Ohne ihn stehen sieben Navigationspunkte auf JEDER Seite vor
   dem Inhalt. Bewusst nicht mit display:none oder visibility:hidden verborgen: Beides
   nimmt das Element aus der Tabulatorreihenfolge, und dann gibt es den Sprunglink zwar,
   aber niemand kann ihn erreichen. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  padding:var(--space-xs, 10px) var(--space-md, 16px);
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--accent);
  border-radius:var(--radius-medium, 10px);
  text-decoration:none;
  font-weight:600;
}
.skip-link:focus{
  left:var(--space-sm, 12px);
  top:var(--space-sm, 12px);
}
body{
  min-height:100vh;
  font:15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  background:
    radial-gradient(1200px 600px at 50% -200px, color-mix(in srgb, var(--accent) 6%, transparent), transparent),
    var(--bg);
  color:var(--text);
  display:flex; flex-direction:column;
}
/* Kein Übergang auf background/color: nur <body> hätte sanft geblendet, alle
   übrigen Flächen springen sofort. Beim Wechsel des Farbschemas stand deshalb
   für 0,4 Sekunden helle Schrift auf hellem Grund. */
img{max-width:100%; height:auto}
a{color:inherit}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.site-header__inner{
  max-width:var(--site-max-width); margin:0 auto; padding:0 var(--page-pad);
  min-height:64px; display:flex; align-items:center; gap:var(--space-xl);
}
/* padding statt reiner Zeilenhoehe: ergibt ein 44px hohes Tippziel. */
.site-brand{
  display:flex; gap:var(--space-sm); align-items:center; padding:var(--space-xs) 0;
  font-weight:700; font-size:16px; text-decoration:none; letter-spacing:.3px;
}
.site-brand i{
  width:28px; height:28px; border-radius:var(--radius-tiny); flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 28px color-mix(in srgb, var(--accent) 35%, transparent);
}
.site-nav{display:flex; gap:2px; align-items:center; margin-left:auto}
.site-nav a{
  text-decoration:none; color:var(--muted); font-size:14px;
  padding:8px 12px; border-radius:var(--radius-tiny); border:1px solid transparent;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
  white-space:nowrap;
}
.site-nav a:hover{color:var(--text); border-color:var(--surface-hover-border)}
.site-nav a.is-active{color:var(--text); background:color-mix(in srgb,var(--accent) 14%, transparent); border-color:color-mix(in srgb,var(--accent) 45%, var(--border))}
.site-nav .btn{margin-left:var(--space-xs)}
/* .site-nav a (0,1,1) würde sonst die Button-Farben überschreiben.
   Der Hover steht bewusst als eigene Regel: vorher lag er in derselben
   Aufzählung und der Knopf reagierte auf der ganzen Seite nicht auf den Zeiger. */
.site-nav a.btn--accent, .site-nav a.btn--accent.is-active{color:var(--accent-contrast); background:var(--accent); border-color:transparent}
.site-nav a.btn--accent:hover{color:var(--accent-contrast); background:color-mix(in srgb,var(--accent) 88%, #000); border-color:transparent}
[data-theme="light"] .site-nav a.btn--accent:hover{background:color-mix(in srgb,var(--accent) 88%, #fff)}
.site-header__toggle{display:none}

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-tiny);
  background:transparent; border:var(--border-thin); color:var(--muted); cursor:pointer;
  font-size:15px; line-height:1; margin-left:var(--space-2xs); flex:0 0 auto;
}
.theme-toggle:hover{color:var(--text); border-color:var(--accent)}

/* Mobile-Navigation */
@media (max-width: 900px){
  .site-header__toggle{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto; width:44px; height:44px;
    background:transparent; border:var(--border-thin); border-radius:var(--radius-tiny);
    color:var(--text); font-size:18px; cursor:pointer;
  }
  .site-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:var(--space-3xs);
    background:var(--panel); border-bottom:1px solid var(--border);
    padding:var(--space-md) var(--page-pad) var(--space-xl); box-shadow:var(--shadow);
  }
  .site-nav.is-open{display:flex}
  .site-nav a{padding:var(--space-md) var(--space-lg); font-size:15px}
  .site-nav .btn{margin-left:0; margin-top:var(--space-2xs); justify-content:center}
  .theme-toggle{width:40px; height:40px; margin-left:var(--space-xs)}
}

/* ===== Grundgerüst ===== */
main{flex:1 0 auto; width:100%}
.section{max-width:var(--site-max-width); margin:0 auto; padding:var(--space-5xl) var(--page-pad)}
.section--tight{padding-top:var(--space-3xl)}
.section__head{max-width:720px; margin-bottom:var(--space-3xl)}
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-xs);
  font-size:var(--label-size); letter-spacing:var(--label-tracking);
  text-transform:uppercase; font-weight:600; color:var(--accent-text);
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--accent); border-radius:2px}
h1,h2,h3{line-height:1.2; margin:0}
.section__head h1, .section__head h2{margin:var(--space-sm) 0 var(--space-md); font-size:clamp(26px, 4vw, 40px); letter-spacing:-.02em}
.section__head p{margin:0; color:var(--muted); font-size:16px}

/* ===== Hero ===== */
.hero{position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.hero__inner{
  position:relative; z-index:1;
  max-width:var(--site-max-width); margin:0 auto; padding:84px var(--page-pad) 64px;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center;
}
.hero h1{font-size:clamp(32px, 5vw, 52px); letter-spacing:-.02em; margin:var(--space-lg) 0 var(--space-2xl)}
.hero h1 em{font-style:normal; color:var(--accent-text)}
.hero p{color:var(--muted); font-size:17px; margin:0 0 var(--space-3xl); max-width:520px}
.hero__actions{display:flex; gap:var(--space-md); flex-wrap:wrap}
.hero__note{margin-top:var(--space-2xl); font-size:13px; color:var(--muted-2)}
.hero__media{position:relative; min-width:0}
.hero__media img{
  display:block; width:100%; border-radius:var(--radius-large);
  border:var(--border-strong); box-shadow:var(--surface-card-shadow);
}
.hero__badge{
  position:absolute; left:-14px; bottom:22px;
  display:inline-flex; align-items:center; gap:var(--space-xs);
  background:var(--panel); border:1px solid color-mix(in srgb,var(--good) 45%, var(--border));
  border-radius:var(--badge-radius); padding:var(--space-xs) var(--space-lg); font-size:13px; font-weight:600;
  box-shadow:var(--shadow);
}
.hero__badge .dot{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good)}
@media (max-width: 900px){
  .hero__inner{grid-template-columns:1fr; padding:var(--space-5xl) var(--page-pad) var(--space-4xl); gap:32px}
  .hero__badge{left:10px}
}

/* ===== Buttons (Portal-.btn) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs);
  background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  color:var(--text); border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  border-radius:var(--radius-small); padding:var(--space-sm) var(--space-2xl); font-size:14px; font-weight:600;
  min-height:44px; cursor:pointer; text-decoration:none;
  /* Nur der Rahmen wird weich. Ein Übergang auf background-color würde beim
     Wechsel des Farbschemas 150 ms lang eine graue Zwischenfarbe zeigen. */
  transition:border-color .15s ease;
}
.btn:hover{border-color:var(--accent)}
/* Weiss auf dem Akzent, einheitlich mit Portal und Cockpit (Entscheidung 2026-09-02).
   Der Wert und die Messung stehen an --accent-contrast oben. */
.btn--accent{background:var(--accent); color:var(--accent-contrast); border-color:transparent; font-weight:700}
/* Hover identisch zur Portal-Familie (.btn.primary): abdunkeln statt aufhellen. */
.btn--accent:hover{background:color-mix(in srgb,var(--accent) 88%, #000); border-color:transparent}
/* Ausnahme helles Thema: Abdunkeln von #0077ff druecken den dunklen Knopftext auf
   3,86:1. Dort wird aufgehellt, das ergibt 5,47:1 und bleibt als Hover erkennbar. */
[data-theme="light"] .btn--accent:hover{background:color-mix(in srgb,var(--accent) 88%, #fff)}
.btn--large{padding:var(--space-md) var(--space-3xl); font-size:15px; min-height:48px}

/* ===== Karten & Grids =====
   Flaechenordnung der Seite, damit nicht jede Kachel ihre eigene Erfindung ist:
   1. Werbekachel (.card, .cta-band): --surface-card-bg, --radius-large
   2. Inhaltskachel (.stat, .step, .partner-card, .team-card, .ablauf-step):
      --surface-soft-bg, --radius-large
   3. Listenzeile (.feature-item, .faq-item) und Formular: --surface, --radius-medium */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--grid-gap)}
.card{
  background:var(--surface-card-bg);
  border:var(--border-strong); border-radius:var(--radius-large);
  padding:var(--pad-card); display:flex; flex-direction:column; gap:var(--space-sm);
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:var(--surface-hover-border); transform:translateY(-2px)}
.card h3{font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}
.card__icon{
  width:38px; height:38px; border-radius:var(--radius-small);
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%, transparent);
  color:var(--accent-text); font-size:18px;
}

/* ===== Status-Pills (Portal-.app-status) ===== */
.pill{
  display:inline-flex; align-items:center; gap:var(--space-2xs);
  padding:var(--space-3xs) var(--space-sm); border:var(--border-thin); border-radius:var(--badge-radius);
  font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.pill--accent{color:var(--accent-text); border-color:color-mix(in srgb,var(--accent) 45%, var(--border)); background:color-mix(in srgb,var(--accent) 10%, transparent)}
.pill--good{color:var(--good-text); border-color:color-mix(in srgb,var(--good) 45%, var(--border)); background:color-mix(in srgb,var(--good) 10%, transparent)}

/* ===== Statistiken ===== */
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--grid-gap)}
.stat{
  background:var(--surface-soft-bg); border:1.5px solid var(--surface-soft-border); border-radius:var(--radius-large);
  padding:var(--pad-card); display:flex; flex-direction:column; gap:var(--space-2xs);
}
.stat__value{font-size:clamp(28px, 3.4vw, 40px); font-weight:700; letter-spacing:-.02em; color:var(--accent-text); font-variant-numeric:tabular-nums}
.stat__label{font-size:var(--label-size); letter-spacing:var(--label-tracking); text-transform:uppercase; font-weight:600; color:var(--muted)}

/* ===== Prozess-Schritte ===== */
.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--grid-gap); counter-reset:step}
.step{
  position:relative; counter-increment:step;
  background:var(--surface-soft-bg); border:1.5px solid var(--surface-soft-border); border-radius:var(--radius-large);
  padding:52px var(--pad-card) var(--pad-card);
}
.step::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; top:var(--space-xl); left:var(--pad-card);
  font-size:13px; font-weight:700; color:var(--accent-text);
  background:color-mix(in srgb,var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%, var(--border));
  border-radius:var(--badge-radius); padding:3px var(--space-sm);
}
.step h3{font-size:15px; margin-bottom:var(--space-xs)}
.step p{margin:0; color:var(--muted); font-size:14px}

/* ===== Ablauf-Seite: nummerierte Schritte ===== */
.ablauf-steps{display:flex; flex-direction:column; gap:var(--space-md); max-width:820px}
.ablauf-step{
  display:flex; gap:var(--space-xl); align-items:flex-start; padding:var(--pad-panel);
  background:var(--surface-soft-bg); border:1.5px solid var(--surface-soft-border); border-radius:var(--radius-large);
  transition:border-color .15s ease, transform .15s ease;
}
.ablauf-step:hover{border-color:var(--surface-hover-border); transform:translateY(-2px)}
.ablauf-step__num{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:17px; color:var(--accent-gradient-contrast);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.ablauf-step h3{margin:var(--space-2xs) 0; font-size:16px}
.ablauf-step p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}

/* ===== Team (ohne Fotos: Initialen-Avatar im Markenverlauf) ===== */
.team-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:var(--grid-gap)}
.team-grid--single{grid-template-columns:minmax(230px, 420px)}
.team-card{
  background:var(--surface-soft-bg); border:1.5px solid var(--surface-soft-border); border-radius:var(--radius-large);
  overflow:hidden; display:flex; align-items:center; gap:var(--space-lg); padding:var(--pad-panel);
  transition:border-color .15s ease, transform .15s ease;
}
.team-card:hover{border-color:var(--surface-hover-border); transform:translateY(-2px)}
/* Verlaufsplakette, siehe --accent-gradient-contrast: Weiss endet hier bei --accent-2
   (Gold bzw. Hellblau) mit 1,40:1 bzw. 2,40:1 und waere praktisch unsichtbar. */
.team-card__avatar{flex-shrink:0; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; letter-spacing:.02em; color:var(--accent-gradient-contrast); background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent)}
.team-card__body{display:flex; flex-direction:column; gap:var(--space-3xs); min-width:0}
.team-card__name{font-weight:600; font-size:15px}
.team-card__role{font-size:var(--label-size); letter-spacing:var(--label-tracking); text-transform:uppercase; font-weight:600; color:var(--accent-text)}

/* ===== Listen-Karten (Mailbox-.app-list-item) ===== */
.feature-list{display:flex; flex-direction:column; gap:var(--list-gap)}
.feature-item{
  background:var(--surface); border:var(--border-strong); border-radius:var(--radius-medium);
  padding:var(--pad-row) var(--space-xl); display:flex; gap:var(--space-lg); align-items:flex-start;
  transition:border-color .15s ease;
}
.feature-item:hover{border-color:var(--surface-hover-border)}
.feature-item__check{
  flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:color-mix(in srgb,var(--good) 14%, transparent);
  color:var(--good-text); font-size:12px; font-weight:700;
}
.feature-item strong{display:block; font-size:14px; margin-bottom:2px}
.feature-item span{color:var(--muted); font-size:13px}

/* ===== FAQ (Accordion) ===== */
.faq-list{display:flex; flex-direction:column; gap:var(--list-gap); max-width:820px}
.faq-item{
  background:var(--surface); border:var(--border-strong); border-radius:var(--radius-medium);
  overflow:hidden; transition:border-color .15s ease;
}
.faq-item[open]{border-color:var(--surface-hover-border)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:var(--space-xl) var(--pad-panel);
  display:flex; align-items:center; gap:var(--space-md); font-weight:600; font-size:15px;
}
.faq-item summary::-webkit-details-marker{display:none}
/* Fokusring auf dem ganzen Balken statt nur um den Text herum. */
.faq-item summary:focus-visible{outline-offset:-3px}
.faq-item summary::after{
  content:"+"; margin-left:auto; color:var(--accent-text); font-size:18px; font-weight:400;
  transition:transform .2s ease; flex:0 0 auto;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item__body{padding:0 var(--pad-panel) var(--pad-panel); color:var(--muted); font-size:14px}
.faq-item__body p{margin:0 0 var(--space-sm)}
.faq-item__body p:last-child{margin-bottom:0}
.faq-item__body ul{margin:0 0 var(--space-sm); padding-left:var(--space-2xl)}

/* ===== Partner ===== */
.partner-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--grid-gap)}
.partner-card{
  background:var(--surface-soft-bg); border:1.5px solid var(--surface-soft-border); border-radius:var(--radius-large);
  padding:var(--pad-panel); display:flex; flex-direction:column; gap:var(--space-xs);
  transition:border-color .15s ease;
}
.partner-card:hover{border-color:var(--surface-hover-border)}
.partner-card h3{font-size:15px}
.partner-card__claim{color:var(--accent-text); font-size:13px; font-style:italic}
.partner-card p{margin:0; color:var(--muted); font-size:13px}

/* ===== CTA-Band ===== */
.cta-band{
  background:var(--surface-card-bg); border:var(--border-strong); border-radius:var(--radius-large);
  padding:var(--space-4xl) 32px; display:flex; flex-wrap:wrap; gap:var(--space-2xl); align-items:center; justify-content:space-between;
  box-shadow:var(--surface-card-shadow);
}
.cta-band h2{font-size:clamp(20px, 3vw, 28px); margin-bottom:var(--space-2xs)}
.cta-band p{margin:0; color:var(--muted)}

/* ===== Formular (Portal-Feld-Stil) ===== */
.contact-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--space-3xl); align-items:start}
@media (max-width: 900px){ .contact-layout{grid-template-columns:1fr} }
.contact-aside{display:flex; flex-direction:column; gap:var(--grid-gap)}
.contact-aside .card{gap:var(--space-2xs)}
/* padding:6px 0 statt reiner Zeilenhoehe: Telefon und E-Mail werden zu 28px hohen Tippzielen. */
.contact-aside .card a{color:var(--text); text-decoration:none; font-weight:600; padding:var(--space-2xs) 0}
.contact-aside .card a:hover{color:var(--accent-text)}

.form-card{
  background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large);
  padding:var(--pad-card); display:flex; flex-direction:column; gap:var(--space-xl);
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md)}
.form-grid .field--full{grid-column:1 / -1}
@media (max-width: 640px){ .form-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:var(--space-2xs); min-width:0}
.field label{
  font-size:var(--label-size); letter-spacing:var(--label-tracking);
  text-transform:uppercase; font-weight:600; color:var(--muted);
}
.field label .req{color:var(--accent-text)}
.field input, .field select, .field textarea{
  width:100%; background:var(--panel-2); color:var(--text);
  border:var(--border-thin); border-radius:var(--radius-small);
  padding:var(--space-sm) var(--space-md); font:inherit; font-size:14px;
  min-height:44px;
}
.field textarea{resize:vertical; min-height:110px}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  border-color:var(--accent); box-shadow:var(--surface-focus-ring);
}
/* --muted-2 ergäbe auf --surface nur 4,48:1, --muted trägt 7,95:1. */
.field .hint{font-size:12px; color:var(--muted)}
.field--invalid input, .field--invalid textarea, .field--invalid select{border-color:var(--bad)}
.checkbox-row{display:flex; flex-direction:row; gap:var(--space-sm); align-items:flex-start; font-size:13px; color:var(--muted)}
/* min-height:0 hebt die 44px der Textfelder auf: das Kaestchen bleibt ein Kaestchen,
   das Tippziel ist ohnehin das gesamte <label> daneben. */
.checkbox-row input{width:20px; height:20px; min-height:0; margin-top:1px; accent-color:var(--accent); flex:0 0 auto}
.checkbox-row a{color:var(--text)}
/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.field--website{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}

/* Erfolg/Fehler im Mailbox-Match-Box-Stil */
.form-status{display:none; border-radius:var(--radius-medium); padding:var(--pad-row) var(--space-xl); font-size:14px; gap:var(--space-sm); align-items:flex-start}
.form-status.is-visible{display:flex}
.form-status__icon{flex:0 0 auto; font-size:16px; line-height:1.4}
.form-status--ok{border:1px solid color-mix(in srgb,var(--good) 50%, var(--border)); background:color-mix(in srgb,var(--good) 10%, transparent); color:var(--text)}
.form-status--danger{border:1px solid color-mix(in srgb,var(--bad) 50%, var(--border)); background:color-mix(in srgb,var(--bad) 10%, transparent); color:var(--text)}
.form-status strong{display:block; margin-bottom:2px}
.form-status span{color:var(--muted)}

/* ===== Rechtstexte ===== */
.legal{max-width:820px}
.legal h2{font-size:22px; margin:36px 0 var(--space-md)}
.legal h3{font-size:16px; margin:var(--space-3xl) 0 var(--space-xs)}
.legal p, .legal li{color:var(--muted); font-size:14px}
.legal ul{padding-left:var(--space-2xl)}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); background:var(--panel-2); margin-top:var(--space-4xl)}
.site-footer__inner{
  max-width:var(--site-max-width); margin:0 auto; padding:var(--space-4xl) var(--page-pad) var(--space-3xl);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-3xl);
}
.site-footer h4{
  margin:0 0 var(--space-md); font-size:var(--label-size); letter-spacing:var(--label-tracking);
  text-transform:uppercase; font-weight:600; color:var(--muted);
}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3xs)}
/* Zeilenhoehe allein ergab nur 16px hohe Tippziele; mit padding sind es 28px. */
.site-footer a{display:inline-block; padding:var(--space-2xs) 0; color:var(--muted); text-decoration:none; font-size:14px}
.site-footer a:hover{color:var(--accent-text)}
.site-footer p{margin:0; color:var(--muted); font-size:14px}
.site-footer__meta{
  max-width:var(--site-max-width); margin:0 auto; padding:var(--space-xl) var(--page-pad) var(--space-3xl);
  border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:var(--space-md); justify-content:space-between;
  color:var(--muted-2); font-size:12px;
}
.site-footer__meta a{display:inline-block; padding:var(--space-2xs) 0; color:var(--muted-2); text-decoration:none; font-size:12px}
.site-footer__meta a:hover{color:var(--accent-text)}

/* ===== Einblend-Animation (dezent, einmalig beim Laden/Scrollen) =====
   Nur aktiv, wenn JS läuft (html.js wird im Head-Bootstrap gesetzt), damit
   Inhalte ohne JS niemals unsichtbar bleiben. */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
  html.js .reveal.is-visible{opacity:1; transform:none}
}

/* ===== Reduzierte Bewegung =====
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine
   Überblendungen, kein weiches Scrollen und kein Anheben der Karten.
   Die Werte werden nicht auf 0 gesetzt, damit Übergänge, die ein Ereignis
   auslösen, weiterhin sauber abgeschlossen werden. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .card:hover, .ablauf-step:hover, .team-card:hover{transform:none}
}

/* ===== Druck =====
   AGB, Impressum und Datenschutz werden ausgedruckt. Zwei Dinge gingen dabei
   schief: der Browser druckt Hintergrundflächen nicht mit, sodass die helle
   Schrift des dunklen Schemas auf weißem Papier verschwand, und die noch nicht
   eingeblendeten .reveal-Blöcke (unter anderem das Kontaktformular) kamen als
   leere Fläche heraus. Dieser Block steht bewusst am Dateiende, damit seine
   Token-Werte die beiden Schema-Blöcke überschreiben. */
@media print{
  /* Die Farbtoken bleiben unangetastet (sie spiegeln das Portal, siehe
     tests/designTokenConsistency); für das Papier werden nur die Eigenschaften
     überschrieben. */
  html, body{background:#ffffff !important}
  h1, h2, h3, h4, p, li, span, strong, em, summary, label, td, th, dt, dd{color:#000000 !important}
  a{color:#000000 !important; text-decoration:underline}
  *, *::before, *::after{background-image:none !important; box-shadow:none !important}
  html.js .reveal{opacity:1 !important; transform:none !important}
  .site-header, .site-nav, .theme-toggle, .site-header__toggle{display:none !important}
  .section{padding:16px 0}
  .card, .stat, .step, .partner-card, .team-card, .ablauf-step,
  .feature-item, .faq-item, .form-card, .cta-band{border-color:#999999; break-inside:avoid}
  /* Zugeklappte Antworten sollen mitgedruckt werden. */
  .faq-item summary::after{display:none}
  .faq-item::details-content{content-visibility:visible !important; block-size:auto !important}
}