) */
.hero-c .lead + p { margin-top: var(--space-3); }
.hero-c .kicker { display: block; margin-bottom: var(--space-3); }
/* (Kontakt-Sektion: V5-Original ohne Formular – Entscheidung 2026-09-29) */
/* Menü: Überschrift „Leistungen“ und Social-Links */
.menu-services .kicker { margin-bottom: var(--space-1); }
.menu-social { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-weight: 600; color: var(--bg); }
.menu-contact a:hover, .menu-social a:hover { color: var(--accent-dark); }
/* Seiten Über uns, Impressum, Datenschutz: Bild und Text unter dem Sektionskopf, Absätze in Kacheln, lange Akkordeon-Antworten */
/* H1 mit langem Einzelwort („Datenschutzerklärung“): mobil kleiner, damit „Datenschutz“ in die Zeile passt */
.hero-page h1.h1-long { font-size: min(var(--text-h1-page), 15vw); }
.prose > h3:first-child { margin-top: 0; }
.section-head h2:only-child { grid-column: 1 / -1; }
.block p + p { margin-top: var(--space-2); }
.faq .answer > * + * { margin-top: var(--space-3); }
.faq .answer ul { padding-left: var(--space-4); }
.faq .answer li + li { margin-top: var(--space-2); }
.faq .answer b { color: var(--ink); }
.faq .answer a { text-decoration: underline; text-underline-offset: 3px; }
.block a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
}
/* Cases als Bento-Raster (Entscheidung James 2026-09-29, Variante E aus _case-varianten-2.html; seit 2026-10-07 überall: Übersicht, Leistungsseiten, „Nächster Case“)
Je Dreiergruppe eine große dunkle Karte (.bento-card-large, 2×2, Teasertext sichtbar) + zwei kleine Ton-Karten; jede zweite Gruppe mit
großer Karte rechts (.bento-card-right). Die Klassen stehen im Markup für „Alle“ und werden von cases-filter.js nach jedem Filterlauf
für die sichtbaren Karten neu gesetzt; data-slot (0/1/2) = Position in der Gruppe, steuert die Staffelung beim Einblenden. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--space-1); }
.bento-card { min-height: 0; transition: background-color .2s, color .2s; }
.bento-card[hidden] { display: none; }
.bento-card h3 { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.bento-teaser { margin-top: auto; font-size: var(--text-base); line-height: var(--leading-body); }
.bento-teaser + .link-arrow { margin-top: 0; }
/* Rest am Ende (Leistungsseiten mit 1, 2 oder 4 Cases, „Nächster Case“, Filtertreffer): große Karte allein → volle Breite statt Loch;
kleine Karte allein neben der großen → beide Zeilen hoch. Ohne JS über :last-child, nach einem Filterlauf setzt cases-filter.js die Klassen. */
.bento-card-large:last-child, .bento-card-wide { grid-column: 1 / -1; }
.bento-card-large + .bento-card:last-child, .bento-card-tall { grid-row: span 2; }
.bento-card-large h3 { margin-top: auto; font-size: var(--text-row); letter-spacing: var(--tracking-head); line-height: var(--leading-tight); max-width: 18ch; text-wrap: balance; }
.bento-card-large .bento-teaser { margin-top: 0; font-size: var(--text-lead); line-height: var(--leading-body); max-width: 44ch; }
.bento-card-large .bento-teaser + .link-arrow { margin-top: var(--space-2); color: var(--accent); }
.bento-card-large .tag { border-color: var(--muted-dark); }
.bento-card:hover, .bento-card:focus-visible { background: var(--accent); color: var(--on-accent); }
.bento-card:hover p, .bento-card:focus-visible p, .bento-card:hover .link-arrow, .bento-card:focus-visible .link-arrow { color: inherit; }
.bento-card:hover .tag, .bento-card:focus-visible .tag { border-color: var(--ink); }
.bento-card:focus-visible { outline-offset: -3px; }
.bento-card-large:focus-visible { outline-color: var(--ink); }
/* Teasertext der kleinen Karten: nur bei Maus-Geräten ab 901 px zunächst unsichtbar (Platz bleibt reserviert, Text bleibt im Link) */
@media (hover: hover) and (min-width: 901px) {
.bento-card:not(.bento-card-large) .bento-teaser { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.bento-card:hover .bento-teaser, .bento-card:focus-visible .bento-teaser { opacity: 1; transform: none; }
}
/* Scroll-Einblendung (reveal.js setzt .is-armed nur ohne prefers-reduced-motion) */
.bento.is-armed .bento-card { opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), background-color .2s, color .2s; }
.bento.is-armed .bento-card[data-slot="1"] { transition-delay: .12s, .12s, 0s, 0s; }
.bento.is-armed .bento-card[data-slot="2"] { transition-delay: .24s, .24s, 0s, 0s; }
.bento.is-armed .bento-card.is-in { opacity: 1; transform: none; }
@media (max-width: 900px) {
.bento-card-large, .bento-card-large.bento-card-right { grid-column: auto; grid-row: auto; padding: var(--space-4); }
.bento-card, .bento-card-large + .bento-card:last-child, .bento-card-tall { grid-row: auto; padding: var(--space-4); }
.bento-card-large h3 { margin-top: var(--space-2); }
}
/* === Aufzählungen: .list-x (Entscheidung James 2026-09-29: Variante J „X als Marker“, X in Neon mit Tintenkontur; ersetzt .list-check) ===
Werte 1:1 aus .lx-marker + .lx-marker-neon (_listen-varianten-2.html). Linkes X-Bein ergänzt (James 2026-10-01): Pfad symmetrisch, viewBox beginnt bei −1,62.
Markup:
Symbol:
einmal direkt nach (Pfad mit vector-effect="non-scaling-stroke").
role="list", weil Safari Listen mit list-style: none sonst nicht als Liste ansagt. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.list-x { list-style: none; padding: 0; margin: 0; font-size: var(--text-lead); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-sub); }
/* hängender Einzug 0,7 em + 12 px, 12 px Abstand zwischen den Punkten */
.list-x li { padding: 0 0 var(--space-2) calc(.7em + var(--space-2)); break-inside: avoid; overflow-wrap: break-word; }
.list-x li:last-child { padding-bottom: 0; }
/* X 0,7 em breit (Höhe .656 em); Neon auf Papier hat nur Kontrast 1,07, daher 1 px Tintenkontur.
Archivo 600: x-Höhe .526 em → Mitte des X auf die Mitte der Kleinbuchstaben: vertical-align (.263 − .328) em */
.list-x .x { display: inline-block; overflow: visible; width: .7em; height: .656em; margin: 0 var(--space-2) 0 calc(-.7em - var(--space-2)); vertical-align: -.065em;
fill: var(--accent); stroke: var(--ink); stroke-width: 1px; stroke-linejoin: miter; }
@media (min-width: 901px) {
.list-x { columns: 2; column-gap: var(--gutter); margin-bottom: calc(-1 * var(--space-2)); }
.list-x li:last-child { padding-bottom: var(--space-2); }
}
/* Lange Wörter in Sektionsüberschriften nur auf schmalen Bildschirmen trennen (Überlauf „Wettbewerbsvorteil“ bei 375 px) */
@media (max-width: 520px) { .section-head h2, .h2 { hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: anywhere; } }
/* ===================== Kirby-Ergänzungen (docs/blocks-contract.md § 5/§ 8) ===================== */
/* Skip-Link des Plugin-Layouts (heox.site/layout, Ziel #content) im Design von .skip */
.heox-skip-link { position: absolute; left: var(--space-pad); top: -5rem; z-index: 50; background: var(--ink); color: var(--bg); padding: var(--space-3) var(--space-4); }
.heox-skip-link:focus { top: .5rem; }
/* Block-Anschluss: Toggle „An vorherigen Baustein anschließen“ – Sektionsabstand wird zum Spaltenabstand,
das erste Element der angeschlossenen Sektion bringt keinen eigenen Zusatzabstand mit */
.section.section-attach { padding-top: var(--space-stack); }
/* Bild-Block (Core image, Snippet-Override): Abbildung in Satzbreite, Bildunterschrift gedämpft */
.figure { margin: 0; }
.figure img { width: 100%; height: auto; }
/* Schaubild (Block heox-figure): inline-SVG, Farben aus den Variablen,
Desktop-Variante .sd / Mobil-Variante .sm */
.schema svg { display: block; width: 100%; height: auto; font-family: inherit; }
.schema .sm { display: none; }
.schema rect.n { fill: var(--tone); }
.schema rect.na { fill: var(--accent); }
.schema text { fill: var(--ink); }
.schema .t { font-size: var(--text-base); font-weight: 800; letter-spacing: var(--tracking-sub); }
.schema .tl { font-size: var(--text-md); font-weight: 800; letter-spacing: var(--tracking-sub); }
.schema .tx { font-size: var(--text-lg); font-weight: 800; letter-spacing: var(--tracking-sub); fill: var(--bg); }
.schema .s { font-size: var(--text-xs); fill: var(--muted); }
.schema .sa { fill: var(--on-accent); }
.schema .sk { font-size: var(--text-xs); fill: var(--muted-dark); }
.schema rect.nk { fill: var(--ink); }
.schema path, .schema line { stroke: var(--muted); stroke-width: 2; fill: none; }
.schema .ah { fill: var(--muted); stroke: none; }
.section .schema { margin-top: var(--space-stack); }
@media (max-width: 760px) {
.schema .sd { display: none; }
.schema .sm { display: block; max-width: 420px; }
}
/* Hero A mit echtem Bild statt Platzhalterfläche */
.hero-media.has-image { padding: 0; background: var(--tone); overflow: hidden; }
.hero-media.has-image img { width: 100%; height: 100%; object-fit: cover; }
/* Kontakt-Sektion als letzter Baustein: Fuß schließt direkt an (im Prototyp .contact + .footer; in Kirby liegt
dazwischen) */
.heox-main:has(> .contact:last-child) + .footer, .heox-main:has(> .cta:last-child) + .footer { margin-top: 0; }
/* Core-Blöcke heading/text/quote (Fließtext in .wrap.section > .prose) */
.prose h2 { font-size: var(--text-h3); font-weight: 800; letter-spacing: var(--tracking-sub); line-height: var(--leading-snug); margin: var(--space-6) 0 var(--space-3); }
.prose > h2:first-child { margin-top: 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
/* Themenfelder (Block heox-topics, HEOX Lab): Rubrik + Frage, darunter Testumgebung / Ergebnis nebeneinander */
.topics { display: grid; gap: var(--gutter); }
.topic h3 { font-size: var(--text-h3); font-weight: 800; letter-spacing: var(--tracking-sub); line-height: var(--leading-snug); margin-top: var(--space-2); }
.topic-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4) var(--gutter); margin-top: var(--space-4); }
.topic-cols p { margin-top: var(--space-2); font-size: var(--text-base); line-height: var(--leading-body); color: var(--muted); max-width: 66ch; }
.topic-link { margin-top: var(--space-3); }
/* ===================== Überschriften: Wortabstand, Umbruch, Trennung (Typografie-Audit 2026-10-02) =====================
Die negative Laufweite der Vorlage bleibt; sie zieht aber auch das Leerzeichen zusammen („Wirsind“, „Redenwir.“).
word-spacing gleicht das aus. Trennung nur bei langen Wörtern und an sinnvollen Stellen (mindestens 14 Zeichen, 6 vor/nach). */
.hero h1, .hero-page h1, .hero-b h1, .hero-b .h1, .hero-c .h1, .section-head h2, .h2, .spec-head h2, .row h3, .step-word, .menu-main, .contact h2, .cta h2, .quote-big, .stat b { word-spacing: var(--ws-display); }
.step h3, .prose h2, .prose h3, .topic h3, .card h3, .callout p, .contact-list a, .stat-row b, .bento-card-large h3 { word-spacing: var(--ws-head); }
.hero-page h1, .section-head h2, .h2, .contact h2, .hero-c .h1, .faq summary, .timeline h3, .block h3, .step h3, .prose h2, .prose h3, .topic h3, .card h3 { text-wrap: balance; }
.hero-c h1.h1 { font-size: var(--text-h2); line-height: var(--leading-tight); hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: anywhere; }
/* ===================== Abstände im Sektionsinneren (Raster-Audit 2026-10-02) =====================
Eine Stufe für Kopf → Inhalt und Baustein → Baustein (--stack), 32 px für Fortsetzungen im Text (Liste/Button nach Absatz,
Regeln mit zwei Klassen oben). Muss am Dateiende stehen, damit sie Einzelabstände gleicher Spezifität ersetzt. */
.section > * + * { margin-top: var(--space-stack); }
.section > :first-child { margin-top: 0; }
.section > .section-head + .prose { margin-top: var(--space-4); } /* Textgruppe, Begründung bei .section-head + .actions */
/* Leistungszeilen (Start): alle Zeilen sind so hoch wie der längste Kurztext (James 2026-10-10), der auf dem Desktop
erst beim Überfahren erscheint; der Titel sitzt mittig. Dadurch stand über dem ersten und unter dem letzten Titel
unsichtbare Luft (Zeilenpolster 8 + halbe Differenz Kurztext − Titel), die Kopf → Zeilen und Zeilen → nächste Sektion
sichtbar vergrößerte (gemessen 68/148 statt 48/128; Abstands-Prüfung 2026-10-09). Der Kurztext reserviert deshalb
fix drei Zeilen, und genau diese Luft wird aus dem Stapel- und Sektionsabstand herausgerechnet – alles aus Tokens,
keine neuen Werte. Mobil ist der Kurztext sichtbar: Zeilen so hoch wie ihr Inhalt, nur das Polster (16) herausrechnen. */
.rows { --row-air: calc(var(--space-2) + (3 * var(--text-base) * var(--leading-body) - var(--text-row)) / 2); }
.row p { min-height: calc(3 * var(--text-base) * var(--leading-body)); }
.section > .rows { margin-top: calc(var(--space-stack) - var(--row-air)); margin-bottom: calc(-1 * var(--row-air)); }
@media (max-width: 900px) {
.rows { --row-air: var(--space-3); grid-auto-rows: auto; }
.row p { min-height: 0; }
}
/* FAQ: 20 px Innenabstand der ersten/letzten Frage aus dem sichtbaren Abstand herausrechnen */
.faq { margin-bottom: calc(-1 * var(--space-3)); }
.section > * + .faq { margin-top: calc(var(--space-stack) - var(--space-3)); }
/* Live-Büro (Block heox-live-buero, Web Component assets/js/live-buero.js):
Ecken und Farben ans Design, Sprechblasen in der Site-Schrift */
live-buero { display: block; mix-blend-mode: multiply; --lb-radius: 0; --lb-ink: var(--ink); --lb-sticky: var(--accent); --lb-hand-font: inherit; } /* Sprechblasen in der Site-Schrift (James 2026-10-09) */
live-buero::part(status) { font-family: inherit; font-weight: 600; }
.live-buero-figure figcaption { font-size: var(--text-xs); }
/* ===================== 12-Spalten-Raster (James 2026-10-09) =====================
Alle Layout-Raster laufen auf repeat(12, minmax(0, 1fr)) mit Gutter 24; die Kinder
belegen Spaltenspannen. Ausnahmen: Timeline-5 (fünf Schritte passen nicht in 12),
Bento mit 4-px-Fuge (Entscheidung 2026-09-25), Bauteil-innere Raster (Zeile, FAQ, Notiz). */
.menu-grid > *, .hero-page-row > *, .contact > *, .team > *, .programmes > *, .blocks > *, .form .field, .hero-c > *, .topic-cols > * { grid-column: span 6; }
.hero-text { grid-column: span 8; }
.hero-media { grid-column: span 4; }
.steps > *, .blocks.blocks-3 > *, .cards > *, .finding-grid > *, .timeline > * { grid-column: span 4; }
.timeline > * { grid-column: span 3; }
.stats > *, .people > * { grid-column: span 3; }
.logos > * { grid-column: span 2; }
.footer-grid > :first-child { grid-column: span 4; }
.footer-grid > * { grid-column: span 3; }
.footer-grid > :last-child { grid-column: span 2; }
.stat-row > b { grid-column: span 3; }
.stat-row > p { grid-column: span 9; }
.media-grid > :first-child { grid-column: span 6; }
.media-grid > * { grid-column: span 3; }
.spec-head > :first-child { grid-column: span 4; }
.spec-head > :last-child { grid-column: span 8; }
.form .field.full, .form .form-actions { grid-column: 1 / -1; }
.bento-card { grid-column: span 4; }
.bento-card-large { grid-column: span 8; grid-row: span 2; padding: clamp(var(--space-5), 4vw, var(--space-7)); }
.bento-card-large.bento-card-right { grid-column: 5 / span 8; }
.bento-card-large:last-child, .bento-card-wide { grid-column: 1 / -1; }
@media (min-width: 901px) { .timeline-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .timeline-5 > * { grid-column: auto; } }
@media (max-width: 900px) {
.section-head > *, .menu-grid > *, .hero-text, .hero-media, .hero-page-row > *, .contact > *, .team > *, .programmes > *, .blocks > *, .blocks.blocks-3 > *, .steps > *, .cards > *, .finding-grid > *, .timeline > *, .stats > *, .people > *, .form .field, .hero-c > *, .topic-cols > *, .stat-row > b, .stat-row > p, .media-grid > *, .spec-head > * { grid-column: 1 / -1; }
.logos > * { grid-column: span 4; }
.footer-grid > *, .footer-grid > :first-child, .footer-grid > :last-child { grid-column: span 6; }
.contact-globus .globus-col, .contact-globus .contact-text { grid-column: 1 / -1; }
.bento-card, .bento-card-large, .bento-card-large.bento-card-right, .bento-card-large:last-child, .bento-card-wide { grid-column: 1 / -1; grid-row: auto; }
.steps, .menu-grid { row-gap: var(--space-6); }
.timeline { column-gap: var(--gutter); }
.programmes { row-gap: var(--space-4); }
}
@media (max-width: 560px) { .footer-grid > *, .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; } .brand img, .brand .logo { height: var(--space-6); } .site-header .brand .logo { height: var(--space-7); } }
/* Think-Think-Do-Loop im Hero (Block heox-hero-home ohne Bild, Web Component
assets/js/heox-loop.js): füllt die Akzentfläche, Farben über Variablen, damit
der Akzent-Umschalter greift; ohne JS bleibt die Fläche */
.hero-media-loop { padding: 0; display: block; }
heox-loop { display: block; width: 100%; height: 100%; aspect-ratio: auto; min-height: clamp(360px, 50vw, 640px);
--heox-loop-bg: var(--accent); --heox-loop-ink: var(--ink); --heox-loop-do-bg: var(--ink); --heox-loop-do-fg: var(--accent);
--heox-loop-font-weight: 800; --heox-loop-letter-spacing: var(--tracking-head); }
heox-loop:not(:defined) { background: var(--accent); }
@media (max-width: 900px) { heox-loop { min-height: 0; aspect-ratio: 4 / 3; } }
/* Kopf mobil: Claim neben dem Logo weg, damit Umschalter und Burger Platz haben */
@media (max-width: 560px) { .site-header .brand > span { display: none; } }
/* Audit 2026-10-10: Klassen statt Inline-Styles */
.nav-flat { padding-block: 0; }
.bento + .more { margin-top: var(--space-5); }
.accent-text { color: var(--accent); }
/* Cookiebanner (heox/kirby-cookiebanner → orestbida/cookieconsent v3) im Site-Design:
Leiste unten, eckig, Archivo, Buttons wie .btn, Toggle in der Akzentfarbe (James 2026-10-10) */
#cc-main { --cc-font-family: "Archivo", Helvetica, Arial, sans-serif; --cc-bg: var(--bg); --cc-primary-color: var(--ink); --cc-secondary-color: var(--muted); --cc-link-color: var(--ink);
--cc-btn-primary-bg: var(--ink); --cc-btn-primary-color: var(--bg); --cc-btn-primary-border-color: var(--ink); --cc-btn-primary-hover-bg: var(--accent); --cc-btn-primary-hover-color: var(--on-accent); --cc-btn-primary-hover-border-color: var(--accent);
--cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: var(--ink); --cc-btn-secondary-border-color: var(--ink); --cc-btn-secondary-hover-bg: var(--ink); --cc-btn-secondary-hover-color: var(--bg); --cc-btn-secondary-hover-border-color: var(--ink);
--cc-btn-border-radius: 0; --cc-modal-border-radius: 0; --cc-pm-toggle-border-radius: 0; --cc-modal-margin: 0; --cc-overlay-bg: rgba(20, 20, 18, .5);
--cc-toggle-on-bg: var(--accent); --cc-toggle-on-knob-bg: var(--ink); --cc-toggle-off-bg: var(--tone); --cc-toggle-off-knob-bg: var(--muted); --cc-toggle-readonly-bg: var(--ink); --cc-toggle-readonly-knob-bg: var(--bg);
--cc-cookie-category-block-bg: var(--tone); --cc-cookie-category-block-border: var(--tone); --cc-cookie-category-block-hover-bg: var(--tone); --cc-cookie-category-block-hover-border: var(--tone); --cc-cookie-category-expanded-block-bg: var(--bg); --cc-cookie-category-expanded-block-hover-bg: var(--bg);
--cc-section-category-border: var(--tone); --cc-separator-border-color: var(--tone); --cc-footer-bg: var(--bg); --cc-footer-border-color: var(--tone); --cc-footer-color: var(--muted); }
#cc-main .cm { border-top: 1px solid var(--ink); box-shadow: none; }
#cc-main .cm__title, #cc-main .pm__title { font-weight: 800; letter-spacing: var(--tracking-sub); }
#cc-main .cm__btn, #cc-main .pm__btn { font-weight: 700; text-transform: none; }
#cc-main .pm { box-shadow: none; border: 1px solid var(--ink); }
.footer-cookies { all: unset; cursor: pointer; margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--bg); }
.footer-cookies:hover { text-decoration: underline; text-underline-offset: 4px; }