/* ============================================================
   Schichtfix — Website Tokens & geteilte Komponenten
   Aufgebaut aus dem Design-System "Schichtfix" (edfb30).
   Farbrollen strikt: Ocean = einzige Interaktionsfarbe,
   Amber-Gold nur sparsamer Akzent (Hero/Finale), Orange
   ausschliesslich in App-Screenshots — nie als Website-Farbe.
   Inter ist self-hosted (kein Google-Fonts-CDN, DSGVO).
   ============================================================ */

/* --- Inter (Variable, self-hosted, Latin inkl. Umlaute) --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

:root {
  /* --- Brand palette --- */
  --blue-deep: #23376E;
  --blue-ocean: #60C6C9;
  --blue-sky: #2E92D0;
  --grey-warm: #F2ECDF;
  --white: #FFFFFF;
  --neutral: #F7F8FA;
  --amber-gold: #F4B740;
  --amber-gold-700: #E7A62B; /* Hover-Ton */

  --blue-ocean-600: #45A9AC;
  --blue-ocean-700: #368F92;
  --blue-deep-800: #1B2B57;
  --blue-mid: #2A5C9E;

  --ink: #1A1A2E;
  --ink-muted: #5A5A6E;
  --line: #D8D4CE;
  --line-cool: #E6E9F0;

  /* --- Status / Ampel (nur Status/Feedback) --- */
  --status-ok: #16A34A;
  --status-warn: #EAB308;
  --status-danger: #DC2626;
  --status-ok-bg: #E7F6EC;
  --status-warn-bg: #FBF3D4;
  --status-danger-bg: #FBE6E6;

  /* Hinweis: Das Krank-Orange existiert bewusst NICHT als Website-Token —
     es erscheint ausschliesslich als Pixel innerhalb der App-Screenshots. */

  --gradient-header: linear-gradient(165deg, #23376E 0%, #2A5C9E 55%, #2E92D0 115%);

  /* Semantic aliases */
  --color-brand: var(--blue-deep);
  --color-interactive: var(--blue-ocean);
  --surface-page: var(--white);
  --surface-muted: var(--neutral);
  --surface-warm: var(--grey-warm);
  --text-body: var(--ink);
  --text-muted: var(--ink-muted);
  --text-on-brand: var(--white);
  --text-link: var(--blue-ocean-700);
  --border-default: var(--line);
  --border-cool: var(--line-cool);

  /* --- Typografie --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;

  /* --- Spacing / Radii / Schatten --- */
  --container-max: 1200px;
  --container-pad: 24px;
  --radius-card: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 20px 50px rgba(35, 55, 110, 0.14);
  --shadow-card-sm: 0 8px 24px rgba(35, 55, 110, 0.10);
  --shadow-pop: 0 24px 60px rgba(35, 55, 110, 0.20);
  --shadow-ocean: 0 12px 28px rgba(96, 198, 201, 0.38);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;
}

/* --- Base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--color-brand); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--blue-ocean-700); }
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--blue-ocean) 40%, transparent); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

/* --- Buttons (Pill, >=52px). Ocean-Text = Deep-Blue fuer Kontrast >=4,5:1 --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: var(--radius-pill); text-decoration: none;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background .18s var(--ease-out), color .18s var(--ease-out);
}
.btn svg { display: block; }
.btn:hover { transform: translateY(-2px); }

/* Amber — nur Hero + Finale (D2). Deep-Blue-Text auf Amber = hoher Kontrast */
.btn-amber { background: var(--amber-gold); color: var(--blue-deep); font-weight: 800;
  box-shadow: 0 14px 34px rgba(244,183,64,.36); }
.btn-amber:hover { background: var(--amber-gold-700); box-shadow: 0 18px 42px rgba(244,183,64,.46); }

/* Ocean — alle uebrigen CTAs. Deep-Blue-Text statt Weiss (A11y-Fix) */
.btn-ocean { background: var(--blue-ocean); color: var(--blue-deep); font-weight: 700;
  box-shadow: var(--shadow-ocean); }
.btn-ocean:hover { background: var(--blue-ocean-600); }

/* Ocean-Outline — sekundaer. Deep-Blue-Text auf Weiss */
.btn-ocean-outline { background: #fff; color: var(--blue-deep); font-weight: 700;
  border: 1.5px solid var(--blue-ocean); }
.btn-ocean-outline:hover { background: var(--blue-ocean); color: var(--blue-deep); }

/* --- Pill (Badge). "neu" = einzige Amber-Pill --- */
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 13px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.pill-neu { background: var(--amber-gold); color: var(--blue-deep); }

/* --- Phone-Frame (dunkler Rahmen um mobile App-Screenshots) --- */
.phone { position: relative; background: #12142B; border-radius: 40px;
  padding: 9px; box-shadow: var(--shadow-pop); }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 6px; border-radius: 99px; background: rgba(255,255,255,.16); z-index: 2; }
.phone-screen { display: block; width: 100%; height: auto; border-radius: 32px;
  border: 1px solid rgba(255,255,255,.06); }

/* --- Browser-Karte (weiss, Toolbar-Chrome + realer Desktop-Screenshot) --- */
.browsercard { background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 34px 74px rgba(14,23,48,.34); border: 1px solid rgba(255,255,255,.5); }
.browsercard-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: #F1F3F7; border-bottom: 1px solid var(--border-cool); }
.browsercard-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.browsercard-url { flex: 1; margin-left: 8px; background: #fff; border: 1px solid var(--border-cool);
  border-radius: 8px; height: 26px; display: flex; align-items: center; padding: 0 12px;
  font-size: 12px; color: var(--text-muted); }
.browsercard-shot { display: block; width: 100%; height: auto; }

/* --- Motion --- */
@keyframes sfReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sfFade { from { opacity: 0; transform: translateX(30px) scale(.985); } to { opacity: 1; transform: none; } }
.sf-reveal { animation: sfReveal .6s cubic-bezier(.2,.7,.2,1) both; }
.sf-fade { animation: sfFade .7s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .sf-reveal, .sf-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}