.sprache__eintrag.ist-bald { opacity: .5; cursor: default; }
.sprache__eintrag.ist-bald::after { content: "bald"; margin-left: auto; padding-left: .75rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
/* Nutzerwunsch: Hintergrund überall flach #00022E und fixiert, wie auf der Live-Seite seit dem Hotfix (keine Satin-Wellen) */
html { background: #00022e; }
body { background: transparent; }
html::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #00022e; pointer-events: none; }
.wellen-flaeche { background-image: none !important; background-color: transparent !important; }
/* In variante-2b malt die Hero-Fläche das Satin-Standbild über ::before - auch das weg, Farbe bleibt #00022E */
.wellen-flaeche::before, .wellen-flaeche::after { background-image: none !important; background-color: #00022e !important; }
canvas[data-wellen], .wellen-vignette { display: none !important; }
/* Hero mobil (Nutzerwunsch 15.09.): Texte und Knöpfe unten direkt über der Slider-Leiste, oben mehr Platz fürs Bild, Schrift lesbar */
@media (max-width: 767px) {
  .hero--slider .slide { align-items: stretch; }
  .hero--slider .slide__raster, .hero--slider .slide--foto .slide__raster {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
    padding-top: .75rem; padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + 78px);
  }
  .hero--slider .slide__text { flex: none; }
  .hero--slider .slide__medien { flex: 1 1 0; height: auto; min-height: clamp(100px, 18svh, 150px); max-height: 400px; margin-bottom: auto; }
  .hero--slider .slide--foto .slide__raster { padding-top: clamp(110px, 20svh, 240px); }
  .hero--slider .slide__panel, .hero--slider .slide--rechts .slide__panel {
    top: calc(-1 * (var(--topbar-h) + var(--kopf-h))); bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + 60px); height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0) 100%);
  }
  .hero--slider .slide__panel .foto::after { background: linear-gradient(180deg, rgba(0, 2, 46, .84) 0%, rgba(0, 2, 46, .45) 14%, rgba(0, 2, 46, 0) 28%, rgba(0, 2, 46, 0) 42%, rgba(0, 2, 46, .7) 60%, rgba(0, 2, 46, .92) 80%); }
  .hero--slider .slide--foto :is(.kicker, .slide__titel, .slide__satz) { text-shadow: 0 1px 14px rgba(0, 2, 46, .75), 0 0 2px rgba(0, 2, 46, .5); }
  .hero--slider .slide--foto .kicker { color: var(--hell-300); }
}

/* kompakt-mobil.css – vermittlung.jobs, 2026-09-15, nur mobil (max-width: 767px).
   Zweck: Karten und Abschnitte auf Telefonen kompakter, damit man weniger scrollen muss (Nutzerwunsch vom iPhone).
   Zusammengefuehrt aus den Teilen rahmen, katalog, schritte, karten, wege. Diese Datei ersetzt kompakt.css samt teile/*.css.
   Jede Regel steht in @media (max-width: 767px): Tablet und Desktop bleiben pixelgleich. Nur CSS, kein HTML/JS.
   Keine Rahmenlinien, kein Gold, keine Inhalte versteckt (ausgeblendet sind nur rein dekorative SVGs mit aria-hidden).

   Gemeinsame Masse (beim Zusammenfuehren vereinheitlicht):
   - Abschnittsrhythmus: var(--abschnitt) = 2.5rem oben und unten; Kopfzeilen margin 1.25rem, Kicker 12.5 px.
   - Wischreihen: Reihe bis an beide Bildschirmraender (margin-inline -var(--rand)), padding-inline und
     scroll-padding-inline var(--rand), scroll-snap x mandatory, overscroll-behavior-x contain, Scrollbalken unsichtbar.
     Fotokarten min(82vw, 22rem), Luecke .75rem, padding-block .25rem .5rem.
   - Radien: kleine Kacheln 14px, Karten und Abschnittsfotos var(--radius-m), Formular-/Rechtspanels bleiben var(--radius-l).
   - Innenabstand: Textkarten 1rem, kleine 2er-Kacheln .85rem .85rem .9rem (Icon 36 px, Abstand Icon-Titel .6rem);
     Kartenraster-Luecke .625rem. */

@media (max-width: 767px) {

  /* =====================================================================
     1. Rahmen: Rhythmus, Kopfzeilen, Schnellanfrage, CTA-Band, Formulare, Rechtsseiten, Fuss
     ===================================================================== */

  /* ---------- Rhythmus ---------- */
  /* vorher clamp(3.75rem, ...) = 60 px oben + 60 px unten je Abschnitt */
  :root { --abschnitt: 2.5rem; }
  .kopfzeile { margin-bottom: 1.25rem; }
  .kopfzeile--zeile { gap: .6rem 1.5rem; }
  .kopfzeile .kicker { margin-bottom: .55rem; }
  /* Beschriftungen mindestens 12.5 px (vorher 11-12 px); Logo-/Marken-Slogans bleiben wie sie sind */
  .kicker, .ablauf__label, .direkt__label, .fuss__titel, .af__optional, .steckbrief__label { font-size: .78125rem; }
  /* Hero bleibt pixelgleich (Kicker dort wie im Original 12 px) */
  .slide .kicker { font-size: .75rem; }

  /* ---------- Schnellanfrage (Startseite) ---------- */
  .schnell { padding-top: 1.5rem; }
  .schnell__panel { gap: .8rem; padding: 1rem; }
  .schnell__kopf .kicker { margin-bottom: .3rem; }
  .schnell__form { gap: .5rem; }

  /* ---------- CTA-Band ---------- */
  .cta-band { padding-block: var(--abschnitt); }
  .cta-band .titel-1 { max-width: 20ch; font-size: 1.75rem; }
  .cta-band__text { margin-top: .6rem; font-size: .9375rem; line-height: 1.55; }
  .cta-band .knopfreihe { margin-top: 1rem; }
  .ich-cta .cta-band__marke, .ich-cta .marke-zeile { margin-bottom: .6rem; }

  /* ---------- Formularbereiche: nur Abstaende, alle Felder und Schritte bleiben ---------- */
  .formularbereich__raster { gap: 1rem; }
  .formularbereich__kopf .kicker { margin-bottom: .45rem; }
  .formularbereich__text { margin-top: .5rem; }
  .af-rahmen { padding: 1rem; }
  .af__kopf { gap: .35rem; margin-bottom: .75rem; }
  .af__schritt-titel { margin-bottom: .75rem; }
  .af__raster { gap: 1rem; }
  .af__label { margin-bottom: .35rem; }
  .af__hinweis { margin-bottom: .4rem; }
  .af__paar-felder { gap: .75rem; }
  .af__chip--icon { min-height: 48px; }
  .af__eingabe--text { min-height: 116px; }
  .af__check { padding: .75rem .85rem; }
  .af__tipp { margin-top: .6rem; }
  .af__aktionen { margin-top: 1.1rem; }
  .af__vertraulich { margin-top: .6rem; }
  .af:not(.ist-bereit) .af__schritt + .af__schritt { margin-top: 1.75rem; }
  .formularbereich__neben { gap: .5rem; }
  .formularbereich__foto { aspect-ratio: 16 / 9; border-radius: var(--radius-m); }
  .formularbereich__neben .direkt { gap: .4rem; }
  .formularbereich__neben .direkt__link { min-height: 56px; padding-block: .35rem; }

  /* ---------- Rechtsseiten ---------- */
  .recht { padding-top: 1.25rem; }
  .recht__raster { gap: .9rem; }
  .recht__spalte { gap: .75rem; }
  .recht-karte { padding: 1rem; }
  .recht-karte__kopf { gap: .75rem; }
  .recht-karte__icon { width: 42px; border-radius: 13px; }
  .recht-karte__text { margin-top: .8rem; line-height: 1.6; }
  .recht-karte__fuss { margin-top: .8rem; }
  .angaben { gap: .4rem; margin-top: 1rem; }
  .recht-karte__text + .angaben { margin-top: .8rem; }
  .angabe { padding: .65rem .85rem; }
  .rechte { gap: .4rem; margin-top: .9rem; }
  .rechte__punkt { padding: .6rem .85rem .6rem .6rem; }
  .recht-direkt { margin-top: 1rem; }

  .recht-band { padding-block: 1.5rem var(--abschnitt); }
  .recht-band__innen { gap: 1.25rem; }
  .recht-band .kicker { margin-bottom: .5rem; }
  .recht-band .titel-2 { font-size: 1.75rem; }
  /* Knoepfe nebeneinander (vorher brach "Anfrage" in eine zweite Reihe um) */
  .recht-band .knopfreihe { flex-wrap: nowrap; margin-top: 1rem; }
  .recht-band .knopfreihe .knopf--gross { flex: 1 1 0; min-width: 0; }
  /* position: relative fehlte -> der Pfeil sass ausserhalb der Karte ueber dem Anfrage-Knopf */
  .recht-weiter { position: relative; padding: 1rem 4.4rem 1rem 1rem; }

  /* Datenschutz "Auf einen Blick": engere Zeilen */
  .recht-blick__panel { padding: 1rem; }
  .recht-blick__titel { margin-bottom: .6rem; }
  .recht-blick__liste { gap: .4rem; }
  .recht-blick__liste .recht-blick__punkt { gap: .75rem; padding: .6rem .8rem .6rem .6rem; border-radius: 14px; }
  .recht-blick__liste .recht-blick__icon { width: 38px; height: 38px; }
  .recht-blick__liste .recht-blick__icon .icon { width: 1.1rem; height: 1.1rem; }
  .recht-blick__liste .recht-blick__wort { font-size: 1rem; line-height: 1.3; }
  .recht-blick__liste .recht-blick__text { line-height: 1.4; }

  /* ---------- Fuss ---------- */
  .fuss { padding-top: 1.5rem; }
  .fuss__oben { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .fuss__marke { grid-column: 1; grid-row: 1; }
  .fuss__spalte--seiten { grid-column: 1; grid-row: 2; }
  .fuss__spalte--kontakt { grid-column: 1; grid-row: 3; }
  .fuss__spalte--recht { grid-column: 1; grid-row: 4; }
  .fuss__logo { gap: .65rem; }
  .fuss__mono { width: 40px; height: 31px; }
  .fuss__text { max-width: none; margin-top: .45rem; line-height: 1.5; }
  .fuss__titel { margin-bottom: .1rem; line-height: 1.35; }
  /* Linklisten als Raster mit gemeinsamer rechter Spalte (7.75rem): Seiten 3 x 2, Kontakt 2 x 2, Rechtliches 2 x 1 */
  .fuss__spalte .fuss__liste { display: grid; column-gap: .75rem; }
  .fuss__spalte--seiten .fuss__liste { grid-template-columns: max-content max-content minmax(7.75rem, max-content); justify-content: space-between; }
  .fuss__spalte--kontakt .fuss__liste, .fuss__spalte--recht .fuss__liste { grid-template-columns: minmax(0, 1fr) minmax(7.75rem, max-content); }
  /* E-Mail bricht am vorhandenen <wbr> vor dem @ um */
  .fuss__link--umbruch { line-height: 1.3; }
  .fuss__unten { margin-top: .75rem; padding-block: .25rem .5rem; }

  /* =====================================================================
     2. Gemeinsame Wischreihen (Branchen-Uebersicht, Bewerber-Schritte, Branchen-Karten, Branchen-Chips, Grundsaetze)
     ===================================================================== */
  .bindex__liste, .bw-schritte__liste, .branchen-chips {
    margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scroll-padding-inline: var(--rand);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .bindex__liste, .bw-schritte__liste, .branchen-chips,
  .branchen__liste, .branchen-raster__liste, .prinzipien__liste { overscroll-behavior-x: contain; }
  .bindex__liste::-webkit-scrollbar, .bw-schritte__liste::-webkit-scrollbar, .branchen-chips::-webkit-scrollbar { display: none; }
  /* Keine Reihe scrollt senkrecht mit (sonst bewegt ein kurzer senkrechter Wisch auf einer Karte die Karte statt der Seite) */
  .branchen__liste, .branchen-raster__liste, .prinzipien__liste { overflow-y: hidden; }
  /* Einblendungen: main.js entfernt nach dem Einblenden nur das Inline-transform (clearProps), danach griffe wieder
     translateY(1.25rem) aus site.css -> Karten blieben 20 px tiefer und wuerden von den Reihen unten abgeschnitten.
     a) nach dem Einblenden (Inline-Deckkraft 1) kein Versatz mehr; waehrend des Tweens gewinnt das Inline-transform.
     b) in den Wischreihen gar kein Versatz (nur Einblenden), damit auch waehrend der Bewegung nichts ueber die Kante ragt. */
  .js:not(.js-ohne) [data-reveal][style*="opacity: 1"] { transform: none; }
  .js:not(.js-ohne) :is(.bindex__liste, .bw-schritte__liste, .branchen-chips, .branchen__liste, .branchen-raster__liste, .prinzipien__liste) [data-reveal] { transform: none; }
  /* Tastatur: kein Einrasten, solange ein Link der Reihe per Tab fokussiert ist (Schutz fuer Safari/Firefox, die zum Fokus scrollen).
     Chrome scrollt teilweise sichtbare Fokusziele gar nicht ins Bild (auch ohne Snap, wie im Original bei .branchen__liste) -> JS-Vorschlag im Bericht. */
  :is(.bindex__liste, .bw-schritte__liste, .branchen-chips, .branchen__liste, .branchen-raster__liste, .prinzipien__liste):has(:focus-visible) { scroll-snap-type: none; }
  /* Fokus- und Anker-Scrollen endet nicht hinter der fixen Aktionsleiste */
  html { scroll-padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + .5rem); }
  /* Fokusrahmen der Reihe nach innen: die Reihe reicht bis an den Bildschirmrand */
  :is(.bindex__liste, .bw-schritte__liste, .branchen-chips, .branchen__liste, .branchen-raster__liste, .prinzipien__liste):focus-visible { outline-offset: -3px; }
  /* Fotokarten: 82 % der Breite, die naechste Karte lugt hervor */
  .bw-schritte__liste, .branchen__liste, .branchen-raster__liste, .prinzipien__liste { gap: .75rem; padding-block: .25rem .5rem; }
  .bw-schritte__liste > .bw-schritt, .branchen__liste > .branche, .branchen-raster__liste > .branche, .prinzipien__liste > .prinzip { flex: 0 0 min(82vw, 22rem); scroll-snap-align: start; }

  /* =====================================================================
     3. Katalog (/branchen): Uebersicht als zweizeilige Wischreihe, Katalog als Querkarten
     ===================================================================== */
  .bindex { padding-block: var(--abschnitt) 1rem; }
  .bindex__liste {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(48px, auto)); grid-auto-columns: 46%;
    gap: .375rem; padding-block: .25rem;
  }
  .bindex__liste > li { scroll-snap-align: start; }
  .bindex__link { min-height: 48px; gap: .55rem; padding: .3rem .6rem .3rem .3rem; border-radius: 14px; }
  .bindex__icon { width: 36px; height: 36px; border-radius: 10px; }
  .bindex__icon .icon { width: 1.05rem; height: 1.05rem; }
  .bindex__name { font-size: .875rem; line-height: 1.2; }

  .bkatalog { padding-block: .5rem var(--abschnitt); }
  .bkatalog__raster { gap: .625rem; }
  .bk {
    display: grid; grid-template-columns: clamp(6rem, 28vw, 7.5rem) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto;
    column-gap: .875rem; padding: .75rem .75rem .125rem; border-radius: var(--radius-m);
    /* nur noch scroll-padding-top von html: frisch geladenes /branchen#... landet wie der Tipp in der Seite (vorher 148 statt 76 px) */
    scroll-margin-top: 0;
  }
  .bk__inhalt { display: contents; }
  .bk__bild { grid-column: 1; grid-row: 1 / 4; align-self: stretch; aspect-ratio: auto; min-height: 6.5rem; border-radius: 12px; }
  .bk__bild .foto { position: absolute; inset: 0; }
  .bk__stichworte { grid-column: 2; grid-row: 1; font-size: .78125rem; font-weight: 500; letter-spacing: .01em; text-transform: none; line-height: 1.35; }
  .bk__titel { grid-column: 2; grid-row: 2; margin-top: .15rem; font-size: 1.125rem; line-height: 1.2; letter-spacing: -.015em; }
  .bk__satz { grid-column: 2; grid-row: 3; margin-top: .3rem; font-size: .875rem; line-height: 1.45; }
  .bk__rollen { grid-column: 1 / -1; grid-row: 4; gap: .25rem .3rem; margin-top: .625rem; }
  .bk .rolle { min-height: 27px; padding: .15rem .6rem; font-size: .8125rem; }
  .bk__links { grid-column: 1 / -1; grid-row: 5; flex-wrap: wrap; gap: 0 1.125rem; margin-top: .2rem; padding-top: 0; }
  .bk__links .textlink { font-size: .875rem; }

  /* =====================================================================
     4. Schritte: enge Zeitleiste (/, /unternehmen, /kontakt, /ueber-uns), /bewerber als Wischreihe
     ===================================================================== */
  .ablauf .ablauf__raster,
  .prozess .prozess__raster { gap: 1.25rem; }
  .ablauf .umschalter { margin: 1rem 0; }
  .ablauf .ablauf__fotos { aspect-ratio: 2 / 1; border-radius: var(--radius-m); }
  .ablauf .ablauf__label { margin-bottom: .6rem; }
  html:not(.js) .ablauf .ablauf__panel + .ablauf__panel { margin-top: 1.5rem; }
  .prozess .prozess__foto { margin-top: 1rem; aspect-ratio: 2 / 1; border-radius: var(--radius-m); }
  .prozess .prozess__cta { margin-top: 1.5rem; }

  /* Zeitleiste: Nummer im Kreis neben dem Titel; Icon und geschwungene Linie sind dekorativ (aria-hidden) */
  .schritte__linie { display: none; }
  .schritte__liste { gap: .875rem; }
  .schritt { grid-template-columns: 2rem minmax(0, 1fr); column-gap: .8rem; padding: 0; }
  .schritt__icon { width: 2rem; height: 2rem; }
  .schritt__icon .icon { display: none; }
  .schritt__nr { position: static; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--hell-200); font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: .02em; }
  .schritt__inhalt { padding-top: .3rem; }
  .schritt__titel { font-size: 1.0625rem; line-height: 1.3; }
  .schritt__text { margin-top: .1rem; font-size: .90625rem; line-height: 1.5; }

  /* /bewerber: drei Fotokarten als Wischreihe (Reihe siehe Abschnitt 2) */
  .bw-schritte__liste { display: flex; }
  .bw-schritt__foto { aspect-ratio: 3 / 2; }
  .bw-schritt__nr { font-size: 3.5rem; }
  .bw-schritt__inhalt { grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; padding: .9rem .25rem 0; }
  .bw-schritt__icon { width: 40px; height: 40px; }
  .bw-schritt__icon .icon { width: 1.15rem; height: 1.15rem; }
  .bw-schritt__titel { padding-top: .45rem; font-size: 1.125rem; }
  .bw-schritt__text { margin-top: .2rem; font-size: .90625rem; line-height: 1.5; }

  /* =====================================================================
     5. Karten: Werte und Vorteile als 2x2, Branchen-Reihen, Kontaktwege, Grundsaetze
     ===================================================================== */
  /* Werte (Startseite) und Vorteile (Unternehmen, Bewerber): gleiche 2er-Kacheln */
  .werte__liste, .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .werte__liste .wert, .vorteile .vorteil { padding: .85rem .85rem .9rem; border-radius: 14px; }
  .werte__liste .wert { min-height: 0; }
  .werte__liste .wert__icon { width: 36px; height: 36px; border-radius: 11px; }
  .werte__liste .wert__icon .icon, .vorteile .vorteil__icon .icon { width: 1.05rem; height: 1.05rem; }
  .werte__liste .wert__titel { margin-top: 0; padding-top: .6rem; font-size: 1rem; line-height: 1.25; }
  .werte__liste .wert__text { margin-top: .2rem; font-size: .875rem; line-height: 1.42; overflow-wrap: break-word; }
  .werte__liste .wert__nr { top: .85rem; right: .85rem; }

  .vorteile { margin-top: 1.25rem; }
  .vorteile .vorteil { flex-direction: column; gap: .6rem; }
  .vorteile .vorteil__icon { width: 36px; height: 36px; }
  .vorteile .vorteil__titel { font-size: .9375rem; line-height: 1.25; overflow-wrap: break-word; }
  .vorteile .vorteil__text { margin-top: .2rem; font-size: .875rem; line-height: 1.42; overflow-wrap: break-word; }

  /* Branchen-Reihen (Startseite, Bewerber, Unternehmen): Karten flacher (5:4), Chips als eine wischbare Zeile */
  .branchen__liste .branche__link, .branchen-raster__liste .branche__link { aspect-ratio: 5 / 4; }
  .branchen__liste .branche__inhalt, .branchen-raster__liste .branche__inhalt { padding: 1rem; }
  .branchen__liste .branche__text, .branchen-raster__liste .branche__text { font-size: .875rem; }

  .branchen-chips { flex-wrap: nowrap; gap: .45rem; margin-top: .875rem; padding-block: .25rem; }
  .branchen-chips > li { flex: none; scroll-snap-align: start; }
  .branchen-chips .branchen-chip { min-height: 44px; padding: .5rem 1rem; font-size: .875rem; white-space: nowrap; }

  /* Kontaktwege (/kontakt): flache Karten statt hoher Kacheln */
  .kanaele__raster { gap: .625rem; }
  .kanaele__raster .kanal { border-radius: var(--radius-m); }
  .kanal--person { min-height: 0; }
  .kanal--person .kanal__person { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem; }
  .kanal--person .kanal__mono { flex: none; width: 84px; margin-block: 0; padding-block: 0; }
  .kanal--person .kanal__person-text { flex: 1 1 auto; width: auto; min-width: 0; }
  .kanal--person .kanal__marke { margin-top: .3rem; }
  /* schmale iPhones: Kennzeile und Slogan einzeilig (kleineres Monogramm, engere Luecke) */
  @media (max-width: 389px) {
    .kanal--person .kanal__person { gap: .75rem; }
    .kanal--person .kanal__mono { width: 64px; }
    .kanal--person .marke-zeile__slogan { white-space: nowrap; }
  }
  /* Link-Karten: Icon links neben Label + Wert, Knopf darunter */
  .kanaele__raster .kanal__link {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .85rem; row-gap: .1rem;
    align-items: center; min-height: 0; padding: 1rem;
  }
  .kanaele__raster .kanal__kopf { display: contents; }
  .kanaele__raster .kanal__icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; }
  .kanaele__raster .kanal__icon .icon { width: 1.2rem; height: 1.2rem; }
  .kanaele__raster .kanal__label { grid-column: 2; grid-row: 1; align-self: end; font-size: .8125rem; }
  .kanaele__raster .kanal__wert { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; font-size: 1.125rem; line-height: 1.25; }
  .kanaele__raster .kanal--telefon .kanal__wert { font-size: clamp(1.5rem, .6rem + 3.6vw, 1.875rem); line-height: 1.1; }
  .kanaele__raster .kanal__cta { grid-column: 1 / -1; justify-self: start; margin-top: .75rem; min-height: 44px; padding: .55em 1.15em; font-size: .875rem; }
  .kanaele__raster .kanal__cta .icon { width: 1rem; height: 1rem; }

  /* Grundsaetze (/ueber-uns): breitere, flachere Fotokacheln in der Wischreihe (Reihe siehe Abschnitt 2) */
  .prinzipien__liste > .prinzip { min-height: 15rem; padding: 1rem; border-radius: var(--radius-m); }
  .prinzipien__liste .prinzip__icon { width: 44px; height: 44px; border-radius: 14px; }
  .prinzipien__liste .prinzip__titel { padding-top: 1rem; font-size: 1.25rem; }
  .prinzipien__liste .prinzip__text { margin-top: .35rem; }

  /* =====================================================================
     6. Wege, Split, Bildband, Laufband, "Ihre Branche ist nicht dabei?"
     ===================================================================== */
  /* Zwei Wege (Start #wege, Ueber uns #fuer-wen, Branchen .bs-wege): zwei Fotokarten nebeneinander */
  .wege__paneele { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .weg { display: flex; flex-direction: column; min-height: clamp(16rem, 70vw, 19rem); border-radius: var(--radius-m); box-shadow: var(--schatten); }
  /* Verlauf frueher dicht: Kennzeile und Titel stehen nie auf hellen Bildstellen, oberes Drittel des Fotos bleibt klar */
  .weg__foto .foto::after { background: linear-gradient(180deg, rgba(0, 1, 24, .04) 0%, rgba(0, 1, 24, .34) 24%, rgba(0, 1, 24, .84) 46%, rgba(0, 1, 24, .94) 100%); }
  /* Inhalt im Fluss (Karte waechst mit dem Text), unten ausgerichtet; Foto bleibt oben sichtbar */
  .weg__inhalt { position: relative; flex: 1 0 auto; justify-content: flex-end; gap: .3rem; padding: 3.25rem .8rem .8rem; }
  .weg__nr { font-size: .78125rem; line-height: 1.3; letter-spacing: .02em; text-shadow: 0 1px 10px rgba(0, 1, 24, .6); }
  /* 360 px: sonst steht "01" allein in der ersten Zeile */
  @media (max-width: 374px) { .weg__nr { text-transform: none; letter-spacing: 0; } }
  .weg__titel { font-size: clamp(1.125rem, .85rem + 1.2vw, 1.3125rem); line-height: 1.15; letter-spacing: -.02em; }
  .weg__text { font-size: .875rem; line-height: 1.42; }
  /* backdrop-filter aus: sonst waere der Knopf der Bezugsrahmen fuer den absolut gesetzten Pfeil */
  .weg__cta { align-self: stretch; justify-content: center; margin-top: .4rem; padding: .5em; font-size: .875rem; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Pfeil als runder Knopf oben rechts (wie bei den Branchenkarten) -> Knopftext bleibt einzeilig */
  .weg__cta .icon { position: absolute; top: .7rem; right: .7rem; width: 34px; height: 34px; padding: 9px; border-radius: 50%; background-color: rgba(0, 2, 46, .5); }
  .weg:is(:hover, :focus-visible) .weg__cta .icon { transform: none; color: var(--navy-900); background-color: var(--hell-100); }

  /* Split: kleineres Querfoto, engerer Abstand */
  .split__raster { gap: 1.25rem; }
  /* width:100% noetig, sonst verkleinert max-height ueber aspect-ratio auch die Breite (430 px) */
  .split__foto:not(.bw-karte) { width: 100%; aspect-ratio: 16 / 10; max-height: 13.75rem; border-radius: var(--radius-m); }
  .split__einleitung { margin-top: .6rem; }
  .ich-intro .steckbrief { grid-template-columns: minmax(0, 1fr); margin-top: 1.1rem; }
  /* "Erreichbar" als volle, flache Zeile statt halber Kachel mit leerer Flaeche daneben */
  .ich-intro .steckbrief__eintrag:not(.steckbrief__eintrag--breit) { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }

  /* /bewerber #persoenlich: Kontaktkarte (Monogramm links, Name rechts, Kontakte darunter) statt hoher Kachel */
  .bw-karte { min-height: 0; padding: 1rem; border-radius: var(--radius-m); }
  .bw-karte__inhalt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem 1rem; max-width: none; text-align: left; }
  .bw-karte__mono { width: 4.5rem; }
  .bw-karte__marke { align-items: flex-start; text-align: left; }
  .bw-karte__kontakt { grid-column: 1 / -1; gap: .15rem; margin-top: 0; }
  /* Kontaktzeilen buendig mit Monogramm und Karteninnenrand (Tap-Hoehe bleibt 48 px ueber min-height) */
  .bw-karte__link { justify-content: flex-start; padding-left: 0; }

  /* Bildband: niedrigere Fotostreifen */
  .bildband { padding-block: 1rem; }
  .bildband__spur { gap: .5rem; }
  .bildband__bild { width: 8.5rem; aspect-ratio: 4 / 5; border-radius: var(--radius-m); }
  .bildband__bild--tief { margin-top: .75rem; }
  .ich-bildband__kopf { margin-bottom: .5rem; }
  .ich-bildband__kopf .kicker { margin-bottom: 0; }

  /* Laufband */
  .laufband { padding-block: .75rem; }
  .laufband__eintrag { font-size: 1.25rem; }

  /* /branchen #weitere: Karte flacher, Knoepfe nebeneinander */
  .bweitere { padding-bottom: calc(var(--abschnitt) * .5); }
  .bweitere__innen { gap: 1rem; padding: 1rem; border-radius: var(--radius-m); }
  .bweitere__satz { margin-top: .5rem; font-size: .875rem; line-height: 1.55; }
  .bweitere__knoepfe { flex-wrap: nowrap; }
  .bweitere__knoepfe .knopf { flex: 1 1 0; min-width: 0; min-height: 48px; padding-inline: .8em; }
}