/* =====================================================================
   Specter – Theme-Stylesheet
   Tokens kommen aus theme.json (--wp--preset--*). Hier: Layout, Bausteine,
   Bewegung. Mobil zuerst, Strukturwechsel bei 640 / 900 / 1100 px.
   ===================================================================== */

:root {
  --sp-ease: cubic-bezier(.16, 1, .3, 1);
  --sp-ease-io: cubic-bezier(.65, .01, .05, .99);
  --sp-gutter: clamp(20px, 4vw, 56px);
  --sp-header-h: 72px;
  --sp-accent: var(--wp--preset--color--accent);
  --sp-ink: var(--wp--preset--color--ink);
  --sp-grey: var(--wp--preset--color--grey);
  --sp-line: var(--wp--preset--color--line);
  --sp-mist: var(--wp--preset--color--mist);
  --sp-night: var(--wp--preset--color--night);
  --sp-serif: var(--wp--preset--font-family--serif);
  --sp-sans: var(--wp--preset--font-family--sans);
}
html { scroll-padding-top: calc(var(--sp-header-h) + 8px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; }
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; transition: color .3s var(--sp-ease); }
p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
p a:hover { text-decoration-color: currentColor; }
::selection { background: var(--sp-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; }

/* Eingeloggte Admins: Hero direkt unter der Admin-Leiste, kein heller Streifen */
html { margin-top: 0 !important; }
/* Kein Blockabstand zwischen Kopfzeile, Inhalt und Fußzeile (sonst weißer Streifen über dem Hero) */
.wp-site-blocks > * { margin-block-start: 0 !important; }
.wp-site-blocks > .sp-main, .wp-site-blocks > main { margin-block: 0 !important; }

/* Root-Padding der Hauptspalte: Sektionen gehen voll, Inhalte laufen im Wide-Raster */
.sp-main { padding: 0; }
.sp-main > .wp-block-post-content > * { margin-block: 0; }
.sp-section { padding-block: clamp(48px, 6vw, 84px); }
.sp-section + .sp-section { margin-top: 0; }

.sp-section.alignfull { padding-left: var(--sp-gutter); padding-right: var(--sp-gutter); }
.sp-main > .wp-block-post-content > .alignfull,
.sp-main .sp-section.alignfull { margin-left: calc(-1 * var(--sp-gutter)); margin-right: calc(-1 * var(--sp-gutter)); width: auto; max-width: none; }
.sp-main > .wp-block-post-content { padding-inline: var(--sp-gutter); }
.sp-main--seite { padding: calc(var(--sp-header-h) + clamp(24px, 5vw, 56px)) var(--sp-gutter) 0; }
.sp-seitenkopf.alignwide { margin-left: auto; margin-right: auto; }
.sp-main--projekt { padding: var(--sp-header-h) var(--sp-gutter) 0; }
.sp-seitenkopf { padding-bottom: clamp(28px, 4vw, 48px); }
.sp-seitenkopf .sp-lede { margin-top: 18px; }
.sp-seitenkopf__titel { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.4rem); max-width: 20ch; text-wrap: balance; }
.sp-seitenkopf__meta { font-size: .8125rem; color: var(--sp-grey); }

/* Eigene Raster: keinen Fluss-Abstand von WordPress auf die Kinder (sonst steht das erste Element höher) */
.sp-stats > *, .sp-steps > *, .sp-index__list > *, .sp-ziele__list > *, .sp-timeline > *, .sp-faq__list > *, .sp-overview > *, .sp-team__grid > *, .sp-vorteile__grid > *, .sp-projekte__grid > *, .sp-index__media > *, .sp-hero__band > *, .sp-eckdaten__row > * { margin-block-start: 0 !important; }
.sp-faq__list > * + * { margin-block-start: 0 !important; }

/* -------- Typografie-Bausteine -------- */
.sp-kicker, .sp-card__kicker, .sp-person__rolle, .sp-overview__label, .sp-eckdaten__label, .sp-footer__head {
  font-family: var(--sp-sans); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
}
.sp-kicker { color: var(--sp-accent); margin-bottom: 18px; }
.sp-kicker--status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 0 8px 2px 0; }
.sp-h1 { font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.8rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 500; max-width: 17ch; text-wrap: balance; }
.sp-h2 { font-size: clamp(1.8rem, 1.2rem + 2.3vw, 3rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 500; max-width: 20ch; text-wrap: balance; }
.sp-lede { font-size: clamp(1.06rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--sp-grey); max-width: 34em; text-wrap: pretty; }
.sp-kicker + .sp-h2, .sp-kicker + .sp-h1 { margin-top: 0; }
.sp-h2 + .sp-lede, .sp-h1 + .sp-lede { margin-top: 22px; }
.sp-small { font-size: .875rem; line-height: 1.6; color: var(--sp-grey); }
.sp-textlink a, .sp-textlink a:visited {
  display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-ink); text-decoration: none; position: relative; padding-bottom: 6px;
}
.sp-textlink a::after { content: "→"; font-family: var(--sp-sans); transition: transform .5s var(--sp-ease); }
.sp-textlink a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.35); transform-origin: left; transition: transform .6s var(--sp-ease); }
.sp-textlink a:hover { color: var(--sp-accent); }
.sp-textlink a:hover::before { transform: scaleX(1); }
.sp-textlink a:hover::after { transform: translateX(4px); }
.sp-sechead { margin-bottom: clamp(28px, 4vw, 48px); }
.sp-sechead .sp-lede, .sp-sechead__lede { margin-top: 18px; }
.sp-sechead__lede { max-width: 30em; }
.sp-sechead--dark .sp-kicker { color: #9FB0F0; }
.sp-sechead--dark .sp-lede { color: rgba(255,255,255,.72); }
.sp-prose p { max-width: 38em; color: var(--sp-ink); line-height: 1.7; font-size: 1.0625rem; }
.sp-prose p + p { margin-top: 1.1em; }
.sp-prose--frei { margin-top: 1.4em; }
.sp-prose--frei p:empty { display: none; }
.sp-split { gap: clamp(28px, 5vw, 80px) !important; }
.sp-sticky { position: sticky; top: calc(var(--sp-header-h) + 32px); }

/* Buttons: eckig, Versalien, dünne Linie */
.wp-block-button__link, .sp-btn { border-radius: 0; box-shadow: none; transition: background .4s var(--sp-ease), color .4s var(--sp-ease), border-color .4s var(--sp-ease), transform .4s var(--sp-ease); }
.wp-block-button__link:hover, .sp-btn:hover { transform: translateY(-1px); }
.wp-block-button__link:focus-visible, .sp-btn:focus-visible, .wp-block-button__link:active, .sp-btn:active { outline: 2px solid currentColor; outline-offset: 3px; box-shadow: inset 0 0 0 1px #fff; }
.sp-nav .sp-nav-cta > .wp-block-navigation-item__content:active, .sp-nav .sp-nav-cta > .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .sp-nav-cta > .wp-block-navigation-item__content:active, .sp-nav .wp-block-navigation__responsive-container.is-menu-open .sp-nav-cta > .wp-block-navigation-item__content:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--sp-ink); border: 1px solid var(--sp-ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--sp-ink); color: #fff; }
.wp-block-button.is-style-light .wp-block-button__link { background: #fff; color: var(--sp-ink); border-color: #fff; }
.wp-block-button.is-style-light .wp-block-button__link:hover { background: var(--sp-accent); color: #fff; border-color: var(--sp-accent); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #fff; color: var(--sp-ink); border-color: #fff; }
.wp-block-buttons { gap: 12px; }

/* -------- Kopfzeile -------- */
.wp-block-template-part:has(> .sp-header) { position: relative; z-index: 100; }
.sp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px var(--sp-gutter); transition: background .5s var(--sp-ease), border-color .5s var(--sp-ease), padding .5s var(--sp-ease); border-bottom: 1px solid transparent; }
.sp-header.alignfull { margin: 0; width: auto; max-width: none; }
.admin-bar .sp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sp-header { top: 46px; } }
.sp-header__bar { width: 100%; max-width: var(--wp--style--global--wide-size); margin: 0 auto; }
.sp-header.is-solid { background: #fff; border-color: var(--sp-line); padding-block: 10px; }
/* Offenes Mobilmenü: kein backdrop-filter, sonst wird das fixierte Overlay an der Kopfzeile festgehalten */
.sp-header.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open { top: 0; }
.admin-bar .sp-nav .wp-block-navigation__responsive-container.is-menu-open { top: 46px; }
.sp-brand { flex: 0 0 auto; }
.sp-brand a, .wp-block-site-logo a { display: inline-flex; line-height: 0; position: relative; }
.wp-block-site-logo img.sp-logo, .sp-logo { height: 42px; width: auto; max-width: none; transition: height .45s var(--sp-ease), opacity .35s var(--sp-ease); }
.sp-header.is-solid .wp-block-site-logo img.sp-logo { height: 34px; }
.sp-header .sp-logo--light { display: block; position: absolute; left: 0; top: 0; opacity: 0; }
.sp-header.is-light:not(.is-solid) .sp-logo--dark { opacity: 0; }
.sp-header.is-light:not(.is-solid) .sp-logo--light { opacity: 1; }
.sp-footer .sp-logo--light { display: block; }
.sp-footer .sp-logo--dark { display: none; }
/* Zusammengefasste Kopfzeile (Burger) bis 1099 px, damit nichts überlappt */
@media (max-width: 1179px) {
  .sp-nav .wp-block-navigation__responsive-container-open { display: flex !important; margin-left: auto !important; margin-right: -10px !important; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .sp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .sp-nav { flex: 0 0 auto !important; margin-left: auto; }
  .sp-header__bar { justify-content: space-between !important; flex-wrap: nowrap !important; }
}
.wp-block-site-logo img.sp-logo, .sp-logo { object-fit: contain; }
.sp-header .sp-brand, .sp-header .wp-block-site-logo { flex: 0 0 auto !important; min-width: 130px; }
.sp-nav { flex: 1 1 auto; }
.sp-nav .wp-block-navigation__container { width: 100%; justify-content: center; gap: clamp(18px, 2.4vw, 36px); position: relative; }
.sp-nav .wp-block-navigation-item__content { font-size: .8125rem; font-weight: 500; letter-spacing: .06em; color: var(--sp-ink); padding: 8px 0; position: relative; }
.sp-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--sp-ease); }
.sp-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after, .sp-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.sp-header.is-light:not(.is-solid) .sp-nav .wp-block-navigation-item__content, .sp-header.is-light:not(.is-solid) .sp-nav .wp-block-navigation__submenu-icon { color: #fff; }
.sp-nav .wp-block-navigation-item.sp-nav-cta { margin-left: auto; position: absolute; right: 0; }
.sp-nav .sp-nav-cta > .wp-block-navigation-item__content { border: 1px solid var(--sp-ink); padding: 11px 18px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; transition: background .4s var(--sp-ease), color .4s var(--sp-ease), border-color .4s var(--sp-ease); }
.sp-nav .sp-nav-cta > .wp-block-navigation-item__content::after { display: none; }
.sp-nav .sp-nav-cta:hover > .wp-block-navigation-item__content { background: var(--sp-ink); color: #fff; }
.sp-header.is-light:not(.is-solid) .sp-nav .sp-nav-cta > .wp-block-navigation-item__content { border-color: rgba(255,255,255,.7); }
.sp-header.is-light:not(.is-solid) .sp-nav .sp-nav-cta:hover > .wp-block-navigation-item__content { background: #fff; color: var(--sp-ink); border-color: #fff; }
/* Untermenü Projekte */
.sp-nav .wp-block-navigation__submenu-icon { margin-left: 4px; }
.sp-nav .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container { background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 24px 48px -24px rgba(11,15,26,.25); min-width: 300px; padding: 8px; left: -12px; top: 100%; margin-top: 10px; border-radius: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--sp-ease), transform .5s var(--sp-ease), visibility 0s linear .4s; visibility: hidden; }
.sp-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container, .sp-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container { opacity: 1; transform: none; visibility: visible; height: auto; overflow: visible; width: auto; transition-delay: 0s; }
.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--sp-ink) !important; padding: 8px 10px; display: flex; align-items: center; gap: 12px; width: 100%; font-size: .875rem; letter-spacing: 0; }
.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content { background: var(--sp-mist); }
.sp-nav .sp-nav-alle > .wp-block-navigation-item__content { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-accent) !important; border-bottom: 1px solid var(--sp-line); margin-bottom: 6px; padding-bottom: 12px; }
.sp-nav-projekt__img { width: 52px; height: 30px; object-fit: cover; flex: 0 0 auto; }
.sp-nav-projekt__text { display: flex; flex-direction: column; gap: 2px; }
.sp-nav-projekt__meta { font-size: .7rem; color: var(--sp-grey); letter-spacing: .02em; }
/* Mobiles Menü (Overlay des Navigation-Blocks) */
.sp-nav .wp-block-navigation__responsive-container-open, .sp-nav .wp-block-navigation__responsive-container-close { color: var(--sp-ink); }
.sp-header.is-light:not(.is-solid) .sp-nav .wp-block-navigation__responsive-container-open { color: #fff; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open { background: #fff; padding: calc(var(--sp-header-h) + 16px) var(--sp-gutter) 40px; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { --navigation-layout-justification-setting: flex-start; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: flex-start; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { width: 100%; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--sp-sans); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; color: var(--sp-ink) !important; padding: 8px 0; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 8px 0; min-width: 0; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-family: var(--sp-sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; padding: 8px 0; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .sp-nav-projekt__img { display: none; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .sp-nav-cta { position: static; margin: 18px 0 0; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .sp-nav-cta > .wp-block-navigation-item__content { font-family: var(--sp-sans); font-size: .8rem; letter-spacing: .14em; background: var(--sp-accent); color: #fff !important; border-color: var(--sp-accent); padding: 14px 22px; }
.sp-nav .wp-block-navigation__responsive-container-close { top: 20px; right: var(--sp-gutter); }

/* -------- Hero mit Scroll-Film -------- */
.sp-hero { position: relative; background: var(--sp-night); color: #fff; }
.sp-hero.alignfull { margin-left: calc(-1 * var(--sp-gutter)); margin-right: calc(-1 * var(--sp-gutter)); width: auto; max-width: none; }
/* ohne JS: Poster und Bänder untereinander */
.sp-hero__media { position: relative; }
.sp-hero__video { margin: 0; }
.sp-hero__video video { width: 100%; height: auto; }
.sp-hero__video--portrait, .sp-hero__ending { display: none; }
.sp-hero__band { padding: clamp(48px, 8vw, 96px) var(--sp-gutter); text-align: center; }
.sp-hero__title { color: #fff; font-size: clamp(3.2rem, 1.6rem + 8vw, 8.6rem); line-height: .98; letter-spacing: -.045em; font-weight: 500; max-width: none; margin: 0; }
.sp-hero__sub { color: rgba(255,255,255,.86); font-size: clamp(1rem, .92rem + .6vw, 1.35rem); letter-spacing: .005em; max-width: 36em; margin: 18px auto 0; line-height: 1.45; }
.sp-hero__sub--claim { font-size: clamp(1rem, .9rem + .7vw, 1.45rem); color: rgba(255,255,255,.9); margin-top: 22px; }
.sp-hero__logo { margin: 0 auto; }
.sp-hero__logo img { height: clamp(54px, 7.2vw, 96px); width: auto; margin: 0 auto; }
.sp-hero__cta { margin-top: 30px; }
/* mit JS: Bühne */
.sp-hero.is-scrub { height: 520vh; }
.sp-hero.is-scrub .sp-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sp-hero.is-scrub .sp-hero__media { position: absolute; inset: 0; }
.sp-hero.is-scrub .sp-hero__video, .sp-hero.is-scrub .sp-hero__ending { position: absolute; inset: 0; margin: 0; display: block; }
.sp-hero.is-scrub .sp-hero__video video, .sp-hero.is-scrub .sp-hero__ending img, .sp-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sp-hero__poster { background-size: cover; background-position: center; }
.sp-hero.is-scrub .sp-hero__video { opacity: 0; transition: opacity .8s var(--sp-ease); }
.sp-hero.is-scrub .sp-hero__video.is-active { opacity: 1; }
.sp-hero.is-scrub .sp-hero__ending { opacity: 0; }
.sp-hero__scrim { position: absolute; inset: 0; margin: 0 !important; background: linear-gradient(180deg, rgba(10,15,31,.30) 0%, rgba(10,15,31,.42) 55%, rgba(10,15,31,.66) 100%); pointer-events: none; }
.sp-hero__media > *, .sp-hero__stage > *, .sp-hero > * { margin-block-start: 0 !important; }
.sp-hero.is-scrub .sp-hero__band { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-gutter); opacity: 0; pointer-events: none; }
.sp-hero.is-scrub .sp-hero__band.on { pointer-events: auto; }
.sp-hero__band > .sp-hero__inner { max-width: 1100px; margin: 0 auto; }
.sp-hero__band .c, .sp-hero__band .w { display: inline-block; opacity: calc(clamp(0, (var(--k, 0) - var(--th, 0)) * 5, 1)); }
.sp-hero__band .w + .w { margin-left: .28em; }
.sp-hero.is-scrub .sp-hero__band--3 .sp-hero__logo, .sp-hero.is-scrub .sp-hero__band--3 .sp-hero__sub { opacity: var(--ks, 0); transform: translateY(calc((1 - var(--ks, 0)) * 10px)); }
.sp-hero.is-scrub .sp-hero__band--3 .sp-hero__cta { opacity: var(--kb, 0); transform: translateY(calc((1 - var(--kb, 0)) * 10px)); }
.sp-hero__ring { position: absolute; left: 50%; bottom: 28px; width: 40px; height: 40px; transform: translateX(-50%); color: rgba(255,255,255,.85); transition: opacity .6s; }
.sp-hero__ring circle { transition: stroke-dashoffset .25s linear; }
.sp-hero__cue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.7); opacity: 0; transition: opacity 1s var(--sp-ease) .4s; }
.sp-hero.is-scrub.video-ready .sp-hero__cue { opacity: 1; }
.sp-hero.is-scrub.video-ready .sp-hero__ring { opacity: 0; }
.sp-hero.is-scrub.video-ready .sp-hero__poster { opacity: 0; transition: opacity 1s var(--sp-ease); }
.sp-hero.is-scrub.is-past .sp-hero__cue { opacity: 0; }
/* statisch (Reduced Motion, Fehler): Endbild und letztes Band */
.sp-hero.is-static { min-height: 100vh; min-height: 100svh; display: grid; }
.sp-hero.is-static .sp-hero__media { position: absolute; inset: 0; }
.sp-hero.is-static .sp-hero__video { display: none; }
.sp-hero.is-static .sp-hero__ending { display: block; position: absolute; inset: 0; margin: 0; }
.sp-hero.is-static .sp-hero__ending img { width: 100%; height: 100%; object-fit: cover; }
.sp-hero.is-static .sp-hero__band--1, .sp-hero.is-static .sp-hero__band--2 { display: none; }
.sp-hero.is-static .sp-hero__band--3 { position: relative; z-index: 2; align-self: center; padding-top: calc(var(--sp-header-h) + 40px); }
.sp-hero.is-static .sp-hero__scrim { display: block; }

/* -------- Vertrauen: Split mit Collage -------- */
.sp-vertrauen { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); }
.sp-quote { border: 0; padding: 0; margin: 32px 0 0; font-family: var(--sp-serif); }
.sp-quote p { font-family: var(--sp-serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-style: italic; font-weight: 300; line-height: 1.3; letter-spacing: -.01em; color: var(--sp-ink); }
.sp-quote cite { display: block; margin-top: 14px; font-family: var(--sp-sans); font-style: normal; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-grey); }
.sp-quote + .sp-textlink { margin-top: 36px; }
.sp-collage { position: relative; padding: 0 0 32px 0; }
.sp-collage__main { margin: 0; overflow: hidden; }
.sp-collage__main img { aspect-ratio: 5 / 5.6; object-fit: cover; width: 100%; transform: scale(1.04); transition: transform 1.6s var(--sp-ease); }
.sp-collage.is-in .sp-collage__main img { transform: scale(1); }
.sp-collage__float { position: absolute; left: -12%; bottom: 0; width: 46%; margin: 0; border: 8px solid #fff; box-shadow: 0 30px 60px -30px rgba(11,15,26,.35); }
.sp-collage__float img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* -------- Projekte: vier Karten 16:9 -------- */
.sp-projekte__grid { gap: clamp(16px, 2vw, 28px) !important; }
.sp-projekte .sp-projekte__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-projekte--archiv .sp-projekte__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px) !important; }
.sp-projekte--archiv .sp-card__media { margin-bottom: 18px; }
.sp-projekte--archiv { padding-bottom: clamp(56px, 7vw, 96px); }
.sp-kontakt--anfrage .sp-form { margin-top: 0; }
.sp-select { position: relative; }
.sp-select select { width: 100%; border: 0; border-bottom: 1px solid var(--sp-line); background: transparent; padding: 10px 28px 12px 0; font: inherit; font-size: 1.0625rem; color: var(--sp-ink); border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sp-select select:focus { outline: none; border-bottom-color: var(--sp-accent); }
.sp-select::after { content: ""; position: absolute; right: 4px; top: 14px; width: 9px; height: 9px; border-right: 1px solid var(--sp-ink); border-bottom: 1px solid var(--sp-ink); transform: rotate(45deg); pointer-events: none; }
.sp-projekte--archiv .sp-card__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
.sp-projekte--archiv .sp-card__facts { font-size: .9rem; }
.sp-card { position: relative; }
.sp-card__media { margin: 0 0 14px; position: relative; overflow: hidden; background: var(--sp-mist); }
.sp-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.4s var(--sp-ease); }
.sp-card:hover .sp-card__media img { transform: scale(1.05); }
.sp-card__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,31,0) 45%, rgba(10,15,31,.55) 100%); opacity: 0; transition: opacity .6s var(--sp-ease); pointer-events: none; }
.sp-card__media::after { content: "Projekt ansehen  →"; position: absolute; left: 16px; bottom: 14px; color: #fff; font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--sp-ease), transform .6s var(--sp-ease); pointer-events: none; white-space: pre; }
.sp-card:hover .sp-card__media::before, .sp-card:hover .sp-card__media::after { opacity: 1; transform: none; }
.sp-card__kicker { color: var(--sp-grey); margin: 0 0 4px; font-size: .66rem; }
.sp-card__title { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.2; margin: 0 0 10px; letter-spacing: -.02em; }
.sp-card__title a { color: var(--sp-ink); }
.sp-card__title a:hover { color: var(--sp-accent); }
.sp-card__facts { display: grid !important; gap: 3px !important; font-size: .8125rem; color: var(--sp-grey); border-top: 1px solid var(--sp-line); padding-top: 10px; }
.sp-card__facts .sp-feld { margin: 0; display: block; }
.sp-card__facts .sp-feld + .sp-feld::before { content: none; }
.sp-card__status { color: var(--sp-accent); font-weight: 500; }
.sp-card__status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 0 8px 1px 0; }

/* -------- Säulen: Verzeichnis mit Bildwechsel -------- */
.sp-index { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sp-index__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "num title" "num text"; column-gap: 16px; padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid var(--sp-line); transition: padding-left .6s var(--sp-ease); }
.sp-index__row:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-index__num { grid-area: num; font-family: var(--sp-sans); font-size: .95rem; color: var(--sp-grey); margin: .35em 0 0; transition: color .4s; }
.sp-index__title { grid-area: title; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); margin: 0; transition: color .4s var(--sp-ease), transform .6s var(--sp-ease); }
.sp-index__text { grid-area: text; color: var(--sp-grey); max-width: 40em; margin: 10px 0 0; line-height: 1.6; }
.sp-index__row.is-active .sp-index__title, .sp-index__row:hover .sp-index__title { color: var(--sp-accent); transform: translateX(6px); }
.sp-index__row.is-active .sp-index__num, .sp-index__row:hover .sp-index__num { color: var(--sp-accent); }
.sp-index__media { position: sticky; top: calc(var(--sp-header-h) + 40px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--sp-mist); }
.sp-index__img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s var(--sp-ease); }
.sp-index__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--sp-ease); }
.sp-index__img.is-active { opacity: 1; }
.sp-index__img.is-active img { transform: scale(1); }

/* -------- Prozess -------- */
.sp-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); padding-top: 40px; }
.sp-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sp-line); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--sp-ease); }
.sp-steps.is-in::before { transform: scaleX(1); }
.sp-step { position: relative; }
.sp-step__icon { display: inline-flex; width: 48px !important; height: 48px !important; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--sp-accent); margin-bottom: 18px; }
.sp-step__icon svg { width: 44px; height: 44px; }
.sp-step__icon svg * { stroke-dasharray: 200; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--sp-ease) var(--d, 0s); }
.sp-js .sp-steps.sp-anim:not(.is-in) .sp-step__icon svg * { stroke-dashoffset: 200; }
.sp-steps.is-in .sp-step__icon svg * { stroke-dashoffset: 0; }
.sp-step__icon .sp-icon { width: 44px; height: 44px; display: block; }
.sp-icon svg { width: 100%; height: 100%; display: block; }
.sp-step__num { font-family: var(--sp-sans); font-size: .9rem; color: var(--sp-accent); margin: 0 0 8px; }
.sp-step__title { font-size: 1.2rem; margin: 0 0 10px; }
.sp-step__text { color: var(--sp-grey); font-size: .95rem; margin: 0; max-width: 28em; }

/* -------- Zahlen (dunkel) -------- */
.sp-zahlen { padding-block: clamp(48px, 6vw, 84px); }
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.sp-stat { border-top: 1px solid rgba(255,255,255,.18); padding: 24px 0 4px; }
.sp-stat__row { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 6px !important; min-height: 1.1em; }
.sp-stat__wert, .sp-stat__suffix { font-family: var(--sp-sans); font-weight: 500; line-height: 1; letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-stat__wert { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem); }
.sp-stat__suffix { font-size: clamp(1rem, .9rem + .6vw, 1.4rem); color: #9FB0F0; letter-spacing: 0; }
.sp-stat__suffix:empty { display: none; }
.sp-stat__label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 12px 0 0; line-height: 1.4; }
.sp-stats__note { display: none; }

/* -------- FAQ -------- */
.sp-faq__item { border-top: 1px solid var(--sp-line); padding: 6px 0; margin: 0; }
.sp-faq__item:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-faq__item summary { list-style: none; cursor: pointer; position: relative; padding: 18px 48px 18px 0; font-family: var(--sp-sans); font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; transition: color .3s; }
.sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-faq__item summary::before, .sp-faq__item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 1px; background: var(--sp-ink); transition: transform .5s var(--sp-ease); }
.sp-faq__item summary::after { transform: rotate(90deg); }
.sp-faq__item[open] summary::after { transform: rotate(0); }
.sp-faq__item[open] summary { color: var(--sp-accent); }
.sp-faq__item summary:hover { color: var(--sp-accent); }
.sp-faq__item > :not(summary) { color: var(--sp-grey); max-width: 40em; padding: 0 0 20px; margin: 0; }

/* -------- Kontakt: Formular und Karte -------- */
.sp-kontakt { background: var(--sp-mist); }
.sp-form { background: #fff; border: 1px solid var(--sp-line); padding: clamp(22px, 3.5vw, 40px); }
.sp-kontakt__cols { gap: clamp(32px, 5vw, 88px) !important; }
.sp-kontakt__left .sp-form { margin-top: 36px; }
.sp-kontakt__adresse { margin-top: 22px; gap: 24px !important; }
.sp-form__form { display: flex; flex-direction: column; gap: 24px; }
.sp-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.sp-field { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; border: 0; padding: 0; }
.sp-field label, .sp-field legend { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-grey); }
.sp-field__hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sp-field input[type="text"], .sp-field input[type="email"], .sp-field input[type="tel"], .sp-field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--sp-line); background: transparent; padding: 10px 0 12px; font: inherit; font-size: 1.0625rem; color: var(--sp-ink); border-radius: 0; transition: border-color .4s var(--sp-ease); -webkit-appearance: none; appearance: none;
}
.sp-field input:focus, .sp-field textarea:focus { outline: none; border-bottom-color: var(--sp-accent); }
.sp-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.sp-field input:user-invalid, .sp-field textarea:user-invalid { border-bottom-color: #B4372D; }
.sp-field--multi legend { margin-bottom: 12px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip { position: relative; cursor: pointer; }
.sp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-chip span { display: inline-block; border: 1px solid var(--sp-line); padding: 10px 14px; font-size: .875rem; line-height: 1; color: var(--sp-ink); transition: background .35s var(--sp-ease), border-color .35s var(--sp-ease), color .35s var(--sp-ease); }
.sp-chip:hover span { border-color: var(--sp-ink); }
.sp-chip input:checked + span { background: var(--sp-accent); border-color: var(--sp-accent); color: #fff; }
.sp-chip input:focus-visible + span { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp-check { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; color: var(--sp-grey); text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.5; cursor: pointer; }
.sp-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--sp-accent); }
.sp-form__actions { display: flex; align-items: center; gap: 16px; }
.sp-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-form { position: relative; }
.sp-form__form { gap: 22px; }
.sp-form__error { color: #B4372D; font-size: .9rem; border-left: 2px solid #B4372D; padding-left: 12px; margin-bottom: 18px; }
.sp-form__done { padding: 8px 0; }
.sp-form__done-title { font-family: var(--sp-sans); font-size: 1.8rem; font-weight: 400; margin: 0 0 10px; }
.sp-form__done p:last-child { margin: 0; color: var(--sp-grey); }
/* Mehrfachauswahl */
.sp-msel__native { width: 100%; border: 1px solid var(--sp-line); padding: 8px; font: inherit; font-size: 1rem; background: #fff; color: var(--sp-ink); min-height: 120px; }
.sp-msel { position: relative; }
.sp-msel .sp-msel__native { position: absolute; opacity: 0; pointer-events: none; height: 1px; min-height: 0; }
.sp-msel__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid var(--sp-line); background: transparent; padding: 10px 0 12px; font: inherit; font-size: 1.0625rem; color: var(--sp-ink); cursor: pointer; text-align: left; border-radius: 0; transition: border-color .4s var(--sp-ease); }
.sp-msel__btn[aria-expanded="true"], .sp-msel__btn:focus-visible { border-bottom-color: var(--sp-accent); outline: none; }
.sp-msel__btn .is-placeholder { color: var(--sp-grey); }
.sp-msel__caret { flex: 0 0 auto; width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--sp-ease); }
.sp-msel__btn[aria-expanded="true"] .sp-msel__caret { transform: translateY(2px) rotate(-135deg); }
.sp-msel__panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 24px 48px -28px rgba(11,15,26,.3); padding: 6px; max-height: 280px; overflow: auto; }
.sp-msel__panel[hidden] { display: none; }
.sp-field .sp-msel__opt, .sp-msel__opt { display: flex; align-items: center; gap: 12px; padding: 10px 10px; cursor: pointer; font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sp-ink); transition: background .25s; }
.sp-msel__count { white-space: nowrap; }
.sp-msel__opt:hover { background: var(--sp-mist); }
.sp-msel__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--sp-accent); flex: 0 0 auto; }
.sp-msel__count { font-size: .75rem; color: var(--sp-grey); margin-left: auto; }

/* Karte */
.sp-map { position: relative; height: var(--sp-map-h, 480px); background: #EEF1FA; overflow: hidden; border: 1px solid var(--sp-line); }
.sp-map__canvas { position: absolute; inset: 0; z-index: 1; }
.sp-map__canvas.leaflet-container { background: #EEF1FA; font-family: var(--sp-sans); }
.sp-map__canvas.leaflet-container::after { content: ""; position: absolute; inset: 0; z-index: 450; background: rgba(27,47,158,.14); mix-blend-mode: multiply; pointer-events: none; }
.sp-map__tiles { filter: grayscale(1) contrast(.92) brightness(1.05); }
.sp-map .leaflet-control-zoom { border: 1px solid var(--sp-line) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 12px 28px 0 !important; }
.sp-map .leaflet-control-zoom a { border-radius: 0 !important; color: var(--sp-ink); background: #fff; border-bottom-color: var(--sp-line) !important; }
.sp-map .leaflet-control-zoom a:hover { background: var(--sp-mist); }
.sp-map__card { position: absolute; left: 20px; top: 20px; z-index: 5; background: #fff; padding: 18px 20px; border: 1px solid var(--sp-line); max-width: min(300px, calc(100% - 40px)); }
.sp-map__title { font-family: var(--sp-sans); font-size: 1.3rem; font-weight: 400; margin: 0; line-height: 1.2; }
.sp-map__sub { margin: 4px 0 0; color: var(--sp-grey); font-size: .875rem; }
.sp-map__link { display: inline-block; margin-top: 12px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--sp-accent); }
.sp-map__attr { position: absolute; right: 8px; bottom: 6px; z-index: 5; margin: 0; font-size: .62rem; color: var(--sp-grey); background: rgba(255,255,255,.8); padding: 2px 6px; }
.sp-map__attr a { color: inherit; text-decoration: none; }
.sp-map__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; border: 1px solid var(--sp-ink); background: #fff; color: var(--sp-ink); font: 500 .7rem/1 var(--sp-sans); letter-spacing: .14em; text-transform: uppercase; padding: 12px 16px; cursor: pointer; }
.sp-pin { position: relative; }
.sp-pin__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sp-accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sp-accent); }
.sp-pin__ring { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1px solid var(--sp-accent); opacity: 0; animation: sp-ring 2.8s var(--sp-ease) infinite; }
@keyframes sp-ring { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }

/* -------- Fußzeile -------- */
.sp-footer { padding: clamp(56px, 8vw, 96px) var(--sp-gutter) 28px; }
.sp-footer.alignfull { margin: 0; width: auto; max-width: none; }
.sp-footer__cols { gap: 32px !important; }
.sp-footer .sp-logo--dark { display: none; }
.sp-footer .wp-block-site-logo img.sp-logo--light, .sp-footer .sp-logo--light { display: block; height: 40px; }
.sp-footer__claim { margin-top: 20px; max-width: 26em; color: rgba(255,255,255,.66); font-size: .95rem; }
.sp-footer__head { color: rgba(255,255,255,.5); margin: 0 0 16px; }
.sp-footer__nav .wp-block-navigation-item__content { color: rgba(255,255,255,.82); font-size: .95rem; padding: 4px 0; }
.sp-footer__nav .wp-block-navigation-item__content:hover { color: #fff; }
.sp-footer__nav .wp-block-navigation__container { gap: 6px; }
.sp-footer__text { color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.7; margin: 0 0 10px; }
.sp-footer__text a { color: #fff; }
.sp-footer__bottom { margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.sp-footer__small { font-size: .75rem; color: rgba(255,255,255,.5); margin: 0; letter-spacing: .04em; }

/* Google-Bewertung im Footer */
.sp-google { display: inline-grid; grid-template-columns: auto auto auto; grid-template-areas: "g score stars" "g label label"; column-gap: 10px; row-gap: 2px; align-items: center; margin-top: 26px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.22); padding: 10px 14px; transition: border-color .3s, background .3s; max-width: 100%; }
.sp-google__g { grid-area: g; } .sp-google__score { grid-area: score; white-space: nowrap; } .sp-google__stars { grid-area: stars; } .sp-google__label { grid-area: label; white-space: nowrap; }
.sp-google:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.sp-google__g { width: 22px; height: 22px; display: block; }
.sp-google__score { font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.sp-google__stars { display: inline-flex; gap: 2px; }
.sp-google__stars svg { width: 14px; height: 14px; display: block; }
.sp-google__label { font-size: .75rem; color: rgba(255,255,255,.7); letter-spacing: .04em; }
.sp-footer__cols > .wp-block-column { min-width: 0; }

/* -------- Unternehmen -------- */
.sp-uhero { padding-top: calc(var(--sp-header-h) + clamp(40px, 8vw, 104px)); padding-bottom: 0; }
.sp-uhero__lede { max-width: 40em; }
.sp-uhero__media { margin-top: clamp(40px, 6vw, 88px); overflow: hidden; height: clamp(320px, 62vh, 720px); }
.sp-uhero__media .sp-parallax { margin: 0; height: 100%; }
.sp-uhero__media img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.sp-uhero__facts { gap: 24px !important; padding: 28px 0 0; margin-top: 0; border-top: 1px solid var(--sp-line); }
.sp-uhero__facts { margin-top: clamp(28px, 4vw, 48px); }
.sp-fact { font-size: .875rem; color: var(--sp-grey); margin: 0; }
.sp-fact strong { display: block; font-family: var(--sp-sans); font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; color: var(--sp-ink); line-height: 1.1; margin-bottom: 4px; }
.sp-timeline { position: relative; padding-left: 44px; }
.sp-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 0; width: 1px; background: var(--sp-line); }
.sp-timeline::after { content: ""; position: absolute; left: 5px; top: 8px; bottom: 0; width: 1px; background: var(--sp-accent); transform: scaleY(var(--draw, 0)); transform-origin: top; }
.sp-timeline__item { position: relative; padding-bottom: clamp(40px, 5vw, 64px); }
.sp-timeline__item:last-child { padding-bottom: 0; }
.sp-timeline__item::before { content: ""; position: absolute; left: -44px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1px solid var(--sp-accent); transform: scale(.5); opacity: .4; transition: transform .8s var(--sp-ease), opacity .8s, background .8s; }
.sp-timeline__item.is-in::before { transform: scale(1); opacity: 1; background: var(--sp-accent); }
.sp-timeline__year { font-family: var(--sp-sans); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 400; letter-spacing: -.02em; line-height: 1; margin: 0 0 10px; color: var(--sp-accent); }
.sp-timeline__title { font-family: var(--sp-sans); font-size: 1.1rem; font-weight: 500; letter-spacing: 0; margin: 0 0 8px; }
.sp-timeline__text { color: var(--sp-grey); max-width: 36em; margin: 0; }
.sp-vorteile__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px) !important; }
.sp-vorteil { border-top: 1px solid var(--sp-line); padding: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 40px); }
.sp-vorteil__num { font-family: var(--sp-sans); font-size: .95rem; color: var(--sp-accent); margin: 0 0 10px; }
.sp-vorteil__title { font-size: clamp(1.35rem, 1.2rem + .8vw, 1.9rem); margin: 0 0 10px; }
.sp-vorteil__text { color: var(--sp-grey); max-width: 34em; margin: 0; }
.sp-ziele { padding-block: clamp(48px, 6vw, 84px); }
.sp-ziel { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid rgba(255,255,255,.14); }
.sp-ziel:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.sp-ziel__num { font-family: var(--sp-sans); color: #9FB0F0; margin: .4em 0 0; }
.sp-ziel__text { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.8rem); max-width: 24ch; margin: 0; line-height: 1.15; }
.sp-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) !important; }
.sp-person__media { margin: 0 0 18px; overflow: hidden; background: var(--sp-mist); }
.sp-person__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transform: scale(1.04); transition: transform 1.4s var(--sp-ease); filter: saturate(.92); }
.sp-person:hover .sp-person__media img { transform: scale(1); }
.sp-person__initials { aspect-ratio: 4 / 5; background: var(--sp-mist); display: grid; place-items: center; margin: 0 0 18px; font-family: var(--sp-sans); font-size: clamp(3rem, 6vw, 5rem); font-weight: 400; color: var(--sp-accent); letter-spacing: -.02em; }
.sp-person__name { font-size: 1.45rem; margin: 0 0 6px; }
.sp-person__rolle { color: var(--sp-accent); margin: 0 0 10px; }
.sp-person__fokus { color: var(--sp-grey); font-size: .95rem; margin: 0 0 10px; max-width: 30em; }
.sp-person__kontakt { font-size: .875rem; margin: 0; }
.sp-person__kontakt a { color: var(--sp-ink); border-bottom: 1px solid var(--sp-line); }
.sp-person__kontakt a:hover { color: var(--sp-accent); border-color: currentColor; }
.sp-cta { padding-block: clamp(48px, 7vw, 96px); }
.sp-cta__inner { gap: 24px !important; }
.sp-cta__title { color: #fff; margin: 0; }

/* -------- Projektseite -------- */
.sp-phero { position: relative; height: min(66vh, 620px); min-height: 440px; background: var(--sp-night); color: #fff; overflow: hidden; }
.sp-phero.alignfull { margin-left: calc(-1 * var(--sp-gutter)); margin-right: calc(-1 * var(--sp-gutter)); width: auto; max-width: none; }
.sp-phero__media { position: absolute; inset: -10% 0; }
.sp-phero__media video, .sp-phero__media img { width: 100%; height: 100%; object-fit: cover; }
.sp-phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,31,.25) 0%, rgba(10,15,31,.15) 40%, rgba(10,15,31,.78) 100%); pointer-events: none; }
.sp-phero__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 var(--sp-gutter) clamp(32px, 6vh, 64px); }
.sp-phero__inner { max-width: 980px !important; margin-left: 0 !important; }
.sp-phero__meta { gap: 18px !important; margin-bottom: 14px; }
.sp-phero__meta .sp-kicker { color: rgba(255,255,255,.78); margin: 0; }
.sp-phero__meta .sp-kicker--status { color: #fff; }
.sp-phero__title { color: #fff; font-size: clamp(2rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; margin: 0; max-width: 14ch; }
.sp-phero__sub { color: rgba(255,255,255,.82); font-size: clamp(1rem, .95rem + .4vw, 1.2rem); max-width: 30em; margin: 14px 0 0; line-height: 1.45; }
.sp-phero__cta { margin-top: 28px; }
.sp-eckdaten { position: sticky; top: var(--sp-header-h); z-index: 40; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sp-line); padding: 14px var(--sp-gutter); }
.sp-eckdaten.alignfull { margin-left: calc(-1 * var(--sp-gutter)); margin-right: calc(-1 * var(--sp-gutter)); width: auto; max-width: none; }
.sp-eckdaten__row { gap: 12px 32px !important; }
.sp-eckdaten__item:has(.sp-feld:empty) { display: none; }
.sp-eckdaten__label { color: var(--sp-grey); margin: 0 0 2px; font-size: .62rem; }
.sp-eckdaten__wert { margin: 0; font-size: .95rem; font-weight: 500; }
.sp-pintro { padding-block: clamp(48px, 6vw, 84px); }
.sp-pintro__claim { color: #fff; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); }
.sp-pintro__text p { color: rgba(255,255,255,.88); }
.sp-pintro__auszug { color: rgba(255,255,255,.6); margin-top: 24px; }
.sp-pgalerie { margin-top: clamp(40px, 5vw, 72px); }
.sp-strip { display: flex; gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--sp-gutter) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sp-strip::-webkit-scrollbar { display: none; }
.sp-strip__item { flex: 0 0 min(64vw, 920px); scroll-snap-align: start; margin: 0; }
.sp-strip__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sp-strip__item figcaption { font-size: .8rem; color: var(--sp-grey); margin-top: 10px; }
.sp-strip__nav { display: flex; align-items: center; gap: 16px; padding: 16px var(--sp-gutter) 0; }
.sp-strip__btn { width: 44px; height: 44px; border: 1px solid var(--sp-line); background: #fff; color: var(--sp-ink); cursor: pointer; font: 1rem/1 var(--sp-sans); transition: background .3s, color .3s, border-color .3s; }
.sp-strip__btn:hover { background: var(--sp-ink); color: #fff; border-color: var(--sp-ink); }
.sp-strip__count { font-size: .8rem; color: var(--sp-grey); font-variant-numeric: tabular-nums; }
.sp-strip__count b { color: var(--sp-ink); font-weight: 500; }
.sp-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px) !important; }
.sp-overview__item { border-top: 1px solid var(--sp-line); padding: 22px 0 26px; }
.sp-overview__item:has(.sp-overview__wert:empty), .sp-overview__item:not(:has(.sp-overview__wert)) { display: none; }
.sp-overview__label { color: var(--sp-grey); margin: 0 0 8px; }
.sp-overview__wert { font-family: var(--sp-sans); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.sp-overview__note { font-size: .8rem; color: var(--sp-grey); margin: 8px 0 0; }
.sp-plaene { margin-top: clamp(40px, 6vw, 72px); }
.sp-plaene__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 0 0 28px; }
.sp-plaene:not(:has(.sp-plan)) { display: none; }
.sp-plan { border: 1px solid var(--sp-line); background: #fff; padding: 14px; cursor: zoom-in; text-align: left; font: inherit; color: var(--sp-ink); transition: border-color .3s; }
.sp-plan:hover { border-color: var(--sp-ink); }
.sp-plan img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sp-plan span { display: block; margin-top: 10px; font-size: .8rem; color: var(--sp-grey); }
.sp-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,15,31,.92); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .4s var(--sp-ease); }
.sp-lightbox.is-open { opacity: 1; }
.sp-lightbox img { max-width: min(1100px, 100%); max-height: 84vh; width: auto; height: auto; background: #fff; padding: 12px; }
.sp-lightbox figcaption { color: rgba(255,255,255,.8); font-size: .85rem; margin-top: 12px; text-align: center; }
.sp-lightbox__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: #fff; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; }
.sp-plage__kicker { margin-top: 36px; }
.sp-dist { list-style: none; padding: 0; margin: 0; max-width: 36em; }
.sp-dist li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sp-line); font-size: .95rem; }
.sp-dist__ort { flex: 0 1 auto; }
.sp-dist__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--sp-line); transform: translateY(-5px); }
.sp-dist__zeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-dist__art { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-grey); white-space: nowrap; min-width: 3.2em; text-align: right; }
.sp-checklist { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 40px; }
.sp-checklist li { break-inside: avoid; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--sp-line); position: relative; font-size: .95rem; }
.sp-checklist li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 6px; border-left: 1px solid var(--sp-accent); border-bottom: 1px solid var(--sp-accent); transform: rotate(-45deg); }
.sp-energie__kicker { margin-top: 36px; }
.sp-energie { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--sp-grey); }
.sp-kontakt--projekt .sp-form { margin-top: 0; }

/* -------- Bewegung: Ausgangszustände nur mit JS -------- */
/* Reveals: siehe Block „Ausbaustufe 2.1“ am Ende */
@media (prefers-reduced-motion: reduce) {
  .sp-hidden { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .sp-reveal-lines > .sp-lines { clip-path: none !important; transform: none !important; }
  .sp-steps::before { transform: none; }
  .sp-steps .sp-step__icon svg * { stroke-dashoffset: 0; }
  .sp-pin__ring { animation: none; }
  .sp-collage__main img, .sp-index__img img { transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -------- Editor-Hinweise bleiben aus -------- */
.sp-feld[style*="opacity:.5"] { font-size: .8rem; }

/* =====================================================================
   Responsive: Strukturwechsel
   ===================================================================== */
@media (max-width: 1100px) {
  .sp-projekte .sp-projekte__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-collage__float { left: -6%; width: 42%; }
}
@media (max-width: 900px) {
  :root { --sp-header-h: 64px; }
  .sp-index { grid-template-columns: 1fr; }
  .sp-index__media { display: none; }
  .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-sticky { position: static; }
  .sp-eckdaten { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .sp-eckdaten__row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px !important; }
  .sp-collage__float { left: 0; width: 42%; }
  .sp-collage { padding-bottom: 40px; }
  .sp-footer__cols { flex-wrap: wrap !important; }
  .sp-footer__cols > .wp-block-column { flex-basis: calc(50% - 16px) !important; }
  .wp-block-columns.sp-split, .wp-block-columns.sp-kontakt__cols { flex-wrap: wrap !important; }
  .wp-block-columns.sp-split > .wp-block-column, .wp-block-columns.sp-kontakt__cols > .wp-block-column { flex-basis: 100% !important; }
  .sp-phero { height: min(68vh, 600px); min-height: 440px; }
}
@media (max-width: 640px) {
  .sp-projekte .sp-projekte__grid, .sp-projekte--archiv .sp-projekte__grid, .sp-steps, .sp-team__grid, .sp-vorteile__grid { grid-template-columns: 1fr; }
  .sp-stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .sp-form__grid { grid-template-columns: 1fr; }
  .sp-overview { grid-template-columns: 1fr 1fr; }
  .sp-checklist { columns: 1; }
  .sp-strip__item { flex-basis: 86vw; }
  .sp-footer__cols > .wp-block-column { flex-basis: 100% !important; }
  .sp-hero__title { font-size: clamp(3rem, 14vw, 4.6rem); }
  .sp-hero__logo img { height: 48px; }
  .sp-collage__float { border-width: 5px; }
  .sp-uhero__media { height: 56vh; }
  .sp-ziel { grid-template-columns: 48px 1fr; }
  .sp-map__card { left: 12px; top: 12px; padding: 14px 16px; }
  .sp-eckdaten__row { grid-template-columns: 1fr 1fr; }
  .sp-lightbox { padding: 12px; }
}
@media (hover: none) {
  .sp-card__media::before, .sp-card__media::after { opacity: 1; transform: none; }
}


/* =====================================================================
   Ausbaustufe 2.1 – Editorial (Orientierung: ruhige Premium-Projektseiten)
   ===================================================================== */
:root { --sp-display: var(--sp-serif); --sp-display-weight: 300; --sp-display-tracking: -.012em; --sp-creme: var(--wp--preset--color--mist); }
body { font-size: 1.125rem; }
.sp-lede { font-size: clamp(1.1rem, 1.02rem + .45vw, 1.4rem); line-height: 1.5; }
.sp-small { font-size: .9rem; }

/* Display-Typografie (Serif leicht, kursive Betonung mit <em>) */
.sp-h1, .sp-h2, .sp-hero__title, .sp-phero__claim, .sp-statement, .sp-card__title, .sp-index__title, .sp-step__title, .sp-vorteil__title, .sp-ziel__text, .sp-timeline__title, .sp-person__name, .sp-map__title, .sp-form__done-title, .sp-seitenkopf__titel, .sp-faq__item summary, .sp-overview__wert, .sp-fact strong, .sp-stat__wert, .sp-stat__suffix, .sp-timeline__year, .sp-cta__title, .sp-footer__cta-title, .sp-ptitle, .sp-msel__btn, .sp-tabelle__wert {
  font-family: var(--sp-display); font-weight: var(--sp-display-weight); letter-spacing: var(--sp-display-tracking);
}
.sp-msel__btn, .sp-tabelle__wert, .sp-faq__item summary, .sp-step__title, .sp-timeline__title, .sp-vorteil__title, .sp-map__title, .sp-person__name, .sp-card__title { font-family: var(--sp-sans); font-weight: 500; letter-spacing: -.012em; }
.sp-h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem); line-height: 1.02; max-width: 18ch; }
.sp-h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.06; max-width: 22ch; }
.sp-hero__title { font-size: clamp(3.4rem, 1.7rem + 8.4vw, 9rem); line-height: .96; letter-spacing: -.02em; font-weight: 300; }
.sp-h1 em, .sp-h2 em, .sp-hero__title em, .sp-phero__claim em, .sp-statement em, .sp-ptitle em, .sp-footer__cta-title em, .sp-cta__title em, .sp-ziel__text em { font-style: italic; font-weight: 300; }
.sp-h1 i, .sp-h2 i { font-style: italic; }
.sp-statement { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.22; max-width: 26ch; margin: 0; }
.sp-stat__wert { font-weight: 300; letter-spacing: -.02em; }
.sp-stat__suffix { font-weight: 300; }
.sp-timeline__year { font-weight: 300; }
.sp-overview__wert { font-weight: 300; }
.sp-fact strong { font-weight: 300; }

/* Kicker mit feiner Linie, die sich zeichnet */
.sp-kicker { display: inline-block; position: relative; color: var(--sp-ink); font-size: .74rem; letter-spacing: .16em; padding-bottom: .75em; margin-bottom: 20px; }
.sp-kicker::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--sp-ease) .15s; }
.sp-kicker.is-in::after, html:not(.sp-js) .sp-kicker::after, .sp-kicker.sp-static::after { transform: scaleX(1); }
.sp-sechead--dark .sp-kicker, .sp-hero .sp-kicker, .sp-phero .sp-kicker { color: rgba(255,255,255,.8); }
.sp-card__kicker, .sp-person__rolle, .sp-overview__label, .sp-eckdaten__label, .sp-footer__head { padding-bottom: 0; }
.sp-card__kicker::after, .sp-person__rolle::after, .sp-overview__label::after, .sp-eckdaten__label::after, .sp-footer__head::after { display: none; }
.sp-phero__meta .sp-kicker { margin: 0; padding-bottom: .6em; }
.sp-phero__meta .sp-kicker::after { transform: scaleX(1); }

/* Reveals (ausfallsicher): standardmäßig sichtbar, nur unterhalb des Sichtfelds versteckt */
.sp-anim-el { transition: opacity .9s var(--sp-ease) var(--d, 0s), transform .9s var(--sp-ease) var(--d, 0s), clip-path 1.2s var(--sp-ease) var(--d, 0s); }
.sp-hidden { opacity: 0; transform: translateY(26px); }
.sp-reveal-lines > .sp-lines { display: block; clip-path: inset(0 0 -14% 0); transition: clip-path 1.2s var(--sp-ease) var(--d, 0s), transform .9s var(--sp-ease) var(--d, 0s); }
.sp-reveal-lines.sp-hidden { transform: none; }
.sp-reveal-lines.sp-hidden > .sp-lines { clip-path: inset(0 0 100% 0); transform: translateY(12px); }
.sp-anim-el.is-in { opacity: 1; transform: none; }
.sp-tabelle__row, .sp-dist li, .sp-eckdaten__item { position: relative; }
.sp-tabelle__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sp-line); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--sp-ease) var(--d, 0s); }
.sp-tabelle__row.is-in::before, html:not(.sp-js) .sp-tabelle__row::before { transform: scaleX(1); }

/* Kopfzeile: beim Scrollen nach unten ausblenden, beim Hochscrollen zurück */
.sp-header { transition: background .5s var(--sp-ease), border-color .5s var(--sp-ease), padding .5s var(--sp-ease), transform .55s var(--sp-ease); will-change: transform; }
.sp-header.is-hidden { transform: translateY(-110%); }
.sp-header.menu-open { transform: none !important; }

/* Bildstrecke als Band mit natürlichen Formaten */
.sp-strip { height: clamp(320px, 42vw, 640px); gap: 6px; padding: 0 0 0 var(--sp-gutter); scroll-snap-type: none; cursor: grab; }
.sp-strip.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.sp-strip__item { flex: 0 0 auto; height: 100%; }
.sp-strip__item img { height: 100%; width: auto; aspect-ratio: auto; max-width: 92vw; object-fit: cover; }
.sp-strip__item figcaption { display: none; }
.sp-strip__nav { justify-content: space-between; align-items: center; padding-top: 18px; }
.sp-strip__count { font-family: var(--sp-display); font-size: 1rem; }
.sp-strip__bar { flex: 1 1 auto; height: 1px; background: var(--sp-line); position: relative; margin: 0 24px; }
.sp-strip__bar i { position: absolute; top: -1px; left: 0; height: 3px; width: 20%; background: var(--sp-ink); transition: left .2s linear; }
.sp-strip__btns { display: flex; gap: 8px; }

/* Projektseite in fünf Akten */
.sp-phero { height: 100svh; min-height: 560px; max-height: none; }
.sp-phero::after { background: rgba(10,15,31,.38); mix-blend-mode: multiply; }
.sp-phero__content { padding-bottom: clamp(40px, 8vh, 96px); }
.sp-phero__inner { max-width: 1100px !important; }
.sp-phero__meta { gap: 14px 26px !important; margin-bottom: 22px; }
.sp-phero__claim { color: #fff; font-size: clamp(2.4rem, 1.4rem + 4.8vw, 6rem); line-height: 1.02; letter-spacing: -.015em; margin: 0; max-width: 18ch; text-wrap: balance; }
.sp-phero__cta { margin-top: 30px; }
.sp-phero__cue { position: absolute; right: var(--sp-gutter); bottom: 32px; z-index: 2; color: rgba(255,255,255,.7); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }
.sp-pfacts { padding-block: clamp(72px, 9vw, 140px); }
.sp-pfacts .sp-split { gap: clamp(40px, 6vw, 120px) !important; }
.sp-ptitle { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem); line-height: 1.05; margin: 0 0 8px; }
.sp-port { font-family: var(--sp-serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: var(--sp-grey); margin: 0 0 32px; }
.sp-pfacts .sp-prose p { max-width: 41rem; font-size: 1.125rem; line-height: 1.6; }
.sp-tabelle { margin: 0; }
.sp-tabelle__row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px 24px; padding: 16px 0; align-items: baseline; }
.sp-tabelle__row:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-tabelle__row:not(:has(.sp-feld)) { display: none; }
.sp-tabelle__label { margin: 0; font-size: .95rem; font-weight: 500; color: var(--sp-ink); }
.sp-tabelle__wert { margin: 0; font-size: 1.05rem; color: var(--sp-ink); }
.sp-tabelle__note { margin: 4px 0 0; font-size: .8rem; color: var(--sp-grey); grid-column: 2; }
.sp-pband { padding-block: 0 clamp(72px, 9vw, 140px); }
.sp-pband .sp-pgalerie { margin-top: 0; }
.sp-phauslage { padding-block: clamp(72px, 9vw, 140px); }
.sp-phauslage .sp-prose { margin-bottom: 40px; }
.sp-phauslage .sp-kicker { margin-top: 8px; }
.sp-plage__map { margin-top: clamp(56px, 7vw, 96px); }
.sp-pwohnungen { background: var(--sp-creme); }
.sp-plaene { margin-top: 0; }
.sp-back { text-align: center; padding: 0 0 clamp(64px, 8vw, 128px); }
.sp-back .sp-textlink { display: inline-block; }
.sp-main--projekt .sp-kontakt { background: var(--sp-creme); }

/* Startseite: Bild ragt aus dem Raster, Statement, Säulen-Bilder */
@media (min-width: 1100px) { .sp-vertrauen .sp-collage { margin-right: calc(-1 * var(--sp-gutter)); } }
.sp-collage__float { width: 38%; }
.sp-index__row .sp-index__img { display: none; }
.sp-index__img figcaption { display: none; }
@media (max-width: 899px) {
  .sp-index__row .sp-index__img { display: block; position: static; opacity: 1; margin: 18px 0 0; grid-column: 1 / -1; }
  .sp-index__row .sp-index__img img { aspect-ratio: 16 / 9; transform: none; }
  .sp-index__row { grid-template-areas: "num title" "num text" "img img"; }
}
.sp-index__media--js { display: block; }

/* Fußzeile mit Statement */
.sp-footer__cta { padding: 0 0 clamp(48px, 6vw, 88px); margin-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.sp-footer__cta-title { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1.02; margin: 0; max-width: 16ch; }
.sp-footer__cta-sub { font-family: var(--sp-serif); font-style: italic; font-weight: 300; color: rgba(255,255,255,.72); font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); margin: 14px 0 0; max-width: 34em; }
.sp-footer__cta .wp-block-buttons { margin: 0; }
@media (max-width: 900px) { .sp-footer__cta { grid-template-columns: 1fr; align-items: start; } }

/* Zahlen: Serif-Ziffern */
.sp-stat__wert { font-size: clamp(2.6rem, 1.7rem + 3.6vw, 5rem); }

/* Handy-Feinschliff */
@media (max-width: 640px) {
  .sp-phero { min-height: 520px; }
  .sp-phero__claim { font-size: clamp(2rem, 9vw, 2.9rem); }
  .sp-phero__cue { display: none; }
  .sp-strip { height: clamp(260px, 62vw, 400px); }
  .sp-strip__item img { max-width: 86vw; }
  .sp-tabelle__row { grid-template-columns: 1fr; gap: 4px; }
  .sp-tabelle__note { grid-column: 1; }
  .sp-ptitle { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}


/* ===== Korrekturen aus dem Responsive- und Safari-Audit ===== */
.sp-hero.is-scrub .sp-hero__stage { height: 100vh; height: 100lvh; }
.sp-hero.is-scrub .sp-hero__band:not(.on) { visibility: hidden; }
.sp-hero__ring, .sp-hero__cue { bottom: calc(28px + (100lvh - 100svh)); }
.sp-hero.is-scrub .sp-hero__ending { transition: none; }
.sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: 12px; right: calc(var(--sp-gutter) - 10px); width: 44px; height: 44px; display: grid; place-items: center; z-index: 5; }
.admin-bar .sp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 58px; }
.sp-field .sp-check, .sp-field label.sp-check { font-size: .9375rem; text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.5; min-height: 44px; color: var(--sp-grey); }
.sp-check input { width: 20px; height: 20px; }
.sp-field__error { margin: 6px 0 0; font-size: .875rem; color: #B4372D; }
.sp-field.is-invalid input, .sp-field.is-invalid textarea, .sp-field.is-invalid .sp-msel__btn { border-bottom-color: #B4372D; }
.sp-eckdaten__label, .sp-card__kicker { font-size: .72rem; }
.sp-dist__art { font-size: .75rem; }
.sp-map__attr { font-size: .7rem; }
.sp-hero__cue { font-size: .7rem; }
.sp-nav-projekt__meta { font-size: .75rem; }
.sp-footer__nav .wp-block-navigation-item__content { padding: 10px 0; }
.sp-footer__nav .wp-block-navigation__container { gap: 0; }
.sp-map__hint { font-size: .75rem; padding: 15px 18px; min-height: 44px; }
@media (pointer: coarse) { .sp-map .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; } .sp-map .leaflet-control-zoom { margin: 0 12px 40px 0 !important; } }
.sp-strip { scroll-padding-inline: var(--sp-gutter); }
.sp-lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.sp-lightbox::backdrop { background: rgba(10,15,31,.92); }
.sp-lightbox[open] { display: grid; place-items: center; }
.sp-lightbox figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; max-height: calc(100svh - 48px); max-width: min(1100px, calc(100vw - 48px)); }
.sp-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
html.sp-lock { overflow: hidden; }
@media (max-width: 900px) {
  .sp-uhero__facts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px !important; }
  .sp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-overview__wert { overflow-wrap: anywhere; hyphens: auto; font-size: 1.25rem; }
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .sp-stat__row { flex-wrap: wrap !important; }
  .sp-stat__wert { font-size: clamp(2rem, 9vw, 2.6rem); min-width: 0; }
  .sp-eckdaten__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-step__text, .sp-person__fokus, .sp-dist li, .sp-checklist li, .sp-eckdaten__wert, .sp-footer__claim, .sp-footer__text, .sp-footer__nav .wp-block-navigation-item__content, .sp-tabelle__wert { font-size: 1rem; }
  .sp-energie, .sp-card__facts, .sp-small, .sp-fact, .sp-tabelle__label { font-size: .9375rem; }
}
@media (max-width: 400px) { .sp-uhero__facts { grid-template-columns: 1fr; } .sp-overview { grid-template-columns: 1fr; } }

/* -------- 2.1.0 Feinschliff: Abstände der Projektseite auf dem Telefon -------- */
@media (max-width: 640px) {
  .sp-pfacts { padding-block: 64px 56px; }
  .sp-pband { padding-bottom: 56px; }
  .sp-phauslage { padding-top: 56px; }
  .sp-map__hint { bottom: 34px; }
}