/**
 * SKYPhoenix IT — Phoenix DS (Design Foundation)
 * ================================================
 * Token- und Komponenten-Schicht für die öffentliche Website.
 * Wird NACH tailwind.css (statischer Build) und custom.css geladen.
 *
 * Token-Namen spiegeln das Portal (portal/assets/css/portal.css), damit
 * Website und Portal als eine Produktfamilie lesen.
 *
 * Kontrast-Regeln (alle Werte gemessen, WCAG 2.2 AA):
 * - phoenix-600/700 auf Weiß: 6.06:1 / 7.21:1 — Text und Buttons OK
 * - Weiß auf phoenix-600: 6.06:1 — CTA-Button OK
 * - Weiß auf navy-800/900: 11.5:1 / 14.5:1 — OK
 * - phoenix-Rot NIEMALS auf Navy (1.9:1 — FAIL), weder Text noch Button
 * - ember-500 (#ED6D1F) nur für Grafiken, Regeln >= 3px und große Ziffern
 */

/* --- Self-hosted Inter (variable, latin-Subset, 48 KB) --------------------
   Kein externes Font-Loading (DSGVO, LG München I 2022). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand — Navy (Anker #1E3A5F) */
  --color-navy-50:  #EEF2F7;
  --color-navy-100: #D8E2EC;
  --color-navy-200: #B3C5D8;
  --color-navy-300: #8AA5C0;
  --color-navy-400: #5C82A6;
  --color-navy-500: #3E6A94;
  --color-navy-600: #2D5A8A;
  --color-navy-700: #234A74;
  --color-navy-800: #1E3A5F;
  --color-navy-900: #152A45;
  --color-navy-950: #0E1D30;

  /* Brand — Phoenix (Anker #B92D26) */
  --color-phoenix-50:  #FBEFEE;
  --color-phoenix-100: #F5D9D6;
  --color-phoenix-200: #EAB3AE;
  --color-phoenix-300: #DB847D;
  --color-phoenix-400: #CB5A51;
  --color-phoenix-500: #B92D26;
  --color-phoenix-600: #B92D26;
  --color-phoenix-700: #A52723;
  --color-phoenix-800: #8A211E;
  --color-phoenix-900: #6E1B19;

  /* Brand — Ember (nur Grafiken/große Elemente, kein Kleintext) */
  --color-ember-500: #ED6D1F;
  --color-ember-700: #C2410C;

  /* Neutrals — Slate (identisch Portal) */
  --color-slate-900: #0F172A;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748B;
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  --color-slate-200: #E2E8F0;
  --color-slate-100: #F1F5F9;
  --color-slate-50:  #F8FAFC;
  --color-white: #FFFFFF;
  --color-ink: #231815; /* warmes Schwarz aus dem Logo — Headlines */

  /* Semantik (AA-geprüfte bg/text-Paare, identisch Portal) */
  --color-success-bg: #F0FDF4;
  --color-success-text: #15803D;
  --color-warning-bg: #FFFBEB;
  --color-warning-text: #92400E;
  --color-danger-bg: #FEF2F2;
  --color-danger-text: #B91C1C;
  --color-info-bg: #EFF6FF;
  --color-info-text: #1D4ED8;

  /* Fokus */
  --color-focus: #2563EB; /* blue-600, 5.17:1 auf Weiß, 3.1:1+ auf Navy */

  /* Typografie-Skala */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-display: 3.5rem;    /* 56px/60 — nur Homepage-H1 */
  --text-h1: 2.5rem;         /* 40px/48 */
  --text-h2: 1.875rem;       /* 30px/38 */
  --text-h3: 1.375rem;       /* 22px/30 */
  --text-lead: 1.25rem;      /* 20px/32 */
  --text-body: 1rem;         /* 16px/26 */
  --text-small: 0.875rem;    /* 14px/22 */
  --text-eyebrow: 0.8125rem; /* 13px/16, 600, uppercase, +0.08em */

  /* Spacing-Skala (4px-Basis, Deckung mit Tailwind) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Border widths (extracted design-system tokens) */
  --border-default: 1px;
  --border-accent: 4px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;   /* Buttons, Inputs */
  --radius-lg: 12px;  /* Cards */
  --radius-full: 9999px;

  /* Schatten (nahezu flach, Linear/Stripe-Stil — wie Portal) */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-card-hover: 0 10px 25px -5px rgba(15, 23, 42, .10), 0 8px 10px -6px rgba(15, 23, 42, .06);
  --shadow-pop: 0 10px 25px -5px rgba(15, 23, 42, .10), 0 8px 10px -6px rgba(15, 23, 42, .06);

  /* Motion */
  --dur: 150ms;
  --ease-out: cubic-bezier(0, 0, .2, 1);

  /* Brand-Signaturen (sparsam einsetzen) */
  --gradient-hero: linear-gradient(135deg, #1E3A5F 0%, #152A45 100%);
  --gradient-phoenix-rule: linear-gradient(90deg, #B92D26, #ED6D1F); /* nur dekorative Regeln >= 3px */
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

/* Der eine Conversion-Button pro Viewport: Weiß auf Phoenix (6.06:1) */
.btn-primary {
  background-color: var(--color-phoenix-600);
  color: var(--color-white);
}
.btn-primary:hover {
  background-color: var(--color-phoenix-700);
  color: var(--color-white);
}

/* Sekundär: Navy-Outline auf hellen Flächen */
.btn-secondary {
  background-color: transparent;
  border-color: var(--color-navy-800);
  color: var(--color-navy-800);
}
.btn-secondary:hover {
  background-color: var(--color-navy-800);
  color: var(--color-white);
}

/* Ghost: für dunkle Flächen (Hero, CTA-Band) — weiße Outline */
.btn-ghost {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn-ghost:hover {
  background-color: var(--color-white);
  color: var(--color-navy-800);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: 6rem 0;
}
.hero h1,
.hero .display {
  font-size: var(--text-h1);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}
@media (min-width: 1024px) {
  .hero { padding: 8rem 0; }
  .hero h1 { font-size: 3rem; line-height: 1.15; }
  .hero .display { font-size: var(--text-display); line-height: 1.07; }
}
.hero .lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-navy-100);
  max-width: 42rem;
  margin: 0 0 var(--space-8);
}

/* Helle Variante für Unterseiten ohne Navy-Band */
.hero--light {
  background: var(--color-slate-50);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-slate-200);
}
.hero--light .lead {
  color: var(--color-slate-600);
}

/* Eyebrow / Kicker über der H1 */
.eyebrow {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-phoenix-700);
  margin-bottom: var(--space-3);
}
.hero:not(.hero--light) .eyebrow {
  color: var(--color-white);
}
/* Dekorative Phoenix-Regel (3px, rot→orange) — einzige Gradient-Signatur */
.eyebrow::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--gradient-phoenix-rule);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   Layout: Section + Container
   ========================================================================== */
.section {
  padding: var(--space-16) 0;
}
@media (min-width: 1024px) {
  .section { padding: var(--space-24) 0; }
}
.section--tight {
  padding: var(--space-12) 0;
}

/* Hinweis: bewusst gleich benannt wie Tailwinds .container — Werte decken
   sich (max-w-7xl = 80rem); eigenes Padding für konsistente Ränder. */
.container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/* ==========================================================================
   Card + Feature-Grid
   ========================================================================== */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-navy-200);
}
.card h3 {
  font-size: var(--text-h3);
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}
.card p {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-slate-600);
  margin: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* ==========================================================================
   Testing Readiness Check
   ========================================================================== */
.assessment-privacy-note,
.assessment-sidebar-note,
.assessment-error {
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.assessment-privacy-note {
  color: var(--color-slate-700);
  background: var(--color-white);
  border: var(--border-default) solid var(--color-slate-200);
}

.assessment-entry-card {
  background: var(--color-slate-50);
  border: var(--border-default) solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.assessment-entry-card h2 {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-h2);
}

.assessment-entry-card p {
  margin: 0 0 var(--space-6);
  color: var(--color-slate-600);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.assessment-entry-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.assessment-entry-facts li {
  padding-left: var(--space-4);
  color: var(--color-slate-700);
  border-left: var(--border-accent) solid var(--color-navy-800);
}

.assessment-layout,
.assessment-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .assessment-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }

  .assessment-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assessment-sidebar {
    position: sticky;
    top: var(--space-24);
  }
}

.assessment-section-heading {
  margin-bottom: var(--space-8);
}

.assessment-section-heading h2,
.assessment-result h2 {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-h2);
  line-height: 1.3;
}

.assessment-section-heading p,
.assessment-result-summary,
.assessment-disclaimer,
.assessment-sidebar-note p {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body);
  line-height: 1.6;
}

.assessment-progress-card {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-slate-50);
  border: var(--border-default) solid var(--color-slate-200);
  border-radius: var(--radius-md);
}

.assessment-progress-card label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-slate-700);
  font-size: var(--text-small);
  font-weight: 600;
}

.assessment-progress-card progress,
.assessment-result progress {
  width: 100%;
  accent-color: var(--color-navy-800);
}

.assessment-question {
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  background: var(--color-white);
  border: var(--border-default) solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.assessment-question legend {
  padding: 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-h3);
  font-weight: 700;
}

.assessment-question legend span {
  color: var(--color-phoenix-700);
  font-variant-numeric: tabular-nums;
}

.assessment-question > p {
  margin: 0 0 var(--space-4);
  color: var(--color-slate-600);
  line-height: 1.6;
}

.assessment-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .assessment-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.assessment-options label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-slate-700);
  background: var(--color-slate-50);
  border: var(--border-default) solid var(--color-slate-200);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.assessment-options label:has(input:checked) {
  color: var(--color-navy-900);
  background: var(--color-navy-50);
  border-color: var(--color-navy-600);
}

.assessment-options input {
  flex-shrink: 0;
  margin-top: var(--space-1);
  accent-color: var(--color-navy-800);
}

.assessment-options span,
.assessment-priority-list span,
.assessment-method-list span {
  display: block;
  font-size: var(--text-small);
  line-height: 1.55;
}

.assessment-options strong,
.assessment-priority-list strong,
.assessment-method-list strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-ink);
}

.assessment-question--error {
  border-color: var(--color-danger-text);
}

.assessment-error {
  margin-bottom: var(--space-6);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border: var(--border-default) solid var(--color-danger-text);
}

.assessment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.assessment-method-list,
.assessment-priority-list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.assessment-method-list li,
.assessment-priority-list li {
  padding-left: var(--space-4);
  border-left: var(--border-accent) solid var(--color-phoenix-600);
}

.assessment-sidebar-note {
  margin-top: var(--space-6);
  color: var(--color-info-text);
  background: var(--color-info-bg);
  border: var(--border-default) solid var(--color-navy-200);
}

.assessment-sidebar-note strong {
  display: block;
  margin-bottom: var(--space-2);
}

.assessment-result {
  background: var(--color-slate-50);
  border-top: var(--border-default) solid var(--color-slate-200);
}

.assessment-result[hidden],
.assessment-error[hidden] {
  display: none;
}

.assessment-result h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-h3);
}

.assessment-score {
  margin-bottom: var(--space-2);
  color: var(--color-navy-800);
  font-size: var(--text-h1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.assessment-result-summary {
  margin-top: var(--space-4);
}

.assessment-disclaimer {
  margin-top: var(--space-6);
  font-size: var(--text-small);
}

@media print {
  .assessment-result {
    background: var(--color-white);
    border: 0;
  }
}
@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Stat (große Zahl + Label) — für Stats-Bänder
   ========================================================================== */
.stat {
  text-align: center;
}
.stat .stat-value {
  display: block;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy-800);
  font-variant-numeric: tabular-nums;
}
.stat .stat-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-slate-600);
}
/* Auf dunkler Fläche */
.cta-band .stat .stat-value,
.trust-band--dark .stat .stat-value {
  color: var(--color-white);
}
.cta-band .stat .stat-label,
.trust-band--dark .stat .stat-label {
  color: var(--color-navy-100);
}

/* ==========================================================================
   Logo-Strip (Kundenlogos, Graustufen → Farbe bei Hover/Fokus)
   ========================================================================== */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}
.logo-strip img {
  max-height: 3rem;
  width: auto;
  filter: grayscale(1);
  opacity: .75;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.logo-strip a:hover img,
.logo-strip a:focus-visible img {
  filter: none;
  opacity: 1;
}

/* ==========================================================================
   Trust-Band (Zahlen/Logos unter dem Hero) + CTA-Band
   ========================================================================== */
.trust-band {
  background: var(--color-slate-50);
  border-top: 1px solid var(--color-slate-200);
  border-bottom: 1px solid var(--color-slate-200);
  padding: var(--space-12) 0;
}
.trust-band--dark {
  background: var(--color-navy-800);
  border: 0;
  color: var(--color-white);
}

/* Navy-Band, weißer Text, Phoenix-Button (Rot auf Navy-Verbot gilt nur
   für Text — der Button bleibt phoenix-600 mit weißer Schrift, 6.06:1) */
.cta-band {
  background: var(--color-navy-800);
  color: var(--color-white);
  padding: var(--space-16) 0;
  text-align: center;
}
.cta-band h2 {
  font-size: var(--text-h2);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
.cta-band p {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-navy-100);
  max-width: 42rem;
  margin: 0 auto var(--space-8);
}

/* ==========================================================================
   Badge (Zertifizierung / Status) — Text auf Tint, nie reine Farbe
   ========================================================================== */
.badge-cert {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem;
  font-size: var(--text-small);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-navy-50);
  color: var(--color-navy-800);
  border: 1px solid var(--color-navy-100);
}
.badge-cert--phoenix {
  background: var(--color-phoenix-50);
  color: var(--color-phoenix-700);
  border-color: var(--color-phoenix-100);
}

/* ==========================================================================
   Case-Card (Referenz-Modul: Logo | Anliegen | Vorgehen | Ergebnis)
   ========================================================================== */
.case-card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.case-card .case-client {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-slate-500);
  margin-bottom: var(--space-3);
}
.case-card .case-metric {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-phoenix-600);
  font-variant-numeric: tabular-nums;
}
.case-card .case-body {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-slate-600);
}

/* ==========================================================================
   Step-List (nummerierte Prozess-Schritte, ersetzt die Regenbogen-Border)
   ========================================================================== */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.step-list li {
  counter-increment: step;
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 4rem;
  border-left: 2px solid var(--color-slate-200);
  margin-left: 1.5rem;
}
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -1.5rem;
  top: var(--space-4);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-navy-800);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step-list li:last-child {
  border-left-color: transparent;
}
.step-list h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.step-list p {
  font-size: var(--text-body);
  color: var(--color-slate-600);
  margin: 0;
}

/* ==========================================================================
   Fokus sichtbar (Tastatur) — ersetzt die alten generischen :focus-Outlines
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Auf dunklen Flächen (Footer, CTA-Band): weißer Fokus-Ring */
.cta-band a:focus-visible,
.cta-band button:focus-visible,
.trust-band--dark a:focus-visible,
footer a:focus-visible {
  outline-color: var(--color-white);
}

/* ==========================================================================
   Reduced Motion — harte Obergrenze für alle DS-Animationen
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .card,
  .logo-strip img {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}