/* Ergänzungen zur Unternehmens-Startseite. Markenwerte kommen aus style.css. */
body[data-startseite="unternehmen"] [data-flaeche="hell"],
body[data-startseite="unternehmen"] .zitat-raster,
body[data-startseite="unternehmen"] .trust { --abschnitt-grund: var(--ground); background-color: var(--ground); }
body[data-startseite="unternehmen"] [data-flaeche="tief"] { --abschnitt-grund: var(--ground-deep); background-color: var(--ground-deep); }
body[data-startseite="unternehmen"] p,
body[data-startseite="unternehmen"] li { overflow-wrap: break-word; }
body[data-startseite="unternehmen"] .fliess,
body[data-startseite="unternehmen"] .faq-answer { max-width: 32em; }
body[data-startseite="unternehmen"] .lead,
body[data-startseite="unternehmen"] .hero-lead { font-size: var(--t-lead); font-weight: 400; line-height: 1.6; max-width: var(--lesebreite-lead); color: var(--text-soft); }
body[data-startseite="unternehmen"] .site-nav { gap: clamp(.75rem, 1.4vw, 1.5rem); }
body[data-startseite="unternehmen"] .site-nav > a { flex-shrink: 0; }
body[data-startseite="unternehmen"] .hero { padding-top: 3rem; padding-bottom: 2rem; }
body[data-startseite="unternehmen"] .hero .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: start; }
body[data-startseite="unternehmen"] .hero-copy { display: block; }
body[data-startseite="unternehmen"] .hero-status { font-family: var(--font-sans); font-size: var(--t-fein); line-height: 1.5; text-transform: none; letter-spacing: 0; margin-bottom: 1.25rem; }
body[data-startseite="unternehmen"] .hero-figure { grid-column: auto; grid-row: auto; align-self: stretch; max-width: none; display: flex; flex-direction: column; margin: 0; }
body[data-startseite="unternehmen"] .hero-figure .figure-frame { flex: none; min-height: 0; }
body[data-startseite="unternehmen"] .hero-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 38%; }
body[data-startseite="unternehmen"] .hero-figure figcaption { font-size: var(--t-fein); letter-spacing: 0; text-transform: none; }
body[data-startseite="unternehmen"] .hero-ctas { gap: .75rem; }
.knopf-abspielzeichen { flex: none; width: 1.1em; height: 1.1em; }
.video-dialog:not([open]) { display: none; }
/* Film-Lightbox: mittig, Grund abgedunkelt und unscharf, Schließen rechts über dem Film. */
.video-dialog { max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; background: transparent; overflow: hidden; }
.video-dialog::backdrop { background: rgb(20 22 26 / .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.video-dialog-inhalt { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.video-dialog-inhalt > button { flex: none; min-height: 44px; background: var(--ground); color: var(--text); border-color: var(--ground); }
.video-dialog-inhalt > button:hover { background: var(--white); border-color: var(--white); }
.video-dialog-film { position: relative; margin: 0; }
.video-dialog-film > figcaption.bildmarke { bottom: 4.5rem; }
.video-dialog-film:not(:has(video)) { display: none; }
.einstieg-video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 6.5rem); max-height: calc(100dvh - 6.5rem); aspect-ratio: 4 / 5; object-fit: contain; background: var(--black); }
@media (max-width: 700px) {
  .video-dialog { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
}
html { scrollbar-gutter: stable; }
body.video-dialog-offen, body.kalender-dialog-offen { overflow: hidden; }
body[data-startseite="unternehmen"] .trust { padding-block: 1.75rem 2.5rem; border-bottom: 0; }
.block-kopf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; max-width: none; margin-bottom: 2.75rem; align-items: start; }
.block-kopf > div:first-child { display: contents; }
.block-kopf .eyebrow { grid-column: 1; grid-row: 1; }
.block-kopf h2 { grid-column: 1; grid-row: 2; max-width: none; margin-bottom: 0; }
.block-kopf > p, .block-kopf > .fliess, .block-kopf > .kapitel-text { grid-column: 2; grid-row: 2; margin-bottom: 0; max-width: 32em; }
.block-kopf > p { font-size: var(--t-lead); }
.block-kopf .section-head::before { content: none; }
/* Rote Wortgruppe: dieselbe Strichstärke wie unter einer H2, auch in kleineren Überschriften,
   knapp unter der Grundlinie; sie zeichnet sich einmal nach, wenn die Überschrift ins Bild kommt. */
body[data-startseite="unternehmen"] { --mark-dicke: calc(clamp(1.9rem, 4.6vw, 3rem) * .14); }
body[data-startseite="unternehmen"] .mark { background-size: 100% var(--mark-dicke); background-position: 0 1.1em; padding-bottom: .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html:not(.no-js) body[data-startseite="unternehmen"] .mark-animate { animation: none; background-size: 0% var(--mark-dicke); transition: background-size .55s var(--ease); }
html:not(.no-js) body[data-startseite="unternehmen"] .mark-animate.sichtbar { background-size: 100% var(--mark-dicke); }
/* Die eine Hinterlegung der Seite (Bibliothek): beginnt als dieselbe Unterstreichung und füllt sich dann. */
.textmarker { color: var(--white); background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-size: 100% 1.13em; background-position: 0 .12em; padding-inline: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html:not(.no-js) body[data-startseite="unternehmen"] .textmarker:not(.sichtbar) { color: var(--text); background-size: 0% var(--mark-dicke); background-position: 0 1.1em; }
html:not(.no-js) body[data-startseite="unternehmen"] .textmarker.sichtbar { animation: textmarker-ein .9s var(--ease) both; }
@keyframes textmarker-ein {
  0% { color: var(--text); background-size: 0% var(--mark-dicke); background-position: 0 1.1em; }
  55% { color: var(--text); background-size: 100% var(--mark-dicke); background-position: 0 1.1em; }
  100% { color: var(--white); background-size: 100% 1.13em; background-position: 0 .12em; }
}
body[data-startseite="unternehmen"] .befunde { grid-template-columns: 1fr; gap: 0; margin-top: 3rem; }
body[data-startseite="unternehmen"] .befund { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; border: 0; border-top: 1px solid var(--line-strong); padding: 1.8rem 0; background: transparent; }
body[data-startseite="unternehmen"] .befund .num { grid-column: 1; font-size: var(--t-fein); text-transform: none; letter-spacing: 0; }
body[data-startseite="unternehmen"] .befund h3 { grid-column: 1; max-width: 25rem; font-size: var(--t-h3-gross); }
body[data-startseite="unternehmen"] .befund p { grid-column: 2; grid-row: 1 / 3; }
.methoden-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.methoden-reihe .pillar p { font-size: var(--t-karte); }
.methoden-bild { margin: 3rem 0 0; position: relative; }
.methoden-bild img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 5 / 2; object-position: 50% 40%; }
.zitat-raster { padding-block: .1px; }
body[data-startseite="unternehmen"] .zitat-pause { max-width: 50rem; padding: 1rem 1rem 2rem; margin-block: 2rem 4rem; }
body[data-startseite="unternehmen"] .zitat-pause cite { font-size: var(--t-fein); text-transform: none; letter-spacing: 0; }
body[data-startseite="unternehmen"] .cases { display: grid; grid-template-columns: 1fr; gap: 0; }
body[data-startseite="unternehmen"] .cases-legende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-bottom: 1rem; margin: 0; font-family: var(--font-sans); font-size: var(--t-fein); text-transform: none; letter-spacing: 0; }
body[data-startseite="unternehmen"] .case { border: 0; border-top: 1px solid var(--line-strong); background: transparent; padding: 1.5rem 0 2rem; }
body[data-startseite="unternehmen"] .case .who { padding: 0; margin: 0 0 .75rem; font-family: var(--font-sans); font-size: var(--t-h4); color: var(--text); letter-spacing: 0; text-transform: none; font-weight: 600; }
body[data-startseite="unternehmen"] .case dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 0; margin: 0; }
body[data-startseite="unternehmen"] .case dd { padding: 0; border: 0; font-size: var(--t-karte); }
body[data-startseite="unternehmen"] .case dd::before { content: none; }
/* Ergebnis-Gürtel: rote Kante als Auszeichnung, innen dieselbe Teilung wie die Abschnittsköpfe. */
.ergebnis-guertel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 4rem; align-items: start; padding: clamp(1.75rem, 3.2vw, 3rem); margin-top: 2.5rem; background: var(--card); border: 3px solid var(--red); }
.ergebnis-guertel h3 { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.ergebnis-guertel-text p { max-width: 32em; margin: 0; }
.ergebnis-guertel-text .ergebnis-guertel-aktion { margin-top: 1.5rem; }
/* Die Arbeitsprobe mit Video steht als breite Zeile, die übrigen drei als Reihe darunter. */
.arbeitsproben-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.arbeitsprobe-breit { margin-bottom: 1.5rem; }
.arbeitsprobe { display: flex; flex-direction: column; border: 1px solid var(--line-strong); background: var(--card); padding: 1.5rem; }
.arbeitsprobe h3 { font-size: var(--t-h3); }
.arbeitsprobe p:not([class]) { font-size: var(--t-karte); color: var(--text-soft); }
.arbeitsprobe .recipe-label { font-size: var(--t-fein); text-transform: none; letter-spacing: 0; }
.arbeitsprobe-schema { display: block; width: 100%; max-width: 22rem; height: auto; margin: .5rem 0 1rem; overflow: visible; }
.schema-boxen rect { fill: var(--ground); stroke: var(--line-strong); }
.schema-boxen text { font-family: var(--font-sans); font-size: var(--t-zitat); fill: var(--text); }
.schema-boxen rect.schema-ergebnis { fill: var(--red); stroke: var(--red); }
.schema-boxen text.schema-ergebnis { fill: var(--white); }
.schema-pfeil { fill: none; stroke: var(--text); stroke-width: 1.5; }
.kennzeile { font-size: var(--t-fein); color: var(--text-soft); border-top: 1px solid var(--line); padding-top: .8rem; }
.entwurf-hinweis { font-size: var(--t-fein); color: var(--text-soft); border-left: 2px solid var(--line-strong); padding-left: .75rem; }
.arbeitsprobe-aktion { margin-top: auto; padding-top: 1rem; text-align: center; }
.werkstatt-video { margin-top: auto; }
.video-vorschau { display: block; width: 100%; padding: 0; border: 1px solid var(--black); background: var(--ground); color: var(--black); text-align: left; font: inherit; cursor: pointer; }
.video-vorschau img { height: auto; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-vorschau > span { padding: .8rem 1rem; display: flex; justify-content: space-between; font-size: var(--t-knopf); font-weight: 600; }
.werkstatt-video video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; background: var(--black); }
.werkstatt-video ~ .note { margin-top: .75rem; }
/* Schrittnummer ohne Versalien und führende Null; die dritte Spalte beginnt an der Mittelkante. */
body[data-startseite="unternehmen"] .ablauf-schritt { grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, calc((100% - 4rem) / 2)); gap: 0; }
body[data-startseite="unternehmen"] .ablauf-schritt::before { content: "Schritt " counter(ablauf); font-weight: 500; font-size: var(--t-mass); letter-spacing: .04em; text-transform: none; color: var(--text-soft); white-space: nowrap; }
body[data-startseite="unternehmen"] .ablauf-text { padding-right: 4rem; }
body[data-startseite="unternehmen"] .ablauf-text p { font-size: var(--t-karte); max-width: 32em; }
body[data-startseite="unternehmen"] .ablauf-zeit-titel { text-transform: none; letter-spacing: 0; font-size: var(--t-fein); }
.paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: start; }
.kapitel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 4rem; align-items: start; }
.paar.block-kopf, .kapitel.block-kopf { gap: 0 4rem; }
.kapitel-kopf { margin-bottom: 0; }
.kapitel.block-kopf > .kapitel-text { grid-row: 2 / 4; }
.kapitel.block-kopf > figure { grid-column: 1; grid-row: 3; margin: 2rem 0 0; position: relative; }
body[data-startseite="unternehmen"] .mario-zitat { margin-block: 2.5rem; border: 0; padding: 1rem; }
.vergleich { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-strong); padding: 1.25rem 1rem; font-size: var(--t-karte); }
.vergleich th { font-size: var(--t-body); font-weight: 600; line-height: 1.4; }
.vergleich th:first-child { padding-left: 0; width: 16%; }
.vergleich thead th:nth-child(2) { width: 32%; }
.vergleich td { color: var(--text-soft); }
.vergleich td.vergleich-mario { color: var(--text); }
.vergleich td:last-child, .vergleich th:last-child { padding-right: 0; }
.vergleich thead th { border-bottom: 2px solid var(--black); vertical-align: bottom; }
.vergleich-einleitung { max-width: 48em; }
.vergleich .vergleich-mario, .vergleich .vergleich-mario-kopf { border-inline: 3px solid var(--red); background: var(--card); }
.vergleich thead .vergleich-mario-kopf { background: var(--red); color: var(--white); border-bottom-color: var(--red); padding-top: 1.5rem; }
.vergleich tbody tr:last-child .vergleich-mario { border-bottom: 3px solid var(--red); }
.vergleich-label { display: none; }
/* Kundenfeedback: eigener Gürtel auf dem abgesetzten Grund, weiße Karten, Datum unten. */
.stimmen-guertel { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
.stimmen-leiste { margin-bottom: 0; }
.stimmen-kopf { margin-bottom: 2rem; }
.stimmen-kopf .note { margin: 0; }
.stimmen-titel { margin-bottom: .75rem; }
.stimmen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: .3rem; margin: -.3rem; }
.stimme { display: flex; flex-direction: column; padding: 1.25rem 1.5rem; background: var(--card); border: 1px solid var(--line-strong); }
.stimme-sterne { margin: 0; color: var(--red); letter-spacing: .12em; font-size: var(--t-h3); line-height: 1; }
.stimme-zitat { margin: .9rem 0 1.1rem; font-size: var(--t-karte); }
.stimme-zitat p { margin: 0; }
.stimme-datum { font-size: var(--t-fein); margin: auto 0 0; color: var(--text-soft); }
.mario-zitat-akzent { color: var(--red-dark); }
.stimmen-hilfe { display: none; font-size: var(--t-fein); }
body[data-startseite="unternehmen"] .b2b-grid { gap: 2rem; }
body[data-startseite="unternehmen"] .b2b-card { padding: 1.5rem; }
body[data-startseite="unternehmen"] .b2b-card .recipe-label { font-size: var(--t-fein); text-transform: none; letter-spacing: 0; }
body[data-startseite="unternehmen"] #angebote .fliess { margin-top: 2rem; }
.bibliothek-zahlen { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 2rem 0 1rem; }
.bibliothek-zahlen > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 2px solid var(--black); padding-top: .8rem; }
.bibliothek-zahlen dd { margin: 0; font-family: var(--font-cond); font-size: var(--t-zahl-gross); line-height: 1.1; font-weight: 700; }
.bibliothek-zahlen dt { font-size: var(--t-fein); padding-top: .5rem; }
.bibliothek-liste-titel { margin: 2.25rem 0 1rem; }
.bibliothek-inhalt { list-style: none; padding: 0; margin: 0 0 2rem; }
.bibliothek-inhalt li { position: relative; padding-left: 2rem; margin-bottom: .8rem; }
/* Haken als gezeichnetes Zeichen in der Tinte. */
.bibliothek-inhalt li::before { content: ""; position: absolute; left: .3rem; top: .32em; width: .4em; height: .8em; border: solid var(--text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bibliothek-newsletter { margin: 0 0 1.75rem; padding: 1.25rem 1.5rem; background: var(--card); }
.bibliothek-newsletter strong { color: var(--text); }
.bibliothek-abbinder { font-weight: 600; }
.bibliothek-anmeldung { padding: clamp(1.5rem, 2.6vw, 2.5rem); border: 1px solid var(--line-strong); background: var(--card); }
body[data-startseite="unternehmen"] .about-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4rem; }
body[data-startseite="unternehmen"] .about-copy { grid-column: 2; grid-row: 1; }
/* Bild und Überschrift beginnen auf derselben Höhe, die graue Zeile steht darüber. */
body[data-startseite="unternehmen"] .about-figure { grid-column: 1; grid-row: 1; margin-top: var(--kopf-versatz); }
body[data-startseite="unternehmen"] .about-figure img { aspect-ratio: 4 / 5; }
body[data-startseite="unternehmen"] .about-figure figcaption { font-size: var(--t-fein); text-transform: none; letter-spacing: 0; }
/* Merksatz im Über-mich: ohne Anführungszeichen, groß, die Pointe in Rot. */
body[data-startseite="unternehmen"] .mario-zitat-gross { margin-block: 3rem; padding: 1.25rem 1.5rem; max-width: none; }
body[data-startseite="unternehmen"] .mario-zitat-gross p { font-size: var(--t-zitat-gross); line-height: 1.2; }
/* Vier Gründe zwei mal zwei, jeder mit Positionsnummer auf der Kante wie in einer technischen Zeichnung. */
body[data-startseite="unternehmen"] .argumente { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3.5rem 4rem; margin-top: 3rem; }
body[data-startseite="unternehmen"] .argument { position: relative; border-top: 0; padding-top: 2.6rem; }
body[data-startseite="unternehmen"] .argument::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--black); transform-origin: left; }
body[data-startseite="unternehmen"] .argument h4 { font-size: var(--t-body); }
.argument-nr { position: absolute; top: -1.5rem; left: 0; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--abschnitt-grund, var(--ground)); font-family: var(--font-mono); font-weight: 500; font-size: var(--t-zitat); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.argument-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.argument-rahmen rect { fill: none; stroke: var(--black); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 0; }
html:not(.no-js) body[data-startseite="unternehmen"] .argument:not(.sichtbar)::before { transform: scaleX(0); }
html:not(.no-js) body[data-startseite="unternehmen"] .argument:not(.sichtbar) .argument-rahmen rect { stroke-dashoffset: 100; }
html:not(.no-js) body[data-startseite="unternehmen"] .argument:not(.sichtbar) .argument-nr { color: transparent; }
body[data-startseite="unternehmen"] .argument::before { transition: transform .7s var(--ease) .25s; }
.argument-rahmen rect { transition: stroke-dashoffset .55s var(--ease); }
.argument-nr { transition: color .3s ease .35s; }
/* FAQ: Kopf wie jeder Abschnitt, darunter vier Themen zwei mal zwei, jedes mit Kante oben. */
.faq-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 4rem; align-items: start; }
.faq-thema { border-top: 2px solid var(--black); padding-top: 1.4rem; }
.faq-rechtshinweis { margin: 1.25rem 0 0; max-width: 32em; }
.faq-thema > h3 { font-size: var(--t-h3-gross); margin: 0 0 1.4rem; }
body[data-startseite="unternehmen"] .faq-item summary { font-size: var(--t-body); }
.faq-answer[data-platzhalter] { font-size: var(--t-fein); }
/* Abschluss: großes Porträt rechts, links wenig Text und der große rote Knopf, mittig zum Bild. */
.abschluss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; }
.abschluss-text > :last-child { margin-bottom: 0; }
.kontakt-kopf { max-width: none; margin-bottom: 1.8rem; }
.kontakt-kopf h2 { margin-bottom: 0; }
.abschluss .lead { margin: 0; max-width: 32em; }
.kontakt-cta { margin: 2rem 0 0; }
.abschluss > .contact-photo { width: 100%; margin: 0; }
.abschluss .contact-photo img { display: block; width: 100%; height: auto; aspect-ratio: 759 / 800; object-fit: cover; }
.kontakt-wege { font-size: var(--t-fein); max-width: 32em; margin: 1.5rem 0 0; color: var(--text-soft); }
body[data-startseite="unternehmen"] .contact { padding-block: clamp(4rem, 8vw, 7rem); }
/* Große Knöpfe für Termin und Anmeldung. */
.kontakt-cta .btn, .ergebnis-guertel .btn { min-height: 3.5rem; padding: 1rem 2.25rem; }
/* Kalender-Lightbox: feste Höhe, der Kalender füllt den Rest, der direkte Link bleibt ohne Scrollen sichtbar. */
.kalender-dialog:not([open]) { display: none; }
.kalender-dialog { width: min(70rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); height: min(56rem, calc(100vh - 2rem)); height: min(56rem, calc(100dvh - 2rem)); max-height: none; margin: auto; padding: 0; border: 0; background: var(--ground); color: var(--text); overflow: hidden; }
.kalender-dialog::backdrop { background: rgb(20 22 26 / .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kalender-dialog-inhalt { display: flex; flex-direction: column; height: 100%; padding: 1rem 1.5rem 1.25rem; }
.kalender-dialog-kopf { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .25rem .75rem; }
.kalender-dialog-kopf h3 { margin: 0; font-size: var(--t-h3-gross); }
.kalender-dialog-kopf .btn { min-height: 44px; }
.kalender-dialog-inhalt > .note { flex: none; margin: 0 0 .5rem; }
.kalender-dialog-inhalt > .note:empty { display: none; }
.kalender-platz { flex: 1 1 auto; min-height: 0; background: var(--card); }
.kalender-platz iframe { border: 0; display: block; width: 100%; height: 100%; min-height: 0; }
.kalender-ersatz { margin-top: 1rem; font-size: var(--t-fein); }
.kalender-dialog .kalender-ersatz { flex: none; margin: .75rem 0 0; }
body[data-startseite="unternehmen"] .site-footer p { max-width: 32em; }
.anker-alias { display: block; position: relative; }
@media (min-width: 1024px) {
  .arbeitsprobe-breit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; align-items: start; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .arbeitsprobe:not(.arbeitsprobe-breit) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; align-items: start; }
  .arbeitsprobe:not(.arbeitsprobe-breit) > * { grid-column: 1; }
  .arbeitsprobe:not(.arbeitsprobe-breit) > .arbeitsprobe-schema { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}
@media (min-width: 1200px) {
  .arbeitsproben-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* Formular auf Höhe der Überschrift, bleibt beim Lesen der linken Spalte im Bild. */
  .bibliothek-anmeldung { margin-top: var(--kopf-versatz); position: sticky; top: 6rem; }
}
@media (max-width: 1100px) {
  body[data-startseite="unternehmen"] .site-nav { gap: 0; max-height: calc(100dvh - 5rem); overflow-y: auto; }
  body[data-startseite="unternehmen"] .site-header .wrap { gap: .75rem; }
  html.no-js body[data-startseite="unternehmen"] .site-nav { max-height: none; }
}
@media (max-width: 1023px) {
  body[data-startseite="unternehmen"] .hero .wrap,
  .block-kopf, .paar, .kapitel, .methoden-reihe,
  body[data-startseite="unternehmen"] .befund,
  body[data-startseite="unternehmen"] .about-grid,
  body[data-startseite="unternehmen"] .argumente,
  .ergebnis-guertel { grid-template-columns: 1fr; gap: 1.5rem; }
  body[data-startseite="unternehmen"] .argumente { row-gap: 3.25rem; }
  .faq-spalten { grid-template-columns: 1fr; }
  body[data-startseite="unternehmen"] .ablauf-text { padding-right: 0; }
  body[data-startseite="unternehmen"] .hero { padding-top: 2.5rem; }
  body[data-startseite="unternehmen"] .hero-figure { max-width: 32rem; }
  body[data-startseite="unternehmen"] .befund > *,
  body[data-startseite="unternehmen"] .befund p,
  body[data-startseite="unternehmen"] .about-grid > * { grid-column: auto; grid-row: auto; }
  body[data-startseite="unternehmen"] .about-figure { position: relative; top: auto; max-width: 32rem; margin-top: 0; }
  .methoden-bild img { aspect-ratio: 16 / 10; }
  body[data-startseite="unternehmen"] .ablauf-schritt { grid-template-columns: 1fr; gap: .75rem; }
  body[data-startseite="unternehmen"] .ablauf-schritt > * { grid-column: auto; grid-row: auto; }
  body[data-startseite="unternehmen"] .ablauf-zeit { margin-left: 0; padding-left: 0; border-left: 0; }
  body[data-startseite="unternehmen"] .cases-legende { display: none; }
  body[data-startseite="unternehmen"] .case dl { grid-template-columns: 1fr; gap: .5rem; }
  body[data-startseite="unternehmen"] .case dt { position: static; width: auto; height: auto; clip: auto; margin: 1rem 0 0; overflow: visible; font-size: var(--t-fein); font-weight: 600; }
  .block-kopf { row-gap: 0; }
  .block-kopf h2, .block-kopf .eyebrow, .block-kopf > p, .block-kopf > .fliess, .kapitel.block-kopf > .kapitel-text, .kapitel.block-kopf > figure { grid-column: 1; grid-row: auto; }
  .block-kopf > p, .block-kopf > .fliess, .block-kopf > .kapitel-text { margin-top: 1.5rem; }
  .ergebnis-guertel { gap: 1rem; }
  /* Abschluss mobil: Kopf, Porträt, Text, Knopf, Kontaktzeile. */
  .abschluss { grid-template-columns: 1fr; gap: 0; }
  .abschluss-text { display: contents; }
  .abschluss .kontakt-kopf { order: 1; }
  .abschluss > .contact-photo { order: 2; max-width: 34rem; margin: 0 0 2rem; }
  .abschluss .lead { order: 3; }
  .abschluss .kontakt-cta, .abschluss noscript { order: 4; }
  .abschluss .kontakt-wege { order: 5; }
  .vergleich, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td { display: block; width: 100%; }
  .vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vergleich tr { padding-block: 1.5rem; border-top: 1px solid var(--line-strong); }
  .vergleich th:first-child, .vergleich td { padding: .5rem 0; border: 0; width: 100%; }
  /* Die eigene Spalte bleibt auch mobil ein roter Balken: roter Kopf, rote Kante, weiße Fläche. */
  .vergleich td.vergleich-mario { padding: 0 1rem 1rem; margin-block: .5rem 1rem; border: 3px solid var(--red); background: var(--card); }
  .vergleich tbody tr:last-child .vergleich-mario { border-bottom: 3px solid var(--red); }
  .vergleich-label { display: block; font-weight: 600; margin-bottom: .25rem; color: var(--text); }
  .vergleich td.vergleich-mario .vergleich-label { margin: 0 -1rem .75rem; padding: .6rem 1rem; background: var(--red); color: var(--white); }
  .stimmen-raster { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1023px) {
  .arbeitsproben-raster { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .arbeitsproben-raster { grid-template-columns: 1fr; }
  .arbeitsprobe { padding: 1.25rem; }
  body[data-startseite="unternehmen"] .zitat-pause { text-align: left; margin-block: 1rem 2rem; }
  .stimmen-raster { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(85vw, 22rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .5rem; overscroll-behavior-x: contain; padding: .5rem; margin: -.5rem; gap: 1rem; }
  .stimme { scroll-snap-align: start; }
  .stimmen-hilfe { display: block; }
  .bibliothek-zahlen { gap: .6rem; }
  .bibliothek-zahlen dd { font-size: var(--t-preis-gross); }
  body[data-startseite="unternehmen"] .btn { max-width: 100%; }
  body[data-startseite="unternehmen"] .hero-ctas { align-items: stretch; }
  .kontakt-cta .btn, .ergebnis-guertel .btn { width: 100%; }
  .kalender-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); height: calc(100vh - 1rem); height: calc(100dvh - 1rem); }
  .kalender-dialog-inhalt { padding: .75rem 1rem 1rem; }
  body[data-startseite="unternehmen"] .mario-zitat-gross { padding: 1rem 1.25rem; }
  body[data-startseite="unternehmen"] .mario-zitat-gross p { font-size: var(--t-zitat); }
}
@media (prefers-reduced-motion: reduce) {
  .stimmen-raster { scroll-behavior: auto; }
  /* Ohne Bewegung stehen Unterstreichung, Hinterlegung und Positionsnummern fertig da. */
  body[data-startseite="unternehmen"] .mark-animate { animation: none; transition: none; background-size: 100% var(--mark-dicke); }
  body[data-startseite="unternehmen"] .textmarker { animation: none; }
  body[data-startseite="unternehmen"] .argument::before,
  body[data-startseite="unternehmen"] .argument-nr,
  body[data-startseite="unternehmen"] .argument-rahmen rect { transition: none; }
}

.praxis-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; list-style: none; margin: 0; padding: 0; font-size: var(--t-fein); color: var(--text-soft); }
body[data-startseite="unternehmen"] .site-header .brand { margin-right: auto; }