/* ===========================================================================
   ESTERA — KARRIERE (Übersichtsseite)
   Vollständiger Neubau vom 29.08.2026.

   VORLAGE
   https://wiesedental.de/karriereseite, Abschnitte 1 bis 4.
   Die Bauaufnahme liegt im Kladdeordner als wiese/bericht.md. JEDE Zahl in
   dieser Datei stammt von dort und ist am Original gemessen, nicht
   geschätzt. Wo eine Zahl im Kommentar ohne Einheit steht, ist sie px.

   WAS 1:1 ÜBERNOMMEN IST
   Anordnung, Größenverhältnisse, Abstände, Reihenfolge, jede Bewegung mit
   ihren gemessenen Werten.

   WAS NICHT ÜBERNOMMEN IST — und warum
   1. SCHRIFT. Die Vorlage lädt keine einzige Webschrift und läuft auf dem
      Systemstapel (-apple-system / SF Pro / Segoe / Roboto). Estera setzt
      im ganzen Projekt Cormorant Garamond, dazu Jost für den Zusatz der
      Wortmarke. Übernommen sind deshalb die GRÖSSENVERHÄLTNISSE, nicht der
      Schnitt — siehe den Block „Schriftgrößen" weiter unten.
   2. FARBEN. Navy, Creme, Gold und Sand aus dem Farbblock von base.css.
      Die Leitfarbe der Vorlage (#0a3b7f) wird zu unserem Navy, ihre
      Akzentstellen zu Sand — siehe „Farbzuordnung".
   3. KEIN WORT TEXT der Vorlage. Kein Firmenname, kein Kundenname.
   4. KEIN SCHWARZ. Die Vorlage arbeitet mit echtem #000; hier steht
      überall --navy-900 (#0A192E).

   WAS AUS DER VORLAGE BEWUSST FEHLT
   - Die laufende Logoreihe im Kopfbereich (ausdrückliche Anweisung).
   - Der Bogen über Abschnitt 2 (ausdrückliche Anweisung; er ist in der
     Vorlage ohnehin ein Rasterbild, kein CSS).
   - Zwei statt vier Stellenkarten.
   Alle drei Auslassungen sind unten an ihrer Stelle vermerkt.

   ABHÄNGIGKEITEN
   fonts.css und base.css (Token, Kopfleiste, Wortmarke, Menü),
   schluss.css (nur die Fußzeile). Keine dieser Dateien wurde angefasst.
   seiten.css und faq.css sind seit dem Neubau nicht mehr eingebunden.
   =========================================================================== */


/* ===========================================================================
   1  GRUNDMASSE
   =========================================================================== */

.kar {
  /* --- Behälter -----------------------------------------------------------
     Gemessen (bericht.md, Abschnitt 1): Behälter = min(Fensterbreite − 2 ×
     Rand, Deckel). Deckel 1250 / 1150 / 960 / 750, Rand 32 bzw. 24.

        Fenster   Behälter   Rand
        1920/1440   1250       32
        1280        1150       32
        1200        1136       32
        1024         960       32
         900         750       32
         768         720       24
         390         342       24

     Der kleinste Wert unten deckt alles unter 768 ab: dort ist der Behälter
     schlicht Fensterbreite − 48. */
  --kar-rand: 24px;
  --kar-cap: none;

  /* --- DER HELL/DUNKEL-RHYTHMUS — KUNDENWUNSCH 30.08.2026 -----------------
     Wörtlich: „Der Hintergrund ist überall weiß. Das ist ziemlich
     langweilig alles."

     Die Ursache ist bekannt: der Kunde hatte vorher selbst verlangt, fast
     alles auf Weiß zu stellen. Damit war der Wechsel hell/dunkel weg, der
     den Rest der Website trägt. Zurückgedreht wird das NICHT — stattdessen
     ist der Rhythmus neu gebaut, mit zwei Hellwerten statt einem:

         Kopfbereich    Navy 900   (Video, unverändert)
         Wer ist Estera Creme
         Stimmen        WEISS      ← muss weiß bleiben, siehe unten
         Angebot        NAVY 800   randlos über die volle Fensterbreite
         Stellen        Creme
         Fußbereich     Navy       (unverändert)

     WARUM DER STIMMENABSCHNITT WEISS BLEIBT und nicht mitwechselt: die
     Kantenmaske des Laufbands blendet dort die Karten gegen den
     Abschnittsgrund aus. Der Kunde hat ausdrücklich einen WEISSEN Schleier
     verlangt. Läge dort Creme, wäre es ein cremefarbener Schleier. Der
     Abschnitt ist also nicht vergessen, er ist gebunden.

     DER NAVY-ABSCHNITT IST „Deine Karriere, unser Angebot" — der einzige
     ohne ein einziges Bild, also der, dem eine Farbfläche nichts wegnimmt.
     Er ist zugleich die verlangte RANDLOSE FLÄCHE: die Farbe sitzt auf
     dem <section>, der Text auf .kar-mitte darin, die Fläche läuft also
     über die volle Fensterbreite und bricht die Kastenfolge auf. Ein
     Mittel, zwei Anforderungen.

     CREME: bis zum 30.08.2026 stand hier ein eigenes #FAF7F1, weil
     base.css damals kein Creme führte. Seit dem Flächenverlauf-Block am
     Ende von base.css gibt es dort --fl-creme (#F7F3F0), und der Verlauf
     .fl-creme-nach-weiss startet auf genau diesem Wert. Zwei Cremetöne
     nebeneinander wären genau die Art Unterschied, die der Kunde an den
     Farbübergängen beanstandet hat — deshalb übernimmt die Seite den
     gemeinsamen Wert. Warm, sehr hell, wenig Buntheit, 1,10:1 gegen
     Weiß. */
  --kar-creme: var(--fl-creme);

  /* --- ABSTÄNDE: außen mehr, innen weniger -------------------------------
     „Gleiche Abstände überall lesen sich als Aufzählung, nicht als
     Gestaltung." Bis hierher lag zwischen den Abschnitten ungefähr so viel
     Luft wie innerhalb — beides um die 30 bis 48 px. Jetzt sind die beiden
     Rollen getrennt: zwischen den Abschnitten das Dreifache, innerhalb der
     Blöcke enger als vorher. Die Blöcke rücken dadurch zusammen und
     stehen als Gruppe, die Abschnitte treten auseinander. */
  /* 64 STATT 96 — 01.09.2026, Optimierungsbriefing, Abschnitt 02/11/19
     („Grosse weisse Felder reduzieren", „vertikale Abstaende deutlich
     reduzieren", „grosse Leerflaechen ober- und unterhalb reduzieren").
     Die 96 px lagen ober- UND unterhalb jedes Abschnitts, also 192 px
     Luft je Naht; das war die Hauptquelle der beanstandeten weissen
     Felder. 64 ist immer noch das Doppelte der Blockluft --kar-eng, der
     Rhythmus „aussen mehr, innen weniger" bleibt damit erhalten.
     Vorher: 96px */
  --kar-luft: 64px;      /* Abschnitt gegen Abschnitt */
  --kar-eng:  32px;      /* innerhalb eines Blocks    */

  /* --- Die Inhaltsspalte --------------------------------------------------
     Kopfbereich und die Überschrift von Abschnitt 3 stehen in der Vorlage
     nicht im vollen Behälter, sondern in einer schmaleren Spalte:
     1087,8 bei 1920 (x 416 … 1504) bzw. 1091,8 in Abschnitt 3 — dieselbe
     Spalte, der Unterschied von 4 px ist Rundung des Baukastens.
     Abschnitt 2 dagegen setzt seine Überschrift über den vollen Behälter. */
  --kar-spalte: 1087.8px;

  /* --- Schriftgrößen ------------------------------------------------------
     Gemessen (bericht.md, Abschnitt 1). Ab 768 px sind alle Größen fest;
     darunter skalieren NUR Überschrift und Kartentitel linear mit der
     Fensterbreite, die Fließtexte nicht.

        Rolle                    ≥768    390
        H1 / H2         (700)      48    28,98
        Kartentitel     (700)      20    17,62
        Vorzeile        (700)      16    16
        Fließtext Abs.2 (400)      14    14
        Kartentext      (400)      18    18
        Knopf           (600)      15    15

     DER FAKTOR 1,19 — die eine Stelle, an der bewusst abgewichen wird.
     Die Vorlage läuft auf der Systemschrift (x-Höhe rund 0,52 em), Estera
     auf Cormorant Garamond (x-Höhe 0,386 em). Dieselbe px-Zahl ergibt in
     Cormorant eine sichtbar kleinere Schrift. base.css hält für genau
     diesen Fall bereits einen Ausgleichsfaktor fest — „alle Größen sind
     deshalb um Faktor 1,19 angehoben, damit die optische Größe erhalten
     bleibt" — und derselbe Faktor steht hier auf ALLEN Schriftgrößen.
     Weil er auf alle wirkt, bleiben die Verhältnisse exakt erhalten; das
     auffälligste davon, der Sprung 48 : 14 = 3,4 zwischen Überschrift und
     Fließtext in Abschnitt 2, steht unverändert.
     Die GEOMETRIE (Abstände, Knopfhöhen, Radien, Behälterbreiten) ist NICHT
     mit 1,19 multipliziert — sie steht auf den gemessenen Werten. */
  --kar-f: 1.19;

  /* 48 → 57,12. Unter 768 px gilt in der Vorlage die Gerade
     „9,36px + 5,03vw, gedeckelt bei 48px"; mit 1,19 multipliziert:
     11,14px + 5,986vw, gedeckelt bei 57,12px. Der Deckel greift bei
     genau 768 px — wie im Original. */
  --kar-fs-titel: min(57.12px, calc(11.14px + 5.986vw));

  /* 20 → 23,8. Gerade der Vorlage: 15,165px + 0,6296vw, Deckel 20px. */
  --kar-fs-kartentitel: min(23.8px, calc(18.05px + 0.7492vw));

  /* 16 × 1,19 = 19,04. Die Vorlage lässt die Vorzeile bis 390 px auf
     festen 16 px stehen — ihre Zeile ist kürzer und in der Systemschrift
     schmaler gesetzt. Unsere („BAUE DIR ETWAS EIGENES AUF", 26 Zeichen in
     Versalien mit 0,1 em Sperrung) läuft bei 390 px sonst über den Rand
     hinaus und der Balken steht nicht mehr mittig. Sie skaliert deshalb
     unterhalb von rund 520 px mit — gemessen so eingestellt, dass die
     Zeile samt Auslauf bei 390 px in den Behälter von 342 px passt. */
  --kar-fs-vorzeile: min(19.04px, calc(2.5px + 3.2vw));
  --kar-fs-lead:     21.42px;   /* 18 × 1,19 — Kartentext und Unterzeile */
  --kar-fs-fliess:   16.66px;   /* 14 × 1,19 — Fließtext Abschnitt 2      */
  --kar-fs-knopf:    17.85px;   /* 15 × 1,19 */

  /* Zeilenhöhen sind in der Vorlage Faktoren, keine px. */
  --kar-lh-titel:  1.181;
  --kar-lh-fliess: 1.5;
  --kar-lh-karte:  1.2145;      /* 24,29 / 20 */

  background: var(--paper);
}

@media (min-width: 768px)  { .kar { --kar-rand: 24px; --kar-cap:  750px; } }
@media (min-width: 900px)  { .kar { --kar-rand: 32px; --kar-cap:  750px; } }
@media (min-width: 992px)  { .kar { --kar-rand: 32px; --kar-cap:  960px; } }
@media (min-width: 1200px) { .kar { --kar-rand: 32px; --kar-cap: 1150px; } }
@media (min-width: 1400px) { .kar { --kar-rand: 32px; --kar-cap: 1250px; } }

/* Der Behälter. Unter 768 px hat er keinen Deckel — dort ist er immer
   Fensterbreite minus Rand. */
.kar-mitte {
  width: 100%;
  padding-inline: var(--kar-rand);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .kar-mitte { max-width: calc(var(--kar-cap) + 2 * var(--kar-rand)); }
}


/* ===========================================================================
   2  FARBZUORDNUNG — die eine Stelle, an der die Vorlage nicht 1:1 geht

   Die Vorlage kennt GENAU EINE Akzentfarbe (bericht.md, Abschnitt 8.4):
   #0a3b7f trägt Sterne, Balken, Vollflächen-Knopf und die Akzentwörter der
   Überschriften. Ein einziger Wert für alles, auf hellem wie auf dunklem
   Grund.

   Das lässt sich mit unserer Palette nicht wörtlich nachmachen:

     - Auf dem DUNKLEN Kopfbereich wäre Navy auf Navy unsichtbar.
       Dort ist die Akzentfarbe deshalb SAND: Sterne in Sand, der Balken
       eine Sandfläche mit Navy-Schrift (9,08:1, base.css).
       Die Anweisung sagt das für die Sterne ausdrücklich („fünf, in Sand")
       und allgemein: „ihre Akzentstellen zu Sand".

     - Auf den WEISSEN Abschnitten ist Sand als Fläche 1,94:1 und als
       Schrift ebenfalls 1,94:1 — beides unbrauchbar. Dort ist die
       Akzentfarbe NAVY: der Balken eine Navy-Fläche mit weißer Schrift,
       die Akzentwörter in --accent (#1E4270, 10,3:1 auf Weiß), der
       Vollflächen-Knopf in --navy-800.
       Das ist die Zuordnung „Leitfarbe der Vorlage → unser Navy".

   Es bleibt bei EINEM Akzentgedanken, er wechselt nur mit dem Untergrund
   den Ton. Ein zweiter blauer oder grauer Ton kommt nirgends vor — auch
   die scheinbar grauen Zeilen der Karte („Vollzeit (m/w/d)") stehen wie in
   der Vorlage in voller Textfarbe und wirken nur leichter, weil sie den
   normalen statt den kräftigen Schnitt tragen.

   .btn--sand aus base.css ist auf dieser Seite NICHT eingesetzt: er trägt
   weiße Schrift auf Sand und misst 1,94:1.
   =========================================================================== */


/* ===========================================================================
   3  DER BALKEN HINTER DER KENNZEILE

   In der Vorlage ist das weder background-color noch border-radius: das
   Element hat im berechneten Stil beides nicht, der Balken wird von einem
   hauseigenen JS-Bündel gezeichnet („brush-marker"). Aus den Bildpunkten
   abgelesen (bericht.md, Abschnitt 3): ein RECHTECKIGER Balken OHNE
   Rundung, links voll deckend, der über die letzten rund 25 % nach rechts
   ins Durchsichtige ausläuft — wie ein trocken auslaufender Filzstift.
   Höhe rund Versalhöhe plus 1 px, die Schrift liegt darauf.

   Eine Pille mit border-radius trifft das nicht. Der Bericht empfiehlt
   ausdrücklich, ihn als echtes CSS-Element zu bauen (Verlauf von der Farbe
   nach durchsichtig) — dann ist er auch ohne Javascript da. Genau das
   steht hier.

   EINE ABWEICHUNG, UND SIE IST ABSICHT: in der Vorlage läuft der Verlauf
   UNTER DER SCHRIFT aus, die letzten Buchstaben stehen also auf einem
   halb durchsichtigen Grund. Auf dem weißen Abschnitt 2 sind sie dadurch
   praktisch unlesbar (der Bericht führt das unter „echte Schwächen"). Hier
   liegt der Auslauf deshalb VOLLSTÄNDIG RECHTS NEBEN der Schrift: der
   Balken ist 1,6 em breiter als sein Textkasten, und genau über diese
   1,6 em läuft er aus. Das Bild ist dasselbe, die Schrift steht aber immer
   auf voller Deckung.
   =========================================================================== */

.kar-balken {
  position: relative;
  isolation: isolate;          /* hält das z-index:-1 des Balkens im Element */
  display: inline-block;
  padding: 0.06em 0.34em;      /* Vorlage: padding 0 4,41px bei 14px Schrift */
  font-family: var(--font-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}
.kar-balken::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 -1.6em 0 0;         /* 1,6 em Auslauf rechts neben der Schrift */
  background: linear-gradient(90deg,
      var(--navy-800) 0,
      var(--navy-800) calc(100% - 1.6em),
      rgba(16, 41, 73, 0) 100%);
}

/* Auf dunklem Grund: Sandfläche, Navy darauf — 9,08:1. */
.kar-balken--hell { color: var(--navy-900); }
.kar-balken--hell::before {
  background: linear-gradient(90deg,
      var(--sand) 0,
      var(--sand) calc(100% - 1.6em),
      rgba(217, 180, 133, 0) 100%);
}


/* ===========================================================================
   4  ÜBERSCHRIFTEN

   Vorlage: 48 / 56,68 px im kräftigen Schnitt, zentriert. Die AKZENTREGEL
   ist eines der auffälligsten Merkmale und gilt konsequent auf jeder
   Überschrift: die zweite Hälfte steht KURSIV UND in der Akzentfarbe —
   nie nur eins von beidem (bericht.md, Abschnitt 8.3).

   Der Schnitt weicht ab: die Vorlage setzt 700, Estera setzt seine
   Überschriften im ganzen Projekt in Cormorant 300 („der feine
   Strichkontrast ist der Träger der Wirkung", base.css). Das Gewicht ist
   Teil des Schnitts, nicht des Größenverhältnisses — es bleibt beim
   Projektwert. Kursiv liegt als eigener Schnitt vor (300i).
   =========================================================================== */

.kar-titel {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--kar-fs-titel);
  line-height: var(--kar-lh-titel);
  letter-spacing: -0.004em;
  color: var(--ink-black);
  text-align: center;
  text-wrap: balance;
}
.kar-akzent {
  color: var(--accent);        /* #1E4270 — 10,3:1 auf Weiß */
  font-style: italic;
}


/* ===========================================================================
   5  KOPFBEREICH

   Gemessen (bericht.md, Abschnitt 2):
     Höhe 1013,7 bei 1440/1920 · 1070,3 bei 900–1024 · 920,8 bei 768 ·
     875,9 bei 390. padding-top 298 ab 900 px, 148,5 darunter.
     Inhaltsspalte 1087,8 breit, mittig, Beginn y = 297.

       y 297   Bildmarke 105 × 105
       +20
       y 422   fünf Sterne, Kästen 20 × 20 auf 22er Raster (2 Luft), 108 breit
       +10
       y 460   Kennzeile auf dem Balken, 16 / 24, kräftig
       +20
       y 504   Überschrift, 48 / 56,68, eine Zeile
       +58
       y 619   Logoreihe 1087,8 × 94        ← ENTFÄLLT
       +300

   DIE LOGOREIHE ENTFÄLLT, IHR PLATZ NICHT. Ihre 94 px und die 300 px Luft
   darunter sind der Grund, warum der Abschnitt auf 1013,7 kommt und die
   Reihe bei rund 61 % der Höhe sitzt statt am Fuß. Nähme man den Platz
   mit heraus, rutschte der ganze Stapel nach unten und keine einzige Lage
   entspräche noch der Vorlage. Deshalb bleibt die gemessene Höhe als
   min-height stehen; unter der Überschrift steht der dunkle Raum, in dem
   die Reihe stünde. Kommt sie später dazu, wird sie dort eingesetzt und
   die Höhe ändert sich nicht.

   Bei 1024 px misst die Vorlage 1070,3 statt 1013,7. Der Unterschied ist
   exakt eine Überschriftzeile (56,68) — dort bricht die Überschrift um.
   Das ist hier nicht als eigener Wert gesetzt, sondern über min-height
   gelöst: bricht unsere Überschrift um, wächst der Abschnitt von selbst.
   =========================================================================== */

/* Der Kopfbereich bleibt unverändert bei seiner gemessenen Höhe. Seine
   Unterkante ist eine Navy-gegen-Hell-Naht und damit nach der
   Entscheidung vom 30.08.2026 eine saubere Kante — es liegt kein Verlauf
   darüber, und das Video darunter bleibt unangetastet. Ein Zwischenstand
   dieses Tages hatte hier einen Navy-Fuß mit einer Blende darin; er ist
   mit der Blende wieder entfallen.
   background-color statt background: der Kopfbereich trägt zwar keine
   .fl-Klasse, die Schreibweise bleibt aber in der ganzen Datei gleich. */
.kar-kopf {
  position: relative;
  overflow: hidden;
  padding-top: 148.5px;
  padding-bottom: 0;
  min-height: clamp(875.9px, calc(829.5px + 11.9vw), 920.8px);
  display: flex;
  flex-direction: column;
  background-color: var(--navy-900);
}
/* DER GANZE STAPEL RUECKT 32 PX NACH UNTEN — KUNDENWUNSCH 04.09.2026.
   Woertlich, im selben Satz wie die Kuerzung der Unterzeile: „… und setze
   alles weiter, von dem Estera-Logo beginnend, weiter nach unten, weil
   dann ein bisschen Platz frei wird."

   DER FREIE PLATZ IST GEMESSEN UND KEINE SCHAETZUNG. Die gekuerzte
   Unterzeile faellt bei 1440 px von zwei Zeilen auf eine; das sind
   32,13 px Zeilenhoehe, die im Kopfbereich frei werden. Die Mindesthoehe
   von 1013,7 px bleibt unangetastet, also landet der freie Platz UNTEN:
   der Abstand zwischen Vertrauenszeile und Kopfunterkante wuchs von
   155,8 auf 186,7 px, der Block ist damit rechnerisch nach oben gerutscht.

   Die 32 px gehen deshalb genau dorthin zurueck, wo sie herkommen — vor
   die Wortmarke. Gemessen bei 1440 x 900:

       Luft ueber der Marke        298,0  ->  330,0 px
       Luft unter der Vertrauenszeile 186,7  ->  154,7 px

   154,7 px sind wieder die 155,8 px von heute frueh: der Fuss des
   Kopfbereichs steht also so, wie er den ganzen Tag stand, und bewegt hat
   sich nur der Block darin — nach unten, so wie gewuenscht.
   Vorher: padding-top: 298px (der Wert der Bauaufnahme bei 1920). */
@media (min-width: 900px) {
  .kar-kopf { padding-top: 298px; min-height: 1013.7px; }
}

/* --- Der Grund: Video, darunter das Standbild ------------------------------
   Die Vorlage hängt hier ein übergroßes Vimeo-iframe ein (1920 × 1216 bei
   y = −102) und erzeugt den Bildausschnitt über die Übergröße, nicht über
   object-fit. Ein eigenes <video> kann das direkt: object-fit: cover.

   DIE HELLIGKEIT — die zweite bewusste Abweichung dieser Datei.
   Die Vorlage schneidet einen Imagefilm, der von Haus aus „stark
   entsättigt, kühles Blaugrau" ist (bericht.md, Abschnitt 6). Unsere
   Aufnahme ist eine Fahrt an einer Glasfassade bei Tageslicht und damit
   deutlich heller. Mit dem Schleier der Vorlage allein stünde die weiße
   Schrift darauf bei 2,09:1 bis 3,79:1 — durchgefallen.

   Gemessen wurde nicht am Farbwert, sondern an 37 Einzelbildern der
   Schleife: je Band das 95. Perzentil der Bildhelligkeit, darüber der
   Schleier und (für die Kopfleiste) zusätzlich deren eigener Verlauf aus
   base.css. Ergebnis, schlechtestes Bild der ganzen Schleife:

        Band                    ohne Dämpfung   mit brightness(0.6)
        Kopfnavigation             2,77:1            6,24:1
        Wortmarke Kopfleiste       3,14:1            7,20:1
        Zusatz „IMMOBILIEN"        2,33:1            4,96:1   ← schlechtester
        Wortmarke im Hero          2,87:1            6,73:1
        Sterne                     3,25:1            7,42:1
        Kennzeile                  3,38:1            7,57:1
        Überschrift                3,79:1            8,24:1

   Damit trägt jede Schrift über JEDEM Bild der Schleife über 4,5:1.
   Die Dämpfung sitzt auf dem Video, NICHT auf dem Schleier: so bleibt der
   Verlauf Zahl für Zahl der der Vorlage, und korrigiert wird nur das, was
   tatsächlich anders ist — die Belichtung unseres Materials.
   Wer das Video austauscht, muss diesen Wert neu messen. */
.kar-kopf__grund {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--navy-900) url('../video/kar-hero-poster.jpg?v=b24a') center / cover no-repeat;
  filter: brightness(0.6);
}
.kar-kopf__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Der Schleier — der wichtigste Kniff des ganzen Kopfbereichs ----------
   Vorlage, unverändert übernommen bis auf die Farbe:

       linear-gradient(rgba(0,0,0,0.34), rgb(0,0,0))

   Oben 34 %, unten VOLL DECKEND. Kein Weichzeichner, keine Mischmethode,
   keine zweite Farbe. Die volle Deckung unten ist der Grund für den harten
   Schnitt zum weißen Abschnitt darunter — ein gleichmäßiger Schleier (etwa
   durchgehend 50 %) sieht sofort falsch aus, weil dieser Fuß fehlt.
   Hier in Navy statt Schwarz: derselbe Verlauf, dieselbe Enddeckung. */
.kar-kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(10, 25, 46, 0.34), rgb(10, 25, 46));
}

.kar-kopf .kar-mitte { position: relative; z-index: 2; }

.kar-kopf__stapel {
  max-width: min(100%, var(--kar-spalte));
  margin-inline: auto;
  text-align: center;
}

/* 1 — Bildmarke.
   Die Vorlage setzt ein 105 × 105 großes Logobild. Estera hat keine
   Bildmarke, sondern die Wortmarke der Website. Sie steht deshalb mittig
   in einem Feld von exakt 105 px Höhe — dadurch beginnt die Sternreihe bei
   y = 422 wie gemessen, obwohl das Zeichen selbst flacher ist. */
/* DIE WORTMARKE STEHT EINEN TICK TIEFER — KUNDENWUNSCH 30.08.2026.
   „Die Wortmarke muss ein kleines Stueck weiter nach unten, naeher an die
   Sterne." Ausdruecklich nur ein kleines Stueck.

   GELOEST UEBER padding-top IM 105-PX-FELD, NICHT UEBER DEN ABSTAND DER
   STERNE. Das Feld behaelt seine gemessenen 105 px, die Sternreihe ihren
   gemessenen margin-top von 20 px und damit ihre Lage bei y = 423. Bewegt
   hat sich einzig die Marke INNERHALB ihres Feldes: bei box-sizing:
   border-box bleibt der Kasten 105 px hoch, der Inhaltskasten misst
   105 − 24 = 81 px, und die mittig darin stehende Zeile rueckt um
   (105 − 81) / 2 = 12 px nach unten.

   Damit aendert sich KEINE einzige Lage ausser der der Marke selbst — die
   Bauaufnahme der Vorlage (Sterne y 422, Kennzeile y 460, Ueberschrift
   y 504) bleibt Zahl fuer Zahl stehen.

   GEMESSEN AM BILDPUNKT, Unterkante der Wortmarken-Tinte gegen Oberkante
   der Sternen-Tinte:

       Fenster   vorher    nachher
       1920      58,25     46,25
       1440      58,25     46,25
       1024      58,25     46,25
        390      63,50     51,50

   MITTIG BLEIBT MITTIG. padding-top wirkt nur senkrecht; die waagrechte
   Lage ist unberuehrt. Nachgemessen an der echten Tinte, nicht am
   Rechteck (das Rechteck luegt hier um die Sperrung des letzten
   Buchstabens): Aussenmass +1,00 px, Tintenschwerpunkt −0,89 px gegen die
   Mitte der Sternenreihe, auf 1920 / 1440 / 1024 gleich, bei 390 px
   +0,75 / −0,65. Dass die beiden Masse in verschiedene Richtungen
   zeigen, ist die Form der Buchstaben selbst — „ESTERA" beginnt mit dem
   breiten E und endet mit dem nach rechts auslaufenden A. Beide Werte
   liegen unter einem Bildpunkt; naeher als das laesst sich eine
   Buchstabenfolge nicht zentrieren. */
/* FLEX, nicht GRID — und das ist wichtig. .wordmark trägt in base.css
   `grid-column: 2` (dort sitzt sie im dreispaltigen Raster der Kopfleiste).
   In einem einspaltigen Grid legt dieser Wert eine implizite zweite Spalte
   an und die Marke steht sichtbar aus der Mitte gerückt. Als Flexbox ist
   grid-column wirkungslos und die Marke steht mittig, ohne dass base.css
   angefasst werden müsste. */
.kar-kopf__marke {
  height: 105px;
  padding-top: 24px;           /* rueckt die Marke um 12 px nach unten */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 46 px, unterhalb von rund 580 px mitskalierend. Die Wortmarke trägt
   0,36 em Sperrung; bei 390 px stünde sie sonst mit 306 px in einem
   Behälter von 342 px und damit fast randbündig, während die Bildmarke der
   Vorlage dort ihre 105 px behält und viel Luft daneben lässt. */
.kar-kopf__marke .wordmark__name {
  font-size: min(46px, calc(10px + 6.2vw));
  color: #fff;
}
/* 0,72 statt der 0,66 der Kopfleiste: dort liegt zusätzlich der eigene
   Verlauf des Seitenkopfs darunter, hier nicht. Mit 0,66 stünde der Zusatz
   im Hero bei 4,78:1, mit 0,72 bei 5,13:1 — beides über der Grenze, der
   höhere Wert lässt Luft für einen späteren Videotausch. */
.kar-kopf__marke .wordmark__sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

/* 2 — fünf Sterne. Kästen 20 × 20 auf 22er Raster: 2 px Luft, 108 breit. */
.kar-kopf__sterne {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 2px;
}
.kar-kopf__sterne svg {
  width: 20px;
  height: 20px;
  fill: var(--sand);
}

/* 3 — Kennzeile auf dem Balken. Vorlage 16 / 24 px, kräftig. */
.kar-kopf__kennzeile {
  margin-top: 10px;
  font-size: var(--kar-fs-vorzeile);
  line-height: var(--kar-lh-fliess);
}

/* 4 — Überschrift. */
.kar-kopf__titel {
  margin-top: 20px;
  color: #fff;
}


/* ===========================================================================
   6  „WER IST ESTERA?"

   Gemessen (bericht.md, Abschnitt 3): Höhe 632, padding 54px 0 94px ab
   900 px bzw. 26,5px 0 47px darunter, Hintergrund weiß.

       y 1066  Bogen 330,6 × 165,3        ← ENTFÄLLT
       +8
       y 1231  Etikett auf dem Balken, 14 / 21
       +20 +26
       y 1298  Überschrift über den vollen Behälter (1250), 48 / 56,68
       +48
       y 1403  Fließtext, zwei Absätze, 707,1 breit, zentriert, 14 / 21

   DER BOGEN ENTFÄLLT ausdrücklich. Mit ihm fallen seine 165,3 px und die
   8 px darunter weg; alles Übrige behält seine gemessenen Abstände. Anders
   als die Logoreihe hinterlässt er KEINEN reservierten Platz — er stand am
   Anfang des Abschnitts, sein Wegfall verschiebt also nur den Abschnitt
   selbst nach oben und keine innere Lage zueinander.
   (In der Vorlage ist er ohnehin kein CSS, sondern ein Rasterbild: eine
   helle Kuppel mit dem Firmenzeichen darin, bei 2:1 mit cover beschnitten.
   Er ließe sich aus keinem Stilwert ableiten.)

   DAS GRÖSSENVERHÄLTNIS 48 : 14 ist eines der auffälligsten Merkmale der
   Vorlage — Faktor 3,4 zwischen Überschrift und Fließtext. Wer den
   Fließtext auf 16 oder 18 px setzt, verliert den Eindruck. Hier steht er
   deshalb auf 14 × 1,19 = 16,66 px und die Überschrift auf 48 × 1,19 —
   der Faktor bleibt 3,4.
   =========================================================================== */

/* --- FLÄCHENVERLÄUFE — DRITTE UND GÜLTIGE FASSUNG, 30.08.2026 ------------
   Zwei Fassungen hat der Kunde verworfen. Die erste waren eigene
   .kar-uebergang-Klassen, 96 px hoch, zweistufiger linear-gradient in
   sRGB („eine absolute Vollkatastrophe, das tut in den Augen weh"). Die
   zweite eine 240 px hohe Blende mit S-Kurve in Oklab. Beim dritten Mal
   hat er den Maßstab genannt, an dem er misst — den Kasten der FAQ:

       FAQ-Kasten   #1E222D → #2E3643, größter Kanalunterschied 22,
                    über rund 1100 px Kastenbreite
                    = 0,020 Einheiten je Bildpunkt

       die Blenden  Navy → Weiß über  96 px = 2,55 je Bildpunkt
                                über 240 px = 1,02
                                über 600 px = 0,41

   Selbst die längste Blende war noch zwanzigmal steiler als das, was er
   gut findet. Länger ziehen reicht also nicht — der Denkfehler war,
   überhaupt eine Blende ZWISCHEN zwei Abschnitte zu legen.

   DIE REGEL, an der jetzt jeder Verlauf gemessen wird:
   höchstens 0,03 Einheiten je Bildpunkt im stärksten Kanal.

   DER RICHTIGE WEG: es gibt gar keine Blende. Ein Abschnitt trägt seinen
   Verlauf über die EIGENE volle Höhe und endet auf der Farbe seiner
   Nachbarin. Dann existiert die Naht nicht mehr, und weil ein Abschnitt
   500 bis 1000 px hoch ist, liegt die Änderung von selbst im Bereich des
   FAQ-Kastens. Die Bausteine stehen am Ende von base.css; diese Datei
   erfindet keinen eigenen Verlauf mehr, sie setzt nur Klassen.

   NAVY GEGEN HELL BEKOMMT GAR KEINEN ÜBERGANG. Zwischen #0A192E und Weiß
   liegen 245 Einheiten; über 600 px sind das 0,41 je Bildpunkt,
   vierzehnmal zu steil. Es gibt keine Strecke auf einer Webseite, auf der
   diese Distanz unauffällig wird. Dort steht eine saubere Kante — nicht
   als Zugeständnis, sondern als richtige Lösung. Auch ein blassblauer
   Anlauf im hellen Abschnitt danach ist ausdrücklich nicht gewollt: nach
   einer Navyfläche kommt sauberes Creme beziehungsweise Weiß.

   WAS DAS AUF DIESER SEITE HEISST — fünf Nähte, genau EINE davon weich:

       Kopf (Navy 900) → Wer ist Estera (Creme)   Kante, hart
       Wer ist Estera (Creme) → Stimmen (Weiß)    VERLAUF, .fl-creme-nach-weiss
       Stimmen (Weiß) → Angebot (Navy 800)        Kante, hart
       Angebot (Navy 800) → Stellen (Creme)       Kante, hart
       Stellen (Creme) → Fuß (Navy 900)           Kante, hart

   Dass nur eine weich ist, ist kein Versäumnis, sondern die Folge der
   Farbfolge: alle anderen stoßen an Navy. Dazu atmet die eine Navyfläche
   der Seite in sich (.fl-navy800 am Angebot).

   GEMESSEN AM GERENDERTEN BILD, 30.08.2026 (Einheiten je Bildpunkt im
   stärksten Kanal, über die volle Abschnittshöhe; Prüfmaß 0,03):

       Fenster   Wer ist Estera        Angebot
                 .fl-creme-nach-weiss  .fl-navy800
       1920            0,0241            0,0272
       1440            0,0241            0,0273
       1024            0,0275            0,0270
        390            0,0176            0,0222

   Über ein Fenster von nur 10 Bildpunkten gemessen stehen dort 0,055 bis
   0,075. Das ist nicht die Gestaltung, sondern die 8-Bit-Quantisierung:
   15 Einheiten auf 623 px MÜSSEN alle 41 px um eine ganze Einheit
   springen, ein 10-Punkte-Fenster liest deshalb 0 oder 1. Der Maßstab des
   Kunden — der FAQ-Kasten, 22 Einheiten auf 1100 px — verhält sich genau
   so. Der aussagekräftige Wert ist der über die volle Strecke.

   DER STIMMENABSCHNITT BLEIBT REINES WEISS und trägt selbst keinen
   Verlauf. Die Kantenmaske des Laufbands blendet gegen diesen Grund aus;
   läge dort auch nur der Ausläufer eines Cremeverlaufs, wäre es ein
   cremefarbener Schleier statt des verlangten weißen. Der Verlauf davor
   sitzt deshalb im Cremeabschnitt und ENDET auf Weiß — die Naht zum
   Stimmenabschnitt existiert damit rechnerisch nicht mehr, und der
   Stimmenabschnitt selbst ist von der ersten bis zur letzten Bildzeile
   #FFFFFF.

   DIE UNTERKANTE DES KOPFVIDEOS bleibt unangetastet und war es die ganze
   Zeit: sie ist eine Navy-gegen-Hell-Kante und damit ohnehin hart.

   ACHTUNG BEIM WEITERBAUEN: die .fl-Klassen setzen background-image.
   karriere.css wird nach base.css geladen, also darf in den
   Abschnittsregeln unten NICHT die Kurzform `background:` stehen — sie
   würde das background-image wieder auf none setzen. Überall steht
   deshalb `background-color:`. */


/* „Wer ist Estera?" — DER EINE WEICHE ÜBERGANG DIESER SEITE.

   Die Klasse .fl-creme-nach-weiss steht am <section> (siehe
   karriere.html): der Abschnitt beginnt oben auf --fl-creme und endet
   unten auf --fl-weiss, über seine EIGENE volle Höhe. Damit stößt seine
   Unterkante auf exakt die Farbe des Stimmenabschnitts darunter — die
   Naht existiert rechnerisch nicht mehr, und es liegt keine Blende
   dazwischen.

   OBERKANTE: keine Weichzeichnung. Darüber steht der Kopfbereich in
   Navy 900; Navy gegen Hell bleibt nach der Entscheidung vom 30.08.2026
   eine saubere Kante, und ein blassblauer Anlauf ist ausdrücklich nicht
   gewollt. Der Abschnitt fängt sauber in Creme an.

   DIE RECHNUNG ZUM PRÜFMASS 0,03 EINHEITEN JE BILDPUNKT:

       #F7F3F0 → #FFFFFF, Kanäle R 8 · G 12 · B 15 — stärkster Kanal 15

       Fenster   Abschnittshöhe   Einheiten je Bildpunkt
       1920           623,5 px          0,024
       1440           623,5 px          0,024
       1024           546,3 px          0,027
        390           837,5 px          0,018

   Alle vier unter 0,03. Die knappste Lage ist 1024 px; damit sie es
   bleibt, steht unten eine min-height von 500 px — 15 / 0,03 = 500 px ist
   die Höhe, unter der dieser Verlauf zu steil würde. Sie greift auf
   keinem geprüften Fenster ein und ist reine Absicherung gegen späteres
   Kürzen des Abschnitts.

   background-color, NICHT die Kurzform background: karriere.css wird nach
   base.css geladen, und `background:` würde das background-image der
   .fl-Klasse wieder auf none setzen. Die Farbe bleibt trotzdem stehen —
   als Rückfall, wenn der Verlauf einmal nicht greift. */
/* KOMPAKTER SEIT 01.09.2026 — Optimierungsbriefing, Abschnitt 11, DESIGN
   „Mehr als ein Arbeitsplatz kompakter": „Die Section darf nicht wie ein
   riesiges weisses Feld mit einem kleinen Textblock wirken. Vertikale
   Abstaende deutlich reduzieren, Textblock breiter beziehungsweise naeher
   an ein unterstuetzendes Bild oder Designelement ruecken."

   Gemessen vorher bei 1440: Abschnitt 716 px hoch, Textblock 461 px breit
   — also ein Textstreifen von gut einem Drittel der Behaelterbreite in
   einem Feld von 716 px. Drei Eingriffe:
     1. --kar-luft ist von 96 auf 64 gefallen (Kopf der Datei).
     2. Der Textblock steht jetzt LINKS in einer Zweispalte und ist auf
        66ch (rund 74 Zeichen) verbreitert; rechts daneben ein Bild aus
        dem Bestand (kar-zusammenarbeit: Haende ueber einem Grundriss —
        „gemeinsam etwas aufbauen, das Bestand hat"). Das Bild ist so
        gedeckelt, dass es die Zeile NICHT hoeher macht als der Text
        (Rechnung bei .kar-wer__bild).
     3. Die inneren Abstaende sind von 32/32/48 auf 24/28/32 gegangen.
   Die min-height von 500 px bleibt: sie sichert die Steilheit des
   Creme-nach-Weiss-Verlaufs (15 Einheiten / 0,03 = 500 px, siehe oben)
   und wird vom Inhalt ohnehin ueberschritten — sie haelt keine Leerhoehe
   vor. */
.kar-wer {
  padding: var(--kar-luft) 0;
  min-height: 500px;
  background-color: var(--kar-creme);
}

/* --- EINSPALTIG — KUNDENWUNSCH 31.08.2026 --------------------------------
   Das Bildfenster mit den beiden Geschäftsführern ist raus („Entferne
   bitte erst mal das Bild von den zwei Geschäftsführern."), ersatzlos.
   Damit fällt auch die Zweispaltigkeit vom 30.08.2026 weg — sie gab es
   nur, weil rechts ein Bild stand.

   MITTIG SEIT DEM 31.08.2026 — ZWEITER KUNDENWUNSCH DESSELBEN TAGES.
   „Der ist linksbündig, aber der muss mittig sein auf der Section."
   Kleinzeile, Überschrift und Fließtext stehen jetzt zentriert, und der
   Block selbst sitzt mittig im Abschnitt.

   DAMIT IST DIE VORLAGE WIEDER ERREICHT. Sie setzt diesen Abschnitt
   einspaltig und durchgehend mittig in einer Satzbreite von 707,1 px.
   Die Linksbündigkeit war eine Anweisung vom 30.08.2026 und gehörte zur
   Zweispaltigkeit mit dem Bild rechts; mit dem Bild ist sie gefallen.

   WAS BLEIBT: die vertikalen Abstände 46 (Etikett → Überschrift) und 48
   (Überschrift → Text) auf den gemessenen Werten der Vorlage.

   `display: grid` bleibt als einspaltiges Raster stehen — es kostet
   nichts, hält die Struktur .kar-wer__raster > .kar-wer__spalte im
   Markup unverändert und wäre die Stelle, an der eine zweite Spalte
   wieder anzusetzen hätte. `justify-items: center` zentriert nicht den
   Text, sondern die SPALTE im Abschnitt — das ist das „mittig auf der
   Section" aus dem Kundenwunsch. Die Textmitte darin macht
   `text-align: center` an den drei Bausteinen. */
.kar-wer__raster {
  display: grid;
  justify-items: center;
  gap: 40px;
}
.kar-wer__spalte { width: 100%; }

/* ZWEISPALTE UNTER DER UEBERSCHRIFT — 01.09.2026, Optimierungsbriefing,
   Abschnitt 11. Kleinzeile und Ueberschrift bleiben mittig ueber die
   volle Breite (Kundenwunsch vom 31.08.2026, „mittig auf der Section");
   DARUNTER stehen Text und Bild nebeneinander. Die Spalte ist dafuer
   selbst ein Raster: die drei Bausteine oben spannen ueber beide
   Spalten, Text und Bild teilen sich die Zeile darunter.

   SPALTENMASSE: der Text ist auf 66ch gedeckelt (Cormorant zaehlt rund
   1,14 Zeichen je ch, also etwa 74 Zeichen — knapp unter der Grenze von
   75, ab der das Auge beim Ruecksprung die Zeile verliert; die 58ch von
   vorher waren 65 Zeichen). Das Bild bekommt hoechstens 480 px — bei
   3 : 2 sind das 320 px Hoehe, der Textblock daneben misst 317 px. Die
   Zeile ist damit so hoch wie der Text, keinen Bildpunkt hoeher als
   noetig.

   FUENF SPUREN, NICHT ZWEI, und das ist gemessen: ein zweispaltiges
   Raster aus 66ch + 64 px + 480 px ist 1048 px breit und damit schmaler
   als der Behaelter (1250). Die Ueberschrift spannte dann nur ueber diese
   1048 px und brach von einer in zwei Zeilen — 68 px mehr Hoehe, also
   genau das Gegenteil des Ziels (gemessen: 701 statt 652 px). Deshalb
   zwei Ausgleichsspuren aussen (1fr / 1fr): das Raster fuellt den
   Behaelter, Kleinzeile, Ueberschrift und Goldstrich spannen ueber alle
   fuenf Spuren und damit ueber die volle Breite, Text und Bild sitzen in
   den Spuren 2 und 4 und stehen ueber die Ausgleichsspuren mittig. Die
   64 px Rinne ist die dritte Spur — kein column-gap, der wuerde auch
   zwischen die Ausgleichsspuren fallen.

   `align-items: center`: Text und Bild sind nicht exakt gleich hoch, und
   die kuerzere Seite soll mittig neben der laengeren stehen statt oben zu
   kleben. */
@media (min-width: 900px) {
  .kar-wer__spalte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 66ch) 64px minmax(0, 480px) minmax(0, 1fr);
    align-items: center;
  }
  .kar-wer__etikett,
  .kar-wer .kar-titel,
  .kar-goldstrich { grid-column: 1 / -1; }
  .kar-wer__text { grid-column: 2; }
  .kar-wer__bild { grid-column: 4; }
}

/* MITTIG SEIT 31.08.2026 — Kundenwunsch, siehe oben bei .kar-wer__raster.
   Bis dahin stand hier `text-align: left` an beiden. */
.kar-wer__etikett {
  text-align: center;
  font-size: var(--kar-fs-fliess);
  line-height: var(--kar-lh-fliess);
}

/* 20 + 26 aus der Bauaufnahme (Abstand plus Zeilenabstand). */
/* 24 STATT 32 — 01.09.2026, Optimierungsbriefing, Abschnitt 11: die
   inneren Abstaende dieses Abschnitts sind reduziert. 24 ist der Schritt,
   den die Textgruppen auf der Navyflaeche zwischen ihren Bausteinen
   halten (Raute → Ueberschrift 28, Ueberschrift → Unterzeile 20).
   Vorher: margin-top: var(--kar-eng) */
.kar-wer .kar-titel { margin-top: 24px; text-align: center; }

/* --- DER SATZSPIEGEL — der eigentliche Eingriff vom 31.08.2026 ------------
   Mit dem Bildfenster ist die rechte Spalte weggefallen, und die hatte den
   Satz bisher nebenbei begrenzt: 531 px, gemessene 74 Zeichen je Zeile.
   Ohne Deckel liefe der Text jetzt über die volle Behälterbreite — bei
   1920 px sind das 1250 px und rund 175 Zeichen. Ab etwa 75 Zeichen
   verliert das Auge beim Rücksprung an den Zeilenanfang die Spur; genau
   deshalb steht hier ein Deckel und nicht `width: auto`.

   DER DECKEL STEHT IN `ch` UND NICHT IN PIXELN. `ch` ist die Breite der
   Ziffer Null der laufenden Schrift — der Deckel wandert damit mit, wenn
   die Schriftgröße einmal geändert wird, und die Zeichenzahl bleibt.
   Ein Pixelwert wäre nach der nächsten Größenänderung wieder falsch.

   58ch UND NICHT 65ch: die Null des Cormorant Garamond ist deutlich
   breiter als seine mittlere Kleinbuchstabenbreite (7,95 px gegen
   6,97 px bei 16,66 px Schriftgröße), `ch` zählt also nicht eins zu eins
   in Zeichen — ein ch sind hier rund 1,14 Zeichen. Nachgemessen an
   diesem Text (Wortlaut vom 30.08.2026, Zeile für Zeile über
   Range-Rechtecke gezählt, nicht überschlagen):

       Deckel      Breite     längste Zeile
       707,1 px    707 px     95 Zeichen   (Vorlage, zu breit)
       531 px      531 px     74 Zeichen   (Stand mit Bild)
       58ch        460,9 px   65 Zeichen   ← hier
       (zum Vergleich: 50ch = 397,3 px = 57 Zeichen, spürbar zu schmal
        für einen Abschnitt dieser Breite)

   65 Zeichen liegen im ruhigen Bereich und deutlich unter der Grenze von
   75. Bei 390 px greift der Deckel nicht — dort ist der Behälter mit
   342 px ohnehin schmaler, längste Zeile 50 Zeichen.
   Die 707,1 px der Bauaufnahme bleiben als zweiter, weicherer Deckel
   stehen: er greift nirgends mehr, hält aber den gemessenen Wert der
   Vorlage in der Datei.

   FETTER SEIT 31.08.2026, KUNDENWUNSCH: „packst den Text bei ‚Wer ist es'
   mit dick." Der Absatz steht auf 500 statt 400. Das ist eine ECHTE
   Schnittstufe und kein vom Browser gerechnetes Fett —
   CormorantGaramond-500-latin.woff2 liegt vor und ist in fonts.css
   angemeldet. Die zwei Kernsätze darin stehen auf 600 (siehe strong
   unten), sodass der Absatz innen noch eine Rangfolge hat.

   AM KONTRAST ÄNDERT DAS NICHTS ZUM SCHLECHTEREN. Die Farbe bleibt
   --ink-black #2B2E33; ein kräftigerer Schnitt legt mehr volle statt
   halbdeckender Bildpunkte, der gemessene Wert am Bildpunkt kann dadurch
   nur steigen. Nachgemessen am fertigen Bild bei 1440 px, Grundton aus
   dem echten Bildpunkt neben der Zeile gelesen (der Abschnitt läuft von
   Creme nach Weiß, ein fester Grundwert wäre hier falsch):

       Absatz 1, fw 500   #2B2E33 auf (252,250,249)   13,09:1
       Absatz 2, fw 500   #2B2E33 auf (253,252,251)   13,30:1
       strong,   fw 600   #2B2E33 auf (251,249,248)   12,98:1
       Überschrift fw 300 #2B2E33 auf (250,248,246)   12,86:1

   Alles weit über 4,5:1; der schwerere Schnitt kostet nichts.
   Absatzabstand 21 px, also genau eine Zeile. */
/* 66ch STATT 58ch UND LINKSBUENDIG NEBEN DEM BILD — 01.09.2026,
   Optimierungsbriefing, Abschnitt 11 („Textblock breiter beziehungsweise
   naeher an ein unterstuetzendes Bild ruecken"). Die Rechnung oben gilt
   weiter: 66ch sind rund 74 Zeichen, gemessen an derselben Schrift.
   Linksbuendig NUR in der Zweispalte ab 900 px: ein mittig gesetzter
   Absatz neben einem Bild hat zwei Flatterkanten, und die dem Bild
   zugewandte franst gegen dessen gerade Kante aus. Darunter, einspaltig
   und ohne Bild, bleibt der Absatz mittig wie am 31.08.2026 gewuenscht.
   Vorher: max-width: min(58ch, 707.1px); margin: var(--kar-eng) auto 0 */
.kar-wer__text {
  max-width: min(66ch, 707.1px);
  margin: 28px auto 0;
  display: grid;
  gap: 21px;
  text-align: center;
  font-size: var(--kar-fs-fliess);
  line-height: var(--kar-lh-fliess);
  font-weight: 500;
  color: var(--ink-black);
}
@media (min-width: 900px) {
  .kar-wer__text { text-align: left; margin-inline: 0; }
}
/* Die zwei Kernsätze. `font-weight` ausdrücklich gesetzt und nicht dem
   Browservorgabewert `bolder` überlassen: `bolder` rechnet sich relativ
   zum Elternwert und läge auf 500 bei 700 — das wäre der schwerste
   vorhandene Schnitt und genau das laute Fett, das hier nicht hinsoll.
   600 ist eine Stufe über dem Absatz und ebenfalls eine gelieferte
   Schnittdatei. */
.kar-wer__text strong { font-weight: 600; }

/* --- DIE GOLDENE TRENNLINIE — 31.08.2026, KUNDENWUNSCH --------------------
   „Nicht ganz nach rechts und ganz links, sondern nicht die ganze Breite."
   Eine kurze, mittige Linie zwischen „Wer ist Estera?" und dem Laufband
   „Das sagt unser Team" darunter.

   MASS UND MACHART SIND DIE DES KOPFSTRICHS DER STARTSEITE
   (.abl__kopfstrich in assets/css/ablauf.css; die Datei ist dafuer nur
   GELESEN worden). Dort: `width: clamp(42px, 3.85vw, 60px)`, 1 px hoch,
   in var(--abl-gold) #A8874F. Hier steht --gold aus base.css, derselbe
   Ton — er ist die Akzentfarbe des Projekts und liegt im selben Wert.

   Sie ist REINE GRAFIK und keine Schrift: 3,05:1 auf hellem Grund genuegt
   dafuer. Dieselbe Einordnung wie beim Haarstrich der Merkmalkaesten auf
   den Stellenseiten (--stl-zeichen).

   DER ABSTAND IST GROSSZUEGIG (unten mehr als oben): sie soll den Abschnitt
   abschliessen und nicht am Text kleben. Oben die Regelluft --kar-luft
   halbiert, unten ganz — darunter folgt kein Text mehr, sondern die
   Oberkante des Laufbands.

   `color` und nicht `fill`/`stroke`: der Pfad im Markup faerbt sich ueber
   `currentColor`, dieselbe Bauart wie auf der Startseite. Wer die Farbe
   aendern will, aendert sie hier an einer Stelle.

   SIE HEISST .kar-goldstrich UND NICHT .kar-strich, obwohl das kuerzer
   waere: weiter unten in dieser Datei steht schon ein `@keyframes
   kar-strich`. Klassen und Bildfolgen leben zwar in getrennten
   Namensraeumen und kaemen sich technisch nicht ins Gehege — beim Suchen
   und Lesen aber sehr wohl. */
/* margin-top fest 32 px statt --kar-luft/2 — 01.09.2026, Abschnitt 11:
   --kar-luft ist auf 64 gefallen, die Haelfte davon waeren 32, also
   derselbe Wert; er steht hier fest, damit ein spaeteres Drehen an der
   Abschnittsluft nicht den Abstand INNERHALB des Abschnitts mitzieht. */
.kar-goldstrich {
  display: block;
  width: clamp(42px, 3.85vw, 60px);
  height: 1px;
  margin: 32px auto 0;
  color: var(--gold);
}


/* --- DAS BILDFENSTER — SEIT 31.08.2026 OHNE MARKUP ------------------------
   ES GIBT AUF karriere.html KEIN .kar-wer__bild MEHR. Der Kunde hat das
   Bild der beiden Geschäftsführer am 31.08.2026 herausnehmen lassen
   („Entferne bitte erst mal das Bild von den zwei Geschäftsführern."),
   ersatzlos und samt Rahmen. Die <figure> ist aus dem Markup raus.

   DIESER BLOCK BLEIBT TROTZDEM STEHEN, und das ist eine Entscheidung
   und kein Versehen. Der Kunde hat „erst mal" gesagt, die zwei
   Bilddateien liegen unverändert unter assets/img/karriere/gf-zusammen.jpg
   und .webp, und sie haben vier Anläufe gekostet. Was zum Wiedereinsetzen
   nötig ist, ist damit genau dies:

     1. Die <figure class="kar-wer__bild"> wieder in .kar-wer__raster
        hinter .kar-wer__spalte setzen (Bauart siehe git-Verlauf,
        Stand 30.08.2026).
     2. In .kar-wer__raster die Regel für ab 1024 px wieder aufnehmen:
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
        gap: 72px; align-items: center;
     3. Den Deckel in .kar-wer__text zurücknehmen — die rechte Spalte
        begrenzt den Satz dann wieder von selbst auf 531 px / 74 Zeichen.

   Die Regeln darunter greifen bis dahin ins Leere; ein Selektor ohne
   passendes Element kostet nichts. Dasselbe gilt für die Einträge zu
   .kar-wer__bild im Bewegungsblock am Ende dieser Datei.

   Verhältnis 3:2 quer — das Maß der gelieferten Datei (3072 × 2048). Der
   Rahmen steht im selben Verhältnis, es wird also nichts beschnitten.
   `aspect-ratio` steht am RAHMEN, nicht am Bild: das Fenster hält sein Maß
   dann auch, während das Bild noch lädt, und die Zeile springt nicht.

   object-position: 50% 35% ist eine Absicherung, keine Wirkung im
   Normalfall. Bei deckungsgleichem Verhältnis schneidet cover nichts weg.
   Fiele das Fenster durch eine spätere Änderung einmal höher aus als 3:2,
   griffe cover seitlich — und der Wert hält die Köpfe, die im oberen
   Drittel sitzen, sicher im Bild statt sie oben abzuschneiden.

   Zurückhaltend gerahmt: 12 px Radius und die Navy-Haarlinie des Projekts,
   wie an den Stimmenkarten. KEIN Kasten in der Stärke der Stellenkarten —
   den hat der Kunde ausdrücklich für die zwei Stellen verlangt; hier steht
   ein einzelnes Foto, und eine kräftige Umrandung sähe wie ein
   Passepartout aus. */
/* WIEDER IM MARKUP SEIT 01.09.2026 — Optimierungsbriefing, Abschnitt 11,
   und zwar mit einem ANDEREN BILD als dem herausgenommenen: nicht die
   beiden Geschaeftsfuehrer (Kundenwunsch vom 31.08.2026 bleibt gewahrt),
   sondern kar-zusammenarbeit aus dem Bestand — Haende ueber einem
   Grundriss, ohne Gesicht, 1254 × 1254 px. Bei hoechstens 480 px
   Anzeigebreite ist die Datei 2,6-fach so breit wie noetig.

   3 : 2 STATT 1 : 1: die Datei ist quadratisch, das Fenster nicht. Bei
   480 px Breite ist das Fenster 320 px hoch — der Textblock daneben
   misst 317 px (gemessen bei 1440). Das Bild macht die Zeile also NICHT
   hoeher als der Text, und genau das war die Bedingung, unter der ein
   Bild hier hinein durfte. cover schneidet oben und unten je ein Sechstel
   ab; object-position 50 % haelt den Grundriss und die Haende in der
   Mitte, Kaffeetassen und Notizbuch am Rand fallen weg.

   DIE UEBRIGEN WERTE (Rahmen, Radius, Platzhalterflaeche) sind die vom
   30.08.2026 und unveraendert. */
.kar-wer__bild {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-cool);
}
.kar-wer__bild picture { display: block; height: 100%; }
.kar-wer__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* UNTER 900 px OHNE BILD. Dort gibt es keine Zweispalte; ein Bild
   UNTER dem Text wuerde den Abschnitt um seine ganze Hoehe verlaengern
   (bei 390 px: 342 × 228 px), und genau das verlangt das Briefing nicht
   — es verlangt weniger Leerflaeche neben dem Text, nicht mehr Laenge
   darunter. Die Mobiloptimierung folgt in einem eigenen Durchgang; wer
   das Bild dort haben will, nimmt diese Regel heraus. */
@media (max-width: 899px) {
  .kar-wer__bild { display: none; }
}


/* ===========================================================================
   6b  „ENTDECKE, WAS UNSERE MITARBEITER SAGEN" — Laufband

   NACHTRAG VOM 29.08.2026, Kundenwunsch. Dieser Abschnitt steht NICHT in
   der Bauaufnahme von wiesedental.de — er ist eine Ergänzung. Damit später
   niemand ihn gegen die Vorlage prüft und für falsch hält, steht das hier.

   Die BAUART des Bandes ist dagegen gemessen: sie folgt den zwei Bändern
   aus der Bauaufnahme der Stellenseiten (estate/bericht.md, Abschnitt 4.1
   und 8.6):

     - reines CSS, @keyframes plus transform, kein Javascript
     - 60,0 px/s, linear, endlos
     - drei identische Sätze im DOM; eine Satzbreite ist genau der Weg,
       den die Spur zurücklegt — dadurch ist der Umlauf nahtlos
     - auf JEDER Fensterbreite gleich schnell, auch auf dem Telefon
     - kein Anhalten beim Überfahren

   ZWEI ABWEICHUNGEN, beide gewollt:
   1. RICHTUNG. Die Bänder der Stellenseiten laufen nach links. Dieses
      läuft nach rechts — ausdrücklich, damit die beiden Seiten nicht wie
      dieselbe Schleife wirken.
   2. NACHTRAG 30.08.2026 — die Kantenmaske kam auf Kundenwunsch dazu.
      Bis dahin lief das Band mit harten Kanten am Fensterrand; das steht
      unten bei .kar-band ausführlich.

   DIE RECHNUNG FÜR DIE DAUER — nachrechnen, wenn Kartenbreite oder Abstand
   geändert werden, sonst stimmt das Tempo nicht mehr:

       Satzbreite = 8 Karten × (320 + 24) = 2752 px
       Dauer      = 2752 / 60 px/s        = 45,8667 s

   WICHTIG: der Abstand zwischen den Karten steht als margin-right an der
   KARTE, nicht als `gap` an der Spur. Mit `gap` wäre die Spur um einen
   Abstand schmaler als drei volle Sätze (8232 statt 8256 px), ein Drittel
   davon wären 2744 statt 2752 px — und bei jedem Umlauf spränge das Band
   um 8 px. Mit margin-right ist ein Drittel der Spur exakt eine Satzbreite.
   =========================================================================== */

/* Weiß — gebunden, nicht vergessen: der Schleier des Laufbands blendet
   gegen DIESEN Grund aus, und der Kunde hat einen weißen Schleier
   verlangt. Begründung ausführlich im Farbblock oben.

   DIESER ABSCHNITT TRÄGT KEINEN VERLAUF, und das ist Absicht, keine
   Lücke: schon der Ausläufer eines Cremeverlaufs hier würde aus dem
   weißen Schleier des Laufbands einen cremefarbenen machen. Der Grund ist
   von der ersten bis zur letzten Bildzeile #FFFFFF.

   Seine Oberkante braucht auch keinen: der Cremeabschnitt darüber trägt
   .fl-creme-nach-weiss und ENDET auf genau diesem Weiß. Seine Unterkante
   stößt an Navy 800 und bleibt nach der Entscheidung vom 30.08.2026 eine
   saubere Kante. */
/* DICHTER SEIT 01.09.2026 — Optimierungsbriefing, Abschnitt 11, DESIGN
   Teamstimmen: „Grosse Leerflaechen ober- und unterhalb reduzieren.
   Karten etwas groesser beziehungsweise textlich besser lesbar machen,
   aber die Section insgesamt niedriger halten."
   Die Luft kommt aus --kar-luft (jetzt 64 statt 96, Kopf der Datei);
   die Karten sind bei .kar-band__karte breiter und ihr Text groesser
   geworden. Gemessen vorher 483 px bei 1440. */
.kar-stimmen {
  padding: var(--kar-luft) 0;
  background-color: var(--paper);
  overflow: hidden;            /* die Spur ist breiter als das Fenster */
}

/* --- DIE KANTENMASKE — KUNDENWUNSCH 30.08.2026 ----------------------------
   Bis heute lief das Band mit harten Kanten am Fensterrand. Der Kunde will,
   dass die Karten links aus einem weißen Schleier heraustreten und rechts
   wieder hineinlaufen.

   Gebaut als echte Kantenmaske nach der Bauart der Stellenseiten-Vorlage
   (estate/bericht.md, Abschnitt 4.1, Band B):
   mask-image: linear-gradient(90deg, transparent, #000 x%, #000 100−x%,
   transparent).

   WARUM HIER DIE MASKE GEHT UND IN stelle.css NICHT.
   Dort ist sie durch einen aufliegenden Verlauf ersetzt, aus zwei Gründen
   (stelle.css, Kommentar bei .stl-band--b::after): die Spur ist drei
   Satzbreiten breit und wandert, und der Kasten trägt eine Navy-Fläche,
   die mit weggemaskt würde. Beides trifft hier nicht zu:
     - Die Maske liegt auf .kar-band, dem Behälter mit overflow: hidden.
       Der ist genau fensterbreit und steht still; nur sein Inhalt wandert.
       Der Schleier steht damit am Fensterrand, nicht am Bild.
     - .kar-band trägt selbst KEINE Fläche. Was durch die ausgeblendeten
       Kanten scheint, ist das weiße --paper von .kar-stimmen — also genau
       der weiße Schleier, der gewünscht ist.

   -webkit-mask-image steht daneben: ohne das Präfix greift die Maske in
   Safari nicht.

   DER GEWÄHLTE WERT: 30 % je Seite ab 768 px, 9 % darunter.

   NACHGESCHÄRFT AM 30.08.2026. Zuerst standen hier 12 % je Seite. Das war
   rechnerisch sauber (bei 1024 px blieben gut zwei Karten unangetastet),
   dem Kunden aber zu schwach: der Schleier soll KRÄFTIGER sein und WEITER
   ZUR MITTE reichen, die Karten sollen sichtbar aus dem Weiß heraustreten
   und wieder hineinlaufen statt nur an der äußersten Kante auszufransen.
   30 % ist der Wert, der in beiden genannten Spannen liegt (25–30 und
   30–35). Gerechnet gegen die feste Kartenbreite von 320 px:

       Fenster   Schleier je Seite   Mitte (voll)   ≙ Karten
        1920      30 % = 576,0        768,0          2,4
        1440      30 % = 432,0        576,0          1,8
        1024      30 % = 307,2        409,6          1,3
         390       9 % =  35,1        319,8          1,0

   Dass bei 1440 und 1024 px keine zweite Karte mehr unangetastet steht,
   ist ausdrücklich hingenommen — der Eindruck geht hier vor.

   BEI 390 px BLEIBT ES BEI 9 %, und die Rechnung von vorhin gilt
   unverändert weiter: 30 % je Seite wären dort ein Mittelteil von 156 px,
   also nicht einmal eine halbe Karte. Es stünde NIE eine Karte
   unangetastet da, jede wäre immer ausgeblichen. Mit 9 % misst der
   Mittelteil 319,8 px und damit genau eine Kartenbreite — auf dem Telefon
   steht immer genau eine Karte voll da, links und rechts läuft die
   nächste in den Schleier.

   DER VERLAUF IST NICHT GERADLINIG, sondern eine weiche S-Kurve
   (0 → 0,10 → 0,50 → 0,90 → 1 auf den Vierteln des Schleiers). Zwei
   Gründe, beide vom Kunden benannt:
     - Am äußeren Rand bleibt es länger wirklich weiß. Der Schleier wirkt
       dadurch KRÄFTIGER als eine gerade Rampe derselben Breite.
     - Er wird FRÜHER VOLL DECKEND: ab drei Vierteln der Schleierbreite
       liegt die Deckung schon bei 0,90. Rechnet man erst ab dort mit
       „steht da", bleibt in der Mitte deutlich mehr stehen:
       1920 → 1056 px (3,3 Karten), 1440 → 792 (2,5), 1024 → 563 (1,8),
       390 → 337 (1,05).
     - Und die Kurve läuft an beiden Enden flach aus, es gibt also keine
       sichtbare Kante, an der der Verlauf anspringt.

   BEI reduce IST DIE MASKE ABGESCHALTET — siehe Abschnitt 10. Dort bricht
   das Band in eine stehende Gruppe um, und eine Kantenmaske würde die
   äußeren Karten dieser Gruppe ausbleichen, obwohl sie gelesen werden
   sollen. */
.kar-band {
  /* 24 statt --kar-eng (32) — 01.09.2026, Abschnitt 11: die Section soll
     insgesamt niedriger werden; 24 ist der Schritt Ueberschrift → naechster
     Baustein, den auch „Mehr als ein Arbeitsplatz" jetzt haelt. */
  margin-top: 24px;
  overflow: hidden;

  --kar-schleier: 9%;
  --kar-maske: linear-gradient(90deg,
      rgba(0, 0, 0, 0)    0,
      rgba(0, 0, 0, 0.10) calc(var(--kar-schleier) * 0.25),
      rgba(0, 0, 0, 0.50) calc(var(--kar-schleier) * 0.5),
      rgba(0, 0, 0, 0.90) calc(var(--kar-schleier) * 0.75),
      rgba(0, 0, 0, 1)    var(--kar-schleier),
      rgba(0, 0, 0, 1)    calc(100% - var(--kar-schleier)),
      rgba(0, 0, 0, 0.90) calc(100% - var(--kar-schleier) * 0.75),
      rgba(0, 0, 0, 0.50) calc(100% - var(--kar-schleier) * 0.5),
      rgba(0, 0, 0, 0.10) calc(100% - var(--kar-schleier) * 0.25),
      rgba(0, 0, 0, 0)    100%);

  -webkit-mask-image: var(--kar-maske);
          mask-image: var(--kar-maske);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
@media (min-width: 768px) {
  .kar-band { --kar-schleier: 30%; }
}

@keyframes kar-band {
  /* NACH RECHTS: die Spur startet um genau einen Satz nach links versetzt
     und wandert auf null. Weil Satz 1 und Satz 2 wortgleich sind, ist der
     Rücksprung unsichtbar. */
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0); }
}

.kar-band__spur {
  display: flex;
  width: max-content;
  animation: kar-band 45.8667s linear infinite;
}

/* --- Die Karte ------------------------------------------------------------
   Grund der Section WEISS, Karten EBENFALLS WEISS — sie heben sich also
   über eine Kante ab, nicht über eine Fläche. Die Handschrift dafür steht
   im Projekt bereits: die Rezensionskarten der Startseite
   (referenzen.css, .rez__karte) tragen `1px solid` in einer Goldhaarlinie
   mit 0,42 Deckkraft und `border-radius: 12px`. Hier dieselbe Bauart, aber
   in Navy: --line ist die Navy-Haarlinie des Projekts
   (rgba(16,41,73,0.16), base.css). Kein Schatten, keine Füllung. */
/* 344 STATT 320 px BREIT — 01.09.2026, Optimierungsbriefing, Abschnitt 11
   („Karten etwas groesser beziehungsweise textlich besser lesbar"). Mit
   der Breite waechst die Satzbreite des Bandes: 8 × (344 + 24) = 2944 px.
   Die Umlaufzeit ist am Ende der Datei nachgezogen (2944 / 60 = 49,07 s),
   sonst liefe das Band schneller als die gemessenen 60 px/s.
   Vorher: flex: 0 0 320px; width: 320px */
.kar-band__karte {
  flex: 0 0 344px;
  width: 344px;
  margin-right: 24px;          /* NICHT gap — Begründung oben */
  position: relative;
  isolation: isolate;          /* hält das z-index:-1 des Zeichens im Kasten */
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

/* --- DAS ANFÜHRUNGSZEICHEN — KUNDENWUNSCH 30.08.2026 ----------------------
   „Entdecke, was unsere Mitarbeiter sagen" war dem Kunden zu langweilig.
   Der Aufbau bleibt unangetastet (weißer Grund, acht Karten, Schleier
   30 % ab 768 px und 9 % darunter, Bandtempo unverändert) — was fehlte,
   war ein Zeichen, das die Karten als ZITATE ausweist. Bisher war an
   keiner Stelle zu sehen, dass hier jemand spricht.

   ES IST EIN HINTERGRUNDBILD, KEIN SCHRIFTZEICHEN, und das ist Absicht:
   ein `content: '\201C'` würde von Vorlesegeräten mitgesprochen, und ein
   Anführungszeichen ohne schließendes Gegenstück vorgelesen zu bekommen
   ist Lärm. Eine Hintergrundgrafik gilt als schmückend und wird nicht
   angesagt; aria-hidden lässt sich an einem Pseudoelement nicht setzen.
   Gezeichnet ist das Zeichen selbst, nicht ein fremdes Symbol aus einer
   Zeichensammlung: je Hälfte eine Kugel mit einem Keil, der nach rechts
   oben ausläuft — die Form, die die Anführung im Schriftschnitt hat. Eine
   erste Fassung setzte Kugel plus geraden Schwanz nach unten; die las sich
   in der Ansicht als Ballon und ist verworfen.

   ES STEHT HINTER DEM TEXT (z-index: -1 im eigenen Stapel der Karte) und
   ist SEHR BLASS: --gold mit 10 % Deckkraft über Weiß ergibt #F6F3ED.
   Nachgerechnet, weil Text darüber laufen kann:

       Fließtext --ink-black auf reinem Weiß   13,62:1
       derselbe Text auf dem Zeichen           12,22:1

   Beides am Bildpunkt nachgemessen: der tiefste Ton, den das Zeichen in
   der Aufnahme erreicht, ist #F6F2ED. Die Anforderung liegt bei 4,5:1 —
   der Schleier kostet gut ein Zehntel des Wertes und bleibt weit darüber. Der Platz oben rechts ist zudem so
   gewählt, dass die fünf Sterne nicht berührt werden: die enden bei
   x = 129, das Zeichen beginnt bei x = 218. */
.kar-band__karte::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 16px;
  right: 18px;
  width: 84px;
  height: 54px;                /* 84 × 60/94, das Verhältnis der Zeichnung */
  opacity: 0.10;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 60' fill='%23A8874F'%3E%3Cpath d='M38 6C20 10 6 22 6 38a17 17 0 1 0 22-16C30 16 34 11 40 8Z'/%3E%3Cpath d='M90 6C72 10 58 22 58 38a17 17 0 1 0 22-16c2-6 6-11 12-14Z'/%3E%3C/svg%3E");
}

/* Fünf Sterne, Maße und Abstand wie bei den Rezensionskarten (17 px, 5 px).

   FARBE: --gold (#A8874F), nicht --sand (#D9B485) — und das ist eine
   bewusste Abweichung vom Wortlaut „in Sand, wie im Kopfbereich".
   Reines Sand misst auf WEISS 1,94:1; base.css hält dazu ausdrücklich
   fest: „Sand als FLÄCHE auf Weiß 1,94:1 — trägt keinen Rand". Im
   Kopfbereich steht Sand auf dunklem Grund und misst dort 6,4:1 — dort ist
   er richtig. Auf Weiß trägt in derselben Farbfamilie --gold mit 3,36:1
   und erfüllt damit die Grenze von 3:1 für nicht-textliche Zeichen.
   Nebeneinander gelesen sind es zwei Tiefen desselben Tons; die
   Rezensionskarten der Startseite setzen an derselben Stelle denselben
   Wert. Wer zwingend den helleren Ton will, braucht dort einen anderen
   Untergrund als Weiß. */
.kar-band__sterne {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}
.kar-band__sterne svg {
  width: 17px;
  height: 17px;
  fill: var(--gold);
}
/* --s ist die Nummer des Sterns in seiner Reihe und steuert nur den
   Versatz seines Auftritts (Abschnitt 9, Geste 7). In CSS gibt es keinen
   Zähler, der sich in eine Verzögerung rechnen ließe; fünf Zeilen sind
   billiger als eine Schleife in Javascript. Ohne Bewegung ist der Wert
   folgenlos. */
.kar-band__sterne svg:nth-child(1) { --s: 0; }
.kar-band__sterne svg:nth-child(2) { --s: 1; }
.kar-band__sterne svg:nth-child(3) { --s: 2; }
.kar-band__sterne svg:nth-child(4) { --s: 3; }
.kar-band__sterne svg:nth-child(5) { --s: 4; }

.kar-band__titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--kar-fs-lead);
  line-height: var(--kar-lh-karte);
  color: var(--ink-black);
}
/* 18 px STATT 16,66 — 01.09.2026, Optimierungsbriefing, Abschnitt 11 und
   19 („kleine Kartentexte vergroessern"). Der Kartentext ist der kleinste
   Fliesstext der Seite und der, der in Bewegung gelesen wird; er bekommt
   deshalb eine Stufe mehr als der stehende Fliesstext.
   Vorher: font-size: var(--kar-fs-fliess) */
.kar-band__text {
  margin-top: 10px;
  font-size: 18px;
  line-height: var(--kar-lh-fliess);
  color: var(--ink-black);
}


/* ===========================================================================
   7  „DEINE KARRIERE, UNSER ANGEBOT"

   Der Baukasten der Vorlage trennt Überschrift und Liste in ZWEI
   Abschnitte mit eigenen Innenabständen (bericht.md, 4a und 4b). Das ist
   übernommen, weil davon der Abstand zwischen Unterzeile und erster
   Kartenreihe abhängt.

       Abschnitt 4a, padding 27px 0 0
         y 2573  Überschrift, Spalte 1091,8
         +30,3
         y 2660  Unterzeile, 18 / 27, KRÄFTIG (nicht normal)
       Abschnitt 4b
         +29
         y 2716  Kartenreihe
         +38 unten
   =========================================================================== */

/* ===========================================================================
   DIE DURCHLAUFENDE NAVYFLÄCHE — KUNDENWUNSCH 30.08.2026

   Wörtlich: „Gefällt mir überhaupt nicht, dass dort so blau ist und dann
   kommt darunter wieder eine andere Farbe. Mach hier die Section darunter
   einfach auch in dem gleichen Blau wie ‚Deine Karriere, unser Angebot'."

   Deshalb trägt jetzt EIN Behälter (.kar-navy im Markup) die Fläche für
   BEIDE Abschnitte — das Kapitelblatt und die zwei Stellen. Die Abschnitte
   selbst sind durchsichtig. Zwischen ihnen gibt es damit keine Naht mehr.

   WARUM NICHT ZWEIMAL DIESELBE KLASSE. Zwei Flächen mit je eigenem Verlauf
   hätten an ihrer Nahtstelle einen Sprung: das Kapitelblatt endete bei
   #163153, die Stellen begännen wieder bei #102949 — 10 Einheiten Kante
   mitten in der Fläche, also genau das, was abgestellt werden sollte.

   DER VERLAUF ENDET AUF NAVY 900, DER FARBE DES FUSSBEREICHS.
   Das ist die zweite Naht, die damit verschwindet. .fuss trägt in
   schluss.css eine glatte Fläche in var(--navy-900) = #0A192E; bis heute
   stieß dort Navy 800 (#102949) an, 17 Einheiten Unterschied im stärksten
   Kanal und als Kante sichtbar. Jetzt kommt der Verlauf genau auf dieser
   Farbe an — die Flächen gehen ohne Übergangsstelle ineinander über.

   DIE STEILHEIT IST GERECHNET, NICHT GESCHÄTZT.
   #102949 → #0A192E, Kanäle R 6 · G 16 · B 27 — stärkster Kanal 27.
   Gemessene Höhe des Behälters (Kapitelblatt + Stellen):

       1920 / 1440   1254,72 px   27 / 1254,72 = 0,0215 je Bildpunkt
       1024          1249,72 px   27 / 1249,72 = 0,0216
        390          1944,34 px   27 / 1944,34 = 0,0139

   Alle drei unter dem Prüfmaß von 0,03. Der Weg ist hier immer noch
   dreimal so lang wie beim alten Verlauf über nur das Kapitelblatt
   (361,6 px), deshalb trägt die Fläche die volle Strecke bis Navy 900,
   obwohl diese 27 statt 10 Einheiten misst.

   NACHGERECHNET AM 30.08.2026, ALS DIE KÄSTEN NACH OBEN RÜCKTEN. Der
   Behälter hat dabei 200 px verloren (232 px Luft über den Kästen auf
   32 px), derselbe Farbweg verteilt sich also auf weniger Höhe und der
   Verlauf wird steiler: 0,0186 → 0,0215 je Bildpunkt. Das ist geprüft und
   liegt weiter unter 0,03, der Farbweg musste NICHT zurückgenommen
   werden. Der Puffer ist damit aber kleiner: wer den Behälter noch einmal
   um mehr als 350 px kürzt, muss den Endwert anheben — bei einer Höhe
   unter 900 px reißt die Rechnung.

   DIE OBERE KANTE BLEIBT HART. Dort stößt das Weiß des Stimmen-Abschnitts
   an Navy 800; zwischen Navy und Hell liegen rund 245 Einheiten, die auf
   keiner Strecke unauffällig unterzubringen sind (über 600 px noch 0,41
   je Bildpunkt). An Navy-Kanten gibt es keinen Verlauf — dort steht eine
   saubere Kante, und zwar die einzige, die bleibt.

   background-color als Rückfall: wenn das background-image der .fl-Klasse
   einmal nicht greift, steht die Fläche trotzdem in Navy. */
.kar-navy {
  background-color: var(--navy-800);
  --fl-navy800-b: var(--navy-900);
}

/* Das Kapitelblatt selbst ist jetzt durchsichtig — die Farbe kommt von
   .kar-navy.

   UNTEN OHNE INNENABSTAND — KUNDENWUNSCH 30.08.2026: „Die Kästen müssen
   weiter nach oben, dass sie direkt unter der Subline beginnen."

   Die 104 px unten waren der Abstand des Kapitelblatts gegen den NÄCHSTEN
   ABSCHNITT. Seit beide auf einer Fläche liegen, gibt es diesen nächsten
   Abschnitt optisch nicht mehr: Überschrift, Unterzeile und die zwei
   Kästen sind EIN Block. Zusammen mit den 96 px, die .kar-stellen oben
   abgelegt hat, standen zwischen Unterzeile und Kasten 232 px — mehr als
   die Höhe der ganzen Textgruppe darüber.

   Was bleibt, ist der Abstand INNERHALB eines Blocks: --kar-eng, 32 px,
   und der sitzt schon an .kar-liste. Gemessen (Unterkante des
   Unterzeilen-Kastens gegen Oberkante des Kastenrahmens):

       vorher  232,00 px   =  104 (hier) + 96 (.kar-stellen) + 32 (.kar-liste)
       nachher  32,00 px   =    0        +  0               + 32

   an allen vier Breiten gleich. Zum Vergleich die Abstände innerhalb der
   Textgruppe: Raute → Überschrift 28 px, Überschrift → Unterzeile 20 px.
   Die 32 px sind damit genau EIN Schritt weiter als die internen Abstände
   — die Kästen hängen an der Unterzeile, ohne mit ihr zu verkleben.

   OBEN BLEIBEN DIE 104 px DER VORLAGE. Sie sind der Abstand der Fläche
   gegen ihre eigene Oberkante, und die ist unverändert eine harte Kante
   gegen das Weiß darüber. */
/* 72 STATT 104 px OBEN — 01.09.2026, Optimierungsbriefing, Abschnitt 19
   („Grosse weisse Felder reduzieren" gilt sinngemaess fuer die Navyflaeche:
   der Kunde beanstandet Leerhoehe, nicht Farbe). 72 liegt zwischen der
   neuen Abschnittsluft (64) und dem alten Wert und laesst der harten
   Kante gegen das Weiss darueber genug Luft.
   Vorher: padding: 104px 0 0 */
.kar-angebot {
  padding: 72px 0 0;
}
/* Kontraste auf der Fläche, am HELLSTEN und am dunkelsten Punkt gemessen,
   den die Textgruppe berührt. Der Verlauf läuft jetzt von #102949 (ganz
   oben) nach #0A192E (an der Fusskante); das Kapitelblatt liegt im
   obersten Viertel und endet bei #0F2542:

                              auf #102949   auf #0F2542
       Weiß                     14,63:1       15,45:1
       Sand #D9B485              7,54:1        7,96:1
       Weiß 82 % (Unterzeile)   10,26:1       10,84:1

   Alle Werte sind mit der neuen Fläche BESSER geworden, weil der Grund
   nach unten dunkler wird statt heller. Der schlechteste Wert der Gruppe
   steht damit gleich am oberen Rand.

   Der Akzent steht hier in Sand statt im Blau der hellen Abschnitte: auf
   Navy trägt Blau auf Blau nicht, und es ist zugleich die Stelle, an der
   Sand als Handschrift zurückkommt. */
.kar-angebot .kar-titel { color: var(--paper); }
.kar-angebot .kar-akzent { color: var(--sand); }

/* DER RAUTENPUNKT — Sand als Akzent, die Handschrift der Startseite.
   Auf Navy misst Sand 7,55:1 und darf dort als Zeichen und Linie stehen
   (base.css, Farbblock). Eine feine Sandlinie links und rechts, in der
   Mitte die Raute: dasselbe Zeichen, das die Startseite über ihren
   Abschnittsüberschriften führt und das dieser Seite bisher fehlte. */
.kar-angebot__raute {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 28px;
}
.kar-angebot__raute::before,
.kar-angebot__raute::after {
  content: '';
  width: 56px;
  height: 1px;
  background: var(--sand);
  opacity: 0.55;
}
.kar-angebot__raute span {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--sand);
}
.kar-angebot .kar-titel,
.kar-angebot__unterzeile {
  max-width: min(100%, var(--kar-spalte));
  margin-inline: auto;
}
.kar-angebot__unterzeile {
  margin-top: 20px;
  text-align: center;
  font-size: var(--kar-fs-lead);
  line-height: var(--kar-lh-fliess);
  font-weight: 600;            /* Vorlage 700; Cormorant 600 ist hier der
                                  entsprechende Sprung gegen die 400 der
                                  Kartentexte */
  /* Weiß mit 82 % auf Navy: 10,26:1 am hellsten Punkt der Fläche (#102949,
     ganz oben), 10,84:1 am unteren Rand des Kapitelblatts (#0F2542). Das
     --ink-black, das hier bis zum 30.08.2026 stand, ergab auf der
     Navy-Fläche 1,3:1 und war nicht mehr zu lesen. Die Zeile steht bewusst
     etwas zurück gegen die volle Überschrift daneben, aber weit über der
     Anforderung. */
  color: rgba(255, 255, 255, 0.82);
}


/* ===========================================================================
   8  DIE STELLENLISTE

   Das Raster der Vorlage ist KEIN CSS-Grid:
     display:flex; flex-wrap:wrap; justify-content:center;
     align-items:stretch; gap:32px
   Vier Karten bei 1250 Behälter: (1250 − 3 × 32) / 4 = 288,5.

   ZWEI STATT VIER KARTEN — und was das kostet.
   Der Bericht rechnet vor: bei zwei Karten in 1250 wären das
   (1250 − 32) / 2 = 609 px je Karte. Das ist 2,1 mal die Breite des
   Originals und über vier mal die Fläche; die Karte hört auf, eine Karte
   zu sein, und wird ein Plakat. Der Kunde wollte die zwei Stellen „ein
   bisschen größer" — nicht doppelt so breit.

   GEWÄHLT: 420 px Deckel je Karte, also das 1,46-fache der Vorlage, und
   die Reihe als Ganzes auf 2 × 420 + 32 = 872 gedeckelt und mittig
   gestellt. Damit bleibt erhalten, was den Abschnitt ausmacht — eine Reihe
   gleich hoher Karten mit Bild, drei Textzeilen und zwei Knöpfen
   untereinander — statt zweier Plakate. Dass die Reihe schmaler ist als
   der Behälter, ist die sichtbare Folge davon, dass zwei Stellen
   ausgeschrieben sind und nicht vier; eine über den vollen Behälter
   gezogene Zweierreihe sähe nach einer kaputten Vierspalte aus.

   DIE KNÖPFE. In der Vorlage stehen sie untereinander, aber nicht per
   Absicht: beide tragen flex: 1 1 auto und wachsen auf volle Kartenbreite,
   bei 288,5 px passen sie schlicht nicht nebeneinander (bericht.md,
   Abschnitt 4). Der Bericht hält ausdrücklich fest, dass man das bei
   breiteren Karten ERZWINGEN muss, wenn man die Anordnung des Originals
   will. Genau das tut flex-basis: 100% unten — das Bild bleibt dasselbe.

   SPALTENZAHL. Die Vorlage entscheidet sie über eine Geräteerkennung am
   User-Agent statt über ein Media Query; mit Desktop-Kennung bleiben es
   vier Spalten bis hinunter auf 390 px (Karten dann 61,5 px breit,
   unbrauchbar). Der Bericht rät ausdrücklich, das im Nachbau mit einem
   normalen Media Query zu lösen. Unten: zwei Spalten ab 768 px, darunter
   eine über die volle Breite — das entspricht dem, was die Vorlage mit
   iPhone-Kennung zeigt.
   =========================================================================== */

/* KEINE EIGENE FLÄCHE MEHR — KUNDENWUNSCH 30.08.2026. Bis dahin stand hier
   Creme; der Kunde beanstandet ausdrücklich, dass unter dem Navy des
   Kapitelblatts „wieder eine andere Farbe" kommt. Der Abschnitt ist jetzt
   durchsichtig, die Farbe kommt vom Behälter .kar-navy und läuft über
   beide Abschnitte durch (Rechnung oben bei .kar-navy).

   ZWEI DINGE HÄNGEN DARAN, und beide sind unten gelöst:

   1. DIE KÄSTEN STEHEN JETZT AUF NAVY. Fläche, Randlinie und alle drei
      Schriftfarben darin sind neu gesetzt und am Bildpunkt nachgemessen —
      die alten Werte (weiße Fläche 1,07:1 gegen Creme, Randlinie
      rgba(16,41,73,0.55) mit 3,55:1 gegen Weiß) gelten auf Navy nicht
      mehr. Die Randlinie hätte dort 1,04:1 und wäre unsichtbar.
      Siehe .kar-karte unten.

   2. DIE UNTERE NAHT ZUM FUSS IST WEG. Der Verlauf des Behälters endet
      auf #0A192E, also genau der Farbe von .fuss. Vorher stieß dort
      Navy 800 (#102949) an Navy 900 — 17 Einheiten und als Kante sichtbar.

   Die MASSE der Kästen sind unberührt: 468 px breit, Bild 416 px mit
   24 px Luft ringsum. Nachgemessen nach der Verschiebung vom 30.08.2026:
   468 / 416 bei 1920 und 1440, 464 / 412 bei 1024, 342 / 290 bei 390 —
   Zahl für Zahl dieselben Werte wie vorher.

   OHNE INNENABSTAND OBEN — KUNDENWUNSCH 30.08.2026, „die Kästen müssen
   weiter nach oben". Die 96 px waren Abschnittsluft gegen das
   Kapitelblatt; seit beide auf EINER Fläche liegen, trennen sie etwas,
   das zusammengehört. Die vollständige Rechnung steht oben bei
   .kar-angebot. Unten bleiben die 96 px: dort stößt der Fußbereich an,
   und das ist weiterhin ein Abschnittswechsel. */
.kar-stellen {
  padding: 0 0 var(--kar-luft);
}

/* 968 px = 2 × 468 Kasten + 32 Rinne. Stand vorher auf 872 (2 × 420 + 32)
   und hätte die breiteren Kästen sonst wieder auf 420 zurückgedrückt —
   die max-width der Liste ist die eigentliche Fessel, nicht die der
   Karte. Mitgezogen mit der Verbreiterung aus Punkt 1. */
.kar-liste {
  max-width: 968px;
  margin: var(--kar-eng) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
}

/* DIE KARTE BEKOMMT EINEN KASTEN — ABWEICHUNG VON DER VORLAGE,
   KUNDENWUNSCH VOM 29.08.2026, NACHGESCHÄRFT AM 30.08.2026.

   In der Vorlage hat die Stellenkarte ausdrücklich KEINEN Kasten: kein
   Hintergrund, kein Rahmen, kein Schatten, sie steht nackt auf Weiß, und
   der einzige Radius im Inneren ist der des Bildes (bericht.md, 8.7 —
   „Wer eine Karte mit weißer Fläche und Schatten baut, macht ein anderes
   Bild").

   Der Kunde will die zwei Stellen ausdrücklich ALS KARTEN: eine Umrandung
   um das GANZE, das Bild oben im Kasten, darunter im selben Kasten Text
   und Knöpfe. Das ist also kein Versehen und kein Messfehler — es ist eine
   gewollte Abweichung.

   WARUM DIESE STELLE AM 30.08. EIN ZWEITES MAL ANGEFASST WURDE.
   Der erste Anlauf hat den Kasten baulich richtig gesetzt — 1 px --line um
   das ganze <li>, Bild bündig innen — und trotzdem nicht das gezeigt, was
   gemeint war. Der Kunde beschreibt den Stand so: „Das Bild geht, darunter
   ein Kasten los." An der Aufnahme ist genau das nachzuvollziehen, und der
   Grund ist rechnerisch:

       --line ist rgba(16,41,73,0.16). Über weißem Papier ergibt das
       #D9DDE2 und einen Kontrast von 1,36:1.

   Bei 1 px Stärke ist das neben einem Foto schlicht nicht zu sehen. Die
   dunkle Bildkante selbst wirkt als Abgrenzung, die Haarlinie daneben
   verschwindet — sichtbar wird die Linie erst UNTER dem Bild, wo sie auf
   Weiß gegen Weiß steht. Das Auge liest daraus: Foto, darunter beginnt ein
   Kasten. Genau der Eindruck, den der Kunde beanstandet hat.

   DIE ENTSCHEIDUNG: zwei zurückhaltende Mittel zusammen, kein Schatten.

   1. RANDLINIE 2 px.
   2. DIE KARTENFLÄCHE IST ABGESETZT — sie ist eine andere Fläche als die
      Seite ringsum. Zusammen mit der Randlinie macht das den Unterschied
      zwischen einem gezeichneten Umriss und einem KÖRPER, und genau das
      trägt die Lesart „zwei Kästen".

   BEIDE WERTE SIND AM 30.08.2026 EIN DRITTES MAL NEU GESETZT WORDEN, weil
   der Abschnitt vom Kunden auf Navy gestellt wurde. Was vorher hier stand,
   gilt auf Navy nicht mehr — und zwar nicht knapp:

       Randlinie rgba(16,41,73,0.55) — auf Weiß 3,55:1, auf Navy 1,04:1.
       Kartenfläche Weiß              — auf Creme 1,07:1, auf Navy 14,4:1.

   Eine Navy-Randlinie auf Navy ist unsichtbar, eine weiße Kartenfläche auf
   Navy ist ein Scheinwerfer. Beides wäre falsch. Die Fassung unten kehrt
   deshalb die Richtung um: die Karte hebt sich nach OBEN aus der Fläche,
   die Linie ebenso.

   DER GRUND, GEGEN DEN GEMESSEN WIRD, IST EIN VERLAUF. Die Kästen liegen
   im Behälter .kar-navy zwischen t = 0,336 und t = 0,934 des Verlaufs
   #102949 → #0A192E, der Grund um sie herum läuft also von #0E2440 an
   ihrer Oberkante nach #0A1A30 an ihrer Unterkante (Werte für 1920 px,
   an schmaleren Fenstern verschiebt sich das um wenige Einheiten). Jeder
   Wert unten ist an BEIDEN Enden gerechnet; genannt sind immer beide.

   1. KARTENFLÄCHE rgba(255,255,255,0.055).
      Weiß mit 5,5 % über dem Verlauf — also KEIN fester Farbwert, sondern
      eine Aufhellung, die den Verlauf mitgeht. Damit ist der Abstand zur
      Umgebung an der Oberkante derselbe wie an der Unterkante; ein fester
      Ton wäre oben zu dunkel und unten zu hell.
          oben  #1B304A gegen #0E2440   1,17:1
          unten #18273B gegen #0A1A30   1,15:1
      Zum Vergleich die gelobten Fassungen: 1,09:1 auf Weiß, 1,07:1 auf
      Creme. Der Abstand trägt hier also eine Spur weiter, und das ist
      Absicht — auf dunklem Grund braucht dieselbe Trennung etwas mehr.

   2. RANDLINIE 2 px in rgba(255,255,255,0.40).
          oben  außen 3,66:1   innen 3,46:1
          unten außen 3,77:1   innen 3,64:1
      Alle vier über 3:1, der Grenze für ein nicht-textliches Zeichen, und
      im selben Bereich wie die 3,55/3,25 der gelobten Fassung. Auch sie
      ist eine Aufhellung und geht den Verlauf mit.

   KEIN SCHLAGSCHATTEN — ausdrücklich ausgeschlossen und ohnehin richtig:
   im ganzen Projekt kommt kein einziger Schatten vor, weder in base.css
   noch in einer der Abschnittsdateien. Ein Schatten hier wäre das einzige
   erhabene Element der Seite und fiele als Fremdkörper auf. Die zwei
   gewählten Mittel bleiben flach und in der Palette.

   DAS BILD IST EIN BILDFENSTER IM KASTEN — KUNDENWUNSCH 30.08.2026.
   Vorher saß es bündig innen und füllte die Kastenbreite; es las sich
   damit als „Bild mit einem Rahmen drum". Jetzt bekommt es ringsum
   dieselbe Luft, die der Text darunter zum Rand hat — 24 px links,
   rechts und oben, der seitliche Einzug von .kar-karte__inhalt.

   DER KASTEN WÄCHST, DAS BILD BLEIBT. Ausdrücklich so verlangt, deshalb
   ist die Rechnung hier festgehalten:

       Bild 416 px + 2 × 24 px Luft + 2 × 2 px Rahmen = 468 px Kasten

   max-width geht damit von 420 auf 468 px, die flex-basis von 320 auf
   368 px — beides genau um die 48 px Luft plus die Rahmenstärke. Das Bild
   misst bei 1024 px und darüber unverändert 416 px.

   AUSNAHME BEI 390 px, und die ist unvermeidbar: dort ist der Kasten mit
   342 px schon so breit wie der Behälter, er KANN nicht wachsen. Die
   24 px Luft gehen deshalb vom Bild ab, es misst dort 290 statt 338 px.
   Die Alternative wäre, das Bild am Rand kleben zu lassen — genau das,
   was abgestellt werden sollte.

   FOLGE FÜR DIE RADIEN: das Bild bekommt seinen eigenen Radius zurück
   (12 px, der Projektwert), denn es liegt jetzt frei im Kasten und wird
   nicht mehr von dessen overflow: hidden beschnitten. Der Kasten braucht
   das overflow nun auch nicht mehr. */
.kar-karte {
  flex: 1 1 368px;
  max-width: 468px;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 0;
  border: 2px solid rgba(255, 255, 255, 0.40);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
}

/* DIE GANZE STELLENKARTE IST KLICKBAR — 01.09.2026, Optimierungsbriefing,
   Abschnitt 19 („ganze Karten klickbar, Hover/Fokus sichtbar,
   tastaturbedienbar"). Die Klasse --klick tragen NUR die zwei
   Stellenkaesten im Markup; die FAQ-Kaesten fuehren nirgendwohin und
   bleiben ohne. karriere.js leitet einen Klick auf die Kartenflaeche an
   den Verweis „Mehr erfahren" weiter (die Stellenseite — das ist das
   Ziel, auf das die Karte als Ganzes zeigt; „Jetzt bewerben" bleibt der
   ausdruecklichen Entscheidung am Knopf vorbehalten).

   TASTATUR: die Karte selbst ist KEIN Tab-Stopp — ihre zwei Knoepfe sind
   es schon, und ein dritter Halt auf derselben Karte waere ein Umweg.
   Sichtbar wird der Fokus ueber :focus-within: sobald einer der Knoepfe
   den Fokus hat, hebt sich die ganze Karte wie beim Ueberfahren.

   HOVER/FOKUS: Randlinie 0,40 → 0,70 (3,66:1 → 6,3:1 gegen den Grund),
   Flaeche 0,055 → 0,09. Beides Aufhellungen, die den Verlauf mitgehen —
   dieselbe Bauart wie die Ruhewerte. Der Uebergang liegt bei 0,3 s wie an
   den Knoepfen und ist bei reduce abgeschaltet (Abschnitt 10). */
.kar-karte--klick {
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.kar-karte--klick:hover,
.kar-karte--klick:focus-within {
  border-color: rgba(255, 255, 255, 0.70);
  background-color: rgba(255, 255, 255, 0.09);
}

/* Bild bündig, Text und Knöpfe eingerückt. Der gemessene Abstand von 20 px
   zwischen Bild und erster Zeile steht jetzt als padding-top hier. */
/* Die seitlichen 24 px sitzen jetzt am Kasten selbst — hier bleiben nur
   der Abstand zum Bild darüber und der Fuß. */
.kar-karte__inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 0 24px;
}
@media (max-width: 767px) {
  .kar-karte { flex-basis: 100%; }
}

/* --- Das Bild und das Seitenverhältnis ------------------------------------
   Die Vorlage erzwingt 1 : 1,02 (padding-bottom: 294,266px auf 288,5
   Breite), also praktisch ein Quadrat. Beide gelieferten Dateien stehen
   dagegen im Verhältnis 4:5:

       stelle-berater     1024 × 1280   (Platzhalter, ohne Gesicht)
       stelle-backoffice  1206 × 1506   (echte Aufnahme des Kunden)

   ENTSCHEIDUNG: 4:5, nicht auf 1 : 1,02 beschnitten. Drei Gründe.

   1. Das 1 : 1,02 der Vorlage ist keine gestalterische Entscheidung,
      sondern ein Rest ihrer Quelldatei: der Bericht weist die Quelle als
      289 × 289 px aus. Der INHALT ist in beiden Fällen ein Hochformat —
      dort ein Porträt, hier eine Aufnahme am Arbeitsplatz.
   2. Ein Beschnitt auf fast quadratisch nähme der echten Kundenaufnahme
      18 % der Höhe. Ob dabei Kopf oder Arbeitsplatz fällt, ließe sich hier
      nicht gegen die Absicht des Kunden prüfen. Die Dateien selbst werden
      nicht angefasst; ein Beschnitt liefe über aspect-ratio und
      object-fit: cover und wäre jederzeit nachzuholen.
   3. Beide Dateien tragen DASSELBE Verhältnis — und nur darauf kommt es
      für die Reihe an: die zwei Karten stehen dadurch gleich hoch.

   BEKANNTE FOLGE, damit sie nicht als Versehen gelesen wird: das Bild
   nimmt bei uns rund 60 % der Kartenhöhe ein, in der Vorlage sind es rund
   49 %. Das liegt am Verhältnis UND daran, dass die Karte breiter ist,
   während die Texthöhen darunter fest sind. Mit zwei statt vier Karten
   verschiebt sich diese Aufteilung ohnehin.

   Der eigene Radius von 8 px aus der Bauaufnahme ist mit dem Kasten
   entfallen — Begründung oben bei .kar-karte. */
/* Eigener Radius, seit das Bild frei im Kasten liegt (siehe .kar-karte).
   display: block nimmt die Grundlinienlücke unter dem Bild weg, sonst
   stünde unten ein paar Pixel mehr Luft als oben. */
/* 4 : 3 STATT 4 : 5 — 01.09.2026, Optimierungsbriefing, Abschnitt 12,
   DESIGN „beide Rollen gleichwertig": „Beide vollstaendigen Karten muessen
   auf einem Desktop-Bildschirm ohne zusaetzliches Scrollen sichtbar sein."
   Massstab 1440 × 900 unter der Kopfleiste von rund 104 px, also 796 px.
   Gemessen vorher: Karte 1090 px, davon Bild 520 px (416 × 5/4).
   Mit 4 : 3 misst das Bild 312 px; zusammen mit den dichteren Abstaenden
   und den nebeneinander stehenden Knoepfen kommt die Karte unter 796.
   Der Bildanteil sinkt damit von rund 48 % auf rund 42 % der Karte —
   naeher an den 49 % der Vorlage als vorher, nur von der anderen Seite.

   WAS DER BESCHNITT KOSTET: kar-beratung (1536 × 1024, 3 : 2) verliert
   bei 4 : 3 je 5,5 % links und rechts; stelle-backoffice (1206 × 1506,
   4 : 5) verliert 40 % seiner Hoehe. Damit dort der Kopf im Bild bleibt,
   traegt dieses Bild im Markup die Klasse --oben mit object-position
   50 % 18 % (Rechnung an der Regel darunter).
   Vorher: aspect-ratio: 4 / 5 */
.kar-karte__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  /* Platzhalterfläche, solange die Datei noch lädt. Seit die Karte auf
     Navy steht, ist das --paper-cool von vorher ein weißer Blitz im
     dunklen Kasten; hier dieselbe Aufhellung wie an der Karte, nur eine
     Spur stärker (#293C55 an der Kastenoberkante). */
  background: rgba(255, 255, 255, 0.06);
}
.kar-karte picture { display: block; }
/* Das Hochformat der Backoffice-Aufnahme im 4 : 3-Fenster: sichtbar sind
   60 % der Bildhoehe. Das Gesicht sitzt in der Datei zwischen 23 % und
   50 % der Hoehe, der Laptop beginnt bei 67 %.

   NACHGEZOGEN 04.09.2026, Kundenwunsch: „Das Bild der Dame muss nach oben
   verschoben werden, sodass man mehr von der Person sieht und nicht zu viel
   Leerlauf oben beim Bild hat. Die Bildposition soll gleich bleiben, aber
   das Bild musst du nach oben schieben, sodass der Kopf weiter oben am
   Bildrand ist."

   Die Rechnung: Bei `cover` und einem Bild, das hoeher ist als sein
   Fenster, waehlt der zweite Wert den Ausschnitt — 0 % zeigt den oberen
   Rand der Datei, 100 % den unteren. Sichtbar sind 60 % der Hoehe, der
   Ausschnitt beginnt also bei Lage × 0,4.
     18 %  ->  Ausschnitt  7,2 … 67,2 %  ->  Kopf 26 % unter der Bildkante
     42 %  ->  Ausschnitt 16,8 … 76,8 %  ->  Kopf 10 % unter der Bildkante
   Der Laptop (ab 67 %) bleibt im Ausschnitt, das Kinn wird nicht
   angeschnitten — sichtbar ist jetzt mehr Person und weniger Wand.
   Vorher: object-position: 50% 18% */
.kar-karte__bild--oben { object-position: 50% 42%; }

/* Abstände von oben nach unten wie gemessen: 20 · 10 · 20 · 26.
   Alle vier sind absolut, nicht mit der Kartenbreite skaliert — so hält es
   die Vorlage auch (die Größen sind ab 768 px fest). */
/* SAND ALS AKZENT auf der Kleinzeile.
   HIER STAND --gold-text (#86693A), solange die Karte hell war: 4,92:1 auf
   Weiß. Auf der Navy-Karte misst derselbe Ton 1,64:1 und ist unlesbar. Auf
   dunklem Grund trägt umgekehrt der HELLE Sand, den base.css für genau
   diesen Fall vorsieht:

       --sand #D9B485   auf #1B304A (Kastenoberkante) 6,91:1
                        auf #18273B (Kastenunterkante) 7,80:1

   Das ist besser als die 4,92:1 vorher, und es ist derselbe Sand, der
   zwanzig Zeilen darüber die Raute und den Akzent des Kapitelblatts trägt —
   die Kleinzeile gehört damit sichtbar zur selben Fläche.
   Gesperrt und in Versalien, damit sie als Kleinzeile liest und nicht als
   zu kleiner Fließtext. */
/* 16,66 STATT 21,42 px — 01.09.2026, Optimierungsbriefing, Abschnitt 12.
   Die Kleinzeile stand in der Leadgroesse und brach bei „VOLLZEIT ·
   IMMOBILIENABWICKLUNG & KUNDENBETREUUNG" in DREI Zeilen (96 px); das
   war ein Drittel der Texthoehe fuer eine Kleinzeile. In der
   Fliesstextgroesse (gesperrt, Versalien) bricht sie in zwei, und beide
   Karten kommen mit einer Zeile weniger aus. 16,66 px liegt ueber der
   Untergrenze von 16 px aus Abschnitt 19.
   NUR IN DEN STELLENKAESTEN: die Vertrauenszeile im Kopfbereich nutzt
   dieselbe Klasse und behaelt ihre Groesse ueber die Regel am Ende der
   Datei (.kar-kopf .kar-karte__art).
   Vorher: font-size: var(--kar-fs-lead) */
.kar-karte__art {
  text-align: center;
  color: var(--sand);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--kar-fs-fliess);
  line-height: var(--kar-lh-fliess);
}
.kar-kopf .kar-karte__art { font-size: var(--kar-fs-lead); }
/* Volles Weiß: 13,42:1 an der Kastenoberkante, 15,13:1 an der Unterkante.
   Das --ink-black von vorher ergäbe auf der Navy-Karte 1,55:1. */
.kar-karte__titel {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;            /* Vorlage 700, s. Unterzeile oben */
  font-size: var(--kar-fs-kartentitel);
  line-height: var(--kar-lh-karte);
  color: #fff;
}
/* Weiß mit 82 %, derselbe Rückschritt gegen die Überschrift wie bei der
   Unterzeile des Kapitelblatts: 9,39:1 oben, 10,59:1 unten. */
/* 16 px Abstand und Zeilenabstand 1,4 statt 20 px und 1,5 — 01.09.2026,
   Abschnitt 12: dichtere Innenabstaende, damit beide Karten bei 1440 × 900
   unter die Kopfleiste passen. Die Schriftgroesse bleibt auf der
   Leadgroesse (21,42 px); der Kartentext wird NICHT kleiner.
   Vorher: margin-top: 20px; line-height: var(--kar-lh-fliess) */
.kar-karte__bereiche {
  margin-top: 16px;
  text-align: center;
  font-size: var(--kar-fs-lead);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

/* margin-top: auto hält die Knopfgruppen beider Karten auf einer Linie,
   auch wenn eine Bereichszeile einmal zweizeilig umbricht. Die Vorlage
   fängt das über align-items: stretch ab; das allein genügt nur, solange
   der Rest gleich hoch ist. */
/* 24 statt 26 oben — 01.09.2026, Abschnitt 12, dichtere Innenabstaende.
   Vorher: padding-top: 26px */
.kar-karte__knoepfe {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* NEBENEINANDER STATT UNTEREINANDER — 01.09.2026, Optimierungsbriefing,
   Abschnitt 12. Untereinander kosteten die zwei Knoepfe 56 + 16 + 56 =
   128 px Kartenhoehe; nebeneinander 56. Das ist der groesste einzelne
   Posten auf dem Weg unter 796 px. Die Grundbreite von 180 px ist so
   gewaehlt, dass zwei Knoepfe in die 416 px des Kastens passen
   (2 × 180 + 16 = 376), in die 294 px bei 390 px Fensterbreite aber
   nicht — dort brechen sie wie bisher untereinander. Beide Knoepfe
   wachsen gleich (1 1), stehen also gleich breit.
   Die Regel steht hier und nicht an .kar-knopf, weil dessen
   `flex: 1 1 100%` im Kopfbereich ueber .kar-kopf__knoepfe ohnehin
   schon ueberschrieben wird — die Kaesten bekommen ihre eigene Reihe. */
.kar-karte__knoepfe .kar-knopf { flex: 1 1 180px; }

/* --- Die zwei Knöpfe ------------------------------------------------------
   Vorlage: je 288,5 × 56, border-radius 4 (nicht 8 und nicht rund),
   padding 7px 28px, 15 / 22,5 px im halbfetten Schnitt, gap 16.
   Knopf 1 vollflächig in der Leitfarbe mit weißer Schrift.
   Knopf 2 durchsichtig, dunkle Schrift, und der Rand ist KEIN border,
   sondern box-shadow: inset 0 0 0 2px #f2f2f2 — ein sehr helles Grau,
   fast unsichtbar.

   #f2f2f2 selbst ist hier durch --line ersetzt (rgba(16,41,73,0.16), die
   Haarlinie des Projekts). Der Charakter — eine kaum sichtbare Kante —
   bleibt, der Ton gehört zur Palette statt zu einem fremden Grau. */
.kar-knopf {
  flex: 1 1 100%;              /* erzwingt die Anordnung untereinander */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 7px 28px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--kar-fs-knopf);
  line-height: var(--kar-lh-fliess);
  text-align: center;
}
/* SAND STATT NAVY — Folge der Navyfläche. Ein Knopf in --navy-800 auf einer
   Navy-Karte hätte 1,17:1 gegen seinen eigenen Grund und wäre als Fläche
   nicht mehr zu sehen; er verlöre genau das, was ihn zum Vollflächenknopf
   macht. Auf dunklem Grund ist der helle Ton der Leitton, und base.css hält
   ihn als Baustein bereit (.btn--sand).

       Fläche --sand #D9B485, Schrift --navy-900        9,08:1
       Fläche gegen die Karte  oben 6,91:1, unten 7,80:1

   NICHT weiße Schrift auf Sand: base.css hält bei .btn--sand ausdrücklich
   fest, dass das 1,94:1 ergibt. Auf dieser Seite steht deshalb Navy auf
   Sand — derselbe Wert, den auch der Balken im Kopfbereich trägt. */
.kar-knopf--voll {
  background: var(--sand);
  /* WEISS — 31.08.2026, Kundenwunsch: „wenn die Hintergrundfarbe diesen
     Goldton hat, dann muss die Schriftfarbe weiss sein." Gilt site-weit.
     Weiss auf Sand misst 1,94:1, Navy waere 9,08:1 — die Entscheidung ist
     ausdruecklich und wiederholt getroffen worden. */
  color: #FFFFFF;
}
/* Überfahren: die Vorlage legt 10 % Weiß über die Fläche, die Grundfarbe
   bleibt. Auf Sand ergibt das #DDBC91 und hebt den Kontrast der
   Navy-Schrift von 9,08:1 auf 9,76:1 — der Knopf wird beim Anfahren also
   besser lesbar, nicht schlechter. Übergang 0,3 s ease. */
.kar-knopf--voll::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.kar-knopf--voll:hover::before,
.kar-knopf--voll:focus-visible::before { opacity: 1; }

/* Durchsichtig wie in der Vorlage — der Knopf holt sich die Fläche der
   Karte. Mit der Navy-Karte kehren sich beide Farben um: die Schrift steht
   in Weiß (13,42:1 an der Kastenoberkante, 15,13:1 unten), die Kante ist
   eine Aufhellung statt einer Abdunklung.

       Kante rgba(255,255,255,0.36) → #6B7582, 3,22:1 gegen die Karte.

   Der Wert liegt bewusst UNTER dem der Kartenrandlinie (0,40 / 3,66:1):
   der Kasten ist die stärkere Kante, der Knopf darin die schwächere. Beide
   über 3:1. Die Vorlage setzt hier ein fast unsichtbares #f2f2f2 (1,36:1
   auf Weiß) — der Charakter „zurückhaltende Kante" bleibt, der Wert ist
   auf das Prüfmaß gehoben. */
.kar-knopf--linie {
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.36);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Die Vorlage setzt hier filter: brightness(1.1). Auf einem durchsichtigen
   Knopf hellt das nur die Schrift auf und SENKT damit den Kontrast — ein
   Überfahren, das die Lesbarkeit verschlechtert, wird nicht nachgebaut.
   An seiner Stelle dieselbe Zurückhaltung mit umgekehrtem Vorzeichen:
   die Kante tritt hervor, derselbe Übergang von 0,3 s. Die Fläche hellt
   dabei um 6 % auf; die weiße Schrift bleibt damit über 12:1. */
.kar-knopf--linie:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.60);
  background: rgba(255, 255, 255, 0.06);
}



/* ===========================================================================
   9  BEWEGUNG — VOLLSTÄNDIG NEU GEBAUT AM 30.08.2026

   KUNDENWUNSCH, wörtlich: „Ich will, dass du viel, viel, viel mehr
   Animationen einbaust, also jetzt nicht nur so langweilige Animationen, wo
   Bilder größer werden, wenn man draufgeht. Ich will wirklich besondere
   Animationen." Und als Richtung sein eigenes Beispiel von der Startseite:
   dort soll sich ein Haus beim Scrollen erst zeichnen und dann als Foto
   entstehen.

   WAS DAMIT GEMEINT IST — und was hier deshalb gebaut wurde: eine Bewegung,
   die etwas ERKLÄRT, statt zu schmücken. Etwas, das ENTSTEHT, nicht etwas,
   das größer wird. Jede der sechs Gesten unten hat eine Begründung, die
   über „sieht hübsch aus" hinausgeht; steht dort keine, gehört die Geste
   nicht auf diese Seite.

   WAS VORHER HIER STAND und warum es weg ist:
     kar-zoom   scale(0.8) → 1 auf den Stellenkacheln. Das ist wörtlich das,
                was der Kunde als „langweilig" benannt hat: etwas wird
                größer. Ersetzt durch eine Kachel, die aus ihrer eigenen
                Grundlinie aufsteht.
     kar-auf    reine Deckkraft auf allem übrigen. Bleibt als Grundlage
                erhalten (jetzt mit 22 px Weg darunter), trägt aber nicht
                mehr die Überschriften — die haben ihre eigene Geste.

   DIE SECHS GESTEN

   1  DIE FÜNF STERNE LEUCHTEN NACHEINANDER AUF (Kopfbereich)
      Fünf Sterne, die gemeinsam einblenden, sind eine Fläche. Fünf, die
      nacheinander aufleuchten, sind eine Zählung — man sieht, dass es fünf
      sind, ohne sie zu zählen. 0,09 s Versatz, jeder Stern dreht aus −55°
      in seine Lage und wächst aus 0,35 auf. Das ist die einzige Stelle der
      Seite, an der etwas größer wird, und sie ist es aus einem Grund: ein
      Stern, der sich aufrichtet, ist die Geste, die zu einem Stern gehört.

   2  ÜBERSCHRIFTEN SCHIEBEN SICH ZEILENWEISE HINTER EINER KANTE HERVOR
      Die Leitgeste der ganzen Seite. Gemessen an der Vorlage fluid.glass
      (Kladde `fluid/`, motion.json): translateY 200 % → 0 über 1,2 s in
      cubic-bezier(.215,.61,.355,1), 0,1 s Versatz je Zeile. Die Werte sind
      übernommen, nicht geschätzt.
      Sie steht auf JEDER Überschrift dieser Seite — dadurch hat die Seite
      EINE Handschrift statt fünf Einfällen. Die Zeilen werden von
      karriere.js gefunden, nicht geraten: jedes Wort bekommt eine Hülle,
      die Hüllen werden nach ihrer gemessenen Höhenlage zu Zeilen
      gruppiert, und die Gruppe bestimmt den Versatz. Bricht die Zeile bei
      1024 px anders um als bei 1920, stimmt der Versatz trotzdem.

   3  DER BALKEN SCHREIBT SICH SELBST (Kennzeile im Kopfbereich)
      Der Balken ist in dieser Datei ausdrücklich als „trocken auslaufender
      Filzstift" gebaut (Abschnitt 3). Ein Filzstift, der von links nach
      rechts fährt, ist genau die Bewegung, die zu diesem Bild gehört —
      scaleX(0) → 1 mit dem Ursprung links. Die Wörter darauf blenden erst
      danach ein (1,05 s), niemals vorher: die Kennzeile steht in Navy auf
      Sand, und Navy auf noch nicht gezeichnetem Sand wäre unsichtbar.

   4  DAS FOTO DER GESCHÄFTSFÜHRER ENTSTEHT (Abschnitt „Wer ist Estera?")
      Die Geste, die der Kunde an seinem Hausbeispiel meint. Der Rahmen
      wischt von oben nach unten auf (clip-path inset 0 0 100 % 0 → 0),
      während das Bild darin aus −8 % nach oben nachzieht. Zwei Ebenen,
      die sich gegeneinander bewegen — das Bild wirkt, als setzte es sich
      im Rahmen ab, statt als würde es eingeblendet.
      NACHGERECHNET, damit unten keine Lücke aufreißt: die sichtbare Kante
      steht bei t · H, die Bildunterkante bei H − 0,08 (1 − t) H. Die
      Bedingung t ≤ 1 − 0,08 (1 − t) ist für jedes t ≤ 1 erfüllt, die Kante
      holt das Bild also nie ein. Deshalb braucht es hier KEINE Vergrößerung
      als Sicherheitsreserve — das Bild bleibt in seinem Maßstab.

   5  DIE STELLENKÄSTEN STEHEN AUS IHRER EIGENEN GRUNDLINIE AUF
      Der Kasten wächst von seiner Unterkante nach oben (clip-path
      inset 100 % 0 0 0 → 0), während Bild und Text darin aus 48 px
      nachrücken. Die Kante steht dabei STILL — sie ist die Grundlinie, auf
      der der Kasten steht, und nicht eine Kante, die mitfährt. Genau
      dadurch liest es sich als Aufstehen und nicht als Einschieben.
      0,14 s Versatz zwischen den beiden Kästen.

   6  DAS LAUFBAND LÄUFT AN, STATT ZU RENNEN
      Bis heute lief das Band vom ersten Bildpunkt an mit vollen 60 px/s —
      auch dann, wenn es noch gar nicht im Bild war. Jetzt steht es still,
      bis der Abschnitt eintritt, und beschleunigt dann aus dem Stand auf
      seine 60 px/s.
      DAS IST GERECHNET, NICHT GEFÜHLT. Die Spur trägt unverändert ihre
      lineare Endlosbewegung mit 60 px/s. Die acht Karten darin bekommen
      zusätzlich einen einmaligen Anlauf von +48 px auf 0 über 1,6 s in
      cubic-bezier(0.25, 0.5, 0.5, 1). Diese Kurve hat am Anfang die
      Steigung 2 und am Ende 0; die Anfangsgeschwindigkeit des Anlaufs ist
      damit 2 · 48 / 1,6 = 60 px/s und zeigt GEGEN die Laufrichtung.
      Beide Bewegungen zusammen ergeben:
          t = 0     : −60 + 60 =  0 px/s   → das Band steht
          t = 1,6 s : −60 +  0 = −60 px/s  → volle Reisegeschwindigkeit
      Dazwischen steigt es stetig an. Das Band fährt also wirklich an,
      statt anzuspringen.
      DIE LAUFBANDWERTE SIND UNANGETASTET: 60 px/s, Satzbreite 2752 px,
      45,8667 s je Umlauf, drei Sätze im DOM. Der Anlauf sitzt auf den
      KARTEN, nicht auf der Spur — zwei verschiedene Elemente, deshalb
      kommen sich die beiden transform nicht ins Gehege.
      WARUM KEINE LÜCKE AM RAND ENTSTEHT: der Anlauf schiebt die Karten um
      48 px nach rechts, und er läuft nur in den ersten 1,6 s. In dieser
      Zeit steht die Spur nahe ihrem Startwert von −33,3333 % — sie deckt
      dort nach links noch eine volle Satzbreite (2752 px) über den
      Fensterrand hinaus. 48 px davon aufzubrauchen ist folgenlos.

   7  DIE STIMMKARTE SCHREIBT SICH — NEU AM 30.08.2026
      Der Kunde nennt „Entdecke, was unsere Mitarbeiter sagen" ausdrücklich
      als langweilig. Der AUFBAU bleibt unangetastet — weißer Grund, acht
      Karten, Schleier 30 % ab 768 px und 9 % darunter, Bandtempo und
      Satzbreite unverändert. Was fehlte, war eine Geste, die etwas
      ERKLÄRT. Gebaut ist deshalb eine einzige, zusammenhängende:

        a) Das Anführungszeichen wird von links nach rechts GESCHRIEBEN
           (clip-path inset 0 100 % 0 0 → 0, 0,9 s). Es ist das Zeichen,
           das die Karte als Zitat ausweist — es zuerst zu setzen und dann
           den Rest folgen zu lassen, ist die Reihenfolge, in der jemand
           ein Zitat notiert.
        b) DIE FÜNF STERNE LEUCHTEN NACHEINANDER AUF, 0,06 s auseinander,
           mit derselben Bewegung wie die fünf im Kopfbereich (kar-stern:
           aus −55° und 0,35 in ihre Lage). Fünf gemeinsam eingeblendete
           Sterne sind eine Fläche, fünf nacheinander sind eine ZÄHLUNG —
           man sieht, dass es fünf sind, ohne sie zu zählen. Dieselbe Geste
           an derselben Sache: die Seite bekommt dadurch eine Handschrift
           statt zweier Einfälle.

      Der Versatz zwischen den Karten ist der schon vorhandene (--i, 0,07 s);
      das Zeichen setzt bei +0,25 s ein, die Sterne bei +0,40 s — beide
      also erst, während die Karte aus ihrer Grundlinie auftaucht, nie
      davor. Der Auslöser ist unverändert der Behälter .kar-band, es kommt
      also keine zweite Beobachtung dazu.

      NICHTS DAVON BEWEGT DAS BAND. Die Spur trägt weiter genau ihre eine
      transform (Umlauf plus Anlauf); das Zeichen sitzt auf einem
      Pseudoelement der Karte, die Sterne auf den svg darin. Drei
      verschiedene Elemente, drei verschiedene Eigenschaften.

   ZUSÄTZLICH, klein und ohne eigene Nummer: der Rautenpunkt über „Deine
   Karriere, unser Angebot" zieht seine beiden Sandlinien nach außen aus
   der Raute heraus, und die Raute dreht sich dabei in ihre 45°. Das
   Zeichen baut sich also aus seiner Mitte auf, statt fertig da zu stehen.
   Und der Balken „Estera in Kürze" schreibt sich wie der im Kopfbereich —
   derselbe Filzstift, dieselbe Kurve, dieselben 0,75 s: wo dasselbe
   Zeichen steht, läuft dieselbe Geste (Geste 3).

   DIE GRENZEN, DIE NICHT VERHANDELBAR SIND — und wo sie hier stehen:

   OHNE JAVASCRIPT IST ALLES SOFORT DA. Jede Regel dieses Abschnitts hängt
   an [data-js='an'], und dieses Merkmal setzt ausschließlich karriere.js.
   Fällt das Skript aus, gibt es keinen Zustand, in dem etwas unsichtbar
   hängen bleibt — der Endzustand IST der Grundzustand, die Animation nimmt
   ihn nur kurz weg. Das gilt auch für die Zeilenhüllen der Überschriften:
   ohne Skript wird gar nicht erst geteilt, die Überschrift ist schlichter
   Text.

   BEI reduce STEHT ALLES SOFORT IM ENDZUSTAND. Zwei Sicherungen: erstens
   steigt karriere.js in der ersten Zeile aus und setzt [data-js] nicht,
   zweitens setzt Abschnitt 10 unten jeden Anfangszustand ausdrücklich
   zurück — auch für den Fall, dass jemand die Einstellung NACH dem Laden
   umstellt und die Wörter längst geteilt sind.

   NUR transform, opacity und clip-path. Keine Bewegung auf width, height,
   top, left, filter oder box-shadow — nichts davon kommt in diesem
   Abschnitt vor. Kein requestAnimationFrame am Bildlauf: ausgelöst wird
   über IntersectionObserver, gerechnet wird ausschließlich vom
   Bewegungsdienst des Browsers.

   ---------------------------------------------------------------------------
   GEKUERZT AM 01.09.2026 — Optimierungsbriefing, Abschnitt 02 (P0) und 11.
   Woertlich: „Inhalte duerfen nie dauerhaft mit opacity: 0 oder
   visibility: hidden verbleiben. Animationen maximal ca. 400 bis 600 ms,
   geringe Bewegung von etwa 12 bis 20 px, kaum Verzoegerung zwischen
   Elementen und vollstaendige Deaktivierung bei prefers-reduced-motion.
   Das Layout darf keine grosse Leerhoehe vorhalten."

   Gemessen vorher bei 1440: laengste Bewegung 1,2 s (Ueberschriftzeilen),
   laengste Verzoegerung 1,05 s (Kennzeile im Kopf), zusammen 2,0 s; nach
   schnellem Rollen in 900-px-Schritten und 600 ms Ruhe standen noch 117
   Elemente unsichtbar im Fenster.

   DIE GESTEN BLEIBEN, IHRE MASSE NICHT. Jede der sieben Gesten oben ist
   noch da — die Kante vor der Ueberschriftzeile, der Filzstift, der
   aufstehende Kasten, das anlaufende Band. Was sich geaendert hat:

       Dauer        0,55 … 1,6 s  →  0,4 … 0,6 s      (keine ueber 0,6)
       Weg          22 / 48 px, 200 % Zeilenhoehe  →  16 / 18 px
       Staffelung   0,07 … 0,14 s je Element  →  0,025 … 0,08 s
       Vorlauf      bis 1,05 s  →  hoechstens 0,35 s

   Die Ueberschriftzeilen fahren jetzt 18 px statt zwei Zeilenhoehen
   hinter ihrer Kante hervor und blenden dabei ein; die Kante (.kar-zg,
   clip-path) bleibt, sie schneidet nur noch die untersten Bildpunkte des
   Weges ab — der Charakter „kommt hinter einer Kante hervor" bleibt
   lesbar, der Weg ist im verlangten Mass.

   DER BANDANLAUF (Geste 6) ist mitgerechnet: 18 px ueber 0,6 s in
   derselben Kurve. Anfangssteigung 2 → 2 × 18 / 0,6 = 60 px/s, also
   weiterhin exakt die Reisegeschwindigkeit gegen die Laufrichtung. Das
   Band steht beim Eintritt und faehrt an, wie vorher — nur in 0,6 s statt
   1,6 s.

   Das SICHERHEITSNETZ gegen dauerhaft unsichtbare Inhalte liegt in
   karriere.js (threshold 0, rootMargin nach unten positiv, Aufdecken
   beim Rollen). Diese Datei liefert nur noch kurze Wege dahin.
   Vorher-Werte stehen an jeder geaenderten Regel.
   =========================================================================== */

.kar {
  /* Die Kurve der Vorlage fluid.glass — sie trägt jede Geste, die aus
     einer Kante hervorkommt oder aufsteht. */
  --kar-e-raus:  cubic-bezier(0.215, 0.61, 0.355, 1);
  /* Weicher Anlauf für Flächen, die aufziehen. */
  --kar-e-weich: cubic-bezier(0.33, 0, 0.15, 1);
  /* Steigung 2 am Anfang, 0 am Ende — die Kurve des Bandanlaufs. Ihre
     Herleitung steht oben unter Geste 6; wer sie ändert, muss den
     Vorfaktor 48 px mitändern, sonst ruckt das Band beim Start. */
  --kar-e-anlauf: cubic-bezier(0.25, 0.5, 0.5, 1);
}


/* --- Die Bewegungen ------------------------------------------------------- */

/* Zeile hinter der Kante hervor — gemessene Werte der Vorlage.
   18 px UND DECKKRAFT STATT 200 % — 01.09.2026, Briefing Abschnitt 02:
   „geringe Bewegung von etwa 12 bis 20 px". Zwei Zeilenhoehen waren bei
   57 px Schrift rund 135 px Weg. Die Deckkraft kommt dazu, weil bei nur
   18 px Weg die Kante allein die Zeile nicht mehr verdeckt haette.
   Vorher: from { transform: translateY(200%); } */
@keyframes kar-zeile {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Der Grundfall für Text: aus 16 px aufkommen. Die reine Deckkraft von
   vorher hatte keine Richtung; 16 px sind gerade genug, dass die Bewegung
   eine Richtung bekommt, und wenig genug, dass sie nicht auffällt.
   16 statt 22 px — 01.09.2026, Briefing Abschnitt 02 (12 bis 20 px). */
@keyframes kar-steigt {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Der Stern richtet sich auf. */
@keyframes kar-stern {
  from { opacity: 0; transform: rotate(-55deg) scale(0.35); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Der Filzstift fährt von links nach rechts. */
@keyframes kar-strich {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Die Raute dreht sich in ihre Lage. Der Endzustand MUSS rotate(45deg)
   enthalten — das ist die Ruhelage aus Abschnitt 7, keine Zutat. */
@keyframes kar-raute {
  from { opacity: 0; transform: rotate(0deg) scale(0.2); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* Fläche zieht von oben nach unten auf. */
@keyframes kar-blende {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Das Bild zieht im Rahmen nach. Prozent, damit es an jeder Fensterbreite
   denselben Anteil der Bildhöhe zurücklegt. */
@keyframes kar-nach {
  from { transform: translateY(-8%); }
  to   { transform: translateY(0); }
}

/* Der Kasten wächst aus seiner Grundlinie. inset(100% 0 0 0) heißt: die
   sichtbare Fläche ist auf die UNTERKANTE zusammengezogen. Sie wächst von
   dort nach oben — die Kante steht still. */
@keyframes kar-waechst {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Was im Kasten steht, rückt nach.
   16 statt 48 px — 01.09.2026, Briefing Abschnitt 02. */
@keyframes kar-hebt {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Die Bandkarte taucht aus ihrer Grundlinie auf. Bewusst OHNE transform —
   das ist beim Band für den Anlauf vergeben. */
@keyframes kar-taucht {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Der Anlauf des Bandes. Herleitung siehe Geste 6.
   18 px ueber 0,6 s statt 48 px ueber 1,6 s — 01.09.2026, Briefing
   Abschnitt 02. Anfangsgeschwindigkeit 2 × 18 / 0,6 = 60 px/s, die
   Rechnung geht weiter auf. */
@keyframes kar-anlauf {
  from { transform: translate3d(18px, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Das Anführungszeichen wird von links nach rechts geschrieben. */
@keyframes kar-schreibt {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Das Etikett kommt als Ganzes hinter einer Kante hervor — Fläche und
   Wörter zusammen. Die negativen Werte sind Auslauf, kein Beschnitt:
   1,7 em rechts, weil der Balken seine Fläche über ::before genau 1,6 em
   über die eigene Kante hinauslaufen lässt; 60 % oben und unten für den
   Innenabstand des Balkens; 0,2 em links, damit die erste Buchstabenkante
   nicht angeschnitten wird. */
@keyframes kar-etikett {
  from { clip-path: inset(-60% calc(100% + 1.7em) -60% -0.2em); }
  to   { clip-path: inset(-60% -1.7em -60% -0.2em); }
}


/* --- Die Anfangszustände ---------------------------------------------------
   ALLES hängt an [data-js='an']. Ohne Javascript existiert keine dieser
   Regeln, und die Seite steht vollständig da. */

[data-js='an'] [data-auf] { opacity: 0; }

/* Drei Bausteine geben ihre Bewegung an ihre Teile weiter und bleiben
   deshalb selbst sichtbar — sonst blendete die Gruppe ein, während ihre
   Teile noch einzeln kämen. */
[data-js='an'] .kar-kopf__sterne,
[data-js='an'] .kar-angebot__raute,
[data-js='an'] .kar-geteilt { opacity: 1; }

/* Das Bildfenster bringt seine eigene Geste mit.

   DIE KANTE SITZT AUF <picture>, NICHT AUF <figure> — und das ist kein
   Geschmack, sondern eine Notwendigkeit. Lag der clip-path auf dem
   <figure>, meldete der IntersectionObserver das Fenster NIE als
   eingetreten: Chromium rechnet den eigenen clip-path des Ziels in dessen
   Schnittfläche ein, und eine auf null zusammengezogene Fläche schneidet
   sich mit nichts. Das Bild blieb dadurch dauerhaft unsichtbar — genau der
   Zustand, den es nicht geben darf. Beobachtet wird jetzt das <figure>
   (ungeschnitten, volle Fläche), geschnitten wird das <picture> darin. */
[data-js='an'] .kar-wer__bild { opacity: 1; }
[data-js='an'] .kar-wer__bild picture { clip-path: inset(0 0 100% 0); }
[data-js='an'] .kar-wer__bild img { transform: translateY(-8%); }

[data-js='an'] .kar-kopf__sterne svg { opacity: 0; }

/* Der Filzstift steht am linken Anfang und hat noch nicht geschrieben. */
[data-js='an'] .kar-kopf__kennzeile .kar-balken::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Das Etikett „Estera in Kürze" wird als GANZES geschrieben — Fläche und
   Wörter zusammen hinter einer Kante hervor. Der Absatz bleibt selbst
   sichtbar und gibt seine Bewegung an den Balken weiter, wie die drei
   Bausteine oben.

   DIE KANTE SITZT AUF DEM BALKEN, NICHT AUF DEM ABSATZ — und das ist
   dieselbe Notwendigkeit, die oben schon beim Bildfenster steht: der
   Absatz ist das, was der IntersectionObserver beobachtet, und Chromium
   rechnet den eigenen clip-path des Ziels in dessen Schnittfläche ein.
   Eine auf null zusammengezogene Fläche schneidet sich mit nichts, das
   Etikett wäre also NIE eingetreten und dauerhaft unsichtbar geblieben.
   Genau dieser Fehler stand hier für eine Fassung und ist in der
   Bildfolge aufgefallen. Beobachtet wird der Absatz (ungeschnitten),
   geschnitten wird der Balken darin. */
[data-js='an'] .kar-wer__etikett { opacity: 1; }
[data-js='an'] .kar-wer__etikett .kar-balken {
  clip-path: inset(-60% calc(100% + 1.7em) -60% -0.2em);
}

[data-js='an'] .kar-angebot__raute::before { transform: scaleX(0); transform-origin: 100% 50%; }
[data-js='an'] .kar-angebot__raute::after  { transform: scaleX(0); transform-origin: 0 50%; }
[data-js='an'] .kar-angebot__raute span    { opacity: 0; transform: rotate(0deg) scale(0.2); }

/* Die Zeilenhüllen setzt karriere.js. .kar-zg ist die Kante, .kar-zg__i das
   Wort dahinter.

   DIE KANTE IST EIN clip-path, KEIN overflow: hidden — und das ist der
   Punkt, an dem diese Lösung steht oder fällt. Ein overflow: hidden auf
   einem inline-block ändert dessen Grundlinie (die Grundlinie wird dann die
   untere Randkante), und die ganze Überschrift verrutschte gegenüber dem
   Zustand ohne Javascript. clip-path ändert an der Anordnung NICHTS.

   Die negativen Werte sind Auslauf, kein Beschnitt: oben 100 % Luft für
   Oberlängen und die kursive Akzentschrift, seitlich 0,4 em für deren
   Überhang, unten 0,14 em unter die Grundlinie — tief genug, dass keine
   Unterlänge (das g in „Angebot") angeschnitten wird, flach genug, dass die
   Kante mit dem Zeilenfall zusammenfällt. */
.kar-zg    { display: inline-block; clip-path: inset(-100% -0.4em -0.14em -0.4em); }
.kar-zg__i { display: inline-block; }

/* 18 px und Deckkraft 0 statt 200 % — 01.09.2026, siehe kar-zeile. */
[data-js='an'] .kar-geteilt .kar-zg__i { opacity: 0; transform: translateY(18px); }

[data-js='an'] .kar-karte { clip-path: inset(100% 0 0 0); }
/* 16 statt 48 px — 01.09.2026, siehe kar-hebt. */
[data-js='an'] .kar-karte > * { opacity: 0; transform: translateY(16px); }

[data-js='an'] .kar-band__karte { opacity: 0; clip-path: inset(100% 0 0 0); }

/* Geste 7 — das Zeichen ist noch nicht geschrieben, die Sterne noch nicht
   aufgeleuchtet. */
[data-js='an'] .kar-band__karte::before { clip-path: inset(0 100% 0 0); }
[data-js='an'] .kar-band__sterne svg { opacity: 0; }

/* Das Band steht still, bis sein Abschnitt eintritt. animation-play-state
   hält auch die Verzögerung an, die Rechnung des Anlaufs bleibt also
   stimmig. Ohne Javascript greift diese Regel nicht und das Band läuft wie
   bisher vom ersten Bildpunkt an. */
[data-js='an'] .kar-band__spur { animation-play-state: paused; }


/* --- Der Auslöser ----------------------------------------------------------
   .ist-da setzt der IntersectionObserver in karriere.js, einmalig. */

/* 0,5 s statt 0,85 s — 01.09.2026, Briefing Abschnitt 02. */
[data-js='an'] [data-auf].ist-da {
  animation: kar-steigt 0.5s var(--kar-e-raus) both;
}

/* Die drei Gruppen aus dem Grundzustand tragen selbst keine Bewegung. */
[data-js='an'] .kar-kopf__sterne.ist-da,
[data-js='an'] .kar-angebot__raute.ist-da,
[data-js='an'] .kar-wer__bild.ist-da,
[data-js='an'] .kar-geteilt.ist-da { animation: none; }

/* 1 — die fünf Sterne, nacheinander. Der Vorlauf von 0,35 s lässt der
   Wortmarke darüber ihren Auftritt. */
/* 0,5 s und Vorlauf 0,10 … 0,30 s statt 0,7 s und 0,35 … 0,71 s —
   01.09.2026, Briefing Abschnitt 02: Staffelung 0,05 s je Stern, die
   Reihe ist nach 0,8 s komplett statt nach 1,41 s. */
[data-js='an'] .kar-kopf__sterne.ist-da svg {
  animation: kar-stern 0.5s var(--kar-e-raus) both;
}
[data-js='an'] .kar-kopf__sterne.ist-da svg:nth-child(1) { animation-delay: 0.10s; }
[data-js='an'] .kar-kopf__sterne.ist-da svg:nth-child(2) { animation-delay: 0.15s; }
[data-js='an'] .kar-kopf__sterne.ist-da svg:nth-child(3) { animation-delay: 0.20s; }
[data-js='an'] .kar-kopf__sterne.ist-da svg:nth-child(4) { animation-delay: 0.25s; }
[data-js='an'] .kar-kopf__sterne.ist-da svg:nth-child(5) { animation-delay: 0.30s; }

/* 2 — Überschriften zeilenweise. --z ist die Zeilennummer und kommt aus
   karriere.js.
   0,55 s und 0,06 s je Zeile statt 1,2 s und 0,1 s — 01.09.2026, Briefing
   Abschnitt 02. Die Kurve der Vorlage bleibt. */
[data-js='an'] .kar-geteilt.ist-da .kar-zg__i {
  animation: kar-zeile 0.55s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation-delay: calc(var(--z, 0) * 0.06s);
}
/* Im Kopfbereich läuft die Überschrift nach Wortmarke, Sternen und Balken —
   0,2 s Vorlauf statt 0,7 s (01.09.2026): die drei davor sind schneller
   geworden, und die Ueberschrift soll beim ersten Blick da sein. */
[data-js='an'] .kar-kopf__titel.ist-da .kar-zg__i {
  animation-delay: calc(0.2s + var(--z, 0) * 0.06s);
}
/* Unterzeile, Knoepfe und Vertrauenszeile des Kopfbereichs folgen der
   Ueberschrift in kleinen Schritten (0,25 / 0,30 / 0,35 s) — 01.09.2026.
   Bis dahin hatten sie keinen Vorlauf und standen VOR der Ueberschrift
   da, die noch 0,7 s wartete. Hoechster Vorlauf im Kopf jetzt 0,35 s. */
[data-js='an'] .kar-kopf .kar-angebot__unterzeile.ist-da { animation-delay: 0.25s; }
[data-js='an'] .kar-kopf__knoepfe.ist-da { animation-delay: 0.30s; }
[data-js='an'] .kar-kopf .kar-karte__art.ist-da { animation-delay: 0.35s; }

/* 3 — der Balken schreibt sich, die Wörter kommen danach.

   DIE REIHENFOLGE IST ZWINGEND, nicht Geschmack: die Schrift auf dem
   Balken ist Weiß (im Kopfbereich Navy auf Sand). Kämen die Wörter vor der
   Fläche, stünden sie kurz auf dem nackten Grund — Weiß auf Creme, und das
   wäre unlesbar. Deshalb setzt der Strich immer zuerst an und die Wörter
   erst, wenn er weit genug gelaufen ist.

   AUCH AM ETIKETT „ESTERA IN KÜRZE" — nachgezogen am 30.08.2026. Es ist
   derselbe Baustein .kar-balken; dass er dort bisher ohne seine Geste
   stand, war eine Lücke und keine Entscheidung.

   DORT IST SIE ANDERS GEBAUT, und der Grund ist gemessen worden. Der erste
   Versuch hat die Bauart des Kopfbereichs übernommen — Strich zuerst,
   Wörter danach über die Deckkraft der Gruppe. In der Bildfolge war davon
   NICHTS zu sehen: der Strich läuft dort, während die Gruppe noch auf
   Deckkraft 0 steht, und wenn sie erscheint, ist er längst fertig. Im
   Kopfbereich fällt das nicht auf, weil dort ohnehin ein langer Vorlauf
   liegt; hier war die Geste schlicht unsichtbar.

   GEBAUT IST DESHALB EINE KANTE ÜBER DAS GANZE ETIKETT: Fläche und Wörter
   kommen zusammen hinter ihr hervor, von links nach rechts. Das ist
   dieselbe Aussage — hier schreibt jemand — nur in einem Zug, und das
   Problem „Weiß auf noch nicht gezeichnetem Grund" kann gar nicht erst
   entstehen, weil die Schrift nie vor ihrer Fläche da ist.

   DIE KANTE SITZT AM ABSATZ, NICHT AM BALKEN. Der Balken lässt seine
   Fläche über ::before 1,6 em nach rechts auslaufen; ein clip-path am
   Balken selbst schnitte genau diesen Auslauf ab. Der Absatz ist breiter
   als beides. Die Werte in Prozent (senkrecht −60 %, links −2 %) sind
   Auslauf, kein Beschnitt — sie geben der Fläche und den Oberlängen Luft
   und halten alle vier Werte in derselben Einheit, damit die Kante sauber
   durchläuft. */
/* Strich 0,5 s ab 0,1 s, Woerter ab 0,35 s — statt 0,75 s ab 0,55 s und
   Woerter ab 1,05 s (01.09.2026, Briefing Abschnitt 02). Die Reihenfolge
   bleibt zwingend: der Strich ist bei 0,35 s zur Haelfte gelaufen, die
   Woerter blenden ueber 0,5 s ein und stehen nie auf nacktem Grund. */
[data-js='an'] .kar-kopf__kennzeile.ist-da .kar-balken::before {
  animation: kar-strich 0.5s var(--kar-e-raus) 0.1s both;
}
[data-js='an'] .kar-kopf__kennzeile.ist-da { animation-delay: 0.35s; }

[data-js='an'] .kar-wer__etikett.ist-da { animation: none; }
/* 0,5 s statt 0,85 s — 01.09.2026. */
[data-js='an'] .kar-wer__etikett.ist-da .kar-balken {
  animation: kar-etikett 0.5s var(--kar-e-raus) both;
}

/* Die Wortmarke eröffnet. */
[data-js='an'] .kar-kopf__marke.ist-da { animation-delay: 0s; }

/* 4 — das Foto entsteht. 0,6 s statt 1,15 s — 01.09.2026. Seit dem
   01.09.2026 steht das Bildfenster wieder im Markup (kar-zusammenarbeit),
   die Geste ist also wieder sichtbar. */
[data-js='an'] .kar-wer__bild.ist-da picture {
  animation: kar-blende 0.6s var(--kar-e-weich) both;
}
[data-js='an'] .kar-wer__bild.ist-da img {
  animation: kar-nach 0.6s var(--kar-e-weich) both;
}

/* Der Rautenpunkt baut sich aus seiner Mitte auf.
   0,5 s / Linien 0,5 s ab 0,1 s statt 0,6 s / 0,7 s ab 0,25 s — 01.09.2026. */
[data-js='an'] .kar-angebot__raute.ist-da span {
  animation: kar-raute 0.5s var(--kar-e-raus) both;
}
[data-js='an'] .kar-angebot__raute.ist-da::before,
[data-js='an'] .kar-angebot__raute.ist-da::after {
  animation: kar-strich 0.5s var(--kar-e-raus) 0.1s both;
}

/* 5 — die Stellenkästen stehen auf. Der Versatz steckt als --i im Markup
   (style="--i:0" bzw. 1) und war schon vorher dort. Beobachtet wird die
   LISTE, nicht die einzelne Kachel — sonst liefe der Versatz gegen den
   Eintritt jeder Kachel statt gegen den der Reihe.
   0,5 s und 0,08 s Versatz statt 1 s und 0,14 s — 01.09.2026, Briefing
   Abschnitt 02 (Staffelung je Element hoechstens 0,08 s). In der FAQ mit
   fuenf Kaesten ist der letzte damit nach 0,32 + 0,05 + 0,5 = 0,87 s da. */
[data-js='an'] .kar-liste.ist-da .kar-karte {
  animation: kar-waechst 0.5s var(--kar-e-raus) both;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
[data-js='an'] .kar-liste.ist-da .kar-karte > * {
  animation: kar-hebt 0.5s var(--kar-e-raus) both;
  animation-delay: calc(var(--i, 0) * 0.08s + 0.05s);
}

/* 6 — das Band. --i setzt karriere.js, und zwar UMLAUFEND 0 … 7 auf allen
   drei Sätzen: die Spur startet um eine Satzbreite versetzt, am linken
   Fensterrand steht beim Eintritt also Satz 2 und nicht Satz 1 (ausführlich
   in karriere.js an der Stelle). Jeder Satz trägt dieselbe Staffel, damit
   ist es gleichgültig, welcher gerade im Bild ist.
   Beide Bewegungen laufen auf DEMSELBEN Element, aber auf verschiedenen
   Eigenschaften — kar-taucht auf clip-path und opacity, kar-anlauf auf
   transform. Sie überschreiben sich deshalb nicht. */
/* 0,5 s / Anlauf 0,6 s / 0,025 s je Karte statt 0,85 s / 1,6 s / 0,07 s —
   01.09.2026, Briefing Abschnitt 02. Acht Karten je Satz: die letzte
   beginnt nach 0,175 s, alle stehen nach 0,675 s. */
[data-js='an'] .kar-band.ist-da .kar-band__karte {
  animation: kar-taucht 0.5s var(--kar-e-raus) both,
             kar-anlauf 0.6s var(--kar-e-anlauf) both;
  animation-delay: calc(var(--i, 0) * 0.025s), 0s;
}
[data-js='an'] .kar-band.ist-da .kar-band__spur { animation-play-state: running; }

/* 7 — die Stimmkarte schreibt sich: erst das Zeichen, dann die fünf
   Sterne. --i kommt von der Karte (karriere.js, umlaufend 0 … 7), --s vom
   Stern selbst (Abschnitt 6). Beide Verzögerungen sind gegen den Auftritt
   DER KARTE gerechnet, nicht gegen den Eintritt des Bandes — deshalb
   steht --i in beiden Zeilen.
   01.09.2026: Zeichen 0,5 s ab +0,1 s (statt 0,9 s ab +0,25 s), Sterne
   0,4 s ab +0,08 s mit 0,03 s je Stern (statt 0,55 s ab +0,4 s mit 0,06).
   Der spaeteste Stern der letzten Karte setzt bei 0,175 + 0,08 + 0,12 =
   0,375 s ein und steht bei 0,775 s. Vorher: letzter Stern bei 0,49 +
   0,4 + 0,24 = 1,13 s Beginn, 1,68 s Ende — genau die Sterne, die nach
   schnellem Rollen noch unsichtbar gezaehlt wurden. */
[data-js='an'] .kar-band.ist-da .kar-band__karte::before {
  animation: kar-schreibt 0.5s var(--kar-e-weich) both;
  animation-delay: calc(var(--i, 0) * 0.025s + 0.1s);
}
[data-js='an'] .kar-band.ist-da .kar-band__sterne svg {
  animation: kar-stern 0.4s var(--kar-e-raus) both;
  animation-delay: calc(var(--i, 0) * 0.025s + 0.08s + var(--s, 0) * 0.03s);
}


/* ===========================================================================
   10  RUHIGE DARSTELLUNG (prefers-reduced-motion: reduce)

   BEI reduce IST ALLES SOFORT IM ENDZUSTAND. Keine Ausnahme.

   Der erste und wichtigste Riegel steht in karriere.js: dort wird bei
   „reduce" in der ersten Zeile ausgestiegen und [data-js] gar nicht erst
   gesetzt. Damit greift keine einzige Regel aus Abschnitt 9.

   Der zweite Riegel steht hier und ist für den Fall gebaut, dass jemand die
   Einstellung NACH dem Laden umstellt: dann ist [data-js='an'] längst
   gesetzt und die Wörter der Überschriften sind längst in ihre Hüllen
   geteilt. Jeder Anfangszustand aus Abschnitt 9 wird unten ausdrücklich
   zurückgenommen, und zwar auf denselben Endwert, den die Animation sonst
   erreicht hätte.

   Außerdem wie bisher: DAS VIDEO STEHT STILL UND ZEIGT DAS STANDBILD, und
   das Laufband bricht in eine stehende, lesbare Gruppe um.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kar-kopf__video { display: none; }

  /* DAS LAUFBAND STEHT STILL — und zwar nicht einfach angehalten.
     Ein angehaltenes Band zeigte nur die vier bis fünf Karten, die gerade
     im Fenster stehen; die übrigen wären ohne Bewegung nicht erreichbar.

     EINE REIHE, SEITLICH ROLLBAR — 01.09.2026, Optimierungsbriefing,
     Abschnitt 11: das Band „soll nicht mehrfach wie identischer Inhalt
     untereinander erscheinen" und die Section soll niedriger werden. Bis
     dahin brach die Reihe hier in eine mittige Gruppe um — bei 1440 px
     drei Reihen zu je drei Karten, 805 px Abschnittshoehe statt 390.
     Jetzt bleibt es EINE Reihe in derselben Hoehe wie die laufende
     Fassung; der Behaelter bekommt statt der Bewegung eine gewoehnliche
     seitliche Rollleiste, und alle acht Karten sind mit Rad, Wischen
     oder Tastatur erreichbar. Die zwei Kopiensaetze, die es nur fuer den
     nahtlosen Umlauf gibt, fallen weiter weg.
     Diese Regeln stehen im CSS und wirken deshalb AUCH OHNE JAVASCRIPT.
     Vorher: .kar-stimmen, .kar-band { overflow: visible; }
             .kar-band__spur { width: auto; flex-wrap: wrap; justify-content: center; }
             .kar-band__karte { flex: 0 1 344px; margin: 0 12px 24px; } */
  .kar-band {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;         /* Luft fuer die Rollleiste, damit sie nicht am Kartenrand klebt */
  }

  /* DIE KANTENMASKE FÄLLT HIER WEG. Sie gehört zur laufenden Fassung: dort
     blendet sie aus, was gerade in den Rand hineinläuft. Steht das Band
     still, stünden die äußeren Karten halb ausgeblichen da — und die
     sollen gelesen werden. Ohne Maske stehen alle in voller Deckung. */
  .kar-band {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .kar-band__spur {
    animation: none;
    transform: none;
    width: max-content;
    padding-inline: var(--kar-rand);
  }
  .kar-band__karte {
    scroll-snap-align: start;
  }
  .kar-band__karte--kopie { display: none; }

  /* --- Jeder Anfangszustand aus Abschnitt 9, ausdrücklich zurückgenommen --- */
  /* .kar-karte > * FEHLTE HIER BIS ZUM 30.08.2026. Der Anfangszustand in
     Abschnitt 9 setzt Deckkraft UND Weg (opacity: 0; translateY(48px));
     zurückgenommen wurde unten nur der Weg. Wer die Einstellung nach dem
     Laden umstellte, bekam zwei leere Kästen — Bild und Text darin standen
     dauerhaft auf 0. Am Bildpunkt nachgeprüft: jetzt bleibt kein Element
     der Seite unter voller Deckung. */
  /* .kar-geteilt .kar-zg__i steht seit dem 01.09.2026 mit dazu: die
     Ueberschriftzeilen beginnen seitdem auch auf Deckkraft 0. */
  [data-js='an'] [data-auf],
  [data-js='an'] .kar-kopf__sterne svg,
  [data-js='an'] .kar-band__sterne svg,
  [data-js='an'] .kar-band__karte,
  [data-js='an'] .kar-karte > *,
  [data-js='an'] .kar-geteilt .kar-zg__i,
  [data-js='an'] .kar-angebot__raute span,
  [data-js='an'] .kar-wer__bild { opacity: 1; }

  [data-js='an'] .kar-karte,
  [data-js='an'] .kar-band__karte,
  [data-js='an'] .kar-band__karte::before,
  [data-js='an'] .kar-wer__etikett .kar-balken,
  [data-js='an'] .kar-wer__bild picture { clip-path: none; }

  [data-js='an'] .kar-karte > *,
  [data-js='an'] .kar-wer__bild img,
  [data-js='an'] .kar-geteilt .kar-zg__i,
  [data-js='an'] .kar-kopf__kennzeile .kar-balken::before,
  [data-js='an'] .kar-angebot__raute::before,
  [data-js='an'] .kar-angebot__raute::after { transform: none; }

  /* Die Raute behält ihre 45° — die sind ihre Form, nicht ihre Bewegung. */
  [data-js='an'] .kar-angebot__raute span { transform: rotate(45deg); }

  /* Die Kante der Zeilenhüllen wird ganz aufgehoben; ohne Bewegung hat sie
     keine Aufgabe mehr und könnte nur noch etwas anschneiden. */
  .kar-zg { clip-path: none; }

  [data-js='an'] .kar-band__spur { animation-play-state: running; }

  /* Und keine einzige Animation läuft. */
  [data-js='an'] [data-auf].ist-da,
  [data-js='an'] .kar-kopf__sterne.ist-da svg,
  [data-js='an'] .kar-geteilt.ist-da .kar-zg__i,
  [data-js='an'] .kar-kopf__titel.ist-da .kar-zg__i,
  [data-js='an'] .kar-kopf__kennzeile.ist-da .kar-balken::before,
  [data-js='an'] .kar-wer__etikett.ist-da .kar-balken,
  [data-js='an'] .kar-wer__bild.ist-da picture,
  [data-js='an'] .kar-wer__bild.ist-da img,
  [data-js='an'] .kar-angebot__raute.ist-da span,
  [data-js='an'] .kar-angebot__raute.ist-da::before,
  [data-js='an'] .kar-angebot__raute.ist-da::after,
  [data-js='an'] .kar-liste.ist-da .kar-karte,
  [data-js='an'] .kar-liste.ist-da .kar-karte > *,
  [data-js='an'] .kar-band.ist-da .kar-band__karte,
  [data-js='an'] .kar-band.ist-da .kar-band__karte::before,
  [data-js='an'] .kar-band.ist-da .kar-band__sterne svg { animation: none; }

  .kar-knopf,
  .kar-knopf--voll::before,
  .kar-knopf--linie,
  .kar-karte--klick { transition: none; }
}


/* ===========================================================================
   11  NACHTRAG ZUM WORDING VOM 31.08.2026

   Der Auftrag lautete, den Wortlaut aus Estera_Karriere_Wording.pdf
   (Teil 1, K01–K07) zu übernehmen und das Design unangetastet zu lassen.
   Die sechs Regeln hier sind der Preis dafür — und mehr sind es nicht.
   KEINE davon setzt eine Farbe, eine Form, eine Schriftgröße oder einen
   Radius. Alle sechs sind reine Geometrie und rechnen mit den Werten, die
   oben in dieser Datei schon stehen (--kar-eng, --kar-luft). Wer sie
   entfernt, verliert Abstände und die Anordnung der Knöpfe, nicht die
   Gestalt der Seite.
   =========================================================================== */

/* --- 1  DIE KNOPFREIHE IM KOPFBEREICH UND IM ABSCHLUSS --------------------
   K01 verlangt zwei Knöpfe nebeneinander, K07 einen. Die Knöpfe selbst
   sind die der Stellenkästen und bleiben Zeichen für Zeichen, wie sie
   sind — Sand, weiße Schrift, 4 px Radius, 56 px hoch.

   NUR IHRE ANORDNUNG BRAUCHT EINE EIGENE REIHE. .kar-knopf trägt
   `flex: 1 1 100%`, und das ist im Stellenkasten richtig: dort sollen die
   zwei Knöpfe untereinander über die Kastenbreite laufen. Im Kopfbereich
   ist der Kasten 1087,8 px breit — zwei Knöpfe darüber, jeder in voller
   Breite und einer unter dem anderen, wären keine Knöpfe mehr, sondern
   zwei Balken. Deshalb hier `flex: 0 1 auto` mit einer Mindestbreite, die
   der gemessenen Knopfbreite der Vorlage entspricht (288,5 px, gerundet
   auf die 240 px, ab denen der längere der beiden Beschriftungen
   einzeilig bleibt).

   `flex-wrap: wrap` ist die Absicherung nach unten: bei 390 px stehen die
   zwei Knöpfe untereinander, jeder über die Behälterbreite. Genau das,
   was .kar-knopf im Kasten ohnehin tut.

   Die 28 px Abstand nach oben sind kein neuer Wert: es ist der Abstand,
   den .kar-angebot__raute unter sich lässt, also der bereits gesetzte
   Schritt zwischen zwei Bausteinen einer Textgruppe. */
.kar-kopf__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;                   /* wie .kar-karte__knoepfe */
  margin-top: 28px;
}
.kar-kopf__knoepfe .kar-knopf {
  flex: 0 1 auto;
  min-width: 240px;
}

/* --- 2  DIE KLEINZEILE UNTER DER KNOPFREIHE -------------------------------
   Die Vertrauenszeile in K01 und die Microcopy in K07 stehen in
   .kar-karte__art. Diese Klasse lebt sonst als erste Zeile in einem
   Stellenkasten und braucht dort keinen Abstand nach oben; hier folgt sie
   auf die Knopfreihe. 20 px ist der Wert, den dieselbe Gruppe im Kasten
   zwischen Kleinzeile und Text hält (.kar-karte__bereiche). */
.kar-kopf__knoepfe + .kar-karte__art { margin-top: 20px; }

/* --- 3  KLEINZEILE GEGEN ÜBERSCHRIFT AUSSERHALB VON .kar-wer --------------
   Das Etikett im Sandbalken steht jetzt auch über den Überschriften von
   K03, K04, K05 und K07. .kar-wer .kar-titel hält dafür seit jeher
   --kar-eng bereit; die Regel ist aber auf .kar-wer eingegrenzt. Statt
   sie zu erweitern (und damit jede Überschrift dieser Seite zu treffen,
   auch die ohne Etikett), hängt der Abstand hier am Nachbarschafts-
   verhältnis: er greift genau dort, wo ein Etikett davorsteht.
   Derselbe Wert, dieselbe Rolle — nur genauer adressiert.
   Die FAQ-Überschrift in K06 hat kein Etikett und bleibt deshalb
   unberührt auf den 104 px des Kapitelblatts. */
.kar-wer__etikett + .kar-titel { margin-top: var(--kar-eng); }

/* --- 4  DIE NAHT ZWISCHEN ZWEI BLÖCKEN AUF DER NAVYFLÄCHE -----------------
   Auf der Navyfläche stehen jetzt vier Blöcke statt einem: die offenen
   Positionen (K04), der Bewerbungsablauf (K05), die FAQ (K06) und der
   Abschluss (K07). Jeder ist wie K04 gebaut — ein Kapitelblatt
   (.kar-angebot, 104 px oben) und ein Rumpf (.kar-stellen, 96 px unten).

   OHNE DIESE REGEL STÜNDEN AN JEDER NAHT 96 + 104 = 200 px. Das ist mehr
   als das Doppelte der Abschnittsluft, die diese Seite sonst hält
   (--kar-luft, 96 px), und auf einer durchlaufenden Fläche liest sich so
   ein Loch als Fehler. Die 104 px des Kapitelblatts sind der gemessene
   Abstand gegen seine EIGENE Oberkante — also gegen die harte Kante zum
   Weiß darüber. Diese Kante gibt es nur einmal, beim ersten Block. Bei
   allen folgenden liegt darüber kein Farbwechsel mehr, sondern der Rumpf
   des vorigen Blocks, und dessen 96 px sind bereits die volle
   Abschnittsluft.

   Gemessen bleibt damit an jeder Naht innerhalb der Fläche genau
   --kar-luft = 96 px, und die 104 px stehen unverändert dort, wo sie
   gemessen wurden: an der Oberkante der Fläche. */
.kar-stellen + .kar-angebot { padding-top: 0; }

/* --- 5  DIE UMLAUFZEIT DES LAUFBANDS --------------------------------------
   K03 bringt sechs Kästen statt der acht Stimmen von vorher. Die
   Bauaufnahme gibt die GESCHWINDIGKEIT vor, nicht die Dauer: 60 px/s,
   auf jeder Fensterbreite gleich (bericht.md der Stellenseiten,
   Abschnitt 4.1). Ein Satz misst 6 × (320 + 24) = 2064 px, und

       2064 px / 60 px/s = 34,4 s

   Die 45,8667 s oben in dieser Datei sind dieselbe Rechnung für acht
   Kästen (2752 / 60). Bliebe die alte Zahl stehen, liefe das Band mit
   45 px/s — spürbar zäher, ohne dass irgendwo eine Entscheidung dazu
   getroffen worden wäre. Die Zahl ändert sich also genau deshalb, damit
   sich am Design nichts ändert.

   Als eigene Regel und nicht als Änderung oben: die Rechnung für acht
   Kästen bleibt dort lesbar, falls die Zahl der Kästen wieder wechselt.

   KORRIGIERT AM 01.09.2026. Die sechs K03-Kaesten sind am 31.08.2026
   wieder durch die ACHT Stimmen ersetzt worden (siehe karriere.html,
   „Zurueckgeholt"), die 34,4 s blieben aber stehen — das Band lief seither
   mit 2752 / 34,4 = 80 px/s statt 60. Mit den 344 px breiten Karten seit
   dem 01.09.2026 (Briefing Abschnitt 11) gilt:

       8 × (344 + 24) = 2944 px / 60 px/s = 49,07 s

   Vorher: animation-duration: 34.4s */
.kar-band__spur { animation-duration: 49.07s; }

/* --- 6  DIE KÄSTEN OHNE BILD ----------------------------------------------
   Die vier Schritte in K05 und die fünf Fragen in K06 stehen in
   .kar-karte, tragen aber kein <picture>. Der Kasten hält oben 24 px
   (Rahmen zu Bild) und der Inhalt weitere 20 px (Bild zu erster Zeile) —
   zusammen 44 px, gemessen als Abstand zu einem Bild, das hier nicht
   steht. Ohne Bild ist das schlicht zu viel Luft über der ersten Zeile
   gegen die 24 px, die links, rechts und unten stehen.

   :not(:has(picture)) trifft genau die bildlosen Kästen und lässt die
   zwei Stellenkästen unberührt. Browser ohne :has ignorieren die Regel,
   die Kästen stehen dann mit 44 px statt 24 px oben — eine Abweichung von
   20 px Luft, kein Bruch. */
.kar-karte:not(:has(picture)) > .kar-karte__inhalt { padding-top: 0; }

/* --- 7  DER AKZENT IM KOPFBEREICH -----------------------------------------
   K01 bringt zum ersten Mal eine Überschrift mit Akzenthälfte auf die
   Videofläche. .kar-akzent steht in --accent (#1E4270) — das ist der Ton
   für die HELLEN Abschnitte, wo er 10,3:1 misst. Auf Navy 900 unter dem
   Schleier misst derselbe Ton 1,4:1 und ist praktisch unsichtbar.

   DIE ANTWORT DARAUF STEHT SCHON IN DIESER DATEI, sie war nur auf einen
   Abschnitt eingegrenzt: „Der Akzent steht hier in Sand statt im Blau der
   hellen Abschnitte: auf Navy trägt Blau auf Blau nicht" (bei
   .kar-angebot). Genau dieselbe Lage, genau dieselbe Antwort — der
   Kopfbereich bekommt denselben Sand. Keine neue Farbe: --sand ist der
   Ton, in dem hier schon Balken, Sterne und Knopf stehen.

       Sand #D9B485 auf dem Kopfbereich (Navy 900 + Schleier)   6,4:1
   gemessen wie in base.css beim Farbblock. */
.kar-kopf .kar-akzent { color: var(--sand); }

/* --- 8  DAS ANFÜHRUNGSZEICHEN IN DEN K03-KÄSTEN --------------------------
   Aus demselben Grund, aus dem in K03 die fünf Sterne aus dem Markup
   gefallen sind (ausführlich in karriere.html am Abschnittskopf): das
   blasse Zeichen oben rechts im Kasten ist ein ANFÜHRUNGSZEICHEN. Es hat
   die acht erfundenen Mitarbeiterstimmen als Zitate ausgewiesen. Über
   „Onboarding mit System" weist es einen Satz als Zitat aus, den niemand
   gesagt hat.

   Die Sterne konnten aus dem Markup, weil sie dort standen; dieses
   Zeichen ist ein ::before und lässt sich nur hier abstellen. Der
   gesamte Block oben bleibt unverändert stehen — samt seiner
   Kontrastrechnung —, damit er sofort wieder greift, falls an dieser
   Stelle je wieder echte, freigegebene Zitate stehen. Dann fällt diese
   eine Zeile weg und nichts anderes. */
.kar-band__karte::before { content: none; }

/* ===========================================================================
   DIE ZWEI STELLENKAESTEN AUF EINER LINIE — 31.08.2026

   Kundenwunsch: „Wichtig ist, dass die Immobilienabwicklung und der
   Backoffice Manager auf gleicher Höhe stehen wie Immobilienberater und
   Sales-Manager. Das muss optisch schön ausschauen, wenn die Kästen
   nebeneinander sind."

   Das Problem ist die Kleinzeile darueber: „SELBSTSTÄNDIG · VERTRIEB"
   passt in eine Zeile, „VOLLZEIT · IMMOBILIENABWICKLUNG & KUNDENBETREUUNG"
   braucht zwei. Damit begann der zweite Titel eine Zeile tiefer als der
   erste, und mit ihm rutschte alles darunter.

   Zwei Mindesthoehen loesen das, jede genau zwei Zeilen ihrer eigenen
   Schrift hoch (`2em` mal Zeilenabstand). Sie greifen nur nebeneinander —
   untereinander gestapelt gaebe es nichts auszurichten, und eine leere
   zweite Zeile waere dort ein Loch.

   BEWUSST KEIN `grid-template-rows` am Raster: die zwei Kaesten sind
   `<li>` in einer Flexliste, und ein Umbau auf Raster waere eine
   Gestaltungsaenderung. Die Mindesthoehe erreicht dasselbe an genau den
   zwei Zeilen, an denen es klemmt.
   =========================================================================== */
@media (min-width: 780px) {
  .kar-karte__art {
    /* DREI Zeilen, nicht zwei — nachgemessen: „VOLLZEIT ·
       IMMOBILIENABWICKLUNG & KUNDENBETREUUNG" bricht in dieser Spalte auf
       DREI Zeilen (96 px bei 1440), „SELBSTSTÄNDIG · VERTRIEB" auf eine
       (32 px). Mit zwei Zeilen blieb ein Versatz von 32 px stehen.
       `flex-start`, damit BEIDE Kleinzeilen oben beginnen — der Kunde will
       „Immobilienabwicklung" und „Immobilienberater" auf einer Linie, nicht
       nur die Titel darunter. Die Luft entsteht damit unter der kuerzeren
       Zeile und nicht darueber. */
    /* ZWEI ZEILEN SEIT 01.09.2026 (Briefing Abschnitt 12): in der
       Fliesstextgroesse bricht die lange Kleinzeile nur noch zweimal,
       nachgemessen 50 px bei 1440. Drei Zeilen hielten eine leere Zeile
       vor. Vorher: min-height: calc(3em * var(--kar-lh-fliess)) */
    min-height: calc(2em * var(--kar-lh-fliess));
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .kar-karte__titel {
    min-height: calc(2em * 1.2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  /* Die Vertrauenszeile im Kopf teilt die Klasse, braucht aber weder
     Mindesthoehe noch Flex — sie steht allein. 01.09.2026. */
  .kar-kopf .kar-karte__art { min-height: 0; display: block; }
}


/* ===========================================================================
   12  MOBIL — 03.09.2026, Optimierungsbriefing Abschnitt 19 („Mobile")

   „Karten einspaltig, Buttons volle Breite, keine Mini-Schriften und
   keine horizontal abgeschnittenen Ticker oder Diagramme. Grosse weisse
   Felder reduzieren, keine leer wirkenden Zwischenraeume. Lesbarkeit hat
   Vorrang vor extrem filigraner Boutique-Optik."

   Gemessen bei 360 / 390 / 430 x 800 (Telefon) und 844 x 390 (quer),
   Aufnahmen und Messwerte im Kladdeordner wi/mobil-karriere. Jede Regel
   hier traegt den Wert, den sie beseitigt. Wortlaut und Aufbau der Seite
   sind unangetastet; oberhalb von 767 px aendert dieser Abschnitt nichts
   (die Kopfbereichsregeln gelten bis 899 px, siehe unten).

   767 und 899 sind die Umbruchpunkte, die diese Datei schon hat
   (.kar-karte einspaltig unter 768, Zweispalte in „Mehr als ein
   Arbeitsplatz" ab 900). Es kommt keiner dazu.
   =========================================================================== */
@media (max-width: 899px) {
  /* --- Kopfbereich --------------------------------------------------------
     Vorher bei 390 x 800: 1028 px hoch, also 1,28 Bildschirme, davon
     148,5 px Luft ueber der Marke (der Wert der Vorlage bei 1920) und
     keinerlei Luft unter der Vertrauenszeile — sie stand auf der Naht.
     Die Mindesthoehe (875,9–920,8 px) stammt aus der Bauaufnahme fuer
     breite Fenster; auf dem Telefon traegt der Inhalt die Hoehe selbst,
     quer (844 x 390) zwang sie den Kopf auf 921 px = 2,4 Bildschirme.
     Jetzt: Kopfleiste (--header-h, 72 px) plus 16 px, unten 44 px. */
  /* AUS DEN 16 PX WERDEN 48 — KUNDENWUNSCH 04.09.2026, woertlich: „… und
     setze alles weiter, von dem Estera-Logo beginnend, weiter nach unten,
     weil dann ein bisschen Platz frei wird."

     AUF DEM TELEFON WAR ES AM DRINGENDSTEN. Die 16 px waren der einzige
     sichtbare Abstand zwischen der Wortmarke in der Kopfleiste und der
     grossen Wortmarke im Kopfbereich — zweimal „ESTERA" fast auf Tuchfuehlung.
     Gemessen bei 390 x 800:

         sichtbare Luft ueber der Marke (unter der Kopfleiste)  16  ->  48 px
         Luft unter der Vertrauenszeile                         44  ->  44 px
         Hoehe des Kopfbereichs                              723,1 -> 755,1 px

     48 gegen 44 px: der Block steht damit fast genau mittig zwischen
     Kopfleiste und Naht, mit dem Tick mehr oben, den ein Textblock braucht,
     um nicht abgesackt zu wirken.

     DER KOPF BLEIBT UNTER EINEM BILDSCHIRM. 755,1 von 800 px sind 0,94
     Bildschirme; vor der Kuerzung waren es 862,6 px und damit 1,08. Die
     32 px sind also aus dem Ueberschuss bezahlt, den die Kuerzung von
     sieben auf drei Zeilen gebracht hat (139,5 px), nicht aus dem Bildschirm.
     Es ist DERSELBE WERT wie auf breiten Fenstern (dort 298 -> 330 px);
     eine zweite Zahl fuer denselben Kundenwunsch waere nur Ballast.
     Vorher: padding-top: calc(var(--header-h) + 16px). */
  .kar-kopf {
    padding-top: calc(var(--header-h) + 48px);
    padding-bottom: 44px;
    min-height: 0;
  }
  /* Das Markenfeld war 105 px hoch, weil die Vorlage dort ein 105er
     Logobild hat; auf dem Telefon sind das 60 px Leere ueber und unter
     einem 34-px-Schriftzug. */
  .kar-kopf__marke { height: auto; padding-top: 0; }
  .kar-kopf__sterne { margin-top: 16px; }
  /* Unterzeile: 21,42 px ergaben bei 390 px mit dem alten, langen Text
     SIEBEN Zeilen (225 px). In 18 px waren es fuenf, und 18 px liegt ueber
     der Fliesstextgrenze von 16 px. Weiss 82 % auf dem Schleier bleibt
     dieselbe Farbe.
     NACHTRAG 04.09.2026: Diese Regel war eine Zeit lang wirkungslos — die
     inzwischen entfallene Regel .kar-kopf .kar-unterzeile--zweisatz stand
     weiter hinten in der Datei, wog gleich schwer und hat die 18 px mit
     21 px ueberschrieben. Mit dem gekuerzten Text und ohne jene Regel sind
     es hier GEMESSEN drei Zeilen (Fuellung 94 / 99 / 50 %). */
  .kar-kopf .kar-angebot__unterzeile {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
  }
  /* Die zwei Knoepfe standen mit min-width 240 px als schmale Kaesten
     (243 von 342 px) untereinander — Briefing: volle Breite. */
  .kar-kopf__knoepfe { margin-top: 24px; gap: 12px; }
  .kar-kopf__knoepfe .kar-knopf { flex: 1 1 100%; min-width: 0; }
  /* Vertrauenszeile: 21,42 px Versalien mit 0,14 em Sperrung brachen bei
     390 px auf VIER Zeilen (~120 px) und wirkten wie eine zweite
     Ueberschrift. 15 px, Etikett-Rolle wie die Kleinzeilen der Karten;
     Sand auf Navy misst 7,5:1. */
  .kar-kopf .kar-karte__art {
    margin-top: 20px;
    font-size: 15px;
    letter-spacing: 0.12em;
  }
  /* Der Schleier ueber dem Film beginnt oben mit 34 % Navy. Im
     Telefon-Beschnitt (cover, Mitte) liegt hinter der Ueberschrift die
     hellste Bildzone der Schleife, das Fenster des Bueros; die kursive
     Sand-Haelfte der Ueberschrift mass dort gegen das hellste Bild
     4,34:1 (390 px, Bild 13). Mit 50 % am oberen Rand — dieselbe Farbe,
     nur frueher dichter — liegt sie ueber 4,5:1; die Unterkante bleibt
     wie gehabt volles Navy. Gerechnet ueber alle 16 Filmbilder
     (karriere-hero-kontrast.mjs). */
  .kar-kopf::before {
    background: linear-gradient(rgba(10, 25, 46, 0.5), rgb(10, 25, 46));
  }

  /* --- Vertikaler Rhythmus ------------------------------------------------
     Die groessten Luecken vorher (390 px): 136 px zwischen Laufband und
     Raute (64 Fuss + 72 Kopf), 128 px zwischen Goldstrich und
     „Das sagt unser Team" (32 + 64 + 64). Mit 48 statt 64 und 48 statt
     72 liegen beide unter 72 px, ohne dass sich zwei Abschnitte
     beruehren. Bis 899 px und nicht nur bis 767, weil ein quer
     gehaltenes Telefon (844 x 390) dieselben Luecken zeigte, nur auf
     einem halb so hohen Bildschirm. */
  .kar { --kar-luft: 48px; --kar-eng: 24px; }
  .kar-angebot { padding-top: 48px; }
  .kar-angebot__raute { margin-bottom: 20px; }
  .kar-goldstrich { margin-top: 24px; }
  .kar-wer { min-height: 0; }        /* 500 px Mindesthoehe: Deckmass der Vorlage, hier traegt der Text */
  .kar-wer__text { margin-top: 24px; }
  .kar-band { margin-top: 20px; }

  /* Der Text in „Mehr als ein Arbeitsplatz" stand mittig — die
     Grundregel, die erst ab 900 px auf linksbuendig kippt. Drei Absaetze
     mit 90 Woertern mittig gesetzt lassen das Auge bei jedem
     Zeilenanfang suchen (bei 844 px quer: 66 Zeichen je Zeile, ragged
     an beiden Seiten); der Kunde hat ausserdem „Text links und
     linksbuendig" verlangt, und das gilt auf dem Telefon nicht weniger.
     Die Ueberschrift und das Etikett darueber bleiben mittig, wie ab
     900 px auch. */
  .kar-wer__text { text-align: left; }
}

@media (max-width: 767px) {
  /* --- Laufband -------------------------------------------------------------
     Die Karten sind 344 px breit; bei 360 px Fenster ist das breiter als
     der Satzspiegel (312 px), und in der ruhigen Darstellung (seitlich
     rollbare Reihe) ragte die erste Karte rechts aus dem Rand. Deckel auf
     Fensterbreite minus Rand, laufend wie rollend. */
  .kar-band__karte {
    flex-basis: min(344px, calc(100vw - 2 * var(--kar-rand)));
    width: min(344px, calc(100vw - 2 * var(--kar-rand)));
  }

  /* --- Rollenkarten und FAQ ----------------------------------------------
     Vorher bei 390 px: 778 / 748 px je Karte. Davon 218 px Bild (4:3),
     Kartentext in Leadgroesse 21,42 px auf SIEBEN Zeilen, Kleinzeile
     16,66 px Versalien auf drei Zeilen, dazu 24 + 20 + 24 + 24 px
     Abstaende. Nachher: Bild 3:2 (193 px — Haende und Gesicht bleiben im
     Ausschnitt, geprueft), Text 18 px (sechs Zeilen, ueber der Grenze
     von 15 px fuer Kartentexte), Kleinzeile 14 px (zwei Zeilen; Sand auf
     Navy 7,5:1), Innenabstand 20 px (Grenze 16). Die Karte verliert rund
     150 px und bleibt luftig. */
  .kar-liste { gap: 20px; }
  .kar-karte { padding: 20px 20px 0; }
  .kar-karte__inhalt { padding: 16px 0 20px; }
  .kar-karte__bild { aspect-ratio: 3 / 2; }
  .kar-karte__art { font-size: 14px; }
  .kar-karte__bereiche { margin-top: 12px; font-size: 18px; line-height: 1.5; }
  /* Die zwei Knoepfe je Karte: gestapelt, Hauptknopf zuerst (DOM-Folge),
     jeder ueber die ganze Kartenbreite — 180 px Flexbasis liess sie bei
     breiten Karten nebeneinander stehen, unter 768 px passen sie ohnehin
     nicht nebeneinander (290 px Innenbreite). */
  .kar-karte__knoepfe { padding-top: 20px; gap: 12px; }
  .kar-karte__knoepfe .kar-knopf { flex-basis: 100%; }
}

/* --- Laufband als stehende Reihe: bei „reduce" UND ohne Javascript --------
   Abschnitt 10 macht aus dem Band bei prefers-reduced-motion eine seitlich
   rollbare Reihe. Ohne Javascript lief das Band dagegen weiter (die
   CSS-Bildfolge haengt nicht am Skript) — mit Kantenmaske und
   overflow: hidden, also ohne Moeglichkeit, eine Karte festzuhalten.
   Das Merkmal data-js='an' setzt allein karriere.js, und zwar erst NACH
   dem Ausstieg fuer „reduce"; `:not([data-js='an'])` trifft deshalb genau
   die Faelle, in denen die Seite ohne Bewegung dastehen soll: kein
   Skript, kein IntersectionObserver, ruhige Darstellung. Die Regeln sind
   dieselben wie in Abschnitt 10, nur an dieser Bedingung. */
.kar:not([data-js='an']) .kar-band {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  -webkit-mask-image: none;
          mask-image: none;
}
.kar:not([data-js='an']) .kar-band__spur {
  animation: none;
  transform: none;
  width: max-content;
  padding-inline: var(--kar-rand);
}
.kar:not([data-js='an']) .kar-band__karte { scroll-snap-align: start; }
.kar:not([data-js='an']) .kar-band__karte--kopie { display: none; }

/* Gemessen bei 360–430 px in der ruhigen Darstellung: die erste Karte
   stand bei x = 0 statt bei 24 px, obwohl die Spur 24 px Innenabstand
   traegt. Der Browser rastet beim Laden auf den naechsten Haltepunkt ein
   (scroll-snap-align: start der ersten Karte) und rollt die Reihe dabei
   um genau diese 24 px nach links. scroll-padding rechnet den Rand in die
   Haltepunkte ein; die Karte bleibt am Satzspiegel. Ohne Rollleiste
   (laufende Fassung) ist die Angabe wirkungslos. */
.kar-band { scroll-padding-inline: var(--kar-rand); }

/* Sprungziel „Estera kennenlernen" — 04.09.2026. Die Kopfleiste ist
   `position: fixed` und 104 px hoch; ohne diesen Abstand landet die
   Oberkante des Abschnitts genau darunter und die ersten Bildpunkte liegen
   hinter der Leiste. Der Wert ist die gemessene Leistenhoehe plus etwas
   Luft, damit der Abschnitt nicht angeschnitten beginnt. */
#mehr-als-ein-arbeitsplatz { scroll-margin-top: 120px; }

/* ===========================================================================
   HAEUFIGE FRAGEN ALS AUFKLAPPER — 04.09.2026

   Kundenwunsch: „Die Anordnung der Kaesten soll so bleiben, aber es soll so
   sein wie auf der Landingpage: Man sieht immer nur die Headline, dann
   drueckt man auf den Pfeil und dann faehrt der Text darunter aus. Die
   Anordnung 2-2-1 soll genauso bleiben."

   Das Raster (.kar-liste) und der Kasten (.kar-karte) sind unberuehrt — nur
   der Inhalt eines Kastens ist jetzt Knopf plus Fach. Die weiche Hoehe
   laeuft ueber `grid-template-rows: 0fr -> 1fr`, dasselbe Muster wie in der
   FAQ der Startseite; eine gerechnete Pixelhoehe braeuchte einen
   Rollhorcher und spraenge bei jedem Wortwechsel.

   OHNE JAVASCRIPT fehlt `[data-js='an']` an der Liste: dann greift keine
   dieser Regeln, alle Faecher stehen offen, und die Section ist eine
   schlichte Fragenliste.
   =========================================================================== */
.kar-faq__frage { margin: 0; }
.kar-faq__knopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  width: 100%;
  min-height: 44px;                    /* Trefferflaeche fuer den Daumen */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kar-faq__knopf:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
  border-radius: 4px;
}
.kar-faq__wort { flex: 1 1 auto; }

/* Der Winkel dreht sich beim Oeffnen — dasselbe Zeichen und dieselbe
   Drehung wie auf der Startseite. */
.kar-faq__winkel {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1.15rem;
  margin-top: 0.15em;
  color: var(--sand);
  transition: transform 0.3s var(--ease, ease);
}
.kar-faq__winkel svg { width: 100%; height: auto; }
.kar-liste[data-js='an'] .kar-faq__knopf[aria-expanded='true'] .kar-faq__winkel {
  transform: rotate(180deg);
}

/* Das Fach. Zugeklappt ist die Rasterzeile 0fr hoch, offen 1fr — dazwischen
   blendet der Browser weich um. `min-height: 0` an der Klappe ist Pflicht,
   sonst haelt der Rasterinhalt seine Mindesthoehe und nichts bewegt sich. */
.kar-liste[data-js='an'] .kar-faq__fach {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.36s var(--ease, ease), opacity 0.28s var(--ease, ease);
}
.kar-liste[data-js='an'] .kar-faq__klappe { min-height: 0; overflow: hidden; }
.kar-liste[data-js='an'] .kar-faq__fach[data-offen='true'] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.kar-liste[data-js='an'] .kar-faq__fach .kar-karte__bereiche { margin-top: 0.9rem; }

/* Beim Start einmal lautlos zufahren — der Besucher soll die Section nicht
   erst zugehen sehen. Das Attribut setzt faq.js fuer zwei Bilddurchlaeufe. */
.kar-liste[data-start] .kar-faq__fach,
.kar-liste[data-start] .kar-faq__winkel { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .kar-liste[data-js='an'] .kar-faq__fach,
  .kar-liste[data-js='an'] .kar-faq__winkel { transition: none; }
}

/* Die Fragenkaesten duerfen sich NICHT gegenseitig mitziehen — 04.09.2026.
   `.kar-liste` steht auf `align-items: stretch`; das ist bei den zwei
   Rollenkarten richtig (sie sollen gleich hoch sein), bei einem Aufklapper
   aber falsch: gemessen wuchs beim Oeffnen von Karte 1 auch Karte 2 von
   110 auf 304 px und stand mit 194 px Leere daneben. Nur die geoeffnete
   Karte waechst; geschlossen sind weiterhin alle gleich hoch. */
.kar-liste[data-faq] { align-items: flex-start; }

/* ===========================================================================
   DIE ZWEI ROLLENKAESTEN AUF WEISS — 04.09.2026

   Kundenwunsch woertlich: „Bei zwei Rollen ein gemeinsamer Anspruch: Die
   beiden Kästen, einmal der von Immobilienberatern und einmal der von
   Back-Office-Managern, sollen einen weißen Hintergrund bekommen. Die ganze
   Section soll den blauen Hintergrund behalten, aber der Hintergrund der
   jeweiligen beiden Kästen soll weiß sein."

   Der Abschnitt bleibt also Navy; nur die zwei Kaesten kehren sich um. Der
   Wahlhaken ist `.kar-karte--klick` — die Klasse tragen NUR diese beiden
   Kaesten, die FAQ-Kaesten weiter unten fuehren sie nicht und bleiben
   unveraendert dunkel.

   JEDER TON IM KASTEN MUSS MITGEDREHT WERDEN. Die Werte darueber sind fuer
   Weiss auf Navy gerechnet; unveraendert ergaeben sie auf Weiss:
       Titel        #FFFFFF                    1,00:1  unlesbar
       Fliesstext   rgba(255,255,255,0.82)     1,15:1  unlesbar
       Kleinzeile   var(--sand) #D9B485        1,88:1  unlesbar
       Linienknopf  Schrift und Kante in Weiss 1,00:1  unsichtbar
   Deshalb steht hier jeder dieser vier Toene noch einmal.

   DIE KLEINZEILE wird NICHT von Sand auf ein dunkleres Sand gezogen —
   #D9B485 traegt auf Weiss keinen lesbaren Wert. Sie bekommt das Bronze,
   das im Projekt schon die Fortschrittsschiene fuehrt (#8A5A20, 6,45:1 auf
   Weiss). Damit bleibt der warme Akzent erhalten und die Zeile ist lesbar.

   DER VOLLE KNOPF bleibt Sand mit weisser Schrift. Das ist die
   ausdrueckliche, mehrfach bestaetigte Entscheidung des Kunden („wenn die
   Hintergrundfarbe diesen Goldton hat, dann muss die Schriftfarbe weiss
   sein") und gilt site-weit — auf dem weissen Kasten aendert sich an ihm
   nichts.
--------------------------------------------------------------------------- */
/* CREME STATT WEISS — 04.09.2026, Kundenwunsch woertlich: „Die zwei Kästen
   sollen nicht die weiße Hintergrundfarbe haben, sondern cremefarben."
   Es ist der Cremeton, den das Projekt schon fuehrt (--fl-creme #F7F3F0,
   base.css); es wird kein zweiter erfunden. Alle Kontrastwerte darunter
   sind gegen ihn nachgerechnet und aendern sich gegenueber Weiss nur in
   der zweiten Nachkommastelle — die Angaben bleiben gueltig.
   Vorher: background: var(--paper); */
.kar-karte--klick {
  background: var(--fl-creme);
  border-color: rgba(10, 25, 46, 0.14);
}
/* Ueberfahren: dieselbe Bauart wie oben, nur mit umgekehrtem Vorzeichen —
   dort hellte die Flaeche auf, hier dunkelt sie leicht nach, und die Kante
   tritt hervor (0,14 → 0,34 = 1,45:1 → 2,9:1 gegen Weiss; die Karte ist
   keine Bedienflaeche mit eigener Kontrastanforderung, ihre zwei Knoepfe
   sind es und tragen sie selbst). */
.kar-karte--klick:hover,
.kar-karte--klick:focus-within {
  border-color: rgba(10, 25, 46, 0.34);
  background-color: #F1EBE6;   /* eine Spur tiefer als --fl-creme */
}
/* DIE KLEINZEILE UNTER DER STELLENBEZEICHNUNG — 04.09.2026

   Kundenwunsch woertlich: „Es soll darunter stehen […] unter dem (m/w/d).
   Es soll in schwarz stehen, es soll kleiner stehen und es soll näher an
   die Stelle ran."

   Drei Aenderungen, alle nur hier — die Vertrauenszeile im Kopfbereich
   (.kar-kopf .kar-karte__art) benutzt dieselbe Klasse und bleibt, wie sie
   ist:

   SCHWARZ. --ink-black #2B2E33 auf dem Cremegrund #F7F3F0 misst 12,76:1.
   Vorher stand hier --sand (1,88:1) und davor #8A5A20 (5,34:1); die
   Knopffarbe war eine Ansage von zwei Stunden vorher, „schwarz" ist die
   juengere und geht vor.

   KLEINER. 16,66 → clamp(12,5px, 0,95vw, 14px). Die Zeile traegt keinen
   Fliesstext, sondern drei Schlagworte in Versalien mit Sperrung; die
   16-px-Untergrenze aus Abschnitt 19 des Optimierungsbriefings gilt dem
   Lesetext. 14 px in Versalien haben dieselbe Versalhoehe wie rund 19 px
   gemischt gesetzt.

   NAEHER AN DIE STELLE. 14 px Abstand nach oben statt der 16 px, mit denen
   sie als Kleinzeile UEBER der Ueberschrift stand. Nach unten haelt der
   Knopfblock seine 24 px, damit die Zeile klar zur Ueberschrift gehoert
   und nicht zwischen zwei Bloecken schwebt.
   NACHGESETZT am selben Tag, Kundenwunsch: „nur einen kleinen Ticken
   weiter nach unten. Nicht viel, nur einen kleinen Ticken." Von 8 auf
   14 px — sechs Pixel, und der Abstand nach oben bleibt kleiner als der
   nach unten (24 px), die Zeile gehoert also weiterhin sichtbar zur
   Stellenbezeichnung und nicht zum Knopfblock. */
.kar-karte--klick .kar-karte__art {
  color: var(--ink-black);                        /* 12,76:1 */
  margin-top: 14px;
  font-size: clamp(12.5px, 0.95vw, 14px);
  letter-spacing: 0.12em;
}
.kar-karte--klick .kar-karte__titel { color: var(--navy-900); }   /* 16,4:1 */
.kar-karte--klick .kar-karte__bereiche { color: var(--ink-mute); }   /* 5,20:1 */
/* Der Linienknopf dreht mit: Schrift Navy, Kante Navy statt Weiss. Die
   Kante steht bei 0,42 — das sind 3,03:1 gegen Weiss und damit ueber der
   Anforderung von 3:1 fuer die Umrandung eines Bedienelements. */
.kar-karte--klick .kar-knopf--linie {
  color: var(--navy-900);
  box-shadow: inset 0 0 0 2px rgba(10, 25, 46, 0.42);
}
.kar-karte--klick .kar-knopf--linie:hover {
  box-shadow: inset 0 0 0 2px rgba(10, 25, 46, 0.70);
  background: rgba(10, 25, 46, 0.05);
}

/* ===========================================================================
   DIE ZWEI ROLLENKAESTEN: BREITER, FLACHER, MIT GROESSERER UEBERSCHRIFT
   04.09.2026

   Kundenwunsch woertlich: „Das, was in Gold steht […] soll raus. Dafür soll
   die Headline, also Immobilienberater, Sales Manager, (m/w/d) und
   Back-Office Manager, größer geschrieben werden. Das soll dann den Platz
   einfüllen. Immobilienberater und Sales Manager kannst du dann auf zwei
   Zeilen machen, Back-Office Manager auf eine Zeile, und du musst es größer
   schreiben und noch dicker, sodass es noch prägnanter ist. […] Die
   Bildgröße soll gleich bleiben. Beide Kästen ein bisschen breiter und
   nicht so hoch."

   Die goldene Kleinzeile ist aus dem Markup entfernt, nicht hier
   ausgeblendet — sie stand in karriere.html und ist dort samt Wortlaut
   auskommentiert. Ausblenden haette sie im Vorlesegeraet stehen lassen.

   BREITER, ABER NUR HIER. .kar-liste traegt auch die FAQ-Kaesten weiter
   unten, und deren Anordnung 2-2-1 hat der Kunde am 31.08. ausdruecklich so
   bestellt. Die Breite haengt deshalb an :not([data-faq]) — die
   Stellenliste ist die einzige ohne dieses Merkmal.
       Liste  968 → 1080 px      Kasten  468 → 524 px
   (2 × 524 + 32 Spalte = 1080; die Rechnung geht auf, beide Kaesten stehen
   weiterhin nebeneinander und gleich breit.)

   NICHT HOEHER TROTZ GROESSERER SCHRIFT. Drei Posten gegeneinander,
   gemessen bei 1440 px:
       Kleinzeile weg                        −29 px
       Ueberschrift 23,8 → 30 px, 2 Zeilen   +15 px
       Fliesstext in 476 statt 416 px Breite −30 px (eine Zeile weniger)
   Der Kasten wird damit flacher, nicht hoeher.

   DIE BILDGROESSE BLEIBT. Das Fenster stand auf 4:3 und waere im breiteren
   Kasten von 416 × 312 auf 476 × 357 gewachsen — 45 px mehr Hoehe, genau
   das Gegenteil der Ansage. Es steht deshalb jetzt auf 3:2 und misst
   476 × 317: dieselbe Hoehe wie vorher, nur breiter angeschnitten. Der
   Bildausschnitt bleibt ueber object-fit: cover unverzerrt.
--------------------------------------------------------------------------- */
.kar-liste:not([data-faq]) { max-width: 1080px; }
.kar-karte--klick { flex-basis: 420px; max-width: 524px; }
.kar-karte--klick .kar-karte__bild { aspect-ratio: 3 / 2; }

/* Groesser und dicker: 600 → 700, und die Obergrenze von 23,8 auf 30 px.
   Die Rechnung ist dieselbe Bauart wie --kar-fs-kartentitel oben
   (min(Deckel, Grundwert + vw-Anteil)), damit die Zeile mit dem Fenster
   mitgeht statt zu springen.
   ZWEI ZEILEN UND EINE ZEILE ergeben sich aus der Breite, nicht aus einem
   erzwungenen Umbruch: „Immobilienberater / Sales Manager (m/w/d)" braucht
   bei 30 px mehr als die 476 px des Kastens und bricht am Schraegstrich,
   „Backoffice Manager (m/w/d)" bleibt mit rund 360 px darunter. Gemessen
   bei 1920, 1440, 1200 und 1024 px. */
.kar-karte--klick .kar-karte__titel {
  font-size: min(30px, calc(21px + 1.05vw));
  font-weight: 700;
  line-height: 1.18;
}

/* ===========================================================================
   DIE GOLDENE TRENNLINIE ZWISCHEN ZWEI ABSCHNITTEN — 04.09.2026

   Kundenwunsch: „eine feine goldene Linie […] genau mittig zwischen den
   zwei Sections." Sie sitzt zwischen „Mehr als ein Arbeitsplatz" und
   „Das sagt unser Team"; die Begruendung und der Wortlaut stehen an der
   Stelle im Markup.

   BAUART WIE .vtr__linie AUF DER STARTSEITE — dieselbe Haarlinie von 1 px
   in --gold, dieselbe weiche Ausblendung zum Rand, dieselbe Deckkraft von
   0,75. Der einzige Unterschied ist die Symmetrie: dort geht die Linie nur
   nach rechts aus, hier nach beiden Seiten, weil sie hier keine Bildkante
   begleitet, sondern mittig zwischen zwei Abschnitten stehen soll. Die
   volle Deckung liegt deshalb ueber der Mitte (30–70 %) und laeuft nach
   links wie rechts auf Null.

   DIE BREITE ist die Inhaltsbreite der Seite (--kar-cap plus Rand, wie
   .kar-mitte) — die Linie steht damit genau so breit wie die Ueberschriften
   darueber und darunter und nicht ueber die volle Fensterbreite.

   DIE HOEHE steht in einem eigenen Element und nicht als border-top am
   naechsten Abschnitt: der Abstand nach oben und unten muss GLEICH sein
   („genau mittig"), und mit --kar-luft auf beiden Seiten ist das eine
   Zeile statt einer Rechnung aus margin und padding zweier Nachbarn.
   =========================================================================== */
.kar-trenner {
  width: 100%;
  max-width: calc(var(--kar-cap) + 2 * var(--kar-rand));
  margin-inline: auto;
  padding-inline: var(--kar-rand);
  margin-block: var(--kar-luft);
}
.kar-trenner::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(168, 135, 79, 0)  0%,
      var(--gold)           30%,
      var(--gold)           70%,
      rgba(168, 135, 79, 0) 100%);
  opacity: 0.75;
}

/* ===========================================================================
   HIER STAND BIS ZUM 04.09.2026 „DIE UNTERZEILE IM KOPFBEREICH: EIN SATZ
   JE ZEILE" — ZWEI REGELN, BEIDE ERSATZLOS ENTFALLEN:

       .kar-kopf .kar-unterzeile--zweisatz { font-size: 21px; }
       @media (max-width: 1099px) { .kar-nur-breit { display: none; } }

   Sie waren am Vormittag desselben Tages entstanden, weil die alte, lange
   Unterzeile bei 21,42 px um sieben Pixel breiter war als die Spalte
   (1095 gegen 1088 px) und deshalb „mit." allein in die zweite Zeile
   rutschte. Die 21 px trugen genau diese sieben Pixel ab; das <br>
   .kar-nur-breit erzwang den Umbruch nach „mit." und verschwand unter
   1100 px wieder.

   BEIDE GRUENDE SIND MIT DER KUERZUNG WEG (Kundenwunsch 04.09.2026:
   „Kuerze die Subline auf der Hero-Section bei Karriere. Es sind aktuell
   7 Zeilen. Kuerze es bitte auf 3 Zeilen, nur das Wichtigste"). Der neue,
   kuerzere Text steht bei 1440 px in EINER Zeile — es gibt keine zweite
   mehr, in die etwas rutschen koennte, und nichts mehr umzubrechen.

   DIE 21-PX-REGEL WAR AUSSERDEM SCHAEDLICH. Sie stand am Ende der Datei
   und damit HINTER der Telefonregel in @media (max-width: 899px):

       .kar-kopf .kar-angebot__unterzeile { font-size: 18px; ... }

   Beide Selektoren wiegen gleich schwer (zwei Klassen). Die spaetere
   gewann und hat die 18 px auf dem Telefon ueberschrieben — GEMESSEN
   standen bei 390 px 21 px statt der gebauten 18 px, und das war neben
   der Textlaenge der zweite Grund fuer die sieben Zeilen, ueber die sich
   der Kunde beschwert hat. Mit dem Wegfall greift die Telefonregel wieder
   wie vorgesehen: 18 px unter 900 px, 21,42 px darueber.
   =========================================================================== */


/* ===========================================================================
   ZWEI FASSUNGEN DER UNTERZEILE — 04.09.2026, ZWEITE RUNDE

   Kundenwunsch woertlich: „Die Subline bei der Karriere-Hero-Section hast du
   viel kürzer gemacht, als sie ursprünglich war. […] Bei der Desktop-Ansicht
   sollte es aber genauso bleiben, wie es davor war, sondern nur bei der
   mobilen Ansicht solltest du weniger Text verwenden."

   Ich hatte den Text im Markup gekuerzt — damit stand er ueberall kuerzer,
   auch dort, wo er nie zu lang war. Er steht jetzt zweimal in DEMSELBEN
   Absatz: die lange, urspruengliche Fassung fuer breite Fenster, die kurze
   fuer schmale. Umgeschaltet wird ueber `display`, und was auf display:none
   steht, faellt auch aus dem Vorlesebaum — es wird also nie beides gelesen.

   767 px ist die Grenze, weil dort auch die uebrigen mobilen Umstellungen
   dieses Tages ansetzen (Kopfbereich der Startseite, Vergleichsbilder).
   Zurueckgenommen ist ausserdem der Abstand, um den ich den Kopfblock nach
   unten gerueckt hatte: 330 px sind wieder 298, der Wert der Bauaufnahme.
   Auf dem Telefon bleibt er bei header-h + 48 px — dort war der Platz das
   Problem, das der Kunde beschrieben hat.
   =========================================================================== */
.nur-schmal { display: none; }
@media (max-width: 767px) {
  .nur-breit  { display: none; }
  .nur-schmal { display: inline; }
}

/* ===========================================================================
   DER KOPFBEREICH DER KARRIERESEITE AUF DEM TELEFON — 04.09.2026

   Kundenwunsch woertlich: „Bei der Karriere-Hero-Section will ich, dass du
   die komplette Subline entfernst, aber nur auf der mobilen Version. Die
   Desktop-Version soll wieder unangetastet bleiben. Die CTA-Buttons sollen
   ein bisschen kleiner gemacht werden."

   Wie auf den beiden Stellenseiten: die Unterzeile steht im
   urspruenglichen Wortlaut im Markup und faellt hier per `display: none`
   weg — nicht gekuerzt, damit der Desktop unberuehrt bleibt. Die zwei
   Knoepfe werden kleiner, aber nicht kleiner als die 44 px Trefferflaeche
   und 16 px Schrift, die das Optimierungsbriefing setzt.
   =========================================================================== */
@media (max-width: 767px) {
  .kar-kopf .kar-angebot__unterzeile { display: none; }
  .kar-kopf__knoepfe .kar-knopf,
  .kar-kopf__knoepfe .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 1rem;
  }
  /* Die Unterzeile trug den Abstand zur Knopfreihe. */
  .kar-kopf__knoepfe { margin-top: 20px; }
}


/* ===========================================================================
   DER KOPFBEREICH NOCH EINEN GRAD ZURUECK — 09.09.2026

   Kundenwunsch woertlich: „Bei der Karriere-Seite auf der Hero-Section soll
   ‚Baue mit uns die Immobilienberatung, an der sich die Branche misst‘
   kleiner geschrieben werden. Die Schriftgroesse soll kleiner sein, und die
   zwei CTA-Buttons darunter, ‚Offene Positionen ansehen‘ und ‚Estera
   kennenlernen‘, sollen auch kleiner sein. Die sollen nicht zu viel von der
   Breite ausfuellen, damit man mehr von dem Hintergrundvideo erkennen kann."

   NUR UNTER 768 px. Der Desktop bleibt unangetastet — das ist die Auflage,
   die dreimal gestellt wurde. Alles hier steht in einer Breitenabfrage.

   1) DIE UEBERSCHRIFT. Der Projektwert --kar-fs-titel rechnet
      min(57,12px, 11,14px + 5,986vw); bei 390 px sind das
      11,14 + 23,35 = 34,49 px, gemessen ueber vier Zeilen 122,2 px hoch.
      Der neue Wert clamp(26px, 7.2vw, 30px) ergibt
        360 px -> 25,92 -> auf 26 gedeckelt
        390 px -> 28,08 px   (das sind 81 % des alten Grades)
        767 px -> 55,2  -> auf 30 gedeckelt
      Die Ueberschrift ist KEIN Fliesstext und keine Bedienschrift, die
      16-px-Untergrenze gilt fuer sie nicht; 26 px sind trotzdem weit
      darueber. Der Zeilenabstand bleibt --kar-lh-titel, er rechnet
      relativ und geht mit.

   2) DIE ZWEI KNOEPFE. Sie standen seit dem 04.09. auf `flex: 1 1 100%`
      (Regel in @media max-width: 899px), also mit 342 von 390 px = 88 %
      der Fensterbreite als zwei volle Balken vor dem Film. Hier gehen sie
      zurueck auf ihre Inhaltsbreite — `flex: 0 1 auto` ist der Wert, den
      .kar-kopf__knoepfe .kar-knopf am breiten Fenster ohnehin traegt; die
      Mindestbreite von dort (240 px) wird auf 0 gesetzt, damit der
      kuerzere der beiden nicht kuenstlich mitwaechst.
      GEMESSEN danach bei 390 px: „Offene Positionen ansehen" 207,9 px und
      „Estera kennenlernen" 168,5 px — 61 % und 49 % des Satzspiegels von
      342 px, statt vorher zweimal 100 %. Beide stehen mittig (Mittelachse
      195,0 px = Behaeltermitte).
      Die 20 px Innenabstand je Seite sind 4 px mehr
      als die 16 px vom 04.09. — ohne volle Breite braucht der Text wieder
      seine eigene Luft an den Kanten.
      Hoehe und Schriftgrad bleiben bei 44 px und 1rem = 16 px, den beiden
      Untergrenzen aus dem Optimierungsbriefing (Trefferflaeche und
      Bedienschrift). Kleiner geht ausdruecklich nicht.
      `flex-wrap: wrap` an .kar-kopf__knoepfe steht schon in der Grundregel:
      207,9 + 12 + 168,5 = 388,4 px passen nicht in 342 px, die beiden
      stehen also weiterhin untereinander — jetzt aber mittig und schmal
      statt randvoll.
   =========================================================================== */
@media (max-width: 767px) {
  .kar-kopf__titel { font-size: clamp(26px, 7.2vw, 30px); }

  .kar-kopf__knoepfe .kar-knopf,
  .kar-kopf__knoepfe .btn {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    padding: 0 20px;
  }
}


/* ===========================================================================
   „MEHR ALS EIN ARBEITSPLATZ" STEHT AUF DEM TELEFON MITTIG — 09.09.2026

   Kundenwunsch woertlich: „Bei ‚Mehr als ein Arbeitsplatz / Ein Umfeld, in
   dem aus Ambition echte Entwicklung wird‘ ist der Text linksbuendig, aber
   er soll mittig sein. Der ganze Text soll mittig sein."

   WAS VORHER LINKS STAND — und was schon mittig war. Etikett und
   Ueberschrift sind seit dem 31.08.2026 mittig (.kar-wer__etikett,
   .kar-wer .kar-titel). LINKS stand allein der Fliesstext, und zwar durch
   die Regel `.kar-wer__text { text-align: left }` im Block
   @media (max-width: 899px). Die stammt vom 04.09.2026 und war damals
   begruendet: drei Absaetze mit 90 Woertern mittig gesetzt lassen das Auge
   bei jedem Zeilenanfang suchen. Der Kunde hat das jetzt ausdruecklich
   anders entschieden — seine Ansage sticht die Begruendung.

   DIE ALTE REGEL BLEIBT STEHEN und wird nicht geloescht: sie gilt weiter
   im Streifen 768 bis 899 px (Tablet hochkant und Telefon quer, 844 x 390),
   wo die Zeile 66 Zeichen traegt und das Argument von damals unveraendert
   zutrifft. Der Kunde spricht von der mobilen Ansicht; die Grenze dafuer
   ist in diesem Projekt 767 px. Diese Regel hier steht spaeter in der
   Datei, wiegt gleich schwer und gewinnt deshalb unterhalb von 768 px.

   `margin-inline` braucht es nicht: der Satzspiegel-Deckel
   min(66ch, 707.1px) traegt schon `margin: 28px auto 0` aus der
   Grundregel, und die Ausnahme `margin-inline: 0` gilt erst ab 900 px.
   GEMESSEN bei 390 px: der Block ist 342 px breit und damit ohnehin
   schmaler als sein Deckel — er kann gar nicht seitlich haengen.

   AUFZAEHLUNGSPUNKTE GIBT ES IN DIESEM ABSCHNITT KEINE. Nachgezaehlt: die
   drei Bausteine sind <p>-Absaetze, kein <ul> und kein <li>. Die
   Umstellung, die in warum.css unter „DER SATZ STEHT MITTIG" noetig war —
   der Punkt aus dem absoluten ::before zurueck in den Fluss — hat hier
   also keinen Gegenstand. Kommt spaeter eine Liste dazu, ist das Muster
   dort nachzulesen und mitzunehmen.

   DIE HAARLINIE UNTER DEM ETIKETT ist in diesem Abschnitt keine Linie,
   sondern der Sandbalken .kar-balken. Er traegt einen Auslauf von 1,6 em
   RECHTS neben der Schrift (`inset: 0 -1.6em 0 0` an .kar-balken::before),
   der als Pseudoelement ausserhalb der Elementbreite liegt. Die Mitte, auf
   die `text-align: center` ausrichtet, ist deshalb NICHT die Mitte des
   sichtbaren Balkens: GEMESSEN bei 390 px lief die Schrift von x 53,6 bis
   336,4, der Auslauf bis 363,1 — sichtbare Mitte 208,4 gegen Behaeltermitte
   195, also 13,4 px zu weit rechts. `margin-right: 1.6em` nimmt den
   Auslauf in die Randbox auf; die Mittelachse verschiebt sich damit um
   0,8 em = 13,3 px nach links und der Balken steht sichtbar mittig.
   Die Einblendgeste bleibt unberuehrt — sie arbeitet mit clip-path an der
   Elementbox, und clip-path rechnet nicht gegen Raender.
   NUR IN .kar-wer: dasselbe Etikett steht ein zweites Mal in .kar-angebot
   („FINDE DEINE ROLLE") auf Navygrund, das ist ein anderer Abschnitt und
   nicht Gegenstand der Ansage.
   =========================================================================== */
@media (max-width: 767px) {
  .kar-wer__text { text-align: center; }
  .kar-wer .kar-wer__etikett .kar-balken { margin-right: 1.6em; }
}