/* ==========================================================================
   AARSPORTS Birrhard
   Dunkler Grund, Markenblau aus dem Logo, Tennisgelb als Signalfarbe.
   Grosse Versalien, harte Kanten, Diagonalen. Sportlich statt gefaellig.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --grund:    #0B1119;
  --flaeche:  #111A24;
  --flaeche-2:#17222E;
  --blau:     #0067A5;   /* aus dem Logo */
  --blau-tief:#004A77;   /* aus dem bisherigen Auftritt */
  --akzent:   #CFE800;   /* Tennisgelb */
  --text:     #F2F5F8;
  --text-2:   #9AA8B8;
  --linie:    rgba(255,255,255,.10);

  --rand:     1240px;
  --anton:    'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --sans:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --weich:    cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; scroll-padding-top: 116px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { margin: 0; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.skip { position:absolute; left:-9999px; top:10px; z-index:120; background:var(--akzent); color:#0B1119; padding:10px 18px; font-weight:800; }
.skip:focus { left:10px; }

.rahmen { width: min(100% - 48px, var(--rand)); margin-inline: auto; }
@media (max-width: 620px) { .rahmen { width: min(100% - 30px, var(--rand)); } }

/* ---------------- wiederkehrend ---------------- */
.wucht {
  font-family: var(--anton); font-weight: 400; text-transform: uppercase;
  line-height: .92; letter-spacing: -.005em;
}
.wucht em { font-style: normal; color: var(--akzent); }
.wucht--xl { font-size: clamp(44px, 9vw, 132px); }
.wucht--l  { font-size: clamp(34px, 5.6vw, 76px); }
.wucht--m  { font-size: clamp(26px, 3.4vw, 44px); }

.vorzeile {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 20px;
}
.vorzeile::after { content:""; width: clamp(40px, 8vw, 120px); height: 2px; background: var(--akzent); }

.lead { color: var(--text-2); font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.6; margin-top: 16px; max-width: 60ch; }

.knopf {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 30px; border: 2px solid transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s var(--weich), color .2s var(--weich), border-color .2s var(--weich), transform .2s var(--weich);
}
.knopf svg { width: 17px; height: 17px; flex: none; }
.knopf--gelb  { background: var(--akzent); color: #0B1119; }
.knopf--rand  { border-color: rgba(255,255,255,.32); color: var(--text); }
.knopf--blau  { background: var(--blau); color: #fff; }

/* Beim Überfahren gehen alle Knöpfe ins Blau des Logos, Schrift weiss.
   Weiss auf #0067A5 ergibt 6,03:1 und besteht damit die Kontrastprüfung. */
.knopf:hover,
.knopf:focus-visible {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
  transform: translateY(-3px);
}

/* Schraege als wiederkehrendes Motiv */
.schraege { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); }

/* ---------------- Kopfzeile ---------------- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,17,25,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
/* Drei Spalten: Logo links, Navigation mittig, Handlung rechts. Mit Flex
   sitzt die Navigation nur im Restplatz, nicht wirklich in der Mitte. */
.kopf__innen {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px; height: 104px;
}
.kopf__innen > * { min-width: 0; }
.marke { display: block; justify-self: start; grid-column: 1; }
.marke img { display: block; height: 58px; width: auto; }
.nav { display: none; justify-self: center; grid-column: 2; gap: 24px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav a { position: relative; padding: 6px 0; color: var(--text-2); transition: color .2s var(--weich); }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--akzent); transform:scaleX(0); transform-origin:left; transition:transform .26s var(--weich); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.kopf .knopf { display: none; justify-self: end; grid-column: 3; padding: 13px 22px; }
.burger { display:grid; justify-self:end; grid-column:3; gap:5px; width:46px; height:46px; padding:13px 10px; background:none; border:1px solid var(--linie); cursor:pointer; }
.burger span { display:block; height:2px; background:var(--text); }
.menue[hidden] { display: none; }
.menue { display:grid; gap:2px; padding:8px 24px 22px; border-top:1px solid var(--linie); background:var(--grund); }
.menue a { padding:14px 2px; border-bottom:1px solid var(--linie); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:14px; }
.menue .knopf { margin-top: 16px; justify-content: center; border: 0 !important; }
/* Mit dem groesseren Logo braucht die mittige Navigation mehr Platz: unter
   1120 px blieben nur 20 px Luft, deshalb dort schon das Menue. */
@media (min-width: 1240px) { .nav, .kopf .knopf { display: inline-flex; } .burger, .menue { display: none; } }

/* ---------------- Bildplatzhalter ---------------- */
.platz {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, var(--blau-tief), var(--flaeche) 70%);
  border: 1px solid var(--linie);
  color: rgba(255,255,255,.5);
}
.platz span {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 14px; border: 1px dashed rgba(255,255,255,.28); text-align: center;
}
.platz--16-9 { aspect-ratio: 16/9; }
.platz--4-3  { aspect-ratio: 4/3; }
.platz--1-1  { aspect-ratio: 1; }
.platz--hoch { aspect-ratio: 3/4; }

/* ---------------- Kopfbereich ---------------- */
.held { position: relative; overflow: hidden; min-height: clamp(560px, 82vh, 860px); display: grid; align-items: center; }
.held__bild { position: absolute; inset: 0; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; }
.held__bild::after {
  content:""; position:absolute; inset:0;
  /* Die erzeugten Aufnahmen sind selbst schon sehr dunkel, deshalb legt der
     Verlauf nur so viel darueber, wie die Schrift zum Lesen braucht. */
  background: linear-gradient(90deg, rgba(11,17,25,.90) 0%, rgba(11,17,25,.70) 46%, rgba(11,17,25,.34) 100%);
}
.held__innen { position: relative; padding: clamp(80px,10vw,140px) 0 clamp(60px,8vw,110px); }
.held__text { margin-top: 26px; max-width: 54ch; color: var(--text-2); font-size: clamp(16px,1.4vw,19px); }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
@media (max-width: 520px) { .held__knoepfe { display: grid; } .held__knoepfe .knopf { justify-content: center; } }

/* Zahlenband */
.zahlen { display: grid; gap: 1px; background: var(--linie); border-top: 1px solid var(--linie); }
@media (min-width: 560px)  { .zahlen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .zahlen { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.zahlen li { min-width:0; background: var(--grund); padding: 26px 24px 28px; }
.zahlen b { display:block; font-family: var(--anton); font-size: clamp(38px,4.4vw,58px); line-height:1; color: var(--akzent); }
.zahlen span { display:block; margin-top:8px; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--text-2); }

/* ---------------- Bahnen ---------------- */
.bahn { padding: clamp(54px, 6vw, 86px) 0; }
.bahn--flaeche { background: var(--flaeche); }
.bahn--blau { background: var(--blau-tief); }
.kopfzeile { max-width: 820px; margin-bottom: clamp(30px,3.4vw,44px); }

/* Voller Farbblock als Abschnittsmarke, wie in der Vorlage */
.marke-block {
  display: inline-block; margin: 0 0 2px; background: var(--akzent); color: #0B1119;
  padding: 13px clamp(22px,3.2vw,44px) 11px;
  font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(24px,3.1vw,42px); line-height: 1;
}

/* ---------------- Sportkacheln ---------------- */
.sportarten { display: grid; gap: 16px; }
@media (min-width: 640px)  { .sportarten { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .sportarten { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sport {
  position: relative; min-width: 0; display: block; overflow: hidden;
  border: 1px solid var(--linie); background: var(--flaeche);
  transition: transform .3s var(--weich), border-color .3s var(--weich);
}
.sport:hover { transform: translateY(-6px); border-color: var(--akzent); }
.sport__bild { position: relative; }
.sport__bild img { display:block; width:100%; aspect-ratio: 4/3; object-fit: cover; }
.sport__bild .platz { aspect-ratio: 4/3; }
.sport__nr {
  position:absolute; top:14px; left:14px; z-index:2;
  font-family: var(--anton); font-size: 13px; letter-spacing:.1em;
  background: var(--akzent); color:#0B1119; padding: 5px 10px 4px;
}
.sport__text { padding: 26px 26px 30px; }
.sport__text h3 { font-family: var(--anton); text-transform: uppercase; font-size: 28px; line-height:1; }
.sport__text p { margin-top: 12px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.sport__mehr {
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color: var(--akzent);
}
.sport__mehr svg { width:16px; height:16px; transition: transform .25s var(--weich); }
.sport:hover .sport__mehr svg { transform: translateX(5px); }

/* ---------------- Zweispalter ---------------- */
.zwei { display: grid; gap: clamp(30px,3.6vw,54px); align-items: center; }
@media (min-width: 920px) { .zwei { grid-template-columns: 1fr 1fr; } }
.zwei > * { min-width: 0; }
.zwei--textrechts > :first-child { order: 2; }
@media (max-width: 919px) { .zwei--textrechts > :first-child { order: 0; } }

.haken { display:grid; gap:11px; margin-top:22px; }
.haken li { display:flex; gap:13px; color: var(--text-2); font-size:15.5px; line-height:1.55; }
.haken li::before { content:""; flex:none; width:18px; height:18px; margin-top:4px; background: var(--akzent);
  clip-path: polygon(14% 46%, 4% 58%, 38% 90%, 96% 22%, 86% 12%, 38% 68%); }

/* ---------------- Zeiten ---------------- */
.zeiten { display:grid; gap:1px; background: var(--linie); border:1px solid var(--linie); }
@media (min-width: 760px) { .zeiten { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.zeiten > div { min-width:0; background: var(--grund); padding: 28px 26px 30px; }
.zeiten h2,
.zeiten h3 { font-family: var(--anton); text-transform:uppercase; font-size:22px; color: var(--akzent); }
.zeiten dl { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:16px 0 0; }
.zeiten dt { color: var(--text-2); font-size:14px; font-weight:600; }
.zeiten dd { margin:0; font-size:15px; font-weight:700; text-align:right; }
.zeiten p { margin-top:14px; color: var(--text-2); font-size:13.5px; }

/* ---------------- Neuigkeiten ---------------- */
.termine { display:grid; gap:16px; }
@media (min-width: 720px)  { .termine { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .termine { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.termin { min-width:0; border:1px solid var(--linie); background: var(--grund); padding:30px 28px 32px;
  transition: border-color .25s var(--weich), background .25s var(--weich); }
.termin:hover { border-color: rgba(207,232,0,.5); background: var(--flaeche-2); }
.bahn--flaeche .termin { background: var(--flaeche-2); }
.termin__tag { font-family: var(--anton); font-size:15px; letter-spacing:.08em; color: var(--akzent); text-transform:uppercase; }
.termin h3 { margin-top:10px; font-family: var(--anton); text-transform:uppercase; font-size:25px; line-height:1.05; }
.termin p { margin-top:13px; color: var(--text-2); font-size:15.5px; line-height:1.62; }

/* ---------------- Aufruf ---------------- */
.aufruf { position:relative; overflow:hidden; background: var(--blau-tief); }
.aufruf__innen { position:relative; padding: clamp(56px,7vw,96px) 0; display:grid; gap:28px; align-items:center; }
@media (min-width: 900px) { .aufruf__innen { grid-template-columns: 1fr auto; } }
.aufruf__innen > * { min-width: 0; }
.aufruf p { color: rgba(255,255,255,.82); margin-top:14px; max-width:52ch; }

/* ---------------- Fuss ---------------- */
.fuss { padding: clamp(54px,7vw,84px) 0 0; border-top:1px solid var(--linie); }
.fuss__innen { display:grid; gap:36px; }
@media (min-width: 760px)  { .fuss__innen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .fuss__innen { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.fuss__innen > * { min-width: 0; }
.fuss__marke img { height:62px; width:auto; margin-bottom:18px; }
.fuss__klein { color: var(--text-2); font-size:14px; max-width:34ch; }
.fuss__titel { font-family: var(--anton); text-transform:uppercase; font-size:15px; letter-spacing:.08em; color: var(--akzent); margin-bottom:12px; }
.fuss__spalte { display:grid; gap:9px; align-content:start; }
.fuss__spalte a, .fuss__spalte span { color: var(--text-2); font-size:14.5px; }
.fuss__spalte a:hover { color: var(--text); }
.fuss__zeile { display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between;
  margin-top: clamp(40px,5vw,64px); padding: 20px 0 24px; border-top:1px solid var(--linie);
  color:#8592A3; font-size:13px; }   /* #6D7B8C kam nur auf 4,38:1 */

/* ---------------- Einblenden beim Scrollen ----------------
   Bewusst nur Verschiebung, nie Deckkraft auf null: die Seite muss auch
   ohne Skript und vor dem Ausloesen vollstaendig lesbar sein. */
[data-zeig] { transform: translateY(26px); transition: transform .65s var(--weich); }
[data-zeig].ist-da { transform: none; }

/* ---------------- Rechtsseiten ---------------- */
.rechtstext { padding: clamp(44px,6vw,76px) 0 clamp(56px,8vw,92px); }
.rechtstext .rahmen { max-width: 780px; }
.rechtstext h2 { font-family: var(--anton); text-transform:uppercase; font-size: clamp(21px,2.4vw,28px);
  margin-top:40px; padding-top:24px; border-top:1px solid var(--linie); }
.rechtstext h2:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.rechtstext p, .rechtstext li { color: var(--text-2); margin-top:12px; font-size:15.5px; }
.rechtstext ul { list-style: disc; padding-left:22px; }
.rechtstext a { color: var(--akzent); text-decoration:underline; text-underline-offset:2px; }
.rechtstext b { color: var(--text); }
.platzhalter { background: rgba(207,232,0,.16); color: var(--akzent); border-bottom:1px dashed var(--akzent); padding:1px 5px; font-weight:700; }

/* Auf schmalen Geraeten muss neben dem Logo noch die Menuetaste Platz haben. */
@media (max-width: 480px) {
  .kopf__innen { height: 84px; gap: 14px; }
  .marke img { height: 44px; }
}

/* ---------------- Brotkrumen ---------------- */
.brotkrumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2);
}
.brotkrumen a:hover { color: var(--akzent); }
.brotkrumen span { color: rgba(255,255,255,.28); }
.brotkrumen b { color: var(--akzent); font-weight: 700; }

/* ---------------- Team ---------------- */
.personen { display: grid; gap: 16px; }
@media (min-width: 520px)  { .personen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 820px)  { .personen { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1180px) { .personen { grid-template-columns: repeat(7, minmax(0,1fr)); } }
.person {
  min-width: 0; text-align: center;
  border: 1px solid var(--linie); background: var(--flaeche); padding: 18px 12px 20px;
}
.person img {
  display: block; width: 100%; max-width: 130px; margin: 0 auto 14px;
  aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 50%;
  background: var(--blau-tief);
}
.person h3 { font-family: var(--anton); text-transform: uppercase; font-size: 15px; line-height: 1.1; }
.person p { margin-top: 5px; color: var(--text-2); font-size: 12.5px; }

/* ---------------- Inhaltsbilder ----------------
   Die Attribute width und height am <img> setzen in HTML eine feste Hoehe.
   Ohne height: auto ignoriert der Browser jedes Seitenverhaeltnis und zerrt
   das Bild. Genau dieser Fehler kostete gestern bei einem anderen Projekt
   eine Stunde, deshalb hier gleich richtig. */
.sportarten > img,
.zwei > div > img,
.bahn img:not(.person img):not(.marke img):not(.fuss__marke img) {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--linie);
}
.sport__bild img { aspect-ratio: 4 / 3; border: 0; }
.person img { aspect-ratio: 1; border: 0; }

/* ---------------- Diaschau im Kopfbereich ----------------
   Die Bilder liegen übereinander und werden überblendet. Ohne Skript trägt
   nur das erste die Klasse und ist sichtbar, die übrigen haben noch nicht
   einmal eine Quelle. Dadurch kostet die Diaschau beim Laden nichts. */
.held__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--weich);
}
.held__bild img.ist-da { opacity: 1; }

.held__steuerung {
  position: absolute; right: clamp(24px, 4vw, 56px); bottom: clamp(22px, 3vw, 40px);
  z-index: 2; display: flex; align-items: center; gap: 16px;
}
.held__name {
  font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--akzent);
}
.held__punkte { display: flex; gap: 7px; }
.held__punkt {
  width: 26px; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,.28); cursor: pointer;
  transition: background .3s var(--weich), width .3s var(--weich);
}
.held__punkt.ist-da { background: var(--akzent); width: 40px; }
@media (max-width: 620px) {
  .held__steuerung { right: 15px; bottom: 16px; gap: 10px; }
  .held__name { display: none; }
}