:root{
  --board-dark:#14181A;
  --board-dark-2:#191F20;
  --board-light:#F2EDE2;
  --brass:#B8925A;
  --brass-bright:#D9B776;
  --alpine:#33473A;
  --ink:#E8E3D6;
  --ink-dim:#9BA39A;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--board-dark);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* Hintergrund: geschichtete Alpin-Konturen, nach unten wärmer (Alpenglühen) */
.contours{
  position:fixed;
  left:0; right:0; bottom:0;
  width:100%; height:62vh;
  z-index:0;
  pointer-events:none;
}

/* schwebende Glas-"Event"-Karten — dezente Anspielung auf Turniere/Events, kein Schachbrett */
.ticket{
  position:fixed;
  border-radius:12px;
  background:linear-gradient(160deg, rgba(217,183,118,0.14), rgba(217,183,118,0.03));
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  z-index:1;
  pointer-events:none;
}
.ticket-1{ width:150px; height:96px; top:12vh; left:6vw;  transform:rotate(-7deg); }
.ticket-2{ width:110px; height:74px; top:20vh; right:9vw; transform:rotate(5deg); }
.ticket-3{ width:130px; height:82px; bottom:16vh; left:11vw; transform:rotate(4deg); opacity:0.85; }
.ticket-4{ width:96px;  height:64px; bottom:22vh; right:14vw; transform:rotate(-5deg); opacity:0.7; }

@media (max-width:760px){
  .ticket-2, .ticket-4{ display:none; }
  .ticket-1{ width:110px; height:70px; top:8vh; left:-14px; }
  .ticket-3{ width:100px; height:64px; bottom:10vh; right:-10px; left:auto; }
}

.vignette{
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse at 50% 34%, transparent 0%, var(--board-dark) 82%);
  z-index:2;
  pointer-events:none;
}

.wrap{
  position:relative;
  z-index:3;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8vh 6vw 4vh;
  text-align:center;
}

/* Glas-Panel für den gesamten Hero-Inhalt */
.hero-glass{
  position:relative;
  max-width:640px;
  width:100%;
  padding:clamp(2.2rem, 5vw, 3.6rem) clamp(1.6rem, 6vw, 3.4rem);
  border-radius:24px;
  background:linear-gradient(160deg, rgba(242,237,226,0.14), rgba(242,237,226,0.04));
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 0 50px rgba(217,183,118,0.05);
}
.hero-glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(135deg, rgba(217,183,118,0.55), rgba(255,255,255,0.05) 40%, rgba(217,183,118,0.18));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* Signature: Springerzug als Baustellen-Linie */
.knight-path{
  width:min(220px, 36vw);
  height:auto;
  margin-bottom:2rem;
}
.knight-path path{
  fill:none;
  stroke:var(--brass);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:340;
  stroke-dashoffset:340;
  animation:draw 2.2s ease-out forwards 0.3s;
}
.knight-path circle{
  fill:var(--brass-bright);
  opacity:0;
  animation:fadeIn 0.6s ease-out forwards 2.3s;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass-bright);
  margin-bottom:1.1rem;
}
.eyebrow .move{ opacity:0.6; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2.2rem, 5.4vw, 4.2rem);
  line-height:1.05;
  margin:0 0 1.3rem;
  max-width:16ch;
  color:var(--board-light);
}
h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--brass-bright);
}

.sub{
  max-width:46ch;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink-dim);
  margin:0 auto 2.4rem;
}

.links{
  display:flex;
  gap:0.9rem;
  flex-wrap:wrap;
  justify-content:center;
}
.chip{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8rem;
  letter-spacing:0.02em;
  color:var(--ink);
  text-decoration:none;
  border:1px solid rgba(184,146,90,0.4);
  background:rgba(242,237,226,0.04);
  padding:0.85rem 1.2rem;
  display:inline-block;
  border-radius:999px;
  transition:border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.chip:hover{
  border-color:var(--brass-bright);
  color:var(--board-light);
  background:rgba(184,146,90,0.12);
}
.chip:focus-visible,
address a:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:3px;
  border-radius:4px;
}

footer{
  position:relative;
  z-index:3;
  width:100%;
  background:rgba(20,24,26,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid rgba(184,146,90,0.18);
  padding:2.2rem 6vw 2.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.2rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:1rem;
}
/* Logo-Leiste: aktuell nur Giorgio Events, später docken hier Sponsoren-Logos
   als weitere .logo-badge Elemente an (gleiche Höhe, Trenner automatisch) */
.logo-strip{
  display:flex;
  align-items:stretch;
  flex-shrink:0;
}
.logo-badge{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0;
  background:var(--board-light);
  border-top:2px solid var(--brass);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(184,146,90,0.22), 0 3px 10px rgba(0,0,0,0.3);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.logo-badge:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(184,146,90,0.32), 0 4px 14px rgba(0,0,0,0.35);
}
.logo-badge + .logo-badge{ margin-left:16px; }
.logo-badge + .logo-badge::before{
  content:"";
  position:absolute;
  left:-16px; top:10%;
  width:1px; height:80%;
  background:rgba(184,146,90,0.3);
}
.logo-badge img{
  max-width:calc(100% - 5px);
  max-height:calc(100% - 5px);
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.brand-name{
  font-family:'Inter',sans-serif;
  font-size:0.92rem;
  color:var(--ink-dim);
  line-height:1.3;
}
.brand-name strong{
  display:block;
  color:var(--ink);
  font-weight:600;
}

address{
  font-style:normal;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  color:var(--ink-dim);
  line-height:1.7;
  text-align:right;
}
address a{
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid rgba(155,163,154,0.3);
}
address a:hover{ color:var(--brass-bright); border-color:var(--brass-bright); }

@media (max-width:640px){
  footer{ flex-direction:column; align-items:flex-start; }
  address{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  .knight-path path{ animation:none; stroke-dashoffset:0; }
  .knight-path circle{ animation:none; opacity:1; }
}