/* Publikumsansicht – laeuft im Vollbild auf einem Screen (16:9), skaliert ueber vh/vw */
.public {
  display: grid; grid-template-rows: auto 1fr auto;
  height: 100dvh; overflow: hidden;
  --tv-unit: clamp(10px, 1.1vh, 22px);
  background: var(--dhl-postyellow);
  --line-on-yellow: rgba(0, 0, 0, 0.15);
}
.public .topbar { min-height: clamp(64px, 8.5vh, 120px); padding: 0 clamp(20px, 3vw, 64px); gap: clamp(16px, 2.5vw, 48px); }
.public .topbar__logo img { height: clamp(26px, 4.4vh, 64px); }
.public .topbar__title { font-size: clamp(20px, 3.4vh, 52px); }
.public .topbar__subtitle { font-size: clamp(13px, 1.9vh, 28px); color: var(--dhl-black); opacity: 0.75; }
.public .topbar { border-bottom: 1px solid var(--line-on-yellow); }
.public .live { font-size: clamp(12px, 1.7vh, 24px); }
.public .live__dot { width: clamp(8px, 1.2vh, 16px); height: clamp(8px, 1.2vh, 16px); }
.public .topbar__actions { margin-left: auto; }

.board {
  display: grid; gap: clamp(12px, 2.4vh, 40px);
  padding: clamp(14px, 2.4vh, 40px) clamp(20px, 3vw, 64px);
  min-height: 0; overflow: hidden;
}
.board[data-count="2"] { grid-template-rows: 1fr 1fr; }
.board[data-count="1"] { grid-template-rows: 1fr; }

.division { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 24px); min-height: 0; animation: fadeIn 500ms ease both; }
.division.is-hidden { display: none; }
.division__head { display: flex; align-items: baseline; gap: clamp(10px, 1.6vw, 28px); }
.division__title { font-size: clamp(20px, 3.2vh, 48px); font-weight: 700; line-height: 1.1; position: relative; padding-left: clamp(12px, 1.2vw, 24px); }
.division__title::before { content: ""; position: absolute; left: 0; top: 0.12em; bottom: 0.08em; width: clamp(4px, 0.45vw, 9px); background: var(--dhl-red); border-radius: 2px; }
.division__meta { font-size: clamp(12px, 1.7vh, 24px); color: var(--dhl-grey-600); }

.groups {
  display: grid; gap: clamp(10px, 1.6vw, 32px);
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0; flex: 1;
}
.public .group { min-height: 0; border: 0; border-radius: var(--radius-l); background: var(--dhl-white); }
.public .group__head { padding: clamp(8px, 1.2vh, 18px) clamp(10px, 1.4vw, 24px); background: var(--dhl-white); border-bottom: 3px solid var(--dhl-postyellow); }
.public .group__name { font-size: clamp(15px, 2.5vh, 36px); }
.public .group__slots { justify-content: stretch; }
.public .slot { flex: 1; min-height: 0; padding: 0 clamp(10px, 1.4vw, 24px); gap: clamp(8px, 1vw, 20px); }
.public .slot__name { font-size: clamp(14px, 2.6vh, 40px); }
.public .slot__no { font-size: clamp(14px, 2.6vh, 40px); }
.slot--new { animation: slotIn 1600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.group.is-target { animation: groupPulse 1600ms ease both; }
@keyframes slotIn {
  0% { background: var(--dhl-postyellow); transform: translateX(-14px); opacity: 0; }
  35% { background: var(--dhl-postyellow); transform: none; opacity: 1; }
  100% { background: transparent; }
}
@keyframes groupPulse { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px var(--dhl-postyellow); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.board__empty {
  grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 32px); text-align: center;
}
.board__empty h2 { font-size: clamp(24px, 5vh, 72px); font-weight: 700; }
.board__empty p { font-size: clamp(14px, 2.2vh, 32px); color: var(--dhl-grey-600); }

/* Fusszeile */
.ticker {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: clamp(36px, 5.5vh, 76px); padding: 0 clamp(20px, 3vw, 64px);
  background: transparent; font-size: clamp(12px, 2vh, 28px); border-top: 1px solid var(--line-on-yellow);
}
.ticker__last { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker__last em { font-style: normal; color: var(--dhl-red); }
.ticker__pool { color: var(--dhl-grey-600); white-space: nowrap; }

/* Ziehungs-Einblendung: Spannung (Punkte), Karte kommt hoch, Name wird enthüllt, Gruppe springt rein, Karte fliegt in den Slot */
.draw {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); z-index: 40; animation: fadeIn 300ms ease both;
}
.draw.is-leaving { animation: fadeOut 650ms ease both; }
.draw__pre { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 28px); animation: fadeIn 250ms ease both; }
.draw__pre-text { font-size: clamp(22px, 4.2vh, 64px); font-weight: 700; color: var(--dhl-white); letter-spacing: 0.02em; }
.draw__dots { display: flex; gap: clamp(8px, 1.4vh, 20px); }
.draw__dots span { width: clamp(12px, 2.2vh, 30px); height: clamp(12px, 2.2vh, 30px); border-radius: 50%; background: var(--dhl-postyellow); animation: dotBounce 900ms ease-in-out infinite; }
.draw__dots span:nth-child(2) { animation-delay: 150ms; }
.draw__dots span:nth-child(3) { animation-delay: 300ms; }
.draw__card {
  position: relative; width: min(82vw, 1400px); padding: clamp(24px, 5vh, 72px) clamp(32px, 5vw, 96px);
  background: var(--dhl-white); border-radius: var(--radius-l); box-shadow: var(--shadow-2); text-align: center; overflow: hidden;
  transform-origin: center; will-change: transform, opacity;
}
.draw__card.is-in { animation: cardIn 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.draw__label { font-size: clamp(14px, 2.4vh, 32px); font-weight: 700; color: var(--dhl-grey-500); letter-spacing: 0.04em; }
.draw__card.is-in .draw__label { animation: fadeUp 400ms 200ms ease both; }
.draw__team { font-size: clamp(26px, 6vh, 92px); font-weight: 700; line-height: 1.05; margin: clamp(4px, 1vh, 16px) 0 0; word-wrap: break-word; }
.draw__card.is-in .draw__team { animation: reveal 800ms 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
/* Pfeil-Indikator: drei Linien wie beim DHL-Logo laufen nach unten, dann die Spitze */
.draw__arrow { display: flex; flex-direction: column; align-items: center; gap: clamp(3px, 0.7vh, 10px); margin: clamp(10px, 2vh, 30px) auto clamp(8px, 1.6vh, 24px); }
.draw__arrow span { display: block; height: clamp(4px, 0.8vh, 12px); background: var(--dhl-red); border-radius: 999px; opacity: 0; }
.draw__arrow span:nth-child(1) { width: clamp(28px, 5vh, 76px); }
.draw__arrow span:nth-child(2) { width: clamp(20px, 3.6vh, 56px); }
.draw__arrow span:nth-child(3) { width: clamp(12px, 2.2vh, 36px); }
.draw__arrow i { display: block; width: clamp(14px, 2.6vh, 40px); height: clamp(14px, 2.6vh, 40px); border-right: clamp(4px, 0.8vh, 12px) solid var(--dhl-red); border-bottom: clamp(4px, 0.8vh, 12px) solid var(--dhl-red); transform: rotate(45deg); margin-top: calc(clamp(14px, 2.6vh, 40px) * -0.35); opacity: 0; }
.draw__card.is-in .draw__arrow span:nth-child(1) { animation: lineIn 260ms 1000ms ease both; }
.draw__card.is-in .draw__arrow span:nth-child(2) { animation: lineIn 260ms 1130ms ease both; }
.draw__card.is-in .draw__arrow span:nth-child(3) { animation: lineIn 260ms 1260ms ease both; }
.draw__card.is-in .draw__arrow i { animation: tipIn 380ms 1380ms cubic-bezier(0.2, 0.8, 0.2, 1) both, tipBounce 900ms 1800ms ease-in-out 3; }
/* Gruppe als grosser Postgelb-Stempel */
.draw__group-wrap { display: flex; justify-content: center; }
.draw__group {
  position: relative; display: inline-block; padding: 0.08em 0.55em; border-radius: 0.22em;
  background: var(--dhl-postyellow); color: var(--dhl-black);
  font-size: clamp(30px, 8.2vh, 132px); font-weight: 700; line-height: 1.15; opacity: 0;
}
.draw__group::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7); opacity: 0; }
.draw__card.is-in .draw__group { animation: stamp 620ms 1650ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.draw__card.is-in .draw__group::after { animation: burst 900ms 1900ms ease-out both; }
@keyframes lineIn { from { opacity: 0; transform: translateY(-10px) scaleX(0.4); } to { opacity: 1; transform: none; } }
@keyframes tipIn { from { opacity: 0; transform: translateY(-14px) rotate(45deg); } to { opacity: 1; transform: translateY(0) rotate(45deg); } }
@keyframes tipBounce { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(35%) rotate(45deg); } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-5deg); } 55% { opacity: 1; transform: scale(0.94) rotate(1deg); } 75% { transform: scale(1.04) rotate(-0.5deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes burst { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.75); } 100% { opacity: 0; box-shadow: 0 0 0 clamp(20px, 4vh, 60px) rgba(255, 204, 0, 0); } }
@keyframes cardIn { from { transform: translateY(60px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); transform: translateX(-24px); opacity: 0; } 30% { opacity: 1; } to { clip-path: inset(0 -2% 0 0); transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 80% { transform: scale(0.96); } 100% { transform: scale(1); } }
@keyframes dotBounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-60%); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }

/* FC-Logo als Hauptmarke, DHL klein rechts */
.public .topbar__fc img { height: clamp(48px, 7.4vh, 108px); width: auto; }
.public .topbar__dhl { height: clamp(16px, 2.4vh, 34px); width: auto; margin-right: clamp(8px, 1.6vw, 32px); }
.board__empty-logo { height: clamp(120px, 34vh, 480px); width: auto; }
.draw__card.is-in 
/* Einzelansicht (nur Herren oder nur Frauen): groesseres Raster und groessere Schrift */
.board[data-count="1"] .division__title { font-size: clamp(24px, 4vh, 60px); }
.board[data-count="1"] .division__meta { font-size: clamp(14px, 2vh, 30px); }
.board[data-count="1"] .groups { gap: clamp(12px, 2vw, 40px) clamp(12px, 2.2vw, 44px); }
.board[data-count="1"] .group__head { padding: clamp(8px, 1.4vh, 22px) clamp(12px, 1.6vw, 30px); }
.board[data-count="1"] .group__name { font-size: clamp(18px, 3.2vh, 48px); }
.board[data-count="1"] .slot { padding: 0 clamp(12px, 1.6vw, 30px); }
.board[data-count="1"] .slot__name, .board[data-count="1"] .slot__no { font-size: clamp(18px, 3.6vh, 56px); }

/* ---- Freies Layout: keine Linien, viel Luft, weiche Radien (DHL Layoutprinzip) ---- */
.public .topbar { border-bottom: 0; min-height: clamp(72px, 11vh, 150px); padding: 0 clamp(24px, 4vw, 80px); gap: clamp(16px, 2.2vw, 44px); }
.public .topbar__fc img { height: clamp(52px, 8vh, 120px); }
.public .topbar__title { font-size: clamp(22px, 4vh, 60px); line-height: 1.1; }
.public .topbar__subtitle { font-size: clamp(14px, 2.2vh, 32px); font-weight: 400; opacity: 0.8; }
.public .topbar__dhl { height: clamp(14px, 2vh, 28px); opacity: 0.85; }
.board { padding: clamp(8px, 1.6vh, 28px) clamp(24px, 4vw, 80px) clamp(14px, 2.6vh, 40px); gap: clamp(16px, 3vh, 48px); }
.division { gap: clamp(8px, 1.6vh, 26px); }
.division__title { padding-left: 0; }
.division__title::before { display: none; }
.division__head { gap: clamp(12px, 2vw, 40px); }
.division__meta { color: var(--dhl-grey-600); opacity: 0.85; }
.groups { gap: clamp(14px, 2.4vw, 48px); }
.public .group { border-radius: clamp(16px, 2.6vh, 32px); padding: clamp(10px, 1.6vh, 24px) 0 clamp(6px, 1vh, 16px); }
.public .group__head { background: transparent; border-bottom: 0; padding: 0 clamp(14px, 1.8vw, 36px) clamp(4px, 0.8vh, 12px); }
.public .slot { border-top: 0; padding: 0 clamp(14px, 1.8vw, 36px); }
.public .slot--empty .slot__name { color: var(--dhl-grey-300); }
.public .slot--empty .slot__no { color: var(--dhl-grey-200); }
.ticker { border-top: 0; padding: 0 clamp(24px, 4vw, 80px) clamp(6px, 1.2vh, 16px); }
.ticker__last { font-weight: 400; }
.ticker__last em { font-weight: 700; }
.board[data-count="1"] .group { padding: clamp(14px, 2.4vh, 36px) 0 clamp(8px, 1.4vh, 22px); }
.board[data-count="1"] .group__head { padding: 0 clamp(18px, 2.2vw, 44px) clamp(6px, 1.2vh, 18px); }
.board[data-count="1"] .slot { padding: 0 clamp(18px, 2.2vw, 44px); }
.draw__card { border-radius: clamp(20px, 3.2vh, 40px); }

/* ---- Gruppen-Headline als leicht versetzter Postgelb-Kasten (DHL Layoutprinzip: überlappende Boxen) ---- */
.public .group { overflow: visible; position: relative; padding: calc(clamp(34px, 6vh, 90px) + clamp(6px, 1.2vh, 18px)) 0 clamp(8px, 1.6vh, 24px); }
.public .group__head {
  position: absolute; top: calc(clamp(6px, 1.2vh, 18px) * -1); left: calc(clamp(6px, 0.9vw, 18px) * -1);
  padding: clamp(6px, 1.1vh, 16px) clamp(16px, 2vw, 40px); background: var(--dhl-postyellow); border-bottom: 0;
  border-radius: clamp(10px, 1.6vh, 20px); box-shadow: 0 0 0 0 transparent;
}
.public .group__name { font-size: clamp(16px, 2.7vh, 40px); }
.public .groups { margin-top: clamp(6px, 1.2vh, 18px); }
.public .slot { padding: 0 clamp(18px, 2.2vw, 44px); }
.board { padding: clamp(10px, 2vh, 32px) clamp(28px, 4.6vw, 92px) clamp(16px, 3vh, 48px); }
.groups { gap: clamp(18px, 2.8vw, 56px); }
.board[data-count="1"] .group { padding-top: calc(clamp(40px, 7vh, 104px) + clamp(8px, 1.6vh, 24px)); padding-bottom: clamp(10px, 2vh, 30px); }
.board[data-count="1"] .group__head { padding: clamp(8px, 1.4vh, 20px) clamp(20px, 2.4vw, 48px); border-radius: clamp(12px, 2vh, 24px); }
.board[data-count="1"] .group__name { font-size: clamp(20px, 3.4vh, 50px); }
.board[data-count="1"] .groups { gap: clamp(20px, 3.2vh, 52px) clamp(24px, 3.2vw, 64px); }

/* ---- Foto-Hintergrund (unscharf) mit schwebenden Boxen, DHL Layoutprinzip ---- */
html { background: var(--dhl-postyellow); }
.public { background: transparent; }
.public::before {
  content: ""; position: fixed; inset: -3vh -3vw; z-index: -2;
  background: var(--bg, none) center / cover no-repeat, var(--dhl-postyellow);
  filter: blur(clamp(4px, 0.9vh, 12px)); transform: scale(1.03);
}
.public::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.42) 100%); }
.public .topbar { background: transparent; min-height: 0; align-items: center; padding-top: clamp(12px, 2.4vh, 36px); }
.public .topbar__brand {
  display: flex; align-items: center; gap: clamp(12px, 1.8vw, 36px);
  background: var(--dhl-postyellow); border-radius: clamp(14px, 2.2vh, 28px);
  padding: clamp(8px, 1.4vh, 20px) clamp(18px, 2.2vw, 44px) clamp(8px, 1.4vh, 20px) clamp(12px, 1.4vw, 28px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.public .topbar__actions { background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: clamp(6px, 1vh, 14px) clamp(14px, 1.6vw, 32px); }
.public .topbar__dhl { margin-right: clamp(6px, 1vw, 20px); }
.division__title { color: var(--dhl-white); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.division__meta { color: rgba(255, 255, 255, 0.88); opacity: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.public .group { box-shadow: 0 14px 44px rgba(0, 0, 0, 0.2); }
.public .group__head { top: calc(clamp(8px, 1.6vh, 24px) * -1); left: calc(clamp(8px, 1.2vw, 24px) * -1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.board[data-count="1"] .group__head { top: calc(clamp(10px, 2vh, 30px) * -1); left: calc(clamp(10px, 1.4vw, 28px) * -1); }
.ticker {
  background: rgba(255, 255, 255, 0.92); border-radius: clamp(12px, 2vh, 24px);
  margin: 0 clamp(28px, 4.6vw, 92px) clamp(10px, 2vh, 30px); padding: 0 clamp(16px, 2vw, 40px);
}
.ticker__pool { color: var(--dhl-grey-600); }
.board__empty { background: rgba(255, 255, 255, 0.92); border-radius: clamp(20px, 3.2vh, 40px); margin: auto; padding: clamp(24px, 5vh, 72px) clamp(32px, 6vw, 120px); }
.public .live__dot { animation-duration: 1.6s; }

/* ---- Luftiger: groessere Raender, Abstaende und Innenabstaende ---- */
.public .topbar { padding: clamp(16px, 3vh, 44px) clamp(32px, 6vw, 120px) 0; gap: clamp(20px, 3vw, 60px); }
.public .topbar__brand { padding: clamp(10px, 1.8vh, 26px) clamp(24px, 2.8vw, 56px) clamp(10px, 1.8vh, 26px) clamp(16px, 1.8vw, 36px); gap: clamp(16px, 2.2vw, 44px); }
.public .topbar__fc img { height: clamp(48px, 7.4vh, 108px); }
.board { padding: clamp(16px, 3.2vh, 48px) clamp(32px, 6vw, 120px) clamp(14px, 2.6vh, 40px); gap: clamp(20px, 4vh, 64px); }
.division { gap: clamp(12px, 2.4vh, 36px); }
.division__head { gap: clamp(16px, 2.4vw, 48px); padding-left: clamp(4px, 0.6vw, 12px); }
.groups { gap: clamp(20px, 3.6vw, 72px); }
.public .groups { margin-top: clamp(10px, 2vh, 30px); }
.public .group { padding: calc(clamp(30px, 5.2vh, 80px) + clamp(10px, 2vh, 30px)) 0 clamp(12px, 2.4vh, 36px); }
.public .group__head { padding: clamp(6px, 1.1vh, 16px) clamp(20px, 2.4vw, 48px); }
.public .group__name { font-size: clamp(15px, 2.5vh, 36px); }
.public .slot { padding: 0 clamp(20px, 3vw, 60px); gap: clamp(10px, 1.4vw, 28px); }
.public .slot__name, .public .slot__no { font-size: clamp(14px, 2.4vh, 36px); }
.board[data-count="1"] .groups { gap: clamp(24px, 4.4vh, 72px) clamp(28px, 4vw, 80px); margin-top: clamp(12px, 2.4vh, 36px); }
.board[data-count="1"] .group { padding-top: calc(clamp(36px, 6.4vh, 96px) + clamp(12px, 2.6vh, 40px)); padding-bottom: clamp(14px, 3vh, 44px); }
.board[data-count="1"] .group__head { padding: clamp(8px, 1.3vh, 20px) clamp(24px, 2.8vw, 56px); }
.board[data-count="1"] .group__name { font-size: clamp(18px, 3.1vh, 46px); }
.board[data-count="1"] .slot { padding: 0 clamp(24px, 3.4vw, 68px); }
.board[data-count="1"] .slot__name, .board[data-count="1"] .slot__no { font-size: clamp(17px, 3.2vh, 50px); }
.ticker { margin: 0 clamp(32px, 6vw, 120px) clamp(14px, 3vh, 44px); padding: 0 clamp(20px, 2.4vw, 48px); min-height: clamp(38px, 6vh, 84px); }

/* ---- Fusszeile: keine Box, Schrift direkt auf dem Hintergrund ---- */
.ticker { background: transparent; color: var(--dhl-white); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); padding: 0 clamp(6px, 0.8vw, 16px); }
.ticker__last em { color: var(--dhl-postyellow); }
.ticker__pool { color: rgba(255, 255, 255, 0.85); }

/* ---- Gruppen wie im DHL-Beispiel: weisse Box versetzt im Hintergrund (Gruppenname), gelbe Box davor (Mannschaften schwarz auf Gelb) ---- */
.public .group { display: block; position: relative; background: transparent; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
.public .group__head {
  position: absolute; left: 0; top: 0; width: 84%; height: 80%;
  background: var(--dhl-white); border-radius: clamp(14px, 2.4vh, 30px);
  padding: clamp(10px, 1.8vh, 26px) clamp(16px, 2vw, 40px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}
.public .group__name { font-size: clamp(15px, 2.5vh, 36px); }
.public .group__slots {
  position: absolute; left: 12%; top: 24%; right: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-evenly;
  background: var(--dhl-postyellow); border-radius: clamp(14px, 2.4vh, 30px);
  padding: clamp(8px, 1.4vh, 20px) clamp(16px, 2.2vw, 44px); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}
.public .slot { flex: 0 0 auto; min-height: 0; padding: 0; gap: clamp(10px, 1.2vw, 24px); }
.public .slot__name { color: var(--dhl-black); }
.public .slot__no { color: var(--dhl-red); }
.public .slot--empty .slot__name, .public .slot--empty .slot__no { color: rgba(0, 0, 0, 0.28); }
.slot--new { animation: slotInYellow 1600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes slotInYellow {
  0% { background: var(--dhl-white); transform: translateX(-14px); opacity: 0; border-radius: 8px; }
  35% { background: var(--dhl-white); transform: none; opacity: 1; }
  100% { background: transparent; }
}
.group.is-target { animation: groupPulseWhite 1600ms ease both; }
@keyframes groupPulseWhite { 0%, 100% { filter: none; } 30% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.9)); } }
.board[data-count="1"] .group__head { padding: clamp(12px, 2.2vh, 32px) clamp(20px, 2.4vw, 48px); border-radius: clamp(16px, 2.8vh, 36px); }
.board[data-count="1"] .group__slots { padding: clamp(10px, 1.8vh, 28px) clamp(22px, 2.6vw, 52px); border-radius: clamp(16px, 2.8vh, 36px); }
.board[data-count="1"] .group__name { font-size: clamp(18px, 3.1vh, 46px); }
.board[data-count="1"] .slot { padding: 0; }
.board[data-count="1"] .slot__name, .board[data-count="1"] .slot__no { font-size: clamp(17px, 3.2vh, 50px); }
.public .groups { margin-top: clamp(8px, 1.4vh, 20px); }

/* ---- Foto als abgerundete Flaeche mit weissem Rand (wie im DHL-Beispiel) ---- */
html { background: var(--dhl-white); }
.public { --frame-y: clamp(10px, 2.2vh, 32px); --frame-x: clamp(10px, 1.4vw, 32px); --frame-r: clamp(18px, 3.6vh, 48px); }
.public::before { inset: 0; transform: none; clip-path: inset(var(--frame-y) var(--frame-x) round var(--frame-r)); background: var(--bg, none) center / cover no-repeat, #0e2a14; }
.public::after { clip-path: inset(var(--frame-y) var(--frame-x) round var(--frame-r)); }
.public .topbar { padding-top: calc(var(--frame-y) + clamp(12px, 2.4vh, 36px)); padding-left: calc(var(--frame-x) + clamp(24px, 4.6vw, 92px)); padding-right: calc(var(--frame-x) + clamp(24px, 4.6vw, 92px)); }
.board { padding-left: calc(var(--frame-x) + clamp(24px, 4.6vw, 92px)); padding-right: calc(var(--frame-x) + clamp(24px, 4.6vw, 92px)); }
.ticker { margin-left: calc(var(--frame-x) + clamp(24px, 4.6vw, 92px)); margin-right: calc(var(--frame-x) + clamp(24px, 4.6vw, 92px)); margin-bottom: calc(var(--frame-y) + clamp(10px, 2.2vh, 32px)); }
.public .group__head { align-items: flex-start; justify-content: flex-start; }
/* Hintergrund nur leicht weichzeichnen, das Foto hat eigenes Bokeh */
.public::before { filter: blur(clamp(2px, 0.35vh, 5px)); }
.public::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.34) 100%); }
/* Gelbe Team-Box linksbuendig zur Gruppen-Headline */
.public .group__slots { left: clamp(16px, 2vw, 40px); }
.board[data-count="1"] .group__slots { left: clamp(20px, 2.4vw, 48px); }
/* Weisse Gruppen-Box: Headline kleiner, weniger Padding, Boxen exakt buendig */
.public .group__head, .board[data-count="1"] .group__head { top: 0; left: 0; }
.public .group__head { padding: clamp(8px, 1.4vh, 20px) clamp(14px, 1.7vw, 34px); }
.public .group__name { font-size: clamp(14px, 2.2vh, 32px); }
.public .group__slots { left: clamp(14px, 1.7vw, 34px); top: 26%; }
.board[data-count="1"] .group__head { padding: clamp(10px, 1.7vh, 26px) clamp(16px, 2vw, 40px); }
.board[data-count="1"] .group__name { font-size: clamp(16px, 2.6vh, 40px); }
.board[data-count="1"] .group__slots { left: clamp(16px, 2vw, 40px); top: 27%; }
/* Kopf ohne Kaesten: weisses FC-Logo, weisse Titel, weisses DHL-Logo und Live direkt auf dem Foto */
.public .topbar__brand { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.public .topbar__title, .public .topbar__subtitle { color: var(--dhl-white); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.public .topbar__subtitle { opacity: 0.9; }
.public .topbar__actions { background: transparent; padding: 0; border-radius: 0; }
.public .topbar__dhl { opacity: 1; height: clamp(16px, 2.4vh, 34px); }
.public .live { color: var(--dhl-white); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.public .live.is-offline { color: rgba(255, 255, 255, 0.7); }
/* Gelbe Team-Box naeher an die Headline */
.public .group__slots { top: 20%; }
.board[data-count="1"] .group__slots { top: 21%; }
/* Team-Box haengt an der Headline, nicht an der Kartenhoehe (wichtig bei hohen Frauen-Karten) */
.public .group__slots { top: clamp(36px, 6.4vh, 96px); }
.board[data-count="1"] .group__slots { top: clamp(44px, 7.4vh, 112px); }
/* Gleicher Abstand ueber und unter der Gruppen-Headline */
.public .group__name { line-height: 1.2; }
.public .group__slots { top: calc(2 * clamp(8px, 1.4vh, 20px) + 1.2 * clamp(14px, 2.2vh, 32px)); }
.board[data-count="1"] .group__slots { top: calc(2 * clamp(10px, 1.7vh, 26px) + 1.2 * clamp(16px, 2.6vh, 40px)); }
/* Ganz dezenter Verlauf oben, damit die Flutlichter etwas ruhiger werden */
.public::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 32%), linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.34) 100%); }
/* Abschluss der Modal-Animation: Name im Slot wird erst bei der Landung enthuellt */
.slot--pending .slot__name, .slot--pending .slot__no { opacity: 0; }
.slot--reveal { animation: slotInYellow 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slot--reveal .slot__name { animation: reveal 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slot--reveal .slot__no { animation: pop 520ms 120ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }