/* ===== Startseite, Phase 3 der Portierung =====
   Neu ab 2026-08-22. Enthaelt nur, was auf index.php eigen ist. Alles,
   was mehrere Seiten teilen, bleibt in style.css.

   Die Klassen heissen weiter hk-index-*, wie der Bestand auf dieser Seite.
   Der Hero traegt zusaetzlich .hk-hero--index, damit die 16 anderen Seiten
   mit .hk-hero unangetastet bleiben.
   ================================================================== */

/* ---------- 1. HERO ---------- */

/* Der INDEX-PAGE-Block in style.css setzt .hk-hero auf padding-top 96px
   und den dunklen Verlauf. Beides wird hier ueberschrieben; die
   Spezifitaet reicht, weil diese Datei nach style.css geladen wird und
   der Selektor drei Klassen traegt. */
.hk-hero.hk-hero--light.hk-hero--index {
    background: var(--bg-light);
    padding: 5.5rem 0 0;
}
.hk-hero--index .hk-hero-eyebrow { color: var(--primary-dark); }
.hk-hero--index .hk-hero-eyebrow::before { background: var(--primary-dark); }

/* Die Ueberschrift. 600 statt 800, weil Bricolage bei dieser Groesse
   sonst zulaeuft, und weil die Kontur daneben Gewicht braucht, um nicht
   duenn zu wirken. */
.hk-hero--index .hk-index-h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.75rem, 9.5vw, 8.5rem);
    line-height: 0.88;
    letter-spacing: -0.045em;
    color: var(--text);
    margin: 1.6rem 0 0;
    text-wrap: balance;
}

/* "HR" als Kontur. Ohne die @supports-Regel waere das Wort in Browsern
   ohne -webkit-text-stroke unsichtbar, weil color: transparent bleibt. */
.hk-hero--index .hk-index-h1-kontur {
    color: transparent;
    -webkit-text-stroke: 2px var(--text);
}
@supports not ((-webkit-text-stroke: 2px currentColor) or (text-stroke: 2px currentColor)) {
    .hk-hero--index .hk-index-h1-kontur { color: var(--text); }
}

/* "klar" auf der gelben Marke. --accent-bright ist Flaechenfarbe, --text
   darauf traegt 12,06:1. Der leichte Dreh nimmt dem Rechteck das
   Schablonenhafte. */
.hk-hero--index .hk-index-h1-marke {
    display: inline-block;
    background: var(--accent-bright);
    color: var(--text);
    padding: 0 0.07em 0.04em;
    transform: rotate(-1.6deg);
}

/* Die einzige Stelle, an der Newsreader steht. Zweite Zeile der
   Ueberschrift, deshalb keine eigene Ueberschriftsebene. */
.hk-hero--index .hk-index-h1-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.75rem, 4.4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--primary);
    margin: 0.5rem 0 0;
}

/* Die Knoepfe im Hero laufen schmaler als .btn-large sonst: mit der
   Standardgroesse messen die beiden zusammen 511px und passen um 1,2px
   nicht in die 509,8px breite Rasterspalte. Statt die Spalte zu
   verbreitern die Knoepfe auf das Mass des Entwurfs (15px / 16-26px). */
.hk-hero--index .hk-hero-btns { gap: 0.75rem; }
.hk-hero--index .btn-large {
    font-size: 0.9375rem;
    padding: 1rem 1.6rem;
}

.hk-index-hero-unten {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: end;
    margin-top: 3rem;
}
.hk-hero--index .hk-hero-sub {
    color: var(--body);
    max-width: 40rem;
    margin: 0;
}

/* Kennzahlen. Der 1px-Abstand auf einer Linienfarbe erzeugt die
   Trennstriche, ohne dass jede Zelle einen eigenen Rand braucht. */
.hk-index-kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    margin-top: 4rem;
}
.hk-index-kennzahl {
    background: var(--bg-light);
    padding: 1.6rem 1.25rem 1.9rem 0;
}
.hk-index-kennzahl:not(:first-child) { padding-left: 1.25rem; }
.hk-index-kennzahl-wert {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.8vw, 2.6rem);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
}
.hk-index-kennzahl-txt {
    font-size: 0.875rem;
    color: var(--subtle);
    margin-top: 0.4rem;
}

/* ---------- 1b. ABGRENZUNGSBAND ---------- */

/* --text, nicht --dark. Der Entwurf setzt hier #101614, also den Ink-Wert
   und nicht das Petrol der Dunkelsektionen. Das Band ist damit eine eigene
   Ebene zwischen Hero und Diagramm und faellt nicht mit der Sektion
   darunter zusammen. Gelb darauf: 12,06:1 statt 9,30:1 auf --dark. */
.hk-index-band {
    /* Kein margin-top: das Band schliesst direkt an die Kennzahlenreihe des
       Hero an. Die 4.5rem davor lasen sich als Luecke, nicht als Abstand,
       weil der Hero selbst padding-bottom: 0 hat und mit der Reihe endet. */
    margin-top: 0;
    background: var(--text);
    overflow: hidden;
    padding: 1.15rem 0;
    display: flex;
}
.hk-index-band-lauf {
    display: flex;
    flex: none;
    white-space: nowrap;
    animation: hk-index-lauf 34s linear infinite;
}
.hk-index-band-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3.4vw, 2.75rem);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--accent-bright);
}
@keyframes hk-index-lauf {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Steht das Band still, ist die zweite Kopie sichtbarer Blindtext.
   Sie traegt nur den nahtlosen Umlauf. */
@media (prefers-reduced-motion: reduce) {
    .hk-index-band-lauf { animation: none; }
    .hk-index-band-text--kopie { display: none; }
}

/* ---------- 1c. NICHT JEDE HR-LUECKE IST EINE STELLE ---------- */

/* Flaeche flach, nicht als Verlauf. Der Entwurf setzt hier ein einziges
   #08312D; der Verlauf nach --dark-mid liess die Sektion nach rechts
   aufhellen und nahm dem Diagramm die ruhige Grundflaeche.
   Schrift ist Creme (#EDE9DF), nicht Weiss: 11,64:1, und es passt zum
   warmen Papier der hellen Sektionen. */
.hk-index-luecke {
    background: var(--dark);
    color: #ede9df;
    padding: 5.5rem 0;
}
/* Die Eyebrow steht hier gelb, nicht teal. Auf dem dunklen Grund ist Gelb
   die Akzentfarbe, --primary kaeme auf 2,3:1. */
.hk-index-luecke .hk-eyebrow { color: var(--accent-bright); }
.hk-index-luecke .hk-eyebrow::before { background: var(--accent-bright); }
.hk-index-luecke-titel {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 5.2vw, 4.25rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: #ede9df;
    margin: 1.1rem 0 0;
}
.hk-index-luecke-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 4rem;
    align-items: end;
    margin-top: 3.25rem;
}
.hk-index-luecke-text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(237, 233, 223, 0.75);
    margin: 0 0 1.75rem;
    max-width: 46ch;
}

/* Umschalter. Pill, wie jede Schaltflaeche im Haus. */
.hk-index-schalter {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(237, 233, 223, 0.28);
    border-radius: 50px;
}
.hk-index-schalter-btn {
    border: none;
    background: transparent;
    color: rgba(237, 233, 223, 0.7);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.hk-index-schalter-btn:hover { color: #ede9df; }
.hk-index-schalter-btn.is-aktiv {
    background: var(--accent-bright);
    color: var(--text);
}
.hk-index-schalter-btn:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.hk-index-luecke-zahlen {
    display: flex;
    gap: 2.25rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(237, 233, 223, 0.2);
}
.hk-index-luecke-wert {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--accent-bright);
}
.hk-index-luecke-label {
    font-size: 0.85rem;
    color: rgba(237, 233, 223, 0.6);
    margin-top: 0.4rem;
}

/* Zwoelf Monatsbalken. Hoehe kommt aus --h, der Versatz beim Umschalten
   aus --i, damit sie nacheinander wachsen statt gleichzeitig. */
.hk-index-balken {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 230px;
    border-bottom: 1px solid rgba(237, 233, 223, 0.3);
}
.hk-index-balken span {
    flex: 1;
    height: var(--h, 100%);
    background: rgba(237, 233, 223, 0.35);
    transition: height 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
                background 0.4s ease;
    transition-delay: calc(var(--i, 0) * 25ms);
}
.hk-index-balken[data-modus="bedarf"] span { background: var(--accent-bright); }

@media (prefers-reduced-motion: reduce) {
    .hk-index-balken span { transition: none; }
}

.hk-index-balken-achse {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Der Entwurf setzt hier .45, das ergibt 3,54:1 und reisst AA bei
       11px. .6 traegt 5,12:1 und bleibt trotzdem deutlich leiser als
       der Fliesstext daneben. */
    color: rgba(237, 233, 223, 0.6);
}
.hk-index-balken-note {
    font-size: 0.875rem;
    color: rgba(237, 233, 223, 0.6);
    margin: 1.25rem 0 0;
    min-height: 2.75rem;
}

.hk-index-luecke-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-top: 3.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(237, 233, 223, 0.2);
    font-size: 0.9375rem;
}
.hk-index-luecke-fuss strong { color: #ede9df; font-weight: 600; }
.hk-index-luecke-fuss span { color: rgba(237, 233, 223, 0.6); }

/* ---------- 2. LEISTUNGEN ---------- */

.hk-index-leistungen { margin-top: 3rem; }

.hk-index-leistung { border-top: 1px solid var(--border); }
.hk-index-leistung:last-of-type { border-bottom: 1px solid var(--border); }

.hk-index-leistung > summary {
    display: flex;
    align-items: baseline;
    gap: 1.75rem;
    padding: 1.9rem 0;
    cursor: pointer;
    list-style: none;
    transition: padding-left 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hk-index-leistung > summary::-webkit-details-marker { display: none; }
.hk-index-leistung > summary:hover { padding-left: 1rem; }
.hk-index-leistung > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.hk-index-leistung-num {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--primary);
    flex: none;
}
.hk-index-leistung-name {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text);
}

/* Plus, das beim Aufklappen zum Minus wird. Als Pseudo-Elemente statt
   als Zeichen, damit der Wechsel ohne JS laeuft. */
.hk-index-leistung-zeichen {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    align-self: center;
}
.hk-index-leistung-zeichen::before,
.hk-index-leistung-zeichen::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    height: 2px;
    background: var(--subtle);
    transition: transform 0.25s ease;
}
.hk-index-leistung-zeichen::after { transform: rotate(90deg); }
.hk-index-leistung[open] .hk-index-leistung-zeichen::after { transform: rotate(0deg); }

.hk-index-leistung-inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    padding: 0 0 2.5rem 2.6rem;
}
.hk-index-leistung-inhalt p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--body);
    max-width: 60ch;
    margin: 0 0 1rem;
}
.hk-index-leistung-fakten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.9rem;
    color: var(--subtle);
}
.hk-index-leistung-fakten li {
    border-top: 1px solid var(--border);
    padding: 0.65rem 0;
}

/* ---------- Preisband ---------- */

.hk-index-preisband {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 1.5rem 2.5rem;
    align-items: end;
    margin-top: 3rem;
    padding: 1.75rem 0 0;
    border-top: 1px solid var(--border);
    color: inherit;
    transition: border-color 0.2s;
}
.hk-index-preisband:hover { border-color: var(--primary); }
.hk-index-preis { display: block; }
.hk-index-preis-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.hk-index-preis-wert {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    margin-top: 0.35rem;
}
.hk-index-preis-txt {
    display: block;
    font-size: 0.85rem;
    color: var(--subtle);
    margin-top: 0.15rem;
}
.hk-index-preis-cta {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    padding-bottom: 0.35rem;
}

/* ---------- 4. TEAM ----------
   Der Entwurf setzt die Portraits ins Hochformat und drei nebeneinander
   ueber die volle Breite. Der Bestand hatte 1:1 in einem 800px-Raster.
   .hk-index-team-grid steht in style.css und wird auch von ueber-uns.php
   benutzt, deshalb greift die Aenderung hier ueber den Sektionskontext. */
.hk-index-team .hk-index-team-grid {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.75rem;
}
.hk-index-team .hk-index-team-card { grid-column: auto; }
.hk-index-team .hk-index-team-photo { aspect-ratio: 4 / 5; }

/* ---------- Mobil ----------
   Der Entwurf bringt keinen einzigen Breakpoint mit. Die Raster hier sind
   deshalb von Hand gesetzt, alle als minmax(0, 1fr): deutsche Komposita
   sprengen sonst die Spur, genau daran hing der Overflow auf /hr-audit. */

@media (max-width: 900px) {
    .hk-index-hero-unten,
    .hk-index-luecke-grid,
    .hk-index-leistung-inhalt {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    .hk-index-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hk-index-kennzahl:nth-child(odd) { padding-left: 0; }
    .hk-index-kennzahl:nth-child(even) { padding-left: 1.25rem; }
    .hk-index-preisband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hk-index-team .hk-index-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .hk-hero.hk-hero--light.hk-hero--index { padding-top: 3.5rem; }
    .hk-hero--index .hk-index-h1 { line-height: 0.95; }
    .hk-index-kennzahlen { grid-template-columns: minmax(0, 1fr); }
    .hk-index-kennzahl,
    .hk-index-kennzahl:nth-child(even) { padding-left: 0; }
    .hk-index-luecke { padding: 3.5rem 0; }
    .hk-index-luecke-fuss { gap: 1.25rem; }
    .hk-index-schalter { display: flex; }
    .hk-index-leistung > summary { gap: 1rem; padding: 1.4rem 0; }
    .hk-index-leistung-inhalt { padding-left: 0; }
    .hk-index-preisband { grid-template-columns: minmax(0, 1fr); }
    .hk-index-team .hk-index-team-grid { grid-template-columns: minmax(0, 1fr); }
    .hk-index-balken { height: 160px; gap: 3px; }
}

/* ==========================================================================
   Phase 3b: die Sektionen, die beim ersten Durchgang in ihrer alten Form
   stehengeblieben sind. Gemeinsames Vokabular des Entwurfs:
   grosse Bricolage-Ueberschrift, Haarlinien statt Karten, Pillen mit
   1px-Rand, Newsreader kursiv als Zwischenton.
   ========================================================================== */

/* Die grosse Sektionsueberschrift. clamp(38px, 5.6vw, 80px) im Entwurf;
   hier bei 4.25rem gedeckelt, weil die Lesespalte schmaler ist als dort. */
.hk-index-gross {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 5.2vw, 4.25rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}
.hk-index-kopf-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.hk-index-kopf-sub {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--subtle);
    margin: 0;
    max-width: 42ch;
}

/* ---------- Was uns anders macht: 2x2 mit Trennlinien ---------- */
.hk-index-why { padding: 6rem 0 0; }
.hk-index-raster2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 3rem;
    border-top: 1px solid var(--border);
}
.hk-index-raster2-zelle {
    padding: 2.25rem 3rem 2.5rem 0;
    border-bottom: 1px solid var(--border);
}
.hk-index-raster2-zelle:nth-child(odd)  { border-right: 1px solid var(--border); }
.hk-index-raster2-zelle:nth-child(even) { padding: 2.25rem 0 2.5rem 3rem; }
.hk-index-raster2-zelle h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6875rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
    margin: 0;
}
.hk-index-raster2-zelle p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--body);
    margin: 0.75rem 0 0;
    max-width: 46ch;
}

/* ---------- Deine Lage: Umschalter links, Tafel rechts ---------- */
.hk-index-lage { padding: 7rem 0 0; }
.hk-index-lage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: start;
    margin-top: 3rem;
}
.hk-index-lage-liste { display: flex; flex-direction: column; gap: 2px; }
.hk-index-lage-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text);
    border: none;
    border-top: 1px solid var(--border);
    padding: 1.35rem 0;
    font-family: inherit;
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, padding 0.2s;
}
.hk-index-lage-btn:last-child { border-bottom: 1px solid var(--border); }
.hk-index-lage-btn > span:first-child { flex: 1; }
.hk-index-lage-pfeil { opacity: 0.3; transition: opacity 0.2s, color 0.2s; }
.hk-index-lage-btn:hover { color: var(--primary); }
.hk-index-lage-btn:hover .hk-index-lage-pfeil { opacity: 1; }
.hk-index-lage-btn.is-aktiv {
    background: var(--text);
    color: var(--bg-light);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.hk-index-lage-btn.is-aktiv .hk-index-lage-pfeil {
    opacity: 1;
    color: var(--accent-bright);
}
.hk-index-lage-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.hk-index-lage-tafel {
    background: linear-gradient(135deg, var(--dark), var(--dark-mid));
    color: #fff;
    padding: 2.5rem;
}
.hk-index-lage-kicker {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-bright);
}
.hk-index-lage-tafel h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 1rem 0 0;
}
.hk-index-lage-tafel p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--on-dark);
    margin: 1.1rem 0 0;
    max-width: 46ch;
}
.hk-index-lage-fakten {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.9rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hk-index-lage-fakten span {
    display: block;
    font-size: 0.8125rem;
    color: var(--on-dark);
}
.hk-index-lage-fakten strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.25rem;
}
.hk-index-lage-cta {
    display: inline-block;
    margin-top: 1.75rem;
    background: var(--accent-bright);
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.85rem 1.5rem;
    border-radius: 50px;
    transition: background 0.2s;
}
.hk-index-lage-cta:hover { background: #f7dc55; color: var(--text); }
.hk-index-lage-fuss {
    margin-top: 2rem;
    font-size: 0.9375rem;
    color: var(--subtle);
}

/* ---------- Wir kennen die Tools ---------- */
.hk-index-tools { padding: 6rem 0 0; }
.hk-index-tools-grid {
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
    align-items: center;
}
.hk-index-tools-titel {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.875rem;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0;
}
.hk-index-tools-sub {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--subtle);
    margin: 0.6rem 0 0.9rem;
}
.hk-index-tools-pillen { display: flex; flex-wrap: wrap; gap: 0.625rem; }
/* --- 5a. Eigene Werkzeuge ---
   Das Raster selbst ist global (.hk-wz-* in style.css), hier steht nur der
   Abstand zur Tool-Sektion darueber und die Schlusszeile. */
.hk-index-werkzeuge { padding: 4.5rem 0 0; }
.hk-index-werkzeuge-mehr { margin: 1.5rem 0 0; font-size: .92rem; }
.hk-index-werkzeuge-mehr a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.hk-index-werkzeuge-mehr a:hover { text-decoration: underline; }

.hk-index-tools-pillen span {
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 0.7rem 1.25rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* ---------- Was HRklar nicht ist ---------- */
.hk-index-nicht { padding: 7rem 0 0; }
.hk-index-nicht-kopf {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
}
/* Zweite Stelle mit Newsreader auf der Seite, nach der Hero-Zeile. */
.hk-index-nicht-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--muted);
    margin: 0;
}
.hk-index-nicht-raster {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-top: 2.75rem;
}
.hk-index-nicht-zelle {
    background: var(--bg-light);
    padding: 1.75rem 1.5rem 2rem;
}
.hk-index-nicht-zeichen { font-size: 1.125rem; color: var(--primary); }
.hk-index-nicht-zelle h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
    margin: 0.875rem 0 0;
}
.hk-index-nicht-zelle p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--body);
    margin: 0.625rem 0 0;
}

/* ---------- Kundenstimme ----------
   Dieselbe Haarlinie und dieselbe Spaltenteilung wie "Wir kennen die
   Tools" darueber, damit die Sektion zwischen Raster und Partnerband
   nicht als Fremdkoerper steht. Zitat links, Quelle rechts.

   Die Logos stehen in Originalfarbe, nicht grau gefiltert. Der graue
   Logostreifen mit Farbe beim Ueberfahren ist genau das Baukasten-Zitat,
   das das Design-System sonst vermeidet, und bei zwei echten Logos
   traegt die Farbe die Glaubwuerdigkeit. Sie sind nicht verlinkt: sie
   sind Beleg, nicht Navigation.

   Die beiden Dateien haben sehr verschiedene Seitenverhaeltnisse
   (300x240 gegen 448x62). Auf eine gemeinsame Box normiert wuerde
   ecowindow doppelt so gross wirken wie der Fenstermaxx-Schriftzug.
   Deshalb je Logo auf gleiche optische Versalhoehe gebracht: ecowindow
   ueber die Hoehe, Fenstermaxx ueber die Breite. Beide landen bei rund
   17px Versalhoehe. Wer ein Logo austauscht, misst das nach, statt eine
   gemeinsame max-height zu setzen. */
/* Einzige Sektion mit Bodenabstand: danach kommt das Partnerband, und das
   bringt keine eigene Vorluft mit (padding: 40px 0). Die uebrigen Sektionen
   haben nur padding-top, weil dort immer eine weitere Sektion folgt, die
   den Abstand selbst setzt. Ohne die 4rem klebt die letzte Zitatzeile an
   der Bandkante. */
.hk-index-stimme { padding: 7rem 0 4rem; }
.hk-index-stimme-figur {
    margin: 0;
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.hk-index-stimme-zitat {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    text-wrap: pretty;
}
.hk-index-stimme-quelle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    /* Sitzt auf der Grundlinie der ersten Zitatzeile, nicht an der
       Oberkante des Eyebrow. */
    padding-top: 2.35rem;
}
.hk-index-stimme-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
    color: var(--text);
}
.hk-index-stimme-rolle {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--subtle);
}
.hk-index-stimme-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 1.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    width: 100%;
}
.hk-index-stimme-logo { display: block; height: auto; }
.hk-index-stimme-logo--eco { width: 82px; }   /* 66px hoch */
.hk-index-stimme-logo--fm  { width: 185px; }  /* 26px hoch */

/* ---------- FAQ ---------- */
.hk-index-faq { padding: 7rem 0 0; }
.hk-index-faq-liste { margin-top: 2.75rem; }
.hk-index-faq-item { border-top: 1px solid var(--border); }
.hk-index-faq-item:last-child { border-bottom: 1px solid var(--border); }
.hk-index-faq-item > summary {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.5rem 0;
    font-size: 1.3125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: padding-left 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hk-index-faq-item > summary::-webkit-details-marker { display: none; }
.hk-index-faq-item > summary:hover { padding-left: 0.75rem; }
.hk-index-faq-item > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.hk-index-faq-item > summary > span:first-child { flex: 1; text-wrap: pretty; }
.hk-index-faq-zeichen {
    position: relative;
    width: 16px;
    height: 16px;
    flex: none;
    align-self: center;
}
.hk-index-faq-zeichen::before,
.hk-index-faq-zeichen::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    height: 2px;
    background: var(--subtle);
    transition: transform 0.25s ease;
}
.hk-index-faq-zeichen::after { transform: rotate(90deg); }
.hk-index-faq-item[open] .hk-index-faq-zeichen::after { transform: rotate(0deg); }
.hk-index-faq-item > p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--body);
    margin: 0;
    padding: 0 5rem 1.75rem 0;
    max-width: 80ch;
}

/* ---------- Kontakt: Angaben links, Formular rechts ---------- */
.hk-angebot--zweispaltig .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5rem;
    align-items: start;
}
.hk-angebot-intro-titel {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4.6vw, 3.75rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    margin: 0;
}
.hk-angebot-intro-sub {
    font-size: 1.1875rem;
    line-height: 1.6;
    margin: 1.4rem 0 0;
    max-width: 44ch;
}
.hk-angebot-intro-kontakt {
    margin-top: 2.4rem;
    padding-top: 1.65rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    font-size: 1rem;
}
.hk-angebot-intro-termin { font-weight: 600; }
.hk-angebot-intro-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 1.375rem;
    line-height: 1.4;
    color: var(--muted);
    margin: 2.4rem 0 0;
    max-width: 32ch;
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
    .hk-index-raster2,
    .hk-index-nicht-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hk-index-lage-grid,
    .hk-index-tools-grid,
    .hk-index-stimme-figur,
    .hk-angebot--zweispaltig .container {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
    /* Einspaltig traegt die Quelle keinen Grundlinien-Versatz mehr. */
    .hk-index-stimme-quelle { padding-top: 0; }
}
@media (max-width: 560px) {
    .hk-index-why, .hk-index-tools { padding-top: 3.5rem; }
    .hk-index-werkzeuge { padding-top: 3rem; }
    .hk-index-lage, .hk-index-nicht, .hk-index-faq { padding-top: 4rem; }
    .hk-index-stimme { padding-top: 4rem; }
    .hk-index-raster2,
    .hk-index-nicht-raster { grid-template-columns: minmax(0, 1fr); }
    .hk-index-raster2-zelle,
    .hk-index-raster2-zelle:nth-child(even) { padding: 1.6rem 0 1.75rem; }
    .hk-index-raster2-zelle:nth-child(odd) { border-right: none; }
    .hk-index-lage-tafel { padding: 1.75rem 1.5rem; }
    .hk-index-faq-item > p { padding-right: 0; }
    .hk-index-faq-item > summary { font-size: 1.125rem; gap: 1rem; }
}

/* ---------- Kontakt dunkel, wie im Entwurf ----------
   Die Eingabefelder bleiben weiss: weisse Felder auf dunklem Grund sind
   der Normalfall und gut lesbar. Angepasst werden nur die Beschriftungen,
   die Karte und der Absendeknopf. */
.hk-angebot--zweispaltig {
    background: var(--dark);
    color: #f2efe7;
}
.hk-angebot--zweispaltig .hk-angebot-card {
    max-width: none;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.hk-angebot--zweispaltig .hk-angebot-intro-sub { color: var(--on-dark); }
.hk-angebot--zweispaltig .hk-angebot-intro-kontakt {
    border-top-color: rgba(255, 255, 255, 0.2);
}
.hk-angebot--zweispaltig .hk-angebot-intro-kontakt a { color: rgba(255, 255, 255, 0.82); }
.hk-angebot--zweispaltig .hk-angebot-intro-kontakt a:hover { color: #fff; }
.hk-angebot--zweispaltig .hk-angebot-intro-termin { color: var(--accent-bright) !important; }
.hk-angebot--zweispaltig .hk-angebot-intro-serif { color: var(--on-dark); }
.hk-angebot--zweispaltig .hk-angebot-field label { color: #f2efe7; }
.hk-angebot--zweispaltig .hk-angebot-optional,
.hk-angebot--zweispaltig .hk-angebot-privacy { color: var(--on-dark); }
.hk-angebot--zweispaltig .hk-angebot-privacy a { color: var(--primary-glow); }
/* Gelb wie der Knopf in der Lage-Tafel: der einzige Akzent, der auf
   dunklem Grund als Flaeche traegt. */
.hk-angebot--zweispaltig .hk-angebot-btn {
    background: var(--accent-bright);
    color: var(--text);
}
.hk-angebot--zweispaltig .hk-angebot-btn:hover { background: #f7dc55; }