/* ============================================================
   Die öffentlichen Seiten – Startseite, Konditionen, AGB,
   Impressum, Datenschutz, Registrierung.

   EIGENE DATEI und nicht in app.css, aus zwei Gründen:

   1. app.css ist das Designsystem der ANWENDUNG – Indigo, dichte
      Tabellen, 14px Grundschrift, alles auf Arbeit am Bildschirm
      ausgelegt. Die öffentliche Seite ist eine Visitenkarte: viel
      Luft, große Schrift, das Rot der Marke. Zwei Aufgaben, zwei
      Dateien.

   2. Sie wird NUR im Rahmen shared/oeffentlich.php geladen. Was hier
      steht, kann in der Disposition nichts umwerfen – und umgekehrt
      reißt eine Änderung am Designsystem hier nichts ein.

   Kein dunkles Farbschema: Die Seite liegt auf einem hellen Foto und
   hat genau einen Zustand. app.css bringt eine Umschaltung mit, die
   hier durch das feste color-scheme im Kopf nicht greift.
   ============================================================ */

.oe {
  --oe-rot: #ee1c4a;
  --oe-rot-dunkel: #cc1440;
  /* ZWEI ROTS, und der Unterschied ist Rechnung, nicht Geschmack.
     Mit bloßem Auge sind sie nicht zu unterscheiden.

     --oe-rot         das Marken-Rot. NUR für große Schrift: der Titel
                      auf der Startseite, die Seitenüberschriften, das
                      S-C-G-Zeichen. Große Schrift braucht 3:1, und
                      das schafft es auf Weiß mit 4,3:1 mühelos.

     --oe-rot-lesbar  überall dort, wo Rot in TEXTGRÖSSE steht oder
                      Weiß darauf: Knöpfe, der Firma/Privat-Schalter,
                      Verweise im Fließtext, Fehlermeldungen. Dort
                      gelten 4,5:1 (WCAG AA), und #ee1c4a verfehlt das
                      mit 4,29:1 knapp. #e01745 bringt 4,80:1.

     Wer eine neue rote Fläche baut, nimmt im Zweifel das lesbare. */
  --oe-rot-lesbar: #e01745;
  --oe-tinte: #3f3f46;
  --oe-tinte-hell: #71717a;
  --oe-grau: #52525b;
  --oe-flaeche: #f4f4f5;
  --oe-schrift: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;

  margin: 0;
  background: #fff;
  color: var(--oe-tinte);
  font: 16px/1.6 var(--oe-schrift);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.oe a { color: inherit; }

/* ACHTUNG BEI JEDER NEUEN FARBE HIER: Die Zeile darüber ist
   spezifischer als eine reine Klasse (ein Typ + eine Klasse schlägt
   eine Klasse allein). Wer einem <a> eine Farbe geben will, braucht
   deshalb zwei Klassen oder den Typ dazu – „.oe-knopf { color:#fff }"
   allein wird von .oe a überstimmt, und zwar lautlos: Der Knopf sieht
   aus wie ein Knopf, nur steht dunkelgraue Schrift auf dunkelgrauem
   Grund. Genau das war hier eine Fassung lang der Fall. */

/* --- Kopfzeile ---------------------------------------------
   Auf der Startseite liegt sie ÜBER dem Foto (position:absolute),
   sonst führt sie die Seite an. */

.oe-kopf { padding: 18px 20px; }

.oe-start .oe-kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
}

.oe-menue {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.oe-menue a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  font-weight: 500;
  color: var(--oe-grau);
}

.oe-menue a:hover,
.oe-menue a[aria-current="page"] { color: var(--oe-rot); }

/* --- Der Held: Foto, Logo, Titel, zwei Knöpfe ---------------

   min-height statt height: Auf einem schmalen Telefon wächst der
   Textblock über die Bildschirmhöhe hinaus, und bei fester Höhe
   läge er dann über den Knöpfen. */

.oe-held {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 92px 20px 60px;
  isolation: isolate;
}

.oe-held-bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Ein heller Schleier über der oberen Hälfte.

   ER IST DER GRUND, WARUM DER TEXT LESBAR IST. Das Foto ist oben
   Glasfassade und fast weiß, weiter unten stehen dunkle Wagen und
   Personen – der Textblock liegt genau über der Grenze. Ohne Schleier
   steht die Unterzeile teils grau auf hellgrau und teils grau auf
   dunkelblau, und beides ist schlecht.

   Deshalb bis 72 % und nicht bis 52 %: Der Verlauf muss unter den
   Knöpfen enden, nicht über ihnen. */
.oe-held-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.9) 34%,
    rgba(255, 255, 255, 0.72) 52%,
    rgba(255, 255, 255, 0.3) 64%,
    rgba(255, 255, 255, 0) 74%);
}

.oe-held-inhalt {
  text-align: center;
  max-width: 720px;
}

.oe-logo {
  display: block;
  margin: 0 auto 22px;
  height: 58px;
  width: auto;
}

.oe-anlass {
  margin: 0;
  font-size: clamp(19px, 3.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oe-grau);
}

/* Die Untergrenze ist 30px und nicht 42px: „SHUTTLESERVICE" ist ein
   Wort aus vierzehn Zeichen, das nicht umbrechen kann. Bei 42px steht
   es auf einem 375 px breiten Telefon über den rechten Rand hinaus –
   und weil es EIN Wort ist, hilft kein Umbruch, sondern nur eine
   kleinere Schrift. */
.oe-titel {
  margin: 2px 0 0;
  font-size: clamp(30px, 8.4vw, 78px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--oe-tinte);
}

.oe-titel span { color: var(--oe-rot); }

.oe-unter {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 15px;
  color: var(--oe-tinte);
}

.oe-unter b { font-weight: 700; }

.oe-knoepfe {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Sobald sie untereinanderstehen, sollen sie auch gleich breit sein –
   zwei verschieden lange Pillen übereinander sehen aus wie ein
   Versehen. */
@media (max-width: 520px) {
  .oe-knoepfe { flex-direction: column; align-items: stretch; }
}

/* Eigene Knopfklasse, NICHT .btn aus app.css: die ist 7px hoch und
   eckig, hier gehören Pillen hin.

   Mit .oe davor, siehe die Warnung ganz oben – ohne das gewinnt
   .oe a und die Schrift bleibt dunkel. */
.oe .oe-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--oe-grau);
  color: #fff;
  font: 600 13.5px/1 var(--oe-schrift);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.oe .oe-knopf:hover { background: var(--oe-tinte); transform: translateY(-1px); }
.oe .oe-knopf-rot { background: var(--oe-rot-lesbar); }
.oe .oe-knopf-rot:hover { background: var(--oe-rot-dunkel); }

/* --- Inhaltsseiten ----------------------------------------- */

.oe-seite { flex: 1 0 auto; padding: 10px 20px 70px; }

.oe-spalte {
  max-width: 760px;
  margin: 0 auto;
}

.oe-spalte h1 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--oe-tinte);
  margin: 26px 0 6px;
}

.oe-spalte h1 span { color: var(--oe-rot); }

.oe-spalte h2 {
  font-size: 19px;
  font-weight: 650;
  color: var(--oe-tinte);
  margin: 32px 0 8px;
}

.oe-spalte p { margin: 0 0 14px; color: var(--oe-grau); }
.oe-spalte ul { margin: 0 0 14px; padding-left: 20px; color: var(--oe-grau); }
.oe-spalte li { margin-bottom: 5px; }
.oe-spalte a { color: var(--oe-rot-lesbar); }

.oe-vorspann {
  font-size: 17px;
  color: var(--oe-tinte-hell);
  margin-bottom: 26px;
}

/* Der Platzhalter, solange die Texte fehlen. Deutlich als solcher
   erkennbar – ein leerer Absatz sähe aus wie ein Fehler. */
.oe-platzhalter {
  border: 1px dashed #d4d4d8;
  border-radius: 12px;
  background: var(--oe-flaeche);
  padding: 18px 20px;
  color: var(--oe-tinte-hell);
  font-size: 14.5px;
}

.oe-platzhalter p:last-child { margin-bottom: 0; }

/* --- Formulare (Registrierung) ------------------------------ */

.oe-karte {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -30px rgba(0, 0, 0, 0.4);
}

.oe-wahl {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--oe-flaeche);
  border-radius: 999px;
  margin-bottom: 24px;
}

.oe-wahl label {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  /* --oe-grau und nicht --oe-tinte-hell: Die NICHT gewählte Hälfte
     steht auf hellgrauem Grund und käme damit auf 4,40:1 – knapp
     unter den 4,5:1 für Textgröße. Sie ist außerdem kein Beiwerk,
     sondern die zweite Wahlmöglichkeit; wer sie schlecht liest,
     nimmt die falsche. */
  color: var(--oe-grau);
}

.oe-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.oe-wahl input:checked + span { color: #fff; }

.oe-wahl label:has(input:checked) { background: var(--oe-rot-lesbar); color: #fff; }
.oe-wahl label:has(input:focus-visible) { outline: 2px solid var(--oe-rot-lesbar); outline-offset: 2px; }

.oe-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.oe-feld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

.oe-feld label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oe-tinte-hell);
}

.oe-feld input,
.oe-feld select,
.oe-feld textarea {
  padding: 11px 13px;
  border: 1px solid #d4d4d8;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
}

.oe-feld input:focus,
.oe-feld select:focus,
.oe-feld textarea:focus {
  outline: 0;
  border-color: var(--oe-rot-lesbar);
  box-shadow: 0 0 0 3px rgba(224, 23, 69, 0.16);
}

.oe-feld .oe-hinweis { font-size: 12.5px; color: var(--oe-tinte-hell); }

.oe-feld.hat-fehler input,
.oe-feld.hat-fehler select { border-color: var(--oe-rot-lesbar); }

.oe-fehler { font-size: 12.5px; color: var(--oe-rot-lesbar); font-weight: 500; }

.oe-haken {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 18px;
  font-size: 14px;
  color: var(--oe-grau);
}

.oe-haken input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--oe-rot-lesbar); }

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

.oe-fuss {
  flex: none;
  background: var(--oe-flaeche);
  padding: 46px 20px 26px;
  text-align: center;
}

.oe-fuss-raster {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
}

.oe-fuss h2 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--oe-rot);
}

.oe-fuss p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--oe-grau); }
.oe-fuss a { text-decoration: none; }
.oe-fuss a:hover { color: var(--oe-rot); text-decoration: underline; }

.oe-fuss-zeile {
  margin: 40px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oe-tinte-hell);
}

/* Auf dem Telefon steht die Fußzeile ohnehin untereinander – dann
   trennen Linien die vier Blöcke besser als Abstand allein. */
@media (max-width: 640px) {
  .oe-fuss-raster > * + * { border-top: 1px solid #e4e4e7; padding-top: 26px; }
  .oe-held { padding-top: 76px; }
}