/* ==========================================================================
   KRUMMREY — Elementor-Port des "Editorial Craft" Designs (version2.html)
   Lokale Fonts (DSGVO), Klassen werden Elementor-Elementen zugewiesen.
   ========================================================================== */

/* ---- Lokale Fonts ------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-italic-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink:      #1B1410;
  --ink-2:    #251C16;
  --ink-3:    #322620;
  --cream:    #F4EEE5;
  --cream-2:  #ECE4D8;
  --paper:    #FAF6F0;
  --red:      #df1f2c;
  --red-deep: #b01623;
  --teal:     #48b3a7;
  --teal-deep:#2a736b;
  --green:    #417d53;
  --sub:      #7A6A5C;
  --sub-l:    #B9A795;
  --line:     rgba(27, 20, 16, .14);
  --line-l:   rgba(244, 238, 229, .16);
  --serif: 'Fraunces', 'Times New Roman', Times, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --e-out: cubic-bezier(.19, 1, .22, 1);
  --e-io:  cubic-bezier(.77, 0, .175, 1);
}

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px; box-shadow: 0 0 0 2px #fff !important; border-radius: 4px; }

/* Elementor-Widget-Titel erben vollständig von der Wrapper-Klasse */
.elementor-heading-title { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; }
.elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ---- Grain / Progress / Cursor / Loader (DOM via JS erzeugt) ------------ */
.k-grain {
  position: fixed; inset: -50%; z-index: 2000; pointer-events: none;
  width: 200%; height: 200%; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.m .k-grain { animation: k-grain 7s steps(10) infinite; }
@keyframes k-grain {
  0%,100% { transform: translate(0,0) } 10% { transform: translate(-4%,-6%) }
  30% { transform: translate(5%,-3%) } 50% { transform: translate(-3%,5%) }
  70% { transform: translate(6%,2%) } 90% { transform: translate(-5%,4%) }
}
.k-progress { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 1500; pointer-events: none; }
.k-progress b { display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.k-loader { position: fixed; inset: 0; z-index: 2500; display: none; }
html.m .k-loader { display: block; }
.k-loader .panel { position: absolute; inset: 0; background: var(--ink); }
.k-loader .core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.k-loader .word { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); color: var(--cream); display: flex; overflow: hidden; }
.k-loader .word span { display: inline-block; transform: translateY(120%); }
.k-loader .count { font-size: 13px; font-weight: 600; letter-spacing: .3em; color: var(--sub-l); }

/* ==========================================================================
   HEADER (Theme-Builder-Template)
   ========================================================================== */
[data-elementor-type="header"] {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: transform .5s var(--e-out), background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
html.m [data-elementor-type="header"]:not(.is-in) { transform: translateY(-110%); }
[data-elementor-type="header"].is-solid {
  background: rgba(27, 20, 16, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--line-l);
}
.hd-in { display: flex; align-items: center; gap: 28px; padding: 18px clamp(20px, 4vw, 56px) !important; max-width: 1680px; margin-inline: auto; }
.hd-logo img { height: 44px; width: auto; filter: brightness(0) invert(1) opacity(.96); }

/* Pro Nav-Menu restylen */
.hd-nav { margin-left: auto; }
.hd-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
  position: relative; font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: .01em; padding: 10px 14px; color: rgba(244, 238, 229, .78);
  transition: color .25s; background: none;
}
.hd-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px;
  background: var(--red); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--e-out);
}
.hd-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover { color: var(--cream); }
.hd-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.hd-nav .elementor-nav-menu--main .current-menu-item > a.elementor-item,
.hd-nav .elementor-nav-menu--main .current-page-ancestor > a.elementor-item { color: var(--cream); }
.hd-nav .elementor-nav-menu--main .current-menu-item > a.elementor-item::after,
.hd-nav .elementor-nav-menu--main .current-page-ancestor > a.elementor-item::after { transform: scaleX(1); }
.hd-nav .elementor-menu-toggle { color: var(--cream); border: 0; background: none; }
.hd-nav .elementor-menu-toggle svg { fill: var(--cream); width: 26px; height: 26px; }
.hd-nav nav.elementor-nav-menu--dropdown { background: var(--ink-2); border-radius: 14px; padding: 10px; }
.hd-nav .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item { color: var(--cream); font-weight: 600; padding: 14px 18px; }

.hd-phone .elementor-icon-list-item a,
.hd-phone .elementor-icon-list-text { font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--cream) !important; white-space: nowrap; }
.hd-phone .elementor-icon-list-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--teal); }

/* Header-CTA (Button-Widget) */
.hd-cta .elementor-button {
  background: var(--red); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  padding: 13px 24px; border-radius: 100px; position: relative; overflow: hidden; isolation: isolate;
  transition: none; border: 0;
}
.hd-cta .elementor-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-3);
  border-radius: inherit; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--e-out);
}
.hd-cta .elementor-button:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.hd-cta .elementor-button:hover { color: #fff; background: var(--red); }

/* ==========================================================================
   TYPO-KLASSEN
   ========================================================================== */
.kicker .elementor-heading-title, .kicker.k-html {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
}
.kicker .elementor-heading-title::before, .kicker.k-html::before {
  content: ""; width: 34px; height: 1.5px; background: currentColor; opacity: .8;
}
.kicker.teal .elementor-heading-title, .kicker.teal.k-html { color: var(--teal); }
.kicker.red .elementor-heading-title, .kicker.red.k-html { color: var(--red); }
.kicker.sand .elementor-heading-title, .kicker.sand.k-html { color: var(--sub-l); }

.d1 { font-family: var(--serif); font-weight: 380; font-variation-settings: "opsz" 110;
  font-size: clamp(2.9rem, 7.4vw, 6.6rem); line-height: 1.01; letter-spacing: -.022em; }
.d2 { font-family: var(--serif); font-weight: 420;
  font-size: clamp(2.1rem, 4.2vw, 3.7rem); line-height: 1.06; letter-spacing: -.016em; }
.d3 { font-family: var(--serif); font-weight: 450; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.18; }
.d1 em, .d2 em { font-style: italic; font-weight: 340; }
.d1 .elementor-heading-title, .d2 .elementor-heading-title, .d3 .elementor-heading-title { text-wrap: balance; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; }
.on-cream-body { color: #574a3e; }
.on-dark-body { color: var(--sub-l); }

.mask { overflow: hidden; display: block; }
.mask > span { display: block; }
html.m .mask > span { transform: translateY(115%); will-change: transform; }

/* ==========================================================================
   BUTTONS (Elementor Button-Widget restylen)
   ========================================================================== */
.btn-el .elementor-button {
  position: relative; display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-weight: 700; font-size: 15.5px; padding: 19px 34px; border-radius: 100px;
  overflow: hidden; isolation: isolate; transition: color .35s; border: 0; background: none;
}
.btn-el .elementor-button .elementor-button-content-wrapper { gap: 11px; align-items: center; }
.btn-el .elementor-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; transition: transform .35s var(--e-out); }
.btn-el .elementor-button:hover svg { transform: translateX(4px); }
.btn-el .elementor-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--e-out);
}
.btn-el .elementor-button:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.btn-el.red .elementor-button { background: var(--red); color: #fff; }
.btn-el.red .elementor-button::before { background: var(--ink-3); }
.btn-el.ghost-l .elementor-button { border: 1.5px solid rgba(244,238,229,.35); color: var(--cream); }
.btn-el.ghost-l .elementor-button::before { background: var(--cream); }
.btn-el.ghost-l .elementor-button:hover { color: var(--ink); }
.btn-el.ghost-d .elementor-button { border: 1.5px solid rgba(27,20,16,.3); color: var(--ink); }
.btn-el.ghost-d .elementor-button::before { background: var(--ink); }
.btn-el.ghost-d .elementor-button:hover { color: var(--cream); }
.btn-el.cream .elementor-button { background: var(--cream); color: var(--ink); }
.btn-el.cream .elementor-button::before { background: var(--red); }
.btn-el.cream .elementor-button:hover { color: #fff; }

/* ==========================================================================
   PLACEHOLDER-SLOTS (bis echte Bilder eingesetzt werden)
   ========================================================================== */
.ph { position: relative; background: rgba(0,0,0,.04); }
.ph::before {
  content: ""; position: absolute; inset: 0; border: 1.5px dashed rgba(0,0,0,.25); border-radius: inherit;
}
.ph::after {
  content: attr(data-ph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center; font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: rgba(0,0,0,.55); line-height: 1.3;
}
.ph-dark { background: rgba(255,255,255,.03); }
.ph-dark::before { border-color: rgba(244,238,229,.22); }
.ph-dark::after { color: rgba(244,238,229,.5); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { min-height: 100svh; display: flex !important; align-items: flex-end; position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg .hb-in { position: absolute; inset: -8% 0; will-change: transform; background: var(--ink-2); }
html.m .hero-bg .hb-in { transform: scale(1.14); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27,20,16,.62) 0%, rgba(27,20,16,.18) 34%, rgba(27,20,16,.52) 70%, rgba(27,20,16,.97) 100%),
    radial-gradient(110% 80% at 18% 78%, rgba(27,20,16,.55) 0%, transparent 55%);
}
.hero-in { position: relative; z-index: 2; width: 100%; padding: 150px clamp(20px, 4vw, 56px) clamp(56px, 7vh, 96px) !important; max-width: 1380px; margin-inline: auto; }
.hero-kicker { margin-bottom: 26px !important; }
.hero-h1 { color: var(--cream); max-width: 13ch; }
.hero-h1 .accent { color: var(--red); font-style: italic; font-weight: 340; }
.hero-foot { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: clamp(34px, 4.5vh, 56px) !important; flex-wrap: wrap; }
.hero-sub { max-width: 46ch; color: rgba(244,238,229,.85); }
.hero-sub b, .hero-sub strong { color: var(--cream); }
.hero-ctas { display: flex !important; flex-direction: row !important; gap: 14px; flex-wrap: wrap; margin-top: 28px !important; }
.hero-badges { display: flex !important; flex-direction: column; align-items: flex-end; gap: 14px; }
.hero-badges .elementor-icon-list-items { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hero-badges .elementor-icon-list-item {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600;
  color: rgba(244,238,229,.82); border: 1px solid var(--line-l); border-radius: 100px;
  padding: 9px 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(27,20,16,.25);
}
.hero-badges .elementor-icon-list-text { color: rgba(244,238,229,.82); font-family: var(--sans); }
.hero-badges .elementor-icon-list-icon svg { width: 15px; height: 15px; fill: none; stroke: var(--teal); }
.hero-scrolldown {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-scrolldown .elementor-heading-title {
  font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(244,238,229,.55);
}
.hero-scrolldown::after {
  content: ""; display: block; width: 1.5px; height: 52px;
  background: linear-gradient(to bottom, transparent, var(--red));
}
.hero-year {
  position: absolute; right: clamp(8px, 3vw, 56px); top: 16vh; z-index: 2; pointer-events: none; user-select: none;
}
.hero-year .elementor-heading-title {
  font-family: var(--serif); font-weight: 320; font-size: clamp(5rem, 14vw, 13rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(244,238,229,.22);
}
@media (max-width: 1024px) { .hero-scrolldown { display: none; } .hero-year { display: none; } .hero-badges { display: none !important; } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.mq { background: var(--red); color: var(--cream); overflow: hidden; position: relative; z-index: 4; }
.mq-in { display: flex; width: max-content; }
html.m .mq-in { animation: k-mq 26s linear infinite; }
@keyframes k-mq { to { transform: translateX(-50%); } }
.mq span {
  display: inline-flex; align-items: center; padding: 17px 0;
  font-family: var(--serif); font-style: italic; font-weight: 380;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem); white-space: nowrap;
}
.mq span::after { content: "✺"; font-style: normal; font-size: .8em; margin: 0 30px; opacity: .65; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats { background: var(--ink); padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 56px) clamp(56px, 7vw, 96px) !important; border-bottom: 1px solid var(--line-l); }
.stats-grid { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 36px 28px; max-width: 1380px; margin-inline: auto; width: 100%; }
.stat { border-left: 1px solid var(--line-l); padding-left: 24px; display: block !important; }
.stat .elementor-counter { text-align: left; }
.stat .elementor-counter-number-wrapper {
  display: inline-flex; justify-content: flex-start; align-items: baseline;
  font-family: var(--serif); font-weight: 350; font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: 1; color: var(--cream); letter-spacing: -.02em;
}
.stat .elementor-counter-number-suffix { font-size: .45em; color: var(--red); font-style: italic; margin-left: 2px; align-self: flex-start; margin-top: .18em; }
.stat .elementor-counter-title { margin-top: 12px; font-size: 14px; color: var(--sub-l); max-width: 18ch; line-height: 1.45; text-align: left; }
@media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }

/* ==========================================================================
   SHELLS + SEKTIONEN
   ========================================================================== */
.shell {
  background: var(--cream); color: var(--ink);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  position: relative; z-index: 5; margin-top: -2px;
}
.shell-dark {
  background: var(--ink); color: var(--cream);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  position: relative; z-index: 6; margin-top: clamp(-56px, -4vw, -28px);
}
.sec { padding: clamp(84px, 10vw, 168px) clamp(20px, 4vw, 56px) !important; position: relative; }
.sec-tight-top { padding-top: 0 !important; }
.wrapc { max-width: 1380px; margin-inline: auto; width: 100%; }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro-grid { display: grid !important; grid-template-columns: 1.02fr .98fr; gap: clamp(48px, 6vw, 110px); align-items: center; max-width: 1380px; margin-inline: auto; width: 100%; }
.intro-copy > .elementor-element { margin-bottom: 0; }
.intro-copy .d2 { margin-top: 22px !important; color: var(--ink); }
.intro-copy .lead { margin-top: 26px !important; }
.intro-copy .lead + .lead { margin-top: 16px !important; }
.intro-sig .elementor-heading-title { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink); font-weight: 400; }
.intro-sig { margin-top: 30px !important; }
.intro-ctas { display: flex !important; flex-direction: row !important; gap: 14px; flex-wrap: wrap; margin-top: 34px !important; }
.intro-vis { position: relative; aspect-ratio: .92; display: block !important; }
.iv-a, .iv-b { position: absolute; border-radius: 22px; overflow: hidden; box-shadow: 0 36px 80px -28px rgba(27,20,16,.45); }
.iv-a { inset: 0 16% 18% 0; }
.iv-b { right: 0; bottom: 0; width: 56%; aspect-ratio: 4/3.1; border: 8px solid var(--cream); }
.iv-card {
  position: absolute; left: -8px; top: 26px; z-index: 3; background: var(--ink); color: var(--cream);
  padding: 20px 24px; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(27,20,16,.5);
  display: flex; align-items: center; gap: 16px;
}
.iv-card .yr { font-family: var(--serif); font-size: 2.5rem; font-weight: 350; line-height: 1; }
.iv-card .tx { font-size: 12.5px; color: var(--sub-l); max-width: 11ch; line-height: 1.4; }
.iv-ring { position: absolute; right: 6%; top: -34px; z-index: 3; width: 110px; height: 110px; }
html.m .iv-ring { animation: k-spin 14s linear infinite; }
@keyframes k-spin { to { transform: rotate(360deg) } }
.iv-ring svg { width: 100%; height: 100%; }
.iv-ring text { font-family: var(--sans); font-size: 9.2px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; fill: var(--ink); }
@media (max-width: 1024px) { .intro-grid { grid-template-columns: 1fr; } .intro-vis { max-width: 520px; } }

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */
.sv-head { display: flex !important; flex-direction: row !important; align-items: flex-end; justify-content: space-between; gap: 36px; flex-wrap: wrap; max-width: 1380px; margin-inline: auto; width: 100%; }
.sv-head .d2 { margin-top: 22px !important; max-width: 17ch; }
.sv-head-p { max-width: 40ch; }
.sv-grid { margin-top: clamp(44px, 5vw, 72px) !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1380px; margin-inline: auto; width: 100%; }
.sv {
  position: relative; background: var(--paper); border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .4s; display: block !important;
}
.sv:hover { box-shadow: 0 40px 90px -32px rgba(27,20,16,.35); }
.sv-media { position: relative; aspect-ratio: 16/10.5; overflow: hidden; background: var(--cream-2); }
.sv-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(27,20,16,.78); color: var(--cream); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 100px; display: inline-flex; align-items: center; gap: 7px;
}
.sv-tag svg { width: 13px; height: 13px; fill: none; stroke: var(--teal); }
.sv-tag.gn svg { stroke: #7CC394; }
.sv-body { padding: 26px 26px 28px; }
.sv-body .sv-h3 .elementor-heading-title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; color: var(--ink); }
.sv-body .sv-p { margin-top: 12px !important; font-size: 15px; color: #574a3e; line-height: 1.6; }
.sv-list { margin-top: 16px !important; }
.sv-list .elementor-icon-list-items { display: grid; gap: 8px; }
.sv-list .elementor-icon-list-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #463b30; }
.sv-list .elementor-icon-list-text { font-size: 14px; color: #463b30; font-family: var(--sans); }
.sv-list .elementor-icon-list-icon svg { width: 15px; height: 15px; fill: none; stroke: var(--green); margin-top: 3px; }
.sv-arrow {
  position: absolute; right: 20px; bottom: 20px; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s, transform .4s var(--e-out);
}
.sv-arrow svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); transition: stroke .3s; }
.sv:hover .sv-arrow { background: var(--red); border-color: var(--red); transform: rotate(-45deg); }
.sv:hover .sv-arrow svg { stroke: #fff; }
@media (max-width: 1024px) { .sv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .sv-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   REFERENZEN
   ========================================================================== */
.refs { overflow: hidden; }
.refs-head { padding: clamp(84px, 10vw, 150px) clamp(20px, 4vw, 56px) 0 !important; display: flex !important; flex-direction: row !important; align-items: flex-end; justify-content: space-between; gap: 36px; flex-wrap: wrap; max-width: 1380px; margin-inline: auto; width: 100%; }
.refs-head .d2 { margin-top: 22px !important; color: var(--cream); max-width: 16ch; }
.refs-head-r { display: flex !important; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 460px; }
.refs-prog { display: flex; align-items: center; gap: 16px; min-width: 220px; width: 100%; }
.refs-prog .bar { flex: 1; height: 1.5px; background: var(--line-l); position: relative; overflow: hidden; }
.refs-prog .bar b { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.refs-prog .ct { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--sub-l); white-space: nowrap; }
.refs-stage { position: relative; }
.refs-track {
  display: flex !important; flex-direction: row !important; gap: clamp(18px, 2.5vw, 34px); align-items: stretch;
  padding: clamp(40px, 5vw, 70px) clamp(20px, 4vw, 56px) clamp(84px, 9vw, 140px) !important;
  width: max-content !important; max-width: none !important;
}
.ref {
  position: relative; width: clamp(300px, 38vw, 560px); border-radius: 24px; overflow: hidden;
  background: var(--ink-2); flex: 0 0 auto !important; border: 1px solid var(--line-l); display: block !important;
}
.ref-media { aspect-ratio: 4/3.2; position: relative; overflow: hidden; background: var(--ink-3); }
.ref-num {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 1.5rem;
  color: rgba(244,238,229,.85); text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.ref-cat {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(244,238,229,.92); color: var(--ink); padding: 8px 14px; border-radius: 100px;
}
.ref-body { padding: 24px 26px 28px; }
.ref-body .loc { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--teal); }
.ref-body .loc svg { width: 13px; height: 13px; fill: none; stroke: currentColor; }
.ref-body .ref-h3 .elementor-heading-title { margin-top: 10px; font-family: var(--serif); font-weight: 450; font-size: 1.45rem; letter-spacing: -.01em; color: var(--cream); }
.ref-body .ref-p { margin-top: 9px !important; font-size: 14.5px; color: var(--sub-l); line-height: 1.55; max-width: 44ch; }
.refs-hint { display: none; }
@media (max-width: 760px) {
  .refs-track { width: auto !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .ref { scroll-snap-align: center; width: 84vw; }
  .refs-prog { display: none; }
}

/* ==========================================================================
   BAND
   ========================================================================== */
.band { position: relative; min-height: 84vh; display: flex !important; align-items: center; overflow: hidden; padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 56px) !important; }
.band-bg { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; background: var(--ink-2); }
.band-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(27,20,16,.93) 4%, rgba(27,20,16,.62) 52%, rgba(27,20,16,.34) 100%); }
.band-in { position: relative; z-index: 2; width: 100%; max-width: 1380px; margin-inline: auto; }
.band-quote { max-width: 21ch; color: var(--cream); margin-top: 24px !important; }
.band-quote em { color: var(--red); }
.band-att { margin-top: 28px !important; }
.band-att .elementor-heading-title { display: flex; align-items: center; gap: 16px; color: var(--sub-l); font-size: 14.5px; font-family: var(--sans); font-weight: 400; }
.band-att .elementor-heading-title::before { content: ""; width: 44px; height: 1.5px; background: var(--red); flex: 0 0 auto; }
.band-stats { display: flex !important; flex-direction: row !important; gap: clamp(36px, 5vw, 72px); margin-top: clamp(40px, 5vh, 64px) !important; flex-wrap: wrap; }
.band-stat { display: block !important; }
.band-stat .n .elementor-heading-title { font-family: var(--serif); font-weight: 350; font-size: clamp(2rem, 3.4vw, 3rem); color: var(--cream); line-height: 1; }
.band-stat .n em { font-style: italic; color: var(--teal); }
.band-stat .l { font-size: 13.5px; color: var(--sub-l); margin-top: 8px !important; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.tl-head { text-align: center; max-width: 720px; margin-inline: auto !important; display: block !important; }
.tl-head .kicker .elementor-heading-title { justify-content: center; }
.tl-head .d2 { margin-top: 22px !important; }
.tl-head .tl-lead { margin-top: 18px !important; }
.tl { position: relative; max-width: 900px; margin: clamp(20px, 2.5vw, 36px) auto 0 !important; display: block !important; }
.tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); background: var(--line); }
.tl-line b { display: block; width: 100%; height: 100%; background: var(--red); transform: scaleY(0); transform-origin: 0 0; }
.tl-it { position: relative; width: 50%; padding: 0 clamp(20px, 2.4vw, 36px) clamp(10px, 1.4vw, 18px) !important; display: block !important; }
.tl-it:nth-of-type(odd) { left: 0; text-align: right; }
.tl-it:nth-of-type(even) { left: 50%; }
.tl-dot {
  position: absolute; top: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cream); border: 3.5px solid var(--red); box-shadow: 0 0 0 5px var(--cream);
}
.tl-it:nth-of-type(odd) .tl-dot { right: -7.5px; }
.tl-it:nth-of-type(even) .tl-dot { left: -7.5px; }
.tl-yr .elementor-heading-title { font-family: var(--serif); font-style: italic; font-weight: 380; font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--red); line-height: 1; }
.tl-h4 { margin-top: 3px !important; }
.tl-h4 .elementor-heading-title { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--ink); }
.tl-p { margin-top: 5px !important; font-size: 14px; color: #574a3e; line-height: 1.55; }
.tl-it:nth-of-type(odd) .tl-p { margin-left: auto; }
.tl-p { max-width: 40ch; display: inline-block; }
@media (max-width: 760px) {
  .tl-line { left: 8px; }
  .tl-it { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 44px 36px !important; }
  .tl-it .tl-dot { left: 1px !important; right: auto !important; }
  .tl-it:nth-of-type(odd) .tl-p { margin-left: 0; }
}

/* ==========================================================================
   FÖRDERUNG
   ========================================================================== */
.fd {
  position: relative; border-radius: 28px; overflow: hidden; background: var(--green); color: #fff;
  display: grid !important; grid-template-columns: 1.35fr 1fr; align-items: center;
  max-width: 1380px; margin-inline: auto !important; width: 100%;
}
.fd-tx { padding: clamp(40px, 5vw, 72px) !important; display: block !important; }
.fd-tx .kicker .elementor-heading-title { color: #fff; }
.fd-tx .d2 { color: #fff; margin-top: 20px !important; max-width: 16ch; }
.fd-tx .fd-p { margin-top: 18px !important; color: #fff; max-width: 52ch; }
.fd-tx .btn-el { margin-top: 30px !important; }
.fd-num {
  align-self: stretch; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #3F764E, #2C523A); padding: 48px 24px !important; text-align: center;
  position: relative; overflow: hidden;
}
.fd-num::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.fd-big .elementor-heading-title { font-family: var(--serif); font-weight: 320; font-size: clamp(4.4rem, 8.5vw, 8rem); line-height: 1; color: #fff; }
.fd-big .elementor-heading-title em { font-style: italic; font-size: .55em; }
.fd-sm .elementor-heading-title { font-size: 13.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-top: 12px; font-family: var(--sans); }
@media (max-width: 1024px) { .fd { grid-template-columns: 1fr; } .fd-num { min-height: 220px; } }

/* ==========================================================================
   ABLAUF
   ========================================================================== */
.steps-wrap { max-width: 1380px; margin-inline: auto; width: 100%; display: block !important; }
.steps-wrap .d2 { margin-top: 22px !important; max-width: 18ch; }
.steps { margin-top: clamp(48px, 6vw, 84px) !important; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.step { padding: 34px 28px 12px !important; border-right: 1px solid var(--line); position: relative; display: block !important; }
.step:first-of-type { padding-left: 0 !important; }
.step:last-of-type { border-right: 0; }
.step .nr .elementor-heading-title {
  font-family: var(--serif); font-style: italic; font-weight: 320;
  font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1.2px var(--red);
}
.step .st-h4 { margin-top: 20px !important; }
.step .st-h4 .elementor-heading-title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink); }
.step .st-p { margin-top: 10px !important; font-size: 14.5px; color: #574a3e; line-height: 1.6; }
@media (max-width: 1024px) { .steps { grid-template-columns: 1fr 1fr; border-top: 0; } .step { border-top: 1px solid var(--line); border-right: 0; padding-left: 0 !important; } }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   STIMMEN
   ========================================================================== */
.qs-wrap { max-width: 1380px; margin-inline: auto; width: 100%; display: block !important; }
.qs-wrap .d2 { margin-top: 22px !important; max-width: 20ch; }
.qs { margin-top: clamp(44px, 5vw, 72px) !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.q {
  background: var(--ink-2); border: 1px solid var(--line-l); border-radius: 22px;
  padding: 32px 30px !important; display: flex !important; flex-direction: column; position: relative; overflow: hidden;
}
.q::before {
  content: "„"; position: absolute; top: -14px; right: 18px;
  font-family: var(--serif); font-size: 7rem; line-height: 1; color: rgba(223,31,44,.22);
}
.q .stars { display: flex; gap: 4px; color: #E5A93C; }
.q .stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.q .q-text { margin-top: 18px !important; font-family: var(--serif); font-weight: 380; font-size: 1.22rem; line-height: 1.45; color: var(--cream); }
.q .who { margin-top: auto !important; padding-top: 26px; display: flex; align-items: center; gap: 13px; }
.q .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--ink-3); flex: 0 0 auto; }
.q .who b { display: block; font-size: 14.5px; color: var(--cream); }
.q .who span { font-size: 12.5px; color: var(--sub-l); }
@media (max-width: 1024px) { .qs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .qs { grid-template-columns: 1fr; } }

/* ==========================================================================
   GALERIE BENTO
   ========================================================================== */
.bn { margin-top: clamp(44px, 5vw, 72px) !important; display: grid !important; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 16px; max-width: 1380px; margin-inline: auto; width: 100%; }
.bn .cell { position: relative; border-radius: 20px; overflow: hidden; display: block !important; background: var(--ink-2); }
.bn .cell .pv { position: absolute; inset: -14% 0; will-change: transform; }
.bn .tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 2; color: #fff; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px; text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.bn .tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
.bn .big { grid-column: span 2; grid-row: span 2; }
.bn .wide { grid-column: span 2; }
.bn .tall { grid-row: span 2; }
@media (max-width: 760px) {
  /* Einspaltig: das 2-Spalten-Mosaik liess bei ungerader Zellenzahl
     leere Loecher neben einzelnen Bildern */
  .bn { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .bn .big, .bn .wide, .bn .tall, .bn .cell { grid-column: auto; grid-row: auto; }
}

/* ==========================================================================
   TEAM
   ========================================================================== */
/* Falls der Editor den Container auf "boxed" stellt, wandern die Kinder
   in einen Inner-Wrapper — display:contents reicht sie ans Grid durch. */
.team-grid > .e-con-inner { display: contents; }
.team-grid { display: grid !important; grid-template-columns: .95fr 1.05fr; gap: clamp(48px, 6vw, 100px); align-items: center; max-width: 1380px; margin-inline: auto; width: 100%; }
.team-copy { display: block !important; }
.team-copy .d2 { margin-top: 22px !important; }
.team-copy .lead { margin-top: 22px !important; }
.team-nums { margin-top: 36px !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.tn { padding: 20px 14px 20px 0 !important; border-bottom: 1px solid var(--line); display: block !important; }
@media (max-width: 600px) {
  .team-nums { grid-template-columns: 1fr; }
}
.tn .elementor-counter { display: flex; align-items: baseline; gap: 14px; }
.tn .elementor-counter-number-wrapper { font-family: var(--serif); font-weight: 350; font-size: 2.5rem; color: var(--red); line-height: 1; min-width: 58px; justify-content: flex-start; flex: 0 0 auto; }
.tn .elementor-counter-title { font-size: 14px; color: #574a3e; text-align: left; font-family: var(--sans); }
.team-photo { border-radius: 26px; overflow: hidden; aspect-ratio: 5/4.1; box-shadow: 0 44px 90px -34px rgba(27,20,16,.4); position: relative; background: var(--cream-2); display: block !important; }
.team-photo .pv { position: absolute; inset: -10% 0; }
@media (max-width: 1024px) { .team-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.ct-grid { display: grid !important; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 6vw, 100px); align-items: start; max-width: 1380px; margin-inline: auto; width: 100%; }
.ct-info { display: block !important; }
.ct-info .d2 { margin-top: 22px !important; color: var(--cream); }
.ct-info .lead { margin: 20px 0 36px !important; }
.ct-rows .elementor-icon-list-items { display: block; }
.ct-rows .elementor-icon-list-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line-l); }
.ct-rows .elementor-icon-list-item:last-child { border-bottom: 1px solid var(--line-l); }
.ct-rows .elementor-icon-list-icon {
  width: 44px; height: 44px; border-radius: 12px; background: rgba(72,179,167,.14);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ct-rows .elementor-icon-list-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--teal); }
.ct-rows .elementor-icon-list-text { font-family: var(--sans); font-size: 14px; color: var(--sub-l); line-height: 1.5; }
.ct-rows .elementor-icon-list-text b { display: block; font-size: 15.5px; color: var(--cream); }

/* Formular-Karte (Elementor Pro Form) */
.form-card { background: var(--cream); color: var(--ink); border-radius: 24px; padding: clamp(28px, 3vw, 44px) !important; display: block !important; }
.form-card .fc-h3 .elementor-heading-title { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; color: var(--ink); }
.form-card .fc-sub { margin-top: 8px !important; font-size: 14px; color: #574a3e; }
.form-card .k-form { margin-top: 10px !important; }
.k-form .elementor-form-fields-wrapper { gap: 18px 16px; }
.k-form .elementor-field-group { margin-bottom: 0; }
.k-form label.elementor-field-label {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #574a3e; margin-bottom: 8px;
}
.k-form .elementor-field-textual {
  font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px;
  transition: border-color .25s, box-shadow .25s;
}
.k-form .elementor-field-textual::placeholder { color: #7a6a5c; }
.k-form .elementor-field-textual:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(72,179,167,.22); outline: none; }
.k-form .elementor-button[type="submit"] {
  width: 100%; justify-content: center; background: var(--red); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 15.5px; padding: 19px 34px; border-radius: 100px;
  position: relative; overflow: hidden; isolation: isolate; border: 0; transition: color .35s;
}
.k-form .elementor-button[type="submit"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-3); border-radius: inherit;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--e-out);
}
.k-form .elementor-button[type="submit"]:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.k-form .elementor-message.elementor-message-success { color: var(--green); font-weight: 600; }
.form-note { margin-top: 14px !important; font-size: 12.5px; color: #6e5f52; text-align: center; }
@media (max-width: 1024px) { .ct-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER (Theme-Builder-Template)
   ========================================================================== */
[data-elementor-type="footer"] { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
.ft-top { padding: clamp(72px, 8vw, 120px) clamp(20px, 4vw, 56px) 0 !important; }
.ft-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding-bottom: clamp(56px, 6vw, 90px); max-width: 1380px; margin-inline: auto; width: 100%; }
.ft-brand { display: block !important; }
.ft-logo img { height: 46px; width: auto; filter: brightness(0) invert(1) opacity(.95); }
.ft-blurb { margin-top: 20px !important; font-size: 14.5px; color: var(--sub-l); max-width: 30ch; line-height: 1.65; }
.ft-blurb em { font-family: var(--serif); color: var(--cream); font-style: italic; }
.ft-social { margin-top: 24px !important; }
.ft-social .elementor-social-icons-wrapper { display: flex; gap: 10px; }
.ft-social .elementor-icon.elementor-social-icon {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-l);
  background: none; display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s;
}
.ft-social .elementor-icon.elementor-social-icon svg { width: 17px; height: 17px; fill: var(--sub-l); transition: fill .3s; }
.ft-social .elementor-icon.elementor-social-icon:hover { background: var(--red); border-color: var(--red); }
.ft-social .elementor-icon.elementor-social-icon:hover svg { fill: #fff; }
.ft-col { display: block !important; }
.ft-col .ft-h5 .elementor-heading-title { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sub-l); margin-bottom: 18px; }
.ft-col .elementor-icon-list-items { display: block; }
.ft-col .elementor-icon-list-item { padding: 6px 0; }
.ft-col .elementor-icon-list-item a { font-size: 15px; color: rgba(244,238,229,.82); transition: color .25s, transform .3s var(--e-out); display: inline-block; }
.ft-col .elementor-icon-list-item a:hover { color: var(--cream); transform: translateX(6px); }
.ft-col .elementor-icon-list-text { font-family: var(--sans); }
.ft-giant-w { display: block !important; overflow: hidden; }
.ft-giant .elementor-heading-title {
  font-family: var(--serif); font-weight: 340; text-align: center; line-height: .82;
  font-size: clamp(4.4rem, 16.5vw, 15.5rem); letter-spacing: -.02em; user-select: none;
  color: transparent; -webkit-text-stroke: 1px rgba(244,238,229,.18);
  white-space: nowrap; pointer-events: none; transform: translateY(.12em);
}
.ft-bottom {
  border-top: 1px solid var(--line-l); padding: 24px clamp(20px, 4vw, 56px) 28px !important;
  display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  position: relative; z-index: 2; background: var(--ink);
}
.ft-bottom, .ft-bottom .elementor-heading-title { font-size: 13px; color: var(--sub-l); font-family: var(--sans); font-weight: 400; }
.ft-legal .elementor-icon-list-items { display: flex; gap: 0; }
.ft-legal .elementor-icon-list-item { padding: 0 10px; }
.ft-legal .elementor-icon-list-item a { color: var(--sub-l); font-size: 13px; transition: color .25s; }
.ft-legal .elementor-icon-list-item a:hover { color: var(--cream); }
@media (max-width: 1024px) { .ft-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Responsive Basics --------------------------------------------------- */
@media (max-width: 1180px) { .hd-phone { display: none !important; } }
@media (max-width: 760px) {
  .hd-cta { display: none !important; }
}

/* ---- Elementor-Anpassungen (Wrapper-Positionierung) ---- */
.k-deco, .k-deco > .elementor-widget-container { position: static !important; }
.ph-fill { position: absolute; inset: 0; }
.elementor-widget { position: relative; }
.hero-bg.elementor-widget, .hero-scrim.elementor-widget, .band-bg.elementor-widget, .band-scrim.elementor-widget { position: absolute; }
.hero-scrolldown.elementor-widget, .hero-year.elementor-widget { position: absolute; }

/* ---- Logo-Sizing (SVG in Flex) ---- */
.hd-logo, .ft-logo { flex: 0 0 auto; }
.hd-logo img { width: 227px !important; height: auto !important; max-width: none !important; }
.ft-logo img { width: 238px !important; height: auto !important; max-width: none !important; }

/* ---- 1:1-Feinschliff (Screenshot-Abgleich) ---- */
.sv-head .d2 .elementor-heading-title { max-width: 17ch; }
.refs-head .d2 .elementor-heading-title { max-width: 16ch; }
.qs-wrap .d2 .elementor-heading-title { max-width: 20ch; }
.steps-wrap .d2 .elementor-heading-title { max-width: 18ch; }
.band-quote .elementor-heading-title { max-width: 21ch; }
.sv-head > .e-con, .refs-head > .e-con, .band-stats > .e-con { width: auto; }
.q { position: relative; }
.q .av { position: relative; }
.ft-col .elementor-icon-list-icon, .ft-legal .elementor-icon-list-icon { display: none; }
.fd-num::before { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Formular: 2-spaltige Felder + Icons in den Inputs */
.k-form .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; }
.k-form .elementor-field-group { width: 100%; }
.k-form .elementor-field-group-name, .k-form .elementor-field-group-phone { width: calc(50% - 8px); }
.k-form .elementor-field-group-name { margin-right: 16px; }
.k-form .elementor-field-textual { width: 100%; }
.k-form .elementor-field-group-name input { padding-left: 42px; background: var(--paper) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239a8a79%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E") no-repeat 14px center / 17px auto; }
.k-form .elementor-field-group-phone input { padding-left: 42px; background: var(--paper) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239a8a79%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E") no-repeat 14px center / 17px auto; }
.k-form .elementor-field-group-email input { padding-left: 42px; background: var(--paper) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239a8a79%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E") no-repeat 14px center / 17px auto; }
.k-form .elementor-field-group-msg textarea { padding-left: 42px; background: var(--paper) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239a8a79%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E") no-repeat 14px 16px / 17px auto; }
.k-form .elementor-button[type="submit"]::after { content: ""; display: inline-block; width: 17px; height: 17px; margin-left: 11px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%202-7%2020-4-9-9-4Z%22%2F%3E%3Cpath%20d%3D%22M22%202%2011%2013%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }
@media (max-width: 760px) { .k-form .elementor-field-group-name, .k-form .elementor-field-group-phone { width: 100%; margin-right: 0; } }
.sv-head > .elementor-widget, .refs-head > .elementor-widget { width: auto; }

.sv-head-p { max-width: 40ch; }
.sv-head-p p { max-width: 40ch; }

.q::before { left: auto !important; width: auto; height: auto; background: none; }
.fd-num::before { left: 50% !important; }

/* Flex-Kinder: Widgets nicht auf 100% zwingen */
.hero-ctas > .elementor-widget, .intro-ctas > .elementor-widget { width: auto; }
.hero-foot > .e-con { width: auto; }
.hero-foot > .elementor-widget.hero-badges { width: auto; }

.hero-foot { flex-direction: row !important; }

.hero-ctas { min-width: max-content; }
@media (max-width: 760px) { .hero-ctas { min-width: 0; } }

/* ---- Header auf Containerbreite (wie der Seiteninhalt) ---- */
[data-elementor-type="header"] .hd-in { max-width: 1380px !important; margin-inline: auto !important; }
[data-elementor-type="footer"] .ft-bottom { max-width: 1380px; margin-inline: auto; }

/* ---- Scrims als Pseudo-Elemente ----
   Elementor rendert leere HTML-Widgets nicht, deshalb hängen die Verläufe
   direkt an den Bild-Ebenen. Stärker abgestuft, damit auch helle Fotos
   genug Kontrast für Headline, Navigation und Badges lassen. ---- */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27,20,16,.82) 0%, rgba(27,20,16,.46) 26%, rgba(27,20,16,.52) 58%, rgba(27,20,16,.97) 100%),
    linear-gradient(100deg, rgba(27,20,16,.86) 0%, rgba(27,20,16,.42) 52%, rgba(27,20,16,.24) 100%);
}
.band-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(27,20,16,.93) 4%, rgba(27,20,16,.62) 52%, rgba(27,20,16,.3) 100%);
}
/* Header liegt über dem Hero — eigener Schutzverlauf für die Navigation */
[data-elementor-type="header"]:not(.is-solid)::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,20,16,.72) 0%, rgba(27,20,16,.34) 60%, transparent 100%);
}

/* ---- Elementor-Default-Padding auf Layout-Containern neutralisieren ----
   Sonst sitzt der Hero-Inhalt 10px versetzt zum Header-Logo. ---- */
.hero, .shell, .shell-dark, .refs, .mq, .stats { padding: 0; }
.stats { padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 56px) clamp(56px, 7vw, 96px); }

/* ---- Einheitliche Containerbreite ----
   Seiteninhalt: aussen clamp-Padding, innen max-width 1380.
   Header/Hero tragen Padding und Begrenzung am selben Element, deshalb
   muss ihre max-width das Padding mit einrechnen — sonst laufen die
   linken Kanten je nach Viewport um bis zu 23px auseinander. ---- */
[data-elementor-type="header"] .hd-in,
.hero-in {
  max-width: calc(1380px + 2 * clamp(20px, 4vw, 56px)) !important;
  margin-inline: auto !important;
}
[data-elementor-type="footer"] .ft-bottom {
  max-width: calc(1380px + 2 * clamp(20px, 4vw, 56px));
  margin-inline: auto;
}

/* ---- Header mobil: Logo und Burger in einer Zeile ---- */
@media (max-width: 760px) {
  [data-elementor-type="header"] .hd-in { flex-wrap: nowrap !important; gap: 14px; padding-block: 14px !important; }
  .hd-logo img { width: 176px !important; }
  .hd-nav { flex: 0 0 auto; }
  .hd-nav .elementor-menu-toggle { width: 44px; height: 44px; }
}

/* ---- Referenzen-Pin: Block statt Flex ----
   ScrollTrigger reserviert den Scrollweg der horizontalen Strecke über
   padding-bottom am Pin-Spacer. In einem Flex-Container greift das nicht,
   der Spacer bleibt auf Elementhöhe und die nächste Sektion schiebt sich
   darüber. Als Block-Container verhält es sich wie in der HTML-Vorlage. ---- */
.shell-dark.refs { display: block !important; }
.shell-dark.refs > .pin-spacer { margin-inline: auto; }

/* ---- Gefüllte Bildflächen ----
   Platzhalter mit Bild: gestrichelter Rahmen und Beschriftung entfallen,
   das Bild deckt die Flaeche formatfuellend. ---- */
.ph.is-filled { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: transparent; }
.ph.is-filled::before, .ph.is-filled::after { display: none !important; content: none !important; }
/* Logo als PNG: keine Farbfilter, damit die Originalfarben erhalten bleiben */
.hd-logo img, .ft-logo img { filter: none !important; }
.hd-logo img { width: auto !important; height: 46px !important; }
.ft-logo img { width: auto !important; height: 48px !important; }
@media (max-width: 760px) { .hd-logo img { height: 38px !important; width: auto !important; } }

/* ---- Referenzen mobil: eine Reihe zum Wischen ----
   Elementor-Container haben flex-wrap:wrap als Standard. Bei fester
   Trackbreite stapeln die Karten dann untereinander, statt seitlich
   scrollbar zu bleiben. ---- */
.refs-track { flex-wrap: nowrap !important; }
@media (max-width: 760px) {
  .refs-track { scroll-padding-inline: 20px; padding-block: 40px 64px !important; }
  .ref { width: 78vw !important; }
}

@media (max-width: 760px) {
  /* Flex-Items schrumpfen ohne min-width:0 nie unter ihre Inhaltsbreite —
     ohne das waechst die Karten-Reihe ueber den Bildschirm statt zu scrollen. */
  .refs-stage { min-width: 0; overflow: hidden; }
  .refs-track { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; }
}


/* ==========================================================================
   HERO — Vertrauenselemente mit Glasmorphismus
   Milchglas-Optik: halbtransparente Fläche, Rückseiten-Weichzeichner,
   helle Lichtkante innen oben und weicher Schlagschatten.
   ========================================================================== */
.hero-badges .elementor-icon-list-items { gap: 12px; }
.hero-badges .elementor-icon-list-item {
  font-size: 15px; font-weight: 600; padding: 14px 22px; gap: 12px;
  color: #fff;
  background: linear-gradient(135deg, rgba(72,179,167,.22), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 8px 28px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.34);
  transition: background .3s, transform .3s var(--e-out), border-color .3s;
}
.hero-badges .elementor-icon-list-item:hover {
  background: linear-gradient(135deg, rgba(72,179,167,.34), rgba(255,255,255,.16));
  border-color: rgba(72,179,167,.62);
  transform: translateX(-4px);
}
.hero-badges .elementor-icon-list-text { font-size: 15px; color: #fff; font-weight: 600; }
.hero-badges .elementor-icon-list-icon { width: 22px; }
.hero-badges .elementor-icon-list-icon svg { width: 19px; height: 19px; fill: none; stroke: #6fe0d2; }

/* ---- Trust-Banner ---------------------------------------------------- */
.hero-trust { margin-top: 34px !important; }
.trust { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Bewusst OHNE Pill/Glas: Die Zeile ist Beleg, kein Bedienelement —
   sie soll nicht mit den CTA-Buttons darueber konkurrieren. */
.trust-google, .trust-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border: 0; border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
  color: #fff;
  transition: opacity .25s;
}
.trust-google:hover { opacity: .85; }
.trust-google .g-mark { width: 26px; height: 26px; flex: 0 0 auto; }
.trust-google .t-body { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.trust-google .t-stars { display: flex; gap: 2px; }
.trust-google .t-stars svg { width: 14px; height: 14px; fill: #FBBC05; stroke: none; }
.trust-google .t-txt { font-size: 13px; color: rgba(255,255,255,.9); font-weight: 500; letter-spacing: .01em; }
.trust-google .t-txt b { color: #fff; font-weight: 800; }

.trust-chip { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.94); }
.trust-chip svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: #6fe0d2; }

@media (max-width: 760px) {
  .trust { gap: 18px; }
  .trust-chip { font-size: 12.5px; }
}

/* ==========================================================================
   Mehr Sekundärfarbe im Hero
   Kühler Teal-Schimmer gegen den warmen Braunstich, ohne die Lesbarkeit
   der Headline zu verlieren.
   ========================================================================== */
.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(27,20,16,.80) 0%, rgba(27,20,16,.42) 26%, rgba(24,38,38,.52) 62%, rgba(18,34,34,.96) 100%),
    linear-gradient(100deg, rgba(20,40,40,.88) 0%, rgba(27,20,16,.44) 52%, rgba(72,179,167,.16) 100%),
    radial-gradient(80% 60% at 88% 22%, rgba(72,179,167,.20) 0%, transparent 62%) !important;
}
.hero .kicker .elementor-heading-title { color: #8fe3d8; }
.hero-scrolldown .elementor-heading-title { color: rgba(143,227,216,.7); }
.hero-scrolldown::after { background: linear-gradient(to bottom, transparent, #48b3a7); }
.hero-year .elementor-heading-title { -webkit-text-stroke: 1px rgba(143,227,216,.26); }

/* Der Übergang zur Marquee-Leiste bleibt warm — Rot trifft direkt auf Teal */
.mq { box-shadow: 0 -1px 0 rgba(72,179,167,.35); }

/* Scroll-Hinweis entfaellt — der Trust-Banner schliesst den Hero jetzt ab */
.hero-scrolldown { display: none !important; }

/* Headline-Rot auf dem Foto etwas abdunkeln, damit es nicht grell wirkt */
.hero-h1 .accent { color: #e8434e; text-shadow: 0 2px 24px rgba(0,0,0,.45); }

@media (max-width: 760px) {
  /* Auf dem Handy nur das staerkste Vertrauenssignal: die Google-Bewertung.
     'Meisterbetrieb seit 1955' steht bereits in der Kicker-Zeile,
     '24-h-Notdienst' im Einleitungssatz — doppelt braucht es nicht. */
  .trust-chip { display: none; }
  .hero-trust { margin-top: 26px !important; }
  .trust-google { width: 100%; justify-content: flex-start; }
}

/* ---- Statischer Modus (reduzierte Bewegung) ----
   Ohne Skript wird die Kopfzeile nie 'solid' geschaltet — sie braucht
   deshalb von Anfang an einen Hintergrund, sonst laeuft der Seitentext
   beim Scrollen sichtbar durch das Logo. ---- */
html:not(.m) [data-elementor-type="header"] {
  background: rgba(27,20,16,.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--line-l);
}
html:not(.m) [data-elementor-type="header"]::before { display: none; }


/* ==========================================================================
   LOGO — Kopfzeile schrumpft beim Scrollen
   Groß im Ruhezustand, kompakt sobald die Leiste solide wird.
   ========================================================================== */
.hd-logo img {
  height: 72px !important; width: auto !important;
  transition: height .42s cubic-bezier(.19,1,.22,1);
}
[data-elementor-type="header"].is-solid .hd-logo img { height: 46px !important; }
html:not(.m) [data-elementor-type="header"] .hd-logo img { height: 52px !important; }
@media (max-width: 760px) {
  .hd-logo img { height: 52px !important; }
  [data-elementor-type="header"].is-solid .hd-logo img { height: 38px !important; }
  html:not(.m) [data-elementor-type="header"] .hd-logo img { height: 42px !important; }
}

/* ==========================================================================
   FOOTER — Logo größer, linksbündig; Bildebene hinter dem Schriftzug
   ========================================================================== */
.ft-brand { align-items: flex-start; }
.ft-logo { align-self: flex-start; margin-inline: 0 !important; }
.ft-logo img { height: 74px !important; width: auto !important; }
.ft-logo .elementor-widget-container { text-align: left; }
@media (max-width: 760px) { .ft-logo img { height: 60px !important; } }

.ft-giant-w { position: relative; }
.ft-bg-w, .ft-bg { position: absolute; inset: 0; pointer-events: none; }
.ft-bg { overflow: hidden; z-index: 0; }
.ft-bg-img {
  position: absolute; inset: -12% 0 0 0;
  background-size: cover; background-position: center 62%;
  opacity: .3;
  /* nach oben auslaufend, damit die Bildkante nicht als harte Linie sichtbar wird */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 22%, rgba(0,0,0,.55) 58%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 22%, rgba(0,0,0,.55) 58%, rgba(0,0,0,0) 100%);
}
.ft-giant-w::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,20,16,.55) 0%, rgba(27,20,16,.15) 45%, rgba(27,20,16,.75) 100%);
}
.ft-giant { position: relative; z-index: 2; }
.ft-giant .elementor-heading-title { -webkit-text-stroke: 1px rgba(244,238,229,.34); }

/* ==========================================================================
   HERO — Referenzkarten, die beim ersten Scrollen aufsteigen
   Ausgangslage: nur der obere Teil ragt ins Bild (rund 40 % sichtbar).
   ========================================================================== */
.hero-cards {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding-inline: clamp(20px, 4vw, 56px);
  pointer-events: none;
}
.hero-cards > .elementor-widget-container { max-width: calc(1380px + 2 * clamp(20px, 4vw, 56px)); margin-inline: auto; }
.hcards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px);
  align-items: end;
}
.hcard {
  position: relative; border-radius: 20px; overflow: hidden;
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.75);
  pointer-events: auto;
  /* Grundzustand: konstant sichtbarer Streifen, unabhaengig von der
     Kartenhoehe — sonst waechst der Anschnitt auf breiten Schirmen mit. */
  --peek: 148px;
  transform: translateY(calc(100% - var(--peek)));
  will-change: transform;
}
html:not(.m) .hcard { --peek: 200px; }
.hcard-media {
  position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center;
}
.hcard-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27,20,16,.75) 4%, transparent 55%);
}
.hcard-cat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(244,238,229,.94); color: var(--ink);
  padding: 7px 13px; border-radius: 100px;
}
.hcard-body { padding: 16px 20px 20px; }
.hcard-loc {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #6fe0d2;
}
.hcard-loc svg { width: 13px; height: 13px; }
.hcard-body h2, .hcard-body h3 {
  margin-top: 7px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 1.3vw, 1.28rem); line-height: 1.2; color: var(--cream);
}

/* Mobile: Karten als wischbare Reihe statt Fächer */
@media (max-width: 760px) {
  .hero-cards { position: relative; padding-inline: 0; margin-top: 30px !important; }
  .hero-cards > .elementor-widget-container { padding-inline: 0; }
  .hcards {
    display: flex; flex-wrap: nowrap; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: clamp(20px, 4vw, 56px); padding-bottom: 12px;
    scroll-padding-inline: clamp(20px, 4vw, 56px);
  }
  .hcards::-webkit-scrollbar { height: 3px; }
  .hcards::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 3px; }
  .hcard {
    flex: 0 0 auto; width: 72vw; scroll-snap-align: start;
    transform: none !important;
  }
}


/* ==========================================================================
   HERO mit Referenzkarten — auf Bildschirmhöhe eingepasst
   Damit die Karten schon im ersten Bild angeschnitten sichtbar sind, muss
   der Hero exakt eine Bildschirmhöhe hoch sein und der Textblock enger
   gesetzt werden. Ohne Karten (Mobile) gilt weiter die alte Aufteilung.
   ========================================================================== */
@media (min-width: 761px) {
  .hero { height: 100svh; min-height: 620px; }
  .hero-in {
    padding-top: 138px !important;
    /* Der angeschnittene Kartenstreifen bleibt frei, damit der Textblock
       darueber zentriert und nicht von den Karten ueberdeckt wird. */
    padding-bottom: 196px !important;
    display: flex; flex-direction: column; justify-content: center;
    height: 100%;
  }
  .hero-kicker { margin-bottom: 18px !important; }
  .hero-h1 .elementor-heading-title { font-size: clamp(2.4rem, 5vw, 4.6rem); }
  .hero-foot { margin-top: clamp(22px, 2.6vh, 34px) !important; }
  .hero-ctas { margin-top: 20px !important; }
  .hero-trust { margin-top: 22px !important; }

  .hero-badges .elementor-icon-list-items { gap: 10px; }
  .hero-badges .elementor-icon-list-item { padding: 11px 18px; font-size: 14px; }
  .hero-badges .elementor-icon-list-text { font-size: 14px; }

  /* Karten flacher, damit der angeschnittene Teil ins Bild passt */
  .hcard-media { aspect-ratio: 16/9; }
  .hcard-body { padding: 13px 18px 16px; }
  .hcard-body h2, .hcard-body h3 { font-size: clamp(.98rem, 1.1vw, 1.15rem); }
  .hero-cards { bottom: 0; }
}

/* Flache Fenster: Text, Trust-Banner und angeschnittene Karten passen
   nicht gemeinsam ins Bild — dann weicht der Banner, die Google-Bewertung
   erscheint stattdessen weiter unten auf der Seite. */
@media (min-width: 761px) and (max-height: 980px) {
  .hero-trust { display: none; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .hero-h1 .elementor-heading-title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
  .hero-badges .elementor-icon-list-item { padding: 9px 15px; font-size: 13px; }
}

/* Footer-Logo linksbuendig: Elementor setzt text-align:center direkt auf
   das Bild-Widget, und die Spalten tragen ein Standard-Padding. */
.ft-logo, .ft-logo a { text-align: left !important; display: block; }
.ft-brand, .ft-col { padding: 0 !important; }
.ft-grid { padding-inline: 0 !important; }


/* ==========================================================================
   FLOATING BUTTONS — rechts im unteren Drittel
   Nur Icons; beim Überfahren fährt die Beschriftung nach links aus.
   ========================================================================== */
.fab-w { position: static !important; }
.fab {
  position: fixed; right: clamp(14px, 1.6vw, 22px); top: 66%;
  transform: translateY(-50%);
  /* Muss ueber allen Sektions-Kontexten liegen (z:4-6) */
  z-index: 4000;
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-end;
}
.fab-btn {
  --fab-size: 56px;
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  height: var(--fab-size); width: var(--fab-size);
  border-radius: 100px;
  background: var(--teal-deep);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 10px 30px -8px rgba(47,125,116,.6), inset 0 1px 0 rgba(255,255,255,.28);
  transition: width .42s cubic-bezier(.19,1,.22,1), background .28s, box-shadow .28s;
  will-change: width;
}
.fab-btn:hover, .fab-btn:focus-visible {
  width: var(--fab-w, 210px);
  background: var(--teal-deep);
  box-shadow: 0 14px 38px -10px rgba(47,125,116,.75), inset 0 1px 0 rgba(255,255,255,.34);
}
.fab-btn.fab-urgent { background: var(--red); box-shadow: 0 10px 30px -8px rgba(223,31,44,.6), inset 0 1px 0 rgba(255,255,255,.28); }
.fab-btn.fab-urgent:hover, .fab-btn.fab-urgent:focus-visible {
  background: var(--red-deep);
  box-shadow: 0 14px 38px -10px rgba(223,31,44,.75), inset 0 1px 0 rgba(255,255,255,.34);
}

/* Icon bleibt fix rechts stehen, der Text schiebt sich links daneben */
.fab-ico {
  position: absolute; right: 0; top: 0;
  width: var(--fab-size); height: var(--fab-size);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.fab-ico svg { width: 23px; height: 23px; }
.fab-label {
  font-family: var(--sans); font-size: 14.5px; font-weight: 700; white-space: nowrap;
  padding-right: var(--fab-size); padding-left: 22px;
  opacity: 0; transform: translateX(8px);
  transition: opacity .3s .06s, transform .42s cubic-bezier(.19,1,.22,1);
}
.fab-btn:hover .fab-label, .fab-btn:focus-visible .fab-label { opacity: 1; transform: none; }

/* Breite je Beschriftung, damit nichts umbricht */
.fab-btn:nth-child(1) { --fab-w: 178px; }
.fab-btn:nth-child(2) { --fab-w: 166px; }
.fab-btn:nth-child(3) { --fab-w: 224px; }

.fab-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 760px) {
  .fab { right: 12px; top: auto; bottom: 18px; transform: none; gap: 10px; }
  .fab-btn { --fab-size: 50px; }
  .fab-ico svg { width: 21px; height: 21px; }
  /* Auf Touch-Geräten gibt es kein Hover — Beschriftung bleibt eingeklappt,
     die Schaltflächen sind über aria-label trotzdem benannt. */
}
@media (prefers-reduced-motion: reduce) {
  .fab-btn, .fab-label { transition: none; }
}

/* ==========================================================================
   HEADLINES — Unterlängen nicht abschneiden, sauber mitskalieren
   Die Zeilenmaske der Hero-Überschrift blendet mit overflow:hidden ein;
   bei enger Zeilenhöhe kappt das die Unterlängen von g, j, p, y.
   Zusätzlicher Innenabstand schafft Platz, das negative Außenmaß hält
   den optischen Zeilenabstand unverändert.
   ========================================================================== */
.mask { padding-bottom: .16em; margin-bottom: -.16em; }
.d1, .d2, .d3 { padding-bottom: .04em; }
.hero-h1 .elementor-heading-title { line-height: 1.08; }
.d1 { line-height: 1.06; }
.d2 { line-height: 1.1; }

/* Fließend über den gesamten Bereich skalieren — zusätzlich an die
   Fensterhöhe gekoppelt, damit die Zeilen in flachen Fenstern nicht
   den halben Bildschirm einnehmen. */
.hero-h1 .elementor-heading-title {
  font-size: clamp(2.1rem, 2.2rem + 2.1vw + 0.9vh, 5.2rem);
}
.d2 .elementor-heading-title, h2.d2 {
  font-size: clamp(1.85rem, 1.1rem + 2.4vw, 3.5rem);
}
.d3 .elementor-heading-title { font-size: clamp(1.3rem, .9rem + 1.1vw, 1.85rem); }
.band-quote .elementor-heading-title { font-size: clamp(1.9rem, 1.1rem + 2.3vw, 3.3rem); }
.fd-big .elementor-heading-title { font-size: clamp(3.4rem, 2rem + 5.4vw, 7rem); }
.ft-giant .elementor-heading-title { font-size: clamp(3.4rem, 1rem + 14vw, 14rem); padding-bottom: .06em; }
.tl-yr .elementor-heading-title { font-size: clamp(1.2rem, .8rem + 1vw, 1.5rem); }
.tl-h4 .elementor-heading-title { font-size: clamp(1rem, .9rem + .35vw, 1.15rem); }
.step .nr .elementor-heading-title { font-size: clamp(2.3rem, 1.4rem + 2.4vw, 3.6rem); }
.hero-year .elementor-heading-title { font-size: clamp(4rem, 2rem + 11vw, 12rem); }

/* ---- Freiraum fuer die Schnellzugriff-Spalte ----
   Die schwebenden Schaltflaechen liegen rechts ueber dem Inhalt; die
   Hero-Auszeichnungen weichen ihnen aus, statt sich zu ueberlappen. */
@media (min-width: 761px) {
  .hero-badges { padding-right: 84px; }
}


/* ==========================================================================
   HERO — Feinschliff Scroll-Eröffnung
   ========================================================================== */

/* Referenzkarten auf Containerbreite statt über den ganzen Bildschirm */
.hero-cards { padding-inline: clamp(20px, 4vw, 56px); }
.hcards {
  max-width: 1380px;
  margin-inline: auto;
}

/* Ruhigere Bewegung der Karten */
.hcard { transition: box-shadow .35s; }

/* ==========================================================================
   FLOATING BUTTONS — Beschriftung und Icons immer weiß
   ========================================================================== */
.fab-btn,
.fab-btn:hover,
.fab-btn:focus-visible,
.fab-btn:active,
.fab-btn:visited { color: #fff; }

.fab-label { color: #fff !important; }
.fab-ico { color: #fff; }
.fab-ico svg { stroke: #fff !important; fill: none !important; }
.fab-btn:hover .fab-ico svg,
.fab-btn:focus-visible .fab-ico svg { stroke: #fff !important; }
.fab-btn:hover .fab-label,
.fab-btn:focus-visible .fab-label { color: #fff !important; }

/* Hover-Fläche etwas heller statt dunkler, damit der Kontrast zum
   weißen Text nicht abfällt. */
.fab-btn:hover, .fab-btn:focus-visible { background: #1f5952; }
.fab-btn.fab-urgent:hover, .fab-btn.fab-urgent:focus-visible { background: #c4131f; }

/* ---- Render-Last der Hero-Eroeffnung senken ----
   Eigene Compositing-Ebene und angekuendigte Aenderungen halten die
   Bildrate stabil, sonst ruckelt der Ablauf. */
.hero-bg .hb-in { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.hero-in { will-change: transform; }
.hcard { will-change: transform; backface-visibility: hidden; }
/* ---- Endlage der Referenzkarten ----
   Die Karten steigen bis knapp ueber die Hero-Unterkante. Der Rahmen
   darf dabei nicht ueberlaufen, sonst schneidet die Sektion sie ab. */
@media (min-width: 761px) {
  .hero { overflow: visible; }
  .hero-bg { overflow: hidden; border-radius: inherit; }
  .hero-cards { z-index: 4; }
}


/* ==========================================================================
   FOOTER — Bildebene über die gesamte Höhe
   Das Bild liegt jetzt hinter dem kompletten Footer: es beginnt oberhalb
   des Spaltenmenüs und reicht bis unter die Copyright-Zeile.
   ========================================================================== */
/* Kein isolation:isolate mehr: Es sperrte die Floating-Buttons (liegen im
   Footer-Template) in den Footer-Stacking-Kontext — Sektionen mit z-index
   4-6 (Rundungs-Overlaps) malten sich dann ueber die Buttons. */
[data-elementor-type="footer"] { position: relative; }

.ft-bg-w { position: static !important; }
.ft-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.ft-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 55%;
  opacity: .3;
  /* Oben weich auslaufend, unten vollflächig bis unter die Copyright-Zeile */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 26%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 26%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 100%);
}
/* Abdunkler über dem Bild, damit Menü und Copyright lesbar bleiben */
[data-elementor-type="footer"]::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,20,16,.96) 0%, rgba(27,20,16,.88) 22%, rgba(27,20,16,.7) 52%, rgba(27,20,16,.62) 74%, rgba(27,20,16,.86) 100%);
}
.ft-top, .ft-giant-w, .ft-bottom { position: relative; z-index: 2; }

/* Die frühere Bild-Ebene in der Riesentext-Sektion entfällt */
.ft-giant-w::after { content: none; }
.ft-bottom { background: transparent; border-top-color: rgba(244,238,229,.2); }
/* KI-Transparenzhinweis: eigene stille Zeile unter Copyright + Rechtslinks */
.ft-ai { flex-basis: 100%; width: 100%; margin-top: 10px !important; }
.ft-ai p { margin: 0; font-size: 11.5px; line-height: 1.6; color: rgba(244,238,229,.6); }

/* Social-Icons linksbündig unter dem Logo */
.ft-social { margin-left: 0 !important; }
.ft-social, .ft-social .elementor-widget-container { text-align: left !important; }
.ft-social .elementor-social-icons-wrapper {
  justify-content: flex-start !important;
  margin-left: 0 !important; padding-left: 0 !important;
}
.ft-social .elementor-grid { justify-content: flex-start !important; }
.ft-social .elementor-grid-item { margin-left: 0 !important; }

/* ==========================================================================
   REFERENZEN — Überschrift bleibt während der Strecke stehen
   ========================================================================== */
.refs-pin { display: block !important; padding: 0 !important; }
.refs-pin > .refs-head { padding-top: clamp(56px, 6vw, 96px) !important; padding-bottom: clamp(20px, 2.4vw, 34px) !important; }
.refs-pin > .refs-stage { }
.refs-track { padding-top: clamp(12px, 1.6vw, 26px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }

@media (max-width: 760px) {
  .refs-pin { display: block !important; }
  .refs-pin > .refs-head { padding-top: clamp(56px, 10vw, 90px) !important; }
}


/* ==========================================================================
   REFERENZEN — Überschrift und Karten gemeinsam auf Bildschirmhöhe
   Der festgestellte Bereich umfasst jetzt Überschrift und Strecke. Passt er
   nicht ins Fenster, rutscht die Überschrift darüber hinaus und ist während
   der ganzen Strecke unsichtbar — deshalb sind beide Teile an die
   Fensterhöhe gekoppelt.
   ========================================================================== */
@media (min-width: 761px) {
  .refs-pin {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-block: 0 !important;
  }

  /* Überschrift kompakter */
  .refs-pin > .refs-head {
    padding-top: clamp(18px, 2.4vh, 34px) !important;
    padding-bottom: clamp(10px, 1.6vh, 22px) !important;
    flex: 0 0 auto;
  }
  .refs-head .d2 .elementor-heading-title { font-size: clamp(1.6rem, 1rem + 1.7vw + .5vh, 2.7rem); }
  .refs-head p { font-size: clamp(.92rem, .8rem + .3vw, 1.05rem); }
  .refs-head .kicker .elementor-heading-title { font-size: 11.5px; }

  /* Karten an die Fensterhöhe koppeln statt nur an die Breite */
  .refs-pin > .refs-stage { flex: 0 0 auto; }
  .refs-track {
    padding-top: clamp(8px, 1.4vh, 20px) !important;
    padding-bottom: clamp(16px, 2.6vh, 40px) !important;
  }
  .ref { width: clamp(280px, 30vw, 470px); }
  .ref-media { aspect-ratio: auto; height: clamp(150px, 26vh, 300px); }
  .ref-body { padding: 16px 20px 20px; }
  .ref-body .ref-h3 .elementor-heading-title { font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem); }
  .ref-body .ref-p { font-size: 13.5px; margin-top: 6px !important; }
  .ref-body .loc { font-size: 12px; }
}

/* Flache Fenster: Beschreibungstext der Karten entfällt zugunsten der Bilder */
@media (min-width: 761px) and (max-height: 760px) {
  .refs-head p { display: none; }
  .ref-body .ref-p { display: none; }
}

/* ---- Elementor-Standard-Padding verschachtelter Container ----
   Jeder Kind-Container bringt 10px Default-Innenabstand mit. In
   Ketten (hero-foot > hero-sub > hero-ctas) addiert sich das zu
   sichtbar versetzten Kanten: 56 > 66 > 76 > 86px. :where() nullt
   ohne Spezifitaet, bewusst gesetzte Innenabstaende gewinnen. ---- */
.e-con.e-child {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --padding-block-start: 0px; --padding-block-end: 0px;
  --padding-inline-start: 0px; --padding-inline-end: 0px;
}

/* ---- Scroll-Feinschliff: gescrubbte Ebenen auf eigener Schicht ---- */
.refs-track { will-change: transform; }
.ft-giant .elementor-heading-title { will-change: transform; }
.fd-big .elementor-heading-title { will-change: transform; }

/* Referenzen-Kopf: Breitenrechnung wie hero-in — Padding in die
   max-width einrechnen, sonst verschiebt die Zentrierung die Kante. */
.refs-head { max-width: calc(1380px + 2 * clamp(20px, 4vw, 56px)) !important; }

/* ---- Browser-Scroll-Verankerung abschalten ----
   Chrome korrigiert die Scrollposition automatisch, wenn sich Inhalte
   im Sichtfeld verschieben. Mit Parallax-Ebenen und Pins fuehrt das zu
   Ruecksprungen (Sektion 'kommt von oben zurueck') und kaempft mit dem
   Smooth-Scroll um die Position — das ist das Stottern. ---- */
html, body { overflow-anchor: none; }

/* ==========================================================================
   ENTLASTUNG: dauerhafte Frame-Kosten reduzieren
   ========================================================================== */
/* Korn bleibt als Textur, bewegt sich aber nicht mehr — die Animation
   zeichnete alle 0,7s eine doppelt bildschirmgrosse Ebene neu. */
html.m .k-grain { animation: none; }
/* Weichzeichner hinter der Kopfzeile guenstiger (16 -> 10px) */
[data-elementor-type="header"].is-solid {
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Blur-Ebene ist abgeschafft: Reserven zurueckbauen */
.hero-bg .hb-in { inset: -8% 0; will-change: transform; }

/* ==========================================================================
   URSACHE GEFUNDEN: Elementor legt auf jedes Element eine CSS-Transition,
   die auch transform umfasst (0.4s). GSAP setzt transform aber pro Frame —
   der Browser zieht jeden dieser Werte zusaetzlich 400ms lang nach. Folge:
   Ruckeln/Stottern beim Scrubben und ein sichtbares Nachrutschen der
   Sektionen genau in dem Moment, in dem ein Pin geloest wird (= wenn der
   naechste Container 1px sichtbar wird). Auf allen von GSAP bewegten
   Elementen wird die Transition deshalb komplett abgeschaltet.
   ========================================================================== */
.hero, .hero-in, .hero-year, .hero-bg, .hero-bg .hb-in, .hcards,
.refs-pin, .refs-stage, .refs-track,
.fade, .fade-l, .fade-r,
.band-bg, .fd-big, .ft-giant, .tl-dot,
[data-speed] { transition: none !important; }

/* Gewollte Hover-Effekte bleiben — aber ausschliesslich auf box-shadow,
   nie auf transform (das gehoert GSAP allein). */
.hcard { transition: box-shadow .35s !important; }
.sv { transition: box-shadow .4s !important; }

/* ==========================================================================
   MEHRSTUFIGES ANFRAGEFORMULAR — Feinschliff
   Anspruch: dieselbe Qualitaet wie der Rest der Seite. Grosszuegige
   Abstaende, ruhiger Stepper, Auswahl-Pills mit spuerbarem Feedback,
   weiche Schritt-Uebergaenge. Die Formular-Karte ist HELL (Creme).
   ========================================================================== */

/* --- Kopfbereich der Karte: Luft zwischen Intro und Stepper --- */
.form-card .fc-sub { margin-bottom: 6px !important; }

/* --- Stepper: gleichmaessig verteilt, Linien fuellen den Raum --- */
.k-form .e-form__indicators {
  border: 0; padding: 0; margin: 24px 0 30px;
  display: flex; align-items: center; gap: 0;
}
.k-form .e-form__indicators__indicator {
  padding: 0; flex: 0 0 auto;
  flex-direction: row; gap: 9px; align-items: center;
}
.k-form .e-form__indicators__indicator__number {
  width: 30px; height: 30px; font-size: 13px; font-weight: 700;
  background: transparent; color: rgba(27,20,16,.55);
  border: 1.5px solid rgba(27,20,16,.25);
  transition: background .25s, border-color .25s, color .25s;
}
.k-form .e-form__indicators__indicator__label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: rgba(27,20,16,.65); transition: color .25s;
}
.k-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number {
  background: var(--teal); border-color: var(--teal); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(47,125,116,.55);
}
.k-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label { color: var(--ink); }
.k-form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number {
  background: var(--teal-deep); border-color: var(--teal-deep); color: #fff;
}
.k-form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label { color: rgba(27,20,16,.6); }
.k-form .e-form__indicators__indicator__separator {
  flex: 1 1 auto; height: 1.5px; border-radius: 2px;
  background: rgba(27,20,16,.14); margin: 0 12px;
}

/* --- Schritt-Uebergang: Inhalt gleitet weich ein --- */
@keyframes kr-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.k-form .e-form__step { animation: kr-step-in .38s cubic-bezier(.22,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .k-form .e-form__step { animation: none; } }

/* --- Feld-Labels: Kicker-Stil wie die Sektions-Labels der Seite --- */
.k-form .elementor-field-group > label {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 13px;
}
.k-form .elementor-field-group { margin-bottom: 10px; }

/* --- Auswahl-Pills --- */
.k-form .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.k-form .elementor-field-option {
  /* Elementor gibt dem Options-Wrapper eine feste Hoehe (28px) — das Label
     (49px) ragte dadurch in die naechste Zeile. Flex laesst den Wrapper
     mit dem Label wachsen. */
  position: relative; flex: 0 0 auto !important; width: auto !important;
  display: flex !important; height: auto !important; min-height: 0 !important;
}
.k-form .elementor-field-option input[type="radio"] {
  position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0;
  margin: 0; cursor: pointer;
}
.k-form .elementor-field-option label {
  display: block; padding: 13px 21px; border-radius: 100px;
  border: 1.5px solid rgba(27,20,16,.22); color: var(--ink);
  background: rgba(255,255,255,.55);
  font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s,
              transform .18s, box-shadow .18s;
}
.k-form .elementor-field-option input[type="radio"]:hover + label {
  border-color: rgba(27,20,16,.55); transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(27,20,16,.35);
}
.k-form .elementor-field-option input[type="radio"]:checked + label {
  background: var(--teal); border-color: var(--teal); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(47,125,116,.65);
}
.k-form .elementor-field-option input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--teal); outline-offset: 3px;
}

/* --- Text-Eingaben: weiss auf Creme, Teal-Fokusring --- */
.k-form input[type="text"],
.k-form input[type="email"],
.k-form input[type="tel"],
.k-form textarea {
  background: rgba(255,255,255,.75); color: var(--ink);
  border: 1.5px solid rgba(27,20,16,.2); border-radius: 16px;
  padding: 14px 17px; font-size: 15px; line-height: 1.5;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.k-form input::placeholder, .k-form textarea::placeholder { color: rgba(27,20,16,.38); }
.k-form input:focus, .k-form textarea:focus {
  background: #fff; border-color: var(--teal);
  box-shadow: 0 0 0 3.5px rgba(72,179,167,.22); outline: none;
}

/* --- Schritt-Buttons: Zurueck dezent links, Weiter praesent rechts ---
   Kompakte Pills wie die CTAs der Seite, kein vollbreiter Balken. */
.k-form .e-form__buttons { gap: 12px; margin-top: 18px; align-items: center; justify-content: flex-end; }
.k-form .e-form__buttons__wrapper { flex: 0 0 auto !important; width: auto !important; }
.k-form button.e-form__buttons__wrapper__button-next,
.k-form .elementor-field-type-submit .elementor-button { width: auto; min-width: 190px; }
.k-form button.e-form__buttons__wrapper__button-previous { margin-right: auto; }
.k-form button.e-form__buttons__wrapper__button-previous {
  flex: 0 0 auto !important; width: auto !important;
  background: transparent !important;
  border: 1.5px solid rgba(27,20,16,.3) !important;
  color: var(--ink) !important;
  border-radius: 100px; padding: 14px 26px; font-size: 15px; font-weight: 600;
  transition: border-color .18s, background .18s;
}
.k-form button.e-form__buttons__wrapper__button-previous:hover {
  border-color: var(--ink) !important; background: rgba(27,20,16,.05) !important;
}
.k-form button.e-form__buttons__wrapper__button-next,
.k-form .elementor-field-type-submit .elementor-button {
  background: var(--red); border-radius: 100px;
  padding: 15px 34px; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 12px 28px -12px rgba(223,31,44,.55);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.k-form button.e-form__buttons__wrapper__button-next:hover,
.k-form .elementor-field-type-submit .elementor-button:hover {
  background: var(--red-deep); transform: translateY(-1px);
  box-shadow: 0 16px 34px -12px rgba(223,31,44,.65);
}

/* --- Validierung im CI statt Browser-Grau --- */
.k-form .elementor-message.elementor-message-danger,
.k-form .elementor-error .elementor-field-subgroup + .elementor-message {
  color: var(--red-deep); font-size: 13.5px; font-weight: 600;
}
.k-form .elementor-message.elementor-message-success {
  color: var(--teal-deep); font-size: 16px; font-weight: 600;
}

/* --- Notdienst-Weiche --- */
.k-notruf {
  display: none; margin: 4px 0 6px; padding: 15px 19px; border-radius: 16px;
  background: rgba(223,31,44,.06); border: 1.5px solid rgba(223,31,44,.35);
  color: var(--ink); font-size: 14.5px; line-height: 1.55;
}
.k-notruf.is-on { display: block; animation: kr-step-in .3s ease; }
.k-notruf a {
  color: var(--red-deep); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .k-form .e-form__indicators__indicator__label { display: none; }
  .k-form .e-form__indicators { margin: 18px 0 24px; }
  .k-form .e-form__indicators__indicator__separator { margin: 0 8px; }
  .k-form .elementor-field-option label { padding: 12px 17px; font-size: 14px; }
  .k-form button.e-form__buttons__wrapper__button-next,
  .k-form .elementor-field-type-submit .elementor-button { width: 100%; }
}

/* ==========================================================================
   MOBILE: BOTTOM-NAVIGATION
   Die drei Floating-Buttons werden auf dem Smartphone zur festen Leiste am
   unteren Rand — wie eine App-Tab-Bar: immer erreichbar, Icon + Label,
   Safe-Area beruecksichtigt.
   ========================================================================== */
@media (max-width: 760px) {
  .fab {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    z-index: 4000;
    flex-direction: row; align-items: stretch; gap: 0;
    background: rgba(27, 20, 16, .95);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(244, 238, 229, .14);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .fab-btn {
    flex: 1 1 0; width: auto; height: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 8px 4px 7px;
    border-radius: 12px; overflow: visible;
    background: transparent !important; box-shadow: none !important;
    transition: background .2s;
  }
  .fab-btn:hover, .fab-btn:focus-visible, .fab-btn:active {
    background: rgba(244, 238, 229, .1) !important;
    width: auto;
  }
  .fab-ico { position: static; width: auto; height: auto; }
  .fab-ico svg { width: 22px; height: 22px; }
  .fab-label {
    position: static; opacity: 1; transform: none;
    padding: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--cream);
  }
  /* Notdienst bleibt als roter Akzent erkennbar */
  .fab-btn.fab-urgent .fab-ico {
    width: 40px; height: 26px; border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
    background: var(--red);
  }
  .fab-btn.fab-urgent .fab-ico svg { width: 17px; height: 17px; }

  /* Hero: Inhalt endet oberhalb der Leiste, H1 kompakter (grosse
     Woerter brachen sonst einzeln um) */
  .hero-in { padding-bottom: 86px !important; }
  .hero-h1 .elementor-heading-title { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .hero-cards { padding-bottom: 74px; }

  /* Die Leiste darf nichts verdecken: Fussleiste bekommt Luft */
  [data-elementor-type="footer"] .ft-bottom {
    padding-bottom: calc(28px + 62px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   MOBILES FLYOUT-MENUE (Elementor Off-Canvas)
   Burger nur mobil im Header; Panel gleitet von rechts, Ink-Flaeche,
   grosse Serif-Menuepunkte, Telefon + CTA unten.
   ========================================================================== */
.hd-burger-w { display: none; }
.kr-burger {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  color: var(--cream); transition: background .2s;
}
.kr-burger:hover { background: rgba(244, 238, 229, .1); color: var(--cream); }
.kr-burger svg { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .hd-burger-w { display: block; margin-left: auto; }
  .hd-nav { display: none !important; }
}

/* Panel */
.kr-offcanvas .e-off-canvas__main {
  background: var(--ink); color: var(--cream);
  width: min(86vw, 380px);
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .55);
}
.kr-offcanvas .e-off-canvas__overlay {
  background: rgba(27, 20, 16, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.kr-offcanvas .e-off-canvas__content { height: 100%; background: transparent !important; }
/* Panel rechts andocken — die Positions-Einstellung des Widgets greift nicht zuverlaessig */
.kr-offcanvas .e-off-canvas__main { left: auto !important; right: 0 !important; }
.krm-in {
  height: 100%; padding: 30px 28px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important; flex-direction: column; gap: 26px;
}
.krm-logo img { width: 148px; height: auto; filter: none; }

.krm-links .elementor-icon-list-items { display: flex; flex-direction: column; }
.krm-links .elementor-icon-list-icon { display: none; }
.krm-links .elementor-icon-list-item { padding: 0; }
.krm-links .elementor-icon-list-item a {
  display: block; width: 100%; padding: 15px 2px;
  border-bottom: 1px solid rgba(244, 238, 229, .12);
}
.krm-links .elementor-icon-list-text {
  font-family: var(--serif); font-size: 27px; line-height: 1.15;
  color: var(--cream); transition: color .2s;
}
.krm-links a:hover .elementor-icon-list-text { color: var(--teal); }

.krm-meta { margin-top: auto !important; }
.krm-meta p { font-size: 13.5px; line-height: 1.7; color: var(--sub-l); margin: 0; }
.krm-meta a { color: var(--cream); font-weight: 700; font-size: 19px; }

.krm-cta .elementor-button {
  display: block; text-align: center; width: 100%;
  background: var(--red); border-radius: 100px;
  padding: 15px 28px; font-size: 15px; font-weight: 700; color: #fff;
}
.krm-cta .elementor-button:hover { background: var(--red-deep); }

/* ==========================================================================
   NATIVE BILD-CONTAINER: Overlay-Anker reparieren
   Nach dem Umbau der Bild-Bloecke auf Elementor-Container liegen Badges/
   Tags in HTML-Widgets, deren Wrapper Elementor selbst positioniert —
   absolute Overlays ankerten dadurch am kollabierten Wrapper statt an
   der Kachel. Wrapper auf static = Anker ist wieder der Medien-Container.
   ========================================================================== */
.bn .cell .elementor-widget,
.hcard-media .elementor-widget,
.sv-media .elementor-widget,
.ref-media .elementor-widget,
.k-deco .elementor-widget,
.who .elementor-widget { position: static !important; }

/* ==========================================================================
   WP-ADMINLEISTE vs. FIXER HEADER
   Eingeloggt legt sich die Admin-Bar (fixed, top:0) ueber den fixen
   Header und verdeckt das Menue. Header + Scroll-Fortschritt ruecken
   deshalb um die Leistenhoehe nach unten. Besucher sehen keine Leiste —
   fuer sie aendert sich nichts.
   ========================================================================== */
body.admin-bar [data-elementor-type="header"],
body.admin-bar .k-progress { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar [data-elementor-type="header"],
  body.admin-bar .k-progress { top: 46px; }
}
/* Unter 600px stellt WP die Leiste auf absolute (scrollt mit weg) —
   der Header dockt dann wieder direkt oben an. */
@media screen and (max-width: 600px) {
  body.admin-bar [data-elementor-type="header"],
  body.admin-bar .k-progress { top: 0; }
}

/* ==========================================================================
   GESCHICHTE HORIZONTAL (V2)
   Chronik als flaches Band: Linie oben, Punkte darauf, Stationen als
   Spalten. Desktop 6 Spalten ohne Scrollen, unter 1100px 3x2,
   mobil wischbare Reihe. RUECKBAU: diesen ganzen Block loeschen ->
   vertikale Version (versions/geschichte-v1-vertikal.css) greift wieder.
   ========================================================================== */
.tl {
  max-width: 1380px !important;
  margin: clamp(24px, 3vw, 44px) auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(14px, 1.8vw, 30px);
}
.tl-line { display: none; }

.tl-it, .tl-it:nth-of-type(odd), .tl-it:nth-of-type(even) {
  position: relative; width: auto; left: auto; right: auto;
  text-align: left !important;
  padding: 30px 0 0 !important;
}
/* Linie als Segment pro Station — ergibt zusammen das durchgehende Band */
.tl-it::before {
  content: ''; position: absolute; top: 7px; left: 0;
  right: calc(-1 * clamp(14px, 1.8vw, 30px));
  height: 1.5px; background: var(--line);
}
.tl-it:last-of-type::before { right: 0; }

.tl-dot,
.tl-it:nth-of-type(odd) .tl-dot,
.tl-it:nth-of-type(even) .tl-dot {
  left: 0 !important; right: auto !important; top: 0;
}
.tl-yr .elementor-heading-title { font-size: clamp(1.15rem, .8rem + .9vw, 1.45rem); }
.tl-h4 .elementor-heading-title { font-size: clamp(.98rem, .9rem + .3vw, 1.1rem); }
.tl-p, .tl-it:nth-of-type(odd) .tl-p {
  margin-left: 0; max-width: none; display: block; font-size: 13.5px;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .tl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
}

@media (max-width: 760px) {
  .tl {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    column-gap: 18px; padding-bottom: 10px;
    scrollbar-width: none;
  }
  .tl::-webkit-scrollbar { display: none; }
  .tl > .tl-it, .tl-it {
    flex: 0 0 74vw !important; min-width: 0; scroll-snap-align: start;
    width: auto; left: auto !important;
    padding: 30px 0 0 !important;
  }
  .tl-it::before { right: -18px; }
  .tl-it .tl-dot { left: 0 !important; top: 0; }
}

/* ==========================================================================
   UNTERSEITEN (Leistungen etc.)
   Kompakter dunkler Seitenkopf, offene FAQ-Bloecke (GEO: sichtbar fuer
   Google & KI), Hinweis-Box, CTA-Band. Alles im bestehenden System.
   ========================================================================== */
.sub-hero {
  background-color: var(--ink); color: var(--cream);
  position: relative; isolation: isolate;
  padding: clamp(150px, 16vw, 210px) clamp(20px, 4vw, 56px) clamp(56px, 6vw, 88px) !important;
}
.sub-hero .sub-in { max-width: 1380px; margin-inline: auto; width: 100%; position: relative; z-index: 1; }
/* Abdunkelung ueber dem Hero-Bild: links kraeftig (Textseite), nach rechts
   offener, unten sanfter Uebergang zur hellen Inhaltsflaeche */
.sub-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(27,20,16,.92) 0%, rgba(27,20,16,.78) 45%, rgba(27,20,16,.45) 100%),
    linear-gradient(180deg, rgba(27,20,16,.35) 0%, rgba(27,20,16,0) 40%, rgba(27,20,16,.5) 100%);
}
.sub-hero h1, .sub-h1 .elementor-heading-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.12;
  color: var(--cream); max-width: 20ch;
}
.sub-lead { margin-top: 20px !important; }
.sub-lead p { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.7; color: var(--sub-l); max-width: 62ch; margin: 0 0 12px; }
.sub-lead p:last-child { margin-bottom: 0; }

/* Inhaltssektionen */
.sub-sec { padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 56px) !important; background: var(--cream); }
.sub-sec .sub-in { max-width: 1380px; margin-inline: auto; width: 100%; }
.sub-cols { display: grid !important; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 5vw, 90px); align-items: start; max-width: 1380px; margin-inline: auto; width: 100%; }
@media (max-width: 900px) { .sub-cols { grid-template-columns: 1fr; } }
.sub-body p { font-size: 16px; line-height: 1.75; color: #4a4239; margin: 0 0 16px; max-width: 62ch; }

/* Leistungslisten (Haekchen) */
.sub-list .elementor-icon-list-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.sub-list .elementor-icon-list-icon { margin-right: 12px; }
.sub-list .elementor-icon-list-icon img, .sub-list .elementor-icon-list-icon svg { width: 17px; height: 17px; }
.sub-list .elementor-icon-list-icon svg { stroke: var(--teal-deep); fill: none; }
/* Helle Unterseiten: d3-Zwischentitel in Tinte statt Creme */
.sub-sec .d3 .elementor-heading-title { color: var(--ink); }
.sub-list .elementor-icon-list-text { font-size: 15.5px; color: var(--ink); line-height: 1.5; }

/* Hinweis-Box (z. B. Foerderung barrierefreie Baeder) */
.note-box {
  margin-top: 26px; padding: 22px 26px; border-radius: 18px;
  background: rgba(72, 179, 167, .09); border: 1.5px solid rgba(47, 125, 116, .35);
}
.note-box .nb-h .elementor-heading-title { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.note-box p { font-size: 14.5px; line-height: 1.65; color: #4a4239; margin: 8px 0 0; }

/* Themenblock-Karten (Regenerative Energien) */
.topic {
  padding: clamp(24px, 3vw, 40px); border-radius: 22px;
  background: var(--paper); border: 1px solid var(--line);
}
.topic + .topic { margin-top: 18px !important; }
.topic .tp-h .elementor-heading-title { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); color: var(--ink); }
.topic .tp-tag { display: inline-block; margin-bottom: 10px; padding: 5px 13px; border-radius: 100px; background: rgba(72,179,167,.14); border: 1px solid rgba(47,125,116,.3); color: var(--teal-deep); font-size: 12px; font-weight: 700; }
.topic p { font-size: 15px; line-height: 1.7; color: #4a4239; }
.tp-sub .elementor-heading-title {
  margin-top: 20px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep);
}
.topic.tp-hero { background: var(--ink); border-color: var(--ink); }
.topic.tp-hero .tp-h .elementor-heading-title, .topic.tp-hero p { color: var(--cream); }
.topic.tp-hero p { color: var(--sub-l); }

/* FAQ — offen sichtbar, zitierfaehig */
.faq-sec { background: var(--paper); }
.faq-item { padding: 24px 0 !important; border-bottom: 1px solid var(--line); max-width: 860px; }
.faq-q .elementor-heading-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); color: var(--ink); }
.faq-a { margin-top: 10px !important; }
.faq-a p { font-size: 15px; line-height: 1.7; color: #4a4239; max-width: 70ch; margin: 0; }

/* CTA-Band am Seitenende */
.sub-cta {
  max-width: 1380px; margin-inline: auto; width: 100%;
  background: var(--ink); border-radius: 28px;
  padding: clamp(36px, 5vw, 64px) !important;
  display: flex !important; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 24px;
}
.sub-cta .sc-h .elementor-heading-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); color: var(--cream); max-width: 18ch; }
.sub-cta .sc-note { color: var(--sub-l); font-size: 14px; margin-top: 8px; }
.sub-cta-btns { display: flex !important; flex-direction: row; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   LEISTUNGSSEITE: INTRO-SPLIT (.ix) — Muster fuer alle Leistungsseiten
   Links Bildcollage (gross + kleines versetzt mit Rahmen in Flaechenfarbe,
   ergibt die Aussparung), rechts Headline, fetter Lead, Fliesstext, 2 CTAs.
   Beide Bilder sind native Container-Hintergruende (im Editor tauschbar).
   ========================================================================== */
.ix {
  display: grid !important; grid-template-columns: 1.08fr .92fr;
  gap: clamp(40px, 6vw, 110px); align-items: center;
  max-width: 1380px; margin-inline: auto; width: 100%;
}
.ix > .e-con-inner { display: contents; }

.ix-media { position: relative; display: block !important; padding: 0 0 12% 0 !important; }
.ix-a {
  display: block !important; width: 80%; aspect-ratio: 1.26 / 1;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 34px 70px -34px rgba(27,20,16,.35);
}
.ix-b {
  position: absolute !important; right: 0; bottom: 0;
  display: block !important; width: 44%; aspect-ratio: .87 / 1;
  border-radius: 22px; overflow: hidden;
  border: clamp(10px, 1.1vw, 16px) solid var(--cream);
  box-shadow: 0 30px 60px -30px rgba(27,20,16,.4);
}

.ix-copy { display: block !important; }
.ix-copy .d2 .elementor-heading-title { color: var(--ink); max-width: 15ch; }
.ix-lead { margin-top: clamp(22px, 2.4vw, 32px) !important; }
.ix-lead p { font-size: clamp(1rem, .96rem + .25vw, 1.12rem); font-weight: 600; line-height: 1.65; color: var(--ink); margin: 0; max-width: 54ch; }
.ix-body { margin-top: 18px !important; }
.ix-body p { font-size: 15.5px; line-height: 1.75; color: #6b6259; margin: 0 0 12px; max-width: 54ch; }
.ix-body p:last-child { margin-bottom: 0; }
.ix-btns {
  margin-top: clamp(26px, 3vw, 38px) !important;
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 14px;
}
.ix-btns > .elementor-widget { width: auto !important; }
.ix-btns .btn-el .elementor-button { padding: 17px 26px; font-size: 15px; }

@media (max-width: 900px) {
  .ix { grid-template-columns: 1fr; }
  .ix-media { max-width: 560px; }
}

/* ==========================================================================
   LEISTUNGSSEITE: KENNZAHLEN + DUNKLE LEISTUNGSSEKTION + GALERIE (.bx)
   Drei Root-Sektionen mit Verlaufs-Hintergruenden, damit Karte und
   Galerie jeweils ueber die Kante zwischen Hell und Dunkel ragen.
   ========================================================================== */

/* 1) Kennzahlen-Karte: halb auf Creme, halb auf Tinte */
.bx-stats-wrap {
  background: linear-gradient(to bottom, var(--cream) 0 50%, var(--ink) 50% 100%) !important;
  padding: 0 clamp(20px, 4vw, 56px) !important;
}
.bx-stats {
  max-width: 1380px; margin-inline: auto; width: 100%;
  background: linear-gradient(135deg, #2f7d74 0%, #27695f 100%);
  border-radius: 22px;
  padding: clamp(44px, 5vw, 76px) clamp(24px, 4vw, 64px) !important;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.55);
  display: block !important; text-align: center;
}
.bx-intro p {
  margin: 0 auto; max-width: 60ch;
  font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 1.7;
  color: rgba(255,255,255,.88);
}
.bx-nums {
  margin: clamp(30px, 3.4vw, 46px) auto 0 !important; max-width: 940px;
  display: grid !important; grid-template-columns: repeat(3, 1fr);
}
.bx-num { display: block !important; padding: 0 clamp(12px, 2vw, 28px) !important; }
.bx-num + .bx-num { border-left: 1px solid rgba(255,255,255,.32); }
.bx-num .elementor-counter { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bx-num .elementor-counter-number-wrapper { order: 1; }
.bx-num .elementor-counter-title { order: 2; }
.bx-num .elementor-counter-number-wrapper {
  justify-content: center; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4.2rem); line-height: 1; color: #fff;
}
.bx-num .elementor-counter-title {
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.4;
  color: #fff; text-align: center; max-width: 18ch;
}

/* 2) Dunkle Leistungssektion */
.bx-dark {
  background: var(--ink) !important;
  padding: clamp(72px, 8vw, 120px) clamp(20px, 4vw, 56px) clamp(64px, 7vw, 104px) !important;
}
.bx-dark .bx-in { max-width: 1380px; margin-inline: auto; width: 100%; display: block !important; }
.bx-dark .kicker .elementor-heading-title { color: var(--teal); }
.bx-dark .d2 { margin-top: 18px !important; }
.bx-dark .d2 .elementor-heading-title { color: var(--cream); max-width: 20ch; }
.bx-feats {
  margin-top: clamp(48px, 5.5vw, 80px) !important;
  display: grid !important; grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 3.4vw, 56px);
}
.bx-feat .elementor-icon-box-wrapper { text-align: left !important; display: block !important; }
.bx-feat .elementor-icon-box-icon { margin: 0 0 22px !important; display: block !important; text-align: left !important; }
.bx-feat .elementor-icon-box-content { text-align: left !important; }
.bx-feat .elementor-icon { font-size: 0; }
.bx-feat .elementor-icon svg {
  width: 52px; height: 52px; fill: none; stroke: var(--teal); stroke-width: 1.4;
}
.bx-feat .elementor-icon-box-title { margin: 0 0 12px; }
.bx-feat .elementor-icon-box-title, .bx-feat .elementor-icon-box-title a {
  font-family: var(--serif); font-weight: 450; font-size: clamp(1.15rem, 1rem + .45vw, 1.35rem);
  line-height: 1.25; color: var(--cream);
}
.bx-feat .elementor-icon-box-description {
  font-size: 14.5px; line-height: 1.65; color: var(--sub-l); margin: 0;
}

/* 3) Galerie: Karten ragen aus Tinte in Creme */
.bx-gal-wrap {
  background: linear-gradient(to bottom, var(--ink) 0 62%, var(--cream) 62% 100%) !important;
  padding: 0 clamp(20px, 4vw, 56px) clamp(64px, 7vw, 104px) !important;
}
.bx-gal { position: relative; max-width: 1380px; margin-inline: auto; width: 100%; display: block !important; }
.bx-track {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bx-track::-webkit-scrollbar { display: none; }
.bx-card {
  position: relative; flex: 0 0 calc((100% - 48px) / 3) !important; min-width: 0;
  aspect-ratio: .87 / 1; border-radius: 18px; overflow: hidden;
  scroll-snap-align: start; display: block !important;
  box-shadow: 0 30px 60px -32px rgba(0,0,0,.5);
}
.bx-cap {
  position: absolute !important; left: 10%; right: 10%; bottom: 9%;
  background: var(--paper); border-radius: 12px;
  padding: 20px 24px !important; display: block !important;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .4s var(--e-out);
}
.bx-card:hover .bx-cap, .bx-card:focus-within .bx-cap { opacity: 1; transform: none; }
@media (hover: none) { .bx-cap { opacity: 1; transform: none; } }
.bx-cat .elementor-heading-title { font-size: 12.5px; font-weight: 600; color: var(--teal-deep); font-family: var(--sans); }
.bx-cap-h { margin-top: 6px !important; }
.bx-cap-h .elementor-heading-title { font-family: var(--serif); font-weight: 450; font-size: 1.2rem; line-height: 1.25; color: var(--ink); }

/* Pfeile */
.bx-navw { position: static !important; }
.bx-prev, .bx-next {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.45);
  transition: transform .25s var(--e-out), background .2s;
}
.bx-prev { left: -27px; background: var(--teal-deep); color: #fff; }
.bx-next { right: -27px; background: var(--paper); color: var(--ink); }
.bx-prev:hover, .bx-next:hover { transform: translateY(-50%) scale(1.06); }
.bx-prev svg, .bx-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.bx-prev:focus-visible, .bx-next:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

@media (max-width: 1024px) {
  .bx-feats { grid-template-columns: repeat(2, 1fr); }
  .bx-card { flex-basis: calc((100% - 24px) / 2) !important; }
}
@media (max-width: 760px) {
  .bx-nums { grid-template-columns: 1fr; gap: 26px; }
  .bx-num + .bx-num { border-left: 0; border-top: 1px solid rgba(255,255,255,.32); padding-top: 26px !important; }
  .bx-feats { grid-template-columns: 1fr; }
  .bx-card { flex-basis: 78vw !important; }
  .bx-prev, .bx-next { display: none; }
}

/* ==========================================================================
   THEME-PINK NEUTRALISIEREN
   Hello Elementor (reset.css) setzt #c36 (Pink) fuer Links sowie Rahmen,
   Schrift und Hover/Fokus aller Buttons, dazu #336 (Navy) fuer Link-Hover.
   Beides ist nicht CI — gleiche Selektoren, spaeter geladen, CI-Rot.
   ========================================================================== */
a { color: var(--red-deep); }
a:active, a:hover { color: var(--red-deep); }
/* Nur ungestylte Buttons (ohne Klasse) bekommen CI-Rot als Grundfarbe —
   gestaltete Buttons behalten ihre eigenen Farben. */
button:not([class]), [type=button]:not([class]), [type=submit]:not([class]) { border-color: var(--red); color: var(--red); }
button:not([class]):hover, button:not([class]):focus,
[type=button]:not([class]):hover, [type=button]:not([class]):focus,
[type=submit]:not([class]):hover, [type=submit]:not([class]):focus { background-color: var(--red); color: #fff; }
/* Gestaltete Buttons ohne eigenen Fokus-Zustand: Theme-Pink im Fokus abfangen */
.kr-done__again:focus:not(:hover) { background: transparent; color: var(--ink); }

/* Galerie-Pfeile: Hover in CI-Rot, nach dem Klick zurueck zur Grundfarbe */
.bx-prev:hover, .bx-next:hover { background: var(--red); color: #fff; }
.bx-prev:focus:not(:hover) { background: var(--teal-deep); color: #fff; }
.bx-next:focus:not(:hover) { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   LEISTUNGSSEITE: ARBEITS-GALERIE (.wg) — Bento-Raster, 5 Kacheln
   Links hoch ueber zwei Reihen, rechts zwei gegenlaeufig versetzte Reihen
   (breit+schmal / schmal+breit). Bildunterschrift beim Hover mit Verlauf.
   ========================================================================== */
.wg-head { max-width: 900px; margin-inline: auto; width: 100%; text-align: center; display: block !important; }
.wg-head .kicker .elementor-heading-title { justify-content: center; }
.wg-head .d2 { margin-top: 18px !important; }
.wg-head .d2 .elementor-heading-title { color: var(--ink); }

.wg {
  max-width: 1380px; width: 100%; margin: clamp(36px, 4vw, 60px) auto 0 !important;
  display: grid !important;
  grid-template-columns: 1.36fr 1fr .64fr 1fr;
  grid-template-rows: repeat(2, clamp(200px, 22vw, 330px));
  grid-template-areas: "a b b c" "a d e e";
  gap: clamp(14px, 1.6vw, 24px);
}
.wg > .e-con-inner { display: contents; }
.wg-a { grid-area: a; } .wg-b { grid-area: b; } .wg-c { grid-area: c; }
.wg-d { grid-area: d; } .wg-e { grid-area: e; }

.wg-tile {
  position: relative; display: block !important; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 50px -30px rgba(27,20,16,.35);
}
.wg-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(27,20,16,.72) 0%, rgba(27,20,16,0) 52%);
  opacity: 0; transition: opacity .35s;
}
.wg-cap {
  position: absolute !important; left: clamp(18px, 2vw, 30px); right: clamp(18px, 2vw, 30px);
  bottom: clamp(16px, 1.8vw, 26px); z-index: 1;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--e-out);
}
.wg-cap .elementor-heading-title { font-family: var(--sans); font-weight: 600; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.3; color: #fff; }
.wg-tile:hover::after, .wg-tile:focus-within::after { opacity: 1; }
.wg-tile:hover .wg-cap, .wg-tile:focus-within .wg-cap { opacity: 1; transform: none; }
@media (hover: none) {
  .wg-tile::after { opacity: 1; }
  .wg-cap { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .wg {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 200px 170px 200px;
    grid-template-areas: "a a" "b b" "c d" "e e";
  }
}

/* Foerder-Hinweis in der dunklen Leistungssektion: Titel links, Text rechts */
.bx-dark .note-box {
  margin-top: clamp(44px, 5vw, 72px) !important;
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 44px) !important;
  background: rgba(72,179,167,.08); border: 1px solid rgba(72,179,167,.42); border-radius: 20px;
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 14px clamp(28px, 4vw, 64px); align-items: start;
}
.bx-dark .note-box > .e-con-inner { display: contents; }
.bx-dark .note-box .nb-h .elementor-heading-title {
  font-family: var(--serif); font-weight: 450; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  line-height: 1.25; color: var(--cream);
}
.bx-dark .note-box p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sub-l); max-width: 68ch; }
@media (max-width: 760px) {
  .bx-dark .note-box { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEISTUNGSSEITE: FAQ (.fq) — Bildcollage links (wie .ix), rechts Pill,
   Headline und natives Elementor-Akkordeon als helle Karten.
   ========================================================================== */
.fq {
  display: grid !important; grid-template-columns: .9fr 1.1fr;
  gap: clamp(40px, 6vw, 110px); align-items: center;
  max-width: 1380px; margin-inline: auto; width: 100%;
}
.fq > .e-con-inner { display: contents; }
.faq-sec .ix-b { border-color: var(--paper); }
.fq-copy { display: block !important; }

.fq-pill .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(72,179,167,.14); border: 1px solid rgba(47,125,116,.28);
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--teal-deep);
}
.fq-pill .elementor-heading-title::after { content: "›"; font-size: 15px; line-height: 1; }
.fq-copy .d2 { margin-top: 16px !important; }
.fq-copy .d2 .elementor-heading-title { color: var(--ink); max-width: 16ch; }

.fq-acc { margin-top: clamp(26px, 3vw, 38px) !important; }
.fq-acc .e-n-accordion { display: flex; flex-direction: column; gap: 12px; }
.fq-acc .e-n-accordion-item {
  background: #fff; border: 0 !important; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 30px -22px rgba(27,20,16,.3);
}
.fq-acc .e-n-accordion-item-title {
  display: flex !important; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px !important; border: 0 !important; background: transparent !important; cursor: pointer;
  list-style: none;
}
.fq-acc .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.fq-acc .e-n-accordion-item-title-text {
  font-family: var(--sans); font-weight: 600; font-size: clamp(15px, .95rem + .1vw, 16.5px);
  line-height: 1.4; color: var(--ink); margin: 0;
}
.fq-acc .e-n-accordion-item-title-icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  background: rgba(27,20,16,.06); color: var(--ink); transition: background .25s, color .25s;
}
.fq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: var(--teal); color: #fff; }
.fq-acc .e-n-accordion-item-title-icon svg,
.fq-acc .e-n-accordion-item-title-icon svg path { width: 16px; height: 16px; fill: none !important; stroke: currentColor !important; }
.fq-acc .e-n-accordion-item > .e-con { padding: 0 22px 22px !important; border: 0 !important; }
.fq-acc .e-n-accordion-item > .e-con p { margin: 0; font-size: 15px; line-height: 1.7; color: #574a3e; max-width: 62ch; }

@media (max-width: 900px) {
  .fq { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEISTUNGSSEITE: CTA-BILDKACHEL (.cta-img) — Firmengebaeude als Bild,
   links hell auslaufender Verlauf, Text + Buttons links.
   ========================================================================== */
.cta-img {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1380px; margin-inline: auto; width: 100%;
  border-radius: 26px; min-height: clamp(320px, 30vw, 430px);
  display: flex !important; flex-direction: row !important; align-items: center;
  padding: clamp(36px, 5vw, 76px) !important;
  box-shadow: 0 34px 70px -40px rgba(27,20,16,.45);
}
.cta-img::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(244,238,229,.97) 0%, rgba(244,238,229,.92) 30%, rgba(244,238,229,.6) 52%, rgba(244,238,229,0) 76%);
}
.cta-copy { position: relative; z-index: 1; max-width: 540px; display: block !important; }
.cta-img .sc-h .elementor-heading-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  line-height: 1.12; color: var(--ink); max-width: 16ch;
}
.cta-img .sc-note { color: #574a3e; font-size: 15px; margin-top: 10px; }
.cta-img .sub-cta-btns {
  margin-top: clamp(22px, 2.6vw, 32px) !important;
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 14px;
}
.cta-img .sub-cta-btns > .elementor-widget { width: auto !important; }

@media (max-width: 760px) {
  .cta-img::before { background: linear-gradient(180deg, rgba(244,238,229,.96) 0%, rgba(244,238,229,.9) 60%, rgba(244,238,229,.55) 100%); }
}

/* CTA-Sektion uebernimmt den Papier-Ton der FAQ davor — kein Farbwechsel,
   kein doppelter Abstand zwischen beiden */
.sub-sec.cta-sec { background: var(--paper) !important; padding-top: 0 !important; }
/* Grenze liegt oft auf einem Subpixel: dort schimmert der dunkle Body als
   Haarlinie durch. 1px Ueberlappung schliesst die Naht. */
.sub-sec.cta-sec { margin-top: -1px !important; position: relative; }

/* ==========================================================================
   SEITENKOPF IM MEISTERLEISTUNG-LOOK (.sh-band)
   Gleiche Abdunkelung und Typografie wie die Band-Sektion der Startseite.
   ========================================================================== */
.sub-hero.sh-band { padding-top: clamp(130px, 11vw, 160px) !important; padding-bottom: 35px !important; }
.sub-hero.sh-band::before {
  background: linear-gradient(100deg, rgba(27,20,16,.93) 4%, rgba(27,20,16,.62) 52%, rgba(27,20,16,.34) 100%);
}
.sh-band .kicker .elementor-heading-title { color: var(--teal); }
.sh-band .sub-h1 { margin-top: 24px !important; }
.sh-band .sub-h1 .elementor-heading-title {
  font-family: var(--serif); font-weight: 420; letter-spacing: -.016em;
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.08;
  color: var(--cream); max-width: 21ch; text-wrap: balance;
}
.sh-band .sub-h1 em { font-style: italic; font-weight: 340; color: var(--red); }
.sh-band .sub-lead { margin-top: 26px !important; }
.sh-band .sub-lead p { max-width: 60ch; }

/* Telefonnummern nie umbrechen; Links in der dunklen Hinweis-Box in Creme
   (CI-Rot auf Dunkel unterschreitet 4,5:1) */
a[href^="tel:"] { white-space: nowrap; }
.bx-dark .note-box a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.bx-dark .note-box a:hover, .bx-dark .note-box a:focus { color: var(--teal); }

/* Muster-Varianten der Restseiten: 6 Punkte im 3er-Raster (Foerderung),
   Links in der dunklen Sektion (Kontakt), CTA direkt nach dunkler Sektion */
.bx-feats.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .bx-feats.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .bx-feats.c3 { grid-template-columns: 1fr; } }
.bx-feat .elementor-icon-box-description a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.bx-feat .elementor-icon-box-description a:hover, .bx-feat .elementor-icon-box-description a:focus { color: var(--teal); }
.bx-dark + .sub-sec.cta-sec { padding-top: clamp(56px, 6vw, 96px) !important; margin-top: 0 !important; }
#stellen { scroll-margin-top: 40px; }

/* ==========================================================================
   TEAM-KACHELN (Ueber uns)
   Foto als Hintergrundbild von .tm-photo; bis Fotos da sind, steht der
   Anfangsbuchstabe (.tm-ini) als Platzhalter.
   ========================================================================== */
.tm-sec { padding-top: 0 !important; }
.tm-head, .tm-grid { max-width: 1380px; margin-inline: auto; width: 100%; }
.tm-head { display: block !important; }
.tm-head .d2 { margin-top: 18px !important; }
.tm-head .d2 .elementor-heading-title { color: var(--ink); }
.tm-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin-top: clamp(36px, 4vw, 56px) !important;
}
.tm-card {
  background: #fff; border-radius: 22px; overflow: hidden;
  display: flex !important; flex-direction: column !important;
  box-shadow: 0 1px 0 rgba(27,20,16,.05), 0 22px 44px -32px rgba(27,20,16,.45);
}
.tm-photo {
  aspect-ratio: 4 / 3.3; background-color: var(--teal-deep);
  background-image: linear-gradient(150deg, #34887e 0%, #24635c 100%);
  background-size: cover; background-position: center 20%;
  display: flex !important; align-items: center; justify-content: center;
}
.tm-ini .elementor-heading-title {
  font-family: var(--serif); font-style: italic; font-weight: 340; line-height: 1;
  font-size: clamp(3.2rem, 4.6vw, 4.4rem); color: var(--cream); opacity: .92;
}
.tm-body { padding: 24px 24px 28px !important; display: block !important; }
.tm-role .elementor-heading-title {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-deep);
}
.tm-name { margin-top: 8px !important; }
.tm-name .elementor-heading-title { font-family: var(--serif); font-weight: 450; font-size: 1.4rem; line-height: 1.2; color: var(--ink); }
.tm-p { margin-top: 10px !important; }
.tm-p p { font-size: 14.5px; line-height: 1.6; color: #574a3e; margin: 0; }
@media (max-width: 1024px) { .tm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .tm-grid { grid-template-columns: 1fr; gap: 16px; }
  .tm-card { flex-direction: row !important; flex-wrap: nowrap !important; }
  .tm-card > .tm-body { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .tm-card > .tm-photo { aspect-ratio: auto; width: 96px !important; flex: 0 0 96px !important; }
  .tm-ini .elementor-heading-title { font-size: 2.6rem; }
  .tm-body { padding: 18px 18px 20px !important; }
}
/* Startseiten-Sektion (.shell) nach heller Unterseiten-Sektion: keine runden
   Ecken, sonst scheint der dunkle Body in den Ecken durch */
.sub-sec + .shell { border-radius: 0 !important; margin-top: 0 !important; }

/* Team: Montage-Kachel unter den Ansprechpartnern */
.tm-crew {
  max-width: 1380px; width: 100%; margin: 22px auto 0 !important;
  border-radius: 22px; overflow: hidden; position: relative; isolation: isolate;
  min-height: clamp(300px, 30vw, 400px);
  display: flex !important; flex-direction: row !important; align-items: center;
  background-position: center 30% !important;
}
.tm-crew::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(27,20,16,.92) 0%, rgba(27,20,16,.74) 42%, rgba(27,20,16,.12) 80%);
}
.tm-crew-tx { position: relative; z-index: 1; max-width: 580px; padding: clamp(28px, 4vw, 56px) !important; display: block !important; }
.tm-crew .kicker .elementor-heading-title { color: var(--teal); }
.tm-crew-h { margin-top: 16px !important; }
.tm-crew-h .elementor-heading-title {
  font-family: var(--serif); font-weight: 420; letter-spacing: -.01em;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.12; color: var(--cream);
}
.tm-crew-h em { font-style: italic; font-weight: 340; color: var(--red); }
.tm-crew-p { margin-top: 14px !important; }
.tm-crew-p p { font-size: 15.5px; line-height: 1.7; color: var(--sub-l); margin: 0; }
@media (max-width: 760px) {
  .tm-crew { min-height: 460px; align-items: flex-end; margin-top: 16px !important; }
  .tm-crew::before { background: linear-gradient(180deg, rgba(27,20,16,.15) 0%, rgba(27,20,16,.86) 34%, rgba(27,20,16,.95) 100%); }
}

/* ==========================================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   ========================================================================== */
.lg-sec { padding-top: clamp(48px, 6vw, 88px) !important; }
.lg { max-width: 1380px; width: 100%; margin-inline: auto; display: block !important; }
.lg-text h2 {
  font-family: var(--serif); font-weight: 450; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
  line-height: 1.25; color: var(--ink); margin: 40px 0 10px; max-width: 72ch;
}
.lg-text h2:first-child { margin-top: 0; }
.lg-text p, .lg-text ul { font-size: 16px; line-height: 1.7; color: #3f362d; margin: 0 0 12px; max-width: 72ch; }
.lg-text ul { padding-left: 1.2em; }
.lg-text li { margin-bottom: 4px; }
.lg-text a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lg-text mark { background: #ffe9a8; color: var(--ink); padding: .1em .3em; }
.kr-ds-note { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; }
.kr-ds-note a { text-decoration: underline; text-underline-offset: 3px; }

/* Kontaktseite: Formularbereich direkt nach dem Kopfbereich */
.sub-hero + .shell-dark { margin-top: 0 !important; border-radius: 0 !important; }

/* Footer: Rechtslinks und Webseiten-Hinweis duerfen umbrechen */
.ft-legal .elementor-icon-list-items { flex-wrap: wrap; }
.ft-legal .elementor-icon-list-item { white-space: nowrap; }

/* Footer unten: Copyright und Rechtslinks, darunter KI-Hinweis und Webseiten-Hinweis */
[data-elementor-type="footer"] .ft-bottom { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 32px; row-gap: 8px; }
.ft-bottom .ft-ai { margin-top: 0 !important; width: auto; }
.ft-credit { padding-left: 10px; }
.ft-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ft-credit a:hover { color: var(--cream); }
@media (max-width: 767px) {
  [data-elementor-type="footer"] .ft-bottom { grid-template-columns: minmax(0, 1fr); }
  .ft-credit { padding-left: 0; }
}


/* WCAG 2.2 AA: Lesbarkeit auf hellem und dunklem Grund, Pre-Launch 05.11.2026 */
.shell .kicker.red .elementor-heading-title, .sub-sec .kicker.red .elementor-heading-title { color: var(--red-deep); }
.shell .kicker.teal .elementor-heading-title, .sub-sec .kicker.teal .elementor-heading-title { color: var(--teal-deep); }
.shell-dark .kicker.red .elementor-heading-title { color: #ff6b75; }
.shell-dark .kicker.teal .elementor-heading-title { color: var(--teal); }
.tl-yr .elementor-heading-title { color: var(--red-deep); }
main#content:focus { outline: none !important; box-shadow: none !important; }
.ft-legal .elementor-icon-list-item a { display: inline-block; min-height: 24px; line-height: 24px; }