/* ============================================================
   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 (kanonischer SENTYNEL-Header) ----------
   Markup rendert der geteilte Baustein sentynel_header.js. Akzent je Modul
   ueber body[data-area="<modul>"]{ --sy-accent: … } — kein Header-Fork. */
.sy-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  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-titleblock { display: flex; flex-direction: column; min-width: 0; }
.sy-topbar .sy-title {
  font-family: var(--sy-font-head); font-weight: 700; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .03em; margin: 0; color: var(--sy-white);
}
.sy-topbar .sy-slogan {
  color: var(--sy-accent); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase;
}
.sy-topbar .sy-spacer { flex: 1; }
.sy-topbar .sy-who { color: var(--sy-white); font-size: .82rem; text-align: right; }
.sy-topbar .sy-who #whoName, .sy-topbar .sy-who b { color: var(--sy-accent); font-weight: 600; }
.sy-topbar .sy-who-sub { color: var(--sy-gray-300); font-size: .72rem; }
.sy-topbar .sy-link { color: var(--sy-accent); cursor: pointer; }
.sy-topbar .sy-link:hover { text-decoration: underline; }

/* Mobil: der Kopf muss auf ein Handy passen, ohne dass der who-Block
   linksbuendig unter den Titel faellt. Der Spacer verschwindet, statt-
   dessen schiebt margin-left:auto den who-Block rechts — das haelt ihn
   auch dann rechtsbuendig, wenn er doch in eine zweite Zeile umbricht. */
@media (max-width: 640px) {
  .sy-topbar { padding: 9px 14px; gap: 10px; }
  .sy-topbar .sy-logo { height: 24px; }
  .sy-topbar .sy-title { font-size: .98rem; }
  .sy-topbar .sy-slogan {
    font-size: .6rem; letter-spacing: .05em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
  }
  .sy-topbar .sy-spacer { display: none; }
  .sy-topbar .sy-who { margin-left: auto; font-size: .72rem; }
  .sy-topbar .sy-who-sub { font-size: .66rem; }
}
/* ---------- Mobil-Grundlagen fuer ALLE Module ----------
   Zwei Dinge, die vorher nur SOLARIS (aus SIGNUM #60) bzw. gar kein Modul hatte
   und die auf dem Handy den groessten Unterschied machen. */
@media (max-width: 640px) {
  /* !important ist hier bewusst gesetzt und KEIN Schludrian: die Modul-CSS steht
     als <style> NACH diesem Stylesheet und nutzt dieselben Element-Selektoren
     (input{font-size:14px}, table{...}). Ohne !important gewinnt bei gleicher
     Spezifitaet die spaetere Regel — die Garantie waere in 12 von 19 Modulen
     wirkungslos. Beides sind Funktions-Garantien, keine Geschmacksfragen. */

  /* 1) iOS Safari zoomt beim Antippen jedes Feldes < 16px hinein und nicht wieder
        heraus — die Hauptursache fuer "alles verzogen". 16px verhindert das. */
  input, select, textarea { font-size: 16px !important; }

  /* 2) Breite Tabellen sprengen sonst die Seite und erzeugen horizontales
        Scrollen des GANZEN Layouts. So scrollt nur die Tabelle selbst. */
  table { display: block !important; width: 100% !important; max-width: 100% !important;
          overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* Sehr schmal (unter iPhone-Breite): Untertitel weicht, Modulname + Nutzer
   haben Vorrang. Bewusst 360px, damit die gaengigen 390/393/414-Geraete den
   Untertitel BEHALTEN. */
@media (max-width: 360px) {
  .sy-topbar { gap: 8px; padding: 8px 12px; }
  .sy-topbar .sy-slogan { display: none; }
  .sy-topbar .sy-title { font-size: .92rem; }
}

/* ---------- 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; }