@charset "UTF-8";
/* Verein zur Förderung des Sportrechts an der Universität zu Köln e.V.

   Farben aus dem Vereinslogo (gemessen am 01.10.2026): Weinrot #830c28, Stahlblau #487a91,
   Hellblau #9ed7e2. Typografie trägt die Gestaltung: eine Textspalte, eine Leseschrift
   (Source Serif 4, selbst gehostet unter ../Fonts/, SIL OFL 1.1), Systemschrift für Menü,
   Formular und Fuß. Kein Framework, kein JavaScript, keine Fremdserver.

   Kontraste (WCAG 2.1, gerechnet am 01.10.2026; AA verlangt 4,5:1 für Text, 3:1 für
   Bedienelemente und Fokus):
     --text        #26221f auf Weiß    15,8:1
     --weinrot     #830c28 auf Weiß    10,3:1   auf --papier  9,3:1   Weiß darauf 10,3:1
     --weinrot-tief #650a1f, Weiß darauf 13,0:1
     --stahl-tief  #35617a auf Weiß     6,7:1   auf --papier  6,1:1
     --grau        #645d56 auf Weiß     6,5:1   auf --papier  5,9:1
     --rand        #8a8279 auf Weiß     3,8:1   (Feldränder)
   Das Stahlblau des Logos (#487a91) kommt auf Weiß nur auf 4,7:1 und fällt auf --papier
   unter 4,5:1; das Hellblau (#9ed7e2) auf 1,6:1. Beide stehen deshalb nur als Schmuck
   (Linien, Flächen), nie als Textfarbe. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../Fonts/SourceSerif4-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../Fonts/SourceSerif4-latin-wght-italic.woff2") format("woff2");
}

:root {
  --weinrot: #830c28;
  --weinrot-tief: #650a1f;
  --stahlblau: #487a91;
  --stahl-tief: #35617a;
  --hellblau: #9ed7e2;
  --text: #26221f;
  --grau: #645d56;
  --rand: #8a8279;
  --linie: #ddd7ce;
  --papier: #f6f4f0;

  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rahmen: 62rem;   /* Kopf, Inhalt und Fuß teilen sich die linke Kante */
  --spalte: 43rem;   /* Textspalte: bei 19px Leseschrift im Mittel 68 Zeichen (gemessen) */
  --rand-x: 1.5rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* ---------- Text ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; text-wrap: balance;
  overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: 2.5rem; letter-spacing: -.012em; color: var(--weinrot); margin: 0 0 2.25rem; }
h1::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: 1.1rem;
  background: var(--hellblau); }
h2 { font-size: 1.6rem; color: var(--weinrot); margin: 3rem 0 .8rem; }
h3 { font-size: 1.25rem; color: var(--text); margin: 2.2rem 0 .5rem; }
p, ul, ol { margin: 0 0 1.15rem; }
/* Silbentrennung erst auf schmalen Bildschirmen (siehe unten): Bei 68 Zeichen Flattersatz
   stört sie mehr, als sie nützt ("Auf-gabe", "kei-ne"). */
p, li { hyphens: manual; overflow-wrap: break-word; text-wrap: pretty; }
ul, ol { padding-left: 1.6rem; }
li { margin-bottom: .35rem; }
li > ul, li > ol { margin: .35rem 0 0; }
li::marker { color: var(--grau); }
strong, b { font-weight: 650; }
img { max-width: 100%; height: auto; }

a { color: var(--weinrot); text-decoration: underline; text-decoration-thickness: .06em;
  text-underline-offset: .18em; }
a:hover { color: var(--weinrot-tief); text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--stahl-tief); outline-offset: 3px; border-radius: 2px; }

/* Sprungmarke für die Tastatur: erst beim Fokus sichtbar */
.sprung { position: absolute; left: var(--rand-x); top: -6rem; z-index: 10; padding: .6rem 1rem;
  background: var(--weinrot); color: #fff; font-family: var(--sans); font-size: 1rem; }
.sprung:focus { top: .5rem; color: #fff; outline-color: var(--text); }

/* ---------- Kopf ---------- */
.site-header { border-top: 5px solid var(--weinrot); border-bottom: 1px solid var(--linie); }
.site-header__inner { max-width: var(--rahmen); margin: 0 auto; padding: 1.75rem var(--rand-x) 0; }
.site-logo { display: inline-block; }
.site-logo img { display: block; height: 5.5rem; width: auto; max-width: 100%; }

.mainnav { margin: 1.4rem 0 0 -.75rem; font-family: var(--sans); font-size: .9375rem; }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.mainnav li { margin: 0; }
.mainnav a { display: block; padding: .8rem .75rem .7rem; color: var(--text); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px; line-height: 1.3; }
.mainnav a:hover { color: var(--weinrot); border-bottom-color: var(--hellblau); }
.mainnav li.active > a { color: var(--weinrot); font-weight: 600; border-bottom-color: var(--weinrot); }
.mainnav a:focus-visible { outline-offset: -3px; }

/* ---------- Inhalt ---------- */
.page-content { max-width: var(--rahmen); margin: 0 auto; padding: 3.5rem var(--rand-x) 5.5rem; }
.page-content > * { max-width: var(--spalte); }
.frame { margin-bottom: 2.25rem; }
.frame > :last-child { margin-bottom: 0; }
.frame > header > :first-child, .frame > :first-child { margin-top: 0; }

/* Startseite: kein h1 (der Name steht im Logo), dafür der erste Absatz als Vorspann */
[data-seite="/"] > .frame:first-of-type > p:first-child { font-size: 1.5rem; line-height: 1.4;
  margin-bottom: 2.25rem; hyphens: manual; }

/* Bild neben Text (aus den WordPress-Media-Text-Blöcken). Das Bild steht je nach Herkunft
   direkt im Block oder in einem <p>; beides ist die erste Rasterzelle. */
.bild-text { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: 1.25rem 2rem;
  align-items: center; margin: 2.25rem 0; }
.bild-text > * { margin: 0; min-width: 0; }
.bild-text img { display: block; width: 100%; }
.bild-text.bild-mittel { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.bild-text.bild-schmal { grid-template-columns: 7rem minmax(0, 1fr); }
.bild-text.bild-rechts { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
.bild-text.bild-rechts.bild-mittel { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bild-text.bild-rechts.bild-schmal { grid-template-columns: minmax(0, 1fr) 7rem; }
.bild-text.bild-rechts > :not(.bild-text__text) { order: 2; }
.bild-text.bild-schmal img { aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 50%; }
.bild-text__text { overflow-wrap: anywhere; }
.bild-text__text > :last-child { margin-bottom: 0; }

/* Vorstand: vier Personen, vier gleich große Porträts, gleich welche Breite der Block trägt */
[data-seite="/vorstand"] .bild-text { grid-template-columns: 7rem minmax(0, 1fr); margin: 0;
  padding: 1.5rem 0; border-top: 1px solid var(--linie); }
[data-seite="/vorstand"] .bild-text:last-child { border-bottom: 1px solid var(--linie); }
[data-seite="/vorstand"] .bild-text img { aspect-ratio: 1; object-fit: cover; object-position: 50% 20%;
  border-radius: 50%; }
[data-seite="/vorstand"] .bild-text__text { font-family: var(--sans); font-size: 1rem; line-height: 1.55; }
[data-seite="/vorstand"] .bild-text__text strong { font-family: var(--serif); font-size: 1.25rem; }

figure.bild, .page-content figure { margin: 2.25rem 0; }
figure img { display: block; }
figcaption { margin-top: .5rem; font-family: var(--sans); font-size: .875rem; color: var(--grau); }

/* Satzung: Die Paragrafenüberschriften sind im Bestand fette Absätze, keine h2. Sie sehen
   hier wie Zwischenüberschriften aus; Absätze zählen juristisch als (1), (2), (3). */
[data-seite="/satzung"] p:has(> strong:only-child) { font-size: 1.3rem; line-height: 1.25; margin: 2.75rem 0 .8rem;
  color: var(--weinrot); hyphens: manual; break-after: avoid; }
[data-seite="/satzung"] .frame > p:nth-child(-n+3):has(> strong:only-child) { margin: 0; color: var(--text);
  font-size: 1.3rem; line-height: 1.35; }
[data-seite="/satzung"] ol { padding-left: 2.4rem; }
[data-seite="/satzung"] ol > li { margin-bottom: .6rem; }
[data-seite="/satzung"] ol > li::marker { content: "(" counter(list-item) ")\2002"; color: var(--text);
  font-variant-numeric: tabular-nums; }
[data-seite="/satzung"] li > ul { margin: .35rem 0 0; }
[data-seite="/satzung"] li > ul + ul { margin-top: 0; }

/* ---------- Formular (TYPO3 form) ---------- */
form { font-family: var(--sans); font-size: 1rem; line-height: 1.45; }
form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
form legend { padding: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
/* Die Überschrift des Inhaltselements steht schon über dem Formular */
.frame > header ~ form > h2 { display: none; }
.frame-type-form_formframework { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.frame-type-form_formframework > header > h2 { margin-bottom: 1.75rem; }

.form-group, .form-element { margin: 0 0 1.35rem; max-width: 30rem; }
label, .form-label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--text); }
.required { color: var(--weinrot); font-weight: 700; text-decoration: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"],
input[type="url"], input[type="password"], select, textarea {
  display: block; width: 100%; min-height: 2.9rem; padding: .6rem .75rem;
  border: 1px solid var(--rand); border-radius: 3px; background: #fff; color: var(--text);
  font: inherit; line-height: 1.4; }
textarea { min-height: 8rem; }
input[type="date"], input[type="number"] { max-width: 13rem; }
input[autocomplete="postal-code"] { max-width: 9rem; }
select { max-width: 16rem; }
input:hover, select:hover, textarea:hover { border-color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--stahl-tief); outline-offset: 1px;
  border-color: var(--stahl-tief); }
.form-text, .help-block { display: block; margin-top: .4rem; font-size: .875rem; color: var(--grau); }

/* Honeypot: für Menschen und Vorleseprogramme nicht vorhanden, für Skripte ein Feld */
.form__honeypot { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px;
  overflow: hidden; }

.actions { margin-top: 2rem; }
.actions::before { content: "* Pflichtangabe"; display: block; margin-bottom: 1rem; font-size: .875rem;
  color: var(--grau); }
button, input[type="submit"], .btn { display: inline-block; min-height: 3rem; padding: .8rem 1.5rem;
  border: 0; border-radius: 3px; background: var(--weinrot); color: #fff; font-family: var(--sans);
  font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; }
button:hover, input[type="submit"]:hover, .btn:hover { background: var(--weinrot-tief); color: #fff; }
button:focus-visible, input[type="submit"]:focus-visible, .btn:focus-visible { outline-offset: 3px; }

/* Fehler tragen Farbe UND einen Balken am Feld, Farbe allein genügt nicht */
.error, .help-block.error, .invalid-feedback { display: block; margin-top: .4rem; color: var(--weinrot);
  font-size: .9375rem; font-weight: 600; }
.has-error input, .has-error select, .has-error textarea, input.error, select.error, textarea.error,
.is-invalid { border-color: var(--weinrot); border-left-width: 5px; color: var(--text); font-size: inherit;
  font-weight: inherit; margin-top: 0; }
.alert { margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; border-left: 5px solid var(--rand); background: var(--papier);
  font-family: var(--sans); font-size: 1rem; }
.alert-success { border-left-color: var(--stahlblau); background: #eef7f9; }
.alert-danger, .alert-error { border-left-color: var(--weinrot); }

/* ---------- Fuß ---------- */
.site-footer { border-top: 1px solid var(--linie); background: var(--papier); color: var(--grau);
  font-family: var(--sans); font-size: .875rem; line-height: 1.5; }
.site-footer__inner { max-width: var(--rahmen); margin: 0 auto; padding: 2rem var(--rand-x) 2.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem 2.5rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-footer a { color: var(--grau); padding: .2rem 0; }
.site-footer a:hover { color: var(--weinrot); }

/* ---------- Schmale Bildschirme (ab 320 px) ---------- */
@media (max-width: 44rem) {
  :root { --rand-x: 1.25rem; }
  body { font-size: 1.0625rem; }
  p, li { hyphens: auto; hyphenate-limit-chars: 8 3 3; -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3; }
  .bild-text__text p, [data-seite="/"] > .frame:first-of-type > p:first-child { hyphens: manual; }
  h1 { font-size: 1.9rem; margin-bottom: 1.75rem; }
  h2 { font-size: 1.4rem; margin-top: 2.5rem; }
  h3 { font-size: 1.15rem; }
  .site-header__inner { padding-top: 1.25rem; }
  .site-logo img { height: auto; width: 15rem; }
  .mainnav { margin: 1rem 0 0 -.6rem; }
  .mainnav a { padding: .7rem .6rem .6rem; }
  .page-content { padding: 2.25rem var(--rand-x) 3.5rem; }
  [data-seite="/"] > .frame:first-of-type > p:first-child { font-size: 1.25rem; }
  [data-seite="/satzung"] p:has(> strong:only-child),
  [data-seite="/satzung"] .frame > p:nth-child(-n+3):has(> strong:only-child) { font-size: 1.2rem; }
  [data-seite="/satzung"] ol { padding-left: 2.1rem; }
}
@media (max-width: 34rem) {
  .bild-text, .bild-text.bild-mittel, .bild-text.bild-rechts, .bild-text.bild-rechts.bild-mittel,
  .bild-text.bild-rechts.bild-schmal { grid-template-columns: minmax(0, 1fr); }
  .bild-text.bild-rechts > :not(.bild-text__text) { order: 0; }
  .bild-text img { width: auto; max-width: min(100%, 16rem); }
  .bild-text.bild-schmal { grid-template-columns: 5rem minmax(0, 1fr); align-items: start; }
  .bild-text.bild-schmal img { width: 100%; }
  [data-seite="/vorstand"] .bild-text { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  [data-seite="/vorstand"] .bild-text img { width: 100%; }
}

/* ---------- Druck: Satzung und Beitragsordnung schwarz auf weiß, ohne Kopf und Fuß ---------- */
@media print {
  @page { margin: 2cm 2.2cm; }
  .site-header, .site-footer, .sprung, form, .frame-type-form_formframework { display: none !important; }
  html { font-size: 11pt; }
  body { font-size: 11pt; line-height: 1.45; color: #000; background: #fff; }
  .page-content { max-width: none; margin: 0; padding: 0; }
  .page-content > * { max-width: none; }
  h1, h2, h3, a, strong, li::marker,
  [data-seite="/satzung"] p:has(> strong:only-child) { color: #000 !important; }
  h1 { font-size: 20pt; margin-bottom: 14pt; }
  h1::after { display: none; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }
  [data-seite="/satzung"] p:has(> strong:only-child) { font-size: 12pt; margin: 16pt 0 5pt; }
  a { text-decoration: none; }
  h1, h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .bild-text, figure { break-inside: avoid; }
}