/* Base layer of the Infoseiten (ADR 0020) — everything the Figma export kept
   in its <helmet> block, plus what replaces its React runtime.

   Element styling stays where the export put it: in `style=""` attributes on
   the markup, which are its mobile values. Here stands what cannot live there
   — @font-face, the reset, the selectors of the interactive pieces (FAQ
   accordion, menu, carousel dots) and, since ADR 0028, the export's responsive
   class layer at the foot of this file: a breakpoint has no inline form.
   Shared instead of copied three times for the same reason site.js is: three
   copies of a font declaration would drift on the first change, and header,
   menu and footer are copied only because an include mechanism would cost a
   build step or a flash (ADR 0020, "Kopieren statt Einbinden").

   NOT assets/css/ — that is the Vue app's layer and goes through its bundler.
   These pages never reach the renderer. */

/* Roboto, self-hosted (ADR 0020): the Infoseiten must not call out to
   fonts.googleapis.com. One variable file per subset covers 400-900 — every
   weight the export asks for (400/500/600/700) plus the Black that Figma
   Page 4 writes two JobMatch headings in (#362) — in two requests instead
   of eight. Taken from Google Fonts' own css2 response (Roboto v51), ranges
   verbatim so the browser keeps loading latin-ext only when it needs it —
   latin-ext refreshed against that answer in #222 (U+20AD-20C4 instead of
   U+20AD-20C0, four codepoints Google added; the woff2 files are untouched).
   The files sit in `public/fonts/`, shared with the app, which declares them a
   second time in `assets/css/fonts.css` (#222) — same URL, one cache entry. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/roboto-latin-var.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/roboto-latin-ext-var.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Verbatim from the export's <helmet>. */
body {
  margin: 0;
  background: rgb(215, 215, 215);
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: rgb(0, 69, 135);
}
a:hover {
  color: rgb(150, 55, 187);
}
* {
  box-sizing: border-box;
}

/* The FAQ. The export renders a <button> plus a chevron whose rotation it
   recomputes on every click; `<details name="faq">` is the same accordion
   (one open at a time) and keeps working with no JS at all, which is why the
   questions are readable even if site.js never arrives. What is left to style
   is the summary row — the native marker goes, the export's own row returns. */
.faq-item {
  border-top: 1px solid rgb(198, 202, 185);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 6px 12px 0;
  color: rgb(83, 83, 83);
  /* Weight, size and line-height apart: from 900 px on Page 5 moves two of
     them (#396, P24). */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary > span {
  flex: 1;
  min-width: 0;
}
.faq-item summary > svg {
  flex: none;
  transition: transform 0.2s;
}
.faq-item[open] summary > svg {
  transform: rotate(180deg);
}
/* The answer slides open and shut, still without JS: the panel of a
   `<details>` animates its height to `auto` once `interpolate-size` allows it,
   and `content-visibility` has to switch discretely or closing would cut the
   slide short. A browser without either simply opens at once. */
.faq-item {
  interpolate-size: allow-keywords;
}
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.3s ease,
    content-visibility 0.3s allow-discrete;
}
.faq-item[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content,
  .faq-item summary > svg {
    transition: none;
  }
}
.faq-item > p {
  margin: 0;
  padding: 0 24px 18px 0;
  max-width: 720px;
  font-size: 14px;
  line-height: 18px;
  text-wrap: pretty;
}
/* An answer of several paragraphs keeps the closing gap only after its last. */
.faq-item > p:not(:last-child) {
  padding-bottom: 8px;
}

/* Carousel dots. Flat markup, the active one marked by an attribute so the
   colour stays a style decision — site.js only moves the attribute. */
.dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.dots > span,
.dots > button {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgb(222, 222, 222);
}
/* Where a dot picks a story itself it is a `<button>` (#431) — arrows alone
   would leave the strip out of a keyboard's reach. */
.dots > button {
  cursor: pointer;
}
/* Blue is Page 4 and holds below 900 px: the Desktop feedback of #397 greys
   the marked dot, and mobile stays pixel for pixel as it was (#394). */
.dots > span[data-active],
.dots > button[data-active] {
  background: rgb(0, 69, 135);
}

/* The burger menu, Figma Page 4 (#361): a 262px panel anchored right, the page
   beside it visible and undimmed. It lives here and not in a `style=""` because
   an inline `display` would outrank `[hidden]{display:none}` and the menu would
   stand open before site.js runs — and because the hover bar needs a
   pseudo-class. `SiteHeader.vue` holds the same values for the Vue shell.

   `fixed` over the whole viewport, not `absolute` in the page column, which on
   a 5500px document means "at the top" (#154). The box beside the panel is the
   visible strip, and a click on it closes the menu (site.js). */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
}
.site-menu[hidden] {
  display: none;
}
.site-menu__panel {
  width: 262px;
  background: rgb(241, 241, 236);
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
/* The X stands where the burger was: centred in `.hdr`'s height — its mobile
   one, the only width at which the menu opens at all. */
.site-menu__kopf {
  flex: none;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}
.site-menu__zu {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: rgb(0, 69, 135);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
/* Login and Kontakt, set off below the main points. */
.site-menu__neben {
  margin-top: 24px;
}
/* The indent is padding on the link, not a margin on the column: the hover bar
   runs the full width of the panel. */
.site-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 39px;
  color: rgb(0, 69, 135);
  text-decoration: none;
  font-weight: 500;
  font-size: 20px;
  line-height: 40px;
}
.site-menu__link--klein {
  font-size: 16px;
}
.site-menu__link > svg {
  flex: none;
}
/* Hover and focus, not "you are here" (#359, F2). The colour repeats because
   the global `a:hover` above outranks `.site-menu__link` and would tint it. */
.site-menu__link:hover,
.site-menu__link:focus-visible {
  background: rgba(198, 202, 185, 0.42);
  color: rgb(0, 69, 135);
}

/* The responsive layer of the export, class names and values verbatim. Two of
   its classes are not here because no Infoseite asks for them: `.frow` (its
   form rows, on the JobMatch screen only) and `.circle-ill` (used by no
   element at all — not even in the export). The `!important` is the export's
   own, and `.dsk` needs it: it also sits on elements whose `style=""` sets a
   display. */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  color: rgb(0, 69, 135);
}
.pad {
  padding-left: 30px;
  padding-right: 30px;
}
.sec {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mob {
  display: flex;
}
.dsk {
  display: none !important;
}
/* Der Bewerbungsweg (#490) — inverted: the „Login"-Türen stand hidden and
   `site.js` reveals them, because a DB flag does not reach a static file
   (ADR 0020; why this way round in docs/feature-flags.md §8.3). `html:not(…)`
   and not a bare class, to outrank the `!important` of `.dsk` — among important
   declarations specificity decides, not order. */
html:not(.bewerbungsweg-an) .bewerbungsweg {
  display: none !important;
}
.cols {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Bleed: the cards run into the page padding, so the next one peeks in. */
  margin-right: -30px;
  padding-right: 30px;
  flex: 1;
  min-width: 0;
}
/* `scrollbar-width` is what the export writes; WebKit ignores it and wants a
   pseudo-element instead. */
.rail::-webkit-scrollbar {
  display: none;
}
.card {
  flex: 0 0 290px;
  min-width: 290px;
  scroll-snap-align: start;
}
.card-g {
  flex: 0 0 311px;
  min-width: 290px;
  scroll-snap-align: start;
}
/* No `min-width`, unlike the photo cards: four of these fit a band, not two. */
.card-b {
  flex: 0 0 140px;
  scroll-snap-align: start;
}
.h1 {
  font-size: 36px;
  line-height: 1;
}
.h2 {
  font-size: 28px;
  line-height: 1;
}
.story-img {
  height: 254px;
}
.hero-ort {
  height: 261px;
}
.hdr {
  height: 96px;
}
.hero-pad {
  padding: 28px 30px 34px;
}
/* The Startseite's hero: its gap changes at 900 px, so it cannot stay inline
   (#395). */
.hero-start {
  gap: 22px;
}
/* The white disc itself, in three sizes: the rails' 101 px and the story
   slider's 64 and 40 px (#431). Only size and placement differ, and each rule
   below carries its own; the paint stands once. Display comes from `.dsk` /
   `.mob`. */
.rail-kreis,
.story-kreis,
.story-kreis-klein {
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* The arrow buttons of a rail, Figma `999:3751`/`999:3754` and Page 5 (Q9 of
   #400, P15 and P21 of #397): a white circle that straddles the rail's edge.
   It overlays the rail instead of standing beside it — that is what lets the
   cards reach the page padding — so it is positioned, and `z-index` is what
   keeps the Arbeitsort cards, positioned themselves, from painting over it.
   Only shown from 900 px on, through `.dsk`. */
.rail-kreis {
  position: absolute;
  top: 20.5px;
  z-index: 1;
  width: 101px;
  height: 101px;
}
.rail-kreis--zurueck {
  left: -53px;
}
.rail-kreis--weiter {
  right: -46px;
}
/* On a rail of cards the disc stands in the middle of the row and its centre
   on the card's edge; the default above is the Kompetenz-Kacheln, whose 130-px
   icons give the axis. Same specificity as `.rail-kreis`, so order decides. */
.rail-kreis--karte {
  top: 50%;
  margin-top: -50.5px;
}
.rail-kreis--karte.rail-kreis--zurueck {
  left: -50.5px;
}
.rail-kreis--karte.rail-kreis--weiter {
  right: -50.5px;
}
/* site.js sets `hidden` on a rail with nothing to scroll; `.dsk` and `.dots`
   would otherwise outrank the browser's own `[hidden]`. */
.rail-kreis[hidden],
.dots[hidden] {
  display: none !important;
}
/* Footer: Figma DGV-Website_14102026, Page 4 and 5. Lines run the full height
   of their column; the one pad of the page frames it (#307). */
.foot {
  background: rgb(218, 228, 237);
  font-size: 14px;
  line-height: 24px;
}
.foot.sec {
  padding-top: 43px;
  padding-bottom: 39px;
}
.foot a {
  display: block;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.foot-cols {
  display: flex;
  flex-direction: column;
}
.foot-strong {
  font-weight: 700;
}
.foot-col--seiten {
  padding-bottom: 22px;
}
/* 184 px, not Figma's 147: that line is as long as the row of three circles
   it carries since #398 — 3 × 46 px plus the two gaps (#409). The sibling
   column takes the same width, because both lines are one length. */
.foot-col--service,
.foot-col--social {
  width: 184px;
  border-top: 1px solid rgb(169, 189, 199);
}
.foot-col--service {
  padding: 17px 0 22px;
}
.foot-col--social {
  padding-top: 23px;
}
.foot-titel {
  margin: 0 0 17px;
  font-weight: 700;
  font-size: 18px;
}
.foot-icons {
  margin: 0;
  display: flex;
  gap: 23px;
}
.foot-icons a,
.foot-icons img {
  display: block;
  width: 46px;
  height: 46px;
}
.foot-recht {
  margin: 79px 0 0;
}

/* Typography of Figma Page 5, Frame „Ort – Desktop" (#366): Page 4 below
   900 px, Page 5 above, both halves here because an inline value outranks the
   class rule and the breakpoint would never fire. `line-height: normal` is
   Figma's „auto" (ADR 0032); `D…` are the comparison's Befund-IDs. */
/* D1: the hero overline „Arbeitsorte". */
.ueberzeile {
  font-size: 14px;
  line-height: 28px;
}
/* D2: the hero H1 of the Ort pages and of „Über uns". Its own class, not `.h2`
   — that one also sets headings outside this ticket, on the Startseite. */
.h-hero {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
/* D3: the intro heading of the Ort pages — the one whose weight drops from Bold
   to Medium above the breakpoint. */
.h-intro {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
}
/* D4: the intro text below it. */
.intro-text {
  font-size: 16px;
  line-height: 20px;
}
/* D5: the sub-headings. „Über uns" keeps the export's 1.15 below 900 px, the
   Ort pages their 1 — the one place where the two differ on the phone. */
.h-abschnitt {
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}
.h-abschnitt--luft {
  line-height: 1.15;
}
/* D6: the body text under them. */
.fliesstext {
  font-size: 14px;
  line-height: 18px;
}
/* D7-D9: the JobMatch teaser, a copy on all ten pages. */
.h-jobmatch {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
.jobmatch-liste {
  font-size: 18px;
  line-height: 20px;
  gap: 10px;
}
.jobmatch-knopf {
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
}
/* P13 (#398): the air between list and button, which the breakpoint moves. */
.jobmatch-aktion {
  margin-top: 32px;
}
/* D10-D12: the story block, on the Ort pages, the Startseite and „Dein
   Quereinstieg" (#396, P8-P10). The line stands here, not inline: from 900 px
   on it is 117 px long instead of the width of the word. */
.story-ueberzeile {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid rgb(0, 69, 135);
}
.story-zitat {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  /* Between 900 and 1024 px a long word is wider than the column; the pages
     carry `lang="de"`, so it breaks with a hyphen, not mid-word (#367). */
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* The quotes of Start and „Dein Quereinstieg" never hyphenated below 900 px,
   and Page 4 holds there (#396). */
.story-zitat--mobil-ungetrennt {
  -webkit-hyphens: manual;
  hyphens: manual;
}
.story-name {
  font-size: 16px;
  line-height: 1.2;
}
/* The story slider of „Dein Quereinstieg" (#431, Variante A). Below the
   quote it is the rails' own 101-px disc on the edges of the `.cols`; up top
   those would straddle the block's edge and land on the text, so the 64-px
   one takes the free margins the quote's surface already has (92 px left,
   95 px right of `.zitat-quer__text`). Both are `.dsk`: below 900 px two
   40-px circles flank the dots instead. */
.story-kreis {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -32px;
  width: 64px;
  height: 64px;
}
.story-kreis--zurueck {
  left: -80px;
}
.story-kreis--weiter {
  right: -84px;
}
.story-steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.story-kreis-klein {
  width: 40px;
  height: 40px;
}
/* Photo, quote and signature fade out, swap and fade back as one unit —
   nothing overlaps, the three go to `opacity: 0` and return with the next
   story. The 200 ms stand here alone: site.js reads the duration off the
   element before it writes, so the switch-off below reaches it too. */
.story-blende {
  transition: opacity 0.2s;
}
.story-blende--weg {
  opacity: 0;
}
/* After the rule it switches off — a `transition: none` further up the file
   would lose to it at the same specificity. */
@media (prefers-reduced-motion: reduce) {
  .story-blende {
    transition: none;
  }
}
/* P5, P6: the hero of the Startseite, Frame „Start – Desktop" (#395). Its own
   class, not `.h1` — „Dein Quereinstieg" keeps that one. */
.h-start {
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
}
.start-text {
  font-size: 16px;
  line-height: 20px;
  /* Not inline: Page 5 widens it, and between 620 and 900 px it binds. */
  max-width: 560px;
}
/* P23: the purple CTA band of the Startseite, and its heading for the FAQ of
   Start and „Dein Quereinstieg" too (#396) — not `.h2`, which other headings
   still carry at 36 px. The Quereinstieg panel of the Startseite wears all
   three: Figma Page 5 sets it in the band's sizes (`848:609`, `848:612`,
   `848:621`). */
.h-band {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
.band-text {
  font-size: 16px;
  line-height: 20px;
}
.band-knopf {
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
}
/* The ball behind „Bei uns findest du deinen Platz." Page 5 makes it twice as
   big and centres it, so its geometry stands here whole — inline it would
   outrank the 900-px rule. These are the export's phone values. */
.einstieg-ball {
  position: absolute;
  left: 14%;
  top: 30px;
  width: 283px;
  height: 283px;
  border-radius: 50%;
  background: rgb(200, 212, 92);
}
/* P22: the cards of the „5 guten Gründe". The text grows at 900 px, so size,
   line-height and colour stand here whole (#397); the title's own weight and
   size do not change and stay inline, where the `<strong>` needs an absolute
   weight anyway (#362, B6 in tests/unit/infoseiten-port.test.ts). What the
   class gives the title is the blank line below it, and only from 900 px on. */
.grund-text {
  font-size: 14px;
  line-height: 18px;
  color: rgb(83, 83, 83);
}
/* D13-D15: the Berater block, a copy on all ten pages. The heading is the only
   element whose weight changes with the breakpoint — SemiBold on the phone
   (Page 4, B4), Bold from 900 px on (Page 5, D13) — and its size does not. */
.h-kontakt {
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
}
.kontakt-text {
  font-size: 14px;
  line-height: 18px;
}
.kontakt-knopf {
  font-weight: 700;
  font-size: 18px;
  line-height: 36px;
}

/* The export knows only 254 px (phone) and 400 px (from 900 px). On a tablet the
   image spans the full width, and 254 px cuts faces off, so it takes 400 px early. */
@media (min-width: 600px) {
  .story-img {
    height: 400px;
  }
  /* Our own values, not the export's 261 px: at this width that was a thin strip. */
  .hero-ort {
    height: 350px;
  }
}

@media (min-width: 900px) {
  .hero-ort {
    height: 500px;
  }
  .pad {
    padding-left: 80px;
    padding-right: 80px;
  }
  .sec {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .mob {
    display: none !important;
  }
  .dsk {
    display: flex !important;
  }
  .cols {
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
  }
  .cols > * {
    flex: 1;
    min-width: 0;
  }
  .rail {
    margin-right: 0;
    padding-right: 0;
  }
  .card,
  .card-g {
    flex: 0 0 calc((100% - 16px) / 2);
  }
  .card-b {
    flex: 0 0 calc((100% - 48px) / 4);
  }
  .h1 {
    font-size: 56px;
  }
  .h2 {
    font-size: 36px;
  }
  .story-img {
    height: 400px;
  }
  /* Figma Page 5, Frame „Start – Desktop" (#395, P1): the logo hangs from the
     top, nav, Login and pill stand on the baseline of „Golfplatz". The
     border-bottom counts into the 151 px, hence 31, not 32. */
  .hdr {
    height: 151px;
    padding-top: 53px;
    padding-bottom: 31px;
  }
  .hdr-marke {
    align-self: flex-start;
  }
  .hdr-marke img {
    width: 154px;
    height: 79px;
  }
  .hdr-unten {
    align-self: flex-end;
  }
  .hero-pad {
    padding: 60px 80px 80px;
  }
  /* After `.hero-pad`, which it overrides at the same specificity (P4). */
  .hero-start {
    min-height: 366px;
    padding-top: 70px;
    gap: 35px;
  }
  .foot-cols {
    flex-direction: row;
  }
  .foot-cols > * {
    flex: none;
  }
  .foot-col--seiten {
    width: 189px;
    padding-bottom: 0;
  }
  .foot-col--service,
  .foot-col--social {
    border-top: 0;
    border-left: 1px solid rgb(169, 189, 199);
  }
  .foot-col--service {
    box-sizing: content-box;
    width: 143px;
    padding: 0 0 0 47px;
  }
  .foot-col--social {
    width: auto;
    padding: 0 0 0 53px;
  }
  .foot-recht {
    margin-top: 58px;
  }
  /* Figma Page 5, Frame „Ort – Desktop" (#366) — the desktop half of the pairs
     declared above. */
  .ueberzeile {
    font-size: 18px;
  }
  .h-hero {
    font-size: 44px;
    line-height: 62px;
  }
  .h-intro {
    font-weight: 500;
    font-size: 36px;
    line-height: normal;
  }
  .intro-text {
    font-size: 24px;
    line-height: 32px;
  }
  /* Both selectors, not just the base one: the variant sits at the same
     specificity and would otherwise keep its mobile line-height by source
     order. */
  .h-abschnitt,
  .h-abschnitt--luft {
    font-size: 36px;
    line-height: normal;
  }
  .fliesstext {
    font-size: 20px;
    line-height: 26px;
  }
  .h-jobmatch {
    font-size: 44px;
    line-height: normal;
  }
  /* P12: the rows stand 36 px apart, which the line height alone carries —
     the 10 px of Page 4 would add to it. */
  .jobmatch-liste {
    font-size: 24px;
    line-height: 36px;
    gap: 0;
  }
  .jobmatch-knopf {
    font-size: 20px;
  }
  .jobmatch-aktion {
    margin-top: 69px;
  }
  .story-ueberzeile {
    position: relative;
    font-size: 18px;
    border-bottom-color: transparent;
  }
  /* P8: Figma's own 117-px line (`793:14894`), in place of the border. */
  .story-ueberzeile::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1.5px;
    width: 117px;
    height: 1.5px;
    background: rgb(0, 69, 135);
  }
  .story-zitat {
    font-size: 36px;
    line-height: normal;
  }
  .story-zitat--mobil-ungetrennt {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .story-name {
    font-size: 18px;
    line-height: normal;
  }
  .h-kontakt {
    font-weight: 700;
    line-height: normal;
  }
  .kontakt-text {
    font-size: 18px;
    line-height: 28px;
  }
  .kontakt-knopf {
    font-size: 20px;
  }
  .h-start {
    font-size: 60px;
    line-height: 62px;
  }
  .start-text {
    font-size: 24px;
    line-height: 32px;
    max-width: 621px;
  }
  .h-band {
    font-size: 44px;
    line-height: normal;
  }
  .band-text {
    font-size: 24px;
    line-height: 36px;
  }
  .band-knopf {
    font-size: 20px;
  }
  .faq-item summary {
    font-size: 20px;
    line-height: normal;
  }
  .faq-item > p {
    font-size: 18px;
    line-height: 22px;
  }
  /* „Dein Quereinstieg", Frame `999:3373` (Q2, Q3): a 484-px hero whose photo
     takes 628 of 1280 px, and below it the quote on its own surface, which
     reaches 36 px up into the hero. Hero z 1, quote z 2: the surface covers
     the photo, not the other way round. */
  .hero-quer {
    position: relative;
    z-index: 1;
    min-height: 484px;
  }
  .hero-quer > .hero-quer-bild {
    flex: 0 0 49.0625%;
    align-self: stretch;
  }
  /* P11 (#409): Figma's band is 292 px tall (`848:1098`), padded 33 px above
     the heading box and 41 px below the button — our content measures 1 px
     less than its 218, which the `min-height` carries. After `.sec`, whose
     60 px it overrides at the same specificity, for this band alone. The
     arrow's `top` is a fraction of this height and rides along. */
  .jobmatch-band {
    min-height: 292px;
    padding-top: 33px;
    padding-bottom: 41px;
  }
  /* Figma's panel is 386 px tall (`848:602`), the heading box 51 px below its
     top, the button 53 px above its bottom. Our text is shorter than Page 5's
     placeholder, so `space-between` keeps the button down there instead of
     leaving the gap below it. After `.sec`, whose 60 px it overrides at the
     same specificity. */
  .einstieg-band {
    min-height: 386px;
    padding-top: 51px;
    padding-bottom: 53px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /* Ellipse `848:1103`: 564 px, centred on the panel, 58 px above its top;
     the panel's `overflow: hidden` cuts it at both edges. */
  .einstieg-ball {
    left: calc(50% - 282px);
    top: -58px;
    width: 564px;
    height: 564px;
  }
  /* After `.sec`, which it overrides at the same specificity. */
  .zitat-quer {
    min-height: 301px;
    padding-top: 16px;
    padding-bottom: 46px;
  }
  .cols > .zitat-quer__text {
    position: relative;
    z-index: 2;
    flex: 0 1 544px;
    margin-right: 17.5%;
  }
  .zitat-quer__text::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -92px;
    top: -52px;
    bottom: -28px;
    width: 731px;
    min-height: 291px;
    background: rgb(241, 241, 236);
  }
  /* P16, P19 and P20: no blue left up here. Figma gives the two strips of the
     Startseite different greys, so the Arbeitsorte one is the default and the
     „5 guten Gründe" override it — same specificity, order decides. */
  .dots > span[data-active],
  .dots > button[data-active] {
    background: rgb(83, 83, 83);
  }
  .dots-gruende > span[data-active] {
    background: rgb(123, 122, 105);
  }
  /* The blank line of P22 is one line of the text below it, no more. */
  .grund-titel {
    margin-bottom: 18px;
  }
  .grund-text {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  .card,
  .card-g {
    flex: 0 0 calc((100% - 32px) / 3);
  }
  .card-b {
    flex: 0 0 calc((100% - 80px) / 6);
  }
}