/* ===================================================================
   /kartei-bewerbung/, Kartei-Bewerbung September 2026, Fassung V2
   Uebernommen aus dem abgenommenen Prototyp
   prototypen/seite-v2.html (Niko-Abnahme 15.09., Hero-Variante A).
   Nur die seitenspezifischen Regeln. Tokens kommen aus
   assets/brand/tokens.css, Fonts aus assets/css/fonts.css und
   assets/brand/tokens.css. Alle Werte ueber var(--ik-...).
   Radius 0, keine Schatten, keine Border-Left-Streifen, keine Icons
   ausser dem Diamant im Datumsband.
   Gegenueber dem Prototyp entfallen: der proto-only-Umschalter und die
   Umschaltung ueber body[data-hero] und body[data-sub]. Live laeuft nur
   Variante A mit der kurzen Unterzeile, deshalb steht der Ton fest auf
   .hero. Dazu gekommen: .kennung:empty im Danke-Block (das Feld fuellt
   erst das JS) und der Sendezustand des Knopfs.
   Gegenueber der Fassung vom 15.09. 14:10 entfallen: .schritte,
   .schritt, .kreis, .kreis--akzent, table.zeit, .zeit-scroll und
   .einstieg. Sie haben nach der Kuerzung kein Markup mehr.
   Am 23.09. (Google-Formular) entfallen: #formular-teil, die Zustaende
   danke und doppelt sowie .kennung. Ihr Markup und das JS, das sie
   geschaltet hat, sind weg. vorher und nachher bleiben, die setzt der
   Server als Klasse am body.
   =================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--ik-body-bg);
  color: var(--ik-black);
  font-family: var(--ik-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 1.5px solid var(--ik-red); outline-offset: 2px; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--ik-content-max);
  /* Nur die Seitenraender zentrieren. Die Kurzschreibweise margin: 0 auto
     setzt auch margin-top und schlaegt als Klasse die Regel
     section + section, damit faellt der Abstand zwischen den Sektionen weg.
     Genau dieser Fehler steckte in der Fassung bis 14:10. */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ik-page-padding);
  padding-right: var(--ik-page-padding);
}
.wrap--text { max-width: 760px; }

/* --- Kopf ---------------------------------------------------------- */
.kopf { background: var(--ik-body-bg); }
.kopf__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ik-space-4);
  padding-top: var(--ik-space-4);
  padding-bottom: var(--ik-space-4);
}
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup img { height: 16px; width: auto; }
.lockup__wort {
  font-family: var(--ik-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ik-black);
  white-space: nowrap;
}
.kopf__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ik-black);
  text-decoration: none;
  border-bottom: 1px solid var(--ik-gray-border);
  padding-bottom: 2px;
  white-space: nowrap;
}
.kopf__link:hover { border-bottom-color: var(--ik-black); }

/* --- Hero: Satz auf dem Foto ---------------------------------------
   Das Foto ist 1920 x 815 (2,36 zu 1). Auf schmalen Breiten traegt das
   kein Satzbild, deshalb je Breite ein eigenes Seitenverhaeltnis plus
   object-fit: cover. Der Beschnitt ist gewollt.
   Das leere .hero__mass haelt das Verhaeltnis; wird der Satz einmal
   hoeher als das Verhaeltnis, waechst der Hero mit, statt zu ueberlaufen.
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  background: var(--ik-black);
  overflow: hidden;
}
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero__ton { position: absolute; inset: 0; background: var(--ton); }
.hero__mass { grid-area: 1 / 1; aspect-ratio: 4 / 5; }
.hero__satz {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: stretch;
  width: 100%;          /* ohne das zieht .wrap mit seinen auto-Raendern den
                           Satz im Raster auf fit-content und zentriert ihn */
  position: relative;
  padding-top: var(--ik-space-12);
  padding-bottom: var(--ik-space-8);
}

/* Ton der abgenommenen Variante A: Verlauf von links wie auf dem Cover.
   Alle drei Stufen stehen hier zusammen, damit der Wechsel auf die
   flaechige Fassung eine Zeile bleibt.
   Unter 900 px laeuft der Satz ueber die ganze Breite, deshalb kommt dort
   ein zweiter Verlauf vom Fuss dazu. Beide Lagen sind dasselbe Schwarz. */
.hero {
  --ton:
    linear-gradient(0deg, rgba(10,10,10,0.52) 0%, rgba(10,10,10,0.52) 34%, rgba(10,10,10,0) 74%),
    linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.80) 46%, rgba(10,10,10,0.56) 100%);
}
/* Ab 600 px braucht der Satz nur noch gut die halbe Breite, also darf der
   Verlauf rechts frueher aufmachen und der Fussschatten flacher liegen. */
@media (min-width: 600px) {
  .hero {
    --ton:
      linear-gradient(0deg, rgba(10,10,10,0.50) 0%, rgba(10,10,10,0.50) 26%, rgba(10,10,10,0) 66%),
      linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.84) 40%, rgba(10,10,10,0.40) 100%);
  }
}
/* Ab 900 px steht der Satz links, rechts bleibt das Bild frei. Der
   Fussverlauf entfaellt, weil der Satz die Breite nicht mehr braucht. */
@media (min-width: 900px) {
  .hero {
    --ton: linear-gradient(90deg, rgba(10,10,10,0.90) 0%, rgba(10,10,10,0.84) 34%, rgba(10,10,10,0.52) 62%, rgba(10,10,10,0.14) 100%);
  }
}
/* Variante B, flaechige Fassung: die naechste Zeile einkommentieren, sie
   steht hinter allen drei Stufen von A und gewinnt damit auf jeder Breite. */
/* .hero { --ton: rgba(10,10,10,0.55); } */

.hero .eyebrow { color: #FFFFFF; }
.hero__h1 {
  color: #FFFFFF;
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h1-weight);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-top: var(--ik-space-3);
  max-width: 15ch;
}
.hero__unter {
  color: #FFFFFF;
  font-size: 17px;
  line-height: 1.5;
  margin-top: var(--ik-space-4);
  max-width: 46ch;
}
.hero__unter--kurz { font-size: 19px; }

/* --- Datumsband und Nachtrag unter dem Foto ------------------------- */
.nach-hero { padding-top: var(--ik-space-8); }
.hero-nachtrag {
  font-size: 18px;
  line-height: 1.55;
  max-width: 62ch;
  margin-top: var(--ik-space-6);
}

.eyebrow {
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ik-text-secondary);
}

h1 {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h1-weight);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.tag {
  display: inline-block;
  background: var(--ik-red-metal);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 12px;
}

/* --- Sektionen ----------------------------------------------------- */
section + section { margin-top: var(--ik-space-16); }

h2 {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h2-weight);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h3 {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h3-weight);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.sek__intro { margin-top: var(--ik-vspace-h2-to-body); max-width: 68ch; color: var(--ik-text-secondary); }

/* --- Ablauf: ein Absatz, danach die 4 Stichpunkte -------------------
   Keine Schrittnummern mehr (Niko 15:2x: es gibt keine 3 Runden). */
.ablauf { margin-top: var(--ik-vspace-h2-to-body); }
.ablauf p { max-width: 68ch; }
.ablauf__vor { margin-top: var(--ik-space-6); color: var(--ik-text-secondary); }
.punkte {
  margin-top: var(--ik-space-4);
  list-style: none;
  max-width: 66ch;
  border-top: 1px solid var(--ik-gray-border);
}
.punkte li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ik-text-secondary);
  padding-top: var(--ik-space-3);
  padding-bottom: var(--ik-space-3);
  border-bottom: 1px solid var(--ik-gray-border);
}
.punkte b { font-weight: 500; color: var(--ik-black); }

/* --- Mehrwert: drei Absaetze, kein Kasten, keine Einfaerbung -------- */
.mehrwert { margin-top: var(--ik-vspace-h2-to-body); }
.mehrwert p { max-width: 68ch; }
.mehrwert p + p { margin-top: var(--ik-space-4); }

/* --- Regeln: 3 kurze Saetze, Haarlinien, ohne Zeichen ---------------
   Kein Zeichen und keine Ueberschrift: jeder Satz beginnt mit seinem
   eigenen Gegenstand, der Satzanfang ist der Ankerpunkt (Bericht V3-3). */
.regeln {
  list-style: none;
  margin-top: var(--ik-vspace-h2-to-body);
  border-top: 1px solid var(--ik-gray-border);
  max-width: 64ch;
}
.regel {
  padding-top: var(--ik-space-4);
  padding-bottom: var(--ik-space-4);
  border-bottom: 1px solid var(--ik-gray-border);
}

/* --- Formular ------------------------------------------------------- */
.formular { margin-top: var(--ik-space-8); }
.form-hinweis { color: var(--ik-text-secondary); font-size: 15px; max-width: 66ch; }
fieldset { border: 0; margin-top: var(--ik-space-12); }
legend {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h3-weight);
  font-size: 20px;
  letter-spacing: -0.01em;
  padding: 0 0 var(--ik-space-3) 0;
  border-bottom: 1px solid var(--ik-gray-border);
  width: 100%;
}
.feld { margin-top: var(--ik-space-8); }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ik-space-6); }
label {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: var(--ik-black);
  margin-bottom: var(--ik-space-2);
}
/* Label und Hilfe gehoeren zusammen, danach kommt der groessere Abstand
   zum Eingabefeld. So bleiben auch 3 Zeilen Hilfe ruhig. */
.feld label { margin-bottom: var(--ik-space-1); }
.pflicht { color: var(--ik-red); }
.label-zusatz { font-weight: 400; color: var(--ik-text-secondary); }
.hilfe {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ik-text-secondary);
  margin-bottom: var(--ik-space-3);
  font-weight: 400;
  max-width: 62ch;
}
.gruppentext {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ik-text-secondary);
  margin-top: var(--ik-vspace-h4-to-body);
  max-width: 62ch;
}
/* Die 3 Felder der Richtung stehen als ein Block zusammen, damit die
   Oder-Regel sichtbar ist. Haarlinien oben und unten wie bei den Regeln,
   kein farbiger Randstreifen (brand-guide Paragraf 10). */
.gruppe {
  margin-top: var(--ik-space-4);
  padding-top: var(--ik-space-2);
  padding-bottom: var(--ik-space-6);
  border-top: 1px solid var(--ik-gray-border);
  border-bottom: 1px solid var(--ik-gray-border);
}
.gruppe .fehlertext--gruppe { margin-top: var(--ik-space-4); }
input[type="text"], input[type="email"], input[type="url"], textarea {
  width: 100%;
  font-family: var(--ik-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ik-black);
  background: #FFFFFF;
  border: 1px solid var(--ik-gray-border);
  border-radius: 0;
  padding: 12px 14px;
}
textarea { resize: vertical; min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--ik-text-tertiary); }
input:focus, textarea:focus { border-color: var(--ik-black); outline: 1.5px solid var(--ik-red); outline-offset: 2px; }
.zaehler { font-size: 13px; color: var(--ik-text-tertiary); margin-top: var(--ik-space-1); }

.fehlertext { display: none; font-size: 13px; color: var(--ik-red); margin-top: var(--ik-space-1); }
body.zustand-fehler .feld.hat-fehler .fehlertext { display: block; }
body.zustand-fehler .feld.hat-fehler input,
body.zustand-fehler .feld.hat-fehler textarea { border-color: var(--ik-red); }
body.zustand-fehler .gruppe.hat-fehler .fehlertext--gruppe { display: block; }
body.zustand-fehler .haken-block.hat-fehler .fehlertext--haken { display: block; }
body.zustand-fehler .haken-block.hat-fehler input[type="checkbox"] { outline: 1px solid var(--ik-red); outline-offset: 2px; }

.haken { display: flex; align-items: flex-start; gap: var(--ik-space-3); }
.haken-block + .haken-block { margin-top: var(--ik-space-4); }
/* Ein einzelnes Haekchen laesst sich ueber .ist-aus am Block abschalten,
   ohne dass am Markup sonst etwas geaendert werden muss. */
.ist-aus { display: none !important; }
.haken input[type="checkbox"] {
  width: 24px; height: 24px;
  min-width: 24px;
  accent-color: #B5453A;
  margin: 0;
  border-radius: 0;
}
.haken label { margin-bottom: 0; font-weight: 400; font-size: 15px; line-height: 1.5; max-width: 62ch; }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rechtstext { max-width: 66ch; margin-top: var(--ik-space-12); }
.rechtstext h3 { font-family: var(--ik-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0; line-height: 1.4; }
.rechtstext p { font-size: 13px; line-height: 1.6; color: var(--ik-text-secondary); margin-top: var(--ik-space-3); }
.rechtstext a { color: var(--ik-red); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext a:hover { color: var(--ik-red-dark); }

.senden {
  display: inline-block;
  margin-top: var(--ik-space-6);
  background: transparent;
  border: 1px solid var(--ik-black);
  border-radius: 0;
  color: var(--ik-black);
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  cursor: pointer;
  transition: background-color var(--ik-duration-fast) var(--ik-ease-default), color var(--ik-duration-fast) var(--ik-ease-default);
}
.senden:hover { background: var(--ik-black); color: #FAFAFA; }
/* Sendezustand: der Knopf bleibt sichtbar an seinem Platz und nimmt keinen
   zweiten Klick an, solange die Antwort laeuft. */
.senden:disabled { color: var(--ik-text-tertiary); border-color: var(--ik-gray-border); cursor: default; }
.senden:disabled:hover { background: transparent; color: var(--ik-text-tertiary); }

.sammelfehler { display: none; font-size: 15px; color: var(--ik-red); margin-top: var(--ik-space-6); max-width: 66ch; }
body.zustand-fehler .sammelfehler { display: block; }

/* --- Ersatzbloecke fuer die Zustaende ------------------------------- */
.block { display: none; background: var(--ik-gray); padding: var(--ik-space-8); margin-top: var(--ik-space-8); }
.block h2 { font-size: clamp(24px, 2.6vw, 32px); }
.block p { max-width: 62ch; margin-top: var(--ik-space-4); }
.block p:first-child, .block h2 + p { margin-top: var(--ik-vspace-h2-to-body); }
.block p.block__lead { font-size: 18px; line-height: 1.5; color: var(--ik-black); margin-top: 0; }
/* Die Zustandsklasse am body setzt der Server (ik_kbw_fenster_zustand). */
body.zustand-vorher #block-vorher,
body.zustand-nachher #block-nachher { display: block; }

/* --- Footer --------------------------------------------------------- */
footer {
  background: var(--ik-body-bg);
  border-top: 1px solid var(--ik-gray-border);
  margin-top: var(--ik-space-24);
}
.fuss {
  padding-top: var(--ik-space-6);
  padding-bottom: var(--ik-space-6);
  font-size: 13px;
  color: var(--ik-text-secondary);
}
.fuss a { color: var(--ik-text-secondary); text-decoration: none; border-bottom: 1px solid var(--ik-gray-border); }
.fuss a:hover { color: var(--ik-black); border-bottom-color: var(--ik-black); }

/* --- Ab 600 px ------------------------------------------------------ */
@media (min-width: 600px) {
  .hero__mass { aspect-ratio: 3 / 2; }
}

/* --- Ab 900 px ------------------------------------------------------ */
@media (min-width: 900px) {
  /* min-height faengt den Sprung an der Umschaltstelle: bei genau 900 px
     waere der Hero sonst nur 375 px hoch und damit niedriger als bei 768. */
  .hero__mass { aspect-ratio: 12 / 5; min-height: 440px; }
  .hero__satz { padding-top: var(--ik-space-16); padding-bottom: var(--ik-space-12); }
  .hero__unter { font-size: 18px; }
  .hero__unter--kurz { font-size: 21px; }
  .hero__h1, .hero__unter { max-width: 620px; }
}

/* --- Mobile bis 768 px ---------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 18px; }
  .reihe { grid-template-columns: 1fr; }
  input[type="text"], input[type="email"], input[type="url"], textarea { font-size: 18px; }
  section + section { margin-top: var(--ik-space-12); }
  .block { padding: var(--ik-space-6) var(--ik-space-4); }
  .haken label { font-size: 16px; }
  footer { margin-top: var(--ik-space-16); }
}

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

/* ===================================================================
   Fix 16.09. abends: ruhigeres Formular (Niko: "nicht sauber designt")
   - Label und Hilfe groesser, Hilfe so breit wie das Feld
   - weniger Linien: Richtung ohne doppelte Haarlinien
   - Haekchen nicht mehr unter der Trennlinie der Ueberschrift
   - Zeichenzaehler rechts direkt am Feld
   - Feldfehler und Systemfehler getrennt
   =================================================================== */
fieldset { margin-top: var(--ik-space-16); }
fieldset:first-child { margin-top: 0; }
legend { font-size: 24px; padding-bottom: var(--ik-space-3); margin-bottom: var(--ik-space-2); }
.feld { margin-top: var(--ik-space-6); }
.reihe { margin-top: 0; }
.reihe .feld { margin-top: var(--ik-space-6); }
label { font-size: 15px; margin-bottom: var(--ik-space-1); }
.feld label { margin-bottom: 2px; }
.hilfe { font-size: 14px; max-width: none; margin-bottom: var(--ik-space-2); }
.gruppentext { font-size: 14px; max-width: none; }
.gruppe { margin-top: 0; padding: 0; border-top: 0; border-bottom: 0; }
.zaehler { text-align: right; font-size: 12px; margin-top: 2px; }
.fehlertext { font-size: 14px; }
body.zustand-fehler .feld.hat-fehler label { color: var(--ik-red); }
.haken-block:first-of-type { margin-top: var(--ik-space-6); }
.haken { align-items: flex-start; }
.haken input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; margin-top: 3px; }
.rechtstext { margin-top: var(--ik-space-16); padding-top: var(--ik-space-6); border-top: 1px solid var(--ik-gray-border); }

.feldmeldung { display: none; font-size: 15px; color: var(--ik-red); margin-top: var(--ik-space-8); }
body.zustand-fehler:not(.zustand-system) .feldmeldung { display: block; }
.feldmeldung + .senden { margin-top: var(--ik-space-3); }
.sammelfehler { display: none !important; }
body.zustand-system .sammelfehler { display: block !important; }

@media (max-width: 768px) {
  .reihe { gap: 0; }
  legend { font-size: 22px; }
  label { font-size: 16px; }
  .hilfe, .gruppentext { font-size: 15px; }
  .fehlertext { font-size: 15px; }
  .senden { width: 100%; padding: 16px 26px; font-size: 15px; }
}

/* Fix 23.09. Google-Formular: Liste "Das brauchst du" und Formular-Verweis, nur Tokens der Seite */
#bewerben-teil p { max-width: 68ch; }
#bewerben-teil p + p,
#bewerben-teil .brauchst + p { margin-top: var(--ik-space-4); }
.brauchst {
  margin-top: var(--ik-space-4);
  max-width: 66ch;
  padding-left: 1.25em;
  border-top: 1px solid var(--ik-gray-border);
}
.brauchst li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ik-text-secondary);
  padding-top: var(--ik-space-3);
  padding-bottom: var(--ik-space-3);
  border-bottom: 1px solid var(--ik-gray-border);
}
.brauchst b { font-weight: 500; color: var(--ik-black); }
#bewerben-teil p a:not(.senden) { color: var(--ik-black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }