/* =========================================================================
   rad-aktiv.org — Nachbau der Wix-Seite als statisches HTML
   Cloud & Peak GmbH für SportPort GmbH, August 2026

   Alle Maße stammen aus dem Spiegel (Stand 29.08.2026), nicht aus dem
   Augenschein: 980-px-Spalte, Kopf 97 px, Kopf/Fuß #466F89, Menü
   700 12px/1.4em Montserrat. Wo eine Zahl aus der Wix-Auszeichnung kommt,
   steht sie als Kommentar daneben.

   E1 (Stephan, 29.08.2026): mitwachsend, ab 980 px pixelgleich zum Original.
   Die Inhaltsspalte ist deshalb bei 980 px gedeckelt und zentriert — genau
   wie im Original, das oberhalb von 980 px einen festen Block zentriert.
   Unterhalb von 980 px greifen die Umbruchpunkte am Ende dieser Datei.
   ========================================================================= */

:root {
  /* Palette — aus den Grafiken ausgezählt, nicht geschätzt (Sichtung §6.1) */
  --pink:        #E94268;
  --limette:     #B5C800;
  --stahlblau:   #466F89;
  --tuerkis:     #05C8A1;

  --spalte:      980px;   /* Wix: min-width der Abschnitte */
  --kopf-hoehe:   97px;   /* Wix: --header-height */
  --rand:         20px;   /* seitlicher Rand unterhalb von 980 px */
  --grundlinie:    1px;   /* Ausgleich Futura-Strut → Montserrat-Strut,
                             Begründung bei .text weiter unten */
}

/* --- Grundlagen --------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FFFFFF;                       /* Wix: pageBackground = color_11 */
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;                           /* Wix: font_8 der Fließtexte */
  line-height: 23px;                         /* siehe „Zeilenhöhen" unten */
  color: var(--stahlblau);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; border: 0; display: block; }

/* Wix setzt global a { text-decoration:none }. Deshalb ist im Original
   kein Verweis unterstrichen außer dem einen, der es ausdrücklich ist. */
a { color: inherit; text-decoration: none; }

/* Sprungziel für die Tastatur — im Original nicht vorhanden, aber ohne
   Skip-Link muss jede Tastaturbedienung durch sechs Menüpunkte hindurch. */
.sprung-zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #FFFFFF; color: var(--stahlblau);
  padding: 10px 16px; font-size: 14px; font-weight: 700;
}
.sprung-zum-inhalt:focus { left: 0; }

/* --- Die 980-Spalte ------------------------------------------------------
   Jeder Streifen läuft über die volle Breite, sein Inhalt sitzt in der
   Spalte. Genau so arbeitet die Wix-Vorlage (Abschnitt 100 %, Inhalt 980). */

.spalte {
  width: 100%;
  max-width: var(--spalte);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}

@media (min-width: 980px) {
  /* Ab 980 px ist die Spalte volle 980 px breit und liegt bündig — genau
     wie im Original bei 980 px Fensterbreite. Kein seitlicher Rand mehr,
     sonst wäre die Spalte 940 statt 980 und alles verschöbe sich. */
  .spalte { padding-left: 0; padding-right: 0; }
}

/* --- Kopf ---------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--stahlblau);              /* Wix: --bg 70,111,137 */
  overflow-x: clip;                          /* nichts darf seitlich hinauslaufen */
}

/* Wix setzt beide Teile absolut in die 980-Spalte: Logo bei x = 0,
   Menü bei x = 286 mit 684 px Breite. Nachgebaut als flex mit festem
   Abstand — dieselbe Rechnung, ohne absolute Positionierung. */
.kopf__innen {
  display: flex;
  align-items: flex-start;                   /* Wix setzt beide mit festem
                                                Abstand von oben, nicht mittig */
  min-height: var(--kopf-hoehe);
}

.kopf__logo { flex: 0 0 auto; margin: 7px 0; }   /* Wix: 7px oben und unten */
.kopf__logo img {
  width: 118px; height: 83px;                /* Wix: comp-jzi5gv68 */
  object-fit: cover;                         /* Wix beschneidet auch das Logo */
}

/* Menü — Wix: 684 × 40 ab x = 286, innen 10 px Rand (--pad).
   Am Original gemessen: Pillen von x = 296 bis x = 960, Höhe 40 px.
   Pillen weiß, Schrift 700 12px, Radius 8px, Umschlag pink. */
.menue {
  flex: 0 0 auto;
  width: 684px;
  margin: 28px 0 29px 168px;                 /* Wix: 28 oben, 29 unten,
                                                286 − 118 (Logobreite) links */
  padding: 0 10px;                           /* Wix: --pad 10px */
}
.menue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menue a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 5px;                            /* am Original gemessen */
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--stahlblau);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .4s ease, color .4s ease;
}
.menue a:hover,
.menue a:focus-visible,
.menue [aria-current="page"] {
  background: var(--pink);
  color: #FFFFFF;
}

/* --- Fuß ----------------------------------------------------------------- */

.fuss {
  background: var(--stahlblau);              /* Wix: --bg 70,111,137 */
  padding: 24px 0 33px;                      /* Wix: 24px oben, 33px unten */
  text-align: center;
}
.fuss__logo {
  width: 81px; height: 57px;                 /* Wix: comp-jznqh7f8 */
  object-fit: cover;
  margin: 0 auto;                            /* kein Abstand — Wix hat keinen */
}
.fuss p {
  margin: 0;
  font-size: 11px;                           /* Wix: comp-jznqb3yc */
  line-height: 1.5em;
  color: #FFFFFF;
}
.fuss a { color: #FFFFFF; text-decoration: none; }

/* --- Nach oben ----------------------------------------------------------
   Wix: 47 × 47, rund, rgba(233,66,104,.66), weißes Zeichen 25 × 25,
   20 px vom rechten und unteren Rand. */

.nach-oben {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 53;
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 200px;
  background: rgba(233, 66, 104, .66);
  transition: all .2s ease;
}
.nach-oben svg { width: 25px; height: 25px; fill: #FFFFFF; transition: inherit; }
.nach-oben:hover svg { width: 23px; height: 23px; }

/* --- Streifen ------------------------------------------------------------ */

.streifen { background: #FFFFFF; }
.streifen--hell { background: #FAFAFA; }     /* Wix: bg-overlay rgb(250,250,250) */

/* Die Konfetti-Fläche. Wix legt sie als gekacheltes Bild über die Spalte
   (fittingType „tile", Bild 500 × 500, Position center). Im HTML steht die
   Adresse mit blur_1 — das ist die absichtlich unscharfe Vorschau. Hier
   liegt der Master aus master-originale/.

   Die Deckung ist nicht überall gleich: Impressum 1,0 · Unterseiten 0,7 ·
   auf der Startseite je Abschnitt 0,38 / 0,74 / 1,0. Deshalb liegt die
   Kachel auf einer eigenen Ebene (::before) — nur so lässt sich das Bild
   abschwächen, ohne die Fläche darunter mit abzuschwächen. */

.streifen--kachel {
  position: relative;
  background-color: var(--flaeche, #FAFAFA);
}
.streifen--kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/kachel-abschnitt.png');
  background-repeat: repeat;
  background-size: 500px 500px;
  background-position: center center;
  opacity: var(--kachel-deckung, 1);
  pointer-events: none;
}
.streifen--kachel > * { position: relative; }

/* --- Fließtext ----------------------------------------------------------

   Ränder des Textkastens: die Wix-Werte stehen in --text-oben/--text-unten,
   hinzu kommt --grundlinie.

   Was --grundlinie ausgleicht: Die Grundlinie einer Zeile liegt bei Wix eine
   Spur tiefer im Zeilenkasten, weil dort Futura den Kasten aufspannt und
   Montserrat nur darin sitzt. Bei uns spannt Montserrat ihn selbst auf.
   Gemessen ist der Unterschied genau 1 px — über die ganze Seite
   gleichbleibend, nicht anwachsend. Mit dem einen Pixel liegt jede Zeile auf
   derselben Höhe wie im Original; dafür endet eine reine Textseite 1 px
   tiefer. */

.text {
  padding-top:    calc(var(--text-oben,  53px) + var(--grundlinie));
  padding-bottom: var(--text-unten, 31px);
}

/* Die Datenschutzseite hat einen eigenen Textkasten: Wix comp-jzobjsau ist
   976 px breit (nicht 980) und hat unten 54 px statt 31. Die vier Pixel sind
   nicht egal — ohne sie bricht ein Absatz eine Zeile früher um. */
.text--datenschutz { --kasten-breite: 976px; --text-unten: 54px; }

/* --- Zeilenhöhen: warum hier feste Pixelwerte stehen ---------------------

   Im Original steht überall `line-height: normal`. Was dabei herauskommt,
   hängt an der Schrift des Absatzes — und das ist bei Wix NICHT Montserrat,
   sondern Futura (`futura-lt-w01-light` im Fließtext, `-book` in den
   Überschriften, Playfair Display bei h3). Sichtbar ist Montserrat, weil
   jede Textstelle es einzeln gesetzt bekommt; die Zeilenhöhe stammt aber
   vom Absatz, also von Futura.

   Futura ist eine Monotype-Schrift aus dem Wix-Abonnement und darf auf
   unserem Server nicht ausgeliefert werden (Sichtung §6.2). Mit Montserrat
   als Absatzschrift wären die Zeilen enger — 22 statt 23 px bei 18 px
   Schriftgröße — und die Seite liefe über ihre Länge auseinander: auf dem
   Impressum allein rund 90 px.

   Deshalb stehen die Werte hier fest. Am Original gemessen
   (getBoundingClientRect, Schriften geladen, 30.08.2026). Die vollständige
   Tabelle und der Messweg stehen in docs/messwerte-original.md.

       Absatz  17 px → 22 px        Überschrift h1 20 px → 27 px
       Absatz  18 px → 23 px        Überschrift h2 18 px → 24 px
       Absatz  20 px → 26 px        Überschrift h2 20 px → 27 px
                                    Überschrift h3 18 px → 24 px
   ----------------------------------------------------------------------- */

.text h1,
.text h2,
.text h3 {
  font-weight: 700;
  letter-spacing: 0.1em;                     /* Wix: letter-spacing .1em */
  color: var(--stahlblau);
  margin: 0;
}
.text h1 { font-size: 20px; line-height: 27px; }
.text h2 { font-size: 18px; line-height: 24px; }
.text h3 { font-size: 18px; line-height: 24px; }
/* Diese eine Zwischenüberschrift steht im Original als 20px. */
.text h2.gross { font-size: 20px; line-height: 27px; }

.text p {
  margin: 0;
  font-size: 18px;
  line-height: 23px;
  color: var(--stahlblau);
}
.text p.klein { font-size: 17px; line-height: 22px; }
.text p.gross { font-size: 20px; line-height: 26px; }

/* Bis zum 30.09.2026 galt hier: „Auf der Datenschutzseite gibt es keine
   Überschriften-Elemente, Wix hat dort alles als Absatz gesetzt." Das ist
   vorbei — die Erklärung ist seither ein neu geschriebener Text
   (Recht-und-Texte/39_ §2) mit echten <h2>. Die Klassen `fett` und
   `gesperrt` bleiben, das Impressum benutzt sie weiter. */
.text .fett     { font-weight: 700; }
.text .gesperrt { letter-spacing: 0.1em; }

/* Aufzählung — Wix: ul margin-inline .5em, li margin-inline 1.3em,
   Punkte (disc), Zeilenhöhe wie der Fließtext. */
.text ul {
  margin: 0 0 0 0.5em;
  padding: 0;
  list-style-type: disc;
}
.text li {
  margin-left: 1.3em;
  font-size: 18px;
  line-height: 23px;
}

/* Die Leerzeilen des Originals sind leere Absätze mit einem
   Null-Breite-Zeichen (Wix nennt das „wixGuard"). Sie bleiben Leerzeilen
   und behalten dieses Zeichen — nur so entsteht dieselbe Zeilenhöhe wie
   im Original. Damit ein Vorleseprogramm nicht zwanzig leere Absätze
   ansagt, tragen sie aria-hidden. */
.text > * { margin: 0; }

/* --- Abstände auf der neuen Datenschutzseite -----------------------------

   Die gespiegelten Seiten setzen ihre Abstände über eingefügte Leerabsätze
   (`p.leerzeile` mit einem Null-Breite-Zeichen) — so hat Wix das gemacht,
   und für den Wortlautvergleich musste das so bleiben.

   Die Datenschutzerklärung ist seit dem 30.09.2026 kein Spiegel mehr,
   sondern ein eigener Text. Sie braucht diese Krücke nicht: Hier stehen die
   Abstände als margin, wie man es schriebe, wenn niemand etwas nachzubauen
   hätte. Ein Vorleseprogramm liest damit auch keine zwanzig leeren Absätze
   mehr vor.

   Die Regel ist bewusst auf `.text--datenschutz` begrenzt. Auf den anderen
   Seiten würde sie die gemessenen Abstände zerstören.

   ⚠️ Die Regeln nennen ihre Elemente einzeln, und das ist kein Zufall. Ein
   `.text--datenschutz > * + *` wäre kürzer, hätte aber KEINE Element-
   komponente in der Spezifität (0,1,0) und verlöre gegen das weiter oben
   stehende `.text p` (0,1,1). Gemessen: Die Überschriften bekamen ihre
   46 px, die Absätze blieben bei 0 — der Text lief zusammen, und im
   Quelltext sah die Regel richtig aus.
   ----------------------------------------------------------------------- */

.text--datenschutz > p      { margin-top: 23px; }
.text--datenschutz > h2     { margin-top: 46px; }
.text--datenschutz > h2 + p { margin-top: 12px; }
.text--datenschutz > h1     { margin-bottom: 23px; }
.text--datenschutz > ul     { margin-top: 12px; }
.text--datenschutz > ul + p { margin-top: 23px; }

/* Im Original ist nur ein einziger Verweis unterstrichen — der auf
   sandradreesen.de. Alle übrigen (mailto, Fuß) sind es nicht. */
.text a { color: var(--stahlblau); text-decoration: none; }

/* --- Umbruchpunkte -------------------------------------------------------
   Greifen erst unterhalb von 980 px. Oberhalb ist die Darstellung
   unverändert die des Originals (E1). */

@media (max-width: 979px) {
  .kopf__innen {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .menue {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .menue ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .menue a { font-size: 11px; padding: 0 8px; height: 32px; line-height: 32px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .text p, .text h2, .text h3 { font-size: 16px; }
  .text h1 { font-size: 18px; }
  .kopf__logo img { width: 94px; height: 66px; }
}

/* --- Zwei Auszeichnungen, die im Original vom Muster abweichen -----------
   „Layout, Konzeption & Umsetzung“ steht als h2, ist dort aber weder fett
   noch gesperrt. Und nur der Verweis auf sandradreesen.de ist unterstrichen.
   Beides ist im Spiegel so ausgezeichnet und wird nicht begradigt. */

.text h2.ohne-auszeichnung { font-weight: 400; letter-spacing: normal; }
.text a.unterstrichen { text-decoration: underline; }

/* Die Leerzeile trägt die Schriftgröße ihres Blocks — im Impressum ist die
   erste 20 px (sie steht zwischen zwei 20-px-Überschriften), alle weiteren
   18 px. Sonst stimmen die Abstände nicht. */
.text .leerzeile          { font-size: 18px; line-height: 23px; }
.text h2.leerzeile        { font-size: 20px; line-height: 27px; }  /* Impressum */
.text p.leerzeile--gross  { font-size: 20px; line-height: 26px; }  /* Datenschutz */

/* --- Bühne: absolut gesetzte Abschnitte ---------------------------------

   Wix legt die Unterseiten nicht als Fließtext an, sondern setzt jedes
   Stück an eine feste Stelle der 980-Spalte — Bilder überlappen einander,
   ein Logo liegt auf dem Foto, der Text steht neben dem Wabenknopf. Das
   lässt sich nur nachbauen, indem man dieselben Koordinaten übernimmt.

   Ab 980 px: jedes Kind sitzt absolut auf --x/--y, gemessen am Original.
   Darunter: normaler Fluss, untereinander, mittig. Das ist die Stelle, an
   der „mitwachsend" (E1) und „pixelgleich ab 980" zusammenkommen.        */

.buehne { position: relative; }

@media (min-width: 980px) {
  .buehne > * {
    position: absolute;
    left:   var(--x, 0px);
    top:    var(--y, 0px);
    width:  var(--kasten-breite, auto);
    height: var(--kasten-hoehe, auto);
    margin: 0;
  }
  /* ⚠️ Diese Regel MUSS nach `.buehne > *` stehen. Bühnen können ineinander
     liegen — die Farbkästen der Startseite sind selbst Bühnen für ihren Text.
     Käme sie vorher, gewönne `height: auto` aus `.buehne > *` (gleiche
     Spezifität, späteres Vorkommen), und jeder verschachtelte Kasten wäre
     0 px hoch: die Farbe verschwindet, der Text steht in der Luft. */
  .buehne { height: var(--buehne-hoehe); }
  .text { width: var(--kasten-breite, auto); }
}

@media (max-width: 979px) {
  /* Unterhalb von 980 px löst sich die Bühne auf: alles steht untereinander,
     mittig, volle Breite. Die Farbkästen behalten ihre Fläche, weil ihr Text
     in ihnen liegt und nicht daneben. */
  .bild { max-width: 100%; }
  .buehne {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    height: auto;
  }
  .buehne > * {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .buehne .buehne { gap: 16px; padding: 20px; }
  .text { width: 100%; --text-oben: 24px; --text-unten: 24px; }
  .text--roh { --text-oben: 0px; --text-unten: 0px; }
  .bild img { width: 100%; }
}

.streifen { overflow-x: clip; position: relative; }

/* --- Bilder -------------------------------------------------------------
   Wix liefert jedes Bild über eine Umrechnungsstrecke `/v1/fill/w_…,h_…,al_c`:
   Das heißt „auf dieses Rechteck füllen, mittig beschneiden". Die Master sind
   fast immer anders proportioniert als der Anzeigerahmen — das Kopffoto auf
   /lazer etwa ist 1920 × 1280 und wird als 1255 × 595 gezeigt. Ohne den
   Beschnitt ist das Bild anderthalbmal so hoch und schiebt sich über den Text.

   Deshalb trägt jedes Bild seinen Anzeigerahmen als --breite/--hoehe;
   `object-fit: cover` macht daraus denselben Beschnitt wie bei Wix.
   Unterhalb von 980 px schrumpft der Rahmen mit, das Verhältnis bleibt.

   --breite und --hoehe sind ZAHLEN ohne Einheit. `aspect-ratio` nimmt keine
   Längen; mit `1255px / 595px` wird die Regel stillschweigend verworfen und
   das Bild ist plötzlich anderthalbmal so hoch. Genau das ist hier einmal
   passiert und fällt nicht auf, weil ja ein Bild dasteht. */

/* Oberhalb von 980 px gilt die gemessene Breite unverändert — auch wenn
   sie größer als die Spalte ist (das Kopffoto ist 1255 px breit und ragt
   absichtlich heraus). Erst darunter schrumpft der Rahmen mit. */
.bild { width: calc(var(--breite) * 1px); }
.bild img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--breite) / var(--hoehe);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Textgrößen der Unterseiten -----------------------------------------
   Wix nutzt dort die Themenschrift font_7 (Zeilenhöhe 1.4 der eigenen
   Größe) statt font_8. Am Original gemessen: 17 px → 23,8 px, 20 px → 28 px. */

.text p.t17 { font-size: 17px; line-height: 1.4; }
.text p.t20 { font-size: 20px; line-height: 1.4; font-weight: 700; }

/* Zwischenüberschriften der Unterseiten: 20 px fett und gesperrt in einem
   Absatz, dessen Zeilenkasten von der Absatzschrift kommt. Am Original
   gemessen — 24 px, wenn der Absatz 17 oder 18 px trägt, 26 px bei 20 px. */
.text p.aufmacher {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.text p.aufmacher--26 { line-height: 26px; }

/* Textkasten ohne eigene Ränder — er sitzt auf einer Bühne und bekommt
   seine Lage über --x/--y. */
.text--roh { --text-oben: 0px; --text-unten: 0px; }

/* --- Wabenknopf „download!" (nur /lazer) --------------------------------
   Wix: Bild 198 × 199, darauf ein zentrierter Text 53 px unter der
   Oberkante, weiß, fett, 17 px, Sperrung 0.01em. */

.wabe { position: relative; width: 198px; }
.wabe img { width: 198px; height: 199px; }
.wabe__text {
  position: absolute;
  top: 53px;
  left: 0;
  width: 198px;
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 23px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}
.wabe__text a { color: #FFFFFF; text-decoration: underline; }


/* Ein Container mit eigener Fläche (Wix „Container_DefaultAreaSkin"). Auf
   /fortbildung liegt darunter der Inhaltskasten mit rgba(70,111,137,.22). */
.kasten { background: rgba(70, 111, 137, .22); }

/* ========================================================================
   Startseite
   ======================================================================== */

/* Auf den blauen Streifen steht der Text weiß. */
.text--weiss,
.text--weiss p,
.text--weiss h1,
.text--weiss h2,
.text--weiss h3,
.text--weiss li,
.text--weiss a { color: #FFFFFF; }

/* Die fünf Tageskästen des Ablauf-Streifens: 190 × 304, abwechselnd
   stahlblau und limette (Wix: 70,111,137 / 181,200,0). */
.tageskasten        { background: var(--stahlblau); }
.tageskasten--limette { background: #B5C800; }

/* Die beiden Kästen „LEISTUNG" und „VORAUSSETZUNGEN": 487 × 259, pink. */
.pinkkasten { background: var(--pink); }

/* Die Fläche hinter dem Evaluierungs-Abschnitt (Wix comp-jzll0oo7). */
.blaukasten { background: var(--stahlblau); }

/* „VORAUSSETZUNGEN FÜR DIE ERFOLGREICHE UMSETZUNG" steht im Original in
   Avenir LT 85 Heavy — eine Monotype-Schrift, die wir nicht ausliefern
   dürfen (Sichtung §6.2). Ersatz: Montserrat 700. Das sind die einzigen
   drei Textstellen der ganzen Seite, die nicht Montserrat waren; die
   vierte ist der Bestätigungstext des Formulars (Futura Book). */
.text p.avenir-ersatz {
  font-size: 22px;
  line-height: 27px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Team: Name und Tätigkeit unter dem runden Porträt. */
.text h1.name {
  font-size: 20px;
  line-height: 16px;                         /* Wix: line-height 16px */
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
}
/* Mittig gesetzter Textkasten: die fuenf Tagesspalten und der Satz
   ueber dem Briefsymbol auf /fortbildung. */
.text--mittig p,
.text--mittig h1,
.text--mittig h2,
.text--mittig li { text-align: center; }

/* Rundes Porträt (Wix WPhoto_CirclePhoto). */
/* Rundes Porträt (Wix WPhoto_CirclePhoto). */
.bild--rund img { border-radius: 50%; }

/* Ein voller Streifen in Stahlblau (Kopfbild, Einführung, 5 Gründe,
   Senatorin). */
.streifen--blau { background: var(--stahlblau); }

/* Nur für Vorleseprogramme sichtbar. Das Original hat für die Formularfelder
   überhaupt keine Beschriftungen — nur Platzhalter, die beim Tippen
   verschwinden. Diese Beschriftungen ändern nichts am Aussehen; sie tragen
   denselben Wortlaut nach, der ohnehin im Platzhalter steht (wie E2 bei den
   alt-Angaben). */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Das Kontaktformular ------------------------------------------------

   Wix hat die Felder einzeln in die Spalte gesetzt, mit ungleichen
   Abständen (48, 50, 51, 61 … px). Deshalb steht auch hier jedes Feld auf
   seiner gemessenen Stelle statt im Fluss. Maße und Farben aus dem
   Original: Feld 736 × 40, Rand 1 px #466F89, Ecken 8 px, Text 12 px
   Montserrat, Einzug links 12 px; Umschlag beim Tippen limette (#BADA55);
   Knopf 160 × 40 pink, Schrift 700 14 px weiß.                            */

.formular { position: relative; }

@media (min-width: 980px) {
  .formular > * {
    position: absolute;
    left: var(--x, 0px);
    top:  var(--y, 0px);
    margin: 0;
  }
}
@media (max-width: 979px) {
  .formular > * + * { margin-top: 16px; }
}

.feld {
  display: block;
  width: 736px;
  max-width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 3px 3px 3px 12px;
  border: 1px solid var(--stahlblau);
  border-radius: 8px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4em;
  color: var(--stahlblau);
  transition: border-color .5s ease, color .5s ease;
}
/* Der Platzhaltertext ist im Original limette, nicht stahlblau
   (Wix: --txt2 = 186,218,85). Der eingetippte Text ist stahlblau. */
.feld::placeholder { color: #BADA55; opacity: 1; }
.feld:hover, .feld:focus { border-color: #BADA55; outline: none; }
.feld:focus-visible { outline: 2px solid #BADA55; outline-offset: 1px; }
.feld:invalid:not(:placeholder-shown) { border-color: var(--pink); }

.feld--wunschwoche   { width: 730px; height: 42px; }
.feld--gruppengroesse{ width: 160px; }
.feld--nachricht     { width: 736px; height: 202px; padding: 3px 10px 3px 12px; resize: vertical; }

/* Kästchen — Wix: 18 × 18, Rand 1 px #466F89, angehakt pink,
   Beschriftung 16 px, Abstand zum Text 17 px, Abstand der beiden 17 px. */
.interessen { border: 0; margin: 0; padding: 0; }
.kaestchen {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  font-size: 16px;
  line-height: 1.4em;
  color: var(--stahlblau);
  cursor: pointer;
}
.interessen .kaestchen + .kaestchen { margin-top: 17px; }
.kaestchen input {
  appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--stahlblau);
  border-radius: 4px;
  background: #FFFFFF;
  cursor: pointer;
}
.kaestchen input:checked { background: var(--pink); border-color: var(--pink); }
.kaestchen input:checked::after {
  content: "";
  display: block;
  width: 5px; height: 10px;
  margin: 1px auto 0;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.kaestchen input:focus-visible { outline: 2px solid #BADA55; outline-offset: 2px; }

.einwilligungstext {
  width: 704px;
  max-width: 100%;
  font-size: 12px;
  line-height: 24px;
  color: var(--stahlblau);
}
.einwilligungstext a { color: var(--stahlblau); text-decoration: underline; }

.senden {
  width: 160px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--pink);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  cursor: pointer;
  transition: background-color .4s ease;
}
.senden:hover { background: var(--stahlblau); }
.senden:focus-visible { outline: 2px solid #BADA55; outline-offset: 2px; }

/* Der Honigtopf. Nicht display:none — Massenversand füllt auch versteckte
   Felder, aber manche Werkzeuge überspringen, was display:none trägt. */
.honigtopf {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* „Vielen Dank für das Einreichen!" — im Original Futura Book 17 px in
   Türkis, rechtsbündig. Ersatzschrift Montserrat (siehe .avenir-ersatz). */
.danke {
  margin: 0;
  width: 216px;
  font-size: 17px;
  line-height: 23px;
  text-align: right;
  color: var(--tuerkis);
}
@media (min-width: 980px) {
  .danke { position: absolute; left: var(--x); top: var(--y); }
}

/* Die Leerzeile im Kasten „VORAUSSETZUNGEN": sie trägt dort 22 px Text und
   ist deshalb 27 px hoch, nicht 23. */
.text p.leerzeile--avenir { font-size: 22px; line-height: 27px; }

/* Der Hinweistext ist 12 px auf 16 px Zeilenhöhe (Wix: font_7 mit
   line-height normal, Absatzschrift Futura Light). Seit dem 30.09.2026 ist
   es ein Satz statt dreier Zeilen Einwilligungstext. */
.einwilligungstext { line-height: 16px; }
.einwilligungstext a.unterstrichen { text-decoration: underline; }

/* Das Einwilligungskästchen ist am 30.09.2026 ersatzlos entfallen
   (Kopplungsverbot, Recht-und-Texte/39_ §1a). Seine Regeln stehen deshalb
   nicht mehr hier — `.kaestchen` ohne Zusatz bleibt, das benutzen die
   beiden Interessen-Kästchen weiter. */

/* Die drei Unterseiten haben bei Wix zusätzlich einen Seitenhintergrund:
   #F7F7F7 mit einer zweiten, kleineren Konfetti-Kachel (200 × 200). Sichtbar
   wird er nur dort, wo der Abschnitt die Seite nicht füllt — etwa beim
   Überziehen am Fensterrand. Er gehört trotzdem dazu. */
body.seite--kachel {
  background-color: #F7F7F7;
  background-image: url('../images/kachel-seite.png');
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* --- Abschnitts-Hintergrundbild ----------------------------------------
   Nur ein einziges Bild der ganzen Seite ist so eingebunden: das Kopffoto
   der Startseite. Wix legt es als Hintergrund des Abschnitts an
   (`displayMode: fill`, `object-position: 50% 50%`), es füllt also die
   volle Fensterbreite und nicht nur die 980er-Spalte.

   Deshalb liegt hier auch keine auf 980 px zugeschnittene Fassung, sondern
   das Bild im Seitenverhältnis des Masters (1920 × 1280) — sonst fehlte
   auf einem breiten Fenster oben und unten etwas, was im Original zu sehen
   ist. */

.hintergrundbild {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hintergrundbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  max-width: none;
}
.hintergrundbild + .spalte { position: relative; z-index: 1; }

/* Größenhinweis am Flyer-Download auf /lazer. Steht nicht im Original —
   vom Hub beauftragt, damit niemand im Mobilfunk in eine 7-MB-Druckdatei
   läuft. Siehe docs/aenderungen.md §3. */
.groessenhinweis {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: var(--stahlblau);
}

/* --- „Technische Umsetzung" im Impressum --------------------------------

   Ein Zusatzblock am Ende des Impressums, abgesetzt vom Pflichtteil nach
   § 5 DDG. Die Trennlinie ist nicht Zierde: Sie macht sichtbar, dass hier
   die Pflichtangaben der SportPort GmbH aufhören und eine Angabe über den
   Dienstleister beginnt. Ohne sie läse sich der zweite Firmenname wie ein
   Teil der Pflichtangaben.

   Das Logo liegt lokal in /images/ und ist die POSITIVE Fassung — die
   negative (heller Schriftzug) verschwindet auf dieser hellen Fläche. */

.programmierung {
  margin-top: 46px;                          /* zwei Leerzeilen Abstand */
  padding-top: 23px;
  border-top: 1px solid rgba(70, 111, 137, .25);
}
.programmierung__logo {
  height: 56px;
  width: auto;
  display: block;
  margin: 23px 0;
}