/* =====================================================================
   DHL FC Cup – Design-Tokens und Basis
   Quelle: DHL Brand Hub, Basiselemente (Farben, Typografie, Logo)
   Die Token-Namen entsprechen den Figma-Variablen (Collection "DHL").
   ===================================================================== */

/* Hausschrift Delivery – Dateien nach assets/fonts/ legen (siehe fonts/README.md).
   Fehlen sie, greift Arial als offizieller DHL-Systemfallback. */
@font-face { font-family: "Delivery"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/Delivery_W_Lt.woff2") format("woff2"), url("fonts/Delivery_W_Lt.woff") format("woff"); }
@font-face { font-family: "Delivery"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("fonts/Delivery_W_LtIt.woff2") format("woff2"), url("fonts/Delivery_W_LtIt.woff") format("woff"); }
@font-face { font-family: "Delivery"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Delivery_W_Rg.woff2") format("woff2"), url("fonts/Delivery_W_Rg.woff") format("woff"); }
@font-face { font-family: "Delivery"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/Delivery_W_It.woff2") format("woff2"), url("fonts/Delivery_W_It.woff") format("woff"); }
@font-face { font-family: "Delivery"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/Delivery_W_Bd.woff2") format("woff2"), url("fonts/Delivery_W_Bd.woff") format("woff"); }
@font-face { font-family: "Delivery"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("fonts/Delivery_W_BdIt.woff2") format("woff2"), url("fonts/Delivery_W_BdIt.woff") format("woff"); }
@font-face { font-family: "Delivery Condensed"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/Delivery_W_CdLt.woff2") format("woff2"), url("fonts/Delivery_W_CdLt.woff") format("woff"); }
@font-face { font-family: "Delivery Condensed"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("fonts/Delivery_W_CdBlk.woff2") format("woff2"), url("fonts/Delivery_W_CdBlk.woff") format("woff"); }

:root {
  /* Markenfarben (Brand Hub) */
  --dhl-postyellow: #FFCC00;   /* Postgelb, RGB 255|204|0 */
  --dhl-red: #D40511;          /* DHL Red, RGB 212|5|17 */
  --dhl-black: #000000;
  --dhl-white: #FFFFFF;
  /* Abgeleitet (nicht im Brand Hub definiert): Hover und Tint */
  --dhl-red-hover: #B00410;
  --dhl-yellow-tint: #FFF5CC;
  /* Grauwerte fuer Interface-Elemente */
  --dhl-grey-100: #F2F2F2;
  --dhl-grey-200: #E6E6E6;
  --dhl-grey-300: #CCCCCC;
  --dhl-grey-400: #999999;
  --dhl-grey-500: #666666;
  --dhl-grey-600: #333333;

  /* Semantik */
  --color-bg: var(--dhl-white);
  --color-bg-muted: var(--dhl-grey-100);
  --color-text: var(--dhl-black);
  --color-text-muted: var(--dhl-grey-500);
  --color-border: var(--dhl-grey-300);
  --color-border-soft: var(--dhl-grey-200);
  --color-accent: var(--dhl-red);
  --color-brand: var(--dhl-postyellow);

  /* Typografie */
  --font-sans: "Delivery", Arial, Helvetica, sans-serif;
  --font-condensed: "Delivery Condensed", "Delivery", "Arial Narrow", Arial, sans-serif;
  --text-xs: 12px;
  --text-s: 14px;
  --text-m: 16px;
  --text-l: 20px;
  --text-xl: 28px;
  --text-2xl: 36px;

  /* Raster 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.18);
  --ease: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
a { color: var(--dhl-red); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Kopfleiste ------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 72px;
  padding: 0 var(--space-6);
  background: var(--dhl-postyellow);
  color: var(--dhl-black);
}
.topbar__logo img { height: 28px; width: auto; }
.topbar__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar__title { font-size: var(--text-l); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__subtitle { font-size: var(--text-s); color: var(--dhl-grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* Live-Indikator */
.live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-s); font-weight: 700; }
.live__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dhl-red); animation: pulse 1.6s ease-in-out infinite; }
.live.is-offline .live__dot { background: var(--dhl-grey-400); animation: none; }
.live.is-offline { color: var(--dhl-grey-500); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.55; } }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4);
  border: 2px solid transparent; border-radius: var(--radius-s);
  font-weight: 700; font-size: var(--text-s); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--dhl-red); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--dhl-red); color: var(--dhl-white); border-color: var(--dhl-red); }
.btn--primary:not(:disabled):hover { background: var(--dhl-red-hover); border-color: var(--dhl-red-hover); }
.btn--secondary { background: var(--dhl-white); color: var(--dhl-red); border-color: var(--dhl-red); }
.btn--secondary:not(:disabled):hover { background: var(--dhl-yellow-tint); }
.btn--ghost { background: transparent; color: var(--dhl-black); border-color: transparent; }
.btn--ghost:not(:disabled):hover { background: rgba(0, 0, 0, 0.08); }
.btn--danger { background: var(--dhl-white); color: var(--dhl-red); border-color: var(--dhl-grey-300); }
.btn--danger:not(:disabled):hover { border-color: var(--dhl-red); }
.btn--s { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--icon { min-width: 32px; min-height: 32px; padding: 0; border-radius: var(--radius-s); color: var(--dhl-grey-500); background: transparent; border-color: transparent; }
.btn--icon:hover { color: var(--dhl-black); background: var(--dhl-grey-100); }
.btn--icon svg { width: 16px; height: 16px; }

/* ---- Formularfelder -------------------------------------------------- */
.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--dhl-grey-400); border-radius: var(--radius-s); background: var(--dhl-white);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.4; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--dhl-red); box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.18); }
.field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-s); font-weight: 700; }
.field .input, .field .select { font-weight: 400; }
.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-s); font-weight: 400; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--dhl-red); }
.row { display: flex; gap: var(--space-2); align-items: center; }
.row > .input { flex: 1; min-width: 0; }
.hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Karten / Gruppen (gemeinsam fuer beide Ansichten) --------------- */
.group {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--dhl-white); border: 1px solid var(--color-border); border-radius: var(--radius-m); overflow: hidden;
}
.group__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--dhl-postyellow); color: var(--dhl-black);
}
.group__name { font-weight: 700; font-size: var(--text-l); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group__slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.slot {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  min-height: 44px;
}
.slot:first-child { border-top: 0; }
.slot__no { flex: 0 0 auto; width: 1.6em; font-family: var(--font-condensed); font-weight: 900; font-size: 1.15em; color: var(--dhl-red); text-align: center; font-variant-numeric: tabular-nums; }
.slot__name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot--empty .slot__name { font-weight: 400; color: var(--dhl-grey-400); }
.slot--empty .slot__no { color: var(--dhl-grey-300); }

/* ---- Toast ----------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translate(-50%, 20px);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-s);
  background: var(--dhl-black); color: var(--dhl-white); font-weight: 700; font-size: var(--text-s);
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity var(--ease), transform var(--ease); z-index: 50; max-width: min(90vw, 560px); text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--dhl-red); }
.toast--success { background: var(--dhl-black); border-left: 6px solid var(--dhl-postyellow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}