/* =========================================================
   eiska-projekt — Design System
   Ästhetik: industriell / präzise — Graphit + Molten-Akzent
   ========================================================= */

:root {
  /* Farben */
  --ink:        #15181b;
  --graphite:   #1d2226;
  --steel:      #333b42;
  --slate:      #5f6a73;
  --mist:       #9aa4ac;
  --paper:      #f5f3ee;
  --paper-2:    #ebe7df;
  --paper-3:    #e0dbd1;
  --accent:     #e2541b;   /* molten orange */
  --accent-deep:#b3400e;
  --steel-blue: #2f5d72;
  --line:       rgba(21,24,27,.14);
  --line-soft:  rgba(21,24,27,.08);
  --line-light: rgba(245,243,238,.16);

  /* Typografie */
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --body:    "Archivo", "Helvetica Neue", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Maße */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --r: 2px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Layout-Helfer */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }

/* Technisches Eyebrow-Label */
.eyebrow {
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.eyebrow--light { color: var(--paper); }
.eyebrow--light::before { background: var(--paper); opacity:.5; }

/* Typo-Skala */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; }
.h-hero  { font-size: clamp(2.6rem, 7.2vw, 5.6rem); font-weight: 800; }
.h-1     { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h-2     { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.lead    { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--steel); line-height: 1.55; }
.muted   { color: var(--slate); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono);
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1.05em 1.6em;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r);
  transition: transform .25s ease, background .25s ease, color .25s ease;
  cursor: pointer;
}
.btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn--accent { background: var(--accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--on-dark:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,243,238,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: .65em; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.brand img { height: 46px; width: auto; display: block; }
.site-footer .brand img { height: 52px; }
.brand .mark {
  width: 30px; height: 30px; border: 2px solid var(--accent);
  display: grid; place-items: center; border-radius: var(--r);
  font-family: var(--mono); font-size: .8rem; color: var(--accent);
}
.brand b { color: var(--accent); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a { font-size: .92rem; font-weight: 600; color: var(--steel); position: relative; padding: .3em 0; }
.nav a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .25s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width:100%; }
.header-cta { display:flex; align-items:center; gap:1rem; }
.phone-link { font-family: var(--mono); font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:.5em; }
.phone-link::before { content:"›"; color:var(--accent); font-weight:700; }
.nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:var(--r); width:44px; height:44px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-toggle span { width:20px; height:2px; background:var(--ink); transition:.3s; }

/* ============ HERO ============ */
.hero { position: relative; background: var(--graphite); color: var(--paper); overflow: hidden; }
.hero::after {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; min-height: clamp(560px, 80vh, 760px); position:relative; z-index:2; }
.hero-text { padding: clamp(48px,7vw,96px) var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.hero-text .h-hero { color: var(--paper); margin: .35em 0 .5em; }
.hero-text .h-hero em { font-style: normal; color: var(--accent); }
.hero-text .lead { color: var(--mist); max-width: 40ch; margin-bottom: 2.2em; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-media { position:relative; }
.hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(.25) contrast(1.05); }
.hero-media::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--graphite) 0%, transparent 28%, transparent 100%); z-index:1; }
.hero-tag {
  position:absolute; right:var(--gutter); bottom:28px; z-index:2;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); background:rgba(21,24,27,.6); padding:.6em 1em; border:1px solid var(--line-light); border-radius:var(--r);
}

/* ============ STATS-LEISTE ============ */
.stats { background: var(--ink); color: var(--paper); }
.stats-grid { display:grid; grid-template-columns: repeat(4,1fr); }
.stat { padding: clamp(28px,4vw,48px) clamp(18px,2.4vw,34px); border-left:1px solid var(--line-light); }
.stat:first-child { border-left:none; }
.stat .num { font-family:var(--display); font-weight:800; font-size: clamp(2.2rem,4vw,3.2rem); line-height:1; letter-spacing:-.03em; }
.stat .num span { color:var(--accent); }
.stat .num--cred { font-size: clamp(1.45rem,2.4vw,2.05rem); white-space:nowrap; }
.stat .num--cred .vsep { display:inline-block; width:2px; height:.72em; background:currentColor; opacity:.32; margin:0 .42em; vertical-align:-.04em; border-radius:1px; }
.stat .lbl { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin-top:.9em; }

/* ============ SECTION-HEADER ============ */
.sec-head { max-width: 56ch; margin-bottom: clamp(40px,5vw,64px); }
.sec-head .h-1 { margin:.4em 0 .5em; }

/* Numbered section index */
.idx { font-family:var(--mono); font-size:.78rem; color:var(--slate); letter-spacing:.1em; }

/* ============ SERVICE-KARTEN ============ */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.card { background:var(--paper); padding: clamp(28px,3vw,40px); display:flex; flex-direction:column; min-height:340px; transition: background .3s ease; position:relative; }
.card:hover { background:#fff; }
.card .c-num { font-family:var(--mono); font-size:.92rem; color:var(--accent); letter-spacing:.08em; }
.card h3 { font-size:1.4rem; margin:.6em 0 .5em; }
.card p { color:var(--steel); font-size:.98rem; flex:1; }
.card .c-go { margin-top:1.4em; font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:.5em; }
.card .c-go::after { content:"→"; transition:transform .25s ease; }
.card:hover .c-go::after { transform:translateX(5px); color:var(--accent); }
.card .c-img { margin:-40px -40px 24px; height:160px; overflow:hidden; }
.card .c-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(.3); transition:transform .5s ease, filter .4s ease; }
.card:hover .c-img img { transform:scale(1.05); filter:grayscale(0); }
.card .c-img--badge { background:var(--ink); color:var(--accent); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; }
.card .c-img--badge svg { width:34px; height:34px; }
.card .c-img--badge span { font-family:var(--mono); font-size:.92rem; letter-spacing:.06em; color:var(--paper); }
.card .c-img--badge span b { color:var(--accent); font-weight:700; }

/* ============ SPLIT (Text + Bild) ============ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,80px); align-items:center; }
.split--rev .split-media { order:-1; }
.split-media { position:relative; }
.split-media img { width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:var(--r); filter:grayscale(.2); }
.split-media::before { content:""; position:absolute; left:-14px; top:-14px; width:64px; height:64px; border-left:2px solid var(--accent); border-top:2px solid var(--accent); }
.split-media::after  { content:""; position:absolute; right:-14px; bottom:-14px; width:64px; height:64px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); }

/* Feature-Listen */
.flist { display:grid; gap:.85em; margin-top:1.6em; }
.flist li { position:relative; padding-left:1.7em; color:var(--steel); }
.flist li::before { content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; background:var(--accent); border-radius:1px; }
.flist li strong { color:var(--ink); font-weight:700; }

/* Tag-Wolke (QM-Verfahren) */
.tags { display:flex; flex-wrap:wrap; gap:.6em; margin-top:1.4em; }
.tag { font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; padding:.5em .9em; border:1px solid var(--line); border-radius:var(--r); color:var(--steel); background:var(--paper); }
.tag:hover { border-color:var(--accent); color:var(--ink); }

/* Tonale Sektion */
.section--tone { background: var(--paper-2); }
.section--dark { background: var(--graphite); color: var(--paper); }
.section--dark .lead { color: var(--mist); }
.section--dark .h-1, .section--dark h2 { color: var(--paper); }

/* Timeline (Werdegang / Weiterbildungen) */
.timeline { border-left:1px solid var(--line); margin-top:1.5em; }
.timeline li { position:relative; padding:0 0 1.6em 1.8em; }
.timeline li::before { content:""; position:absolute; left:-5px; top:.5em; width:9px; height:9px; background:var(--paper); border:2px solid var(--accent); border-radius:50%; }
.timeline .t-date { font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--accent); text-transform:uppercase; }
.timeline .t-body { color:var(--steel); margin-top:.2em; }
.timeline .t-body strong { color:var(--ink); }

/* Prosa-Block (Impressum, Datenschutz) */
.prose { max-width: 72ch; }
.prose h2 { font-size:1.5rem; margin:1.6em 0 .5em; }
.prose h3 { font-size:1.15rem; margin:1.3em 0 .4em; }
.prose p, .prose li { color:var(--steel); margin-bottom:.7em; }
.prose ul { list-style:disc; padding-left:1.3em; }
.prose a { color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.dl { display:grid; grid-template-columns: 180px 1fr; gap:.4em 1.4em; margin-top:1.2em; }
.dl dt { font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.dl dd { color:var(--ink); font-weight:600; }

/* CTA-Band */
.cta-band { background: var(--accent); color:#fff; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-block: clamp(40px,5vw,64px); }
.cta-inner h2 { color:#fff; font-size: clamp(1.6rem,3vw,2.4rem); }
.cta-inner .phone-big { font-family:var(--display); font-weight:800; font-size: clamp(1.6rem,3vw,2.2rem); }
.cta-inner .hours { font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9; margin-top:.4em; }

/* Formular */
.form { display:grid; gap:1.1em; max-width:640px; margin-top:2em; }
.field { display:grid; gap:.4em; }
.field label { font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.field input, .field textarea {
  font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:.85em 1em; border:1px solid var(--line); border-radius:var(--r); background:#fff; width:100%;
  transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); }
.field textarea { min-height:140px; resize:vertical; }

/* ============ FOOTER ============ */
.site-footer { background: var(--ink); color: var(--mist); padding-block: clamp(48px,6vw,80px) 32px; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px,4vw,60px); }
.site-footer .brand { color:var(--paper); margin-bottom:1.1em; }
.foot-col h4 { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper); margin-bottom:1.1em; }
.foot-col a, .foot-col p { color:var(--mist); font-size:.95rem; display:block; padding:.2em 0; }
.foot-col a:hover { color:var(--accent); }
.foot-bottom { border-top:1px solid var(--line-light); margin-top: clamp(36px,5vw,56px); padding-top:24px; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--slate); }
.foot-bottom a:hover { color:var(--accent); }

/* ============ Page-Hero (Unterseiten) ============ */
.page-hero { background: var(--graphite); color:var(--paper); padding-block: clamp(56px,8vw,110px) clamp(40px,5vw,70px); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:56px 56px; }
.page-hero .inner { position:relative; z-index:2; }
.page-hero .h-1 { color:var(--paper); margin-top:.4em; max-width:20ch; }
.crumbs { font-family:var(--mono); font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mist); }
.crumbs a:hover { color:var(--accent); }

/* ============ Scroll-Reveal ============ */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { min-height:300px; order:-1; }
  .hero-media img { position:relative; }
  .hero-media::before { background:linear-gradient(0deg, var(--graphite) 0%, transparent 60%); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(3) { border-left:none; }
  .cards { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; }
  .split--rev .split-media { order:0; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
/* Tablet (Hochformat) & Smartphone: kompaktes Menü statt Desktop-Navigation */
@media (max-width: 900px) {
  .nav, .header-cta .phone-link { display:none; }
  .nav-toggle { display:flex; }
  .nav.open {
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 16px; box-shadow:0 16px 30px rgba(21,24,27,.12);
  }
  .nav.open a { width:100%; padding:.95em 0; border-bottom:1px solid var(--line-soft); min-height:44px; display:flex; align-items:center; font-size:1rem; }
}
@media (max-width: 720px) {
  .dl { grid-template-columns:1fr; gap:.1em 0; }
  .dl dd { margin-bottom:.7em; }
  .foot-grid { grid-template-columns:1fr; }
  .cta-inner { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* =========================================================
   MODERNE ERWEITERUNGEN
   ========================================================= */

/* ---- View Transitions (sanfter Seitenwechsel) ---- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

/* ---- Typografie-Feinschliff ---- */
h1, h2, h3, h4 { text-wrap: balance; }
p, .lead, .card p, .prose p { text-wrap: pretty; }

/* ---- Skip-Link & sichtbarer Fokus (A11y) ---- */
.skip-link {
  position: fixed; top: -120px; left: 12px; z-index: 300;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em;
  padding: .85em 1.3em; border-radius: var(--r);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }
.btn:focus-visible { outline-offset: 4px; }

/* ---- Header: kompakter beim Scrollen ---- */
.site-header { transition: background .3s ease, box-shadow .3s ease; }
.header-inner { transition: height .3s ease; }
.brand img { transition: height .3s ease; }
.site-header.scrolled { background: rgba(245,243,238,.95); box-shadow: 0 6px 26px rgba(21,24,27,.09); }
.site-header.scrolled .header-inner { height: 60px; }
.site-header.scrolled .brand img { height: 38px; }

/* ---- Scroll-Fortschrittsbalken ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Film-Grain-Textur ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---- Animierter Gradient-Mesh in den Heroes ---- */
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 26%, rgba(226,84,27,.24), transparent 60%),
    radial-gradient(46% 56% at 84% 78%, rgba(47,93,114,.30), transparent 62%);
  filter: blur(46px);
  animation: mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.14); }
}

/* ---- Bildlook: neutrales Monochrom, kein Orangestich (löst sich bei Hover auf) ---- */
.split-media img {
  filter: grayscale(.9) contrast(1.03) brightness(.99);
  transition: filter .55s ease, transform .5s ease;
}
.split:hover .split-media img { filter: none; }
.hero-media img { filter: grayscale(.5) contrast(1.04); }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-hero::before { animation: none; }
  .scroll-progress { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* =========================================================
   TOUCH- & MOBILE-OPTIMIERUNG
   Anpassung nach Geräte-Fähigkeit (Touch vs. Maus), nicht nach
   User-Agent — robust für Smartphone, Tablet, Notebook & Desktop.
   ========================================================= */

/* Touch-Geräte (Smartphone/Tablet) haben keinen echten Hover:
   Effekte, die Inhalte erst bei Hover zeigen, dauerhaft sichtbar machen. */
@media (hover: none) {
  .split-media img { filter: grayscale(.15); }   /* nicht im Duoton „gefangen“ */
  .hero-media img   { filter: grayscale(.3) contrast(1.03); }
  .card .c-img img  { filter: grayscale(.1); }
  .card:hover .c-img img { transform: none; }
  .btn:hover { transform: none; }                 /* kein „Springen“ beim Tap */
}

/* Performance & Akku: schwere Dauer-Animationen auf Touch-/Kleingeräten ruhigstellen. */
@media (hover: none), (max-width: 720px) {
  .hero::before, .page-hero::before { animation: none; }
  body::after { display: none; }                  /* Film-Grain-Overlay weglassen */
}

/* Größere, fingerfreundliche Tap-Flächen im Footer. */
@media (max-width: 900px) {
  .foot-col a { padding-block: .55em; }
}

/* Stabilere Hero-Höhe auf Mobile: dynamische Viewport-Höhe (berücksichtigt Browserleisten). */
@supports (height: 100dvh) {
  .hero-grid { min-height: clamp(540px, 80dvh, 760px); }
}

/* =========================================================
   FLIESSTEXT — einheitliche Größe & ruhige Einbettung
   (eine Textgröße über die ganze Seite, angenehme Zeilenlänge)
   ========================================================= */
.rtext { max-width: 68ch; }
.rtext p { color: var(--steel); line-height: 1.75; }   /* keine Sondergröße – erbt 17px wie überall */
.rtext p + p { margin-top: 1.1em; }
.rtext .flist { margin-top: 1.6em; }

/* =========================================================
   BILDER IN VOLLER FARBE — keine Ausgrauung / kein Duotone
   ========================================================= */
.hero-media img,
.split-media img,
.split:hover .split-media img,
.card .c-img img,
.card:hover .c-img img { filter: none; }
@media (hover: none) {
  .hero-media img, .split-media img, .card .c-img img { filter: none; }
}

/* =========================================================
   PERSÖNLICHE UNTERSCHRIFT (Beraterprofil)
   ========================================================= */
.signature { margin-top: 2.4em; }
.signature .sig-name {
  display: block;
  font-family: "Caveat", cursive;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: .9;
  color: var(--ink);
}
.signature .sig-role {
  display: block;
  margin-top: .5em;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* =========================================================
   LEISTUNGEN — Dienstleistungs-Raster
   ========================================================= */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 52px);
}
.svc { background: var(--paper); padding: clamp(26px, 3vw, 40px); transition: background .3s ease; }
.svc:hover { background: #fff; }
.svc .svc-num { font-family: var(--mono); font-size: .92rem; letter-spacing: .08em; color: var(--accent); }
.svc h3 { font-size: 1.25rem; margin: .55em 0 .45em; }
.svc p { color: var(--steel); line-height: 1.7; }   /* erbt 17px – einheitliche Textgröße */
/* Ungerade letzte Karte über beide Spalten – keine leere Zelle */
.svc-grid > .svc:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } }

/* =========================================================
   PROJEKTE — Fallstudien-Liste
   ========================================================= */
.cases { max-width: 90ch; margin-top: clamp(32px, 4vw, 52px); }
.case { padding-top: 1.9em; margin-top: 1.9em; border-top: 1px solid var(--line); }
.case:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.case .svc-num { font-family: var(--mono); font-size: .92rem; letter-spacing: .08em; color: var(--accent); }
.case h3 { font-size: 1.3rem; margin: .35em 0 .5em; }
.case p { color: var(--steel); line-height: 1.7; }
.case p + p { margin-top: .8em; }

/* =========================================================
   WARUM-QM — Vorteile nach Zielgruppe
   ========================================================= */
.benefit-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin-top: clamp(28px, 3.5vw, 44px);
}
.benefit { background: var(--paper); padding: clamp(22px, 2.5vw, 32px); }
.benefit h4 { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1em; }
.benefit ul { display: grid; gap: .5em; }
.benefit li { position: relative; padding-left: 1.1em; color: var(--steel); font-size: .95rem; line-height: 1.5; }
.benefit li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }
@media (max-width: 980px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefit-grid { grid-template-columns: 1fr; } }

/* =========================================================
   MONO-FEINSCHLIFF (JetBrains Mono ist breiter als Archivo)
   ========================================================= */
.eyebrow { letter-spacing: .16em; }
.btn { letter-spacing: .04em; }
.tag { letter-spacing: .02em; }

/* =========================================================
   PROJEKTE — Ergebnis-/Metrik-Callout pro Fallstudie
   ========================================================= */
.case-result {
  display: flex; align-items: baseline; gap: .8em; flex-wrap: wrap;
  margin: 0 0 1em; padding: .7em 1em;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.case-result .lbl {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.case-result .val { color: var(--ink); font-weight: 700; font-size: .98rem; }
.section--tone .case-result { background: var(--paper-3); }

/* =========================================================
   PORTRAIT-SLOT (Beraterprofil/Kontakt)
   ========================================================= */
.portrait { margin: 0; }
.portrait-frame { position: relative; }
.portrait img,
.portrait-ph {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r); display: block;
}
.portrait-frame::before { content:""; position:absolute; left:-14px; top:-14px; width:64px; height:64px; border-left:2px solid var(--accent); border-top:2px solid var(--accent); }
.portrait-frame::after  { content:""; position:absolute; right:-14px; bottom:-14px; width:64px; height:64px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); }
.portrait-ph {
  display: grid; place-items: center; gap: .8em;
  background: linear-gradient(160deg, var(--graphite), var(--steel));
  color: var(--mist);
}
.portrait-ph svg { width: 84px; height: 84px; opacity: .5; }
.portrait-ph span { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.portrait figcaption { margin-top: .9em; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: var(--slate); }

/* =========================================================
   HERO-MEDIA — animierte Audit-Bilanz (hochzählende Werte)
   ========================================================= */
.audit-panel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.5em, 3.4vw, 2.4em);
  background: var(--ink);
  color: var(--mist); text-align: center; padding: clamp(1.6em, 4vw, 3em);
}
.audit-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 85% at 72% 12%, rgba(229,114,0,.16), transparent 58%);
}
.audit-eyebrow {
  position: relative; font-family: var(--mono); font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.audit-metrics { position: relative; display: grid; gap: clamp(1.1em, 2.6vw, 1.7em); }
.audit-num {
  display: flex; align-items: baseline; justify-content: center; gap: .14em;
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(2.8rem, 6vw, 4.3rem); letter-spacing: -.03em; color: var(--paper);
}
.audit-pre { font-size: .34em; font-weight: 700; letter-spacing: .04em; color: var(--mist); }
.audit-suf { font-size: .46em; font-weight: 700; color: var(--accent); }
.audit-val { font-variant-numeric: tabular-nums; }
.audit-lbl {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mist); margin-top: .7em;
}
.audit-success {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .55em; max-width: 100%;
  font-family: var(--mono); font-size: clamp(.82rem, 1.7vw, .95rem); letter-spacing: .08em;
  line-height: 1.3; text-transform: uppercase; color: var(--paper); background: rgba(21,24,27,.45);
  border: 1px solid var(--line-light); border-radius: 999px; padding: .7em 1.15em;
}
.audit-check { width: 20px; height: 20px; flex: none; color: var(--accent); }
.audit-check path { stroke-dasharray: 26; stroke-dashoffset: 26; }

/* Entrance: nur wenn JS bereit (.audit-ready); ohne JS sofort sichtbar */
.audit-panel.audit-ready .audit-eyebrow,
.audit-panel.audit-ready .audit-metric,
.audit-panel.audit-ready .audit-success {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.audit-panel.audit-in .audit-eyebrow { opacity: 1; transform: none; transition-delay: .05s; }
.audit-panel.audit-in .audit-metric:nth-child(1) { opacity: 1; transform: none; transition-delay: .16s; }
.audit-panel.audit-in .audit-metric:nth-child(2) { opacity: 1; transform: none; transition-delay: .30s; }
.audit-panel.audit-in .audit-success { opacity: 1; transform: none; transition-delay: .58s; }
.audit-panel.audit-in .audit-check path { animation: auditDraw .65s ease .95s forwards; }
@keyframes auditDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .audit-panel.audit-ready .audit-eyebrow,
  .audit-panel.audit-ready .audit-metric,
  .audit-panel.audit-ready .audit-success { opacity: 1; transform: none; transition: none; }
  .audit-check path { stroke-dashoffset: 0; }
  .audit-panel.audit-in .audit-check path { animation: none; }
}