/* =============================================================
   KFZ GUTACHTER SPARRENBURG · Design System (Multi-Page)
   Hell · weiß-dominant · Orange + Cyan · clean & edel (kein KI-Look)
   Tokens nach Vorgabe · Lucide-Icons · A11y-fokussiert
============================================================= */

:root {
  /* Farbwelt */
  --white:      #ffffff;   /* primärer Hintergrund */
  --surface:    #f8f9fc;   /* Cards / Sektionen */
  --ink:        #0a0a0a;   /* Text primär */
  --ink-2:      #4a4a4a;   /* Text sekundär */
  --accent:     #e85d04;   /* CTA / Highlights */
  --accent-d:   #c94f03;
  --cyan:       #00b4d8;   /* Erfolge / positive Zahlen */
  --line:       #e5e7eb;   /* Borders */

  /* Schatten — weich & tief */
  --shadow-sm: 0 8px 18px -10px rgba(10,10,10,.10);
  --shadow:    0 20px 35px -10px rgba(10,10,10,.05);
  --shadow-lg: 0 40px 70px -22px rgba(10,10,10,.14);
  --glow:      0 18px 48px -16px rgba(232,93,4,.40);

  /* Typografie */
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --r: 16px; --r-lg: 24px;
  --container: 1200px;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
::selection { background: var(--accent); color: #fff; }

/* Sichtbare, konsistente Fokuszustände (A11y) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 10000; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }

/* Icons (Lucide, currentColor) */
.icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon--fill { fill: currentColor; stroke: none; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 32px; height: 32px; }

/* ---------- Typo-Helfer ---------- */
.eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.section__title { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.section__title em { color: var(--accent); font-style: normal; }
.section__head { margin-bottom: clamp(36px, 5vw, 64px); }
.section__head--center { text-align: center; max-width: 740px; margin-inline: auto; }
.section__head--center .eyebrow { justify-content: center; }
.section__sub { color: var(--ink-2); margin-top: 14px; font-size: 1.05rem; }

/* =============================================================
   BUTTONS — clean (kein Glas), Fülleffekt
============================================================= */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 100px; font-weight: 600; font-size: .98rem;
  border: 1.5px solid var(--ink); background: var(--white); color: var(--ink);
  overflow: hidden; z-index: 0; will-change: transform;
  transition: color .3s, transform .15s, box-shadow .3s, border-color .3s, background .3s;
}
.btn::before { content:""; position:absolute; inset:0; background: var(--accent); transform: scaleX(0); transform-origin:left; transition: transform .4s cubic-bezier(.16,1,.3,1); z-index:-1; }
.btn:hover { color:#fff; border-color: var(--accent); box-shadow: var(--glow); transform: scale(1.02); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.98); }
.btn .icon { width: 20px; height: 20px; }
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }
/* Primärer CTA: durchgehend Orange (Akzentfarbe), Hover dunkler */
.btn--solid { background: var(--accent); color:#fff; border-color: var(--accent); }
.btn--solid::before { background: var(--accent-d); }
.btn--solid:hover { color:#fff; border-color: var(--accent-d); }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--ghost:hover { color:#fff; }

/* Normaler Mauszeiger – kein Custom-Cursor (auf Wunsch entfernt). */

/* =============================================================
   PAGE TRANSITION + Hero-Skeleton
============================================================= */
.page-fade { opacity: 0; transform: translateY(12px); }
.page-fade.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.page-leave { opacity: 0 !important; transform: translateY(-10px) !important; transition: opacity .3s ease, transform .3s ease; }
.skeleton { background: linear-gradient(100deg, var(--surface) 30%, #eef1f6 50%, var(--surface) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* =============================================================
   TOPBAR + NAV
============================================================= */
.topbar { background: var(--ink); color:#fff; font-size:.82rem; }
.topbar__row { display:flex; gap:24px; align-items:center; justify-content:center; padding:9px 0; flex-wrap:wrap; }
.topbar__item { display:inline-flex; align-items:center; gap:6px; opacity:.85; transition:opacity .25s,color .25s; }
.topbar__item:hover { opacity:1; color: var(--accent); }
.topbar__item .icon { width:15px; height:15px; }

.nav { position: sticky; top:0; z-index:900; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom:1px solid var(--line); transition: box-shadow .3s, border-color .3s; }
.nav.is-stuck { box-shadow: var(--shadow-sm); border-color: var(--line); }
.nav__row { display:flex; align-items:center; gap:28px; height: var(--nav-h); }
.nav__logo img { height:40px; width:auto; }
.nav__links { display:flex; gap:26px; margin-left:auto; }
.nav__links a { position:relative; font-weight:500; padding:4px 0; font-size:.98rem; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background: var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform:scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--accent); }
.nav__cta { padding:11px 20px; }
.nav__burger { display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav__burger span { width:26px; height:2px; background: var(--ink); transition:transform .3s,opacity .3s; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg);}
.nav.is-open .nav__burger span:nth-child(2){ opacity:0;}
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg);}

/* Breadcrumb */
.breadcrumb { padding: 16px 0 0; font-size:.86rem; color: var(--ink-2); }
.breadcrumb ol { display:flex; gap:8px; align-items:center; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.breadcrumb li { list-style:none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--ink); font-weight:600; }
.breadcrumb .sep { opacity:.5; }

/* =============================================================
   PAGE-HERO (Unterseiten)
============================================================= */
.phero { padding: clamp(40px,6vw,80px) 0 clamp(30px,4vw,50px); position:relative; overflow:hidden; }
.phero__grid { position:absolute; inset:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:52px 52px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000, transparent 70%); z-index:0; }
.phero__inner { position:relative; z-index:1; max-width: 760px; }
.phero h1 { font-size: clamp(2.2rem,5.4vw,4rem); margin: 8px 0 14px; }
.phero p { color: var(--ink-2); font-size:1.1rem; max-width: 620px; }

/* =============================================================
   1 · HOME HERO
============================================================= */
.hero { position:relative; padding: clamp(40px,6vw,80px) 0 60px; overflow:hidden; }
.hero__grid { position:absolute; inset:-10% -10% auto -10%; height:120%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:54px 54px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000, transparent 75%); will-change: transform; }
.hero__glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; z-index:0; }
.hero__glow--1 { width:380px; height:380px; background: rgba(232,93,4,.22); top:6%; right:8%; }
.hero__glow--2 { width:320px; height:320px; background: rgba(0,180,216,.20); bottom:0; left:-4%; }
.hero__inner { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero__badge { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:100px; padding:8px 16px; font-size:.85rem; font-weight:600; color: var(--accent); margin-bottom:22px; }
.hero__badge .icon { width:16px; height:16px; }
.hero__title { font-size: clamp(2.5rem,5.6vw,4.6rem); line-height:1; }
.hero__title-accent { color: var(--accent); }
.hero__typed { font-family: var(--font-head); font-weight:600; font-size: clamp(1.25rem,2.5vw,1.9rem); margin-top:18px; min-height:1.4em; }
.hero__typed-static { color: var(--ink-2); }
.typed { color: var(--accent); }
.caret { color: var(--accent); animation: blink 1s steps(1) infinite; font-weight:400; }
@keyframes blink { 50% { opacity:0; } }
.hero__lead { color: var(--ink-2); max-width:480px; margin-top:18px; font-size:1.08rem; }
.hero__cta { display:flex; align-items:center; gap:14px; margin-top:28px; flex-wrap:wrap; }
.play-btn { display:inline-flex; align-items:center; gap:12px; }
.play-btn__ico { width:50px; height:50px; border-radius:50%; background: var(--cyan); color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(0,180,216,.7); transition:transform .3s; }
.play-btn:hover .play-btn__ico { transform:scale(1.1); }
.play-btn__txt { font-size:.82rem; line-height:1.15; font-weight:600; color: var(--ink-2); text-align:left; }
.hero__checks { display:flex; gap:20px; margin-top:26px; flex-wrap:wrap; font-size:.92rem; color: var(--ink-2); font-weight:500; }
.hero__checks li { display:inline-flex; align-items:center; gap:8px; }
.hero__checks .icon { width:18px; height:18px; color: var(--cyan); }
.hero__right { position:relative; }
.hero__car-stage { position:relative; will-change: transform; }
.hero__car { width:100%; aspect-ratio:4/3; object-fit:cover; height:auto; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border:1px solid var(--line); }
.hero__trustcard { position:absolute; bottom:-26px; left:-10px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--r); padding:14px 18px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.hero__trustcard strong { font-family:var(--font-mono); font-size:.82rem; }
.hero__trustcard small { width:100%; color:var(--ink-2); font-size:.72rem; }
.hero__scroll { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:26px; height:42px; border:2px solid var(--line); border-radius:20px; z-index:3; }
.hero__scroll span { position:absolute; left:50%; top:8px; width:4px; height:8px; background:var(--accent); border-radius:4px; transform:translateX(-50%); animation:scrolldot 1.6s ease-in-out infinite; }
@keyframes scrolldot { 0%{opacity:0;transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0;transform:translate(-50%,16px);} }

/* Trust logos (Platzhalter-Boxen, keine echten Logos) */
.trust { border-block:1px solid var(--line); background: var(--surface); }
.trust__row { display:flex; gap:18px; align-items:center; justify-content:center; padding:22px 0; flex-wrap:wrap; }
.trust__logo { font-family:var(--font-mono); font-weight:500; letter-spacing:2px; color: var(--ink-2); border:1px dashed var(--line); border-radius:10px; padding:10px 22px; background:#fff; font-size:.9rem; }

/* =============================================================
   LEISTUNGEN-GRID
============================================================= */
/* Leistungskarte: Bild oben + Text + Button (gleichmäßiges 3er-Grid) */
.services__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.scard { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; will-change:transform; }
.scard:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color: rgba(232,93,4,.4); }
.scard__media { display:block; overflow:hidden; background:var(--surface); }
.scard__media img { width:100%; aspect-ratio:16/10; height:auto; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.scard:hover .scard__media img { transform:scale(1.06); }
.scard__body { padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; position:relative; }
.scard__ico { position:absolute; top:-26px; right:22px; width:54px; height:54px; display:grid; place-items:center; background:var(--accent); border-radius:14px; color:#fff; box-shadow:var(--glow); }
.scard__ico .icon { width:26px; height:26px; }
.scard__body h3 { font-size:1.3rem; margin:4px 0 8px; padding-right:48px; }
.scard__body p { color: var(--ink-2); font-size:.98rem; flex:1; }
.scard__more { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:600; color:var(--accent); }
.scard__more .icon { width:18px; height:18px; transition: transform .3s; }
.scard:hover .scard__more .icon { transform: translateX(4px); }

/* Leistungs-Detailabschnitte (Leistungen-Seite) */
.ldetail { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; padding: clamp(40px,6vw,72px) 0; border-top:1px solid var(--line); }
.ldetail:nth-child(even) .ldetail__media { order:2; }
.ldetail__media img { width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; display:block; border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow); }
.ldetail__ico { width:56px; height:56px; border-radius:14px; background: var(--surface); color: var(--accent); display:grid; place-items:center; margin-bottom:16px; }
.ldetail h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom:14px; }
.ldetail p { color: var(--ink-2); margin-bottom:14px; }
.ldetail ul { display:flex; flex-direction:column; gap:10px; }
.ldetail li { display:flex; gap:10px; align-items:flex-start; font-weight:500; }
.ldetail li .icon { width:20px; height:20px; color: var(--cyan); margin-top:2px; }

/* =============================================================
   VERGLEICH
============================================================= */
.compare { background: var(--surface); }
.compare__grid { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; }
.compare__col { padding:40px; border-radius:var(--r-lg); }
.compare__col h3 { font-size:1.4rem; margin-bottom:22px; display:flex; gap:10px; align-items:center; }
.compare__col ul { display:flex; flex-direction:column; gap:16px; }
.compare__col li { display:flex; gap:14px; align-items:flex-start; font-weight:500; opacity:0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.compare__col li.show { opacity:1; transform:none; }
.compare__col li .badge { flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.compare__col li .badge .icon { width:16px; height:16px; }
.compare__col--neg { background:#26282e; color: rgba(255,255,255,.85); }
.compare__col--neg h3 { color:#fff; }
.compare__col--neg .badge { background: rgba(255,90,90,.18); color:#ff6b6b; }
.compare__col--neg li.show { animation: shake .5s; }
@keyframes shake { 0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);} }
.compare__col--pos { background:#fff; border:2px solid var(--ink); }
.compare__col--pos .badge { background: rgba(0,180,216,.14); color: var(--cyan); }
.compare__col--pos li.show .badge { animation: pop .45s cubic-bezier(.16,1.6,.4,1); }
@keyframes pop { 0%{transform:scale(0);}100%{transform:scale(1);} }
.compare__col--pos .btn { margin-top:28px; }
.compare__divider { width:2px; background: linear-gradient(var(--accent),var(--cyan)); margin:20px 28px; border-radius:4px; }
/* Differenz-Diagramm */
.cchart { margin-top: clamp(40px,6vw,64px); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-sm); }
.cchart h3 { font-size:1.3rem; margin-bottom:24px; text-align:center; }
.cbar { margin-bottom:22px; }
.cbar__label { display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:8px; }
.cbar__label b { font-family: var(--font-mono); }
.cbar__track { height:16px; background: var(--surface); border-radius:10px; overflow:hidden; }
.cbar__fill { height:100%; width:0; border-radius:10px; transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.cbar--est .cbar__fill { background: #b9c0cc; }
.cbar--real .cbar__fill { background: linear-gradient(90deg, var(--accent), var(--cyan)); }

/* =============================================================
   CASES SLIDER
============================================================= */
.cases__viewport { overflow:hidden; cursor:grab; padding:10px 0 28px; -webkit-user-select:none; user-select:none; }
.cases__viewport:active { cursor:grabbing; }
.cases__track { display:flex; gap:26px; padding-inline: max(20px, calc((100vw - var(--container)) / 2 + 20px)); will-change:transform; }
.case { flex:0 0 min(820px,86vw); display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; transition: transform .4s, box-shadow .4s; }
.case.is-active { box-shadow: var(--shadow-lg); }
.case__media { background: var(--surface); }
.case__media img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.case__body { padding: clamp(24px,3.5vw,42px); display:flex; flex-direction:column; justify-content:center; }
.case__tag { font-family:var(--font-mono); font-size:.76rem; letter-spacing:1.5px; text-transform:uppercase; color: var(--accent); }
.case__title { font-size: clamp(1.6rem,3vw,2.4rem); margin:8px 0 24px; }
.case__nums { display:flex; gap:16px; flex-wrap:wrap; }
.case__num { flex:1; min-width:120px; padding:14px 16px; border-radius:14px; background: var(--surface); }
.case__num small { display:block; color: var(--ink-2); font-size:.8rem; margin-bottom:4px; }
.case__num b { font-family:var(--font-mono); font-size: clamp(1.3rem,2.4vw,1.9rem); }
.case__num--real { background: rgba(0,180,216,.1); }
.case__num--real b { color: var(--cyan); }
.case__bar { position:relative; height:12px; background: var(--surface); border-radius:10px; margin-top:24px; }
.case__bar i { position:absolute; inset:0; width:0; background: linear-gradient(90deg,var(--accent),var(--cyan)); border-radius:10px; transition: width 1s cubic-bezier(.16,1,.3,1); }
.case.is-active .case__bar i { width: var(--w); }
.case__bar em { position:absolute; right:0; top:-30px; font-family:var(--font-mono); font-weight:600; color: var(--cyan); background:#fff; border:1px solid var(--line); padding:2px 10px; border-radius:100px; font-size:.85rem; opacity:0; transform:translateY(6px); transition:opacity .5s .4s, transform .5s .4s; }
.case.is-active .case__bar em { opacity:1; transform:none; }
.cases__nav { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.cases__dots { display:flex; gap:10px; }
.cases__dots button { width:10px; height:10px; border-radius:50%; background: var(--line); transition: width .3s, background .3s; }
.cases__dots button.is-active { width:30px; border-radius:10px; background: var(--accent); }
.cases__arrows { display:flex; gap:12px; }
.cases__arrow { width:52px; height:52px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; transition:background .3s,color .3s,transform .2s; }
.cases__arrow:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.cases__arrow:active { transform:scale(.92); }

/* =============================================================
   PROZESS
============================================================= */
.process__timeline { position:relative; }
.process__line { position:absolute; top:54px; left:8%; right:8%; height:3px; background: var(--line); border-radius:4px; }
.process__line i { display:block; height:100%; width:0; background: linear-gradient(90deg,var(--accent),var(--cyan)); border-radius:4px; }
.process__steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; }
.pstep { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; text-align:center; transition:transform .4s, box-shadow .4s; will-change:transform; }
.pstep:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pstep__num { font-family:var(--font-mono); color:var(--accent); font-weight:600; letter-spacing:2px; }
.pstep__ico { width:84px; height:84px; margin:14px auto 16px; display:grid; place-items:center; background: var(--surface); border-radius:50%; color: var(--accent); }
.pstep__ico .icon { width:34px; height:34px; }
.pstep h3 { font-size:1.3rem; margin-bottom:8px; }
.pstep p { color: var(--ink-2); font-size:.96rem; }

/* =============================================================
   FAKTEN + REGION
============================================================= */
.facts__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.fact { background: var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 26px; text-align:center; min-width:0; }
.fact b { display:block; font-family:var(--font-head); font-weight:700; font-size: clamp(3rem,7.5vw,5rem); letter-spacing:-0.04em; line-height:1; }
.fact b .count { color: var(--accent); }
.fact b i { font-style:normal; font-size:.46em; font-weight:700; color: var(--ink-2); vertical-align:baseline; margin-left:4px; letter-spacing:0; }
.fact > span { display:block; margin-top:14px; color: var(--ink-2); font-size:.92rem; font-weight:500; }

.region { background: var(--ink); border-radius:var(--r-lg); padding: clamp(28px,4vw,52px); color:#fff; display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:center; }
.region__head h3 { font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom:12px; }
.region__head p { color: rgba(255,255,255,.7); }
.region__map { position:relative; aspect-ratio:16/11; border-radius:var(--r); border:1px solid rgba(255,255,255,.12); overflow:hidden; background:#1b1d22; }
.region__map iframe { width:100%; height:100%; border:0; display:block; filter: grayscale(.15); }
.region__list { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:18px; }
.region__list li { display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:.92rem; color:#fff; }
.region__list .icon { color: var(--accent); }
.pin { position:absolute; left:var(--x); top:var(--y); width:16px; height:16px; background:var(--accent); border-radius:50%; transform:translate(-50%,-50%); animation:ping 2.4s ease-out infinite; }
.pin:nth-child(2n){ animation-delay:.8s; background:var(--cyan); }
@keyframes ping { 0%{box-shadow:0 0 0 0 rgba(232,93,4,.5);}70%{box-shadow:0 0 0 18px rgba(232,93,4,0);}100%{box-shadow:0 0 0 0 rgba(232,93,4,0);} }
.region__bubble { position:absolute; padding:6px 12px; background:#fff; color:var(--ink); border-radius:100px; font-size:.8rem; font-weight:600; transform:translate(-50%,-150%); opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; }
.region__bubble.show { opacity:1; }

/* =============================================================
   ÜBER + TESTIMONIALS
============================================================= */
.about__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:54px; align-items:center; }
.about__media { position:relative; }
.about__media img { width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line); }
.about__badge { position:absolute; bottom:24px; left:-20px; background:var(--accent); color:#fff; border-radius:var(--r); padding:18px 24px; box-shadow:var(--glow); }
.about__badge b { font-family:var(--font-head); font-size:1.8rem; display:block; line-height:1; }
.about__badge span { font-size:.82rem; opacity:.9; }
.about__text p { color: var(--ink-2); margin-top:16px; }
.about__checks { display:flex; flex-direction:column; gap:10px; margin:22px 0; font-weight:500; }
.about__checks li { display:flex; gap:10px; align-items:center; }
.about__checks .icon { color: var(--cyan); }
.about__cta { display:flex; gap:14px; flex-wrap:wrap; }
.advantages { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.adv { background: var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.adv__ico { width:52px; height:52px; border-radius:12px; background:#fff; color:var(--accent); display:grid; place-items:center; margin-bottom:14px; box-shadow:var(--shadow-sm); }
.adv h3 { font-size:1.15rem; margin-bottom:6px; }
.adv p { color:var(--ink-2); font-size:.95rem; }

/* Endlos-Slideshow (Marquee) – mehrere Karten gleichzeitig sichtbar, läuft automatisch */
.tmarquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.tmarquee__track { display:flex; gap:24px; width:max-content; padding:6px 0; animation: tscroll 55s linear infinite; }
.tmarquee:hover .tmarquee__track { animation-play-state:paused; }
@keyframes tscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.tcard { flex:0 0 min(380px,84vw); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:30px; display:flex; flex-direction:column; }
.tcard__quote { color: var(--accent); opacity:.4; margin-bottom:10px; }
.tcard__quote .icon { width:30px; height:30px; }
.tcard__stars { color: var(--accent); display:inline-flex; gap:3px; margin-bottom:14px; }
.tcard__stars .icon { width:18px; height:18px; }
.tcard blockquote { font-family:var(--font-head); font-size:1.08rem; line-height:1.45; font-weight:500; flex:1; }
.tcard figcaption { display:flex; gap:12px; align-items:center; margin-top:20px; }
.tcard figcaption img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.tcard figcaption b { display:block; }
.tcard figcaption small { color: var(--ink-2); }

/* =============================================================
   CTA-BANNER
============================================================= */
.cta-banner { background: var(--ink); border-radius: var(--r-lg); padding: clamp(36px,5vw,64px); text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta-banner::after { content:""; position:absolute; width:300px; height:300px; background: radial-gradient(circle, rgba(232,93,4,.4), transparent 70%); top:-100px; right:-60px; }
.cta-banner h2 { font-size: clamp(1.8rem,3.6vw,2.8rem); position:relative; }
.cta-banner p { color: rgba(255,255,255,.72); margin:14px 0 26px; position:relative; }
.cta-banner .btn { position:relative; }

/* =============================================================
   KONTAKT + FORM
============================================================= */
.contact__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.contact__form-wrap { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding: clamp(26px,4vw,46px); box-shadow:var(--shadow); }
.form__progress { height:8px; background: var(--surface); border-radius:10px; margin:20px 0 24px; position:relative; }
.form__progress i { display:block; height:100%; width:0; background: linear-gradient(90deg,var(--accent),var(--cyan)); border-radius:10px; transition: width .4s; }
.form__progress span { position:absolute; right:0; top:-22px; font-family:var(--font-mono); font-size:.78rem; color: var(--ink-2); }
.form { display:flex; flex-direction:column; gap:16px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; position:relative; }
.field span { font-size:.85rem; font-weight:600; color: var(--ink-2); }
.field input, .field select, .field textarea { font:inherit; font-size:.98rem; padding:13px 16px; border:1.5px solid var(--line); border-radius:12px; background:#fff; transition:border-color .3s, box-shadow .3s, transform .25s; width:100%; }
.field textarea { resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,93,4,.12); transform:scale(1.01); }
.field input:invalid:not(:placeholder-shown) { border-color:#e23; }
.form__submit { justify-content:center; margin-top:8px; }
.form__plane { transition: transform .5s, opacity .5s; }
.form__submit.is-sending .form__plane { transform: translate(50px,-50px) rotate(20deg); opacity:0; }
.form__done { color: var(--cyan); font-weight:600; display:flex; gap:8px; align-items:center; }
.form__note { color: var(--ink-2); font-size:.78rem; }
.contact__info h2, .contact__info h3 { font-size:1.5rem; margin-bottom:20px; }
.cinfo { display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; margin-bottom:14px; transition:transform .3s, box-shadow .3s, border-color .3s; }
.cinfo:hover { transform:translateX(6px); box-shadow:var(--shadow); border-color: rgba(232,93,4,.4); }
.cinfo__ico { width:46px; height:46px; border-radius:12px; background:var(--surface); color:var(--accent); display:grid; place-items:center; }
.cinfo small { display:block; color:var(--ink-2); font-size:.78rem; }
.cinfo b { font-size:1.02rem; }
.contact__hours { margin-top:22px; padding:20px; border-radius:var(--r); background:var(--ink); color:#fff; }
.contact__hours b { display:flex; gap:8px; align-items:center; color: var(--accent); }
.contact__hours span { font-size:.9rem; color: rgba(255,255,255,.7); }
.contact__map { margin-top:16px; aspect-ratio:16/9; border-radius:var(--r); border:1px solid var(--line); background: repeating-linear-gradient(45deg, var(--surface) 0 12px, #fff 12px 24px); display:grid; place-items:center; color:var(--ink-2); font-size:.85rem; gap:6px; text-align:center; }
.contact__map .icon { color: var(--accent); }

/* FAQ (Akkordeon) */
.faq { max-width:820px; margin-inline:auto; }
.faq__item { border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; background:#fff; overflow:hidden; }
.faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; font-family:var(--font-head); font-weight:600; font-size:1.05rem; text-align:left; }
.faq__q .icon { transition: transform .3s; color: var(--accent); }
.faq__item.open .faq__q .icon { transform: rotate(45deg); }
.faq__a { max-height:0; overflow:hidden; transition: max-height .4s ease; }
.faq__a p { padding:0 24px 20px; color: var(--ink-2); }

/* =============================================================
   LEGAL (Impressum/Datenschutz)
============================================================= */
.legal { max-width: 820px; margin-inline:auto; }
.legal h2 { font-size:1.4rem; margin:32px 0 12px; }
.legal h3 { font-size:1.1rem; margin:20px 0 8px; }
.legal p, .legal li { color: var(--ink-2); margin-bottom:10px; }
.legal ul { list-style: disc; padding-left: 22px; }

/* =============================================================
   FOOTER
============================================================= */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding-top:64px; }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:46px; }
.footer__brand img { height:38px; margin-bottom:16px; filter: brightness(0) invert(1); }
.footer__brand p { max-width:280px; font-size:.92rem; }
.footer__social { display:inline-flex; gap:8px; align-items:center; margin-top:16px; color: var(--accent); font-weight:600; }
.footer__col h4 { color:#fff; margin-bottom:16px; font-size:1.05rem; }
.footer__col a, .footer__col address { display:block; margin-bottom:10px; font-size:.92rem; font-style:normal; transition:color .25s; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { display:flex; justify-content:space-between; padding:22px 0; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; flex-wrap:wrap; gap:10px; }
.footer__bottom a:hover { color: var(--accent); }

/* =============================================================
   MODALS
============================================================= */
.modal { position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.is-open { display:flex; }
.modal__overlay { position:absolute; inset:0; background: rgba(10,10,10,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade .3s; }
@keyframes fade { from{opacity:0;} }
.modal__box { position:relative; background:#fff; border-radius:var(--r-lg); width:min(820px,100%); box-shadow:var(--shadow-lg); animation:popin .4s cubic-bezier(.16,1.4,.3,1); overflow:hidden; }
@keyframes popin { from{opacity:0; transform:scale(.92) translateY(20px);} }
.modal__close { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; background:var(--surface); display:grid; place-items:center; z-index:2; transition:background .25s,color .25s; }
.modal__close:hover { background:var(--accent); color:#fff; }
.modal__video { aspect-ratio:16/9; background:var(--ink); }
.modal__video-ph { width:100%; height:100%; display:grid; place-items:center; align-content:center; gap:8px; color:#fff; font-family:var(--font-head); font-size:1.3rem; }
.modal__video-ph small { color: rgba(255,255,255,.5); font-family:var(--font-body); font-size:.85rem; }

/* =============================================================
   SCROLL-REVEAL
============================================================= */
.anim-up, .anim-left, .anim-right { opacity:0; }
.anim-up { transform: translateY(36px); }
.anim-left { transform: translateX(-44px); }
.anim-right { transform: translateX(44px); }
.is-revealed { opacity:1 !important; transform:none !important; }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width:1024px){
  .hero__inner { grid-template-columns:1fr; gap:36px; }
  .hero__right { order:-1; max-width:520px; }
  .services__grid { grid-template-columns:repeat(2,1fr); }
  .scard--lg { grid-row:auto; }
  .scard--wide { grid-column:span 2; }
  .facts__grid { grid-template-columns:repeat(2,1fr); }
  .region, .about__grid, .contact__grid, .ldetail { grid-template-columns:1fr; }
  .ldetail:nth-child(even) .ldetail__media { order:0; }
  .advantages { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body { font-size:16px; }
  .topbar__item--hide { display:none; }
  /* Off-canvas Menü: bleibt im Viewport (right:0) → kein horizontaler Overflow.
     Ein- / Ausblenden via opacity + visibility statt translateX(110%). */
  .nav__links { position:fixed; inset:0 0 0 auto; width:min(320px,84vw); background:#fff; flex-direction:column; padding:100px 32px; gap:20px; box-shadow:var(--shadow-lg); z-index:850; opacity:0; visibility:hidden; transform:translateY(-12px); pointer-events:none; transition:opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1), visibility .35s; }
  .nav.is-open .nav__links { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav__links a { font-size:1.2rem; }
  .nav__cta { display:none; }
  .nav__burger { display:flex; }
  .services__grid { grid-template-columns:1fr; }
  .scard--wide { grid-column:auto; }
  .compare__grid { grid-template-columns:1fr; }
  .compare__divider { width:auto; height:2px; margin:24px 40px; }
  .process__steps { grid-template-columns:1fr; }
  .process__line { display:none; }
  .facts__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fact { padding:26px 14px; }
  .fact b { font-size: clamp(2.6rem,12vw,3.6rem); }
  .case { grid-template-columns:1fr; }
  .case__media { aspect-ratio:16/10; }
  .field-row { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; }
  .about__badge { left:12px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .anim-up, .anim-left, .anim-right { opacity:1; transform:none; }
}