/* arcitects Theme – hell-first nach arcitects.de (Analyse 09/2026)
Navy #101334 · Akzent Violett #A514ED · Rosa #F198FF · Karten-Verläufe radial (Navy/Violett/Magenta)
Weißer Grund, dunkle Sektions-Inseln mit 20px-Radius, Pill-Buttons ohne Verlaufs-Fill, Video-Hero.
Klassenpräfix "w-" ist vom water-Theme geerbt (gleiche Agentur-Handschrift, gemeinsame Bausteine). */
:root {
--w-primary: #101334;
--w-accent: #A514ED;
--w-tertiary: #F198FF;
--w-surface: #EFEFEF;
--w-bg: #FFFFFF;
--w-ink: #101334;
--w-text: #101334;
--w-text-soft: rgba(16,19,52,.75);
--w-black: #000000;
--w-grad-1: radial-gradient(120% 80% at 40% 50%, #040112 0%, #64277A 100%);
--w-grad-2: radial-gradient(120% 80% at 40% 50%, #000000 0%, #A11260 100%);
--w-grad-3: radial-gradient(120% 80% at 40% 50%, #080323 0%, #14307E 100%);
--w-gradient: var(--w-grad-1);
--w-body-font: Inter, 'Helvetica Neue', Arial, sans-serif;
--w-heading-font: 'Spock', 'Helvetica Neue', Arial, sans-serif;
--w-mono: var(--w-body-font);
--w-container: 1600px;
--w-gutter: 1rem;
--w-radius-card: 20px;
--w-radius-lg: 2rem;
--w-radius-bar: 22px;
--w-line: rgba(16,19,52,.14);
--w-sbw: 0px; /* Breite einer sichtbaren Scrollleiste, setzt js/main.js */
--w-glass: rgba(255,255,255,.05);
/* Typo-Skala wie Original (--fs-*) */
--w-fs-xs: .875rem; --w-fs-base: 1rem; --w-fs-sm: 1.125rem;
--w-fs-md: clamp(1.125rem, .125vw + 1.1rem, 1.25rem);
--w-fs-lg: clamp(1.4375rem, .5625vw + 1.325rem, 2rem);
--w-fs-xl: clamp(2rem, 1.75vw + 1.65rem, 3.75rem);
--w-space-xs: clamp(1.125rem, .375vw + 1.05rem, 1.5rem);
--w-space-sm: clamp(1.75rem, 1.25vw + 1.5rem, 3rem);
--w-space-md: clamp(2.125rem, 1.75vw + 1.775rem, 3.875rem);
--w-space-lg: clamp(2.75rem, 2.125vw + 2.325rem, 4.875rem);
--w-space-xl: clamp(3.5rem, 2.5625vw + 2.9875rem, 6.0625rem);
--w-space-xxl: clamp(4rem, 3.375vw + 3.325rem, 7.375rem);
}
@media (min-width: 64em) { :root { --w-gutter: 4rem; } }
@font-face { font-family: 'Inter'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/Inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spock'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/spockess-light-webfont.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spock'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/spockess-regular-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spock'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/spockess-bold-webfont.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spock'; src: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/fonts/spockess-black-webfont.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
/* Basis – heller Grund (Original: body weiß, Text schwarz/Navy, Inter 1.125rem/153 %) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--w-body-font);
font-size: var(--w-fs-sm);
line-height: 1.53;
color: var(--w-black);
background-color: var(--w-bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--w-heading-font); font-weight: 400; color: var(--w-primary); margin: 0 0 1rem; line-height: 1.2; letter-spacing: 0; }
h1 { font-size: var(--w-fs-xl); line-height: 1.1; }
h2 { font-size: var(--w-fs-lg); }
h3 { font-size: var(--w-fs-md); }
h4 { font-size: var(--w-fs-md); }
p { margin: 0 0 1em; color: inherit; max-width: 76ch; }
a { color: var(--w-accent); text-decoration: none; transition: color .35s ease-in-out; }
a:hover { color: var(--w-primary); }
img, video { max-width: 100%; height: auto; }
figure { margin: 0; }
/* Typo-Helfer (Original: is-style-overline, has-spock-font-family has-h-2-font-size, has-h-1-font-size) */
.w-overline { font: 400 1rem/1.3 var(--w-body-font); color: var(--w-primary); margin: 0 0 1.5rem; }
.w-lead { font: 400 var(--w-fs-sm)/1.53 var(--w-body-font); color: var(--w-black); }
.w-spock { font-family: var(--w-heading-font); font-weight: 400; font-size: var(--w-fs-lg); line-height: 1.53; max-width: 76ch; }
.w-display { font-size: var(--w-fs-xl); line-height: 1.1; }
.w-label { font: 400 1rem/1.3 var(--w-body-font); color: var(--w-primary); }
.w-gradient-text { color: var(--w-accent); }
.w-center { text-align: center; }
.w-center p, .w-center .w-spock { margin-left: auto; margin-right: auto; }
/* Dunkler Kontext (Sektions-Inseln, Karten, Footer): alles weiß – Buttons behalten ihre Varianten */
.w-on-dark, .w-on-dark h1, .w-on-dark h2, .w-on-dark h3, .w-on-dark h4, .w-on-dark p, .w-on-dark .w-overline, .w-on-dark .w-label, .w-on-dark .w-lead { color: #FFFFFF; }
.w-on-dark a { color: #FFFFFF; }
.w-on-dark a:hover { color: var(--w-tertiary); }
.w-on-dark .w-gradient-text { color: var(--w-tertiary); }
.w-on-dark .w-btn, .w-on-dark .w-btn:hover { color: #FFFFFF; }
.w-on-dark .w-btn--secondary { color: var(--w-primary); }
.w-on-dark .w-btn--secondary:hover { color: #FFFFFF; }
/* Container (Original: o-wrapper max 100em + 4rem Gutter; Sektions-Inseln bis 100em + 8rem) */
.w-content { width: min(var(--w-container), calc(100% - 2 * var(--w-gutter))); margin: 0 auto; }
.w-content--narrow { width: min(760px, calc(100% - 2 * var(--w-gutter))); margin: 0 auto; }
.w-content--sm { width: min(50rem, calc(100% - 2 * var(--w-gutter))); margin: 0 auto; }
/* Sektions-Insel (Original: .o-section.has-background – Navy, Radius 20px, max 100em + 8rem, mittig).
dnd_section hat keinen css_class-Parameter → jede Sektion MIT Hintergrundfarbe (HubSpot-Klasse "*-background-*") ist eine Insel;
js/main.js ergänzt dort .w-island für die Animation. */
.dnd-section.w-island, .dnd-section[class*="-background-"] { width: min(calc(var(--w-container) + 8rem), calc(100% - 2 * var(--w-gutter))); margin: 0 auto; border-radius: var(--w-radius-card); }
/* Buttons (Original .c-btn: Spock 1.125rem, Pill 2rem, .8rem/2.4rem, Farbwechsel .35s – kein Fill-Effekt) */
.w-btn, .hs-button, input[type="submit"], button[type="submit"] {
display: inline-block; position: relative;
font: 400 var(--w-fs-sm)/1.25 var(--w-heading-font);
padding: .8rem 4.25rem;
border-radius: 2rem;
background: var(--w-accent); color: #FFFFFF; border: 1px solid transparent;
text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color .35s cubic-bezier(.4,.44,.55,1), color .35s cubic-bezier(.4,.44,.55,1), border-color .35s cubic-bezier(.4,.44,.55,1);
}
.w-btn:hover, .hs-button:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: var(--w-primary); color: #FFFFFF; border-color: #FFFFFF; }
.w-btn--secondary, .w-btn--white, .w-btn--outline-dark { background: #FFFFFF; color: var(--w-primary); border-color: var(--w-primary); }
.w-btn--secondary:hover, .w-btn--white:hover, .w-btn--outline-dark:hover { background: var(--w-accent); color: #FFFFFF; border-color: transparent; }
.w-btn--tertiary, .w-btn--outline { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.w-btn--tertiary:hover, .w-btn--outline:hover { background: var(--w-accent); color: #FFFFFF; border-color: transparent; }
.w-btn--quaternary, .w-btn--dark { background: var(--w-primary); color: #FFFFFF; }
.w-btn--quaternary:hover, .w-btn--dark:hover { background: var(--w-accent); }
.w-btn--link { background: none; border: 0; padding: .85rem 0; color: var(--w-primary); border-radius: 0; }
.w-btn--link:hover { background: none; color: var(--w-accent); }
.w-btn--dark-outline { background: transparent; border: 1px solid var(--w-primary); color: var(--w-primary); padding: .5rem 1.2rem; font-size: 14px; }
.w-btn--dark-outline:hover { background: var(--w-primary); color: #FFFFFF; }
.w-btn-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: var(--w-space-md) 0; }
.w-btn-row--center { justify-content: center; }
.w-arrowlink { display: inline-flex; align-items: center; gap: .5rem; font: 600 var(--w-fs-base)/1.2 var(--w-body-font); color: var(--w-accent); }
.w-arrowlink::after { content: '→'; transition: transform .35s ease; }
.w-arrowlink:hover::after { transform: translateX(.4rem); }
.w-readmore { display: inline-block; font: 600 var(--w-fs-base)/1.2 var(--w-body-font); color: var(--w-accent); }
/* Header (Original .c-header: fixed, transparent, Logo max 15rem; gescrollt weiß 95 % + Logo 11rem, ab 40px) */
/* Header liegt wie im Original (.c-header fixed) auf allen Seiten über dem Inhalt: Wrapper ohne Höhe, sonst verschiebt
das Schrumpfen der Leiste beim Scrollen den ganzen Seiteninhalt (sichtbarer Sprung). Helle Seiten bekommen dafür
den Platz der ungescrollten Leiste als main-Abstand (Logo 15rem × 70/205 + 2 × 1rem Padding). */
div[data-global-resource-path$="partials/header.html"] { position: sticky; top: 0; z-index: 40; height: 0; }
body:not(.w-page--hero-dark) main { padding-top: calc(15rem * 9 / 16); }
.w-site-header { position: relative; z-index: 40; width: min(calc(var(--w-container) + 8rem), 100%); margin: 0 auto; border-radius: 0 0 1.25rem 1.25rem; opacity: 0; transition: background-color .35s cubic-bezier(.4,.44,.55,1); }
/* Einblenden (Original: show 2s ab 1s). Auf Video-Hero-Seiten erst, wenn der Hero-Reveal fertig ist (JS setzt .w-hero-done am Root-Element),
damit die Leiste nie über der noch weißen Fläche steht; ohne JS sofort sichtbar. */
body:not(.w-page--hero-dark) .w-site-header { animation: wtrHeaderShow 2s cubic-bezier(.4,.44,.55,1) 1s forwards; }
.w-hero-done .w-site-header { animation: wtrHeaderShow 2s cubic-bezier(.4,.44,.55,1) forwards; }
html:not(.w-js) .w-site-header { opacity: 1; }
@keyframes wtrHeaderShow { to { opacity: 1; } }
.w-site-header > .w-content { width: 100%; padding: 0 var(--w-gutter); }
.w-site-header__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0; }
.w-site-header.is-scrolled { background: rgba(255,255,255,.95); }
.w-site-header__logo { display: block; width: 100%; max-width: 15rem; transition: max-width .35s cubic-bezier(.4,.44,.55,1); }
.w-site-header.is-scrolled .w-site-header__logo { max-width: 11rem; }
.w-site-header__logo { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; }
.w-site-header__logo img { display: block; width: 100%; height: auto; transition: opacity .35s cubic-bezier(.4,.44,.55,1); }
.w-site-header__logo .w-logo--light { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.w-site-header__logo .w-logo--dark { opacity: 1; }
/* Dunkler Hero (Video): Logo/Burger hell, bis gescrollt oder Menü offen – Wechsel als Überblendung */
.w-page--hero-dark .w-site-header:not(.is-scrolled):not(.is-active) .w-site-header__logo .w-logo--light { opacity: 1; }
.w-page--hero-dark .w-site-header:not(.is-scrolled):not(.is-active) .w-site-header__logo .w-logo--dark { opacity: 0; }
.w-site-header__actions { display: flex; align-items: center; gap: 2rem; }
.w-site-header__actions > .hs_cos_wrapper, .w-lang li { display: flex; align-items: center; line-height: 1; margin: 0; padding: 0; }
.w-site-header__bar .hs-button { padding: .8rem 4.25rem; font-size: var(--w-fs-sm); }
.w-site-header__bar .hs-button::before { display: none; }
.w-lang { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.w-lang a { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--w-primary); border-radius: 2rem; color: var(--w-primary); font: 400 var(--w-fs-base)/1.2 var(--w-heading-font); text-transform: uppercase; transition: all .35s; }
.w-lang a:hover { background: var(--w-accent); border-color: transparent; color: #FFFFFF; }
.w-page--hero-dark .w-site-header:not(.is-scrolled):not(.is-active) .w-lang a { border-color: #FFFFFF; color: #FFFFFF; }
/* Vollbild-Navigation (Original .c-header__nav: weiß, fixed, wächst aus einer Pille in der Mitte oben zum Vollbild) */
.w-nav { position: fixed; top: 0; left: 50%; z-index: 1; width: 50vw; height: 0; padding: 0; margin: 0; transform: translateX(-50%); background: #FFFFFF; border-radius: 2rem; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 2rem rgba(0,0,0,.3); visibility: hidden; transition: width 1.5s cubic-bezier(.87,0,.13,1), height 1.5s cubic-bezier(.87,0,.13,1), border-radius 1.5s cubic-bezier(.87,0,.13,1), padding 1.5s cubic-bezier(.87,0,.13,1), visibility 0s linear 1.5s; }
.w-site-header.is-open .w-nav { width: calc(100vw - var(--w-sbw)); height: 100vh; height: 100svh; padding: 2rem; border-radius: 0; visibility: visible; transition-delay: 0s; }
.w-nav .hs-menu-wrapper > ul { list-style: none; margin: 0; padding: 0; }
.w-nav .hs-menu-wrapper > ul ul { display: none; }
.w-nav .hs-menu-wrapper > ul > li { display: block; text-align: center; margin-bottom: 1rem; opacity: 0; transform: translateY(25px); transition: opacity .6s cubic-bezier(.37,0,.63,1), transform .6s cubic-bezier(.37,0,.63,1); }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li { opacity: 1; transform: none; transition-duration: 1.45s, 1.45s; }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li:nth-child(1) { transition-delay: .75s; }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li:nth-child(2) { transition-delay: .9s; }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li:nth-child(3) { transition-delay: 1.05s; }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li:nth-child(4) { transition-delay: 1.2s; }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li:nth-child(5) { transition-delay: 1.35s; }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li:nth-child(6) { transition-delay: 1.5s; }
.w-site-header.is-open .w-nav .hs-menu-wrapper > ul > li:nth-child(n+7) { transition-delay: 1.65s; }
.w-nav .hs-menu-wrapper > ul > li > a { font: 600 var(--w-fs-xl)/1.5 var(--w-heading-font); text-transform: uppercase; text-align: center; color: #000000; text-decoration: none; transition: color .35s ease-in-out; }
.w-nav .hs-menu-wrapper > ul > li > a:hover { color: var(--w-primary); }
/* Original: JS teilt den Linktext, dazwischen ein Parallelogramm (SVG 112×42) mit Breite 0; bei Hover/Fokus fährt es per GSAP
(width: auto, .65 s, power4.inOut) auf, bei Wörtern mit Leerzeichen rückt das zweite Wort zusätzlich 1rem heran (margin .65 s ease) */
.w-nav .w-nav__object { overflow: hidden; width: 0; display: inline-block; line-height: 0; transition: width .65s cubic-bezier(.76,0,.24,1); }
.w-nav a:hover .w-nav__object, .w-nav a:focus-visible .w-nav__object { width: 112px; }
.w-nav .w-nav__space + .w-nav__object { margin-left: 0; margin-bottom: -.15rem; transition: margin-left .65s ease, width .65s cubic-bezier(.76,0,.24,1); }
.w-nav a:hover .w-nav__space + .w-nav__object { margin-left: -1rem; }
.w-nav .hs-menu-wrapper > ul > li:nth-child(odd) .w-nav__object svg path { fill: var(--w-accent); }
@media (max-width: 767px) { .w-nav { width: 80vw; } }
/* Burger (Original .c-m-menu--collapse aus „delicious-hamburgers“: 65px-Kreis, 1px Rahmen, padding 1rem, drei Balken 2px über
volle Innenbreite bei -8/0/+8px; Balken 1+3 tragen die Farbe auf ::before. Öffnen: Balken rücken zur Mitte (.25s), dann drehen
::before um 135°/45° (.35s, Delay .15s), mittlerer Balken blendet aus. Hover: Fläche Akzent, Balken weiß. Aktiv: Rahmen + Balken Akzent) */
.w-burger { --bar: var(--w-primary); position: relative; display: block; width: 65px; height: 65px; padding: 1rem; margin: 0; background: transparent; border: 1px solid var(--w-primary); border-radius: 50%; cursor: pointer; transition: background-color .2s cubic-bezier(.645,.045,.355,1), border-color .35s cubic-bezier(.645,.045,.355,1); }
.w-burger span { position: absolute; left: 1rem; right: 1rem; top: 50%; height: 2px; margin-top: -1px; background: none; transition: transform .3s cubic-bezier(.645,.045,.355,1) .2s, opacity .25s cubic-bezier(.645,.045,.355,1) .25s; }
.w-burger span::before { content: ''; position: absolute; inset: 0; background: var(--bar); transition: transform .35s cubic-bezier(.645,.045,.355,1), background-color .2s cubic-bezier(.645,.045,.355,1); }
.w-burger span:nth-child(1) { transform: translate3d(0, -8px, 0); }
.w-burger span:nth-child(3) { transform: translate3d(0, 8px, 0); }
.w-burger:hover, .w-burger:focus { --bar: #FFFFFF; background: var(--w-accent); outline: 0; }
.w-page--hero-dark .w-site-header:not(.is-scrolled):not(.is-active) .w-burger { --bar: #FFFFFF; border-color: #FFFFFF; }
.w-site-header.is-open .w-burger { --bar: var(--w-accent); border-color: var(--w-accent); }
.w-site-header.is-open .w-burger:hover, .w-site-header.is-open .w-burger:focus { --bar: #FFFFFF; }
.w-site-header.is-open .w-burger span { transition: transform .25s cubic-bezier(.645,.045,.355,1), opacity .25s cubic-bezier(.645,.045,.355,1); }
.w-site-header.is-open .w-burger span:nth-child(1), .w-site-header.is-open .w-burger span:nth-child(3) { transform: translate3d(0, 0, 0); }
.w-site-header.is-open .w-burger span:nth-child(1)::before { transform: rotate(135deg); transition-delay: .15s; }
.w-site-header.is-open .w-burger span:nth-child(3)::before { transform: rotate(45deg); transition-delay: .15s; }
.w-site-header.is-open .w-burger span:nth-child(2) { opacity: 0; }
@media (max-width: 767px) { .w-burger { width: 45px; height: 45px; padding: .5rem; } .w-burger span { left: .5rem; right: .5rem; } .w-site-header__actions { gap: 1rem; } }
/* Menü-Overlay (Original: Vollbild-Navigation unter dem Header, große Spock-Links) */
@keyframes wtrPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* Footer (Original .c-footer: Navy, Radius 20px oben, max 100em + 8rem; Grid 5/12 | 7/12) */
.w-site-footer { position: relative; z-index: 1; margin: var(--w-space-xl) auto 0; width: min(calc(var(--w-container) + 8rem), 100%); background: var(--w-primary); color: #FFFFFF; border-radius: var(--w-radius-card) var(--w-radius-card) 0 0; padding: var(--w-space-lg) 0 var(--w-space-md); }
.w-site-footer__inner { width: min(var(--w-container), calc(100% - 2 * var(--w-gutter))); margin: 0 auto; }
.w-site-footer__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--w-space-md) var(--w-space-lg); align-items: start; }
.w-site-footer__logo { display: block; max-width: 15rem; }
.w-site-footer__logo img { display: block; width: 100%; height: auto; }
.w-site-footer__actions { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: var(--w-space-xs); }
.w-site-footer__actions .hs_cos_wrapper { display: inline-flex; }
.w-site-footer__actions .hs-button { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.w-site-footer__actions .hs-button:hover { background: var(--w-accent); border-color: transparent; }
.w-site-footer__actions #hs_cos_wrapper_footer_cta_primary .hs-button { background: #FFFFFF; color: var(--w-primary); border-color: var(--w-primary); }
.w-site-footer__actions #hs_cos_wrapper_footer_cta_primary .hs-button:hover { background: var(--w-accent); color: #FFFFFF; border-color: transparent; }
.w-site-footer__about p, .w-site-footer__mail p { color: #FFFFFF; font-size: var(--w-fs-base); max-width: 46ch; margin: 0; }
.w-site-footer__mail { text-align: right; }
.w-site-footer__mail a { color: #FFFFFF; }
.w-site-footer__mail a:hover { color: var(--w-tertiary); }
.w-site-footer__copy { font-size: var(--w-fs-xs); color: #FFFFFF; align-self: end; }
.w-site-footer__nav-wrap { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.w-site-footer__social { display: inline-flex; color: #FFFFFF; }
.w-site-footer__social:hover { color: var(--w-tertiary); }
.w-site-footer__legal-nav .hs-menu-wrapper ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2rem; padding: 0; margin: 0; }
.w-site-footer__legal-nav .hs-menu-wrapper ul ul { display: none; }
.w-site-footer__legal-nav a { font-size: var(--w-fs-xs); color: #FFFFFF; }
.w-site-footer__legal-nav a:hover { color: var(--w-tertiary); }
@media (max-width: 767px) {
.w-site-footer { border-radius: var(--w-radius-card) var(--w-radius-card) 0 0; }
.w-site-footer__grid { grid-template-columns: 1fr; }
.w-site-footer__actions, .w-site-footer__mail { justify-content: flex-start; text-align: left; }
}
/* ===== Video-Hero (Original .c-hero--default: 95svh, Media absolut, Verlauf oben/unten, Text unten links,
Clip-Path-Reveal: schmaler Streifen unten → volle Breite → volle Höhe, dann Content gestaffelt) ===== */
.w-vhero { position: relative; display: flex; width: calc(100vw - var(--w-sbw)); margin-left: calc(50% - 50vw + var(--w-sbw) / 2); min-height: 95svh; overflow: hidden; background: var(--w-primary); isolation: isolate; }
.w-vhero--rounded { width: 100%; margin-left: 0; }
/* Reveal wie Original-Timeline (GSAP): Streifen unten Mitte → volle Breite (0–1,5 s) und überlappend nach oben (0,75–1,75 s), expo.inOut;
Kurven als lineare Keyframes vorgerechnet. Hero bleibt bis zum JS-Start unsichtbar (kein Aufblitzen). */
.w-js .w-vhero { clip-path: inset(99% 40% 0% 40% round 8rem); animation: wtrHeroReveal 1.75s linear forwards; }
.w-vhero:not(.w-vhero--rounded) { opacity: 0; }
.w-js .w-vhero, .w-no-js .w-vhero { opacity: 1; }
@keyframes wtrHeroReveal {
0.0% { clip-path: inset(99.00% 40.0% 0% 40.0% round 8.00rem); }
8.6% { clip-path: inset(99.00% 39.8% 0% 39.8% round 7.98rem); }
17.1% { clip-path: inset(99.00% 39.3% 0% 39.3% round 7.94rem); }
25.7% { clip-path: inset(99.00% 37.2% 0% 37.2% round 7.75rem); }
31.4% { clip-path: inset(99.00% 32.9% 0% 32.9% round 7.37rem); }
35.4% { clip-path: inset(99.00% 26.5% 0% 26.5% round 6.80rem); }
38.9% { clip-path: inset(99.00% 16.4% 0% 16.4% round 5.91rem); }
41.1% { clip-path: inset(99.00% 5.9% 0% 5.9% round 4.97rem); }
43.4% { clip-path: inset(98.94% -9.0% 0% -9.0% round 3.65rem); }
45.7% { clip-path: inset(98.90% -21.7% 0% -21.7% round 2.52rem); }
48.6% { clip-path: inset(98.81% -32.1% 0% -32.1% round 1.59rem); }
51.4% { clip-path: inset(98.61% -38.8% 0% -38.8% round 1.00rem); }
54.3% { clip-path: inset(98.23% -42.9% 0% -42.9% round 0.63rem); }
57.1% { clip-path: inset(97.45% -45.5% 0% -45.5% round 0.40rem); }
60.0% { clip-path: inset(95.91% -47.2% 0% -47.2% round 0.25rem); }
62.9% { clip-path: inset(92.81% -48.2% 0% -48.2% round 0.16rem); }
65.7% { clip-path: inset(86.63% -48.9% 0% -48.9% round 0.10rem); }
68.6% { clip-path: inset(74.25% -49.3% 0% -49.3% round 0.06rem); }
71.4% { clip-path: inset(49.50% -49.6% 0% -49.6% round 0.04rem); }
74.3% { clip-path: inset(24.75% -49.7% 0% -49.7% round 0.02rem); }
77.1% { clip-path: inset(12.37% -49.8% 0% -49.8% round 0.02rem); }
80.0% { clip-path: inset(6.19% -49.9% 0% -49.9% round 0.01rem); }
85.7% { clip-path: inset(1.55% -50.0% 0% -50.0% round 0.00rem); }
91.4% { clip-path: inset(0.39% -50.0% 0% -50.0% round 0.00rem); }
100.0% { clip-path: inset(0.00% -50.0% 0% -50.0% round 0.00rem); }
}
55% { clip-path: inset(99% -50% 0% -50% round 0); } 100% { clip-path: inset(0% 0% 0% 0% round 0); } }
.w-vhero__media { position: absolute; inset: 0; }
.w-vhero__media video, .w-vhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-vhero__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 49%, rgba(0,0,0,.6) 100%); }
.w-vhero__content { position: relative; z-index: 2; margin-top: auto; width: min(calc(var(--w-container) + 8rem), 100%); margin-left: auto; margin-right: auto; padding: 0 var(--w-gutter) var(--w-space-lg); display: flex; flex-direction: column; gap: 2rem; color: #FFFFFF; }
.w-vhero__content h1 { color: #FFFFFF; margin: 0; }
.w-vhero__content p { color: #FFFFFF; margin: 0; font-size: var(--w-fs-md); max-width: 76ch; }
.w-vhero__content .w-btn-row { margin: .25rem 0 0; }
.w-js .w-vhero__content > * { opacity: 0; transform: translateY(25px); animation: wtrHeroContent 1.25s cubic-bezier(.37,0,.63,1) forwards; }
.w-js .w-vhero__content > *:nth-child(1) { animation-delay: .6s; }
.w-js .w-vhero__content > *:nth-child(2) { animation-delay: .475s; }
.w-js .w-vhero__content > *:nth-child(3) { animation-delay: .35s; }
@keyframes wtrHeroContent { to { opacity: 1; transform: none; } }
/* Nach Abschluss der Einblendung Animationen/Clip entfernen: Safari hält sonst Text über dem laufenden Video als
eigene Compositing-Ebene (sichtbarer „Kasten“ hinter den Buchstaben) */
.w-js .w-vhero.is-settled { clip-path: none !important; animation: none !important; }
.w-js .w-vhero.is-settled .w-vhero__content > * { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Abgerundete Variante (Original .c-hero--rounded: Bild/Video im 16:9-Rahmen, Radius 2rem) */
.w-vhero--rounded { min-height: 0; aspect-ratio: 16 / 9; border-radius: var(--w-radius-lg); background: #000; }
.w-js .w-vhero--rounded { clip-path: inset(100% 25% 0% 25% round 2rem); animation: wtrHeroRevealRounded 2s cubic-bezier(.87,0,.13,1) .2s forwards; }
@keyframes wtrHeroRevealRounded { 0% { clip-path: inset(100% 25% 0% 25% round 2rem); } 55% { clip-path: inset(100% 0% 0% 0% round 2rem); } 100% { clip-path: inset(0% 0% 0% 0% round 2rem); } }
.w-vhero--rounded .w-vhero__media::before { content: none; }
.w-vhero--rounded .w-vhero__media video, .w-vhero--rounded .w-vhero__media img { border-radius: var(--w-radius-lg); }
.w-vhero__title { text-align: center; padding-bottom: var(--w-space-md); }
@media (max-width: 767px) { .w-vhero__content { gap: 1rem; } }
/* ===== Mobil (< 48em) – Original bei 390 px nachgemessen: Header 99px hoch (Logo 11rem, 16:9), Kontakt als 36px-Icon mit
Umschlag vor dem Burger (45px), Hero 95svh mit flachem Overlay .35, Rounded-Hero min. 50vh, Buttons 1rem / .6rem 1.6rem,
Inseln bis 8px an den Rand (Original: margin -.5rem). Sektions-Paddings kommen aus dem Mobil-Breakpoint der Seiten. ===== */
@media (max-width: 47.94em) {
:root { --w-sbw: 0px !important; }
body:not(.w-page--hero-dark) main { padding-top: 0; }
.w-site-header__logo { flex: 0 0 auto; width: 11rem; max-width: 11rem; }
.w-site-header.is-scrolled .w-site-header__logo { width: 9rem; max-width: 9rem; }
.w-site-header__actions { flex-shrink: 0; gap: 1rem; }
.w-burger { order: 2; }
.w-site-header__bar .hs-button { width: 36px; height: 36px; padding: 0; overflow: hidden; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }
.w-vhero:not(.w-vhero--rounded) { min-height: 95svh; }
.w-vhero--rounded { min-height: 50vh; }
.w-vhero--rounded:has(video) { min-height: 0; }
.w-vhero:not(.w-vhero--rounded) .w-vhero__media::before { background: rgba(0,0,0,.35); }
.w-btn, .hs-button, input[type="submit"], button[type="submit"] { font-size: 1rem; padding: .6rem 1.6rem; max-width: 100%; }
.dnd-section[class*="-background-"] { width: calc(100% - 1rem); }
}
@media (min-width: 48em) and (max-width: 63.94em) { .w-btn, .hs-button, input[type="submit"], button[type="submit"] { font-size: 1rem; padding: .8rem 2.4rem; } }
/* ===== Progress-Text (Original .c-progress-text: Spock-Absatz, Wörter starten bei 20 % und leuchten beim Scrollen auf) ===== */
.w-progress-text { font-family: var(--w-heading-font); font-weight: 400; font-size: var(--w-fs-lg); line-height: 1.53; }
.w-progress-text p { max-width: none; margin: 0 0 1em; }
.w-progress-text__w { display: inline-block; white-space: nowrap; }
.w-progress-text__c { display: inline; }
/* Block-Einblendung wie Original (opacity 0 / 30px → 1 / 0, 2 s expo.inOut beim Erscheinen) */
.w-js .w-progress-text { opacity: 0; transform: translateY(30px); transition: opacity 2s cubic-bezier(.87,0,.13,1), transform 2s cubic-bezier(.87,0,.13,1); }
.w-js .w-progress-text.is-inview { opacity: 1; transform: none; }
/* Original .o-layout: 12 Spalten, Gap 1rem; Overline u-4/12@md, Inhalt u-8/12@md (bei 1600px: 560/976) */
.w-two-col { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem 1rem; align-items: start; }
.w-two-col > :first-child { grid-column: span 4; }
.w-two-col > :last-child { grid-column: span 8; }
.w-two-col--half > :first-child, .w-two-col--half > :last-child { grid-column: span 6; }
.w-two-col--5-7 > :first-child { grid-column: span 5; }
.w-two-col--5-7 > :last-child { grid-column: span 7; }
.w-two-col--8-4 > :first-child { grid-column: span 8; }
.w-two-col--8-4 > :last-child { grid-column: span 4; }
@media (max-width: 47.94em) { .w-two-col > :first-child, .w-two-col > :last-child { grid-column: 1 / -1; } }
/* Kundenstimmen (Original): Overline volle Breite, Slider u-10/12 u-push-1 (188/1224), Karten 2 je Ansicht, Pfeile zentriert */
.w-quotes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.w-quotes__head { grid-column: 1 / -1; margin-bottom: 0; }
.w-quotes__slider { grid-column: 1 / -1; margin-top: 2.75rem; }
@media (min-width: 48em) { .w-quotes__slider { grid-column: 2 / 12; } }
@media (max-width: 47.94em) { .w-quotes .w-quote { padding: 2.5rem 1.5rem; } }
/* Akkordeon gestapelt (Original Workshops): Overline, Display-Headline, Akkordeon volle Breite mit 1rem Abstand */
.w-acc-stack .w-overline { margin-bottom: 0; }
.w-acc-stack .w-display { margin: 0; }
.w-acc-stack .w-accordion { margin-top: 1rem; }
.w-section-border { position: relative; padding-top: var(--w-space-lg); }
.w-section-border::before { content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: var(--w-primary); }
.w-js .w-section-border::before { width: 0; transition: width 1.25s cubic-bezier(.87,0,.13,1); }
.w-js .w-section-border.is-inview::before { width: 100%; }
/* ===== Slider (Original: Embla) – Scroll-Snap + Buttons/Dots/Scrollbar ===== */
.w-slider { position: relative; --slide-size: 100%; --slide-gap: 1rem; }
.w-slider__track { display: flex; gap: var(--slide-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.w-slider__track::-webkit-scrollbar { display: none; }
.w-slider__slide { flex: 0 0 var(--slide-size); min-width: 0; scroll-snap-align: start; }
.w-slider__controls { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: var(--w-space-md); }
.w-slider__buttons { display: flex; gap: 2rem; align-items: center; justify-content: center; }
.w-slider__btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--w-primary); background: transparent; color: var(--w-primary); cursor: pointer; transition: background-color .35s, transform .35s, color .35s, border-color .35s; }
.w-slider__btn:hover:not(:disabled) { background: var(--w-accent); border-color: var(--w-accent); color: #FFFFFF; transform: translateY(-.25rem); }
.w-slider__btn:disabled { opacity: .35; cursor: default; }
.w-slider__btn svg { width: 24px; height: 24px; }
.w-slider__dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
.w-slider__dot { appearance: none; width: 1rem; height: 1rem; padding: 0; border-radius: 50%; border: 2px solid #B6B5B5; background: transparent; cursor: pointer; transition: background-color .35s; }
.w-slider__dot.is-selected, .w-slider__dot:hover, .w-slider__dot:focus { background: #B6B5B5; }
.w-on-dark .w-slider__btn { border-color: #FFFFFF; color: #FFFFFF; }
.w-slider.is-disabled .w-slider__dots, .w-slider.is-disabled .w-slider__scrollbar { display: none; }
.w-slider.is-disabled .w-slider__btn { opacity: .35; cursor: default; }
/* Bild-Slider (Original .c-slider--image: max 48rem, ein Bild, Dots darunter) */
.w-slider--image { max-width: 48rem; margin: 0 auto; }
.w-slider--image img { display: block; width: 100%; height: auto; border-radius: var(--w-radius-card); }
/* Kundenstimmen (Original .c-slider--clients: helle Kachel, Logo, Zitat, Autor; 2 pro Ansicht) */
.w-slider--quotes { --slide-size: calc(50% - var(--slide-gap) / 2); --slide-gap: 2rem; margin-top: var(--w-space-sm); }
.w-quote { display: flex; flex-direction: column; gap: 1rem; height: 100%; background: var(--w-surface); border-radius: var(--w-radius-card); padding: 3rem 2rem; cursor: grab; user-select: none; hyphens: auto; }
.w-quote__logo { margin: 0 auto 1rem; max-height: 60px; width: auto; }
.w-quote__text { font-size: var(--w-fs-sm); color: var(--w-black); margin: 0; }
.w-quote__author { margin-top: auto; font-size: var(--w-fs-base); color: var(--w-text-soft); }
/* Team-Slider (Original .c-slider--team: Porträt 16:14, Radius 2rem, Info oben rechts im Bild) */
.w-slider--team { --slide-size: 100%; }
.w-team-slide { position: relative; }
.w-team-slide__img { display: block; width: 100%; aspect-ratio: 1517 / 1285; object-fit: cover; border-radius: var(--w-radius-lg); background: #CFCFCF; }
.w-team-slide__info { position: absolute; top: 4rem; right: 4rem; max-width: 35%; color: var(--w-primary); }
.w-on-dark .w-team-slide__name, .w-on-dark .w-team-slide__role, .w-on-dark .w-team-slide__quote { color: var(--w-primary); }
.w-team-slide__name { font: 400 var(--w-fs-lg)/1.2 var(--w-heading-font); margin: 0 0 .25rem; }
.w-team-slide__role { font-size: var(--w-fs-base); margin: 0 0 2rem; }
.w-team-slide__quote { font-size: var(--w-fs-base); margin: 0; }
@media (max-width: 767px) { .w-team-slide__info { position: static; max-width: none; padding: 1rem 0 0; } .w-team-slide__img { border-radius: var(--w-radius-lg) var(--w-radius-lg) 0 0; } }
/* Schritte-Slider (Original .c-slider--scrollbar: nummerierte Slides 01/02/03, Scrollbar-Thumb, inaktive 60 %) */
.w-slider--steps { --slide-size: calc(33.333% - var(--slide-gap) * 2 / 3); --slide-gap: 2rem; counter-reset: slide; margin-top: var(--w-space-sm); }
.w-slider--steps .w-slider__slide { position: relative; padding-top: 3rem; opacity: .6; transition: opacity .35s; counter-increment: slide; cursor: grab; user-select: none; }
.w-slider--steps .w-slider__slide::before { content: counter(slide, decimal-leading-zero); position: absolute; top: 0; left: 0; font: 400 var(--w-fs-base)/1 var(--w-heading-font); }
.w-slider--steps .w-slider__slide.is-active, .w-slider--steps.is-disabled .w-slider__slide { opacity: 1; }
.w-slider--steps h4 { margin-bottom: .75rem; }
.w-slider__scrollbar { position: relative; height: 2px; background: rgba(255,255,255,.25); margin: 0 0 2rem; border-radius: 2px; }
.w-slider__scrollbar-thumb { position: absolute; top: -1px; height: 4px; border-radius: 4px; background: #FFFFFF; transition: left .35s ease, width .35s ease; }
@media (max-width: 1023px) { .w-slider--steps { --slide-size: calc(50% - var(--slide-gap) / 2); } .w-slider--quotes { --slide-size: 100%; } }
@media (max-width: 640px) { .w-slider--steps { --slide-size: 100%; } }
/* ===== Stacking-Cards (Original .c-card: sticky top 12rem, Radius 2rem, 6rem/4rem, Icon links 25 % | Text rechts, Verläufe 1–3) ===== */
.w-stack { position: relative; }
.w-stack__card { position: sticky; top: 12rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding: 6rem 4rem; margin-bottom: 2rem; border-radius: var(--w-radius-lg); background: var(--w-grad-3); color: #FFFFFF; }
.w-stack__card--g1 { background: var(--w-grad-1); }
.w-stack__card--g2 { background: var(--w-grad-2); }
.w-stack__card--g3 { background: var(--w-grad-3); }
.w-stack__icon { margin: 0 auto 0 25%; }
.w-stack__icon img { display: block; min-height: 12rem; width: auto; max-width: max-content; }
.w-stack__body h2, .w-stack__body h3 { color: #FFFFFF; font-size: var(--w-fs-lg); margin: 0 0 1rem; }
.w-stack__body p { color: #FFFFFF; margin: 0; }
.w-stack::after { content: ''; display: block; height: 10rem; }
@media (max-width: 1023px) { .w-stack__card { grid-template-columns: 1fr; padding: 3rem 1.5rem; top: 6.5rem; } .w-stack__icon { margin: 0 auto 2rem; } .w-stack__icon img { min-height: 8rem; } .w-stack::after { height: 4rem; } }
/* ===== Card-Extended (Original .c-card-extended: 10er-Grid, Icon 2 Spalten | Text 8, optional Schritte-Slider unten) ===== */
.w-xcard { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2rem 0; padding: 6rem 4rem; margin-bottom: 2rem; border-radius: var(--w-radius-lg); background: var(--w-grad-3); color: #FFFFFF; }
.w-xcard--g1 { background: var(--w-grad-1); } .w-xcard--g2 { background: var(--w-grad-2); } .w-xcard--g3 { background: var(--w-grad-3); }
.w-xcard__icon { grid-column: 1 / 3; }
.w-xcard__icon img { display: block; min-height: 10rem; width: auto; max-width: max-content; position: sticky; top: 12rem; }
.w-xcard__body { grid-column: 3 / -1; padding-left: var(--w-space-lg); display: flex; flex-direction: column; justify-content: center; }
.w-xcard__body h2, .w-xcard__body h3, .w-xcard__body p { color: #FFFFFF; }
.w-xcard__body h2 { font-size: var(--w-fs-lg); }
.w-xcard__body p + p { margin-top: 0; }
.w-xcard__interactive { grid-column: 1 / -1; margin-top: var(--w-space-xxl); padding-bottom: 1rem; }
.w-xcard__interactive h3 { color: #FFFFFF; font-size: var(--w-fs-lg); }
.w-xcard__interactive h4, .w-xcard__interactive p { color: #FFFFFF; }
@media (max-width: 1023px) { .w-xcard { padding: 3rem 1.5rem; } .w-xcard__icon, .w-xcard__body { grid-column: 1 / -1; } .w-xcard__body { padding-left: 0; } .w-xcard__icon img { margin: 0 auto 2rem; position: static; } }
/* ===== Mission-Block (Original .c-mission: Overline, großes Logo, zentrierter Spock-Text, Button) ===== */
.w-mission { text-align: center; padding-top: var(--w-space-xxl); }
.w-mission .w-overline { text-align: left; }
.w-mission__logo { display: block; width: min(700px, 100%); height: auto; margin: 0 auto var(--w-space-lg); }
.w-mission__text { font-family: var(--w-heading-font); font-weight: 400; font-size: var(--w-fs-lg); line-height: 1.5; max-width: 76ch; margin: 0 auto; }
.w-mission .w-btn-row { justify-content: center; }
/* ===== Vision-Kacheln (Original .c-vision: 2 Spalten, helle Kacheln 1.25rem, erste Kachel um 25 % nach unten versetzt) ===== */
.w-vision { columns: 2; gap: 2rem; padding-top: var(--w-space-xl); }
.w-vision__item { break-inside: avoid; margin-bottom: 2rem; padding: 2rem; background: var(--w-surface); border-radius: var(--w-radius-card); }
.w-vision__item:nth-child(1) { margin-top: 25%; }
.w-vision__label { font: 400 var(--w-fs-base)/1.3 var(--w-body-font); color: var(--w-primary); margin: 0 0 .75rem; }
.w-vision__text { font-family: var(--w-heading-font); font-weight: 400; font-size: var(--w-fs-lg); line-height: 1.53; margin: 0; max-width: none; }
@media (max-width: 1023px) { .w-vision { columns: 1; } .w-vision__item:nth-child(1) { margin-top: 0; } }
/* ===== Ansprechpartner (Original .c-contact-person: rundes Foto 106px, Name Spock, Rolle, Button) ===== */
.w-cperson { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: var(--w-space-sm) 0; }
.w-cperson__img { width: 106px; height: 106px; border-radius: 50%; object-fit: cover; flex: none; }
.w-cperson__name { font: 400 var(--w-fs-sm)/1.3 var(--w-heading-font); margin: 0; }
.w-cperson__role { font-size: var(--w-fs-xs); margin: 0; opacity: .85; }
.w-cperson .w-btn-row { margin: var(--w-space-md) auto 0 0; flex-basis: 100%; }
.w-cperson img { width: 106px !important; height: 106px !important; max-width: none; border-radius: 50%; object-fit: cover; display: block; }
.w-cperson > .hs_cos_wrapper { flex: none; }
.w-cperson p { margin: 0; }
.w-contact-modal .w-cperson { flex-wrap: nowrap; }
.w-cperson-block__title { font-size: var(--w-fs-lg); margin-bottom: var(--w-space-sm); }
.w-contact-cta { display: grid; grid-template-columns: 8fr 4fr; gap: 2rem 4rem; align-items: start; }
.w-contact-cta__text { font-family: var(--w-heading-font); font-weight: 400; font-size: var(--w-fs-lg); line-height: 1.53; margin: 0; max-width: none; }
@media (max-width: 900px) { .w-contact-cta { grid-template-columns: 1fr; } }
/* ===== Media-Text (Original wp-block-media-text: Headline links, Bild rechts 80 %, Schlusswort in Akzentfarbe) ===== */
.w-media-text { display: grid; grid-template-columns: auto 80%; gap: 2rem; align-items: center; }
.w-media-text h2 { font-size: var(--w-fs-xl); line-height: 1.1; margin: 0; }
.w-media-text__media img { display: block; width: 100%; height: auto; border-radius: var(--w-radius-card); }
@media (max-width: 900px) { .w-media-text { grid-template-columns: 1fr; } }
/* ===== Akkordeon (Original .c-accordion: Linie oben/unten wächst ein, Spock-Titel --fs-lg, +/-, Hover Akzent, optional Tag-Pill) ===== */
.w-accordion { position: relative; }
.w-accordion__item { position: relative; margin-bottom: 2rem; --line: var(--w-primary); }
.w-accordion__item::before { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--line); z-index: 3; }
.w-accordion__item:first-child { padding-top: 2rem; }
.w-accordion__item:first-child::after { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--line); z-index: 3; }
.w-js .w-accordion__item::before, .w-js .w-accordion__item:first-child::after { width: 0; transition: width 1.2s cubic-bezier(.87,0,.13,1) var(--delay, 0s); }
.w-js .w-accordion.is-inview .w-accordion__item::before, .w-js .w-accordion.is-inview .w-accordion__item:first-child::after { width: 100%; }
.w-accordion__summary { list-style: none; position: relative; cursor: pointer; padding: 0 3rem 2rem 0; font: 400 var(--w-fs-lg)/1.2 var(--w-heading-font); color: var(--w-primary); transition: color .35s; }
.w-accordion__summary::-webkit-details-marker { display: none; }
.w-accordion__summary::before, .w-accordion__summary::after { content: ''; position: absolute; top: .75rem; right: 8px; width: 20px; height: 2px; background: var(--w-primary); transition: transform .4s ease-in-out; }
.w-accordion__summary::before { transform: rotate(90deg); }
.w-accordion__item[open] .w-accordion__summary::before, .w-accordion__item[open] .w-accordion__summary::after { transform: rotate(180deg); }
.w-accordion__item:hover .w-accordion__summary { color: var(--w-accent); }
.w-accordion__tag { display: inline-block; margin: -.5rem 0 2rem; padding: .35rem 1rem; border: 1px solid var(--w-primary); border-radius: 2rem; font: 400 .8rem/1.2 var(--w-heading-font); color: var(--w-primary); }
.w-accordion__body { padding: 0 0 2rem; max-width: 76ch; }
.w-accordion__body p { margin: 0 0 1em; }
.w-on-dark .w-accordion__item { --line: rgba(255,255,255,.4); }
.w-on-dark .w-accordion__summary, .w-on-dark .w-accordion__tag { color: #FFFFFF; border-color: #FFFFFF; }
.w-on-dark .w-accordion__summary::before, .w-on-dark .w-accordion__summary::after { background: #FFFFFF; }
/* ===== Scroll-Animationen wie Original (GSAP-ScrollTrigger-Nachbau in js/main.js; Werte per Inline-Variablen) =====
--y Startversatz, --d Dauer, --e Kurve, transition-delay = Stagger */
.w-js .w-anim__item { opacity: 0; transform: translateY(var(--y, 25px)); transition: opacity var(--d, 1s) var(--e, cubic-bezier(.37,0,.63,1)), transform var(--d, 1s) var(--e, cubic-bezier(.37,0,.63,1)); }
.w-js .is-inview > .w-anim__item, .w-js .is-inview .w-anim__item, .w-js .w-anim__item.is-inview { opacity: 1; transform: none; }
.w-js .w-anim-btn { transition: opacity var(--d, 1.25s) var(--e), transform var(--d, 1.25s) var(--e), background-color .35s cubic-bezier(.4,.44,.55,1), color .35s cubic-bezier(.4,.44,.55,1), border-color .35s cubic-bezier(.4,.44,.55,1); }
/* Zeichen-Split für Überschriften/Akkordeon-Titel (Original SplitText "words, chars") */
.w-chars__w { display: inline-block; white-space: nowrap; }
.w-js .w-chars__c { display: inline-block; opacity: 0; transform: translateY(var(--y, 15px)); transition: opacity var(--d, 1s) cubic-bezier(.87,0,.13,1), transform var(--d, 1s) cubic-bezier(.87,0,.13,1); }
.w-js .is-inview .w-chars__c { opacity: 1; transform: none; }
/* Dunkle Insel: wächst aus 5rem auf volle Breite (1,5 s power4.out), Inhalt fällt von -40px ein (Original .has-background) */
.w-js .w-island.w-anim { transition: width 1.5s cubic-bezier(.165,.84,.44,1); }
.w-js .w-island.w-anim:not(.is-inview) { width: 5rem; overflow: hidden; }
.w-js .w-island.w-anim:not(.is-inview) > .row-fluid { width: calc(min(var(--w-container) + 8rem, 100vw - var(--w-sbw) - 2 * var(--w-gutter)) - 2 * var(--w-gutter) + 24px); margin: 0 auto; }
.w-btn__text { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; text-align: center; }
/* ===== Scroll-Reveal (übernommen) ===== */
.w-js .w-reveal { opacity: 0; transform: translateY(2.5rem); transition: opacity 1.2s cubic-bezier(.38,.005,.215,1), transform 1.2s cubic-bezier(.38,.005,.215,1); }
.w-js .w-reveal--1 { transition-delay: .15s; } .w-js .w-reveal--2 { transition-delay: .3s; } .w-js .w-reveal--3 { transition-delay: .45s; } .w-js .w-reveal--4 { transition-delay: .6s; }
.w-js .w-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .w-js .w-anim__item, .w-js .w-chars__c, .w-js .w-island.w-anim:not(.is-inview), .w-js .w-progress-text, .w-site-header, .w-vhero, .w-js .w-reveal, .w-js .w-vhero, .w-js .w-vhero__content > * { opacity: 1; transform: none; transition: none; animation: none; clip-path: none; } }
/* ===== Formulare (hell; Original: Unterstrich-Felder, Navy) ===== */
.hs-form-field { margin-bottom: 1.875rem; }
.hs-form-field label { display: block; font: 400 var(--w-fs-base)/1.4 var(--w-body-font); color: var(--w-primary); margin-bottom: .625rem; }
.hs-form-field input[type="text"], .hs-form-field input[type="email"], .hs-form-field input[type="tel"], .hs-form-field input[type="number"], .hs-form-field select, .hs-form-field textarea {
width: 100%; font: 400 var(--w-fs-base)/1.4 var(--w-body-font); color: var(--w-primary);
background: #FFFFFF; border: 0; border-bottom: 1px solid var(--w-primary); border-radius: 0; padding: .625rem;
}
.hs-form-field input::placeholder, .hs-form-field textarea::placeholder { color: #A5A5A5; }
.hs-form-field input:hover, .hs-form-field textarea:hover { border-color: #A9A9A9; }
.hs-form-field input:focus, .hs-form-field select:focus, .hs-form-field textarea:focus { outline: none; border-color: #696969; }
.hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; color: #D0033F; font-size: 13px; }
.hs-form-booleancheckbox label, .hs-form-checkbox label, .hs-form-radio label { font: 400 14px/1.5 var(--w-body-font); color: var(--w-text-soft); }
.w-on-dark .hs-form-field label { color: #FFFFFF; }
.w-on-dark .hs-form-field input, .w-on-dark .hs-form-field textarea, .w-on-dark .hs-form-field select { background: rgba(255,255,255,.08); color: #FFFFFF; border-bottom-color: rgba(255,255,255,.6); }
.w-on-dark .hs-form-field input::placeholder { color: rgba(255,255,255,.5); }
/* ===== Helle Sektionen – Scope aus water (hier Standard, Regeln bleiben für Modul-Markup gültig) ===== */
.w-on-light { color: var(--w-text-soft); }
.w-on-light h1, .w-on-light h2, .w-on-light h3, .w-on-light h4 { color: var(--w-primary); }
.w-on-light p { color: var(--w-black); }
.w-on-light .w-label { color: var(--w-primary); }
.w-on-light a { color: var(--w-primary); }
.w-on-light a:hover { color: var(--w-accent); }
.w-on-light .w-btn { color: #FFFFFF; }
.w-on-light a.w-btn:not(.w-btn--link):hover, .w-on-light .w-btn:not(.w-btn--link):hover { color: #FFFFFF; }
.w-on-light .w-btn--secondary { color: var(--w-primary); }
.w-on-light .w-btn--secondary:hover { color: #FFFFFF; }
.w-on-light .w-btn--link { color: var(--w-primary); }
.w-on-light .w-btn--link:hover { color: var(--w-accent); }
/* Werte-Spalten */
.w-valuecol { border-top: 2px solid transparent; border-image: var(--w-gradient) 1; padding-top: 18px; }
.w-valuecol h3 { margin-bottom: .4em; }
.w-valuecol p { color: var(--w-text-soft); font-size: 15px; }
/* Kennzahlen */
.w-stats { display: flex; border: 1px solid var(--w-line); border-radius: var(--w-radius-card); overflow: hidden; background: var(--w-glass); }
.w-stat { flex: 1; padding: 24px 20px; border-left: 1px solid var(--w-line); }
.w-stat:first-child { border-left: 0; }
.w-stat__value { font: 700 2rem/1.1 var(--w-heading-font); background: var(--w-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w-stat__label { font: 500 11px/1.4 var(--w-body-font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 6px; }
/* Testimonial */
.w-testimonial { background: var(--w-glass); border: 1px solid var(--w-line); border-radius: var(--w-radius-card); padding: 36px 32px; height: 100%; }
.w-testimonial blockquote { margin: 0; font: 400 1.25rem/1.5 var(--w-heading-font); color: #FFFFFF; }
.w-testimonial footer { margin-top: 18px; font: 500 12px/1.4 var(--w-body-font); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
/* Event-Chips + Zeilen */
.w-chip {
display: inline-block; font: 500 10px/1 var(--w-body-font); letter-spacing: .08em; text-transform: uppercase;
color: #FFFFFF; background: var(--_chip-color, var(--w-accent)); border-radius: 999px; padding: .4rem .8rem; margin-right: 10px;
}
.w-eventrow { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--w-line); }
.w-eventrow:last-child { border-bottom: 1px solid var(--w-line); }
.w-eventrow .w-label { flex: none; min-width: 260px; text-transform: none; letter-spacing: .04em; }
.w-eventrow strong { font: 400 1.05rem/1.3 var(--w-heading-font); color: #FFFFFF; }
/* Event-Laufband (helle Leiste, Tempo ~78px/s wie Live-Site) */
.w-marquee {
overflow: hidden; width: calc(100vw - var(--w-sbw)); margin-left: calc(50% - 50vw + var(--w-sbw) / 2);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}
@media (min-width: 64em) {
.w-marquee {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%);
}
}
.w-marquee__list { display: flex; align-items: center; gap: 48px; width: max-content; animation: wtrTicker 36s linear infinite; }
.w-marquee:hover .w-marquee__list { animation-play-state: paused; }
.w-marquee__item { display: flex; align-items: center; gap: 14px; white-space: nowrap; font: 400 16px/1.2 var(--w-heading-font); color: #101334; }
.w-marquee__meta { font: 400 15px/1.2 var(--w-body-font); color: rgba(16,19,52,.5); }
.w-marquee__place::before { content: ' · '; }
.w-marquee__item a { color: inherit; text-decoration: none; } /* Titel bleibt dunkel, auch als Link (Marketing-Event-URL) */
.w-marquee__item a:hover { color: var(--w-accent); }
.w-marquee__item::after { content: '·'; color: rgba(16,19,52,.35); margin-left: 34px; }
@keyframes wtrTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .w-marquee__list { animation: none; } }
/* CTA-Banner */
.w-cta-banner {
position: relative; overflow: hidden;
background: var(--w-glass); border: 1px solid var(--w-line); border-radius: var(--w-radius-card);
padding: clamp(40px, 6vw, 72px);
}
.w-cta-banner::before {
content: ''; position: absolute; left: -15%; right: -15%; bottom: -55%; height: 90%;
background: var(--w-gradient); opacity: .5; filter: blur(36px); transform: rotate(-8deg); pointer-events: none;
}
.w-cta-banner > * { position: relative; z-index: 1; }
.w-cta-banner h2 { max-width: 24ch; }
/* Grid für Drag-&-Drop */
.row-fluid { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row-fluid [class*="span"] { padding: 0 12px; width: 100%; }
@media (min-width: 768px) {
.row-fluid .span12 { width: 100%; }
.row-fluid .span11 { width: 91.666%; }
.row-fluid .span10 { width: 83.333%; }
.row-fluid .span9 { width: 75%; }
.row-fluid .span8 { width: 66.666%; }
.row-fluid .span7 { width: 58.333%; }
.row-fluid .span6 { width: 50%; }
.row-fluid .span5 { width: 41.666%; }
.row-fluid .span4 { width: 33.333%; }
.row-fluid .span3 { width: 25%; }
.row-fluid .span2 { width: 16.666%; }
.row-fluid .span1 { width: 8.333%; }
}
.dnd-section { padding: 88px 0; }
.dnd-section > .row-fluid { width: min(calc(var(--w-container) + 24px), calc(100% - 2 * var(--w-gutter) + 24px)); margin: 0 auto; }
/* ===== Blog (Original: helle Seiten mit data-theme=light) ===== */
/* Heller Seitenmodus: weißer Grund, dunkler Header, Liquid aus, Footer bleibt dunkel */
/* Swoosh-Deko (Original: icon-swoosh vor Sektions-Überschriften) */
/* Blog-Übersicht: Container + Kategorien-/Tag-Navigation */
.w-blog { max-width: var(--w-container); margin: 0 auto; padding: clamp(3rem, 5vw, 6rem) clamp(1rem, 3vw, 4rem) clamp(3.75rem, 5.4vw, 7.5rem); }
.w-blog__nav { position: relative; z-index: 1; padding: 1.5rem 0 .5rem; }
.w-blog__cats { display: flex; flex-wrap: nowrap; gap: 1rem; overflow-x: auto; scrollbar-width: none; list-style: none; margin: 0; padding: 0 0 2px; }
.w-blog__cats::-webkit-scrollbar { display: none; }
.w-blog__cats a {
display: inline-block; padding: .55rem 1.1rem; white-space: nowrap;
border: 1.5px solid #101334; border-radius: 2rem; font-size: 1rem; color: #101334;
transition: background-color .35s cubic-bezier(.38,.005,.215,1), color .35s cubic-bezier(.38,.005,.215,1);
}
.w-blog__cats a:hover, .w-blog__cats a.is-active { background: #101334; color: #FFFFFF; }
.w-blog__tags-wrap { margin-top: 1.5rem; padding-top: .5rem; }
.w-blog__tags { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.w-blog__tags li { display: contents; }
.w-tag {
display: inline-block; padding: .45rem .75rem; border: 1px solid #808080; border-radius: 4px;
font-size: 13px; color: #808080 !important; background: transparent;
transition: background-color .35s, color .35s, border-color .35s;
}
a.w-tag:hover, .w-tag.is-active { background: var(--w-accent); border-color: #101334; color: #FFFFFF !important; }
.w-blog__tags .w-blog__tags-more { display: none; }
.w-blog__tags.is-open .w-blog__tags-more { display: contents; }
.w-blog__tags-toggle {
display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .3rem .65rem;
border-radius: 2rem; border: 1px dashed #A2A6AF; background: transparent; color: #BBC1CC;
font: 400 13px/1.2 var(--w-body-font); cursor: pointer;
transition: color .35s cubic-bezier(.38,.005,.215,1), border-color .35s cubic-bezier(.38,.005,.215,1);
}
.w-blog__tags-toggle:hover { color: #101334; border-color: #101334; }
.w-blog__tags-toggle .w-caret { display: inline-block; transition: transform .35s cubic-bezier(.38,.005,.215,1); }
.w-blog__tags-toggle.is-open .w-caret { transform: rotate(180deg); }
/* Beitrags-Karten (Original: c-posts – Hover tauscht Bild gegen Teaser + Tags) */
.w-posts { padding-top: clamp(1.75rem, 2.5vw, 3.5rem); }
.w-posts h1 { font-size: clamp(1.85rem, 3.8vw, 2.375rem); margin-bottom: .5rem; }
.w-posts h2 { font-size: clamp(1.85rem, 3.8vw, 2.375rem); margin-bottom: .5rem; }
.w-posts > p { max-width: 60ch; }
.w-posts__grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: clamp(2.25rem, 3.2vw, 4.5rem); }
@media (min-width: 27.5em) { .w-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .w-posts__grid { grid-template-columns: repeat(3, 1fr); } }
.w-posts__item-wrap {
position: relative; height: 100%; overflow: hidden;
background: #FFFFFF; border-radius: 20px; box-shadow: inset 0 0 0 1px #BFBBBB;
padding-bottom: 5rem;
max-height: var(--max-height, none); min-height: var(--max-height, 0);
transition: all .65s ease-in-out;
}
.w-posts__item-image { margin: 0; width: calc(100% + 4px); }
.w-posts__item-image img, .w-posts__noimg {
display: block; width: 100%; aspect-ratio: 6 / 4; object-fit: cover;
margin: -2px -2px 0; border-radius: 20px 20px 0 0;
}
.w-posts__item-image img { transition: margin .65s ease-in-out, opacity .45s ease-in-out; }
.w-posts__noimg { background: var(--w-grad-1); }
.w-posts__item:hover .w-posts__item-image img { opacity: 0; margin-top: -100%; }
.w-posts__item-content { padding: clamp(1rem, 1.4vw, 2rem) 2rem 0 1.25rem; }
.w-posts__item-date { display: block; font-size: 13px; color: rgba(16,19,52,.75); padding-bottom: .65rem; }
.w-posts__item-content h3 { font-size: 1.5rem; line-height: 128%; margin: 0; padding-bottom: 1.25rem; }
.w-posts__item-content a:hover h3 { color: var(--w-accent); }
.w-posts__item-more { opacity: 0; max-height: 0; overflow: visible; transition: opacity .45s ease-in-out, max-height .6s ease-in-out; }
.w-posts__item:hover .w-posts__item-more { opacity: 1; max-height: 10000px; transition: margin .65s ease-in-out, opacity .95s ease-in-out, max-height 1.45s ease-in-out; }
.w-posts__item-more p { font-size: .95rem; }
.w-posts__item-tags { list-style: none; margin: 0; padding: .75rem 0 0; }
.w-posts__item-tags li { display: inline-block; margin-right: .5rem; }
.w-readmore { position: absolute; left: 1.25rem; bottom: 1rem; font: 700 15px/1.2 var(--w-body-font); color: var(--w-accent) !important; }
.w-readmore::after {
content: ''; display: inline-block; width: 18px; height: 18px; margin-left: .4rem; vertical-align: -.25em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .65s cubic-bezier(.38,.005,.215,1);
}
.w-readmore:hover::after { transform: translateX(.5rem); }
.w-posts--bg { background: #EAECF6; padding: clamp(1.75rem, 2.5vw, 3.5rem) 0 clamp(3.75rem, 5.4vw, 7.5rem); margin-top: clamp(3rem, 5vw, 6rem); }
.w-posts--bg .w-posts__item-wrap { box-shadow: none; }
/* Blätter-Navigation */
.w-blog__pager { display: flex; justify-content: center; gap: .75rem; padding-top: clamp(2.25rem, 3.2vw, 4.5rem); }
.w-blog__pager a, .w-blog__pager span.is-current {
min-width: 2.4rem; text-align: center; padding: .5rem .8rem;
border: 1.5px solid #101334; border-radius: 2rem; color: #101334; font-size: 15px;
transition: background-color .35s, color .35s;
}
.w-blog__pager a:hover, .w-blog__pager span.is-current { background: #101334; color: #FFFFFF; }
/* Karten-Pager (Events) – Optik wie der Blog-Pager */
.w-cardpager { display: flex; justify-content: center; align-items: center; gap: .5rem; padding-top: clamp(2rem, 3vw, 3.5rem); }
.w-cardpager button {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 32px; padding: .45rem .75rem;
background: transparent; border: 1px solid #101334; border-radius: 4px;
font: 400 14px/1 var(--w-heading-font); color: #101334; cursor: pointer;
transition: background-color .35s, color .35s, border-color .35s, opacity .35s;
}
.w-cardpager button::before { display: none; }
.w-cardpager button:hover:not(:disabled), .w-cardpager button.is-current { background: var(--w-accent); border-color: #101334; color: #FFFFFF; }
.w-cardpager button:disabled { opacity: .3; cursor: default; }
.w-cardpager__gap { color: rgba(16,19,52,.45); padding: 0 .25rem; }
/* Blog-Beitrag (Original: c-content--blog, Textspalte nach rechts gerückt) */
.w-article { max-width: var(--w-container); margin: 0 auto; padding: clamp(3rem, 5vw, 6rem) clamp(1rem, 3vw, 4rem) clamp(3.75rem, 5.4vw, 7.5rem); }
@media (min-width: 64em) { .w-article__wrap { margin-left: 25%; margin-right: 8.333%; } }
.w-article h1 { font-size: clamp(2rem, 4.8vw, 3rem); max-width: 60ch; margin: 0; padding-bottom: clamp(1rem, 1.4vw, 2rem); }
.w-article__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; padding: 1rem 0 clamp(2rem, 2.9vw, 4rem); }
.w-article__author { display: flex; align-items: center; }
.w-article__author img { width: 64px; height: 64px; border-radius: 8px; margin-right: 1rem; object-fit: cover; }
.w-article__author span { font-family: var(--w-heading-font); font-size: clamp(1.1rem, 2vw, 1.25rem); color: #101334; }
.w-article__author a, .w-article__body a:not(.w-btn) {
position: relative; font-weight: 600; color: #101334;
background-image: var(--w-grad-1);
background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px;
transition: background-size .35s ease-in-out; padding-bottom: 2px;
}
.w-article__author a:hover, .w-article__body a:hover:not(.w-btn) { background-size: 100% 3px; color: #101334; }
.w-share { list-style: none; display: flex; gap: .5rem; margin: 0 0 .35rem auto; padding: 1.25rem 0 0; align-self: flex-end; }
.w-share a { display: inline-block; width: 1.5rem; height: 1.5rem; overflow: hidden; text-indent: -999px; background-repeat: no-repeat; background-position: 0 0; background-size: contain; }
.w-share--linkedin { background-image: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/images/blog/icon-linkedin.svg'); }
.w-share--x { background-image: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/images/blog/icon-twitter.svg'); }
.w-share--mail { background-image: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/images/blog/icon-mail.svg'); }
.w-share--rss { background-image: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/arcitects-theme/images/blog/icon-rss.svg'); }
.w-article__rule { width: 100%; margin-top: clamp(2rem, 2.9vw, 4rem); border-top: 2px solid var(--w-accent); padding-top: 1rem; text-align: right; font-size: 1rem; color: var(--w-accent); }
/* Inhaltsverzeichnis (Original: c-content__list, wird per JS aus den h2 gebaut;
ab 64em links aus der Textspalte gefloatet und sticky — Original-Werte) */
.w-article__toc { background: #EAECF6; border-radius: 20px; padding: 1.5rem; margin: 0 0 clamp(2rem, 2.9vw, 4rem); }
@media (min-width: 64em) {
.w-article__toc {
float: left;
position: sticky;
top: calc(70px + 2rem);
max-width: 230px;
margin: clamp(1.75rem, 2.5vw, 3.5rem) 0 1.5rem calc(-25% - 115px - clamp(1rem, 3vw, 4rem) / 2);
}
}
.w-article__toc > span { display: block; font-family: var(--w-heading-font); font-size: clamp(1.1rem, 2vw, 1.25rem); color: #101334; padding-bottom: 2rem; }
.w-article__toc ul { list-style: none; margin: 0; padding: 0; }
.w-article__toc li { margin-bottom: 1rem; font-size: 13px; }
.w-article__toc li:last-child { margin-bottom: 0; }
.w-article__toc a { color: #101334; }
.w-article__toc a:hover { color: var(--w-accent); }
/* Beitrags-Inhalt */
.w-article__body { font-size: 1.0625rem; line-height: 165%; color: rgba(16,19,52,.8); }
.w-article__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 130%; margin: 0; padding: clamp(2.5rem, 3vw, 4rem) 0 clamp(1rem, 1.4vw, 2rem); scroll-margin-top: 7rem; }
.w-article__body h3 { font-size: 1.5rem; line-height: 128%; margin: 0; padding: clamp(1.5rem, 2vw, 2.5rem) 0 .75rem; }
.w-article__body h4 { font-size: 1.25rem; margin: 0; padding: 1.25rem 0 .5rem; }
.w-article__body h5 { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 400; color: #101334; margin: 0; padding: 1.25rem 0 .5rem; }
.w-article__body a:not(.w-btn) { color: var(--w-accent); font-family: var(--w-heading-font); -webkit-hyphens: auto; hyphens: auto; }
.w-article__body a:hover:not(.w-btn) { color: var(--w-accent); }
.w-article__body img { border-radius: 20px; margin: .5rem 0 1.5rem; }
.w-article__body ul, .w-article__body ol { margin: 0 0 1.25em; padding-left: 1.4rem; }
.w-article__body li { margin-bottom: .35rem; }
.w-article__body blockquote { font-size: clamp(1.1rem, 2vw, 1.25rem); color: #101334; margin: 2rem 0; padding-left: 1.5rem; border-left: 3px solid var(--w-accent); }
.w-article__body table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.w-article__body td, .w-article__body th { border: 1px solid rgba(103,40,194,.28); padding: .65rem .9rem; vertical-align: top; }
.w-article__body td > *, .w-article__body th > * { margin: 0; padding: 0; }
.w-article__body tr:first-child { background: var(--w-accent) linear-gradient(90deg, #D900FC -15%, var(--w-accent) 45%, #2B3BCD 115%); }
.w-article__body tr:first-child td, .w-article__body th { color: #FFFFFF; border-color: rgba(255,255,255,.25); }
.w-article__body tr:first-child td *, .w-article__body th * { color: #FFFFFF !important; }
.w-article__body pre { background: #EAECF6; border-radius: 20px; margin: 1rem 0 2.5rem; overflow-x: auto; }
.w-article__body pre code { display: block; padding: 2.5rem 1.5rem; font-family: var(--w-heading-font); font-size: 14px; line-height: 200%; color: #101334; }
.w-article > .w-article__wrap > .w-btn, .w-article .w-btn { margin-top: clamp(2.5rem, 3.6vw, 5rem); }
/* Leistungs-Liste */
.w-featurelist__title { max-width: 33ch; margin-bottom: clamp(1.5rem, 2.2vw, 3rem); }
.w-featurelist__item { margin-bottom: clamp(1.5rem, 2.2vw, 3rem); }
.w-featurelist__item h3 { font-size: 1.5rem; line-height: 128%; font-weight: 700; margin: 0 0 .75rem; }
.w-featurelist__item p { max-width: 42ch; margin: 0; }
/* ===== Kontakt-Seite (Original: c-intro--fixed mit Person links, Formular rechts, Spalten unten) ===== */
/* ===== Team-Grid (Original: c-team — 6:7-Porträts, Caption schiebt beim Hover nach rechts) ===== */
.w-team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 720px) {
.w-team--cols-3 { grid-template-columns: repeat(3, 1fr); }
.w-team--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.w-team__item { margin: 0 0 clamp(1rem, 1.4vw, 2rem); }
.w-team__item img, .w-team__noimg {
display: block; width: 100%; aspect-ratio: 6 / 7; object-fit: cover;
border-radius: 20px; margin-bottom: 1rem;
transition: border-radius .45s ease-in-out;
}
.w-team__noimg { background: var(--w-grad-1); }
.w-team__item:hover img { border-radius: 46% 54% 55% 45% / 40% 45% 55% 60%; }
.w-team__item h3 { font-size: clamp(1.1rem, 2vw, 1.25rem); line-height: 128%; margin: 0; transform: translateX(0); transition: transform .65s cubic-bezier(.38,.005,.215,1); }
.w-team__item figcaption p { margin: 2px 0 0; font-size: 14px; line-height: 110%; color: #6D6D6D; transform: translateX(0); transition: transform .65s cubic-bezier(.38,.005,.215,1); }
.w-team__item:hover h3, .w-team__item:hover figcaption p { transform: translateX(1.5rem); }
/* ===== Events-Seite (Original: c-events Zeilen-Karten + c-events-past Karten-Grid) ===== */
.w-arrowlink { display: inline-block; font: 700 15px/1.2 var(--w-body-font); color: var(--w-accent) !important; margin-top: .5rem; }
.w-arrowlink::after {
content: ''; display: inline-block; width: 18px; height: 18px; margin-left: .4rem; vertical-align: -.25em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .65s cubic-bezier(.38,.005,.215,1);
}
.w-arrowlink:hover::after { transform: translateX(.5rem); }
.w-eventlist h2, .w-eventcards h2 { font-size: clamp(1.85rem, 3.8vw, 2.375rem); margin-bottom: .5rem; }
.w-eventlist__intro { max-width: 60ch; margin-bottom: clamp(1.5rem, 2.2vw, 3rem); }
/* Kommende Events als breite Karte (Original .c-event: weiße Karte, 1px Rahmen inset, Radius 20,
Text links 57 % / Bild rechts 43 % auf dunklem Grund, min-height 400, Hover scale 1.02) */
.w-eventlist .w-event + .w-event { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }
.w-event {
display: flex; flex-wrap: wrap; align-items: stretch; overflow: hidden;
min-height: 400px; background: #FFFFFF; border-radius: 20px;
box-shadow: 0 0 0 1px #BFBBBB inset;
transition: transform .45s ease-in-out, box-shadow .45s ease-in-out;
}
.w-event:hover { transform: scale(1.02); }
.w-event__content { order: 1; flex: 0 1 57%; width: 57%; position: relative; padding: 2.5rem 2rem 5.75rem; }
.w-event__image { order: 2; flex: 0 1 43%; width: 43%; margin: 0; background: #1C1B3A; }
.w-event__image a { display: block; width: 100%; height: 100%; }
.w-event__image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.w-event__noimg { display: block; width: 100%; height: 100%; min-height: 240px; background: var(--w-grad-1); }
.w-event__content .w-chip { font-size: 11px; margin-right: 12px; }
.w-event__date, .w-event__place { font: 400 1rem/1.3 var(--w-body-font); color: #A2A6AF; white-space: nowrap; }
.w-event__place::before { content: ' · '; }
.w-event__content h3 { font-size: 1.5rem; line-height: 128%; margin: 0; padding: 2.5rem 0 1.25rem; }
.w-event__content a:hover h3 { color: var(--w-accent); }
.w-event__content p { max-width: 52ch; margin: 0; }
.w-event__content .w-arrowlink { position: absolute; left: 2rem; bottom: 1.75rem; }
@media (max-width: 1023px) {
.w-event { min-height: 0; }
.w-event__content, .w-event__image { flex: 0 1 100%; width: 100%; }
.w-event__content { order: 2; padding: 1.5rem 1.25rem 4.5rem; }
.w-event__image { order: 1; }
.w-event__image img { aspect-ratio: 6 / 4; object-fit: cover; }
.w-event__content h3 { padding-top: 1.25rem; }
.w-event__content .w-arrowlink { left: 1.25rem; bottom: 1.25rem; }
}
.w-posts__grid--2 { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 700px) { .w-posts__grid--2 { grid-template-columns: 1fr !important; } }
/* Theme-Settings: Effekt-Schalter */
/* ===== Kontakt-Panel (Original .c-modal: Backdrop 20 % schwarz, Dialog rechts max 800px, weiß, Radius 2rem 0 0 2rem, volle Höhe,
Body-Padding 4rem 2.5rem, Schließen-Kreis 65px oben rechts; öffnet per Opacity .4s; Body scrollt nicht) ===== */
.w-contact-modal { position: fixed; inset: 0; z-index: 60; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; overflow: hidden; }
.w-contact-modal.is-open { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }
.w-contact-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.w-contact-modal__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(800px, 100%); background: #FFFFFF; color: var(--w-black); border-radius: 2rem 0 0 2rem; padding: 4rem 2.5rem; overflow-y: auto; transform: translateX(2rem); transition: transform .4s cubic-bezier(.4,.44,.55,1); }
.w-contact-modal.is-open .w-contact-modal__panel { transform: none; }
body.w-modal-open { overflow: hidden; }
.w-contact-modal__close { position: absolute; top: 2rem; right: 2rem; width: 65px; height: 65px; padding: 0; border-radius: 50%; border: 1px solid var(--w-primary); background: #FFFFFF; cursor: pointer; transition: background-color .35s cubic-bezier(.4,.44,.55,1); }
.w-contact-modal__close span { position: absolute; left: 50%; top: 50%; width: 44px; height: 1px; margin: 0 0 0 -22px; background: var(--w-primary); transition: background-color .35s; }
.w-contact-modal__close span:nth-child(1) { transform: rotate(45deg); }
.w-contact-modal__close span:nth-child(2) { transform: rotate(-45deg); }
.w-contact-modal__close:hover { background: var(--w-accent); border-color: var(--w-accent); }
.w-contact-modal__close:hover span { background: #FFFFFF; }
.w-contact-modal__intro { max-width: 85%; padding-right: 3rem; }
.w-contact-modal__intro h2 { font-size: var(--w-fs-lg); margin: 0 0 1rem; }
.w-contact-modal__intro p { font-size: var(--w-fs-sm); }
/* Ansprechpartner-Zeile wie .c-contact-person im Panel: Foto 120px, Name 1.125rem, Rolle .875rem, Button rechts (margin-left auto) */
.w-contact-modal__person { margin: var(--w-space-sm) 0 0; gap: 1rem; flex-wrap: nowrap; }
.w-contact-modal__person img { width: 120px !important; height: 120px !important; }
.w-contact-modal__person .w-cperson__name { font-size: 1.125rem; }
.w-contact-modal__person .w-cperson__role { font-size: .875rem; }
.w-contact-modal__person > .hs_cos_wrapper:last-child { margin-left: auto; }
.w-contact-modal__form { margin-top: var(--w-space-md); }
/* Felder wie Formidable-Style des Originals: Unterstrich Navy 1px, kein Radius, 15px, Padding 12px 12px 12px 0, Platzhalter #667085 statt Labels,
aktiv Violett #8224e3; Absenden = Navy-Pille 32px, 12px 28px, Hover Akzent */
/* Formular-Look des Kontakt-Overlays gilt für ALLE HubSpot-Formulare im Theme (.hs-form): Unterstrich-Felder, Pill-Button, Einwilligungen als Toggle-Schalter. Nur das Verstecken der Labels bleibt dem Overlay vorbehalten (Platzhalter-Design); auf Seiten bleiben Labels sichtbar. (17.09.2026, it-sa-Anmeldeformular) */
.hs-form .hs-form-field { margin-bottom: 28px; width: auto; float: none; padding: 0; }
/* zwei Felder nebeneinander (HubSpot form-columns-2) wie im Original: Name | Unternehmen, E-Mail | Telefon */
.hs-form .form-columns-2, .hs-form .form-columns-1 { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.hs-form .form-columns-1 { grid-template-columns: 1fr; }
.hs-form fieldset { max-width: none !important; }
.hs-form fieldset.form-columns-2 .hs-form-field, .hs-form fieldset.form-columns-1 .hs-form-field { width: 100% !important; float: none !important; }
.hs-form .form-columns-2 .hs-form-field .input, .hs-form .form-columns-1 .hs-form-field .input { margin-right: 0 !important; }
.w-contact-modal__form .hs-form-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hs-form .hs-form-field input[type="text"], .hs-form .hs-form-field input[type="email"], .hs-form .hs-form-field input[type="tel"], .hs-form .hs-form-field input[type="number"], .hs-form .hs-form-field select, .hs-form .hs-form-field textarea {
width: 100%; font: 400 15px/1.4 var(--w-body-font); color: var(--w-primary); background: #FFFFFF; border: 0; border-bottom: 1px solid var(--w-primary); border-radius: 0; padding: 12px 12px 12px 0; box-shadow: none; }
.hs-form .hs-form-field textarea { min-height: 180px; resize: vertical; }
.hs-form .hs-form-field input::placeholder, .hs-form .hs-form-field textarea::placeholder { color: #667085; }
/* Wie arcitects.de: Textfelder zeigen nur den Platzhalter, das Label bleibt für Screenreader im Code. Auswahl-, Datums-, Datei- und Checkbox-Felder behalten ihr Label, weil sie keinen Platzhalter haben. (17.09.2026) */
.hs-form .hs-fieldtype-text > label, .hs-form .hs-fieldtype-textarea > label, .hs-form .hs-fieldtype-phonenumber > label, .hs-form .hs-fieldtype-number > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hs-form .hs-form-field input:focus, .hs-form .hs-form-field textarea:focus { outline: none; border-color: #8224E3; }
.hs-form .hs-error-msgs { color: #F04438; font-size: 13px; margin: 6px 0 0; }
.hs-form .hs-form-field.error input, .hs-form .hs-form-field.error textarea { border-color: #F04438; }
.hs-form .hs-button, .hs-form input[type="submit"], .hs-form button[type="submit"] { font: 400 16px/1.25 var(--w-heading-font); padding: 12px 28px; border-radius: 32px; background: var(--w-primary); color: #FFFFFF; border: 1px solid var(--w-primary); margin: 10px 0 0; cursor: pointer; }
.hs-form .hs-button:hover, .hs-form input[type="submit"]:hover, .hs-form button[type="submit"]:hover { background: var(--w-accent); border-color: var(--w-accent); color: #FFFFFF; }
.hs-form button[type="submit"] .w-btn__text { display: inline-block; overflow: hidden; vertical-align: top; text-align: center; }
.w-contact-modal__form .submitted-message, .hs_cos_wrapper_type_form .submitted-message { font-size: var(--w-fs-base); }
/* Datenschutz-Block (HubSpot legal consent): Hinweistext klein/grau, Checkbox mit Label in einer Zeile */
.hs-form .legal-consent-container { margin: 4px 0 20px; }
.hs-form .legal-consent-container .hs-richtext, .hs-form .legal-consent-container .hs-richtext p { font: 400 13px/1.5 var(--w-body-font); color: #667085; margin: 0 0 10px; max-width: none; }
.hs-form .legal-consent-container a { color: var(--w-accent); text-decoration: underline; }
.hs-form .legal-consent-container .hs-form-booleancheckbox-display { margin: 0; }
.hs-form .legal-consent-container ul.inputs-list { list-style: none; margin: 0; padding: 0; }
.hs-form .legal-consent-container .hs-form-booleancheckbox label { display: flex; gap: 16px; align-items: flex-start; font: 400 14px/1.5 var(--w-body-font); color: var(--w-primary); cursor: pointer; }
/* Einwilligungen als Toggle-Schalter (wie water-Kontaktformular): 44×24, Navy-Rahmen, Knopf 16px; an = Violett-Verlauf, Knopf wandert 20px */
.hs-form .legal-consent-container input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 44px !important; height: 24px !important; min-width: 44px; margin: 0; padding: 0; border: 1px solid var(--w-primary); border-radius: 34px; background: #FFFFFF; position: relative; cursor: pointer; transition: background .55s cubic-bezier(.38,.005,.215,1), border-color .35s; }
.hs-form .legal-consent-container input[type="checkbox"]::before { content: ""; position: absolute; left: 4px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--w-primary); transition: transform .4s, background-color .4s; }
.hs-form .legal-consent-container input[type="checkbox"]:checked { background: linear-gradient(251deg, var(--w-accent) 10%, #6500FC 110%); border-color: transparent; }
.hs-form .legal-consent-container input[type="checkbox"]:checked::before { transform: translateX(20px); background: #FFFFFF; }
.hs-form .legal-consent-container input[type="checkbox"]:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }
.hs-form .legal-consent-container .hs-form-booleancheckbox label > span, .hs-form .legal-consent-container .hs-form-booleancheckbox label > span p { margin: 0; padding: 0; font: inherit; color: inherit; }
.hs-form .legal-consent-container .hs-error-msgs { margin-top: 4px; }
.w-contact-modal__hint { font-size: var(--w-fs-xs); color: var(--w-text-soft); }
@media (max-width: 767px) { .hs-form .form-columns-2 { grid-template-columns: 1fr; } .w-contact-modal .w-contact-modal__person { flex-wrap: wrap; } /* Spezifität wie .w-contact-modal .w-cperson (nowrap), sonst bleibt der Button in der Zeile */ .w-contact-modal__person > .hs_cos_wrapper:last-child { margin-left: 0; flex-basis: 100%; } .w-contact-modal__person > div { flex: 1 1 0; min-width: 0; } /* Name/Rolle bleiben neben dem Avatar, nur der Button bricht um (Original: Info x=160, Button darunter) */ .w-contact-modal__panel { border-radius: 0; padding: 5rem 1.25rem 2rem; } .w-contact-modal__close { width: 45px; height: 45px; top: 1rem; right: 1rem; } .w-contact-modal__close span { width: 18px; margin-left: -9px; } .w-contact-modal__intro { max-width: none; padding-right: 0; } }
/* ---- Systemseiten (404 / 500 / Passwortabfrage / Suche), zugewiesen unter Einstellungen → Website → Seiten → crm.arcitects.de → Systemseiten ---- */
.w-syspage { padding: var(--w-space-xl) 0 var(--w-space-xxl); }
/* Eigenständige Systemseiten analog water-system: Logo-Leiste ohne Menü, schlanker Footer mit Rechtliches-Menü */
.w-sysbar { padding: 1.5rem 0; }
.w-sysbar__inner { display: flex; align-items: center; }
.w-sysbar__logo { display: block; }
.w-sysbar__logo img { display: block; height: 3.25rem; width: auto; }
.w-page--system main { min-height: calc(100vh - 12rem); }
.w-sysfoot { border-top: 1px solid var(--w-line); padding: 1.5rem 0 2rem; }
.w-sysfoot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; font-size: var(--w-fs-xs); color: var(--w-text-soft); }
.w-sysfoot__legal .hs-menu-wrapper ul, .w-sysfoot__legal > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.w-page--standalone main { min-height: 0; }
.w-sysfoot__legal a { color: var(--w-text-soft); text-decoration: none; }
.w-sysfoot__legal a:hover { color: var(--w-accent); }
.w-page--system .w-burger, .w-page--system #w-main-nav { display: none !important; } /* Systemseiten ohne Menü: nur Logo und Kontakt in der Leiste */
.w-syspage .w-overline { margin-bottom: 1rem; }
.w-syspage .w-lead { max-width: 60ch; }
.w-syspage .w-btn-row { margin: var(--w-space-sm) 0 0; }
.w-syspage__form { margin-top: var(--w-space-sm); max-width: 560px; }
.w-syspage__label { display: block; font: 400 var(--w-fs-xs)/1.3 var(--w-body-font); color: var(--w-text-soft); margin-bottom: .25rem; }
.w-syspage__help { margin-top: var(--w-space-sm); font-size: var(--w-fs-xs); color: var(--w-text-soft); }
.w-syspage .widget-type-password_prompt form, .w-syspage .hs-search-field__bar form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.w-syspage input[type="password"], .w-syspage input[type="text"], .w-syspage input[type="search"], .w-syspage .hs-search-field__input { flex: 1 1 240px; width: auto; font: 400 var(--w-fs-base)/1.4 var(--w-body-font); color: var(--w-primary); background: #FFFFFF; border: 0; border-bottom: 1px solid var(--w-primary); border-radius: 0; padding: .625rem 0; }
.w-syspage #hs-pwd-widget-password { height: auto !important; margin-top: 0 !important; } /* Standardmodul liefert height:22px/margin-top:-5px inline */
.w-syspage input::placeholder { color: #A5A5A5; }
.w-syspage input:focus { outline: none; border-color: var(--w-accent); }
.w-syspage .widget-type-password_prompt p { color: #D0033F; font-size: 13px; margin: .5rem 0 0; }
.w-syspage .hs-search-field { position: relative; }
.w-syspage .hs-search-field__form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.w-syspage .hs-search-field__button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--w-accent); color: #FFFFFF; cursor: pointer; flex: 0 0 auto; }
.w-syspage .hs-search-field__button:hover { background: var(--w-primary); }
.w-syspage .hs-search-field__button svg { width: 18px; height: 18px; fill: currentColor; }
.w-syspage .hs-search-field__suggestions-container { flex: 1 1 100%; }
.w-syspage .hs-search-field__suggestions { list-style: none; margin: 0; padding: 0; background: #FFFFFF; }
.w-syspage .hs-search-field__suggestions li:not(.show-for-sr) { border-bottom: 1px solid var(--w-line); }
.w-syspage .hs-search-field__suggestions li a { display: block; padding: 8px 0; color: var(--w-primary); text-decoration: none; }
.w-syspage .hs-search-field__suggestions li a:hover { color: var(--w-accent); }
.w-syspage .hs-search-results { margin-top: var(--w-space-sm); }
.w-syspage .hs-search-results__listing { list-style: none; margin: 0; padding: 0; }
.w-syspage .hs-search-results__listing li { border-top: 1px solid var(--w-line); padding: 1.25rem 0; margin: 0; }
.w-syspage .hs-search-results__title { font: 400 var(--w-fs-md)/1.3 var(--w-heading-font); color: var(--w-primary); text-decoration: none; }
.w-syspage .hs-search-results__title:hover { color: var(--w-accent); }
.w-syspage .hs-search-results__description { font-size: var(--w-fs-xs); color: var(--w-text-soft); margin: .375rem 0 0; }
.w-syspage .hs-search__no-results { margin-top: var(--w-space-sm); color: var(--w-text-soft); }
.w-syspage .hs-search-results__pagination { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--w-space-sm); }
.w-syspage .hs-search-results__pagination a { color: var(--w-primary); }
@media (max-width: 767px) { .w-syspage { padding-top: var(--w-space-lg); } .w-sysbar__logo img { height: 2.5rem; } }
/* ---- Abo-Seiten (E-Mail-Einstellungen, Bestätigung, Abmeldung) – HubSpot-Module im Theme-Look ---- */
.w-syspage__module { margin-top: var(--w-space-sm); max-width: 640px; }
.w-syspage__module h1, .w-syspage__module h2 { font: 400 var(--w-fs-md)/1.3 var(--w-heading-font); color: var(--w-primary); margin: 0 0 .875rem; }
.w-syspage__module h3 { font: 600 var(--w-fs-base)/1.3 var(--w-body-font); color: var(--w-primary); margin: 0 0 .25rem; }
.w-syspage__module p { font-size: var(--w-fs-base); color: var(--w-text-soft); margin: 0 0 1.25rem; }
.w-syspage__module .page-header h1 { margin: 0; }
.w-syspage__module .page-header p { font: 600 var(--w-fs-md)/1.35 var(--w-body-font); color: var(--w-primary); margin: 0 0 .375rem; } /* E-Mail-Adresse des Kontakts */
.w-syspage__module .email-prefs .item, .w-syspage__module .item { border: 1px solid var(--w-line); border-radius: 12px; padding: 1rem 1.125rem; margin: 0 0 .75rem; background: transparent; transition: border-color .15s ease, background .15s ease; }
.w-syspage__module .item:hover { border-color: var(--w-accent); background: rgba(165,20,237,.05); }
.w-syspage__module label { font: 500 var(--w-fs-base)/1.5 var(--w-body-font); color: var(--w-primary); }
.w-syspage__module .fakelabel { display: inline-block; padding-left: 2.25rem; text-indent: -2.25rem; cursor: pointer; }
.w-syspage__module .item p { margin: .5rem 0 .5rem 2.25rem; font-size: var(--w-fs-xs); }
.w-syspage__module label[for="hs-localization-select"], .w-syspage__module .localization-language { margin-bottom: 1.75rem; }
.w-syspage__module select { font: 400 var(--w-fs-xs)/1.4 var(--w-body-font); color: var(--w-primary); background: #FFFFFF; border: 1px solid var(--w-line); border-radius: 10px; padding: 8px 10px; }
.w-syspage__module input[type="email"], .w-syspage__module input[type="text"] { width: 100%; font: 400 var(--w-fs-base)/1.4 var(--w-body-font); color: var(--w-primary); background: #FFFFFF; border: 0; border-bottom: 1px solid var(--w-primary); border-radius: 0; padding: .625rem 0; }
.w-syspage__module input::placeholder, .w-syspage__module textarea::placeholder { color: #A5A5A5; }
.w-syspage__module input[type="email"]:focus, .w-syspage__module input[type="text"]:focus, .w-syspage__module textarea:focus, .w-syspage__module select:focus { outline: none; border-color: var(--w-accent); }
.w-syspage__module textarea { width: 100%; min-height: 96px; font: 400 var(--w-fs-base)/1.5 var(--w-body-font); color: var(--w-primary); background: #FFFFFF; border: 1px solid var(--w-line); border-radius: 10px; padding: 12px 14px; margin-top: 8px; resize: vertical; }
/* Radios/Checkboxen 21 px, selbst gezeichnet (HubSpot-Standardmodul liefert native Elemente) */
.w-syspage__module input[type="checkbox"], .w-syspage__module input[type="radio"] { height: 21px; width: 21px; padding: 0; margin: 0 .75rem 0 0; border: 1px solid var(--w-primary); appearance: none; -webkit-appearance: none; background: #FFFFFF; cursor: pointer; flex-shrink: 0; }
.w-syspage__module input[type="checkbox"]:hover, .w-syspage__module input[type="radio"]:hover, .w-syspage__module input[type="checkbox"]:checked, .w-syspage__module input[type="radio"]:checked { border-color: var(--w-accent); }
.w-syspage__module input[type="checkbox"] { border-radius: 6px; vertical-align: middle; }
.w-syspage__module input[type="checkbox"]:checked { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23A514ED' stroke-width='2'/%3E%3C/svg%3E") center / 12px 10px no-repeat #FFFFFF; }
.w-syspage__module input[type="radio"] { position: relative; border-radius: 50%; }
.w-syspage__module input[type="radio"]:checked::after { content: ''; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--w-accent); }
.w-syspage__module #hs-subscriptions-unsubscribe-survey { margin-top: 2.25rem; text-align: left; }
.w-syspage__module #hs-subscriptions-unsubscribe-survey-legend { margin-bottom: 1.25rem; }
.w-syspage__module #hs-subscriptions-unsubscribe-survey-options > div { display: flex; align-items: center; padding: 8px 10px; margin: 0 -10px .4rem; border-radius: 10px; transition: background .15s ease; }
.w-syspage__module #hs-subscriptions-unsubscribe-survey-options > div:hover { background: rgba(165,20,237,.06); }
.w-syspage__module #hs-subscriptions-unsubscribe-survey-options label { align-items: center; margin-bottom: 0; cursor: pointer; }
.w-syspage__module input[type="submit"], .w-syspage__module button[type="submit"], .w-syspage__module .hs-button { margin-top: 1.25rem; }
.w-syspage__note, .w-syspage__module .w-syspage__note { margin: var(--w-space-sm) 0 0; font-size: var(--w-fs-xs); color: var(--w-text-soft); max-width: 640px; } /* Spezifität über .w-syspage__module p */