/* ============================================================
   SEYNSTAHL — Gemeinsames Brand-Kit (Corporate Design 2024)
   Eine zentrale Quelle für ALLE Seynstahl-Tools, damit sie
   einheitlich aussehen und später in einer App zusammenführbar
   sind. Pro Bereich kann eine Akzentfarbe gesetzt werden
   (--sy-accent), die Marke bleibt sonst gleich.
   Quelle: Brand Guide 2024. Schrift Palanquin (Google Fonts).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Palanquin:wght@300;400;500;600&family=Palanquin+Dark:wght@500;600;700&display=swap');

:root {
  /* --- Markenfarben (verbindlich) --- */
  --sy-yellow:      #ffcc00;   /* Primärfarbe, dominant */
  --sy-yellow-dark: #e6b800;   /* Hover/Tiefe */
  --sy-black:       #1a1a1a;
  --sy-pure-black:  #000000;
  --sy-white:       #ffffff;

  /* --- Neutrale UI-Töne --- */
  --sy-gray-900: #1a1a1a;
  --sy-gray-700: #3a3a3a;
  --sy-gray-500: #6b6b6b;
  --sy-gray-300: #d4d4d4;
  --sy-gray-100: #f4f4f3;
  --sy-bg:       #f7f7f6;

  /* --- Bereichs-Akzent (pro Tool überschreibbar) ---
     Standard = SEYNSTAHL Gelb. Später je Bereich anders,
     z. B. body[data-area="fuhrpark"] { --sy-accent: #2e7dd1 } */
  --sy-accent:      var(--sy-yellow);
  --sy-accent-ink:  var(--sy-black);   /* Textfarbe auf Akzentflächen */

  /* --- Typo --- */
  --sy-font-head: 'Palanquin Dark', 'Palanquin', system-ui, sans-serif;
  --sy-font-body: 'Palanquin', system-ui, -apple-system, sans-serif;

  /* --- Form --- */
  --sy-radius: 8px;
  --sy-shadow: 0 2px 8px rgba(0,0,0,.08);
  --sy-shadow-lg: 0 8px 28px rgba(0,0,0,.12);
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sy-font-body);
  font-weight: 300;
  color: var(--sy-black);
  background: var(--sy-bg);
  line-height: 1.55;
}
h1,h2,h3,h4,.sy-head {
  font-family: var(--sy-font-head);
  font-weight: 700;
  text-transform: uppercase;   /* Headlines in Versalien (CD) */
  letter-spacing: .01em;
  line-height: 1.1;
  color: var(--sy-black);
  margin: 0 0 .5em;
}
.sy-subline { font-weight: 600; color: var(--sy-gray-700); text-transform: none; }
a { color: var(--sy-yellow-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Kopfleiste mit Logo ---------- */
.sy-topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--sy-black);
  color: var(--sy-white);
  padding: 12px 22px;
  border-bottom: 4px solid var(--sy-accent);
}
.sy-topbar .sy-logo { height: 30px; display: block; }
.sy-topbar .sy-title {
  font-family: var(--sy-font-head); font-weight: 700; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .03em;
}
.sy-topbar .sy-spacer { flex: 1; }

/* ---------- Buttons ---------- */
.sy-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sy-font-head); font-weight: 600; text-transform: uppercase;
  font-size: .85rem; letter-spacing: .02em;
  background: var(--sy-accent); color: var(--sy-accent-ink);
  border: none; border-radius: var(--sy-radius);
  padding: 10px 18px; cursor: pointer; transition: filter .15s;
}
.sy-btn:hover { filter: brightness(.94); text-decoration: none; }
.sy-btn--ghost { background: transparent; color: var(--sy-black); border: 2px solid var(--sy-accent); }

/* ---------- Karten ---------- */
.sy-card {
  background: var(--sy-white); border-radius: var(--sy-radius);
  box-shadow: var(--sy-shadow); padding: 20px;
  border-top: 3px solid var(--sy-accent);
}

/* ---------- Leistungsfeld-/Haken-Listen (Bullet = Haken) ---------- */
.sy-list { list-style: none; padding: 0; margin: 0; }
.sy-list li { position: relative; padding-left: 1.6em; margin: .35em 0; }
.sy-list li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1.05em; height: 1.05em;
  background: var(--sy-accent);
  -webkit-mask: var(--sy-haken) center/contain no-repeat;
          mask: var(--sy-haken) center/contain no-repeat;
}
/* Haken als kleines Inline-SVG (Häkchen) */
:root { --sy-haken: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13l5 5L20 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'/></svg>"); }

/* ---------- Waben-Wasserzeichen (dezenter Marken-Akzent) ---------- */
.sy-wabe-bg { position: relative; overflow: hidden; }
.sy-wabe-bg::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 220px; height: 220px; opacity: .10; pointer-events: none;
  background: var(--sy-wabe) center/contain no-repeat;
}

/* ---------- Tabellen ---------- */
.sy-table { width: 100%; border-collapse: collapse; background: var(--sy-white); }
.sy-table th {
  font-family: var(--sy-font-head); font-weight: 600; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .03em; text-align: left;
  background: var(--sy-black); color: var(--sy-white); padding: 10px 12px;
}
.sy-table td { padding: 9px 12px; border-bottom: 1px solid var(--sy-gray-300); }
.sy-table tr:hover td { background: #fffaf0; }

/* ---------- Badges / Status ---------- */
.sy-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:600; }
.sy-badge--ok   { background:#e3f3e3; color:#1f7a1f; }
.sy-badge--warn { background:#fff3cd; color:#8a6d00; }
.sy-badge--alert{ background:#fde0e0; color:#b22; }