/* 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; }
/* Weisser Blitz beim Erscheinen des Namens: abgerundete Ecken wie im CD */
.slot--reveal { border-radius: clamp(8px, 1.4vh, 18px); margin: 0 calc(clamp(6px, 0.8vw, 16px) * -1); padding-left: clamp(6px, 0.8vw, 16px); padding-right: clamp(6px, 0.8vw, 16px); }
@keyframes slotInYellow {
  0% { background: var(--dhl-white); transform: translateX(-14px); opacity: 0; }
  35% { background: var(--dhl-white); transform: none; opacity: 1; }
  100% { background: transparent; }
}
/* Blitz-Pille: Innenabstand gleicht den negativen Rand aus, Text bleibt an Ort und Stelle */
.public .slot.slot--reveal, .board[data-count="1"] .slot.slot--reveal { padding-left: clamp(6px, 0.8vw, 16px); padding-right: clamp(6px, 0.8vw, 16px); }
/* Verlauf oben einen Tick staerker */
.public::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 36%), linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.34) 100%); }

/* ---- Finale: Auslosung komplett ---- */
.finale { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); animation: fadeIn 400ms ease both; overflow: hidden; }
.finale.is-leaving { animation: fadeOut 700ms ease both; }
.finale__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 30px); text-align: center; }
.finale__label { font-size: clamp(18px, 3.2vh, 46px); font-weight: 400; color: var(--dhl-white); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); animation: fadeUp 500ms 300ms ease both; }
.finale__stamp {
  display: inline-block; padding: 0.12em 0.6em; border-radius: 0.22em;
  background: var(--dhl-postyellow); color: var(--dhl-black);
  font-size: clamp(34px, 9.5vh, 150px); font-weight: 700; line-height: 1.12;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  animation: stamp 700ms 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.finale__lines { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.finale__lines span { position: absolute; left: 0; height: clamp(6px, 1.1vh, 16px); border-radius: 999px; background: var(--dhl-red); width: clamp(120px, 22vw, 420px); opacity: 0; }
.finale__lines span:nth-child(1) { top: calc(-1 * clamp(70px, 13vh, 190px)); animation: sweep 1300ms 1250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.finale__lines span:nth-child(2) { top: calc(-1 * clamp(52px, 9.6vh, 140px)); width: clamp(90px, 16vw, 320px); animation: sweep 1300ms 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.finale__lines span:nth-child(3) { top: calc(-1 * clamp(34px, 6.2vh, 90px)); width: clamp(60px, 10vw, 220px); animation: sweep 1300ms 1550ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes sweep { 0% { transform: translateX(-110%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(100vw); opacity: 0; } }
.public .group.is-lift { animation: lift 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes lift { 0% { transform: none; } 45% { transform: translateY(-1.4vh) scale(1.02); } 100% { transform: none; } }
.ticker__last.is-complete em { color: var(--dhl-postyellow); }

/* ---- Typo folgt der Flaeche: Schriftgroesse waechst mit der Hoehe der Box (Container Queries) ---- */
.public .group { container-type: size; }
.public .group__slots { container-type: size; }
.public .slot__name, .public .slot__no { font-size: clamp(14px, max(2.4vh, 10cqh), 7vh); }
.board[data-count="1"] .slot__name, .board[data-count="1"] .slot__no { font-size: clamp(17px, max(3.2vh, 10cqh), 7vh); }
.public .group__slots { padding: max(clamp(8px, 1.4vh, 20px), 4cqh) max(clamp(16px, 2.2vw, 44px), 5cqw); }
.board[data-count="1"] .group__slots { padding: max(clamp(10px, 1.8vh, 28px), 4cqh) max(clamp(22px, 2.6vw, 52px), 5cqw); }
.public .group__name { font-size: clamp(14px, max(2.2vh, 5cqh), 4.6vh); }
.board[data-count="1"] .group__name { font-size: clamp(16px, max(2.6vh, 5cqh), 4.6vh); }
.public .group__head { padding-top: max(clamp(8px, 1.4vh, 20px), 2.6cqh); }
.board[data-count="1"] .group__head { padding-top: max(clamp(10px, 1.7vh, 26px), 2.6cqh); }
.public .group__slots { top: calc(2 * max(clamp(8px, 1.4vh, 20px), 2.6cqh) + 1.2 * clamp(14px, max(2.2vh, 5cqh), 4.6vh)); }
.board[data-count="1"] .group__slots { top: calc(2 * max(clamp(10px, 1.7vh, 26px), 2.6cqh) + 1.2 * clamp(16px, max(2.6vh, 5cqh), 4.6vh)); }

/* ---- Hintergrund-Optionen aus dem Admin: Preset, Unschaerfe, Abdunklung ---- */
.public::before { filter: blur(var(--bg-blur, clamp(2px, 0.35vh, 5px))); }
.public::after { background: linear-gradient(180deg, rgba(0, 0, 0, var(--bg-dim-top, 0.3)) 0%, rgba(0, 0, 0, 0) 36%), linear-gradient(180deg, rgba(0, 0, 0, var(--bg-dim-start, 0.1)) 0%, rgba(0, 0, 0, var(--bg-dim-end, 0.34)) 100%); }
.public.is-dark-text .topbar__title, .public.is-dark-text .topbar__subtitle, .public.is-dark-text .division__title, .public.is-dark-text .live, .public.is-dark-text .ticker, .public.is-dark-text .ticker__pool { color: var(--dhl-black); text-shadow: none; }
.public.is-dark-text .division__meta { color: var(--dhl-grey-600); text-shadow: none; }
.public.is-dark-text .ticker__last em { color: var(--dhl-red); }
.public.is-dark-text .topbar__fc img { content: url("fc-logo.svg"); }
.public.is-dark-text .topbar__dhl { content: url("dhl-logo.svg"); }
.public.is-dark-text .live__dot { background: var(--dhl-red); }

/* ---- Teamnamen immer komplett: bis zu zwei Zeilen, Box nicht zu hoch ---- */
.public .slot__name { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; overflow-wrap: anywhere; }
.public .slot__name, .public .slot__no { font-size: clamp(14px, max(2.4vh, 8.5cqh), 6.4vh); }
.board[data-count="1"] .slot__name, .board[data-count="1"] .slot__no { font-size: clamp(17px, max(3.2vh, 8.5cqh), 6.4vh); }
.public .slot { align-items: center; }
.board[data-count="1"] .groups { align-content: start; }
.board[data-count="1"] .group { max-height: 56vh; }

/* Finale: Wobble ueber alle Gruppen und Konfetti */
.public .group.is-wobble { animation: wobble 1500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform-origin: center center; }
.public .group.is-lift.is-wobble { animation: wobble 1500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes wobble {
  0% { transform: scale(1) rotate(0); }
  15% { transform: scale(1.045) rotate(-1.6deg); }
  30% { transform: scale(1.055) rotate(1.6deg); }
  45% { transform: scale(1.045) rotate(-1.1deg); }
  60% { transform: scale(1.03) rotate(0.9deg); }
  78% { transform: scale(1.015) rotate(-0.4deg); }
  100% { transform: scale(1) rotate(0); }
}
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 46; pointer-events: none; }

/* Nur eine Reihe Gruppen (z. B. Frauen mit zwei Gruppen): Karten flacher, Zeilen enger */
.board[data-count="1"] .groups--one-row .group { max-height: 42vh; }

/* Regler aus dem Admin: Unschaerfe in px (auf 1080p bezogen), Abdunklung oben/unten in Prozent */
.public::before { filter: blur(var(--bg-blur, 4px)); }
.public::after { background: linear-gradient(180deg, rgba(0, 0, 0, var(--bg-dim-top, 0.3)) 0%, rgba(0, 0, 0, 0.06) 42%), linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, var(--bg-dim-bottom, 0.34)) 100%); }
/* Einreihige Gruppen vertikal mittig im freien Raum */
.board[data-count="1"] .groups--one-row { align-content: center; }
/* Einreihig: feste Kartenhoehe, Spur passt sich an, Reihe mittig */
.board[data-count="1"] .groups--one-row { grid-auto-rows: auto; align-content: center; }
.board[data-count="1"] .groups--one-row .group { height: 42vh; max-height: none; }

/* Postgelb-Overlay ueber dem Foto (0 bis 100 %), Ebenen: Foto (-3), Abdunklung (-2), Gelb (-1) */
.public::before { z-index: -3; }
.public::after { z-index: -2; }
.public.is-color::before { background: var(--bg-color, var(--dhl-postyellow)); filter: none; }
.public.is-color::after { background: none; }
.public.is-dark-text .group__head { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

/* ---- Rueckgaengig: Zeile wird zurueckgespult, roter Undo-Pfeil, Pille unten links ---- */
.slot--out { position: relative; border-radius: clamp(8px, 1.4vh, 18px); margin: 0 calc(clamp(6px, 0.8vw, 16px) * -1); animation: slotOut 1100ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.public .slot.slot--out, .board[data-count="1"] .slot.slot--out { padding-left: clamp(6px, 0.8vw, 16px); padding-right: clamp(6px, 0.8vw, 16px); }
.slot--out .slot__name, .slot--out .slot__no { animation: textRewind 1100ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.slot--out::after {
  content: ""; position: absolute; right: clamp(8px, 1vw, 20px); top: 50%; width: clamp(16px, 2.8vh, 40px); height: clamp(16px, 2.8vh, 40px); margin-top: calc(clamp(16px, 2.8vh, 40px) / -2);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40511' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5L4 10l5 5'/><path d='M4 10h10a6 6 0 0 1 0 12h-3'/></svg>") center / contain no-repeat;
  animation: spinBack 900ms 100ms ease both;
}
@keyframes slotOut { 0% { background: var(--dhl-white); } 40% { background: var(--dhl-white); } 100% { background: transparent; } }
@keyframes textRewind { 0% { transform: none; opacity: 1; letter-spacing: 0; } 45% { transform: none; opacity: 1; } 100% { transform: translateX(-9vw) scaleX(0.6); opacity: 0; letter-spacing: -0.06em; } }
@keyframes spinBack { 0% { transform: rotate(0) scale(0.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(-360deg) scale(1); opacity: 1; } }
.rewind {
  position: fixed; left: calc(var(--frame-x, 24px) + clamp(24px, 4.6vw, 92px)); bottom: calc(var(--frame-y, 24px) + clamp(48px, 8.5vh, 120px)); z-index: 30;
  display: flex; align-items: center; gap: clamp(8px, 1vw, 20px); padding: clamp(8px, 1.2vh, 18px) clamp(16px, 1.8vw, 36px) clamp(8px, 1.2vh, 18px) clamp(12px, 1.2vw, 24px);
  background: var(--dhl-white); color: var(--dhl-black); border-radius: 999px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.25);
  font-weight: 700; font-size: clamp(14px, 2.3vh, 34px); animation: rewindIn 3600ms ease both;
}
.rewind__icon { width: clamp(18px, 3vh, 44px); height: clamp(18px, 3vh, 44px); background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40511' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5L4 10l5 5'/><path d='M4 10h10a6 6 0 0 1 0 12h-3'/></svg>") center / contain no-repeat; animation: spinBack 900ms 250ms ease both; }
.rewind__text em { font-style: normal; color: var(--dhl-red); }
@keyframes rewindIn { 0% { transform: translateX(-130%); opacity: 0; } 10% { transform: none; opacity: 1; } 86% { transform: none; opacity: 1; } 100% { transform: translateX(-130%); opacity: 0; } }
/* Rueckspul-Pille auf Hoehe der Fusszeile, damit sie keine Gruppenbox verdeckt */
.rewind { bottom: calc(var(--frame-y, 24px) + clamp(10px, 2.2vh, 32px)); left: calc(var(--frame-x, 24px) + clamp(24px, 4.6vw, 92px) - clamp(6px, 0.8vw, 16px)); }
/* Auf flacher Farbflaeche: Boxen mit leichteren Schatten */
.public.is-color .group__head, .public.is-color .group__slots { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); }

/* Finale: Wobble je Gruppe etwas kraeftiger, serieller Ablauf */
.public .group.is-wobble { animation: wobble 1100ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes wobble {
  0% { transform: scale(1) rotate(0); }
  18% { transform: scale(1.06) rotate(-2deg); }
  36% { transform: scale(1.07) rotate(2deg); }
  54% { transform: scale(1.05) rotate(-1.3deg); }
  72% { transform: scale(1.03) rotate(0.9deg); }
  88% { transform: scale(1.01) rotate(-0.3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Credit in der Fusszeile */
.ticker { gap: clamp(16px, 2.4vw, 48px); }
.ticker__pool { margin-left: auto; }
.ticker__credit { white-space: nowrap; color: rgba(255, 255, 255, 0.85); font-size: clamp(11px, 1.7vh, 24px); letter-spacing: 0.02em; padding-left: clamp(12px, 1.6vw, 32px); border-left: 1px solid rgba(255, 255, 255, 0.35); }
.ticker__credit strong { color: var(--dhl-white); font-weight: 700; }
.public.is-dark-text .ticker__credit { color: var(--dhl-grey-600); border-left-color: rgba(0, 0, 0, 0.25); }
.public.is-dark-text .ticker__credit strong { color: var(--dhl-black); }

/* ---- Robustheit: Schrift folgt der Zeilenzahl, kein Ueberlauf, Einblendung nur beim ersten Aufbau ---- */
.public .group__slots { overflow: hidden; }
.public .slot__name, .public .slot__no { font-size: min(clamp(14px, max(2.4vh, 8.5cqh), 6.4vh), calc(100cqh / var(--rows, 4) / 1.5)); }
.board[data-count="1"] .slot__name, .board[data-count="1"] .slot__no { font-size: min(clamp(17px, max(3.2vh, 8.5cqh), 6.4vh), calc(100cqh / var(--rows, 4) / 1.5)); }
.public .group__slots--dense .slot__name { -webkit-line-clamp: 1; }
.public .group__slots--dense { padding-top: max(6px, 2cqh); padding-bottom: max(6px, 2cqh); }
.division { animation: none; }
.division--in { animation: fadeIn 500ms ease both; }

/* ---- Label „gesetzt“ neben gesetzten Teams (feste Position, keine Ziehung) ---- */
.public .slot__tag {
  flex: none; margin-left: auto; align-self: center;
  font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: clamp(11px, max(1.5vh, 4.4cqh), 2.8vh); line-height: 1; padding: 0.32em 0.7em 0.28em;
  color: var(--dhl-black); border: 0.14em solid var(--dhl-black); border-radius: 999px; opacity: 0.85;
}
.public .slot--pending .slot__tag { opacity: 0; }
.public.is-dark-text .slot__tag, .public.is-color .slot__tag { color: var(--dhl-black); border-color: var(--dhl-black); }

/* ---- Gesetzt, robust fuer schmale Boxen: Kennzeichen ist die Platznummer als schwarzes Kaestchen,
       das Wort GESETZT nur, wenn die gelbe Box breit genug ist (Container-Query) ---- */
.public .slot--seeded .slot__no {
  color: var(--dhl-white); background: var(--dhl-black); border-radius: 0.22em;
  padding: 0.04em 0.34em 0.02em; text-align: center; line-height: 1.2;
}
.public .slot--seeded .slot__tag { opacity: 1; }
@container (max-width: 520px) { .public .slot--seeded .slot__tag { display: none; } }

/* Schmale Boxen (vier Gruppen nebeneinander in kleinen Fenstern): Schrift zusaetzlich an der Boxbreite deckeln,
   damit Namen wie „NL Wiesbaden“ einzeilig bleiben */
.public .slot__name, .public .slot__no { font-size: min(clamp(14px, max(2.4vh, 8.5cqh), 6.4vh), calc(100cqh / var(--rows, 4) / 1.5), 9cqw); }
.board[data-count="1"] .slot__name, .board[data-count="1"] .slot__no { font-size: min(clamp(17px, max(3.2vh, 8.5cqh), 6.4vh), calc(100cqh / var(--rows, 4) / 1.5), 9cqw); }