/* TSV Weissach 1907 e.V. – Baustellenseite
   Tokens aus demos/tsv-weissach/styles.css (:root), Designsystem demos/tsv-weissach/DESIGN.md */

@font-face { font-family: "Lato"; src: url("fonts/lato-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-900-latin.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
/* Ersatzschrift mit angeglichenen Maßen, damit beim Nachladen nichts springt */
@font-face { font-family: "Lato Ersatz"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 96%; ascent-override: 103%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* Wappen (gemessen): Gelb #FFDD00, Schwarz #000000, Weiß #FFFFFF; Schriftzug #1A1919 */
  --gelb: #FFDD00;
  --schwarz: #000000;
  --weiss: #FFFFFF;
  --tinte: #1A1919;
  --flaeche: oklch(96.8% 0.002 95);
  --text-2: oklch(42% 0.008 90);            /* Nebentext auf Weiß, über 7:1 */
  --auf-gelb-2: oklch(31% 0.055 96);        /* Nebentext auf Gelb, 9:1 */
  --auf-schwarz-2: oklch(84% 0.006 95);     /* Nebentext auf Schwarz, 12:1 */
  --linie: oklch(0% 0 0 / 0.12);
  --linie-hell: oklch(100% 0 0 / 0.22);

  --schrift: "Lato", "Lato Ersatz", "Segoe UI", system-ui, sans-serif;
  --fs-2: 1.125rem;
  --fs-3: 1.3125rem;
  --fs-4: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-5: clamp(1.85rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-6: clamp(2.3rem, 1.3rem + 3vw, 4rem);

  --wrap: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  --abstand: clamp(3rem, 1.8rem + 4vw, 6rem);
  --ecke: 6px;
  --ecke-karte: 10px;
  --dauer: 180ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --kopf-h: 76px;
  --wappen-h: 94px;
  color-scheme: light;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: oklch(35% 0 0) var(--flaeche); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--weiss); color: var(--tinte);
  font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.65;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }
h1, h2 { margin: 0; font-weight: 900; color: inherit; text-wrap: balance; }
p, ul, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-thickness var(--dauer) var(--ease-out), color var(--dauer) var(--ease-out); }
a:hover { text-decoration-thickness: 3px; }
::selection { background: var(--gelb); color: var(--schwarz); }
:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible { outline-color: var(--gelb); }
.dunkel ::selection { background: var(--gelb); color: var(--schwarz); }

.wrap { width: min(100% - 2 * var(--rand), var(--wrap)); margin-inline: auto; }

/* ---------- Kopfleiste: Wappen ragt über die Leiste ---------- */
.kopf { position: relative; z-index: 2; background: var(--weiss); box-shadow: 0 1px 0 var(--linie), 0 8px 20px -18px oklch(0% 0 0 / 0.5); }
.kopf-inner { min-height: var(--kopf-h); display: flex; align-items: center; }
/* Linkfläche 8 px kürzer als die Leiste, damit der Fokusumriss oben sichtbar bleibt */
.marke {
  position: relative; display: flex; align-items: center; min-height: calc(var(--kopf-h) - 16px);
  padding-left: calc(var(--wappen-h) * 0.8464 + 0.9rem);
  text-decoration: none; border-radius: var(--ecke);
}
.marke img {
  position: absolute; left: 0; top: -4px; height: var(--wappen-h); width: auto;
  filter: drop-shadow(0 3px 6px oklch(0% 0 0 / 0.22));
}
.marke-name { font-weight: 900; font-size: 1.125rem; line-height: 1.15; }
.marke-name small { display: block; font-weight: 700; font-size: 0.875rem; color: var(--text-2); }
a.marke:hover .marke-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ---------- Gelber Hinweis (Startseite) und Seitenkopf (Unterseiten) ---------- */
.gelb { background: var(--gelb); color: var(--schwarz); --text-2: var(--auf-gelb-2); }
.hinweis { padding-block: clamp(3.75rem, 2.4rem + 5vw, 7rem) clamp(2.75rem, 1.6rem + 4.5vw, 6rem); }
.hinweis h1 { font-size: var(--fs-6); line-height: 1.05; letter-spacing: -0.015em; max-width: 19ch; }

.seitenkopf { padding-block: clamp(3.25rem, 2.2rem + 4vw, 5.25rem) clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.seitenkopf h1 { font-size: var(--fs-6); line-height: 1.05; letter-spacing: -0.015em; margin-top: 0.6rem; }
.pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-weight: 700; font-size: 0.9375rem; color: var(--text-2); }
.pfad li + li::before { content: "/"; content: "/" / ""; margin-right: 0.5rem; }
.pfad a { color: var(--schwarz); display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- Kontakt: zwei Adressen, Haarlinie statt Karte ---------- */
.kontakt { padding-block: var(--abstand); }
.kontakt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
/* Unterraster: beide Adressen stehen auf einer Linie, auch wenn ein Satz umbricht */
.kontakt-eintrag { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0.55rem; align-content: start; border-top: 2px solid var(--schwarz); padding-top: 1.15rem; }
.kontakt-eintrag p { font-size: var(--fs-2); line-height: 1.5; align-self: end; }
.ohne-umbruch { white-space: nowrap; }
.mail {
  justify-self: start; align-self: start;
  font-weight: 900; font-size: var(--fs-4); line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.mail:hover { text-decoration-thickness: 3px; }

/* ---------- Schwarzes Band: Leitsatz und Mannschaft 1921 ---------- */
.dunkel { background: var(--schwarz); color: var(--weiss); --text-2: var(--auf-schwarz-2); }
.tradition { padding-block: var(--abstand); }
.tradition-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center; }
.tradition h2 { font-size: var(--fs-5); line-height: 1.1; letter-spacing: -0.012em; max-width: 12ch; }
.tradition img { width: 100%; border-radius: var(--ecke-karte); }
.tradition figcaption { margin-top: 0.7rem; font-size: 0.9375rem; color: var(--text-2); }

/* ---------- Rechtstexte ---------- */
.rechtstext { padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) var(--abstand); }
.rechtstext-inhalt { max-width: 70ch; }
.rechtstext h2 { font-size: var(--fs-3); line-height: 1.2; letter-spacing: -0.005em; margin: 2.4rem 0 0.55rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p + p, .rechtstext p + ul, .rechtstext ul + p { margin-top: 0.8rem; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li + li { margin-top: 0.25rem; }
.rechtstext a { font-weight: 700; overflow-wrap: anywhere; }
.rechtstext .stand { margin-top: 2.4rem; color: var(--text-2); }

/* ---------- Fuß ---------- */
.fuss { padding-block: 0 2.5rem; }
.fuss-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; border-top: 1px solid var(--linie-hell); padding-top: 2rem; }
.fuss-allein .fuss-inner { border-top: 0; padding-top: 0; }
.fuss-allein { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.fuss-adresse { font-size: 1rem; line-height: 1.6; color: var(--text-2); font-style: normal; }
.fuss-adresse strong { display: block; color: var(--weiss); font-weight: 900; font-size: 1.0625rem; }
.fuss-adresse a { color: var(--weiss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.fuss-adresse a:hover { color: var(--gelb); text-decoration-thickness: 2px; }
.fuss-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: none; }
.fuss-links a:hover, .fuss-links a[aria-current="page"] { color: var(--gelb); text-decoration: underline; }

/* ---------- Umbrüche ---------- */
@media (max-width: 860px) {
  .tradition-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  :root { --kopf-h: 64px; --wappen-h: 60px; }
  .marke { padding-left: calc(var(--wappen-h) * 0.8464 + 0.75rem); }
  .marke-name { font-size: 1rem; }
  .marke-name small { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}