/* seite.css -- the new michel-dl.de, after Joe's mockup "B · Klar & barrierearm"
   (mockup/michel-redesign/). One file, no framework.

   Phone first. Two steps up, both as CONTAINER queries on .seite, not media
   queries: `mittel` from 760 px, `gross` from 1180 px (the mockup's desktop is
   1280), and the full header on its own from 1220, later for Turkish and
   Russian (at the end). Container queries follow the width of the page box, so a picture
   taken through `zoom` (tools/ansehen.mjs, qlmanage) shows the real layout;
   media queries would read qlmanage's fixed 1024 px window instead. A browser
   without container queries keeps the phone layout, which works everywhere.

   Tokens are the mockup's (HANDOFF.md). No text below 15 px. */

/* Fonts from npm @fontsource, licences (OFL) in schrift/. Atkinson Hyperlegible
   Next for German and Turkish: the first Atkinson has no İ, and Turkish needs
   latin-ext (ş ğ ı İ). No Atkinson has Cyrillic, so Russian text is set in Noto
   Sans as a whole (:lang(ru) below), Latin and Cyrillic from one family. The
   browser fetches a file only when a character of its unicode-range is shown. */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../schrift/atkinson-hyperlegible-next-latin-400-normal.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: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../schrift/atkinson-hyperlegible-next-latin-700-normal.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: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../schrift/atkinson-hyperlegible-next-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../schrift/atkinson-hyperlegible-next-latin-ext-700-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../schrift/noto-sans-latin-400-normal.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: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../schrift/noto-sans-latin-700-normal.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: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../schrift/noto-sans-cyrillic-400-normal.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../schrift/noto-sans-cyrillic-700-normal.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    --primaer: #14315C;
    --primaer-dunkel: #0B1F3D;
    --gelb: #FCEFC2;
    --gelb-label: #6B4E00;
    --gelb-text: #3D3000;
    --flaeche: #F3F6FA;
    --bildflaeche: #E5EAF1;
    --text: #111827;
    --text-2: #374151;
    --text-3: #4B5563;
    --linie: #E5E7EB;
    --linie-stark: #D1D5DB;
    --fuss-text: #DCE6F2;
    --fuss-linie: #2B4A77;
    --fehler: #B91C1C;
    --schrift: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: var(--text); font-family: var(--schrift); font-size: 18px; line-height: 1.5; }
:lang(ru) { font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primaer); }
a:hover { color: var(--primaer-dunkel); }
/* A heading word longer than the column gets a soft hyphen in the content
   (­, as the legal pages always had). At 360 px "Alltagsunterstützung",
   "Datenschutzerklärung" and "конфиденциальности" ran past the right edge and
   the page scrolled sideways. overflow-wrap is the net for the next such word:
   it breaks only a word that fits no line on its own. NOT hyphens:auto, it
   hyphenates headings that fit well ("Michel arbei-/ten?" on the desktop). */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
b, strong { font-weight: 700; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--primaer); outline-offset: 3px; border-radius: 4px; }
.fuss :focus-visible, .telefonkarte:focus-visible, .video :focus-visible { outline-color: #FFFFFF; }

.sprung { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 12px 18px; background: #FFFFFF; color: var(--primaer); font-weight: 700; border: 2px solid var(--primaer); border-radius: 10px; }
.sprung:focus { left: 12px; }

.seite { container: seite / inline-size; }
.seite > * { --rand: 16px; }

.innen { width: 100%; max-width: calc(1136px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.abschnitt { padding-top: 44px; }
.abschnitt-mittel { padding-top: 32px; }
.abschnitt-klein { padding-top: 28px; }
.abschnitt-oben { padding-top: 28px; }
.abschnitt-karte { padding-top: 44px; }

/* An open point: something Michel still has to answer. Visible on purpose. */
.offen { background: #FFF7D1; color: #3D3000; border: 1px dashed #92400E; border-radius: 4px; padding: 0 4px; font-weight: 400; }
.platzhalter.offen { display: flex; align-items: center; justify-content: center; padding: 24px; background: transparent; border: 2px dashed var(--linie-stark); border-radius: 16px; color: var(--text-3); font-size: 17px; text-align: center; }
.platzhalter--hoch { min-height: 220px; }

/* ---------- Type ---------- */

.dachzeile { font-size: 16px; font-weight: 700; color: var(--primaer); }
.dachzeile--gelb { color: var(--gelb-label); }

.titel-start { font-size: 36px; line-height: 1.12; max-width: 980px; }
.titel-seite { font-size: 34px; line-height: 1.12; }
.titel-1 { font-size: 28px; }
.titel-2 { font-size: 26px; line-height: 1.2; }
.titel-3 { font-size: 24px; }
.held-text { font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 860px; }
.held--gelb .held-text { color: var(--gelb-text); }
.fliess { font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 720px; }
.fliess--gelb { color: var(--gelb-text); }
.fliess--gross { font-size: 19px; line-height: 1.6; }
.stand { font-size: 15px; color: var(--text-3); }
.mehr-link { font-size: 18px; font-weight: 700; padding-top: 8px; }

/* ---------- Buttons ---------- */

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 16px 24px; border: 2px solid transparent; border-radius: 12px; font-size: 19px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; }
.knopf--voll { background: var(--primaer); border-color: var(--primaer); color: #FFFFFF; }
.knopf--voll:hover { background: var(--primaer-dunkel); border-color: var(--primaer-dunkel); color: #FFFFFF; }
.knopf--rand { background: #FFFFFF; border-color: var(--primaer); color: var(--primaer); }
.knopf--rand:hover { background: var(--flaeche); }
.knopf--gross { padding: 18px; font-size: 20px; border-radius: 14px; }
.knopf--breit { display: flex; width: 100%; }
.knopf--start { align-self: flex-start; }
.knopf--weiss { background: #FFFFFF; color: var(--primaer); border-radius: 14px; }
.knopf--weiss:hover { background: var(--flaeche); color: var(--primaer-dunkel); }
.knopf--telefon { padding: 22px 36px; font-size: 30px; }
.knopf--einzel { padding: 22px 36px; font-size: 24px; }
.knopf--weissrand { border-color: #FFFFFF; color: #FFFFFF; border-radius: 14px; }
.knopf--weissrand:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.knopf--absenden { width: 100%; min-height: 58px; font-size: 20px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.knopfreihe > .knopf { flex: 1 1 auto; }
.knopfreihe--mitte { justify-content: center; }

.rundknopf { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--text); border-radius: 12px; background: #FFFFFF; color: var(--text); }
.rundknopf--voll { background: var(--primaer); border-color: var(--primaer); color: #FFFFFF; }
.rundknopf--voll:hover { color: #FFFFFF; background: var(--primaer-dunkel); }

.icon { flex-shrink: 0; }

/* ---------- Header ---------- */

.kopf { position: relative; z-index: 20; background: #FFFFFF; border-bottom: 2px solid var(--linie); }
.kopf-leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; margin-inline: auto; padding: 14px var(--rand); }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.marke:hover { color: var(--text); }
.marke-logo { display: block; width: auto; height: 44px; }
.marke-unter { display: none; }
.haupt-nav, .kopf-telefon { display: none; }
.kopf-knoepfe { display: flex; gap: 8px; }

.menue { display: none; }
.js .kopf.menue-offen .menue { display: flex; }
.menue { position: absolute; top: 100%; left: 0; right: 0; min-height: calc(100vh - 78px); flex-direction: column; padding: 16px var(--rand) 32px; background: #FFFFFF; }
.menue ul { padding: 0; list-style: none; }
.menue a:not(.knopf) { display: block; padding: 18px 4px; border-bottom: 1px solid var(--linie); color: var(--text); font-size: 24px; font-weight: 700; text-decoration: none; }
.menue a[aria-current="page"] { color: var(--primaer); }
.menue .knopf { margin-top: 24px; font-size: 22px; }
/* Without script the menu cannot open, so it simply stands under the header. */
.no-js .menue-knopf { display: none; }
.no-js .menue { display: flex; position: static; min-height: 0; }
.no-js .menue a:not(.knopf) { padding: 10px 4px; font-size: 19px; }

/* Language choice. Phones and tablets: one line of small grey text at the foot
   of the menu, each language in its own name and script, the current one in
   blue, the same voice as the desktop row. Joe asked twice on 28.09. for it
   to be less conspicuous: first the 19 px underlined links, then four framed
   fields with the current one filled, which read as a second button under
   the call button. The links stay 44 px tall for the thumb.
   Desktop: in the footer bar, after the legal links, and nowhere in the
   header. A row of its own above the bar (DE · TR · RU · EN) made the header
   35 of 113 px taller (Joe 28.09.: "unangenehm groß"), and inside the bar
   there is no room: in Turkish 26 px stay free between menu and phone.
   The phone menu keeps its line, so no view leans on the footer alone. */
.menue-sprachen ul { display: flex; padding: 0; margin: 0; list-style: none; }
.menue-sprachen { margin-top: 16px; }
.menue-sprachen ul { flex-wrap: wrap; }
.menue-sprachen li { display: flex; align-items: center; }
.menue-sprachen li + li::before { content: '·'; color: var(--text-3); }
.menue .menue-sprachen a:not(.knopf) { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-bottom: 0; color: var(--text-3); font-size: 15px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.menue .menue-sprachen li:first-child a { padding-left: 4px; }
.menue .menue-sprachen a[aria-current] { color: var(--primaer); font-weight: 700; }

/* ---------- Hero ---------- */

.held { background: var(--flaeche); }
.held--gelb { background: var(--gelb); }
.held-innen { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; padding-bottom: 36px; }
.held-zwei { display: grid; gap: 24px; }
.held-links { display: flex; flex-direction: column; gap: 16px; }
.held-bild img { width: 100%; height: 260px; object-fit: cover; object-position: center 30%; border-radius: 20px; background: var(--bildflaeche); }

/* ---------- Start: the three ways ---------- */

.wege-titel { font-size: 18px; margin-top: 12px; }
.wege { display: flex; flex-direction: column; gap: 10px; }
.weg { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titel pfeil" "text pfeil"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 18px; background: #FFFFFF; border: 2px solid var(--primaer); border-radius: 14px; color: var(--text); text-decoration: none; }
.weg:hover { color: var(--text); background: #FAFBFD; }
.weg--grau { border-color: var(--linie-stark); }
.weg-bild, .weg-mehr { display: none; }
.weg-bild { color: var(--primaer); }
.weg--grau .weg-bild, .weg--grau .weg-pfeil, .weg--grau .weg-mehr { color: var(--text-2); }
.weg-titel { grid-area: titel; font-size: 20px; font-weight: 700; line-height: 1.25; }
.weg-text { grid-area: text; font-size: 16px; color: var(--text-2); }
.weg-pfeil { grid-area: pfeil; display: flex; color: var(--primaer); }
.weg-mehr { font-size: 19px; font-weight: 700; color: var(--primaer); }

/* ---------- Yellow block, the 131 € ---------- */

.gelbblock { background: var(--gelb); border-radius: 20px; padding: 28px 20px; }
.zuschuss { display: flex; flex-direction: column; gap: 14px; }
.zuschuss-betrag { display: flex; flex-direction: column; gap: 6px; }
.zuschuss-rest { display: flex; flex-direction: column; gap: 16px; }
.riesig { font-size: 76px; font-weight: 700; line-height: 1; color: var(--primaer); letter-spacing: -2px; white-space: nowrap; }
.zuschuss-unter { font-size: 19px; font-weight: 700; }

.haken { display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.45; }
.haken li { display: flex; gap: 10px; }
.icon-haken { width: 22px; height: 22px; margin-top: 1px; color: var(--primaer); }

/* ---------- Tiles ---------- */

.kacheln { display: grid; gap: 12px; }
.kachel { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 14px; background: var(--flaeche); }
.kachel-titel { font-size: 20px; }
.kachel p { font-size: 17px; line-height: 1.45; color: var(--text-2); }
.kacheln--rand .kachel { background: #FFFFFF; border: 2px solid var(--linie); }
.kacheln--rand .kachel p { color: var(--text); line-height: 1.5; }
.kachel-frage { font-size: 26px; color: var(--primaer); }
.titel-1 + .kacheln, .titel-2 + .kacheln, .titel-2 + .stellen { margin-top: 14px; }

.hinweisband { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 2px solid var(--linie); border-radius: 14px; }
.hinweisband p { font-size: 17px; line-height: 1.45; }
.icon-orden { width: 34px; height: 34px; color: var(--primaer); }
.hinweisband-mehr { flex-shrink: 0; font-size: 19px; font-weight: 700; }

.zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 36px; }
.zahl { display: flex; flex-direction: column; gap: 2px; }
.zahl-wert { font-size: 40px; font-weight: 700; color: var(--primaer); line-height: 1.2; }
.zahl-text { font-size: 16px; color: var(--text-2); }
.zahl-wort { font-size: 0.6em; }

/* Google reviews, fixed on the page (Ticket 5704: no widget, nothing loads from elsewhere). */
.sterne { display: flex; gap: 2px; color: #B45309; }
.icon-stern { width: 22px; height: 22px; }
.zahl-wert.sterne { gap: 4px; padding-block: 6px; }
.zahl-wert.sterne .icon-stern { width: 36px; height: 36px; }
.bewertungen .kachel { gap: 12px; background: #FFFFFF; border: 2px solid var(--linie); }
.bewertung-text { flex-grow: 1; }
.kachel .bewertung-text p { font-size: 18px; line-height: 1.5; color: var(--text); }
.kachel .bewertung-mehr { font-size: 16px; }
.kachel .bewertung-quelle { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text-3); }
.kachel .bewertung-quelle b { color: var(--text); }
/* Initials instead of the reviewer's Google profile photo: nothing is loaded from Google. */
.bewertung-initialen { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--flaeche); color: var(--primaer); font-weight: 700; font-size: 16px; line-height: 1; }
/* UWG § 5b (3): how the reviews got here and that they are not checked. */
.bewertung-hinweis { max-width: 64ch; margin-inline: auto; padding-top: 16px; font-size: 15px; line-height: 1.5;
    color: var(--text-3); text-align: center; }
.bewertungen + .knopfreihe, .bewertung-hinweis + .knopfreihe { padding-top: 20px; }

/* ---------- Leistungen ---------- */

.sprungmarken { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sprungmarken a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: #FFFFFF; border: 2px solid var(--primaer); font-size: 17px; font-weight: 700; text-decoration: none; }
.sprungmarken a:hover { background: var(--flaeche); }

.bildreihe { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }
.bildreihe-bild, .persoenlich-bild { position: relative; }
.bildreihe-bild { order: -1; }
.bild-offen { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; padding: 4px 10px; font-size: 15px; }
.bildreihe-bild img { width: 100%; height: 220px; object-fit: cover; border-radius: 16px; background: var(--bildflaeche); }
.bildreihe-text { display: flex; flex-direction: column; gap: 16px; }
.liste > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--linie); }
.liste > div:last-child { border-bottom: 1px solid var(--linie); }
.liste dt { font-size: 19px; font-weight: 700; line-height: 1.2; }
.liste dd { font-size: 17px; line-height: 1.4; color: var(--text-2); }

.flaechenblock { background: var(--flaeche); border-radius: 20px; padding: 24px 20px; }
.beratung { display: flex; flex-direction: column; gap: 24px; }
.beratung-kopf { display: flex; flex-direction: column; gap: 18px; }
.beratung-text { display: flex; flex-direction: column; gap: 10px; }
.grade { display: grid; gap: 12px; }
.grad { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: #FFFFFF; border-radius: 16px; line-height: 1.2; }
.grad-name { font-size: 16px; font-weight: 700; color: var(--text-3); }
.grad-wert { font-size: 24px; font-weight: 700; }
.grad-text { font-size: 17px; line-height: 1.4; color: var(--text-2); }

/* ---------- Pflegezuschuss ---------- */

.betragkarte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px; background: #FFFFFF; border-radius: 18px; }
.betragkarte-label { font-size: 16px; font-weight: 700; color: var(--text-3); }
.betragkarte .riesig { font-size: 72px; }
.betragkarte-unter { font-size: 18px; font-weight: 700; }
.betragkarte-jahr { font-size: 16px; color: var(--text-2); }

.guthaben { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.guthaben-text { display: flex; flex-direction: column; gap: 16px; }
.rechner { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #FFFFFF; border-radius: 16px; }
.rechner-frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.rechner-legende { padding: 0; margin-bottom: 12px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.rechner-knoepfe { display: grid; grid-template-columns: repeat(var(--spalten-klein, 3), minmax(0, 1fr)); gap: 8px; }
.rechner-knopf { height: 52px; padding: 0; border: 2px solid var(--primaer); border-radius: 10px; background: #FFFFFF; color: var(--primaer); font-size: 20px; font-weight: 700; }
.rechner-knopf:hover { background: var(--flaeche); }
.rechner-knopf[aria-pressed="true"] { background: var(--primaer); color: #FFFFFF; }
.rechner-ergebnis { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 2px solid var(--linie); }
.rechner-ergebnis-label { font-size: 16px; color: var(--text-2); }
.rechner-summe { font-size: 52px; font-weight: 700; line-height: 1.05; color: var(--primaer); }
.rechner-teile { font-size: 16px; color: var(--text-2); }
.rechner-teile:empty { display: none; }
.rechner-hinweis { font-size: 15px; color: var(--text-3); line-height: 1.4; }

.schritte { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.schritt { display: flex; gap: 14px; }
.schritt-nr { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--primaer); color: #FFFFFF; font-size: 20px; font-weight: 700; }
.schritt > div { display: flex; flex-direction: column; gap: 2px; }
.schritt-titel { font-size: 20px; }
.schritt p { font-size: 17px; line-height: 1.45; color: var(--text-2); }

/* ---------- Über uns ---------- */

.spalten-3 { display: grid; gap: 28px; }
.fakt { display: flex; flex-direction: column; gap: 8px; }
.fakt-wert { font-size: 36px; font-weight: 700; color: var(--primaer); line-height: 1.15; }
.fakt p:not(.fakt-wert) { font-size: 17px; line-height: 1.55; color: var(--text-2); }

.persoenlich { display: flex; flex-direction: column; gap: 20px; }
.persoenlich-bild img { width: 100%; height: 320px; object-fit: cover; object-position: center 20%; border-radius: 20px; background: var(--bildflaeche); }
.persoenlich-text { display: flex; flex-direction: column; gap: 14px; }
.zitat p { font-size: 22px; line-height: 1.4; }
.zitat-quelle { font-size: 16px; color: var(--text-3); }

.tagwerk { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 16px; }
.tagwerk-text { display: flex; flex-direction: column; gap: 14px; }
.preiskarte { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border-radius: 16px; }
.preiskarte-titel { font-size: 20px; }
.preiskarte p { font-size: 17px; line-height: 1.55; color: var(--text-2); }
/* Pictures of the meetup: one wide over two on phones, three in a row above */
.tagwerk-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tagwerk-bild { position: relative; margin: 0; }
.tagwerk-bild:first-child { grid-column: 1 / -1; }
.tagwerk-bild img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; }
.tagwerk-bild:first-child img { aspect-ratio: 3 / 2; }

/* ---------- Jobs ---------- */

.video { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 230px; padding: 24px; overflow: hidden; border-radius: 20px; background: #1F2A3A; color: #FFFFFF; text-align: center; }
.video-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); opacity: 0.5; }
.video-knopf { position: relative; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 0 0 0 4px; border: 0; border-radius: 999px; background: #FFFFFF; color: var(--primaer); }
.video-knopf:hover { background: var(--flaeche); }
.video-hinweis { position: relative; font-size: 15px; line-height: 1.4; max-width: 320px; }
.video-hinweis a { color: #FFFFFF; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.stellen { display: flex; flex-direction: column; gap: 14px; }
.stellen-zeile { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 2px solid var(--linie); border-radius: 14px; color: var(--text); text-decoration: none; }
.stellen-zeile:hover { border-color: var(--primaer); color: var(--text); }
.stellen-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.stellen-titel { font-size: 20px; font-weight: 700; }
.stellen-meta { font-size: 16px; color: var(--text-3); }
.stellen-mehr { font-size: 17px; font-weight: 700; color: var(--primaer); }

/* ---------- Stelle ---------- */

.zurueck { align-self: flex-start; font-size: 17px; font-weight: 700; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 8px 16px; border-radius: 999px; background: #FFFFFF; border: 2px solid var(--linie-stark); font-size: 16px; font-weight: 700; }
.stelle { display: flex; flex-direction: column; gap: 36px; }
.stelle-text { display: flex; flex-direction: column; gap: 32px; }
.stelle-block { display: flex; flex-direction: column; gap: 14px; }
.haken--dunkel { color: var(--text); }
.fragenkasten { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 16px; background: var(--flaeche); }
.fragenkasten-titel { font-size: 17px; font-weight: 700; }
.schritte + .fragenkasten { margin-top: 28px; }
.fragenkasten p:not(.fragenkasten-titel) { font-size: 17px; color: var(--text-2); }

/* ---------- Forms ---------- */

.formular { display: flex; flex-direction: column; gap: 16px; }
.formular--rand { padding: 20px; border: 2px solid var(--primaer); border-radius: 16px; scroll-margin-top: 16px; }
.formular-titel { font-size: 26px; }
.formular-unter, .formular-pflicht { font-size: 16px; color: var(--text-3); }
.formular-raster { display: grid; gap: 16px; }
.feld { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.feld label, .feld legend { font-size: 17px; font-weight: 700; }
.feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .feld textarea { width: 100%; height: 58px; padding: 0 14px; border: 2px solid var(--linie-stark); border-radius: 10px; background: #FFFFFF; font-size: 18px; }
.feld textarea { height: auto; padding: 14px; line-height: 1.2; resize: vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--primaer); }
.feld [aria-invalid="true"] { border-color: var(--fehler) !important; }
.feld-fehler { font-size: 16px; font-weight: 700; color: var(--fehler); }
.feld-hinweis { font-size: 16px; color: var(--text-3); margin-top: -6px; }
.feld--haken { flex-direction: row; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.feld--haken input { width: 24px; height: 24px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primaer); }
.feld--haken label { flex: 1; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-2); }
.feld--haken .feld-fehler { flex-basis: 100%; }
.feld--gruppe legend { padding: 0; margin-bottom: 6px; }
.wahl { display: flex; gap: 20px; font-size: 18px; }
.wahl label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; }
.wahl input { width: 22px; height: 22px; margin: 0; accent-color: var(--primaer); }
.datei-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; }
.datei-feld { display: flex; align-items: center; justify-content: center; min-height: 64px; margin-top: 6px; padding: 8px 14px; border: 2px dashed var(--linie-stark); border-radius: 10px; font-size: 17px; font-weight: 400; color: var(--text-3); text-align: center; cursor: pointer; }
.datei-eingabe:focus-visible + label .datei-feld { outline: 3px solid var(--primaer); outline-offset: 3px; }
.formular-klein { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.formular-meldung { font-size: 17px; font-weight: 700; }
.formular-meldung:empty { display: none; }
.formular-meldung.ist-fehler { color: var(--fehler); }

/* ---------- Kontakt ---------- */

.kontakt { display: flex; flex-direction: column; gap: 36px; }
.kontakt-info { display: flex; flex-direction: column; gap: 16px; }
.kontakt-kopf { display: flex; flex-direction: column; gap: 14px; }
.telefonkarte { display: flex; flex-direction: column; gap: 2px; padding: 22px; border-radius: 16px; background: var(--primaer); color: #FFFFFF; text-decoration: none; }
.telefonkarte:hover { background: var(--primaer-dunkel); color: #FFFFFF; }
.telefonkarte-label { font-size: 16px; color: var(--fuss-text); }
.telefonkarte-nummer { font-size: 32px; font-weight: 700; line-height: 1.2; }
.kontakt-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kontakt-weg { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 2px solid var(--linie); border-radius: 14px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.kontakt-weg-label { font-size: 16px; font-weight: 700; }
.kontakt-weg-wert { font-size: 15px; font-weight: 700; color: var(--primaer); }
.zeiten { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--flaeche); font-size: 17px; }
.zeiten-titel { font-size: 19px; }
.zeiten dl { display: flex; flex-direction: column; gap: 8px; }
.zeiten dl > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #D9DFE8; }
.zeiten dd { text-align: right; }
.zeiten .zeiten-zu { padding-bottom: 0; border-bottom: 0; color: var(--text-3); }
.zeiten-trenner { display: block; height: 0; overflow: hidden; }
.formular--flaeche { padding-top: 8px; }

.karte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 260px; padding: 24px; overflow: hidden; border-radius: 20px; background: var(--bildflaeche); text-align: center; }
.karte-text { font-size: 16px; color: var(--text-2); max-width: 520px; }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Legal text ---------- */

.rechtstext { max-width: 800px; font-size: 17px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.rechtstext > .offen { display: block; margin-bottom: 24px; padding: 12px 16px; }
.rechtstext h2 { margin: 40px 0 12px; font-size: 26px; color: var(--text); }
.rechtstext h3 { margin: 28px 0 8px; font-size: 21px; color: var(--text); }
.rechtstext h4 { margin: 20px 0 6px; font-size: 19px; color: var(--text); }
.rechtstext p { margin: 0 0 12px; }
.rechtstext ul { margin: 0 0 12px; padding-left: 24px; }

/* ---------- Footer ---------- */

.fuss { margin-top: 44px; background: var(--primaer); color: #FFFFFF; }
.fuss a { color: #FFFFFF; }
.fuss-cta { display: flex; flex-direction: column; gap: 16px; padding-top: 36px; padding-bottom: 36px; }
.fuss-cta-text { display: flex; flex-direction: column; gap: 12px; }
.fuss-titel { font-size: 30px; line-height: 1.15; }
.fuss-text, .fuss-zeiten { font-size: 18px; color: var(--fuss-text); }
.fuss-knoepfe { display: flex; flex-direction: column; gap: 12px; }
.fuss .knopf--weiss { color: var(--primaer); }
.fuss-leiste { display: flex; flex-direction: column; gap: 12px; max-width: 1280px; margin-inline: auto; padding: 24px var(--rand) 112px; border-top: 1px solid var(--fuss-linie); font-size: 15px; line-height: 1.6; color: var(--fuss-text); }
.fuss-navi { display: flex; flex-direction: column; }
.fuss-links { display: flex; flex-wrap: wrap; }
.fuss-links a { display: inline-block; padding: 6px 0; }
.fuss-links li + li::before { content: "·"; content: "·" / ""; margin-inline: 10px; }
.fuss-sprachen a[aria-current] { font-weight: 700; }

/* ---------- Floating call bar, phones only ---------- */

.anrufleiste { display: none; }
@media (max-width: 759.98px) {
    .anrufleiste { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; padding: 8px; background: #FFFFFF; border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
    .anrufleiste .knopf { flex: 1; min-height: 56px; padding: 8px 16px; }
    body.menue-offen .anrufleiste { display: none; }
}

/* ---------- Visibility by width ---------- */

@container seite (max-width: 759.98px) {
    .klein-weg { display: none !important; }
    /* The start page: the three ways whole above the call bar on a 390 x 664 Safari. */
    .held:first-child .held-innen:has(.titel-start) { padding-top: 24px; }
    .weg { padding: 14px 18px; }
}
@container seite (min-width: 760px) {
    .nur-klein { display: none !important; }
}

/* =====================================================================
   mittel: from 760 px
   ===================================================================== */
@container seite (min-width: 760px) {
    .seite > * { --rand: 40px; }

    .abschnitt { padding-top: 64px; }
    .abschnitt-mittel { padding-top: 56px; }
    .abschnitt-klein { padding-top: 56px; }
    .abschnitt-oben { padding-top: 56px; }
    .abschnitt-karte { padding-top: 56px; }

    .dachzeile { font-size: 18px; }
    .titel-start { font-size: 48px; line-height: 1.1; }
    .titel-seite { font-size: 44px; line-height: 1.1; }
    .titel-1 { font-size: 36px; }
    .titel-2 { font-size: 32px; }
    .titel-3 { font-size: 28px; }
    .held-text { font-size: 21px; }
    .fliess { font-size: 19px; }
    .fliess--gross { font-size: 20px; }

    .kopf-leiste { padding-block: 18px; }
    .marke { gap: 14px; }
    .marke-logo { height: 52px; }
    .menue { min-height: calc(100vh - 88px); }

    .held-innen { gap: 20px; padding-top: 56px; padding-bottom: 56px; }
    .held-zwei { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: center; }
    .held-links { grid-column: span 7; gap: 20px; }
    .held-zwei > :last-child { grid-column: span 5; }
    .held-bild img { height: 320px; }

    .wege-titel { font-size: 20px; margin-top: 20px; }
    .wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .wege > li { display: flex; }
    .weg { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 24px; border-radius: 16px; }
    .weg-bild, .weg-mehr { display: flex; }
    .weg-mehr { display: block; }
    .weg-pfeil { display: none; }
    .weg-titel { font-size: 22px; line-height: 1.2; }
    .weg-text { font-size: 18px; line-height: 1.2; }

    .gelbblock { border-radius: 24px; padding: 40px; }
    .zuschuss { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
    .zuschuss-betrag { grid-column: span 5; }
    .zuschuss-rest { grid-column: span 7; gap: 18px; }
    .riesig { font-size: 92px; letter-spacing: -3px; }
    .zuschuss-unter { font-size: 20px; }
    .haken { gap: 12px; font-size: 19px; }
    .haken li { gap: 12px; }
    .icon-haken { width: 26px; height: 26px; margin-top: 0; }
    .knopfreihe > .knopf { flex: 0 1 auto; }

    .kacheln { gap: 16px; }
    .kacheln--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kachel { gap: 12px; padding: 24px; border-radius: 16px; }
    .kachel-titel { font-size: 22px; }
    .kachel p { font-size: 18px; line-height: 1.5; }
    .kachel-frage { font-size: 32px; }
    .titel-1 + .kacheln, .titel-2 + .kacheln, .titel-2 + .stellen { margin-top: 24px; }

    .hinweisband { align-items: center; gap: 24px; padding: 28px 32px; border-radius: 16px; }
    .hinweisband p { font-size: 19px; }
    .icon-orden { width: 44px; height: 44px; }

    .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 64px; }
    .zahl-wert { font-size: 48px; }
    .zahl-text { font-size: 18px; }

    .bildreihe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
    .bildreihe-bild { order: 0; grid-column: span 5; }
    .bildreihe-text { grid-column: span 7; gap: 20px; }
    .bildreihe-bild img { height: 280px; border-radius: 20px; }
    .liste > div { padding: 16px 0; }
    .liste dt { font-size: 20px; }
    .liste dd { font-size: 18px; }

    .flaechenblock { border-radius: 24px; padding: 40px; }
    .beratung { gap: 28px; }
    .beratung-kopf > .knopf { align-self: flex-start; }
    /* One equal column per card, however many there are: the firm went from
       three cards to two (D1 v35) and repeat(3) left a third empty (5704). */
    .grade { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
    .grad { padding: 24px; gap: 8px; }
    .grad-name { font-size: 17px; }

    .betragkarte { padding: 32px; border-radius: 24px; gap: 8px; }
    .betragkarte .riesig { font-size: 88px; }
    .guthaben { gap: 28px; }
    .guthaben-text { gap: 18px; }
    .rechner { gap: 20px; padding: 28px; border-radius: 20px; }
    .rechner-knoepfe { grid-template-columns: repeat(var(--spalten, 9), minmax(0, 1fr)); }
    .rechner-legende { font-size: 21px; }
    .rechner-ergebnis-label { font-size: 18px; }
    .rechner-summe { font-size: 64px; }

    .schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
    .schritt { flex-direction: column; gap: 12px; padding-top: 20px; border-top: 4px solid var(--primaer); }
    .schritt-nr { width: auto; height: auto; justify-content: flex-start; background: none; color: var(--primaer); font-size: 44px; line-height: 1.1; }
    .schritt > div { gap: 12px; }
    .schritt-titel { font-size: 24px; }
    .schritt p { font-size: 19px; line-height: 1.5; }

    .spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .fakt { gap: 14px; }
    .fakt-wert { font-size: 44px; }
    .fakt p:not(.fakt-wert) { font-size: 18px; }

    .persoenlich { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: center; }
    .persoenlich-bild { grid-column: span 4; }
    .persoenlich-text { grid-column: span 8; gap: 16px; }
    .persoenlich-bild img { height: 360px; }
    .zitat p { font-size: 26px; }
    .zitat-quelle { font-size: 18px; }

    .tagwerk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
    .tagwerk-text { grid-column: span 7; gap: 18px; }
    .preiskarte { grid-column: span 5; padding: 28px; border-radius: 20px; gap: 14px; }
    .preiskarte-titel { font-size: 22px; }
    .tagwerk-bilder { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .tagwerk-bild:first-child { grid-column: auto; }
    .tagwerk-bild img, .tagwerk-bild:first-child img { aspect-ratio: 4 / 3; border-radius: 16px; }

    .video { min-height: 300px; }
    .video-hinweis { font-size: 16px; }

    .stellen-zeile { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; border-radius: 16px; }
    .stellen-titel { font-size: 22px; }
    .stellen-meta { font-size: 18px; }
    .stellen-mehr { flex-shrink: 0; font-size: 19px; }

    .chips li { padding: 10px 18px; font-size: 18px; }
    .fragenkasten p:not(.fragenkasten-titel) { font-size: 19px; }
    .fragenkasten-titel { font-size: 18px; }

    .formular { gap: 18px; }
    .formular--rand { padding: 32px; border-radius: 20px; }
    .formular--flaeche { padding: 36px; border-radius: 20px; background: var(--flaeche); }
    .formular-titel { font-size: 28px; }
    .formular-unter, .formular-pflicht { font-size: 17px; }
    .formular-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feld--haken label { font-size: 16px; }

    .telefonkarte { padding: 28px; gap: 4px; }
    .telefonkarte-label { font-size: 18px; }
    .telefonkarte-nummer { font-size: 38px; }
    .karte { min-height: 320px; }
    .karte-text { font-size: 17px; }

    .rechtstext { font-size: 19px; }
    .rechtstext h2 { font-size: 30px; }
    .rechtstext h3 { font-size: 23px; }

    .fuss { margin-top: 72px; }
    .fuss-cta { flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
    .fuss-titel { font-size: 36px; }
    .fuss-text { font-size: 20px; }
    .fuss-knoepfe { flex-shrink: 0; }
    .fuss-leiste { padding-bottom: 24px; font-size: 16px; }
    .fuss-navi, .fuss-links { flex-direction: row; flex-wrap: wrap; gap: 4px 24px; }
    .fuss-links li + li::before { content: none; }
    .fuss-sprachen { flex-basis: 100%; }
}

/* =====================================================================
   gross: from 1180 px, the mockup's desktop (1280)
   ===================================================================== */
@container seite (min-width: 1180px) {
    .seite > * { --rand: 72px; }

    .abschnitt { padding-top: 88px; }
    .abschnitt-mittel { padding-top: 80px; }
    .abschnitt-klein { padding-top: 72px; }
    .abschnitt-oben { padding-top: 72px; }
    .abschnitt-karte { padding-top: 72px; }

    .titel-start { font-size: 60px; letter-spacing: -0.5px; }
    .titel-seite { font-size: 56px; }
    .titel-seite--eng, .titel-seite--stelle { font-size: 52px; }
    .titel-1 { font-size: 44px; }
    .titel-2 { font-size: 36px; }
    .titel-2--gross { font-size: 40px; }
    .titel-3 { font-size: 30px; }
    .held-text { font-size: 22px; }
    .fliess { font-size: 20px; }
    .fliess--gross { font-size: 21px; }

    .held-innen { gap: 20px; padding-top: 72px; padding-bottom: 64px; }
    .held:first-child .held-innen:has(.titel-start) { gap: 24px; padding-top: 56px; }
    .held-innen:has(.titel-start) .held-text { font-size: 23px; max-width: 1040px; }
    .held-innen--stelle { gap: 18px; padding-top: 64px; padding-bottom: 56px; }
    .held-bild img { height: 360px; }

    /* The three ways lie across, icon beside the title, as on the phone: stacked
       they stood 276 px high and ran off the first screen below 950 px (Joe, 28.09.). */
    .wege-titel { margin-top: 8px; }
    .wege { gap: 20px; }
    .weg { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "bild titel pfeil" "text text pfeil"; align-items: center; gap: 8px 14px; padding: 24px 24px 24px 28px; }
    .weg-bild { grid-area: bild; }
    .weg-mehr { display: none; }
    .weg-pfeil { display: flex; }
    .weg-titel { font-size: 24px; }
    .weg-text { font-size: 19px; line-height: 1.3; }

    .gelbblock { padding: 56px; }
    .riesig { font-size: 120px; }
    .zuschuss-unter { font-size: 22px; }
    .haken { font-size: 20px; }

    .kacheln { gap: 20px; }
    .kachel { gap: 14px; padding: 32px; }
    .kachel-titel { font-size: 24px; }
    .kachel p { font-size: 19px; }
    .kacheln--rand .kachel p { font-size: 20px; }
    .kacheln--eng .kachel { gap: 8px; padding: 28px; }
    .kacheln--eng .kachel-titel { font-size: 22px; }
    .kacheln--eng .kachel p { font-size: 18px; }
    .kachel-frage { font-size: 40px; }
    .titel-1 + .kacheln { margin-top: 32px; }
    .mehr-link { font-size: 20px; padding-top: 32px; }

    .hinweisband { gap: 28px; padding: 32px 40px; }
    .hinweisband p { font-size: 21px; }

    .zahlen { padding-top: 88px; }
    .zahl-wert { font-size: 52px; }
    .zahl-text { font-size: 19px; }

    .sprungmarken { gap: 12px; margin-top: 8px; }
    .sprungmarken a { padding: 12px 20px; font-size: 18px; }
    .bildreihe-bild img { height: 300px; }
    #alltag .bildreihe-bild img { height: 340px; }
    .liste dt { font-size: 21px; }
    .liste dd { font-size: 19px; line-height: 1.2; }

    .flaechenblock { padding: 56px; }
    .beratung-kopf { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
    .beratung-kopf > .knopf { flex-shrink: 0; align-self: auto; }
    .grad { padding: 28px; }
    .grad-name { font-size: 18px; }
    .grad-wert { font-size: 26px; }
    .grad-text { font-size: 18px; line-height: 1.2; }

    .betragkarte { padding: 40px; }
    .betragkarte-label { font-size: 18px; }
    .betragkarte .riesig { font-size: 112px; }
    .betragkarte-unter { font-size: 21px; }
    .betragkarte-jahr { font-size: 18px; }
    .guthaben { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; }
    .guthaben-text { grid-column: span 6; }
    .guthaben > .rechner { grid-column: span 6; }
    .guthaben-text .titel-2 { line-height: 1.15; }
    .rechner { padding: 36px; }
    .rechner-legende { font-size: 22px; }
    .rechner-summe { font-size: 72px; }

    .fakt-wert { font-size: 52px; }
    .fakt p:not(.fakt-wert) { font-size: 19px; }
    .persoenlich-bild img { height: 380px; }
    .zitat p { font-size: 30px; }
    .preiskarte { padding: 32px; }
    .tagwerk-bilder { gap: 24px; }
    .preiskarte-titel { font-size: 24px; }
    .preiskarte p { font-size: 18px; }

    .video { min-height: 320px; }
    .stellen-zeile { padding: 28px 32px; }
    .stellen-text { gap: 6px; }
    .stellen-titel { font-size: 24px; }

    .stelle { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px; }
    .stelle-text { grid-column: span 7; gap: 40px; }
    .stelle > .formular { grid-column: span 5; align-self: start; }
    .stelle-block { gap: 16px; }
    .haken--dunkel { font-size: 20px; }
    .fragenkasten { padding: 24px 28px; }
    .formular--rand { padding: 36px; }
    .formular--rand .formular-titel { font-size: 26px; }
    .formular--rand .feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: 56px; }
    .formular--rand .knopf--absenden { min-height: 60px; }

    .kontakt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px; }
    .kontakt-info { grid-column: span 5; gap: 32px; }
    .kontakt > .formular { grid-column: span 7; align-self: start; padding: 40px; }
    .kontakt-kopf { gap: 16px; }
    .kontakt-wege { display: flex; flex-direction: column; gap: 32px; }
    .kontakt-weg { gap: 6px; padding: 0; border: 0; border-radius: 0; }
    .kontakt-weg-label { font-size: 20px; }
    .kontakt-weg-wert { font-size: 20px; font-weight: 400; text-decoration: underline; }
    .zeiten { margin-top: 0; padding: 0; background: none; font-size: 20px; }
    .zeiten-titel { font-size: 20px; }
    .zeiten dl > div { border-bottom-color: var(--linie); }
    .zeiten-trenner { display: inline; height: auto; overflow: visible; }
    .karte { min-height: 320px; }

    .fuss { margin-top: 88px; }
    .fuss-cta { padding-top: 64px; padding-bottom: 64px; }
    .fuss-titel { font-size: 44px; }
    .fuss-text { font-size: 21px; }
    .fuss-leiste { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; padding: 24px var(--rand); }
    /* The languages in a row of their own under the links. As a third flex
       item they widened the group by their whole length and squeezed the
       address until the mail address broke inside the word (tr). */
    .fuss-navi { display: grid; grid-template-columns: auto auto; column-gap: 24px; }
    .fuss-sprachen { grid-column: 1 / -1; }
}

/* =====================================================================
   The full header: the whole menu and the phone number, no burger. Not
   with the rest of `gross` at 1180 but where the bar has room, measured
   in Chrome (tools/bedienen.mjs, check `kopf`): the space between menu
   and logo, and between menu and phone, must not fall below the space
   between two menu items, or the menu no longer reads as one group.
   German needs 1048 px of the bar and gets it from 1220. Turkish and
   Russian are longer (1144 and 1125 px at the German spacing) and the bar
   holds 1136 at most, however wide the screen: their menu items stand
   20 px apart instead of 26, and below 1270 (tr) and 1250 (ru) they keep
   the tablet header with the burger. English is 33 px shorter than German
   and needs no rule of its own. Nothing in the bar may wrap: a menu
   item on two lines once pushed "Ana sayfa" above the tag line.
   ===================================================================== */
@container seite (min-width: 1220px) {
    .marke-unter { display: block; padding-left: 14px; border-left: 2px solid var(--linie); font-size: 15px; line-height: 1.3; color: var(--text-3); }
    .marke-unter > span { display: block; white-space: nowrap; }
    .haupt-nav { display: block; }
    .haupt-nav ul { display: flex; gap: 26px; padding: 0; margin: 0; list-style: none; }
    .haupt-nav a { display: block; padding: 6px 0 4px; border-bottom: 3px solid transparent; color: var(--text); font-size: 18px; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .haupt-nav a:hover { color: var(--primaer); }
    .haupt-nav a[aria-current="page"] { color: var(--primaer); border-bottom-color: var(--primaer); }
    .kopf-telefon { display: flex; flex-direction: column; align-items: flex-end; }
    .kopf-telefon span { font-size: 15px; color: var(--text-3); white-space: nowrap; }
    .kopf-telefon a { font-size: 24px; font-weight: 700; text-decoration: none; line-height: 1.2; white-space: nowrap; }
    .kopf-knoepfe, .menue, .no-js .menue { display: none; }
    .js .kopf.menue-offen .menue { display: none; }
    .haupt-nav:is(:lang(tr), :lang(ru)) ul { gap: 20px; }
}
@container seite (min-width: 1220px) and (max-width: 1269.98px) {
    .kopf:lang(tr) :is(.marke-unter, .haupt-nav, .kopf-telefon) { display: none; }
    .kopf:lang(tr) .kopf-knoepfe { display: flex; }
    .no-js .kopf:lang(tr) .menue, .js .kopf.menue-offen:lang(tr) .menue { display: flex; }
}
@container seite (min-width: 1220px) and (max-width: 1249.98px) {
    .kopf:lang(ru) :is(.marke-unter, .haupt-nav, .kopf-telefon) { display: none; }
    .kopf:lang(ru) .kopf-knoepfe { display: flex; }
    .no-js .kopf:lang(ru) .menue, .js .kopf.menue-offen:lang(ru) .menue { display: flex; }
}