/* ==========================================================================
   HinterHolzer GmbH — Relaunch
   Richtung: Cinematic Photographic (Foto trägt die Seite) + Institutional-Panel
   Farbsystem 60/30/10 — 60% warmer Stein-Papier-Ton, 30% Tiefgrün (Marke),
   10% Bagger-Orange (einziger CTA-Akzent, aus Originalfotos gemessen)
   ========================================================================== */

/* ---------- Fonts (selbst gehostet, DSGVO-sauber) ---------- */
@font-face { font-family:'Big Shoulders Display'; src:url('fonts/big-shoulders-display-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Big Shoulders Display'; src:url('fonts/big-shoulders-display-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Big Shoulders Display'; src:url('fonts/big-shoulders-display-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Big Shoulders Display'; src:url('fonts/big-shoulders-display-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/ibm-plex-sans-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/ibm-plex-sans-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('fonts/ibm-plex-sans-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  /* 60% — warme Fläche (Kalkstein/Beton-Ton, nie reines Weiß) */
  --paper:#F4F1E9; --paper-2:#ECE6D8; --paper-3:#E2DAC6;
  /* 30% — Marke, Tiefgrün (aus Logo #49715a abgeleitet) */
  --ink:#1C2A21; --ink-soft:#3C4E42; --ink-faint:#6B7A6F;
  --brand:#49715A; --brand-deep:#2E4A3A; --brand-tint:#DCE4DA;
  /* 10% — Akzent, Bagger-Orange (aus Originalfotos gemessen, #D2542B-Cluster) */
  --accent:#C94F24; --accent-deep:#A83E1A; --accent-tint:#F5DFD3; --accent-ink:#FFFFFF;
  --white:#FFFFFF;

  /* Radius */
  --r-lg:26px; --r-md:16px; --r-sm:10px; --r-pill:999px;

  /* Type scale (fluid) */
  --fs-h1:clamp(2.6rem, 4.6vw + 1rem, 5.2rem);
  --fs-h2:clamp(2rem, 3vw + 0.6rem, 3.4rem);
  --fs-h3:clamp(1.4rem, 1.4vw + 0.6rem, 1.9rem);
  --fs-h4:clamp(1.15rem, 0.6vw + 0.6rem, 1.35rem);
  --fs-body-lg:clamp(1.125rem, 0.3vw + 1rem, 1.25rem);
  --fs-body:1.0625rem; --fs-small:0.9rem; --fs-tiny:0.8rem;
  --lh-display:1.02; --lh-heading:1.15; --lh-body:1.62; --lh-tight:1.35;
  --mw-prose:65ch; --mw-heading:22ch;

  /* Motion */
  --t-fast:120ms; --t-med:280ms; --t-slow:560ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --s-section:clamp(4.5rem, 8vw, 7.5rem);

  /* Shadows */
  --shadow-sm:0 1px 2px rgb(28 42 33 / .06), 0 4px 14px -6px rgb(28 42 33 / .10);
  --shadow-lg:0 1px 2px rgb(28 42 33 / .05), 0 24px 60px -18px rgb(28 42 33 / .28);

  /* Z-index system */
  --z-base:1; --z-sticky:100; --z-nav:200; --z-mega:210; --z-mobile-bar:300; --z-cursor:9998; --z-modal:9999;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html, body { height:100%; }
body {
  font-family:'IBM Plex Sans', Arial, sans-serif;
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img, picture, video, canvas { display:block; max-width:100%; height:auto; }
svg { width:1em; height:1em; display:inline-block; flex-shrink:0; vertical-align:-0.125em; }
input, button, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; padding:0; }
h1,h2,h3,h4 { font-family:'Big Shoulders Display', Arial, sans-serif; line-height:var(--lh-heading); letter-spacing:-0.01em; font-weight:800; }
:focus-visible { outline:3px solid var(--accent-deep); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  html { scroll-behavior:auto; }
}

/* ---------- Typography ---------- */
h1 { font-size:var(--fs-h1); line-height:0.98; }
h2 { font-size:var(--fs-h2); max-width:var(--mw-heading); }
h3 { font-size:var(--fs-h3); }
h4 { font-size:var(--fs-h4); }
.prose { max-width:var(--mw-prose); }
.prose p { margin-bottom:1em; }
.prose p:last-child { margin-bottom:0; }
p { max-width:var(--mw-prose); }
.body-lg { font-size:var(--fs-body-lg); }
.text-small { font-size:var(--fs-small); }
.text-tiny { font-size:var(--fs-tiny); }
.text-soft { color:var(--ink-soft); }
.text-faint { color:var(--ink-faint); font-size:var(--fs-small); }
.mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'IBM Plex Sans', sans-serif; font-style:italic; font-weight:500;
  font-size:var(--fs-small); color:var(--accent-deep); letter-spacing:0; margin-bottom:.9em;
}
.eyebrow::before { content:''; display:inline-block; width:2rem; height:2px; background:var(--accent); border-radius:2px; }

.cite {
  background:var(--paper-2); border-radius:var(--r-md); padding:1.5rem 1.7rem;
  font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink-soft); max-width:none;
}
.cite strong { color:var(--ink); }

/* ---------- Layout ---------- */
.container { width:100%; max-width:1360px; margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block:var(--s-section); }
.panel { margin-inline:clamp(.6rem, 1.6vw, 1.8rem); border-radius:var(--r-lg); overflow:hidden; }
.panel-dark { background:var(--brand-deep); color:var(--white); }
.panel-dark h2, .panel-dark h3 { color:var(--white); }
.panel-dark .text-soft { color:#C7D3CB; }
.panel-stone { background:var(--paper-2); }

.grid { display:grid; gap:clamp(1.25rem, 2.5vw, 2.25rem); }
.g-2 { grid-template-columns:repeat(2, 1fr); }
.g-3 { grid-template-columns:repeat(3, 1fr); }
.g-4 { grid-template-columns:repeat(4, 1fr); }
.split-60-40 { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center; }
.split-40-60 { display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.95em 1.6em; border-radius:var(--r-pill); font-weight:600; font-size:var(--fs-small);
  border:1.5px solid transparent; transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn-primary { background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--accent-deep); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { background:var(--ink-faint); cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost { background:transparent; border-color:currentColor; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--paper); }
.btn-ghost-light { background:transparent; border-color:rgb(255 255 255 / .5); color:var(--white); }
.btn-ghost-light:hover { background:var(--white); color:var(--ink); border-color:var(--white); }
.btn-sm { padding:.7em 1.3em; font-size:var(--fs-tiny); }
.btn[data-loading="true"] { position:relative; color:transparent !important; pointer-events:none; }
.btn[data-loading="true"]::after {
  content:''; position:absolute; width:1.1em; height:1.1em; border-radius:50%;
  border:2px solid rgb(255 255 255 / .4); border-top-color:#fff; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.click-trigger { font-size:var(--fs-tiny); color:var(--ink-faint); margin-top:.75rem; }
.click-trigger b { color:var(--ink-soft); font-weight:600; }

.cta-line { display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; font-size:var(--fs-small); color:var(--ink-soft); padding-block:1.5rem; }
.cta-line a { color:var(--accent-deep); font-weight:600; border-bottom:1px solid currentColor; }
.cta-line a:hover { color:var(--accent); }

/* ---------- Nav ---------- */
.nav { position:fixed; inset-block-start:0; inset-inline:0; z-index:var(--z-nav); transition:background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), padding var(--t-med) var(--ease); padding-block:1.1rem; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav.is-scrolled, .nav.is-open { background:rgb(244 241 233 / .92); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgb(28 42 33 / .08); padding-block:.7rem; }
.nav.on-dark:not(.is-scrolled):not(.is-open) { color:var(--white); }
.nav.on-dark:not(.is-scrolled):not(.is-open) .logo-word { color:var(--white); }
.nav.on-dark:not(.is-scrolled):not(.is-open) .nav-link { color:rgb(255 255 255 / .92); }
.logo-mark { display:flex; align-items:center; gap:.65rem; }
.logo-mark img { width:38px; height:38px; border-radius:8px; }
.logo-word { font-family:'Big Shoulders Display'; font-weight:800; font-size:1.35rem; letter-spacing:-0.01em; color:var(--ink); line-height:1; }
.logo-word span { color:var(--accent-deep); }
.nav-links { display:flex; align-items:center; gap:2.1rem; }
.nav-link { font-weight:600; font-size:.98rem; padding-block:.4rem; position:relative; }
.nav-link::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast) var(--ease); }
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after { transform:scaleX(1); }
.nav-cta { display:flex; align-items:center; gap:1.1rem; }
.nav-phone { display:flex; align-items:center; gap:.5em; font-weight:600; font-size:.95rem; }
.nav-phone svg { width:17px; height:17px; }
.nav-burger { display:none; }

/* Mega menu — .nav-item bleibt UNPOSITIONED, damit .mega (absolute) sich am
   fixed <header class="nav"> ausrichtet und über die volle Breite spannt. */
.mega { position:absolute; top:100%; left:0; right:0; background:var(--white); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med); z-index:var(--z-mega); }
.nav-item.is-open .mega { opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner { display:grid; grid-template-columns:1fr 1fr 1fr 1.1fr; gap:2.5rem; padding:2.75rem clamp(1.25rem,4vw,2.5rem); max-width:1360px; margin-inline:auto; }
.mega-col-title { font-size:var(--fs-tiny); font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.1rem; }
.mega-col a.mega-link { display:block; padding-block:.5rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--paper-2); }
.mega-col a.mega-link:last-child { border-bottom:none; }
.mega-col a.mega-link:hover { color:var(--accent-deep); }
.mega-col a.mega-link small { display:block; font-weight:400; font-family:'IBM Plex Sans'; color:var(--ink-faint); font-size:var(--fs-tiny); margin-top:.15rem; }
.mega-audience a { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--r-sm); font-weight:700; color:var(--ink); }
.mega-audience a:hover { background:var(--paper-2); }
.mega-audience .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.mega-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.mega-thumbs a { position:relative; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:3/4; }
.mega-thumbs a:first-child { grid-column:1 / -1; aspect-ratio:16/8; }
.mega-thumbs img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease); }
.mega-thumbs a:hover img { transform:scale(1.06); }
.mega-thumbs span { position:absolute; inset-inline:0; bottom:0; padding:.6rem .7rem; font-size:var(--fs-tiny); font-weight:700; color:#fff; background:linear-gradient(0deg, rgb(28 42 33/.75), transparent); }

@media (hover:none) { .nav-item .mega { display:none; } }

/* Mobile nav */
.mobile-panel { position:fixed; inset:0; background:var(--paper); z-index:var(--z-modal); transform:translateX(100%); transition:transform var(--t-med) var(--ease); overflow-y:auto; display:flex; flex-direction:column; }
.mobile-panel.is-open { transform:translateX(0); }
.mobile-panel-head { display:flex; align-items:center; justify-content:space-between; padding:1.1rem clamp(1.25rem,4vw,2.5rem); }
.mobile-close { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--paper-2); }
.mobile-links { padding:0 clamp(1.25rem,4vw,2.5rem) 2rem; flex:1; }
.mobile-group summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; font-family:'Big Shoulders Display'; font-weight:800; font-size:1.5rem; border-bottom:1px solid var(--paper-3); cursor:pointer; }
.mobile-group summary::-webkit-details-marker { display:none; }
.mobile-group summary .chev { transition:transform var(--t-fast) var(--ease); }
.mobile-group[open] summary .chev { transform:rotate(180deg); }
.mobile-group .sub { padding:.25rem 0 1.25rem; display:flex; flex-direction:column; gap:.15rem; }
.mobile-group .sub a { padding:.65rem .25rem; font-weight:600; color:var(--ink-soft); }
.mobile-group > a { display:block; padding:1.1rem 0; font-family:'Big Shoulders Display'; font-weight:800; font-size:1.5rem; border-bottom:1px solid var(--paper-3); }
.mobile-panel-foot { padding:1.5rem clamp(1.25rem,4vw,2.5rem) 2.5rem; display:flex; flex-direction:column; gap:.9rem; background:var(--paper-2); }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--white); overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgb(20 30 24/.55) 0%, rgb(20 30 24/.15) 32%, rgb(20 30 24/.35) 68%, rgb(20 30 24/.88) 100%); }
.hero-content { position:relative; z-index:1; width:100%; padding-block:8rem 3.5rem; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.6em; background:rgb(255 255 255/.14); backdrop-filter:blur(6px); border-radius:var(--r-pill); padding:.5em 1.1em .5em .8em; font-size:var(--fs-tiny); font-weight:600; margin-bottom:1.4rem; }
.hero-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.hero h1 { max-width:16ch; text-shadow:0 2px 24px rgb(0 0 0/.25); }
.hero .sub { font-size:var(--fs-body-lg); max-width:46ch; margin-top:1.4rem; color:rgb(255 255 255/.92); }
.hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.hero-actions { display:flex; align-items:center; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

/* Anfrage-Widget (Signature Move) */
.widget { background:var(--white); color:var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:1.6rem; width:min(380px, 100%); }
.widget-tabs { display:flex; gap:.4rem; margin-bottom:1.1rem; background:var(--paper-2); padding:.3rem; border-radius:var(--r-pill); }
.widget-tabs button { flex:1; border:none; background:transparent; padding:.55em 1em; border-radius:var(--r-pill); font-weight:700; font-size:var(--fs-tiny); color:var(--ink-soft); transition:background var(--t-fast), color var(--t-fast); }
.widget-tabs button[aria-selected="true"] { background:var(--ink); color:var(--paper); }
.widget-field { display:flex; flex-direction:column; gap:.35rem; padding:.85rem 0; border-bottom:1px solid var(--paper-2); }
.widget-field:last-of-type { border-bottom:none; }
.widget-field label { font-size:var(--fs-tiny); font-weight:700; color:var(--ink-faint); }
.widget-field select, .widget-field input { border:none; background:transparent; font-size:1rem; font-weight:600; color:var(--ink); padding:0; }
.widget-field select:focus, .widget-field input:focus { outline:none; }
.widget .btn-primary { width:100%; margin-top:1.1rem; }
.widget-note { text-align:center; font-size:var(--fs-tiny); color:var(--ink-faint); margin-top:.7rem; }

/* Trust bar */
.trust { padding-block:2.75rem; border-top:1px solid var(--paper-3); }
.trust-inner { display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.trust-label { font-size:var(--fs-tiny); color:var(--ink-faint); font-weight:600; white-space:nowrap; }
.trust-badges { display:flex; align-items:center; gap:2.25rem; flex-wrap:wrap; }
.trust-badge { display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink-soft); font-size:.92rem; white-space:nowrap; }
.trust-badge img { height:30px; width:auto; filter:grayscale(1) opacity(.75); }
.trust-badge strong { color:var(--ink); font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums; }

/* Service overview (Collage) */
.collage { position:relative; display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:repeat(2, 1fr); gap:.9rem; height:clamp(360px, 42vw, 560px); }
.collage img { width:100%; height:100%; object-fit:cover; border-radius:var(--r-md); }
.collage .c-main { grid-row:1 / -1; }
.collage-cta { position:absolute; right:.9rem; bottom:.9rem; background:var(--white); border-radius:var(--r-md); padding:.9rem 1.1rem; box-shadow:var(--shadow-lg); font-size:var(--fs-tiny); font-weight:700; max-width:210px; }
.collage-cta a { color:var(--accent-deep); display:block; margin-top:.3rem; }

/* Service / Leistungs-Karten */
.card { background:var(--white); border-radius:var(--r-md); padding:1.9rem; box-shadow:var(--shadow-sm); transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); position:relative; }
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.card .num { font-family:'IBM Plex Mono'; color:var(--ink-faint); font-size:var(--fs-tiny); }
.card h3 { margin-block:.6rem .5rem; font-size:1.35rem; }
.card p { font-size:var(--fs-small); color:var(--ink-soft); }
.card .arrow { position:absolute; top:1.7rem; right:1.7rem; width:34px; height:34px; border-radius:50%; background:var(--paper-2); display:flex; align-items:center; justify-content:center; transition:background var(--t-fast), transform var(--t-fast); }
.card:hover .arrow { background:var(--accent); color:#fff; transform:rotate(45deg); }
.card-link { position:absolute; inset:0; border-radius:inherit; }

/* Zielgruppen-Karten */
.audience-card { position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:420px; display:flex; align-items:flex-end; color:#fff; }
.audience-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease); }
.audience-card::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgb(20 30 24/.88), rgb(20 30 24/.1) 55%); }
.audience-card:hover img { transform:scale(1.05); }
.audience-card-body { position:relative; padding:1.9rem; }
.audience-card .tag { font-size:var(--fs-tiny); font-weight:700; color:var(--accent-tint); text-transform:uppercase; letter-spacing:.06em; }
.audience-card h3 { color:#fff; margin-block:.4rem .5rem; }
.audience-card p { color:rgb(255 255 255/.85); font-size:var(--fs-small); }
.audience-card .go { display:inline-flex; align-items:center; gap:.5em; margin-top:1rem; font-weight:700; font-size:var(--fs-small); }

/* Stat band (dark panel) */
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; padding:3.5rem clamp(1.25rem,4vw,2.5rem); }
.stat b { display:block; font-family:'IBM Plex Mono'; font-size:clamp(2rem, 3.2vw, 3.2rem); font-weight:600; font-variant-numeric:tabular-nums; color:#fff; }
.stat span { font-size:var(--fs-small); color:#C7D3CB; }

/* Timeline (Chronik) */
.timeline { position:relative; padding-left:2.2rem; border-left:2px solid var(--paper-3); }
.tl-item { position:relative; padding-bottom:2.2rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:''; position:absolute; left:-2.2rem; top:.35rem; width:12px; height:12px; border-radius:50%; background:var(--accent); transform:translateX(-5px); border:3px solid var(--paper); }
.tl-year { font-family:'IBM Plex Mono'; font-weight:600; color:var(--accent-deep); font-size:1.1rem; }
.tl-item h4 { margin-top:.25rem; }
.tl-item p { font-size:var(--fs-small); color:var(--ink-soft); margin-top:.3rem; }

/* Prozess */
.steps { counter-reset:step; display:grid; grid-template-columns:repeat(3, 1fr); gap:2.25rem; }
.step { position:relative; padding-top:.5rem; }
.step::before { counter-increment:step; content:counter(step); font-family:'Big Shoulders Display'; font-weight:800; font-size:3rem; color:var(--paper-3); line-height:1; display:block; margin-bottom:.5rem; }
.step h4 { margin-bottom:.4rem; }
.step p { font-size:var(--fs-small); color:var(--ink-soft); }

/* Reviews */
.review-card { background:var(--paper-2); border-radius:var(--r-md); padding:1.6rem; }
.review-stars { color:var(--accent-deep); font-size:.95rem; letter-spacing:.1em; margin-bottom:.6rem; }
.review-card p { font-size:var(--fs-small); color:var(--ink-soft); }
.review-source { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; font-size:var(--fs-tiny); color:var(--ink-faint); }
.review-source a { font-weight:700; color:var(--accent-deep); }

/* Referenzen */
.ref-card { border-radius:var(--r-md); overflow:hidden; position:relative; background:var(--ink); color:#fff; }
.ref-card img { width:100%; aspect-ratio:4/3; object-fit:cover; opacity:.85; }
.ref-card-body { padding:1.5rem; }
.ref-card .tag { font-size:var(--fs-tiny); color:var(--accent-tint); font-weight:700; }

/* FAQ */
.faq-item { border-bottom:1px solid var(--paper-3); }
.faq-item summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 0; cursor:pointer; font-weight:700; font-size:1.05rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .plus { flex:none; width:28px; height:28px; border-radius:50%; background:var(--paper-2); position:relative; transition:transform var(--t-fast) var(--ease); }
.faq-item .plus::before, .faq-item .plus::after { content:''; position:absolute; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-item .plus::before { width:10px; height:2px; }
.faq-item .plus::after { width:2px; height:10px; }
.faq-item[open] .plus { transform:rotate(45deg); background:var(--accent); }
.faq-item[open] .plus::before, .faq-item[open] .plus::after { background:#fff; }
.faq-item .a { padding-bottom:1.5rem; color:var(--ink-soft); font-size:var(--fs-small); max-width:70ch; }

/* Formular */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field.full { grid-column:1 / -1; }
.field label { font-size:var(--fs-small); font-weight:700; }
.field .req { color:var(--accent-deep); }
.field input, .field select, .field textarea {
  border:1.5px solid var(--paper-3); background:var(--white); border-radius:var(--r-sm);
  padding:.85em 1em; font-size:1rem; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint); outline:none; }
.field textarea { resize:vertical; min-height:120px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color:var(--accent-deep); }
.field .err { font-size:var(--fs-tiny); color:var(--accent-deep); display:none; }
.field.has-error .err { display:block; }
.field .hint { font-size:var(--fs-tiny); color:var(--ink-faint); }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-success { display:none; text-align:center; padding:3rem 1.5rem; }
.form-success.is-active { display:block; }
.form-success svg { width:52px; height:52px; color:var(--brand); margin-inline:auto 1rem; }

/* Call-Strip */
.call-strip { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; background:var(--brand-tint); border-radius:var(--r-pill); padding:1.1rem 1.75rem; text-align:center; }
.call-strip a { font-weight:700; color:var(--accent-deep); }

/* Desktop call chip */
.call-chip { position:fixed; right:1.5rem; bottom:1.75rem; z-index:var(--z-sticky); display:flex; align-items:center; gap:.6rem; background:var(--ink); color:#fff; padding:.85em 1.3em; border-radius:var(--r-pill); box-shadow:var(--shadow-lg); font-weight:700; font-size:.92rem; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.call-chip.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.call-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (max-width: 899px) { .call-chip { display:none; } }

/* Mobile sticky bar */
.mobile-bar { display:none; }
@media (max-width: 899px) {
  .mobile-bar { position:fixed; inset-inline:0; bottom:0; z-index:var(--z-mobile-bar); display:flex; gap:.6rem; padding:.7rem clamp(1rem,4vw,1.5rem) calc(.7rem + env(safe-area-inset-bottom)); background:rgb(244 241 233/.96); backdrop-filter:blur(14px); box-shadow:0 -1px 0 var(--paper-3); }
  .mobile-bar .btn { flex:1; min-height:48px; }
}

/* Footer */
footer { background:var(--brand-deep); color:#fff; border-radius:var(--r-lg) var(--r-lg) 0 0; margin-inline:clamp(.6rem,1.6vw,1.8rem); }
footer a { color:rgb(255 255 255/.82); }
footer a:hover { color:#fff; }
.footer-top { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem; padding:4.5rem clamp(1.25rem,4vw,2.5rem) 3rem; }
.footer-brand .logo-word { color:#fff; }
.footer-brand p { color:rgb(255 255 255/.75); font-size:var(--fs-small); margin-top:1rem; max-width:32ch; }
.footer-col .h5 { font-family:'IBM Plex Sans'; font-size:var(--fs-tiny); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:rgb(255 255 255/.6); margin-bottom:1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.65rem; font-size:var(--fs-small); }
.footer-bottom { border-top:1px solid rgb(255 255 255/.15); padding:1.5rem clamp(1.25rem,4vw,2.5rem); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--fs-tiny); color:rgb(255 255 255/.6); }
.footer-companies { display:flex; gap:2rem; flex-wrap:wrap; font-size:var(--fs-small); color:rgb(255 255 255/.85); }
.footer-companies b { color:#fff; display:block; font-family:'IBM Plex Mono'; font-size:var(--fs-tiny); font-weight:600; }

/* Kontakt-Icons (Telefon/Mail/Pin) — klein und einheitlich, nicht Browser-Default */
.contact-row { display:flex; gap:.85rem; align-items:center; }
.contact-row.align-start { align-items:flex-start; }
.contact-row svg { width:19px; height:19px; flex-shrink:0; color:var(--accent-deep); }
.contact-row.align-start svg { margin-top:.2rem; }

/* Breadcrumb */
.bcrumb { display:flex; align-items:center; gap:.5em; font-size:var(--fs-tiny); color:rgb(255 255 255/.75); flex-wrap:wrap; }
.bcrumb a:hover { color:#fff; }
.bcrumb .sep { opacity:.5; }

/* Page hero (Unterseiten, kein Fullbleed-100svh) */
.page-hero { position:relative; min-height:64vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.page-hero .hero-content { padding-block:8rem 3rem; }
.page-hero h1 { max-width:20ch; }

/* Custom cursor (nur Desktop, fine pointer) */
.cursor-dot, .cursor-ring { position:fixed; top:0; left:0; pointer-events:none; z-index:var(--z-cursor); border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
.cursor-dot { width:6px; height:6px; background:var(--accent); }
.cursor-ring { width:32px; height:32px; border:1.5px solid rgb(28 42 33/.35); transition:width var(--t-fast) var(--ease), height var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.cursor-ring.is-hover { width:52px; height:52px; border-color:var(--accent); }
@media (hover:none), (pointer:coarse) { .cursor-dot, .cursor-ring { display:none; } }

/* Reveal */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
[data-reveal].is-visible { opacity:1; transform:none; }
[data-reveal-group] > * { transition-delay:calc(var(--i, 0) * 70ms); }

/* Intro overlay */
.intro-overlay { position:fixed; inset:0; z-index:calc(var(--z-modal) + 1); background:var(--ink); display:flex; align-items:center; justify-content:center; transition:opacity var(--t-slow) var(--ease), visibility var(--t-slow); }
.intro-overlay span { font-family:'Big Shoulders Display'; font-weight:800; font-size:clamp(2rem,7vw,4.5rem); color:var(--paper); letter-spacing:-.02em; }
.intro-overlay.is-hidden { opacity:0; visibility:hidden; }
.intro-skip { position:absolute; bottom:2rem; right:2rem; color:rgb(255 255 255/.6); font-size:var(--fs-tiny); background:none; border:1px solid rgb(255 255 255/.3); padding:.6em 1.1em; border-radius:var(--r-pill); }

/* Utility */
.center { text-align:center; margin-inline:auto; }
.flex { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-sm { gap:.75rem; }
.mt-sm { margin-top:1rem; } .mt-md { margin-top:2rem; } .mt-lg { margin-top:3rem; }
.hidden-mobile { display:initial; }
.hidden-desktop { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:1rem; top:-60px; background:var(--ink); color:#fff; padding:.8em 1.2em; border-radius:var(--r-sm); z-index:var(--z-modal); transition:top var(--t-fast) var(--ease); }
.skip-link:focus { top:1rem; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1080px) {
  .nav-links, .nav-phone-text { display:none; }
  .nav-burger { display:flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; background:var(--paper-2); }
  .nav.on-dark:not(.is-scrolled) .nav-burger { background:rgb(255 255 255/.16); color:#fff; }
  .footer-top { grid-template-columns:1.2fr 1fr 1fr; }
  .mega-inner { grid-template-columns:1fr 1fr 1fr; }
  .mega-thumbs { display:none; }
}
@media (max-width: 899px) {
  .section { padding-block:calc(var(--s-section) * 0.72); }
  .split-60-40, .split-40-60 { grid-template-columns:1fr; }
  .g-2, .g-3, .g-4 { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr; gap:2rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2.25rem; }
  .footer-brand { grid-column:1 / -1; }
  .collage { grid-template-columns:1fr 1fr; height:auto; grid-template-rows:180px 130px; }
  .collage .c-main { grid-row:1 / 2; grid-column:1 / -1; }
  .collage-cta { position:static; margin-top:.9rem; max-width:none; }
  .hidden-mobile { display:none; }
  .hidden-desktop { display:initial; }
  body { padding-bottom:78px; } /* Platz für Sticky-Bar */
  .form-grid { grid-template-columns:1fr; }
  .hero h1 { max-width:14ch; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .g-4 { grid-template-columns:repeat(2, 1fr); }
  .g-3 { grid-template-columns:repeat(2, 1fr); }
}

/* Print */
@media print {
  .nav, .mobile-bar, .call-chip, footer, .cursor-dot, .cursor-ring, .widget { display:none; }
}