/* ==========================================================================
   USV St. Anna am Aigen – Website
   Design: Blau-Weiß | Emotion statt Textwüste | Mobile First
   ========================================================================== */

/* ---------- Lokale Schriften (selbst gehostet, kein Google-CDN) ---------- */
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue-900: #0e4d9d;   /* Marken-Blau (Kundenwunsch, helleres Blau) */
  --blue-800: #1a5fb8;
  --blue-700: #2470cf;
  --blue-600: #2f80e0;
  --blue-500: #4f97ec;
  --blue-300: #9cc0f7;
  --gold:     #f4b223;
  --gold-dark:#c9890a;
  --ink:      #11161f;
  --muted:    #5b6573;
  --line:     #e6e9ef;
  --bg:       #f4f6fb;
  --white:    #ffffff;
  --radius:   16px;
  --radius-sm:10px;
  --shadow:   0 18px 50px -22px rgba(6, 26, 63, .45);
  --shadow-sm:0 8px 24px -14px rgba(6, 26, 63, .35);
  --maxw:     1180px;
  --display:  "Anton", "Arial Narrow", sans-serif;
  --sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Display headings ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  font-size: .72rem; color: var(--blue-600);
}
.kicker::before { content:""; width: 26px; height: 3px; background: var(--gold); border-radius: 3px; }
.section-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin: .35rem 0 0;
  color: var(--blue-900);
}
.section-title em { color: var(--blue-600); font-style: normal; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.5rem; border-radius: 999px; border: 0;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn-gold { background: var(--gold); color: var(--blue-900); box-shadow: 0 10px 26px -12px rgba(244,178,35,.9); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(244,178,35,.95); }
.btn-white { background: #fff; color: var(--blue-800); }
.btn-white:hover { transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }
.btn-blue { background: var(--blue-600); color:#fff; box-shadow: var(--shadow-sm); }
.btn-blue:hover { transform: translateY(-2px); background: var(--blue-500); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 77, 157, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav {
  display: flex; align-items: center; gap: 1.2rem;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: .7rem; color:#fff; margin-right: auto; }
.brand .crest { width: 42px; height: 42px; flex: none; }
.brand b { font-family: var(--display); font-weight: 400; font-size: 1.18rem; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.brand span { display:block; font-size: .64rem; letter-spacing: .22em; color: var(--blue-300); text-transform: uppercase; font-weight: 700; }
.brand .brand-txt { line-height: 1.05; }

.menu { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
/* :not(.btn): Buttons im Menü (z. B. „Partner werden") behalten ihre
   .btn-gold-Optik – die generischen Link-Regeln würden sie sonst per
   Spezifität überstimmen (hellblauer Text, blaulicher Hover). */
.menu a:not(.btn) {
  color: #cdd8ee; font-weight: 600; font-size: .92rem;
  padding: .55rem .8rem; border-radius: 8px; transition: color .15s, background .15s;
}
.menu a:not(.btn):hover, .menu a:not(.btn).active { color: #fff; background: rgba(255,255,255,.08); }
.nav .btn { padding: .6rem 1.15rem; font-size: .85rem; }

.burger { display: none; align-items:center; gap:9px; background: none; border: 0; padding: 6px; cursor:pointer; }
.burger-label { font-family: var(--display); font-weight:400; font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; line-height:1; }
.burger-lines { display:block; }
.burger-lines span { display:block; width: 26px; height: 2.5px; background:#fff; border-radius: 3px; margin: 5px 0; transition: .25s; }

@media (max-width: 1180px) {
  .nav .btn.nav-cta { display: none; }
  .burger { display: flex; }
  .menu {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blue-900); padding: 12px 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    box-shadow: var(--shadow);
  }
  .menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .menu a { padding: .9rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 1.05rem; }
  .menu .btn-gold { margin-top: 14px; justify-content: center; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; color: #fff; isolation: isolate;
  min-height: min(88vh, 760px);
  display: flex; align-items: flex-end;
  padding: 0 0 56px;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(29,111,224,.55), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(6,26,63,.9), transparent 60%),
    linear-gradient(135deg, #08245c 0%, #0d3a8f 45%, #1453c4 100%);
}
.hero__bg::after {
  /* subtiles Stadion-/Rasen-Muster */
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 64px);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%);
}
.hero__overlay { position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(4,16,40,.85) 0%, rgba(4,16,40,.15) 55%, transparent 100%); }

.hero__content { max-width: 760px; }
.hero__badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--gold); color: var(--blue-900);
  font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.hero h1, .hero .hero-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: .92; letter-spacing: .005em;
  margin: 0 0 1rem; text-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.hero h1 .line2, .hero .hero-title .line2 { color: var(--gold); }
.hero p.lead { font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: #dbe6fb; max-width: 600px; margin: 0 0 1.8rem; }
.hero__cta { display:flex; flex-wrap: wrap; gap: .8rem; }
.hero__scroll { position:absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }

/* ==========================================================================
   QUICK STRIP – nächstes Heimspiel / Tabelle / News  (auf Startseite sofort)
   ========================================================================== */
.quickbar { margin-top: -46px; position: relative; z-index: 5; }
.quickbar__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
@media (max-width: 860px){ .quickbar__grid { grid-template-columns: 1fr; } }

.card { background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 26px; }
.card-head { display:flex; align-items:center; justify-content: space-between; gap: 1rem; margin-bottom: 14px; }
.card-head h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing:.02em; font-size: 1.25rem; margin: 0; color: var(--blue-900); }
.card-head .more { font-size: .82rem; font-weight: 700; color: var(--blue-600); }

/* Match card */
.match {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  color:#fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.match::after { content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; background: radial-gradient(circle, rgba(244,178,35,.35), transparent 70%); }
.match__meta { display:flex; justify-content: space-between; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#cfe0ff; font-weight:700; margin-bottom: 18px; }
.match__teams { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 12px; }
.team { text-align:center; }
.team .logo { width: 60px; height:60px; margin: 0 auto 8px; border-radius: 50%; background: rgba(255,255,255,.14); display:grid; place-items:center; font-family: var(--display); font-size:1.4rem; }
.team .logo.home { background: #fff; color: var(--blue-800); }
.team b { display:block; font-size: .95rem; line-height: 1.15; }
.match__vs { font-family: var(--display); font-size: 1.5rem; opacity:.85; }
.match__when { margin-top: 18px; text-align:center; background: rgba(255,255,255,.12); border-radius: 10px; padding: 10px; font-weight: 700; }
.match__cta { margin-top: 16px; display:flex; gap:10px; }
.match__cta .btn { flex:1; justify-content:center; padding:.7rem; font-size:.85rem; }
.match__pending { text-align:center; padding:10px 4px 4px; }
.match__pending .hero__badge { display:inline-block; margin-bottom:12px; }
.match__pending h3 { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.7rem; line-height:1.05; margin:0 0 .5rem; }
.match__pending p { color:#dbe6fb; font-size:.95rem; margin:0; }

/* Table */
.tbl { width:100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { padding: .5rem .35rem; text-align: center; }
.tbl th { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); border-bottom: 2px solid var(--line); }
.tbl td:nth-child(2), .tbl th:nth-child(2) { text-align: left; }
/* Lange ÖFB-Vereinsnamen (Sponsor-Zusätze) sauber abschneiden */
.tbl td:nth-child(2) { max-width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl tbody tr { border-bottom: 1px solid var(--line); }
.tbl .pos { font-weight: 800; color: var(--muted); width: 26px; }
.tbl .pts { font-weight: 800; color: var(--blue-700); }
.tbl tr.me { background: linear-gradient(90deg, rgba(244,178,35,.16), transparent); }
.tbl tr.me td:nth-child(2) { font-weight: 800; color: var(--blue-900); }
.tbl tr.promo .pos { color: #1f9d55; }
.tbl tr.tbl-gap td { color: var(--muted); letter-spacing:.3em; padding:.2rem; border-bottom:1px solid var(--line); }

/* ==========================================================================
   SECTION wrappers
   ========================================================================== */
.section { padding: 78px 0; }
.section--tight { padding: 56px 0; }
.section--dark { background: var(--blue-900); color:#fff; }
.section--dark .section-title { color:#fff; }
.section--dark .section-title em { color: var(--gold); }
.section-head { max-width: 640px; margin-bottom: 38px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: .6rem 0 0; }
.section--dark .section-head p { color: #b8c6e6; }

/* ---------- News grid ---------- */
.news-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .news-grid { grid-template-columns: 1fr; } }

.news-card {
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.news-card__img { aspect-ratio: 16/10; position: relative; }
.news-card__img .tag {
  position:absolute; top:12px; left:12px; background: var(--gold); color: var(--blue-900);
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px;
}
.news-card__body { padding: 18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.news-card time { font-size:.78rem; color: var(--muted); font-weight:600; }
.news-card h4 { font-size: 1.12rem; margin: .35rem 0 .5rem; color: var(--blue-900); line-height: 1.25; }
.news-card p { color: var(--muted); font-size:.92rem; margin: 0 0 1rem; }
.news-card .readmore { margin-top:auto; font-weight:700; color: var(--blue-600); font-size:.88rem; }

/* photo placeholders (Demo: bunte Verläufe statt echter Fotos) */
.ph { background-size: cover; background-position: center; }
.ph-1 { background: linear-gradient(135deg,#0d3a8f,#1d6fe0); }
.ph-2 { background: linear-gradient(135deg,#08245c,#1453c4); }
.ph-3 { background: linear-gradient(135deg,#143b86,#6fa8f5); }
.ph-4 { background: linear-gradient(135deg,#0a2a6b,#2a7de0); }
.ph-5 { background: linear-gradient(135deg,#0d3a8f,#0a2a6b); }
.ph-grass { background: linear-gradient(135deg,#0a2a6b,#1453c4); position:relative; }
.ph-grass::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 40px); }
.ph-label { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.4); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }

/* ---------- Stats counter band ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width:820px){ .stats { grid-template-columns: 1fr 1fr; } }
.stat { text-align:center; padding: 10px; }
.stat b { display:block; font-family: var(--display); font-weight:400; font-size: clamp(2.4rem,6vw,3.4rem); color: var(--gold); line-height:1; }
.stat span { color:#b8c6e6; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }

/* ---------- Teams split (Kampf / Nachwuchs) ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } }
.team-card {
  position: relative; border-radius: var(--radius); overflow:hidden; min-height: 320px;
  display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow);
}
.team-card .bg { position:absolute; inset:0; z-index:0; transition: transform .4s ease; }
.team-card:hover .bg { transform: scale(1.05); }
.team-card .veil { position:absolute; inset:0; background: linear-gradient(0deg, rgba(4,16,40,.92), rgba(4,16,40,.15) 70%); z-index:1; }
.team-card .inner { position:relative; z-index:2; padding: 28px; }
.team-card h3 { font-family: var(--display); font-weight:400; text-transform:uppercase; font-size: 1.8rem; margin:0 0 .4rem; }
.team-card p { color:#cfdcf5; margin: 0 0 1rem; max-width: 36ch; }

/* ---------- Sponsoren ---------- */
.sponsor-top { display:grid; grid-template-columns: 1.1fr minmax(0,1fr); gap: 30px; align-items:center; }
@media (max-width: 820px){ .sponsor-top { grid-template-columns: 1fr; } }
.sponsor-feature {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius: var(--radius); padding: 30px; color: var(--blue-900); box-shadow: var(--shadow);
}
.sponsor-feature .tagline { font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; }
.sponsor-feature h3 { font-family: var(--display); font-weight:400; text-transform:uppercase; font-size:2rem; margin:.4rem 0 .6rem; }
.sponsor-feature p { margin: 0 0 1.2rem; font-weight:500; }
.sponsor-feature .logo-box { background:#fff; border-radius: 12px; padding: 16px 22px; display:inline-flex; align-items:center; gap:.7rem; font-family: var(--display); font-size:1.4rem; color: var(--blue-800); }
.sponsor-feature .logo-box img { max-height: 64px; width:auto; display:block; }

.sponsor-cat { text-align:center; color:var(--blue-900); font-size:1.05rem; margin:26px 0 12px; letter-spacing:.02em; }
.sponsor-cat::after { content:""; display:block; width:40px; height:3px; border-radius:3px; background:var(--gold); margin:8px auto 0; }
.logo-wall { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
@media (max-width:920px){ .logo-wall { grid-template-columns: repeat(3,minmax(0,1fr));} }
@media (max-width:680px){ .logo-wall { grid-template-columns: repeat(2,minmax(0,1fr));} }
.logo-card { min-width:0; }
.logo-card {
  background:#fff; border:1px solid var(--line); border-radius: 12px; aspect-ratio: 2/1;
  display:grid; place-items:center; padding: 16px 22px;
  transition: transform .2s, box-shadow .2s;
}
.logo-card img { width: 100%; height: 84px; object-fit: contain; }
/* Premium-/Hauptsponsoren-Grid */
.premium-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:820px){ .premium-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .premium-grid { grid-template-columns:1fr; } }
.premium-card { display:flex; flex-direction:column; align-items:center; gap:14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 18px; text-decoration:none;
  color:var(--blue-900); box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s, border-color .18s; }
.premium-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.premium-card__logo { height:78px; width:100%; display:grid; place-items:center; }
.premium-card__logo img { max-height:78px; max-width:100%; width:auto; object-fit:contain; }
.premium-card b { font-size:.95rem; text-align:center; line-height:1.25; }
.logo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.logo-card.dark { background: var(--blue-900); border-color: var(--blue-800); }
.logo-card.cta {
  background: transparent; border: 2px dashed var(--blue-300); color: var(--blue-600);
  font-weight: 800; letter-spacing: .03em; text-align:center; font-size: .9rem;
  aspect-ratio: auto; align-self: stretch;   /* gleiche Höhe wie die Logo-Karten der Reihe */
}
.logo-card.cta:hover { background: rgba(29,111,224,.06); }

.sponsor-cta {
  margin-top: 34px; background: var(--blue-800); color:#fff; border-radius: var(--radius);
  padding: 32px; text-align:center;
}
.sponsor-cta h3 { font-family: var(--display); font-weight:400; text-transform:uppercase; font-size:1.6rem; margin:0 0 .5rem; }
.sponsor-cta p { color:#cfdcf5; max-width: 52ch; margin: 0 auto 1.2rem; }

/* ---------- Fanbereich / CTA ---------- */
.fan {
  position: relative; color:#fff; border-radius: var(--radius); overflow:hidden;
  padding: 56px 40px; text-align:center; box-shadow: var(--shadow);
}
.fan .bg { position:absolute; inset:0; z-index:0; }
.fan .veil { position:absolute; inset:0; background: linear-gradient(135deg, rgba(6,26,63,.9), rgba(20,83,196,.78)); z-index:1; }
.fan .inner { position:relative; z-index:2; }
.fan h2 { font-family: var(--display); font-weight:400; text-transform:uppercase; font-size: clamp(2rem,5vw,3.2rem); margin:0 0 .6rem; }
.fan p { color:#dbe6fb; max-width: 54ch; margin: 0 auto 1.6rem; font-size:1.08rem; }
.fan__cta { display:flex; gap: .9rem; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--blue-900); color:#aebcd6; padding: 56px 0 28px; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 { color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; }
.footer-grid a, .footer-grid p { color:#aebcd6; font-size:.92rem; }
.footer-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-grid a:hover { color:#fff; }
.footer-grid .link-list a { display:flex; align-items:center; gap:.55rem; }
.footer-grid .link-list svg { width:15px; height:15px; flex:none; color:var(--gold); opacity:.85; transition:opacity .15s; }
.footer-grid .link-list a:hover svg { opacity:1; }
.footer-brand { display:flex; align-items:center; gap:.7rem; color:#fff; margin-bottom: 1rem; }
.footer-brand .crest { width: 44px; height:44px; }
.footer-brand b { font-family: var(--display); font-weight:400; font-size:1.2rem; text-transform:uppercase; }
.socials { display:flex; gap:.6rem; margin-top: 1rem; }
.socials a { width: 38px; height:38px; border-radius:50%; background: rgba(255,255,255,.1); display:grid; place-items:center; }
.socials a:hover { background: var(--gold); color: var(--blue-900); }
.socials svg { width: 18px; height:18px; }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  display:flex; justify-content: space-between; flex-wrap:wrap; gap:.6rem; font-size:.82rem; color:#7e8fb3;
}
.footer-bottom a { color:#7e8fb3; }
/* Footer-Credit „Mit ❤ in der Steiermark entwickelt" → derkaufmann.at (dezent) */
.footer-credit { display:inline-flex; align-items:center; gap:4px; font-size:.8rem; color:#5f6f92; letter-spacing:.2px; text-decoration:none; transition:color .2s; }
.footer-credit:hover { color:#c7d3ea; text-decoration:none; }
.footer-credit .fc-heart { color:rgba(255,90,90,.6); font-size:.9em; transition:color .3s, transform .3s; }
.footer-credit:hover .fc-heart { color:#ff5050; transform:scale(1.25); }
@media(max-width:680px){
  .footer-bottom{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.45rem; }
  /* Mobil: Impressum/Datenschutz zuerst, dann ©, Credit zuletzt (Desktop unverändert) */
  .footer-bottom > span:last-child { order:1; }
  .footer-bottom > span:first-child { order:2; }
  .footer-bottom > .footer-credit { order:3; margin-top:2px; }
}
.demo-note {
  background: var(--gold); color: var(--blue-900); text-align:center;
  font-weight:700; font-size:.85rem; padding:.6rem; letter-spacing:.02em;
}

/* ---------- Page hero (Unterseiten) ---------- */
.page-hero { background: linear-gradient(135deg, var(--blue-800), var(--blue-600)); color:#fff; padding: 60px 0; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; right:-60px; bottom:-60px; width:240px; height:240px; background: radial-gradient(circle, rgba(244,178,35,.3), transparent 70%); }
.page-hero h1 { font-family: var(--display); font-weight:400; text-transform:uppercase; font-size: clamp(2.2rem,6vw,3.6rem); margin:.3rem 0 0; }
.breadcrumb { font-size:.82rem; color:#cfdcf5; }
.breadcrumb a:hover { color:#fff; }

/* ---------- Squad grid ---------- */
.squad-section h3.pos-title { font-family: var(--display); font-weight:400; text-transform:uppercase; color: var(--blue-900); font-size:1.4rem; margin: 36px 0 18px; border-left: 5px solid var(--gold); padding-left: 12px; }
.squad { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 900px){ .squad { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 620px){ .squad { grid-template-columns: repeat(2,1fr);} }
.player {
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s; position:relative;
}
.player:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.player__img { aspect-ratio: 3/4; position:relative; }
.player__num { position:absolute; top:10px; right:12px; font-family: var(--display); font-size:2rem; color:rgba(255,255,255,.85); }
.player__body { padding: 12px 14px 16px; }
.player__body .pos { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-dark); font-weight:800; }
.player__body b { display:block; color: var(--blue-900); font-size:1rem; }
.player__ini { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:400; font-size:2rem; letter-spacing:.04em; opacity:.9; }

/* ---------- generic info cards ---------- */
.info-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .info-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .info-grid { grid-template-columns:1fr; } }
.info-card { background:#fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.info-card .ic { width:48px; height:48px; border-radius:12px; background: var(--blue-800); color:#fff; display:grid; place-items:center; margin-bottom: 14px; }
.info-card h4 { margin:.2rem 0 .4rem; color: var(--blue-900); }
.info-card p { color: var(--muted); margin:0; font-size:.94rem; }

.reveal { opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ==========================================================================
   PREMIUM v3 – Slider, Animationen, Icons, Feinschliff
   ========================================================================== */

/* sanftere, edlere Reveal-Kurve */
.reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }

/* ---- Menü: CTA-Buttons nie umbrechen, sauber zentriert ---- */
.menu a.btn, .nav .btn { white-space:nowrap; text-align:center; line-height:1.05; }
.nav .btn.nav-cta { padding:.62rem 1.25rem; }

/* ---------- HERO-SLIDER ---------- */
.hero { position:relative; isolation:isolate; padding:0; }
.hero__slides { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0; display:flex; align-items:center; padding:96px 0 70px;
  opacity:0; visibility:hidden; transition:opacity .9s ease, visibility .9s; z-index:0;
}
.hero-slide.is-active { opacity:1; visibility:visible; z-index:1; }
.hero-slide__bg { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-slide__bg .cover-img { width:100%; height:100%; object-fit:cover; }
.hero-slide__veil { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(4,16,40,.92) 0%, rgba(4,16,40,.30) 55%, rgba(4,16,40,.5) 100%); }
.hero-slide.is-active .hero-slide__bg { animation:kenburns 9s ease-out both; }
@keyframes kenburns { from{transform:scale(1.09)} to{transform:scale(1)} }
.hero-slide .hero__content > * { opacity:0; transform:translateY(28px); }
.hero-slide.is-active .hero__content > * { animation:heroIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-slide.is-active .hero__content > *:nth-child(1){ animation-delay:.12s }
.hero-slide.is-active .hero__content > *:nth-child(2){ animation-delay:.24s }
.hero-slide.is-active .hero__content > *:nth-child(3){ animation-delay:.36s }
.hero-slide.is-active .hero__content > *:nth-child(4){ animation-delay:.48s }
@keyframes heroIn { to{opacity:1; transform:none} }

.hero__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,.45);
  background:rgba(6,26,63,.32); backdrop-filter:blur(6px); color:#fff; display:grid; place-items:center;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s; }
.hero__nav:hover { background:var(--gold); color:var(--blue-900); border-color:var(--gold); transform:translateY(-50%) scale(1.06); }
.hero__nav svg { width:22px; height:22px; }
.hero__nav.prev { left:22px } .hero__nav.next { right:22px }
.hero__dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:10px; }
.hero__dot { width:11px; height:11px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; transition:.25s; padding:0; }
.hero__dot:hover { background:#fff; }
.hero__dot.is-active { background:var(--gold); width:30px; border-radius:6px; }
@media (max-width:680px){ .hero__nav{ display:none } .hero-slide{ padding:64px 0 56px } }

/* ---------- Icon-Container (.ic) – SVG statt Emoji ---------- */
.info-card .ic, .ic-badge {
  background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
  box-shadow:0 10px 24px -12px rgba(13,58,143,.8);
}
.ic svg { width:24px; height:24px; }
.ic-tier { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg,#cd7f32,#a05a1f); color:#fff; box-shadow:var(--shadow-sm); }
.ic-tier svg { width:28px; height:28px; }
.ic-tier.silver { background:linear-gradient(135deg,#c8d0dc,#8b97a8); }
.ic-tier.gold   { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--blue-900); }

/* ---------- Premium-Hover / Micro-Interactions ---------- */
.news-card, .info-card, .player, .logo-card, .news-mini, .news-hero, .team-card {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.news-hero .cover-img, .article__hero .cover-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news-hero:hover .cover-img, .article__hero:hover .cover-img { transform:scale(1.06); }
.news-mini__img.brandshot, .news-card__img { overflow:hidden; }
.btn { transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn:active { transform:translateY(0) scale(.98); }
.player:hover { transform:translateY(-6px); }
.player__img::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,16,40,.5),transparent 45%); opacity:0; transition:opacity .3s; }
.player:hover .player__img::after { opacity:1; }

/* ---------- Sub-Page-Hero – Premium ---------- */
.page-hero { padding:74px 0 64px; background:linear-gradient(135deg,var(--blue-900),var(--blue-700) 60%,var(--blue-600)); }
.page-hero::before { content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 52px);
  mask-image:linear-gradient(90deg,transparent,#000 40%); }
.page-hero__crest { position:absolute; right:3%; top:50%; transform:translateY(-50%); height:150%; width:auto; opacity:.10; pointer-events:none; }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero .kicker { color:#fff; }
.page-hero .kicker::before { background:var(--gold); }
.breadcrumb { font-size:.8rem; color:#aebfe2; letter-spacing:.04em; margin-bottom:.4rem; }
@media (max-width:680px){ .page-hero__crest{ right:-30%; opacity:.07 } }

/* ---------- Section-Titel: Akzent-Unterstrich ---------- */
.section-head .section-title { position:relative; }

/* Scroll-Hinweis dezent animiert */
.hero__scroll { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,6px) } }

@media (prefers-reduced-motion: reduce){
  .hero-slide .hero__content > *{ opacity:1; transform:none; animation:none; }
  .hero-slide.is-active .hero-slide__bg{ animation:none; }
  .hero__scroll{ animation:none; }
  .kenburns{ animation:none; }
}

/* ==========================================================================
   REDESIGN v2 – Topbar, echtes Wappen, Featured-News, Markenbilder
   ========================================================================== */

/* ---------- Utility-Topbar (Kontakt + Social) ---------- */
.topbar { background:#0b3f82; color:#cfe0f7; font-size:.82rem; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:42px; }
.topbar a { color:#9fb2d8; transition: color .15s; }
.topbar a:hover { color:#fff; }
.topbar__contact { display:flex; gap:1.4rem; align-items:center; }
.topbar__contact span, .topbar__contact a { display:inline-flex; align-items:center; gap:.45rem; }
.topbar__contact svg { width:15px; height:15px; color: var(--gold); }
.topbar__social { display:flex; gap:.5rem; align-items:center; }
.topbar__social a { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.topbar__social a:hover { background: var(--gold); color: var(--blue-900); }
.topbar__social svg { width:15px; height:15px; }
@media (max-width:720px){ .topbar__contact .hide-sm { display:none; } }

/* ---------- Echtes Wappen im Header: frei auf Blau (transparente Ecken), Gold-Trennlinie ---------- */
.brand { gap:.85rem; }
.brand .crest { width:auto; height:60px; object-fit:contain; background:none; border-radius:0; padding:0; box-shadow:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.brand .brand-divider { flex:none; width:2px; height:44px; border-radius:2px; background:linear-gradient(var(--gold), var(--gold-dark)); opacity:.9; }
.brand .brand-txt { display:inline-block; }
.brand .brand-txt b { display:block; font-size:1.5rem; letter-spacing:.03em; line-height:.92; }
.brand .brand-txt span { display:block; color:var(--gold); font-size:.56rem; letter-spacing:.05em; font-weight:800; margin-top:5px; text-align:justify; text-align-last:justify; }
/* ---------- Footer-Brand: wie Header (Wappen frei, Gold-Trennlinie, gold-bündige Unterzeile) ---------- */
.footer-brand { gap:.85rem; }
.footer-brand .crest { width:auto; height:66px; object-fit:contain; background:none; border-radius:0; padding:0; box-shadow:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.footer-brand .brand-divider { flex:none; width:2px; height:50px; border-radius:2px; background:linear-gradient(var(--gold), var(--gold-dark)); opacity:.9; }
.footer-brand .brand-txt { display:inline-block; line-height:1; }
.footer-brand .brand-txt b { display:block; font-family:var(--display); font-weight:400; font-size:1.75rem; letter-spacing:.03em; line-height:.92; text-transform:uppercase; }
.footer-brand .brand-txt span { display:block; color:var(--gold); font-size:.66rem; letter-spacing:.05em; font-weight:800; text-transform:uppercase; margin-top:6px; text-align:justify; text-align-last:justify; }

/* ---------- Hero-Wappen-Wasserzeichen ---------- */
.hero__crest {
  position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:min(46vw,520px); opacity:.10; z-index:-1; pointer-events:none;
  filter: drop-shadow(0 0 60px rgba(0,0,0,.4));
}
@media (max-width:820px){ .hero__crest { right:-22%; top:38%; width:88vw; opacity:.07; } }

/* ---------- Markenbild (Wappen-Wasserzeichen auf Verlauf, statt Foto) ---------- */
.brandshot { position:relative; overflow:hidden; }
.brandshot::before {
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 46px);
}
.brandshot::after {
  content:""; position:absolute; inset:0;
  background:url('../img/logo.png') center/46% no-repeat; opacity:.16;
}

/* ---------- Featured-News-Layout ---------- */
.news-feature { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; margin-bottom:24px; }
@media (max-width:880px){ .news-feature { grid-template-columns:1fr; } }
.news-hero {
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:400px;
  display:flex; align-items:flex-end; color:#fff; box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-hero:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.news-hero .veil { position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,16,40,.96), rgba(4,16,40,.25) 65%, rgba(4,16,40,.1)); z-index:1; }
.news-hero .inner { position:relative; z-index:2; padding:32px; }
.news-hero .tag { display:inline-block; background:var(--gold); color:var(--blue-900); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.32rem .75rem; border-radius:999px; margin-bottom:.9rem; }
.news-hero time { display:block; color:#cfdcf5; font-size:.84rem; font-weight:600; margin-bottom:.4rem; }
.news-hero h3 { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.02; margin:0 0 .7rem; }
.news-hero p { color:#dbe6fb; margin:0 0 1.2rem; max-width:54ch; }
.news-side { display:grid; gap:24px; align-content:start; }
/* kompakte Side-News-Karte (Bild links, Text rechts) */
.news-mini { display:grid; grid-template-columns:120px 1fr; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.news-mini:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.news-mini__img { position:relative; }
.news-mini__body { padding:16px 18px; }
.news-mini__body .tag { font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dark); }
.news-mini__body time { display:block; font-size:.74rem; color:var(--muted); margin:.15rem 0; }
.news-mini__body h4 { margin:.1rem 0; color:var(--blue-900); font-size:1.02rem; line-height:1.25; }
@media (max-width:480px){ .news-mini { grid-template-columns:90px 1fr; } }

/* Scoreboard-Karte im Spielbericht-Mini */
.score-line { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-size:1.3rem; color:var(--blue-800); }
.score-line .res { background:var(--blue-800); color:#fff; padding:.05em .45em; border-radius:6px; }

/* ---------- Footer Kontaktliste mit Icons ---------- */
.contact-list { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.contact-list li { display:flex; gap:.6rem; align-items:flex-start; }
.contact-list svg { width:16px; height:16px; color:var(--gold); flex:none; margin-top:.18rem; }

/* ---------- Article (News-Detail) ---------- */
.article { max-width:760px; margin:0 auto; padding:56px 0; }
.article .meta { color:var(--muted); font-size:.88rem; font-weight:600; margin-bottom:.5rem; }
.article h1 { font-family:var(--display); font-weight:400; text-transform:uppercase; color:var(--blue-900); font-size:clamp(1.8rem,4.5vw,2.8rem); line-height:1.02; margin:0 0 1.2rem; }
.article__lead { font-size:1.15rem; color:var(--ink); font-weight:500; border-left:5px solid var(--gold); padding-left:16px; margin:0 0 1.6rem; }
.article p { color:#2a3340; margin:0 0 1.1rem; }
.article ul.facts { list-style:none; padding:18px 22px; margin:0 0 1.4rem; background:var(--bg); border-radius:var(--radius-sm); display:grid; gap:.5rem; }
.article ul.facts li { color:var(--ink); }
.article blockquote { margin:1.6rem 0; padding:20px 24px; background:linear-gradient(135deg,var(--blue-800),var(--blue-600)); color:#fff; border-radius:var(--radius); font-size:1.15rem; font-style:italic; }
.article .back { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--blue-600); margin-bottom:1.5rem; }
.article__hero { position:relative; min-height:360px; border-radius:var(--radius); overflow:hidden; display:flex; align-items:flex-end; color:#fff; box-shadow:var(--shadow); margin-bottom:32px; }
.article__hero .cover-img { object-position:center 20%; }
.article__hero .veil { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,16,40,.92),rgba(4,16,40,.2) 70%); z-index:1; }
.article__hero .inner { position:relative; z-index:2; padding:30px; }

/* ==========================================================================
   HAUPTSPONSOR-Banner + Artikel-Fotos
   ========================================================================== */
.hauptsponsor {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px;
  background:linear-gradient(135deg,var(--blue-800),var(--blue-600));
  color:#fff; border-radius:var(--radius); padding:26px 32px; box-shadow:var(--shadow);
  border:2px solid rgba(244,178,35,.55); margin-bottom:26px; position:relative; overflow:hidden;
}
.hauptsponsor::after { content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; background:radial-gradient(circle,rgba(244,178,35,.32),transparent 70%); }
.hauptsponsor .logo-box { background:#fff; border-radius:14px; padding:20px 28px; display:grid; place-items:center; position:relative; z-index:1; }
.hauptsponsor .logo-box img { max-height:74px; width:auto; display:block; }
.hauptsponsor .txt { position:relative; z-index:1; }
.hauptsponsor .tagline { font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; color:var(--gold); }
.hauptsponsor h3 { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.9rem; margin:.35rem 0 .4rem; }
.hauptsponsor p { color:#dbe6fb; margin:0; max-width:50ch; }
.hauptsponsor .btn { position:relative; z-index:1; white-space:nowrap; }
@media (max-width:780px){
  .hauptsponsor { grid-template-columns:1fr; text-align:center; gap:18px; padding:24px; }
  .hauptsponsor .logo-box { justify-self:center; }
  .hauptsponsor p { margin-inline:auto; }
}

/* Cover-Bild (Foto füllt eine Box) */
.cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* Fotos im Artikel */
.article figure { margin:1.8rem auto; max-width:540px; }
.article figure img { width:100%; max-height:520px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-sm); display:block; }
.article figure figcaption { font-size:.84rem; color:var(--muted); margin-top:.6rem; text-align:center; }
/* Inline-Bilder im Fließtext (ohne figure) ebenfalls begrenzen */
.article > img, .article p img { max-width:540px; width:100%; height:auto; display:block; margin:1.6rem auto; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
/* Zurück-Buttons */
.article .back-btns { display:flex; gap:12px; flex-wrap:wrap; }
.article .back-top { margin-bottom:22px; }

/* ==========================================================================
   HAUPTMENÜ – Politur (Desktop)
   ========================================================================== */
.nav { gap:1.4rem; }
.menu { gap:.1rem; }
.menu li { display:flex; }
/* Navigationslinks (ohne den Button) */
.menu a:not(.btn) {
  position:relative;
  display:inline-flex; align-items:center;
  text-transform:uppercase;
  font-size:.82rem; font-weight:700; letter-spacing:.07em;
  color:#c4d2ec;
  padding:.65rem .35rem; margin:0 .55rem;
  background:none; border-radius:0;
}
.menu a:not(.btn)::after {
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; border-radius:3px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .26s ease;
}
.menu a:not(.btn):hover,
.menu a:not(.btn).active { color:#fff; background:none; }
.menu a:not(.btn):hover::after,
.menu a:not(.btn).active::after { transform:scaleX(1); }

/* CTA-Buttons im Menü */
.menu a.btn { margin-left:.7rem; text-transform:uppercase; letter-spacing:.05em; font-size:.8rem; }
.nav .btn.nav-cta { text-transform:uppercase; letter-spacing:.05em; font-weight:800; box-shadow:0 8px 22px -10px rgba(244,178,35,.9); }
/* Desktop: „Partner werden" als Outline, damit nur „Nächstes Heimspiel" voll gold ist */
@media (min-width:921px){
  .menu a.btn-gold {
    background:transparent; color:var(--gold);
    border:2px solid rgba(244,178,35,.55); box-shadow:none;
  }
  .menu a.btn-gold:hover { background:var(--gold); color:var(--blue-900); transform:translateY(-2px); }
}

/* Sticky-Header etwas schlanker + feiner Rahmen */
.site-header { box-shadow:0 6px 24px -18px rgba(0,0,0,.8); }
.nav { height:76px; }

/* Desktop: Menü kompakter, damit es in den .wrap-Container passt (lief vorher
   ~110-160px über → KONTAKT bei 1181-1300px abgeschnitten + H-Scroll). Letzter
   Punkt schließt bündig mit der Container-Kante ab → Topbar-Social-Icons
   stehen exakt darüber. */
@media (min-width:1181px){
  .nav { gap:.8rem; }
  .menu a:not(.btn), .menu .nav-parent { margin:0 .2rem; letter-spacing:.03em; font-size:.8rem; }
  .menu li:last-child a:not(.btn) { margin-right:0; padding-right:0; }
  .menu li:last-child a:not(.btn)::after { right:0; }
}

/* Im Mobile-Menü kein Mittel-Margin / Unterstrich-Optik anpassen */
@media (max-width:1180px){
  .menu a:not(.btn){
    margin:0; padding:.95rem .4rem; font-size:1.05rem;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .menu a:not(.btn)::after{ left:0; right:auto; width:22px; bottom:8px; }
  .menu a.btn{ margin:14px 0 0; }
}

/* ---- Marken-Lockup: nicht quetschen/umbrechen + Platz schaffen ---- */
.brand { flex-shrink: 0; }
.brand-txt, .brand-txt b, .brand-txt span { white-space: nowrap; }
/* Doppelten „Partner werden"-Button nur am Desktop ausblenden (bleibt im Mobilmenü) */
@media (min-width: 1181px){ .menu a.btn { display: none; } }

/* ==========================================================================
   DROPDOWN-NAVIGATION (Verein ▾ / Mannschaften ▾)
   ========================================================================== */
.menu .has-sub { position:relative; flex-direction:column; align-items:flex-start; }
.menu .nav-parent {
  display:inline-flex; align-items:center; gap:.32rem;
  background:none; border:0; cursor:pointer; font-family:inherit;
  color:#c4d2ec; text-transform:uppercase; font-weight:700; letter-spacing:.07em; font-size:.82rem;
  padding:.65rem .35rem; margin:0 .55rem; position:relative;
}
.menu .nav-parent .chev { width:14px; height:14px; transition:transform .25s ease; }
.menu .nav-parent::after {
  content:""; position:absolute; left:.35rem; right:.35rem; bottom:0; height:3px; border-radius:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .26s ease;
}
.menu .has-sub:hover .nav-parent, .menu .has-sub:focus-within .nav-parent,
.menu .has-sub.active-parent .nav-parent { color:#fff; }
.menu .has-sub:hover .nav-parent::after, .menu .has-sub:focus-within .nav-parent::after,
.menu .has-sub.active-parent .nav-parent::after { transform:scaleX(1); }

.menu .submenu {
  list-style:none; margin:0; padding:6px;
  position:absolute; top:100%; left:0; min-width:236px;
  background:var(--blue-900); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:70;
}
/* Öffnen per Hover/Fokus + Pfeil-Drehung bewusst NUR am Desktop: im mobilen
   Akkordeon steuert die .open-Klasse (Klick) – global würde der Pfeil schon
   beim Drüberfahren/Fokussieren nach oben drehen, obwohl nichts aufklappt,
   und nach dem Zuklappen wegen des Button-Fokus hängen bleiben. */
@media (min-width:1181px){
  .menu .has-sub:hover .submenu, .menu .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform:translateY(0); }
  .menu .has-sub:hover .nav-parent .chev, .menu .has-sub:focus-within .nav-parent .chev { transform:rotate(180deg); }
}
.menu .submenu li { display:block; }
.menu .submenu a {
  display:block; white-space:nowrap; color:#cdd8ee;
  padding:.62rem .85rem; margin:0; border-radius:8px; border:0;
  font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
}
.menu .submenu a::after { display:none; }
.menu .submenu a:hover, .menu .submenu a.active { color:#fff; background:rgba(255,255,255,.08); }

/* Mobil: Untermenüs als Akkordeon im aufgeklappten Burger-Menü */
@media (max-width:1180px){
  .menu .has-sub { width:100%; }
  .menu .nav-parent {
    width:100%; justify-content:space-between; margin:0; font-size:1.05rem;
    padding:.95rem .4rem; border-bottom:1px solid rgba(255,255,255,.07);
  }
  .menu .nav-parent::after { display:none; }
  .menu .submenu {
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    background:rgba(0,0,0,.18); border:0; box-shadow:none; border-radius:0;
    max-height:0; overflow:hidden; padding:0 8px; transition:max-height .3s ease;
  }
  .menu .has-sub.open .submenu { max-height:360px; padding:6px 8px; }
  .menu .has-sub.open .nav-parent .chev { transform:rotate(180deg); }
  .menu .submenu a { font-size:.98rem; padding:.7rem .6rem; border-bottom:1px solid rgba(255,255,255,.05); }
}

/* ==========================================================================
   VORSTAND / ORGANISATION
   ========================================================================== */
.board-group { margin: 30px 0; }
.board-group > h3 {
  font-family: var(--display); font-weight:400; text-transform:uppercase; color: var(--blue-900);
  font-size:1.4rem; margin: 0 0 16px; border-left:5px solid var(--gold); padding-left:12px;
}
.board-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.board-card {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px 22px;
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative; overflow:hidden;
}
.board-card::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--blue-700), var(--blue-500)); }
.board-card.has-photo::before { background:linear-gradient(90deg, var(--gold), var(--gold-dark)); }
.board-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.board-card__avatar {
  width:96px; height:96px; border-radius:50%; flex:none; margin-bottom:14px; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--blue-700), var(--blue-500));
  border:3px solid #fff; box-shadow:0 8px 20px -10px rgba(13,58,143,.7), 0 0 0 1px var(--line);
}
.board-card__avatar img { width:100%; height:100%; object-fit:cover; }
.board-card__avatar .initials { color:#fff; font-family:var(--display); font-weight:400; font-size:2rem; letter-spacing:.05em; }
.board-card .role { display:inline-block; background:var(--gold); color:var(--blue-900); font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:.35rem .75rem .2rem; border-radius:999px; margin-bottom:.6rem; }
.board-card h4 { margin:0; font-size:1.18rem; color:var(--ink); }
.board-card .since { color:var(--muted); font-size:.82rem; margin:.25rem 0 0; }
.board-card .board-email {
  display:inline-flex; align-items:center; gap:.42rem; margin-top:.75rem;
  color:var(--blue-600); font-weight:600; font-size:.85rem; word-break:break-word;
}
.board-card .board-email svg { width:16px; height:16px; flex:none; }
.board-card .board-email:hover { color:var(--gold-dark); }
@media (max-width:820px){ .board-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:540px){ .board-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   VEREINSGESCHICHTE – TIMELINE
   ========================================================================== */
.timeline { position:relative; max-width:820px; margin:0 auto; padding-left:34px; }
.timeline::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:3px; background:linear-gradient(var(--gold), var(--gold-dark)); border-radius:3px; }
.tl-item { position:relative; margin:0 0 30px; }
.tl-item::before { content:""; position:absolute; left:-30px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--gold); border:3px solid #fff; box-shadow:0 0 0 2px var(--gold); }
.tl-item .tl-year { font-family:var(--display); font-weight:400; color:var(--blue-700); font-size:1.25rem; letter-spacing:.02em; }
.tl-item h3 { margin:.1rem 0 .35rem; color:var(--ink); font-size:1.18rem; }
.tl-item p { margin:0; color:var(--muted); }
.tl-item .tl-photo { margin-top:12px; width:100%; max-width:420px; border-radius:12px; border:1px solid var(--line); box-shadow:0 6px 18px rgba(11,42,74,.12); display:block; }
.history-note { max-width:820px; margin:26px auto 0; padding:16px 18px; background:#fff; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:.92rem; }

/* Hinweis-Banner für vorläufige Beispieltexte (im CMS abschaltbar) */
.draft-banner {
  display:flex; gap:.65rem; align-items:flex-start;
  margin:22px 0 -10px; padding:14px 18px;
  background:#fff7ed; border:1px solid #fed7aa; border-left:4px solid var(--gold);
  border-radius:12px; color:#7c4a03; font-size:.92rem; line-height:1.5;
}
.draft-banner .ic { flex:none; font-size:1.1rem; line-height:1.3; }

/* ==========================================================================
   „NACH OBEN"-BUTTON
   ========================================================================== */
.to-top {
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--blue-700); color:#fff; border:0; border-radius:50%;
  box-shadow:0 10px 26px -10px rgba(6,26,63,.7); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s;
}
.to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:var(--gold); color:var(--blue-900); transform:translateY(-3px); }
.to-top svg { width:22px; height:22px; }
@media (max-width:600px){ .to-top { right:14px; bottom:14px; width:44px; height:44px; } }
@media (prefers-reduced-motion: reduce){ .to-top { transition:opacity .2s ease, visibility .2s; transform:none; } .to-top.show{ transform:none; } }

/* ==========================================================================
   LEITBILD – Mission Statement
   ========================================================================== */
.mission-statement {
  max-width:880px; margin:0 auto; padding:8px 0 8px 28px;
  border-left:5px solid var(--gold);
  font-family:var(--display); font-weight:400; line-height:1.3; text-transform:none;
  font-size:clamp(1.4rem,3.2vw,2.1rem); color:var(--blue-900);
}

/* ==========================================================================
   SPORTPLATZ – Anfahrt-CTA
   ========================================================================== */
.venue-cta {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 28px; box-shadow:var(--shadow-sm);
}
.venue-cta h3 { margin:0 0 .3rem; color:var(--blue-900); font-size:1.3rem; }
.venue-cta p { margin:0; color:var(--muted); }
@media (max-width:560px){ .venue-cta { flex-direction:column; align-items:flex-start; } }

/* Sportplatz: großes Schaubild */
.venue-showcase { position:relative; margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.venue-showcase img { display:block; width:100%; height:clamp(260px,46vw,520px); object-fit:cover; }
.venue-showcase figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:46px 26px 20px; z-index:1;
  color:#fff; font-weight:600; font-size:1.02rem;
  background:linear-gradient(transparent, rgba(6,26,63,.85));
}

/* Nachwuchs: Trainer-Zeile auf der Team-Karte */
.team-coach { display:flex; align-items:center; gap:.4rem; margin:.1rem 0 .2rem; color:var(--muted); font-size:.86rem; }
.team-coach svg { width:15px; height:15px; flex:none; color:var(--blue-600); }
.team-coach b { color:var(--ink); font-weight:700; }

/* Nachwuchs-Kader: Roster-Liste (ohne Fotos – Datenschutz Minderjährige) */
.roster { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 26px; }
.roster-item { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 14px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
.roster-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm), 0 10px 22px -16px rgba(6,26,63,.5); }
.roster-ava { flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue-700),var(--blue-500)); color:#fff; font-family:var(--display); font-weight:400; font-size:1rem; letter-spacing:.03em; }
.roster-info { line-height:1.25; min-width:0; }
.roster-info b { color:var(--ink); font-size:.96rem; }
.roster-info span { display:block; color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:820px){ .roster { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .roster { grid-template-columns:1fr; } }

/* ==========================================================================
   SPONSOREN – Partner-Pakete (Tier-Karten)
   ========================================================================== */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; max-width:1040px; margin:0 auto; }
.tier {
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:32px 26px 28px; box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.tier::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; }
.tier--bronze::before { background:linear-gradient(90deg,#cd7f32,#9c5a26); }
.tier--silver::before { background:linear-gradient(90deg,#c2cbd5,#8b95a1); }
.tier--gold::before   { background:linear-gradient(90deg,var(--gold),var(--gold-dark)); }
.tier:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.tier--featured { border:2px solid var(--gold); box-shadow:var(--shadow); }
@media (min-width:861px){
  .tier--featured { transform:scale(1.04); }
  .tier--featured:hover { transform:scale(1.04) translateY(-5px); }
}
.tier__badge { align-self:center; background:var(--gold); color:var(--blue-900); font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.32rem .95rem; border-radius:999px; margin-bottom:14px; }
.tier__head { text-align:center; }
.tier__icon { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; color:#fff; box-shadow:0 8px 18px -10px rgba(6,26,63,.5); }
.tier__icon svg { width:30px; height:30px; }
.tier__icon.bronze { background:linear-gradient(135deg,#cd7f32,#9c5a26); }
.tier__icon.silver { background:linear-gradient(135deg,#c2cbd5,#8b95a1); }
.tier__icon.gold   { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); }
.tier h3 { font-family:var(--display); font-weight:400; text-transform:uppercase; color:var(--blue-900); font-size:1.42rem; margin:0; }
.tier__sub { display:block; color:var(--muted); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-top:3px; }
.tier__price { display:block; text-align:center; color:var(--blue-700); font-weight:700; font-size:.9rem; margin:16px 0 18px; padding:9px; background:var(--bg); border-radius:10px; }
.tier__list { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:.7rem; flex:1; }
.tier__list li { position:relative; padding-left:30px; color:var(--ink); font-size:.93rem; line-height:1.35; }
.tier__list li::before { content:""; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:rgba(244,178,35,.16); }
.tier__list li::after { content:"✓"; position:absolute; left:4.5px; top:0; color:var(--gold-dark); font-weight:800; font-size:.82rem; }
.tier .btn { width:100%; justify-content:center; margin-top:auto; }
@media (max-width:860px){ .tiers { grid-template-columns:1fr; max-width:440px; } }

/* ===== Rechtstexte / Prosa (Impressum, Datenschutz) ===== */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing:.02em; font-size: 1.2rem; color: var(--blue-900); margin: 1.8rem 0 .6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 1rem; line-height: 1.7; color: var(--ink); }
.legal a { color: var(--blue-600); }

/* ===== Kontaktformular ===== */
.contact-layout { display:grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items:start; }
.contact-form { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.cf-row { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { margin-bottom: 16px; }
.cf-field label { display:block; font-weight:700; font-size:.85rem; margin:0 0 6px; color: var(--blue-900); }
.cf-field input, .cf-field select, .cf-field textarea {
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background:#fff; color: var(--ink);
}
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline:2px solid var(--blue-500); border-color: var(--blue-500); }
.cf-field textarea { resize: vertical; }
.contact-form .btn { margin-top: 4px; }
.cf-hint { font-size:.8rem; color: var(--muted); margin:.9rem 0 0; }
.cf-hint a { color: var(--blue-600); }
.cf-consent { display:flex; align-items:flex-start; gap:.6rem; margin:4px 0 18px; font-size:.86rem; color:var(--ink); cursor:pointer; }
.cf-consent input[type=checkbox] { width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--blue-600); cursor:pointer; }
.cf-consent a { color:var(--blue-600); font-weight:600; }
.form-note { padding:14px 16px; border-radius: var(--radius-sm); margin-bottom:18px; font-weight:600; }
.form-note.ok { background:#e6f6ec; color:#136b39; border:1px solid #b8e6c9; }
.form-note.err { background:#fdeaea; color:#9c2020; border:1px solid #f4c0c0; }
.contact-aside { background: var(--blue-900); color:#fff; border-radius: var(--radius); padding: 26px; }
.contact-aside h3 { font-family: var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; margin:0 0 16px; font-size:1.3rem; }
.contact-aside .contact-list { list-style:none; padding:0; margin:0 0 20px; }
.contact-aside .contact-list li { display:flex; gap:.6rem; align-items:flex-start; margin-bottom:14px; }
.contact-aside .contact-list svg { width:20px; height:20px; flex:none; color: var(--gold); margin-top:2px; }
.contact-aside .contact-list a, .contact-aside .contact-list span { color:#dce6f5; }
@media (max-width: 820px){ .contact-layout { grid-template-columns: 1fr; } .cf-row { grid-template-columns:1fr; } }

/* ===== Foto-Galerie ===== */
.gallery { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.gallery__item { position:relative; display:block; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow:hidden; background:var(--blue-900); box-shadow: var(--shadow-sm); }
.gallery__item img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__cap { position:absolute; left:0; right:0; bottom:0; padding:18px 12px 8px; color:#fff; font-size:.82rem;
  background: linear-gradient(transparent, rgba(6,26,63,.85)); }
@media (max-width: 860px){ .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.lightbox { position:fixed; inset:0; z-index:200; background:rgba(6,26,63,.92); display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox.open { display:flex; }
.lightbox__img { max-width:92vw; max-height:84vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox__cap { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff; font-size:.95rem; padding:0 20px; }
.lightbox__close { position:absolute; top:16px; right:22px; background:none; border:0; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; }

/* ===== Spielplan & Ergebnisse ===== */
.fx-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start; }
.fx-section { margin-bottom: 64px; }
.fx-section:last-child { margin-bottom: 0; }
.fx-section .section-title { margin-bottom: 24px; }
/* Spielplan: kompakte, tabellenartige Zeilenliste (übersichtlich am Desktop) */
.fx-grid { display:block; background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow:hidden; }
.fx { display:grid; grid-template-columns: 205px minmax(0,1fr) 185px; align-items:center; gap:20px;
  padding:13px 20px; margin:0; border:0; border-top:1px solid var(--line); background:transparent; box-shadow:none; border-radius:0; transition:background .15s; }
.fx:first-child { border-top:0; }
.fx:hover { background: var(--bg); }
.fx__date { font-size:.78rem; color: var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.fx__match { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:14px; }
.fx__team { display:flex; align-items:center; gap:8px; min-width:0; font-size:1rem; font-weight:700; color: var(--blue-900); }
.fx__team--home { justify-content:flex-end; text-align:right; }
.fx__team--away { justify-content:flex-start; text-align:left; }
.fx__tname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx__me { color: var(--blue-600); }
/* Vereins-Logos / Monogramm-Badges (lokal gehostet) */
.club-logo { width:26px; height:26px; flex:0 0 auto; object-fit:contain; }
/* echtes Bild-Logo: als saubere helle Scheibe (macht weiße Wappen-Teile auf weißem Grund sichtbar,
   Badge wirkt vollständig). Wappen hat internen Rand → border-radius schneidet nichts ab. */
img.club-logo { border-radius:50%; background:#eef2f7; box-shadow:0 0 0 1px rgba(8,36,92,.12); }
/* Monogramm-Badge: rundes farbiges Feld mit Initialen */
.club-mono { border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-family: var(--display); font-weight:400; font-size:.72rem; letter-spacing:.02em; box-shadow:0 1px 3px rgba(8,36,92,.18); }
.fx__res { font-family: var(--display); font-weight:400; font-size:1.05rem; color: var(--muted); min-width:44px; text-align:center; }
.fx__res--score { font-size:1.25rem; color: var(--blue-900); background: var(--bg); border-radius:8px; padding:3px 12px; }
.fx__info { display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; min-width:0; }
.fx__comp { font-size:.74rem; color: var(--muted); font-weight:600; letter-spacing:.02em; }
.fx__loc { font-size:.74rem; color: var(--muted); }
@media (max-width: 820px){ .fx-cols { grid-template-columns: 1fr; } }
/* Tablet: kompakte Zeile beibehalten (Datum | Begegnung); Bewerb ausgeblendet
   (je Abschnitt ohnehin einheitlich) → deutlich übersichtlicher als gestapelt */
@media (max-width: 820px){
  .fx { grid-template-columns: auto minmax(0,1fr); gap:16px; padding:12px 16px; text-align:left; }
  .fx__date { white-space:nowrap; font-size:.72rem; }
  .fx__info { display:none; }
  .fx__match { gap:10px; }
}
/* Handy: vollständig gestapelt und zentriert */
@media (max-width: 520px){
  .fx { grid-template-columns: 1fr; gap:8px; padding:14px 16px; text-align:center; }
  .fx__match { gap:10px; }
  .club-logo { width:22px; height:22px; }
  .club-mono { font-size:.62rem; }
  .fx__team { gap:6px; }
  .fx__tname { white-space:normal; }
}

/* ===== Barrierefreiheit ===== */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.site-header :focus-visible, .topbar :focus-visible { outline-color: #fff; }
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--blue-900); padding: 10px 16px; border-radius: 8px;
  font-weight: 800; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* Trainerteam: 4 Karten nebeneinander wie der Kader (Umbrüche wie .squad) */
.info-grid--4 { grid-template-columns: repeat(4,1fr); align-items:start; }
@media (max-width:900px){ .info-grid--4 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:620px){ .info-grid--4 { grid-template-columns: repeat(2,1fr); } }

/* Trainer-Card mit großem Foto (z. B. Masseur) – im Stil der Kader-Karten */
.info-card--photo { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.info-card__photo { width:100%; aspect-ratio:3/4; background:var(--blue-800); position:relative; }
.info-card__photo img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
/* Platzhalter mit Vereinswappen, wenn (noch) kein Foto vorhanden ist */
.info-card__photo--logo { display:grid; place-items:center; background:linear-gradient(160deg,#eef2f7,#dfe6ee); }
.info-card__photo--logo img { width:62%; height:auto; object-fit:contain; opacity:.92; }
.info-card__text { padding:16px 24px 24px; }
.info-card__text h4 { margin:.1rem 0 .4rem; }

/* ===== Hall of Fame ===== */
.honors { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.honor { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 20px; text-align:center; box-shadow:0 2px 10px rgba(11,42,74,.05); transition:transform .16s, box-shadow .16s, border-color .16s; }
.honor:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(11,42,74,.12); border-color:transparent; }
.honor__ic { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#fff2cf,var(--gold)); color:#7a5600; margin-bottom:12px; }
.honor__ic svg { width:30px; height:30px; }
.honor__title { display:block; color:var(--blue-900); font-size:1.05rem; line-height:1.3; }
.honor__sub { display:block; color:var(--muted); font-size:.85rem; margin-top:4px; }
.hof-people { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
.hof-card { background:#0b3f82; border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; }
.hof-card__photo { width:100%; aspect-ratio:3/4; background:#0a366f; }
.hof-card__photo img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hof-card__photo--logo { display:grid; place-items:center; background:linear-gradient(160deg,#1a5fb8,#0a366f); }
.hof-card__photo--logo img { width:58%; height:auto; object-fit:contain; opacity:.9; }
.hof-card__body { padding:14px 16px 18px; }
.hof-card__body b { color:#fff; display:block; }
.hof-card__role { color:var(--gold); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; display:block; margin:3px 0 7px; }
.hof-card__body p { color:#c7d3ea; font-size:.9rem; margin:0; }
.hof-card__period { color:#9fb4d1; font-size:.82rem; display:block; margin:0 0 6px; }
/* Meistermannschaften */
.hof-teams { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.hof-team { margin:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(11,42,74,.05); transition:transform .16s, box-shadow .16s; }
.hof-team:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(11,42,74,.12); }
.hof-team__img { position:relative; aspect-ratio:16/10; background:#0a366f; }
.hof-team__img img { width:100%; height:100%; object-fit:cover; display:block; }
.hof-team__img.is-empty { display:grid; place-items:center; background:linear-gradient(160deg,#1a5fb8,#0a366f); }
.hof-team__img.is-empty img { width:46%; height:auto; object-fit:contain; opacity:.85; }
.hof-team__year { position:absolute; left:12px; bottom:12px; background:var(--gold); color:#3a2a05; font-family:var(--display); font-size:1.15rem; padding:2px 12px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.hof-team figcaption { padding:14px 16px 16px; }
.hof-team figcaption b { display:block; color:var(--blue-900); }
.hof-team figcaption span { display:block; color:var(--muted); font-size:.9rem; margin-top:2px; }
.hof-team figcaption span.muted { font-style:italic; opacity:.85; }

/* ===== Schritte (Mitglied werden) ===== */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step { display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 2px 10px rgba(11,42,74,.05); }
.step__no { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--blue-900),var(--blue-800)); color:#fff; font-family:var(--display); font-size:1.2rem; }
.step b { color:var(--blue-900); display:block; }
.step p { margin:.25rem 0 0; color:var(--muted); font-size:.92rem; }
@media(max-width:680px){ .steps { grid-template-columns:1fr; } }

/* ===== Downloads ===== */
.dl-list { display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; }
.dl-item { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 2px 10px rgba(11,42,74,.05); }
.dl-item__ic { flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,#eaf1fa,#dfeaf7); color:var(--blue-700); }
.dl-item__ic svg { width:24px; height:24px; }
.dl-item__body { flex:1; min-width:0; }
.dl-item__body b { display:block; color:var(--blue-900); }
.dl-item__body span { color:var(--muted); font-size:.9rem; }
.dl-item__soon { color:var(--muted); font-size:.85rem; font-style:italic; white-space:nowrap; }
.dl-item .btn { white-space:nowrap; }
@media(max-width:560px){ .dl-item{ flex-wrap:wrap; } .dl-item .btn,.dl-item__soon{ flex-basis:100%; margin-left:62px; margin-top:4px; } }

/* ===== Nachwuchs: Philosophie ===== */
.youth-phil { display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 26px; box-shadow:0 2px 10px rgba(11,42,74,.05); margin-bottom:30px; }
.youth-phil__txt p { margin:.4rem 0 0; color:var(--ink); }
.youth-values { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.youth-values li { background:linear-gradient(135deg,var(--blue-900),var(--blue-800)); color:#fff; font-weight:700; font-size:.9rem; padding:8px 16px; border-radius:999px; box-shadow:0 4px 12px rgba(11,42,74,.15); }
.youth-values li:nth-child(even) { background:var(--gold); color:#3a2a05; box-shadow:0 4px 12px rgba(244,178,35,.28); }
.team-meta { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.86rem; margin:.3rem 0 0; }
.team-meta svg { width:16px; height:16px; flex:0 0 auto; }
@media(max-width:680px){ .youth-phil { grid-template-columns:1fr; } }

/* ===== Galerie-Filter ===== */
.gallery-filter { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 24px; }
.gf-btn { border:1px solid var(--line); background:#fff; color:var(--blue-900); border-radius:999px; padding:8px 16px; font:inherit; font-weight:700; font-size:.88rem; cursor:pointer; transition:.15s; }
.gf-btn:hover { border-color:var(--gold); }
.gf-btn.is-active { background:var(--blue-900); color:#fff; border-color:var(--blue-900); }

/* ===== Termine ===== */
.events { display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.event { display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 2px 10px rgba(11,42,74,.05); transition:transform .16s, box-shadow .16s; }
.event:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,42,74,.1); }
.event__date { flex:0 0 auto; width:74px; text-align:center; background:linear-gradient(160deg,var(--blue-900),var(--blue-800)); color:#fff; border-radius:12px; padding:10px 6px; align-self:flex-start; }
.event__date .ev-wd { display:block; font-size:.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; }
.event__date .ev-d { display:block; font-family:var(--display); font-weight:400; font-size:1.8rem; line-height:1.15; }
.event__date .ev-m { display:block; font-size:.78rem; opacity:.85; }
.event__body { min-width:0; }
.event__body b { display:block; color:var(--blue-900); font-size:1.08rem; margin:.25rem 0; }
.event__type { display:inline-block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 9px; border-radius:999px; }
.event__type.heim { background:#e9f8ef; color:#12683a; }
.event__type.away { background:#eef2f7; color:#4a5763; }
.event__type.event { background:#fff2cf; color:#7a5600; }
.event__type.club { background:#eaf1fa; color:#1763a6; }
.event__meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:.9rem; margin-top:2px; }
.event__note { margin:.4rem 0 0; color:var(--muted); font-size:.92rem; }

/* ---------- Trainerteam-Foto (trainer-praesentation): Köpfe nicht abschneiden ---------- */
/* Cover-Ausschnitt nach oben ausrichten (Slider + News-Header) */
.hero-slide__bg .cover-img[src*="trainer-praesentation"],
.article__hero .cover-img[src*="trainer-praesentation"] { object-position: center top; }
/* Ken-Burns-Zoom oben verankern, damit der Zoom die Köpfe nicht anschneidet */
.hero-slide__bg:has(.cover-img[src*="trainer-praesentation"]) { transform-origin: center top; }

/* ---------- ÖFB-Widgets (Live-Daten von vereine.oefb.at) ---------- */
/* ÖFB-iframes sind fix 728px breit (widgets.js) – zwei Spalten gehen sich im
   1140px-Layout nie aus, daher immer einspaltig und iframe zentriert. */
.oefb-grid { display:grid; grid-template-columns:1fr; gap:22px; align-items:start; }
.oefb-widget { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.oefb-widget iframe { max-width:100%; border:0; display:block; margin:0 auto; }
/* Letztes/Nächstes Spiel: ÖFB setzt fix ~970px iframe-Höhe, Inhalt ist aber nur
   ~350px → Höhe kappen; bei mehr Inhalt scrollt das iframe (scrolling=auto). */
.oefb-widget--match iframe { height:560px !important; }
.oefb-widget__title { font-family:var(--display); color:var(--blue-900); font-size:1.25rem; margin:2px 4px 10px; }
.oefb-note { color:var(--muted); font-size:.84rem; margin:14px 2px 0; }

/* ---------- Produkt- & Preisübersicht (Sponsorenseite) ---------- */
.price-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
@media (max-width: 1000px) { .price-groups { grid-template-columns:1fr; } }
.price-card__title { color:var(--blue-900); font-size:1.15rem; margin:0 0 12px; }
.tbl--price td { vertical-align:top; }
.tbl--price td small { display:block; color:var(--muted); font-size:.78rem; font-weight:400; margin-top:2px; }
.tbl--price td.pts { white-space:nowrap; text-align:right; }
.price-note { color:var(--muted); font-size:.84rem; margin:14px 2px 0; }
.price-note--center { text-align:center; max-width:760px; margin:26px auto 0; }
.tbl--price td:first-child { text-align:left; }
.tbl--price td small { text-align:left; }

/* ---------- Preisübersicht: dunkle Variante (in der blauen "USV-Familie"-Box) ---------- */
.pricelist--dark { margin: 30px 0 28px; text-align: left; }
.pricelist--dark .section-head { margin-bottom: 26px; }
.pricelist--dark .section-title { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.pricelist--dark .section-head p { margin: 14px auto 0; }
.pricelist--dark .section-head p { color: #cfdcf5; }
.pricelist--dark .kicker { color: var(--blue-300); }
.pricelist--dark .price-card { background: rgba(255,255,255,.07); box-shadow: none; border: 1px solid rgba(255,255,255,.16); }
.pricelist--dark .price-card__title { color: #fff; }
.pricelist--dark .tbl td { color: #eaf1fb; }
.pricelist--dark .tbl tbody tr { border-color: rgba(255,255,255,.14); }
.pricelist--dark .tbl--price td small { color: #b8c6e6; }
.pricelist--dark .tbl .pts { color: var(--gold); }
.pricelist--dark .price-note { color: #b8c6e6; }

/* ---------- Preisübersicht: Abstands-Feinschliff ---------- */
/* Hinweistexte unter den Tabellen: klarer Abstand + Trennlinie (auch in der blauen Box,
   wo ".sponsor-cta p" sonst den margin-top auf 0 setzt) */
.price-card .price-note,
.sponsor-cta p.price-note { margin: 16px 2px 0; padding-top: 12px; border-top: 1px solid var(--line); max-width: none; text-align: left; }
.pricelist--dark .price-card .price-note { border-top-color: rgba(255,255,255,.16); }
.price-note--center,
.sponsor-cta p.price-note--center { margin: 28px auto 0; padding-top: 0; border-top: 0; max-width: 760px; text-align: center; }
/* Tabellenzeilen: etwas mehr Luft */
.tbl--price td { padding-top: .6rem; padding-bottom: .6rem; }
.price-card__title { margin: 0 0 14px; }
.pricelist--dark .price-card__title { margin: 0 0 14px; }

/* ---------- Mobile-Feinschliff Startseite/Quickbar (Kunden-Screenshot 26.07.) ---------- */
/* "Komplett →" darf nie umbrechen (Pfeil stand allein in zweiter Zeile) */
.card-head .more { white-space: nowrap; }

@media (max-width: 480px) {
  /* Spielkarte: Meta-Zeile ("Freundschaftsspiel · Auswärtsspiel" / "Live vom ÖFB")
     gestapelt statt gequetscht nebeneinander */
  .match__meta { flex-direction: column; gap: 3px; }
  .match__meta span:last-child { opacity: .85; }

  /* Karten kompakter, Kopfzeile aufgeräumt */
  .card-pad { padding: 20px 16px; }
  .card-head { align-items: flex-start; }
  .card-head h3 { font-size: 1.12rem; }

  /* Liga-Tabelle: engere Spalten + fluide Breite, damit von den Vereinsnamen
     mehr sichtbar bleibt (statt fixer 168px) */
  .tbl { font-size: .86rem; }
  .tbl th, .tbl td { padding: .5rem .28rem; }
  .tbl td:nth-child(2) { max-width: 46vw; }
}