/* Padel-Turnier – tecis Corporate Design */

:root{
  --blau:#00325b;
  --himmelblau:#009ee3;
  --himmelblau-hell:#E5F5FC;
  --limette:#d3d800;
  --sand:#cbcdb9;
  --sand-hell:#F4F4EE;
  --text:#3C3C3B;
  --rot:#C0392B;
  --gruen:#2E7D32;
  --weiss:#FFFFFF;
  --border:rgba(0,50,90,0.10);
  --shadow-sm:0 1px 3px rgba(0,50,90,0.06);
  --shadow-md:0 10px 28px rgba(0,50,90,0.12);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--weiss);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
}

body{
  padding-inline:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Lässt den Footer (.closing) immer am unteren Rand sitzen, auch wenn
   der Seiteninhalt nicht die volle Bildschirmhöhe füllt. */
.page-main{
  flex:1 0 auto;
}

img{ max-width:100%; }

a{ color:var(--himmelblau); }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding-inline:20px;
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--blau);
  color:var(--weiss);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
}
.topbar .kicker{
  color:#BFE3F5;
  font-size:12px;
}
.topbar-link{
  color:#BFE3F5;
  font-size:13px;
  text-decoration:none;
  font-weight:700;
}
.topbar-link{ transition:color 0.15s ease; }
.topbar-link:hover{ color:var(--weiss); }
.topbar-left{ display:flex; align-items:center; gap:18px; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.topbar-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:999px;
  padding:7px 14px;
  cursor:pointer;
  font-family:Arial, Helvetica, sans-serif;
  transition:background 0.15s ease;
}
.topbar-btn:hover{ background:rgba(255,255,255,0.14); }

/* ---------- Sticky glass nav ---------- */
.apple-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.apple-nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.apple-nav-brand{
  font-weight:800;
  color:var(--blau);
  text-decoration:none;
  font-size:14px;
  letter-spacing:-0.01em;
  flex-shrink:0;
}
.apple-nav-links{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.apple-nav-links::-webkit-scrollbar{ display:none; }
.apple-nav-links a{
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  opacity:0.72;
  transition:opacity .15s ease, color .15s ease;
}
.apple-nav-links a:hover{ opacity:1; color:var(--blau); }

[id]{ scroll-margin-top:76px; }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(165deg, var(--blau) 0%, #002544 55%, #001629 100%);
  color:var(--weiss);
  padding-block:96px 72px;
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding-inline:20px;
}
.hero .label{
  display:inline-block;
  background:rgba(0,158,227,0.16);
  color:#7FD4F5;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(127,212,245,0.3);
}
.hero h1{
  margin:20px 0 0;
  font-size:clamp(44px, 8.5vw, 84px);
  line-height:0.98;
  letter-spacing:-0.03em;
  font-weight:800;
  color:var(--weiss);
}
.hero .subline{
  display:inline-block;
  margin-top:22px;
  background:var(--limette);
  color:var(--blau);
  font-weight:800;
  font-size:15px;
  padding:10px 18px;
  border-radius:999px;
}
.hero-top{
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.hero-text-col{
  flex:1 1 380px;
  min-width:0;
}
.hero-illustration{
  display:flex;
  justify-content:center;
  flex:0 0 auto;
  width:220px;
}
@media (max-width:680px){
  .hero-illustration{ width:170px; margin:8px auto 0; }
}
.ball-bob{
  transform-origin:110px 48px;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
  .ball-bob{ animation:none; }
}
.hero .meta{
  margin-top:28px;
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-size:13px;
}
.hero .meta span{ display:block; color:#8FB6D6; }
.hero .meta b{ display:block; margin-top:2px; font-size:16px; color:var(--weiss); }

.hero .absender{
  margin-top:40px;
  font-size:13px;
  color:#BFE3F5;
}
.hero-sub{ padding-block:40px; }
.hero-sub-h1{
  margin:16px 0 0;
  font-size:clamp(30px, 6vw, 44px);
  font-weight:800;
  color:var(--weiss);
}

/* ---------- Section headline motif ---------- */
.section-headline{
  margin:96px 0 28px;
}
.section-headline .label{
  display:inline-block;
  color:var(--himmelblau);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.section-headline .title-box{
  display:block;
  margin-top:8px;
}
.section-headline .title-box span{
  display:inline-block;
  color:var(--blau);
  font-weight:800;
  font-size:clamp(26px, 4vw, 34px);
  letter-spacing:-0.01em;
  line-height:1.15;
}

/* ---------- Cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{
  background:var(--weiss);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  border-radius:20px;
  padding:20px;
  transition:transform 0.2s cubic-bezier(.16,.8,.3,1), box-shadow 0.2s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.icon-circle{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--blau);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  transition:transform 0.2s cubic-bezier(.16,.8,.3,1);
}
.card:hover .icon-circle{ transform:scale(1.1); }
.card .k{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--blau);
  opacity:0.7;
}
.card .v{
  margin-top:6px;
  font-size:17px;
  font-weight:700;
  color:var(--blau);
}
.card .v.tbd{ color:var(--text); opacity:0.6; font-weight:500; font-style:italic; }
.rule-title{
  font-size:15px;
  font-weight:700;
  color:var(--blau);
}
.rule-text{
  margin-top:4px;
  font-size:13px;
  color:var(--text);
  opacity:0.8;
  line-height:1.5;
}
.rule-text a{ text-decoration:underline; text-decoration-color:transparent; transition:text-decoration-color 0.15s ease; }
.rule-text a:hover{ text-decoration-color:currentColor; }

.note{
  margin-top:16px;
  font-size:13px;
  color:var(--text);
  opacity:0.75;
  line-height:1.6;
}

/* ---------- Turniersieger-Rückblick (Startseite) ---------- */
.champion-banner{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:28px 24px;
  border-radius:20px;
  background:linear-gradient(165deg, var(--blau) 0%, #002544 100%);
  text-align:center;
}
.champion-banner-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--limette);
}
.champion-banner-name{
  font-size:clamp(24px, 4vw, 34px);
  font-weight:800;
  color:var(--weiss);
  margin-top:2px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:20px;
}
.gallery-grid img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
  transition:transform 0.3s cubic-bezier(.16,.8,.3,1);
}
.gallery-grid img:hover{ transform:scale(1.06); }
@media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Sponsoren ---------- */
.sponsor-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin-top:20px;
  padding:24px;
  background:var(--sand-hell);
  border-radius:16px;
}
.sponsor-logo{ display:inline-flex; align-items:center; text-decoration:none; }
.sponsor-logo img{
  max-height:48px;
  max-width:160px;
  filter:grayscale(1);
  opacity:0.75;
  transition:filter 0.2s ease, opacity 0.2s ease;
}
.sponsor-logo:hover img{ filter:grayscale(0); opacity:1; }
.sponsor-name{ font-weight:700; color:var(--blau); font-size:15px; }

/* ---------- "Zum Home-Bildschirm hinzufügen"-Hinweis ---------- */
.homescreen-tip{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--himmelblau-hell);
  border-radius:14px;
  padding:12px 16px;
  margin-bottom:20px;
  font-size:13px;
  color:var(--blau);
  line-height:1.5;
}
.homescreen-tip-close{
  flex-shrink:0;
  background:none;
  border:none;
  font-size:20px;
  line-height:1;
  color:var(--blau);
  opacity:0.6;
  cursor:pointer;
  padding:0 2px;
}
.homescreen-tip-close:hover{ opacity:1; }

/* ---------- Status counter ---------- */
.counter{
  margin-top:20px;
  background:var(--himmelblau-hell);
  border-radius:999px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  gap:16px;
}
.counter .num{
  font-size:26px;
  font-weight:800;
  color:var(--blau);
  white-space:nowrap;
}
.counter .track{
  flex:1;
  height:8px;
  background:#CFE9F7;
  border-radius:999px;
  overflow:hidden;
}
.counter .fill{
  height:100%;
  background:var(--himmelblau);
}
.counter .lab{
  font-size:12px;
  color:var(--blau);
  opacity:0.75;
  white-space:nowrap;
}
.counter.full .num, .counter.full .lab{ color:var(--rot); }
.counter.full .fill{ background:var(--rot); }

/* ---------- Vollbreite Hintergrund-Sektion (Zahlung + Anmeldung) ----------
   Bricht aus dem zentrierten .wrap heraus und färbt den Hintergrund über
   die volle Fensterbreite -- der Inhalt selbst bleibt an derselben Stelle
   wie sonst auf der Seite. Sorgt auf breiten Screens für Struktur statt
   leerer Ränder, ohne dass der Text unlesbar breit werden muss. */
.action-band{
  background:var(--himmelblau-hell);
  margin-block:56px 0;
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  padding-block:48px 56px;
}

/* ---------- Payment ---------- */
.pay{
  margin-top:20px;
  background:var(--weiss);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  border-radius:24px;
  padding:24px;
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
}
.pay .qrbox{
  flex-shrink:0;
  width:112px; height:112px;
  background:#fff;
  border-radius:10px;
  padding:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid var(--sand);
}
.pay .qrbox svg, .pay .qrbox img{ width:100%; height:100%; display:block; }
.pay .t{ flex:1; min-width:200px; }
.pay .t h3{ margin:0 0 6px; font-size:19px; color:var(--blau); }
.pay .t p{ margin:0; font-size:14px; color:var(--text); line-height:1.6; }
.btn-cta{
  display:inline-block;
  margin-top:12px;
  background:var(--limette);
  color:var(--blau);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  padding:11px 22px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(211,216,0,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(211,216,0,0.45); }

/* ---------- Form ---------- */
.banner{
  margin-top:20px;
  padding:14px 18px;
  border-radius:14px;
  font-size:14px;
  line-height:1.5;
}
.banner.success{ background:#E4F3E6; color:var(--gruen); }
.banner.error{ background:#F8E5E2; color:var(--rot); }

.reg{
  margin-top:20px;
  background:var(--weiss);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  border-radius:24px;
  padding:24px;
}
.nfield{ margin-bottom:16px; }
.nfield label{
  display:block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--blau);
  margin-bottom:6px;
}
.nfield input, .nfield select{
  width:100%;
  border:1px solid var(--sand);
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--weiss);
  color:var(--text);
}
.nfield input:focus, .nfield select:focus{
  outline:2px solid var(--himmelblau);
  outline-offset:1px;
}
.nrow2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .nrow2{ grid-template-columns:1fr; } }
.player-h{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--himmelblau);
  margin:22px 0 12px;
  padding-top:16px;
  border-top:1px solid var(--sand);
}
.player-h:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.nsubmit{
  width:100%;
  background:var(--limette);
  color:var(--blau);
  border:none;
  border-radius:999px;
  padding:15px;
  font-size:16px;
  font-weight:800;
  font-family:Arial, Helvetica, sans-serif;
  margin-top:8px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(211,216,0,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.nsubmit:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 16px rgba(211,216,0,0.45); }
.nsubmit:disabled{ opacity:0.5; cursor:default; }

/* ---------- Footer ---------- */
.closing{
  margin-top:56px;
  background:var(--blau);
  color:#BFE3F5;
  text-align:center;
  padding:28px 20px;
  font-size:13px;
  line-height:1.7;
}
.closing b{ color:var(--weiss); }
.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  background:var(--himmelblau);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  padding:10px 20px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,158,227,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,158,227,0.45); }

/* ---------- Admin ---------- */
.admin-wrap{ max-width:1000px; margin:40px auto; padding:0 20px 60px; }
.admin-login{
  max-width:360px;
  margin:80px auto;
  background:var(--weiss);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  padding:28px;
  border-radius:20px;
}
.admin-login h1{ font-size:20px; color:var(--blau); margin:0 0 16px; }
table.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin-top:16px;
}
table.admin-table th{
  background:var(--blau);
  color:var(--weiss);
  text-align:left;
  padding:9px 10px;
  white-space:nowrap;
}
table.admin-table td{
  padding:9px 10px;
  border-bottom:1px solid var(--sand);
}
table.admin-table tr:nth-child(even) td{ background:var(--sand-hell); }
.admin-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}
.admin-actions a{
  display:inline-block;
  margin-left:10px;
  font-size:13px;
  text-decoration:none;
  background:var(--himmelblau-hell);
  color:var(--blau);
  padding:8px 14px;
  border-radius:6px;
  font-weight:700;
}
.table-scroll{ overflow-x:auto; }

/* ---------- Turnierbaum (öffentlich) ---------- */
.group-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  font-size:14px;
}
.group-list li{
  padding:6px 0;
  border-bottom:1px solid var(--sand);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.group-list li:last-child{ border-bottom:none; }
.group-list li.adv{ color:var(--blau); font-weight:700; }
.group-list .tag{
  background:var(--limette);
  color:var(--blau);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:3px 8px;
  border-radius:999px;
  flex-shrink:0;
}

.group-list .tag-loser{ background:var(--sand); color:var(--blau); }

.bracket-tree-scroll{
  overflow-x:auto;
  margin-top:20px;
  padding-bottom:10px;
}
.bt-labels{
  position:relative;
  height:16px;
}
.bt-label{
  position:absolute;
  top:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--blau);
  font-weight:700;
}
.bt-tree{
  position:relative;
}
.bt-svg{
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
}
.bt-match{
  position:absolute;
  box-sizing:border-box;
  overflow:hidden;
  background:var(--weiss);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  border-radius:12px;
  padding:6px 12px;
  font-size:12.5px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  transition:box-shadow 0.2s ease;
}
.bt-match-decided{
  border-color:rgba(0,158,227,0.35);
  box-shadow:0 2px 8px rgba(0,158,227,0.14);
}
.bt-match-empty{
  background:var(--sand-hell);
  border-style:dashed;
  box-shadow:none;
  opacity:0.7;
}
.brow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--text);
}
.brow span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brow.win{ color:var(--blau); font-weight:800; }
.brow b{ font-variant-numeric:tabular-nums; flex-shrink:0; }

/* ---------- K.-o.-Arena: Sieger-Baum + Loser-Bracket + Grand Final ---------- */
.bt-arena{
  position:relative;
  margin-top:22px;
  padding:30px 22px 36px;
  border-radius:20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0,158,227,0.18), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(211,216,0,0.10), transparent 50%),
    linear-gradient(165deg, #001629 0%, #001d38 45%, #00253f 100%);
  border:1px solid rgba(0,158,227,0.25);
  box-shadow:0 20px 50px rgba(0,22,41,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
}
.bt-arena::before{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(0,158,227,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,158,227,0.06) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
  pointer-events:none;
}
.bt-arena > *{ position:relative; z-index:1; }
.bt-subheading{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--himmelblau);
  margin:26px 0 4px;
  text-shadow:0 0 12px rgba(0,158,227,0.5);
}
.bt-subheading:first-child{ margin-top:0; }
.bt-subheading::before{
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:var(--himmelblau);
  box-shadow:0 0 10px 2px rgba(0,158,227,0.8);
}
.bt-subheading-loser{ color:var(--limette); text-shadow:0 0 12px rgba(211,216,0,0.4); }
.bt-subheading-loser::before{ background:var(--limette); box-shadow:0 0 10px 2px rgba(211,216,0,0.7); }

.bt-arena .bt-label{ color:rgba(255,255,255,0.5); }
.bt-arena .bt-match{
  background:linear-gradient(180deg, rgba(16,42,66,0.92), rgba(4,18,32,0.92));
  border:1px solid rgba(0,158,227,0.18);
  box-shadow:0 4px 14px rgba(0,10,20,0.4);
}
.bt-arena .bt-match-decided{
  border-color:rgba(0,158,227,0.55);
  box-shadow:0 0 0 1px rgba(0,158,227,0.25), 0 0 18px rgba(0,158,227,0.25);
}
.bt-arena.bt-tree-loser .bt-match-decided,
.bt-tree-loser .bt-match-decided{
  border-color:rgba(211,216,0,0.55);
  box-shadow:0 0 0 1px rgba(211,216,0,0.22), 0 0 18px rgba(211,216,0,0.2);
}
.bt-arena .bt-match-empty{
  background:rgba(255,255,255,0.02);
  border-color:rgba(255,255,255,0.08);
  box-shadow:none;
  opacity:0.6;
}
.bt-arena .brow{ color:rgba(255,255,255,0.72); }
.bt-arena .brow.win{ color:#fff; font-weight:800; text-shadow:0 0 8px rgba(0,158,227,0.7); }
.bt-tree-loser .brow.win{ text-shadow:0 0 8px rgba(211,216,0,0.7); }
.bt-arena .brow b{ color:var(--limette); }
.bt-arena .bt-svg path{ filter:drop-shadow(0 0 3px rgba(0,158,227,0.3)); }
.bt-tree-loser .bt-svg path{ filter:drop-shadow(0 0 3px rgba(211,216,0,0.25)); }
.bt-arena-note{ color:rgba(255,255,255,0.55) !important; text-align:center; }

.gf-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:4px; padding-bottom:4px; }
.gf-match{
  width:100%; max-width:320px;
  background:linear-gradient(180deg, rgba(211,216,0,0.12), rgba(10,30,50,0.92));
  border:1px solid rgba(211,216,0,0.35);
  border-radius:14px;
  padding:14px 18px;
  box-shadow:0 0 24px rgba(211,216,0,0.14);
}
.gf-match-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--limette);
  font-weight:800;
  margin-bottom:8px;
  text-align:center;
}
.gf-match .brow{ color:rgba(255,255,255,0.8); font-size:14px; padding:3px 0; }
.gf-match .brow.win{ color:#fff; text-shadow:0 0 8px rgba(211,216,0,0.7); }
.gf-champion{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:16px 30px;
  border-radius:14px;
  background:radial-gradient(circle at 50% 0%, rgba(211,216,0,0.25), rgba(10,30,50,0.92));
  border:1px solid rgba(211,216,0,0.5);
  box-shadow:0 0 30px rgba(211,216,0,0.22);
}
.gf-champion-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--limette); }
.gf-champion-name{ font-size:22px; font-weight:800; color:#fff; text-shadow:0 0 14px rgba(211,216,0,0.6); margin-top:2px; }

/* ---------- "Jetzt live" (aktuell spielende Teams) ---------- */
@keyframes bt-live-pulse{
  0%, 100%{ box-shadow:0 0 0 1px rgba(255,45,85,0.35), 0 0 18px rgba(255,45,85,0.3); }
  50%{ box-shadow:0 0 0 1px rgba(255,45,85,0.65), 0 0 32px rgba(255,45,85,0.55); }
}
@keyframes bt-live-dot-blink{ 0%, 100%{ opacity:1; } 50%{ opacity:0.3; } }

.ticker-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--himmelblau);
  margin:0 0 8px;
}
.ticker-label-live{ color:#e0004f; }

.live-ticker, .upcoming-ticker{ display:none; }
.live-ticker.has-items, .upcoming-ticker.has-items{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 28px;
}
.live-card, .upcoming-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:999px;
}
.live-card{
  background:linear-gradient(90deg, rgba(255,45,85,0.12), rgba(255,45,85,0.03));
  border:1px solid rgba(255,45,85,0.4);
  animation:bt-live-pulse 1.8s ease-in-out infinite;
}
.upcoming-card{
  background:var(--himmelblau-hell);
  border:1px solid rgba(0,158,227,0.3);
}
.live-dot{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:#ff2d55;
  box-shadow:0 0 10px 3px rgba(255,45,85,0.8);
  animation:bt-live-dot-blink 1.2s ease-in-out infinite;
}
.upcoming-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--himmelblau);
}
.live-court, .upcoming-court{
  font-family:'Orbitron', Arial, Helvetica, sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
  flex-shrink:0;
}
.live-court{ color:#e0004f; }
.upcoming-court{ color:var(--himmelblau); }
.live-teams, .upcoming-teams{ font-size:15px; font-weight:700; color:var(--blau); }
.live-vs, .upcoming-vs{ opacity:0.5; font-weight:500; margin:0 2px; }

/* Match-Karte, die gerade auf dem Platz gespielt wird -- übersteuert
   "decided"/"empty" bewusst, da eine live Karte noch kein Ergebnis hat. */
.bt-match.bt-match-live{
  border-color:#ff2d55;
  background:linear-gradient(180deg, rgba(255,45,85,0.16), rgba(16,42,66,0.92));
  animation:bt-live-pulse 1.8s ease-in-out infinite;
}
.bt-live-dot{
  position:absolute;
  top:6px; right:8px;
  width:7px; height:7px;
  border-radius:50%;
  background:#ff2d55;
  box-shadow:0 0 8px 2px rgba(255,45,85,0.85);
  animation:bt-live-dot-blink 1.2s ease-in-out infinite;
}
.gf-match{ position:relative; }
.gf-match.gf-match-live{
  border-color:#ff2d55;
  animation:bt-live-pulse 1.8s ease-in-out infinite;
}

/* ---------- Sternenfeld-Hintergrund in der Arena ---------- */
.bt-arena::after{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 15%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.4px 1.4px at 82% 8%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 60% 65%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.4px 1.4px at 28% 85%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 92% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 45% 35%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1px 1px at 70% 92%, rgba(255,255,255,0.35), transparent);
  background-repeat:no-repeat;
  animation:bt-star-drift 50s linear infinite alternate;
  pointer-events:none;
  opacity:0.85;
}
@keyframes bt-star-drift{
  0%{ background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position:0 -36px, 0 26px, 0 -22px, 0 18px, 0 -28px, 0 32px, 0 -18px; }
}

/* Sci-Fi-Akzentschrift für Labels/Badges in der Arena -- Teamnamen bleiben
   bewusst in Arial für maximale Lesbarkeit aus der Distanz. */
.bt-subheading, .bt-label, .gf-match-label, .gf-champion-label{
  font-family:'Orbitron', Arial, Helvetica, sans-serif;
}
.gf-champion-name{ font-family:'Orbitron', Arial, Helvetica, sans-serif; letter-spacing:0.02em; }

/* ---------- bracket-tv.php: eigene Vollbild-Unterseite fürs Fernseh-Display ---------- */
/* Die ganze Seite nutzt das gleiche dunkle Arena-Farbschema wie die
   K.-o.-Runde -- kein Wechsel zwischen hellem und dunklem Bereich, keine
   Marketing-Elemente (Hero/Footer), randlos über den ganzen Bildschirm. */
body.tv-page{
  margin:0;
  padding:0;
  background:#001629;
  min-height:100vh;
}
.bt-arena.bt-arena-full{
  margin:0;
  border-radius:0;
  border:none;
  box-shadow:none;
  min-height:100vh;
  flex-shrink:0;
  padding:22px clamp(20px, 3vw, 56px) 56px;
}
.tv-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:26px;
}
.tv-header-title{
  font-family:'Orbitron', Arial, Helvetica, sans-serif;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--himmelblau);
  text-shadow:0 0 12px rgba(0,158,227,0.5);
}
.tv-header-actions{ display:flex; align-items:center; gap:10px; }
.tv-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.24);
  color:#fff;
  border-radius:999px;
  padding:8px 16px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.15s ease;
  font-family:Arial, Helvetica, sans-serif;
}
.tv-btn:hover{ background:rgba(255,255,255,0.15); }
.tv-btn-ghost{ background:transparent; border-color:rgba(255,255,255,0.16); color:rgba(255,255,255,0.65); }

/* Dunkle Varianten der sonst hell gestalteten Bausteine (Section-Headline,
   Gruppen-Karten), ausschließlich innerhalb der Vollbild-Arena. */
.bt-arena-full .section-headline{ margin:36px 0 20px; }
.bt-arena-full .section-headline .title-box span{ color:#fff; text-shadow:0 0 14px rgba(0,158,227,0.35); }
.bt-arena-full .card{
  background:rgba(16,42,66,0.55);
  border:1px solid rgba(0,158,227,0.18);
  box-shadow:0 4px 14px rgba(0,10,20,0.3);
}
.bt-arena-full .card .k{ color:var(--himmelblau); }
.bt-arena-full .card .v.tbd{ color:rgba(255,255,255,0.5); }
.bt-arena-full .group-list li{ border-bottom-color:rgba(255,255,255,0.12); color:rgba(255,255,255,0.85); }
.bt-arena-full .group-list li.adv{ color:#fff; text-shadow:0 0 8px rgba(0,158,227,0.6); }
.bt-arena-full .note{ color:rgba(255,255,255,0.5); }
.bt-arena-full .live-teams, .bt-arena-full .upcoming-teams{ color:#fff; }
.bt-arena-full .live-vs, .bt-arena-full .upcoming-vs{ color:rgba(255,255,255,0.55); }
.bt-arena-full .upcoming-card{ background:rgba(0,158,227,0.1); border-color:rgba(0,158,227,0.35); }

/* Im echten Browser-Vollbildmodus (Adressleiste ausgeblendet) noch etwas
   mehr Größe für die Lesbarkeit aus der Distanz. */
body.tv-page.is-fullscreen .tv-header-title{ font-size:15px; }
body.tv-page.is-fullscreen .section-headline .title-box span{ font-size:clamp(28px, 3.2vw, 48px); }
body.tv-page.is-fullscreen .live-teams{ font-size:20px; }
body.tv-page.is-fullscreen .card .k{ font-size:16px; }
body.tv-page.is-fullscreen .group-list{ font-size:16px; }
body.tv-page.is-fullscreen .gf-champion-name{ font-size:32px; }

/* ---------- Admin: Turnierbaum-Verwaltung ---------- */
.banner-demo{
  background:var(--sand-hell);
  border:1px dashed var(--sand);
  border-radius:14px;
  padding:20px 24px 4px;
  margin:24px 0 8px;
}
.banner-demo code{
  background:rgba(0,50,90,0.08);
  border-radius:4px;
  padding:1px 5px;
  font-size:12.5px;
}
.admin-h3{
  color:var(--blau);
  font-size:18px;
  margin:40px 0 6px;
}
.admin-btn{ max-width:280px; }
.admin-btn-sm{ width:auto; padding:9px 18px; margin-top:12px; font-size:14px; }
.admin-group-grid{ grid-template-columns:repeat(2, 1fr); margin-top:16px; }
@media (max-width:640px){ .admin-group-grid{ grid-template-columns:1fr; } }
.admin-checkbox-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:400;
  margin-top:8px;
  color:var(--text);
}
.admin-round-h{
  color:var(--blau);
  font-size:15px;
  margin:24px 0 8px;
}
.admin-match-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
  padding:14px 16px;
}
.admin-match-teams{ flex:1; min-width:180px; font-size:14px; }
.admin-tbd{ opacity:0.55; }
.admin-winner-note{ font-size:12px; color:var(--gruen); font-weight:700; }
.admin-match-row-live{ border-color:rgba(255,45,85,0.4); box-shadow:0 0 0 1px rgba(255,45,85,0.12); }
.admin-live-badge{
  display:inline-block;
  background:#ff2d55;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  padding:2px 7px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
}
.admin-court-badge{
  display:inline-block;
  background:var(--himmelblau);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  padding:2px 7px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
}
.admin-court-select{
  border:1px solid var(--sand);
  border-radius:6px;
  padding:8px 10px;
  font-size:13px;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--blau);
  background:var(--weiss);
}
.admin-match-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-btn-live-off{ background:var(--sand-hell); color:var(--blau); border:1px solid var(--sand); }
.admin-btn-live-on{ background:#ff2d55; color:#fff; }
.admin-btn-danger{ background:var(--weiss); color:var(--rot); border:1px solid var(--rot); white-space:nowrap; transition:background 0.15s ease, color 0.15s ease; }
.admin-btn-danger:hover{ background:var(--rot); color:#fff; }
.admin-score-form{
  display:flex;
  align-items:center;
  gap:8px;
}
.admin-score-input{
  width:56px;
  border:1px solid var(--sand);
  border-radius:6px;
  padding:8px;
  text-align:center;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif;
}
.admin-group-match{
  border-top:1px solid var(--sand);
  padding-top:10px;
  margin-top:10px;
}
.admin-group-match:first-of-type{ border-top:none; padding-top:0; margin-top:8px; }
.admin-group-match-teams{
  font-size:13px;
  margin-bottom:6px;
}
.admin-knapp-label{
  margin-top:0;
  font-size:12px;
}
.admin-standings{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
  font-size:12px;
}
.admin-standings th{
  text-align:left;
  color:var(--blau);
  opacity:0.7;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:4px 6px 4px 0;
  border-bottom:1px solid var(--sand);
}
.admin-standings td{
  padding:5px 6px 5px 0;
  border-bottom:1px solid var(--sand);
}
.admin-standings tr:last-child td{ border-bottom:none; }

/* ---------- Druckansicht des Turnierbaums (bracket.php) ---------- */
/* Zum Aushängen am Court: Querformat, kein Ink-fressender dunkler
   Hintergrund, keine Animationen/Glow -- nur klare Linien und Text. */
@media print{
  @page{ size:A4 landscape; margin:10mm; }
  .topbar, .live-ticker, .upcoming-ticker, .ticker-label, .closing, .apple-nav{ display:none !important; }
  body{ background:#fff !important; }
  .hero.hero-sub{ background:#fff !important; padding:0 0 14px; }
  .hero-sub-h1{ color:#000 !important; text-shadow:none !important; }
  .hero-sub .label{ color:#000 !important; background:none !important; border:1px solid #999; }
  .subline{ color:#333 !important; background:none !important; padding:0; }
  .bt-arena, .bt-arena *{
    background:#fff !important;
    color:#000 !important;
    border-color:#999 !important;
    box-shadow:none !important;
    text-shadow:none !important;
    animation:none !important;
    filter:none !important;
  }
  .bt-arena::before, .bt-arena::after{ display:none !important; }
  .bt-match{ border:1px solid #999 !important; }
  .bt-match-decided{ border:1.5px solid #000 !important; }
  .bt-match-empty{ border-style:dashed !important; }
  .brow.win{ font-weight:800 !important; }
  .bt-live-dot{ background:#000 !important; box-shadow:none !important; }
  .bt-svg path{ stroke:#666 !important; }
  .section-headline .title-box span{ color:#000 !important; }
  .section-headline .label{ color:#000 !important; }
  .card, .bt-match, .gf-match, .gf-champion{ page-break-inside:avoid; }
}

/* ---------- Hinweisbox, Checkbox, Admin-Mailbox ---------- */
.info-box{
  margin-top:22px;
  background:var(--himmelblau-hell);
  border-left:4px solid var(--himmelblau);
  border-radius:14px;
  padding:18px 22px;
}
.info-box-title{ font-size:15px; font-weight:800; color:var(--blau); margin-bottom:8px; }
.info-box ul{ margin:0; padding-left:18px; }
.info-box li{ font-size:14px; line-height:1.55; color:var(--text); margin-bottom:8px; }
.info-box li:last-child{ margin-bottom:0; }
.info-box li b{ color:var(--blau); }

.check-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:22px;
  padding:14px 16px;
  background:var(--sand-hell);
  border-radius:12px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--text);
  cursor:pointer;
}
.check-row input{ margin-top:3px; width:18px; height:18px; flex-shrink:0; accent-color:var(--blau); }

.admin-mailbox{
  margin:18px 0;
  padding:18px 20px;
  background:var(--sand-hell);
  border-radius:16px;
}
.admin-mailbox textarea{
  width:100%;
  border:1px solid var(--sand);
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  font-size:14px;
  resize:vertical;
}
.admin-mailbox .nfield{ margin-bottom:0; }

/* ---------- Umdrehbare Karten ---------- */
.flip{
  perspective:1100px;
  cursor:pointer;
  border-radius:20px;
  outline:none;
}
.flip:focus-visible{ box-shadow:0 0 0 3px var(--himmelblau); }
.flip-inner{
  display:grid;
  transition:transform 0.55s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
  height:100%;
}
.flip.is-flipped .flip-inner{ transform:rotateY(180deg); }
.flip-front, .flip-back{
  grid-area:1 / 1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.flip .card{ transition:box-shadow 0.2s ease; }
.flip .flip-front:hover{ transform:none; box-shadow:var(--shadow-md); }
.flip-back{
  transform:rotateY(180deg);
  background:var(--blau);
  border-color:var(--blau);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:16px;
}
.flip .flip-back:hover{ transform:rotateY(180deg); }
.flip-art{ width:100%; max-width:230px; height:auto; display:block; }
.flip-cap{ color:#fff; font-size:13px; line-height:1.4; text-align:center; font-weight:700; }
.flip-tip{
  display:inline-block;
  margin-top:10px;
  font-size:11.5px;
  font-weight:700;
  color:var(--himmelblau);
}
.flip-note{ margin:0 0 12px; }

.bracket-figure{ margin:26px 0 0; }
.bracket-figure img{ display:block; width:100%; height:auto; border-radius:22px; box-shadow:var(--shadow-md); }
.bracket-figure figcaption{ margin-top:10px; font-size:13px; color:var(--text); text-align:center; }
.bracket-figure figcaption a{ color:var(--blau); font-weight:700; }

@media (prefers-reduced-motion: reduce){
  .flip-inner{ transition:none; }
}