/* ============================================================
   sgh.css — Design-System der Christians-Cup-Turnierplattform
   Abgeleitet vom Vereins-Theme sg-herdorf.com (v1.4.3).
   Neu geschrieben für den schlanken Vanilla-Stack (kein Build-Step).
   Fonts: fonts-sgh.css (Anton, Rock Salt — lokal gehostet).
   ============================================================ */

:root{
  /* Schwarz-/Dunkelstufen */
  --black:#0A0A09; --b2:#111110; --b3:#181815; --b4:#1E1E1B;
  /* Stein-/Grau-Stufen */
  --s6:#2E2E29; --s5:#3A3A34; --s4:#555550; --s3:#878780; --s2:#B8B8B0; --s1:#DEDED8;
  --stone-bg:#E8E6E0; --stone-bg2:#DEDED8; --stone-bg3:#E0DEDA;
  --W:#FFFFFF;
  /* Grün (Primär) */
  --green:#3E8F00; --gd:#2A6200; --gdd:#1A3D00; --gl:#5CB800;
  /* Blau (Sekundär) */
  --blue:#033B85; --bd:#022860; --bl:#1A5BC4;
  /* Fonts */
  --FH:'Anton',sans-serif;             /* Headlines/Display */
  --FS:'Rock Salt',cursive;            /* Script-Akzent */
  --FU:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* Body/UI */
  /* Layout */
  --NAV:68px;            /* Desktop */
  --NAV-M:60px;          /* Mobil */
  --MW:1200px;
  --pad:28px;
  --radius:14px;
  --footer-bar-h:46px;   /* Höhe der fixen Footer-Leiste (Desktop, gemessen + Puffer) */
  --shadow:0 6px 24px rgba(10,10,9,.10);
  --shadow-lg:0 14px 40px rgba(10,10,9,.18);
}

/* ── Reset / Base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}   /* schlägt explizite display-Regeln (z. B. .ticker{display:flex}) */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--FU);
  color:var(--b4);
  background:var(--stone-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Reserviert Platz für die fixe Footer-Leiste, damit sie nichts verdeckt */
  padding-bottom:calc(var(--footer-bar-h) + env(safe-area-inset-bottom, 0));
}
@media (max-width:768px){
  body{padding-bottom:calc(var(--footer-bar-h) + 16px + env(safe-area-inset-bottom, 0));}
}
img{max-width:100%;display:block;}
a{color:var(--green);text-decoration:none;}
a:hover{color:var(--gd);}
h1,h2,h3{margin:0 0 .4em;line-height:1.05;}

.wrap{width:100%;max-width:var(--MW);margin-inline:auto;padding-inline:var(--pad);}

/* ── Signatur-Überschrift (Script + Anton-Kontur) ─────────── */
.sh{display:block;}
.sh-s{font-family:var(--FS);font-weight:400;font-size:clamp(20px,3vw,40px);
  line-height:1.25;display:block;color:var(--green);transform:rotate(-1.5deg);}
.sh-h{font-family:var(--FH);font-size:clamp(38px,7vw,80px);line-height:.92;
  letter-spacing:.5px;text-transform:uppercase;margin:0;}
/* auf dunklem Grund */
.sh--dark .sh-s{color:#fff;}
.sh--dark .sh-h{color:#0A0A09;-webkit-text-stroke:1.1px #fff;paint-order:stroke fill;}
/* auf hellem Grund */
.sh--light .sh-s{color:var(--green);}
.sh--light .sh-h{color:#fff;-webkit-text-stroke:1.2px var(--b4);paint-order:stroke fill;}

/* ── Buttons (Pill, uppercase) ────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--FU);font-weight:800;font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;padding:13px 26px;border-radius:24px;border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  text-decoration:none;line-height:1;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--gl);color:#fff;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--bl);color:#fff;}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.5);}
.btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff;}

/* ── Navigation (weiß, fixed, einklappbar) ────────────────── */
#nav{position:fixed;inset:0 0 auto 0;height:var(--NAV);z-index:1000;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--s1);}
.nav-inner{height:100%;max-width:var(--MW);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand-wrap{display:flex;align-items:center;gap:11px;min-width:0;}
.brand-logo{display:inline-flex;align-items:center;flex-shrink:0;}
.brand-logo img{height:40px;width:40px;display:block;}
.brand{font-family:var(--FH);font-size:20px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--black);white-space:nowrap;}
.brand b{color:var(--green);}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
.nav-links a{font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--b4);padding:8px 12px;border-radius:8px;border-bottom:3px solid transparent;}
.nav-links a:hover{color:var(--green);background:var(--stone-bg);}
.nav-links a.active{color:var(--green);border-bottom-color:var(--green);}
.nav-ctas{display:flex;align-items:center;gap:10px;}

/* Hamburger */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:8px;}
.hamburger span{display:block;height:2.5px;width:100%;background:var(--black);border-radius:3px;
  transition:transform .25s ease,opacity .2s ease;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Mobiles Klapp-Menü */
.mob-nav{position:fixed;top:var(--NAV-M);left:0;right:0;z-index:999;
  background:rgba(255,255,255,.99);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--s1);box-shadow:var(--shadow);
  display:flex;flex-direction:column;padding:8px var(--pad) 18px;
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .25s ease,opacity .25s ease,visibility .25s;}
.mob-nav.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
.mob-nav a{font-weight:700;font-size:16px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--b4);padding:15px 6px;border-bottom:1px solid var(--s1);}
.mob-nav a:last-of-type{border-bottom:0;}
.mob-nav a.active{color:var(--green);}
.mob-nav .btn{margin-top:14px;justify-content:center;}

/* Body-Offset, damit Inhalt nicht unter der fixen Nav startet */
.page{padding-top:var(--NAV);}

/* ── Sektionen ────────────────────────────────────────────── */
.sec{padding:64px 0;}
header.sec-dark{padding:30px 0;}   /* schlankerer dunkler Hero-Balken oben */
.sec-dark{background:var(--b2);color:var(--s1);
  background-image:radial-gradient(120% 120% at 50% 0%, rgba(62,143,0,.10), transparent 55%);}
.sec-dark h2,.sec-dark h3{color:#fff;}
.sec-light{background:var(--stone-bg);}
.sec-stone{background:var(--stone-bg2);}
.eyebrow{font-family:var(--FS);color:var(--green);font-size:clamp(16px,2.4vw,24px);
  display:block;margin-bottom:6px;transform:rotate(-1.5deg);}
.sec-title{font-family:var(--FH);text-transform:uppercase;font-size:clamp(28px,4.5vw,48px);
  letter-spacing:.5px;line-height:1;margin:0 0 28px;}

/* ── Karten-Grid ──────────────────────────────────────────── */
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
/* Auto-Fit-Grid (z. B. Hub-Kacheln: passt sich der Kachelzahl an) */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.card{background:var(--W);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);border:1px solid var(--s1);
  transition:transform .18s ease,box-shadow .18s ease;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.card h3{font-family:var(--FH);text-transform:uppercase;font-size:22px;letter-spacing:.5px;}
.card p{margin:0;color:var(--s4);font-size:15px;}

/* Nav-Karten (Hub-Kacheln zu den Subpages) */
.tile{display:flex;flex-direction:column;gap:8px;color:var(--b4);position:relative;overflow:hidden;}
.tile .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--green);color:#fff;margin-bottom:6px;}
.tile .ico svg{width:26px;height:26px;}
.tile.blue .ico{background:var(--blue);}
.tile .go{margin-top:auto;font-weight:800;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:6px;}
.tile.blue .go{color:var(--blue);}
.tile:hover .go{gap:10px;}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer{background:var(--black);color:var(--s2);padding:28px 0 18px;font-size:14px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 0.8fr;gap:32px;}
.site-footer h4{font-family:var(--FH);text-transform:uppercase;color:#fff;font-size:16px;
  letter-spacing:1px;margin:0 0 14px;}
.site-footer a{color:var(--s2);}
.site-footer a:hover{color:var(--gl);}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.foot-brand{font-family:var(--FH);font-size:22px;color:#fff;text-transform:uppercase;}
/* Footer-Bottom = dauerhaft eingeblendete Leiste am unteren Viewport-Rand.
   Aus dem Footer-Fluss gelöst (position:fixed) → auf jeder Seite immer sichtbar.
   Greift sowohl im statischen Markup als auch im per chrome.js injizierten Footer. */
.foot-bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  border-top:1px solid var(--s6);
  padding:8px max(var(--pad),env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom,0)) max(var(--pad),env(safe-area-inset-left));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px 18px;
  color:var(--s4);font-size:13px;
  background:var(--black);
  box-shadow:0 -4px 24px rgba(10,10,9,.45);
}
.foot-bottom .fb-left{text-align:left;}
.foot-bottom .fb-center{text-align:center;}
.foot-bottom .fb-right{text-align:right;}
.foot-bottom a{color:var(--gl);font-weight:700;text-decoration:none;}
.foot-bottom a:hover{text-decoration:underline;}
.foot-cols{display:flex;gap:4px 26px;flex-wrap:wrap;}
.foot-cols .foot-links{margin:0;}
.foot-bottom .siegai{font-size:1.3em;font-weight:800;letter-spacing:.3px;}
.fb-dev-abbr{display:none;}   /* "dev." nur auf dem Handy, sonst "development" */
.foot-bottom .siegai .sieg{color:#fff;}

/* ── SiegAI — dezentes weißes Licht umrundet den Schriftzug (alle 30 s) ── */
@property --siegai-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.foot-bottom .siegai{ position:relative; display:inline-block; isolation:isolate; }
.foot-bottom .siegai::before{
  content:''; position:absolute; inset:-3px -6px; border-radius:7px; padding:1.5px;
  background:conic-gradient(from var(--siegai-angle),
    transparent 0deg, transparent 300deg,
    rgba(255,255,255,.9) 345deg, rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; pointer-events:none; animation:siegai-orbit 30s linear infinite;
}
@keyframes siegai-orbit{
  0%{ --siegai-angle:0deg; opacity:0; } 2%{ opacity:1; }
  10%{ --siegai-angle:360deg; opacity:1; } 13%{ --siegai-angle:360deg; opacity:0; }
  100%{ --siegai-angle:360deg; opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .foot-bottom .siegai::before{ animation:none; opacity:0; }
}

/* ── Scroll-Reveal ────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:768px){
  :root{--NAV:var(--NAV-M);}
  #nav{height:var(--NAV-M);}
  .nav-links,.nav-ctas{display:none;}
  .hamburger{display:flex;}
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:16px;}
  /* Leiste mobil kompakt: zentriert, umbruchfähig, kleinere Schrift */
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;font-size:11.5px;}
  .foot-bottom .fb-left,.foot-bottom .fb-center,.foot-bottom .fb-right{text-align:center;}
  .sec{padding:48px 0;}
}
/* Footer auf dem Handy in EINER Zeile (NACH dem 768er-Block, sonst überschreibt der die Schrift):
   rechte Spalte weg, "development" → "dev.", Schrift skaliert mit der Viewport-Breite */
@media (max-width:480px){
  .foot-bottom{
    flex-wrap:nowrap; gap:0 10px;
    padding-left:12px; padding-right:12px;
    font-size:clamp(7.5px, 2.6vw, 11px);
  }
  .foot-bottom .fb-left,.foot-bottom .fb-center{white-space:nowrap;}
  .foot-bottom .fb-right{display:none;}
  .fb-dev-full{display:none;}
  .fb-dev-abbr{display:inline;}
  /* Leiste ist jetzt einzeilig → weniger Platz reservieren */
  body{padding-bottom:calc(46px + env(safe-area-inset-bottom, 0));}
}
@media (min-width:769px){
  .mob-nav{display:none;}
}