/* 2026-10-29 hellid Website Waltenspühl Tennis – gemeinsames Stylesheet aller Seiten (DE + EN)
   ============================================================================
   Aufbau:
   1. Farben & Grundwerte      5. Seitenkopf Unterseiten   9. Footer
   2. Grundlayout              6. Startseite               10. Smartphone
   3. Kopfzeile (Logo/Sprache) 7. Hintergrund (Vita)       11. Reduzierte Bewegung
   4. Hauptmenü + Handy-Menü   8. Buttons & Bildreihen
   ============================================================================ */

/* ===== 1. FARBEN & GRUNDWERTE =====
   Wirkt auf der ganzen Website. Hier zentral Farben, Schrift und Breite ändern.
   --gruen ist das Logo-Grün der alten Website (#8cc63f). */
:root {
  --gruen: #8cc63f;
  --gruen-dunkel: #4f8a16;   /* für Text/Buttons – besser lesbar als das helle Grün */
  --gruen-hell: #eef6e2;     /* zarte Flächen */
  --text: #1a1a1a;
  --anthrazit: #34383b;    /* ruhiges Anthrazitgrau für die Wortkette */
  --btn-hell: #a6d16a;     /* helleres Grün für Zweit-Buttons */
  --text-grau: #555;
  --linie: #d9e8c4;
  --breite: 1120px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Box-Modell für alle Elemente: Breiten inkl. Innenabstand rechnen */
*, *::before, *::after { box-sizing: border-box; }

/* Grundschrift und Seitenhintergrund der ganzen Website;
   overflow-x hidden+clip verhindert seitliches Wackeln am Handy, ohne sticky zu brechen */
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden; overflow-x: clip;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}

/* Bilder skalieren nie über ihren Container hinaus (alle Seiten) */
img { max-width: 100%; height: auto; display: block; }

/* Textlinks im Inhalt: dunkles Grün mit feiner Unterstreichung */
a { color: var(--gruen-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--text); }

/* Sichtbarer Tastatur-Fokus (Barrierefreiheit), überall */
:focus-visible { outline: 2px solid var(--gruen-dunkel); outline-offset: 3px; }

/* Sprunglink „Zum Inhalt“ – nur für Tastatur/Screenreader sichtbar */
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }

/* ===== 2. GRUNDLAYOUT =====
   Zentrierter Inhaltsbereich, auf allen Seiten gleich breit */
.wrap { width: min(var(--breite), 100% - 3rem); margin-inline: auto; }

/* Grüner Verlaufsstreifen ganz oben – Zitat des alten grünen Kopfbalkens */
.verlauf {
  height: 8px;
  background: linear-gradient(90deg, #fff 0%, #c5e19c 35%, var(--gruen) 100%);
}

/* ===== 3. KOPFZEILE: Logo mittig, Sprachwahl rechts =====
   Wirkt im <header class="kopf"> auf jeder Seite */
.kopf { background: #fff; }
.kopf-oben {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1.6rem 0 1.2rem;
}
/* Logo-Grafik (gedrehtes Original-GIF, max. Originalbreite 389 px) */
.logo img { width: 340px; }

/* Sprachwahl DE / EN oben rechts */
.sprache {
  position: absolute;
  right: 0; top: 1.6rem;
  font-size: .9rem;
  letter-spacing: .05em;
}
.sprache a { color: var(--text-grau); text-decoration: none; }
.sprache a[aria-current] { color: var(--gruen-dunkel); font-weight: 700; }
.sprache span { color: #bbb; margin: 0 .3rem; }

/* ===== 4. HAUPTMENÜ (Desktop) + HANDY-MENÜ =====
   Menüleiste zwischen zwei grünen Linien, klebt beim Scrollen oben */
.menueleiste {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--gruen);
  border-bottom: 1px solid var(--gruen);
}
.hauptmenue ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: .25rem 2.2rem; flex-wrap: wrap;
}
.hauptmenue a {
  display: block;
  padding: .85rem 0;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
/* aktive Seite und Hover: grün mit kurzem Balken */
.hauptmenue a:hover { color: var(--gruen-dunkel); }
.hauptmenue a[aria-current="page"] { color: var(--gruen-dunkel); font-weight: 600; border-bottom-color: var(--gruen); }

/* Handy-Menüknopf und Handy-Sprachwahl – auf Desktop ausgeblendet */
.menue-toggle, .sprache-mobil { display: none; }

/* ===== 5. SEITENKOPF DER UNTERSEITEN =====
   Kleiner grüner Oberbegriff + große Überschrift, z. B. auf „Hintergrund“ */
.seitenkopf { padding: 3.5rem 0 1.5rem; }
.oberzeile {
  margin: 0 0 .4rem;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gruen-dunkel);
}
h1, h2 { line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0; }

/* ===== 6. STARTSEITE =====
   6a: Hero mit Tennis-Wortkette links und Bildmosaik rechts */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 4rem 0 4.5rem;
}
/* Die Wortkette der alten Startseite als großes Typo-Element */
.wortkette {
  margin: 0 0 2rem;
  font-size: clamp(1.7rem, 3.3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
}
/* alle Wörter einheitlich in ruhigem Anthrazit */
.wortkette { color: var(--anthrazit); font-weight: 600; }
/* Schluss „jetzt ist YOUR TIME!“ in einem einzigen Grün */
.wortkette strong { display: block; margin-top: .3rem; font-weight: 700; color: var(--gruen-dunkel); }

/* Bildmosaik im Hero: 3×3 Raster, einzelne Felder bleiben grün/leer */
.mosaik {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mosaik img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mosaik .feld { aspect-ratio: 1; background: var(--gruen-hell); }


/* 6b: Kacheln zu den Unterseiten (Bild + Menüname), grüne Fläche dahinter */
.kachelbereich { background: var(--gruen-hell); padding: 3.5rem 0; }
.kacheln {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
}
.kacheln a { display: block; text-decoration: none; color: var(--text); }
.kacheln img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }
/* Kachel = Bild + weisses Namensfeld darunter, ohne Linien und Pfeile */
.kacheln a { background: #fff; overflow: hidden; }
.kacheln span {
  display: block;
  padding: .75rem .9rem;
  font-weight: 500;
  color: var(--anthrazit);
  transition: color .2s;
}
.kacheln a:hover img { transform: scale(1.03); }
.kacheln a:hover span { color: var(--gruen-dunkel); }

/* ===== 7. HINTERGRUND (VITA) =====
   Porträt links, Lebenslauf + Ausbildungen rechts */
.vita {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  padding: 1rem 0 3.5rem;
}
.portraet img { width: 100%; }
/* SPTA-Mitgliedslogo unter dem Porträt */
.portraet .spta { margin-top: 2rem; width: 118px; }

/* Lebenslauf-Tabelle: Jahre grün links, Text rechts, feine Trennlinien */
.lebenslauf { margin: 0 0 2.5rem; }
.lebenslauf div {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--linie);
}
.lebenslauf div:first-child { border-top: 1px solid var(--linie); }
.lebenslauf dt { font-weight: 700; color: var(--gruen-dunkel); font-variant-numeric: tabular-nums; }
.lebenslauf dd { margin: 0; }

/* Zwischentitel auf Unterseiten (z. B. „Ausbildungen“) */
h2 { font-size: 1.35rem; margin: 0 0 1rem; }

/* Liste mit grünen Plus-Zeichen (wie das alte bullet_plus.gif) */
.plusliste { list-style: none; margin: 0; padding: 0; }
.plusliste li { position: relative; padding: .3rem 0 .3rem 1.6rem; }
.plusliste li::before {
  content: "+"; position: absolute; left: 0; top: .2rem;
  font-weight: 700; font-size: 1.15rem; color: var(--gruen);
}

/* ===== 8. BUTTONS & BILDREIHEN =====
   Grüner Hauptbutton und Text-Link-Button, auf allen Seiten verwendbar */
.buttons { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  background: var(--gruen-dunkel); color: #fff;
  font-weight: 600; text-decoration: none;
  border-radius: 2px;
  transition: background .2s;
}
.btn:hover { background: #3d6e10; color: #fff; }
/* Zweit-Button: gleiche eckige Form, helleres Grün mit dunkler Schrift */
.btn-hell { background: var(--btn-hell); color: var(--text); }
.btn-hell:hover { background: var(--gruen); color: var(--text); }

/* Bildreihe am Seitenende (Unterseiten): Original-Quadrate nebeneinander */
.bildreihe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 600px; margin: 0 0 4rem auto;
}
.bildreihe img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Kontaktband vor dem Footer (alle Seiten) */
.kontaktband { border-top: 1px solid var(--gruen); padding: 3rem 0; text-align: center; }
.kontaktband .buttons { justify-content: center; }

/* ===== 9. FOOTER =====
   Copyright, Kontakt und Rechtliches, auf jeder Seite */
.fuss { background: #f4f4f2; font-size: .9rem; color: var(--text-grau); padding: 1.6rem 0; }
.fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 2rem; }
.fuss p { margin: 0; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.fuss a { color: var(--text-grau); text-decoration: none; }
.fuss a:hover { color: var(--gruen-dunkel); }

/* ===== 10. SMARTPHONE & TABLET =====
   Tablet (bis 980 px): Kacheln 3-spaltig, Hero untereinander */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 0; }
  .kacheln { grid-template-columns: repeat(3, 1fr); }
}

/* Smartphone (bis 700 px): Logo kleiner, Menü als aufklappbare Liste */
@media (max-width: 700px) {
  .wrap { width: calc(100% - 2.5rem); }
  .kopf-oben { padding: 1.2rem 0 .9rem; }
  .logo img { width: 250px; }
  .sprache { display: none; }

  /* Handy-Leiste: DE/EN links, Menüknopf rechts (nur mit JavaScript) */
  .js .menueleiste .wrap { display: flex; justify-content: space-between; align-items: center; }
  .js .sprache-mobil { display: block; font-size: .9rem; }
  .sprache-mobil a { color: var(--text-grau); text-decoration: none; }
  .sprache-mobil a[aria-current] { color: var(--gruen-dunkel); font-weight: 700; }
  .sprache-mobil span { color: #bbb; margin: 0 .3rem; }
  .js .menue-toggle {
    display: inline-flex; align-items: center; gap: .6rem;
    background: none; border: 0; padding: .7rem 0;
    font: inherit; color: var(--text); cursor: pointer;
  }
  /* Hamburger-Symbol aus drei Strichen, wird beim Öffnen zum X */
  .menue-toggle .striche, .menue-toggle .striche::before, .menue-toggle .striche::after {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform .25s, background .25s;
  }
  .menue-toggle .striche { position: relative; }
  .menue-toggle .striche::before, .menue-toggle .striche::after { content: ""; position: absolute; left: 0; }
  .menue-toggle .striche::before { top: -7px; }
  .menue-toggle .striche::after { top: 7px; }
  .menue-toggle[aria-expanded="true"] .striche { background: transparent; }
  .menue-toggle[aria-expanded="true"] .striche::before { transform: translateY(7px) rotate(45deg); }
  .menue-toggle[aria-expanded="true"] .striche::after { transform: translateY(-7px) rotate(-45deg); }

  /* Aufgeklapptes Menü: volle Breite unter der Leiste, Haarlinien zwischen Punkten */
  .js .hauptmenue {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--gruen);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .js .hauptmenue.offen { display: block; }
  .js .hauptmenue ul { flex-direction: column; gap: 0; width: calc(100% - 2.5rem); margin-inline: auto; }
  .js .hauptmenue li + li { border-top: 1px solid var(--linie); }
  .js .hauptmenue a { padding: .95rem 0; border-bottom: 0; font-size: 1.1rem; }
  /* ohne JavaScript: Menü bleibt sichtbar, nur kompakter */
  html:not(.js) .hauptmenue ul { gap: 0 1.2rem; }

  .hero { padding: 2.2rem 0 2.8rem; }
  .mosaik { gap: 6px; }
  .kachelbereich { padding: 2.5rem 0; }
  .kacheln { grid-template-columns: repeat(2, 1fr); gap: 1.2rem .9rem; }
  .btn { width: 100%; justify-content: center; }

  .seitenkopf { padding: 2.2rem 0 1rem; }
  .vita { grid-template-columns: 1fr; gap: 2rem; }
  .portraet { display: flex; gap: 1.5rem; align-items: flex-end; }
  .portraet img:first-child { width: 55%; }
  .portraet .spta { margin-top: 0; width: 100px; }
  .lebenslauf div { grid-template-columns: 1fr; gap: .1rem; }
  .bildreihe { margin: 0 0 3rem; gap: 6px; }
  .fuss .wrap { flex-direction: column; }
}

/* ===== 11. REDUZIERTE BEWEGUNG =====
   Wenn im Betriebssystem „Bewegung reduzieren“ aktiv ist: keine Animationen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== 12. RECHTSTEXTE =====
   Impressum und Datenschutz: schmale, gut lesbare Textspalte */
.rechtstext { max-width: 760px; margin-left: max(1.5rem, calc((100% - var(--breite)) / 2)); padding-bottom: 4rem; }
.rechtstext h2 { font-size: 1.15rem; margin: 2.2rem 0 .6rem; color: var(--anthrazit); }
.rechtstext p { margin: 0 0 1rem; }
.rechtstext .plusliste { margin: 0 0 1rem; }
.rechtstext .stand { margin-top: 2rem; color: var(--text-grau); font-size: .9rem; }
/* Rechtstexte am Smartphone bündig mit der Überschrift */
@media (max-width: 700px) { .rechtstext { margin-left: auto; } }

/* ===== 13. SANFTES EINDREHEN DER BILDKACHELN =====
   Wirkt auf das Bildmosaik der Startseite (.mosaik) und die Bildreihe auf
   „Hintergrund“ (.bildreihe). Die Kacheln blenden nacheinander ein und drehen
   sich dabei leicht in die Fläche. Nur aktiv, wenn JavaScript läuft (.js);
   ohne JS oder bei „Bewegung reduzieren“ sind die Bilder sofort sichtbar.
   Tempo: Dauer in --flip-dauer, Abstand zwischen den Kacheln in script.js. */
.js .flip-gruppe { perspective: 900px; }
.js .flip-gruppe > * {
  opacity: 0;
  transform: rotateY(-28deg) scale(.96);
  transform-origin: left center;
}
.js .flip-gruppe.sichtbar > * {
  --flip-dauer: .75s;
  animation: kachel-flip var(--flip-dauer) cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
/* Bewegungsablauf: von leicht gedreht und transparent zu flach und sichtbar */
@keyframes kachel-flip {
  from { opacity: 0; transform: rotateY(-28deg) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* „Bewegung reduzieren“ im Betriebssystem: Kacheln sofort zeigen */
@media (prefers-reduced-motion: reduce) {
  .js .flip-gruppe > * { opacity: 1; transform: none; }
}

/* ===== 14. UNTERSEITEN-LAYOUT: TEXT LINKS, BILDER RECHTS =====
   Wirkt auf Unterricht, Angebot, Philosophie und Kontakt/Links (.zweispaltig) */
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 3.5rem;
  align-items: start;
  padding: 1rem 0 4rem;
}
.zweispaltig .text { max-width: 640px; }
.zweispaltig .text p { margin: 0 0 1.1rem; }
.zweispaltig .text h2 { margin-top: 2.5rem; }

/* Bildraster rechts: Original-Quadrate in 3 Spalten (Unterricht, Philosophie …) */
.bildraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bildraster img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Philosophie: Schlagworte als ruhige Liste mit feinen Linien, zweispaltig */
.punkte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem;
}
.punkte li {
  padding: .8rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 1.2rem; font-weight: 500; color: var(--anthrazit);
}
.punkte li::before { content: "+"; color: var(--gruen); font-weight: 700; margin-right: .7rem; }

/* Ort: zwei Standort-Karten nebeneinander mit Lageplan und Buttons */
.orte { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1rem 0 3rem; }
.ort { background: var(--gruen-hell); padding: 2rem; }
.ort h2 { margin: 0 0 .2rem; }
.ort .adresse { margin: 0 0 1.4rem; color: var(--text-grau); }
.ort h3 { font-size: 1rem; margin: 1.2rem 0 .3rem; color: var(--anthrazit); }
.ort p { margin: 0; }
.ort .buttons { margin-top: 1.6rem; }
/* Lageplan-Grafik der alten Website, weiss hinterlegt */
.ort .lageplan { background: #fff; padding: .5rem; width: 269px; max-width: 100%; }
/* Bildreihe mit nur zwei Bildern (Ort) */
.bildreihe-2 { grid-template-columns: repeat(2, 1fr); max-width: 400px; }

/* Kontakt/Links: Facebook-Link und Linkliste mit feinen Trennlinien */
.facebook { margin-top: 1.6rem !important; }
.linkliste { list-style: none; margin: 0; padding: 0; }
.linkliste li { border-bottom: 1px solid var(--linie); }
.linkliste li:first-child { border-top: 1px solid var(--linie); }
.linkliste a { display: block; padding: .6rem 0; color: var(--anthrazit); text-decoration: none; }
.linkliste a:hover { color: var(--gruen-dunkel); }

/* Tablet und Smartphone: Unterseiten einspaltig, Bilder unter dem Text */
@media (max-width: 900px) {
  .zweispaltig { grid-template-columns: 1fr; gap: 2.5rem; }
  .orte { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .zweispaltig { padding-bottom: 3rem; }
  .bildraster { gap: 6px; }
  .punkte { grid-template-columns: 1fr; }
  .ort { padding: 1.4rem; }
}