/* ============================================================
   Bewerberportal ODL-Telemann - Stylesheet (öffentliche Seiten)
   Markenvorgabe siehe app/design/marke.md

   Aufbau dieser Datei:
     1. Stellschrauben (Farben, Abstände, Schatten)  <- hier stellt man ein
     2. Hintergrundbilder (bw-hintergrund + bw-motiv-*)
     3. Grundlagen (Grundgerüst, Typografie)
     4. Kopfbereich
     5. KI-Kennzeichen (EU-Symbol, rechtlich verpflichtend)
     6. Inhaltsbereich / schwebende Karten
     7. Startseite: Einleitung + Bereichskarten (Raster)
     8. Formularseiten der Bewerberstrecke
     9. Fortschrittsbalken
    10. Antwortoptionen (Radio/Checkbox)
    11. Eingabefelder
    12. Buttons
    13. Fehlerbox
    14. Fußbereich
    15. Kleine Bildschirme (Handy)
    16. Rücksicht auf Bewegungsempfindlichkeit + Druckansicht
    17. Schließen-Kreuz + Schließen-Knopf (Formularseiten)
    18. Upload-Baustein (freiwillige Unterlagen)
    19. Sprachumschalter (Kopfbereich)
   ============================================================ */


/* ============================================================
   SCHRIFTEN (lokal eingebunden)
   Roboto und Roboto Condensed liegen als variable Schriften lokal unter
   schriften/ (Herkunft/Lizenz siehe dortige HERKUNFT.txt). Dadurch entfällt
   der Aufruf von fonts.googleapis.com / fonts.gstatic.com - LG München I,
   20.01.2022, Az. 3 O 17493/20 wertete das direkte Nachladen von Google
   ohne vorherige Einwilligung als Verletzung des Persönlichkeitsrechts.

   font-weight: 100 900 statt eines einzelnen Werts, weil jede Datei eine
   VARIABLE Schrift ist und die komplette Gewichtsachse abdeckt - eine
   Regel je Zeichenumfang genügt für alle Schnitte (400, 500, 600, 700 ...).
   Die unicode-range-Werte sind wörtlich aus Googles CSS übernommen: die
   "-ext"-Datei (osteuropäische Zeichen) lädt der Browser nur, wenn sie
   auf der Seite wirklich gebraucht wird.
   ============================================================ */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-condensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-condensed-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Kyrillisch (ergänzt 02.10.2026, Sprachgerüst Paket M1) ----
   Für Ukrainisch und Russisch. Gleiche Schnitte wie oben (variabel,
   normal, 100-900), gleiche Quelle (Herkunft siehe HERKUNFT.txt). Die
   unicode-range-Werte sind wörtlich übernommen: Der Browser lädt diese
   Dateien nur, wenn auf der Seite wirklich kyrillische Zeichen stehen -
   für deutsche Seiten entsteht kein zusätzlicher Download.
   "cyrillic" enthält das ukrainische und russische Alphabet (inkl. Є І Ї Ґ),
   "cyrillic-ext" seltenere kyrillische Zeichen. */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-condensed-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/roboto-condensed-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* ============================================================
   1. STELLSCHRAUBEN
   ============================================================ */

:root {

  /* ---- Markenfarben ---- */
  --farbe-primaer: #0c57a6;
  --farbe-primaer-dunkel: #0c54a0;
  --farbe-sekundaer: #5695d7;
  --farbe-hellblau: #d4e7fc;
  --farbe-gelb: #fad846;
  --farbe-orange: #ff8800;
  --farbe-orange-dunkel: #ef7d00;
  /* Beschriftung auf dem orangen Button: sehr dunkles Braun.
     Weiß auf Orange erreicht die geforderten 4,5:1 NICHT - dieses
     Braun erreicht rund 6,8:1 und das Marken-Orange bleibt unverändert. */
  --farbe-auf-orange: #331a00;

  --farbe-text: #3d4a59;
  --farbe-text-leise: #5a6675;   /* Beschriftungen, Nebeninfos */
  --farbe-grau-1: #666666;
  --farbe-grau-2: #999999;
  --farbe-linie: #dde3ea;
  --farbe-flaeche-hell: #f8f9fa;
  --farbe-weiss: #ffffff;

  /* ---- Hintergrundbild ---- */

  /* >>> HIER EINSTELLEN <<<
     Deckkraft des hellen Schleiers über dem Foto.
     0 = Foto voll sichtbar, 1 = Foto komplett überdeckt.
     0.72 heißt: Foto scheint dezent durch, Karten bleiben gut lesbar.
     Erlaubter Bereich in der Praxis: 0.60 (Foto kräftiger)
     bis 0.85 (Foto nur noch angedeutet). */
  --bw-schleier: 0.72;

  /* Grundfarbe unter dem Bild - sorgt dafür, dass die Seite auch
     lesbar ist, solange das Foto noch nicht geladen wurde. */
  --bw-grundfarbe: #eef3f8;

  /* Wird von den Motivklassen weiter unten überschrieben. */
  --bw-motiv: none;

  /* ---- Abstands-System (überall verwendet) ---- */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 2.75rem;

  /* ---- Maße ---- */
  --bw-breite-inhalt: 760px;   /* Breite der schwebenden Karten */

  /* >>> HIER EINSTELLEN <<<
     Breite der Startseite (Klasse "inhalt-breit" am <main>).
     Nur damit haben zwei bzw. drei Bereichskarten nebeneinander Platz.
     Die Formularseiten der Bewerberstrecke bleiben absichtlich schmal -
     kurze Zeilen lesen sich beim Ausfüllen deutlich besser. */
  --bw-breite-inhalt-weit: 1180px;

  /* >>> HIER EINSTELLEN <<<
     Breite des KI-Kennzeichens - einheitlich auf JEDER Fenstergröße
     (Rückmeldung Auftraggeber: immer unten rechts, darf kleiner sein).
     Der Verhaltenskodex der EU-Kommission zur Kennzeichnung KI-generierter
     Inhalte schreibt keine Mindestgröße vor, nur Lesbarkeit/Erkennbarkeit
     ("may appear in different sizes ... as long as ... readable and
     recognisable"). Bei 80px ist das Zeichen rund 25px hoch, der
     Schriftzug "AI GENERATED" bleibt noch lesbar - nicht weiter
     verkleinern. */
  --ki-breite: 80px;

  --bw-radius: 16px;
  --bw-radius-klein: 10px;

  /* ---- Schatten: mehrstufig, damit die Karte echte Höhe bekommt ---- */
  --bw-schatten-karte:
    0 1px 2px rgba(14, 40, 70, 0.06),
    0 4px 10px rgba(14, 40, 70, 0.07),
    0 14px 30px rgba(14, 40, 70, 0.10),
    0 32px 60px rgba(14, 40, 70, 0.09);
  --bw-schatten-karte-hoch:
    0 2px 4px rgba(14, 40, 70, 0.07),
    0 8px 18px rgba(14, 40, 70, 0.09),
    0 22px 44px rgba(14, 40, 70, 0.12),
    0 44px 80px rgba(14, 40, 70, 0.11);
  /* feine helle Kante ringsum - dadurch wirkt die Karte "abgehoben" */
  --bw-kante-hell: 0 0 0 1px rgba(255, 255, 255, 0.75);

  --bw-uebergang: 180ms ease;
}


/* ============================================================
   2. HINTERGRUNDBILDER
   Das Markup setzt auf <body> immer die Klasse "bw-hintergrund"
   und zusätzlich genau eine Motivklasse (bw-motiv-...).
   Die Motivklasse bestimmt nur das Bild, alles Weitere kommt
   aus .bw-hintergrund.
   ============================================================ */

/* Das Bild liegt in einer festen Ebene HINTER dem Inhalt.
   Bewusst kein "background-attachment: fixed" - das ist auf
   iPhones/iPads fehlerhaft. Diese Lösung funktioniert überall
   und füllt das Fenster immer vollständig, egal wie kurz die
   Seite ist. */
.bw-hintergrund {
  background-color: transparent;
}

.bw-hintergrund::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bw-grundfarbe);
  /* Oberste Lage: der helle Schleier (oben etwas dichter als unten).
     Darunter: das Foto. */
  background-image:
    linear-gradient(
      180deg,
      rgba(250, 252, 255, calc(var(--bw-schleier) + 0.07)) 0%,
      rgba(252, 253, 255, var(--bw-schleier)) 45%,
      rgba(255, 255, 255, calc(var(--bw-schleier) - 0.04)) 100%
    ),
    var(--bw-motiv);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  pointer-events: none;
}

/* --- die sechs Motive --- */

.bw-motiv-start                { --bw-motiv: url("hintergrund/start.webp"); }
.bw-motiv-gebaeudereinigung    { --bw-motiv: url("hintergrund/gebaeudereinigung.webp"); }
.bw-motiv-gruenflaechenpflege  { --bw-motiv: url("hintergrund/gruenflaechenpflege.webp"); }
.bw-motiv-winterdienst         { --bw-motiv: url("hintergrund/winterdienst.webp"); }
.bw-motiv-fahrer-kurier        { --bw-motiv: url("hintergrund/fahrer-kurier.webp"); }
.bw-motiv-aushilfe-minijob     { --bw-motiv: url("hintergrund/aushilfe-minijob.webp"); }


/* ============================================================
   3. GRUNDLAGEN
   ============================================================ */

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

html {
  /* liegt ganz unten - falls das Foto (noch) fehlt, ist die
     Seite trotzdem hell und lesbar */
  background-color: var(--bw-grundfarbe);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche-hell);
  line-height: 1.6;
  overflow-x: hidden;   /* niemals waagerecht scrollen */
}

h1, h2, h3 {
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--farbe-primaer);
  margin-top: 0;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

p {
  margin-top: 0;
}

a {
  color: var(--farbe-primaer);
}

/* Tastatur-Bedienung: überall ein klar sichtbarer Fokusrahmen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ============================================================
   4. KOPFBEREICH
   Kein harter weißer Balken mehr, sondern ein weicher
   Weißverlauf, durch den das Foto ganz leicht durchschimmert.
   Das Logo bleibt auf hellem Grund klar erkennbar.
   ============================================================ */

.kopfbereich {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.82) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  border-bottom: none;
  /* etwas mehr Luft vor der Trennlinie - passend zum größeren Kopfbereich */
  padding-bottom: var(--raum-4);
}

/* Sanfte blaue Trennlinie statt des früheren 3px-Balkens */
.kopfbereich::after {
  content: "";
  display: block;
  height: 2px;
  max-width: var(--bw-breite-inhalt);
  margin: 0 auto;
  background-image: linear-gradient(
    90deg,
    rgba(12, 87, 166, 0) 0%,
    rgba(12, 87, 166, 0.35) 20%,
    rgba(12, 87, 166, 0.35) 80%,
    rgba(12, 87, 166, 0) 100%
  );
}

.kopfbereich-inhalt {
  max-width: var(--bw-breite-inhalt);
  margin: 0 auto;
  /* etwas großzügiger als zuvor - das größere Logo braucht mehr Luft */
  padding: var(--raum-5) var(--raum-5);
  display: flex;
  align-items: center;
  gap: var(--raum-3);
}

/* Das Logo ist seit 04.09.2026 ein Link auf die Hauptwebsite.
   "display: flex" sorgt dafür, dass der Link exakt die Höhe des Bildes annimmt
   und darunter keine Zeilen-Grundlinie Platz frisst - der Kopfbereich sieht
   damit aus wie vorher. Den Fokusrahmen für die Tastaturbedienung liefert
   bereits die allgemeine Regel "a:focus-visible" weiter oben. */
.logo-link {
  display: flex;
  text-decoration: none;
}

.logo {
  /* rund 72px auf großen Bildschirmen - gestaffelt kleiner in
     Abschnitt 15 (Kleine Bildschirme), an den dort bereits
     vorhandenen Umbruchpunkten 700px und 380px */
  height: 72px;
  width: auto;
  display: block;
}

/* ---- "KARRIERE" - Rubrikzeile rechts im Kopfbereich ----
   Stand bis 04.09.2026 direkt neben dem Logo und geriet dadurch mit dessen
   eigener Wortmarke ("OBJEKTDIENSTLEISTUNGEN Telemann GmbH") in Konflikt:
   zwei Textblöcke auf Tuchfühlung, beide blau. Jetzt sitzt das Wort am
   rechten Rand und bildet das Gegengewicht zum Logo - die Fläche dazwischen
   trennt sauber, statt dass Abstand mühsam erzwungen werden muss.

   Drei Größen greifen ineinander:
   - "margin-left: auto" schiebt das Wort nach rechts.
   - Die Laufweite (letter-spacing) ist von 0.06em auf 0.14em gewachsen.
     Versalien brauchen mehr Luft als Kleinbuchstaben; gesperrt wirkt das
     Wort ruhig und wertig statt gedrängt.
   - Das Schriftgewicht ist im Gegenzug von 600 auf 500 zurückgenommen.
     Frei stehend und gesperrt trägt das Wort genug Präsenz; bliebe es fett,
     würde es dem Logo die Aufmerksamkeit streitig machen. Größe und Luft
     geben ihm Gewicht, nicht die Strichstärke. */
.kopfbereich-titel {
  margin-left: auto;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.14em;
  /* Die Laufweite hängt auch dem LETZTEN Buchstaben noch Luft an. Am rechten
     Rand sähe das Wort dadurch leicht eingerückt aus, während das Logo links
     exakt an der Kante sitzt. Der negative Wert nimmt genau diesen einen
     Nachraum wieder heraus, sodass beide Seiten optisch bündig stehen. */
  margin-right: -0.14em;
  text-transform: uppercase;
  color: var(--farbe-primaer-dunkel);
  /* Darf nie umbrechen - ein "KARRIE-/RE" im Kopf wäre schlimmer als ein
     etwas engerer Abstand zum Logo. */
  white-space: nowrap;
}

/* Steht der Titel davor, gibt er die Richtung vor - der Knopf "Zur Startseite"
   braucht dann sein eigenes "margin-left: auto" nicht mehr. Sonst teilten sich
   beide den freien Raum und "KARRIERE" landete in der Mitte statt rechts.
   Ohne Titel (falls je ein Kopf ohne ihn gebaut wird) behält der Knopf sein
   bisheriges Verhalten. */
.kopfbereich-titel ~ .kopf-zurueck {
  margin-left: var(--raum-4);
}

/* ---- Knopf "Zur Startseite" ----
   Rechts im Kopfbereich. Seit 04.09.2026 schiebt "KARRIERE" die Gruppe nach
   rechts (siehe dort); der Knopf schließt sich mit festem Abstand daran an.
   Das "margin-left: auto" hier greift nur noch, falls der Kopf einmal ohne
   Titel gebaut wird. Bewusst zurückhaltend gehalten -
   heller Grund mit Rahmen in Markenblau, damit der orange
   "Weiter"-Knopf im Formular optisch klar die Hauptaktion bleibt.
   Farbe entspricht --farbe-primaer auf Weiß: rund 7,2:1 Kontrast. */
.kopf-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  margin-left: auto;
  padding: 0 var(--raum-4);
  min-height: 44px;   /* Mindest-Klickfläche für Fingerbedienung */
  border: 2px solid var(--farbe-primaer);
  border-radius: var(--bw-radius-klein);
  background-color: var(--farbe-weiss);
  color: var(--farbe-primaer);
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color var(--bw-uebergang),
    color var(--bw-uebergang);
}

.kopf-zurueck:hover {
  background-color: var(--farbe-hellblau);
  color: var(--farbe-primaer-dunkel);
}

/* Der allgemeine Fokusstil (a:focus-visible, Abschnitt 3) greift hier
   bereits mit - kein eigener Fokusstil nötig. */


/* ============================================================
   5. KI-KENNZEICHEN (EU-Symbol)

   Pflicht nach Artikel 50 der EU-KI-Verordnung: die KI-erzeugten
   Hintergrundbilder müssen klar, unterscheidbar und in deutlich
   sichtbarer Größe gekennzeichnet sein - und zwar schon beim
   ersten Blick, ohne zu scrollen.

   Das Markup gibt das Zeichen genau EINMAL aus, direkt hinter
   dem Kopfbereich als direktes Kind von <body>:

     <div class="ki-kennzeichen">
       <img class="ki-kennzeichen-bild" src="...ai-generated-deckend-dunkel.svg" ...>
     </div>

   Platzierung (Rückmeldung Auftraggeber, 04.09.2026): auf JEDER
   Fenstergröße fest ("position: fixed") unten rechts über dem
   Hintergrundfoto - nicht mehr, wie zuvor, statisch im Textfluss
   unter dem Kopfbereich auf kleineren Fenstern. Der Verhaltenskodex
   der EU-Kommission zur Kennzeichnung KI-generierter Inhalte
   (Abschnitt 2) schreibt keine bestimmte Ecke vor ("an appropriate
   place where no intervening overlay elements exist, e.g. in the
   top right corner") - bindend ist nur, dass nichts über dem
   Zeichen liegt.

   Breite: einheitlich 80px auf allen Fenstergrößen (vorher 160px,
   gestaffelt kleiner auf Handys, siehe Stellschraube --ki-breite
   oben). Der Verhaltenskodex schreibt ausdrücklich KEINE
   Mindestgröße vor, verlangt aber Lesbarkeit und Erkennbarkeit -
   bei 80px Breite ist das Zeichen rund 25px hoch, der Schriftzug
   "AI GENERATED" bleibt lesbar.

   Lesbarkeit: Wir verwenden die amtliche DECKENDE Fassung des
   Zeichens (schwarze Sprechblase, weiße Schrift). Sie löst das
   Kontrastproblem selbst - weiße Schrift auf Schwarz ergibt 21:1,
   und die schwarze Blase hebt sich auf unserem hellen Schleier
   von allein kräftig ab.

   Das Zeichen wird hier deshalb in KEINER Weise eingefärbt oder
   verändert: keine eigene Fläche darunter, keine Hintergrundfarbe,
   kein Farbfilter, kein Blendmodus. Das ist Absicht - ein
   amtliches Kennzeichen muss europaweit wiedererkennbar bleiben
   und darf nicht in Kundenfarben umgesetzt werden.
   Zulässig und rein optisch ist allein ein neutraler Schlagschatten,
   der die Blase vom Foto abhebt, ohne ihre Farbe anzutasten.

   Der Selektor "body >" ist Absicht: nur wenn das Zeichen wirklich
   direkt in <body> hängt, ist "position: fixed" auch am Fenster
   ausgerichtet (der Inhaltsbereich hat eine perspective und wäre
   sonst der Bezugsrahmen).
   ============================================================ */

body > .ki-kennzeichen {
  display: block;
  position: fixed;
  right: var(--raum-4);
  bottom: var(--raum-4);
  width: var(--ki-breite);
  aspect-ratio: 1789.84 / 566.93;   /* Seitenverhältnis des Symbols */
  margin: 0;
  /* über Karten, Kopf- und Fußbereich - darf nie verdeckt werden */
  z-index: 60;

  /* Einzige optische Zutat: neutraler Schatten entlang der Kontur
     der Sprechblase. Verändert die Farben des Zeichens nicht. */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

/* Das Bild füllt den Container exakt aus. */
.ki-kennzeichen-bild {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.ki-kennzeichen > .ki-kennzeichen-bild {
  width: 100%;
  height: 100%;
}

/* Falls das <img> die Container-Klasse selbst trägt, greift alles
   oben Stehende unverändert - nur die Skalierung im Bild ist zu
   ergänzen. */
img.ki-kennzeichen {
  object-fit: contain;
}

/* Reserve-Fläche am unteren Seitenrand: das fest positionierte
   KI-Kennzeichen (Höhe rund 25px + var(--raum-4) Abstand zum Rand)
   darf laut Auftraggeber keinen Inhalt verdecken. Zusammen mit dem
   ohnehin vorhandenen unteren Innenabstand der Fußzeile reicht dieser
   zusätzliche Abstand am <body> aus, damit auf kurzen Seiten (z. B.
   360px breites Handy) weder ein Fußzeilen-Link noch ein Knopf unter
   dem Zeichen verschwindet. Bewusst am <body> und nicht an der
   Fußzeile selbst, die unangetastet bleiben soll. */
body {
  padding-bottom: var(--raum-7);
}


/* ============================================================
   6. INHALTSBEREICH / SCHWEBENDE KARTEN
   Der Inhalt sitzt waagerecht mittig und - wenn der Bildschirm
   hoch genug ist - auch senkrecht angenehm mittig.
   ============================================================ */

.inhalt {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--bw-breite-inhalt);
  margin: 0 auto;
  padding: var(--raum-6) var(--raum-5) var(--raum-7);

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe" verhindert, dass bei sehr langem Inhalt oben etwas
     abgeschnitten wird (moderne Browser) */
  justify-content: safe center;
  gap: var(--raum-5);

  /* sehr zurückhaltende Perspektive - Grundlage für das leichte
     Anheben beim Überfahren mit der Maus */
  perspective: 1400px;
}

/* Breite Variante: wird zusätzlich zu "inhalt" gesetzt, aber nur
   auf der Startseite. Nur so haben zwei bzw. drei Bereichskarten
   nebeneinander Platz. Ohne diese Klasse bleibt alles wie bisher. */
.inhalt-breit {
  max-width: var(--bw-breite-inhalt-weit);
}

/* Kopf- und Fußbereich liegen außerhalb von <main> - damit auf der
   breiten Startseite Logo, Trennlinie und Fußzeile trotzdem mit dem
   Inhalt fluchten, wird die Breite über den <body> mitgezogen. */
body:has(.inhalt-breit) .kopfbereich-inhalt,
body:has(.inhalt-breit) .kopfbereich::after,
body:has(.inhalt-breit) .fuss-inhalt {
  max-width: var(--bw-breite-inhalt-weit);
}

/* Gemeinsame Optik aller schwebenden Karten */
.formularseite,
.bereichskarte,
.einleitung {
  background-color: var(--farbe-weiss);
  /* minimal heller Verlauf: oben reinweiß, unten ein Hauch kühler */
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: none;
  border-radius: var(--bw-radius);
  padding: var(--raum-6);
  box-shadow:
    var(--bw-kante-hell),
    var(--bw-schatten-karte),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform var(--bw-uebergang),
    box-shadow var(--bw-uebergang);
}

/* Das leichte "Schweben": nur ein winziges Anheben, kein Kippen,
   kein Drehen - bewusst seriös. Nur bei echter Maus. */
@media (hover: hover) and (pointer: fine) {
  .bereichskarte:hover,
  .formularseite:hover {
    transform: translateY(-2px);
    box-shadow:
      var(--bw-kante-hell),
      var(--bw-schatten-karte-hoch),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

/* ---- Typo-Hierarchie innerhalb der Karten ---- */

.inhalt h1 {
  font-size: 1.6rem;
  margin-bottom: var(--raum-3);
}

.inhalt h2 {
  font-size: 1.3rem;
  margin-bottom: var(--raum-2);
}

.inhalt h3 {
  font-size: 1.05rem;
  margin-bottom: var(--raum-2);
}

/* Aufzählungen in Textkarten (z. B. auf einer Informationsseite) */
.formularseite ul,
.formularseite ol,
.einleitung ul,
.einleitung ol {
  margin: 0 0 var(--raum-4);
  padding-left: 1.3rem;
}

.formularseite li + li,
.einleitung li + li {
  margin-top: var(--raum-1);
}


/* ============================================================
   7. STARTSEITE: EINLEITUNG + BEREICHSKARTEN (RASTER)

   Das Raster wächst mit dem Fenster mit und kommt ohne feste
   Kartenzahl aus - es dürfen also jederzeit Bereiche dazukommen:
     bis   899px : eine Spalte
     ab    900px : zwei Spalten
     ab   1500px : drei Spalten (nur im breiten Inhaltsbereich)
   ============================================================ */

.einleitung p {
  font-size: 1.05rem;
  margin-bottom: 0;
  color: var(--farbe-text);
  /* auf der breiten Startseite sonst zu lange Zeilen */
  max-width: 62ch;
}

.einleitung p + p {
  margin-top: var(--raum-3);
}

.bereichsliste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-4);
  margin: 0;
  /* gleiche Kartenhöhe je Zeile: Rasterfelder werden von Haus aus
     auf die Höhe der höchsten Karte gestreckt */
  align-items: stretch;
}

/* Hinweistext, wenn kein Bereich freigeschaltet ist: über die
   ganze Rasterbreite und auf einer eigenen hellen Fläche, damit
   er über dem Foto lesbar bleibt. */
.bereichsliste > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--raum-5) var(--raum-6);
  background-color: var(--farbe-weiss);
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-radius: var(--bw-radius);
  box-shadow:
    var(--bw-kante-hell),
    var(--bw-schatten-karte);
}

@media (min-width: 900px) {
  .bereichsliste {
    /* minmax(0, 1fr) statt 1fr: verhindert, dass ein langes Wort
       die Spalte auseinanderdrückt */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--raum-5);
  }
}

/* Drei Spalten nur dort, wo der Inhaltsbereich wirklich breit ist.
   Bei 1180px Inhaltsbreite bleiben je Karte rund 360px - das ist
   für Überschrift, zwei Zeilen Text und den Knopf ausreichend und
   wirkt nicht gedrängt. Im schmalen Inhaltsbereich (760px) bleibt
   es bewusst bei zwei Spalten. */
@media (min-width: 1500px) {
  .inhalt-breit .bereichsliste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bereichskarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-5) var(--raum-6);
  /* füllt das Rasterfeld vollständig aus - Grundlage dafür, dass
     die Knöpfe einer Zeile auf gleicher Höhe sitzen */
  height: 100%;
  overflow-wrap: break-word;
}

.bereichskarte h2 {
  font-size: 1.3rem;
  margin-bottom: 0;
}

.bereichskarte p {
  margin: 0;
}

/* Stellenangaben: kleine, ruhige Beschriftung - der Stellentitel
   darin ist kräftig ausgezeichnet */
.stellen-details {
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
  line-height: 1.5;
}

.stellen-details strong {
  font-weight: 500;
  color: var(--farbe-text);
}

/* "margin-top: auto" schiebt den Knopf ans untere Ende der Karte.
   Weil alle Karten einer Zeile gleich hoch sind, stehen dadurch
   auch alle Knöpfe auf gleicher Höhe - egal wie lang der
   Beschreibungstext darüber ist. */
.bereichskarte .knopf {
  margin-top: auto;
}


/* ============================================================
   8. FORMULARSEITEN DER BEWERBERSTRECKE
   ============================================================ */

.formularseite {
  padding: var(--raum-7) var(--raum-6);
  position: relative;   /* Bezugsrahmen für ".seiten-schliessen", siehe Abschnitt 17 */
}

.formularseite h1 {
  font-size: 1.5rem;
  margin-bottom: var(--raum-4);
}

.formularseite p {
  margin-bottom: var(--raum-4);
}

.formularseite form {
  margin: 0;
}

/* kleine, ruhige Beschriftung über der Frage */
.bereich-hinweis {
  color: var(--farbe-text-leise);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 var(--raum-1);
}

/* Schrittzähler: kräftig, in Markenblau */
.schritt-zaehler {
  color: var(--farbe-primaer);
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0 0 var(--raum-3);
}

.formularseite-danke {
  text-align: center;
}

.formularseite-danke h1 {
  margin-bottom: var(--raum-4);
}

.formularseite-danke .knopf {
  margin-top: var(--raum-2);
}


/* ============================================================
   9. FORTSCHRITTSBALKEN
   ============================================================ */

.fortschritt {
  background-color: var(--farbe-hellblau);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin-bottom: var(--raum-5);
  box-shadow: inset 0 1px 2px rgba(14, 40, 70, 0.12);
}

.fortschritt-balken {
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(
    90deg,
    var(--farbe-orange) 0%,
    #ffa233 100%
  );
  box-shadow: 0 0 6px rgba(255, 136, 0, 0.45);
  transition: width 400ms ease;
}


/* ============================================================
   10. ANTWORTOPTIONEN (Radio / Checkbox)
   Große, gut treffbare Auswahlflächen mit deutlichem
   Ausgewählt-Zustand.
   ============================================================ */

.optionen {
  display: grid;
  gap: var(--raum-3);
  margin: var(--raum-4) 0 var(--raum-5);
}

/* Beide Klassennamen sind belegt, damit die Gestaltung unabhängig
   davon greift, welcher im Markup verwendet wird. */
.options-label,
.option-feld {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-4);
  min-height: 52px;
  background-color: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--bw-radius-klein);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.4;
  transition:
    border-color var(--bw-uebergang),
    background-color var(--bw-uebergang),
    box-shadow var(--bw-uebergang);
}

.options-label:hover,
.option-feld:hover {
  border-color: var(--farbe-sekundaer);
  background-color: #f6faff;
}

/* ausgewählt: blauer Rand + hellblaue Fläche */
.options-label:has(input:checked),
.option-feld:has(input:checked) {
  border-color: var(--farbe-primaer);
  background-color: var(--farbe-hellblau);
  box-shadow: 0 0 0 1px var(--farbe-primaer) inset;
}

/* Tastatur-Fokus wandert auf die ganze Auswahlfläche */
.options-label:focus-within,
.option-feld:focus-within {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
}

.options-label input[type="radio"],
.options-label input[type="checkbox"],
.option-feld input[type="radio"],
.option-feld input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
}

/* Einwilligungs-Zeile: mehrzeiliger Text, Häkchen oben ausgerichtet */
.einwilligung {
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: var(--raum-5);
}

.einwilligung input[type="checkbox"] {
  margin-top: 2px;
}


/* ============================================================
   11. EINGABEFELDER
   ============================================================ */

/* Beschriftung: klein und ruhig - der eingegebene Wert ist kräftig */
.feld-label,
.eingabe-feld {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--farbe-text-leise);
  margin: var(--raum-5) 0 var(--raum-1);
}

.feld-label:first-of-type,
.eingabe-feld:first-of-type {
  margin-top: var(--raum-4);
}

.eingabe {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid var(--farbe-linie);
  border-radius: var(--bw-radius-klein);
  background-color: var(--farbe-weiss);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--farbe-text);
  line-height: 1.5;
  /* setzt eine geerbte Beschriftungs-Formatierung sicher zurück */
  text-transform: none;
  letter-spacing: normal;
  margin-top: var(--raum-2);
  transition:
    border-color var(--bw-uebergang),
    box-shadow var(--bw-uebergang);
}

.eingabe::placeholder {
  color: var(--farbe-grau-2);
  font-weight: 400;
}

.eingabe:hover {
  border-color: var(--farbe-sekundaer);
}

/* deutlicher Fokusring in Markenblau */
.eingabe:focus,
.eingabe:focus-visible {
  outline: none;
  border-color: var(--farbe-primaer);
  box-shadow: 0 0 0 4px rgba(12, 87, 166, 0.22);
}

textarea.eingabe {
  min-height: 7rem;
  resize: vertical;
}

/* Datei-Auswahl etwas kompakter, damit der Systemknopf hineinpasst */
.eingabe[type="file"] {
  padding: 0.6rem 0.7rem;
  font-weight: 400;
  cursor: pointer;
}

/* Honeypot-Feld: für Menschen unsichtbar, für Formular-Bots vorhanden */
.hp-feld {
  position: absolute;
  left: -9999px;
  top: -9999px;
}


/* ============================================================
   12. BUTTONS
   ============================================================ */

.knopfreihe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--raum-4);
  margin-top: var(--raum-6);
  flex-wrap: wrap;
}

.knopf {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: var(--bw-radius-klein);
  text-decoration: none;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  min-width: 150px;
  min-height: 50px;
  transition:
    background-color var(--bw-uebergang),
    box-shadow var(--bw-uebergang),
    transform var(--bw-uebergang);
}

/* Hauptaktion: Marken-Orange bleibt erhalten.
   Die Beschriftung ist dunkelbraun statt weiß - nur so wird der
   geforderte Textkontrast von 4,5:1 erreicht (hier rund 6,8:1). */
.knopf-primaer {
  background-color: var(--farbe-orange);
  color: var(--farbe-auf-orange);
  font-weight: 500;
  box-shadow:
    0 1px 2px rgba(14, 40, 70, 0.10),
    0 4px 12px rgba(255, 136, 0, 0.30);
}

.knopf-primaer:hover {
  background-color: var(--farbe-orange-dunkel);
  color: var(--farbe-auf-orange);
  box-shadow:
    0 2px 4px rgba(14, 40, 70, 0.12),
    0 8px 18px rgba(255, 136, 0, 0.38);
}

.knopf-primaer:active {
  box-shadow:
    0 1px 2px rgba(14, 40, 70, 0.14),
    0 2px 6px rgba(255, 136, 0, 0.30);
}

.knopf-sekundaer {
  background-color: var(--farbe-weiss);
  color: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  box-shadow: 0 1px 2px rgba(14, 40, 70, 0.08);
}

.knopf-sekundaer:hover {
  background-color: var(--farbe-hellblau);
  color: var(--farbe-primaer-dunkel);
}

/* minimales Anheben, wieder nur bei echter Maus */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    transform: translateY(-2px);
  }
  .knopf:active {
    transform: translateY(0);
  }
}


/* ============================================================
   13. FEHLERBOX
   ============================================================ */

.fehlerbox {
  background-color: #fdeceb;
  border: 1px solid #e0a096;
  border-left: 5px solid #b03a2b;
  color: #8a2f24;
  border-radius: var(--bw-radius-klein);
  padding: var(--raum-4) var(--raum-5);
  margin-bottom: var(--raum-5);
  font-size: 0.95rem;
}

.fehlerbox ul {
  margin: 0;
  padding-left: 1.2rem;
}

.fehlerbox li + li {
  margin-top: var(--raum-1);
}


/* ============================================================
   14. FUSSBEREICH
   Gepflegte Fußzeile mit Firmenzeile, Rechtslinks und Copyright-Zeile.

   Reihenfolge im Markup (Stand 04.09.2026):
     1. fuss-links     - Impressum / Datenschutz / KI-Transparenz
     2. fuss-copyright - "© JJJJ Objektdienstleistungen Telemann GmbH • Alle Rechte vorbehalten"

   Der frühere Absatz "fuss-ki" (Satz über die KI-erzeugten Bilder)
   ist ersatzlos entfallen - der Hinweis steckt jetzt im amtlichen
   EU-Kennzeichen unten rechts und auf der Seite "KI-Transparenz".
   Seine Regeln wurden hier entfernt, damit keine Karteileichen
   zurückbleiben.

   Sie liegt über dem Hintergrundfoto. Damit der Text sicher
   lesbar bleibt, wird der Weißverlauf oben schnell dicht und
   der eigentliche Inhalt beginnt erst unterhalb der noch
   durchscheinenden Zone (großzügiges padding-top).
   ============================================================ */

.fussbereich {
  margin: 0;
  padding: var(--raum-7) var(--raum-5) var(--raum-6);
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
  text-align: center;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.60) 8%,
    rgba(255, 255, 255, 0.92) 20%,
    rgba(255, 255, 255, 0.97) 45%,
    rgba(255, 255, 255, 0.99) 100%
  );
}

/* bestehende Grundregel - gilt weiterhin für einfache Absätze */
.fussbereich p {
  max-width: var(--bw-breite-inhalt);
  margin: 0 auto;
}

.fussbereich a {
  color: var(--farbe-primaer);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fussbereich a:hover {
  color: var(--farbe-primaer-dunkel);
}

/* ---- innerer Container: alles mittig untereinander ---- */
.fuss-inhalt {
  max-width: var(--bw-breite-inhalt);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
}

.fuss-inhalt p {
  max-width: 46rem;
  margin: 0;
}

/* ---- Reihe der Rechtslinks ----
   Steht jetzt UNTER der Firmenzeile - genau dort, wo bis zum
   04.09.2026 der KI-Satz stand. Damit die neue Reihenfolge nicht
   wie ein Versehen wirkt, ist die feine Trennlinie mit umgezogen:
   sie sitzt nun ÜBER den Rechtslinks. Die Firmenzeile liest sich
   dadurch als Kopfzeile der Fußzeile, darunter beginnt sichtbar
   abgesetzt der rechtliche Block. */
.fuss-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 var(--raum-5);
  width: 100%;
  padding-top: var(--raum-3);
  border-top: 1px solid rgba(12, 87, 166, 0.18);
}

/* Klickfläche mindestens 44px hoch - Vorgabe für Touchgeräte */
.fuss-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--raum-3);
  border-radius: var(--bw-radius-klein);
  color: var(--farbe-primaer);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fuss-link:hover {
  color: var(--farbe-primaer-dunkel);
  background-color: rgba(212, 231, 252, 0.65);
}

/* ---- Firmenzeile + Hinweis auf die Hauptwebsite ----
   Steht jetzt an erster Stelle und führt die Fußzeile an. Deshalb
   etwas kräftiger als zuvor: --farbe-text statt --farbe-grau-1
   (rund 9,0:1 auf dem weißen Verlauf) und Schriftschnitt 500. */
/* Der Absatz "fuss-haupt" ("Objektdienstleistungen Telemann GmbH · Zur
   Hauptwebsite") ist am 04.09.2026 entfallen. Der Firmenname steht jetzt in
   der Copyright-Zeile, der Weg zur Hauptwebsite führt über das verlinkte Logo
   im Kopfbereich. Seine Regeln wurden hier entfernt, damit keine
   Karteileichen zurückbleiben. */

/* ---- Copyright-Zeile: bewusst dezent, aber noch gut lesbar ----
   Kleiner Zusatzabstand nach oben, damit sie sich von den 44px
   hohen Klickflächen der Rechtslinks löst und nicht wie ein
   vierter Link wirkt.
   Hieß bis 04.09.2026 ".fuss-agentur" ("Umsetzung: ..."). Die Agenturzeile
   wurde entfernt, an ihrer Stelle steht jetzt die Copyright-Zeile des
   Auftraggebers. Aussehen und Abstände bleiben unverändert. */
/* Der Selektor ist absichtlich zweiteilig: ".fuss-inhalt p" weiter oben
   setzt "margin: 0" und wäre sonst spezifischer als ".fuss-copyright". */
.fuss-inhalt .fuss-copyright {
  margin-top: var(--raum-1);
}

.fuss-copyright {
  font-size: 0.8rem;
  color: var(--farbe-grau-1);
}


/* ============================================================
   15. KLEINE BILDSCHIRME (Handy)
   Bis hinunter zu 360px Breite brauchbar, ohne seitliches Scrollen.
   ============================================================ */

@media (max-width: 700px) {
  :root {
    /* Auf dem Handy ist vom Foto ohnehin wenig zu sehen -
       hier darf der Schleier dichter sein, das verbessert die
       Lesbarkeit von Kopf- und Fußbereich deutlich. */
    --bw-schleier: 0.84;
    --bw-radius: 14px;
  }

  .inhalt {
    padding: var(--raum-5) var(--raum-4) var(--raum-6);
    gap: var(--raum-4);
    justify-content: flex-start;
  }

  .formularseite,
  .bereichskarte,
  .einleitung {
    padding: var(--raum-5) var(--raum-4);
  }

  .kopfbereich-inhalt {
    padding: var(--raum-4) var(--raum-4);
  }

  /* mittlere Stufe: 56px - zwischen den 72px auf großen und den
     44px auf sehr schmalen Bildschirmen (siehe 380px-Regel unten) */
  .logo {
    height: 56px;
  }

  /* Laufweite schrumpft mit: Auf schmalen Bildschirmen konkurriert das Wort
     mit Logo und Knopf um die Breite - da ist die weite Sperrung Luxus. */
  .kopfbereich-titel {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    margin-right: -0.1em;
  }

  .kopfbereich-titel ~ .kopf-zurueck {
    margin-left: var(--raum-3);
  }

  .kopf-zurueck {
    padding: 0 var(--raum-3);
    font-size: 0.9rem;
  }

  .inhalt h1,
  .formularseite h1 {
    font-size: 1.35rem;
  }

  .fussbereich {
    padding: var(--raum-6) var(--raum-4) var(--raum-5);
  }
}

@media (max-width: 480px) {
  .knopfreihe {
    flex-direction: column-reverse;
    gap: var(--raum-3);
  }

  .knopf {
    width: 100%;
    min-width: 0;
  }

  .bereichskarte .knopf {
    width: 100%;
  }

  /* Rechtslinks sauber untereinander statt gequetscht nebeneinander */
  .fuss-links {
    flex-direction: column;
    gap: 0;
  }

  .fuss-link {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .formularseite,
  .bereichskarte,
  .einleitung {
    padding: var(--raum-4) var(--raum-3);
  }

  .inhalt {
    padding: var(--raum-4) var(--raum-3) var(--raum-5);
  }

  /* schmalste Stufe: 44px - hier zählt jeder Pixel Breite, damit
     Logo, Titel und der Knopf "Zur Startseite" nebeneinander passen */
  .kopfbereich-inhalt {
    padding: var(--raum-3) var(--raum-3);
    gap: var(--raum-2);
  }

  .logo {
    height: 44px;
  }

  /* Engste Stufe: Sperrung fast zurückgenommen, sonst bricht das Wort um. */
  .kopfbereich-titel {
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    margin-right: -0.06em;
  }

  .kopfbereich-titel ~ .kopf-zurueck {
    margin-left: var(--raum-2);
  }

  /* Kein Platz mehr für den Beschriftungstext - nur der Pfeil bleibt.
     Der Zweck des Knopfs steckt weiterhin im aria-label am Link
     (siehe layout.php), Screenreader-Nutzer verlieren also nichts. */
  .kopf-zurueck {
    padding: 0 var(--raum-2);
  }

  .kopf-zurueck-text {
    display: none;
  }

  .options-label,
  .option-feld {
    padding: var(--raum-3);
  }
}


/* ============================================================
   16. RÜCKSICHT AUF BEWEGUNGSEMPFINDLICHKEIT + DRUCKANSICHT
   ============================================================ */

/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat,
   bekommt gar keine Animation - auch kein Anheben.
   Das KI-Kennzeichen ist ohnehin völlig statisch: kein Ein- oder
   Ausblenden, keine Bewegung beim Scrollen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .bereichskarte:hover,
  .formularseite:hover,
  .knopf:hover {
    transform: none;
  }
}

/* Druck: ohne Foto, ohne Schatten, schlicht in Schwarzweiß.
   Das KI-Kennzeichen bleibt erhalten - die Kennzeichnungspflicht
   gilt auch für den Ausdruck. */
@media print {
  .bw-hintergrund::before {
    display: none;
  }

  html,
  body {
    background: #ffffff;
  }

  .kopfbereich,
  .fussbereich {
    background-image: none;
  }

  .kopf-zurueck {
    display: none;
  }

  .formularseite,
  .bereichskarte,
  .einleitung {
    background-image: none;
    background-color: #ffffff;
    box-shadow: none;
    border: 1px solid #cccccc;
    padding: 1rem;
  }

  .bereichsliste {
    grid-template-columns: 1fr;
  }

  .knopf {
    box-shadow: none;
  }

  body > .ki-kennzeichen {
    position: static;
    margin: var(--raum-4) auto;
    filter: none;
  }
}


/* ============================================================
   17. SCHLIESSEN-KREUZ + SCHLIESSEN-KNOPF (Formularseiten)
   Ergänzt am 03.09.2026 für "ki-transparenz.php": ein Kreuz oben
   rechts in der Karte und ein Schließen-Knopf am Ende, damit man
   nicht die ganze Seite durchscrollen muss. Das dazugehörige
   Skript (führt per Browser-Historie zurück) liegt direkt in
   ki-transparenz.php. Der Knopf unten nutzt die bereits
   bestehenden Klassen ".knopfreihe" / ".knopf" / ".knopf-sekundaer"
   aus Abschnitt 12 - dafür ist hier nichts Neues nötig.
   ============================================================ */

.seiten-schliessen {
  position: absolute;
  top: var(--raum-4);
  right: var(--raum-4);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2,75rem = 44px - Mindest-Klickfläche für Fingerbedienung */
  width: var(--raum-7);
  height: var(--raum-7);
  border-radius: 999px;
  background-color: var(--farbe-flaeche-hell);
  color: var(--farbe-primaer);   /* Kontrast zu --farbe-flaeche-hell: rund 6,8:1 */
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--bw-uebergang),
    color var(--bw-uebergang);
}

.seiten-schliessen:hover {
  background-color: var(--farbe-hellblau);
  color: var(--farbe-primaer-dunkel);
}

.seiten-schliessen:focus-visible {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
}

/* Rechts Platz schaffen, damit die Überschrift nicht unter das Kreuz
   läuft. Nur die Überschrift, die direkt auf das Kreuz folgt, ist
   betroffen - andere Formularseiten ohne Kreuz bleiben unverändert. */
.seiten-schliessen + h1 {
  padding-right: calc(var(--raum-4) + var(--raum-7) + var(--raum-2));
}

@media (prefers-reduced-motion: reduce) {
  .seiten-schliessen {
    transition: none;
  }
}

@media print {
  .seiten-schliessen {
    display: none;
  }
}


/* ============================================================
   18. UPLOAD-BAUSTEIN (freiwillige Unterlagen)
   Ergänzt am 04.09.2026 für den Kontaktschritt in "bewerbung.php".

   Wunsch des Auftraggebers: statt EINES nackten Dateifelds drei
   beschriftete Zeilen ("Lebenslauf", "Zeugnis", "Sonstiges"), im
   Anzeigefeld schon im hellen Grau der Name des erwarteten
   Dokuments - das nimmt den Bewerber an die Hand - und darunter
   ein Knopf für weitere Dateien.

   Aufbau einer Zeile im Markup (Reihenfolge ist verbindlich):
     upload-titel  ->  upload-knopf (label)  ->  upload-eingabe (input)
     ->  upload-anzeige  ->  upload-entfernen

   Gestalterische Leitlinie: RUHIG. Der Bereich ist freiwillig und
   darf deshalb nie wichtiger wirken als die Pflichtfelder darüber -
   keine kräftigen Farben, keine Schatten, keine Animation außer
   dem sanften Übergang bei Hover und Fokus. Der orange Haupt-Knopf
   ("Bewerbung absenden") bleibt die einzige laute Farbe der Seite.
   ============================================================ */

:root {
  /* Sehr leichte Tönung der Sammelfläche - gerade so viel, dass die
     weißen Anzeigefelder darin als Felder erkennbar werden. */
  --upload-flaeche: #f9fbfd;

  /* Farbe des Platzhalters im Anzeigefeld ("Lebenslauf", solange
     nichts gewählt ist). Bewusst heller als der echte Dateiname
     (--farbe-text, rund 9,0:1), auf dem weißen Feld aber immer noch
     rund 4,8:1 - die geforderten 4,5:1 sind damit sicher erfüllt. */
  --upload-platzhalter: #667485;
}

/* ---- Sammelfläche: "das gehört zusammen und ist freiwillig" ---- */
.upload-bereich {
  margin: var(--raum-6) 0 var(--raum-5);
  padding: var(--raum-4) var(--raum-5);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bw-radius-klein);
  background-color: var(--upload-flaeche);
}

/* Das Markup blendet den Entfernen-Knopf über das Attribut "hidden"
   aus. Weil die Knopf-Regeln weiter unten "display" setzen, muss
   "hidden" ausdrücklich gewinnen - sonst bliebe das Kreuz sichtbar. */
.upload-bereich [hidden],
.upload-entfernen[hidden] {
  display: none !important;
}

/* ---- eine Upload-Zeile ----
   Grundeinstellung ist die schmale Ansicht (Handy): Beschriftung,
   darunter der Knopf, darunter Anzeigefeld + Entfernen-Kreuz.
   "position: relative" ist der Bezugsrahmen für das optisch
   versteckte Dateifeld weiter unten. */
.upload-feld {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-3) 0;
}

/* Feine Trennlinien zwischen den Zeilen: dadurch lesen sich drei
   (oder sechs) Felder als gleichwertige Reihe und nicht als
   zufällig gestapelte Formularzeilen. */
.upload-feld + .upload-feld {
  border-top: 1px solid var(--farbe-linie);
}

.upload-titel {
  grid-column: 1 / -1;
  display: block;
  /* gleiche Anmutung wie ".feld-label" (Abschnitt 11) */
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--farbe-text-leise);
}

/* ---- Auslöser: ist ein <label>, kein <button> ----
   Zurückhaltender heller Knopf mit dünner Kontur - deutlich
   schwächer als der orange Haupt-Knopf und auch schwächer als der
   blau umrandete Knopf "Zur Startseite" im Kopfbereich (dort 2px). */
.upload-knopf {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;   /* Mindest-Klickfläche für Fingerbedienung */
  padding: 0 var(--raum-4);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bw-radius-klein);
  background-color: var(--farbe-weiss);
  color: var(--farbe-primaer);   /* auf Weiß rund 7,2:1 */
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;   /* ein <label> zeigt von sich aus keinen Zeiger */
  transition:
    background-color var(--bw-uebergang),
    border-color var(--bw-uebergang),
    color var(--bw-uebergang);
}

.upload-knopf:hover {
  border-color: var(--farbe-sekundaer);
  background-color: var(--farbe-hellblau);
  color: var(--farbe-primaer-dunkel);
}

/* ---- das eigentliche Dateifeld ----
   Es verschwindet optisch, bleibt aber im Tabulator-Lauf und für
   Screenreader vorhanden. Dieselbe Technik wie ".k-nur-hoerbar" in
   der Konsole (konsole/assets/style.css): ein 1px großer,
   weggeschnittener Kasten. Bewusst NICHT "display: none" und NICHT
   "visibility: hidden" - beides nähme dem Feld den Tastaturfokus,
   es wäre ohne Maus nicht mehr bedienbar. */
.upload-eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hat das versteckte Feld den Tastaturfokus, zeigt der SICHTBARE
   Knopf den Fokusrahmen - sonst wüsste niemand, wo er gerade steht.
   ":has()" am Elternteil ist nötig, weil das Feld im Markup NACH
   dem Knopf steht und CSS nicht rückwärts wählen kann. Dasselbe
   Muster nutzt bereits ".options-label:has(input:checked)". */
.upload-feld:has(.upload-eingabe:focus-visible) .upload-knopf {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
}

/* Zusätzlich - und als Rückfall für Browser ohne ":has()" - färbt
   sich über den Nachbarschafts-Selektor die Kontur des direkt
   folgenden Anzeigefelds mit. Die ganze Zeile ist damit als "aktiv"
   erkennbar. */
.upload-eingabe:focus-visible + .upload-anzeige {
  border-color: var(--farbe-primaer);
}

/* ---- Anzeigefeld: sieht aus wie ein Eingabefeld, ist keines ----
   Innenabstand, Kontur, Radius und Schriftgröße sind absichtlich
   Wert für Wert von ".eingabe" (Abschnitt 11) übernommen - dadurch
   ist es exakt gleich hoch, ganz ohne festen Zahlenwert. */
.upload-anzeige {
  grid-column: 1;
  display: block;
  min-width: 0;   /* sonst sprengt ein langer Dateiname die Spalte */
  padding: 0.85rem 1rem;
  border: 2px solid var(--farbe-linie);
  border-radius: var(--bw-radius-klein);
  background-color: var(--farbe-weiss);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--farbe-text);
  /* lange Dateinamen werden abgeschnitten statt umgebrochen -
     die Zeile behält so immer ihre Höhe */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: border-color var(--bw-uebergang);
}

/* Solange nichts gewählt ist: der Name des erwarteten Dokuments in
   hellem Grau und ohne Fettung - klar als Platzhalter lesbar und
   nicht mit einem echten Dateinamen zu verwechseln. Das Skript
   entfernt diese Klasse, sobald eine Datei gewählt wurde; dann
   greifen die kräftigeren Werte der Grundregel darüber. */
.upload-anzeige-leer {
  color: var(--upload-platzhalter);
  font-weight: 400;
}

/* ---- kleines Kreuz zum Zurücksetzen der Auswahl ---- */
.upload-entfernen {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2,25rem = 36px, damit über der geforderten Mindestfläche von 32px */
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: transparent;
  color: var(--farbe-text-leise);   /* rund 5,8:1 */
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--bw-uebergang),
    color var(--bw-uebergang);
}

.upload-entfernen:hover {
  background-color: var(--farbe-hellblau);
  color: var(--farbe-primaer-dunkel);
}

.upload-entfernen:focus-visible {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
}

/* ---- "+ Weitere Datei hinzufügen" ----
   Bewusst textnah und ohne eigene Fläche: ein Zusatzangebot für
   die Eifrigen, keine Hauptaktion. */
.upload-mehr {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* Mindest-Klickfläche für Fingerbedienung */
  margin-top: var(--raum-3);
  padding: 0 var(--raum-3);
  border: none;
  border-radius: var(--bw-radius-klein);
  background-color: transparent;
  color: var(--farbe-primaer);   /* auf der hellen Fläche rund 7,0:1 */
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--bw-uebergang),
    color var(--bw-uebergang);
}

.upload-mehr:hover {
  background-color: rgba(212, 231, 252, 0.65);
  color: var(--farbe-primaer-dunkel);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Hinweis zu Formaten und Dateigröße ---- */
.upload-hinweis {
  margin: var(--raum-3) 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  /* --farbe-text-leise auf der leicht getönten Fläche: rund 5,6:1 */
  color: var(--farbe-text-leise);
}

/* ---- breite Bildschirme: eine echte Zeile ----
   Erst ab 620px ist im schmalen Formularbereich genug Platz für
   Beschriftung, Knopf, Anzeigefeld und Kreuz nebeneinander. Die
   feste erste Spalte sorgt dafür, dass die Beschriftungen aller
   Zeilen bündig untereinander stehen und die Knöpfe eine Flucht
   bilden - drei (oder sechs) Felder lesen sich so als Reihe. */
@media (min-width: 620px) {
  .upload-feld {
    grid-template-columns: 9rem auto minmax(0, 1fr) auto;
    gap: var(--raum-3);
  }

  .upload-titel {
    grid-column: 1;
  }

  .upload-knopf {
    grid-column: 2;
  }

  .upload-anzeige {
    grid-column: 3;
  }

  .upload-entfernen {
    grid-column: 4;
  }
}

/* ---- sehr schmale Geräte (bis 380px) ----
   Etwas weniger Innenabstand, damit die Sammelfläche auf einem
   360px breiten Handy nicht unnötig Platz frisst. Waagerecht
   gescrollt wird nirgends: das Anzeigefeld schneidet lange
   Dateinamen ab, seine Spalte ist auf minmax(0, 1fr) gesetzt. */
@media (max-width: 380px) {
  .upload-bereich {
    padding: var(--raum-3);
  }

  .upload-knopf {
    /* auf voller Breite besser zu treffen als ein schmaler Knopf */
    justify-self: stretch;
  }
}

/* ---- Bewegungsempfindlichkeit ---- */
@media (prefers-reduced-motion: reduce) {
  .upload-knopf,
  .upload-anzeige,
  .upload-entfernen,
  .upload-mehr {
    transition: none;
  }
}

/* ---- Druckansicht ----
   Auf Papier lässt sich nichts hochladen: die Bedienelemente
   entfallen, die Beschriftungen und der gewählte Dateiname
   bleiben als Beleg stehen. */
@media print {
  .upload-knopf,
  .upload-entfernen,
  .upload-mehr {
    display: none;
  }

  .upload-bereich {
    background-color: transparent;
    border-color: #cccccc;
  }

  .upload-anzeige {
    border-color: #cccccc;
  }
}


/* ============================================================
   19. SPRACHUMSCHALTER (Kopfbereich)
   Ergänzt am 02.10.2026 (Sprachgerüst, Paket M1). Erscheint nur,
   wenn mindestens zwei Sprachen freigeschaltet sind (SPRACHEN_AKTIV
   in config.php) - sonst gibt layout.php gar nichts aus und der
   Kopfbereich sieht aus wie bisher.

   Geändert am 14.10.2026 (Entscheidung Auftraggeber): bewusst keine
   Flaggen - alle Sprachen gleich behandelt. Jede Sprache ist ein
   gleich gestalteter, abgerundeter Knopf (Pillenform) mit dem
   Sprachnamen in der jeweiligen Sprache, oben rechts über Logo und
   "KARRIERE". Die übrigen Knöpfe: weiß mit dezentem Rahmen, Schrift
   in Markenblau. Die gewählte Sprache ist farbig gefüllt
   (Markenblau, weiße Schrift).

   Auf schmalen Bildschirmen (bis 480px) stehen die Knöpfe in einem
   gleichmäßigen Raster mit zwei Spalten (bei vier Sprachen 2 x 2) -
   kein krummer Umbruch und kein seitliches Scrollen.
   ============================================================ */

.sprachwahl {
  max-width: var(--bw-breite-inhalt);
  margin: 0 auto;
  padding: var(--raum-2) var(--raum-5) 0;
}

/* Breite Startseite: Zeile fluchtet wie Logo und Trennlinie */
body:has(.inhalt-breit) .sprachwahl {
  max-width: var(--bw-breite-inhalt-weit);
}

/* Steht der Umschalter darüber, rückt der Logo-Bereich oben etwas
   näher heran - der Kopf wird dadurch kaum höher als bisher. */
.sprachwahl + .kopfbereich-inhalt {
  padding-top: var(--raum-2);
}

.sprachwahl-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--raum-2);
}

.sprachwahl-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Gleiche Mindestbreite für alle Knöpfe, damit kurze Namen
     ("English") nicht kleiner wirken als lange ("Українська") */
  min-width: 6.5em;
  /* 32px Klickhöhe: unaufdringlich, aber deutlich über der
     Mindestgröße von 24px für Zielflächen (WCAG 2.2, 2.5.8) */
  min-height: 32px;
  padding: 0 var(--raum-3);
  border: 1px solid var(--farbe-linie);
  /* Pillenform: Radius größer als die halbe Höhe */
  border-radius: 999px;
  background-color: var(--farbe-weiss);
  color: var(--farbe-primaer);
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--bw-uebergang),
    border-color var(--bw-uebergang),
    color var(--bw-uebergang);
}

.sprachwahl-link:hover {
  background-color: var(--farbe-hellblau);
  border-color: var(--farbe-sekundaer);
  color: var(--farbe-primaer-dunkel);
}

/* Gewählte Sprache: farbig gefüllt, weiße Schrift */
.sprachwahl-aktuell,
.sprachwahl-aktuell:hover {
  background-color: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  font-weight: 700;
}

/* Tastatur-Fokus: der allgemeine Fokusstil (a:focus-visible,
   Abschnitt 3 - blauer Ring mit Abstand) greift mit. Er setzt aber
   einen Radius von 4px; hier bleibt der Ring rund wie der Knopf. */
.sprachwahl-link:focus-visible {
  border-radius: 999px;
}

/* Seitenabstände wie beim Kopfbereich an denselben Umbruchpunkten
   (siehe Abschnitt 15), damit die Zeile mit dem Logo fluchtet */
@media (max-width: 700px) {
  .sprachwahl {
    padding: var(--raum-2) var(--raum-4) 0;
  }
}

/* Schmale Handys: zwei gleich breite Spalten statt einer Zeile -
   bei vier Sprachen ein ordentliches 2 x 2. Etwas höhere Knöpfe,
   damit sie sich mit dem Daumen gut treffen lassen. */
@media (max-width: 480px) {
  .sprachwahl-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sprachwahl-link {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 36px;
  }
}

@media (max-width: 380px) {
  .sprachwahl {
    padding: var(--raum-2) var(--raum-3) 0;
  }

  .sprachwahl-link {
    padding: 0 var(--raum-2);
  }
}

/* Im Ausdruck ohne Bedeutung */
@media print {
  .sprachwahl {
    display: none;
  }
}