/* ============================================================
   BECK Dienstleistungen – main.css
   ============================================================ */

/* ── Reset / Base ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x: clip verhindert horizontalen Scroll durch das geschlossene Off-Canvas-Menü
   (position:fixed liegt am Viewport, nicht am Body – daher hier auf html-Ebene; clip bricht kein sticky) */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 18px;         /* WP: 18px Fließtext */
  line-height: 1.5;        /* 27px */
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--c-primary-dark); }
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--c-heading); line-height: 1.15; font-weight: var(--fw-black); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.section   { padding-block: var(--section-y); }
.text-center { text-align: center; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-script);       /* WP: Caveat */
  font-weight: 400;
  font-size: 1.875rem;                   /* 30px */
  line-height: 1;
  padding: 8px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--c-heading);
  cursor: pointer;
  transition: all var(--t);
  text-align: center;
  color: var(--c-heading);
  background: transparent;
}
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color:#fff; }
.btn-outline { background: transparent; color: var(--c-heading); border-color: var(--c-heading); }
.btn-outline:hover { background: var(--c-heading); color: #fff; }
.btn-outline-white { background: transparent; color:#fff; border-color:#fff; }
.btn-outline-white:hover { background:#fff; color: var(--c-primary); }

/* runde Icon-Buttons (Telefon/Mail) */
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--c-primary); color:#fff; border:2px solid var(--c-primary);
  transition: all var(--t);
}
.icon-btn:hover { background:#fff; color: var(--c-primary); }
.icon-btn svg { width: 20px; height: 20px; }

/* Fließtext darf automatisch getrennt werden (schöner Flattersatz). */
p, li { overflow-wrap: break-word; hyphens: auto; }
/* ÜBERSCHRIFTEN: NIE mitten im Wort trennen (keine Auto-Silbentrennung).
   Nur an bewusst gesetzten weichen Trennstrichen (­, z. B. „Hausmeister­service").
   overflow-wrap bricht nur, wenn ein einzelnes Wort wirklich zu breit ist. */
h1, h2, h3, h4, h5, .orange-head { overflow-wrap: break-word; hyphens: manual; }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;  /* bleibt beim Scrollen oben (wie WP) */
  padding-block: 20px;
  transition: padding var(--t), background var(--t), box-shadow var(--t);
}
/* Desktop: KEINE weiße Leiste beim Scrollen – die schwebenden Pillen bleiben (Dennis-Wunsch).
   Die is-stuck-Leiste gibt es NUR auf Mobil (siehe Media-Query weiter unten),
   dort löst sie das Problem „Text läuft hinter die schwebenden Buttons". */
.header-inner { display: flex; align-items: center; gap: 16px; }
/* Logo frei stehend, kein Kasten – WP-Größe 233×140 */
.brand { line-height: 0; }
.brand img { width: 233px; height: auto; }
/* Navigation als schwebende weiße Pille */
.site-nav { margin-left: auto; background: #fff; border-radius: var(--radius-pill); padding: 0 30px; height: 52px; display: flex; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.site-nav > ul { display: flex; align-items: center; gap: 0; list-style: none; }
.site-nav > ul > li { padding: 0 20px; position: relative; }
/* dünne gepunktete Trenner zwischen Nav-Punkten (wie WP) */
.site-nav > ul > li + li::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:16px; border-left: 2px dotted rgba(63,68,75,.35); }
.site-nav a {
  font-family: var(--font-head); font-weight: 800; font-size: 1.125rem;  /* 18px/800 */
  color: var(--c-heading); padding: 4px 0; position: relative;
}
.site-nav a:hover, .site-nav a.active { color: var(--c-primary); }

/* Dropdown */
.has-sub { position: relative; }
.has-sub > a::after { content:"▾"; margin-left: 6px; font-size: .8em; }
.sub-menu {
  position: absolute; top: 100%; left: -14px; min-width: 250px;
  background:#fff; box-shadow: var(--shadow-card); border-radius: 6px; padding: 8px 0;
  list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--t);
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity:1; visibility:visible; transform: translateY(0); }
.sub-menu a { display:block; padding: 9px 20px; color: var(--c-heading)!important; text-shadow:none!important; font-weight: var(--fw-normal); }
.sub-menu a:hover { color: var(--c-primary)!important; background: var(--c-light); }

.header-actions { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: var(--radius-pill); padding: 0 6px; height: 52px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* Burger (mobil, sitzt als Icon-Button rechts in der Actions-Bubble) */
.nav-toggle { display: none; cursor: pointer; }

/* ── Hero ─────────────────────────────────────────────────── */
/* Hero + Feature-Cards zusammen = EXAKT volle Bildschirmhöhe */
.hero-block { height: 100dvh; display: flex; flex-direction: column; }
.hero { position: relative; flex: 1 1 auto; min-height: 0; color: #fff; overflow: hidden; }
.hero-block .features { flex: 0 0 auto; padding-block: 38px; }  /* Cards-Bereich flacher → Hero höher */

/* ── Hero-Carousel (horizontal, Slide-Übergang + Ken-Burns) ── */
.hc-track { display: flex; height: 100%; transition: transform .8s cubic-bezier(.45,0,.2,1); will-change: transform; }
.hc-slide { position: relative; flex: 0 0 100%; height: 100%; display: flex; align-items: center; padding-top: 96px; overflow: hidden; }
.hc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hc-slide.is-active .hc-bg { animation: kenburns 16s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.13); } }
/* weicher dunkler Kreisverlauf hinter dem Text */
.hc-slide::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(62% 68% at 27% 52%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.34) 44%, rgba(0,0,0,0) 75%); }
.hc-content { position: relative; z-index: 2; max-width: 640px; }
/* .hc-h1 = optisch die Hero-Headline, aber KEIN <h1> (SEO: nur EIN echtes H1 pro Seite, das steht im Intro) */
.hc-content .hc-h1 { font-family: var(--font-head); font-weight: var(--fw-black); line-height: 1.15; color:#fff; font-size: clamp(1.6rem, 6.5vw, 3rem); text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 20px rgba(0,0,0,.5); margin-bottom: 14px; overflow-wrap: break-word; hyphens: manual; }
/* Hero-Untertitel: KEINE Silbentrennung im Wort (prominenter Kurztext) + ausbalancierte Zeilen */
.hc-content p { font-size: 1.5625rem; font-weight: 400; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 3px 16px rgba(0,0,0,.5); margin-bottom: 26px; hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }

/* Pfeil-Buttons */
.hc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--c-heading);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.2);
  transition: background var(--t); }
.hc-nav:hover { background: #fff; }
.hc-nav svg { width: 26px; height: 26px; }
.hc-prev { left: 18px; } .hc-next { right: 18px; }

/* Dots */
.hc-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; }
.hc-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: background var(--t); }
.hc-dot.active { background: #fff; }

/* ── Feature-Cards (2, überlappen Hero) ───────────────────── */
/* Sektions-Texturen (WP: page_bg.png 256px-Kachel repeat; gemessene Render-Farben) */
/* Beige Textur-Sektionen: #E0DBD2 + grau-beige Kachel-Grafik (page_bg) – wie WP */
/* Alle grau-beige Textur-Sektionen: #E0DBD2 + page_bg, STICKY (fixed) – überall wo die Textur ist */
.bg-beige-tex, .bg-white-tex, .features, .service-intro { background: #e0dbd2 url('/assets/images/page_bg.png') repeat fixed; }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.feature-card {
  background:#fff; border-bottom: 5px solid var(--c-primary); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
}
.feature-card img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.feature-card .fc-body { padding: 35px; text-align: center; background: #f9fafa; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.feature-card h3 { font-size: 1.875rem; line-height: 1.2; margin-bottom: 10px; }  /* 30px */
.feature-card p { color: var(--c-text); margin-bottom: 18px; font-size: 1.125rem; }  /* 18px */

/* ── Intro (2-Spalten) ────────────────────────────────────── */
.intro-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.intro-left .script { font-family: var(--font-script); color: var(--c-heading); font-size: clamp(1.9rem, 5.5vw, 2.8rem); line-height:1; display:block; margin-bottom: 10px; }
.intro-left h1 { color: var(--c-primary); font-size: clamp(1.5rem, 3.4vw + 0.5rem, 2rem); line-height: 1.15; }
.intro-right { color: var(--c-text); }

/* ── Service-Karten (Bild oben) ───────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.svc-card {
  background:#fff; border-radius: var(--radius-card); overflow: hidden; text-align: center;
  border-bottom: 4px solid var(--c-primary); box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.svc-card .svc-img { aspect-ratio: 16/10; }
.svc-card .svc-img img { width:100%; height:100%; object-fit: cover; }
.svc-card .svc-body { padding: 24px 22px 28px; display:flex; flex-direction:column; flex:1; }
.svc-card h3 { font-size: 1.875rem; line-height: 1.2; margin-bottom: 10px; }  /* 30px */
.svc-card p { color: var(--c-text-mut); font-size: .92rem; margin-bottom: 20px; flex:1; }

/* Panel-Variante (beige, ohne Bild) */
.panels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.panel-card {
  background: var(--c-beige); border-bottom: 5px solid var(--c-primary); border-radius: var(--radius-card);
  text-align: center; padding: 44px 32px; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.panel-card h3 { font-size: 1.375rem; margin-bottom: 12px; }  /* 22px */
.panel-card p { color: var(--c-text); font-size: 1.125rem; margin-bottom: 22px; }  /* 18px */

/* ── Oranger Textblock ────────────────────────────────────── */
.orange-block { background: var(--c-primary); color:#fff; position: relative; overflow: hidden; }
/* abstrakte Grafik links (WP: technology-high.svg als ::before, contain, links) */
/* abstrakte Grafik STICKY im Hintergrund – nur der Text scrollt drüber (background-attachment: fixed) */
.orange-block::before { content:""; position:absolute; inset:0; background: url('/assets/images/technology-high.svg') no-repeat 0% 50% / contain fixed; opacity:.35; pointer-events:none; }
.orange-block .container { position: relative; z-index: 1; width: min(100% - 48px, 1280px); }
.orange-block h2 { color:#fff; }
/* Text nur rechte ~2/3 (WP: Text startet bei ~38% von links) */
.orange-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-left: 38%; }
.orange-block strong { color:#fff; }

/* ── Kontakt-Streifen ─────────────────────────────────────── */
.contact-strip { background: var(--c-brown); color:#fff; padding-block: 22px; }
.contact-strip .cs-inner { display:flex; gap: 40px; justify-content:center; flex-wrap: wrap; }
.contact-strip a { color:#fff; display:flex; align-items:center; gap: 12px; font-weight: var(--fw-bold); }
.contact-strip a:hover { color:#fff; opacity:.85; }
.cs-icon { width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.15); display:grid; place-items:center; }
.cs-icon svg { width:18px; height:18px; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background: #e0dbd2 url('/assets/images/page_bg.png') repeat fixed; padding-top: 56px; }  /* grau-beige Textur sticky */
.footer-main { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; padding-bottom: 24px; }
.footer-logo { width: 217px; height: auto; }
.footer-slogan { font-family: var(--font-hand); font-size: 2.5rem; color: var(--c-brown); line-height: 1.1; margin: 0 0 24px; }  /* 40px Annie, Taupe #6A645B */
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.site-footer h4 { color: var(--c-primary); font-size: 1.125rem; font-weight: 800; margin-bottom: 14px; }  /* 18px */
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer .foot-links a { color: var(--c-text); }
.site-footer .foot-links a:hover { color: var(--c-primary); }
.footer-bottom { border-top: 1px solid rgba(106,100,91,.35); margin-top: 24px; padding-top: 20px; text-align: left; }
.footer-bottom a { color: var(--c-brown); font-weight: 700; margin-right: 30px; font-size: 1rem; }
.footer-bottom a:hover { color: var(--c-primary); }

/* ── Inner-Page Hero (Leistungsseiten) ────────────────────── */
.page-hero { position: relative; min-height: 340px; display:flex; align-items:center; color:#fff; background-size:cover; background-position:center; }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { color:#fff; font-size: clamp(1.8rem,4vw,2.8rem); text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.page-hero.no-image { background: var(--c-heading); min-height: 220px; }

/* ── Section-Heading ──────────────────────────────────────── */
.sec-head { text-align:center; margin-bottom: 44px; }
.sec-head .script { font-family: var(--font-script); color: var(--c-primary); font-size: clamp(1.8rem, 5.2vw, 2.6rem); display:block; }
.sec-head h2 { font-size: 1.875rem; }  /* 30px */

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .intro-grid, .orange-grid, .panels-grid { grid-template-columns: 1fr; gap: 32px; }
  .orange-grid { margin-left: 0; }
  .orange-block::before { opacity: .25; background-position: center; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: 18px; }
  .footer-slogan { font-size: 2rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* Default: Drawer-Kopf/-Fuß + Schließen nur im Mobil-Drawer (Media-Query unten überschreibt) */
.nav-close, .nav-head, .nav-foot { display: none; }
@media (max-width: 820px) {
  :root { --section-y: 52px; }
  .nav-toggle { display: inline-grid; }
  /* Nur MOBIL: beim Scrollen dezente weiße Leiste, damit Text nicht hinter die Buttons läuft.
     Die schwebende Action-Bubble verschmilzt dann mit der Leiste. */
  .site-header.is-stuck { background: rgba(255,255,255,.96); box-shadow: 0 2px 16px rgba(0,0,0,.10); padding-block: 10px; }
  .site-header.is-stuck .header-actions { background: transparent; box-shadow: none; padding: 0; }
  /* Drawer muss ÜBER dem Backdrop liegen – Header-Stacking anheben, wenn Menü offen */
  body.nav-open .site-header { z-index: 400; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; height: 100dvh; width: min(86vw, 350px);
    display: flex; flex-direction: column; background:#fff; border-radius: 0;
    transform: translateX(100%); transition: transform var(--t); box-shadow: -10px 0 40px rgba(0,0,0,.2);
    padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 400;
  }
  .site-nav.open { transform: translateX(0); }
  /* Drawer-Kopf (WP-Stil): grau-beige, großes Logo links, × oben rechts – scrollt mit */
  /* Drawer-Kopf (WP-Stil): grau-beige, Hintergrund voll-bleed über die ganze Modal-Breite
     inkl. Safe-Area oben, klarer orangener Abschluss – wirkt bewusst gebaut statt „kaputt" */
  .nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: max(18px, env(safe-area-inset-top)) 18px 16px 20px;
    width: 100%; box-sizing: border-box; flex: none;
    background: #e0dbd2 url('/assets/images/page_bg.png') repeat;
    border-bottom: 3px solid var(--c-primary); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
  .nav-logo { height: 52px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 10px 20px 8px; }
  .site-nav > ul > li { padding: 0; }
  .site-nav > ul > li + li::before { display: none; }  /* Desktop-Trenner aus */
  .site-nav a { color: var(--c-heading)!important; text-shadow:none!important; display:flex; align-items:center;
    min-height: 50px; padding: 12px 8px; border-bottom: 1px solid var(--c-border); font-size: 1.15rem; }
  .has-sub > a::after { margin-left: auto; }
  .sub-menu { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; padding: 4px 0 10px; min-width:0; }
  .sub-menu a { min-height: 46px; padding: 10px 8px 10px 20px; font-size: 1.02rem; color: var(--c-text-mut)!important; border-bottom: 1px solid #f0ede7; }
  .sub-menu a:hover { color: var(--c-primary)!important; background: transparent; }
  /* Drawer-Fuß (WP-Stil): taupe/braun mit weißen Rechtstext-Links */
  .nav-foot { margin-top: auto; padding: 22px 22px 30px; border-top: none;
    background: var(--c-brown); display: flex; flex-wrap: wrap; gap: 12px 26px; }
  .nav-foot a { color: #fff !important; font-weight: 700; font-size: 1rem; min-height: 0; padding: 2px 0; border-bottom: none !important; display: inline; }
  .nav-foot a:hover { color: #fff !important; text-decoration: underline; }
  /* Schließen-Button (× oben rechts, ohne Kreis, wie WP) */
  .nav-close { display: flex; width: 46px; height: 46px; flex: none;
    align-items:center; justify-content:center; border:0; background: transparent; cursor:pointer; color: var(--c-heading); }
  .nav-close svg { width: 30px; height: 30px; }
  .header-actions { margin-left: auto; }  /* Bubble rechtsbündig */
  .features-grid { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr 1fr; }
  .nav-open { overflow: hidden; }
  .nav-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.5); opacity:0; visibility:hidden; transition: opacity var(--t); z-index: 250; }
  .nav-backdrop.show { opacity:1; visibility:visible; }
}
@media (max-width: 560px) {
  .cards-grid { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr; }
  /* Kartenbilder mobil kompakt statt formatfüllend (min-height/height:100% zurücksetzen) */
  .feature-card img { aspect-ratio: 16/10; height: auto; min-height: 0; }
  .svc-card .svc-img { aspect-ratio: 16/10; }
  .contact-strip .cs-inner { flex-direction: column; gap: 16px; align-items:center; }
  .brand img { width: 150px; }
  .footer-cols { grid-template-columns: 1fr; gap: 22px; }  /* Mobil einspaltig (Tablet bleibt 2-spaltig) */
  .footer-logo { width: 140px; }
  .hc-content p, .page-hero-sub { font-size: 1.15rem; }
  .hc-content .btn, .page-hero .btn { font-size: 1rem; }
  .hc-nav svg { width: 20px; height: 20px; }
  .stat-num { font-size: 1.7rem; }
  .stat-label { font-size: 1.6rem; }
}

/* ── Effekte (aus WP übernommen: Hover + sanftes Reveal) ───── */
.svc-card, .feature-card, .panel-card { transition: transform .3s ease, box-shadow .3s ease; }
.svc-card:hover, .feature-card:hover, .panel-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,.16); }
.svc-card .svc-img { overflow: hidden; }
.svc-card .svc-img img, .feature-card img { transition: transform .6s ease; }
.svc-card:hover .svc-img img, .feature-card:hover img { transform: scale(1.06); }
.icon-btn, .btn { transition: all .25s ease; }

/* Ganze Card klickbar (Stretched-Link – Button bleibt sichtbar & fokussierbar) */
.svc-card, .feature-card { position: relative; cursor: pointer; }
.svc-card .btn::after, .feature-card .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hc-slide.is-active .hc-bg { animation: none; }
  .hc-track { transition: none; }
}

/* ── Typewriter (Caveat, animiert wie WP) ─────────────────── */
.tw::after { content:'|'; margin-left:1px; color: var(--c-primary); animation: tw-blink 1s step-end infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }

/* ── Bild-Platzhalter (fehlende Fotos, z.B. Winterdienst-Schneeschaufel) ── */
.img-ph { width:100%; height:100%; min-height:200px; display:grid; place-items:center; text-align:center; padding:12px;
  background: repeating-linear-gradient(45deg,#e9e6e0,#e9e6e0 12px,#e3dfd8 12px,#e3dfd8 24px);
  color:#8a8478; font-size:.95rem; letter-spacing:.02em; }

/* ── Mobile-Anpassungen für neue Effekte ──────────────────── */
@media (max-width: 820px) {
  .hero-block { height: auto; display: block; }
  .hero { height: 58vh; min-height: 400px; max-height: 500px; flex: none; }
  .orange-block::before { background-attachment: scroll; background-size: contain; }
  .features, .bg-beige-tex, .bg-white-tex, .service-intro, .site-footer { background-attachment: scroll; }  /* fixed ist auf Mobile janky */
  /* Carousel-Pfeile in die untere Leiste – sonst liegen sie auf dem Hero-Text (Dennis 2026-07-13) */
  .hc-nav { top: auto; bottom: 12px; transform: none; width: 40px; height: 40px; }
  .hc-prev { left: 14px; right: auto; }
  .hc-next { right: 14px; left: auto; }
  .hc-dots { bottom: 26px; }
  /* Text bleibt vertikal zentriert (frei vom Header oben) + etwas Platz unten für die Pfeil-/Dot-Leiste */
  .hc-slide { padding-bottom: 62px; }
}

/* ============================================================
   Leistungsseiten (Service-Template)
   ============================================================ */
/* Page-Hero-Banner */
.page-hero { position: relative; min-height: 600px; display: flex; align-items: flex-end;
  padding: 130px 0 54px; color: #fff; background-size: cover; background-position: center; overflow: hidden; }
/* Leistungsseiten luftiger (wie WP) */
.service-intro.section, .service-text.section { padding-block: 110px; }
/* Dunkel-Overlay entfernt (Dennis 2026-07-13) – Lesbarkeit über kräftigen Text-Schatten */
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color:#fff; font-size: clamp(1.6rem, 5.6vw, 3.1rem); text-shadow: 0 2px 5px rgba(0,0,0,.6), 0 4px 22px rgba(0,0,0,.5); line-height:1.08; overflow-wrap: break-word; hyphens: manual; }
.page-hero-sub { color:#fff; font-size: 1.5625rem; font-weight: 400; margin: 8px 0 0; text-shadow: 0 1px 4px rgba(0,0,0,.6), 0 3px 16px rgba(0,0,0,.5); hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
.page-hero.no-image { background: var(--c-heading); min-height: 300px; }
/* Rechtsseiten: kompakter Bild-Hero (Richterhammer/Handwerk) statt grauer Fläche */
.page-hero.legal-hero { min-height: 320px; align-items: center; }
/* Unterseiten-Hero mobil kompakter (Dennis 2026-07-13) – MUSS nach den Basis-Regeln oben stehen,
   sonst überschreibt die spätere Basis-Regel (gleiche Spezifität) den Mobil-Wert wieder. */
@media (max-width: 640px) {
  .page-hero { min-height: 360px; padding: 92px 0 30px; }
  .page-hero.no-image { min-height: 220px; }
  .page-hero.legal-hero { min-height: 220px; }
  .page-hero-sub { font-size: 1.2rem; }
}

/* Orange Überschrift (wie Intro-H1 der Startseite) – responsiv, ruhiger als vorher */
.orange-head { color: var(--c-primary); font-size: clamp(1.5rem, 3.4vw + 0.5rem, 2rem); line-height: 1.15; margin-bottom: 16px; }

/* Intro 2-spaltig */
.intro-2col { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: start; }  /* Bild + Text oben ausgerichtet */
.intro-2col.no-img { grid-template-columns: 1fr; max-width: 920px; }
.intro-2col .intro-img img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); object-fit: cover; }
.service-intro .script { font-family: var(--font-script); color: var(--c-heading); font-size: clamp(1.8rem, 5.2vw, 2.6rem); line-height: 1; display: block; margin-bottom: 8px; }

/* Zentrierte Text-Sektion */
.service-text .orange-head { text-align: center; }

/* Orange Block mit weißer Karte + Checkliste */
.svc-orange { background: var(--c-primary); color: #fff; position: relative; overflow: hidden; }
.svc-orange::before { content:""; position:absolute; inset:0; background: url('/assets/images/technology-high.svg') no-repeat 0% 50% / contain fixed; opacity:.18; pointer-events:none; }
.svc-orange .container { position: relative; z-index: 1; width: min(100% - 48px, 1280px); }
.svc-orange-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; padding-block: 100px; }
.svc-card-white { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 40px 36px; }
.svc-card-white .orange-head { font-size: 1.6rem; margin-bottom: 14px; }
.svc-card-white p { color: var(--c-text); }
.check-list { list-style: none; display: grid; gap: 14px; }
.check-list li { position: relative; padding-left: 34px; color: #fff; line-height: 1.5; }
.check-list li::before { content: "›"; position: absolute; left: 6px; top: -2px; font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; }

@media (max-width: 900px) {
  .intro-2col { grid-template-columns: 1fr; gap: 28px; }
  .svc-orange-grid { grid-template-columns: 1fr; gap: 30px; }
  .svc-orange::before { background-attachment: scroll; }
}

/* ── Kennzahlen-Kacheln (Leistungsseiten) ─────────────────── */
.stats-band { background: #e0dbd2 url('/assets/images/page_bg.png') repeat fixed; }  /* grau-beige sticky wie WP */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.stat-tile { background:#fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); border-bottom: 5px solid var(--c-primary); padding: 42px 24px; }
.stat-icon { display: block; color: var(--c-primary); margin-bottom: 16px; }
.stat-icon svg { width: 52px; height: 52px; margin: 0 auto; display: block; }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: 2rem; line-height: 1.15; margin: 0 0 6px; }  /* prefix + Zahl in einer Zeile */
.stat-prefix { color: var(--c-heading); }
.stat-count { color: var(--c-primary); }
.stat-label { display: block; font-family: var(--font-script); font-size: 1.9rem; line-height: 1; color: var(--c-heading); }  /* Caveat */
@media (max-width: 820px) { .stats-grid { grid-template-columns: 1fr; gap: 28px; } .stats-band { background-attachment: scroll; } }

/* Leistungen-Übersicht: Karten auf orangem Hintergrund (wie WP) */
.svc-orange-plain { background: var(--c-primary); padding-block: 96px; position: relative; overflow: hidden; }
.svc-orange-plain::before { content:""; position:absolute; inset:0; background: url('/assets/images/technology-high.svg') no-repeat 0% 50% / contain fixed; opacity:.18; pointer-events:none; }
.svc-orange-plain .container { position: relative; z-index: 1; }
/* Cards-Block leicht nach rechts, damit die Abstrakt-Grafik links durchscheint */
.svc-orange-plain .cards-grid { max-width: 1160px; margin-left: auto; margin-right: 0; }
/* Übersicht-Karten: einheitliche, strukturierte Titel + Button unten */
.leist-card h3 { font-size: 1.4rem; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; margin-bottom: 14px; }
.leist-card .svc-body { justify-content: space-between; }
.leist-card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .svc-orange-plain::before { background-attachment: scroll; } .svc-orange-plain .cards-grid { max-width: none; margin: 0; } .leist-card h3 { min-height: 0; } }

/* ── Über uns / Team ──────────────────────────────────────── */
.script-center { text-align: center; }
.team-section { background: #e0dbd2 url('/assets/images/page_bg.png') repeat fixed; }  /* grau-beige sticky */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 780px; margin: 0 auto; }
.team-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.team-photo { aspect-ratio: 4/5; background: linear-gradient(135deg, var(--c-primary), #f0a45e); display: flex; align-items: center; justify-content: center; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-initials { font-family: var(--font-head); font-weight: 800; font-size: 4.5rem; color: rgba(255,255,255,.85); }
.team-body { padding: 26px 28px 30px; }
.team-body h3 { font-size: 1.5rem; margin-bottom: 4px; }
.team-pos { font-family: var(--font-script); font-size: 1.7rem; color: var(--c-primary); line-height: 1; margin-bottom: 14px; }
.team-bio { color: var(--c-text-mut); margin-bottom: 16px; }
.team-contact { list-style: none; display: grid; gap: 8px; }
.team-contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); font-size: .95rem; }
.team-contact a:hover { color: var(--c-primary); }
.team-contact svg { width: 18px; height: 18px; color: var(--c-primary); flex: none; }
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } .team-section { background-attachment: scroll; } }

/* ── Kontakt ──────────────────────────────────────────────── */
.kontakt-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.kontakt-info .script { font-family: var(--font-script); color: var(--c-heading); font-size: clamp(1.8rem, 5.2vw, 2.6rem); line-height: 1; display: block; margin-bottom: 8px; }
.kontakt-list { list-style: none; display: grid; gap: 22px; margin-top: 26px; }
.kontakt-list li { display: flex; gap: 16px; align-items: flex-start; }
.kontakt-list .ki-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.kontakt-list .ki-icon svg { width: 22px; height: 22px; color: #fff; }
.kontakt-list a { color: var(--c-text); }
.kontakt-list a:hover { color: var(--c-primary); }

.kontakt-form-wrap { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 34px 32px; }
.kontakt-form label { display: block; font-weight: 600; color: var(--c-heading); font-size: .95rem; margin-bottom: 16px; }
.kontakt-form input, .kontakt-form select, .kontakt-form textarea {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px; font: inherit; font-weight: 400;
  color: var(--c-text); background: #f7f5f1; border: 1px solid #ddd6ca; border-radius: 10px; transition: border-color .2s, box-shadow .2s;
}
.kontakt-form input:focus, .kontakt-form select:focus, .kontakt-form textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(232,131,39,.15); background: #fff;
}
.kontakt-form textarea { resize: vertical; min-height: 120px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* Pflichtfeld-Sternchen dezent + kleiner */
.kontakt-form .req { color: var(--c-primary); font-size: .72em; font-weight: 700; vertical-align: top; margin-left: 1px; }
.form-required-note { color: var(--c-text-mut); font-size: .82rem; margin: 6px 0 0; }

/* Kundenart-Auswahl (Privat / Firma / WEG) */
.ctype-row { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.ctype-label { font-weight: 600; color: var(--c-heading); font-size: .95rem; }
.ctype-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.kontakt-form .ctype-opt { display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px 15px; font-weight: 500; font-size: .95rem;
  border: 1px solid #ddd6ca; border-radius: 10px; background: #f7f5f1; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.kontakt-form .ctype-opt:hover { border-color: var(--c-primary); }
.kontakt-form .ctype-opt input { width: auto; margin: 0; accent-color: var(--c-primary); }
.kontakt-form .ctype-opt:has(input:checked) { border-color: var(--c-primary); background: #fff; box-shadow: 0 0 0 2px rgba(232,131,39,.18); }
.cond-group[hidden] { display: none; }
.form-check label { font-weight: 400; font-size: .9rem; color: var(--c-text-mut); display: block; position: relative; padding-left: 28px; line-height: 1.5; }
.form-check input { position: absolute; left: 0; top: 3px; width: auto; margin: 0; }
.form-check a { color: var(--c-primary); text-decoration: underline; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile zentriert + darf nie horizontal überlaufen (sonst verschiebt sich das Formular) */
.cf-turnstile { margin: 4px auto 18px; display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
.form-hint { font-size: .85rem; color: #a99; margin-bottom: 14px; }
.btn-submit { width: 100%; justify-content: center; }
.btn-submit:disabled { opacity: .6; cursor: wait; }
.form-status { margin-top: 14px; font-size: .95rem; min-height: 1.2em; }
.form-status.ok { color: #2e7d32; font-weight: 600; }
.form-status.err { color: #c62828; font-weight: 600; }
@media (max-width: 860px) {
  .kontakt-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  /* Einspaltig: Info + Formular sauber mittig, Karte nicht rechtsbündig.
     min-width:0 ist Pflicht – sonst dehnt ein breites Grid-Item (Script-Text) den 1fr-Track
     über die Containerbreite hinaus und die Formular-Karte ragt rechts raus. */
  .kontakt-grid { justify-items: center; }
  .kontakt-info, .kontakt-form-wrap { min-width: 0; max-width: 600px; margin-inline: auto; width: 100%; }
}

/* ── Google Maps (Klick-to-Load, vollflächig) ─────────────── */
.map-section { padding: 0; }
.map-section .container { max-width: none; width: 100%; padding: 0; }
.map-wrap { position: relative; overflow: hidden; background: #e0dbd2; min-height: 460px; }
.map-wrap iframe { display: block; width: 100%; height: 480px; border: 0; }
.map-consent { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; background: #e0dbd2 url('/assets/images/page_bg.png') repeat; }
.map-consent-title { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--c-heading); margin-bottom: 8px; }
.map-consent-text { max-width: 460px; color: var(--c-text-mut); margin: 0 auto 20px; font-size: .95rem; line-height: 1.55; }
.map-consent-alt { margin-top: 16px; font-size: .9rem; }
.map-consent-alt a { color: var(--c-primary); text-decoration: underline; }
.map-wrap.loaded { min-height: 0; }

/* ── Rechtsseiten (Impressum / Datenschutz) ──────────────── */
.legal-content .container { max-width: 860px; }
.legal-content h2 { font-size: 1.5rem; color: var(--c-heading); margin: 38px 0 12px; }
.legal-content h3 { font-size: 1.2rem; color: var(--c-heading); margin: 28px 0 8px; }
.legal-content h4 { font-size: 1.02rem; color: var(--c-heading); margin: 18px 0 6px; }
.legal-content p { margin-bottom: 14px; line-height: 1.7; color: var(--c-text); }
.legal-content ul { margin: 0 0 16px 22px; }
.legal-content li { margin-bottom: 6px; line-height: 1.6; }
.legal-content a { color: var(--c-primary); overflow-wrap: anywhere; }
.legal-content > .container > *:first-child { margin-top: 0; }

.sc-signature { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--c-border); }
.sc-accent { display: block; width: 32px; height: 3px; background: var(--c-primary); margin-bottom: 16px; }
.sc-label { color: var(--c-text-mut); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.sc-name { font-size: 1.05rem; }
.sc-name a { color: var(--c-heading); font-weight: 700; }
.sc-name a:hover { color: var(--c-primary); }

/* ── Barrierefreiheit: sichtbarer Tastatur-Fokus ──────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible, .icon-btn:focus-visible,
.nav-toggle:focus-visible, .nav-close:focus-visible, [tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--c-heading);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Auf dunklem/orangem Grund heller Fokusring für Sichtbarkeit */
.svc-orange a:focus-visible, .svc-orange .btn:focus-visible,
.orange-block a:focus-visible, .site-footer a:focus-visible,
.contact-strip a:focus-visible, .btn-outline-white:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(0,0,0,.35);
}
/* Formularfelder haben bereits einen sichtbaren Fokus (Rahmen + Glow) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Burger besser sichtbar über hellen Hero-Bildern */

/* Skip-Link (Tastatur: direkt zum Inhalt) */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 400; background: var(--c-heading); color: #fff;
  padding: 10px 16px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 16px; }

/* ── Scroll-Reveal (nur bei aktivem JS via html.js-reveal) ─── */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hc-slide.is-active .hc-bg { animation: none !important; }
}

/* ── Cookie-Consent ───────────────────────────────────────── */
.cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; background: #fff; box-shadow: 0 -6px 30px rgba(0,0,0,.18); border-top: 3px solid var(--c-primary); }
.cc-banner[hidden] { display: none; }
.cc-inner { display: flex; align-items: center; gap: 24px; padding: 20px 0; }
.cc-text { flex: 1 1 auto; }
.cc-text strong { display: block; color: var(--c-heading); font-size: 1.05rem; margin-bottom: 4px; }
.cc-text p { color: var(--c-text-mut); font-size: .92rem; margin: 0; line-height: 1.5; }
.cc-text a { color: var(--c-primary); text-decoration: underline; }
.cc-actions { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
/* Cookie-Buttons kompakter als die Standard-Script-Buttons (Banner + Einstellungen-Modal) */
.cc-actions .btn, .cc-modal-actions .btn { font-size: 1.15rem; padding: 6px 16px; border-width: 1.5px; }

.cc-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.55); }
.cc-modal[hidden] { display: none; }
.cc-box { background: #fff; border-radius: var(--radius-card); max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 32px 30px; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.cc-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 30px; line-height: 1; color: var(--c-text-mut); cursor: pointer; }
.cc-box h2 { font-size: 1.5rem; margin-bottom: 8px; }
.cc-intro { color: var(--c-text-mut); margin-bottom: 20px; }
.cc-cat { border: 1px solid var(--c-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cc-cat-title { font-weight: 700; color: var(--c-heading); }
.cc-cat p { color: var(--c-text-mut); font-size: .9rem; margin: 0; line-height: 1.5; }
.cc-badge { font-size: .78rem; color: var(--c-primary); font-weight: 700; white-space: nowrap; }
.cc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
body.cc-lock { overflow: hidden; }

.cc-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex: none; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-switch span { position: absolute; inset: 0; background: #cfcabf; border-radius: 20px; transition: background .2s; }
.cc-switch span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cc-switch input:checked + span { background: var(--c-primary); }
.cc-switch input:checked + span::before { transform: translateX(22px); }
.cc-switch input:focus-visible + span { outline: 3px solid var(--c-heading); outline-offset: 2px; }

@media (max-width: 760px) {
  .cc-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cc-actions .btn { flex: 1 1 auto; text-align: center; }
}