/* =========================================================================
   STEINMEYER MEISTER-HANDWERK · Design System
   Palette: tiefes Petrol (Anker) · kühles Off-White (Content) · Terracotta (Akzent)
   Type:    Schibsted Grotesk (Display, Grotesk) + Hanken Grotesk (Body, Grotesk)
   Radius:  8 / 14 / 24  (interaktiv / Fläche / groß)  – durchgehend gelockt
   ========================================================================= */

:root{
  /* --- Petrol anchor (dunkle Markenfläche) --- */
  --ink:        #0E2623;   /* tiefstes Petrol-Schwarz */
  --petrol-900: #0F3B36;   /* Hero / Footer / CTA-Band */
  --petrol-800: #14463F;
  --petrol-700: #1C5A50;
  --petrol-600: #277567;

  /* --- helle Flächen (kühl, KEIN Creme) --- */
  --bg:         #F3F5F4;   /* Seiten-Hintergrund (kühles Off-White) */
  --surface:    #FFFFFF;   /* Karten / weiße Flächen */
  --surface-2:  #E9EEEC;   /* tiefere Bank für Rhythmus */
  --line:       #DCE3E0;   /* Hairlines auf hell */
  --line-dark:  rgba(255,255,255,.14); /* Hairlines auf dunkel */

  /* --- Akzent: Terracotta (ein Akzent, gelockt) --- */
  --accent:     #BF5E3A;   /* Terracotta */
  --accent-600: #A84E2D;   /* dunkler – Text-Links / Hover */
  --accent-700: #8E3F23;
  --accent-soft:#F2E0D6;   /* zarter Ton für Chips/Bänder */

  /* --- Text --- */
  --text:        #15302C;  /* Fließtext auf hell */
  --text-muted:  #4C5C58;  /* gedämpft auf hell (>=4.5:1) */
  --text-faint:  #5F6E6A;
  --on-dark:     #ECF2F0;  /* Text auf Petrol */
  --on-dark-mut: #A9C0BA;  /* gedämpft auf Petrol */

  /* --- Form / Radius / Schatten --- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(14,38,35,.05), 0 2px 8px rgba(14,38,35,.05);
  --shadow:    0 6px 20px -8px rgba(14,38,35,.18), 0 2px 6px rgba(14,38,35,.06);
  --shadow-lg: 0 30px 60px -24px rgba(14,38,35,.34), 0 8px 24px -12px rgba(14,38,35,.18);

  /* --- Maße / Motion --- */
  --container: 1280px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* z-scale */
  --z-nav: 100; --z-menu: 120; --z-chat: 200; --z-chat-panel: 210;
}

/* ---------------------------------- Reset ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  background:var(--bg); color:var(--text);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,textarea,select,button{ font:inherit; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--accent); color:#fff; }

/* Zeiger-Cursor auf ALLEM Anklickbaren (Labels/Chips zeigen sonst keinen) */
a[href], button, .btn, .svc, .litem, .faq__q, .chat-chip,
.choice label, .choice span,
label:has(input[type="checkbox"]), label:has(input[type="radio"]),
input[type="checkbox"], input[type="radio"], input[type="submit"], select{ cursor:pointer; }

/* ------------------------------- Typografie ----------------------------- */
h1,h2,h3,h4{
  font-family:"Schibsted Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-weight:600; line-height:1.06; letter-spacing:-.018em;
  color:var(--ink); text-wrap:balance;
}
.display{
  font-size:clamp(2.6rem, 1.6rem + 4.6vw, 5.25rem);
  line-height:1.02; letter-spacing:-.022em; font-weight:600;
}
h2.sec-title{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
h3{ font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem); letter-spacing:-.01em; }
.lead{ font-size:clamp(1.075rem, 1rem + .45vw, 1.35rem); line-height:1.55; color:var(--text-muted); text-wrap:pretty; max-width:60ch; }
p{ text-wrap:pretty; }
em, .serif-em{ font-style:italic; }
.measure{ max-width:64ch; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-600);
}
.eyebrow::before{ content:""; width:1.6rem; height:1px; background:var(--accent); opacity:.7; }
.eyebrow--on-dark{ color:#E6A684; }
.eyebrow--on-dark::before{ background:#E6A684; }

/* -------------------------------- Layout -------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
/* Breite Variante für Showcase-Sektionen (z. B. Leistungs-Bento) – nutzt fast die
   volle Bildschirmbreite statt nur die Mitte, mit komfortablen Seitenrändern. */
.container--wide{ max-width:min(1680px, 94vw); }
.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.bg-paper{ background:var(--bg); }
.bg-bank{ background:var(--surface-2); }
.bg-white{ background:var(--surface); }
.bg-petrol{ background:var(--petrol-900); color:var(--on-dark); }
.bg-petrol h1,.bg-petrol h2,.bg-petrol h3,.bg-petrol h4{ color:#fff; }
.bg-petrol .lead{ color:var(--on-dark-mut); }
.sec-head{ max-width:62ch; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.sec-head .lead{ margin-top:1.1rem; }
.center{ text-align:center; margin-inline:auto; }

/* -------------------------------- Buttons ------------------------------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.5rem; border-radius:var(--r-sm);
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  font-weight:600; letter-spacing:.005em; white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  will-change:transform;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--accent{ --bg:var(--accent-600); --fg:#fff; }  /* dunkler für WCAG-AA (>=4.5:1) auf Weiß */
.btn--accent:hover{ --bg:var(--accent-700); }
.btn--dark{ --bg:var(--ink); --fg:#fff; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost:hover{ --bd:var(--ink); }
.btn--on-dark{ --bg:#fff; --fg:var(--ink); }
.btn--ghost-on-dark{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.4); }
.btn--ghost-on-dark:hover{ --bd:#fff; background:rgba(255,255,255,.08); }
.btn--lg{ padding:1.05rem 1.8rem; font-size:1.05rem; }
.btn--block{ width:100%; }

.txtlink{ color:var(--accent-600); font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
  background-image:linear-gradient(var(--accent-600),var(--accent-600)); background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s var(--ease); }
.txtlink:hover{ background-size:100% 1.5px; }
.txtlink svg{ width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.txtlink:hover svg{ transform:translateX(4px); }

/* ============================ HEADER / NAV ============================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1rem var(--pad);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav--solid{ background:rgba(243,245,244,.86); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line); padding-block:.7rem; box-shadow:0 6px 24px -18px rgba(14,38,35,.5); }
/* Auf dunklem Hero: Nav transparent, helle Schrift */
.nav--on-dark .brand__name,.nav--on-dark .navlinks a,.nav--on-dark .nav__tel{ color:var(--on-dark); }
.nav--on-dark .brand__mark{ border-color:rgba(255,255,255,.25); }
.nav--on-dark.nav--solid .brand__name,.nav--on-dark.nav--solid .navlinks a,.nav--on-dark.nav--solid .nav__tel{ color:var(--ink); }

.brand{ display:inline-flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand__mark{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:grid; place-items:center; background:var(--petrol-900); color:#fff;
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-sm);
  font-family:"Schibsted Grotesk",serif; font-weight:600; font-size:1.35rem; line-height:1;
}
.brand__mark span{ color:var(--accent); }
.brand__name{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name b{ font-weight:700; font-size:1.02rem; letter-spacing:.01em; }
.brand__name small{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-600); font-weight:600; }
.nav--on-dark .brand__name small{ color:#E6A684; }

.navlinks{ display:flex; align-items:center; gap:.35rem; }
.navlinks a{ padding:.55rem .85rem; border-radius:var(--r-sm); font-weight:500; font-size:.98rem; position:relative; transition:color .2s, background .2s; }
.navlinks a:hover{ background:rgba(14,38,35,.06); }
.nav--on-dark:not(.nav--solid) .navlinks a:hover{ background:rgba(255,255,255,.1); }
.navlinks a[aria-current="page"]{ color:var(--accent-600); }
.nav--on-dark:not(.nav--solid) .navlinks a[aria-current="page"]{ color:#E6A684; }

.nav__right{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.nav__tel{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.96rem; }
.nav__tel svg{ width:1.05rem; height:1.05rem; color:var(--accent); }
.nav__burger{ display:none; width:46px; height:46px; border-radius:var(--r-sm); border:1px solid var(--line); place-items:center; }
.nav--on-dark:not(.nav--solid) .nav__burger{ border-color:rgba(255,255,255,.3); }
.nav__burger span{ display:block; width:20px; height:2px; background:currentColor; position:relative; transition:.25s var(--ease); }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; transition:.25s var(--ease); }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }
body.menu-open .nav__burger span{ background:transparent; }
body.menu-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav__burger span::after{ top:0; transform:rotate(-45deg); }

/* Mobile-Menü (Fullscreen Petrol) */
.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-menu); background:var(--petrol-900); color:var(--on-dark);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:5.5rem var(--pad) 2.5rem;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a.m-link{ font-family:"Schibsted Grotesk",serif; font-size:clamp(1.7rem,8vw,2.4rem); color:#fff; padding:.45rem 0; border-bottom:1px solid var(--line-dark); display:flex; justify-content:space-between; align-items:center; }
.mobile-menu a.m-link span{ color:#E6A684; font-size:.9rem; font-family:"Hanken Grotesk",sans-serif; }
.mobile-menu .m-cta{ margin-top:2rem; display:grid; gap:.8rem; }
.mobile-menu .m-meta{ margin-top:1.6rem; color:var(--on-dark-mut); font-size:.95rem; display:grid; gap:.3rem; }

/* ================================ HERO ================================= */
.hero{ position:relative; background:var(--petrol-900); color:var(--on-dark); overflow:hidden; padding-top:7.5rem; }
.hero::before{ /* sanfte Lichtquelle oben links */
  content:""; position:absolute; top:-20%; left:-10%; width:55%; height:80%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(191,94,58,.22), transparent 70%);
  filter:blur(20px); pointer-events:none;
}
.hero::after{ /* feines Raster */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 75%);
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,6vw,5.5rem); }
.hero__copy{ max-width:38rem; }
.hero h1{ color:#fff; margin-top:1.4rem; }
.hero h1 em{ color:#E6A684; font-style:italic; }
.hero__sub{ margin-top:1.4rem; font-size:clamp(1.075rem,1rem+.5vw,1.3rem); color:var(--on-dark-mut); max-width:42ch; }
.hero__cta{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__rating{ margin-top:1.9rem; display:flex; align-items:center; gap:.8rem; color:var(--on-dark-mut); font-size:.95rem; }
.hero__rating .stars{ color:#E8A02A; letter-spacing:.1em; }
.hero__rating b{ color:#fff; }

.hero__visual{ position:relative; }
.hero__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5; border:1px solid rgba(255,255,255,.1); }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__badge{
  position:absolute; left:-1.2rem; bottom:1.6rem; background:#fff; color:var(--ink);
  border-radius:var(--r); padding:.85rem 1.1rem; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:.75rem; max-width:15rem;
}
.hero__badge .g{ width:34px;height:34px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-600);flex-shrink:0; }
.hero__badge b{ font-size:1.15rem; } .hero__badge small{ display:block; color:var(--text-faint); font-size:.78rem; }
.hero__badge .stars{ color:#E8A02A; font-size:.8rem; letter-spacing:.06em; }
.hero__scroll{ position:absolute; right:0; bottom:.5rem; writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:var(--on-dark-mut); display:flex; align-items:center; gap:.7rem; }

/* ===================== HERO ALS FILM (Vollbild) ======================= */
.hero--film{ position:relative; min-height:100svh; display:flex; align-items:flex-end; justify-content:center; padding:0; overflow:hidden;
  background:#0c1f1c center/cover no-repeat; }
.film-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.film{ position:absolute; inset:0; z-index:0; }
.film__slide{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transform:scale(1.08); transition:opacity .5s var(--ease); will-change:opacity,transform; }
.film__slide.is-on{ opacity:1; animation:kenburns 3.4s ease-out both; }
@keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1.0); } }
.film__grade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 46%, transparent 22%, rgba(8,26,23,.58) 100%),
    linear-gradient(0deg, rgba(8,26,23,.9) 0%, rgba(8,26,23,.2) 46%, rgba(8,26,23,.46) 100%); }
.film__grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hero__content{ position:relative; z-index:3; width:100%; max-width:var(--container); margin-inline:auto;
  padding:8rem var(--pad) clamp(4.5rem, 11vh, 9rem); text-align:center; }
.hero--film .hero__copy{ max-width:60rem; margin-inline:auto; }
.hero__slogan{ color:#fff; font-family:"Archivo","Hanken Grotesk",sans-serif; font-weight:800; margin-top:1.1rem;
  font-size:clamp(2.5rem, 1.5rem + 6.2vw, 6rem); line-height:.95; letter-spacing:-.03em; text-wrap:balance;
  text-transform:none; text-shadow:0 2px 40px rgba(8,26,23,.55); }
.hero__slogan em{ color:#E6A684; font-style:normal; font-weight:900; }
.hero--film .hero__sub{ color:rgba(236,242,240,.94); margin:1.5rem auto 0; max-width:54ch; font-weight:500;
  font-size:clamp(1.05rem,1rem+.45vw,1.3rem); }
.hero--film .hero__cta{ justify-content:center; }
.hero--film .hero__rating{ justify-content:center; }
/* Szenen-Label + „läuft"-Indikator */
.film__cap{ position:absolute; z-index:3; bottom:clamp(1.4rem,3vw,2.2rem); right:clamp(1.2rem,4vw,2.6rem);
  display:flex; align-items:center; gap:.6rem; padding:.5rem .9rem; border-radius:999px;
  background:rgba(8,26,23,.45); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.film__cap .rec{ width:9px; height:9px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 0 rgba(191,94,58,.6); animation:rec 1.6s infinite; }
@keyframes rec{ 0%{ box-shadow:0 0 0 0 rgba(191,94,58,.6);} 70%{ box-shadow:0 0 0 8px rgba(191,94,58,0);} 100%{ box-shadow:0 0 0 0 rgba(191,94,58,0);} }
.film__dots{ position:absolute; z-index:3; left:clamp(1.2rem,4vw,2.6rem); bottom:clamp(1.5rem,3vw,2.3rem); display:flex; gap:.4rem; }
.film__dots i{ width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); transition:background .3s, width .3s; }
.film__dots i.on{ background:var(--accent); width:34px; }
@media (max-width:640px){ .film__cap{ display:none; } .hero__content{ padding-top:7rem; } }
@media (prefers-reduced-motion: reduce){ .film__slide.is-on{ animation:none; transform:none; } .film-video{ display:none; } .hero--film{ background-image:url("../img/hero-bad-poster.webp"); } }

/* ============================== TRUSTBAR =============================== */
.trustbar{ border-top:1px solid var(--line-dark); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border-radius:var(--r); overflow:hidden; }
.trust-cell{ background:var(--petrol-900); padding:clamp(1.4rem,3vw,2.2rem) 1.4rem; }
.trust-cell .n{ font-family:"Schibsted Grotesk",serif; font-size:clamp(1.9rem,1.4rem+1.6vw,2.8rem); color:#fff; line-height:1; }
.trust-cell .n span{ color:#E6A684; }
.trust-cell .l{ margin-top:.5rem; color:var(--on-dark-mut); font-size:.92rem; }

/* ============================== LEISTUNGEN ============================= */
.svc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; }
.svc{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.svc:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc__img{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#0c1f1c; }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc:hover .svc__img img{ transform:scale(1.06); }
.svc__body{ padding:1.35rem 1.45rem 1.55rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.svc__tag{ display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:700; letter-spacing:.05em; color:var(--accent-600); text-transform:uppercase; }
.svc__tag svg{ width:1.05rem; height:1.05rem; }
.svc h3{ font-size:1.26rem; }
.svc p{ color:var(--text-muted); font-size:.97rem; }
.svc__more{ margin-top:auto; padding-top:.8rem; font-weight:600; color:var(--accent-600); display:inline-flex; align-items:center; gap:.4rem; font-size:.92rem; }
.svc__more svg{ width:1rem; height:1rem; transition:transform .25s var(--ease); }
.svc:hover .svc__more svg{ transform:translateX(4px); }
/* Bento: großes Feature mit Bild-Overlay */
.svc--feature{ grid-column:span 4; grid-row:span 2; min-height:440px; }
.svc--feature .svc__img{ position:absolute; inset:0; aspect-ratio:auto; height:100%; }
.svc--feature .svc__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,26,23,.93), rgba(8,26,23,.45) 46%, rgba(8,26,23,.04)); }
.svc--feature .svc__body{ position:relative; z-index:1; margin-top:auto; }
.svc--feature h3{ color:#fff; font-size:clamp(1.7rem,1.3rem+1.1vw,2.3rem); }
.svc--feature p{ color:rgba(236,242,240,.86); max-width:36ch; }
.svc--feature .svc__tag{ color:#E6A684; }
.svc--feature .svc__more{ color:#fff; }
.svc--right{ grid-column:span 2; }
.svc--std{ grid-column:span 2; }

/* ========================= VORHER / NACHHER ============================ */
.ba-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3vw,2rem); }
.ba-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); }
.ba-card--lead{ grid-column:1 / -1; }
.ba-card--lead .ba{ aspect-ratio:16/10; }
/* Feature-Paar: Slider + Text nebeneinander */
.ba-feature{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,420px) 1fr; align-items:stretch; }
.ba-feature .ba{ aspect-ratio:auto; height:100%; min-height:420px; border-right:1px solid var(--line); }
.ba-feature .ba-feature__text{ padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center; gap:.9rem; }
.ba-feature__text h3{ font-size:clamp(1.5rem,1.2rem+1.2vw,2.1rem); }
.ba-feature__text p{ color:var(--text-muted); }
.ba-feature__text .ba-stats{ display:flex; gap:1.8rem; margin-top:.4rem; }
.ba-feature__text .ba-stats b{ font-family:"Schibsted Grotesk",serif; font-size:1.7rem; color:var(--ink); display:block; line-height:1; }
.ba-feature__text .ba-stats small{ color:var(--text-faint); font-size:.84rem; }
/* Keller-Karte landscape */
.ba--wide{ aspect-ratio:3/2; }
@media (max-width: 760px){
  .ba-feature{ grid-template-columns:1fr; }
  .ba-feature .ba{ min-height:0; aspect-ratio:4/5; border-right:none; border-bottom:1px solid var(--line); }
}

.ba{ position:relative; aspect-ratio:4/5; overflow:hidden; user-select:none; touch-action:pan-y; cursor:ew-resize; background:#0c1f1c; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__after{ z-index:1; }
.ba__before{ z-index:2; clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba__tag{ position:absolute; z-index:4; top:1rem; padding:.34rem .8rem; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(6px); }
.ba__tag--before{ left:1rem; background:rgba(14,38,35,.62); color:#fff; }
.ba__tag--after{ right:1rem; background:rgba(191,94,58,.92); color:#fff; }
.ba__divider{ position:absolute; z-index:5; top:0; bottom:0; left:var(--pos,50%); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(14,38,35,.12); pointer-events:none; }
.ba__handle{ position:absolute; z-index:6; top:50%; left:var(--pos,50%); width:46px; height:46px; transform:translate(-50%,-50%); border-radius:999px; background:#fff; color:var(--ink); display:grid; place-items:center; box-shadow:var(--shadow); pointer-events:none; }
.ba__handle svg{ width:22px; height:22px; }
.ba__range{ position:absolute; z-index:7; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.ba__range:focus-visible + .ba__handle, .ba:focus-within .ba__handle{ outline:3px solid var(--accent); outline-offset:3px; }
.ba-card__meta{ padding:1.2rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ba-card__meta h3{ font-size:1.2rem; } .ba-card__meta p{ color:var(--text-muted); font-size:.92rem; margin-top:.15rem; }
.ba-hint{ flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--accent-600); background:var(--accent-soft); padding:.4rem .7rem; border-radius:999px; }
.ba-hint svg{ width:1.05em; height:1.05em; }

/* =============================== ABLAUF ================================ */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step; }
.step{ position:relative; padding-top:3rem; }
.step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; top:0; left:0; font-family:"Schibsted Grotesk",serif; font-size:1.05rem; font-weight:600; color:var(--accent-600); }
.bg-petrol .step::before{ color:#E6A684; }
.step h3{ font-size:1.22rem; margin-bottom:.45rem; }
.step p{ color:var(--text-muted); font-size:.96rem; }
.bg-petrol .step p{ color:var(--on-dark-mut); }
/* Ladebalken, der sich beim Scrollen auflädt */
.steps-rail{ position:absolute; top:1.95rem; left:.1rem; right:.1rem; height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.bg-petrol .steps-rail{ background:var(--line-dark); }
.steps-rail i{ position:absolute; inset:0; border-radius:3px; transform-origin:left; transform:scaleX(1); will-change:transform;
  background:linear-gradient(90deg,#E6A684,var(--accent)); }
@media (prefers-reduced-motion: reduce){ .steps-rail i{ transform:scaleX(1); } }
@media (max-width:920px){ .steps-rail{ display:none; } }

/* ============================ SPLIT / FEATURE ========================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--flip .split__media{ order:-1; }
.split__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:3/2; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__media .stamp{ position:absolute; right:1rem; bottom:1rem; background:#fff; color:var(--ink); border-radius:var(--r); padding:.8rem 1rem; box-shadow:var(--shadow); font-weight:600; display:flex; align-items:center; gap:.6rem; }
.split__media .stamp svg{ width:1.3rem; height:1.3rem; color:var(--accent); }
.ticks{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.85rem; }
.ticks li{ display:flex; gap:.75rem; align-items:flex-start; }
.ticks svg{ flex-shrink:0; width:1.45rem; height:1.45rem; color:var(--accent); margin-top:.1rem; }
.ticks b{ display:block; }
.ticks span{ color:var(--text-muted); font-size:.96rem; }
.bg-petrol .ticks span{ color:var(--on-dark-mut); }

/* "Alles aus einer Hand" als eigener Block im Warum-Abschnitt (13.10.2026, Kundenwunsch) */
.onehand{ margin-top:1.5rem; padding:1.35rem 1.45rem 1.45rem; border-radius:var(--r-lg); background:#0F3B36; color:#fff; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.onehand::after{ content:""; position:absolute; right:-18%; bottom:-55%; width:62%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(191,94,58,.38), transparent 72%); pointer-events:none; }
.onehand__head{ display:flex; align-items:center; gap:.9rem; position:relative; }
.onehand__ico{ width:2.6rem; height:2.6rem; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); flex-shrink:0; }
.onehand__ico svg{ width:1.35rem; height:1.35rem; color:#E6A684; }
.onehand__head b{ display:block; font-family:"Schibsted Grotesk",sans-serif; font-size:1.22rem; letter-spacing:-.01em; line-height:1.15; }
.onehand__head small{ display:block; color:var(--on-dark-mut); font-size:.86rem; margin-top:.2rem; }
.onehand>p{ margin:.95rem 0 0; color:rgba(255,255,255,.86); font-size:.96rem; line-height:1.6; position:relative; }
.onehand__list{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; position:relative; }
.onehand__list li{ font-size:.83rem; font-weight:500; padding:.36rem .75rem; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); color:#fff; }

/* ============================ TESTIMONIALS ============================= */
.reviews-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.4rem; }
.gbadge{ display:flex; align-items:center; gap:.9rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1.2rem; box-shadow:var(--shadow-sm); }
.gbadge .score{ font-family:"Schibsted Grotesk",serif; font-size:2.2rem; line-height:1; color:var(--ink); }
.gbadge .stars{ color:#E8A02A; letter-spacing:.08em; font-size:.95rem; }
.gbadge small{ color:var(--text-faint); font-size:.82rem; }
/* Laufendes Bewertungs-Band (links -> rechts) */
.reviews-marquee{ position:relative; overflow:hidden;
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw);  /* randlos: volle Viewport-Breite */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.reviews-track{ display:flex; gap:1.4rem; width:max-content; align-items:stretch; will-change:transform;
  padding-inline:1.4rem; }
/* Mechanik wie bei EisMolin: site.js klont so viele Saetze, dass immer mehr als
   zwei Bildschirmbreiten Material da sind, und verschiebt exakt um die Breite
   EINES Satzes (--marquee-shift in Pixeln). Dadurch bleibt der Uebergang naht-
   los und es entsteht auf breiten Bildschirmen keine Luecke mehr. Erst wenn
   das steht, kommt .is-looping dazu. */
.reviews-track.is-looping{ animation:reviewsMarquee var(--marquee-dur,60s) linear infinite; }
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track{ animation-play-state:paused; }
/* Pflichthinweis zur Echtheit der Bewertungen (§ 5b Abs. 3 UWG, 13.10.2026) */
.reviews-note{ max-width:78ch; margin:1.4rem auto 0; font-size:.84rem; line-height:1.55; color:var(--text-faint); text-align:center; }
.reviews-note a{ color:var(--text-muted); text-decoration:underline; text-underline-offset:.15em; }
.quote-panel__note{ margin:1rem 0 0; font-size:.78rem; line-height:1.5; color:var(--on-dark-mut); }
.quote-panel__note a{ color:#fff; text-decoration:underline; text-underline-offset:.15em; }
@keyframes reviewsMarquee{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(var(--marquee-shift,-50%),0,0); }
}
.review{ flex:0 0 340px; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; box-shadow:var(--shadow-sm); }
/* Mobile/Touch: kein Endlos-Band (Hover-Pause nützt auf Touch nichts, mask+Animation
   ist auf iOS fragil) – stattdessen natives Wischen mit Scroll-Snap */
@media (max-width:760px){
  .reviews-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    -webkit-mask-image:none; mask-image:none; }
  .reviews-marquee::-webkit-scrollbar{ display:none; }
  .reviews-track.is-looping{ animation:none; }
  .reviews-track{ padding-inline:var(--pad); }
  .reviews-track > [aria-hidden="true"]{ display:none; } /* Klone nur fürs Band nötig */
  .review{ flex:0 0 82vw; max-width:22rem; scroll-snap-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .reviews-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none; mask-image:none; }
  .reviews-track.is-looping{ animation:none; }
  .reviews-track > [aria-hidden="true"]{ display:none; }
}
.review .stars{ color:#E8A02A; font-size:.9rem; letter-spacing:.08em; }
.review p{ margin:.8rem 0 1.1rem; color:var(--text); font-size:.98rem; line-height:1.6; }
.review__who{ display:flex; align-items:center; gap:.7rem; }
.review__av{ width:40px; height:40px; border-radius:999px; background:var(--petrol-700); color:#fff; display:grid; place-items:center; font-weight:700; font-family:"Schibsted Grotesk",serif; flex-shrink:0; }
.review__who b{ font-size:.95rem; } .review__who small{ display:block; color:var(--text-faint); font-size:.8rem; }

/* ============================== CTA-BAND =============================== */
.cta-band{ position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 90% at 15% 100%, rgba(191,94,58,.3), transparent 70%); pointer-events:none; }
.cta-wrap{ position:relative; display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.cta-wrap h2{ color:#fff; }
.cta-actions{ display:flex; flex-direction:column; gap:.9rem; }
.cta-actions .phone-lg{ font-family:"Schibsted Grotesk",serif; font-size:clamp(1.6rem,1.3rem+1.2vw,2.2rem); color:#fff; display:inline-flex; align-items:center; gap:.7rem; }
.cta-actions .phone-lg svg{ width:1.3rem;height:1.3rem;color:#E6A684; }

/* =============================== FOOTER ================================ */
.footer{ background:var(--ink); color:var(--on-dark); padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer h4{ color:#fff; font-family:"Hanken Grotesk",sans-serif; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:700; }
.footer a{ color:var(--on-dark-mut); display:inline-block; padding:.24rem 0; transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer .f-brand p{ color:var(--on-dark-mut); margin-top:1rem; font-size:.95rem; max-width:30ch; }
.footer .f-contact div{ color:var(--on-dark-mut); margin-bottom:.55rem; font-size:.95rem; }
.footer__bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--on-dark-mut); font-size:.85rem; }
.footer__bottom a{ display:inline; }

/* ====================== SEITEN-KOPF (Unterseiten) ======================
   Bewusst schlicht: eine Spalte, Seitenname, Ueberschrift, ein Satz.
   Keine Wasserzeichen, keine Kennzahlen, kein Leuchten - der Kopf sagt in
   zwei Sekunden, worum es auf der Seite geht, mehr nicht.               */
.page-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--petrol-800) 0%,var(--petrol-900) 100%);
  color:var(--on-dark);
  padding:clamp(8.5rem,12vw,11.5rem) 0 clamp(3.2rem,6vw,5rem);
  border-bottom:1px solid var(--line-dark);
}
/* weiches Licht oben links, wie im Startseiten-Hero */
.page-hero::before{
  content:""; position:absolute; left:-10vw; top:-45%; pointer-events:none;
  width:58vw; height:58vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle at 50% 50%, rgba(39,117,103,.36), rgba(39,117,103,0) 66%);
}
.page-hero__inner{ position:relative; max-width:62ch; }
/* Dieselbe Schrift und Wucht wie .hero__slogan auf der Startseite:
   Archivo 800, Akzentwort in 900 Terracotta, enge Zeilen. */
.page-hero h1{
  color:#fff; margin-top:1.1rem;
  font-family:"Archivo","Schibsted Grotesk",sans-serif; font-weight:800;
  font-size:clamp(2.6rem,1.5rem+4.4vw,4.9rem);
  line-height:.94; letter-spacing:-.032em; text-wrap:balance;
  hyphens:auto; overflow-wrap:break-word;
  text-shadow:0 2px 40px rgba(8,26,23,.45);
}
.page-hero h1 em{ font-style:normal; font-weight:900; color:#E6A684; }
.page-hero .lead{ margin-top:1.35rem; color:rgba(236,242,240,.9); font-weight:500; max-width:54ch;
  font-size:clamp(1.05rem,1rem+.45vw,1.28rem); }

/* schlanke Variante: Impressum, Datenschutz — gleiche Schrift, ruhigerer Grad */
.page-hero--slim{ padding-block:clamp(7.5rem,10vw,9.5rem) clamp(2.4rem,4vw,3.4rem); }
.page-hero--slim h1{ font-size:clamp(2.2rem,1.5rem+2.7vw,3.5rem); line-height:1; }

/* Brotkrume: klein, ruhig, mit einem Terracotta-Strich als einzigem Akzent */
.crumbs{ font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; color:var(--on-dark-mut); display:flex; gap:.55rem; align-items:center; }
.crumbs::before{ content:""; width:1.5rem; height:1px; background:#E6A684; flex-shrink:0; }
.crumbs a:hover{ color:#fff; } .crumbs span{ color:#E6A684; }

/* =========================== LEISTUNGEN DETAIL ========================= */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); }
.svc-detail:last-child{ border-bottom:none; }
.svc-detail--flip .svc-detail__media{ order:-1; }
.svc-detail__media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; }
.svc-detail__media img{ width:100%;height:100%;object-fit:cover; }
.svc-detail h2{ font-size:clamp(1.6rem,1.3rem+1.4vw,2.4rem); }
.svc-detail .kicker{ color:var(--accent-600); font-weight:600; font-size:.95rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.3rem; }
.chip{ font-size:.86rem; font-weight:500; padding:.4rem .85rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text-muted); }

/* ====================== LEISTUNGS-ÜBERSICHT =========================== */
.lgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.litem{ display:flex; gap:1rem; align-items:flex-start; padding:1.25rem 1.3rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.litem:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent; }
.litem__ico{ width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent-600); display:grid; place-items:center; flex-shrink:0; }
.litem__ico svg{ width:22px; height:22px; }
.litem__bd{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.litem h3{ font-size:1.08rem; display:flex; align-items:center; gap:.4rem; }
.litem h3 svg{ width:.95rem; height:.95rem; color:var(--accent-600); opacity:0; transform:translateX(-4px); transition:.25s var(--ease); flex-shrink:0; }
.litem:hover h3 svg{ opacity:1; transform:none; }
.litem p{ font-size:.9rem; color:var(--text-muted); line-height:1.5; }
@media (max-width:980px){ .lgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .lgrid{ grid-template-columns:1fr; } }

/* =============================== KONTAKT =============================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.info-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.5rem; display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; box-shadow:var(--shadow-sm); }
.info-card__ico{ width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-600);display:grid;place-items:center;flex-shrink:0; }
.info-card__ico svg{ width:23px;height:23px; }
.info-card b{ display:block; margin-bottom:.15rem; }
.info-card a,.info-card span{ color:var(--text-muted); }
.info-card a:hover{ color:var(--accent-600); }

.form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.3rem); box-shadow:var(--shadow); }
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem; }
.field label{ font-weight:600; font-size:.92rem; }
.field label .req{ color:var(--accent); }
.field .help{ font-size:.82rem; color:var(--text-faint); }
.input{ width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--text); transition:border-color .2s, box-shadow .2s; }
.input::placeholder{ color:#5E6C68; }  /* dunkel genug für AA-Kontrast */
.chat-input textarea::placeholder{ color:#5E6C68; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(191,94,58,.14); }
textarea.input{ min-height:130px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form__note{ font-size:.82rem; color:var(--text-faint); margin-top:.4rem; }
.choice{ display:flex; flex-wrap:wrap; gap:.6rem; }
.choice label{ position:relative; }
.choice input{ position:absolute; opacity:0; }
.choice span{ display:inline-block; padding:.55rem 1rem; border:1.5px solid var(--line); border-radius:999px; font-size:.92rem; font-weight:500; transition:.2s var(--ease); }
.choice input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.choice input:focus-visible + span{ outline:2.5px solid var(--accent); outline-offset:2px; }
.choice label:hover input:not(:checked) + span{ border-color:var(--accent); color:var(--accent-600); background:var(--accent-soft); }
.form-success{ display:none; text-align:center; padding:2rem 1rem; }
.form-success svg{ width:54px; height:54px; color:var(--accent); margin:0 auto 1rem; }
.form.is-sent .form-fields{ display:none; }
.form.is-sent .form-success{ display:block; }

/* ============================ TEAM / WERTE ============================= */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.value{ padding:1.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.value__ico{ width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent-600);display:grid;place-items:center;margin-bottom:1rem; }
.value__ico svg{ width:24px;height:24px; }
.value h3{ font-size:1.2rem; margin-bottom:.4rem; }
.value p{ color:var(--text-muted); font-size:.96rem; }

/* ============================== TEAM ================================== */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.team__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; text-align:center; }
.team__av{ width:74px; height:74px; border-radius:999px; margin:0 auto 1rem; display:grid; place-items:center;
  background:var(--petrol-900); color:#fff; font-family:"Schibsted Grotesk",serif; font-size:1.9rem; font-weight:600; box-shadow:var(--shadow-sm); }
.team__card h3{ font-size:1.2rem; } .team__role{ color:var(--accent-600); font-weight:600; font-size:.9rem; margin-top:.15rem; }
.team__card p{ color:var(--text-muted); font-size:.94rem; margin-top:.7rem; }
@media (max-width:760px){ .team{ grid-template-columns:1fr; max-width:24rem; margin-inline:auto; } }

.area-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.area-list .chip{ background:var(--surface); }

.prose{ max-width:68ch; }
.prose p{ margin-bottom:1.1rem; color:var(--text-muted); }
.prose h2{ margin:2.2rem 0 .8rem; }
.prose h3{ margin:1.6rem 0 .5rem; }
.prose a{ color:var(--accent-600); text-decoration:underline; text-underline-offset:3px; }
.prose ul{ margin:0 0 1.1rem 1.2rem; color:var(--text-muted); display:grid; gap:.4rem; }

/* ================================ FAQ ================================== */
.faq-list{ display:grid; gap:.8rem; }
.faq{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .2s; }
.faq.open{ border-color:var(--accent); }
.faq__q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.3rem; font-weight:600; font-size:1.05rem; color:var(--ink); }
.faq__chev{ width:1.25rem; height:1.25rem; color:var(--accent-600); flex-shrink:0; transition:transform .3s var(--ease); }
.faq.open .faq__chev{ transform:rotate(180deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq__a p{ padding:0 1.3rem 1.25rem; color:var(--text-muted); }

/* ============================ CHAT-WIDGET ============================== */
.chat-fab{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:var(--z-chat);
  display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem .7rem .8rem; border-radius:999px;
  background:var(--petrol-900); color:#fff; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.chat-fab:hover{ transform:translateY(-3px); }
.chat-fab__ava{ width:36px;height:36px;border-radius:999px;background:var(--accent);display:grid;place-items:center;flex-shrink:0; }
.chat-fab__ava svg{ width:20px;height:20px;color:#fff; }
.chat-fab b{ font-size:.95rem; }
.chat-fab .pulse{ position:absolute; top:.55rem; left:2.1rem; width:10px;height:10px;border-radius:999px;background:#5BD08A;border:2px solid var(--petrol-900); }
body.chat-open .chat-fab{ opacity:0; visibility:hidden; pointer-events:none; transition:.2s; }

.chat-panel{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:var(--z-chat-panel);
  width:min(390px, calc(100vw - 2rem)); height:min(620px, calc(100dvh - 2rem));
  background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.98); transform-origin:bottom right;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; }
body.chat-open .chat-panel{ opacity:1; visibility:visible; transform:none; }
.chat-head{ background:var(--petrol-900); color:#fff; padding:1.05rem 1.1rem; display:flex; align-items:center; gap:.8rem; }
.chat-head__ava{ width:42px;height:42px;border-radius:999px;background:var(--accent);display:grid;place-items:center;flex-shrink:0; position:relative; }
.chat-head__ava svg{ width:23px;height:23px;color:#fff; }
.chat-head__ava .on{ position:absolute; right:-1px; bottom:-1px; width:12px;height:12px;border-radius:999px;background:#5BD08A;border:2.5px solid var(--petrol-900); }
.chat-head b{ font-size:1rem; display:block; line-height:1.2; }
.chat-head small{ color:var(--on-dark-mut); font-size:.8rem; }
.chat-head .x{ margin-left:auto; width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff; transition:background .2s; }
.chat-head .x:hover{ background:rgba(255,255,255,.12); }
.chat-body{ flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; scroll-behavior:smooth; }
.msg{ max-width:84%; padding:.7rem .95rem; border-radius:16px; font-size:.95rem; line-height:1.5; animation:msgIn .3s var(--ease) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } }
.msg--bot{ background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; color:var(--text); }
.msg--user{ background:var(--ink); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.msg a{ color:var(--accent-600); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.msg--user a{ color:#fff; }
.typing{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:5px; padding:.8rem 1rem; display:inline-flex; gap:.3rem; }
.typing i{ width:7px;height:7px;border-radius:999px;background:var(--text-faint); animation:blink 1.2s infinite both; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.chat-chips{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.2rem 1.1rem 0; }
.chat-chip{ font-size:.86rem; font-weight:500; padding:.5rem .85rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text); transition:.2s var(--ease); }
.chat-chip:hover{ border-color:var(--accent); color:var(--accent-600); transform:translateY(-1px); }
.chat-foot{ padding:.8rem 1.1rem 1rem; border-top:1px solid var(--line); }
.chat-input{ display:flex; gap:.5rem; align-items:flex-end; }
.chat-input textarea{ flex:1; border:1.5px solid var(--line); border-radius:14px; padding:.7rem .9rem; background:var(--surface); resize:none; max-height:90px; min-height:44px; line-height:1.4; }
.chat-input textarea:focus{ outline:none; border-color:var(--accent); }
.chat-send{ width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0; transition:.2s var(--ease); }
.chat-send:hover{ background:var(--accent-600); transform:translateY(-2px); }
.chat-send svg{ width:20px;height:20px; }
.chat-disclaim{ text-align:center; font-size:.72rem; color:var(--text-faint); margin-top:.55rem; }

/* ============================== REVEAL ================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
/* gerichtetes Hereinfliegen */
.reveal--left{ transform:translateX(-64px); }
.reveal--right{ transform:translateX(64px); }
.reveal--left.in, .reveal--right.in{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal--left, .reveal--right{ opacity:1 !important; transform:none !important; transition:none; }
  .btn:hover,.svc:hover,.chat-fab:hover,.split__media:hover img{ transform:none; }
  .svc:hover .svc__img img{ transform:none; }
  *{ scroll-behavior:auto !important; }
}
/* Touch-Geräte: kein klebriger Hover-Zustand nach dem Tippen */
@media (hover: none){
  .btn:hover{ transform:none; box-shadow:none; }
  .svc:hover{ transform:none; box-shadow:var(--shadow-sm); }
  .svc:hover .svc__img img{ transform:none; }
  .chat-fab:hover{ transform:none; }
}

/* ============================= RESPONSIVE ============================== */
@media (max-width: 1080px){
  /* Tablet: sauberes 2-Spalten-Bento – Feature über volle Breite, Rest paarweise.
     dense füllt entstehende Lücken mit den kleineren Karten. */
  .svc-grid{ grid-template-columns:repeat(2,1fr); grid-auto-flow:row dense; gap:1rem; }
  .svc--feature{ grid-column:1 / -1; grid-row:auto; min-height:340px; }
  .svc--right, .svc--std{ grid-column:auto; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width: 920px){
  .navlinks, .nav__tel{ display:none; }
  .nav__burger{ display:grid; }
  .nav__right{ gap:.6rem; }
  .nav__right .btn{ padding:.6rem .95rem; font-size:.9rem; white-space:nowrap; }
  .hero__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__visual{ max-width:30rem; }
  .cta-wrap{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
  .svc-detail{ grid-template-columns:1fr; gap:1.6rem; }
  .svc-detail--flip .svc-detail__media{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .reviews{ columns:2; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr 1fr; }
  .step::after{ display:none; }
}
@media (max-width: 640px){
  /* Header-CTA raus (steckt im Mobile-Menü + Hero), dafür Telefon als Icon-Button:
     Textknoten via font-size:0 versteckt, SVG bleibt rem-basiert sichtbar */
  .nav__right .btn{ display:none; }
  .nav__tel{ display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; font-size:0; gap:0;
    border:1px solid var(--line); border-radius:var(--r-sm); }
  .nav__tel svg{ width:1.25rem; height:1.25rem; }
  .nav--on-dark:not(.nav--solid) .nav__tel{ border-color:rgba(255,255,255,.3); }
}
@media (max-width: 560px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc--feature,.svc--right,.svc--std{ grid-column:auto; min-height:0; }
  .svc--feature{ min-height:360px; }
  .ba-grid{ grid-template-columns:1fr; }
  .reviews{ columns:1; }
  .values{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__badge{ left:.6rem; }
}

/* ============================== MEHR MOTION =========================== */
/* (1) Lese-Fortschritt oben (per JS injiziert) */
.scroll-prog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg, var(--accent), #E6A684); box-shadow:0 0 14px rgba(191,94,58,.45);
  transition:width .12s linear; pointer-events:none; }

/* (2) Service-Bilder enthüllen sich beim Reveal (Wipe von unten) */
.svc.reveal .svc__img{ clip-path:inset(0 0 14% 0); transition:clip-path 1s var(--ease-out) .1s; }
.svc.reveal.in .svc__img{ clip-path:inset(0 0 0 0); }

/* (3) Eyebrow-Strich zeichnet sich beim Reveal */
.reveal .eyebrow::before{ transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out) .15s; }
.reveal.in .eyebrow::before{ transform:scaleX(1); }

/* (4) Akzentwort im Hero bekommt einen gezeichneten Unterstrich */
.hero__slogan em{ position:relative; }
.hero__slogan em::after{ content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.085em;
  background:#E6A684; border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease-out) .85s; }
.hero__slogan.in em::after{ transform:scaleX(1); }

/* (5) Hochzähl-Zahlen tabellarisch -> kein Springen */
.trust-cell .n[data-count]{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .scroll-prog{ display:none; }
  .svc.reveal .svc__img{ clip-path:none !important; }
  .reveal .eyebrow::before{ transform:none !important; }
  .hero__slogan em::after{ transform:scaleX(1) !important; transition:none; }
}

/* =========================================================================
   PROJEKTE / REFERENZEN  (echte Kundenprojekte, 2026-08)
   Editorial-Reportage: nummerierte Fallstudien, Slider, Bildstreifen, Film
   ========================================================================= */

/* --- Kopf der Projektseite --------------------------------------------- */
.p-hero{ position:relative; padding:clamp(7rem,12vw,10rem) 0 clamp(3rem,6vw,4.5rem); overflow:hidden; }
.p-hero::after{ content:""; position:absolute; right:-12vw; top:-18vh; width:60vw; height:60vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle at 50% 50%, rgba(191,94,58,.22), rgba(191,94,58,0) 62%); pointer-events:none; }
.p-hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:end; position:relative; z-index:1; }
.p-hero h1{ font-size:clamp(2.4rem,1.6rem+3.4vw,4.4rem); line-height:1.02; letter-spacing:-.024em; }
.p-hero h1 em{ font-style:italic; color:#E6A684; }
.p-hero p{ color:var(--on-dark-mut); font-size:clamp(1.02rem,.98rem+.3vw,1.18rem); max-width:52ch; }
.p-hero__meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line-dark); }
.p-hero__meta div{ display:flex; flex-direction:column; }
.p-hero__meta b{ font-family:"Schibsted Grotesk",sans-serif; font-size:1.5rem; color:#fff; line-height:1; }
.p-hero__meta small{ color:var(--on-dark-mut); font-size:.82rem; margin-top:.25rem; }
@media (max-width:860px){ .p-hero__grid{ grid-template-columns:1fr; align-items:start; } }

/* --- Projekt-Fallstudie ------------------------------------------------- */
.proj{ position:relative; padding:clamp(3.6rem,7vw,6rem) 0; border-top:1px solid var(--line); }
.proj:first-of-type{ border-top:0; }
.proj--bank{ background:var(--surface-2); }
.proj__head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3vw,2.4rem); align-items:start; margin-bottom:clamp(1.6rem,3.5vw,2.6rem); }
.proj__num{ font-family:"Archivo",sans-serif; font-weight:900; font-size:clamp(3.2rem,2rem+5vw,6.4rem); line-height:.82;
  color:transparent; -webkit-text-stroke:1.5px var(--accent); letter-spacing:-.03em; opacity:.55; user-select:none; }
.proj__title{ font-size:clamp(1.6rem,1.2rem+1.7vw,2.6rem); line-height:1.08; letter-spacing:-.02em; margin-top:.1rem; }
.proj__sub{ color:var(--text-muted); max-width:62ch; margin-top:.7rem; font-size:clamp(1rem,.96rem+.2vw,1.08rem); }

/* Fakten-Chips */
.proj__facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.proj__facts span{ display:inline-flex; align-items:center; gap:.42rem; font-size:.82rem; font-weight:600; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.4rem .78rem; }
.proj--bank .proj__facts span{ background:#fff; }
.proj__facts svg{ width:.98em; height:.98em; color:var(--accent-600); flex-shrink:0; }

/* Layout: Slider + Story */
.proj__body{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:start; }
@media (max-width:940px){ .proj__body{ grid-template-columns:1fr; } }

.proj__sliders{ display:grid; gap:clamp(.9rem,2vw,1.2rem); }
.proj__sliders .ba-card{ background:var(--surface); }

/* Story-Spalte */
.proj__story{ display:grid; gap:1.15rem; align-content:start; }
.story-step{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; }
.story-step__dot{ width:30px; height:30px; border-radius:999px; display:grid; place-items:center; flex-shrink:0;
  background:var(--accent-soft); color:var(--accent-700); font-weight:800; font-size:.82rem; font-family:"Schibsted Grotesk",sans-serif; }
.story-step h4{ font-size:1.02rem; letter-spacing:-.01em; }
.story-step p{ color:var(--text-muted); font-size:.95rem; margin-top:.25rem; }

/* --- Bildstreifen (wischbar) ------------------------------------------- */
.proj__strip{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:.8rem; margin-top:clamp(1.2rem,2.6vw,1.8rem);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; scrollbar-width:thin; }
.proj__strip::-webkit-scrollbar{ height:6px; }
.proj__strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.shot{ position:relative; scroll-snap-align:start; border-radius:var(--r); overflow:hidden; background:#0c1f1c; aspect-ratio:3/4;
  border:1px solid var(--line); }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-out); }
.shot:hover img{ transform:scale(1.045); }
.shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem .85rem .7rem; color:#fff; font-size:.82rem; font-weight:600;
  background:linear-gradient(to top, rgba(10,26,24,.82), rgba(10,26,24,0)); }
.shot__tag{ position:absolute; top:.7rem; left:.7rem; z-index:2; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px; backdrop-filter:blur(6px); }
.shot__tag--vorher{ background:rgba(14,38,35,.66); color:#fff; }
.shot__tag--nachher{ background:rgba(191,94,58,.94); color:#fff; }

/* --- Film-Karte (echtes Handy-Video vom Meister) ------------------------ */
.film-card{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#0c1f1c; }
.film-card video{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:9/16; background:#0c1f1c; }
.film-card--wide video{ aspect-ratio:16/9; }
.film-card__btn{ position:absolute; inset:0; border:0; padding:0; cursor:pointer; background:transparent; display:grid; place-items:center; }
.film-card__btn::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,26,24,.55), rgba(10,26,24,.06) 55%); }
.film-card__play{ position:relative; width:64px; height:64px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--ink);
  display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .35s var(--ease-out), background .35s; }
.film-card__btn:hover .film-card__play{ transform:scale(1.08); background:#fff; }
.film-card__play svg{ width:26px; height:26px; margin-left:3px; }
.film-card__label{ position:absolute; left:.9rem; bottom:.85rem; z-index:2; color:#fff; font-size:.86rem; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.film-card.is-playing .film-card__btn{ display:none; }
.film-note{ margin-top:.6rem; font-size:.82rem; color:var(--text-faint); display:flex; align-items:center; gap:.4rem; }
.film-note svg{ width:1em; height:1em; flex-shrink:0; }

/* --- Kundenstimme ------------------------------------------------------- */
.proj__quote{ margin-top:clamp(1.4rem,3vw,2.2rem); background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:clamp(1.3rem,3vw,2.1rem); position:relative; overflow:hidden; }
.proj--bank .proj__quote{ background:#fff; }
.proj__quote::before{ content:"\201C"; position:absolute; top:-.12em; right:.22em; font-family:"Schibsted Grotesk",sans-serif; font-size:8rem;
  line-height:1; color:var(--accent); opacity:.12; pointer-events:none; }
.proj__quote blockquote{ font-size:clamp(1.02rem,.98rem+.4vw,1.22rem); line-height:1.62; color:var(--text); font-style:italic; position:relative; }
.proj__quote figcaption{ margin-top:.9rem; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .7rem; font-size:.9rem; color:var(--text-muted); }
.proj__quote .stars{ color:#E0A100; letter-spacing:.08em; }
.quote-placeholder{ border-left-color:var(--line); }
.quote-placeholder blockquote{ color:var(--text-faint); font-style:normal; }
.quote-placeholder::before{ display:none; }

/* --- Prozess-Band (auf Petrol) ------------------------------------------ */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,2vw,1.5rem); }
@media (max-width:900px){ .flow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .flow{ grid-template-columns:1fr; } }
.flow__card{ background:rgba(255,255,255,.055); border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.flow__img{ aspect-ratio:4/3; overflow:hidden; background:#0c1f1c; }
.flow__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.flow__body{ padding:1.05rem 1.15rem 1.3rem; }
.flow__step{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#E6A684; }
.flow__card h3{ color:#fff; font-size:1.06rem; margin-top:.35rem; }
.flow__card p{ color:var(--on-dark-mut); font-size:.92rem; margin-top:.4rem; }

/* Film-Karte in der Story-Spalte nicht zu wuchtig werden lassen */
@media (min-width:941px){ .proj__story .film-card{ max-width:300px; } }

/* --- Projekt-Raster (Startseite + Kopf der Referenzseite) --------------- */
.ref-teaser{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.7rem,1.6vw,1.1rem); }
@media (max-width:1100px){ .ref-teaser{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .ref-teaser{ grid-template-columns:repeat(2,1fr); gap:.7rem; } }
@media (max-width:420px){ .ref-teaser{ grid-template-columns:1fr; } }
.ref-card{ position:relative; display:block; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:#0c1f1c; aspect-ratio:3/4; color:#fff; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ref-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.ref-card:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.ref-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease-out); }
.ref-card:hover img{ transform:scale(1.07); }
.ref-card__num{ position:absolute; top:.7rem; left:.8rem; z-index:2; font-family:"Archivo",sans-serif; font-weight:900;
  font-size:1.55rem; line-height:1; color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.9); letter-spacing:-.02em; }
.ref-card__body{ position:absolute; inset:auto 0 0 0; padding:2.8rem .9rem .95rem; z-index:2;
  background:linear-gradient(to top, rgba(10,26,24,.94), rgba(10,26,24,.5) 46%, rgba(10,26,24,0)); }
.ref-card__body span{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#E6A684; }
.ref-card__body h3{ color:#fff; font-size:1rem; margin-top:.28rem; letter-spacing:-.012em; line-height:1.25; }
.ref-card__body p{ color:rgba(255,255,255,.76); font-size:.82rem; margin-top:.22rem; line-height:1.4; }
.ref-card__go{ position:absolute; top:.7rem; right:.7rem; z-index:2; width:32px; height:32px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--ink); display:grid; place-items:center;
  transform:translateY(-6px); opacity:0; transition:transform .4s var(--ease-out), opacity .4s var(--ease-out); }
.ref-card:hover .ref-card__go, .ref-card:focus-visible .ref-card__go{ transform:none; opacity:1; }
.ref-card__go svg{ width:15px; height:15px; }
@media (hover:none){ .ref-card__go{ opacity:1; transform:none; } }

/* Kopf-Raster auf der Referenzseite: etwas ruhiger, ohne Sprunghöhe */
.ref-nav{ padding:clamp(2.2rem,4.5vw,3.4rem) 0 0; }
.ref-nav__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1.4rem;
  margin-bottom:clamp(1rem,2.2vw,1.5rem); }
.ref-nav__head h2{ font-size:clamp(1.25rem,1.1rem+.8vw,1.7rem); letter-spacing:-.018em; }
.ref-nav__head p{ color:var(--text-faint); font-size:.92rem; }

/* --- Ergänzungen Startseite: Zitat im Feature-Slider, Mehr-Zeile -------- */
.ba-quote{ margin:.2rem 0 .1rem; padding-left:.95rem; border-left:2px solid var(--accent); }
.ba-quote blockquote{ font-style:italic; color:var(--text); font-size:.98rem; line-height:1.55; }
.ba-quote figcaption{ margin-top:.4rem; font-size:.86rem; color:var(--text-faint); display:flex; align-items:center; gap:.5rem; }
.ba-quote .stars{ color:#E0A100; letter-spacing:.06em; }
.ba-card__meta h3 a{ color:inherit; text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .4s var(--ease-out); }
.ba-card__meta h3 a:hover{ background-size:100% 1.5px; color:var(--accent-600); }
.ba-more{ margin-top:clamp(1.4rem,3vw,2.2rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.6rem; padding-top:clamp(1.2rem,2.4vw,1.8rem); border-top:1px solid var(--line); }
.ba-more p{ color:var(--text-muted); max-width:52ch; }

/* =========================================================================
   Projektbilder OHNE Beschnitt zeigen (21.08.2026)
   Die Handy-Fotos und Video-Standbilder sind hochkant (9:16). Sie werden
   weder gezoomt noch hochgerechnet: Rahmen im Bildformat, Bild komplett drin.
   ========================================================================= */

/* Slider auf der Referenzseite: zwei nebeneinander, Bildformat 9:16 */
.proj__sliders{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:start; }
.proj__sliders .ba{ aspect-ratio:9/16; background:#EDF1EF; }
.proj--bank .proj__sliders .ba{ background:#E3EAE7; }
.proj__sliders .ba img{ object-fit:contain; }
.proj__sliders .ba-card__meta{ padding:.9rem 1rem; flex-direction:column; align-items:flex-start; gap:.5rem; }
.proj__sliders .ba-card__meta h3{ font-size:1.04rem; }
.proj__sliders .ba-card__meta p{ font-size:.88rem; }
@media (max-width:520px){
  .proj__sliders{ grid-template-columns:1fr; }
}

/* Bildstreifen und Übersichtskarten ebenfalls im Hochkantformat */
.shot{ aspect-ratio:9/16; }
.shot img{ object-fit:cover; }
.ref-card{ aspect-ratio:9/16; }

/* Prozess-Karten: Hochkantbilder nicht in ein Querformat quetschen */
.flow__img{ aspect-ratio:3/4; }
.flow__img img{ object-fit:cover; object-position:center 42%; }

/* =========================================================================
   ROTER FADEN je Projekt (21.08.2026)
   Jedes Projekt läuft in derselben Reihenfolge ab:
   Ausgangslage → Vorgehen → Vergleich (optional) → Ergebnis → Stimme.
   Links begleitet eine durchgehende Linie mit Punkten, damit sofort klar ist,
   wozu welcher Block gehört.
   ========================================================================= */
.thread{ position:relative; margin-top:clamp(1.6rem,3vw,2.4rem); padding-left:clamp(0px,3vw,2.6rem); }
.thread::before{ content:""; position:absolute; left:calc(clamp(0px,3vw,2.6rem) / 2 - 1px); top:.6rem; bottom:2.2rem; width:2px;
  background:linear-gradient(to bottom, var(--accent) 0%, rgba(191,94,58,.28) 12%, rgba(191,94,58,.28) 88%, transparent 100%); }
@media (max-width:900px){ .thread{ padding-left:1.6rem; } .thread::before{ left:5px; } }

.phase{ position:relative; padding-bottom:clamp(1.8rem,3.4vw,2.8rem); }
.phase:last-of-type{ padding-bottom:0; }
.phase__head{ display:flex; align-items:center; flex-wrap:wrap; gap:.55rem .8rem; margin-bottom:clamp(.9rem,1.8vw,1.2rem); }
.phase__head h3{ font-size:clamp(1.02rem,.96rem+.4vw,1.22rem); letter-spacing:-.014em; }
.phase__head .hint{ margin-left:auto; font-size:.82rem; color:var(--text-faint); }
.phase__dot{ position:absolute; left:calc(clamp(0px,3vw,2.6rem) / -2 - 8px); top:.15rem; width:18px; height:18px; border-radius:999px;
  background:var(--bg); border:2px solid var(--accent); display:grid; place-items:center; }
.proj--bank .phase__dot{ background:var(--surface-2); }
.phase__dot::after{ content:""; width:6px; height:6px; border-radius:999px; background:var(--accent); }
@media (max-width:900px){ .phase__dot{ left:-1.6rem; } }
.phase__tag{ display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; padding:.3rem .62rem; border-radius:999px; }
.phase__tag--vorher{ background:rgba(14,38,35,.08); color:var(--text-muted); }
.phase__tag--nachher{ background:var(--accent-soft); color:var(--accent-700); }
.phase__tag--weg{ background:rgba(14,38,35,.06); color:var(--text-faint); }

/* --- Bildraster: gleichmäßige Kacheln, Bilder vollständig sichtbar ------ */
.row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:clamp(.6rem,1.1vw,1rem); }
.row figure{ position:relative; margin:0; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:#E7ECEA; }
.proj--bank .row figure{ background:#DFE7E4; }
.row figure img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .7s var(--ease-out); }
.row figure:hover img{ transform:scale(1.03); }
.row figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2rem .7rem .6rem; color:#fff;
  font-size:.82rem; font-weight:600; line-height:1.3;
  background:linear-gradient(to top, rgba(10,26,24,.9), rgba(10,26,24,0)); }
/* Video als gleich große Kachel in der Ergebnis-Reihe */
.row .film-card{ aspect-ratio:9/16; max-width:none; }
.row .film-card video{ height:100%; aspect-ratio:auto; object-fit:cover; }
@media (max-width:560px){
  .row{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
  .row figure, .row .film-card{ flex:0 0 auto; width:min(72vw,300px); scroll-snap-align:start; }
}

/* --- Vergleichs-Block: Regler bekommt Luft und Erklärung ---------------- */
.compare{ display:grid; grid-template-columns:minmax(0,400px) minmax(0,44ch); gap:clamp(1.2rem,2.6vw,2.2rem); align-items:center; }
@media (max-width:820px){ .compare{ grid-template-columns:1fr; } }
.compare__note h4{ font-size:1.06rem; margin-bottom:.4rem; }
.compare__note p{ color:var(--text-muted); max-width:46ch; }
.compare .ba-card{ background:var(--surface); }
.compare .ba{ aspect-ratio:9/16; background:#EDF1EF; }
.compare .ba img{ object-fit:contain; }

/* --- Vorgehen: Schritte zweispaltig ------------------------------------- */
.plan{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem clamp(1.4rem,3vw,2.6rem); max-width:1180px; }
@media (max-width:760px){ .plan{ grid-template-columns:1fr; } }
.plan .story-step p{ font-size:.94rem; }

/* ====================== ANFRAGE-ASSISTENT (Pop-up) =====================
   Vier Schritte im Dialog, aufgebaut wie der Assistent bei L&S GaLaBau,
   aber im Steinmeyer-Look. Oeffnet aus jedem "Beratung anfragen"-Button.
   Natives <dialog>: Fokusfalle, Escape und Inert kommen vom Browser.     */
.aw[open]{ display:flex; }
.aw{
  display:none; flex-direction:column; padding:0; border:0; overflow:hidden;
  width:min(660px,100%); max-height:min(92dvh,900px);
  border-radius:var(--r-lg); background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-lg);
  animation:awIn .34s var(--ease-out) both;
}
.aw::backdrop{ background:rgba(14,38,35,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:awFade .3s var(--ease-out) both; }
@keyframes awIn{ from{ opacity:0; transform:translateY(22px) scale(.985); } }
@keyframes awFade{ from{ opacity:0; } }

/* ---- Kopf: Fortschritt + Schliessen ---- */
.aw__head{ position:relative; padding:1.3rem clamp(1.2rem,4vw,2rem) 1rem; background:var(--petrol-900); color:var(--on-dark); flex-shrink:0; }
.aw__head b{ display:block; color:#fff; font-size:1.02rem; letter-spacing:-.01em; }
.aw__head small{ color:var(--on-dark-mut); font-size:.82rem; }
.aw__bar{ margin-top:.85rem; height:3px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; }
.aw__bar i{ display:block; height:100%; width:25%; border-radius:999px; background:var(--accent); transition:width .45s var(--ease); }
.aw__x{
  position:absolute; top:.9rem; right:.9rem; width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid var(--line-dark); color:var(--on-dark);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.aw__x:hover{ background:rgba(255,255,255,.16); color:#fff; }
.aw__x svg{ width:17px; height:17px; }

/* ---- Koerper ---- */
.aw__body{ padding:clamp(1.2rem,4vw,2rem); overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
.aw__step{ display:none; animation:awStep .3s var(--ease-out) both; }
.aw__step.is-on{ display:block; }
@keyframes awStep{ from{ opacity:0; transform:translateX(14px); } }
.aw__step h2{ font-size:clamp(1.28rem,1.1rem+.7vw,1.6rem); letter-spacing:-.02em; }
.aw__step > p.hint{ color:var(--text-muted); margin-top:.4rem; font-size:.95rem; }

/* ---- Auswahlkarten ---- */
.aw__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.15rem; }
.aw__card{ position:relative; display:flex; gap:.8rem; align-items:flex-start; cursor:pointer;
  padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.aw__card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.aw__card input{ position:absolute; opacity:0; width:0; height:0; }
.aw__card:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.aw__card:has(input:focus-visible){ outline:2px solid var(--accent-600); outline-offset:2px; }
.aw__ico{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); }
.aw__card:has(input:checked) .aw__ico{ background:var(--accent); color:#fff; }
.aw__ico svg{ width:18px; height:18px; }
.aw__card b{ display:block; font-size:.96rem; line-height:1.25; }
.aw__card small{ display:block; color:var(--text-muted); font-size:.82rem; margin-top:.15rem; line-height:1.35; }

/* ---- Felder ---- */
.aw__field{ margin-top:1.05rem; }
.aw__field > label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; }
.aw__field .opt{ color:var(--text-faint); font-weight:400; }
.aw__row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.aw input[type=text],.aw input[type=email],.aw input[type=tel],.aw select,.aw textarea{
  width:100%; font:inherit; color:var(--text); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem .85rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.aw textarea{ resize:vertical; min-height:7rem; line-height:1.55; }
.aw :is(input,select,textarea):focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(191,94,58,.16); }
.aw .helper{ color:var(--text-faint); font-size:.82rem; margin-top:.35rem; }
.aw__err{ display:none; color:#9E2B20; font-weight:600; font-size:.86rem; margin-top:.4rem; }
.aw__field.is-bad .aw__err{ display:block; }
/* Sprunglink für Tastatur/Screenreader (QA 20.10.2026) */
.skip{ position:absolute; left:-999px; top:0; z-index:2000; background:#fff; color:var(--ink); padding:.7rem 1rem; border-radius:0 0 var(--r) 0; box-shadow:var(--shadow); font-weight:600; }
.skip:focus{ left:0; }
/* Touch: Bewertungsband nicht endlos animieren, sondern wischbar (WCAG 2.2.2) */
@media (pointer: coarse){
  .reviews-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .reviews-track{ animation:none !important; transform:none !important; }
}
.aw__senderr{ color:#9E2B20; font-weight:600; font-size:.86rem; margin:0; padding:0 clamp(1.2rem,4vw,2rem) .6rem; }
.form__err{ color:#9E2B20; font-weight:600; font-size:.9rem; margin:.7rem 0 0; }
.form__err:empty{ display:none; }
.aw__field.is-bad :is(input,select,textarea){ border-color:#9E2B20; }

/* Warum fragen wir das */
.aw__why{ display:flex; gap:.7rem; margin-top:.7rem; padding:.8rem .9rem; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text-muted); font-size:.85rem; line-height:1.5; }
.aw__why svg{ width:17px; height:17px; flex-shrink:0; margin-top:.15rem; color:var(--accent-600); }

/* ---- Zusammenfassung ---- */
.aw__sum{ margin-top:1.15rem; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.aw__sum div{ display:grid; grid-template-columns:minmax(0,9rem) 1fr; gap:.9rem; padding:.7rem .95rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.aw__sum div:last-child{ border-bottom:0; }
.aw__sum dt{ color:var(--text-muted); }
.aw__sum dd{ margin:0; font-weight:500; overflow-wrap:anywhere; }

.aw__consent{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.15rem; font-size:.88rem; color:var(--text-muted); line-height:1.5; }
.aw__consent input{ margin-top:.2rem; flex-shrink:0; }
.aw__consent a{ color:var(--accent-600); text-decoration:underline; text-underline-offset:2px; }

/* ---- Fuss ---- */
.aw__foot{ display:flex; align-items:center; gap:.7rem; flex-shrink:0;
  padding:1rem clamp(1.2rem,4vw,2rem); border-top:1px solid var(--line); background:var(--bg); }
.aw__foot .sp{ flex:1; }
.aw__trust{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; padding:0 clamp(1.2rem,4vw,2rem) 1rem;
  color:var(--text-faint); font-size:.8rem; background:var(--bg); flex-shrink:0; }
.aw__trust span{ display:inline-flex; align-items:center; gap:.35rem; }
.aw__trust svg{ width:14px; height:14px; color:var(--accent-600); }

/* ---- Danke ---- */
.aw__done{ display:none; padding:clamp(2rem,6vw,3.2rem) clamp(1.2rem,4vw,2rem); text-align:center; }
.aw.is-done .aw__body,.aw.is-done .aw__foot,.aw.is-done .aw__trust{ display:none; }
.aw.is-done .aw__done{ display:block; }
.aw__done .mark{ width:64px; height:64px; margin:0 auto 1.1rem; border-radius:999px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-600); }
.aw__done .mark svg{ width:30px; height:30px; }
.aw__done h2{ font-size:clamp(1.35rem,1.1rem+1vw,1.8rem); letter-spacing:-.02em; }
.aw__done p{ color:var(--text-muted); margin:.7rem auto 1.5rem; max-width:42ch; }

@media (max-width:620px){
  .aw{ width:100%; max-width:100%; max-height:100dvh; height:100dvh; border-radius:0; margin:0; }
  .aw__grid,.aw__row{ grid-template-columns:1fr; }
  .aw__sum div{ grid-template-columns:1fr; gap:.15rem; }
}
@media (prefers-reduced-motion: reduce){
  .aw,.aw::backdrop,.aw__step{ animation:none; }
  .aw__bar i{ transition:none; }
}

/* ---- Zitat-Tafel statt Foto (Ueber uns) --------------------------------
   Ersetzt das KI-Foto im Abschnitt "Unsere Geschichte". Statt einer
   Aufnahme, die es beim Kunden so nicht gibt, steht dort eine echte
   Google-Bewertung — passt zum Satz darueber ("sagen unsere Kunden oft
   besser als wir selbst") und braucht kein Bildmaterial.               */
.quote-panel{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  background:linear-gradient(165deg,var(--petrol-800) 0%,var(--petrol-900) 68%);
  color:var(--on-dark);
  padding:clamp(1.8rem,4vw,2.9rem);
  display:flex; flex-direction:column; justify-content:center; min-height:clamp(20rem,30vw,25rem);
}
/* Anfuehrungszeichen als grosse Kontur im Anschnitt */
.quote-panel::before{
  content:"\201C"; position:absolute; z-index:-1; top:-.34em; right:.02em;
  font-family:"Archivo",serif; font-weight:900; font-size:clamp(11rem,22vw,17rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(230,166,132,.26); pointer-events:none; user-select:none;
}
.quote-panel__stars{ color:#E8A02A; letter-spacing:.14em; font-size:.95rem; }
.quote-panel blockquote{
  margin:1rem 0 0; color:#fff; text-wrap:pretty;
  font-size:clamp(1.2rem,1rem+.9vw,1.65rem); line-height:1.34; letter-spacing:-.015em; font-weight:500;
}
.quote-panel figcaption{ margin-top:1.4rem; padding-top:1.15rem; border-top:1px solid var(--line-dark);
  display:flex; align-items:center; gap:.85rem; }
.quote-panel__av{ width:44px; height:44px; border-radius:999px; flex-shrink:0; display:grid; place-items:center;
  background:var(--petrol-600); color:#fff; font-weight:700; font-family:"Schibsted Grotesk",sans-serif; }
.quote-panel figcaption b{ display:block; color:#fff; font-size:.98rem; }
.quote-panel figcaption small{ color:var(--on-dark-mut); font-size:.85rem; }
.quote-panel__badge{ margin-top:1.3rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(255,255,255,.08); border:1px solid var(--line-dark); color:var(--on-dark);
  border-radius:999px; padding:.5rem .95rem; font-size:.86rem; font-weight:600; }
.quote-panel__badge svg{ width:1.05rem; height:1.05rem; color:#E6A684; }

/* =========================================================================
   Betriebs-Karte im Über-uns-Teaser (24.08.2026)
   Ersetzt das KI-Fliesenfoto: eine Tafel, die zeigt, mit wem man es zu tun
   hat. Kein Bildmaterial nötig, passt zur Überschrift „Familienbetrieb".
   ========================================================================= */
.split__panel{ position:relative; align-self:stretch; }
.betrieb{ position:relative; height:100%; display:flex; flex-direction:column; gap:clamp(1.1rem,2.2vw,1.6rem);
  background:var(--petrol-900); color:var(--on-dark); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:clamp(1.5rem,3.2vw,2.4rem); overflow:hidden; }
.betrieb::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(191,94,58,.28), transparent 62%); pointer-events:none; }
.betrieb > *{ position:relative; }

.betrieb__top{ display:flex; align-items:center; gap:.85rem; padding-bottom:clamp(1rem,2vw,1.3rem);
  border-bottom:1px solid var(--line-dark); }
.betrieb__mark{ width:46px; height:46px; flex-shrink:0; border-radius:12px; background:#fff; color:var(--petrol-900);
  display:grid; place-items:center; font-family:"Schibsted Grotesk",sans-serif; font-weight:800; font-size:1.5rem; line-height:1; }
.betrieb__top b{ display:block; color:#fff; font-family:"Schibsted Grotesk",sans-serif; font-size:1.2rem; letter-spacing:-.014em; }
.betrieb__top small{ display:block; color:var(--on-dark-mut); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin-top:.15rem; }

.betrieb__rolle{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#E6A684; }
.betrieb__person strong{ display:block; color:#fff; font-family:"Schibsted Grotesk",sans-serif;
  font-size:clamp(1.5rem,1.2rem+1.1vw,2.1rem); line-height:1.1; letter-spacing:-.02em; margin-top:.3rem; }
.betrieb__person p{ color:var(--on-dark-mut); margin-top:.7rem; font-size:.98rem; line-height:1.55; max-width:44ch; }

.betrieb__fakten{ display:grid; gap:.9rem; margin:0; padding-top:clamp(1rem,2vw,1.3rem); border-top:1px solid var(--line-dark); }
.betrieb__fakten dt{ font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--on-dark-mut); }
.betrieb__fakten dd{ margin:.25rem 0 0; color:#fff; font-size:.96rem; line-height:1.45; }

.betrieb__tel{ margin-top:auto; display:inline-flex; align-items:center; gap:.8rem; align-self:flex-start;
  background:rgba(255,255,255,.07); border:1px solid var(--line-dark); border-radius:var(--r);
  padding:.75rem 1.1rem; color:#fff; text-decoration:none;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out); }
.betrieb__tel:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.betrieb__tel svg{ width:1.35rem; height:1.35rem; color:#E6A684; flex-shrink:0; }
.betrieb__tel span{ display:flex; flex-direction:column; font-family:"Schibsted Grotesk",sans-serif;
  font-size:1.22rem; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.betrieb__tel small{ font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.74rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:.15rem; }

.stamp--panel{ position:absolute; right:clamp(1.2rem,2.4vw,1.8rem); bottom:clamp(1.2rem,2.4vw,1.8rem);
  background:#fff; color:var(--ink); border-radius:var(--r); padding:.62rem .85rem; box-shadow:var(--shadow);
  font-weight:600; font-size:.88rem; display:flex; align-items:center; gap:.5rem; }
.stamp--panel svg{ width:1.15rem; height:1.15rem; color:var(--accent); }
@media (max-width:620px){
  .stamp--panel{ position:static; align-self:flex-start; }
  .betrieb__tel{ width:100%; }
}

/* =========================================================================
   Handy-Feinschliff (24.08.2026)
   Ziel: kürzere Seite ohne Inhaltsverlust, schärfere Bilder, klare
   Orientierung beim Scrollen. Gemessen vorher: Startseite 15.000 px,
   Referenzseite 22.900 px auf einem 390-px-Gerät.
   ========================================================================= */

/* 1 · Projektkarten bleiben auch auf kleinen Geräten zweispaltig.
      Einspaltig wurde jede Karte 690 px hoch — fünf Karten allein 3.400 px.
      Nebeneffekt: 180 px Kachelbreite entspricht auf Retina fast genau der
      echten Bildauflösung, die Fotos wirken dadurch schärfer. */
@media (max-width:420px){
  .ref-teaser{ grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .ref-card__body{ padding:2rem .6rem .7rem; }
  .ref-card__body h3{ font-size:.92rem; }
  .ref-card__body p{ display:none; }
  .ref-card__num{ font-size:1.2rem; }
}

/* 2 · Ablauf-Karten (Schutz, Rückbau, Abdichten, Fliesen) zum Wischen,
      statt vier volle Bildschirmhöhen untereinander. */
@media (max-width:760px){
  .flow{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:.7rem; padding-bottom:.6rem; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
  .flow__card{ flex:0 0 auto; width:min(74vw,290px); scroll-snap-align:start; }
  .flow__img{ aspect-ratio:16/11; }
}

/* 3 · Leistungskarten zweispaltig statt gestapelt (Startseite + Leistungen) */
@media (max-width:560px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .svc--feature{ grid-column:1 / -1; }
  .svc__img{ aspect-ratio:4/3; }
  .svc__body{ padding:.85rem .9rem 1.1rem; }
  .svc h3{ font-size:1rem; }
  .svc p{ font-size:.86rem; }
}

/* 4 · Bildkacheln in der Wischleiste auf die echte Bildauflösung abstimmen
      (Video-Standbilder sind 464–480 px breit; 240 px CSS × 2 = 480 Gerätepixel) */
@media (max-width:560px){
  .row figure, .row .film-card{ width:min(62vw,240px); }
  .row{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
}

/* 5 · Orientierung: Die Phasen-Überschrift bleibt beim Scrollen stehen,
      solange man sich in diesem Abschnitt befindet. */
.phase__head{ position:sticky; top:0; z-index:6; padding-top:.7rem; padding-bottom:.7rem;
  margin-bottom:clamp(.7rem,1.4vw,1rem);
  background:linear-gradient(to bottom, var(--bg) 78%, rgba(243,245,244,0)); }
.proj--bank .phase__head{ background:linear-gradient(to bottom, var(--surface-2) 78%, rgba(233,238,236,0)); }
@media (max-width:900px){
  .phase__head{ top:calc(var(--nav-h,64px)); }
  .phase__head h3{ font-size:1rem; }
  .phase__head .hint{ font-size:.76rem; }
}
@media (prefers-reduced-motion: reduce){ .phase__head{ position:static; } }

/* 6 · Der Faden rückt auf schmalen Geräten näher an den Text */
@media (max-width:520px){
  .thread{ padding-left:1.2rem; }
  .thread::before{ left:4px; }
  .phase__dot{ left:-1.2rem; width:14px; height:14px; }
  .phase__dot::after{ width:5px; height:5px; }
}

/* Sticky-Kopf deckend, damit kein Bild durchscheint */
.phase__head{ background:var(--bg); box-shadow:0 10px 14px -12px rgba(14,38,35,.5); }
.proj--bank .phase__head{ background:var(--surface-2); }
@media (max-width:560px){
  .phase__head{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
  .phase__head .hint{ display:none; }
  .ref-card__body span i{ display:none; }
}

/* Chat-Knopf auf dem Handy nur als Symbol – die breite Sprechblase
   verdeckte sonst Zitate und Bildunterschriften am unteren Bildrand */
@media (max-width:640px){
  .chat-fab{ padding:.5rem; gap:0; }
  .chat-fab b{ display:none; }
  .chat-fab__ava{ width:42px; height:42px; }
  .chat-fab__ava svg{ width:22px; height:22px; }
}

/* Elemente mit seitlicher Einblend-Bewegung stehen vor dem Einblenden
   ausserhalb des Viewports und machten die Seite auf dem Handy horizontal
   scrollbar. `clip` schneidet das ab, ohne `position:sticky` zu brechen
   (`overflow:hidden` wuerde die Phasen-Ueberschriften ihre Haftung kosten). */
html{ overflow-x:clip; }
@supports not (overflow-x:clip){
  html, body{ overflow-x:hidden; }
  .reveal--left, .reveal--right{ transform:none !important; }
}

/* Die Phasen-Bloecke duerfen sich beim Einblenden nicht verschieben:
   ein `transform` am Elternelement macht `position:sticky` im Kind
   wirkungslos (es haftet dann am Block statt am Fenster). Deshalb hier
   nur die Deckkraft animieren. */
.phase.reveal{ transform:none !important; }

/* Fuenf Karten in zwei Spalten lassen unten eine Luecke. Die erste Karte
   nimmt deshalb die volle Breite ein: 1 + 2 + 2 geht glatt auf, und das
   staerkste Projekt steht zugleich betont oben. */
@media (max-width:420px){
  .ref-teaser > .ref-card:first-child{ grid-column:1 / -1; aspect-ratio:5/4; }
  .ref-teaser > .ref-card:first-child img{ object-position:center 38%; }
  .ref-teaser > .ref-card:first-child .ref-card__body h3{ font-size:1.12rem; }
  .ref-teaser > .ref-card:first-child .ref-card__body p{ display:block; font-size:.84rem; }
  .ref-teaser > .ref-card:first-child .ref-card__num{ font-size:1.6rem; }
  /* Sollte die Zahl der Karten einmal gerade sein, greift die Ausnahme nicht */
  .ref-teaser > .ref-card:first-child:nth-last-child(even){ grid-column:auto; aspect-ratio:9/16; }
}

/* Sprungziele nicht unter der Kopfleiste parken: beim Antippen einer
   Projektkarte soll die Ueberschrift sichtbar sein, nicht verdeckt. */
:target, section[id], .proj, [id^="dachbad"], [id^="altbau"], [id^="siebziger"],
[id^="badsanierung"], [id^="rollstuhlbad"]{
  scroll-margin-top:calc(var(--nav-h,72px) + .9rem);
}

/* Leistungen: die grosse Karte oben nimmt eine ganze Zeile ein, danach
   bleiben fuenf - die letzte stuende allein. Sie laeuft deshalb ebenfalls
   ueber die volle Breite (flacheres Bild), das rahmt den Block sauber ein.
   Bei gerader Kartenzahl greift die Regel automatisch nicht. */
@media (max-width:560px){
  .svc-grid > .svc:last-child:nth-child(even){ grid-column:1 / -1; }
  .svc-grid > .svc:last-child:nth-child(even) .svc__img{ aspect-ratio:16/9; }
}

/* Kleines Symbol in der Leistungs-Kategorie nicht zusammenquetschen lassen
   (bei "Millimeterarbeit" war es auf wenige Pixel geschrumpft), und die
   Zeile auf dem Handy so knapp setzen, dass sie einzeilig bleibt. */
.svc__tag svg{ flex-shrink:0; }
@media (max-width:560px){
  .svc__tag{ font-size:.66rem; letter-spacing:.055em; }
}