/* ==========================================================================
   pages/karriere.css
   Der ganze Karrierezweig: Einstiegsseite, Stellenarchiv, Stellendetail.

   DREI SEITENTYPEN, EINE DATEI, weil sie sich Bausteine teilen - die
   Stellenkarte steht auf der Einstiegsseite, im Archiv und am Fuss jeder
   Detailseite.

   ADRESSSCHEMA. Es kommt NICHT von hier, sondern steht seit der freigegebenen
   Startseite fest (siehe Kommentar in index.html an der Karriere-Sektion):
     Einstieg  /karriere/
     Archiv    /karriere/stellen/
     Einzeln   /karriere/stellen/<slug>/
     Typ       /karriere/stellen/typ/<term>/
   In WordPress also register_post_type('stelle', rewrite => array(
   'slug' => 'karriere/stellen', 'with_front' => false)) und die Taxonomie
   stellen_typ mit 'slug' => 'karriere/stellen/typ'.

   DER TYPFILTER IST EINE LISTE VON LINKS, kein Javascript. Anders als beim
   Rezeptfilter existieren die gefilterten Ansichten hier als echte Adressen -
   das Taxonomie-Archiv liefert WordPress von sich aus. Ein Skript daruebe zu
   legen wuerde Adressen verschenken, die in Jobboersen geteilt werden.
   ========================================================================== */

/* --- Kopf ---------------------------------------------------------------- */
/* Bauform in components/bogenhero.css. Fussabstand wie auf /historie/:
   er rechnet die Bogenhoehe mit. */
.kakopf {
  --hero-hoehe: max(26rem, calc(72vh - var(--h-nav)));
  --hero-polster: var(--sp-8);
  --hero-polster-fuss: calc(min(6.25vw, 6rem) + var(--sp-7));
  --schwung-grund: var(--bg-soft);
}

/* ==========================================================================
   1. Einstiegsseite /karriere/
   ========================================================================== */

/* Hero, unter dem eine WEISSE Sektion beginnt. Beim Anlegen einer neuen
   Seite pruefen, welche Sektion auf den Hero folgt, und den Modifier
   entsprechend setzen. */
.kakopf--auf-weiss { --schwung-grund: var(--surface); }
/* Der Weg aus dem Hero benutzt die Pfeilklasse der Stellenkarte. Dort haengt
   der Hover an .stkarte:hover, hier steht der Link allein und braucht ihn
   selbst. */
/* ZWEI WEGE AUS DEM HERO. Vorher fuehrte nur einer zum Stellenarchiv - wer
   eine Ausbildung sucht, landete damit in einer Liste aus vierzehn Anzeigen
   und musste selbst filtern. Beide Gruppen sollen ihren Weg sofort sehen. */
.kakopf__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
}
/* FETT, Wunsch der Kundin vom 05.10.2026 („Können wir den Text mit den
   Verlinkungen zu Offene Stellen und Ausbildung im Header fett schreiben?").
   Dieselbe Regel steht für das Slide der Startseite in
   components/bogenhero-koepfe.css - die Karriereseite lädt jene Datei nicht.
   Zwei Klassen, weil .stkarte__pfeil (components/stellenliste.css) 600 setzt. */
.kakopf__wege .kakopf__mehr { font-weight: 700; }
.kakopf__mehr:hover,
.kakopf__mehr:focus-visible { color: var(--toem-gold); }
.kakopf > .schwung { position: absolute; left: 0; right: 0; bottom: -1px; }

/* --- Wo man bei uns arbeitet -------------------------------------------- */
/* DIE ZAHLENSEKTION IST ENTFALLEN. Sie zeigte "ueber 90", "ein Standort" und
   "14 Stellen" als grosse Werte - gemeldet am 28.08.2026 als nichtssagend, und
   das trifft zu: "ein Standort" ist als Schlagzahl keine Aussage, und die
   Mitarbeiterzahl steht schon im Vorspann des Heros.

   An ihrer Stelle steht jetzt die Frage, die ein Bewerber zuerst hat: WAS
   KOENNTE ICH DORT TUN? Vier Bereiche mit Bild. Die Bereiche sind nicht
   erfunden, sie stehen in den Anzeigen: Saatlager, Produktion und Abfuellung,
   Technik, Verwaltung und IT.

   BILDGELEITET, nicht mit Icons - direkt darunter folgen die Vorteile mit
   Icons, und zwei Icongitter hintereinander lesen sich als dasselbe Muster
   zweimal. */
.kabereiche { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.kabereiche__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  /* Muster der Startseite: .usp__grid und .karr__grid laufen auf
     genau diesem clamp. Vorher standen hier 24 px. */
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  /* 64 px, NICHT 32. Die Startseite setzt zwischen Textblock und Raster
     62 px (.usp__intro traegt margin-bottom: var(--sp-8)); hier waren es
     gemessen 24 px, weil 32 px margin-top mit den 16 px Titelabstand
     kollabieren. Weniger als die Haelfte der Referenz. */
  margin-top: var(--sp-8);
}
.kabereich {
  display: grid;
  gap: 0;
  align-content: start;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-karte);
}
.kabereich__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-platzhalter);
}
.kabereich__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Platzhalter, wo kein Foto vorliegt - sichtbar als solcher gekennzeichnet,
   wie auf /handel/gebinde/. Ein Platzhalter, den man nicht erkennt, ist
   keiner. */
.kabereich__platz {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  height: 100%;
  color: var(--toem-blau);
}
.kabereich__platz svg { width: var(--zeichen-flaeche); height: var(--zeichen-flaeche); opacity: 0.55; }
.kabereich__platz span {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kabereich__body { display: grid; gap: var(--sp-2); padding: var(--sp-5); }
.kabereich__titel {
  margin: 0;
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.kabereich__text {
  margin: 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Was wir bieten ----------------------------------------------------- */
.kavorteile { background: var(--bg-page); padding-block: var(--sp-sektion); }
.kavorteile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  /* Muster der Startseite: .usp__grid und .karr__grid laufen auf
     genau diesem clamp. Vorher standen hier 24 px. */
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  /* 64 px, NICHT 32. Die Startseite setzt zwischen Textblock und Raster
     62 px (.usp__intro traegt margin-bottom: var(--sp-8)); hier waren es
     gemessen 24 px, weil 32 px margin-top mit den 16 px Titelabstand
     kollabieren. Weniger als die Haelfte der Referenz. */
  margin-top: var(--sp-8);
}
/* KEIN STRICH MEHR, dafuer ein Zeichen. Gemeldet am 28.08.2026: die Goldlinie
   ueber jedem Vorteil hat sechs Kaesten aufgereiht, ohne zu sagen, worum es
   geht. Ein Zeichen sagt es auf einen Blick.

   DIE ZEICHEN SIND NACHGEBAUT, nicht uebernommen. Auf der Liveseite stecken sie
   in einem Elementor-Iconfont und sind nicht sauber extrahierbar. Nachgebaut im
   Projektstil - viewBox 32, stroke-width 1.6, currentColor - damit sie zu den
   uebrigen Zeichen der Website passen statt daneben zu stehen. */
.kavorteil {
  display: grid;
  /* align-content: start IST PFLICHT. Ohne sie sind die Karten einer Reihe
     gleich hoch, und das Raster verteilt die ueberschuessige Hoehe auf ALLE
     drei Zeilen - Zeichen, Ueberschrift, Text. Je kuerzer der Text, desto
     tiefer rutscht alles. Gemessen: Zeichenzeile 28 / 36,3 / 44,5 px bei
     identischem SVG, Titelversatz 16,5 px. Vierter Fall im Projekt nach
     .form__feld, .gbart__daten und .haargument. */
  align-content: start;
  gap: var(--sp-2);
}
.kavorteil__icon {
  display: inline-flex;
  margin-bottom: var(--sp-1);
  color: var(--toem-gold);
}
.kavorteil__icon svg { width: var(--zeichen-gross); height: var(--zeichen-gross); }
.kavorteil__titel {
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--toem-blau);
}
.kavorteil__text {
  margin: 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Stimmen als Slider ------------------------------------------------- */
/* KOMPLETT NEU, gemeldet am 28.08.2026. Erste Fassung war ein Gitter aus vier
   gleich aussehenden Zitatkarten - alle sichtbar, keine Betonung, und bei vier
   Karten je 300 px waren die Zitate auf drei Zeilen gequetscht.

   Jetzt ein Slider wie auf der Produktseite: EINE Stimme je Ansicht, in voller
   Breite, mit Portraet gross daneben. Das Zitat bekommt Raum, und der Slider
   traegt js/slider.js UNVERAENDERT - der Baustein bindet an [data-slider] und
   nicht an eine Sektionsklasse.

   overflow-y: hidden ZWINGEND. Eine Bahn mit overflow-x: auto bekommt sonst
   ueber die Berechnung auch overflow-y: auto und faengt das Mausrad - der
   Fehler aus Runde 13, dort gemessen 144 von 200 abgefangenen Radereignissen. */
/* DIE BAHN IST DIE FLAECHE, nicht eine Karte darauf. Gemeldet am 28.08.2026:
   die weisse Karte auf grauer Bahn wirkte leer - gemessen 1120 x 400 px mit
   einem 200-px-Portraet darin - und trug fast keinen Schatten.

   WARUM MARKENBLAU UND NICHT EINE HELLERE BAHN: die Schluss-Sektion war blau
   und lief in den blauen Footer, ohne Kante. Das Blau ist deshalb nicht
   entfallen, sondern UMGEZOGEN - von der Seitenkante in die Mitte, wo es
   zwei helle Bahnen trennt und den Zitaten die Praesenz gibt, die ihnen als
   Karte gefehlt hat. Die Seite traegt jetzt genau eine blaue Bahn. */
.kastimmen { background: var(--toem-blau); padding-block: var(--sp-sektion); }
/* FOKUSRING AUF BLAU IN GOLD, wie .masthead und .footer. Gemessen am
   24.09.2026: der blaue Ring aus base.css stand hier 1:1 auf Blau, die
   Kartenreihe und die Punkte waren mit der Tastatur nicht zu sehen. */
.kastimmen :focus-visible { outline-color: var(--toem-gold); }
/* Der geteilte Sektionstitel setzt Markenblau. Auf dunklem Grund traegt die
   Figtree-Zeile Weiss, die Schreibschrift bleibt Gold: gemessen 7,4:1 auf
   Markenblau, dort traegt das Gold. */
.kastimmen__title { color: var(--text-on-dark); }
.kastimmen__bahn {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.kastimmen__bahn::-webkit-scrollbar { display: none; }
.kastimme {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 11.25rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-6) var(--sp-8);
  /* Keine Karte: kein Grund, kein Radius, kein Schatten. */
  padding: 0;
  /* margin: 0 AUSDRUECKLICH, weil <figure> von zwei Seiten einen Rand
     geschenkt bekommt und beide Geschenke unterschiedlich ausfallen.
     Gemessen am 17.09.2026 bei 1440 px:
       Prototyp  16px 40px 16px 40px  (Standard des Browsers fuer figure)
       Theme     0    0    16px 0     (Blockstile von WordPress,
                                       figure { margin: 0 0 1em })
     Daraus wurden 214 gegen 198 px Bahnhoehe - der "16px Hoehenunterschied
     in der Zitatbahn", der seit dem 14.09.2026 als offener Punkt gefuehrt
     wurde. Die seitlichen 40 px erklaeren denselben Befund in der Breite:
     vier Karten mal 80 px sind die 320 px, um die der Prototyp breiter war.
     KEINE VON BEIDEN ZAHLEN IST GESTALTET. Der Abstand zur Bedienleiste
     kommt aus dem Rasterabstand daneben und bleibt davon unberuehrt. */
  margin: 0;
}
/* Das Portraet gross, nicht als Miniatur neben dem Namen.
   11,25rem SIND 180 PX, UND DAS IST GEMESSEN, NICHT GESCHAETZT: die Quellen
   liegen mit 200 px vor. Vorher stand hier eine 14rem-Spalte, also 224 px -
   das war ein Hochrechnen um Faktor 1,12. Der Kommentar behauptete 300 px
   Quellbreite; das war falsch. Hochaufloesende Portraets stehen auf der
   Beschaffungsliste, bis dahin wird HERUNTER gerechnet. */
.kastimme__bild {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-platzhalter);
  /* Goldring statt Kartenrand. Die Portraets sind Freisteller auf hellem
     Grund - auf der blauen Bahn wird daraus eine Medaille, und der Ring
     fasst sie. Kein border: das wuerde die Bildflaeche verkleinern. */
  box-shadow: 0 0 0 3px rgba(215, 179, 95, 0.55);
}
.kastimme__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-500);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-on-dark);
  /* ZEILENLAENGE. Ohne Begrenzung lief das Zitat ueber 964 px und gemessen
     76 Zeichen je Zeile - das Projektziel ist etwa 65. Bei 46ch sind es 825 px
     und rund 51 bis 60 Zeichen. Gegen 42ch, 38ch und 34ch gestellt: darunter
     wird die Spalte schmal, ohne dass die Zeile besser wird - 38ch gab
     dieselben 51 Zeichen auf 682 px. */
  max-width: 46ch;
}
.kastimme__wer {
  margin: var(--sp-5) 0 0;
  font-style: normal;
}
.kastimme__name { display: grid; gap: 0.1rem; }
.kastimme__name b { font-size: var(--fs-300); font-weight: 700; color: var(--toem-gold); }
.kastimme__name span { font-size: var(--fs-200); color: var(--on-blau-3); }

/* Leiste mit Punkten und Pfeilen, Aufbau wie bei .pverw auf der
   Produktseite. Beide sind hidden, bis js/slider.js sie freischaltet - ein
   Knopf ohne Funktion soll nicht herumliegen. */
/* AUFBAU WIE BEI .pverw AUF DER PRODUKTSEITE: dreispaltiges Raster
   1fr auto 1fr, Punkte in der Mittelspalte, Navigation rechts. Vorher stand
   hier flex mit space-between - damit klebten die Punkte am linken Rand,
   waehrend derselbe Baustein auf der Produktseite sie mittig zeigt. Ein
   Slider, zwei Anordnungen. */
.kastimmen__leiste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.kastimmen__punkte { grid-column: 2; justify-self: center; display: flex; gap: var(--sp-2); }
/* TREFFERFLAECHE 28x44, SICHTBARER KERN 8 px - nachgezogen am 10.09.2026 beim
   responsiven Durchgang. Gemessen war der Knopf hier 8x8 px gross, also auch
   die Flaeche zum Antippen. Die Projektregel verlangt 44 px, und dasselbe
   Muster ist in components/slider.css seit dem 27.08. richtig geloest: der
   Punkt ist ein Pseudoelement, der Knopf darum herum ist die Flaeche.
   Auf den Produkt- und Uebersichtsseiten messen die Punkte deshalb 28x44 - nur
   hier nicht, weil diese Leiste eigene Regeln hat. Ein Bauteil, zwei
   Umsetzungen; im Theme wird daraus eine.
   28 statt 44 in der BREITE ist dieselbe bewusste Abweichung wie dort: Punkte
   mit je 44 px Breite stehen so weit auseinander, dass sie nicht mehr als
   Reihe lesen. Senkrecht bleiben es 44, und 28x44 liegt weit ueber der
   WCAG-Mindestgroesse von 24x24. */
.kastimmen__punkte button {
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  /* 0,45 IST DURCHGERECHNET, nicht geschaetzt. Der Punkt muss ZWEI
     Abstaende halten: gegen die blaue Bahn (damit man ihn sieht) und gegen
     den weissen aktiven Punkt (damit man den Zustand erkennt). Die beiden
     laufen gegeneinander - je heller der inaktive Punkt, desto besser der
     erste und desto schlechter der zweite Abstand:

       0,40   3,40:1 gegen Bahn   4,62:1 gegen aktiv
       0,45   3,93:1              3,99:1     <- kleinster Abstand am groessten
       0,55   5,18:1              3,03:1        (Schwelle knapp gerissen)

     Bei 0,45 ist der schlechtere der beiden Werte am hoechsten.
     DIE FARBE SITZT JETZT AM PSEUDOELEMENT, nicht am Knopf - der Knopf ist
     seit dem 10.09. nur noch die Trefferflaeche und muss durchsichtig sein.
     Die gemessenen Werte oben gelten unveraendert, es ist derselbe Ton auf
     derselben Bahn. */
  cursor: pointer;
}
.kastimmen__punkte button::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(242, 242, 242, 0.45);
  transition: background-color var(--dur) var(--ease);
}
.kastimmen__punkte button[aria-current="true"]::before { background: var(--text-on-dark); }
.kastimmen__nav { grid-column: 3; justify-self: end; display: flex; gap: var(--sp-2); }
.kastimmen__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: transparent;
  border: 1px solid var(--on-blau-3);
  border-radius: 50%;
  color: var(--text-on-dark);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}
.kastimmen__pfeil:hover:not(:disabled) { border-color: var(--toem-gold); color: var(--toem-gold); }
.kastimmen__pfeil:disabled { opacity: 0.4; cursor: default; }
.kastimmen__pfeil svg { width: var(--zeichen-klein); height: var(--zeichen-klein); }

/* --- Wege in die Stellen ------------------------------------------------- */
/* ZWEI KARTEN NEBENEINANDER MIT BILD, gemeldet am 28.08.2026. Vorher waren es
   zwei Zeilen der Stellenliste untereinander - als Weg in zwei getrennte
   Listen zu unauffaellig. */
.kawege { background: var(--bg-page); padding-block: var(--sp-sektion); }
.kawege__grid {
  display: grid;
  /* min(19rem, 100%) wie bei .hazg__grid auf /handel/: unterhalb von 344 px
     Fensterbreite fordert 19rem mehr, als der Behaelter hergibt. Oberhalb
     davon aendert sich nichts. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  /* Muster der Startseite: .usp__grid und .karr__grid laufen auf
     genau diesem clamp. Vorher standen hier 24 px. */
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  /* 64 px, NICHT 32. Die Startseite setzt zwischen Textblock und Raster
     62 px (.usp__intro traegt margin-bottom: var(--sp-8)); hier waren es
     gemessen 24 px, weil 32 px margin-top mit den 16 px Titelabstand
     kollabieren. Weniger als die Haelfte der Referenz. */
  margin-top: var(--sp-8);
}
.kaweg {
  position: relative;
  display: grid;
  align-content: start;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-karte);
  transition: transform var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.kaweg:hover,
.kaweg:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow-2); }
.kaweg__media {
  aspect-ratio: 16 / 9;
  background: var(--bg-platzhalter);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  color: var(--toem-blau);
}
/* BILD STATT PLATZHALTER. Die Huelle behaelt ihr 16/9 und schneidet das
   Motiv mit object-fit zu - so bleibt die Karte gleich hoch, egal welches
   Seitenverhaeltnis das Bild hat. place-content: center aus der Grundregel
   wuerde ein Bild sonst mittig stellen statt es zu fuellen. */
.kaweg__media--bild { display: block; padding: 0; }
.kaweg__media--bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   ABBINDER AUSBILDUNG - blaues Band mit Motiv
   BAUFORM VON .pschael in pages/produkt.css, auf Kundenwunsch vom
   29.08.2026. Der Unterschied zu .hiheute, das zuerst hier stand: der
   Verlauf laeuft gerichtet von 0,93 links auf 0,58 rechts statt gleichmaessig
   zu decken. Der Text steht links im Dichten, rechts kommt das Motiv durch.
   Ausserdem traegt .pschael eine Schwungzeile.

   DUPLIKAT, gemeldet: dieselbe Bauform steht in pages/produkt.css.
   Zusammenlegen wuerde die freigegebenen Produktseiten anfassen.
   ========================================================================== */
.kaabbinder {
  position: relative;
  overflow: hidden;
  background: var(--toem-blau);
  padding-block: clamp(var(--sp-8), 9vw, var(--sp-9));
  color: var(--on-blau-2);
}
/* Fokusring in Gold wie bei .kastimmen: der blaue Ring aus base.css stand
   hier 1:1 auf Blau (gemessen 24.09.2026). */
.kaabbinder :focus-visible { outline-color: var(--toem-gold); }
.kaabbinder__media { position: absolute; inset: 0; }
.kaabbinder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 62 % waagerecht: die drei Azubis stehen rechts der Mitte. Bei 50 %
     schnitt der linke Bildrand sie an, sobald das Band schmaler wird. */
  object-position: 62% 45%;
  display: block;
}
.kaabbinder__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(12, 36, 62, 0.93) 0%,
      rgba(12, 36, 62, 0.90) 40%,
      rgba(12, 36, 62, 0.74) 62%,
      rgba(12, 36, 62, 0.58) 100%);
}
/* Kein max-width hier: das Element traegt auch .wrap und dessen
   margin-inline: auto. Zusammen mit einer Breitenbegrenzung landet der
   Textblock in der Bildmitte statt am linken Seitenraster. Dieselbe Falle
   ist in produkt.css dokumentiert. */
.kaabbinder__inner { position: relative; }
/* .kaabbinder__title STEHT in der Selektorenliste in sektionstitel.css, und
   das ist richtig so. Ich hatte hier zuerst das Gegenteil notiert - aus der
   Sorge, die Liste setze Markenblau auf blauen Grund. Die Liste liefert aber
   Groesse, Schnitt und die Grafolita-Zeile im <em>; die Farben werden hier
   danach ueberschrieben. Genau so arbeitet .pschael auf den Produktseiten.
   Ohne den Eintrag lief die Zeile als fetter Flattersatz ohne Schreibschrift. */
.kaabbinder__title,
.kaabbinder__sub { max-width: 46rem; }
.kaabbinder__title { color: var(--on-blau-1); }
.kaabbinder__title em { color: var(--toem-gold); }
.kaabbinder__sub { color: var(--on-blau-2); }
.kaabbinder__text {
  margin: var(--sp-6) 0 0;
  max-width: 46rem;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
}
.kaabbinder__aktion { margin: var(--sp-6) 0 0; }
/* Gold traegt auf dem blauen Band. Auf hellem Grund haelt das Hausgold nur
   1,79:1 - deshalb steht der Weg nur hier in Gold. */
.kaabbinder__weg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  text-decoration: none;
}
.kaabbinder__weg svg { transition: translate var(--dur-hover) var(--ease-hover); }
.kaabbinder__weg:hover svg { translate: var(--sp-2) 0; }

.kaweg__media svg { width: var(--zeichen-flaeche); height: var(--zeichen-flaeche); opacity: 0.55; }
.kaweg__media span {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kaweg__body { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.kaweg__titel {
  margin: 0;
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.kaweg__text {
  margin: 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.kaweg__pfeil {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--toem-blau);
  transition: color var(--dur-hover) var(--ease-hover);
}
.kaweg__pfeil svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.kaweg:hover .kaweg__pfeil { color: var(--toem-gold); }
.kaweg:hover .kaweg__pfeil svg { transform: translateX(3px); }

/* --- Initiativbewerbung ------------------------------------------------- */
/* EMOTIONALER, gemeldet am 28.08.2026. Vorher ein Absatz mit Mailadresse auf
   weisser Bahn - sachlich richtig und vollkommen unauffaellig.

   Jetzt eine blaue Bahn mit grosser Aussage und der Adresse als Grossform.
   Kein Motiv: es gibt kein passendes Foto im Bestand, und ein fremdes waere
   beliebig. Die Wirkung traegt hier die Typografie. Ein Motiv wuerde die
   Sektion staerken und steht auf der Beschaffungsliste. */
/* HELLE BAHN, GOLD ALS AKZENT. Vorher trug diese Sektion dasselbe
   Markenblau wie der Footer - gemessen beide #0c243e - und beide
   verschmolzen zu einem Block ohne Kante. Das Blau ist in die
   Stimmen-Sektion umgezogen. */
.kainiti {
  background: var(--bg-soft);
  color: var(--text-body);
  padding-block: var(--sp-sektion);
}
/* NUR die Lesebreite, NICHT das Seitenraster. Vorher trug ein Element beide
   Klassen: class="wrap kainiti__inner". Damit ueberschrieb 46rem die
   max-width des .wrap, und dessen margin:auto zentrierte den schmalen Block.
   Gemessen sass die Ueberschrift bei x=408, waehrend alle anderen
   Sektionstitel der Seite UND das Footerlogo bei x=116 stehen. Jetzt liegt
   .kainiti__inner INNERHALB des .wrap und laeuft auf der Rasterkante. */
.kainiti__inner { max-width: 46rem; }
/* Titel kommt aus components/sektionstitel.css - dasselbe Bauteil wie die
   vier anderen Sektionstitel dieser Seite. Vorher stand hier eine eigene
   Regel mit Gewicht 600 und ohne Schwungzeile; gemessen war diese Sektion
   damit die EINZIGE der Seite ohne Schreibschrift, und die Projektregel in
   sektionstitel.css sagt ausdruecklich, dass auf der Karriere-Einstiegsseite
   jede Sektion ihre Schreibschrift traegt. */
.kainiti__lead {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
}
/* HANDLUNGSAUFFORDERUNG MIT DEN BAUSTEINEN DES HAUSES.

   Vorher stand hier eine ERFUNDENE Schaltflaeche: goldene Flaeche, blauer
   Rand, 28px klein geschrieben. Als nicht CD-konform gemeldet, und das war
   richtig - das Projekt hat genau einen Knopf, .form__senden auf /kontakt/,
   und der sieht anders aus. Er liegt jetzt als .knopf in
   components/knopf.css und wird hier benutzt statt nachgebaut.

   ZWEI EBENEN, wie im Projekt ueblich:
     der Knopf traegt die HANDLUNG ("Initiativ bewerben"),
     die Adresse steht daneben als definierter Textlink zum Lesen und Kopieren.
   Eine Mailadresse in Versalien in einem Knopf waere schlecht lesbar. */
.kainiti__aktion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
}
/* GROESSE WIE .kontakt__way__value AUF /kontakt/: --fs-400 und Gewicht 700 in
   Markenblau. Dort steht dieselbe Information - eine Mailadresse, die man
   lesen und kopieren soll - und dort ist sie 18 px / 700.

   Erste Fassung stand auf --fs-200 und Gewicht 600, dem Muster der
   Hinweiszeile von /downloads/. Das war der falsche Vergleich: eine Adresse in
   einem Fliesstextsatz ist etwas anderes als eine Adresse, die als
   Kontaktangabe fuer sich steht. Gemessen war sie mit 15 px sogar kleiner als
   der Vorspann direkt darueber, der auf 18 px laeuft. Gemeldet und stimmt.

   Die Rangfolge kippt dadurch nicht: der Knopf laeuft auf 15 px, traegt aber
   eine gefuellte Flaeche, und eine Flaeche wiegt in der Hierarchie mehr als
   Schriftgroesse.

   KEIN Label darueber wie auf /kontakt/. Dort stehen zwei Wege nebeneinander
   und man muss wissen, welcher welcher ist; hier sagt es das Briefzeichen. */
.kainiti__adresse {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  color: var(--toem-blau);
}
/* inline-flex am LINK, nicht nur am Absatz darum. Das Zeichen steht im <a>;
   solange der ein gewoehnliches Inline-Element ist, bricht es vom Text weg
   und landet auf einer eigenen Zeile. Mit inline-flex und gap bleiben beide
   zusammen, und der Umbruch faellt hinter das Paar. */
.kainiti__adresse a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: inherit;
  transition: color var(--dur) var(--ease);
}
.kainiti__adresse:has(a:hover),
.kainiti__adresse:has(a:focus-visible) { color: var(--toem-gold); }

/* AUF SCHMALEN SCHIRMEN EINE STUFE KLEINER. Gemessen bei 360 px: 320 px
   Bahn, davon 22 px Zeichen und 8 px Abstand, bleiben 290 px fuer den Text.
   Die Adresse misst dort bei 18 px 320,7 px und bricht - bei 16 px sind es
   284 px und sie passt. Der Kunde will Zeichen und Adresse immer auf einer
   Zeile; das ist die einzige Stelle, an der 18 px dafuer nicht reichen. */
@media (max-width: 26rem) {
  .kainiti__adresse a { font-size: var(--fs-300); }
}
/* Das Zeichen steht neben 18px-Text, nicht neben 15px - eine Stufe hoeher. */
.kainiti__adresse svg { flex: none; width: var(--zeichen-klein); height: var(--zeichen-klein); }

/* ==========================================================================
   2. Stellenarchiv /karriere/stellen/ und /karriere/stellen/typ/<term>/
   ========================================================================== */

/* Infoseite: kein Bogen, kein Motiv. Wer ein Stellenarchiv aufruft, will die
   Liste sehen. */
  /* UNTERES POLSTER DER SEITENKOEPFE: --sp-8, also 64 px. Vereinheitlicht am
     28.08.2026, freigegeben nach Ansicht von /rezepte/.

     Vorher standen hier drei Werte fuer dieselbe Lage: 32 px (FAQ,
     Stellenarchiv, Stellendetail), 48 px (Kontakt) und 64 px (Rezeptliste).
     Massgeblich ist die Startseite: sie setzt zwischen Textblock und Inhalt
     62 px. 32 px waren weniger als die Haelfte davon.

     DIE KOEPFE MIT BOGEN sind NICHT betroffen - .dlkopf, .hakopf und .pkopf
     liegen bei 114 bis 122 px, darin stecken rund 90 px Bogen. Sie sind
     strukturell anders und untereinander stimmig. */
.stkopf { background: var(--bg-page); padding-block: var(--sp-sektion) var(--sp-8); }
.stkopf__title {
  font-family: var(--font-body);
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  margin: 0 0 var(--sp-4);
}
.stkopf__title em {
  font-size: var(--fs-800);
  margin: -0.08em 0 0;
  padding-block: 0.04em 0.06em;
}
.stkopf__lead {
  max-width: 36rem;
  margin: 0;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Typfilter als Links ------------------------------------------------ */
/* Optisch dieselben Pillen wie im Rezeptfilter, damit die Website eine
   Sprache spricht - aber es sind <a>, keine <button>. Der aktive Zustand
   traegt aria-current="page", nicht aria-pressed: das hier ist Navigation
   zwischen Adressen, kein Umschalter. */
.sttypen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.sttyp {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--c-grau-300);
  border-radius: var(--r-pill);
  font-size: var(--fs-200);
  line-height: 1;
  color: var(--text-body);
  transition: border-color var(--dur-hover) var(--ease-hover),
              background-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}
.sttyp:hover { border-color: var(--toem-gold); }
.sttyp[aria-current="page"] {
  background: var(--toem-blau);
  border-color: var(--toem-blau);
  color: var(--text-on-dark);
}
.sttyp__zahl { margin-left: var(--sp-2); opacity: 0.7; }

/* DIE KARTE .stkarte STEHT IN components/stellenliste.css.
   Verschoben am 28.08.2026: die Startseite braucht sie ebenfalls, laedt aber
   pages/karriere.css nicht. /handel/ und /unternehmen/historie/ hatten
   pages/karriere.css nur wegen dieser Karte eingebunden. */
/* DIE KARTE .stkarte STEHT IN components/stellenliste.css.
   Verschoben am 28.08.2026: die Startseite braucht sie ebenfalls, laedt aber
   pages/karriere.css nicht. /handel/ und /unternehmen/historie/ hatten
   pages/karriere.css nur wegen dieser Karte eingebunden. */
/* --- Liste -------------------------------------------------------------- */
.stliste { background: var(--bg-soft); padding-block: var(--sp-sektion); }

/* Leerer Zustand. Auf der Liveseite steht unter fuenf offenen Stellen der
   Satz "Aktuell haben wir keine offenen Stellen" - ein Widerspruch, der
   entsteht, wenn der Leerzustand als Anzeige gepflegt wird. Hier ist er ein
   eigener Block, den das Theme nur zeigt, wenn die Abfrage leer ist. */
.stleer {
  max-width: 40rem;
  margin: 0;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Titel OHNE Schwungzeile laufen auf 600, siehe Gewichtsregel in
   components/sektionstitel.css. Die geteilte Basisgruppe dort setzt 400, weil
   dort die Titel MIT Schwungzeile in der Mehrheit sind. */
.stiniti__title,
.stdbewerb__title,
.stdweiter__title { font-weight: 600; }

/* --- Initiativbewerbung ------------------------------------------------- */
.stiniti { background: var(--bg-page); padding-block: var(--sp-sektion); }
.stiniti__lead {
  max-width: 40rem;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ==========================================================================
   3. Stellendetail /karriere/stellen/<slug>/
   ========================================================================== */

  /* UNTERES POLSTER DER SEITENKOEPFE: --sp-8, also 64 px. Vereinheitlicht am
     28.08.2026, freigegeben nach Ansicht von /rezepte/.

     Vorher standen hier drei Werte fuer dieselbe Lage: 32 px (FAQ,
     Stellenarchiv, Stellendetail), 48 px (Kontakt) und 64 px (Rezeptliste).
     Massgeblich ist die Startseite: sie setzt zwischen Textblock und Inhalt
     62 px. 32 px waren weniger als die Haelfte davon.

     DIE KOEPFE MIT BOGEN sind NICHT betroffen - .dlkopf, .hakopf und .pkopf
     liegen bei 114 bis 122 px, darin stecken rund 90 px Bogen. Sie sind
     strukturell anders und untereinander stimmig. */
.stdkopf { background: var(--bg-page); padding-block: var(--sp-sektion) var(--sp-8); }
.stdkopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.5rem;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--toem-blau);
  transition: color var(--dur-hover) var(--ease-hover);
}
.stdkopf__zurueck:hover,
.stdkopf__zurueck:focus-visible { color: var(--toem-gold); }
.stdkopf__zurueck svg { width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none; }
/* Ohne Schwungzeile, deshalb Gewicht 600 - Gewichtsregel in
   components/sektionstitel.css. Ein Stellentitel ist zu lang fuer Grafolita:
   "Anlagenfahrer Saatlager mit Vertretungsfunktion Teamleitung Saatlager"
   braeuchte bei 92 px vier Zeilen. */
.stdkopf__title {
  max-width: 44rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-600);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  /* Deutsche Komposita brechen sonst nicht. "Duales Studium
     Wirtschaftsingenieurwesen (B. Eng.) (m/w/d)" mass bei 360 px Fenster
     388 px in einer 320-px-Spalte - das Dokument lief dadurch auf 408 px.
     hyphens: auto trennt sinnvoll (die Seite fuehrt lang="de");
     overflow-wrap faengt den Fall ab, in dem kein Trennpunkt passt. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.stdfakten {
  display: grid;
  /* 9rem STATT 11rem, 04.09.2026. Die Angabenzeile soll in EINE Reihe passen -
     das war der Grund, aus dem der Kunde "Art" und "Vertrag" zusammengelegt
     hat: das fuenfte Feld lief allein in eine zweite Reihe.
     Bei den Ausbildungs- und Studienseiten bleiben es trotzdem fuenf Felder,
     dort heissen sie Art, Ort, Start, Dauer und Praesenz. GEMESSEN bei
     1440 px: mit 11rem brachen sie auf zwei Reihen, mit 9rem stehen sie in
     einer, 147 px je Feld, alle Werte einzeilig.
     DIE VIER-FELDER-SEITEN AENDERN SICH NICHT: auto-fit legt nur so viele
     Spuren an, wie hineinpassen, und leere Spuren fallen weg - vier Felder
     teilen sich die Breite weiter zu je 190 px. Nachgemessen. */
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--sp-4) var(--sp-5);
  max-width: 52rem;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
}
/* align-content: start - DER FUENFTE FALL DESSELBEN FEHLERS in diesem
   Projekt. Ohne die Zeile strecken sich die beiden Zeilen einer Zelle in die
   Hoehe der hoechsten Zelle der Reihe: bei "10 bis 20 Stunden pro Woche"
   (zweizeilig) standen die Labels aller Spalten bei y=463, die Werte aber bei
   488 in den zweizeiligen und bei 501 in den einzeiligen Zellen. 13 px
   Versatz, und genau das hat der Kunde am 04.09.2026 gesehen.
   Die vier Vorgaenger stehen in sections/produkte.css, pages/produkte.css,
   pages/fehler.css und pages/historie.css. */
.stdfakt { display: grid; gap: var(--sp-1); align-content: start; }
/* margin: 0 - BEIDE Zeilen sind <p> und trugen die Standardmargen des
   Browsers. Die addieren sich zum Rasterabstand: gemessen 13 px unten am
   Label plus 16 px oben am Wert plus 4 px Gap ergaben 33 px, wo 4 gemeint
   waren. Der Gap allein steuert den Abstand. */
.stdfakt__was {
  margin: 0;
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.stdfakt__wert {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--toem-blau);
}

/* --- Inhalt ------------------------------------------------------------- */
.stdinhalt { background: var(--bg-page); padding-block: var(--sp-7); }
/* LINKS BUENDIG UND BREITER, auf Kundenwunsch vom 29.08.2026.
   Vorher: max-width 44rem, dazu .wrap mit margin-inline: auto - das Element
   stand damit zentriert bei x 368 bis 1072, waehrend Kopf, Bewerbung und
   Weiter-Sektion derselben Seite bei x 60 beginnen. Dieselbe Falle ist in
   pages/produkt.css fuer .pschael__inner dokumentiert: wer .wrap traegt und
   zusaetzlich begrenzt wird, landet in der Seitenmitte.

   52rem statt 44rem: das ist die Breite, auf der .stdfakten im Kopf derselben
   Seite schon laeuft. Zwei verschiedene Bahnbreiten auf einer Seite waren
   nicht begruendet. */
.stdinhalt__grid {
  display: grid;
  gap: var(--sp-7);
}
/* DIE BEGRENZUNG GEHOERT AN DIE KINDER, nicht an das Element selbst. Es
   traegt auch .wrap, und dessen margin-inline: auto zentriert. Mein erster
   Versuch setzte margin-inline: 0 - dann klebte der Kasten am Fensterrand
   und der Inhalt stand bei x 56, waehrend Kopf, Fakten und Bewerben-Sektion
   derselben Seite bei x 116 beginnen. Genau dieselbe Falle ist in
   pages/produkt.css fuer .pschael__inner dokumentiert.
   So bleibt .wrap fuer die Seitenrandbahn zustaendig und der Inhalt laeuft
   linksbuendig auf 52rem - der Breite, auf der .stdfakten im Kopf schon
   laeuft. */
.stdinhalt__grid > * { max-width: 52rem; }
.stdblock { display: grid; gap: var(--sp-4); }
.stdblock__titel {
  margin: 0;
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
/* 38rem statt 36: gemessen laufen hier rund 8,2 px je Zeichen, 38rem sind
   damit rund 74 Zeichen je Zeile. Das ist die Grenze, die in
   components/faq.css als "obere Grenze fuer angenehmes Lesen" festgehalten
   ist; 36rem ergaben nur 66 Zeichen und liessen die Spalte schmal wirken. */
.stdblock p {
  max-width: 38rem;
  margin: 0;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.stdblock ul {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Der Haken als Aufzaehlungszeichen, in Gold als FLAECHE. Ein Punkt waere
   neutral; bei Aufgaben und Anforderungen ist der Haken die passende Form. */
.stdblock li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.stdblock li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--toem-gold);
}

/* --- Bewerbungsblock ---------------------------------------------------- */
/* Grau abgesetzt und am Ende des Inhalts, nicht am Seitenfuss: wer die
   Anzeige gelesen hat, soll den Weg dort finden, wo er fertig gelesen hat. */
.stdbewerb { background: var(--bg-soft); padding-block: var(--sp-sektion); }
/* DIE KARTE BEGINNT AUF HOEHE DES FLIESSTEXTES, nicht der Ueberschrift.
   Vorher standen beide bei y 2359 - die Karte lag damit neben einer
   48-px-Zeile und schwebte oben frei. Gemessen betraegt der Versatz von der
   Ueberschrift zum Vorspann 71,2 px; padding-top an der Karte holt das
   nach, ohne die Rasterlogik zu aendern. Ab 56rem faellt es weg, dort
   stehen die Spalten untereinander. */
.stdbewerb__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
/* EINSPALTIG AB HIER. Der Umbruch fehlte: bei 360 px blieben zwei Spalten
   stehen und die Karte war gemessen nur 131 px breit. Solange die Mail
   ausserhalb stand, fiel das nicht auf - mit der Adresse in der Karte lief
   der Inhalt auf 167 px und das Dokument auf 376 px bei 360 px Fenster.
   Der Umbruchpunkt ist derselbe wie bei den uebrigen zweispaltigen Rastern
   dieser Datei. */
@media (max-width: 56rem) {
  .stdbewerb__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Die Ueberschrift spannt beide Spalten. Damit beginnen Vorspann und Karte
   in derselben Rasterzeile und stehen von selbst auf einer Hoehe - ohne
   geschaetzten Abstand, der bei anderer Zeilenzahl der Ueberschrift wieder
   falsch waere. Mein erster Versuch war genau das: margin-top: var(--sp-7),
   gemessen 23,2 px daneben. */
.stdbewerb__title { grid-column: 1 / -1; margin-bottom: var(--sp-5); }
.stdbewerb__lead {
  max-width: 34rem;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.stdbewerb__karte {
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
/* Eine Stufe groesser: die Karte stand auf 16/15 px neben einem Fliesstext
   mit 18 px und wirkte dadurch wie eine Fussnote. Jetzt --fs-400 wie der
   Text daneben. */
.stdbewerb__karte h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--toem-blau);
}
.stdbewerb__karte address {
  font-style: normal;
  /* --fs-400 wie der Fliesstext daneben. Vorher --fs-200: die Karte stand auf
     15 px neben 18 px und las sich wie eine Fussnote. */
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
/* DIESELBE GROESSE WIE .kontakt__way__value UND .kainiti__adresse: 18 px,
   Gewicht 700. Regel, am 28.08.2026 vom Kunden benannt: eine Mailadresse, die
   ENTSCHEIDENDE Information ist - hier bewirbt man sich damit - laeuft gross.
   Eine Adresse, die nur ein Hinweis im Satz ist, laeuft klein (.dlhinweis auf
   /downloads/, 15 px / 600). Vorher stand hier --fs-300, also 16 px / 600 -
   zwischen den beiden Maessen und damit auf keinem. */
/* MAIL IN DER KARTE, mit Briefzeichen davor. Regel des Kunden: vor jeder
   Mail steht das Zeichen, ausser die Mail ist Nebensache. Hier ist sie der
   Zweck der ganzen Sektion.
   inline-flex mit gap statt eines Zeichens im Textfluss: so bleibt das
   Zeichen bei einem Umbruch der Adresse an seiner Zeile. */
.stdbewerb__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--toem-blau);
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* flex: none - ohne das wird das Zeichen als Flex-Element gestaucht, sobald
   die Adresse eng wird: gemessen 18 px bei 1440, aber nur 5,2 px bei 414.
   Dieselbe Regel steht bei .faqf__weiter svg in components/faq.css. */
.stdbewerb__mail svg {
  flex: none;
  width: var(--zeichen-inline);
  height: var(--zeichen-inline);
}
.stdbewerb__mail:hover,
.stdbewerb__mail:focus-visible { color: var(--toem-gold); }

/* --- Weitere Stellen ---------------------------------------------------- */
.stdweiter { background: var(--bg-page); padding-block: var(--sp-sektion); }
/* KEINE EIGENE BREITE. Hier stand max-width: 52rem - die Karten liefen damit
   auf 400 px, waehrend dieselbe Komponente auf /karriere/stellen/ 588 px
   breit ist. Alles andere war schon identisch: Polster 24, Radius 8,
   derselbe Schatten, Titel 18/700. Nur die Bahn war enger, und dafuer gab es
   keinen Grund. Kundenwunsch vom 29.08.2026: wie auf der Listingseite. */
.stdweiter .stliste__grid { margin-top: var(--sp-8); }

/* ==========================================================================
   4. Ausbildungsseite /karriere/ausbildung/

   EIGENE SEITE STATT TAXONOMIESEITE, entschieden am 28.08.2026. Vorher war
   das /karriere/stellen/typ/ausbildung/ - eine gefilterte Liste, deren
   einziger eigener Inhalt gemessen 30 Woerter war. Die Zielgruppe hat aber
   andere Fragen als eine Fachkraft mit Berufserfahrung: wann bewerben, welcher
   Abschluss, wie laeuft die Berufsschule, was kommt danach. Das gehoert auf
   eine Seite mit Inhalt, nicht in einen Listenaufruf.

   ANSPRACHE MIT "DU". Auf der Liveseite spricht der Kunde Bewerber
   durchgehend mit Du an, auch die Schueler ("Du bist Schueler oder
   Student..."). Unser Prototyp stand im Karrierezweig auf Sie - das war meine
   stille Abweichung. Hier steht Du, weil es die Stimme des Kunden UND die
   Konvention fuer diese Zielgruppe ist.
   ========================================================================== */

/* --- Fahrplan der Bewerbung --------------------------------------------- */
/* Eine ECHTE ol: die Reihenfolge ist Information, nicht Dekoration. Die
   Nummern kommen aus dem Zaehler, nicht aus dem Text - sonst muesste die
   Redaktion beim Einschieben eines Schritts alle nachfolgenden umschreiben. */
/* --- Bewerbungsweg als senkrechte Zeitleiste ----------------------------
   Vorher ein auto-fit-Raster: fuenf Schritte ergaben vier Spalten plus eine
   Waise in Reihe zwei. Waagerecht durchgerechnet blieben 222 px je Schritt
   und rund 31 Zeichen je Zeile - der laengste Schritt waere von drei auf
   fuenf Zeilen gewachsen. Senkrecht ist es eine Anordnung auf jeder Breite.

   DIE LINIE ZEICHNET SICH BEIM SCROLLEN. Sie haengt an .is-in, dem Haken der
   Reveal-Mechanik in feinschliff.css - kein eigener Beobachter. Ohne JS fehlt
   .js-reveal, dann steht die Leiste fertig da: der Grundzustand ist sichtbar,
   erst .js-reveal setzt sie auf null. Progressive Enhancement, nicht umgekehrt. */
.abweg__liste {
  list-style: none;
  counter-reset: schritt;
  margin: var(--sp-8) 0 0;
  padding: 0;
  max-width: 44rem;
  display: grid;
  gap: 0;
}
.abweg__schritt {
  counter-increment: schritt;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  /* Platz fuer Schiene und Ziffernkreis */
  padding: 0 0 var(--sp-7) calc(var(--zeichen-kreis-xl) + var(--sp-5));
}
.abweg__schritt:last-child { padding-bottom: 0; }

/* Ziffer im Kreis, auf der Schiene */
.abweg__schritt::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -0.15em;
  width: var(--zeichen-kreis-xl);
  height: var(--zeichen-kreis-xl);
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  /* FIGTREE, nicht Grafolita. Die Schreibschrift setzt Ziffern mit
     Unterlaengen und wechselnder Grundlinie - in einem 36-px-Kreis stand die
     5 dadurch sichtbar tiefer als die 1. Als Zaehler braucht es eine Ziffer,
     die auf der Linie sitzt, nicht eine Zierziffer. */
  font-size: var(--fs-300);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--toem-gold);
  transition: border-color var(--dur) var(--ease);
}
.abweg__schritt.is-in::before { border-color: var(--toem-gold); }

/* Verbindungsstueck nach unten. Der letzte Schritt hat keins. */
.abweg__schritt::after {
  content: "";
  position: absolute;
  left: calc(var(--zeichen-kreis-xl) / 2);
  top: calc(var(--zeichen-kreis-xl) - 0.15em);
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--toem-gold);
  transform-origin: top center;
  scale: 1 1;
}
.abweg__schritt:last-child::after { content: none; }
/* Erst mit JS faehrt die Linie ein. Ohne .js-reveal bleibt sie oben stehen. */
.js-reveal .abweg__schritt::after {
  scale: 1 0;
  transition: scale var(--dur-reveal) var(--ease-reveal);
}
.js-reveal .abweg__schritt.is-in::after { scale: 1 1; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .abweg__schritt::after { scale: 1 1; transition: none; }
}

.abweg__titel {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--toem-blau);
}
.abweg__text { margin: 0; color: var(--text-body); }

/* --- Was Du wissen willst ----------------------------------------------- */
/* dl statt Akkordeon: bei vier Fragen ist Aufklappen mehr Bedienung als
   Nutzen, und die Antworten sind kurz. Zweispaltig, damit Frage und Antwort
   auf einer Linie beginnen - subgrid haelt das ueber alle Zeilen. */
.abfragen__liste {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--sp-6) clamp(var(--sp-5), 3vw, var(--sp-7));
  margin: var(--sp-8) 0 0;
}
.abfragen__paar {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-content: start;
}
.abfragen__frage {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
/* ZEILENLAENGE, DURCHGERECHNET. Ohne Begrenzung lief die Antwort ueber 877 px.
   Gemessen an der laengsten gerenderten Zeile:

     42rem  672 px   95 Zeichen
     36rem  576 px   80 Zeichen
     32rem  512 px   73 Zeichen
     28rem  448 px   64 Zeichen   <- Ziel etwa 65

   18rem Frage plus 28rem Antwort sind zusammen 46rem - dieselbe Lesebreite,
   die .kainiti__inner traegt. */
.abfragen__antwort {
  margin: 0;
  max-width: 28rem;
  color: var(--text-body);
}
@media (max-width: 48rem) {
  .abfragen__liste { grid-template-columns: minmax(0, 1fr); }
  .abfragen__paar { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

/* --- Die Plaetze, in zwei Gruppen --------------------------------------- */
/* Ausbildungsberufe und duale Studiengaenge getrennt: wer Abitur hat, sucht
   die zweite Gruppe, und umgekehrt. Eine gemischte Liste zwingt beide,
   alles zu lesen. */
.abplaetze__gruppe + .abplaetze__gruppe { margin-top: var(--sp-9); }
/* ABSTAND ZUM SEKTIONSTITEL (Thorsten, 29.09.2026): „Sechs Ausbildungsberufe“
   stand 16 px unter „auf einen Blick“ und las sich wie die dritte Zeile
   derselben Überschrift. Jetzt 48 px (Telefon) bis 64 px (Rechner); zwischen
   den Gruppen bleiben 120 px, die Rangfolge Titel > Gruppe bleibt sichtbar.
   Der Rand ERSETZT den des Titels (16 px), er addiert sich nicht - die
   Ränder fallen zusammen (gemessen). */
.kawege__title + .abplaetze__gruppe { margin-top: clamp(var(--sp-7), 5vw, var(--sp-8)); }
.abplaetze__label {
  /* WIE .stliste__zahl AUF /karriere/stellen/: die Zahl ist eine Ueberschrift
     unmittelbar ueber den Karten, kein Kleinlabel. Eine Stufe kleiner als der
     Sektionstitel darueber (--fs-500 statt --fs-600), damit die Rangfolge
     Sektionstitel > Gruppe > Karte erhalten bleibt.
     Farbe und Schnitt hier gesetzt, NICHT ueber die Liste in
     sektionstitel.css: das ist eine h3, keine Sektionsueberschrift. */
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-500);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
  letter-spacing: normal;
  text-transform: none;
}

/* ==========================================================================
   PRAKTIKUM UND WERKSTUDIUM
   Der Weg fuer die, die sich auf keinen der neun Plaetze bewerben koennen,
   weil sie noch zur Schule gehen. Ohne den Abschnitt endet die Seite fuer
   diese Gruppe im Nichts.
   ========================================================================== */
.kaprakt {
  background: var(--surface);
  padding-block: var(--sp-sektion);
}
/* Wie in .stdbewerb: die Ueberschrift spannt beide Spalten, damit Text und
   Bereichsliste in derselben Rasterzeile beginnen. */
.kaprakt__title { grid-column: 1 / -1; }
.kaprakt__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  /* align-content: start - in diesem Projekt viermal vergessen und viermal
     derselbe Befund: ohne die Zeile verteilt das Raster ueberschuessige Hoehe
     auf alle Zeilen, und die kuerzere Spalte rutscht nach unten. */
  align-content: start;
  align-items: start;
}
.kaprakt__text {
  margin: 0;
  max-width: 34rem;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-body);
}
/* VIER ABSAETZE SEIT DEM 25.09.2026 (Kundentext Praktika & Aushilfen),
   vorher einer. Der Abstand zwischen ihnen ist der Fliesstextabstand des
   Hauses, nicht der zum Knopf darunter. */
.kaprakt__text + .kaprakt__text { margin-top: var(--sp-4); }
.kaprakt__aktion { margin: var(--sp-6) 0 0; }
.kaprakt__label {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Zwei Spalten fuer zehn Ein-Wort-Angaben. Karten waeren hier falsch: sie
   erzeugten zehn leere Flaechen um je ein Wort. */
.kaprakt__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
  align-content: start;
}
/* SCHLICHTE AUFLISTUNG mit goldenem Stichpunkt. Ohne Marke standen zehn
   Woerter in zwei Spalten und sahen aus wie eine Tabelle ohne Rahmen; die
   Haarlinien davor sahen aus wie eine Tabelle mit leeren Spalten.
   Der Punkt ist ein Pseudoelement, kein list-style-Marker: so laesst sich
   seine Groesse und der Abstand zum Wort in Tokens fassen. */
.kaprakt__liste li {
  position: relative;
  padding-block: var(--sp-1);
  padding-left: var(--sp-5);
  font-size: var(--fs-300);
  color: var(--text-body);
}
.kaprakt__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--toem-gold);
}
@media (max-width: 56rem) {
  .kaprakt__inner { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Unterhalb der Messbasis (< 360 px)
   ==========================================================================
   Die Messbasis des Projekts ist 360 bis 1440 px. Darunter kippte die
   Stimmen-Karte: 180 px Portraet plus 64 px Spalte lassen bei 320 px nur
   36 px fuer den Text, und der laengste Name ist allein 83 px breit. Ein Wort
   bricht nicht, also lief es aus der Karte heraus und schob das Dokument
   4 bis 11 px zur Seite.

   BEWUSST ALS MEDIA QUERY und nicht als clamp() auf der Spaltenbreite: ein
   clamp haette auch zwischen 530 und 1070 px gewirkt und dort den Abstand
   verkleinert. Das ist Teil des Layouts, das der Kunde gerade abnimmt.
   Dieser Block fasst ausschliesslich an, was unterhalb von 360 px passiert.

   ANS DATEIENDE GESETZT, nicht in einen bestehenden Block hinein. Das
   Einfuegen mitten in einen @media-Block hat in diesem Projekt schon einmal
   den umgebenden Block vorzeitig geschlossen. */
@media (max-width: 22.5rem) {
  .kastimme {
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: var(--sp-5) var(--sp-5);
  }

  /* Zweite Ursache auf /karriere/ausbildung/: die Bereichsliste steht in zwei
     Spalten. Bei 320 px bleiben je Spalte 128 px, davon 24 px Einzug fuer den
     Punkt - 104 px fuer den Text. "Qualitaetssicherung" ist als ein Wort rund
     140 px breit und bricht nicht. Gemessen 31 px Ueberhang in der Zelle,
     davon 11 px am Dokument.
     Einspaltig statt Silbentrennung: zehn kurze Eintraege untereinander
     lesen sich auf einem schmalen Geraet besser als getrennte Woerter. */
  .kaprakt__liste { grid-template-columns: minmax(0, 1fr); }
}

/* Der Knopf zum Bewerbungsformular in der Bewerbungskarte. Er ersetzt seit
   dem 04.09.2026 die Mailzeile (Punkt 3 der Mail der Personalabteilung:
   "Es soll keine Bewerbung mehr per E-Mail angeboten werden").
   Nur der Abstand steht hier - das Aussehen kommt aus components/knopf.css,
   und dort soll es bleiben. Die Zeile davor war eine Textzeile mit
   Mailzeichen, ein Knopf braucht Luft nach oben. */
.stdbewerb__knopf {
  margin-top: var(--sp-5);
  max-width: 100%;
}
/* GEMESSEN BEI 320 px: der Knopf war 296 px breit, die Karte hatte innen nur
   232 px - der Pruefer hat 20 px Ueberlauf gemeldet. "ZUM
   BEWERBUNGSFORMULAR" ist in Versalien mit Sperrung 202 px lang, dazu 64 px
   Polster und das Zeichen.
   Drei Massnahmen, zusammen reichen sie: Polster von 32 auf 16 px je Seite,
   Sperrung auf 0 (sie kostet bei 22 Zeichen 20 px) und flex-wrap, damit das
   Zeichen in eine zweite Zeile darf. Danach 214 px in 232 px.
   NUR HIER UND NUR SCHMAL: components/knopf.css bleibt unberuehrt, der Knopf
   sieht auf jeder anderen Seite und ab 24rem aus wie bisher. Die Ursache ist
   nicht der Knopf, sondern diese besonders schmale Karte. */
@media (max-width: 24rem) {
  .stdbewerb__knopf {
    padding-inline: var(--sp-4);
    letter-spacing: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* TREFFERFLAECHE 44 px auf Touchbreiten, nachgezogen am 10.09.2026 beim
   responsiven Durchgang. Gemessen war dieser Zuruecklink 40 px hoch; die
   Projektregel verlangt 44. Dasselbe Muster gibt es viermal im Projekt
   (rzkopf, stdkopf, hakopf, bwkopf) - im Theme wird daraus ein Bauteil, hier
   steht der Wert vorerst viermal. Nur auf Touchbreiten, wie bei der Fusszeile
   und den Eingabefeldern; dieselbe Grenze von 64rem. */
@media (max-width: 64rem) {
  .stdkopf__zurueck { min-height: 2.75rem; }
}

/* --- Stimmenkarte: Bildspalte und Abstand ab 32rem herunter ------------
   Gefunden beim responsiven Durchgang am 10.09.2026, und es ist der schwerste
   Fund des Audits.

   GEMESSEN bei 390 px Fensterbreite: die Karte ist 350 px breit, die
   Basisregel setzt 11.25rem Bildspalte (180 px) und --sp-8 Spaltenabstand
   (64 px). Fuer den Text bleiben 350 - 180 - 64 = 106 px, und das Zitat mit
   152 Zeichen lief dort ueber SECHZEHN Zeilen - rund neun Zeichen je Zeile.

   DER AUSGLEICH GAB ES SCHON, aber an der falschen Grenze: der Block bei
   22.5rem (360 px) setzt Bild auf 7.5rem und Abstand auf --sp-5, und dort
   sind es dann 176 px Text. Dadurch war das Layout bei 390 px SCHLECHTER als
   bei 360 px - ein Umbruchpunkt, der in die falsche Richtung wirkt.

   Gerechnet, wo die Basisregel wieder traegt: Text = Fensterbreite - 40 px
   Wrap-Rand - 244 px (Bild plus Abstand). Fuer 200 px Text braucht es also
   484 px Fenster. Deshalb 32rem als Grenze, das gibt bei 512 px rund 228 px
   Text und damit etwa 36 Zeichen je Zeile.
   Der alte 22.5rem-Block bleibt stehen: dieselben Werte, er schadet nicht,
   und er traegt dort noch andere Korrekturen.

   MEIN ERSTER WERT WAR ZU KNAPP. Mit 32rem allein blieb es bei 414 px auf 19
   und bei 390 px auf 15 Zeichen je Zeile - nachgemessen. Unter etwa 430 px
   traegt die Zweispaltigkeit ueberhaupt nicht mehr, weil dem Text nach Bild
   und Abstand nur 230 px bleiben. Deshalb jetzt drei Stufen, jede gerechnet:

     unter 30rem (480 px)   EINSPALTIG. Text = ganze Kartenbreite,
                            280 bis 440 px, also 44 bis 68 Zeichen je Zeile.
     30rem bis 40rem        zweispaltig schmal: Bild 7.5rem, Abstand --sp-5.
                            Text = Karte - 144 px, bei 480 px sind das 296.
     ueber 40rem            die Basisregel, Bild 11.25rem, Abstand --sp-8.
                            Bei 640 px Fenster bleiben dem Text 348 px. */
@media (max-width: 30rem) {
  .kastimme {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
  /* Das Bild darf einspaltig nicht die halbe Karte hoch werden. */
  .kastimme__bild { max-width: 11.25rem; }
}
@media (min-width: 30.0625rem) and (max-width: 40rem) {
  .kastimme {
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

/* --- Zweiter Weg zum Formular, oben im Faktenkasten ---------------------- */
/* GEMESSEN AM 15.09.2026: der einzige Verweis aufs Bewerbungsformular stand
   bei 59 % der Stellenseite, zwei Bildschirme unter den Fakten. Wer nach den
   Fakten entschieden ist, soll nicht erst suchen muessen.
   Der untere Knopf bleibt: wer die Anzeige zu Ende liest, sucht ihn dort. */
.stdfakten__knopf {
  /* UEBER ALLE SPALTEN, sonst steht der Knopf in einer Spur von 147 px und
     "Zum Bewerbungsformular" bricht in zwei Zeilen - am 15.09.2026 genau so
     gesehen. `justify-self: start` haelt ihn trotzdem links und laesst ihn
     nur so breit werden, wie sein Text braucht. */
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--sp-5);
}

/* Der Knopf unter den Schritten der Bewerbung.
   DER ABSTAND FOLGT DEM TAKT DER LISTE: die Schritte stehen mit
   padding-bottom: var(--sp-7) auseinander, also 48 px. Mit sp-5 klebte der
   Knopf unter dem letzten Text - am 15.09.2026 so gesehen.
   UND ER RUECKT AUF DIE TEXTSPALTE EIN, nicht an den Rand des Abschnitts:
   dieselbe Einrueckung wie die Schritte, damit er zur Liste gehoert und
   nicht daneben steht. */
.abweg__aktion {
  margin: var(--sp-7) 0 0;
  padding-left: calc(var(--zeichen-kreis-xl) + var(--sp-5));
}

/* AM HANDY UEBER DIE GANZE BREITE, Wunsch von Thorsten am 08.10.2026.
   Gemessen auf der Live-Seite: auf /karriere/ausbildung/ stand der Knopf
   eingerueckt in 260 px und brach bei 360 px in drei Zeilen, bei 390 px in
   zwei; in der Faktenkasten- und der Bewerbungskarte der Stellenseiten bei
   320 px in zwei. Alle drei Knoepfe nehmen am Handy die volle Spalte, der
   untere auf der Ausbildungsseite gibt dafuer die Einrueckung auf.
   Unter 24rem reicht auch die volle Breite nicht (Text 304 px, Spalte
   280 px): dort dasselbe schmale Polster wie bisher nur in der Karte. */
@media (max-width: 30rem) {
  .abweg__aktion { padding-left: 0; }
  .abweg__aktion .knopf,
  .stdfakten__knopf,
  .stdbewerb__knopf {
    display: flex;
    width: 100%;
  }
  .stdfakten__knopf { justify-self: stretch; }
}
@media (max-width: 24rem) {
  .abweg__aktion .knopf,
  .stdfakten__knopf {
    padding-inline: var(--sp-4);
    letter-spacing: 0;
  }
}