/* Green Media Bremen – Stylesheet. Generiert aus build/css/*.css via build/cssbuild.py */

/* ===== tokens ===== */

@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "icomoon"; src: url("../fonts/icomoon.woff") format("woff"); font-weight: normal; font-style: normal; font-display: block; }

:root {
  
  --c-primary: hsl(151.2 59.5% 32.9%);
  --c-primary-text: hsl(0 0.0% 100.0%);
  --c-primary-hover: hsl(151.2 59.5% 22.9%);
  --c-primary-active: hsl(151.2 59.5% 17.9%);
  --c-secondary: hsl(101.86 87.8% 80.8%);
  --c-secondary-text: hsl(0 0.0% 25.5%);
  --c-tertiary: hsl(0 0.0% 14.5%);
  --c-tertiary-text: hsl(0 0.0% 100.0%);
  --c-bg: hsl(0 0.0% 100.0%);
  --c-text: hsl(0 0.0% 25.5%);
  --c-surface: hsl(0 0.0% 96.1%);
  --c-surface-text: hsl(0 14.9% 9.2%);
  --c-elevated: hsl(0 0.0% 25.5%);
  --c-elevated-text: hsl(0 0.0% 100.0%);
  --c-warning: hsl(0 64.4% 50.4%);
  --c-warning-text: hsl(0 0.0% 100.0%);
  --c-border: hsl(210 9.9% 64.3%);

  
  --f-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --f-main: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --f-icon: "icomoon";
  --fs-base: 1rem;
  --lh-base: 1.688rem;

  
  --gap: 1.125rem;
  --row-max: 101.2rem;
  --scrollbar-width: calc(100vw - 100%);
  --row-max-dyn: min(var(--row-max), calc(100vw - var(--scrollbar-width)));
  --quickbar-height: 3.75rem;
  --shadow: 0 0.3125rem 0.625rem 0 hsl(0 0.0% 25.5% / 0.2);
  --focus-outline: 0.125rem solid hsl(0 0.0% 15.5%);
  --transition: 0.3s;

  
  --space-sm: clamp(1.875rem, calc(1.086rem + 2.632vw), 3.75rem);
  --space-sm-b: clamp(1.625rem, calc(1.414rem + 0.7018vw), 2.125rem);
  --space-md: clamp(3.75rem, calc(2.697rem + 3.509vw), 6.25rem);
  --space-md-b: clamp(2.125rem, calc(1.072rem + 3.509vw), 4.625rem);
  --space-lg: clamp(5.625rem, calc(4.046rem + 5.263vw), 9.375rem);
  --space-lg-b: clamp(4rem, calc(2.421rem + 5.263vw), 7.75rem);
  --space-xl: clamp(9.375rem, calc(8.059rem + 4.386vw), 12.5rem);
  --space-xl-b: clamp(7.75rem, calc(6.434rem + 4.386vw), 10.88rem);
}


/* ===== base ===== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-main);
  font-weight: 300;
  font-size: 100%;
  line-height: var(--lh-base);
  hyphens: manual;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { font-size: var(--fs-base); line-height: var(--lh-base); }
body:not(.js) * { transition: none !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--c-tertiary);
  text-rendering: optimizeLegibility;
  hyphens: auto;
  margin-bottom: var(--lh-base);
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) span:not(.w) { display: block; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) span:not(.br):not(.w) {
  font-weight: 300;
  letter-spacing: 0;
  font-size: clamp(1.062rem, calc(0.9572rem + 0.3509vw), 1.312rem);
  line-height: 1.4;
  margin-top: 0.375rem;
}
h1, .h1 { font-size: clamp(2rem, calc(1.632rem + 1.228vw), 2.875rem); }
h2, .h2 { font-size: clamp(1.875rem, calc(1.559rem + 1.053vw), 2.625rem); }
h3, .h3 { font-size: clamp(1.625rem, calc(1.414rem + 0.7018vw), 2.125rem); }
h4, .h4 { font-size: clamp(1.5rem, calc(1.395rem + 0.3509vw), 1.75rem); }
h5, .h5 { font-size: clamp(1.312rem, calc(1.207rem + 0.3509vw), 1.562rem); }
h6, .h6 { font-size: clamp(1.188rem, calc(1.109rem + 0.2632vw), 1.375rem); }

strong, b { font-weight: 600; }
small { font-size: .65em; }
a { color: inherit; overflow-wrap: break-word; }
a:hover, a:focus, a:active { color: var(--c-primary-hover); }
a img { border: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: var(--focus-outline); outline-offset: 0.125rem; }

ul, ol { list-style: none; }
main p, main ul, main ol, main dl, main table, main img, figure > a, figure > picture, .margin-bottom, .video-container, .cms-map {
  margin-bottom: var(--lh-base);
}
.no-margin-bottom, .box > :last-child { margin-bottom: 0; }

main ul:not(.unstyled-list) li, main ol:not(.unstyled-list) li { padding-left: 1.25rem; margin-bottom: 0.4375rem; }
main ul:not(.unstyled-list) li::before {
  content: "\e90e";
  font-family: var(--f-icon);
  display: inline-block;
  line-height: 1;
  text-indent: -1.25rem;
  transform: translateY(2px);
  -webkit-font-smoothing: antialiased;
}
main ul:not(.unstyled-list) ul { margin-left: 1rem; margin-bottom: 0; }
main ol:not(.unstyled-list) { counter-reset: item; }
main ol:not(.unstyled-list) li { counter-increment: item; }
main ol:not(.unstyled-list) li::before { content: counters(item, ".") ". "; display: inline-block; text-indent: -1.25rem; }
main ol:not(.unstyled-list) ol { margin-bottom: 0; }
@media (min-width: 47.5em) { ul.split, ol.split { display: grid; grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em)   { ul.split, ol.split { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 75em)   { ul.split, ol.split { grid-template-columns: repeat(4, 1fr); } }

main dl:not(.unstyled-list) dt, main dl:not(.unstyled-list) dd {
  display: block; background-color: hsl(0 0.0% 96.1% / 0.8); color: var(--c-surface-text); padding: 0.9375rem;
}
main dl:not(.unstyled-list) dt { padding-bottom: 0; font-weight: 400; }
main dl:not(.unstyled-list) dd { padding-top: 0; }
main dl:not(.unstyled-list) dd + dt { margin-top: 0.625rem; }
main dl:not(.unstyled-list) dd + dd { margin-top: -0.9375rem; }

main table { display: table; border-collapse: collapse; width: 100%; text-align: left; font-size: var(--fs-base); }
main table th, main table td { padding: var(--gap); vertical-align: top; }
main table tbody tr:not(:last-child) { border-bottom: 0.0625rem solid var(--c-border); }
@media (max-width: 39.9375em) { main table { display: block; overflow-x: auto; } main table td { min-width: 50vw; } }

hr, .hr { display: flex; background-color: var(--c-border); border: none; clear: both; height: 0.0625rem; margin: 1rem 0; flex-basis: 100%; }

img { vertical-align: bottom; height: auto; max-width: 100%; width: 100%; }
figure a, figure picture { display: block; }
figure a img, figure picture img { margin-bottom: 0; }
video { max-width: 100%; }
.video-container { aspect-ratio: 16 / 9; position: relative; }
.video-container video { width: 100%; height: 100%; object-fit: cover; }
.video-container.format-9-16 { aspect-ratio: 9 / 16; }
.video-container.format-1-1 { aspect-ratio: 1 / 1; }
.video-container.format-auto { aspect-ratio: auto; }

.btn, form.default button, form.default [type="submit"] {
  appearance: none;
  border: none;
  background-color: var(--c-primary);
  color: var(--c-primary-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font: 500 0.9375rem / var(--lh-base) var(--f-main);
  padding: 0.8125rem 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
}
.btn::before, form.default [type="submit"]::before { content: "\e906"; font-family: var(--f-icon); display: inline-block; line-height: 1; }
.btn:hover, form.default [type="submit"]:hover { background-color: var(--c-primary-hover); color: var(--c-primary-text); }
.btn:active, .btn.active { background-color: var(--c-primary-active); color: var(--c-primary-text); }
.btn:focus { background-color: hsl(151.2 59.5% 12.9%); color: var(--c-primary-text); }
.btn.btn-outline { background-color: transparent; color: var(--c-primary); outline: 0.0625rem solid var(--c-primary); outline-offset: -0.0625rem; }
.btn.btn-outline:hover { background-color: var(--c-primary); color: #fff; }
.btn.btn-secondary { background-color: var(--c-secondary); color: var(--c-secondary-text); }
.btn.btn-secondary:hover { background-color: hsl(101.86 87.8% 90.8%); }
.btn.btn-tertiary { background-color: var(--c-tertiary); color: var(--c-tertiary-text); }
.btn.btn-tertiary:hover { background-color: hsl(0 0.0% 4.5%); }
.btn:disabled, .btn.disabled { pointer-events: none; opacity: .5; }

.icon::before { font-family: var(--f-icon); display: inline-block; font-style: normal; font-variant: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
.icon-angle-left::before { content: "\e900"; }
.icon-angle-right::before { content: "\e909"; }
.icon-arrow-up::before { content: "\e907"; }
.icon-arrow-right::before { content: "\e906"; }
.icon-arrow-down::before { content: "\e905"; }
.icon-arrow-left::before { content: "\e904"; }
.icon-envelope::before { content: "\e901"; }
.icon-exclamation::before { content: "\e90b"; }
.icon-minus::before { content: "\e902"; }
.icon-plus::before { content: "\e903"; }
.icon-phone::before { content: "\e908"; }
.icon-times::before { content: "\e90a"; }
.icon-mic::before { content: "\e911"; }
.icon-social::before { content: "\e912"; }
.icon-beitrag-schreib::before { content: "\e913"; }
.icon-video::before, .icon-camera::before { content: "\e914"; }
.icon-beitrag-sprech::before { content: "\e915"; }
.icon-search::before { content: "\e90d"; }
.icon-check::before { content: "\e90e"; }
.icon-time::before { content: "\e90f"; }
.icon-extern::before { content: "\e910"; }
.icon-bubbles::before { content: "\e96c"; }
.icon-users::before { content: "\e972"; }
.icon-user-tie::before { content: "\e976"; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.hidden, [hidden] { display: none !important; }
.tab-btn {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0);
  padding: 2.6em; background-color: hsl(0 64.4% 50.4% / 0.9); color: var(--c-warning-text);
  font-size: 1.5rem; z-index: 2000; transition: all 300ms; text-decoration: none;
}
.tab-btn:focus { transform: translate(-50%, -50%) scale(1); }

.bg-color-surface { background-color: var(--c-surface); color: var(--c-surface-text); }
.bg-color-primary { background-color: var(--c-primary); color: var(--c-primary-text); }
.bg-color-secondary { background-color: var(--c-secondary); color: var(--c-secondary-text); }
.bg-color-tertiary { background-color: var(--c-tertiary); color: var(--c-tertiary-text); }

.padding-sm { padding-block: var(--space-sm) var(--space-sm-b); }
.padding-sm-top { padding-block-start: var(--space-sm); }
.padding-sm-bottom { padding-block-end: var(--space-sm-b); }
.padding-md { padding-block: var(--space-md) var(--space-md-b); }
.padding-md-top { padding-block-start: var(--space-md); }
.padding-md-bottom { padding-block-end: var(--space-md-b); }
.padding-lg { padding-block: var(--space-lg) var(--space-lg-b); }
.padding-lg-top { padding-block-start: var(--space-lg); }
.padding-lg-bottom { padding-block-end: var(--space-lg-b); }
.padding-xl { padding-block: var(--space-xl) var(--space-xl-b); }
.padding-xl-top { padding-block-start: var(--space-xl); }
.padding-xl-bottom { padding-block-end: var(--space-xl-b); }
.margin-sm { margin-block: var(--space-sm) var(--space-sm-b); }
.margin-sm-top { margin-block-start: var(--space-sm); }
.margin-sm-bottom { margin-block-end: var(--space-sm-b); }
.margin-md { margin-block: var(--space-md) var(--space-md-b); }
.margin-md-top { margin-block-start: var(--space-md); }
.margin-md-bottom { margin-block-end: var(--space-md-b); }
.margin-lg { margin-block: var(--space-lg) var(--space-lg-b); }
.margin-lg-top { margin-block-start: var(--space-lg); }
.margin-lg-bottom { margin-block-end: var(--space-lg-b); }
.margin-xl { margin-block: var(--space-xl) var(--space-xl-b); }
.margin-xl-top { margin-block-start: var(--space-xl); }
.margin-xl-bottom { margin-block-end: var(--space-xl-b); }
.margin-top-sr { margin-top: 0; }
@media (min-width: 30em) { .margin-top-sr { margin-top: 5.625rem; } }
@media (min-width: 62em) { .margin-top-sr { margin-top: 0 !important; } }


/* ===== grid ===== */

.row {
  display: flex; flex: 0 1 auto; flex-wrap: wrap; flex-direction: row;
  justify-content: flex-start; align-items: stretch;
  position: relative; width: 100%; max-width: var(--row-max); margin-inline: auto;
}
.row:not(.full-width) .row { margin-left: calc(-1 * var(--gap)); max-width: calc(100% + var(--gap) * 2); width: calc(100% + var(--gap) * 2); }
.row > .row { margin: 0; padding: 0; max-width: 100%; width: 100%; flex-basis: 100%; }
.row.full-width { max-width: none; }
.col { flex: 1 0 100%; max-width: 100%; width: 100%; padding-inline: var(--gap); box-sizing: border-box; }
.no-gutter, .no-gutter > .col { padding-inline: 0; }
.no-gap { gap: 0 !important; }
.row.stretch { align-items: stretch; }
.row.top { align-items: flex-start; }
.row.middle { align-items: center; }
.row.bottom { align-items: flex-end; }
.row.start { justify-content: flex-start; }
.row.center { justify-content: center; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
@media (max-width: 47.4375em) { .order.until-medium { order: -1; } }

@media (min-width: 101.25em) {
  .row.break-left, .row.break-right { max-width: calc(50vw + var(--row-max-dyn) / 2 - var(--scrollbar-width) / 2); }
  .row.break-right { margin-left: auto; margin-right: 0; justify-content: flex-start; }
  .row.break-left { margin-right: auto; margin-left: 0; justify-content: flex-end; }
}
.col.default-12 { max-width: 100%; flex-basis: 100%; }
@media (min-width: 101.25em) {
  .row.break-left > .col.default-12, .row.break-right > .col.default-12 { max-width: calc(var(--row-max-dyn) / 12 * 12); }
}
@media (min-width: 40em) {
  .col.small-2 { max-width: 16.66667%; flex-basis: 16.66667%; }
  .col.small-6 { max-width: 50.00000%; flex-basis: 50.00000%; }
  .col.small-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
}
@media (min-width: 101.25em) {
  .row.break-left > .col.small-2, .row.break-right > .col.small-2 { max-width: calc(var(--row-max-dyn) / 12 * 2); }
  .row.break-left > .col.small-6, .row.break-right > .col.small-6 { max-width: calc(var(--row-max-dyn) / 12 * 6); }
  .row.break-left > .col.small-10, .row.break-right > .col.small-10 { max-width: calc(var(--row-max-dyn) / 12 * 10); }
}
@media (min-width: 47.5em) {
  .col.medium-1 { max-width: 8.33333%; flex-basis: 8.33333%; }
  .col.medium-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
  .col.medium-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
  .col.medium-6 { max-width: 50.00000%; flex-basis: 50.00000%; }
  .col.medium-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
  .col.medium-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
  .col.medium-9 { max-width: 75.00000%; flex-basis: 75.00000%; }
  .col.medium-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
  .col.medium-11 { max-width: 91.66667%; flex-basis: 91.66667%; }
  .col.medium-12 { max-width: 100%; flex-basis: 100%; }
  .col.medium-prefix-0 { margin-left: 0; }
  .col.medium-prefix-2 { margin-left: 16.66667%; }
}
@media (min-width: 101.25em) {
  .row.break-left > .col.medium-1, .row.break-right > .col.medium-1 { max-width: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.medium-4, .row.break-right > .col.medium-4 { max-width: calc(var(--row-max-dyn) / 12 * 4); }
  .row.break-left > .col.medium-5, .row.break-right > .col.medium-5 { max-width: calc(var(--row-max-dyn) / 12 * 5); }
  .row.break-left > .col.medium-6, .row.break-right > .col.medium-6 { max-width: calc(var(--row-max-dyn) / 12 * 6); }
  .row.break-left > .col.medium-7, .row.break-right > .col.medium-7 { max-width: calc(var(--row-max-dyn) / 12 * 7); }
  .row.break-left > .col.medium-8, .row.break-right > .col.medium-8 { max-width: calc(var(--row-max-dyn) / 12 * 8); }
  .row.break-left > .col.medium-9, .row.break-right > .col.medium-9 { max-width: calc(var(--row-max-dyn) / 12 * 9); }
  .row.break-left > .col.medium-10, .row.break-right > .col.medium-10 { max-width: calc(var(--row-max-dyn) / 12 * 10); }
  .row.break-left > .col.medium-11, .row.break-right > .col.medium-11 { max-width: calc(var(--row-max-dyn) / 12 * 11); }
  .row.break-left > .col.medium-12, .row.break-right > .col.medium-12 { max-width: calc(var(--row-max-dyn) / 12 * 12); }
  .row.break-left > .col.medium-prefix-0, .row.break-right > .col.medium-prefix-0 { margin-left: calc(var(--row-max-dyn) / 12 * 0); }
  .row.break-left > .col.medium-prefix-2, .row.break-right > .col.medium-prefix-2 { margin-left: calc(var(--row-max-dyn) / 12 * 2); }
}
@media (min-width: 62em) {
  .col.large-2 { max-width: 16.66667%; flex-basis: 16.66667%; }
  .col.large-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
  .col.large-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
  .col.large-6 { max-width: 50.00000%; flex-basis: 50.00000%; }
  .col.large-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
  .col.large-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
  .col.large-9 { max-width: 75.00000%; flex-basis: 75.00000%; }
  .col.large-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
  .col.large-12 { max-width: 100%; flex-basis: 100%; }
  .col.large-prefix-0 { margin-left: 0; }
  .col.large-suffix-1 { margin-right: 8.33333%; }
  .col.large-prefix-3 { margin-left: 25.00000%; }
}
@media (min-width: 101.25em) {
  .row.break-left > .col.large-2, .row.break-right > .col.large-2 { max-width: calc(var(--row-max-dyn) / 12 * 2); }
  .row.break-left > .col.large-4, .row.break-right > .col.large-4 { max-width: calc(var(--row-max-dyn) / 12 * 4); }
  .row.break-left > .col.large-5, .row.break-right > .col.large-5 { max-width: calc(var(--row-max-dyn) / 12 * 5); }
  .row.break-left > .col.large-6, .row.break-right > .col.large-6 { max-width: calc(var(--row-max-dyn) / 12 * 6); }
  .row.break-left > .col.large-7, .row.break-right > .col.large-7 { max-width: calc(var(--row-max-dyn) / 12 * 7); }
  .row.break-left > .col.large-8, .row.break-right > .col.large-8 { max-width: calc(var(--row-max-dyn) / 12 * 8); }
  .row.break-left > .col.large-9, .row.break-right > .col.large-9 { max-width: calc(var(--row-max-dyn) / 12 * 9); }
  .row.break-left > .col.large-10, .row.break-right > .col.large-10 { max-width: calc(var(--row-max-dyn) / 12 * 10); }
  .row.break-left > .col.large-12, .row.break-right > .col.large-12 { max-width: calc(var(--row-max-dyn) / 12 * 12); }
  .row.break-left > .col.large-prefix-0, .row.break-right > .col.large-prefix-0 { margin-left: calc(var(--row-max-dyn) / 12 * 0); }
  .row.break-left > .col.large-suffix-1, .row.break-right > .col.large-suffix-1 { margin-right: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.large-prefix-3, .row.break-right > .col.large-prefix-3 { margin-left: calc(var(--row-max-dyn) / 12 * 3); }
}
@media (min-width: 75em) {
  .col.giant-1 { max-width: 8.33333%; flex-basis: 8.33333%; }
  .col.giant-3 { max-width: 25.00000%; flex-basis: 25.00000%; }
  .col.giant-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
  .col.giant-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
  .col.giant-6 { max-width: 50.00000%; flex-basis: 50.00000%; }
  .col.giant-7 { max-width: 58.33333%; flex-basis: 58.33333%; }
  .col.giant-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
  .col.giant-9 { max-width: 75.00000%; flex-basis: 75.00000%; }
  .col.giant-auto { max-width: 100%; flex-basis: 0; }
  .col.giant-prefix-0 { margin-left: 0; }
  .col.giant-prefix-1 { margin-left: 8.33333%; }
  .col.giant-suffix-1 { margin-right: 8.33333%; }
  .col.giant-prefix-6 { margin-left: 50.00000%; }
  .col.giant-suffix-6 { margin-right: 50.00000%; }
}
@media (min-width: 101.25em) {
  .row.break-left > .col.giant-1, .row.break-right > .col.giant-1 { max-width: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.giant-3, .row.break-right > .col.giant-3 { max-width: calc(var(--row-max-dyn) / 12 * 3); }
  .row.break-left > .col.giant-4, .row.break-right > .col.giant-4 { max-width: calc(var(--row-max-dyn) / 12 * 4); }
  .row.break-left > .col.giant-5, .row.break-right > .col.giant-5 { max-width: calc(var(--row-max-dyn) / 12 * 5); }
  .row.break-left > .col.giant-6, .row.break-right > .col.giant-6 { max-width: calc(var(--row-max-dyn) / 12 * 6); }
  .row.break-left > .col.giant-7, .row.break-right > .col.giant-7 { max-width: calc(var(--row-max-dyn) / 12 * 7); }
  .row.break-left > .col.giant-8, .row.break-right > .col.giant-8 { max-width: calc(var(--row-max-dyn) / 12 * 8); }
  .row.break-left > .col.giant-9, .row.break-right > .col.giant-9 { max-width: calc(var(--row-max-dyn) / 12 * 9); }
  .row.break-left > .col.giant-prefix-0, .row.break-right > .col.giant-prefix-0 { margin-left: calc(var(--row-max-dyn) / 12 * 0); }
  .row.break-left > .col.giant-prefix-1, .row.break-right > .col.giant-prefix-1 { margin-left: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.giant-suffix-1, .row.break-right > .col.giant-suffix-1 { margin-right: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.giant-prefix-6, .row.break-right > .col.giant-prefix-6 { margin-left: calc(var(--row-max-dyn) / 12 * 6); }
  .row.break-left > .col.giant-suffix-6, .row.break-right > .col.giant-suffix-6 { margin-right: calc(var(--row-max-dyn) / 12 * 6); }
}
@media (min-width: 85.25em) {
  .col.huge-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
  .col.huge-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
  .col.huge-6 { max-width: 50.00000%; flex-basis: 50.00000%; }
  .col.huge-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
  .col.huge-9 { max-width: 75.00000%; flex-basis: 75.00000%; }
  .col.huge-10 { max-width: 83.33333%; flex-basis: 83.33333%; }
  .col.huge-auto { max-width: 100%; flex-basis: 0; }
  .col.huge-suffix-0 { margin-right: 0; }
  .col.huge-prefix-1 { margin-left: 8.33333%; }
  .col.huge-suffix-1 { margin-right: 8.33333%; }
  .col.huge-prefix-4 { margin-left: 33.33333%; }
}
@media (min-width: 101.25em) {
  .row.break-left > .col.huge-4, .row.break-right > .col.huge-4 { max-width: calc(var(--row-max-dyn) / 12 * 4); }
  .row.break-left > .col.huge-5, .row.break-right > .col.huge-5 { max-width: calc(var(--row-max-dyn) / 12 * 5); }
  .row.break-left > .col.huge-6, .row.break-right > .col.huge-6 { max-width: calc(var(--row-max-dyn) / 12 * 6); }
  .row.break-left > .col.huge-8, .row.break-right > .col.huge-8 { max-width: calc(var(--row-max-dyn) / 12 * 8); }
  .row.break-left > .col.huge-9, .row.break-right > .col.huge-9 { max-width: calc(var(--row-max-dyn) / 12 * 9); }
  .row.break-left > .col.huge-10, .row.break-right > .col.huge-10 { max-width: calc(var(--row-max-dyn) / 12 * 10); }
  .row.break-left > .col.huge-suffix-0, .row.break-right > .col.huge-suffix-0 { margin-right: calc(var(--row-max-dyn) / 12 * 0); }
  .row.break-left > .col.huge-prefix-1, .row.break-right > .col.huge-prefix-1 { margin-left: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.huge-suffix-1, .row.break-right > .col.huge-suffix-1 { margin-right: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.huge-prefix-4, .row.break-right > .col.huge-prefix-4 { margin-left: calc(var(--row-max-dyn) / 12 * 4); }
}
@media (min-width: 95em) {
  .col.full-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
  .col.full-5 { max-width: 41.66667%; flex-basis: 41.66667%; }
  .col.full-6 { max-width: 50.00000%; flex-basis: 50.00000%; }
  .col.full-8 { max-width: 66.66667%; flex-basis: 66.66667%; }
  .col.full-prefix-1 { margin-left: 8.33333%; }
  .col.full-suffix-1 { margin-right: 8.33333%; }
}
@media (min-width: 101.25em) {
  .row.break-left > .col.full-4, .row.break-right > .col.full-4 { max-width: calc(var(--row-max-dyn) / 12 * 4); }
  .row.break-left > .col.full-5, .row.break-right > .col.full-5 { max-width: calc(var(--row-max-dyn) / 12 * 5); }
  .row.break-left > .col.full-6, .row.break-right > .col.full-6 { max-width: calc(var(--row-max-dyn) / 12 * 6); }
  .row.break-left > .col.full-8, .row.break-right > .col.full-8 { max-width: calc(var(--row-max-dyn) / 12 * 8); }
  .row.break-left > .col.full-prefix-1, .row.break-right > .col.full-prefix-1 { margin-left: calc(var(--row-max-dyn) / 12 * 1); }
  .row.break-left > .col.full-suffix-1, .row.break-right > .col.full-suffix-1 { margin-right: calc(var(--row-max-dyn) / 12 * 1); }
}
@media (min-width: 101.25em) {
  .col.cut-4 { max-width: 33.33333%; flex-basis: 33.33333%; }
  .col.cut-6 { max-width: 50.00000%; flex-basis: 50.00000%; }
  .col.cut-auto { max-width: 100%; flex-basis: 0; }
}
@media (min-width: 101.25em) {
  .row.break-left > .col.cut-4, .row.break-right > .col.cut-4 { max-width: calc(var(--row-max-dyn) / 12 * 4); }
  .row.break-left > .col.cut-6, .row.break-right > .col.cut-6 { max-width: calc(var(--row-max-dyn) / 12 * 6); }
}


/* ===== nav ===== */

#quickbar {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--quickbar-height);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gap);
  background-color: var(--c-bg); color: var(--c-primary); fill: var(--c-primary);
  z-index: 1000; transition: box-shadow var(--transition);
}
body.scrolled #quickbar { box-shadow: var(--shadow); }
#quickbar .branding { display: block; padding: 0.3125rem; transition: opacity var(--transition); }
#quickbar .branding:hover, #quickbar .branding:focus { opacity: .75; }
#quickbar .branding img { height: 2.625rem; width: auto; display: block; }
.nav-toggle {
  position: relative; display: block; width: 2rem; height: 2rem;
  border: 0; background: none; color: var(--c-primary); cursor: pointer;
}
.nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-toggle svg { width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.nav-toggle svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1), stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
.nav-toggle svg path:first-child { stroke-dasharray: 11 63; stroke-dashoffset: 0; }
body.nav-open .nav-toggle svg { transform: rotate(-45deg); }
body.nav-open .nav-toggle svg path:first-child { stroke-dasharray: 16 300; stroke-dashoffset: -34.42; }

.nav-backdrop {
  position: fixed; inset: var(--quickbar-height) 0 0 0; background: var(--c-text); opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition); z-index: 999;
}
body.nav-open .nav-backdrop { opacity: .9; visibility: visible; }

#navigation { position: fixed; right: 0; max-width: 100%; background-color: var(--c-bg); z-index: 1001; }
body.js #navigation, body.js .sub { transition: transform var(--transition) ease, opacity var(--transition) ease, visibility var(--transition) ease; }
#navigation nav ul { width: 100%; }
#navigation .navi > li > a, #navigation .navi > li > .sub-toggle, #navigation .sub a {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 1em var(--gap); text-decoration: none; border: 0;
  background-color: var(--c-bg); color: var(--c-text);
  font: inherit; line-height: var(--lh-base);
  transition: background-color var(--transition), color var(--transition);
}
#navigation .navi a:hover, #navigation .navi a:focus, #navigation .navi .sub-toggle:hover, #navigation .navi .sub-toggle:focus,
#navigation .navi a.active, #navigation .navi li.active > .sub-toggle, #navigation .navi li.active > a { color: var(--c-primary); }
#navigation .navi .sub-toggle { display: flex; justify-content: space-between; align-items: center; }
#navigation .navi .sub-toggle::after { content: "\e909"; font-family: var(--f-icon); line-height: 1; margin-left: .5em; display: inline-block; transition: transform var(--transition); }
#navigation .navi .sub-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
#navigation .navi .sub { display: none; }
#navigation .navi .sub.open { display: block; }
.contrast-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border: 0; background: none; cursor: pointer; padding: 0; color: var(--c-text);
  transition: color var(--transition);
}
.contrast-toggle svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.contrast-toggle:hover, .contrast-toggle:focus, .contrast-toggle.active { color: var(--c-primary); }
html.contrast-intensify a, html.contrast-intensify button, html.contrast-intensify [role="button"] { text-decoration: underline !important; }
html.contrast-intensify a:hover, html.contrast-intensify button:hover { text-decoration: none !important; }

.contact-wrapper .contact-data { background: var(--c-surface); padding: var(--gap); display: flex; flex-direction: column; }
.contact-wrapper .contact-data li { display: flex; gap: 0.3125rem; line-height: var(--lh-base); align-items: center; }
.contact-wrapper .contact-data li::before { color: var(--c-text); }
.contact-wrapper .contact-data dl { display: flex; flex-direction: column; }
.contact-wrapper .contact-data dl dt { font-weight: 500; }
html[lang="de"] dl.opening-hours dd::after { content: " Uhr"; }
.contact-wrapper a { color: inherit; }

@media (max-width: 61.9375em) {
  #navigation { width: clamp(15rem, 50%, 25rem); top: var(--quickbar-height); bottom: 0; overflow: hidden; transform: translateX(100%); visibility: hidden; }
  body.nav-open #navigation { transform: none; visibility: visible; }
  #navigation nav { height: calc(100dvh - var(--quickbar-height)); overflow-y: auto; }
  #navigation .row { position: static; }
  #navigation .row .col { padding: 0; max-width: 100%; flex-basis: 100%; }
  #navigation .branding-col, #navigation .contrast-item { display: none; }
  #navigation .navi > li > a, #navigation .navi > li > .sub-toggle, #navigation .sub a { border-bottom: 0.0625rem solid var(--c-surface); }
  #navigation .sub a { padding-left: calc(var(--gap) * 2); background-color: hsl(0 0.0% 97.0%); }
  .contact-wrapper .contact-data { order: 2; }
  #navigation nav .navi-col { display: flex; flex-direction: column; }
}
@media (max-width: 39.9375em) { #navigation { width: 100%; } }

@media (min-width: 62em) {
  #quickbar, .nav-backdrop { display: none; }
  #navigation { top: 0; width: 100%; z-index: 998; }
  body.scrolled #navigation { box-shadow: var(--shadow); }
  #navigation .branding { display: block; transition: opacity var(--transition); }
  #navigation .branding:hover, #navigation .branding:focus { opacity: .75; }
  #navigation .branding img { transition: max-width var(--transition); }
  #navigation .navi-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  #navigation nav ul.navi {
    display: flex; flex-wrap: wrap; justify-content: space-between; width: calc(100% - 2.5rem);
    padding: clamp(1.125rem, calc(0.8092rem + 1.053vw), 1.875rem) 0; padding-right: clamp(0.25rem, calc(-0.5921rem + 2.807vw), 2.25rem); transition: padding var(--transition);
  }
  body.scrolled #navigation nav ul.navi { padding-block: clamp(1rem, calc(0.8947rem + 0.3509vw), 1.25rem); }
  #navigation .navi > li > a, #navigation .navi > li > .sub-toggle { padding: 0; background: none; white-space: nowrap; }
  #navigation .navi > li.has-sub { position: relative; }
  #navigation .navi .sub-toggle::after { transform: rotate(90deg); }
  #navigation .navi .sub-toggle[aria-expanded="true"]::after { transform: rotate(-90deg); }
  #navigation .navi a.active, #navigation .navi li.active > .sub-toggle, #navigation .navi li.active > a { font-weight: 600; }
  #navigation .navi .sub {
    display: grid; gap: 0.625rem; padding: 0.625rem;
    position: absolute; top: 100%; right: 0; width: auto;
    background-color: var(--c-bg); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; z-index: 1;
  }
  #navigation .navi .sub.open { display: grid; opacity: 1; visibility: visible; }
  #navigation .navi .sub a { padding: 1.5em var(--gap); white-space: nowrap; background-color: hsl(0 0.0% 98.0%); }
  #navigation .navi .sub a:hover, #navigation .navi .sub a:focus { background-color: var(--c-bg); }
  #navigation .navi .sub:has(> :nth-child(n+4)) { grid-template-columns: min-content min-content; }
  #navigation .navi .sub:has(> :nth-child(n+4)):has(> :last-child:nth-child(odd)) > li:first-child { grid-column: 1 / -1; text-align: center; }
  .contact-wrapper .contact-data {
    flex-direction: row; justify-content: space-between; position: relative;
    padding: clamp(1rem, calc(0.8526rem + 0.4912vw), 1.35rem) 0; padding-left: var(--gap);
  }
  .contact-wrapper .contact-data::before {
    content: ""; position: absolute; top: 0; right: 0; transform: translateX(100%);
    background: var(--c-surface); height: 100%; width: clamp(25rem, calc(18.42rem + 21.93vw), 40.62rem);
  }
  .contact-wrapper .contact-data dl { flex-direction: row; gap: 0.3125rem; }
}
@media (min-width: 62em) and (max-width: 85.1875em) { .branding-col { padding-right: 0; } }
@media (min-width: 75em) { body.scrolled #navigation .branding img { max-width: 12.5rem; } }
@media (min-width: 85.25em) {
  .navi-col { padding-right: 0; }
  .contact-wrapper .contact-data { padding: calc(var(--gap) * 2) 0 1.875rem 0; justify-content: flex-end; gap: clamp(1.125rem, calc(0.7829rem + 1.14vw), 1.938rem); transition: padding var(--transition); }
  body.scrolled .contact-wrapper .contact-data { padding: clamp(1rem, calc(0.8947rem + 0.3509vw), 1.25rem) 0; }
}


/* ===== header ===== */

#header { position: relative; width: 100%; margin-bottom: clamp(9.375rem, calc(8.059rem + 4.386vw), 12.5rem); }
@media (max-width: 61.9375em) { #header { margin-top: var(--quickbar-height); } body:not(.index) #header { margin-bottom: clamp(3.125rem, calc(1.809rem + 4.386vw), 6.25rem); } }
@media (min-width: 62em) { #header { margin-top: clamp(6.25rem, calc(4.145rem + 7.018vw), 11.25rem); } body:not(.index) #header { margin-bottom: clamp(6.25rem, calc(4.934rem + 4.386vw), 9.375rem); } }

@media (min-width: 101.25em) { .row.break-left > .col.giant-auto { max-width: 100%; flex-basis: 0; flex-grow: 1; } }
@media (min-width: 62em) { #header .header-row { height: 100%; position: absolute; } #header .header-row .col { height: 100%; } }
body:not(.index) #header .header-row { position: relative !important; }
body:not(.index) #header .header-row figure { height: clamp(12.5rem, calc(9.342rem + 10.53vw), 20rem); }
#header .header-img { position: relative; height: 100%; z-index: -1; margin: 0; }
#header .header-img picture { height: 100%; margin: 0; }
#header .header-img img { height: 100%; object-fit: cover; object-position: center; }
body:not(.index) #header .header-img img { object-position: center 38%; }   
#header .header-img video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #dfe9e2 url("../img/hero-bremen-poster.jpg") center / cover no-repeat; }
@media (max-width: 61.9375em) { #header .header-img video { aspect-ratio: 16 / 9; } }
#header .header-img::before {
  content: ""; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
  background: linear-gradient(180deg, hsl(0 0.0% 100.0% / 0) 0%, var(--c-bg) 50%, var(--c-bg) 100%);
}
@media (min-width: 75em) { #header .header-img::before { height: 60%; } }

body:not(.index) #header .header-img::before { height: 75%; background: linear-gradient(180deg, hsl(0 0.0% 100.0% / 0) 0%, hsl(0 0.0% 100.0% / 0.55) 45%, var(--c-bg) 100%); }
@media (min-width: 40em) {
  #header .header-img::after {
    content: ""; z-index: 1; position: absolute; bottom: 0; right: 0; height: 100%; width: clamp(6.25rem, calc(4.934rem + 4.386vw), 9.375rem);
    background: linear-gradient(to right, hsl(0 0.0% 100.0% / 0) 0%, var(--c-bg) 100%);
  }
}

#header .sm-list { width: 100%; display: flex; gap: clamp(0.625rem, calc(0.4671rem + 0.5263vw), 1rem); align-items: center; justify-content: center; margin: var(--gap) 0; position: relative; z-index: 2; }
@media (min-width: 40em) { #header .sm-list { flex-direction: column; } body.index #header .sm-list { margin-top: 3.75rem; } }
#header .sm-list li { max-width: 1.562rem; }
#header .sm-list a { transition: opacity var(--transition); display: block; }
#header .sm-list a:hover, #header .sm-list a:focus { opacity: .75; }

@media (min-width: 85.25em) { #header .claim-col { padding-left: 0; } }
@media (max-width: 39.9375em) { #header .claim-col { display: flex; flex-direction: column; justify-content: center; align-items: center; } #header .claim { text-align: center; } }
#header .claim { font-family: var(--f-display); font-size: clamp(2.125rem, calc(1.599rem + 1.754vw), 3.375rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin-bottom: var(--gap); color: var(--c-tertiary); }
#header .claim h1 { font: inherit; color: inherit; margin: 0; hyphens: manual; }
@media (min-width: 62em) { #header .claim { padding-top: clamp(15.62rem, calc(7.572rem + 26.84vw), 34.75rem); } }
body:not(.index) #header .claim { padding-top: clamp(12.5rem, calc(11.18rem + 4.386vw), 15.62rem); }
#header .claim span:not(.w) { display: block; font-weight: 300; letter-spacing: 0; font-size: clamp(1.188rem, calc(1.056rem + 0.4386vw), 1.5rem); line-height: 1.45; margin-top: 0.5rem; color: var(--c-text); }
@media (max-width: 61.9375em) { #header .claim-col .btn { margin-bottom: var(--gap); } }

#header .teaser { position: relative; display: block; color: var(--c-primary-text); height: clamp(21.88rem, calc(19.9rem + 6.579vw), 26.56rem); text-decoration: none; overflow: hidden; }
@media (max-width: 47.4375em) { #header .teaser { height: clamp(15.62rem, calc(14.31rem + 4.386vw), 18.75rem); margin-bottom: 1.125rem; } }
#header .teaser figure { position: absolute; z-index: -1; inset: 0; height: 100%; width: 100%; margin: 0; overflow: hidden; }
#header .teaser figure picture, #header .teaser figure img { height: 100%; width: 100%; object-fit: cover; transition: var(--transition); margin: 0; }
#header .teaser figure::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .7; transition: var(--transition);
  background: linear-gradient(180deg, #228656 0%, #155335 30%, #002a16 100%);
}
#header .teaser:first-of-type figure img { object-position: 30%; }
#header .teaser:hover figure::before, #header .teaser:focus figure::before { opacity: .8; }
#header .teaser figure picture { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
#header .teaser:hover figure picture, #header .teaser:focus figure picture { transform: scale(1.06); }
#header .teaser .text { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 100%; padding: clamp(1.125rem, calc(0.6513rem + 1.579vw), 2.25rem); }
#header .teaser .title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, calc(1.092rem + 0.5263vw), 1.625rem); margin-bottom: var(--gap); line-height: 1.2; }
#header .teaser p { margin: 0; line-height: var(--lh-base); }


/* ===== components ===== */

main { display: block; overflow: hidden; overflow: clip; } 
main p a, main ol a, main ul a, main dl a, main table a { color: var(--c-primary); }
.box { padding: var(--gap); }
.box-shadow { box-shadow: var(--shadow); }
.align-center { text-align: center; }

main .section figure { height: 100%; margin: 0; }
main .section figure * { margin-bottom: 0; height: 100%; object-fit: cover; object-position: top; }
main .section figure a { display: block !important; }
main .section figure.flip-img img { transform: scale(-1, 1); }
main .section figure video { display: block; width: 100%; background: var(--c-surface); }   
main .section figure.position img { object-position: 66% 0; }
@media (max-width: 47.4375em) {
  body:not(.ueber-uns) main .section figure { max-height: clamp(15.62rem, calc(12.99rem + 8.772vw), 21.88rem); }
  main .section.single .inner, main .section.double .inner { padding-block: var(--gap) !important; }
  main .section.double .inner .row { padding-block: 0 !important; }
}
body.blog main .section.single .col div:has(figure) { height: 100%; }
main .section.double { position: relative; }
main .section.double .inner { position: relative; }
main .section.double .inner::before { content: ""; position: absolute; top: 0; left: calc(-1 * var(--gap)); width: calc(100% + var(--gap) * 2); height: 100%; background: var(--c-bg); z-index: -1; }
@media (min-width: 47.5em) {
  main .section.double .bg-img-row { position: absolute; z-index: -1; height: 100%; inset: 0; }
  main .section.double .bg-img-row * { height: 100%; }
}
@media (min-width: 75em) {
  main .section.double .inner.left::before { width: calc(100% + var(--gap) * 2); left: -1.125rem; }
  main .section.double .inner.right::before { width: calc(100% + var(--gap) * 2); right: -1.125rem; left: auto; }
}
@media (min-width: 85.25em) {
  main .section.double .inner.left::before { width: calc(100% + (100% / 12) + var(--gap) * 2); left: calc(-1 * (100% / 12)); }
  main .section.double .inner.right::before { width: calc(100% + (100% / 12)); right: calc(-1 * (100% / 12)); }
}
body.ueber-uns main .section.double .bg-img-row figure * { object-position: top; }
body.studio-buchen main .section.double .bg-img-row figure * { object-position: top left; }
body.social-recruiting main .section.double .bg-img-row figure img { object-position: left top; }   
body.social-media-marketing-loesungen-in-der-uebersicht main .section.double .bg-img-row figure video { object-position: center 62%; }   

@media (max-width: 47.4375em) { main .leistungen-section .title-col { text-align: center; } }
main .leistungen-section .leistungen { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; padding-bottom: 1.875rem; }
main .leistungen-section .leistungen::before { font-size: clamp(2.812rem, calc(2.418rem + 1.316vw), 3.75rem); margin-bottom: 0.625rem; margin-top: 0.25rem; color: var(--c-tertiary); }
main .leistungen-section .leistungen h3 { margin-bottom: var(--lh-base); }
main .leistungen-section .leistungen p { color: var(--c-text); }
@media (min-width: 62em) {
  main .leistungen-section .leistungen { grid-template-columns: max-content 1fr; column-gap: clamp(0.625rem, calc(0.2039rem + 1.404vw), 1.625rem); justify-items: start; text-align: start; align-items: start; }
  main .leistungen-section .leistungen::before { grid-row: 1 / span 2; }
}

main .tarif-section { position: relative; }
main .tarif-section .tarif {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  height: 100%; position: relative; text-decoration: none; color: inherit;
  background: var(--c-bg); border-bottom: 0.25rem solid var(--c-primary); box-shadow: var(--shadow);
}
main .tarif-section .tarif::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: var(--c-primary); transition: var(--transition); z-index: 0; }
main .tarif-section .tarif .title { background: var(--c-surface); width: 100%; display: flex; position: relative; margin-bottom: 1.5rem; }
main .tarif-section .tarif .title::before {
  content: ""; display: block; position: absolute; left: 1.25rem; height: 100%; width: clamp(6.875rem, calc(6.349rem + 1.754vw), 8.125rem);
  background: url("../img/svg/logo-detail.svg") center / contain no-repeat; transform: scale(1.15) translateY(-0.3125rem);
}
main .tarif-section .tarif .title::after {
  position: absolute; top: 50%; left: clamp(3.75rem, calc(3.487rem + 0.8772vw), 4.375rem); transform: translateY(-50%); z-index: 3;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.625rem, calc(1.309rem + 1.053vw), 2.375rem); color: var(--c-primary-text); text-align: center;
}
main .tarif-section .tarif.basic .title::after { content: "S"; }
main .tarif-section .tarif.premium .title::after { content: "M"; }
main .tarif-section .tarif.ultimate .title::after { content: "L"; }
main .tarif-section .tarif .title p { font-size: clamp(1.5rem, calc(1.237rem + 0.8772vw), 2.125rem); font-family: var(--f-display); font-weight: 700; line-height: 1.2; margin-bottom: 0; padding: 1.25rem; padding-left: clamp(7.5rem, calc(6.711rem + 2.632vw), 9.375rem); color: var(--c-tertiary); }
main .tarif-section .tarif .title p span { display: block; font-size: var(--fs-base); font-family: var(--f-main); font-weight: 300; line-height: var(--lh-base); color: var(--c-text); }
main .tarif-section .tarif ul { width: 100%; gap: 0 1.125rem; padding: 1.125rem; text-align: center; }
@media (min-width: 75em) { main .tarif-section .tarif ul { display: grid; grid-template-columns: 1fr 1fr; text-align: start; } }
main .tarif-section .tarif .indicator { transition: var(--transition); position: relative; z-index: 2; color: var(--c-primary); margin: 0; }
main .tarif-section .tarif:hover .indicator, main .tarif-section .tarif:focus .indicator { color: var(--c-bg); }
main .tarif-section .tarif:hover::before, main .tarif-section .tarif:focus::before { height: 5rem; }
main .tarif-section > figure { position: absolute; bottom: 0; left: 0; z-index: -1; margin-bottom: 0; width: 100%; height: auto; }
@media (min-width: 62em) { main .tarif-section > figure { height: 100%; } }
main .tarif-section > figure * { height: 100%; margin-bottom: 0; }
main .tarif-section > figure img { object-position: left center; object-fit: cover; }

.partner-marquee { position: relative; margin: 0 0 var(--lh-base); }
.partner-viewport { overflow: hidden; padding: 0.875rem 0; }
.partner-marquee.is-live .partner-viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partner-track { display: flex; flex-wrap: wrap; gap: 1.125rem; margin: 0; padding: 0; justify-content: center; }
.partner-marquee.is-live .partner-track { flex-wrap: nowrap; width: max-content; will-change: transform; }
.partner-marquee.is-live { cursor: grab; touch-action: pan-y; }
.partner-marquee.is-dragging { cursor: grabbing; }
.partner-item { flex: 0 0 auto; padding: 0 !important; margin: 0 !important; }
.partner-item figure { width: 9.375rem; height: 9.375rem; margin: 0; background: #fff; border: 0.0625rem solid var(--c-border); display: grid; place-items: center; opacity: .62; transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease; outline: none; }
.partner-item figure img { width: 100%; height: 100%; object-fit: contain; margin: 0; padding: 0.625rem; }
.partner-item figure:hover, .partner-item figure:focus-visible, .partner-item.is-hover figure { opacity: 1; transform: scale(1.06); box-shadow: 0 0.625rem 1.75rem -0.625rem rgba(0,0,0,.35); z-index: 1; position: relative; }
.partner-item figure:focus-visible { box-shadow: 0 0 0 0.1875rem var(--c-secondary); }
.partner-hint { margin: 0.5rem 0 0; font-size: 0.7812rem; color: hsl(0 0.0% 25.5% / 0.65); }
.partner-marquee:not(.is-live) .partner-hint { display: none; }
@media (max-width: 47.4375em) { .partner-item figure { width: 7.5rem; height: 7.5rem; } }

a.lightbox-zoom-image, .lightbox-zoom-image > a, .modalGallery a { display: table; position: relative; text-decoration: none; width: 100%; }
a.lightbox-zoom-image::before, .lightbox-zoom-image > a::before, .modalGallery a::before {
  content: "\e90d"; font-family: var(--f-icon); pointer-events: none;
  position: absolute; top: 0; right: 0; z-index: 1; display: block; width: 2em; height: 2em; line-height: 1.8;
  font-size: 2rem; text-align: center; color: hsl(0 0.0% 100.0% / 0.75); transition: var(--transition);
}
a.lightbox-zoom-image::after, .lightbox-zoom-image > a::after, .modalGallery a::after { content: ""; position: absolute; inset: 0; opacity: 0; background: var(--c-tertiary); pointer-events: none; transition: var(--transition); }
a.lightbox-zoom-image:hover::before, .lightbox-zoom-image > a:hover::before, .modalGallery a:hover::before { top: 50%; right: 50%; transform: translate(50%, -50%); font-size: 3rem; width: 1.5em; height: 1.5em; line-height: 1.5; }
a.lightbox-zoom-image:hover::after, .lightbox-zoom-image > a:hover::after, .modalGallery a:hover::after { opacity: .5; }
.lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .8); padding: var(--gap); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; height: auto; box-shadow: var(--shadow); }
.lightbox button { position: absolute; border: 0; cursor: pointer; background: rgba(0, 0, 0, .5); color: #fff; font-size: 1.5rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }
.lightbox .lb-close { top: var(--gap); right: var(--gap); }
.lightbox .lb-prev { left: var(--gap); top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: var(--gap); top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev:only-of-type, .lightbox .lb-next:only-of-type { display: none; }

.cms-gallery .row { row-gap: calc(var(--gap) * 2); }
.cms-gallery-image img { width: 100%; height: 100%; object-fit: cover; }

body.blog main .row.blog-posts .col { margin-bottom: calc(var(--gap) * 2); }
body.blog main .box { border-bottom: 0.25rem solid var(--c-primary); height: 100%; }
body.blog main .box > a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: var(--gap); text-decoration: none; color: inherit; }
body.blog main .box > a * { margin-bottom: 0; }
body.blog main .box > a img { height: 15.62rem; object-fit: cover; }
body.blog main .box .blog-post-categories { width: 100%; gap: 0 1.125rem; padding: 1.125rem; text-align: center; }
@media (min-width: 75em) { body.blog main .box .blog-post-categories { text-align: start; display: grid; grid-template-columns: 1fr 1fr; } }

.faq-container { margin-bottom: var(--lh-base); }
.faq-question {
  position: relative; width: 100%; display: block; cursor: pointer; text-align: left;
  padding: 1rem 3rem 1rem 1.2rem; border: 0; font: inherit; color: var(--c-surface-text);
  background: var(--c-surface); transition: filter .3s ease-in-out;
}
.faq-question:hover, .faq-question:focus { filter: contrast(.9); }
.faq-question-heading { margin: 0; font-size: 1rem; line-height: var(--lh-base); }
.faq-question { font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; line-height: var(--lh-base); }
.faq-question::before, .faq-question::after { content: ""; position: absolute; right: 1.2rem; top: 50%; width: 20px; height: 2px; background: var(--c-surface-text); transition: transform .3s ease-in-out; }
.faq-question::before { transform: translateY(-50%); }
.faq-question::after { transform: translateY(-50%) rotate(90deg); }
.faq-question[aria-expanded="true"]::after { transform: translateY(-50%) rotate(0); }
.faq-answer-wrapper { display: none; padding: var(--gap) 1.2rem 0; }
.faq-answer-wrapper.open { display: block; }
.faq-answer-wrapper > :last-child { margin-bottom: 0; }

.social-recruiting table { width: 100%; border-collapse: collapse; border: 1px solid #daddda; }
.social-recruiting table th, .social-recruiting table td { padding: 15px; text-align: left; border: 1px solid #cbcbcb; }
.social-recruiting table th { background-color: #ececec; font-weight: bold; }
.social-recruiting-leistungen .leistung { box-shadow: #b6b6b6 0 2px 12px; margin: 0.625rem; padding: 1.25rem; }
.social-recruiting li { margin-bottom: 0.625rem; }
.social-recruiting .flex { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
@media (min-width: 47.5em) { .social-recruiting .flex { flex-direction: row; } }
.sticky { position: sticky; }

form.default { width: 100%; padding-bottom: var(--lh-base); }
form.default ::placeholder { color: hsl(0 0.0% 25.5% / 0.5); }
form.default label, form.default fieldset, form.default legend { color: inherit; padding: 1rem 0 .6rem; position: relative; clear: both; display: inline-flex; align-items: baseline; }
form.default fieldset { border: none; display: block; }
form.default legend { margin: -2rem 0; }
form.default .legend { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.625rem, calc(1.414rem + 0.7018vw), 2.125rem); color: var(--c-tertiary); line-height: 1.2; margin-top: 2rem; margin-bottom: var(--lh-base); }
form.default small { color: var(--c-warning); line-height: 1rem; display: inline-block; font-size: 0; }
form.default small::before { content: "(Pflichtfeld)"; font-size: 0.875rem; padding-left: 0.375rem; }
form.default input:not([type="checkbox"]):not([type="radio"]), form.default textarea, form.default select {
  background-color: var(--c-bg); color: var(--c-text); border: 0.0625rem solid var(--c-border);
  display: block; font-family: var(--f-main); font-size: var(--fs-base); line-height: var(--lh-base);
  margin: 0 0 .5rem; padding: .8rem; position: relative; resize: none; width: 100%; transition: var(--transition);
}
form.default input:not([type="checkbox"]):not([type="radio"]):focus, form.default textarea:focus, form.default select:focus { border-color: var(--c-primary); background-color: hsl(0 0.0% 98.0%); outline: none; }
form.default textarea { min-height: 7.5rem; padding-top: .9rem; }
form.default textarea[name="Nachricht"] { min-height: 18.5rem; }
form.default [type="checkbox"] { display: inline-block; margin: 0 .5rem 0 0; padding: 0; width: 1rem; height: 1rem; flex-shrink: 0; order: -1; accent-color: var(--c-primary); }
form.default label[for*="datenschutz"], form.default label.checkbox { display: flex; align-items: flex-start; gap: .5rem; }
form.default label.checkbox input { margin-top: .4rem; }
form.default .gotcha_field { display: none !important; }
form.default [data-field-error] { background-color: var(--c-warning); color: var(--c-warning-text); display: inline-block; padding: .5rem; line-height: 1; width: 100%; }
form.default .form-note { padding: var(--gap); background: var(--c-surface); color: var(--c-surface-text); margin-bottom: var(--lh-base); }
form.default .form-note.success { background: rgb(60, 110, 60); color: #fff; }
form.default .form-note.error { background: var(--c-warning); color: var(--c-warning-text); }

.cms-video { width: 100%; }
.cms-video video.video { display: block; width: 100%; height: auto; background: #000; }

.cms-route-planner-info-text { margin-bottom: var(--gap); }

.sitemap ul ul { padding-left: 1.25rem; }
.sitemap li::before { display: none !important; }
.sitemap li { padding-left: 0 !important; }

body.js [data-lazy-animation] { opacity: 0; transition: opacity .8s ease, transform .8s ease; }
body.js [data-lazy-animation="fade-left"] { transform: translateX(-2.5rem); }
body.js [data-lazy-animation="fade-right"] { transform: translateX(2.5rem); }
body.js [data-lazy-animation].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body.js [data-lazy-animation] { opacity: 1; transform: none; transition: none; } }


/* ===== pages ===== */


.contact-text { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 1.875rem 0; margin: 1.875rem 0 2.5rem 0; }
.contact-text p { margin-bottom: 0; }

.cal-embed { width: 100%; min-height: 25rem; margin-bottom: var(--lh-base); }
.cal-consent { min-height: 25rem; }

.calendly-embed { min-height: 41.25rem; }
.calendly-embed .calendly-inline-widget { min-width: 18.75rem; height: 43.75rem; }
.calendly-note { font-size: 0.9062rem; color: hsl(0 0.0% 25.5% / 0.84); }
#termin h2 { margin-bottom: 0.625rem; }
#cal-inline { width: 100%; min-height: 37.5rem; overflow: auto; }

.flex { display: flex; }
.gap { gap: var(--gap); }
.full-only { display: none; }
@media (min-width: 95em) { .full-only { display: block; } }
.landscape-margin { margin-bottom: 0; }
@media (orientation: landscape) and (min-width: 30em) { .landscape-margin { margin-bottom: 6.25rem; } }
.small-margin { margin-bottom: 1.25rem; }
@media (min-width: 40em) { .small-margin { margin-bottom: 3.75rem; } }
.margin-xl-bottom-full { margin-block-end: var(--space-xl-b); }
strong.h6, .h6 { display: block; }

.cms-gallery { display: flex; flex-wrap: wrap; margin-inline: calc(-1 * var(--gap)); margin-bottom: var(--lh-base); }
.cms-gallery-image { flex: 0 0 50%; max-width: 50%; padding: var(--gap); }
.cms-gallery-image figure { margin: 0; }
.cms-gallery-image img { aspect-ratio: 1; object-fit: cover; }
@media (min-width: 40em) { .cms-gallery-image { flex-basis: 33.3333%; max-width: 33.3333%; } }
@media (min-width: 62em) { .cms-gallery-image { flex-basis: 25%; max-width: 25%; } }

[data-blog-filter-form] [role="radiogroup"] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
[data-blog-filter-form] .btn::before { content: "\e906"; }
[data-blog-filter-form] .btn.active { background-color: var(--c-primary-active); }
[data-blog-filter-form] .h2 { margin-bottom: var(--gap); }
.blog-post-title.h4 span { font-size: inherit; font-weight: inherit; }
body.blog main .box .blog-post-categories li { padding-left: 1.25rem; margin-bottom: 0.4375rem; }
span.box { display: inline-block; }

form.route-planner { padding-bottom: 0; }
form.route-planner label { padding-top: 0; }
form.route-planner small { color: inherit; font-size: 0.75rem; }
form.route-planner small::before { display: none; }
form.route-planner .btn { margin-top: var(--gap); }
body.sitemap { padding: 2rem; } body.sitemap ul ul { padding-left: 1.25rem; }
.video-note { padding: var(--gap); background: var(--c-surface); margin-bottom: var(--lh-base); }


/* ===== footer ===== */


@media (min-width: 101.25em) {
  #footer { overflow-x: clip; }
  #footer > .row.break-right > .col:first-child { margin-left: calc(100% - 100vw); width: 100vw; max-width: none; flex-basis: auto; }
}
#footer .footer-img { max-height: 72.5rem; height: 100%; position: relative; transform: translateY(clamp(9.375rem, calc(7.664rem + 5.702vw), 13.44rem)); z-index: -1; margin: 0; }
#footer .footer-img picture, #footer .footer-img img { height: 100%; object-fit: cover; object-position: bottom; margin: 0; }
#footer .footer-img::before {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: clamp(9.375rem, calc(7.664rem + 5.702vw), 13.44rem); z-index: 1;
  background: linear-gradient(to bottom, hsl(0 0.0% 100.0% / 0), hsl(0 0.0% 100.0% / 0.6), var(--c-bg));
}
@media (max-width: 74.9375em) { #footer .footer-img::before { height: 55%; } }
@media (min-width: 75em) { #footer .footer-img::before { height: 80%; } }

#footer .info-wrapper .h4 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.375rem, calc(1.27rem + 0.3509vw), 1.625rem); color: var(--c-tertiary); line-height: 1.2; margin-bottom: var(--lh-base); }
#footer .info-wrapper address { font-style: normal; }
#footer .info-list { display: flex; flex-direction: row; justify-content: space-between; }
#footer .info-list li { display: flex; align-items: baseline; gap: 0 0.3125rem; }
#footer .info-list li::before { transform: translateY(2px); }
#footer .info-list li a { line-height: var(--lh-base); }
#footer .info-list > li ul { display: flex; flex-direction: column; }
#footer .info-list > li dl { display: flex; flex-wrap: wrap; max-width: 13.75rem; gap: 0 0.25rem; line-height: var(--lh-base); }
#footer .info-list > li dl dt { width: auto; }
@media (max-width: 47.4375em) {
  #footer .info-wrapper { text-align: center; }
  #footer .info-list { flex-direction: column; text-align: center; align-items: center; gap: var(--gap); }
  #footer .info-list li { flex-direction: column; text-align: center; align-items: center; }
  #footer .info-list > li dl { flex-direction: column; text-align: center; align-items: center; max-width: 100%; }
}
@media (min-width: 47.5em) { #footer .info-list > li dl dd { width: 70%; } }
@media (min-width: 62em) { #footer .info-list { gap: 1.25rem; flex-wrap: wrap; justify-content: flex-start; } }
@media (min-width: 75em) and (max-width: 101.1875em) { #footer .info-wrapper { padding-left: var(--gap); } }
@media (min-width: 85.25em) { #footer .info-list { gap: 0.625rem; } }
@media (min-width: 101.25em) {
  #footer .info-list { gap: 2.188rem; }
  #footer .info-list > li dl { display: grid; grid-template-columns: 1fr 2fr; max-width: unset; }
  #footer .info-list > li dl dd { width: 100%; }
}

.navi-add { display: flex; justify-content: center; }
.navi-add li a { text-decoration: none; font-weight: 300; transition: color var(--transition); color: var(--c-text); }
.navi-add li a:hover, .navi-add li a:focus { color: var(--c-primary); }
.navi-add li.active a { font-weight: 500; color: var(--c-primary); }
@media (max-width: 74.9375em) {
  .navi-add { flex-direction: column; align-items: center; justify-content: center; padding: 1em var(--gap); margin-bottom: 6.25rem; }
  .navi-add li { padding: 1em var(--gap); border-bottom: 0.0625rem solid var(--c-border); width: 100%; text-align: center; }
}
@media (min-width: 75em) {
  .navi-add { padding: 3.125rem 0; flex-wrap: wrap; gap: calc(var(--gap) / 2) calc(var(--gap) * 2); position: relative; z-index: 0; justify-content: space-between; }
  .navi-add::before {
    content: ""; position: absolute; top: 0; height: 100%; width: calc(100% + 50vw); z-index: -1;
    background: var(--c-surface); right: calc(-1 * (100vw / 12 + var(--gap)));
  }
}
@media (min-width: 75em) and (max-width: 101.1875em) { .navi-add { padding-left: var(--gap); } }

.cms-map { width: 100%; }
@media (min-width: 47.5em) { .cms-map:not(.route-planner) { height: 25rem; } }
.cms-map iframe { width: 100%; height: 100%; border: 0; display: block; }
#footer .map-col .cms-map, #footer .map-col .cms-map > * , #footer .map-col .cms-map iframe { height: 100%; margin-bottom: 0; min-height: 25rem; }
@media (min-width: 101.25em) { #footer .map-col { min-width: calc(100% / 12 * 4); } }
.map-consent {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap);
  height: 100%; min-height: 25rem; padding: var(--gap); text-align: center; background: var(--c-surface); color: var(--c-surface-text);
}
.map-consent p { margin: 0; max-width: 26.25rem; }

.back-to-top {
  position: fixed; bottom: 8rem; right: var(--gap); z-index: 800;
  display: flex; align-items: center; justify-content: center;
  width: 3em; height: 3em; font-size: 1rem; text-decoration: none;
  background-color: var(--c-elevated); color: var(--c-elevated-text);
  transform: translateY(0); transition: var(--transition);
}
.back-to-top span { display: none; }
body:not(.scrolling-up) .back-to-top { opacity: 0; visibility: hidden; transform: translateY(3em); }
.back-to-top:hover, .back-to-top:focus { background-color: hsl(0 0.0% 15.5%); color: var(--c-elevated-text); }


/* ===== cta ===== */

#call-to-action-wrapper { pointer-events: none; }
.cta-list { display: flex; pointer-events: all; }
.cta-item { position: relative; display: flex; justify-content: center; align-items: center; }
.cta-item .cta-icon { display: flex; justify-content: center; align-items: center; line-height: 1; transition: opacity 350ms ease-in-out; }
.cta-item > a { text-decoration: none; }

@media (max-width: 61.9375em) {
  #call-to-action-wrapper {
    position: fixed; top: var(--quickbar-height); left: 0; right: 0; z-index: 990;
    height: 3.75rem; background: var(--c-secondary);
    box-shadow: 0 0.625rem 0.3125rem -0.3125rem rgba(0, 0, 0, .1);
    transition: opacity 350ms ease-in-out, visibility 350ms ease-in-out;
  }
  body.scrolling-down #call-to-action-wrapper, body.nav-open #call-to-action-wrapper { opacity: 0; visibility: hidden; }
  .cta-list { height: 100%; justify-content: center; align-items: stretch; gap: clamp(1.406rem, calc(1.122rem + 0.9474vw), 2.081rem); padding-inline: 1.125rem; }
  .cta-item { padding-inline: 0.75rem; }
  .cta-item .cta-icon { font-size: 1.375rem; color: var(--c-secondary-text); }
  .cta-item > a { position: absolute; inset: 0; font-size: 0; overflow: hidden; }
  .cta-item:hover .cta-icon { opacity: .8; }
}

@media (min-width: 62em) {
  #call-to-action-wrapper { position: fixed; right: 0; top: 0; height: 100%; z-index: 997; display: flex; }
  .cta-list { flex-direction: column; gap: 0.625rem; margin-block: auto; }
  .cta-item { width: 3.125rem; height: 3.125rem; background: var(--c-primary); transition: background 350ms ease-in-out; }
  .cta-item .cta-icon { font-size: 0.9375rem; color: var(--c-primary-text); }
  .cta-item > a {
    position: absolute; top: 0; right: 3.125rem; height: 100%;
    display: inline-flex; align-items: center; padding: 0 1.125rem; white-space: nowrap;
    background: hsl(101.86 87.8% 90.8%); color: var(--c-secondary-text);
    opacity: 0; visibility: hidden; transform: translateX(1.25rem); pointer-events: none;
    transition: all 350ms ease-in-out;
  }
  .cta-item > a::after { content: ""; position: absolute; top: 0; right: -3.125rem; width: 3.125rem; height: 100%; }
  .cta-item:hover > a, .cta-item:focus-within > a { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: all; }
  .cta-item:hover .cta-icon { opacity: .7; }
}
@media (min-width: 62em) and (max-width: 101.1875em) { body.scrolled #call-to-action-wrapper { right: 0; } }

.cookie-badge {
  position: fixed; left: 0; bottom: 7.5rem; z-index: 900;
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  width: 2rem; padding: 0.75rem 0; border: 0; cursor: pointer;
  background: var(--c-warning); color: var(--c-warning-text);
}
.cookie-badge span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 0.6875rem / 1 var(--f-main); letter-spacing: .02em; }
.cookie-badge svg { width: 1rem; height: 1rem; fill: currentColor; }
body.cookie-open .cookie-badge { visibility: hidden; }
.cookie-banner {
  position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: var(--gap);
  background: hsl(0 0.0% 100.0% / 0.85);
}
.cookie-banner.open { display: flex; }
.cookie-banner .cookie-box { width: 100%; max-width: 38.75rem; background: var(--c-bg); color: var(--c-text); box-shadow: var(--shadow); padding: calc(var(--gap) * 1.5); }
.cookie-banner h2 { font-size: clamp(1.562rem, calc(1.484rem + 0.2632vw), 1.75rem); margin-bottom: var(--gap); }
.cookie-banner p { margin-bottom: var(--gap); }
.cookie-banner .cookie-options { display: grid; gap: 0.5rem; margin-bottom: var(--gap); }
.cookie-banner .cookie-options label { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; background: var(--c-surface); cursor: pointer; }
.cookie-banner .cookie-options input { width: 1.125rem; height: 1.125rem; accent-color: var(--c-primary); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.cookie-banner .cookie-actions .btn::before { display: none; }
.cookie-banner .cookie-actions .btn-ghost { background: var(--c-elevated); }
.cookie-banner .cookie-actions .btn-ghost:hover { background: hsl(0 0.0% 15.5%); }
.cookie-banner small { display: block; margin-top: var(--gap); font-size: 0.8125rem; }


/* ===== polish ===== */


:root {
  --c-link: hsl(151.2 59.5% 28%);           
  --space-md: clamp(4.125rem, calc(2.914rem + 4.035vw), 7rem); --space-md-b: clamp(2.5rem, calc(1.342rem + 3.86vw), 5.25rem);
  --space-lg: clamp(6.25rem, calc(4.461rem + 5.965vw), 10.5rem); --space-lg-b: clamp(4.5rem, calc(2.711rem + 5.965vw), 8.75rem);
  --shadow-soft: 0 10px 30px -12px rgba(15, 61, 36, .18);
  --shadow-hover: 0 18px 40px -14px rgba(15, 61, 36, .28);
}
main p, main li, main dd { max-width: 78ch; }
main .box p, main .tarif p, .text-center p, .center p { max-width: none; }
h1 + p, h2 + p, .h1 + p, .h2 + p { margin-top: -0.25rem; }

main p a, main ol a, main ul a, main dl a, main table a, .map-consent a, .cookie-box a { color: var(--c-link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
main p a:hover, main ol a:hover, main ul a:hover, main dl a:hover, main table a:hover, .map-consent a:hover { color: var(--c-primary-active); text-decoration-thickness: 2px; }
.navi-add li.active a, #navigation .navi a.active, #navigation .navi li.active > .sub-toggle, #navigation .navi li.active > a { color: var(--c-link); }

main .btn + .btn, main .btn + br + .btn, main p > .btn ~ .btn { background-color: transparent; color: var(--c-link); outline: 0.0625rem solid var(--c-primary); outline-offset: -0.0625rem; }
main .btn + .btn:hover, main .btn + br + .btn:hover, main p > .btn ~ .btn:hover { background-color: var(--c-primary); color: var(--c-primary-text); }
[data-blog-filter-form] .btn + .btn { background-color: transparent; color: var(--c-link); outline: 0.0625rem solid var(--c-primary); outline-offset: -0.0625rem; }
.btn { letter-spacing: .005em; }

main ul:not(.unstyled-list) li::before { color: var(--c-primary); }
main ol:not(.unstyled-list) li::before { color: var(--c-primary); font-weight: 600; }

main table thead th, main table tr:first-child th { background: var(--c-surface); border-bottom: 0.125rem solid var(--c-primary); font-weight: 600; }
main table tbody tr:nth-child(even) td { background: hsl(0 0.0% 96.1% / 0.6); }
main table th:first-child, main table td:first-child { font-weight: 500; }

.box, main .tarif, body.blog main .box { background: var(--c-bg); border: 0.0625rem solid var(--c-border); box-shadow: var(--shadow-soft); transition: box-shadow .35s var(--ease-out, ease), transform .35s var(--ease-out, ease), border-color .35s; }
.box.bg-color-surface { background: var(--c-surface); }
.box-shadow { box-shadow: var(--shadow-soft); }
.box:hover, body.blog main .box:hover { box-shadow: var(--shadow-hover); border-color: hsl(151.2 59.5% 32.9% / 0.35); }
.box > .h3:first-child, .box > .h4:first-child, .box > h3:first-child, .box > h4:first-child { padding-top: 0.25rem; }
.box > .h3:first-child::before, .box > .h4:first-child::before, .box > h3:first-child::before, .box > h4:first-child::before {
  content: ""; display: block; width: 2.25rem; height: 0.1875rem; background: var(--c-primary); margin-bottom: 0.875rem;
}
main figure.lightbox-zoom-image a { position: relative; }
main figure.lightbox-zoom-image a::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 hsl(151.2 59.5% 32.9% / 0); transition: box-shadow .3s; pointer-events: none; }
main figure.lightbox-zoom-image a:hover::after { box-shadow: inset 0 0 0 0.1875rem hsl(151.2 59.5% 32.9% / 0.6); }

[data-blog-filter-form] [role="radiogroup"] { gap: 0.5rem 0.5rem; }
[data-blog-filter-form] .btn { padding: 0.5rem 1rem; font-size: 0.875rem; background: transparent; color: var(--c-link); outline: 0.0625rem solid var(--c-border); outline-offset: -0.0625rem; }
[data-blog-filter-form] .btn::before { content: none; }
[data-blog-filter-form] .btn:hover { outline-color: var(--c-primary); background: hsl(151.2 59.5% 32.9% / 0.06); }
[data-blog-filter-form] .btn.active, [data-blog-filter-form] .btn[aria-checked="true"] { background: var(--c-primary); color: var(--c-primary-text); outline-color: var(--c-primary); }
body.blog main .box { padding: 0; border-bottom-width: 0.0625rem; overflow: hidden; }
body.blog main .box > a { gap: 0; }
body.blog main .box > a img { height: 13.75rem; transition: transform .6s var(--ease-out, ease); }
body.blog main .box:hover > a img { transform: scale(1.04); }
body.blog main .box .blog-post-title { padding: 1.25rem 1.375rem 0; font-size: 1.188rem; line-height: 1.3; }
body.blog main .box .blog-post-categories { display: flex !important; flex-wrap: wrap; gap: 0.375rem !important; padding: 0.875rem 1.375rem 0; text-align: start; }
body.blog main .box .blog-post-categories li { padding: 0.1875rem 0.625rem; margin: 0; font-size: 0.7812rem; line-height: 1.5; background: var(--c-surface); color: var(--c-surface-text); border-radius: 0; }
body.blog main .box .blog-post-categories li::before { content: none; }
body.blog main .box > a > .btn, body.blog main .box .btn { margin: 1.125rem 1.375rem 1.375rem; align-self: flex-start; background: transparent; color: var(--c-link); padding: 0; font-weight: 600; gap: .35rem; outline: none; }
body.blog main .box .btn::before { transition: transform .3s var(--ease-out, ease); }
body.blog main .box:hover .btn::before { transform: translateX(4px); }
body.blog main .box:hover .btn { color: var(--c-primary-active); }

.faq-question { padding: 1.125rem 3.5rem 1.125rem 1.25rem; background: var(--c-surface); border-left: 0.1875rem solid transparent; transition: border-color .25s, background .25s; }
.faq-question:hover, .faq-question:focus-visible { filter: none; border-left-color: var(--c-primary); background: hsl(0 0.0% 93.1%); }
.faq-question[aria-expanded="true"] { border-left-color: var(--c-primary); }
.faq-question::before, .faq-question::after { background: var(--c-primary); width: 16px; right: 1.4rem; }
.faq-answer-wrapper { padding: var(--gap) 1.25rem 0.375rem 1.438rem; border-left: 0.1875rem solid hsl(151.2 59.5% 32.9% / 0.3); margin-bottom: 0.375rem; }

main blockquote { border-left: 0.1875rem solid var(--c-primary); padding: 0.375rem 0 0.375rem 1.25rem; font-size: 1.125rem; font-weight: 300; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 0.1875rem solid var(--c-primary); outline-offset: 0.1875rem; box-shadow: 0 0 0 0.375rem #fff;
}
.btn:focus-visible, form.default [type="submit"]:focus-visible { outline-color: var(--c-tertiary); }
.skip-links { position: absolute; top: 0; left: 0; z-index: 3000; }
.tab-btn { font-family: var(--f-main); font-weight: 500; font-size: 1.125rem; padding: 1rem 1.5rem; background: var(--c-primary); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.tab-btn:focus { outline: 0.1875rem solid #fff; outline-offset: -0.5rem; }
.visually-hidden { white-space: nowrap; }
@media (forced-colors: active) { .btn, .faq-question, .box { border: 1px solid CanvasText; } .faq-question::before, .faq-question::after { background: CanvasText; } }

html.contrast-intensify { --c-text: #000; --c-tertiary: #000; --c-link: hsl(151.2 65% 22%); --c-primary: hsl(151.2 65% 24%); --c-primary-hover: hsl(151.2 65% 18%); --c-border: #6b6b6b; --c-surface-text: #000; }
html.contrast-intensify body { color: #000; }
html.contrast-intensify .box, html.contrast-intensify main .tarif, html.contrast-intensify .faq-question, html.contrast-intensify main table td, html.contrast-intensify main table th { border: 0.0625rem solid #444; }
html.contrast-intensify .btn, html.contrast-intensify form.default [type="submit"] { text-decoration: underline; }
html.contrast-intensify #header .header-img::before { background: linear-gradient(180deg, hsl(0 0.0% 100.0% / 0) 0%, var(--c-bg) 35%, var(--c-bg) 100%); }
html.contrast-intensify #footer .footer-img::before { height: 90%; }
html.contrast-intensify .rv, html.contrast-intensify .split .w { opacity: 1 !important; transform: none !important; }
html.contrast-intensify .greenie-wrap { display: none; }
html.contrast-intensify h1 span:not(.br):not(.w), html.contrast-intensify h2 span:not(.br):not(.w), html.contrast-intensify h3 span:not(.br):not(.w) { font-weight: 400; }
html.contrast-intensify #navigation .navi a, html.contrast-intensify #navigation .navi .sub-toggle { color: #000; }
html.contrast-intensify .cta-item, html.contrast-intensify .back-to-top { outline: 0.125rem solid #000; }

.google-rating { display: inline-flex; align-items: center; gap: 0.625rem; margin: -0.375rem 0 1.125rem; text-decoration: none; color: var(--c-text); font-size: 0.875rem; }
.google-rating:hover .rating-text, .google-rating:focus-visible .rating-text { color: var(--c-link); text-decoration: underline; }
.google-rating .stars { --rating: 5; position: relative; display: inline-block; width: 5em; height: 1em; font-size: 1.062rem; line-height: 1; letter-spacing: 0; }
.google-rating .stars::before, .google-rating .stars::after { content: "★★★★★"; position: absolute; inset: 0; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; color: var(--c-border); }
.google-rating .stars::after { color: #f5b301; width: calc(var(--rating) / 5 * 100%); overflow: hidden; white-space: nowrap; }
.google-rating strong { font-weight: 600; color: var(--c-tertiary); }

.post-meta-row { margin-bottom: -0.625rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; font-size: 0.875rem; color: var(--c-surface-text); opacity: .85; margin-bottom: var(--gap); }
.post-meta a { color: inherit; }


/* ===== process ===== */

.process-story { --ps-ink: var(--c-tertiary); --ps-illu-opacity: .42; --ps-track: 780vh; --ps-top-gap: 8.125rem; position: relative; margin-bottom: var(--space-lg-b); }
.process-story-head { margin-bottom: 0.625rem; }
.ps-title { font-size: clamp(1.875rem, calc(1.296rem + 1.93vw), 3.25rem); line-height: 1.08; margin-bottom: 1rem; }
.ps-eyebrow { font: 600 0.8125rem / 1.4 var(--f-main); letter-spacing: .12em; text-transform: uppercase; color: var(--c-link); margin-bottom: 0.75rem; }
.ps-intro { font-size: clamp(1.062rem, calc(0.9836rem + 0.2632vw), 1.25rem); max-width: 70ch; }

.ps-track { position: relative; height: var(--ps-track); }
.ps-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--c-bg); }

.ps-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, hsl(0 0.0% 100.0% / 0.85) 0%, hsl(0 0.0% 100.0% / 0) 18%); }

.ps-illustration { position: absolute; inset: 0; z-index: 0; opacity: var(--ps-illu-opacity); pointer-events: none; perspective: 1400px; perspective-origin: 50% 45%; overflow: hidden; }
.ps-3d { position: absolute; inset: -8%; transform-style: preserve-3d; will-change: transform; }
.ps-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.ps-media-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; --ps-col: calc(var(--row-max-dyn) * .40); --ps-edge: calc((100% - var(--row-max-dyn)) / 2 + var(--gap)); --ps-bottom: 4.5rem; --ps-top: calc(var(--ps-top-gap) + 0.375rem); }
.ps-media-stage .ps-media { position: absolute; width: var(--ps-col); max-height: calc(100svh - var(--ps-top-gap) - 8.75rem); margin: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; pointer-events: auto;
  transform: translate3d(0, var(--ps-y, 0px), 0); }
.ps-media-stage .ps-media[data-ps-media-side="right"] { right: var(--ps-edge); }
.ps-media-stage .ps-media[data-ps-media-side="left"] { left: var(--ps-edge); }

.ps-media-stage .ps-media[data-ps-layout="text-tl"] { bottom: var(--ps-bottom); }
.ps-media-stage .ps-media[data-ps-layout="text-br"] { top: var(--ps-top); }
.ps-media-stage .ps-media[data-ps-layout="text-cl"] { top: var(--ps-top); }
.ps-media-stage .ps-media[data-ps-layout="text-bl"] { top: var(--ps-top); width: calc(var(--ps-col) * .85); }
.ps-media-stage .ps-media[data-ps-layout="text-cr"] { bottom: var(--ps-bottom); }
.ps-media-stage .ps-media[data-ps-layout="text-tr"] { bottom: var(--ps-bottom); width: calc(var(--ps-col) * 1.1); }
.ps-media { margin: 0 0 1.25rem; background: var(--c-surface); overflow: hidden; box-shadow: var(--shadow); }
.ps-media picture { display: block; margin: 0; height: 100%; }   
.ps-media img, .ps-media video { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; margin: 0; }

.ps-media--portrait img, .ps-media--portrait video { aspect-ratio: 9 / 16; object-position: center; }
.ps-media-stage .ps-media.ps-media--portrait { width: calc(var(--ps-col) * .52); max-height: calc(100svh - var(--ps-top-gap) - 7.5rem); }
.ps-media-stage .ps-media.ps-media--portrait[data-ps-layout="text-bl"], .ps-media-stage .ps-media.ps-media--portrait[data-ps-layout="text-tr"] { width: calc(var(--ps-col) * .52); }

.ps-content { position: relative; z-index: 3; height: 100%; padding: var(--ps-top-gap) 0 5rem; box-sizing: border-box; }
.ps-steps { position: relative; height: 100%; display: grid; align-items: center; }
.ps-step { grid-area: 1 / 1; width: calc(var(--row-max-dyn) * .36); opacity: 0; visibility: hidden; will-change: opacity, transform; transform: translate3d(0, var(--ps-y, 0px), 0); }
.ps-step[data-ps-side="left"] { justify-self: start; margin-left: calc((100% - var(--row-max-dyn)) / 2 + var(--gap)); }
.ps-step[data-ps-side="right"] { justify-self: end; margin-right: calc((100% - var(--row-max-dyn)) / 2 + var(--gap)); }
.ps-step[data-ps-vpos="top"] { align-self: start; margin-top: 1.875rem; }
.ps-step[data-ps-vpos="bottom"] { align-self: end; margin-bottom: 1.25rem; }
.ps-step[data-ps-vpos="center"] { align-self: center; }
.ps-step-kicker { display: flex; align-items: center; gap: 0.625rem; font: 500 0.875rem / 1.4 var(--f-main); color: var(--c-link); margin-bottom: 0.875rem; }
.ps-step-num { font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--c-primary); }
.ps-step-title { font-size: clamp(1.75rem, calc(1.382rem + 1.228vw), 2.625rem); line-height: 1.1; margin-bottom: 0.875rem; letter-spacing: -.01em; }
.ps-step-text { font-size: clamp(1rem, calc(0.9474rem + 0.1754vw), 1.125rem); max-width: 46ch; margin-bottom: 1.25rem; }

.ps-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0; }
.ps-step-actions .btn { margin: 0; }

.ps-step::before { content: ""; position: absolute; inset: -1.75rem -2.25rem; z-index: -1; pointer-events: none; border-radius: 2.5rem;
  background: radial-gradient(ellipse at 50% 50%, hsl(0 0.0% 100.0% / 0.96) 0%, hsl(0 0.0% 100.0% / 0.92) 55%, hsl(0 0.0% 100.0% / 0) 100%); }
.ps-step { position: relative; }

.ps-dots { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); z-index: 4; display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ps-dots a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--c-text); opacity: .5; transition: opacity .4s var(--ease-out, ease), color .4s; }
.ps-dots a:hover, .ps-dots a:focus-visible { opacity: 1; }
.ps-dots .is-active { opacity: 1; color: var(--c-link); }
.ps-dot-index { display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border: 0.0625rem solid currentColor; font: 600 0.75rem / 1 var(--f-main); flex-shrink: 0; background: var(--c-bg); transition: background .4s, color .4s; }
.ps-dots .is-active .ps-dot-index { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ps-dot-label { display: none; font-size: 0.8125rem; white-space: nowrap; }
.ps-dots .is-active .ps-dot-label { display: inline; }

.process-story:not(.ps-ready) .ps-track { height: auto; }
.process-story:not(.ps-ready) .ps-stage { position: static; height: auto; overflow: visible; background: none; }
.process-story:not(.ps-ready) .ps-stage::before, .ps-static .ps-stage::before { display: none; }
.process-story:not(.ps-ready) .ps-illustration, .process-story:not(.ps-ready) .ps-media-stage, .ps-static .ps-media-stage { display: none; }
.process-story:not(.ps-ready) .ps-content, .ps-static .ps-content { height: auto; padding: 0 var(--gap); max-width: var(--row-max); margin-inline: auto; box-sizing: border-box; }
.process-story:not(.ps-ready) .ps-steps, .ps-static .ps-steps { display: block; height: auto; }
.process-story:not(.ps-ready) .ps-step, .ps-static .ps-step { width: auto; max-width: 45rem; margin: 0 0 var(--space-sm-b); opacity: 1; visibility: visible; transform: none; }
.process-story:not(.ps-ready) .ps-media, .ps-static .ps-media { max-width: 27.5rem; }
.process-story:not(.ps-ready) .ps-dots, .ps-static .ps-dots { display: none; }

.ps-static .ps-track { height: auto; }
.ps-static .ps-stage { position: static; height: auto; overflow: visible; background: none; }
.ps-static .ps-illustration { position: relative; inset: auto; height: 26.25rem; max-width: var(--row-max); margin: 0 auto var(--space-sm-b); opacity: .7; perspective: none; }
.ps-static .ps-3d { inset: 0; transform: none !important; }

.ps-svg .ps-ink { stroke: var(--ps-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ps-svg .ps-thin { stroke-width: 1.2; }
.ps-svg .ps-hair { stroke-width: .7; }
.ps-svg .ps-limb { stroke-width: 4; }
.ps-svg .ps-accent { stroke: var(--c-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ps-svg .ps-accent-stroke { stroke: var(--c-primary); }
.ps-svg .ps-fill-soft { fill: hsl(151.2 59.5% 32.9% / 0.08); }
.ps-svg .ps-fill-side { fill: hsl(0 0.0% 14.5% / 0.14); }
.ps-svg .ps-fill-paper { fill: var(--c-bg); }
.ps-svg .ps-fill-accent-soft { fill: hsl(151.2 59.5% 32.9% / 0.2); }
.ps-svg .ps-shadow { fill: hsl(0 0.0% 14.5% / 0.16); }
.ps-svg .ps-noline { stroke: none; }
.ps-svg .ps-stop-accent { stop-color: var(--c-primary); }
.ps-svg .ps-stop-paper { stop-color: var(--c-bg); }
.ps-svg .ps-l-floor .ps-hair { opacity: .8; }
.ps-svg [stroke-dasharray] { stroke-dashoffset: 0; }

.ps-debug { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 3000; background: rgba(15,61,36,.85); color: #fff; font: 500 0.75rem / 1.4 ui-monospace, monospace; padding: 0.375rem 0.625rem; pointer-events: none; }
.ps-debug-on .ps-illustration { outline: 1px dashed var(--c-primary); }
.ps-debug-on .ps-media-stage .ps-media { outline: 1px dashed var(--c-primary); }

@media (max-width: 75em) and (min-width: 62em) { .ps-media-stage { --ps-col: calc(var(--row-max-dyn) * .38); } .ps-step { width: calc(var(--row-max-dyn) * .40); } }

@media (max-width: 61.9375em) {
  .process-story { --ps-track: 560vh; --ps-illu-opacity: .3; }
  .ps-stage::before { background: linear-gradient(180deg, hsl(0 0.0% 100.0% / 0.9) 0%, hsl(0 0.0% 100.0% / 0) 18%, hsl(0 0.0% 100.0% / 0) 46%, hsl(0 0.0% 100.0% / 0.94) 64%, hsl(0 0.0% 100.0% / 0.98) 100%); }
  .ps-media-stage .ps-media, .ps-media-stage .ps-media[data-ps-layout] { top: calc(var(--quickbar-height) + 4rem); bottom: auto; width: clamp(12.5rem, 44vw, 22.5rem); transform: translate3d(0, var(--ps-y, 0px), 0); }
  .ps-media-stage .ps-media[data-ps-media-side="right"], .ps-media-stage .ps-media[data-ps-layout="text-bl"] { right: var(--gap); left: auto; }
  .ps-media-stage .ps-media[data-ps-media-side="left"], .ps-media-stage .ps-media[data-ps-layout="text-cr"] { left: var(--gap); right: auto; }
  .ps-content { padding: calc(var(--quickbar-height) + 4.375rem) 0 4.375rem; }
  .ps-steps { align-items: end; }
  .ps-step, .ps-step[data-ps-side="left"], .ps-step[data-ps-side="right"], .ps-step[data-ps-vpos], .ps-step[data-ps-layout] { width: auto; justify-self: stretch; align-self: end; margin: 0 var(--gap) 0 calc(var(--gap) + 1.5rem); }
  .ps-step[data-ps-side="right"] { text-align: right; }
  .ps-step[data-ps-side="right"] .ps-step-kicker { justify-content: flex-end; }
  .ps-step[data-ps-side="right"] .ps-step-text { margin-left: auto; }
  .ps-step[data-ps-side="right"] .ps-step-actions { justify-content: flex-end; }
  .ps-dots { bottom: 1.125rem; }
  .ps-dot-index { width: 1.625rem; height: 1.625rem; font-size: 0.6875rem; }
  .ps-dot-label { display: none !important; }
  .ps-step-title { font-size: clamp(1.375rem, calc(1.164rem + 0.7018vw), 1.875rem); }
  .ps-step-text { font-size: 0.9375rem; }
}
@media (max-width: 39.9375em) {
  .process-story { --ps-track: 520vh; }
  .ps-media-stage .ps-media { width: 48vw; top: calc(var(--quickbar-height) + 3.5rem); }
  .ps-step-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (min-width: 101.25em) { .ps-step { width: min(calc(var(--row-max-dyn) * .36), 37.5rem); } }
@media print { .ps-track { height: auto; } .ps-stage { position: static; height: auto; } .ps-stage::before { display: none; } .ps-step { opacity: 1; visibility: visible; transform: none; width: auto; margin: 0 0 1.5rem; } .ps-illustration, .ps-media-stage, .ps-dots { display: none; } }


/* ===== social ===== */

body.index main { position: relative; }
.sfs-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
body.index main > :not(.sfs-layer) { position: relative; z-index: 1; }
.sfs-body { position: absolute; left: 0; top: 0; width: 9.375rem; height: 9.375rem; opacity: 0; perspective: 1300px; perspective-origin: 50% 35%; will-change: transform, opacity; --sfs-light: .2; --sfs-shade: 0; --sfs-t: 12px; }
.sfs-world { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100% 0; }
.sfs-obj { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.sfs-lay { position: absolute; inset: 0; background: linear-gradient(168deg, var(--sfs-w1) 0%, var(--sfs-w2) 50%, var(--sfs-w3) 100%);
  -webkit-mask: var(--sfs-mask) center / contain no-repeat; mask: var(--sfs-mask) center / contain no-repeat; }

.sfs-face { position: absolute; inset: 0; transform: translateZ(calc(var(--sfs-t) / 2)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sfs-face.sfs-back { transform: translateZ(calc(var(--sfs-t) / -2)) rotateY(180deg); }
.sfs-face.sfs-back img { transform: rotate(180deg); }   

.sfs-body.is-toss.is-restable { pointer-events: auto; cursor: pointer; }
.sfs-body.is-toss.is-restable:hover .sfs-face img { filter: saturate(1) brightness(1.06); }
.sfs-face img { display: block; width: 100%; height: 100%; margin: 0; filter: saturate(.92); }
.sfs-shade { position: absolute; inset: 0; background: #06301a; opacity: var(--sfs-shade); pointer-events: none;
  -webkit-mask: var(--sfs-mask) center / contain no-repeat; mask: var(--sfs-mask) center / contain no-repeat; }
.sfs-gloss { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: var(--sfs-mask) center / contain no-repeat; mask: var(--sfs-mask) center / contain no-repeat; }
.sfs-gloss i { position: absolute; inset: -45%; display: block; background: linear-gradient(135deg, rgba(255,255,255,var(--sfs-light)) 18%, rgba(255,255,255,0) 58%); }

.sfs-shadow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10,46,26,.95) 0%, rgba(10,46,26,.45) 42%, rgba(10,46,26,0) 70%); transform-origin: 50% 50% 0; opacity: 0; will-change: transform, opacity; }

.sfs-body[data-icon="instagram"] { --sfs-w1: #2c9a66; --sfs-w2: #1b6b45; --sfs-w3: #10462c; }
.sfs-body[data-icon="tiktok"]    { --sfs-w1: #84e03f; --sfs-w2: #63c723; --sfs-w3: #44a010; }
.sfs-body[data-icon="pinterest"] { --sfs-w1: #58cf07; --sfs-w2: #3f9f03; --sfs-w3: #2a6f02; }
.sfs-body[data-icon="linkedin"]  { --sfs-w1: #0a9a10; --sfs-w2: #037a04; --sfs-w3: #015402; }

html.sfs-measure main .rv, html.sfs-measure main .split .w, html.sfs-measure main .split > span { transform: none !important; transition: none !important; }

@font-face { font-family: "Caveat GMB"; src: url("../fonts/caveat-650-subset.woff2") format("woff2"); font-weight: 650; font-style: normal; font-display: swap; }
.sfs-hint { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; color: #1f6f46; z-index: 2; }
.sfs-hint-svg { display: block; overflow: visible; }
.sfs-hint-text { font: 650 2.125rem / 1 "Caveat GMB", "Segoe Print", "Bradley Hand", cursive; fill: currentColor; letter-spacing: .01em; }
.sfs-hint-svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sfs-hint-svg .a2 { stroke-width: 1.5; opacity: .5; }
.sfs-hint.is-on { opacity: 1; pointer-events: auto; cursor: pointer; }

.sfs-hint.is-off { opacity: 0; transform: translateY(-0.375rem); transition: opacity .5s ease, transform .5s ease; }
@media (max-width: 991px) { .sfs-hint { display: none; } }

.sfs-debug .sfs-floor { position: absolute; left: 0; width: 100%; height: 0; border-top: 1px dashed var(--c-primary); }
.sfs-debug .sfs-floor span { position: absolute; left: 0.75rem; top: -1.25rem; font: 500 0.75rem / 1.4 ui-monospace, monospace; color: var(--c-primary); }
@media print { .sfs-layer { display: none; } }


/* ===== sales ===== */


.sales-cta-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0.5rem 0 var(--lh-base); }
.center .sales-cta-wrap, .align-center .sales-cta-wrap, .sales-trial .sales-cta-wrap { align-items: center; text-align: center; }
.sales-promise { font-size: 0.875rem; color: hsl(0 0.0% 25.5% / 0.88); line-height: 1.4; }

.sales-proof { display: flex; flex-direction: column; gap: 1.375rem; padding: 1.5rem 0; margin: 0.375rem 0 var(--lh-base); border-top: 0.0625rem solid var(--c-border); border-bottom: 0.0625rem solid var(--c-border); }
.sales-proof .google-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0; font-size: 1rem; }
.sales-proof .google-rating .stars { font-size: clamp(2.125rem, calc(1.704rem + 1.404vw), 3.125rem); width: 5em; height: 1em; }
.sales-proof.is-kompakt .google-rating .stars { font-size: clamp(1.75rem, calc(1.487rem + 0.8772vw), 2.375rem); }
.sales-proof .google-rating .rating-text { display: flex; align-items: baseline; gap: 0.625rem; color: hsl(0 0.0% 25.5% / 0.92); }
.sales-proof .google-rating .rating-sub { font-size: 1rem; }
.sales-proof .google-rating .rating-text strong { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.125rem, calc(1.651rem + 1.579vw), 3.25rem); line-height: 1; color: var(--c-tertiary); }
.sales-proof.is-kompakt .google-rating .rating-text strong { font-size: clamp(1.875rem, calc(1.559rem + 1.053vw), 2.625rem); }
.sales-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: 1rem 1.75rem; }
.sales-num { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: inherit; }
.sales-num strong { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, calc(1.632rem + 1.228vw), 2.875rem); line-height: 1; color: var(--c-primary); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sales-num .sales-count-pre, .sales-num .sales-count-suf { font-size: .58em; font-weight: 600; vertical-align: .3em; }
.sales-num > span { font-size: 0.9062rem; line-height: 1.45; color: hsl(0 0.0% 25.5% / 0.92); }
a.sales-num:hover strong, a.sales-num:focus-visible strong { text-decoration: underline; }
.sales-proof.is-kompakt { padding: 1.25rem 0; gap: 1.125rem; }
.sales-proof.is-kompakt .sales-nums { grid-template-columns: repeat(3, 1fr); gap: 0.75rem 1.125rem; }
.sales-proof.is-kompakt .sales-num strong { font-size: clamp(1.75rem, calc(1.487rem + 0.8772vw), 2.375rem); }
.sales-proof.is-kompakt .sales-num > span { font-size: 0.8438rem; }
@media (max-width: 39.9375em) { .sales-proof.is-kompakt .sales-nums { grid-template-columns: 1fr 1fr; } }

.sales-trial { position: relative; margin: 0 0 clamp(2.5rem, calc(1.868rem + 2.105vw), 4rem); padding: clamp(1.75rem, calc(1.224rem + 1.754vw), 3rem) clamp(1.375rem, calc(0.6908rem + 2.281vw), 3rem); background: var(--c-primary); color: #fff; overflow: hidden; }
.sales-trial::before { content: ""; position: absolute; right: -5rem; top: -5rem; width: 17.5rem; height: 17.5rem; border-radius: 50%; background: hsl(0 0.0% 100.0% / 0.1); pointer-events: none; }
.sales-trial .sales-kicker { margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(0 0.0% 100.0% / 0.92); }
.sales-trial h2 { color: #fff; margin-bottom: 0.75rem; }
.sales-trial .sales-lead { max-width: 62ch; color: hsl(0 0.0% 100.0% / 0.92); }
.sales-steps { list-style: none; margin: 1.5rem 0 0.5rem; padding: 0; display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); counter-reset: none; }
.sales-steps li { position: relative; padding: 1.125rem 1.125rem 1.125rem 3.875rem !important; margin: 0 !important; background: hsl(0 0.0% 100.0% / 0.1); border: 0.0625rem solid hsl(0 0.0% 100.0% / 0.22); }
.sales-steps li strong { display: block; font-family: var(--f-display); font-size: 1.125rem; margin-bottom: 0.25rem; color: #fff; }
.sales-steps li p { margin: 0; font-size: 0.9375rem; color: hsl(0 0.0% 100.0% / 0.9); max-width: none; }
.sales-step-n { position: absolute; left: 1rem; top: 1rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c-primary); font-family: var(--f-display); font-weight: 700; }
.sales-trial .btn { background: #fff; color: var(--c-primary); }
.sales-trial .btn:hover, .sales-trial .btn:focus-visible { background: var(--c-secondary); color: var(--c-secondary-text); }
.sales-trial .sales-promise { color: hsl(0 0.0% 100.0% / 0.92); }
.sales-trial .sales-cta-wrap { align-items: flex-start; text-align: left; margin-top: 1.125rem; }
.sales-footnote { font-size: 0.7812rem; line-height: 1.5; color: hsl(0 0.0% 100.0% / 0.88); margin: 0.375rem 0 0; max-width: 80ch; }
.sales-trial.is-kurz { padding: 1rem 1.25rem; margin: 0 0 var(--lh-base); background: var(--c-surface); color: inherit; border-left: 0.25rem solid var(--c-primary); }
.sales-trial.is-kurz::before { display: none; }
.sales-trial.is-kurz p { margin: 0; font-size: 0.9375rem; max-width: none; }
.sales-trial.is-kurz a { color: var(--c-link); }

.sales-compare-wrap { overflow-x: auto; margin: 0 0 var(--lh-base); padding-top: 0.875rem; -webkit-overflow-scrolling: touch; }
.sales-compare { width: 100%; min-width: 42.5rem; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.sales-compare th, .sales-compare td { padding: 0.75rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 0.0625rem solid var(--c-border); background: var(--c-bg); }
.sales-compare thead th { vertical-align: bottom; padding-top: 1.75rem; position: relative; border-bottom: 0.125rem solid var(--c-primary); }
.sales-compare tbody th { font-weight: 500; color: hsl(0 0.0% 25.5% / 0.8); width: 26%; }
.sales-compare tbody td { text-align: center; }
.sales-compare .sales-pname { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, calc(1.092rem + 0.5263vw), 1.625rem); line-height: 1.1; }
.sales-compare .sales-pclaim { display: block; font-weight: 300; font-size: 0.8438rem; line-height: 1.4; color: hsl(0 0.0% 25.5% / 0.9); margin-top: 0.25rem; }
.sales-compare thead th, .sales-compare tfoot td { text-align: center; }

.sales-badge { position: absolute; top: -0.8125rem; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--c-primary); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0.3125rem 0.875rem; line-height: 1.2; white-space: nowrap; }
main .tarif-section .tarif.is-empfohlen { background: var(--c-bg); overflow: visible; box-shadow: 0 0 1.125rem 0.125rem hsl(101.86 87.8% 80.8% / 0.55), 0 0.875rem 3.5rem 0.5rem hsl(101.86 87.8% 80.8% / 0.45), var(--shadow); }
main .tarif-section .tarif.is-empfohlen .indicator { color: var(--c-link); }
.sales-compare thead th.is-empfohlen { padding-top: 1.75rem; }
.sales-compare thead th .sales-badge { top: -0.6875rem; }
.sales-compare .is-empfohlen { background: hsl(151.2 59.5% 32.9% / 0.07); }
.sales-compare tbody tr:nth-last-child(2) td.is-empfohlen { background: linear-gradient(hsl(151.2 59.5% 32.9% / 0.07), hsl(151.2 59.5% 32.9% / 0.03)); }
.sales-compare tbody tr:last-child td.is-empfohlen { background: linear-gradient(hsl(151.2 59.5% 32.9% / 0.03), hsl(151.2 59.5% 32.9% / 0)); }
.sales-compare tfoot td.is-empfohlen { background: transparent; }
.sales-compare thead th.is-empfohlen { background: linear-gradient(hsl(151.2 59.5% 32.9% / 0.03), hsl(151.2 59.5% 32.9% / 0.07)); }
.sales-yes { color: var(--c-primary); font-weight: 700; font-size: 1.125rem; }
.sales-no { color: hsl(0 0.0% 25.5% / 0.35); }
.sales-passt td { text-align: left !important; font-size: 0.875rem; line-height: 1.5; color: hsl(0 0.0% 25.5% / 0.85); }
.sales-passt th { vertical-align: top; }
.sales-compare tfoot td { border-bottom: 0; padding-top: 1.125rem; }
.sales-compare tfoot .btn { margin: 0; width: 100%; justify-content: center; }
@media (max-width: 47.4375em) { .sales-compare { min-width: 35rem; font-size: 0.875rem; } .sales-compare th, .sales-compare td { padding: 0.625rem; }
  .sales-compare-wrap::after { content: "Tabelle nach links wischen, um Premium und Ultimate zu sehen"; display: block; font-size: 0.7812rem; color: hsl(0 0.0% 25.5% / 0.88); padding: 0.5rem 0 0; } }

.sales-faq { margin: 0 0 clamp(2rem, calc(1.579rem + 1.404vw), 3rem); }
.sales-faq h2 { margin-bottom: 1.125rem; }
.sales-faq .faq-container:last-child { margin-bottom: 0; }

.sales-quotes { display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); margin: 0 0 var(--lh-base); }
.sales-quote { margin: 0; padding: 1.375rem 1.5rem; background: var(--c-surface); border-left: 0.25rem solid var(--c-primary); height: auto; }
.sales-quote blockquote { margin: 0 0 0.625rem; }
.sales-quote blockquote p { margin: 0; font-size: 1rem; line-height: 1.55; }
.sales-quote figcaption { font-size: 0.8438rem; font-weight: 700; color: var(--c-link); }

html.contrast-intensify .sales-trial { background: #0b3d22; }
@media print { .sales-trial { background: none; color: inherit; border: 1px solid #000; } .sales-trial h2, .sales-steps li strong, .sales-trial .sales-lead { color: inherit; } }

#header .claim-col .hero-promise { display: block; margin: 0.875rem 0 0; color: hsl(0 0.0% 25.5% / 0.9); line-height: 1.4; }
@media (max-width: 61.9375em) { #header .claim-col .btn:has(+ .hero-promise) { margin-bottom: 0; } #header .claim-col .hero-promise { margin: 0.75rem 0 var(--gap); } }

.btn.btn-icon-phone::before { content: "\e908"; }
.btn.btn-icon-calendar::before { content: "\e90f"; }   
html.motion #header .claim-col .hero-promise { opacity: 0; transition: opacity .7s var(--ease-out) 1.15s; }
html.motion body.hero-in #header .claim-col .hero-promise { opacity: 1; }
@media (max-width: 39.9375em) { #header .claim-col .hero-promise { text-align: center; } }

.sales-counter { margin: 0 0 clamp(1rem, calc(0.5789rem + 1.404vw), 2rem); padding: clamp(1.75rem, calc(1.329rem + 1.404vw), 2.75rem) 0; border-top: 0.0625rem solid var(--c-border); border-bottom: 0.0625rem solid var(--c-border); }
.sales-counter-title { font-size: 0.875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); margin: 0 0 1.375rem; }
.sales-counter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.sales-counter-item { display: flex; flex-direction: column; gap: 0.375rem; padding: 0 !important; margin: 0 !important; }
.sales-counter-item .sales-count { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.375rem, calc(1.796rem + 1.93vw), 3.75rem); line-height: 1; color: var(--c-primary); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sales-counter-item .sales-count-pre, .sales-counter-item .sales-count-suf { font-size: .55em; font-weight: 600; vertical-align: .35em; letter-spacing: 0; }
.sales-counter-text { font-size: 0.9688rem; line-height: 1.45; color: hsl(0 0.0% 25.5% / 0.92); max-width: 26ch; }
.sales-counter-item .stars { --rating: 5; position: relative; display: inline-block; width: 5em; height: 1em; font-size: clamp(1.625rem, calc(1.414rem + 0.7018vw), 2.125rem); line-height: 1; margin-top: 0.125rem; }
.sales-counter-item .stars::before, .sales-counter-item .stars::after { content: "★★★★★"; position: absolute; inset: 0; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; color: var(--c-border); }
.sales-counter-item .stars::after { color: #f5b301; width: calc(var(--rating) / 5 * 100%); overflow: hidden; white-space: nowrap; }

.sales-banner { position: relative; overflow: hidden; min-height: clamp(23.75rem, calc(19.01rem + 15.79vw), 35rem); display: flex; align-items: center; justify-content: flex-end; margin: 0 0 var(--lh-base); background: var(--c-tertiary); }
.sales-banner-media { position: absolute; inset: 0; }
.sales-banner-media picture, .sales-banner-media img { display: block; width: 100%; height: 100%; margin: 0; }
.sales-banner-media img { object-fit: cover; object-position: var(--banner-pos, 50% 50%); }
.sales-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, hsl(0 0.0% 14.5% / 0.9) 0%, hsl(0 0.0% 14.5% / 0.8) 40%, hsl(0 0.0% 14.5% / 0.35) 62%, hsl(0 0.0% 14.5% / 0) 100%); pointer-events: none; }
.sales-banner-body { position: relative; z-index: 1; padding: clamp(1.75rem, calc(1.013rem + 2.456vw), 3.5rem) clamp(1.375rem, calc(0.2697rem + 3.684vw), 4rem); width: min(37.5rem, 100%); color: #fff; }
.sales-banner-body h2 { color: #fff; margin-bottom: 1rem; font-size: clamp(1.75rem, calc(1.329rem + 1.404vw), 2.75rem); line-height: 1.12; }
.sales-banner-body h2 span:not(.w) { display: block; margin-top: 0.5rem; font-weight: 300; font-size: clamp(1.125rem, calc(0.9671rem + 0.5263vw), 1.5rem); line-height: 1.4; color: hsl(0 0.0% 100.0% / 0.92); }
.sales-banner-body .sales-cta-wrap { margin: 0; align-items: flex-start; text-align: left; }
.sales-banner-body .btn { background: #fff; color: var(--c-primary); box-shadow: 0 0.875rem 2.125rem -0.5rem rgba(0,0,0,.5); }
.sales-banner-body .btn:hover, .sales-banner-body .btn:focus-visible { background: var(--c-secondary); color: var(--c-secondary-text); }
.sales-banner-body .sales-promise { color: hsl(0 0.0% 100.0% / 0.92); }
@media (max-width: 47.4375em) { .sales-banner { align-items: flex-end; min-height: 37.5rem; } .sales-banner-media img { object-position: var(--banner-pos-m, 50% 50%); } .sales-banner::after { background: linear-gradient(0deg, hsl(0 0.0% 14.5% / 0.94) 0%, hsl(0 0.0% 14.5% / 0.86) 42%, hsl(0 0.0% 14.5% / 0.3) 68%, hsl(0 0.0% 14.5% / 0) 100%); } .sales-banner-body { padding-top: 11.25rem; } }
html.motion main .sales-banner .sales-banner-media img { transform: none; }

.sales-banner.is-video { background: radial-gradient(ellipse at 85% 15%, hsl(101.86 87.8% 80.8% / 0.28) 0%, hsl(101.86 87.8% 80.8% / 0) 55%), var(--c-tertiary); }
.sales-banner.is-video::after { content: none; }
.sales-banner-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--c-tertiary); }
@media (min-width: 47.5em) {
  .sales-banner.is-video { justify-content: flex-start; min-height: clamp(25rem, calc(18.68rem + 21.05vw), 40rem); }
  .sales-banner.is-video .sales-banner-media { position: relative; inset: auto; flex: 0 0 auto; width: clamp(15rem, calc(11.84rem + 10.53vw), 22.5rem); align-self: stretch; }
  .sales-banner.is-video .sales-banner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, hsl(0 0.0% 14.5% / 0) 55%, hsl(0 0.0% 14.5% / 0.65) 100%); pointer-events: none; }
  .sales-banner.is-video .sales-banner-body { flex: 0 1 auto; width: auto; max-width: 42.5rem; margin: 0 auto; padding-left: clamp(1.75rem, calc(1.013rem + 2.456vw), 3.5rem); }
}
@media (max-width: 47.4375em) {
  .sales-banner.is-video::after { content: ""; }
}



/* ===== about ===== */

.about-lead { font-size: clamp(1.062rem, calc(0.9836rem + 0.2632vw), 1.25rem); line-height: 1.55; font-weight: 400; }
.about-intro .sales-cta-wrap { align-items: flex-start; text-align: left; margin-top: 0.375rem; }

.about-facts-box { margin: 0 0 var(--lh-base); padding: clamp(1.125rem, calc(0.9145rem + 0.7018vw), 1.625rem) clamp(1.125rem, calc(0.8618rem + 0.8772vw), 1.75rem); background: var(--c-surface); border-top: 0.25rem solid var(--c-primary); }
.about-facts { margin: 0; }
.about-facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem; padding: 0.5625rem 0; border-bottom: 0.0625rem solid var(--c-border); align-items: baseline; }
.about-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.about-facts dt { margin: 0; font-size: 0.7812rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-link); }
.about-facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; }

.about-facts-box .about-rating-big { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; margin: 1.125rem 0 0; padding: clamp(1rem, calc(0.8421rem + 0.5263vw), 1.375rem) 0.75rem; background: var(--c-bg); border: 0.0625rem solid var(--c-border); text-decoration: none; color: var(--c-text); }
.about-facts-box .about-rating-big .rating-text strong { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.125rem, calc(1.862rem + 0.8772vw), 2.75rem); line-height: 1; color: var(--c-tertiary); }
.about-facts-box .about-rating-big .stars { font-size: clamp(1.875rem, calc(1.612rem + 0.8772vw), 2.5rem); width: 5em; height: 1em; }
.about-facts-box .about-rating-big .rating-sub { font-size: 0.875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-primary); }
.about-facts-box .about-rating-big:hover .rating-sub, .about-facts-box .about-rating-big:focus-visible .rating-sub { text-decoration: underline; }

.about-facts.is-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 0.375rem 2.5rem; border-top: 0.0625rem solid var(--c-border); padding: 0.875rem 0 0; margin-bottom: var(--lh-base); }
.about-facts.is-row > div { border-bottom: 0; padding: 0.25rem 0; }
.about-card-lead { font-size: 0.9688rem !important; color: var(--c-text) !important; margin-bottom: 0.625rem !important; }

.about-card { height: 100%; padding: clamp(1.25rem, calc(1.039rem + 0.7018vw), 1.75rem) clamp(1.25rem, calc(0.9868rem + 0.8772vw), 1.875rem); background: var(--c-surface); border-left: 0.25rem solid var(--c-primary); }
.about-card.is-no { border-left-color: var(--c-border); }
.about-card h3 { margin: 0 0 0.625rem; font-size: clamp(1.188rem, calc(1.109rem + 0.2632vw), 1.375rem); }
.about-card ul { margin-bottom: 0.5rem; }
.about-card p { margin: 0; font-size: 0.9062rem; color: hsl(0 0.0% 25.5% / 0.88); }
main .about-card.is-no ul li::before { content: "\e90a"; color: var(--c-border); }
main .about-card.is-yes ul li::before { color: var(--c-primary); }

.about-flow { margin: 0 0 var(--lh-base); padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.about-flow li { position: relative; padding: 1.125rem 1.125rem 1rem 3.75rem !important; margin: 0 !important; background: var(--c-bg); border: 0.0625rem solid var(--c-border); }
.about-flow li strong { display: block; font-family: var(--f-display); font-size: 1.094rem; margin-bottom: 0.25rem; color: var(--c-primary); }
.about-flow li p { margin: 0; font-size: 0.9062rem; line-height: 1.5; max-width: none; }
.about-flow-n { position: absolute; left: 1rem; top: 1.125rem; width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 0.875rem; }

.about-team h3 { font-size: clamp(1.125rem, calc(1.046rem + 0.2632vw), 1.312rem); margin: 0.25rem 0 0.375rem; }
.about-team h3 + p { margin-bottom: 1rem; }
.about-studio-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(9.375rem, calc(7.27rem + 7.018vw), 14.38rem); gap: 0.625rem; margin: 0 0 var(--lh-base); }
.about-studio-grid figure { margin: 0; height: 100%; overflow: hidden; }
.about-studio-grid figure.is-wide { grid-column: span 4; }
.about-studio-grid figure.is-tall { grid-column: span 2; grid-row: span 2; }
.about-studio-grid figure:not(.is-wide):not(.is-tall) { grid-column: span 2; }
.about-studio-grid picture, .about-studio-grid img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.about-studio-grid figure.is-tall img { object-position: 50% 40%; }
@media (max-width: 47.4375em) {
  .about-studio-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(8.75rem, calc(7.171rem + 5.263vw), 12.5rem); }
  .about-studio-grid figure.is-wide { grid-column: span 2; }
  .about-studio-grid figure.is-tall { grid-column: span 1; grid-row: span 1; }
  .about-studio-grid figure:not(.is-wide):not(.is-tall) { grid-column: span 1; }
}

.about-rules-list { margin: 0 0 var(--lh-base); padding: 0; }
.about-rules-list li { padding: 0.75rem 0 0.75rem 1.875rem !important; margin: 0 !important; border-bottom: 0.0625rem solid var(--c-border); position: relative; font-size: 0.9375rem; line-height: 1.5; }
.about-rules-list li::before { content: "✓"; position: absolute; left: 0; top: 0.75rem; color: var(--c-primary); font-weight: 700; }
.about-rules-list li strong { color: var(--c-primary); }

.about-quotes .sales-quotes { margin-bottom: 0.875rem; }
.about-quotes-more { margin: 0 0 var(--lh-base); }
.about-quotes-more .google-rating { margin: 0; }

.about-faq .faq-container:last-of-type { margin-bottom: 0; }
.about-faq { margin-bottom: clamp(1.5rem, calc(1.079rem + 1.404vw), 2.5rem); }
.about-quotes-more .google-rating .rating-text { display: inline-flex; align-items: baseline; gap: 0.375rem; }
.about-quotes-more .google-rating .rating-text strong { font-family: var(--f-display); font-size: 1.25rem; }
.about-quotes-more .google-rating .stars { font-size: 1.25rem; }
@media (max-width: 47.4375em) { .about-card { height: auto; margin-bottom: 1rem; } }

.about-facts-box .about-rating-big .stars { width: auto; height: auto; line-height: 1; letter-spacing: .02em; }
.about-facts-box .about-rating-big .stars::before { position: static; display: block; }
.about-facts-box .about-rating-big .stars::after { left: 0; top: 0; bottom: auto; }

.blog-meta { font-size: 0.875rem; color: hsl(0 0.0% 25.5% / 0.75); margin-top: -0.375rem; }
.table-wrap { overflow-x: auto; margin: 0 0 var(--lh-base); -webkit-overflow-scrolling: touch; }
.table-wrap table { margin: 0; min-width: 35rem; }


/* ===== landing ===== */

.lp-kicker { margin: 0 0 0.5rem; font-size: 0.8438rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-link); }
.lp-lead { font-size: clamp(1.062rem, calc(0.9836rem + 0.2632vw), 1.25rem); line-height: 1.55; max-width: 60ch; }
.lp-intro { max-width: 70ch; }

.lp-hero { align-items: center; margin-bottom: clamp(1.5rem, calc(1.079rem + 1.404vw), 2.5rem); }
.lp-hero h1 { margin-bottom: 0.875rem; }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.375rem 0 0.625rem; }
.lp-hero-cta .btn { margin: 0; }
.lp-hero .sales-promise { display: block; margin: 0 0 0.625rem; }
.lp-hero-media { display: flex; }
.lp-hero-pic, .lp-hero-media .lp-clip { display: block; width: 100%; margin: 0; }
.lp-hero-pic img, .lp-hero-media .lp-clip { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.lp-hero:not(.is-portrait) .lp-hero-pic img, .lp-hero:not(.is-portrait) .lp-hero-media .lp-clip { aspect-ratio: 4 / 3; }
.lp-hero-media .lp-clip { background: var(--c-surface); }
.lp-wa { display: inline-flex; align-items: center; gap: 0.5rem; }
.lp-wa::before { content: none; }
.lp-wa svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; display: block; }
.lp-wa span { line-height: 1; }

.lp-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem clamp(1.25rem, calc(0.7237rem + 1.754vw), 2.5rem); padding: 1rem 0; margin: 0 0 clamp(2rem, calc(1.368rem + 2.105vw), 3.5rem); border-top: 0.0625rem solid var(--c-border); border-bottom: 0.0625rem solid var(--c-border); }

@media (min-width: 62em) { .lp-trust { grid-template-columns: auto repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30em) { .lp-trust { grid-template-columns: 1fr; gap: 0.75rem; } }
.lp-trust .google-rating { margin: 0; gap: 0.75rem; padding-top: 0.25rem; }
.lp-trust .google-rating .stars { font-size: 1.5rem; width: auto; height: auto; line-height: 1; letter-spacing: .02em; }
.lp-trust .google-rating .stars::before { position: static; display: block; }
.lp-trust .google-rating .stars::after { left: 0; top: 0; bottom: auto; }
.lp-trust .google-rating .rating-text { display: inline-flex; align-items: baseline; gap: 0.375rem; }
.lp-trust .google-rating .rating-text strong { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; color: var(--c-tertiary); }
.lp-trust-num { display: flex; align-items: flex-start; gap: 0.5rem; }
.lp-trust-num strong { white-space: nowrap; }
.lp-trust-num strong { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, calc(1.289rem + 0.7018vw), 2rem); line-height: 1; color: var(--c-primary); }
.lp-trust-num span { font-size: 0.9062rem; line-height: 1.3; padding-top: 0.5rem; color: hsl(0 0.0% 25.5% / 0.85); }

.lp-pl { height: 100%; padding: clamp(1.25rem, calc(1.039rem + 0.7018vw), 1.75rem) clamp(1.25rem, calc(0.9868rem + 0.8772vw), 1.875rem); background: var(--c-surface); border-left: 0.25rem solid var(--c-border); }
.lp-pl.is-loesung { border-left-color: var(--c-primary); }
.lp-pl h3 { margin: 0 0 0.625rem; font-size: clamp(1.188rem, calc(1.109rem + 0.2632vw), 1.375rem); }
.lp-pl p { font-size: 0.9688rem; }
.lp-pl ul { margin-bottom: 0; }
main .lp-pl.is-problem ul li::before { content: "\e90a"; color: var(--c-border); }
main .lp-pl.is-loesung ul li::before { color: var(--c-primary); }
@media (max-width: 47.4375em) { .lp-pl { height: auto; margin-bottom: 1rem; } }

.lp-cards { margin: 0 0 var(--lh-base); padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 62em) { .lp-cards { grid-template-columns: repeat(3, 1fr); } .lp-cards.is-4 { grid-template-columns: repeat(4, 1fr); } .lp-cards.is-2 { grid-template-columns: repeat(2, 1fr); } }
.lp-cards li { padding: 1.25rem 1.25rem 1.125rem !important; margin: 0 !important; background: var(--c-bg); border: 0.0625rem solid var(--c-border); border-top: 0.1875rem solid var(--c-primary); }
.lp-cards li strong { display: block; font-family: var(--f-display); font-size: 1.094rem; margin-bottom: 0.375rem; color: var(--c-tertiary); }
.lp-cards li p { margin: 0; font-size: 0.9062rem; line-height: 1.5; max-width: none; }

.lp-leist-img figure, .lp-fuerwen-fig { margin: 0 0 var(--lh-base); }
.lp-side-pic { display: block; margin: 0; }
.lp-side-pic img { display: block; width: 100%; height: auto; margin: 0; }
.lp-leist-img .lp-side-pic img { aspect-ratio: 4 / 5; object-fit: cover; }
.lp-fuerwen-fig .lp-side-pic img { aspect-ratio: 3 / 2; object-fit: cover; }
.lp-leist-img figcaption, .lp-fuerwen-fig figcaption { font-size: 0.8125rem; line-height: 1.45; color: hsl(0 0.0% 25.5% / 0.84); padding: 0.5rem 0 0; }
@media (max-width: 47.4375em) { .lp-leist-img .lp-side-pic img { aspect-ratio: 16 / 10; } }

.lp-media { margin: 0 0 var(--lh-base); background: var(--c-tertiary); }
.lp-player, .lp-beispiel-pic img { display: block; width: 100%; height: auto; margin: 0; }
.lp-beispiel-text p { font-size: 0.9688rem; }

.ref-video { max-width: 21.25rem; margin: 0 auto var(--lh-base); }
.cut-auto .ref-video { margin-top: 0; }

.lp-ex-list { display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); margin: 0 0 var(--lh-base); padding: 0; }
.lp-ex-list li { padding: 0 !important; margin: 0 !important; }
.lp-ex .lp-media { margin: 0 0 0.625rem; }
.lp-ex.is-portrait .lp-media { max-width: 22.5rem; margin-left: auto; margin-right: auto; }
.lp-ex:not(.is-portrait) .lp-media { max-width: 47.5rem; }
.lp-ex strong { display: block; font-family: var(--f-display); font-size: 1.062rem; margin-bottom: 0.25rem; color: var(--c-tertiary); }
.lp-ex p { margin: 0 0 0.375rem; font-size: 0.9062rem; line-height: 1.5; max-width: none; }
@media (min-width: 62em) { .lp-ex-list.is-3 { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 47.5em) {
  .lp-ex-list.is-single { display: block; }
  .lp-ex-list.is-single .lp-ex { display: grid; grid-template-columns: minmax(16.25rem, 2fr) 3fr; gap: 1.75rem; align-items: center; }
  .lp-ex-list.is-single .lp-ex.is-portrait { grid-template-columns: minmax(15rem, 1fr) 2fr; }
  .lp-ex-list.is-single .lp-ex .lp-media { margin: 0; max-width: none; }
  .lp-ex-list.is-single .lp-ex.is-portrait .lp-media { max-width: 21.25rem; }
  .lp-ex-list.is-single .lp-ex strong { font-size: clamp(1.188rem, calc(1.082rem + 0.3509vw), 1.438rem); }
  .lp-ex-list.is-single .lp-ex p { font-size: 0.9688rem; }
}

.lp-gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(9.375rem, calc(6.743rem + 8.772vw), 15.62rem); gap: 0.625rem; margin: 0 0 var(--lh-base); }
.lp-gallery figure { margin: 0; height: 100%; overflow: hidden; grid-column: span 2; }
.lp-gallery figure.is-wide { grid-column: span 4; }
.lp-gallery figure.is-half { grid-column: span 3; }
.lp-gallery figure.is-tall { grid-row: span 2; }
.lp-gallery picture, .lp-gallery img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
@media (max-width: 47.4375em) { .lp-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(8.75rem, calc(7.171rem + 5.263vw), 12.5rem); } .lp-gallery figure, .lp-gallery figure.is-half { grid-column: span 1; } .lp-gallery figure.is-wide { grid-column: span 2; } .lp-gallery figure.is-tall { grid-row: span 1; } }

.lp-ref-box { display: grid; grid-template-columns: minmax(12.5rem, 2fr) 3fr; gap: 0; margin: 0 0 var(--lh-base); background: var(--c-surface); overflow: hidden; }
.lp-ref-pic { display: block; margin: 0; height: 100%; }
.lp-ref-pic img { display: block; width: 100%; height: 100%; min-height: 15rem; object-fit: cover; margin: 0; }
.lp-ref-body { padding: clamp(1.375rem, calc(1.007rem + 1.228vw), 2.25rem) clamp(1.375rem, calc(0.9013rem + 1.579vw), 2.5rem); }
.lp-ref-num { margin: 0 0 0.5rem; font-size: 0.9375rem; color: hsl(0 0.0% 25.5% / 0.85); }
.lp-ref-num strong { font-family: var(--f-display); font-size: clamp(1.875rem, calc(1.559rem + 1.053vw), 2.625rem); line-height: 1; color: var(--c-primary); margin-right: 0.5rem; }
.lp-ref-body h3 { margin: 0 0 0.5rem; font-size: clamp(1.25rem, calc(1.145rem + 0.3509vw), 1.5rem); }
.lp-ref-body p { font-size: 0.9688rem; }
.lp-ref-body .btn { margin-bottom: 0; }
@media (max-width: 47.4375em) { .lp-ref-box { grid-template-columns: 1fr; } .lp-ref-pic img { min-height: 0; aspect-ratio: 3 / 2; } }

.lp-check li strong { color: var(--c-primary); }

.lp-chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 0 var(--lh-base); padding: 0; }
.lp-chips li { padding: 0 !important; margin: 0 !important; }
.lp-chips a { display: inline-block; padding: 0.5625rem 1rem; border: 0.0625rem solid var(--c-border); border-radius: 62.44rem; text-decoration: none; font-size: 0.9062rem; color: var(--c-text); transition: border-color var(--transition), color var(--transition); }
.lp-chips a:hover, .lp-chips a:focus-visible { border-color: var(--c-primary); color: var(--c-primary); }
.lp-faq .faq-container:last-of-type { margin-bottom: 0; }
.lp-faq { margin-bottom: clamp(1.5rem, calc(1.079rem + 1.404vw), 2.5rem); }

.navi-lp-row { background: var(--c-surface); }
.navi-lp { padding: clamp(1.75rem, calc(1.329rem + 1.404vw), 2.75rem) 0 clamp(1.75rem, calc(1.329rem + 1.404vw), 2.75rem); }
.navi-lp-title { margin: 0 0 0.875rem; }
.navi-lp-grid { display: grid; gap: 1.125rem var(--gap); grid-template-columns: 2fr 1fr 1fr; }
.navi-lp-col.is-wide .navi-lp-list { columns: 2; column-gap: var(--gap); }
.navi-lp-list li { margin: 0; padding: 0.1875rem 0; break-inside: avoid; }
.navi-lp-group { margin: 0 0 0.375rem; font-size: 0.7812rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-link); }
.navi-lp-list li a { text-decoration: none; font-weight: 300; font-size: 0.9062rem; color: var(--c-text); transition: color var(--transition); }
.navi-lp-list li a:hover, .navi-lp-list li a:focus-visible { color: var(--c-primary); }
.navi-lp-list li.active a { font-weight: 500; color: var(--c-link); }
@media (max-width: 62em) { .navi-lp-grid { grid-template-columns: 1fr 1fr; } .navi-lp-col.is-wide { grid-column: span 2; } }
@media (max-width: 40em) { .navi-lp-grid { grid-template-columns: 1fr; } .navi-lp-col.is-wide { grid-column: auto; } .navi-lp-col.is-wide .navi-lp-list { columns: 1; } }


/* ===== motion ===== */

:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1); }

html.motion .rv { opacity: 0; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--rv-delay, 0ms); will-change: opacity, transform; }
html.motion .rv-up { transform: translate3d(0, 36px, 0); }
html.motion .rv-left { transform: translate3d(-40px, 0, 0); }
html.motion .rv-right { transform: translate3d(40px, 0, 0); }
html.motion .rv.is-in { opacity: 1; transform: none; }
html.motion .rv.is-in.rv-up, html.motion .rv.is-in.rv-left, html.motion .rv.is-in.rv-right { will-change: auto; }

html.motion .split .w { display: inline-block; opacity: 0; transform: translate3d(0, .6em, 0) rotate(1.5deg); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--w-delay, 0ms); }
html.motion .split.is-in .w, html.motion body.hero-in #header .claim .w { opacity: 1; transform: none; }
html.motion .split > span:not(.w):not(.br) { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out) .35s, transform .8s var(--ease-out) .35s; }
html.motion .split.is-in > span:not(.w):not(.br), html.motion body.hero-in #header .claim > span { opacity: 1; transform: none; }

html.motion #header .header-img, html.motion #header .teaser figure, html.motion main .section figure,
html.motion main .section.double .bg-img-row .col, html.motion main .tarif-section > figure, html.motion #footer .footer-img,
html.motion body.blog main .box > a { overflow: hidden; }
html.motion #header .header-img img, html.motion #header .header-img video, html.motion main .section figure img, html.motion main .section figure video, html.motion main .tarif-section > figure img,
html.motion #footer .footer-img img, html.motion body.blog main .box img, html.motion #header .teaser figure img { will-change: transform; transform-origin: center; backface-visibility: hidden; }
html.motion main .section figure a, html.motion main .section figure picture { overflow: hidden; }

html.motion #header .header-img img, html.motion #header .header-img video { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
html.motion body.hero-in #header .header-img img, html.motion body.hero-in #header .header-img video { opacity: 1; }
html.motion #header .sm-list li { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.motion body.hero-in #header .sm-list li { opacity: 1; transform: none; }
html.motion body.hero-in #header .sm-list li:nth-child(1) { transition-delay: .5s; }
html.motion body.hero-in #header .sm-list li:nth-child(2) { transition-delay: .6s; }
html.motion body.hero-in #header .sm-list li:nth-child(3) { transition-delay: .7s; }
html.motion body.hero-in #header .sm-list li:nth-child(4) { transition-delay: .8s; }
html.motion #header .claim .w { transition-delay: calc(.35s + var(--w-delay, 0ms)); }
html.motion #header .claim > span { transition-delay: .75s; }
html.motion #header .claim-col .btn { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out) .95s, transform .7s var(--ease-out) .95s, background-color .3s; }
html.motion body.hero-in #header .claim-col .btn { opacity: 1; transform: none; }
html.motion #header .teaser-row .col { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.motion body.hero-in #header .teaser-row .col { opacity: 1; transform: none; }
html.motion body.hero-in #header .teaser-row .col:nth-child(1) { transition-delay: .6s; }
html.motion body.hero-in #header .teaser-row .col:nth-child(2) { transition-delay: .75s; }
html.motion #navigation .branding img { opacity: 0; transform: translateY(-8px); transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-out) .1s, max-width .3s; }
html.motion body.hero-in #navigation .branding img { opacity: 1; transform: none; }
html.motion #navigation .navi > li { opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.motion body.hero-in #navigation .navi > li { opacity: 1; transform: none; }
html.motion body.hero-in #navigation .navi > li:nth-child(1) { transition-delay: .2s; }
html.motion body.hero-in #navigation .navi > li:nth-child(2) { transition-delay: .26s; }
html.motion body.hero-in #navigation .navi > li:nth-child(3) { transition-delay: .32s; }
html.motion body.hero-in #navigation .navi > li:nth-child(4) { transition-delay: .38s; }
html.motion body.hero-in #navigation .navi > li:nth-child(5) { transition-delay: .44s; }
html.motion body.hero-in #navigation .navi > li:nth-child(6) { transition-delay: .5s; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1200; pointer-events: none; background: var(--c-primary); transform-origin: left; transform: scaleX(var(--scroll-progress, 0)); }

html.motion #header .teaser { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease-soft); transform-style: preserve-3d; }
html.motion #header .teaser figure::before { background-size: 100% 200%; background-position: 0 0; transition: opacity .5s, background-position .8s var(--ease-soft); }
html.motion #header .teaser:hover figure::before { background-position: 0 100%; }
html.motion #header .teaser .text { transform: translateY(8px); transition: transform .5s var(--ease-soft); }
html.motion #header .teaser:hover .text { transform: none; }

html.motion main .tarif { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease-soft), box-shadow .35s; }
html.motion main .tarif:hover { box-shadow: 0 1.5rem 3rem -0.75rem hsl(0 0.0% 25.5% / 0.35); }
html.motion main .tarif.rv.is-in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
html.motion main .box.bg-color-surface, html.motion body.blog main .box { transition: transform .4s var(--ease-soft), box-shadow .4s, opacity .9s var(--ease-out); }
html.motion main .box.bg-color-surface:hover, html.motion body.blog main .box:hover { transform: translateY(-6px); box-shadow: 0 1.125rem 2.25rem -0.875rem hsl(0 0.0% 25.5% / 0.3); }
html.motion body.blog main .box img { transition: transform .6s var(--ease-soft); }
html.motion .social-recruiting-leistungen .leistung { transition: transform .4s var(--ease-soft), box-shadow .4s; }
html.motion .social-recruiting-leistungen .leistung:hover { transform: translateY(-6px); box-shadow: #b6b6b6 0 12px 28px; }

html.motion main .leistungen::before { display: inline-block; transition: transform .6s var(--ease-soft); }
html.motion main .leistungen:hover::before { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { transition: transform .35s var(--ease-soft); }
.btn:hover::before { transform: translateX(4px); }
html.motion .btn { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .25s var(--ease-soft), background-color .3s, color .3s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-soft); }
.btn:hover::after { transform: translateX(120%); }

@media (min-width: 62em) {
  #navigation .navi > li > a, #navigation .navi > li > .sub-toggle { position: relative; }
  #navigation .navi > li > a:not(.sub-toggle)::after, #navigation .navi > li > .sub-toggle::before { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--c-primary); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-soft); }
  #navigation .navi > li > a:not(.sub-toggle):hover::after, #navigation .navi > li > .sub-toggle:hover::before, #navigation .navi > li > a.active:not(.sub-toggle)::after, #navigation .navi > li > .sub-toggle.active::before { transform: scaleX(1); }
  #navigation .navi > li > .sub-toggle::before { right: 1.4em; width: auto; }
}

#header .sm-list a { transition: transform .3s var(--ease-soft), opacity .3s; }
#header .sm-list a:hover { transform: translateY(-3px) scale(1.12); opacity: 1; }
.cta-item .cta-icon { transition: transform .3s var(--ease-soft), opacity .35s; }
.cta-item:hover .cta-icon { transform: scale(1.15); }

html.motion main .section figure picture { transition: clip-path 1s var(--ease-out); }

a.lightbox-zoom-image::before, .lightbox-zoom-image > a::before, .modalGallery a::before { transition: all .4s var(--ease-soft); }

html.motion .faq-answer-wrapper.open { animation: faq-in .45s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cookie-banner.open .cookie-box { animation: pop-in .45s var(--ease-out); }
.lightbox.open img { animation: pop-in .35s var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rv, .split .w, .scroll-progress { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}


/* ===== greenie ===== */

:root { --greenie-dark: #228656; --greenie-light: #7ED957; --greenie-mid: #4faa6e; --greenie-ink: #0f3d24; --greenie-z: 900; }

.greenie-wrap { z-index: var(--greenie-z); pointer-events: none; opacity: 1; will-change: transform; }
.greenie-wrap.clip { overflow: hidden; }
.greenie-wrap.fade { opacity: 0; transition: opacity .5s var(--ease-out); }
.greenie-wrap.fade.in { opacity: 1; }
.greenie-wrap.clip { opacity: 1; }
.greenie-wrap:not(.in) .greenie.slide { transition: transform .6s var(--ease-out); }
.greenie-wrap.in .greenie.slide { transition: transform .7s var(--ease-soft); transform: translate3d(0, 0, 0); }
.greenie.slide-up { transform: translate3d(0, 100%, 0); }
.greenie.slide-down { transform: translate3d(0, -100%, 0); }
.greenie.slide-right { transform: translate3d(-100%, 0, 0); }
.greenie.slide-left { transform: translate3d(100%, 0, 0); }
.greenie-wrap.clip .greenie { position: absolute; bottom: 0; left: 0; }
.greenie-wrap.clip .greenie.slide-down { bottom: auto; top: 0; }
.greenie-wrap.clip .greenie.slide-left { left: auto; right: 0; }

.greenie { --g-size: 76px; position: relative; width: calc(var(--g-size) * .85); height: var(--g-size); pointer-events: none; }
.greenie.flip .greenie-btn { transform: scaleX(-1); }
.greenie-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; display: block; cursor: pointer; pointer-events: auto; transform-origin: 50% 100%; }
.greenie-btn:focus-visible { outline: var(--focus-outline); outline-offset: 0.1875rem; }
.greenie-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(15, 61, 36, .18)); }
.greenie-svg * { transform-box: fill-box; }
.greenie-svg .p-dark { fill: var(--greenie-dark); }
.greenie-svg .p-light { fill: var(--greenie-light); }
.greenie-svg .p-mid { fill: var(--greenie-mid); }
.greenie-svg .g-leg path, .greenie-svg .g-arm path { fill: none; stroke: var(--greenie-dark); stroke-width: 4.5; stroke-linecap: round; }
.greenie-svg .hand { fill: var(--greenie-dark); }
.greenie-svg .eye-white { fill: #fff; }
.greenie-svg .pupil { fill: var(--greenie-ink); transition: transform .25s var(--ease-out); }
.greenie-svg .lid { fill: var(--greenie-dark); transform: scaleY(0); transform-origin: 50% 0; animation: greenie-blink 5.2s infinite; }
.greenie-svg .g-eye-r .lid { fill: var(--greenie-mid); animation-delay: .08s; }
.greenie-svg .mouth { fill: none; stroke: var(--greenie-ink); stroke-width: 2.4; stroke-linecap: round; }
.greenie-svg .mouth-o { fill: var(--greenie-ink); opacity: 0; }
.greenie-svg .cheek { fill: var(--greenie-light); opacity: .55; }
.greenie-svg .g-leg { transform-origin: 50% 0; }
.greenie-svg .g-arm-l { transform-origin: 100% 0; }
.greenie-svg .g-arm-r { transform-origin: 0 0; }
.greenie-svg .g-all { transform-box: view-box; transform-origin: 40px 120px; }
.greenie-svg .g-body { transform-box: view-box; transform-origin: 38px 96px; animation: greenie-breathe 3.6s ease-in-out infinite; }
@keyframes greenie-blink { 0%, 91%, 100% { transform: scaleY(0); } 94%, 97% { transform: scaleY(1); } }
@keyframes greenie-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }

.pose-peek .g-leg, .pose-peek .g-arm { opacity: 0; }
.pose-peek .greenie-svg { transform: translateY(18%); }
.slide-down.pose-peek .greenie-svg { transform: translateY(-2%); }
.pose-peek .pupil { animation: greenie-look 4s ease-in-out infinite; }
@keyframes greenie-look { 0%, 35%, 100% { transform: translate(0, 0); } 45%, 70% { transform: translate(-2.2px, .4px); } 80% { transform: translate(1.4px, -.6px); } }

.pose-sit .g-leg-l { transform: rotate(-52deg); animation: greenie-dangle 2.6s ease-in-out infinite; }
.pose-sit .g-leg-r { transform: rotate(-52deg); animation: greenie-dangle 2.6s ease-in-out infinite reverse; }
.pose-sit .g-leg .foot { transform: rotate(52deg); transform-origin: 0 50%; }
@keyframes greenie-dangle { 0%, 100% { transform: rotate(-44deg); } 50% { transform: rotate(-62deg); } }
.pose-sit .g-arm-l { transform: rotate(-10deg); }

.pose-walk .g-leg-l { animation: greenie-step 0.55s ease-in-out infinite; }
.pose-walk .g-leg-r { animation: greenie-step 0.55s ease-in-out infinite reverse; }
.pose-walk .g-arm-l { animation: greenie-swing 0.55s ease-in-out infinite reverse; }
.pose-walk .g-arm-r { animation: greenie-swing 0.55s ease-in-out infinite; }
.pose-walk .g-all { animation: greenie-bob 0.55s ease-in-out infinite; }
@keyframes greenie-step { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-26deg); } }
@keyframes greenie-swing { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes greenie-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.pose-whistle .mouth { opacity: 0; }
.pose-whistle .mouth-o { opacity: 1; }
.pose-whistle .g-all { animation: greenie-sway 2.2s ease-in-out infinite; }
@keyframes greenie-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.pose-sleep .lid { transform: scaleY(1); animation: none; }
.pose-sleep .mouth { d: path("M34 74 q6 2 12 0"); }
.pose-sleep .g-body { animation-duration: 5s; }
.pose-sleep .g-all { transform: rotate(7deg); }

.pose-coffee .g-arm-r { transform: rotate(-45deg); }
.pose-coffee .g-arm-r .hand { display: none; }
.pose-grill .g-arm-r { transform: rotate(-25deg); }

.pose-happy .g-all { animation: greenie-jump .9s var(--ease-out) infinite; }
.pose-happy .mouth { d: path("M30 72 q10 10 20 -2"); stroke-width: 3; }
.pose-happy .g-arm-l { transform: rotate(-120deg); }
.pose-happy .g-arm-r { transform: rotate(120deg); }
@keyframes greenie-jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-16px) scale(.96, 1.06); } 60% { transform: translateY(0) scale(1.04, .96); } }

.react-startle .g-eye { animation: greenie-big .9s var(--ease-out); }
.react-startle .g-all { animation: greenie-hop .5s var(--ease-out); }
.react-shy .pupil { transform: translate(-2.5px, 1px); }
.react-shy .g-all { transform: rotate(-4deg); transition: transform .3s; }
@keyframes greenie-big { 0%, 100% { transform: scale(1); } 20%, 70% { transform: scale(1.4); } }
@keyframes greenie-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
.greenie.caught .greenie-btn { animation: greenie-caught .8s var(--ease-out); }
.greenie.flip.caught .greenie-btn { animation-name: greenie-caught-flip; }
.caught .mouth { d: path("M30 72 q10 10 20 -2"); }
@keyframes greenie-caught { 0% { transform: scale(1); } 30% { transform: translateY(-14px) rotate(-8deg) scale(1.08); } 60% { transform: translateY(0) rotate(6deg); } 100% { transform: none; } }
@keyframes greenie-caught-flip { 0% { transform: scaleX(-1); } 30% { transform: scaleX(-1) translateY(-14px) rotate(-8deg) scale(1.08); } 60% { transform: scaleX(-1) translateY(0) rotate(6deg); } 100% { transform: scaleX(-1); } }

.greenie-props { position: absolute; inset: 0; pointer-events: none; }
.greenie-prop { position: absolute; overflow: visible; }
.prop-notes { width: calc(var(--g-size) * .5); height: calc(var(--g-size) * .5); right: calc(var(--g-size) * -.32); top: calc(var(--g-size) * -.12); }
.prop-notes .note { fill: var(--greenie-dark); stroke: var(--greenie-dark); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: greenie-note 2.4s ease-out infinite; }
.prop-notes .note path { fill: none; }
.prop-notes .n2 { animation-delay: .8s; } .prop-notes .n3 { animation-delay: 1.6s; }
@keyframes greenie-note { 0% { opacity: 0; transform: translate(0, 12px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -30px) scale(1.05) rotate(12deg); } }
.prop-zzz { width: calc(var(--g-size) * .55); height: calc(var(--g-size) * .55); right: calc(var(--g-size) * -.3); top: calc(var(--g-size) * -.22); }
.prop-zzz .z { fill: var(--greenie-dark); font: 700 22px var(--f-display); opacity: 0; animation: greenie-zzz 3s ease-in-out infinite; }
.prop-zzz .z2 { animation-delay: 1s; font-size: 20px; } .prop-zzz .z3 { animation-delay: 2s; font-size: 18px; }
@keyframes greenie-zzz { 0% { opacity: 0; transform: translate(0, 8px); } 30% { opacity: .95; } 100% { opacity: 0; transform: translate(10px, -22px); } }
.prop-cup { width: calc(var(--g-size) * .3); height: calc(var(--g-size) * .33); right: calc(var(--g-size) * -.06); top: calc(var(--g-size) * .3); }
.prop-cup .cup { fill: #fff; stroke: var(--greenie-ink); stroke-width: 2.5; }
.prop-cup .coffee { fill: var(--greenie-ink); }
.prop-cup .handle { fill: none; stroke: var(--greenie-ink); stroke-width: 2.5; }
.prop-cup .steam { fill: none; stroke: var(--greenie-mid); stroke-width: 2.4; stroke-linecap: round; opacity: 0; animation: greenie-steam 2.2s ease-out infinite; }
.prop-cup .s2 { animation-delay: .9s; }
@keyframes greenie-steam { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }
.prop-grill { width: calc(var(--g-size) * .72); height: calc(var(--g-size) * .63); left: calc(100% - var(--g-size) * .12); bottom: 0; }
.prop-grill .bowl { fill: var(--greenie-ink); }
.prop-grill .bowl-body { fill: var(--greenie-ink); }
.prop-grill .grate { fill: none; stroke: #8fb6a0; stroke-width: 1.6; }
.prop-grill .wurst { fill: none; stroke: #c96b3c; stroke-width: 5; stroke-linecap: round; }
.prop-grill .leg { fill: none; stroke: var(--greenie-ink); stroke-width: 3; stroke-linecap: round; }
.prop-grill .smoke { fill: none; stroke: #9aa5a0; stroke-width: 2.6; stroke-linecap: round; opacity: 0; animation: greenie-steam 2.8s ease-out infinite; }
.prop-grill .k2 { animation-delay: 1.3s; }
.prop-sparks { width: calc(var(--g-size) * 1.6); height: calc(var(--g-size) * 1.6); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.prop-sparks .spark { fill: var(--greenie-light); transform-box: view-box; transform-origin: 50px 50px; animation: greenie-spark .8s var(--ease-out) forwards; }
@keyframes greenie-spark { 0% { transform: rotate(var(--a)) translateY(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-44px) scale(.4); opacity: 0; } }

.greenie-toast {
  position: fixed; z-index: calc(var(--greenie-z) + 1); transform: translate(-50%, calc(-100% + 8px)); opacity: 0; pointer-events: none;
  background: var(--greenie-dark); color: #fff; font: 500 0.875rem / 1.3 var(--f-main); padding: 0.5rem 0.875rem; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15, 61, 36, .18); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.greenie-toast.in { opacity: 1; transform: translate(-50%, -100%); }

.greenie-finale { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: var(--gap); background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s var(--ease-out); }
.greenie-finale.in { opacity: 1; }
.greenie-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.greenie-finale-box { position: relative; text-align: center; max-width: 26.25rem; transform: translateY(16px); transition: transform .6s var(--ease-out); }
.greenie-finale.in .greenie-finale-box { transform: none; }
.greenie-finale-figure { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.greenie-finale-figure .greenie { --g-size: 150px; }
.greenie-finale-figure .greenie-btn { cursor: default; }
.greenie-stars { display: flex; justify-content: center; gap: 0.375rem; font-size: 2.125rem; line-height: 1; color: var(--greenie-dark); margin-bottom: 1rem; min-height: 2.375rem; }
.greenie-stars .star { display: inline-block; opacity: 0; transform: scale(.2) rotate(-30deg); transition: transform .5s var(--ease-out), opacity .3s; }
.greenie-finale.stars .star { opacity: 1; transform: none; }
.greenie-finale.stars .star:nth-child(2) { transition-delay: .15s; } .greenie-finale.stars .star:nth-child(3) { transition-delay: .3s; }
.greenie-finale.stars .star:nth-child(4) { transition-delay: .45s; } .greenie-finale.stars .star:nth-child(5) { transition-delay: .6s; }
.greenie-finale-text { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, calc(1.092rem + 0.5263vw), 1.625rem); color: var(--c-tertiary); margin: 0 0 1.125rem; opacity: 0; transition: opacity .6s .5s; }
.greenie-finale.stars .greenie-finale-text { opacity: 1; }
.greenie-finale-close { appearance: none; border: 0; cursor: pointer; background: var(--greenie-dark); color: #fff; font: 500 0.9375rem / var(--lh-base) var(--f-main); padding: 0.75rem 1.5rem; transition: background var(--transition); }
.greenie-finale-close:hover, .greenie-finale-close:focus-visible { background: var(--c-primary-hover); outline: none; }
@media (max-width: 39.9375em) { .greenie-finale-figure .greenie { --g-size: 110px; } .greenie-stars { font-size: 1.75rem; } }

.greenie-debug-anchor { position: absolute; z-index: 890; pointer-events: none; outline: 2px dashed var(--greenie-light); outline-offset: -2px; font: 500 11px var(--f-main); color: var(--greenie-dark); padding: 2px 4px; background: rgba(126, 217, 87, .08); }

.greenie-wrap.reduced, .greenie-finale.reduced { transition-duration: .25s; }
.greenie-wrap.reduced .greenie.slide { transition-duration: .3s; }
.greenie-wrap.reduced .greenie-svg *, .greenie-wrap.reduced .greenie-prop *, .greenie-finale.reduced .greenie-svg *, .greenie-finale.reduced .greenie-prop * { animation: none !important; }
.greenie-wrap.reduced .pose-sit .g-leg-l, .greenie-wrap.reduced .pose-sit .g-leg-r { transform: rotate(-78deg); }
.greenie-wrap.reduced .prop-notes .note, .greenie-wrap.reduced .prop-zzz .z, .greenie-wrap.reduced .steam, .greenie-wrap.reduced .smoke { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .greenie-svg *, .greenie-prop * { animation: none !important; }
  .greenie-stars .star { transition: none; }
}
@media print { .greenie-wrap, .greenie-toast, .greenie-finale, .greenie-debug-anchor { display: none !important; } }