/* Inter – lokal gehostet (DSGVO + Performance), Subset latin, Weights 400–800 */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.woff2') format('woff2')}

/* =============================================================================
   MW FewoManager — SaaS-Theme (Pivot weg vom Editorial)
   Inspiriert von mw.jamp.info: klar, direkt, B2B-Software-Look
   ============================================================================= */

:root{
  --c-blue:           #1F3458;
  --c-blue-dark:      #14233F;
  --c-blue-darker:    #0E1B33;
  --c-blue-light:     #3A5A95;
  --c-blue-soft:      #E8EDF5;
  --c-blue-bg:        #F5F8FC;

  --c-gold:           #E8A93F;
  --c-gold-dark:      #C68A1A;
  --c-gold-soft:      #FBF1DE;

  --c-ink:            #1B2A3F;
  --c-ink-soft:       #475569;
  --c-ink-mute:       #94A3B8;

  --c-white:          #FFFFFF;
  --c-bg:             #FFFFFF;
  --c-surface:        #F7F9FC;
  --c-surface-2:      #EEF2F7;
  --c-border:         #E2E8F0;
  --c-success:        #10B981;
  --c-warn:           #F59E0B;

  --shadow-sm: 0 1px 2px rgba(15,27,45,.06), 0 2px 6px rgba(15,27,45,.04);
  --shadow-md: 0 4px 12px rgba(15,27,45,.08), 0 12px 24px -8px rgba(15,27,45,.10);
  --shadow-lg: 0 8px 24px rgba(15,27,45,.12), 0 24px 48px -16px rgba(15,27,45,.18);

  --r-sm: 6px;
  --r:    10px;
  --r-md: 14px;
  --r-lg: 20px;
  --maxw: 1200px;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem);
  --fs-2xl:  clamp(1.625rem, 1.4rem + 1.2vw, 2rem);
  --fs-3xl:  clamp(2rem, 1.6rem + 2vw, 2.875rem);
  --fs-hero: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);

  --easing: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--c-ink);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Sticky Footer: Seite immer mind. Viewporthoehe hoch, Footer bleibt unten –
   auch auf kurzen Seiten (z. B. /danke). Contao-fe_page-Struktur:
   #wrapper > #header + #container + #footer. */
#wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
#container{flex:1 0 auto}
#footer{margin-top:auto}
img,svg{max-width:100%; display:block}
a{color:var(--c-blue); text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
ul{margin:0; padding:0; list-style:none}

h1,h2,h3,h4{font-family:inherit; line-height:1.15; color:var(--c-blue); margin:0 0 .5em; font-weight:800; letter-spacing:-.02em}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-3xl); letter-spacing:-.018em}
h3{font-size:var(--fs-xl); font-weight:700; letter-spacing:-.01em}
h4{font-size:var(--fs-lg); font-weight:700}
p{margin:0 0 1em; color:var(--c-ink-soft)}
strong{font-weight:600; color:var(--c-ink)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
@media(min-width:720px){.wrap{padding:0 32px}}

/* Skiplink */
.skip{position:absolute; left:-9999px; top:0; padding:8px 12px; background:var(--c-ink); color:#fff; z-index:100; border-radius:6px}
.skip:focus{left:8px; top:8px}

/* === Buttons === */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:8px;
  font-weight:600; font-size:var(--fs-sm);
  transition:transform .15s var(--easing), box-shadow .25s var(--easing), background .2s, color .2s;
  white-space:nowrap; border:0;
}
.btn-primary{
  background:var(--c-blue); color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{
  background:var(--c-blue-dark); color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.btn-primary svg{width:18px; height:18px; flex:0 0 18px}
.btn-link{
  color:var(--c-blue); font-weight:600; font-size:var(--fs-sm);
  border-bottom:1.5px solid var(--c-blue); padding-bottom:2px;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-link:hover{color:var(--c-blue-dark); border-color:var(--c-blue-dark)}
.btn-link svg{width:14px; height:14px}
.btn-light{
  background:#fff; color:var(--c-blue);
  border:1.5px solid var(--c-border);
}
.btn-light:hover{background:var(--c-surface); border-color:var(--c-blue-light)}
.btn-ghost{
  /* Adaptiv: uebernimmt die Textfarbe der Sektion (currentColor). Auf hellem
     Grund dunkel, auf blauem/dunklem Grund automatisch hell -> immer lesbar. */
  background:transparent; color:currentColor;
  border:1.5px solid currentColor;
  padding:11.5px 22px; /* gleicht 1.5px-Border zur Höhe von .btn-primary aus */
}
.btn-ghost:hover{
  background:color-mix(in srgb, currentColor 14%, transparent);
  border-color:currentColor;
}
.btn-ghost svg{width:16px; height:16px; flex:0 0 16px}

/* ---- Preisrechner (rsce_mwfm_calculator) ---- */
.calc{background:#fff; border:1px solid var(--c-border); border-radius:20px; box-shadow:var(--shadow-md); padding:28px; display:grid; gap:24px; max-width:780px; margin:32px auto 0}
@media(min-width:760px){.calc{grid-template-columns:1.25fr 1fr; align-items:center; padding:36px}}
.calc__controls{display:grid; gap:22px}
.calc__modes{display:grid; gap:10px}
.calc__mode{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1.5px solid var(--c-border); border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s}
.calc__mode:has(input:checked){border-color:var(--c-blue); background:var(--c-blue-bg)}
.calc__mode input{margin-top:3px; accent-color:var(--c-blue)}
.calc__mode span{display:flex; flex-direction:column; line-height:1.3}
.calc__mode small{color:var(--c-ink-mute); font-size:var(--fs-xs)}
.calc__sliderhead{display:flex; justify-content:space-between; align-items:baseline}
.calc__objects{font-size:1.4rem; color:var(--c-blue); font-weight:800}
.calc__slider{-webkit-appearance:none; appearance:none; width:100%; height:6px; margin-top:8px; border:0; outline:none; background:transparent; cursor:pointer}
.calc__slider::-webkit-slider-runnable-track{height:6px; border:0; border-radius:999px; background:var(--c-border)}
.calc__slider::-moz-range-track{height:6px; border:0; border-radius:999px; background:var(--c-border)}
.calc__slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px; border:0; border-radius:50%; background:var(--c-gold); box-shadow:0 1px 4px rgba(15,27,45,.25)}
.calc__slider::-moz-range-thumb{width:20px; height:20px; border:0; border-radius:50%; background:var(--c-gold); box-shadow:0 1px 4px rgba(15,27,45,.25)}
.calc__ticks{display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--c-ink-mute); margin-top:4px}
.calc__result{text-align:center; background:var(--c-blue); color:#fff; border-radius:16px; padding:28px 22px}
.calc__pkg{display:inline-block; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,.15); padding:4px 10px; border-radius:999px; margin-bottom:10px}
.calc__price{font-size:clamp(2.2rem,1.6rem+2.4vw,3rem); font-weight:800; line-height:1}
.calc__price--individual{font-size:clamp(1.35rem,1.05rem+1.1vw,1.7rem)}
.calc__note{font-size:var(--fs-sm); color:rgba(255,255,255,.82); margin:8px 0 18px}
.calc__result .btn-primary{background:var(--c-gold); color:var(--c-blue-darker); width:100%; justify-content:center}
.calc__result .btn-primary:hover{background:#F0BB5C; color:var(--c-blue-darker)}
.calc__commission{text-align:center; max-width:560px; margin:26px auto 0; padding-top:20px; border-top:1px solid var(--c-border); color:var(--c-ink-soft); font-size:var(--fs-sm)}
.calc__incl{text-align:center; max-width:680px; margin:12px auto 0; color:var(--c-ink-mute); font-size:var(--fs-xs); line-height:1.55}

/* ---- Zurück-nach-oben-Button ---- */
.totop{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:60; width:46px; height:46px; border-radius:50%; border:0; background:var(--c-blue); color:#fff; box-shadow:var(--shadow-md); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s, transform .2s, background .2s}
.totop.is-visible{opacity:1; transform:none; pointer-events:auto}
.totop:hover{background:var(--c-blue-dark)}
.totop svg{width:22px; height:22px}
@media(max-width:760px){.totop{right:14px; bottom:calc(80px + env(safe-area-inset-bottom))}}

/* CTA-Paar (Primär + Sekundär nebeneinander) */
.hero__ctas{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center;
}
@media(max-width:560px){
  .hero__ctas{gap:10px}
  .hero__ctas .btn{flex:1 1 auto; justify-content:center}
}

/* Alternative-Pfad-Callout (auf Demo-Anfordern: "Erst alleine schauen?") */
.alt-path{
  display:flex; flex-wrap:wrap; gap:18px 30px;
  align-items:center; justify-content:space-between;
  padding:20px 24px;
  background:var(--c-blue-bg);
  border:1px solid var(--c-border);
  border-left:4px solid var(--c-gold);
  border-radius:12px;
}
.alt-path strong{
  display:block;
  font-size:var(--fs-md);
  color:var(--c-blue);
  margin-bottom:4px;
}
.alt-path p{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
  line-height:1.55;
  max-width:600px;
}
.alt-path__actions{
  display:flex; gap:18px; flex-wrap:wrap;
}
@media(max-width:680px){
  .alt-path{padding:18px 18px}
  .alt-path__actions{width:100%}
}

/* === Topbar (über dem Header) === */
.topbar{
  border-bottom:1px solid var(--c-border);
  background:#fff;
  font-size:var(--fs-xs);
  padding:10px 0;
}
.topbar__row{
  display:flex; gap:6px 24px;
  justify-content:flex-end; align-items:center;
  flex-wrap:wrap;
}
.topbar__link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--c-ink-soft); font-weight:500;
}
.topbar__link:hover{color:var(--c-blue)}
.topbar__link svg{width:14px; height:14px; opacity:.7; flex:0 0 14px}

/* === Header === */
.header{
  background:#fff;
  border-bottom:1px solid var(--c-border);
  position:sticky; top:0; z-index:50;
}
.header__row{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  height:88px;
}
.brand{display:flex; align-items:center; gap:12px}
/* Hochgeladenes Logo (Header: farbig auf Weiß). */
.brand__logo{height:52px; width:auto; display:block}
.brand__mark{width:48px; height:48px; flex:0 0 48px}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__text strong{font-size:1.15rem; font-weight:800; color:var(--c-blue); letter-spacing:-.01em}
.brand__text strong em{font-style:normal; color:var(--c-gold-dark); font-weight:800}
.brand__text small{font-size:.78rem; color:var(--c-ink-mute); margin-top:2px; font-weight:500}

.nav{display:none; align-items:center; gap:6px}
.nav a{
  display:block;
  padding:10px 14px; border-radius:6px;
  font-size:var(--fs-sm); font-weight:600;
  color:var(--c-blue); letter-spacing:.06em; text-transform:uppercase;
  transition:background .2s;
}
.nav a:hover{background:var(--c-blue-soft)}
.nav a[aria-current="page"]{background:var(--c-blue-soft)}

/* Contao-Navigationsmodul (mod_navigation) im Header wie die Design-Nav darstellen.
   Der aktive Menuepunkt rendert serverseitig als <strong class="active">. */
.nav ul{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0}
.nav li{margin:0}
.nav strong{
  display:block; padding:10px 14px; border-radius:6px;
  font-size:var(--fs-sm); font-weight:700; font-style:normal;
  color:var(--c-blue); letter-spacing:.06em; text-transform:uppercase;
  background:var(--c-blue-soft);
}
.nav a.active,.nav .active>a{background:var(--c-blue-soft)}

.header__cta{display:none}

@media(min-width:1000px){
  .nav{display:flex}
  .header__cta{display:inline-flex}
}

.burger{
  width:46px; height:46px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border); background:#fff;
}
.burger:hover{background:var(--c-surface)}
.burger svg{width:22px; height:22px; color:var(--c-blue)}
@media(min-width:1000px){.burger{display:none}}

/* Mobile Menu */
.mobile-menu{
  position:fixed; inset:0; z-index:60;
  background:rgba(15,27,45,.45);
  opacity:0; pointer-events:none; transition:opacity .25s var(--easing);
}
.mobile-menu.is-open{opacity:1; pointer-events:auto}
.mobile-menu__panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(86vw, 380px); background:#fff;
  transform:translateX(100%); transition:transform .3s var(--easing);
  display:flex; flex-direction:column; padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:-12px 0 40px rgba(15,27,45,.18);
}
.mobile-menu.is-open .mobile-menu__panel{transform:translateX(0)}
.mobile-menu__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.mobile-menu__brand{display:inline-flex; align-items:center}
.mobile-menu__brand img{height:42px; width:auto; display:block}
.mobile-menu__list{display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--c-border); padding-top:14px}
/* Contao-Navigationsmodul im Mobile-Menue: nav > ul > li > a/strong */
.mobile-menu__list ul{display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0}
.mobile-menu__list a,.mobile-menu__list strong{
  display:block; padding:14px 12px; font-size:var(--fs-md); font-weight:600; font-style:normal;
  color:var(--c-blue); border-radius:8px; letter-spacing:.04em; text-transform:uppercase;
}
.mobile-menu__list a:hover,.mobile-menu__list strong{background:var(--c-blue-soft)}
.mobile-menu__foot{margin-top:32px; padding-top:18px; border-top:1px solid var(--c-border); display:flex; flex-direction:column; gap:10px}
/* Handy: Vollbild-Panel -> kein dunkler Backdrop-Streifen mehr; iOS-Browserleiste
   ist oben wie unten hell (sonst faerbt der Overlay-Hintergrund die untere
   Safari-Toolbar dunkel, waehrend oben das weisse Panel liegt). */
@media(max-width:560px){
  .mobile-menu__panel{width:100%; max-width:none; box-shadow:none}
}

/* === Hero === */
.hero{
  background:#fff;
  padding:48px 0 64px;
  position:relative; overflow:hidden;
}
@media(min-width:880px){.hero{padding:80px 0 100px}}

.hero__grid{
  display:grid; gap:48px; align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:980px){.hero__grid{grid-template-columns:1.05fr 1fr; gap:60px}}

.hero__headline{
  font-size:var(--fs-hero);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--c-blue);
  margin:0 0 24px;
}
.hero__sub{
  font-size:var(--fs-md);
  line-height:1.55;
  color:var(--c-ink-soft);
  max-width:540px;
  margin:0 0 36px;
}
.hero__sub strong{color:var(--c-ink); font-weight:700}

/* Hero-Trust-Zeile (drei Mini-Argumente unter dem CTA) */
.hero__trust{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:flex;
  flex-wrap:nowrap;
  gap:8px 18px;
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
}
.hero__trust li{white-space:nowrap}
@media(max-width:600px){.hero__trust{flex-wrap:wrap; gap:8px 16px}}
.hero__trust li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:500;
}
.hero__trust li svg{
  color:var(--c-success, #16a34a);
  flex-shrink:0;
}
@media(max-width:560px){
  .hero__trust{gap:6px 14px; font-size:.85rem}
}

/* Hero-Visual: Monitor + Phone auf gelber Form */
.hero__visual{position:relative; min-height:340px}
.hero__shape{
  position:absolute;
  background:var(--c-gold);
  border-radius:18px;
  z-index:0;
}
.hero__shape.shape-1{
  top:-18px; right:-12px; width:58%; height:66%;
}
.hero__monitor{
  position:relative; z-index:2;
  background:#fff; border:1px solid var(--c-border);
  border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow-lg);
  margin:30px 46px 12px 0;
}
/* „Neue Buchung": zeichnet sich in einer freien Belegungszeile von Anreise zu
   Abreise auf (Endlosschleife) – im Look der übrigen Buchungen, abgesetzt durch
   einen gestrichelten Rand. Der Balken liegt als .cal__event.is-new direkt
   im Belegungs-Raster (per JS in eine leere Zeile gesetzt). */
.cal__event.is-new{
  position:relative; z-index:2;
  border:1.4px dashed rgba(255,255,255,.95);
  box-shadow:0 2px 6px rgba(16,185,129,.35);   /* nur weicher Schatten, kein Ring (sonst „beult" der Balken aus der Zeile) */
  animation:drawbook 5.6s ease-in-out infinite;
}
.cal__event.is-new span{opacity:0; animation:drawbook-label 5.6s ease-in-out infinite}
@keyframes drawbook{
  0%{clip-path:inset(0 100% 0 0); opacity:0}
  6%{clip-path:inset(0 100% 0 0); opacity:1}
  34%{clip-path:inset(0 0 0 0); opacity:1}
  82%{clip-path:inset(0 0 0 0); opacity:1}
  92%,100%{clip-path:inset(0 0 0 0); opacity:0}
}
@keyframes drawbook-label{
  0%,30%{opacity:0}
  42%,86%{opacity:1}
  93%,100%{opacity:0}
}
/* Mauszeiger zur „Neue Buchung": klickt an der Anreise, zieht den Streifen auf,
   klickt an der Abreise. Eigenes Grid-Element ueber dem Balken (nicht geclippt). */
.cal__cursor{position:relative; height:0; align-self:center; pointer-events:none; z-index:5}
.cal__cursor::before{
  content:""; position:absolute; top:50%; left:0; width:15px; height:15px; margin:-2px 0 0 -2px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3 L10.07 19.97 L12.58 12.58 L19.97 10.07 Z' fill='%231F2A44' stroke='white' stroke-width='1.6' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
  animation:cal-cursor-move 5.6s ease-in-out infinite;
}
.cal__cursor::after{
  content:""; position:absolute; top:50%; left:0; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2px solid rgba(31,42,68,.85); opacity:0;
  animation:cal-cursor-click 5.6s ease-in-out infinite;
}
@keyframes cal-cursor-move{
  0%,4%{left:0; transform:scale(1); opacity:0}
  6%{left:0; opacity:1}
  8%{transform:scale(.72)}            /* Klick: greift den Anreisetag */
  10%{left:8%; transform:scale(1)}
  29%{left:100%; transform:scale(1)}  /* zieht VORAUS bis zur Abreise – schneller als der Streifen */
  33%{transform:scale(.72)}           /* Klick: setzt die Abreise (Streifen kommt nach) */
  37%{transform:scale(1)}
  84%{left:100%; opacity:1}
  92%,100%{left:100%; opacity:0}
}
@keyframes cal-cursor-click{
  0%,6%{left:0; transform:scale(.3); opacity:0}
  8%{left:0; transform:scale(1); opacity:.5}
  13%{left:8%; transform:scale(2); opacity:0}
  29%,32%{left:100%; transform:scale(.3); opacity:0}
  34%{left:100%; transform:scale(1); opacity:.5}
  39%{left:100%; transform:scale(2); opacity:0}
  100%{left:100%; opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .cal__event.is-new{animation:none; clip-path:none}
  .cal__event.is-new span{animation:none; opacity:1}
  .cal__cursor{display:none}
}
.hero__monitor-base{
  position:relative; z-index:2;
  width:160px; height:14px;
  background:linear-gradient(180deg, #C5CFD8, #A4B0BD);
  border-radius:0 0 12px 12px;
  margin:-3px auto 0;
  box-shadow:0 6px 12px rgba(15,27,45,.12);
}
.hero__monitor-stand{
  position:relative; z-index:2;
  width:12px; height:24px;
  background:linear-gradient(180deg, #B5BFC9, #8693A1);
  margin:0 auto;
}

.hero__phone{
  position:absolute; z-index:3;
  right:-4px; bottom:8px;
  width:120px; height:240px;
  background:#1B2A3F; border-radius:18px;
  padding:8px;
  box-shadow:var(--shadow-lg);
  border:2px solid #0E1B33;
}
.hero__phone-screen{
  width:100%; height:100%;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  position:relative;
}
@media(max-width:980px){
  .hero__phone{display:none}
  .hero__monitor{margin:14px 0 32px 0}
  .cal__toolbar .meta:nth-of-type(1){display:none}
  .hero__shape.shape-1{top:-10px; right:-8px; left:auto; width:56%; height:130px}
}
@media(max-width:680px){
  .hero__monitor{margin:14px 0 24px 0}
  .hero__shape.shape-1{width:62%; height:120px}
}

/* Calendar mockup im Monitor */
.cal{
  font-family:'Inter',sans-serif; font-size:9px;
  background:#fff;
}
.cal__header{
  display:grid; grid-template-columns:84px 1fr;
  background:#F8FAFC; border-bottom:1px solid #E2E8F0;
  padding:8px 10px; font-size:9.5px; color:var(--c-ink-soft);
  font-weight:600;
}
.cal__toolbar{
  display:flex; gap:8px; align-items:center;
  padding:8px 12px; border-bottom:1px solid #E2E8F0;
  background:#fff;
}
.cal__toolbar .filter-pill{
  padding:3px 8px; background:var(--c-surface); border-radius:4px;
  font-size:9px; color:var(--c-ink-soft); font-weight:600;
}
.cal__toolbar .meta{margin-left:auto; font-size:9px; color:var(--c-ink-mute)}

.cal__grid{
  display:grid;
  grid-template-columns:84px repeat(31, 1fr);
  font-size:8px;
  background:#fff;
}
.cal__grid .day-h{
  border-bottom:1px solid #E2E8F0;
  border-right:1px solid #F1F5F9;
  padding:4px 2px; text-align:center;
  color:var(--c-ink-mute); font-weight:600;
  background:#F8FAFC;
}
.cal__grid .day-h.weekend{background:#EEF2F7}
.cal__grid .obj-h{
  border-bottom:1px solid #E2E8F0; border-right:1px solid #E2E8F0;
  padding:5px 6px; font-weight:600; color:var(--c-ink);
  background:#F8FAFC; font-size:8.5px;
  display:flex; align-items:center;            /* Label vertikal mittig => bündig zur Zeile */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal__grid .cell{
  border-bottom:1px solid #F1F5F9;
  border-right:1px solid #F1F5F9;
  min-height:14px;                              /* füllt die Zeilenhöhe (Rasterlinien bündig) */
}
.cal__grid .cell.weekend{background:#FAFCFE}

.cal__event{
  position:relative; height:14px; align-self:center;   /* Balken mittig in der Zeile => bündig zum Objekt-Label */
  background:#10B981; color:#fff;
  font-size:7.5px; font-weight:600;
  display:flex; align-items:center;
  padding:0 4px;
  white-space:nowrap; overflow:hidden;
  border:1px solid rgba(0,0,0,.05);
  border-bottom:1px solid #F1F5F9;
  border-right:1px solid #F1F5F9;
}
.cal__event.green{background:#10B981}
.cal__event.orange{background:#F59E0B}
.cal__event.purple{background:#8B5CF6}
.cal__event.red{background:#EF4444}
.cal__event.blue{background:#3B82F6}

/* =========================================================
   RELAUNCH-FEINSCHLIFF (Rundungen + mobile Buchungsuebersicht)
   ========================================================= */
/* Mockups & Illustrations-Container weicher abrunden. */
.hero__monitor{border-radius:18px}
.cal{border-radius:16px; overflow:hidden}
.content-section__illu{border-radius:24px; overflow:hidden}
.content-section__illu .illu-circle{border-radius:28px}

/* Mobile: der 31-Spalten-Belegungsplan wird sonst unleserlich zerquetscht.
   Stattdessen horizontal scroll-/swipebar mit lesbarer Spaltenbreite. */
@media(max-width:680px){
  /* Belegungs-Grid mobil: Label/Tag/Zelle exakt 19px (Zeilen bündig),
     vertikal per line-height zentriert. !important schlaegt Alt-/Spezifitaets-Regeln. */
  .hero__monitor .cal__grid{width:100%; grid-auto-rows:19px !important}
  .hero__monitor .cal__grid .obj-h,
  .hero__monitor .cal__grid .day-h,
  .hero__monitor .cal__grid .cell{height:19px !important; min-height:19px !important; line-height:19px !important}
  .hero__monitor .cal__grid .obj-h{display:block; padding:0 8px; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hero__monitor .cal__grid .day-h{display:block; text-align:center; padding:0; font-size:7px}
  /* Belegungs-Balken bewusst niedriger als die 19px-Zeile -> Luft oben/unten, mittig. */
  .hero__monitor .cal__event{height:13px !important; min-height:13px !important; line-height:13px !important; align-self:center; display:flex; align-items:center; padding:0 5px; font-size:7px; white-space:nowrap; overflow:hidden}
}

/* Doodle-Pfeil zwischen Text und Visual */
.doodle{
  position:absolute;
  top:38%; left:-90px;
  width:120px; height:160px;
  z-index:1; pointer-events:none;
  display:none;
}
@media(min-width:980px){.doodle{display:block}}
.doodle svg{width:100%; height:100%; color:var(--c-blue)}

/* "Ab 59€"-Siegel — statisch, klar lesbar, klickbar */
.stamp{
  position:absolute; z-index:5;
  bottom:-12px; left:-16px;
  width:148px; height:148px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transform:rotate(-8deg);
  transition:transform .25s var(--easing);
  filter:drop-shadow(0 14px 32px rgba(15,27,45,.28));
}
.stamp:hover{
  transform:rotate(0deg) scale(1.04);
}
.stamp::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background:var(--c-gold);
  z-index:0;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.4), inset 0 0 0 6px var(--c-gold), inset 0 0 0 7px rgba(31,52,88,.25);
}
.stamp__text{
  position:relative; z-index:2;
  color:var(--c-blue-darker);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800;
  line-height:1;
  text-align:center;
  padding:0 12px;
}
.stamp__text small{
  font-size:11px; font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-blue);
  opacity:.85;
}
.stamp__text strong{
  font-size:2.4rem; margin:2px 0;
  letter-spacing:-.025em;
  color:var(--c-blue-darker);
  line-height:.95;
}
.stamp__text em{
  font-style:normal; font-size:10px;
  font-weight:800; letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-blue);
  margin-bottom:8px;
}
.stamp__cta{
  display:inline-flex; align-items:center; gap:3px;
  margin-top:6px;
  padding:4px 9px;
  background:var(--c-blue);
  color:var(--c-gold);
  border-radius:999px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.stamp:hover .stamp__cta{background:var(--c-blue-dark)}

@media(max-width:980px){
  .stamp{
    bottom:-8px; left:8px;
    width:128px; height:128px;
  }
  .stamp__text strong{font-size:2rem}
  .stamp__text small, .stamp__text em{font-size:9px}
  .stamp__cta{font-size:8.5px; padding:3px 7px}
}

/* === Partners-Strip (über 150 Portale) === */
.partners{
  background:var(--c-surface);
  padding:48px 0;
  border-bottom:1px solid var(--c-border);
}
@media(min-width:880px){.partners{padding:72px 0}}
.partners__headline{
  font-size:var(--fs-3xl);
  font-weight:800;
  color:var(--c-blue);
  margin:0 auto 36px;
  max-width:780px;
  letter-spacing:-.018em;
  text-align:center;
}
.partners__row{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center;
  gap:24px 48px;
  max-width:1000px; margin:0 auto;
}
.partner{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:1.1rem;
  letter-spacing:-.01em;
  color:var(--c-ink-soft);
  opacity:.85;
}
.partner.airbnb{color:#FF5A5F}
.partner.booking{color:#003580}
.partner.booking::after{content:"."; color:#febb02}
.partner.fewodirekt{color:#1E73BE}
.partner.traum{color:var(--c-blue); font-style:italic; font-size:1rem}
.partner.hometogo{color:#1B7DA6}
.partner.holidu{color:#FF6900; letter-spacing:.04em}
.partner.bestfewo{color:#E91E63}
.partner.check24{color:#0066B3}

/* === Section "Funktionen, die Abläufe vereinfachen" === */
.section{padding:64px 0}
@media(min-width:880px){.section{padding:96px 0}}

.section__head{text-align:center; max-width:780px; margin:0 auto 48px}
.section__head .eyebrow{
  font-size:var(--fs-sm); font-weight:700;
  color:var(--c-blue); letter-spacing:.06em;
  text-transform:none;
  margin:0 0 14px;
  display:inline-block;
}
.section__head h2{margin:0 0 16px}
.section__head p{
  font-size:var(--fs-md); color:var(--c-ink-soft);
  line-height:1.65; margin:0 auto;
  max-width:680px;
}

/* Features-Grid auf blauem Hintergrund */
.features-band{
  background:var(--c-blue);
  position:relative; overflow:hidden;
}
.features-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 80% 10%, rgba(232,169,63,.08), transparent 60%);
  pointer-events:none;
}
.features-band__grid{
  display:grid; gap:18px;
  grid-template-columns:1fr;
  position:relative; z-index:1;
}
@media(min-width:680px){.features-band__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.features-band__grid{grid-template-columns:repeat(4,1fr)}}

.feature-card{
  background:#fff;
  border-radius:14px;
  padding:28px 24px;
  display:flex; flex-direction:column;
  text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.05);
  transition:transform .25s var(--easing), box-shadow .25s var(--easing);
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.12);
}
.feature-card .icon{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--c-gold-soft);
  color:var(--c-gold-dark);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.feature-card .icon svg{width:30px; height:30px}
.feature-card h3{
  font-size:1.15rem;
  margin:0 0 12px;
  color:var(--c-blue);
  line-height:1.25;
}
.feature-card p{
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
  line-height:1.55;
  margin:0 0 16px;
  flex:1;
}
.feature-card .more{
  color:var(--c-blue); font-weight:600;
  border-bottom:1.5px solid var(--c-blue);
  padding-bottom:1px;
  font-size:var(--fs-sm);
  align-self:center;
}
.feature-card .more:hover{color:var(--c-blue-dark); border-color:var(--c-blue-dark)}

/* Sektion-CTA unter den Funktions-Cards */
.features-band__cta{
  display:flex; justify-content:center;
  margin-top:36px;
  position:relative; z-index:1;
}

/* === Alternierende Content-Sektionen mit Flat-Illustration === */
.content-section{padding:72px 0}
@media(min-width:880px){.content-section{padding:104px 0}}

.content-section__grid{
  display:grid; gap:40px; align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:980px){.content-section__grid{grid-template-columns:1fr 1fr; gap:64px}}
.content-section__grid.reverse > :first-child{order:1}
@media(min-width:980px){
  .content-section__grid.reverse > :first-child{order:0}
  .content-section__grid.reverse > .content-section__text{order:1}
  .content-section__grid.reverse > .content-section__illu{order:0}
}
@media(max-width:979px){
  /* Mobil: Illustration immer oberhalb des Textes (auch bei nicht-reverse Sektionen). */
  .content-section__grid > .content-section__illu{order:-1}
}

.content-section__text .eyebrow{
  display:inline-block;
  font-size:var(--fs-sm); font-weight:700;
  color:var(--c-gold-dark);
  margin:0 0 12px;
  position:relative;
  padding-bottom:6px;
}
.content-section__text .eyebrow::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:36px; height:3px;
  background:var(--c-gold);
  border-radius:2px;
}
.content-section__text h2{
  font-size:var(--fs-3xl);
  margin:0 0 18px;
  line-height:1.1;
}
.content-section__text .lead{
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--c-ink);
  margin:0 0 14px;
}
.content-section__text p{
  font-size:var(--fs-md);
  color:var(--c-ink-soft);
  line-height:1.65;
}
.content-section__text ul.checks{
  display:block;
  margin:18px 0 22px;
  padding:0;
}
.content-section__text ul.checks li{
  position:relative;
  padding:0 0 0 34px;
  margin:0 0 12px;
  font-size:var(--fs-md);
  color:var(--c-ink);
  line-height:1.55;
}
.content-section__text ul.checks li::before{
  content:""; position:absolute;
  left:0; top:2px;
  width:22px; height:22px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3458' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/><path d='m9 12 2 2 4-4'/></svg>") center/22px no-repeat;
}
.content-section__text ul.checks li strong{
  color:var(--c-blue); font-weight:700;
}

.content-section__illu{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:340px;
  padding:20px;
  overflow:hidden;
}
.content-section__illu .illu-circle{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  background:var(--c-gold-soft);
  border-radius:50%;
  width:min(360px, 88%);
  height:min(360px, 88%);
  aspect-ratio:1;
  z-index:0;
}
.content-section__illu svg{
  position:relative; z-index:1;
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
}
@media(max-width:680px){
  .content-section__illu{min-height:280px}
  .content-section__illu .illu-circle{width:min(280px, 78%); height:auto}
  .content-section__illu svg{max-width:340px}
}

.content-section__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}

/* === Footer === */
.footer{
  background:var(--c-blue-darker);
  color:#A8B5CC;
  padding:64px 0 28px;
}
.footer__grid{
  display:grid; gap:36px;
  grid-template-columns:1fr;
}
@media(min-width:760px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer__grid h4{color:#fff; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:14px}
.footer__grid ul{display:flex; flex-direction:column; gap:8px}
.footer__grid a{color:#A8B5CC; font-size:var(--fs-sm); transition:color .2s}
.footer__grid a:hover{color:#fff}
.footer__brand{display:flex; align-items:center; gap:12px}
/* Footer ist dunkel -> Logo weiss darstellen. */
.footer__brand .brand__logo{height:56px; filter:brightness(0) invert(1)}
.footer__brand{display:flex; align-items:center; gap:14px}
.footer__signet{height:52px; width:auto; display:block; flex:0 0 auto}
.footer__brand-text{display:flex; flex-direction:column; line-height:1.15}
.footer__brand-text strong{color:#fff; font-size:var(--fs-lg); font-weight:800; letter-spacing:.2px}
.footer__brand-text > span{color:rgba(255,255,255,.65); font-size:var(--fs-xs)}
.footer__brand .brand__text strong{color:#fff}
.footer__brand .brand__text strong em{color:var(--c-gold)}
.footer__brand .brand__text small{color:#7A8AA3}
.footer__about{
  margin-top:14px; font-size:var(--fs-sm);
  color:#9AA7BD; max-width:340px; line-height:1.6;
}
.footer__bottom{
  margin-top:44px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:var(--fs-xs); color:#7A8AA3;
}
.footer__bottom a{color:#A8B5CC}
.footer__bottom a:hover{color:#fff}

/* === KPI-Stripe (kleine Vertrauenswerte) === */
.kpis{
  display:grid; gap:18px;
  grid-template-columns:repeat(2, 1fr);
  margin-top:38px;
}
@media(min-width:780px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{
  text-align:center;
  padding:24px 16px;
}
.kpi .v{
  font-size:2.4rem; font-weight:800;
  color:var(--c-blue);
  line-height:1; letter-spacing:-.02em;
}
.kpi .v small{font-size:.55em; font-weight:700; color:var(--c-gold-dark); margin-left:2px}
.kpi .l{
  font-size:var(--fs-sm); color:var(--c-ink-soft);
  margin-top:8px; line-height:1.4;
}

/* === Final CTA-Banner === */
.cta-banner{
  background:linear-gradient(135deg, var(--c-blue), var(--c-blue-dark));
  color:#fff;
  border-radius:20px;
  padding:48px 32px;
  text-align:center;
  position:relative; overflow:hidden;
}
@media(min-width:780px){.cta-banner{padding:64px 48px}}
.cta-banner h2{color:#fff; margin:0 0 16px}
.cta-banner p{
  color:rgba(255,255,255,.85);
  font-size:var(--fs-md);
  max-width:540px; margin:0 auto 28px;
  line-height:1.55;
}
.cta-banner .btn-primary{background:var(--c-gold); color:var(--c-blue-darker)}
.cta-banner .btn-primary:hover{background:#F0BB5C; color:var(--c-blue-darker)}

/* === Reveal-on-scroll === */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .55s var(--easing), transform .55s var(--easing)}
.reveal.is-in{opacity:1; transform:none}

/* === Subtile Float-Animation für Illustrationen === */
.content-section__illu svg{
  animation:floatGentle 6s ease-in-out infinite;
}
.content-section__illu:nth-of-type(2n) svg{
  animation-delay:-3s;
}
@keyframes floatGentle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* Hero-Visual schwebt langsamer */
.hero__monitor{
  animation:floatGentle 8s ease-in-out infinite;
}

/* Stamp pulsiert dezent (nicht rotiert) */
.stamp{
  animation:stampPulse 4s ease-in-out infinite;
}
@keyframes stampPulse{
  0%,100%{filter:drop-shadow(0 14px 32px rgba(15,27,45,.28))}
  50%{filter:drop-shadow(0 18px 36px rgba(232,169,63,.45))}
}

/* Hover-Skalierung auf Funktions-Kacheln */
.feature-card .icon{
  transition:transform .35s var(--easing), background .25s;
}
.feature-card:hover .icon{
  transform:scale(1.12) rotate(-4deg);
  background:var(--c-gold);
  color:var(--c-blue-darker);
}

/* Sub-Feature-Cards Hover */
.subfeature{
  transition:transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s;
}
.subfeature:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--c-blue-light);
}
.subfeature .icon{
  transition:transform .35s var(--easing);
}
.subfeature:hover .icon{transform:rotate(-6deg) scale(1.08)}

/* Pricing-Plans subtle hover bereits vorhanden, leicht verstärken */
.plan{transition:transform .3s var(--easing), box-shadow .3s var(--easing), border-color .25s}

/* Channel-Bubbles im Mockup pulsieren minimal */
.cal-row-mockup .cal-event{
  animation:eventGlow 3s ease-in-out infinite;
}
.cal-row-mockup .cal-event:nth-child(2n){animation-delay:-1.5s}
@keyframes eventGlow{
  0%,100%{opacity:.95}
  50%{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  .content-section__illu svg, .hero__monitor, .stamp{animation:none !important}
}

/* === Stimmen-Sektion === */
.voices{
  background:linear-gradient(180deg, var(--c-blue-bg) 0%, #fff 100%);
  padding:72px 0 96px;
}
.voices__grid{
  display:grid; gap:22px;
  grid-template-columns:1fr;
  margin-top:8px;
}
@media(min-width:760px){.voices__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.voices__grid{grid-template-columns:repeat(3,1fr)}}

.voice{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:16px;
  padding:28px 26px;
  display:flex; flex-direction:column; gap:16px;
  transition:transform .25s var(--easing), box-shadow .25s var(--easing);
  position:relative;
}
.voice:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.voice__stars{
  display:flex; gap:2px;
  color:var(--c-gold);
}
.voice__stars svg{width:18px; height:18px}
.voice blockquote{
  margin:0;
  font-size:var(--fs-md);
  line-height:1.55;
  color:var(--c-ink);
  font-weight:500;
}
.voice blockquote::before{content:"„"; color:var(--c-gold); font-weight:700; font-size:1.2em; margin-right:1px}
.voice blockquote::after{content:"\""; color:var(--c-gold); font-weight:700; font-size:1.2em; margin-left:1px}
.voice__author{
  display:flex; align-items:center; gap:14px;
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--c-border);
}
.voice__avatar{
  width:48px; height:48px; flex:0 0 48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.05rem;
  letter-spacing:-.01em;
  font-family:'Inter',sans-serif;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
}
.voice__avatar.a1{background:linear-gradient(135deg, #1F3458, #3A5A95)}
.voice__avatar.a2{background:linear-gradient(135deg, #C68A1A, #E8A93F)}
.voice__avatar.a3{background:linear-gradient(135deg, #10B981, #059669)}
.voice__avatar.a4{background:linear-gradient(135deg, #8B5CF6, #6D28D9)}
.voice__author-text{display:flex; flex-direction:column; line-height:1.2}
.voice__author-text strong{font-weight:700; color:var(--c-ink); font-size:var(--fs-sm)}
.voice__author-text small{font-size:var(--fs-xs); color:var(--c-ink-mute); margin-top:2px}

/* === Onboarding-Story === */
.content-section--onboarding{background:var(--c-blue-bg)}
.onboarding__stats{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
  margin-top:22px;
}
.onboarding__stat{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:12px;
  padding:14px 16px;
}
.onboarding__stat .v{
  font-size:1.7rem; font-weight:800;
  color:var(--c-blue);
  letter-spacing:-.02em;
  line-height:1;
}
.onboarding__stat .v small{font-size:.55em; color:var(--c-gold-dark); margin-left:2px; font-weight:700}
.onboarding__stat .l{
  font-size:var(--fs-xs); color:var(--c-ink-soft);
  margin-top:6px;
  line-height:1.4;
}

/* === Hero-Mobile-Kompaktansicht === */
@media(max-width:680px){
  .hero{padding:40px 0 56px}
  .hero__headline{font-size:clamp(2.25rem, 1.5rem + 4vw, 3rem); line-height:1.05}
  .hero__visual{min-height:300px; margin-top:12px}
  .cal__grid{font-size:7px}
  .cal__grid .obj-h{font-size:8px; padding:0 6px; height:19px}
  .cal__grid .day-h{padding:3px 1px; font-size:7px}
  .cal__event{font-size:6.5px}
  .doodle{display:none}
}

/* === Subpage-Hero (kleiner, ohne Visual-Spalte) === */
.page-hero{
  background:linear-gradient(180deg, var(--c-blue-bg), #fff);
  padding:56px 0 64px;
  border-bottom:1px solid var(--c-border);
}
@media(min-width:880px){.page-hero{padding:84px 0 88px}}
.page-hero__inner{max-width:780px}
.page-hero .eyebrow{
  display:inline-block;
  font-size:var(--fs-sm); font-weight:700;
  color:var(--c-gold-dark);
  letter-spacing:.04em;
  margin:0 0 14px;
  padding-bottom:6px;
  border-bottom:3px solid var(--c-gold);
}
.page-hero h1{
  font-size:clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
  font-weight:800;
  color:var(--c-blue);
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0 0 18px;
}
.page-hero p.lead{
  font-size:var(--fs-md);
  color:var(--c-ink-soft);
  line-height:1.6;
  max-width:640px;
  margin:0 0 24px;
}
.page-hero p.lead strong{color:var(--c-ink)}
.page-hero .btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}

/* === Anchor-Nav für lange Subpages — horizontal scrollbar === */
.anchor-nav{
  background:#fff;
  border-bottom:1px solid var(--c-border);
  padding:12px 0;
  position:sticky; top:88px; z-index:30;
  margin-top:-1px;
}
@media(max-width:1000px){.anchor-nav{top:0}}

.anchor-nav .wrap{
  position:relative;
  padding-right:0;
  padding-left:0;
}
.anchor-nav__row{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 20px;
  /* Fade-Edges links/rechts */
  mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.anchor-nav__row::-webkit-scrollbar{display:none}
@media(min-width:720px){.anchor-nav__row{padding:2px 32px}}

.anchor-nav a{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:8px;
  font-size:var(--fs-sm); font-weight:600;
  color:var(--c-ink-soft);
  background:var(--c-surface);
  white-space:nowrap;
  transition:background .2s var(--easing), color .2s var(--easing), transform .15s var(--easing);
  position:relative;
}
.anchor-nav a:hover{background:var(--c-blue-soft); color:var(--c-blue)}
.anchor-nav a.is-active{
  background:var(--c-blue);
  color:#fff;
}
.anchor-nav a.is-active:hover{background:var(--c-blue-dark); color:#fff}

/* Scroll-Padding für Sticky-Header beim Anchor-Sprung */
html{scroll-padding-top:140px}
@media(max-width:1000px){html{scroll-padding-top:80px}}

/* === Subpage Feature-Block (alternierend, lang) === */
.feature-block{
  padding:64px 0;
  border-bottom:1px solid var(--c-border);
}
.feature-block:last-of-type{border-bottom:0}
@media(min-width:880px){.feature-block{padding:96px 0}}
.feature-block .head{margin-bottom:24px}
.feature-block .head .tag{
  display:inline-block;
  font-size:var(--fs-xs); font-weight:700;
  color:var(--c-gold-dark);
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:10px;
  padding-bottom:4px;
  border-bottom:2px solid var(--c-gold);
}
.feature-block .head h2{margin:0 0 14px; font-size:var(--fs-2xl)}
.feature-block .head p.lead{font-size:var(--fs-md); color:var(--c-ink-soft); line-height:1.65; margin:0; max-width:780px}
.feature-block .body{display:grid; gap:18px; grid-template-columns:1fr; margin-top:18px}
@media(min-width:780px){.feature-block .body{grid-template-columns:1fr 1fr; gap:32px}}
.feature-block ul.checks{
  margin:0; padding:0;
  display:block;
}
.feature-block ul.checks li{
  position:relative;
  padding:0 0 0 30px;
  margin:0 0 12px;
  font-size:var(--fs-sm);
  color:var(--c-ink);
  line-height:1.55;
}
.feature-block ul.checks li::before{
  content:""; position:absolute;
  left:0; top:4px;
  width:18px; height:18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/18px no-repeat;
}
.feature-block ul.checks li strong{color:var(--c-blue); font-weight:700}

/* Zwei-Spalten-Layout je Feature-Block: Inhalt + Mockup-Grafik */
.feature-block__body{display:grid; gap:30px; grid-template-columns:1fr; align-items:center; margin-top:22px}
@media(min-width:880px){.feature-block__body{grid-template-columns:1.02fr .98fr; gap:52px}}
.feature-block__body ul.checks{margin:0}
.feature-block__illu{
  margin:0; border-radius:18px; padding:20px;
  background:linear-gradient(165deg,#FBFCFE,#EBF1F8);
  border:1px solid #E7EDF5;
  box-shadow:0 24px 50px -30px rgba(15,27,45,.5);
}
.feature-block__illu img{display:block; width:100%; height:auto}
/* Grafik alternierend links/rechts für ruhigen Rhythmus */
@media(min-width:880px){
  .feature-block:nth-of-type(even) .feature-block__body > .feature-block__illu{order:-1}
}
/* Breite Grafik (Rollen/Partner/Erweiterungen): volle Breite über dem Karten-Grid */
.feature-block__illu.is-wide{margin:16px 0 36px; padding:18px 22px}
@media(min-width:880px){.feature-block__illu.is-wide{padding:24px 30px}}

/* ===========================================================
   Startseite – Conversion-Sektionen
   Zielgruppen · Unterschied (Konkurrenz) · 3 Schritte · Sicherheit
   =========================================================== */
.audience-grid{display:grid; gap:20px; grid-template-columns:1fr; margin-top:10px}
@media(min-width:760px){.audience-grid{grid-template-columns:repeat(3,1fr)}}
.audience{background:#fff; border:1px solid var(--c-border); border-radius:16px; padding:28px 24px}
.audience.is-featured{border-color:var(--c-gold); box-shadow:0 22px 46px -28px rgba(232,169,63,.65)}
.audience .ico{width:46px; height:46px; border-radius:12px; background:var(--c-blue-bg); color:var(--c-blue); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px}
.audience .ico svg{width:24px; height:24px}
.audience h3{margin:0 0 8px; font-size:1.1rem; color:var(--c-blue)}
.audience p{margin:0; color:var(--c-ink-soft); font-size:.95rem; line-height:1.6}

.diff{display:grid; gap:18px; grid-template-columns:1fr; margin-top:10px}
@media(min-width:760px){.diff{grid-template-columns:1fr 1fr; gap:24px}}
.diff__col{border-radius:16px; padding:28px 26px}
.diff__col h3{margin:0 0 16px; font-size:1.05rem}
.diff__col ul{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.diff__col li{position:relative; padding-left:30px; font-size:.95rem; line-height:1.5}
.diff__col.is-them{background:#fff; border:1px solid var(--c-border)}
.diff__col.is-them h3{color:var(--c-ink-mute)}
.diff__col.is-them li{color:var(--c-ink-soft)}
.diff__col.is-them li::before{content:""; position:absolute; left:0; top:2px; width:18px; height:18px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.6' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center/18px no-repeat}
.diff__col.is-us{background:var(--c-blue); color:#fff; box-shadow:0 26px 54px -30px rgba(31,52,88,.75)}
.diff__col.is-us h3{color:#fff}
.diff__col.is-us li{color:#E7EEF7}
.diff__col.is-us li::before{content:""; position:absolute; left:0; top:2px; width:18px; height:18px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/18px no-repeat}

.steps{display:grid; gap:24px; grid-template-columns:1fr; margin-top:18px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr); gap:22px}}
.step{position:relative; background:#fff; border:1px solid var(--c-border); border-radius:16px; padding:32px 24px 24px}
.step .num{position:absolute; top:-18px; left:24px; width:40px; height:40px; border-radius:50%; background:var(--c-gold); color:#1F2A44; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(232,169,63,.7)}
.step h3{margin:14px 0 8px; font-size:1.05rem; color:var(--c-blue)}
.step p{margin:0; color:var(--c-ink-soft); font-size:.95rem; line-height:1.6}

.trustbar{display:grid; gap:16px; grid-template-columns:1fr; margin-top:10px}
@media(min-width:560px){.trustbar{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.trustbar{grid-template-columns:repeat(4,1fr)}}
.trustbar__item{display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--c-border); border-radius:14px; padding:22px 20px}
.trustbar__item .ico{width:40px; height:40px; border-radius:10px; background:#E6F8F0; color:#0E9F6E; display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px}
.trustbar__item .ico svg{width:22px; height:22px}
.trustbar__item strong{color:var(--c-blue); font-size:.95rem}
.trustbar__item span{color:var(--c-ink-soft); font-size:.85rem; line-height:1.5}

/* Mobile-Feinschliff (mobile first): kompaktere Abstände & Typo auf kleinen Screens */
@media(max-width:600px){
  .section{padding:48px 0}
  .feature-block{padding:44px 0}
  .feature-block .head h2{font-size:1.5rem; line-height:1.2}
  .feature-block .head p.lead{font-size:1rem}
  .feature-block__body{gap:20px; margin-top:14px}
  .feature-block__illu{padding:14px; border-radius:14px}
  .feature-block__illu.is-wide{padding:12px 14px}
  .section__head h2{font-size:1.55rem; line-height:1.2}
  .audience{padding:22px 20px}
  .audience h3{font-size:1.05rem}
  .diff__col{padding:22px 20px}
  .steps{gap:28px; margin-top:24px}
  .step{padding:26px 20px 20px}
  .trustbar{gap:12px}
  .trustbar__item{padding:18px 16px}
}

/* Sub-Feature-Cards (3-Spalter) */
.subfeature-grid{
  display:grid; gap:16px;
  grid-template-columns:1fr;
  margin-top:24px;
}
@media(min-width:680px){.subfeature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.subfeature-grid{grid-template-columns:repeat(3,1fr)}}
.subfeature{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:12px;
  padding:24px 22px;
  display:flex; flex-direction:column; gap:10px;
}
.subfeature .icon{
  width:42px; height:42px;
  border-radius:10px;
  background:var(--c-gold-soft); color:var(--c-gold-dark);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.subfeature .icon svg{width:22px; height:22px}
.subfeature h3{font-size:1.05rem; margin:0; color:var(--c-blue)}
.subfeature p{font-size:var(--fs-sm); color:var(--c-ink-soft); line-height:1.55; margin:0}

/* === Kontakt-Layout === */
.contact__grid{
  display:grid; gap:32px;
  grid-template-columns:1fr;
  margin-top:24px;
}
@media(min-width:980px){.contact__grid{grid-template-columns:1fr 1.1fr; gap:48px}}

.contact__card{
  background:linear-gradient(165deg, var(--c-blue), var(--c-blue-dark));
  color:#fff;
  border-radius:16px;
  padding:28px 26px;
}
.contact__card h3{color:#fff; margin:0 0 14px}
.contact__card .info{
  display:flex; flex-direction:column; gap:14px;
  margin-top:8px;
}
.contact__card .info-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.contact__card .info-row:last-child{border-bottom:0}
.contact__card .info-row .ico{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:10px;
  background:rgba(232,169,63,.18); color:var(--c-gold);
  display:flex; align-items:center; justify-content:center;
}
.contact__card .info-row .ico svg{width:20px; height:20px}
.contact__card .info-row .body{flex:1}
.contact__card .info-row .body strong{display:block; color:#fff; font-weight:700; margin-bottom:2px}
.contact__card .info-row .body a{color:#fff; border-bottom:1px solid rgba(255,255,255,.4)}
.contact__card .info-row .body a:hover{border-color:var(--c-gold); color:var(--c-gold)}
.contact__card .info-row .body small{color:rgba(255,255,255,.7); font-size:var(--fs-xs); display:block; margin-top:2px}

.form{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:16px;
  padding:28px 26px;
  box-shadow:var(--shadow-sm);
}
.form h3{margin:0 0 14px}
.form .grid-2{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:540px){.form .grid-2{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:var(--fs-sm); font-weight:600; color:var(--c-ink)}
.field label .opt{color:var(--c-ink-mute); font-weight:400}
.field input,
.field select,
.field textarea{
  padding:11px 13px;
  border-radius:8px;
  border:1.5px solid var(--c-border);
  background:#fff;
  font:inherit; font-size:var(--fs-sm);
  color:var(--c-ink);
  transition:border-color .2s, box-shadow .2s;
  font-family:'Inter',sans-serif;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--c-blue);
  box-shadow:0 0 0 4px rgba(31,52,88,.10);
}
.field textarea{min-height:120px; resize:vertical}
.field .check{display:flex; align-items:flex-start; gap:8px; font-weight:500; line-height:1.5}
.field .check input{margin:3px 0 0; width:auto}
.form .submit-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:6px}
.form__intro{color:var(--c-ink-soft); font-size:var(--fs-sm); margin:0 0 14px}
.form__hint{color:var(--c-ink-mute); font-size:var(--fs-xs); margin:6px 0 0}
.form__hint a{color:var(--c-blue); border-bottom:1.5px solid currentColor}

/* === Contao-Formular (ce_form) im saas-Look ============================ */
.form .formbody{display:flex; flex-wrap:wrap; gap:0 18px; margin:0; padding:0; list-style:none; border:0}
.form .widget{flex:1 1 100%; display:flex; flex-direction:column; gap:6px; margin:0 0 14px; min-width:0}
.form .widget.w50{flex:1 1 calc(50% - 18px)}
.form .widget-html,
.form .widget-explanation,
.form .widget-checkbox,
.form .widget-radio,
.form .widget-submit{flex:1 1 100%}
.form .widget > label{font-size:var(--fs-sm); font-weight:600; color:var(--c-ink)}
.form .widget label .mandatory,.form span.mandatory,.form .widget label span{color:var(--c-blue)}
.form .widget input[type=text],
.form .widget input[type=email],
.form .widget input[type=tel],
.form .widget input[type=number],
.form .widget select,
.form .widget textarea{
  width:100%; padding:11px 13px; border-radius:8px; border:1.5px solid var(--c-border);
  background:#fff; font:inherit; font-size:var(--fs-sm); color:var(--c-ink);
  font-family:'Inter',sans-serif; transition:border-color .2s, box-shadow .2s;
}
.form .widget input:focus,
.form .widget select:focus,
.form .widget textarea:focus{
  outline:none; border-color:var(--c-blue); box-shadow:0 0 0 4px rgba(31,52,88,.10);
}
.form .widget textarea{min-height:120px; resize:vertical}
/* Checkbox-Layout: greift egal ob .form am <form> oder am .ce_form-Wrapper hängt.
   Struktur: .widget-checkbox > fieldset > span > input[checkbox] + label  → span flexen. */
.widget-checkbox{background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:13px 15px}
.widget-checkbox .checkbox_container,.widget-checkbox > fieldset{border:0; margin:0; padding:0; min-width:0}
.widget-checkbox fieldset > span{display:flex !important; align-items:flex-start; gap:10px; flex-wrap:wrap}
.widget-checkbox input[type="checkbox"]{flex:0 0 18px !important; width:18px !important; height:18px !important; margin:2px 0 0 !important; accent-color:var(--c-blue); cursor:pointer}
.widget-checkbox label{display:block !important; flex:1 1 auto; width:auto !important; max-width:none !important; margin:0 !important; font-weight:500; line-height:1.45; font-size:var(--fs-sm); color:var(--c-ink); text-align:left}
.widget-checkbox a{color:var(--c-blue); border-bottom:1.5px solid currentColor}
/* Contao rendert (Multi-)Checkboxen als <fieldset><legend>…: Rahmen entfernen */
.form fieldset{border:0; margin:0; padding:0; min-width:0}
.form legend{padding:0; margin:0 0 6px; font-size:var(--fs-sm); font-weight:600; color:var(--c-ink)}
.form legend:empty{display:none; margin:0}
.form .widget p.error,.form .widget .error{color:#c0392b; font-size:var(--fs-xs); margin:4px 0 0}
/* Pflicht-Stern inline halten (sonst flext ihn die Regel oben in eine neue Zeile) */
.widget-checkbox label .mandatory{display:inline !important}
/* Fehlerzustand des Pflicht-Hakens deutlich zeigen (Contao markiert mit .is-invalid) */
.widget-checkbox:has(.is-invalid){border-color:#c0392b; background:#fdeceb}
.widget-checkbox .is-invalid input[type="checkbox"]{outline:2px solid #c0392b; outline-offset:2px}
.widget-checkbox .invalid-feedback{flex:0 0 100%; margin:4px 0 0 28px; color:#c0392b; font-size:var(--fs-xs)}
.widget-checkbox .is-invalid .invalid-feedback:empty::after{content:"Bitte bestätige die Datenschutzerklärung, um fortzufahren."}
.form .widget-submit{padding-top:6px}
.form .widget-submit button{
  display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:8px;
  font-weight:600; font-size:var(--fs-sm); border:0; cursor:pointer;
  background:var(--c-blue); color:#fff; box-shadow:var(--shadow-sm); font-family:'Inter',sans-serif;
  transition:transform .15s var(--easing), box-shadow .25s var(--easing), background .2s;
}
.form .widget-submit button:hover{background:var(--c-blue-dark); transform:translateY(-1px); box-shadow:var(--shadow-md)}
/* Honeypot: fuer Menschen unsichtbar */
.form .hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; margin:0; padding:0}
/* Versteckte Felder (Hidden/_mwfm_ts) duerfen keinen Platz/Abstand erzeugen */
.form .widget-hidden,.form input[type="hidden"]{display:none !important; margin:0 !important; padding:0 !important}
/* form.js Client-Validierung */
.form .is-invalid input,.form input.is-invalid,.form .is-invalid select,.form select.is-invalid,.form .is-invalid textarea,.form textarea.is-invalid{border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.form .invalid-feedback{color:#c0392b; font-size:var(--fs-xs); margin:4px 0 0}
.form .valid-feedback{display:none}

/* === Partner & Vertrauen =============================================== */
.trust .section__head{margin-bottom:30px}
.logo-strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:34px 50px}
.logo-strip img{height:34px; width:auto; max-width:170px; object-fit:contain; filter:grayscale(1); opacity:.65; transition:filter .2s, opacity .2s}
.logo-strip img:hover{filter:none; opacity:1}
/* Laufendes Partner-Logo-Band (Marquee) */
.logo-strip__marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-strip__track{display:flex; align-items:center; gap:0 56px; width:max-content; animation:logo-scroll 30s linear infinite}
.logo-strip__marquee:hover .logo-strip__track{animation-play-state:paused}
.logo-strip__track img{height:34px; width:auto; max-width:170px; object-fit:contain; filter:grayscale(1); opacity:.65; flex:0 0 auto; transition:filter .2s, opacity .2s}
.logo-strip__track img:hover{filter:none; opacity:1}
@keyframes logo-scroll{from{transform:translateX(0)} to{transform:translateX(-25%)}}
@media (prefers-reduced-motion: reduce){.logo-strip__track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:30px 50px}.logo-strip__track img[aria-hidden="true"]{display:none}}
.portals{margin-top:36px; text-align:center}
.portals__title{font-size:var(--fs-sm); color:var(--c-ink-soft); margin:0 0 14px; font-weight:600}
.portals__chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.portals__chips .chip{
  display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px;
  background:var(--c-blue); border:1px solid var(--c-blue); color:#fff;
  font-weight:600; font-size:var(--fs-sm); letter-spacing:.01em;
}
.trust__badges{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; margin-top:38px}
.trust__badge{display:inline-flex; align-items:center; gap:9px; color:var(--c-ink-soft); font-weight:600; font-size:var(--fs-sm)}
.trust__badge svg{width:22px; height:22px; color:#10B981; flex:0 0 22px}

/* Mobile: Partner-Logos statisch (kein einzeln durchlaufendes „Geister"-Logo) + Portal-Chips kompakter */
@media(max-width:680px){
  .logo-strip__marquee{-webkit-mask-image:none; mask-image:none}
  .logo-strip__track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:20px 28px}
  .logo-strip__track img[aria-hidden="true"]{display:none}
  .logo-strip__track img{height:26px; opacity:.72}
  .portals{margin-top:26px}
  .portals__chips .chip{font-size:.8rem; padding:7px 13px}
  .trust__badges{gap:12px 20px; margin-top:28px}
}

/* === Produkt-Showcase (Mockup) ======================================== */
.showcase .wrap{text-align:center}
.showcase .section__head{margin-bottom:30px}
.showcase__frame{
  max-width:880px; margin:0 auto; border-radius:16px; overflow:hidden;
  border:1px solid var(--c-border); box-shadow:var(--shadow-md); background:#fff;
}
.showcase__frame img{display:block; width:100%; height:auto}

/* === Modul-Übersicht ================================================== */
.modules__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:18px}
.module{background:#fff; border:1px solid var(--c-border); border-radius:14px; padding:22px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.module h3{font-size:var(--fs-md); margin:0 0 8px; color:var(--c-blue)}
.module p{margin:0; color:var(--c-ink-soft); font-size:var(--fs-sm); line-height:1.55}
.module__ico{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; background:var(--c-blue-soft); color:var(--c-blue); margin-bottom:14px; transition:background .2s ease, color .2s ease}
.module__ico svg{width:22px; height:22px}
.module:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--c-gold)}
.module:hover .module__ico{background:var(--c-gold-soft); color:var(--c-gold-dark)}
@media (prefers-reduced-motion:reduce){.module{transition:none}.module:hover{transform:none}}

/* === Hero-Phone: echte Mobil-Ansicht (Buchungs-Karten) =============== */
.hero__phone-screen .phone-app{height:100%; display:flex; flex-direction:column; background:#F5F8FC; overflow:hidden}
.phone-app__bar{background:#1F3458; color:#fff; padding:8px 10px; font-size:8.5px; font-weight:700; display:flex; justify-content:space-between; align-items:center}
.phone-app__bar-meta{opacity:.7; font-weight:500}
.phone-app__list{flex:1; padding:8px; display:flex; flex-direction:column; gap:6px; overflow:hidden}
.phone-app__card{background:#fff; border:1px solid #E2E8F0; border-radius:7px; padding:6px 8px}
.phone-app__row{display:flex; justify-content:space-between; align-items:center}
.phone-app__card strong{font-size:8px; color:#1F3458}
.phone-app__card > span{font-size:7px; color:#7A8AA0}
.phone-app__card .dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 7px}
.phone-app__card .dot.ok{background:#10B981}
.phone-app__card .dot.opt{background:#F59E0B}
.phone-app__card .dot.portal{background:#3A5A95}
.phone-app__tabbar{display:flex; justify-content:space-around; align-items:center; padding:6px 0; background:#fff; border-top:1px solid #E2E8F0}
.phone-app__tabbar i{width:14px; height:4px; border-radius:2px; background:#CBD5E1; display:inline-block}
.phone-app__tabbar i.on{background:#E8A93F}

/* === Lese-Layout für Rechtstexte (Datenschutz/Impressum/AGB) ========== */
.prose{max-width:760px}
.prose h2{font-size:var(--fs-xl); margin:34px 0 12px; color:var(--c-blue); line-height:1.25}
.prose > h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-md); margin:24px 0 8px; color:var(--c-ink)}
.prose h4{font-size:var(--fs-sm); margin:18px 0 6px; color:var(--c-ink-soft); text-transform:uppercase; letter-spacing:.05em}
.prose p{margin:0 0 14px; line-height:1.7; color:var(--c-ink-soft)}
.prose ul{margin:0 0 16px 20px; padding:0}
.prose li{margin:0 0 8px; line-height:1.6; color:var(--c-ink-soft)}
.prose a{color:var(--c-blue); border-bottom:1px solid currentColor; word-break:break-word}
.prose strong{color:var(--c-ink)}
.prose hr{border:0; border-top:1px solid var(--c-border); margin:34px 0}
.prose-table{overflow-x:auto; margin:0 0 16px}
.prose table{border-collapse:collapse; width:100%; font-size:var(--fs-sm); line-height:1.5}
.prose th, .prose td{border:1px solid var(--c-border); padding:8px 10px; text-align:left; vertical-align:top; color:var(--c-ink-soft)}
.prose th{background:var(--c-blue-bg); color:var(--c-ink); font-weight:700}

/* === Reassurance-/Risk-Reversal-Band ================================== */
.reassure{padding:8px 0 4px}
.reassure__row{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px; list-style:none; margin:0; padding:0}
.reassure__row li{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:var(--fs-sm); color:var(--c-ink)}
.reassure__row svg{width:20px; height:20px; color:#10B981; flex:0 0 20px}

/* === Kundenstimmen ==================================================== */
.testi__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.testi{background:#fff; border:1px solid var(--c-border); border-radius:16px; padding:26px; margin:0; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px}
.testi > svg{width:30px; height:30px; color:var(--c-gold); flex:0 0 30px}
.testi blockquote{margin:0; font-size:var(--fs-md); line-height:1.6; color:var(--c-ink)}
.testi figcaption{margin-top:auto}
.testi figcaption strong{display:block; color:var(--c-blue); font-weight:700}
.testi figcaption span{font-size:var(--fs-sm); color:var(--c-ink-soft)}

/* === Subpage Story-Block === */
.story{padding:64px 0}
@media(min-width:880px){.story{padding:96px 0}}
.story__grid{
  display:grid; gap:36px;
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:880px){.story__grid{grid-template-columns:1.2fr 1fr; gap:56px}}
.story__text h2{margin:0 0 18px; font-size:var(--fs-2xl)}
.story__text p{font-size:var(--fs-md); color:var(--c-ink-soft); line-height:1.7; margin-bottom:14px}
.story__text p strong{color:var(--c-ink)}

/* KPIs in der schmaleren Story-Spalte: immer 2x2 statt 4x1 */
.story__grid .kpis{
  grid-template-columns:repeat(2,1fr) !important;
  gap:14px;
}
.story__grid .kpi{
  text-align:left;
  padding:20px 18px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.story__grid .kpi .v{
  font-size:1.9rem;
}
.story__grid .kpi .l{
  font-size:var(--fs-xs);
  line-height:1.4;
}

/* === Anonymisierte Referenzen-Karten === */
.refs__grid{
  display:grid; gap:18px;
  grid-template-columns:1fr;
  margin-top:8px;
}
@media(min-width:680px){.refs__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.refs__grid{grid-template-columns:repeat(3,1fr)}}

.ref{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:12px;
  padding:24px 22px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .25s var(--easing), box-shadow .25s var(--easing);
}
.ref:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.ref__meta{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-xs);
  color:var(--c-ink-mute);
  font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
}
.ref__meta .badge{
  background:var(--c-blue-soft); color:var(--c-blue);
  padding:3px 10px; border-radius:999px;
  font-size:.7rem; font-weight:700;
  letter-spacing:.02em; text-transform:none;
}
.ref h3{
  font-size:var(--fs-md);
  margin:0;
  color:var(--c-blue);
  line-height:1.25;
}
.ref h3 a{color:inherit; text-decoration:none}
.ref h3 a:hover{color:var(--c-gold-dark); text-decoration:underline}
.ref h3 a::after{content:" ↗"; color:var(--c-ink-mute); font-weight:600}

/* Referenz-Teaser auf der Startseite ("Vertrauen von …") */
.trusted-by__title{text-align:center; max-width:780px; margin:0 auto 20px; color:var(--c-ink-soft); font-size:1.05rem; line-height:1.6}
.trusted-by__names{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px}
.trusted-by__names a{display:inline-flex; align-items:center; padding:8px 15px; border-radius:999px; background:#fff; border:1px solid var(--c-border); color:var(--c-blue); font-weight:600; font-size:.9rem; text-decoration:none; transition:border-color .15s, color .15s}
.trusted-by__names a:hover{border-color:var(--c-gold); color:var(--c-gold-dark)}
.trusted-by__names .trusted-by__more{background:transparent; border-color:transparent; color:var(--c-gold-dark)}
.ref p{
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
  line-height:1.55;
  margin:0;
}
.ref__tag{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:8px;
  font-size:var(--fs-xs);
  color:var(--c-gold-dark); font-weight:700;
  letter-spacing:.02em;
}
.ref__tag::before{
  content:""; width:14px; height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C68A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/14px no-repeat;
}

.refs__foot{
  text-align:center;
  margin-top:32px;
  padding:22px 24px;
  background:var(--c-blue-bg);
  border-radius:12px;
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
  line-height:1.65;
}
.refs__foot strong{color:var(--c-ink)}

/* === PREIS-SEKTION === */
.pricing{
  background:#fff;
  padding:80px 0 96px;
}
.pricing__grid{
  display:grid; gap:20px;
  grid-template-columns:1fr;
  margin-top:24px;
}
@media(min-width:780px){.pricing__grid{grid-template-columns:repeat(3,1fr); align-items:stretch}}

.plan{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:16px;
  padding:32px 28px;
  display:flex; flex-direction:column; gap:18px;
  position:relative;
  transition:transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s;
}
.plan:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--c-blue-soft)}
.plan h3{
  font-size:1.3rem;
  margin:0;
  color:var(--c-blue);
}
.plan .desc{
  font-size:var(--fs-sm);
  color:var(--c-ink-mute);
  margin:-10px 0 0;
}
.plan .price{
  display:flex; align-items:baseline; gap:6px;
  margin:8px 0 4px;
}
.plan .price .amount{
  font-size:2.4rem; font-weight:800;
  color:var(--c-blue);
  letter-spacing:-.025em; line-height:1;
}
.plan .price .per{
  font-size:var(--fs-sm); color:var(--c-ink-mute);
  font-weight:500;
}
.plan .price-note{
  font-size:var(--fs-xs);
  color:var(--c-ink-mute);
  margin:0;
}
.plan ul{
  display:flex; flex-direction:column; gap:10px;
}
.plan li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
}
.plan li::before{
  content:""; width:18px; height:18px; flex:0 0 18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/18px no-repeat;
  margin-top:2px;
}
.plan .btn{margin-top:auto; width:100%; justify-content:center}

.plan.highlight{
  background:linear-gradient(165deg, var(--c-blue), var(--c-blue-dark));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--shadow-lg);
  transform:scale(1.02);
}
.plan.highlight h3, .plan.highlight .price .amount{color:#fff}
.plan.highlight .desc{color:rgba(255,255,255,.7)}
.plan.highlight .price .per, .plan.highlight .price-note{color:rgba(255,255,255,.7)}
.plan.highlight ul li{color:rgba(255,255,255,.92)}
.plan.highlight ul li::before{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A93F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/18px no-repeat;
}
.plan.highlight .ribbon{
  position:absolute; top:-13px; right:24px;
  background:var(--c-gold); color:var(--c-blue-darker);
  padding:6px 14px; border-radius:999px;
  font-size:var(--fs-xs); font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}

.calc__row{
  display:flex; align-items:center; gap:10px;
  padding:14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
}
.calc__row label{font-size:var(--fs-sm); font-weight:600; color:rgba(255,255,255,.85)}
.calc__row input{
  flex:1; padding:9px 12px; border-radius:6px;
  background:#fff; color:var(--c-ink);
  border:1.5px solid transparent; font:inherit; font-weight:700;
  text-align:center; max-width:100px;
  font-family:'Inter',sans-serif;
}
.calc__row input:focus{outline:none; border-color:var(--c-gold)}

.pricing__foot{
  text-align:center;
  margin-top:32px;
  font-size:var(--fs-sm);
  color:var(--c-ink-mute);
}
.pricing__foot strong{color:var(--c-ink)}

/* === VORHER/NACHHER === */
.bna{
  background:linear-gradient(180deg, #fff 0%, var(--c-blue-bg) 100%);
  padding:80px 0;
}
.bna__grid{
  display:grid; gap:18px;
  grid-template-columns:1fr;
  margin-top:24px;
}
@media(min-width:780px){.bna__grid{grid-template-columns:1fr 1fr}}

.bna__card{
  border-radius:16px;
  padding:32px;
  position:relative;
}
.bna__card.before{
  background:#FFF8F0;
  border:1px solid #FCE7CB;
}
.bna__card.after{
  background:linear-gradient(180deg, #fff, var(--c-blue-soft));
  border:1px solid var(--c-blue-light);
  box-shadow:var(--shadow-sm);
}
.bna__card .label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:14px;
  padding:5px 11px; border-radius:999px;
}
.bna__card.before .label{background:#FCE7CB; color:#B45309}
.bna__card.after .label{background:var(--c-blue-soft); color:var(--c-blue)}
.bna__card h3{
  font-size:1.3rem;
  color:var(--c-blue);
  margin:0 0 16px;
}
.bna__card .story{
  font-size:var(--fs-md);
  color:var(--c-ink);
  line-height:1.55;
  margin:0 0 18px;
  font-style:italic;
}
.bna__card ul{
  display:flex; flex-direction:column; gap:10px;
}
.bna__card li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
}
.bna__card.before li::before{
  content:""; width:18px; height:18px; flex:0 0 18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4M12 17.5h.01M10.3 3.5l-8.4 14.5a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.5a2 2 0 0 0-3.4 0Z'/></svg>") center/18px no-repeat;
  margin-top:1px;
}
.bna__card.after li::before{
  content:""; width:18px; height:18px; flex:0 0 18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/18px no-repeat;
  margin-top:1px;
}
.bna__time{
  margin-top:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.6);
  border-radius:10px;
  font-size:var(--fs-sm);
  color:var(--c-ink);
  font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.bna__time strong{color:var(--c-blue); font-size:1.1em}
.bna__card.before .bna__time strong{color:#B45309}

/* === FAQ === */
.faq{
  max-width:820px; margin:32px auto 0;
}
.faq__item{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
}
.faq__item[open]{box-shadow:var(--shadow-sm); border-color:var(--c-blue-light)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px;
  cursor:pointer; list-style:none;
  font-weight:700; font-size:var(--fs-md);
  color:var(--c-blue);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item .icon{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:var(--c-blue-soft); color:var(--c-blue);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s var(--easing), background .25s, color .25s;
}
.faq__item .icon svg{width:14px; height:14px}
.faq__item[open] .icon{
  transform:rotate(45deg);
  background:var(--c-gold);
  color:var(--c-blue-darker);
}
.faq__body{
  padding:0 22px 20px;
  color:var(--c-ink-soft);
  font-size:var(--fs-md);
  line-height:1.65;
}
.faq__body strong{color:var(--c-ink)}
.faq__body a{color:var(--c-blue); border-bottom:1.5px solid var(--c-blue); padding-bottom:1px}

/* === Trust / Risk-Reduction Block === */
.trust-block{
  background:var(--c-blue-darker);
  color:#fff;
  border-radius:20px;
  padding:48px 32px;
  margin:0 auto;
  position:relative; overflow:hidden;
}
@media(min-width:780px){.trust-block{padding:56px 48px}}
.trust-block::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 240px at 90% 0%, rgba(232,169,63,.18), transparent 60%);
  pointer-events:none;
}
.trust-block__head{position:relative; max-width:760px; margin:0 0 32px}
.trust-block__head h2{color:#fff; margin:0 0 12px; font-size:var(--fs-2xl)}
.trust-block__head p{color:rgba(255,255,255,.8); margin:0}
.trust__grid{
  display:grid; gap:22px;
  grid-template-columns:1fr;
  position:relative;
}
@media(min-width:680px){.trust__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.trust__grid{grid-template-columns:repeat(3,1fr)}}

.trust__item{
  display:flex; gap:14px; align-items:flex-start;
}
.trust__icon{
  width:42px; height:42px; flex:0 0 42px;
  border-radius:10px;
  background:rgba(232,169,63,.18);
  color:var(--c-gold);
  display:inline-flex; align-items:center; justify-content:center;
}
.trust__icon svg{width:22px; height:22px}
.trust__text strong{display:block; font-weight:700; font-size:var(--fs-md); color:#fff; margin-bottom:4px}
.trust__text p{margin:0; font-size:var(--fs-sm); color:rgba(255,255,255,.75); line-height:1.55}

/* === Mobile Sticky-CTA === */
.sticky-cta{
  position:fixed; bottom:14px; left:14px; right:14px;
  z-index:40;
  display:flex; gap:10px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border:1px solid var(--c-border);
  border-radius:14px;
  padding:10px;
  box-shadow:0 12px 32px rgba(15,27,45,.18);
  transform:translateY(120%);
  transition:transform .35s var(--easing);
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta a{flex:1; justify-content:center; padding:12px 14px}
.sticky-cta .btn-primary{background:var(--c-gold); color:var(--c-blue-darker)}
.sticky-cta .btn-primary:hover{background:#F0BB5C; color:var(--c-blue-darker)}
.sticky-cta .btn-light{background:var(--c-blue); color:#fff; border:1px solid var(--c-blue)}
.sticky-cta .btn-light:hover{background:var(--c-blue-dark); color:#fff}
@media(min-width:1000px){.sticky-cta{display:none}}

/* === Header CTA-Button stronger (statt Textlink) === */
.header__cta-btn{
  display:none;
  align-items:center; gap:8px;
  padding:11px 18px;
  background:var(--c-gold); color:var(--c-blue-darker);
  border-radius:8px;
  font-weight:700; font-size:var(--fs-sm);
  transition:background .2s, transform .15s;
  white-space:nowrap;
}
.header__cta-btn:hover{
  background:#F0BB5C;
  transform:translateY(-1px);
  color:var(--c-blue-darker);
}
.header__cta-btn svg{width:14px; height:14px}
@media(min-width:1000px){.header__cta-btn{display:inline-flex}}

/* === Focus-Visible (Barrierefreiheit) === */
:focus{outline:none}
:focus-visible{outline:3px solid var(--c-gold); outline-offset:2px; border-radius:4px}

/* === Vergleichstabelle (MWFM vs. typische Cloud-SaaS) === */
.compare__wrap{
  border:1px solid var(--c-border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(15,27,45,.06);
  background:#fff;
  /* horizontaler Scroll auf schmalen Screens */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.compare{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
.compare thead th{
  background:var(--c-blue);
  color:#fff;
  font-weight:700;
  text-align:left;
  padding:18px 20px;
  font-size:var(--fs-md);
  letter-spacing:.01em;
  border-bottom:1px solid var(--c-blue-dark);
}
.compare thead th.col-us{
  background:var(--c-blue-darker);
  color:var(--c-gold);
  position:relative;
}
.compare thead th.col-us::after{
  content:"empfohlen";
  position:absolute; top:6px; right:14px;
  font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--c-blue-darker);
  background:var(--c-gold);
  padding:2px 8px; border-radius:99px;
}
.compare thead th.col-them{
  color:rgba(255,255,255,.85);
  background:var(--c-blue);
}
.compare tbody th{
  text-align:left;
  font-weight:600;
  color:var(--c-ink);
  padding:14px 20px;
  background:#fafbfc;
  border-bottom:1px solid var(--c-border-soft, #eef0f3);
  width:38%;
}
.compare tbody td{
  padding:14px 20px;
  border-bottom:1px solid var(--c-border-soft, #eef0f3);
  color:var(--c-ink-soft);
  vertical-align:middle;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td{border-bottom:none}
.compare tbody td.col-us{
  background:#fbf7ee;
  color:var(--c-ink);
  font-weight:600;
  border-left:1px solid var(--c-gold-soft, #f4e4c0);
  border-right:1px solid var(--c-gold-soft, #f4e4c0);
}
.compare tbody tr:last-child td.col-us{
  border-bottom:1px solid var(--c-gold-soft, #f4e4c0);
}
.compare tbody tr:hover td,
.compare tbody tr:hover th{
  background:#f4f6fa;
}
.compare tbody tr:hover td.col-us{
  background:#f7eed8;
}

/* Yes/No-Pills */
.cell-yes,
.cell-no{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600;
  line-height:1.3;
}
.cell-yes::before{
  content:""; flex:0 0 18px; width:18px; height:18px;
  border-radius:50%;
  background:var(--c-success, #16a34a) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat;
}
.cell-no::before{
  content:""; flex:0 0 18px; width:18px; height:18px;
  border-radius:50%;
  background:#cdd3dd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M6 6 18 18M18 6 6 18'/></svg>") center/12px no-repeat;
}
.cell-no{color:var(--c-ink-mute)}

.compare__foot{
  text-align:center;
  margin:16px 0 0;
  color:var(--c-ink-mute);
  font-size:.8rem;
}

@media(max-width:680px){
  .compare__wrap{
    border-radius:14px;
    /* visueller Hinweis auf Scroll */
    background:linear-gradient(to right, #fff 0%, #fff 6%, #fff 94%, #fff 100%);
  }
  .compare thead th{padding:14px 14px; font-size:.9rem}
  .compare tbody th,
  .compare tbody td{padding:12px 14px}
  .compare thead th.col-us::after{display:none}
}

/* ===== Externalisierte Inline-Styles (1:1 render-erhaltend) ===== */
.u-bg-blue{background:var(--c-blue-bg)}
.u-bg-surface{background:var(--c-surface)}
.u-bg-white{background:#fff}
.u-bg-blue-soft{background:var(--c-blue-soft)}
.icon--gold{background:var(--c-gold-soft); color:var(--c-gold-dark)}
.icon--soft{background:var(--c-blue-soft); color:var(--c-blue)}
.btn--gold{background:var(--c-gold); color:var(--c-blue-darker)}
.icon__num{font-size:1.1rem}
.check-list__item{position:relative; padding:0 0 0 30px; margin:0 0 14px; font-size:var(--fs-md); color:var(--c-ink); line-height:1.55}
.check-list__icon{position:absolute; left:0; top:4px; width:18px; height:18px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/18px no-repeat; display:inline-block}
.check-list{display:block; padding:0; margin:0}
.dot-list__item{position:relative; padding:0 0 0 22px; margin:0 0 8px; font-size:var(--fs-sm); color:var(--c-ink-soft)}
.dot-list__dot{position:absolute; left:0; top:7px; width:5px; height:5px; background:var(--c-gold-dark); border-radius:50%; display:inline-block}
.ulink{color:var(--c-blue); border-bottom:1.5px solid currentColor}
.ulink--pad{color:var(--c-blue); border-bottom:1.5px solid var(--c-blue); padding-bottom:1px}
.u-jc-center{justify-content:center}
.text-soft-sm{color:var(--c-ink-soft); font-size:var(--fs-sm); margin:0 0 14px}
.inline-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px}
.text-mute-xs{color:var(--c-ink-mute); font-size:var(--fs-xs)}
.u-text-white{color:#fff}
.chip-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.u-pt-0{padding-top:0}
.h-2xl{font-size:var(--fs-2xl); margin:0 0 18px}
.lead-md{font-size:var(--fs-md); color:var(--c-ink-soft); line-height:1.6; margin:0 0 18px}
.note-sm{font-size:var(--fs-sm); color:var(--c-ink-mute); line-height:1.6; margin:14px 0 0}
.subhead-blue{margin:32px 0 14px; color:var(--c-blue)}
.text-soft-sm2{font-size:var(--fs-sm); color:var(--c-ink-soft); line-height:1.6; margin:0 0 8px}
.info-box{margin-top:24px; padding:18px 20px; background:var(--c-blue-bg); border-radius:10px; font-size:var(--fs-sm); color:var(--c-ink-soft); line-height:1.6}
.u-ml-auto{margin-left:auto}
.u-fs-7{font-size:7px}
.u-p-5-8{padding:5px 8px}
.u-fs7-pad{font-size:7px; padding:2px 5px}
.eyebrow--dark{color:#FFD89B}
.u-text-white80{color:rgba(255,255,255,.85)}
.band-blue{padding:48px 0; background:var(--c-blue-bg)}
.u-mb-0{margin-bottom:0}
.u-mt-24{margin-top:24px}
.u-mt-8{margin-top:8px}
.band-blue--pb{background:var(--c-blue-bg); padding-bottom:48px}
.center-mb{text-align:center; margin-bottom:36px}
.eyebrow-gold{display:inline-block; font-size:var(--fs-sm); font-weight:700; color:var(--c-gold-dark); letter-spacing:.04em; padding-bottom:6px; border-bottom:3px solid var(--c-gold); margin-bottom:14px}
.u-mb-12{margin:0 0 12px}
.lead-center{font-size:var(--fs-md); color:var(--c-ink-soft); max-width:640px; margin:0 auto}
.text-white80-mb{color:rgba(255,255,255,.85); margin:0 0 18px}
.foot-divider{margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1)}
.text-white-block{color:#fff; display:block; margin-bottom:8px}
.foot-list{display:flex; flex-direction:column; gap:8px; padding:0; margin:0; list-style:none; color:rgba(255,255,255,.85); font-size:var(--fs-sm)}
.wrap-1000{max-width:1000px; margin:0 auto}
.center-note{text-align:center; margin-top:30px; color:var(--c-ink-soft); font-size:var(--fs-sm)}
.center-mt{text-align:center; margin-top:32px}
.u-mt-0{margin-top:0}
.showcase__cta{margin-top:26px}
.price-note{padding:12px 16px;border-left:3px solid var(--c-gold);background:var(--c-surface);border-radius:6px;margin:0 0 22px}
.source-note{margin-top:22px;color:var(--c-ink-mute);font-size:var(--fs-xs)}

/* Referenz-Teaser dicht an die Trust-Sektion ruecken (weniger Leerraum) */
.trust{padding-bottom:56px}
#trusted-by{padding-top:0}

/* Features-Band (dunkel): .section__head p/.eyebrow waeren sonst dunkel auf Navy -> lesbar erzwingen (schlaegt .section__head p per Spezifitaet) */
.features-band .section__head h2{color:#fff}
.features-band .section__head p{color:rgba(255,255,255,.85)}
.features-band .section__head .eyebrow{color:#FFD89B}

/* ===== Preis-Badge ===== */
.calc__badgewrap{text-align:center; margin:0 0 26px}
.calc__badge{display:inline-block; padding:9px 18px; border-radius:999px; background:var(--c-gold-soft); color:var(--c-gold-dark); font-weight:700; font-size:var(--fs-sm)}