/* ===== Interim HR Stadtseiten, Prefix: ihs- =====
   Acht Seiten teilen sich diese Datei: Berlin, Hamburg, Muenchen, Koeln,
   Leipzig, Freiburg, Muenster, Duesseldorf. Sie unterscheiden sich im Text,
   nicht in der Gestaltung. Wer eine neunte Stadt anlegt, kopiert eine
   bestehende Seite und aendert nur den Inhalt: keine Zeile CSS noetig.

   Neu geschrieben am 2026-09-05, Umbau auf das Haus-Layout. Vorher stand
   der Regelsatz in style.css und wurde damit auf allen 47 Seiten geladen,
   obwohl ihn acht brauchen. Die Hero-Figur lag dort noch einmal 3.800
   Zeilen tiefer und war vom Rest ihres Prefixes getrennt.

   Was sich gestalterisch geaendert hat, jeweils gegen die Regeltabelle
   in CLAUDE.md:

   - Hero hell, flach und einspaltig nach .hk-hero--index. Vorher dunkel,
     zweispaltig, mit Radial-Ueberlagerung
   - ohne die gelbe Marke. Startseite, Ueber-uns, Kontakt und Preise tragen
     sie; acht Stadtseiten mehr machen aus dem Signal ein Muster. Dieselbe
     Entscheidung wie auf der Karriere- und der Nachhaltigkeitsseite
   - Icon-Kacheln auf --bg-teal sind blanken Icons in Teal gewichen, die
     Regeltabelle fuehrt "Pastell-Kachel dahinter" als Anti-Pattern
   - Einsatzfaelle und Ablauf laufen im 1px-Raster statt als Kartenwand
   - .ihs-stats-box war ein 135deg-Verlauf auf einer Karte. Verlaeufe sind
     dunklen Heroes vorbehalten, nicht Flaechen
   - kein font-weight 800 mehr. Die drei 800er-Regeln standen in der
     Display-Liste von style.css und sind dort jetzt raus; wo eine Ziffer
     Bricolage braucht, steht --font-display in der Regel selbst
   ================================================================== */

/* ---------- Breadcrumb ----------
   Eigene Leiste ueber dem Hero, wie .hk-nk-breadcrumb-bar. Vorher lag der
   Breadcrumb im dunklen Hero und musste dessen weisse Schrift schlagen. */
.ihs-crumb-bar {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
}
.ihs-crumb-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ihs-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--subtle);
    padding: 0.75rem 0;
}
.ihs-crumb a { color: var(--primary); text-decoration: none; }
.ihs-crumb a:hover { text-decoration: underline; }

/* ---------- HERO ---------- */
.ihs-hero {
    background: var(--bg-light);
    padding: 4.5rem 0 4rem;
}
.ihs-h1 {
    font-weight: 600;
    font-size: clamp(2.4rem, 6.6vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 1.5rem 0 0;
    text-wrap: balance;
}
/* Zweite Zeile der Ueberschrift, deshalb keine eigene Ueberschriftsebene.
   Die einzige Stelle der Seite, an der Newsreader steht. */
.ihs-h1-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--primary);
    margin: 0.45rem 0 0;
}
.ihs-hero-unten {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: end;
    margin-top: 2.75rem;
}
.ihs-hero-sub {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--body);
    max-width: 40rem;
    margin: 0;
}
.ihs-hero-btns {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ihs-hero .btn-large { font-size: 0.9375rem; padding: 1rem 1.6rem; }

/* Die beiden Aussagen, die keine Zahl sind: Reichweite und Herkunft der
   Erfahrung. Sie standen vorher als zwei von vier Kacheln in der
   Trust-Reihe, zwischen zwei Zeitangaben, und lasen sich dadurch wie
   gemessene Werte. Als Zeile behaupten sie nur noch, was sie sind. */
.ihs-hero-orte {
    margin: 1.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--subtle);
}
.ihs-hero-orte strong { color: var(--text); font-weight: 700; }

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

/* ---------- Remote oder vor Ort ----------
   Flaches --dark. Nimmt die Sektion auf, die vorher .ihs-why-grid hiess
   und rechts eine Kachel mit 135deg-Verlauf trug. In der Kachel standen
   drei Zahlen in einem zweispaltigen Raster, die dritte stand also allein
   in der zweiten Zeile. Zwei davon wiederholten die Trust-Reihe des Hero
   woertlich und stehen jetzt einmal, oben in den Kennzahlen.
   An ihrer Stelle steht die Hero-Figur, die vorher im Hero sass. */
.ihs-remote {
    background: var(--dark);
    padding: 5.5rem 0;
}
.ihs-remote-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
}
/* --primary kaeme auf --dark nur auf 2,3:1. Auf dunklem Grund traegt
   --primary-glow, die Palettenregel laesst dafuer keine zweite Lesart. */
.ihs-remote .hk-eyebrow { color: var(--primary-glow); }
.ihs-remote .hk-eyebrow::before { background: var(--primary-glow); }
.ihs-remote-text h2 {
    font-size: clamp(1.85rem, 3.6vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--white);
    margin: 1.1rem 0 1.1rem;
}
.ihs-remote-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--on-dark);
    margin: 0 0 1rem;
    max-width: 52ch;
}
.ihs-remote-text .btn { margin-top: 0.75rem; }

/* ---------- Einsatzfaelle ----------
   1px-Raster statt Kartenwand, dieselbe Entscheidung wie bei
   .hk-kar-rollen-grid und .hk-nk-values-grid. */
.ihs-faelle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.ihs-fall {
    background: var(--white);
    padding: 1.6rem 1.7rem 1.8rem;
    display: flex;
    flex-direction: column;
    transition: background 0.15s ease;
}
.ihs-fall:hover { background: var(--bg-teal); }
/* Blank in Teal. Vorher eine 44px-Kachel auf --bg-teal. */
.ihs-fall-icon {
    color: var(--primary);
    display: flex;
    margin-bottom: 0.9rem;
}
.ihs-fall-icon svg { width: 24px; height: 24px; }
.ihs-fall h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.ihs-fall p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--body);
    margin: 0;
}

/* ---------- Ablauf ----------
   Spalten mit Trennlinien, wie .hk-kar-steps. Die vier Schritte waren
   vier Karten mit einer gefuellten 44px-Kreisziffer darin. */
.ihs-schritte {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}
.ihs-schritt {
    background: var(--white);
    padding: 1.9rem 1.5rem 2rem 0;
}
.ihs-schritt:not(:first-child) { padding-left: 1.5rem; }
.ihs-schritt-num {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--primary-dark);
    margin-bottom: 0.7rem;
}
.ihs-schritt h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.6rem;
}
.ihs-schritt p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--body);
    margin: 0;
}
/* Die Dauer war ein Pill auf --bg-teal und damit ein zweites Badge neben
   der Ziffer. Jetzt eine Zeile ueber einer Haarlinie. */
.ihs-schritt-dauer {
    display: block;
    margin-top: 1rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--subtle);
}

/* ===== Hero-Figur =====
   Ein durchgehender Balken fuer die laufende Arbeit, darunter die wenigen
   Anlaesse, fuer die wir in die Stadt kommen. Beide Aussagen stehen so im
   FAQ der Seite. Die Anlaesse sind je Stadt andere, mal drei, mal zwei.
   Keine Mandats-Behauptung fuer eine bestimmte Stadt.

   Bewusst NICHT die Aussage der Figur auf /interim-hr (Dauer bis zur
   Neubesetzung) und nicht die der Kennzahlen daneben (Start in ~1 Woche).

   Drei getrennte Formvokabulare, damit nichts verschmilzt:
   dicker Balken ist die laufende Arbeit, Haarlinie ist nur Verbinder,
   gefuellte Punkte sind die Anlaesse.

   Die Kontraste wurden gegen #0d4a43 gemessen, das helle Ende des alten
   Hero-Verlaufs, also gegen den unguenstigsten Fall:
   Balken --primary-glow 6,41:1 und --primary-bright 5,09:1 (Grafik
   braucht 3:1), Balkenschrift --dark auf dem Balken 12,07:1 bzw. 9,59:1,
   Weiss 9,48:1, das gedaempfte rgba(255,255,255,0.72) 5,40:1.
   Die Figur steht seit dem 2026-09-05 auf flachem --dark (#08312d) und
   damit auf einem dunkleren Grund als gemessen: jeder dieser Werte wird
   groesser, keiner kleiner. Das Marken-Teal --primary kaeme hier nur auf
   2,53:1 und ist deshalb nirgends als Flaeche verwendet. */
.ihs-fig { margin-right: auto; }

.ihs-lauf { margin-bottom: 1.7rem; }

/* Die laufende Arbeit. Spannt die volle Breite des Kastens, weil genau das
   die Aussage ist: das hier laeuft durchgehend, ohne Ortsbindung. */
.ihs-band {
    position: relative;
    display: block;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--primary-glow), var(--primary-bright));
    transform: scaleX(0);
    transform-origin: left center;
    animation: hk-figure-wach 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}
/* Blendet erst ein, wenn der Balken ausgewachsen ist. Waere sie frueher da,
   wuerde die scaleX-Animation der Elternflaeche sie stauchen. */
.ihs-band-txt {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--dark);
    white-space: nowrap;
    opacity: 0;
    animation: hk-figure-ein 0.45s ease-out 0.85s forwards;
}

/* Reiner Verbinder vom Balken zu den Anlaessen, bewusst duenn und blass,
   damit er nicht als zweite Aktivitaet gelesen wird. Endet in der Mitte
   des letzten Punktes: Zeilenhoehe 34px, also 17px ueber der Unterkante. */
.ihs-anlaesse {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0.85rem 0 0;
}
.ihs-anlaesse::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 17px;
    width: 2px;
    border-radius: 1px;
    background: rgba(94, 234, 212, 0.38);
    transform: scaleY(0);
    transform-origin: top center;
    animation: ihs-fallen 0.35s ease-out 0.9s forwards;
}

.ihs-anlass {
    display: grid;
    grid-template-columns: 14px 1fr;
    align-items: center;
    gap: 0.75rem;
    min-height: 34px;
    list-style: none;
    opacity: 0;
    transform: translateX(-7px);
    animation: ihs-anlass-ein 0.45s ease-out forwards;
    animation-delay: calc(1s + var(--i) * 0.13s);
}

.ihs-punkt {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-glow);
    box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.15);
}

.ihs-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
}

.ihs-ort {
    margin: 0.8rem 0 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    opacity: 0;
    animation: hk-figure-ein 0.45s ease-out 1.45s forwards;
}

@keyframes ihs-fallen     { to { transform: scaleY(1); } }
@keyframes ihs-anlass-ein { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ihs-band             { animation: none; transform: scaleX(1); }
    .ihs-band-txt         { animation: none; opacity: 1; }
    .ihs-anlaesse::before { animation: none; transform: scaleY(1); }
    .ihs-anlass           { animation: none; opacity: 1; transform: none; }
    .ihs-ort              { animation: none; opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .ihs-hero { padding: 3.5rem 0 3rem; }
    .ihs-hero-unten {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        align-items: start;
    }
    .ihs-hero-btns { justify-content: flex-start; }
    .ihs-remote { padding: 4rem 0; }
    .ihs-remote-inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .ihs-fig { margin-left: auto; margin-right: auto; }
    .ihs-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ihs-schritt:nth-child(odd) { padding-left: 0; }
    .ihs-schritt:nth-child(even) { padding-left: 1.5rem; }
}

@media (max-width: 560px) {
    .ihs-kennzahlen { grid-template-columns: minmax(0, 1fr); }
    .ihs-kennzahl,
    .ihs-kennzahl:not(:first-child) { padding: 1.1rem 0 1.2rem; }
    .ihs-schritte { grid-template-columns: minmax(0, 1fr); }
    .ihs-schritt,
    .ihs-schritt:nth-child(odd),
    .ihs-schritt:nth-child(even) { padding: 1.6rem 0 1.7rem; }
    .ihs-band  { height: 30px; }
    .ihs-name  { font-size: 0.79rem; }
}