/* ============================================================
   Syrcon Corporate Design — UI-Komponenten
   Benötigt syrcon-tokens.css (zuerst einbinden).
   Schriften sind selbst-gehostet (DSGVO-konform) — siehe @font-face unten.
   ============================================================ */

/* ---- Selbst-gehostete Schriften (kein externer CDN-Call) ---- */
@font-face { font-family:"Barlow"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:800; font-display:swap; src:url("fonts/barlow-800.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:where(.syr-section)[id] { scroll-margin-top: 24px; }

body.syr,
.syr {
  margin: 0;
  font-family: var(--syr-font);
  font-size: var(--syr-text-body);
  line-height: 1.65;
  color: var(--syr-text);
  background: var(--syr-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--syr-dur) var(--syr-ease), color var(--syr-dur) var(--syr-ease);
}

/* ---- Typografie (Headlines: Barlow) ---- */
.syr-h1 { font-family: var(--syr-font-head); font-size: var(--syr-h1); font-weight: var(--syr-fw-extra); line-height: 1.04; letter-spacing: var(--syr-tracking-tight); margin: 0 0 var(--syr-space-4); }
.syr-h2 { font-family: var(--syr-font-head); font-size: var(--syr-h2); font-weight: var(--syr-fw-bold);  line-height: 1.12; letter-spacing: var(--syr-tracking-tight); margin: 0 0 var(--syr-space-4); }
.syr-h3 { font-family: var(--syr-font-head); font-size: var(--syr-h3); font-weight: var(--syr-fw-semibold); line-height: 1.3; margin: 0 0 var(--syr-space-3); }
.syr-lead { font-size: var(--syr-text-lg); color: var(--syr-text-soft); line-height: 1.6; }
.syr-muted { color: var(--syr-text-muted); }

/* Signatur-Element: blaues Uppercase-Eyebrow */
.syr-eyebrow {
  display: inline-block;
  font-family: var(--syr-font-head);
  font-size: var(--syr-text-eyebrow);
  font-weight: var(--syr-fw-semibold);
  letter-spacing: var(--syr-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--syr-accent-text);
  margin: 0 0 var(--syr-space-3);
}

/* Akzent-Punkt am Headline-Ende (Slogan „… binden.“) */
.syr-dot { color: var(--syr-accent); }

/* ---- Layout-Helfer ---- */
.syr-container { max-width: var(--syr-container); margin-inline: auto; padding-inline: var(--syr-space-6); }
.syr-container.narrow { max-width: var(--syr-container-narrow); }
.syr-section { padding-block: var(--syr-space-24); }
.syr-section.subtle { background: var(--syr-surface-subtle); }

/* Immer-dunkle Kontrast-Sektion = Markenblau-Band. Setzt lokal die Dark-Rollen,
   damit innere Komponenten ohne Sonderregeln korrekt umschlagen. */
.syr-section.dark {
  --syr-bg:             var(--syr-blue-900);
  --syr-surface:        #1B3D82;
  --syr-surface-subtle: #17356F;
  --syr-text:           #FFFFFF;
  --syr-text-soft:      rgba(255, 255, 255, 0.76);
  --syr-text-muted:     rgba(255, 255, 255, 0.55);
  --syr-border:         rgba(255, 255, 255, 0.16);
  --syr-accent-text:    var(--syr-blue-200);
  --syr-contrast-bg:    var(--syr-white);
  --syr-contrast-text:  var(--syr-blue-900);
  background: var(--syr-bg);
  color: var(--syr-text);
}
[data-theme="dark"] .syr-section.dark { --syr-bg: #0A1D45; }

.syr-hero { background: var(--syr-hero-gradient); }

.syr-grid { display: grid; gap: var(--syr-space-6); }
.syr-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.syr-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .syr-grid.cols-2, .syr-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Buttons ---- */
.syr-btn {
  display: inline-flex; align-items: center; gap: var(--syr-space-2);
  font-family: var(--syr-font); font-size: var(--syr-text-body); font-weight: var(--syr-fw-semibold);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 14px 26px; border-radius: var(--syr-radius);
  border: 1px solid transparent; transition: all var(--syr-dur) var(--syr-ease);
  white-space: nowrap;
}
.syr-btn:focus-visible { outline: 2px solid var(--syr-accent); outline-offset: 2px; }

/* Primär = Markenblau */
.syr-btn-primary { background: var(--syr-accent); color: var(--syr-white); }
.syr-btn-primary:hover { background: var(--syr-accent-strong); transform: translateY(-1px); box-shadow: var(--syr-shadow); }

/* Kontrast: hell↔dunkel invertierend je Theme */
.syr-btn-dark { background: var(--syr-contrast-bg); color: var(--syr-contrast-text); }
.syr-btn-dark:hover { transform: translateY(-1px); box-shadow: var(--syr-shadow); opacity: 0.94; }

/* Hell: weisse Flaeche, blaue Schrift. Zweitbutton auf dunklem Grund (Foto-Hero,
   Markenblau-Band) - grenzt sich vom gefuellten Primaerbutton ab, ohne zu konkurrieren. */
.syr-btn-light { background: var(--syr-white); color: var(--syr-accent); border-color: var(--syr-white); }
.syr-btn-light:hover { background: var(--syr-blue-050); color: var(--syr-accent-strong); transform: translateY(-1px); box-shadow: var(--syr-shadow); }

/* Outline / sekundär */
.syr-btn-outline { background: transparent; color: var(--syr-text); border-color: var(--syr-border); }
.syr-btn-outline:hover { border-color: var(--syr-accent); color: var(--syr-accent-text); background: var(--syr-accent-tint); }

.syr-btn:disabled, .syr-btn.is-disabled, .syr-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none;
}
.syr-btn.sm { padding: 9px 18px; font-size: 0.875rem; }
/* Sehr schmale Schirme: lange Beschriftungen wie "Unverbindliche Demo anfragen"
   sprengen sonst den Bildschirm, weil Buttons normalerweise nicht umbrechen. */
@media (max-width: 420px){ .syr-btn { white-space: normal; text-align: center; max-width: 100%; } }
.syr-btn.lg { padding: 17px 34px; font-size: 1.0625rem; }

/* Textlink mit Pfeil ("Mehr erfahren →") */
.syr-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--syr-accent-text); font-weight: var(--syr-fw-semibold); text-decoration: none;
  transition: gap var(--syr-dur) var(--syr-ease);
}
.syr-link::after { content: "→"; transition: transform var(--syr-dur) var(--syr-ease); }
.syr-link:hover { gap: 10px; }
.syr-link:hover::after { transform: translateX(2px); }

/* ---- Icon-Chip (Blau-Tint mit Icon) ---- */
.syr-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--syr-radius-sm);
  background: var(--syr-accent-tint); color: var(--syr-accent);
  font-size: 21px; line-height: 1;
}

/* ---- Card ---- */
.syr-card {
  background: var(--syr-surface);
  border: 1px solid var(--syr-border);
  border-radius: var(--syr-radius);
  padding: var(--syr-space-8);
  transition: box-shadow var(--syr-dur) var(--syr-ease), transform var(--syr-dur) var(--syr-ease), border-color var(--syr-dur) var(--syr-ease);
}
.syr-card:hover { box-shadow: var(--syr-shadow); transform: translateY(-2px); border-color: var(--syr-blue-200); }
.syr-card .syr-num { font-family: var(--syr-font-head); font-size: var(--syr-text-eyebrow); font-weight: var(--syr-fw-bold); color: var(--syr-accent); letter-spacing: 0.1em; }
.syr-card ul { padding-left: 0; list-style: none; margin: var(--syr-space-4) 0; }
.syr-card ul li { position: relative; padding-left: 1.35em; margin-bottom: var(--syr-space-2); color: var(--syr-text-soft); }
.syr-card ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--syr-accent); }

/* ---- Nummern-Badge (Kreise in dunklen Sektionen) ---- */
.syr-badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--syr-accent); color: var(--syr-white);
  font-family: var(--syr-font-head); font-weight: var(--syr-fw-bold); font-size: 0.9rem; flex: 0 0 auto;
}
.syr-section.dark .syr-badge-num { background: var(--syr-blue-200); color: var(--syr-blue-900); }

/* ---- Pill / Tag ---- */
.syr-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: var(--syr-fw-medium);
  padding: 6px 14px; border-radius: var(--syr-radius-pill); background: var(--syr-accent-tint); color: var(--syr-accent-text);
}

/* ---- Formularfelder ---- */
.syr-field { margin-bottom: var(--syr-space-4); }
.syr-label { display: block; font-size: 0.875rem; font-weight: var(--syr-fw-medium); margin-bottom: var(--syr-space-2); }
.syr-input, .syr-textarea {
  width: 100%; font-family: var(--syr-font); font-size: var(--syr-text-body); color: var(--syr-text);
  padding: 12px 16px; border: 1px solid var(--syr-border); border-radius: var(--syr-radius-sm);
  background: var(--syr-surface); transition: border-color var(--syr-dur) var(--syr-ease), box-shadow var(--syr-dur) var(--syr-ease);
}
.syr-input::placeholder, .syr-textarea::placeholder { color: var(--syr-text-muted); }
.syr-input:focus, .syr-textarea:focus { outline: none; border-color: var(--syr-accent); box-shadow: 0 0 0 3px var(--syr-accent-tint-2); }
.syr-textarea { min-height: 120px; resize: vertical; }
.syr-hint  { display: block; font-size: 0.8125rem; color: var(--syr-text-muted); margin-top: 6px; }
.syr-error { display: block; font-size: 0.8125rem; color: var(--syr-danger); margin-top: 6px; }
.syr-input.is-error, .syr-textarea.is-error { border-color: var(--syr-danger); }
.syr-input.is-error:focus, .syr-textarea.is-error:focus { box-shadow: 0 0 0 3px rgba(192,57,43,0.15); }

/* ---- Navbar ---- */
.syr-nav { display: flex; align-items: center; justify-content: space-between; padding-block: var(--syr-space-4); gap: var(--syr-space-6); }
.syr-nav-links { display: flex; gap: var(--syr-space-6); align-items: center; }
.syr-nav-links a:not(.syr-btn) { color: var(--syr-text); text-decoration: none; font-weight: var(--syr-fw-medium); }
.syr-nav-links a:not(.syr-btn):hover { color: var(--syr-accent-text); }

/* ---- Logo-Wortmarke (Platzhalter bis Bildmarke aus EPS) ----
   .syr-logo img für das echte Logo; .syr-logo-text als typografischer Fallback. */
.syr-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.syr-logo img { height: 34px; width: auto; display: block; }
.syr-logo-text {
  font-family: var(--syr-font-head); font-weight: var(--syr-fw-extra); font-size: 1.5rem;
  letter-spacing: 0.02em; color: var(--syr-accent-text); text-transform: uppercase;
}

/* ---- Divider ---- */
.syr-divider { border: 0; border-top: 1px solid var(--syr-border); margin-block: var(--syr-space-12); }

/* ---- Status-Badges (Pill mit Punkt) ---- */
.syr-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: var(--syr-fw-semibold); letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: var(--syr-radius-pill); line-height: 1.4;
  background: var(--syr-surface-subtle); color: var(--syr-text-soft); border: 1px solid var(--syr-border);
}
.syr-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.syr-status.success { color: var(--syr-success); background: rgba(31,122,77,0.10);  border-color: rgba(31,122,77,0.25); }
.syr-status.warning { color: var(--syr-warning); background: rgba(182,121,27,0.10); border-color: rgba(182,121,27,0.25); }
.syr-status.danger  { color: var(--syr-danger);  background: rgba(192,57,43,0.10);  border-color: rgba(192,57,43,0.25); }
.syr-status.info    { color: var(--syr-info);    background: rgba(43,108,176,0.10); border-color: rgba(43,108,176,0.25); }
[data-theme="dark"] .syr-status.success, .syr-section.dark .syr-status.success { color: #5FD09A; }
[data-theme="dark"] .syr-status.warning, .syr-section.dark .syr-status.warning { color: #E3B25A; }
[data-theme="dark"] .syr-status.info,    .syr-section.dark .syr-status.info    { color: var(--syr-blue-200); }
[data-theme="dark"] .syr-status.danger,  .syr-section.dark .syr-status.danger  { color: #F09488; }

/* ---- Alert / Callout ---- */
.syr-alert {
  display: flex; gap: var(--syr-space-3); align-items: flex-start;
  padding: var(--syr-space-4) var(--syr-space-6); border-radius: var(--syr-radius);
  border: 1px solid var(--syr-border); background: var(--syr-surface-subtle); color: var(--syr-text);
  border-left-width: 4px; border-left-color: var(--syr-muted);
}
.syr-alert .syr-alert-title { font-weight: var(--syr-fw-semibold); margin: 0 0 2px; }
.syr-alert p { margin: 0; color: var(--syr-text-soft); }
.syr-alert.info    { border-left-color: var(--syr-info); }
.syr-alert.success { border-left-color: var(--syr-success); }
.syr-alert.warning { border-left-color: var(--syr-warning); }
.syr-alert.danger  { border-left-color: var(--syr-danger); background: rgba(192,57,43,0.06); }

/* ---- Tabelle ---- */
.syr-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.syr-table th, .syr-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--syr-border); }
.syr-table thead th {
  font-family: var(--syr-font-head); font-size: var(--syr-text-eyebrow); font-weight: var(--syr-fw-semibold);
  letter-spacing: var(--syr-tracking-eyebrow); text-transform: uppercase; color: var(--syr-text-muted);
}
.syr-table tbody tr { transition: background var(--syr-dur) var(--syr-ease); }
.syr-table tbody tr:hover { background: var(--syr-surface-subtle); }
.syr-table.card { background: var(--syr-surface); border: 1px solid var(--syr-border); border-radius: var(--syr-radius); overflow: hidden; }
.syr-table.card tbody tr:last-child td { border-bottom: 0; }