/* ==========================================================================
   Jubiläumsseite – Varianten A/B im Look von www.herrmann-cnc.de
   Werte (Farben, Schriftgrößen, Buttons, Flächen) aus dem WordPress-Theme
   „herrmann-cnc“ gemessen bzw. übernommen. Kopf- und Fußzeile kommen 1:1 aus
   header-original.css und original-components.css.
   ========================================================================== */

:root {
  --hc-blue: #006ab7;
  --hc-navy: #002743;
  --hc-navy-2: #01355b;
  --hc-blue-dark: #00497d;
  --hc-text: #28323b;
  --hc-grey: #ebebeb;            /* rgba(156,156,156,.21) auf Weiß */
  --hc-line: #d9dde1;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 132px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: #fff; color: var(--hc-text);
  font-family: "Nexa Book", "Nexa", system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 29px;
  overflow-x: clip;
}
main { overflow-x: clip; } /* Einblend-Animation im Zeitstrahl (110 px seitlich) darf die Seite nicht breiter machen */
img { display: block; max-width: 100%; }
a { color: var(--hc-blue); text-decoration: none; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
strong, b { font-weight: 700; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(-110px); } to { opacity: 1; transform: none; } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(110px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.2); } 65% { transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }

.hc-container { max-width: 1300px; margin: 0 auto; padding: 0 48px; }

/* ---------- Typografie wie im Theme ---------- */
.hc-h1 { font-size: 50px; line-height: 59px; letter-spacing: -0.5px; color: var(--hc-blue); }
.hc-h2 { font-size: 60px; line-height: 60px; text-transform: uppercase; color: var(--hc-text); }
.hc-h1, .hc-h2, .hc-h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.hc-h2--white { color: #fff; }
.hc-h2--blue { color: var(--hc-blue); }
.hc-h3 { font-size: 40px; line-height: 60px; color: var(--hc-text); }
.hc-kicker { font-weight: 700; font-size: 19.5px; line-height: 31px; color: var(--hc-text); margin: 0 0 18px; text-transform: uppercase; } /* 50 % größer als im Theme (13px), besser lesbar */
.hc-kicker--white { color: #fff; }
.hc-text p { margin: 0 0 1em; text-wrap: pretty; } /* verhindert einzelne Wörter in der letzten Zeile, wo der Browser es kann */
.hc-text p:last-child { margin-bottom: 0; }
.hc-text--lg { font-size: 20px; line-height: 38px; }
.hc-note { font-size: 14px; line-height: 24px; color: #6b7681; font-style: italic; }
.hc-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 3.1rem; }
.btn.is-disabled { opacity: .55; pointer-events: none; }

/* ---------- Unterseiten-Hero (wie „Über uns“) ---------- */
.hc-hero { position: relative; padding: 48px 0 0; }
.hc-hero__grid { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); align-items: center; min-height: 600px; }
.hc-hero__title { padding: 0 48px 120px max(48px, calc((100vw - 1300px) / 2 + 48px)); }
.hc-hero__title .hc-kicker { margin-bottom: 10px; }
.hc-hero__sub { margin-top: 18px; font-size: 20px; line-height: 32px; color: var(--hc-text); }
.hc-hero__sub strong { color: var(--hc-blue); }
.hc-hero__img { height: 100%; min-height: 600px; }
.hc-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hc-hero__box {
  position: relative; z-index: 2; width: min(860px, 56%); margin: -140px 6% 0 auto;
  background: var(--hc-navy); color: #fff; padding: 56px 64px 60px;
}
.hc-quote-text { font-size: 33px; line-height: 56px; }
/* Anführungszeichen wie im Theme: vorn „ (abgesenkt), hinten “ (angehoben) */
.q-open, .q-close { display: inline-block; font-size: 0.72em; line-height: 1; }
.q-open { margin-right: .5em; transform: translateY(.32em); }
.q-close { margin-left: .5em; transform: translateY(-.32em); }
.q-end { white-space: nowrap; }
.hc-hero__box .hc-text { margin-top: 22px; color: #dbe6ef; }

/* ---------- Vollflächiger Foto-Hero (wie Startseite) ---------- */
.hc-stage { position: relative; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; color: var(--stage-fg, #fff); overflow: hidden; } /* Schriftfarbe im Hero: Weiß, per Vorschau-Panel auch CI-Hellblau/-Dunkelblau */
.hc-stage__bg { position: absolute; inset: 0; }
.hc-stage__bg img { width: 100%; height: 100%; object-fit: cover; }
.hc-stage__bg picture { display: contents; } /* responsives Hero-Foto: <img> verhält sich wie bisher */
/* Hero-Foto oben verankert: wird das Fenster niedriger, fällt unten Hallenboden weg statt oben das Team */
.hc-stage.hc-stage--tint .hc-stage__bg img { object-position: 50% 0%; }
.hc-stage__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 39, 67, .78) 0%, rgba(0, 39, 67, .45) 50%, rgba(0, 39, 67, .1) 100%); }
.hc-stage__lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.hc-stage .hc-container { position: relative; width: 100%; padding-bottom: 120px; }
.hc-stage h1 { font-size: 70px; line-height: 89px; }
.hc-stage h1 .bolder { display: block; font-weight: 700; font-size: 88px; }
.hc-stage__claim { margin: 20px 0 0; font-size: 20px; line-height: 34px; }
.hc-stage__tabs { position: absolute; right: 0; bottom: 0; display: flex; background: var(--hc-blue); z-index: 2; }
.hc-stage__tabs a { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 30px; line-height: 56px; padding: 16px 34px; transition: background .3s ease; }
.hc-stage__tabs a:hover { background: var(--hc-blue-dark); color: #fff; }
.hc-stage__tabs a [class^="icon-"] { font-size: 18px; }

/* vollflächige Lasur statt Verlauf (Variante D) */
.hc-stage.hc-stage--tint .hc-stage__bg::after { background: rgba(var(--stage-rgb, 0, 106, 183), var(--stage-tint, 0)); mix-blend-mode: var(--stage-blend, normal); } /* Overlay aus (2026-10-29): Foto ist selbst farblich bearbeitet; Deckkraft über --stage-tint wieder einschaltbar */
/* Titelblock im Hero etwas tiefer als bisher (leicht unter der Mitte) */
.hc-stage.hc-stage--tint .hc-container { padding-top: 6vh; padding-bottom: 0; }
/* Titelposition per Regler: --stage-title-y 0 = oben unter der Kopfzeile, 1 = unten über der festen Kachel */
.hc-stage.hc-stage--tint .hc-container {
    /* --area-bottom: Abstand Unterzeile → Unterkante der Section = Abstand „Herrmann CNC“ → Unterzeile
       (Grundlinie Titel bis Versalhöhe Unterzeile: 49,5 / 44,5 / 40 px; Grundlinie Unterzeile liegt 13 px über Unterkante des Blocks) */
    --area-top: calc(var(--header-h) + 24px); --area-bottom: 36.5px;
    position: absolute; left: 0; right: 0; padding-top: 0;
    top: calc(var(--area-top) + (100% - var(--area-top) - var(--area-bottom)) * var(--stage-title-y, 1));
    translate: 0 calc(var(--stage-title-y, 1) * -100%); /* translate statt transform: die Einblend-Animation (fadeUp) belegt transform */
}
@media (min-width: 992px) and (max-width: 1440px) { .hc-stage.hc-stage--tint .hc-container { --area-bottom: 31.5px; } }
@media (min-width: 768px) and (max-width: 991px) { .hc-stage.hc-stage--tint .hc-container { --area-bottom: 27px; } }
@media (max-width: 767px) {
  .hc-stage.hc-stage--tint .hc-container { --area-bottom: 100px; text-align: center; } /* Handy: 32 px über der festen Kachel (67,6 px) */
  .hc-stage.hc-stage--tint .hc-stage__bg img { object-position: 62% 0%; } /* die vier Personen der vorderen Reihe (Gerhard Herrmann, Frau, beide Geschäftsführer) stehen mittig */
  .hc-stage__claim { text-wrap: balance; }
}


/* ---------- Grauer Block mit überlappendem Bild (wie Startseite) ---------- */
.hc-split { position: relative; padding: 0 0 120px; }
.hc-split__panel { position: relative; background: var(--hc-grey); width: 62%; padding: 100px 0 110px; }
.hc-split--right .hc-split__panel { margin-left: auto; }
.hc-split__content { max-width: 640px; padding: 0 48px 0 max(48px, calc((100vw - 1300px) / 2 + 48px)); }
.hc-split--right .hc-split__content { max-width: none; padding: 0 max(48px, calc((100vw - 1300px) / 2 + 48px)) 0 calc(max(48px, (100vw - 1300px) / 2) + 2vw + 72px); }
.hc-split__content .hc-text { margin-top: 48px; max-width: 520px; }
.hc-split__content .hc-text--indent { margin-left: 60px; }
.hc-split__img { position: absolute; top: 50%; right: max(48px, calc((100vw - 1300px) / 2 + 48px)); width: 40%; transform: translateY(calc(-50% - 60px)); }
.hc-split--right .hc-split__img { right: auto; left: max(48px, calc((100vw - 1300px) / 2)); }
.hc-split__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Hochformat-Bild im grauen Block (Variante D):
   Bild beginnt an der Schrift-Unterkante von „Aus Tradition“, kein Weißraum zum nächsten Abschnitt */
:root { --h2-lh: 60px; --h2-fs: 60px; --split-pt: 100px; --kicker-h: 49px; }
.hc-split--portrait { padding-bottom: 0; }
#tradition { scroll-margin-top: -16px; }
/* Termine-Seite: Festzelt-Bild beginnt auf Höhe der Tagline, damit es nicht in den nächsten Bereich hängt */
@media (min-width: 992px) { #feier.hc-split--portrait .hc-split__img { top: var(--split-pt); } }
/* Bild Gerhard Herrmann + Mutter größer: Oberkante/linke Kante bleiben, wächst nach rechts unten
   bis mind. auf Höhe der Zeile „… feiern lassen“ (max. 440 × 550 px, 32 px Abstand zum rechten Rand) */
@media (min-width: 992px) {
  #tradition .hc-split__img {
    right: auto;
    left: calc(100% - max(64px, calc((100% - 1300px) / 2 + 120px)) - min(25%, 360px));
    width: min(440px, calc(max(64px, calc((100% - 1300px) / 2 + 120px)) + min(25%, 360px) - 32px));
  }
} /* Sprungziel bündig unter der Kopfzeile, ohne Streifen vom Hero */
.hc-split--portrait .hc-split__panel { padding: var(--split-pt) 0 90px; }
.hc-split--portrait .hc-split__content { max-width: none; padding-right: 48px; }
.hc-split--portrait .hc-split__content .hc-text { max-width: 600px; margin-top: 36px; }
.hc-split--portrait .hc-split__img {
  z-index: 2; width: min(25%, 360px); transform: none;
  top: calc(var(--split-pt) + var(--kicker-h) + var(--h2-lh) - 0.26 * var(--h2-fs)); /* Grundlinie der ersten Zeile „Aus Tradition“ */
  right: max(64px, calc((100vw - 1300px) / 2 + 120px));
}
.hc-split--portrait .hc-split__img img { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .hc-h2.hc-h2--lines { white-space: nowrap; } }

/* ---------- Farbflächen ---------- */
.hc-band { position: relative; color: #fff; }
.hc-band--blue { background: var(--hc-blue); }
.hc-band--navy { background: var(--hc-navy); }
.hc-band--grey { background: var(--hc-grey); color: var(--hc-text); }
.hc-band__inner { padding-top: 120px; padding-bottom: 120px; }
.hc-band__head { margin-bottom: 64px; }

/* Säulen als Liste wie „Unsere Leistungen“ */
.hc-pillars { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: start; }
.hc-pillars ul { list-style: none; margin: 0; padding: 0; }
.hc-pillars li { position: relative; padding: 0 0 34px 48px; }
.hc-pillars li::before { content: ""; position: absolute; left: 4px; top: 22px; border-left: 10px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hc-pillars li h3 { font-size: 40px; line-height: 71px; }
.hc-pillars li p { margin: 0; color: #dbe6ef; max-width: 44ch; text-wrap: pretty; }

/* Daten & Fakten */
/* gleiche Abstände zwischen den Zahlen (nicht gleich breite Spalten), Beschriftung mittig unter der Zahl */
.hc-facts { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px 48px; text-align: center; }
.hc-facts > * { flex: 0 0 auto; }
.hc-fact-value { font-size: 60px; line-height: 60px; white-space: nowrap; font-variant-numeric: tabular-nums;
  /* Ziffern und „²“ ragen in der Nexa über die Schrift-Oberkante – Platz oben, damit sie beim Einblenden nicht abgeschnitten werden */
  padding-top: .18em; margin-top: -.18em; }
.hc-fact-label { margin-top: 14px; font-size: 16px; line-height: 24px; color: #b9d3ea; }
.hc-band--blue .hc-fact-label { color: #d6e7f6; }

/* ---------- Zeitstrahl (Form wie bisher, Look wie Original) ---------- */
.hc-history { padding: 130px 0 100px; }
.hc-history .hc-band__head { max-width: 760px; }
.hc-history .hc-band__head .hc-text { margin-top: 32px; }
.timeline { position: relative; max-width: 1100px; margin: 0 auto; }
.tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hc-line); transform: translateX(-50%); }
.tl-progress { position: absolute; left: -1px; top: 0; width: 3px; height: 0%; background: var(--hc-blue); transition: height 0.25s linear; }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; margin-bottom: 72px; }
.tl-dot { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; width: 15px; height: 15px; border-radius: 50%; background: var(--hc-blue); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--hc-blue); }
.tl-text, .tl-img { grid-row: 1; }
.tl-item.is-left .tl-text { grid-column: 1; text-align: right; }
.tl-item.is-left .tl-img { grid-column: 3; }
.tl-item.is-right .tl-text { grid-column: 3; }
.tl-item.is-right .tl-img { grid-column: 1; }
.tl-year { font-size: 40px; line-height: 44px; color: var(--hc-blue); }
.tl-text h3 { font-weight: 700; font-size: 20px; line-height: 30px; margin: 12px 0 8px; color: var(--hc-text); }
.tl-text p { margin: 0; font-size: 18px; line-height: 30px; text-wrap: pretty; } /* größer auf Wunsch der GF (vorher 16/29) */
@media (max-width: 767px) { .tl-text p { font-size: 17px; line-height: 29px; } }
/* Umbruchschutz für Wortgruppen (typo() im Build) und Zeilenumbruch nur ab Tablet */
.nobr { white-space: nowrap; }
@media (max-width: 767px) { .br-desk { display: none; } }
@media (min-width: 768px) { .br-mobil { display: none; } }
/* Textbreite im Zeitstrahl (Desktop): 430 px (Abstimmung 2026-10-28), per Umschalter änderbar; Text bleibt an der Mittellinie */
@media (min-width: 992px) {
  .tl-text h3, .tl-text p { max-width: var(--tl-text-w, 430px); }
  .tl-item.is-left .tl-text h3, .tl-item.is-left .tl-text p { margin-left: auto; }
}
.tl-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* dunkle Fassung wie „Unternehmensgeschichte“ im Original */
.hc-history--dark { background: var(--hc-navy); color: #fff; }
.hc-history--dark .hc-h2, .hc-history--dark .hc-text { color: #fff; }
.hc-history--dark .tl-line { background: rgba(255, 255, 255, .18); }
.hc-history--dark .tl-dot { border-color: var(--hc-navy); }
.hc-history--dark .tl-year { color: #fff; }
.hc-history--dark .tl-text { border: 1px solid var(--hc-blue); padding: 30px 32px; }
.hc-history--dark .tl-text h3 { color: #fff; }
.hc-history--dark .tl-text p { color: #dbe6ef; font-size: 15px; line-height: 27px; }

/* Überschrift mit festen Zeilen (keine automatische Trennung) */
.hc-h2.hc-h2--lines { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
/* Hochformat-Ausschnitt im Zeitstrahl */
.tl-img--portrait img { aspect-ratio: 4 / 5; width: 72%; }
.tl-item.is-right .tl-img--portrait img { margin-left: auto; }

/* Fassung auf CI-Blau (#006AB7) */
.hc-history--blue { background: var(--hc-blue); color: #fff; }
.hc-history--blue .hc-h2, .hc-history--blue .hc-text { color: #fff; }
.hc-history--blue .tl-line { background: rgba(255, 255, 255, .35); }
.hc-history--blue .tl-progress { background: #fff; }
.hc-history--blue .tl-dot { background: #fff; border-color: var(--hc-blue); box-shadow: 0 0 0 1px #fff; }
.hc-history--blue .tl-year { color: #fff; }
.hc-history--blue .tl-text h3 { color: #fff; }
.hc-history--blue .tl-text p { color: #e3eef8; }

/* ---------- Zitatband (wie Startseite „Wertschätzung …“) ---------- */
.hc-quoteband { position: relative; padding: 0 0 0; }
.hc-quoteband::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; background: var(--hc-navy); }
.hc-quoteband__box { position: relative; background: var(--hc-blue); color: #fff; margin: 0 auto; max-width: 1300px; padding: 90px max(48px, 8%) 96px; }
.hc-quoteband blockquote { margin: 0; font-size: 49px; line-height: 76px; letter-spacing: -0.49px; }
.hc-quoteband .autor { display: block; margin-top: 10px; text-align: right; font-size: 18px; line-height: 34px; }

/* ---------- Stimmen (wie Glückwunsch-Slider „Bayerns Best 50“) ---------- */
.hc-voices { background: var(--hc-grey); padding: 120px 0 110px; }
/* Einleitung nie breiter als die erste Stimmen-Karte */
.hc-voices__lead { margin-top: 32px; max-width: calc((100% - 32px) / 2); }
@media (max-width: 720px) { .hc-voices__lead { max-width: none; } }
.voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; margin-top: 64px; }
.voice { background: var(--hc-navy); color: #fff; padding: 56px 52px 44px; display: flex; flex-direction: column; gap: 28px; }
.voice[hidden] { display: none; }
.voice-quote { margin: 0; font-size: 22px; line-height: 40px; }
.voice-person { display: flex; align-items: center; gap: 18px; }
.voice-person > div { min-width: 0; }
.voice-avatar { position: relative; display: block; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--hc-blue); }
.voice-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* farbige Lasur über den Fotos: Standard Hellblau 10 % (per Vorschau-Panel änderbar) */
.voice-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(var(--av-rgb, 0, 106, 183), var(--av-tint, .1)); pointer-events: none; }
.voice-avatar--initial::after { display: none; }
.voice-avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--hc-blue); color: #fff; font-weight: 700; font-size: 28px; }
.voice-name { font-weight: 700; font-size: 18px; line-height: 26px; }
.voice-role { font-size: 14px; line-height: 22px; color: #b9d3ea; }
.voice-more { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 18px; }
.voice-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; padding: 0; color: #fff; font: inherit; font-size: 16px; cursor: pointer; text-align: left; }
.voice-toggle .icon-arrow-down { font-size: 10px; transition: transform .3s ease; }
.voice-toggle[aria-expanded="true"] .icon-arrow-down { transform: rotate(180deg); }
.qa { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; animation: fadeUp .35s ease both; }
.qa[hidden] { display: none; }
.qa-q { font-weight: 700; font-size: 14px; line-height: 22px; color: #b9d3ea; }
.qa-a { font-size: 15px; line-height: 27px; color: #fff; }
.qa-a.is-placeholder { color: rgba(255, 255, 255, .45); font-style: italic; }
/* Karussell: Karten gleiten seitlich, Höhe gleitet beim Auf-/Zuklappen mit */
/* Bewegung und Wischen übernimmt Embla Carousel (main.js); touch-action: senkrechtes Scrollen bleibt auch während der Animation beim Browser */
.voice-grid.is-carousel { position: relative; display: block; overflow: hidden; touch-action: pan-y pinch-zoom; transition: height .52s cubic-bezier(0.22, 0.61, 0.36, 1); }
.voice-track { position: relative; display: flex; gap: 32px; height: 100%; align-items: stretch; will-change: transform; }
.voice-track > .voice { flex: 0 0 calc((100% - 32px * (var(--per, 2) - 1)) / var(--per, 2)); min-width: 0; }
.is-carousel .qa { animation: none; overflow: hidden; }
.is-carousel .voice-more { margin-top: 0; } /* Trennlinie bleibt oben bündig, freier Platz geht nach unten */

/* Navigation wie die Slider im Theme (history-swiper / tour-swiper) */
.voice-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; }
.voice-nav[hidden] { display: none; }
.voice-bullets { display: flex; flex-wrap: wrap; row-gap: 8px; align-items: center; min-width: 0; } /* bei vielen Stimmen zweizeilig statt Überlauf */
.voice-bullets button { width: 10px; height: 10px; margin: 0 .25rem; padding: 0; border-radius: 50%; border: 1px solid var(--hc-blue); background: transparent; cursor: pointer; transition: background-color .3s ease; }
.voice-bullets button[aria-selected="true"] { background: var(--hc-blue); }
.voice-pos { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.voice-arrows { display: flex; flex: none; gap: 24px; }
.voice-arrows button {
  width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(0, 106, 183, .4); background: transparent;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--hc-blue);
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.voice-arrows button [class^="icon-"] { font-size: 60px; line-height: 1; }
.voice-arrows button:hover { border-color: var(--hc-blue); }
@media (max-width: 767px) {
  .voice-nav { gap: 14px; margin-right: -12px; } /* Pfeil: halber Abstand zum Rand wie die Karte (24 → 12 px) */
  .voice-bullets button { margin: 0 2.5px; } /* 13 Stimmen passen bei 390 px einzeilig neben die Pfeile */
  .voice-arrows { gap: 14px; }
  .voice-arrows button { width: 64px; height: 64px; }
  .voice-arrows button [class^="icon-"] { font-size: 40px; }
}
@media (max-width: 389px) {
  .voice-bullets button { margin: 0 2px; }
  .voice-arrows button { width: 56px; height: 56px; }
}

/* ---------- Zwei Spalten auf Navy (wie „Ausbildung / Karriere“) ---------- */
.hc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 120px; }
.hc-duo .hc-h2 { margin-bottom: 40px; }
.hc-duo .hc-text { color: #fff; max-width: 520px; }
.hc-duo__sub { font-size: 22px; line-height: 34px; margin: -16px 0 24px; color: #b9d3ea; }
.hc-duo .btn { display: inline-flex; }
/* Dreiteilung Vormittag – Nachmittag – Abend: Buttons stehen auf einer Linie, auch bei unterschiedlich langen Texten */
.hc-duo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 72px; }
.hc-duo--3 > div { display: flex; flex-direction: column; }
.hc-duo--3 .hc-btns { margin-top: auto; padding-top: 3.1rem; }
.hc-duo--3 .btn { white-space: nowrap; }
.hc-duo--3 .hc-h2 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.1; hyphens: manual; -webkit-hyphens: manual; } /* „NACHMITTAG“ bleibt einzeilig */
/* Überschrift, Untertitel, Text und Button jeweils auf gemeinsamer Zeile über alle drei Spalten */
@supports (grid-template-rows: subgrid) {
  .hc-duo--3 > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; } /* Abstand nur zwischen den Blöcken (gestapelt auf dem Handy) */
  .hc-duo--3 .hc-btns { align-self: end; }
}

/* ---------- Feier ---------- */
.hc-date { display: inline-flex; align-items: baseline; gap: 14px; margin-top: 26px; color: var(--hc-text); }
.hc-date__day { font-weight: 700; font-size: 60px; line-height: 60px; color: var(--hc-blue); }
.hc-date__rest { font-size: 26px; line-height: 32px; }
.hc-placeholder { border: 1px dashed #9aa3ab; padding: 40px 44px; background: #fff; }
.hc-placeholder h3 { font-weight: 700; font-size: 20px; line-height: 30px; margin-bottom: 10px; }
.hc-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.hc-gallery figure { margin: 0; }
.hc-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hc-gallery figcaption { font-size: 14px; line-height: 22px; margin-top: 10px; color: #6b7681; }
.hc-crumb { font-size: 14px; line-height: 22px; color: #6b7681; margin: 0 0 22px; }
.hc-crumb a { color: var(--hc-blue); }

/* ---------- Variante C: Startseiten-Hero mit transparenter Kopfzeile ---------- */
.home .hc-stage { min-height: 100vh; min-height: 100svh; }
.hero-banner-wrapper .hc-stage__lines { position: absolute; inset: 0; background: none; z-index: 1; }
.hc-stage.hero-banner-wrapper .hc-container { z-index: 2; }
/* Kacheln bündig am unteren Rand des Hero (= Browserrand beim Laden), statt top:90vh wie im Original */
.hc-stage.hero-banner-wrapper .navi { top: auto; bottom: 0; z-index: 3; color: #fff; }
.hc-stage .navi a { color: #fff; }
.hc-stage .navi a:hover { color: #28323b; }

/* ---------- Querverweis am Seitenende (wie „Kunden“ auf der Leistungen-Seite) ---------- */
.hc-ref { background: var(--hc-grey); padding: 176px 0 150px; }
.hc-ref .hc-container { max-width: 1180px; }
.hc-ref h2 { font-weight: 700; font-size: 60px; line-height: 60px; color: var(--hc-blue); text-transform: uppercase; margin: 0 0 80px; }
.hc-ref__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; }
.hc-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-collage img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hc-ref__text { color: var(--hc-blue); font-size: 26px; line-height: 36px; }
.hc-ref__text p { margin: 16px 0; }
.hc-ref__text strong { display: block; }
.hc-ref__text .btn { margin-top: 36px; display: inline-flex; color: var(--hc-blue); border-color: var(--hc-blue); }
.hc-ref__text .btn:hover { color: var(--hc-navy); }
.hc-ref__text .btn [class^="icon-"] { color: var(--hc-blue); } /* Pfeil auf Grau blau statt weiß */
.hc-ref__text .btn:hover [class^="icon-"] { color: var(--hc-navy); }

/* ---------- Terminliste ---------- */
.hc-events { padding: 130px 0 110px; }
.hc-events--first { padding-top: 90px; }
.hc-events--first .hc-crumb { margin-bottom: 28px; }
.hc-events__list { list-style: none; margin: 64px 0 0; padding: 0; border-top: 1px solid var(--hc-line); }
.hc-event { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 16px 48px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--hc-line); }
.hc-event__date { font-size: 26px; line-height: 34px; color: var(--hc-blue); }
.hc-event__title { font-weight: 700; font-size: 22px; line-height: 32px; }
.hc-event__badge { display: inline-block; margin-left: 12px; padding: 2px 12px 0; border-radius: 30px; background: var(--hc-blue); color: #fff; font-weight: 400; font-size: 13px; line-height: 24px; vertical-align: 3px; }
.hc-event__info { margin-top: 4px; }
.hc-event--todo .hc-event__date, .hc-event--todo .hc-event__title { color: #9aa3ab; }
.hc-event .btn { white-space: nowrap; }

/* ---------- Variante D: feste Kachel unten rechts (Stil der Startseiten-Kacheln) ---------- */
.hc-fixed-navi {
  position: fixed; right: 7.4rem; bottom: 0; z-index: 900;
  background: #006ab7; padding: 0;
  transition: transform .4s var(--ease), opacity .4s ease;
}
/* Pfeil und Text als Reihe, links/rechts gleicher Abstand zum Kachelrand */
.hc-fixed-navi a { display: flex; align-items: center; gap: 14px; padding: var(--tile-pt, 26.5px) 30px var(--tile-pb, 17.5px); /* Schrift (Oberlänge bis Grundlinie) mittig in der Kachel */ font-size: 28px; line-height: 42px; color: #fff; transition: color .3s ease; }
.hc-fixed-navi a:hover { color: #28323b; }
.hc-fixed-navi [class^="icon-"] { position: relative; top: -4px; transform: none; font-size: 14px; line-height: 1; order: -1; } /* Pfeilmitte = Schriftmitte */
.hc-fixed-navi { transition: transform .4s var(--ease), opacity .4s ease, background-color .3s ease; }
.hc-fixed-navi.is-on-blue { background: var(--hc-navy); }
.hc-fixed-navi.is-on-blue a:hover { color: #9fc4e4; }
.hc-fixed-navi.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* ---------- Farb-Fading wie auf der Startseite ----------
   blau:  #01355b → #006ab7   (bg-main-anim / bg-main-anim-1)
   navy:  #00497d → #002743   (bg-dark-blue / bg-dark-blue-1) */
[data-fade] { position: relative; isolation: isolate; }
[data-fade]::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[data-fade].is-faded::before { opacity: 1; }
[data-fade="blue"] { background: #01355b; }
[data-fade="blue"]::before { background: #006ab7; }
[data-fade="navy"] { background: #00497d; }
[data-fade="navy"]::before { background: #002743; }
.no-js [data-fade]::before, html:not(.js) [data-fade]::before { opacity: 1; }

/* ---------- Reveal (nur mit JS ausgeblendet) ---------- */
.js [data-reveal]:not(.tl-item):not(.is-revealed),
.js .tl-item:not(.is-revealed) > * { opacity: 0; }

/* ---------- Breakpoints wie im Theme (1440 / 1199 / 991 / 767) ---------- */
@media (max-width: 1440px) {
  :root { --h2-lh: 52px; --h2-fs: 50px; }
  .hc-h2 { font-size: 50px; line-height: 52px; }
  .hc-quoteband blockquote { font-size: 40px; line-height: 62px; }
  .hc-stage h1 { font-size: 58px; line-height: 72px; }
  .hc-stage h1 .bolder { font-size: 74px; }
}
@media (max-width: 1199px) {
  :root { --h2-lh: 46px; --h2-fs: 42px; }
  .hc-h1 { font-size: 42px; line-height: 50px; }
  .hc-h2 { font-size: 42px; line-height: 46px; }
  .hc-facts { flex-wrap: wrap; justify-content: center; column-gap: 72px; }
  .hc-fact-value { font-size: 48px; line-height: 50px; }
  .hc-pillars { grid-template-columns: 1fr; }
  .hc-hero__box { width: 70%; padding: 44px 48px; }
  .hc-quote-text { font-size: 28px; line-height: 46px; }
  .hc-split__panel { width: 66%; }
  .hc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-duo { gap: 64px 64px; }
}
@media (max-width: 991px) {
  .hc-container { padding: 0 24px; }
  .hc-hero { padding-top: 24px; }
  .hc-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hc-hero__title { padding: 32px 24px 36px; }
  .hc-hero__img, .hc-hero__img img { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
  .hc-hero__box { width: auto; margin: -60px 24px 0; padding: 36px 32px; }
  .hc-quote-text { font-size: 24px; line-height: 40px; }
  .hc-split { padding-bottom: 72px; }
  .hc-split__panel { width: 100%; padding: 64px 0 300px; }
  .hc-split__content, .hc-split--right .hc-split__content { padding: 0 24px; margin: 0; max-width: none; }
  .hc-split__content .hc-text--indent { margin-left: 0; }
  .hc-split--portrait { background: var(--hc-grey); padding-bottom: 48px; }
  .hc-split--portrait .hc-split__panel { padding: 64px 0 32px; }
  .hc-split--portrait .hc-split__img { top: auto; right: auto; left: auto; width: auto; max-width: 360px; margin: 0 24px; }
  .hc-split__img, .hc-split--right .hc-split__img { position: relative; top: auto; right: auto; left: auto; transform: none; width: auto; margin: -260px 24px 0; }
  .hc-band__inner { padding-top: 80px; padding-bottom: 80px; }
  .hc-pillars li h3 { font-size: 30px; line-height: 50px; }
  .hc-quoteband__box { padding: 56px 24px 60px; }
  .hc-quoteband blockquote { font-size: 30px; line-height: 46px; }
  .voice-grid { grid-template-columns: 1fr; }
  .voice { padding: 40px 28px 32px; }
  .hc-duo { grid-template-columns: 1fr; }
  .hc-stage h1 { font-size: 44px; line-height: 54px; }
  .hc-stage h1 .bolder { font-size: 56px; }
  .hc-stage__bg::after { background: linear-gradient(180deg, rgba(0, 39, 67, .35) 0%, rgba(0, 39, 67, .7) 60%, rgba(0, 39, 67, .8) 100%); }
  .hc-stage__tabs { left: 0; }
  .hc-stage.hero-banner-wrapper .navi { display: flex; left: 0; right: 0; top: auto; bottom: 0; padding: .4rem 1rem; justify-content: space-between; }
  .hc-stage.hero-banner-wrapper .navi a { font-size: 21px; line-height: 40px; padding: .8rem .6rem .8rem 1.1rem; margin: 0; }
  .home main { padding-top: var(--header-h); }
  .home .hc-stage { min-height: calc(100svh - var(--header-h)); }
  .hc-ref { padding: 90px 0 80px; }
  .hc-ref h2 { font-size: 40px; line-height: 44px; margin-bottom: 40px; }
  .hc-ref__grid { grid-template-columns: 1fr; gap: 36px; }
  .hc-ref__text { font-size: 21px; line-height: 31px; }
  .hc-event { grid-template-columns: 1fr; gap: 6px; padding: 26px 0; }
  .hc-events--first { padding-top: 48px; }
  .hc-event .btn { justify-self: start; margin-top: 10px; }
  .hc-fixed-navi { right: 0; padding: .3rem 1rem; }
  .hc-fixed-navi [class^="icon-"] { top: -3.5px; }
  .hc-fixed-navi a { font-size: 20px; line-height: 30px; gap: 10px; padding: var(--tile-pt-m, 18px) 20px var(--tile-pb-m, 10px); }
  .hc-stage__tabs a { flex: 1; font-size: 20px; line-height: 30px; padding: 18px 20px; }
  .hc-history { padding: 80px 0 60px; }
}
@media (max-width: 767px) {
  .hc-h1 { font-size: 34px; line-height: 42px; }
  /* Hero-Titel: „Herrmann CNC“ füllt einzeilig die Breite zwischen den Rändern (Textbreite = 7,105 × Schriftgröße), „40 Jahre“ skaliert im selben Verhältnis 44 : 56 mit */
  .hc-stage { --title-big: min(56px, calc((100vw - 48px) / 7.15)); }
  .hc-stage h1 { font-size: calc(var(--title-big) * 44 / 56); line-height: calc(var(--title-big) * 54 / 56); }
  .hc-stage h1 .bolder { font-size: var(--title-big); white-space: nowrap; }
  .hc-h2 { font-size: 28px; line-height: 33px; }
  .hc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-facts > :last-child { grid-column: 1 / -1; }
  .hc-fact-value { font-size: 38px; line-height: 40px; }
  .hc-text--lg { font-size: 17px; line-height: 30px; }
  .hc-date__day { font-size: 44px; line-height: 44px; }
  .hc-date__rest { font-size: 20px; }
  .hc-gallery { grid-template-columns: 1fr; }
  .hc-placeholder { padding: 28px 24px; }
  .hc-stage__tabs { flex-direction: column; }
  .hc-stage.hero-banner-wrapper .navi { flex-direction: column; padding: .2rem 1rem .6rem; }

  .tl-line { left: 7px; transform: none; }
  .tl-item { grid-template-columns: 16px 1fr; column-gap: 18px; row-gap: 18px; margin-bottom: 64px; }
  .tl-dot { grid-column: 1; grid-row: 1; }
  .tl-item.is-left .tl-text, .tl-item.is-right .tl-text { grid-column: 2; grid-row: 1; text-align: left; }
  .tl-item.is-left .tl-img, .tl-item.is-right .tl-img { grid-column: 2; grid-row: 2; }
  .tl-year { font-size: 32px; line-height: 36px; }
  .tl-img--portrait img { width: 80%; }
  .hc-history--dark .tl-text { padding: 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* Kopfzeile auf der Jubiläums-Startseite von Anfang an weiß, ohne Übergang (body.header-solid, main.js setzt .fixed sofort) */
.header-solid #header, .header-solid #header .menu-panel, .header-solid #header .menu-item a { transition: none !important; }
body.header-solid #header { background-color: #fff; }
body.header-solid #header .menu-panel { color: #006AB7; }
body.header-solid #header .menu-panel .part--logo .white { display: none; }
body.header-solid #header .menu-panel .part--logo .blue { display: block; }

/* Feste Kachel: optische Mitte von „Jubiläumsfeier“ = optische Mitte der Hero-Unterzeile (Mitte zwischen Grundlinie und Versalhöhe).
   Schrift sitzt wie ursprünglich etwas über der Kachelmitte (+5,3 px bei 28 px, +3 px bei 20 px); die Kachelhöhe ergibt sich daraus:
   ab 1441 px 102,4 px · 992–1440 px 92,4 px · 768–991 px 88 px (vorher 86 / 86 / 67,6 px). */
.hc-fixed-navi { --tile-pt: 34.7px; --tile-pb: 25.7px; }
@media (max-width: 1440px) { .hc-fixed-navi { --tile-pt: 29.7px; --tile-pb: 20.7px; } }
@media (min-width: 768px) and (max-width: 991px) { .hc-fixed-navi { --tile-pt-m: 28.2px; --tile-pb-m: 20.2px; } }

/* Hero-Foto liegt hinter der weißen Menüleiste und ist oben verankert (siehe oben): die Leiste verdeckt den
   Maschinenbereich über dem Team, unten bleibt mehr Hallenboden; auf niedrigen Bildschirmen fällt unten Boden weg */

/* Hero-Verlauf (body.hero-fade): Verlauf von unten bis über „40 Jahre“ hinter dem Titel.
   Viele Zwischenstufen mit weicher Kurve, damit oben keine Kante sichtbar ist.
   Steuerbar über Variablen (Vorschau-Panel assets/js/switcher.js, derzeit nicht eingebunden): --fade-rgb Farbe, --fade-a Deckkraft unten, --fade-top Höhe über „40 Jahre“, --fade-fg Schrift. */
:root { --fade-rgb: 0, 49, 84; --fade-a: .72; --fade-top: 325px; --fade-fg: #fff; } /* Werte vom User 2026-10-29: Dunkelblau #003154, 72 %, 325 px, Schrift weiß */
@media (max-width: 767px) { :root { --fade-top: 160px; } } /* Handy: niedriger, damit die Gesichter frei bleiben (erster Stand) */
  .hero-fade .hc-stage.hc-stage--tint .hc-container { color: var(--fade-fg); }
  .hero-fade .hc-stage.hc-stage--tint .hc-container::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 0; right: 0; width: 100vw; margin-left: calc(50% - 50vw);
    top: calc(-1 * var(--fade-top)); bottom: calc(-1 * var(--area-bottom));
    background: linear-gradient(to top,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 1)) 0%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 1)) 38%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.984)) 43%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.947)) 48%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.883)) 53%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.798)) 58%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.702)) 63%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.596)) 68%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.484)) 73%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.372)) 78%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.271)) 83%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.181)) 87.5%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.106)) 91.5%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.048)) 95%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0.013)) 98%,
      rgba(var(--fade-rgb), calc(var(--fade-a) * 0)) 100%);
  }
  .hero-fade .hc-stage.hc-stage--tint .hc-container > * { position: relative; }