/* =========================================================
   START-V2 – CONSOLIDATED STYLESHEET
   Reihenfolge entspricht exakt dem bisherigen Browser-Cascade.
   ========================================================= */

/* --- ehemaliger Inline-Styleblock 01 --- */
:root {
  --bg:#eef3f8;
  --surface:#ffffff;
  --line:#cbd5e1;
  --line2:#dde5ee;
  --text:#172033;
  --muted:#536276;
  --muted2:#748296;
  --blue:#1769e8;
  --blueSoft:#edf4ff;
  --green:#1ea74f;
  --greenSoft:#eef9f2;
  --orange:#f58a1f;
  --orangeSoft:#fff4e7;
  --break:#2d73df;
  --breakSoft:#eef5ff;
  --gray:#8b97a7;
  --shadow:0 1px 4px rgba(22,39,61,.04);
}

:root[data-theme="dark"] {
  --bg:#0f151d;
  --surface:#1a222d;
  --line:#394554;
  --line2:#2d3744;
  --text:#edf3f8;
  --muted:#b1bdca;
  --muted2:#8d9bac;
  --blue:#79aaff;
  --blueSoft:#1e304e;
  --green:#5bd886;
  --greenSoft:#173526;
  --orange:#ffb45c;
  --orangeSoft:#49341b;
  --break:#8cb2ff;
  --breakSoft:#1f304d;
  --gray:#a0aab7;
  --shadow:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size:14px;
  line-height:1.35;
}

button,
input {
  font:inherit;
}

button {
  cursor:pointer;
  color:inherit;
}

svg {
  display:block;
}

.shell {
  min-width:1180px;
}

.header {
  height:86px;
  padding:13px 28px;
  display:grid;
  grid-template-columns:minmax(440px,1fr) auto minmax(150px,1fr);
  align-items:center;
  gap:18px;
  background:var(--surface);
  border-bottom:1px solid var(--line2);
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
}

.brandIcon {
  width:50px;
  height:50px;
  color:var(--blue);
}

.brandIcon svg {
  width:50px;
  height:50px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.brand h1 {
  margin:0 0 2px;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.brand p {
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.views {
  align-self:stretch;
  display:flex;
  align-items:end;
  gap:20px;
}

.view {
  position:relative;
  height:52px;
  padding:0 8px 13px;
  border:0;
  background:transparent;
}

.view.active {
  color:var(--blue);
  font-weight:750;
}

.view.active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--blue);
}

.icons {
  justify-self:end;
  display:flex;
  gap:15px;
}

.icon {
  width:29px;
  height:29px;
  padding:2px;
  border:0;
  background:transparent;
}

.icon svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.toolbar {
  height:78px;
  padding:16px 24px;
  display:grid;
  grid-template-columns:370px 1px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  background:var(--surface);
  border-bottom:1px solid var(--line2);
}

.search {
  height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px 0 12px;
  border:1px solid var(--line);
  border-radius:7px;
}

.search svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.8;
}

.search input {
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:13px;
}

.slash {
  width:27px;
  height:27px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--bg);
  color:var(--muted2);
}

.divider {
  height:34px;
  background:var(--line2);
}

.chips {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.chip,
.subscribe {
  height:38px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  font-weight:650;
}

.chip.featured {
  color:var(--text);
  background:var(--surface);
}

.filter-separator {
  width:2px;
  height:30px;
  margin:0 8px;
  flex:0 0 2px;
  background:var(--line);
}

.chip.active {
  color:var(--blue);
  border-color:#a8c6f6;
  background:var(--blueSoft);
}

.chip.context:not(.active) {
  color:var(--blue);
  border-color:var(--blue);
  border-style:dashed;
  background:var(--surface);
}

.subscribe {
  color:var(--blue);
  border-color:#b6cdf5;
  background:#f8fbff;
  display:flex;
  align-items:center;
  gap:7px;
}

.subscribe svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}

.layout {
  padding:12px 20px 18px;
  display:grid;
  grid-template-columns:minmax(650px,54fr) minmax(390px,29fr) minmax(245px,17fr);
  gap:14px;
  align-items:start;
}

.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.timeline {
  height:calc(100vh - 188px);
  min-height:690px;
  display:flex;
  flex-direction:column;
}

.colheads {
  height:31px;
  display:grid;
  grid-template-columns:46fr 22fr 17fr 15fr;
  align-items:center;
  padding:0 14px 0 15px;
  border-bottom:1px solid var(--line2);
  color:var(--muted2);
  font-size:9.5px;
  font-weight:750;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.scroll {
  flex:1;
  overflow-y:auto;
  scrollbar-gutter:stable;
}

.sectionTitle {
  height:38px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 15px;
  border-bottom:1px solid var(--line2);
  font-size:11px;
  font-weight:780;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gray);
}

.sectionTitle.running {
  color:var(--green);
}

.sectionTitle.running .dot {
  background:var(--green);
}

.sectionTitle.soon {
  color:var(--orange);
}

.sectionTitle.soon .dot {
  background:var(--orange);
}

.sectionTitle.break {
  color:var(--break);
}

.sectionTitle.break .dot {
  background:var(--break);
}

.sectionTitle.later {
  color:var(--muted);
}

.row {
  width:100%;
  min-height:78px;
  padding:9px 14px 9px 15px;
  display:grid;
  grid-template-columns:46fr 22fr 17fr 15fr;
  gap:10px;
  align-items:center;
  border:0;
  border-bottom:1px solid var(--line2);
  background:var(--surface);
  text-align:left;
}

.row:hover {
  background:var(--bg);
}

.row.selected {
  box-shadow:inset 3px 0 0 var(--blue);
}

.row.runningRow {
  background:var(--greenSoft);
  box-shadow:inset 3px 0 0 var(--green);
}

.nameLine {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.star {
  font-size:20px;
  color:#748396;
  line-height:1;
}

.name {
  font-size:14px;
  font-weight:770;
  line-height:1.15;
}

.meta {
  display:flex;
  align-items:center;
  gap:6px 9px;
  flex-wrap:wrap;
  padding-left:29px;
}

.mode {
  min-height:21px;
  padding:1px 7px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#f3f5f8;
  color:#52627a;
  font-size:10px;
  font-weight:740;
}

.bands {
  color:var(--muted);
  font-size:11px;
}

.times {
  font-size:11px;
  font-weight:680;
  line-height:1.5;
}

.utc {
  display:block;
  margin-top:2px;
  color:var(--muted2);
  font-size:9.5px;
}

.badge {
  display:inline-flex;
  min-height:30px;
  max-width:100%;
  align-items:center;
  justify-content:center;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:10px;
  font-weight:740;
  text-align:center;
}

.badge.running {
  color:var(--green);
  border-color:#a9ddb9;
  background:#f7fff9;
}

.badge.soon {
  color:#e56f00;
  border-color:#ffc286;
  background:#fffaf4;
}

.badge.break {
  color:var(--break);
  border-color:#a9c6f6;
  background:#f7fbff;
}

.duration {
  color:var(--muted);
  font-size:10px;
}

.clockline {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:11px;
  font-weight:670;
}

.clockline svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.track {
  height:6px;
  border-radius:99px;
  background:#dfe5eb;
  overflow:hidden;
  margin-bottom:5px;
}

.fill {
  height:100%;
  background:var(--green);
  border-radius:99px;
}

.progressText {
  font-size:9.5px;
  line-height:1.25;
}

.detail {
  min-height:calc(100vh - 188px);
  padding:12px 14px 16px;
}

.detailTop {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.detailTitleLine {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:6px;
}

.detailDot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
}

.detail h2 {
  margin:0;
  font-size:18px;
  line-height:1.15;
}

.detailTags {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.detailBand {
  color:var(--muted);
  font-size:11px;
  margin-left:3px;
}

.detailStar {
  font-size:19px;
  color:#778799;
}

.stats {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:9px;
  margin:13px 0 15px;
}

.stat {
  min-height:82px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:6px;
}

.stat.durationBox {
  border-color:#9fc0f3;
  background:#fbfdff;
  text-align:center;
}

.statLabel {
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:780;
  letter-spacing:.05em;
}

.statValue {
  display:block;
  margin-top:6px;
  font-size:11px;
  font-weight:760;
  line-height:1.25;
}

.durationBox .statValue {
  color:#374151;
  font-size:24px;
  font-weight:810;
}

:root[data-theme="dark"] .durationBox .statValue {
  color:#d7dde5;
}

.statSub {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}

.infoTable {
  border-top:1px solid var(--line2);
  padding-top:10px;
}

.infoRow {
  display:grid;
  grid-template-columns:115px minmax(0,1fr);
  gap:12px;
  padding:3px 0;
}

.label {
  font-size:10px;
  font-weight:780;
  color:#35465d;
}

.value {
  font-size:10px;
  line-height:1.4;
}

.sep {
  height:1px;
  background:var(--line2);
  margin:8px 0;
}

.summary {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line2);
}

.summary h3 {
  margin:0 0 6px;
  font-size:10px;
}

.summary p {
  margin:0;
  font-size:10px;
  line-height:1.45;
}

.side {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.featuredPanel {
  padding:14px 14px 12px;
}

.featuredHead {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--blue);
}

.featuredHead span {
  font-size:18px;
}

.featuredHead h2 {
  margin:0;
  font-size:11px;
  font-weight:790;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.featuredItem {
  padding:12px 0;
  border-bottom:1px solid var(--line2);
}

.featuredItem h3 {
  margin:0 0 5px;
  font-size:12px;
}

.featuredItem .date {
  margin:0 0 7px;
  color:var(--muted);
  font-size:10px;
  font-weight:640;
}

.featuredItem .meta {
  padding-left:0;
}

.featuredItem p {
  margin:7px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.38;
}

.link {
  margin-top:11px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--blue);
  font-size:10px;
  font-weight:740;
}

.utcBox {
  display:flex;
  gap:10px;
  padding:15px 14px;
  border:1px solid #b7cdf5;
  border-radius:8px;
  background:var(--blueSoft);
}

.infoIcon {
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border:1px solid var(--blue);
  border-radius:50%;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  flex:0 0 auto;
}

.utcBox strong {
  display:block;
  margin-bottom:6px;
  color:var(--blue);
  font-size:11px;
}

.utcBox p {
  margin:0 0 5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.38;
}

.utcBox p:last-child {
  margin-bottom:0;
}

.toast {
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  box-shadow:0 8px 30px rgba(0,0,0,.14);
  font-size:11px;
}

[hidden] {
  display:none !important;
}

/* --- ehemaliger Inline-Styleblock 02 --- */
/* Visual prototype only:
   readability, proportions and rounded-corner pass. */

:root {
  --radius-panel:14px;
  --radius-card:11px;
  --radius-control:9px;
  --radius-small:7px;
}

.shell {
  width:min(calc(100% - 28px),1450px);
  min-width:1180px;
  margin:0 auto;
}

.header {
  height:92px;
  padding:14px 22px;
  grid-template-columns:minmax(450px,1fr) auto minmax(150px,1fr);
}

.brand {
  gap:15px;
}

.brandIcon,
.brandIcon svg {
  width:58px;
  height:58px;
}

.brand h1 {
  font-size:30px;
  font-weight:790;
  letter-spacing:-.025em;
}

.brand p {
  font-size:13.5px;
  line-height:1.3;
}

.view {
  font-size:14.5px;
}

.toolbar {
  height:80px;
  padding:17px 20px;
  grid-template-columns:340px 1px minmax(0,1fr) auto;
}

.search {
  border-radius:var(--radius-control);
}

.search input {
  font-size:14px;
}

.slash,
.chip,
.subscribe {
  border-radius:var(--radius-control);
}

.chip,
.subscribe {
  font-size:14px;
}

.layout {
  padding:14px 14px 20px;
  grid-template-columns:minmax(620px,50fr) minmax(420px,32fr) minmax(255px,18fr);
  gap:14px;
}

.panel,
.utcBox {
  border-radius:var(--radius-panel);
}

.timeline {
  height:calc(100vh - 206px);
  min-height:690px;
}

.colheads,
.row {
  grid-template-columns:minmax(0,39fr) minmax(168px,27fr) minmax(150px,20fr) minmax(104px,14fr);
}

.colheads {
  height:35px;
  padding-left:18px;
  padding-right:18px;
  font-size:10.5px;
  letter-spacing:.045em;
}

.scroll {
  padding:8px 0 12px;
}

.sectionTitle {
  height:40px;
  margin:6px 8px 8px;
  padding:0 12px;
  border-bottom:0;
  border-radius:var(--radius-control);
  font-size:12px;
}

.sectionTitle.running {
  background:var(--greenSoft);
}

.sectionTitle.soon {
  background:var(--orangeSoft);
}

.sectionTitle.break {
  background:var(--breakSoft);
}

.sectionTitle.later {
  background:var(--gray-soft);
}

.row {
  width:calc(100% - 16px);
  min-height:88px;
  margin:0 8px 8px;
  padding:11px 12px;
  border:1px solid var(--line2);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
}

.row:last-child {
  margin-bottom:10px;
  border-bottom:1px solid var(--line2);
}

.row.selected {
  border-color:#a9c6f6;
  box-shadow:
    inset 3px 0 0 var(--blue),
    var(--shadow);
}

.row.runningRow {
  border-color:#cbe8d4;
  box-shadow:
    inset 3px 0 0 var(--green),
    var(--shadow);
}

.name {
  font-size:15.5px;
  line-height:1.22;
}

.star {
  font-size:21px;
}

.mode {
  min-height:23px;
  padding:2px 8px;
  border-radius:var(--radius-small);
  font-size:11px;
}

.bands {
  font-size:11.8px;
  line-height:1.3;
}

.times {
  font-size:12.2px;
  line-height:1.5;
}

.utc {
  margin-top:3px;
  font-size:10.5px;
}

.badge {
  min-height:34px;
  padding:5px 10px;
  border-radius:var(--radius-control);
  font-size:11.2px;
  line-height:1.15;
}

.badge:has(.statusMain) {
  min-width:118px;
  flex-direction:column;
  gap:2px;
  white-space:nowrap;
}

.statusMain {
  display:block;
  font-weight:780;
}

.statusSub {
  display:block;
  font-size:10.4px;
  font-weight:650;
}

.clockline {
  font-size:11.8px;
}

.progressText {
  font-size:10.4px;
  line-height:1.3;
}

.detail {
  min-height:calc(100vh - 206px);
  padding:15px 16px 18px;
}

.detail h2 {
  font-size:20px;
}

.detailBand {
  font-size:11.8px;
}

.stats {
  gap:10px;
  margin:15px 0 17px;
}

.stat {
  min-height:90px;
  padding:11px;
  border-radius:var(--radius-control);
}

.statLabel {
  font-size:10.2px;
}

.statValue {
  margin-top:7px;
  font-size:12px;
  line-height:1.32;
}

.durationBox .statValue {
  font-size:27px;
}

.statSub {
  font-size:10.2px;
}

.infoRow {
  grid-template-columns:122px minmax(0,1fr);
  gap:13px;
  padding:4px 0;
}

.label,
.value {
  font-size:11.2px;
  line-height:1.47;
}

.summary h3 {
  font-size:11.5px;
}

.summary p {
  font-size:11.3px;
  line-height:1.5;
}

.featuredPanel {
  padding:16px 14px 14px;
}

.featuredHead h2 {
  font-size:12px;
}

.featuredItem {
  margin-bottom:9px;
  padding:13px 11px;
  border:1px solid var(--line2);
  border-radius:var(--radius-control);
}

.featuredItem[data-edition-id] {
  cursor:pointer;
}

.featuredItem[data-edition-id]:hover {
  background:var(--bg);
}

.featuredItem.selected {
  border-color:#a9c6f6;
  box-shadow:
    inset 3px 0 0 var(--blue),
    var(--shadow);
}

.featuredItem[data-edition-id]:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px;
}

.featuredItem:last-of-type {
  margin-bottom:0;
}

.featuredItem h3 {
  font-size:13px;
  line-height:1.3;
}

.featuredItem .date,
.featuredItem p,
.link,
.utcBox p {
  font-size:11px;
  line-height:1.45;
}

.utcBox {
  padding:16px 14px;
}

.utcBox strong {
  font-size:12px;
}

.track,
.fill {
  border-radius:999px;
}

:root[data-theme="dark"] .row,
:root[data-theme="dark"] .featuredItem {
  box-shadow:none;
}

@media (max-width:1470px) {
  .shell {
    width:calc(100% - 20px);
  }
}

/* --- ehemaliger Inline-Styleblock 03 --- */
/* Typography and neutral section-title pass for the isolated design prototype only. */

body {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
}

.brand h1 {
  font-size: 31px;
  letter-spacing: -0.02em;
}

.brand p {
  font-size: 14.5px;
  line-height: 1.35;
}

.view {
  font-size: 15px;
}

.search input {
  font-size: 14.8px;
}

.chip,
.subscribe {
  font-size: 14.6px;
  font-weight: 700;
}

.colheads {
  font-size: 11.2px;
}

.sectionTitle {
  height: 42px;
  font-size: 12.8px;
  letter-spacing: 0.02em;
  background: transparent !important;
  border: 1px solid var(--line2);
  box-shadow: none;
}

.sectionTitle.running,
.sectionTitle.soon,
.sectionTitle.break,
.sectionTitle.later {
  background: transparent !important;
}

.name {
  font-size: 16.5px;
  line-height: 1.24;
}

.mode {
  font-size: 11.6px;
}

.bands {
  font-size: 12.4px;
  line-height: 1.35;
}

.times {
  font-size: 13px;
  line-height: 1.52;
}

.utc {
  font-size: 11px;
}

.badge {
  font-size: 11.8px;
}

.statusMain {
  font-size: 11.9px;
}

.statusSub {
  font-size: 11px;
}

.clockline {
  font-size: 12.3px;
}

.progressText {
  font-size: 10.9px;
}

.detail h2 {
  font-size: 21.5px;
}

.detailBand {
  font-size: 12.3px;
}

.statLabel {
  font-size: 10.7px;
}

.statValue {
  font-size: 12.8px;
}

.durationBox .statValue {
  font-size: 29px;
}

.statSub {
  font-size: 10.8px;
}

.label,
.value {
  font-size: 11.9px;
  line-height: 1.5;
}

.summary h3 {
  font-size: 12px;
}

.summary p {
  font-size: 11.9px;
  line-height: 1.55;
}

.featuredHead h2 {
  font-size: 12.4px;
}

.featuredItem h3 {
  font-size: 13.8px;
}

.featuredItem .date,
.featuredItem p,
.link {
  font-size: 11.7px;
  line-height: 1.48;
}

.utcBox strong {
  font-size: 12.6px;
}

.utcBox p {
  font-size: 11.7px;
  line-height: 1.48;
}

/* --- ehemaliger Inline-Styleblock 04 --- */
/* Reference-based antenna update + unboxed RUNNING NOW title */

.brandIcon,
.brandIcon svg {
  width: 60px;
  height: 60px;
}

.brandIcon {
  color: var(--blue);
}

.sectionTitle.running {
  margin: 4px 8px 4px;
  padding: 0 2px;
  height: 28px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sectionTitle.running .dot {
  width: 10px;
  height: 10px;
}

.sectionTitle.running + .row.runningRow {
  margin-top: 2px;
}

/* --- ehemaliger Inline-Styleblock 05 --- */
/* Remove box styling from all status section titles in the isolated design prototype only. */

.sectionTitle {
  height: 28px !important;
  margin: 4px 8px 4px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sectionTitle.running,
.sectionTitle.soon,
.sectionTitle.break,
.sectionTitle.later {
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sectionTitle .dot {
  width: 10px;
  height: 10px;
}

.sectionTitle + .row {
  margin-top: 2px;
}

/* --- ehemaliger Inline-Styleblock 06 --- */
/*
  Visual prototype only.

  Contest list:
  - line 1 = contest name
  - line 2 = modes + bands
  - UTC start/end column removed
*/

.colheads,
.row {
  grid-template-columns:
    minmax(0, 61fr)
    minmax(165px, 24fr)
    minmax(105px, 15fr)
    !important;
}

/* Remove UTC Start / End header. */
.colheads > span:nth-child(2) {
  display: none !important;
}

/* Remove UTC Start / End from every contest row. */
.row > .times {
  display: none !important;
}

/* First line: contest name must never wrap. */
.nameLine {
  min-width: 0;
  flex-wrap: nowrap !important;
}

.nameLine .star {
  flex: 0 0 auto;
}

.name {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Second line: modes and bands only, also kept on one line. */
.meta {
  min-width: 0;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow: hidden;
}

.meta .mode {
  flex: 0 0 auto;
}

.meta .bands {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- ehemaliger Inline-Styleblock 07 --- */
/* Make all list status badges exactly the same size. */

.row > div:nth-child(2) .badge,
.row > div:nth-child(3) .badge,
.row > div:nth-child(4) .badge,
.badge {
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  line-height: 1.15 !important;
}

.badge .statusMain,
.badge .statusSub {
  display: block;
  width: 100%;
  text-align: center;
}

.badge .statusMain {
  margin-bottom: 2px;
}

/* Keep the vertical two-line layout for multi-line status boxes. */
.badge:has(.statusMain),
.badge.running,
.badge.break {
  flex-direction: column !important;
  gap: 0 !important;
}

/* --- ehemaliger Inline-Styleblock 08 --- */
/* Remove all grouping/info rows from the isolated visual prototype. */

.sectionTitle {
  display: none !important;
}

/* Keep a small, consistent gap between contest groups. */
.scroll > section {
  padding-top: 4px;
}

.scroll > section:first-child {
  padding-top: 0;
}

/* --- ehemaliger Inline-Styleblock 09 --- */
/*
  Fixed desktop design prototype.

  The layout no longer shrinks or reflows when
  the browser window becomes narrower.
*/

/*
  Fixed maximum/design width:
  - avoids excessive spacing on very wide displays
  - preserves exact proportions on narrower windows
*/
.shell {
  width: 1450px !important;
  min-width: 1450px !important;
  max-width: 1450px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header proportions remain fixed. */
.header {
  grid-template-columns:
    525px
    400px
    1fr
    !important;

  min-width: 1450px !important;
}

/* Brand never wraps. */
.brand {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.brand h1 {
  white-space: nowrap !important;
  overflow: visible !important;
}

.brand p {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Calendar navigation always stays on one line. */
.views {
  width: 400px !important;
  min-width: 400px !important;

  display: flex !important;
  flex-wrap: nowrap !important;

  align-items: end !important;
  justify-content: center !important;

  white-space: nowrap !important;
}

.view {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Header icons must not move underneath. */
.icons {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/*
  Toolbar remains one fixed row:
  Search | divider | filters | Subscribe
*/
.toolbar {
  min-width: 1450px !important;

  grid-template-columns:
    340px
    1px
    minmax(0, 1fr)
    auto
    !important;
}

.chips {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.chip {
  flex: 0 0 auto !important;
}

.subscribe {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Main three-column area keeps its desktop proportions. */
.layout {
  min-width: 1450px !important;

  grid-template-columns:
    50fr
    32fr
    18fr
    !important;
}

/*
  Neutralize earlier responsive rules for this
  desktop-only visual prototype.
*/
@media (max-width: 1470px) {
  .shell {
    width: 1450px !important;
    min-width: 1450px !important;
    max-width: 1450px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --- ehemaliger Inline-Styleblock 10 --- */
/*
  Neutral status for contests starting more than 24 hours later.

  Existing meanings remain unchanged:
  green  = running
  orange = starts within 24 hours
  blue   = operating break
  grey   = later start
*/

.badge.future {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.badge.future .statusMain {
  color: #64748b !important;
  font-weight: 650 !important;
  margin-bottom: 2px !important;
}

.badge.future .statusSub {
  color: #334155 !important;
  font-weight: 750 !important;
}

/* --- ehemaliger Inline-Styleblock 11 --- */
/*
  Briefing hierarchy:
  Contest name -> Summary -> Start / End / Duration -> Details
*/

.detailTop {
  margin-bottom: 8px !important;
}

.summary.summaryTop {
  margin: 0 0 15px !important;
  padding: 0 0 13px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line2) !important;
}

/* Status colour language used by the briefing title. */
.detailDot.running {
  background: var(--green) !important;
}

.detailDot.soon {
  background: var(--orange) !important;
}

.detailDot.break {
  background: var(--break) !important;
}

.detailDot.later {
  background: #94a3b8 !important;
}

/* --- ehemaliger Inline-Styleblock 12 --- */
/*
  Featured sidebar uses the same status colour language
  as the main contest list and contest briefing.

  green  = running
  orange = starts within 24 hours
  blue   = operating break
  grey   = later future contest
*/

.featuredItem h3 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.featuredStatusDot {
  display: inline-block;
  flex: 0 0 auto;

  width: 8px;
  height: 8px;

  margin-top: 5px;

  border-radius: 50%;
  background: #94a3b8;
}

.featuredStatusDot.running {
  background: var(--green);
}

.featuredStatusDot.soon {
  background: var(--orange);
}

.featuredStatusDot.break {
  background: var(--break);
}

.featuredStatusDot.later {
  background: #94a3b8;
}

/* --- ehemaliger Inline-Styleblock 13 --- */
html:not(.live-data-ready) #scroll .row,
    html:not(.live-data-ready) .detail .detailTop,
    html:not(.live-data-ready) .detail .summary,
    html:not(.live-data-ready) .detail .stats,
    html:not(.live-data-ready) .detail .infoTable,
    html:not(.live-data-ready) .featuredItem {
      visibility: hidden;
    }

/* --- ehemaliger Inline-Styleblock 14 --- */
/*
  A-011:
  Denser two-line contest cards.
  Data and list semantics remain unchanged.
*/

.row {
  min-height:72px !important;
  margin-bottom:6px !important;
  padding:6px 12px !important;
}

.row:last-child {
  margin-bottom:8px !important;
}

.row .nameLine {
  margin-bottom:4px !important;
}

.row .meta {
  gap:4px 6px !important;
}

.row .mode {
  min-height:20px;
  padding:1px 6px;
  font-size:10.5px;
}

/*
  With five or more concrete modes, keep every mode visible
  but remove pill chrome to preserve the two-line layout.
*/
.row .meta.manyModes .mode {
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.row .bands {
  font-size:11.4px;
}

/* Preserve uniform status geometry, just make it less tall. */
.row .badge {
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding:4px 8px !important;
}

/* --- ehemaliger Inline-Styleblock 15 --- */
/*
  A-011:
  List and Briefing information-density refinement.
*/

/* Give the Contest Briefing a little more workspace. */
.layout {
  grid-template-columns:
    minmax(590px,47fr)
    minmax(465px,35fr)
    minmax(255px,18fr)
    !important;
}

/*
  Visible List columns:
  Contest | Status | Duration
*/
.colheads,
.row {
  grid-template-columns:
    minmax(0,1fr)
    124px
    100px
    !important;
}


/* --------------------------------------------------------
   STATUS
   -------------------------------------------------------- */

.row .badge {
  width:114px !important;
  min-width:114px !important;
  max-width:114px !important;
}

.row .statusMain {
  font-size:10.7px !important;
  line-height:1.1 !important;
  white-space:nowrap;
}

.row .statusSub {
  font-size:10.4px !important;
  line-height:1.1 !important;
  white-space:nowrap;
}


/* --------------------------------------------------------
   LIST DURATION
   Enough room remains for values such as 215h 59m.
   -------------------------------------------------------- */

.row .clockline {
  justify-content:center;
  white-space:nowrap;
  font-size:11.3px;
}


/* --------------------------------------------------------
   BRIEFING SCHEDULE

   START + END visually form one joined card.
   DURATION occupies the right side.
   -------------------------------------------------------- */

.stats {
  grid-template-columns:
    minmax(0,2fr)
    minmax(140px,1fr)
    !important;

  grid-template-rows:1fr 1fr;

  column-gap:10px !important;
  row-gap:0 !important;
}


/* START */
.stats > .stat:nth-child(1) {
  grid-column:1;
  grid-row:1;

  min-height:45px !important;
  padding:7px 11px 5px !important;

  display:grid;
  grid-template-columns:
    52px
    minmax(0,1fr);

  align-items:center;
  gap:7px;

  border-bottom:0;

  border-radius:
    var(--radius-control)
    var(--radius-control)
    0
    0
    !important;
}


/* END */
.stats > .stat:nth-child(2) {
  grid-column:1;
  grid-row:2;

  min-height:45px !important;
  padding:5px 11px 7px !important;

  display:grid;
  grid-template-columns:
    52px
    minmax(0,1fr);

  align-items:center;
  gap:7px;

  border-radius:
    0
    0
    var(--radius-control)
    var(--radius-control)
    !important;
}


/* START / END labels */
.stats > .stat:nth-child(1) .statLabel,
.stats > .stat:nth-child(2) .statLabel {
  margin:0;
  white-space:nowrap;
}


/* Complete date + time stays on one line. */
.stats > .stat:nth-child(1) .statValue,
.stats > .stat:nth-child(2) .statValue {
  margin:0 !important;

  font-size:11.4px !important;
  line-height:1.2 !important;

  white-space:nowrap;
}


/* --------------------------------------------------------
   BRIEFING DURATION
   -------------------------------------------------------- */

.stats > .durationBox {
  grid-column:2;
  grid-row:1 / span 2;

  min-height:90px !important;
  padding:8px 10px !important;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.stats > .durationBox .statValue {
  margin-top:5px !important;

  font-size:20px !important;
  line-height:1.05 !important;
}

.stats > .durationBox .statSub {
  margin-top:6px !important;

  font-size:9.8px !important;
  line-height:1.15 !important;

  white-space:nowrap;
}

/* --- ehemaliger Inline-Styleblock 16 --- */
/*
  A-011:
  Fine-tune list row height after live visual review.
  Only cosmetic density changes.
*/

.row {
  min-height:66px !important;
  padding:5px 12px !important;
  margin-bottom:5px !important;
}

.row:last-child {
  margin-bottom:7px !important;
}

.row .nameLine {
  margin-bottom:3px !important;
}

.row .meta {
  gap:3px 6px !important;
}

.row .mode {
  min-height:18px !important;
  padding:0 6px !important;
  font-size:10.3px !important;
}

.row .bands {
  font-size:11.2px !important;
}

.row .badge {
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:3px 8px !important;
}

.row .statusMain {
  margin-bottom:1px !important;
}

.row .clockline {
  font-size:11.1px !important;
}

/* --- ehemaliger Inline-Styleblock 17 --- */
/*
  A-011 visual color prototype.

  Principle:
  neutral depth for the general page;
  semantic color only where it carries meaning.
*/

:root {
  --a11-page:#eef3f8;
  --a11-header:#eaf1f8;
  --a11-toolbar:#f5f8fb;
  --a11-panel:#ffffff;
  --a11-panel-soft:#f8fafc;
  --a11-card:#fafcff;

  --a11-panel-border:#d4dde8;

  --a11-row:#fbfcfe;
  --a11-row-hover:#f5f8fb;

  --a11-soon-bg:#fff8ef;
  --a11-soon-hover:#fff3e3;
  --a11-soon-border:#f5c88f;
  --a11-soon-accent:#f58a1f;

  --a11-running-bg:#f1faf4;
  --a11-running-hover:#e8f7ed;
  --a11-running-border:#b9dfc4;
  --a11-running-accent:#1ea74f;

  --a11-break-bg:#f2f7ff;
  --a11-break-hover:#eaf2ff;
  --a11-break-border:#b9cff2;
  --a11-break-accent:#4b83d1;

  --a11-future-bg:#fafbfd;
  --a11-future-border:#d8e0ea;
}

:root[data-theme="dark"] {
  --a11-page:#0d131a;
  --a11-header:#151e29;
  --a11-toolbar:#121a23;
  --a11-panel:#171d25;
  --a11-panel-soft:#1a222d;
  --a11-card:#1b232e;

  --a11-panel-border:#303b49;

  --a11-row:#181f28;
  --a11-row-hover:#1d2631;

  --a11-soon-bg:#2b241a;
  --a11-soon-hover:#33291c;
  --a11-soon-border:#6c5231;
  --a11-soon-accent:#ffb45c;

  --a11-running-bg:#18271f;
  --a11-running-hover:#1c3025;
  --a11-running-border:#345d43;
  --a11-running-accent:#5bd886;

  --a11-break-bg:#192536;
  --a11-break-hover:#1d2c40;
  --a11-break-border:#385575;
  --a11-break-accent:#79aaff;

  --a11-future-bg:#181f28;
  --a11-future-border:#303946;
}


/* ========================================================
   PAGE DEPTH
   ======================================================== */

body {
  background:var(--a11-page) !important;
}

.shell {
  background:transparent !important;
}


/*
  Header is intentionally a little more pronounced than the
  toolbar below it. This visually anchors the application.
*/
.header {
  background:var(--a11-header) !important;
  border-bottom-color:var(--a11-panel-border) !important;
  box-shadow:
    0 1px 0 rgba(24,38,58,.03),
    0 3px 10px rgba(24,38,58,.035);
}

:root[data-theme="dark"] .header {
  box-shadow:
    0 1px 0 rgba(255,255,255,.02),
    0 3px 10px rgba(0,0,0,.18);
}


/* Secondary control level */
.toolbar {
  background:var(--a11-toolbar) !important;
  border-bottom-color:var(--a11-panel-border) !important;
}


/* Main content panels remain light and calm. */
.panel {
  background:var(--a11-panel) !important;
  border-color:var(--a11-panel-border) !important;
  box-shadow:
    0 1px 2px rgba(24,38,58,.035),
    0 5px 14px rgba(24,38,58,.025);
}

:root[data-theme="dark"] .panel {
  box-shadow:
    0 1px 2px rgba(0,0,0,.24);
}


/* Column heading gains its own subtle plane. */
.timeline .colheads {
  background:var(--a11-panel-soft) !important;
  border-bottom-color:var(--a11-panel-border) !important;
}


/* ========================================================
   CONTEST LIST — NEUTRAL BASE
   ======================================================== */

.row {
  background:var(--a11-row) !important;
  border-color:var(--a11-future-border) !important;

  transition:
    background-color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.row:hover {
  background:var(--a11-row-hover) !important;
}


/* ========================================================
   STARTS WITHIN 24 HOURS
   ======================================================== */

.row:has(.badge.soon) {
  background:var(--a11-soon-bg) !important;
  border-color:var(--a11-soon-border) !important;
  box-shadow:
    inset 4px 0 0
    var(--a11-soon-accent) !important;
}

.row:has(.badge.soon):hover {
  background:var(--a11-soon-hover) !important;
}


/*
  If a soon contest is selected, its semantic orange
  replaces the generic blue selection accent.
*/
.row.selected:has(.badge.soon) {
  border-color:var(--a11-soon-accent) !important;
  box-shadow:
    inset 4px 0 0
    var(--a11-soon-accent) !important;
}


/* ========================================================
   RUNNING
   ======================================================== */

.row.runningRow,
.row:has(.badge.running) {
  background:var(--a11-running-bg) !important;
  border-color:var(--a11-running-border) !important;
  box-shadow:
    inset 4px 0 0
    var(--a11-running-accent) !important;
}

.row.runningRow:hover,
.row:has(.badge.running):hover {
  background:var(--a11-running-hover) !important;
}

.row.selected.runningRow,
.row.selected:has(.badge.running) {
  border-color:var(--a11-running-accent) !important;
  box-shadow:
    inset 4px 0 0
    var(--a11-running-accent) !important;
}


/* ========================================================
   OPERATING BREAK
   ======================================================== */

.row:has(.badge.break) {
  background:var(--a11-break-bg) !important;
  border-color:var(--a11-break-border) !important;
  box-shadow:
    inset 4px 0 0
    var(--a11-break-accent) !important;
}

.row:has(.badge.break):hover {
  background:var(--a11-break-hover) !important;
}

.row.selected:has(.badge.break) {
  border-color:var(--a11-break-accent) !important;
  box-shadow:
    inset 4px 0 0
    var(--a11-break-accent) !important;
}


/* ========================================================
   LATER / NEUTRAL
   ======================================================== */

.row:has(.badge.future) {
  background:var(--a11-future-bg) !important;
  border-color:var(--a11-future-border) !important;
}


/*
  Neutral selected contests retain blue because blue here
  means selection/navigation rather than temporal status.
*/
.row.selected:has(.badge.future) {
  border-color:#8bb4f0 !important;
  box-shadow:
    inset 4px 0 0 var(--blue) !important;
}


/* ========================================================
   STATUS BADGES
   Make badge and row feel like one semantic system.
   ======================================================== */

.row .badge.soon {
  background:#fff3e4 !important;
  border-color:var(--a11-soon-border) !important;
}

.row .badge.running {
  background:#edf9f1 !important;
  border-color:var(--a11-running-border) !important;
}

.row .badge.break {
  background:#eef5ff !important;
  border-color:var(--a11-break-border) !important;
}

:root[data-theme="dark"] .row .badge.soon {
  background:#332719 !important;
}

:root[data-theme="dark"] .row .badge.running {
  background:#1d3024 !important;
}

:root[data-theme="dark"] .row .badge.break {
  background:#1d2b3e !important;
}


/* ========================================================
   BRIEFING DEPTH
   ======================================================== */

/*
  Start / End should sit on a slightly different plane from
  the surrounding white briefing panel.
*/
.stats > .stat:not(.durationBox) {
  background:var(--a11-card) !important;
  border-color:var(--a11-panel-border) !important;
}


/*
  Duration is a neutral information card.
  Blue is reserved for navigation / featured and
  Operating Break semantics.
*/
.stats > .durationBox {
  background:var(--a11-card) !important;
  border-color:var(--a11-panel-border) !important;
}


/* ========================================================
   FEATURED CARDS
   ======================================================== */

.featuredItem {
  background:var(--a11-card) !important;
  border-color:var(--a11-panel-border) !important;
}

.featuredItem:hover {
  background:var(--a11-panel-soft) !important;
}


/* ========================================================
   UTC / LOCAL-TIME INFORMATION BOX

   The card itself is neutral. Blue remains only on the
   informational icon / heading, so the box does not compete
   with semantic contest colors.
   ======================================================== */

.utcBox {
  background:var(--a11-card) !important;
  border-color:var(--a11-panel-border) !important;

  box-shadow:
    0 1px 2px rgba(24,38,58,.035) !important;
}

.utcBox strong {
  color:var(--blue) !important;
}

:root[data-theme="dark"] .utcBox {
  background:var(--a11-card) !important;
  border-color:var(--a11-panel-border) !important;
  box-shadow:none !important;
}

/* --- ehemaliger Inline-Styleblock 18 --- */
/*
  A-011:
  Selection is deliberately separate from contest status.

  Status:
    green / orange / blue / neutral

  Selection:
    strong blue perimeter around the complete item
*/

:root {
  --a11-selection:#1769e8;
  --a11-selection-soft:rgba(23,105,232,.15);
}

:root[data-theme="dark"] {
  --a11-selection:#79aaff;
  --a11-selection-soft:rgba(121,170,255,.22);
}


/* ========================================================
   SELECTED CONTEST IN MAIN LIST
   ======================================================== */

.row.selected {
  position:relative;
  z-index:2;

  outline:
    2px solid
    var(--a11-selection) !important;

  outline-offset:-2px;

  /*
    A very small secondary halo makes the selection clear
    without replacing the semantic status inset at the left.
  */
  filter:
    drop-shadow(
      0 0 2px
      var(--a11-selection-soft)
    );
}


/*
  Keep the semantic left-edge color already supplied by
  Running / Soon / Operating Break rules.
  The blue perimeter means "selected".
*/
.row.selected:focus-visible {
  outline:
    3px solid
    var(--a11-selection) !important;

  outline-offset:-3px;
}


/* ========================================================
   SELECTED ITEM IN NEXT FEATURED CONTESTS
   ======================================================== */

.featuredItem.selected {
  position:relative;
  z-index:2;

  border-color:
    var(--a11-selection) !important;

  outline:
    2px solid
    var(--a11-selection) !important;

  outline-offset:-2px;

  box-shadow:
    0 0 0 1px
    var(--a11-selection-soft) !important;
}


/*
  Explicit Dark Mode rule:
  this intentionally overrides the older
  dark-mode box-shadow:none rule.
*/
:root[data-theme="dark"]
.featuredItem.selected {
  border-color:
    var(--a11-selection) !important;

  outline:
    2px solid
    var(--a11-selection) !important;

  outline-offset:-2px;

  box-shadow:
    0 0 0 1px
    var(--a11-selection-soft) !important;
}


/* Keyboard focus remains even stronger than selection. */
.featuredItem.selected:focus-visible {
  outline:
    3px solid
    var(--a11-selection) !important;

  outline-offset:-3px;
}

/* --- ehemaliger Inline-Styleblock 19 --- */
/*
  A-011 semantic contest colors.

  Color describes temporal status only.
  Featured/non-Featured is independent and is represented
  by the star.

  Running         = green
  Starts < 24 h   = orange
  Operating break = blue
  Future          = grey
*/

:root {
  --a11-future-accent:#94a3b8;
  --a11-future-glow:rgba(148,163,184,.22);
}

:root[data-theme="dark"] {
  --a11-future-accent:#c0cad7;
  --a11-future-glow:rgba(192,202,215,.25);
}


/* ========================================================
   MAIN CONTEST LIST
   ======================================================== */

/* Running */
.row.selected.runningRow,
.row.selected:has(.badge.running) {
  border-color:
    var(--green) !important;

  outline-color:
    var(--green) !important;

  box-shadow:
    inset 4px 0 0
    var(--green) !important;

  filter:
    drop-shadow(
      0 0 2px rgba(30,167,79,.20)
    ) !important;
}


/* Starts within 24 h */
.row.selected:has(.badge.soon) {
  border-color:
    var(--orange) !important;

  outline-color:
    var(--orange) !important;

  box-shadow:
    inset 4px 0 0
    var(--orange) !important;

  filter:
    drop-shadow(
      0 0 2px rgba(245,138,31,.22)
    ) !important;
}


/* Operating break */
.row.selected:has(.badge.break) {
  border-color:
    var(--break, #4b83d1) !important;

  outline-color:
    var(--break, #4b83d1) !important;

  box-shadow:
    inset 4px 0 0
    var(--break, #4b83d1) !important;

  filter:
    drop-shadow(
      0 0 2px rgba(75,131,209,.20)
    ) !important;
}


/* Future */
.row.selected:has(.badge.future) {
  border-color:
    var(--a11-future-accent) !important;

  outline-color:
    var(--a11-future-accent) !important;

  box-shadow:
    inset 4px 0 0
    var(--a11-future-accent) !important;

  filter:
    drop-shadow(
      0 0 2px
      var(--a11-future-glow)
    ) !important;
}


/* ========================================================
   NEXT FEATURED CONTESTS

   Featured status does NOT create another color.
   The selected card uses exactly the same temporal color
   as the matching contest in the main list.
   ======================================================== */

/* Running */
.featuredItem.selected:has(
  .featuredStatusDot.running
) {
  border-color:
    var(--green) !important;

  outline-color:
    var(--green) !important;

  box-shadow:
    0 0 0 1px
    rgba(30,167,79,.20) !important;
}


/* Starts within 24 h */
.featuredItem.selected:has(
  .featuredStatusDot.soon
) {
  border-color:
    var(--orange) !important;

  outline-color:
    var(--orange) !important;

  box-shadow:
    0 0 0 1px
    rgba(245,138,31,.22) !important;
}


/* Operating break */
.featuredItem.selected:has(
  .featuredStatusDot.break
) {
  border-color:
    var(--break, #4b83d1) !important;

  outline-color:
    var(--break, #4b83d1) !important;

  box-shadow:
    0 0 0 1px
    rgba(75,131,209,.20) !important;
}


/* Future */
.featuredItem.selected:has(
  .featuredStatusDot.future
) {
  border-color:
    var(--a11-future-accent) !important;

  outline-color:
    var(--a11-future-accent) !important;

  box-shadow:
    0 0 0 1px
    var(--a11-future-glow) !important;
}


/* ========================================================
   DARK MODE GLOW
   Color meaning itself remains identical.
   ======================================================== */

:root[data-theme="dark"]
.row.selected.runningRow,
:root[data-theme="dark"]
.row.selected:has(.badge.running) {
  filter:
    drop-shadow(
      0 0 2px rgba(91,216,134,.28)
    ) !important;
}

:root[data-theme="dark"]
.row.selected:has(.badge.soon) {
  filter:
    drop-shadow(
      0 0 2px rgba(255,180,92,.28)
    ) !important;
}

:root[data-theme="dark"]
.row.selected:has(.badge.break) {
  filter:
    drop-shadow(
      0 0 2px rgba(121,170,255,.28)
    ) !important;
}

/* --- ehemaliger Inline-Styleblock 20 --- */
/*
  A-011 Featured/Future selection rule.

  Featured itself is represented by the blue star.

  A blue perimeter is used ONLY when a neutral future
  Featured contest is actually selected.

  Non-selected future Featured contests retain the normal
  neutral border.

  Temporal semantics remain:
    Running          = green
    Starts < 24 h    = orange
    Operating break  = blue
    Future           = neutral
*/


/* ========================================================
   FUTURE STATUS BADGE

   Reduce the very bright "Starts in" surface.
   ======================================================== */

:root {
  --a11-future-badge-bg:#edf1f5;
  --a11-future-badge-border:#cbd4df;
  --a11-future-badge-text:#45566c;
}

:root[data-theme="dark"] {
  --a11-future-badge-bg:#26313d;
  --a11-future-badge-border:#445266;
  --a11-future-badge-text:#d0d8e2;
}

.row .badge.future {
  background:
    var(--a11-future-badge-bg) !important;

  border-color:
    var(--a11-future-badge-border) !important;

  color:
    var(--a11-future-badge-text) !important;
}

.row .badge.future .statusMain,
.row .badge.future .statusSub {
  color:inherit !important;
}


/* ========================================================
   MAIN CONTEST LIST

   Only SELECTED + FEATURED + FUTURE is blue.
   ======================================================== */

.row.featuredRow.selected:has(
  .badge.future
) {
  border-color:
    var(--a11-selection) !important;

  outline-color:
    var(--a11-selection) !important;

  box-shadow:
    inset 4px 0 0
    var(--a11-selection) !important;

  filter:
    drop-shadow(
      0 0 2px
      var(--a11-selection-soft)
    ) !important;
}


/* ========================================================
   NEXT FEATURED CONTESTS

   All cards here are Featured, but only the selected
   future/later card receives the blue perimeter.
   ======================================================== */

.featuredItem.selected:has(
  .featuredStatusDot.later
) {
  border-color:
    var(--a11-selection) !important;

  outline-color:
    var(--a11-selection) !important;

  box-shadow:
    0 0 0 1px
    var(--a11-selection-soft) !important;
}

/* --- bisher zusätzlich geladenes month.css --- */
.monthTop{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
  padding:18px 20px 14px;
}
.monthTop h2{margin:0 0 3px;font-size:22px}
.monthTop p{margin:0;color:var(--muted);font-size:11px}
.monthNav{display:flex;align-items:center;gap:6px}
.monthNav button,.monthName{
  height:32px;padding:0 10px;border:1px solid var(--line);
  border-radius:6px;background:var(--surface);color:var(--text);
}
.monthNav button{cursor:pointer}
.monthName{display:grid;place-items:center;min-width:120px;font-size:11px;font-weight:750}
.monthContext{text-align:right;color:var(--muted);font-size:10px}

.mLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:16px;
  align-items:start;
  padding:0 20px 20px;
}
.mCalendar{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.mWeekdays{height:32px;display:grid;grid-template-columns:repeat(7,1fr);align-items:center;border-bottom:1px solid var(--line2);color:var(--muted);font-size:9px;font-weight:800;text-align:center}
.mGrid{display:grid;grid-template-columns:repeat(7,1fr)}
.mDayCell{min-width:0;min-height:168px;padding:6px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--surface)}
.mDayCell:nth-child(7n){border-right:0}
.mOutside{background:var(--bg)}
.mToday{
  position:relative;
  outline:none;
}

.mToday::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--blue);
  pointer-events:none;
}

.mToday::after{
  content:"TODAY";
  position:absolute;
  top:7px;
  right:7px;
  color:var(--blue);
  font-size:7px;
  font-weight:850;
  letter-spacing:.08em;
  pointer-events:none;
}

.mToday .mDayNumber{
  background:var(--blue);
  color:#fff;
}

.mSelectedDay{
  background:var(--blueSoft);
}
.mDayNumber{width:25px;height:23px;margin-bottom:4px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:var(--text);font-size:10px;font-weight:800;cursor:pointer}
.mEntries{display:flex;flex-direction:column;gap:3px}
.mContest{width:100%;min-width:0;padding:4px 5px;border:1px solid var(--line2);border-radius:5px;background:var(--surface);text-align:left;cursor:pointer}
.mContest:hover,.mSelectedContest{border-color:var(--blue);background:var(--blueSoft)}
.mContestTitle{display:flex;gap:4px;font-size:9px;line-height:1.25;font-weight:720}
.mContestTitle span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mStar{color:#7b8898}.mStar.featured{color:var(--blue)}
.mContestTime{margin-top:2px;padding-left:14px;color:var(--muted);font-size:8px}
.mMore{border:0;background:transparent;color:var(--blue);font-size:8px;font-weight:750;cursor:pointer}

.mRight{display:flex;flex-direction:column;gap:14px}
.mSelection,.mBriefing{padding:14px 15px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.mEyebrow{margin-bottom:4px;color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.05em}
.mSelection h3{margin:0 0 4px;font-size:17px}.mSelection p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.mBriefing[hidden]{display:none}.mBriefing h2{margin:0 0 8px;font-size:18px}
.mBriefing p{font-size:11px;line-height:1.45;color:var(--muted)}
.mBriefing .meta{margin-top:8px;color:var(--text)}

.mDetailTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.mTitleLine{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.mDot{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:#94a3b8;
}
.mDot.running{background:var(--green)}
.mDot.soon{background:var(--orange)}
.mDot.break{background:var(--break)}
.mDot.later,.mDot.finished,.mDot.cancelled{background:#94a3b8}
.mBriefStar{
  flex:0 0 auto;
  font-size:19px;
  color:#778799;
}
.mBriefStar.featured{color:var(--blue)}
.mSummary{
  margin-bottom:10px;
  font-size:11px;
  line-height:1.48;
}
.mUnavailable{color:var(--muted2)!important}
.mStats{
  display:grid;
  grid-template-columns:1fr 1fr .72fr;
  gap:6px;
  margin-bottom:10px;
}
.mStat{
  min-width:0;
  padding:8px;
  border:1px solid var(--line2);
  border-radius:6px;
  background:var(--bg);
}
.mStatLabel{
  margin-bottom:3px;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
}
.mStatValue{
  font-size:10px;
  line-height:1.35;
  font-weight:720;
}

.mDurationBox.status-running{
  border-color:var(--green);
  background:color-mix(in srgb,var(--green) 12%,transparent);
}
.mDurationBox.status-soon{
  border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 13%,transparent);
}
.mDurationBox.status-break{
  border-color:var(--break);
  background:color-mix(in srgb,var(--break) 13%,transparent);
}
.mInfoTable{
  border-top:1px solid var(--line2);
}
.mInfoRow{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:9px;
  padding:7px 0;
  border-bottom:1px solid var(--line2);
}
.mInfoLabel{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}
.mInfoValue{
  min-width:0;
  font-size:10px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.mInfoValue a{
  color:var(--blue);
  text-decoration:none;
}
.mInfoValue a:hover{text-decoration:underline}

/* A-012 final Month interaction/status semantics */
.mDayCell:not(.mOutside){
  cursor:pointer;
}

.mDayCell.mSelectedDay{
  background:var(--blueSoft);
  box-shadow:inset 0 0 0 2px var(--blue);
}

.mContest.mStatus-running{
  border-color:color-mix(in srgb,var(--green) 55%,var(--line2));
  background:color-mix(in srgb,var(--green) 12%,transparent);
}

.mContest.mStatus-soon{
  border-color:color-mix(in srgb,var(--orange) 60%,var(--line2));
  background:color-mix(in srgb,var(--orange) 13%,transparent);
}

.mContest.mStatus-break{
  border-color:color-mix(in srgb,var(--break) 60%,var(--line2));
  background:color-mix(in srgb,var(--break) 13%,transparent);
}

.mContest.mSelectedContest{
  border-color:var(--blue);
  background:var(--blueSoft);
  box-shadow:inset 0 0 0 2px var(--blue);
}

.mContest.mSelectedContest.mStatus-running{
  border-color:var(--green);
  background:color-mix(in srgb,var(--green) 16%,transparent);
  box-shadow:inset 0 0 0 2px var(--green);
}

.mContest.mSelectedContest.mStatus-soon{
  border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 17%,transparent);
  box-shadow:inset 0 0 0 2px var(--orange);
}

.mContest.mSelectedContest.mStatus-break{
  border-color:var(--break);
  background:color-mix(in srgb,var(--break) 17%,transparent);
  box-shadow:inset 0 0 0 2px var(--break);
}

/* --- bisherige start-v2.css --- */
.start2{
  padding:18px 20px 42px;
}

.start2-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:18px;
  align-items:start;
}

.start2-list-panel{
  min-width:0;
}

.start2-list-head{
  margin:0 0 12px;
}

.start2-list-head h1{
  margin:0 0 4px;
  font-size:20px;
}

.start2-list-head p{
  margin:0;
  font-size:13px;
  line-height:1.4;
  opacity:.66;
}

/* Nur noch drei Hauptspalten */
.start2-columns,
.start2-row{
  display:grid;
  grid-template-columns:
    minmax(330px,2.35fr)
    minmax(220px,1.25fr)
    minmax(300px,1.8fr);
  gap:14px;
  align-items:center;
}

.start2-columns{
  padding:0 11px 7px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.035em;
  opacity:.5;
}

.start2-list{
  display:grid;
  gap:4px;
}

/* Rubriken bewusst ruhig und ohne Zahlen */
.start2-section{
  margin:16px 0 5px;
  padding:0 4px;
  font-size:14px;
  font-weight:750;
}

.start2-section:first-child{
  margin-top:0;
}

.start2-section.deadline{
  color:#3b82f6;
}

.start2-section.running{
  color:#22a95a;
}

.start2-section.upcoming{
  color:#d97706;
}

/* Eine kompakte Contestzeile */
.start2-row{
  min-height:44px;
  padding:5px 10px;

  border:1px solid
    color-mix(in srgb,currentColor 14%,transparent);

  border-radius:8px;

  background:
    color-mix(in srgb,currentColor 2%,transparent);

  cursor:pointer;
}

.start2-row:hover{
  border-color:
    color-mix(in srgb,#3b82f6 52%,currentColor);
}

.start2-row.selected{
  border-color:#3b82f6;
  box-shadow:
    inset 3px 0 #3b82f6;

  background:
    color-mix(in srgb,#3b82f6 8%,transparent);
}

/* Status nur sehr dezent über linken Rand */
.start2-row.running{
  border-left:3px solid #22a95a;
}

.start2-row.deadline{
  border-left:3px solid #3b82f6;
}

.start2-row.soon{
  border-left:3px solid #d97706;
}

/* Kein Bullet mehr */
.start2-contest{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  overflow:hidden;
  white-space:nowrap;
}

.start2-name{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:750;
}

/* Featured verändert nicht mehr den Einzug */
.start2-star{
  flex:0 0 auto;
  color:#3b82f6;
  font-size:12px;
  line-height:1;
}

.start2-operation{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11.5px;
  font-weight:500;
  opacity:.58;
}

/* Start / Ende etwas besser lesbar */
.start2-time{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:12.5px;
  font-weight:500;
  opacity:.78;
}

/* Statusbereich immer gleich breit */
.start2-status{
  min-width:0;
}

/* Hoher Balken mit Information direkt darin */
.start2-progress{
  position:relative;
  width:100%;
  height:22px;

  overflow:hidden;

  border:1px solid
    color-mix(in srgb,currentColor 12%,transparent);

  border-radius:6px;

  background:
    color-mix(in srgb,currentColor 7%,transparent);
}

.start2-progress-fill{
  position:absolute;
  inset:0 auto 0 0;

  width:0;

  border-radius:5px;

  background:
    color-mix(in srgb,currentColor 13%,transparent);
}

.start2-status.running
.start2-progress-fill{
  background:
    color-mix(in srgb,#22c55e 38%,transparent);
}

.start2-status.deadline
.start2-progress-fill{
  background:
    color-mix(in srgb,#3b82f6 35%,transparent);
}

.start2-status.soon
.start2-progress{
  border-color:
    color-mix(in srgb,#f59e0b 42%,transparent);
}

.start2-progress-text{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;

  padding:0 8px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11px;
  font-weight:600;
  line-height:1;
}

.start2-status.past
.start2-progress-text{
  font-weight:400;
  opacity:.62;
}

/* Briefing */
.start2-briefing{
  position:sticky;
  top:14px;

  min-height:330px;
  overflow:hidden;

  border:1px solid
    color-mix(in srgb,currentColor 18%,transparent);

  border-radius:10px;

  background:
    color-mix(in srgb,currentColor 2%,transparent);
}

.start2-empty{
  padding:30px 24px;
  text-align:center;
  opacity:.62;
}

.start2-empty-icon{
  margin-bottom:8px;
  font-size:25px;
}

.start2-empty h2{
  margin:0 0 6px;
  font-size:17px;
}

.start2-empty p{
  margin:0;
  font-size:13px;
  line-height:1.5;
}

.start2-brief-head{
  padding:17px 18px 14px;

  border-bottom:1px solid
    color-mix(in srgb,currentColor 17%,transparent);
}

.start2-brief-title{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:7px;
}

.start2-brief-title h2{
  margin:0;
  font-size:18px;
  line-height:1.2;
}

.start2-brief-summary{
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}

.start2-brief-body{
  padding:5px 18px 16px;
}

.start2-info{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:10px;
  align-items:start;

  padding:10px 0;

  border-bottom:1px solid
    color-mix(in srgb,currentColor 13%,transparent);

  font-size:13px;
}

.start2-info:last-child{
  border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent);
}

.start2-label{
  font-weight:700;
  opacity:.76;
  color:var(--text);
}

.start2-value{
  min-width:0;
  line-height:1.5;
}

.start2-value a{
  color:#3b82f6;
  text-decoration:none;
}

.start2-value a:hover{
  text-decoration:underline;
}

.start2-loading{
  padding:24px;
  opacity:.55;
}

@media (max-width:1200px){
  .start2-layout{
    grid-template-columns:1fr;
  }

  .start2-briefing{
    position:static;
  }
}

/* Start V2 – timeline states V3 */

.start2-list{
  box-sizing:border-box;

  width:760px;
  min-width:760px;
  max-width:760px;

  flex:1 1 auto;
  min-height:0;

  overflow-y:auto;
  overflow-x:hidden;

  padding-right:0;

  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

/* Vergangenheit: bewusst ruhig */
.start2-row.past{
  background:
    color-mix(in srgb,currentColor 3%,transparent);
  border-color:
    color-mix(in srgb,currentColor 11%,transparent);
  opacity:.72;
}

/* Einreichungsfrist offen */
.start2-row.deadline{
  background:
    color-mix(in srgb,#3b82f6 13%,transparent);
  border-color:
    color-mix(in srgb,#3b82f6 44%,currentColor);
  border-left:4px solid #3b82f6;
}

/* Läuft jetzt */
.start2-row.running{
  background:
    color-mix(in srgb,#22c55e 18%,transparent);
  border-color:
    color-mix(in srgb,#22c55e 52%,currentColor);
  border-left:4px solid #22c55e;
}

/* Start innerhalb 24 h */
.start2-row.upcoming.soon{
  background:
    color-mix(in srgb,#f59e0b 15%,transparent);
  border-color:
    color-mix(in srgb,#f59e0b 48%,currentColor);
  border-left:4px solid #f59e0b;
}

/* Später kommend */
.start2-row.upcoming.future{
  background:
    color-mix(in srgb,#64748b 7%,transparent);
  opacity:.94;
}

.start2-progress{
  height:26px;
}

.start2-progress-labels{
  position:absolute;
  inset:0;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  align-items:center;
  gap:7px;
  padding:0 8px;

  font-size:10.5px;
  font-weight:650;
  line-height:1;

  pointer-events:none;
}

.start2-progress-left{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.start2-progress-center{
  white-space:nowrap;
  text-align:center;
  opacity:.78;
}

.start2-progress-right{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
}

.start2-progress-text{
  display:none;
}

.start2-status.running .start2-progress{
  border-color:
    color-mix(in srgb,#22c55e 44%,currentColor);
  background:
    color-mix(in srgb,#22c55e 8%,transparent);
}

.start2-status.running .start2-progress-fill{
  background:
    color-mix(in srgb,#22c55e 52%,transparent);
}

.start2-status.deadline .start2-progress{
  border-color:
    color-mix(in srgb,#3b82f6 44%,currentColor);
  background:
    color-mix(in srgb,#3b82f6 8%,transparent);
}

.start2-status.deadline .start2-progress-fill{
  background:
    color-mix(in srgb,#3b82f6 44%,transparent);
}

.start2-status.soon .start2-progress{
  border-color:#d97706;
  background:#fff1d6;
  color:#3b2500;
}

/* Start V2 V5: compact two-column timeline */

.start2-columns,
.start2-row{
  grid-template-columns:
    minmax(390px,1.55fr)
    minmax(370px,1fr);
  gap:16px;
}

.start2-contest{
  gap:8px;
}

.start2-operation{
  font-size:12px;
  opacity:.62;
}

.start2-progress{
  height:27px;
}

.start2-progress-labels{
  font-size:11px;
}

/* Alte separate Zeitspalte wird nicht mehr verwendet */
.start2-time{
  display:none;
}

/* =========================================================
   START V2 – FINAL CONSOLIDATED LAYOUT
   ========================================================= */


/* ---------- START V2 – PUBLIC HEADER IN SHARED CANVAS ---------- */

.start2{
  box-sizing:border-box;
  height:100%;
  min-height:0;
  overflow:hidden;
}

/* ---------- feste Desktop-Geometrie ---------- */

.start2{
  overflow-x:visible;
}

.start2-layout{
  display:grid;
  grid-template-columns:760px minmax(0,1fr);
  gap:16px;

  width:100%;
  max-width:none;

  align-items:start;
}

.start2-list-panel{
  width:760px;
  min-width:760px;
  max-width:760px;
}

.start2-columns,
.start2-row{
  box-sizing:border-box;

  width:100%;
  min-width:0;
  max-width:none;

  grid-template-columns:
    minmax(0,1fr)
    425px;

  gap:8px;
}

.start2-status,
.start2-progress{
  box-sizing:border-box;
  width:425px;
  min-width:425px;
  max-width:425px;
}

.start2-briefing{
  box-sizing:border-box;

  width:100%;
  min-width:0;
  max-width:none;

  position:sticky;
  top:14px;
}


/* ---------- Viewport-Aufteilung ---------- */

.start2-layout{
  height:100%;
  min-height:0;
}

.start2-list-panel{
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
}

.start2-list-head,
.start2-columns{
  flex:0 0 auto;
}

/* Briefing bleibt vollständig im sichtbaren Bereich */
.start2-briefing{
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--surface);
  border-color:var(--line);
  box-shadow:0 2px 7px color-mix(in srgb,var(--text) 8%,transparent);
}

/* ---------- klarer Tabellenkopf ---------- */

.start2-list-head{
  margin-bottom:8px;
}

.start2-list-head h1{
  margin-bottom:0;
}

.start2-columns{
  margin-bottom:5px;
  padding:7px 10px;

  border:1px solid
    color-mix(in srgb,currentColor 15%,transparent);

  border-radius:8px;

  background:color-mix(in srgb,var(--blue) 5%,var(--surface));

  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  opacity:.72;
  border-color:color-mix(in srgb,var(--blue) 24%,var(--line));
  color:var(--text);
}

/* ---------- scrollbare vollständige Timeline ---------- */

.start2-list{
  max-height:calc(100vh - 255px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:4px;
  justify-content:flex-start;
  align-items:stretch;
  align-content:normal;
}


.start2-list.start2-filter-anchor-space{
  padding-bottom:
    var(--start2-filter-anchor-space,0px);
}

/* ---------- kompakte zweizeilige Contestzeile ---------- */

.start2-row{
  min-height:50px;
  padding:4px 10px;
}

.start2-contest{
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px;
  grid-template-rows:auto auto;
  column-gap:7px;
  row-gap:2px;

  min-width:0;
  align-items:center;
  overflow:hidden;
}

.start2-name{
  grid-column:1;
  grid-row:1;

  display:block;
  width:100%;
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:13px;
  line-height:1.15;

  will-change:transform;
}

.start2-operation{
  grid-column:1;
  grid-row:2;

  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11.5px;
  line-height:1.2;
  opacity:.67;
}

/* ---------- Featured ---------- */

.start2-star{
  grid-column:2;
  grid-row:1 / 3;

  align-self:center;
  justify-self:center;

  margin:0;

  color:#1670ff;
  font-size:27px;
  line-height:1;
  opacity:1;
}

.start2-brief-star{
  flex:0 0 auto;
  color:#1670ff;
  font-size:27px;
  line-height:1;
}

/* Lange Namen bewegen sich nur bei Bedarf */

.start2-name.start2-name-ticker{
  text-overflow:ellipsis;
}

.start2-row:hover .start2-name.start2-name-ticker,
.start2-row.selected .start2-name.start2-name-ticker{
  overflow:visible;
  text-overflow:clip;

  animation:
    start2-name-pan
    5.5s
    ease-in-out
    .45s
    infinite
    alternate;
}

@keyframes start2-name-pan{
  from{
    transform:translateX(0);
  }

  to{
    transform:
      translateX(
        calc(-1 * var(--start2-name-shift,0px))
      );
  }
}

/* ---------- Rubriken ---------- */

/*
 * Log submission window = violet.
 *
 * Deliberately separate from the canonical contest-status colors:
 * green  = running
 * orange = starting within 24 hours
 * blue   = operating break
 */
:root{
  --start2-deadline-text:#7c3aed;
  --start2-deadline-accent:#8b5cf6;
  --start2-deadline-selected:#6d28d9;
  --start2-deadline-fill:#a78bfa;
}

:root[data-theme="dark"]{
  --start2-deadline-text:#a78bfa;
  --start2-deadline-selected:#c4b5fd;
  --start2-deadline-fill:#c4b5fd;
}

.start2-section.deadline{
  color:var(--start2-deadline-text);
}

.start2-section.running{
  color:#22a95a;
}

.start2-section.soon{
  color:#d97706;
}

.start2-section.future{
  color:inherit;
  opacity:.62;
}

.start2-deadline-jump{
  margin-left:12px;
  padding:0;

  border:0;
  background:transparent;

  color:var(--start2-deadline-text);

  font:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1.2;

  text-decoration:underline;
  text-underline-offset:2px;

  cursor:pointer;
}

.start2-deadline-jump:hover{
  text-decoration-thickness:2px;
}

.start2-deadline-jump:focus-visible{
  outline:2px solid var(--start2-deadline-accent);
  outline-offset:3px;
  border-radius:2px;
}

.start2-running-empty{
  display:block;

  margin-top:3px;

  color:var(--muted2);

  font-size:12.5px;
  font-weight:500;
  line-height:1.3;
}

/* ---------- vergangene Contests ---------- */

.start2-row.past{
  background:color-mix(in srgb,var(--surface) 94%,var(--bg));

  border-color:var(--line2);

  opacity:.72;
}

/* ---------- offene Einreichungsfrist ---------- */

.start2-row.deadline{
  background:
    color-mix(
      in srgb,
      var(--start2-deadline-accent) 13%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(--start2-deadline-accent) 44%,
      currentColor
    );

  border-left:
    4px solid var(--start2-deadline-accent);
}

/* ---------- aktuell laufend ---------- */

.start2-row.running{
  background:color-mix(in srgb,var(--green) 14%,var(--surface));

  border-color:color-mix(in srgb,var(--green) 52%,var(--line));

  border-left:4px solid #22c55e;
}

/* ---------- Start innerhalb 24 Stunden ---------- */

.start2-row.upcoming.soon{
  background:color-mix(in srgb,var(--orange) 13%,var(--surface));

  border-color:color-mix(in srgb,var(--orange) 50%,var(--line));

  border-left:4px solid #f59e0b;
}

/* ---------- spätere Contests ---------- */

.start2-row.upcoming.future{
  background:var(--surface);

  border-color:var(--line);

  opacity:1;
}

/* ---------- Auswahl folgt Statusfarbe ---------- */

.start2-row.selected{
  box-shadow:none;
}

.start2-row.running.selected{
  border:2px solid #08752f;

  box-shadow:
    inset 4px 0 #08752f,
    0 0 0 2px
      color-mix(in srgb,#08752f 20%,transparent);
}

.start2-row.deadline.selected{
  border:
    2px solid var(--start2-deadline-selected);

  box-shadow:
    inset 4px 0 var(--start2-deadline-selected),
    0 0 0 2px
      color-mix(
        in srgb,
        var(--start2-deadline-selected) 18%,
        transparent
      );
}

.start2-row.upcoming.soon.selected{
  border:2px solid #c66a00;

  box-shadow:
    inset 4px 0 #c66a00,
    0 0 0 2px
      color-mix(in srgb,#c66a00 18%,transparent);
}

.start2-row.upcoming.future.selected,
.start2-row.past.selected{
  border:2px solid #64748b;

  box-shadow:
    inset 4px 0 #64748b;
}

/* ---------- Zeitbalken ---------- */

.start2-progress{
  position:relative;
  height:27px;

  overflow:hidden;

  border:1px solid #94a3b8;
  border-radius:6px;

  background:#eef2f6;
  color:#111827;
}

.start2-progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:5px;
}

/* nur verbrauchte Zeit farbig */

.start2-status.running .start2-progress-fill{
  background:#43d77a;
}

.start2-status.deadline .start2-progress-fill{
  background:var(--start2-deadline-fill);
}

.start2-status.soon .start2-progress-fill{
  background:#f59e0b;
}

.start2-status.future .start2-progress-fill{
  width:0 !important;
}

.start2-status.past 
:root[data-theme="dark"] .start2-progress{
  background:#e3e9ef;
  border-color:#9aa8b8;
  color:#111827;
}

:root[data-theme="dark"] .start2-status.soon .start2-progress{
  background:#f1ddb5;
  border-color:#f59e0b;
  color:#2c1d00;
}

/*
 * Deadline progress keeps dark text in both themes.
 * In Dark mode the filled violet therefore needs a distinctly
 * lighter surface for reliable readability.
 */
:root[data-theme="dark"] .start2-status.deadline .start2-progress{
  background:#ede9fe;
  border-color:#a78bfa;
  color:#111827;
}

:root[data-theme="dark"] .start2-status.deadline .start2-progress-fill{
  background:var(--start2-deadline-fill);
}

.start2-progress-fill{
  background:#cbd5e1;
}

.start2-progress-labels{
  position:absolute;
  inset:0;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);

  align-items:center;
  gap:7px;
  padding:0 8px;

  color:#111827;

  font-size:11px;
  font-weight:650;
  line-height:1;

  pointer-events:none;
}

.start2-progress-left{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.start2-progress-center{
  white-space:nowrap;
  text-align:center;
  opacity:.78;
}

.start2-progress-right{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
}

.start2-progress-text{
  display:none;
}

/* ---------- bewusster Layoutwechsel ---------- */

/*
 * Vor diesem Breakpoint bleiben sämtliche Breiten konstant.
 * Erst wenn wirklich kein Platz mehr da ist,
 * wandert das Briefing komplett unter die Timeline.
 */


/* =========================================================
   A-039 — LIST VISIBLE CALENDAR YEAR

   The List has no single fixed month/year context like Month
   or Week. The year shown here therefore describes the
   calendar_year values of the contest rows actually visible
   in the List viewport.
   ========================================================= */

.start2-list-head h1{
  display:flex;
  align-items:baseline;
  gap:0;
}

.start2-visible-year{
  flex:0 0 auto;
  margin-left:12px;

  font-size:.92em;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;

  color:var(--blue);
  opacity:1;
  white-space:nowrap;
}

.start2-visible-year:not(:empty)::before{
  content:"·";
  display:inline-block;
  margin-right:10px;

  color:var(--muted2,#8290a3);
  font-weight:700;
}


/*
 * A-043 dark-theme running progress
 *
 * Match the established progress-bar treatment used by the other
 * time-sensitive states: a light track with dark labels, while the
 * elapsed portion remains green.
 *
 * Dark Theme only. Light Theme is deliberately unchanged.
 */
:root[data-theme="dark"] .start2-status.running .start2-progress {
  background:#e3e9ef;
  border-color:#9aa8b8;
  color:#111827;
}

:root[data-theme="dark"] .start2-status.running .start2-progress-labels,
:root[data-theme="dark"] .start2-status.running .start2-progress-left,
:root[data-theme="dark"] .start2-status.running .start2-progress-center,
:root[data-theme="dark"] .start2-status.running .start2-progress-right,
:root[data-theme="dark"] .start2-status.running .start2-progress-text {
  color:#111827 !important;
  text-shadow:none;
}

/*
 * P-002-12 — unobtrusive Help entry in the empty briefing.
 */
.start2-empty p.start2-empty-help-note{
  margin-top:12px;
}

.start2-empty-help-link{
  appearance:none;
  margin:0;
  padding:0;

  border:0;
  background:transparent;

  color:#60a5fa;

  font:inherit;
  font-weight:650;

  text-decoration:underline;
  text-underline-offset:2px;

  cursor:pointer;
}

.start2-empty-help-link:hover{
  text-decoration-thickness:2px;
}

.start2-empty-help-link:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:3px;
  border-radius:2px;
}