/* ==========================================================================
   REGIOS Energiegenossenschaft — main stylesheet
   Clean rebuild of the Squarespace 7.1 design (fluid engine).
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face { font-family: Gilroy; src: url(../fonts/Gilroy.woff2) format("woff2"), url(../fonts/Gilroy.woff) format("woff"); font-display: swap; }
@font-face{font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Raleway-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Raleway-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Raleway-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Raleway-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Raleway-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Raleway-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Raleway-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Raleway-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/Raleway-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/Raleway-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- palette + tokens ---------- */
:root {
  --white-hsl: 44.21, 90.48%, 95.88%;        /* cream */
  --lightAccent-hsl: 42.95, 93.14%, 60%;     /* yellow */
  --accent-hsl: 108.2, 100%, 65.1%;          /* green */
  --darkAccent-hsl: 260.4, 100%, 70.59%;     /* purple */
  --black-hsl: 0, 0%, 38.43%;                /* gray */
  --safeLightAccent-hsl: 108.2, 100%, 65.1%;
  --safeDarkAccent-hsl: 0, 0%, 0%;
  --safeInverseAccent-hsl: 0, 0%, 0%;
  --safeInverseDarkAccent-hsl: 0, 0%, 100%;

  --maxPageWidth: 1200px;
  --pagePadding: 4vw;
  --sqs-site-max-width: var(--maxPageWidth);
  --sqs-site-gutter: var(--pagePadding);
  --sqs-mobile-site-gutter: 6vw;

  --heading-1: 4.5;
  --heading-2: 3.5;
  --heading-3: 2.2;
  --heading-4: 1.4;
  --large-text: 2.2;

  --body-font: "Raleway", sans-serif;
  --heading-font: Gilroy, "Raleway", sans-serif;
  --meta-font: "Poppins", sans-serif;
}

/* ---------- theme color sets (extracted from Squarespace theme CSS) ---------- */
:root, .theme-default, [data-theme=""] {
  --bg: hsla(var(--white-hsl), 1);
  --h1c: hsla(var(--darkAccent-hsl), 1);
  --h2c: hsla(var(--darkAccent-hsl), 1);
  --h3c: hsla(var(--black-hsl), 1);
  --h4c: hsla(var(--black-hsl), 1);
  --plc: hsla(var(--darkAccent-hsl), 1);
  --pmc: hsla(var(--darkAccent-hsl), 1);
  --psc: hsla(var(--black-hsl), 1);
  --btnbg: hsla(var(--accent-hsl), 1);
  --btnc: hsla(var(--darkAccent-hsl), 1);
  --navc: hsla(var(--black-hsl), 1);
  --tcb: hsla(var(--lightAccent-hsl), 1);
}
[data-theme="white"] { /* same as default */
  --bg: hsla(var(--white-hsl), 1);
}
[data-theme="white-bold"] {
  --tcb: hsla(var(--lightAccent-hsl), 1);
  --bg: hsla(var(--white-hsl), 1);
  --h1c: hsla(var(--safeDarkAccent-hsl), 1); --h2c: hsla(var(--safeDarkAccent-hsl), 1);
  --h3c: hsla(var(--safeDarkAccent-hsl), 1); --h4c: hsla(var(--safeDarkAccent-hsl), 1);
  --plc: hsla(var(--black-hsl), 1); --pmc: hsla(var(--black-hsl), 1); --psc: hsla(var(--black-hsl), 1);
  --btnbg: hsla(var(--lightAccent-hsl), 1); --btnc: hsla(var(--safeInverseDarkAccent-hsl), 1);
  --navc: hsla(var(--black-hsl), 1);
}
[data-theme="light"] {
  --tcb: hsla(var(--white-hsl), 1);
  --bg: hsla(var(--lightAccent-hsl), 1);
  --h1c: hsla(var(--black-hsl), 1); --h2c: hsla(var(--black-hsl), 1);
  --h3c: hsla(var(--black-hsl), 1); --h4c: hsla(var(--black-hsl), 1);
  --plc: hsla(var(--black-hsl), 1); --pmc: hsla(var(--black-hsl), 1); --psc: hsla(var(--black-hsl), 1);
  --btnbg: hsla(var(--safeDarkAccent-hsl), 1); --btnc: hsla(var(--safeInverseDarkAccent-hsl), 1);
  --navc: hsla(var(--black-hsl), 1);
}
[data-theme="light-bold"] {
  --tcb: hsla(var(--white-hsl), 1);
  --bg: hsla(var(--lightAccent-hsl), 1);
  --h1c: hsla(var(--safeDarkAccent-hsl), 1); --h2c: hsla(var(--safeDarkAccent-hsl), 1);
  --h3c: hsla(var(--safeDarkAccent-hsl), 1); --h4c: hsla(var(--safeDarkAccent-hsl), 1);
  --plc: hsla(var(--black-hsl), 1); --pmc: hsla(var(--black-hsl), 1); --psc: hsla(var(--black-hsl), 1);
  --btnbg: hsla(var(--darkAccent-hsl), 1); --btnc: hsla(var(--safeInverseDarkAccent-hsl), 1);
  --navc: hsla(var(--black-hsl), 1);
}
[data-theme="dark"] {
  --tcb: hsla(var(--white-hsl), 1);
  --bg: hsla(var(--darkAccent-hsl), 1);
  --h1c: hsla(var(--white-hsl), 1); --h2c: hsla(var(--white-hsl), 1);
  --h3c: hsla(var(--white-hsl), 1); --h4c: hsla(var(--white-hsl), 1);
  --plc: hsla(var(--white-hsl), 1); --pmc: hsla(var(--white-hsl), 1); --psc: hsla(var(--white-hsl), 1);
  --btnbg: hsla(var(--safeLightAccent-hsl), 1); --btnc: hsla(var(--darkAccent-hsl), 1);
  --navc: hsla(var(--white-hsl), 1);
}
[data-theme="dark-bold"] {
  --tcb: hsla(235.71, 93.33%, 94.12%, 1);
  --bg: hsla(235.71, 93.33%, 94.12%, 1);
  --h1c: hsla(var(--darkAccent-hsl), 1); --h2c: hsla(var(--darkAccent-hsl), 1);
  --h3c: hsla(var(--darkAccent-hsl), 1); --h4c: hsla(var(--darkAccent-hsl), 1);
  --plc: hsla(var(--darkAccent-hsl), 1); --pmc: hsla(var(--darkAccent-hsl), 1); --psc: hsla(var(--darkAccent-hsl), 1);
  --btnbg: hsla(var(--safeLightAccent-hsl), 1); --btnc: hsla(var(--darkAccent-hsl), 1);
  --navc: hsla(var(--darkAccent-hsl), 1);
}
[data-theme="bright"] {
  --tcb: hsla(var(--safeInverseAccent-hsl), 1);
  --bg: hsla(105.26, 96.61%, 88.43%, 1);
  --h1c: hsla(var(--safeInverseAccent-hsl), 1); --h2c: hsla(var(--safeInverseAccent-hsl), 1);
  --h3c: hsla(var(--safeInverseAccent-hsl), 1); --h4c: hsla(var(--safeInverseAccent-hsl), 1);
  --plc: hsla(var(--safeInverseAccent-hsl), 1); --pmc: hsla(var(--safeInverseAccent-hsl), 1); --psc: hsla(var(--safeInverseAccent-hsl), 1);
  --btnbg: hsla(var(--safeInverseAccent-hsl), 1); --btnc: hsla(var(--accent-hsl), 1);
  --navc: hsla(var(--safeInverseAccent-hsl), 1);
}
[data-theme="bright-inverse"] {
  --tcb: hsla(var(--accent-hsl), 1);
  --bg: hsla(40, 75%, 85.88%, 1);
  --h1c: hsla(var(--lightAccent-hsl), 1); --h2c: hsla(var(--lightAccent-hsl), 1);
  --h3c: hsla(var(--lightAccent-hsl), 1); --h4c: hsla(var(--lightAccent-hsl), 1);
  --plc: hsla(42.86, 100%, 42.55%, 1); --pmc: hsla(42.86, 100%, 42.55%, 1); --psc: hsla(42.86, 100%, 42.55%, 1);
  --btnbg: hsla(var(--accent-hsl), 1); --btnc: hsla(var(--safeInverseAccent-hsl), 1);
  --navc: hsla(var(--accent-hsl), 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body-font);
  font-weight: 400;
  /* fluid body text: scales with viewport, caps at 1.25rem (20px) once the page hits --maxPageWidth */
  font-size: min(calc((1.25 - 1) * 1.2vw + 1rem), max(calc((1.25 - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(1.25 * 1rem)));
  line-height: 1.4em;
  background: hsla(var(--white-hsl), 1);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- overscroll backgrounds ----------
   Browsers paint the canvas (html background) beyond the page edges when
   rubber banding. Default: the first section colour of the page, so pulling
   past the top matches. site.js swaps the canvas to footer purple once the
   user is in the lower half, so pulling past the bottom matches the footer. */
html { background: var(--overscroll-top, hsla(var(--white-hsl), 1)); }
html.a11y-contrast { background: #fff !important; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--heading-font);
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
h1 { font-size: min(calc((var(--heading-1) - 1) * 1.2vw + 1rem), max(calc((var(--heading-1) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-1) * 1rem))); color: var(--h1c); line-height: .86em; }
h2 { font-size: min(calc((var(--heading-2) - 1) * 1.2vw + 1rem), max(calc((var(--heading-2) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-2) * 1rem))); color: var(--h2c); line-height: .9em; }
h3 { font-size: min(calc((var(--heading-3) - 1) * 1.2vw + 1rem), max(calc((var(--heading-3) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-3) * 1rem))); color: var(--h3c); line-height: .952em; }
h4 { font-size: min(calc((var(--heading-4) - 1) * 1.2vw + 1rem), max(calc((var(--heading-4) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-4) * 1rem))); color: var(--h4c); line-height: .984em; }
p {
  margin: 1rem 0;
  color: var(--pmc);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
.text-block.card { background: var(--card-bg, var(--tcb)); height: 100%; box-sizing: border-box; padding: var(--card-pad, 6% 6% 6% 6%); }
.text-block > *:first-child { margin-top: 0; }
.text-block > *:last-child { margin-bottom: 0; }
.sqsrte-large { font-size: min(calc((var(--large-text) - 1) * 1.2vw + 1rem), max(calc((var(--large-text) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--large-text) * 1rem))); color: var(--plc); line-height: 1.4em; }
/* actual small print, clearly smaller than body copy */
.sqsrte-small {
  font-size: clamp(11px, 0.62rem + 0.28vw, 14px);
  color: var(--psc);
  line-height: 1.5;
  opacity: .85;
}
.sqsrte-text-color--accent { color: hsl(var(--accent-hsl)); }
.sqsrte-text-color--lightAccent { color: hsl(var(--lightAccent-hsl)); }
.sqsrte-text-color--darkAccent { color: hsl(var(--darkAccent-hsl)); }
.sqsrte-text-color--white { color: hsl(var(--white-hsl)); }
strong { font-weight: 700; }
ul, ol { color: var(--pmc); margin: 1rem 0; padding-left: 1.5em; }
li { margin: .5em 0; white-space: pre-wrap; }
.text-block a, .rich-text a { text-decoration: none; }

/* mobile heading overrides (from the site's custom CSS), made fluid:
   anchored to the original sizes at a 375px viewport and meeting the
   desktop formula at the 768px breakpoint, so scaling is continuous */
@media screen and (max-width: 767px) {
  h1 { font-size: calc(1.62rem + 2.9vw); hyphens: auto; }   /* 36.8px @375 -> ~48px @767 */
  h2 { font-size: calc(1.19rem + 2.6vw); line-height: 1.11em; } /* 28.8px @375 -> ~39px @767 */
  p.sqsrte-large { font-size: calc(1.125rem + 1.17vw); }    /* 22.4px @375 -> ~27px @767 */
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.2em;
  font-size: min(calc((0.95 - 1) * 1.2vw + 1rem), max(calc((0.95 - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(0.95 * 1rem)));
  padding: 1.05em 1.37em;
  background: var(--btnbg);
  color: var(--btnc);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s ease;
}
.btn:hover { opacity: .85; }

/* ---------- page sections ---------- */
.page-section {
  position: relative;
  display: flex;
  background: var(--bg);
}
.page-section.height--small { min-height: 33vh; }
/* hero always ends exactly at the fold: viewport-height at every screen size,
   re-computed live by the browser on any window resize (dvh tracks mobile
   toolbars; vh is the fallback) */
.page-section:has(> .section-background .hero-video) {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Hero logo + offer cards, staged.
   Progressive enhancement: the server rendered state is the compact final
   state and works without JavaScript. With JS (html.js set before first
   paint) the hero starts in intro mode (big logo, no cards); site.js adds
   .hero-revealed after 2s or on first scroll, then drives stage classes by
   scroll position: .hero-stage-expanded (at top: big stacked cards with
   details), .hero-stage-compact (scrolling: small cards), .hero-stage-mini
   (past the hero: fixed one liner pills bottom left). Cards stay stacked in
   every stage so all size changes animate smoothly. */
.hero-logo {
  position: absolute;
  left: calc(96% - max(168px, 16vw));
  /* bottom edge lands at 93% (top + height 28%) — flush with the offer cards (bottom: 7%) */
  top: 65%;
  width: max(168px, 16vw);
  height: 28%;
  z-index: 2;
  pointer-events: none;
  transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1),
              width .9s cubic-bezier(.4,0,.2,1), height .9s cubic-bezier(.4,0,.2,1);
}
.hero-logo img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: right bottom;
  transition: object-position .9s cubic-bezier(.4,0,.2,1);
}
.js .page-section:has(> .section-background .hero-video):not(.hero-revealed) .hero-logo {
  left: var(--pagePadding);
  top: 42%;
  width: 46vw;
  height: 50%;
}
.js .page-section:has(> .section-background .hero-video):not(.hero-revealed) .hero-logo img {
  object-position: left bottom;
}

/* offer cards */
.hero-offers {
  position: absolute;
  left: var(--pagePadding);
  bottom: 6%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity .7s ease .35s, transform .7s ease .35s;
}
.js .page-section:has(> .section-background .hero-video):not(.hero-revealed) .hero-offers {
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition-delay: 0s;
}
.hero-offer-card {
  position: relative; /* anchor for the stretched link below */
  background: hsla(var(--darkAccent-hsl), 1); /* brand purple, like the site's cards */
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  padding: 15px 20px;
  width: min(460px, 44vw);
  display: flex;
  flex-direction: column;
  transition: width .6s cubic-bezier(.4,0,.2,1), padding .6s cubic-bezier(.4,0,.2,1);
}
.offer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: .45em;
}
.hero-offer-card h3 {
  color: #fff;
  font-size: clamp(1.05rem, 1.3vw, 1.4rem);
  line-height: .95;
  margin: 0;
  white-space: normal;
  transition: font-size .6s cubic-bezier(.4,0,.2,1);
}
.offer-arrow {
  position: absolute;
  right: 20px;
  bottom: 12px;
  font-family: var(--heading-font);
  color: hsl(var(--accent-hsl));
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  line-height: 1;
  transition: transform .25s ease, font-size .6s cubic-bezier(.4,0,.2,1);
}
.hero-offer-card { padding-bottom: 44px; }
/* stretched link: the whole card is clickable through the head anchor */
.offer-head::after { content: ""; position: absolute; inset: 0; }
.hero-offer-card:hover .offer-arrow { transform: translateX(6px); }
.hero-offer-card .offer-short {
  color: rgba(255, 255, 255, .88);
  font-size: min(calc((1.25 - 1) * 1.2vw + 1rem), max(calc((1.25 - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(1.25 * 1rem))); /* same as page paragraphs */
  line-height: 1.45;
  margin: 0 0 .8em;
  white-space: normal;
}
.offer-more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .6s cubic-bezier(.4,0,.2,1), opacity .45s ease;
}
.offer-more ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns to save vertical space */
  column-gap: 22px;
}
.offer-more li {
  color: rgba(255, 255, 255, .92);
  font-size: min(calc((1.25 - 1) * 1.2vw + 1rem), max(calc((1.25 - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(1.25 * 1rem))); /* same as page paragraphs */
  margin: .3em 0;
  padding-left: 1.4em;
  position: relative;
  white-space: normal;
}
.offer-more li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: hsl(var(--accent-hsl));
  font-weight: 700;
}

/* expanded: big stacked cards with the detail lists open */
.hero-stage-expanded .hero-offers { bottom: 7%; gap: 16px; }
.hero-stage-expanded .hero-offer-card {
  width: min(640px, 50vw);
  padding: clamp(18px, 1.9vw, 28px) clamp(20px, 2.1vw, 32px);
}
.hero-stage-expanded .hero-offer-card h3 { font-size: clamp(1.5rem, 2.2vw, 2.3rem); }
.hero-stage-expanded .offer-arrow { font-size: clamp(1.7rem, 2.4vw, 2.5rem); right: clamp(20px, 2.1vw, 32px); bottom: 14px; }
.hero-stage-expanded .hero-offer-card { padding-bottom: 58px; }
@media (hover: hover) {
  .hero-stage-expanded .hero-offer-card:hover .offer-more,
  .hero-stage-expanded .hero-offer-card:focus-within .offer-more { max-height: 280px; opacity: 1; }
}
@media (hover: none) {
  .hero-stage-expanded .offer-more { max-height: 280px; opacity: 1; }
}

/* ---------- tight viewport heights ----------
   The stacked hero cards must never grow into the navigation. Tiered by
   window height: first the sibling folds away while one card is hovered
   (the expanding card reuses its room), then the cards themselves compact,
   then the one liner variant. Width behaviour stays governed by the
   existing max-width rules. */
@media (hover: hover) {
  /* hero-tight is set by site.js only when measurement shows an expanding
     card would collide with the header. Only then does the sibling fold away
     while one card is hovered; with enough room the class is absent and
     nothing ever fades. */
  .hero-stage-expanded.hero-tight .hero-offer-card {
    max-height: 340px;
    transition: width .6s cubic-bezier(.4,0,.2,1), padding .45s cubic-bezier(.4,0,.2,1),
                max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  }
  .hero-stage-expanded.hero-tight .hero-offer-card:hover,
  .hero-stage-expanded.hero-tight .hero-offer-card:focus-within { max-height: 76vh; }
  .hero-stage-expanded.hero-tight .hero-offers:has(.hero-offer-card:hover) .hero-offer-card:not(:hover),
  .hero-stage-expanded.hero-tight .hero-offers:has(.hero-offer-card:focus-within) .hero-offer-card:not(:focus-within) {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    overflow: hidden;
  }
}
@media (max-height: 760px) {
  .hero-stage-expanded .hero-offers { bottom: 5%; gap: 12px; }
  .hero-stage-expanded .hero-offer-card { padding: 14px 18px 42px; }
  .hero-stage-expanded .hero-offer-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
  .hero-stage-expanded .offer-arrow { font-size: clamp(1.3rem, 1.8vw, 1.9rem); bottom: 12px; }
}
@media (max-height: 620px) {
  .page-section .hero-offers .offer-short { display: none; }
  .page-section .hero-offer-card { padding-bottom: 38px; }
  .hero-stage-expanded .hero-offer-card { padding-bottom: 38px; }
}
/* touch devices keep the details permanently open, so on short screens
   (landscape phones) they close and the cards stay compact tappable links */
@media (hover: none) and (max-height: 760px) {
  .hero-stage-expanded .offer-more { max-height: 0; opacity: 0; }
}

/* mini: sticky one liner pills once the hero is scrolled away */
.hero-stage-mini .hero-offers {
  position: fixed;
  left: 14px;
  bottom: calc(14px + var(--cta-lift, 0px));
  gap: 8px;
  z-index: 150;
  animation: heroMiniIn .4s ease;
}
@keyframes heroMiniIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero-stage-mini .hero-offer-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: auto;
  padding: 15px 22px;
  border-radius: 0;
  background: hsla(var(--darkAccent-hsl), 1);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.hero-stage-mini .hero-offer-card:hover { border-color: #fff; }
.hero-stage-mini .hero-offer-card h3 { font-size: 1.1rem; margin: 0; }
.hero-stage-mini .offer-br { display: none; }
.hero-stage-mini .offer-head h3 .sqsrte-text-color--accent { margin-right: .35em; }
.hero-stage-mini .hero-offer-card { width: min(320px, calc(100vw - 28px)); }
.hero-stage-mini .offer-head { margin: 0; gap: 8px; align-items: center; flex: 1; }
.hero-stage-mini .offer-arrow { font-size: 1.25rem; position: static; }
.hero-stage-mini .offer-short, .hero-stage-mini .offer-more { display: none; }

@media (max-width: 767px) {
  /* portrait hero: anchor video to its top so the sky stays visible */
  .section-background .hero-video { object-position: 50% 0%; }
  /* mobile hero: the big slogan opens the show, then fades away exactly when
     the offer cards come in (after 2 seconds or the first scroll) */
  .hero-logo {
    display: block;
    left: 5vw;
    top: 44%;
    width: 90vw;
    height: 46%;
    opacity: 1;
    transition: opacity .8s ease, visibility 0s .8s;
  }
  .hero-logo img { object-position: left bottom; }
  .js .page-section:has(> .section-background .hero-video):not(.hero-revealed) .hero-logo {
    display: block;
    left: 5vw;
    top: 44%;
    width: 90vw;
    height: 46%;
  }
  .js .page-section:has(> .section-background .hero-video):not(.hero-revealed) .hero-logo img {
    object-position: left bottom;
  }
  .hero-revealed .hero-logo {
    opacity: 0;
    visibility: hidden;
  }
  .hero-offers { left: 5vw; right: 5vw; bottom: 3.5%; gap: 10px; }
  .hero-offer-card { width: auto; padding: 13px 16px; }
  .hero-offer-card h3 { font-size: 1.02rem; }
  .hero-offer-card .offer-short { font-size: .9rem; margin-bottom: .7em; }
  .offer-more ul { grid-template-columns: 1fr; }
  .offer-more li { font-size: .9rem; }
  .hero-stage-expanded .hero-offer-card { width: auto; padding: 16px 18px; }
  .hero-stage-expanded .hero-offer-card h3 { font-size: 1.15rem; }
  .hero-stage-mini .hero-offers { left: 10px; right: auto; bottom: calc(10px + var(--cta-lift, 0px)); max-width: calc(100vw - 20px); }
  .hero-stage-mini .hero-offer-card { flex-wrap: wrap; gap: 8px; }
}
.page-section.height--medium { min-height: 66vh; }
.page-section.height--large { min-height: 100vh; min-height: 100dvh; }
.section-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.section-background img,
.section-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.section-overlay {
  position: absolute;
  inset: 0;
  /* Squarespace tints background media with the section theme's background
     color, not black - the 0.7 overlays on the product heroes rely on this */
  background: var(--bg);
  opacity: var(--overlay, 0);
}

/* the fixed header floats over the page; the first section clears it, like
   Squarespace's transparent-header padding. The video hero and sections with
   generous built-in padding are on their own. */
main > .page-section:first-child:not(:has(.hero-video)):not(.height--large):not(.section-breather) {
  padding-top: min(8.6vw, 140px);
}
.content-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: inherit;
}
.valign--top .content-wrapper { align-items: flex-start; }
.valign--bottom .content-wrapper { align-items: flex-end; }
.height--small .content-wrapper { padding-top: 3.3vmax; padding-bottom: 3.3vmax; }
.height--medium .content-wrapper { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }
.height--large .content-wrapper { padding-top: 10vmax; padding-bottom: 10vmax; }
.height--custom .content-wrapper { padding-top: var(--chpad, 3.3vmax); padding-bottom: var(--chpad, 3.3vmax); }
.content { width: 100%; position: relative; display: grid; }

/* ---------- fluid engine grid ---------- */
.fe {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - var(--cgm, 0px));
  --cell-max-width: calc((var(--sqs-site-max-width, 1200px) - (var(--cgm, 0px) * 7)) / 8);
  display: grid;
  position: relative;
  grid-area: 1/1/-1/-1;
  grid-template-rows: repeat(var(--rm, 8), minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: var(--rgm, 0px);
  column-gap: var(--cgm, 0px);
  overflow-x: clip;
  width: 100%;
}
@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - var(--cgd, 0px));
    --cell-max-width: calc((var(--sqs-site-max-width, 1200px) - (var(--cgd, 0px) * 23)) / 24);
    --container-width: min(var(--sqs-site-max-width, 1200px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2));
    grid-template-rows: repeat(var(--rd, 8), minmax(calc(var(--container-width) * var(--rhsf, .0215)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
    row-gap: var(--rgd, 0px);
    column-gap: var(--cgd, 0px);
  }
}
.fe > div { position: relative; }

/* blocks center their content vertically like Squarespace */
.blk { display: flex; flex-direction: column; justify-content: center; height: 100%; }

/* ---------- images ---------- */
.img-block {
  position: relative; height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.img-block a { display: block; height: 100%; width: 100%; }
.img-block img {
  width: 100%; height: 100%;
  object-fit: var(--fit, contain);
  object-position: var(--focal, 50% 50%);
}

/* ---------- video blocks ---------- */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-native { width: 100%; }
.video-native video { width: 100%; display: block; }

/* ---------- accordion ---------- */
.accordion { list-style: none; margin: 0; padding: 0; width: 100%; }
.accordion-item { border-bottom: 1px solid rgba(98, 98, 98, .5); margin: 0; color: var(--pmc); }
.accordion-item:first-child { border-top: 1px solid rgba(98, 98, 98, .5); }
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--pmc); text-align: left;
  padding: 1.5em 0; /* em: scales with the fluid body font */
}
.accordion-trigger .acc-title { font-size: 1em; font-weight: 400; }
.accordion-icon { flex: 0 0 auto; width: 1em; height: 1em; position: relative; color: hsl(var(--darkAccent-hsl)); }
.accordion-icon::before, .accordion-icon::after {
  content: ""; position: absolute; background: currentColor; transition: transform .2s ease;
}
.accordion-icon::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.accordion-icon::after { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.accordion-item.open .accordion-icon::after { transform: scaleY(0); }
.accordion-panel { display: none; padding: 0 0 1.5em; max-width: 620px; }
.accordion-item.open .accordion-panel { display: block; }

/* ---------- social icons ---------- */
.social-links { display: flex; gap: .8em; align-items: center; }
.social-links a { display: inline-flex; }
.social-links svg { width: 1.6em; height: 1.6em; fill: currentColor; }

/* ---------- header ---------- */
/* Sticky nav: always visible. At rest a purple->transparent gradient keeps the
   items readable over any hero; while scrolling, a solid purple layer fades in
   (opacity driven by --nav-solid, set from scroll position in site.js) until
   the whole bar is brand purple. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent; /* fully transparent at rest; ::before fills purple on scroll */
  color: #fff;
  transition: transform .45s ease, opacity .45s ease;
}
/* immersive video mode: chrome fades away so the film stands alone */
.video-immersive .site-header {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.video-immersive.nav-peek .site-header {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.video-immersive .hero-stage-mini .hero-offers {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
/* on phones the nav stays put during the video: the square video leaves it
   room, and there is no hover to peek it back in */
@media (max-width: 767px) {
  .video-immersive .site-header { transform: none; opacity: 1; pointer-events: auto; }
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-bg-bar, var(--nav-bg-solid, var(--nav-bg, hsla(var(--darkAccent-hsl), 1))));
  opacity: var(--nav-solid, 0);
}
.site-header.mobile-open::before { opacity: 1; } /* solid bar while the menu is open */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1vw, 16px); /* tight gap in the right cluster (login, a11y, burger) */
  /* header scales proportionally with the viewport; anchored to the original
     design (30px pad / 101px height / 188px logo / 16px nav) at ~1456px */
  padding: min(2.9vw, 48px) var(--pagePadding);
  min-height: min(8.6vw, 140px);
  box-sizing: border-box;
}
/* the logo must never be crushed by flex when space runs out — it follows its
   own gentle curve (188px @1456, ~176px @1200, ~137px @375), in step with the
   body text; the burger breakpoint below guarantees the row always fits */
.header-logo { flex: 0 0 auto; }
/* one shared control height: logo, nav pill and CTA all match (40px @1456, fluid).
   The logo (273:58) at this height keeps exactly its previous width. */
.header-inner { --hdr-h: min(calc(26px + 0.96vw), 42px); --ctrl-h: min(calc(32px + 1.4vw), 58px); }
.header-logo img { height: var(--hdr-h); width: auto; max-width: none; }
/* nav pill: always purple so the items stay readable over any hero,
   fully rounded ends (radius > height = perfect half circles) */
.header-nav {
  margin-left: auto; margin-right: auto; /* centers the pill, pushes login/a11y right */
  display: flex; align-items: center;
  gap: min(calc(-11px + 2.06vw), 25px);
  background: var(--nav-bg, hsla(var(--darkAccent-hsl), 1));
  border-radius: 0; /* brand style: square corners */
  height: var(--ctrl-h);
  padding: 0 min(calc(10px + 1.1vw), 28px);
}
.header-nav a, .header-nav .nav-link { font-size: clamp(14px, calc(13.25px + 0.375vw), 20px); /* same as footer headings */ line-height: 1.2; font-weight: 600; text-transform: uppercase; color: #fff; white-space: nowrap; }
.header-nav .nav-item--active > .nav-link { border-bottom: 2px solid currentColor; }
.header-nav > .nav-item { position: relative; }
.header-nav .nav-link { padding: .3em .1em; display: inline-block; }
.header-nav .nav-link:hover { opacity: .7; }
.nav-folder { position: relative; }
.nav-folder > .nav-link { cursor: pointer; }
.nav-folder-content {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--nav-bg-solid, var(--nav-bg, hsla(var(--darkAccent-hsl), 1)));
  padding: .8em 1.2em;
  display: none;
  min-width: 13em;
  text-align: left;
  z-index: 10;
  border-radius: 0; /* matches the nav pill */
}
/* invisible bridge over the gap so hover isn't lost between pill and dropdown */
.nav-folder-content::before {
  content: ""; position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
}
.nav-folder:hover .nav-folder-content, .nav-folder.open .nav-folder-content { display: block; }
.nav-folder-content a { display: block; line-height: 2.25em; white-space: nowrap; }
.nav-folder-content a:hover { opacity: .7; }
/* Beitreten ist der primäre CTA (grün), Anmelden sekundär (lila);
   der Login-Button öffnet ein Modal (siehe .login-modal) */
.header-login { position: relative; display: flex; align-items: center; gap: 10px; }
.join-btn,
.login-btn {
  display: inline-flex; align-items: center;
  height: var(--ctrl-h);
  padding: 0 1.9em;
  border: 0;
  border-radius: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(0.72rem, 0.25rem + 0.77vw, 1.1rem);
  cursor: pointer;
}
.join-btn {
  background: hsla(var(--accent-hsl), 1);
  color: hsla(var(--darkAccent-hsl), 1);
}
/* Anmelden ist ein reiner Icon-Button, quadratisch wie der A11y-Button */
.login-btn {
  width: var(--ctrl-h);
  justify-content: center;
  padding: 0;
  background: hsla(var(--darkAccent-hsl), 1);
  color: #fff;
}
.login-btn svg { width: 55%; height: 55%; }
.join-btn:hover, .login-btn:hover { opacity: .9; }

/* login modal: blurred, dimmed page behind a centered choice card */
.login-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 6vw;
  background: hsla(260.4, 60%, 25%, .45);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.login-modal[hidden] { display: none; }
.login-card {
  position: relative;
  background: hsla(var(--white-hsl), 1);
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 52px);
  width: min(440px, 92vw);
  text-align: center;
}
.login-card h3 { color: hsla(var(--darkAccent-hsl), 1); margin: 0 0 .4em; }
.login-card p { color: hsla(var(--black-hsl), 1); margin: 0 0 1.2em; }
.login-choice { display: block; width: 100%; margin-top: .8em; }
.login-choice--alt { background: hsla(var(--darkAccent-hsl), 1); color: #fff; }
.login-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; padding: .3em;
  font-size: 1.6rem; line-height: 1;
  color: hsla(var(--black-hsl), 1);
  cursor: pointer;
}

/* language switcher */
.lang-switch { display: flex; align-items: center; gap: .45em; font-size: min(calc(0.29rem + 0.72vw), 1.1rem); font-weight: 600; }
.lang-switch a { opacity: .55; }
.lang-switch a.active, .lang-switch a:hover { opacity: 1; }
.lang-switch span { opacity: .4; }

/* burger */
.burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; color: #fff; }
.burger span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 899px) {
  .header-nav { display: none; }
  .header-login { margin-left: auto; }
  .burger { display: block; }
}
/* narrow phones (e.g. iPhone portrait): the full-size logo + login + a11y +
   burger row is wider than the viewport and the burger gets clipped off the
   right edge. Compress the row so it always fits with margin to spare. */
@media (max-width: 480px) {
  .header-inner { --hdr-h: 24px; gap: 8px; }
  .join-btn { padding: 0 1.1em; }
  .header-login { gap: 6px; }
  .burger { padding: .5rem .25rem .5rem .4rem; }
}
@media (max-width: 360px) {
  .header-inner { --hdr-h: 21px; gap: 6px; }
  .join-btn { padding: 0 .6em; }
  .header-login { gap: 4px; }
}
@media (max-width: 899px) {
  .mobile-open .header-nav {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--nav-bg-solid, var(--nav-bg, hsla(var(--darkAccent-hsl), 1)));
    padding: 1rem var(--sqs-mobile-site-gutter) 2rem;
    gap: .4rem;
    border-radius: 0; /* the pill styling is desktop-only */
    height: auto;
  }
  .mobile-open .nav-folder-content { position: static; display: block; background: none; padding: 0 0 0 1em; }
  .mobile-open .header-nav a { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); }
}

/* ---------- footer ---------- */
.site-footer { position: relative; }
.site-footer .page-section { min-height: 0; }

/* ---------- blog ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.3vw, 40px);
  max-width: var(--maxPageWidth);
  margin: 0 auto;
  padding: 6.6vmax var(--pagePadding);
}
@media (max-width: 991px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card a { display: block; }
.blog-card .thumb { aspect-ratio: 1 / 1; overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card a:hover .thumb img { transform: scale(1.03); }
.blog-card h2 { font-size: min(calc((1.6 - 1) * 1.2vw + 1rem), max(calc((1.6 - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(1.6 * 1rem))); margin: .8rem 0 .3rem; }
.blog-card time { font-family: var(--meta-font); font-size: min(calc((0.85 - 1) * 1.2vw + 1rem), max(calc((0.85 - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(0.85 * 1rem))); color: var(--psc); }

.blog-post { max-width: 1100px; margin: 0 auto; padding: 10rem var(--sqs-mobile-site-gutter) 2rem; }
.blog-post header h1 { font-size: min(calc((3.5 - 1) * 1.2vw + 1rem), max(calc((3.5 - 1) * 0.012 * var(--maxPageWidth) + 1rem), 3.5rem)); margin-bottom: .5rem; }
.blog-post header time { font-family: var(--meta-font); font-size: min(calc((0.9 - 1) * 1.2vw + 1rem), max(calc((0.9 - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(0.9 * 1rem))); color: var(--psc); display: block; margin-bottom: 2rem; }
.blog-post .post-body img { margin: 1.5rem auto; }
.blog-post .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 1.5rem 0; }
.blog-post .gallery img { margin: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.blog-back { display: inline-block; margin: 2rem 0; font-weight: 700; color: var(--h1c); }

/* ---------- embeds (maps etc.) ---------- */
.embed-block { width: 100%; height: 100%; }
.embed-block iframe { width: 100%; height: 100%; min-height: 400px; border: 0; }

/* decorative rectangle shape (entwicklung timeline band) — extends through section padding */
.shape-rect { width: 100%; height: calc(100% + 3.4vmax); background: hsla(var(--darkAccent-hsl), 1); }

/* ---------- misc ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


/* ==========================================================================
   Accessibility: widget + larger text + high contrast
   Classes a11y-contrast / a11y-large live on <html>, persisted in
   localStorage "regios_a11y" (same key as the join form and the portal, so
   the setting carries across regios.at pages).
   ========================================================================== */
.a11y-widget { position: relative; }
.a11y-header-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctrl-h); height: var(--ctrl-h);
  background: hsla(var(--darkAccent-hsl), 1);
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.a11y-header-btn svg { width: 55%; height: 55%; }
.a11y-header-btn:hover { opacity: .9; }
.a11y-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: hsla(var(--darkAccent-hsl), 1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  padding: 14px 16px;
  min-width: 205px;
  z-index: 20;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.a11y-panel h4 {
  color: #fff; font-size: .95rem; margin: 0 0 .7em;
  white-space: normal;
}
.a11y-panel label {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: .9rem; font-weight: 600;
  margin: .45em 0; cursor: pointer;
}
.a11y-panel input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: hsl(var(--accent-hsl));
  cursor: pointer;
}

/* larger text: all rem based sizes scale up 25 percent */
html.a11y-large { font-size: 20px; }

/* high contrast: white background, black content, black/white controls */
html.a11y-contrast,
.a11y-contrast [data-theme] {
  --bg: #fff; --tcb: #fff;
  --h1c: #000; --h2c: #000; --h3c: #000; --h4c: #000;
  --plc: #000; --pmc: #000; --psc: #000;
  --btnbg: #000; --btnc: #fff;
  --navc: #000;
}
html.a11y-contrast body { background: #fff; }
.a11y-contrast .sqsrte-text-color--accent,
.a11y-contrast .sqsrte-text-color--lightAccent,
.a11y-contrast .sqsrte-text-color--darkAccent,
.a11y-contrast .sqsrte-text-color--white { color: #000; }
/* inline colors (sqsrte-text-color--custom et al) only yield to !important */
.a11y-contrast .content [style*="color"],
.a11y-contrast .sqsrte-text-color--custom { color: #000 !important; }
.a11y-contrast .text-block.card { background: #fff; border: 2px solid #000; }
.a11y-contrast .accordion-icon { color: #000; }
.a11y-contrast .accordion-item, .a11y-contrast .accordion-item:first-child { border-color: #000; }
.a11y-contrast .shape-rect { background: #000; }
/* header */
.a11y-contrast .site-header { color: #000; }
.a11y-contrast .site-header::before { background: #fff; opacity: 1; border-bottom: 2px solid #000; }
.a11y-contrast .header-logo img { filter: brightness(0); }
.a11y-contrast .header-nav { background: #000; }
.a11y-contrast .header-nav a, .a11y-contrast .header-nav .nav-link { color: #fff; }
.a11y-contrast .nav-folder-content { background: #000; }
.a11y-contrast .nav-folder-content a { color: #fff; }
.a11y-contrast .join-btn { background: #000; color: #fff; }
.a11y-contrast .login-btn { background: #000; color: #fff; }
.a11y-contrast .a11y-header-btn { background: #fff; border: 2px solid #000; color: #000; }
.a11y-contrast .a11y-panel { background: #fff; border: 2px solid #000; }
.a11y-contrast .a11y-panel h4, .a11y-contrast .a11y-panel label { color: #000; }
.a11y-contrast .a11y-panel input[type="checkbox"] { accent-color: #000; }
.a11y-contrast .burger { color: #000; }
.a11y-contrast .mobile-open .header-nav { background: #000; }
/* hero */
.a11y-contrast .hero-logo img { filter: brightness(0); }
.a11y-contrast .hero-offer-card {
  background: #fff; border: 2px solid #000; box-shadow: none;
}
.a11y-contrast .hero-offer-card h3 span,
.a11y-contrast .hero-offer-card .offer-short,
.a11y-contrast .offer-more li,
.a11y-contrast .offer-arrow { color: #000; }
.a11y-contrast .offer-more li::before { color: #000; }
.a11y-contrast .hero-stage-mini .hero-offer-card { background: #fff; border: 2px solid #000; }
/* login modal */
.a11y-contrast .login-modal { background: rgba(255, 255, 255, .6); }
.a11y-contrast .login-card { background: #fff; border: 2px solid #000; }
.a11y-contrast .login-card h3, .a11y-contrast .login-card p { color: #000; }
.a11y-contrast .login-choice--alt { background: #000; color: #fff; }
.a11y-contrast .login-close { color: #000; }


/* scroll storytelling: sections flagged as .section-reveal fade their blocks
   in as the reader scrolls (JS only; without JS everything is visible) */
.js .section-reveal .blk {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .section-reveal .blk.reveal-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .section-reveal .blk { opacity: 1; transform: none; transition: none; }
}


/* ---------- story section: Problem -> Lösung -> gemeinsame Kraft ----------
   One readable column guided by a sticky chapter rail: the line fills as the
   visitor reads, the dot of the chapter in view lights up. */
/* the stamping chapter labels scale beyond the viewport on narrow screens;
   clip keeps that out of the scrollable area (no scroll container is
   created, so the sticky rail keeps working) */
.story-section { overflow-x: clip; }
.story-wrap {
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 620px);
  justify-content: center;
  column-gap: clamp(32px, 6vw, 96px);
  width: 100%;
  padding: 0 var(--pagePadding);
}
.story-rail {
  position: sticky;
  top: clamp(96px, 16vh, 160px);
  align-self: start;
}
.story-rail-track {
  position: absolute;
  left: 5px;
  top: .4em;
  bottom: .4em;
  width: 2px;
  border-radius: 1px;
  background: hsla(var(--white-hsl), .22);
}
.story-rail-fill {
  position: absolute;
  inset: 0;
  background: hsl(var(--accent-hsl));
  transform: scaleY(0);
  transform-origin: top;
}
.story-rail-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4em;
}
.story-rail-steps a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding-left: 28px;
  text-decoration: none;
  color: hsla(var(--white-hsl), .55);
  transition: color .3s ease;
}
.story-rail-steps a::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .1em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: hsla(var(--white-hsl), .3);
  transition: background .3s ease, box-shadow .3s ease;
}
.story-rail-num {
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .08em;
  color: hsl(var(--accent-hsl));
  opacity: .75;
}
.story-rail-label {
  text-transform: uppercase;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
  line-height: 1.35;
}
.story-rail-steps li.story-active a { color: hsla(var(--white-hsl), 1); }
.story-rail-steps li.story-active a::before {
  background: hsl(var(--accent-hsl));
  box-shadow: 0 0 0 4px hsla(var(--accent-hsl), .25);
}
.story-chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vh, 120px);
  min-width: 0;
}
.story-chapter { scroll-margin-top: clamp(90px, 15vh, 150px); }
/* the fe-grid .blk helpers (full height, centered) don't apply in flow */
.story-section .blk { height: auto; justify-content: flex-start; }
.story-head {
  flex-direction: row;
  align-items: center;
  gap: .8em;
  margin-bottom: 1em;
}
.story-num {
  font-family: var(--heading-font);
  font-weight: 100;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: hsla(var(--white-hsl), .28);
}
@supports (-webkit-text-stroke: 1px #fff) {
  .story-num { color: transparent; -webkit-text-stroke: 1px hsla(var(--white-hsl), .4); }
}
.story-title { margin-bottom: .9em; }
/* chapter labels stamp in: they arrive huge and settle into place */
.js .story-head h4 {
  opacity: 0;
  transform: scale(2.4);
  transform-origin: 0 60%;
  transition: transform .8s cubic-bezier(.2, .8, .25, 1), opacity .55s ease;
  will-change: transform;
}
.js .story-head.reveal-in h4 { opacity: 1; transform: scale(1); }
@media (max-width: 767px) {
  .js .story-head h4 { transform: scale(1.5); }
  .js .story-head.reveal-in h4 { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .js .story-head h4 { opacity: 1; transform: none; transition: none; }
}
/* the key phrase gets a marker sweep once its chapter has revealed */
.story-mark {
  background-image: linear-gradient(hsla(var(--story-mark-hsl, var(--accent-hsl)), .75), hsla(var(--story-mark-hsl, var(--accent-hsl)), .75));
  background-repeat: no-repeat;
  background-size: 0% .36em;
  background-position: 0 92%;
  transition: background-size .8s cubic-bezier(.25, .7, .3, 1) .5s;
}
.story-mark--amber { --story-mark-hsl: var(--lightAccent-hsl); }
.story-mark--green { --story-mark-hsl: var(--accent-hsl); }
.story-mark--duo {
  background-image: linear-gradient(90deg, hsla(var(--lightAccent-hsl), .75), hsla(var(--accent-hsl), .75));
}
.story-section .blk.reveal-in .story-mark,
html:not(.js) .story-mark { background-size: 100% .36em; }
.story-next { margin-top: 1.6em; }
.story-next a {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .05em;
  color: hsl(var(--accent-hsl));
}
.story-next-arrow { transition: transform .25s ease; }
.story-next a:hover .story-next-arrow { transform: translateY(4px); }
.story-cta { margin-top: 1.8em; }
.story-cta + .blk .text-block { margin-top: 1.4em; }
@media (max-width: 767px) {
  .story-wrap { display: block; padding: 0 var(--sqs-mobile-site-gutter, 6vw); }
  .story-rail { display: none; }
  .story-chapters { gap: 60px; }
  /* the rail collapses into a left border that lights up per chapter */
  .story-chapter {
    padding-left: 16px;
    border-left: 2px solid hsla(var(--white-hsl), .22);
    transition: border-color .5s ease;
  }
  .story-chapter.story-on { border-left-color: hsl(var(--accent-hsl)); }
}
@media (prefers-reduced-motion: reduce) {
  .story-mark { transition: none; background-size: 100% .36em; }
  .story-rail-fill { transform: scaleY(1); }
}
/* high contrast: black rail and markers on white */
.a11y-contrast .story-rail-track { background: rgba(0, 0, 0, .25); }
.a11y-contrast .story-rail-fill { background: #000; }
.a11y-contrast .story-rail-steps a { color: rgba(0, 0, 0, .6); }
.a11y-contrast .story-rail-steps a::before { background: rgba(0, 0, 0, .35); }
.a11y-contrast .story-rail-steps li.story-active a { color: #000; }
.a11y-contrast .story-rail-steps li.story-active a::before { background: #000; box-shadow: 0 0 0 4px rgba(0, 0, 0, .2); }
.a11y-contrast .story-rail-num, .a11y-contrast .story-next a { color: #000; }
.a11y-contrast .story-num { color: rgba(0, 0, 0, .4); -webkit-text-stroke: 0; }
.a11y-contrast .story-mark { background-image: none; text-decoration: underline; }
.a11y-contrast .story-chapter { border-left-color: rgba(0, 0, 0, .3); }
.a11y-contrast .story-chapter.story-on { border-left-color: #000; }


/* full screen promo video section with sound toggle */
.promo-video-section {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: block;
}
.promo-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* portrait phones play the square (1:1) promo cut, so the section turns
   square and the video shows uncropped */
@media (max-width: 767px) and (orientation: portrait) {
  .promo-video-section { height: 100vw; }
}
/* phones: the heading would cover too much of the square video; only the
   actions remain, tucked to the right */
@media (max-width: 767px) {
  .promo-overlay-text { display: none; }
  .promo-overlay { justify-content: flex-end; }
}
.promo-scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.promo-overlay {
  position: absolute;
  left: var(--pagePadding);
  right: var(--pagePadding);
  bottom: 6%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.promo-overlay-text h3 { color: #fff; margin: 0; max-width: 18em; }
.promo-actions { display: flex; align-items: center; gap: 14px; }
.promo-sound {
  width: max(52px, 3.6vw);
  height: max(52px, 3.6vw);
  display: flex; align-items: center; justify-content: center;
  background: hsla(var(--darkAccent-hsl), 1);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.promo-sound svg { width: 48%; height: 48%; }
/* exactly one icon at a time, driven by the pressed state */
.promo-sound[aria-pressed="false"] .promo-sound-on { display: none; }
.promo-sound[aria-pressed="true"] .promo-sound-off { display: none; }
.promo-sound:hover { border-color: #fff; }
@media (max-width: 767px) {
  .promo-overlay { bottom: 5%; }
}
/* high contrast */
.a11y-contrast .promo-sound { background: #000; border-color: #fff; }
.a11y-contrast .promo-overlay-text h3, .a11y-contrast .promo-overlay-text h3 span { color: #fff; }


/* pre-footer CTA bar (all pages) */
.cta-bar {
  background: hsla(var(--darkAccent-hsl), 1);
  padding: clamp(80px, 10vw, 160px) var(--pagePadding) 0;
}
.cta-bar-inner {
  max-width: var(--maxPageWidth);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(48px, 6vw, 96px);
}
.cta-bar-text h3 {
  margin: 0;
  color: #fff;
  white-space: normal;
  max-width: 24em;
  font-size: min(calc(1.5rem + 1.3vw), 2.9rem);
}
.cta-bar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cta-contact-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .7em 1.1em;
  border: 2px solid hsla(var(--darkAccent-hsl), 1);
  border-radius: 10px;
  color: hsla(var(--darkAccent-hsl), 1);
  font-weight: 600;
  font-size: min(calc(0.65rem + 0.5vw), 1.1rem);
  transition: background .2s ease, color .2s ease;
}
.cta-contact-item svg { width: 1.15em; height: 1.15em; }
.cta-contact-item:hover { background: hsla(var(--darkAccent-hsl), 1); color: #fff; }
.cta-bar .btn { background: hsla(var(--accent-hsl), 1); color: hsla(var(--darkAccent-hsl), 1); }
@media (max-width: 767px) {
  .cta-bar-inner { flex-direction: column; align-items: flex-start; }
}
/* high contrast */
.a11y-contrast .cta-bar { background: #fff; border-top: 2px solid #000; }
.a11y-contrast .cta-bar-text h3, .a11y-contrast .cta-bar-text h3 span { color: #000; }
.a11y-contrast .cta-contact-item { border-color: #000; color: #000; }
.a11y-contrast .cta-contact-item:hover { background: #000; color: #fff; }


/* callback modal (Rueckruf) */
.cb-card { width: min(540px, 94vw); text-align: left; max-height: 90dvh; overflow-y: auto; }
.cb-card h3 { margin-bottom: .7em; }
.cb-row { display: flex; gap: 14px; }
.cb-row .cb-group { flex: 1; }
.cb-group { margin-bottom: 1em; }
.cb-label { display: block; font-weight: 600; color: hsla(var(--black-hsl), 1); margin-bottom: .35em; font-size: .95rem; }
.cb-input {
  width: 100%; padding: .65em .85em;
  border: 2px solid hsla(var(--darkAccent-hsl), .3);
  border-radius: 10px;
  font-family: inherit; font-size: 1rem;
  color: hsla(var(--black-hsl), 1); background: #fff;
}
.cb-input:focus { outline: none; border-color: hsla(var(--darkAccent-hsl), 1); }
.cb-check { display: flex; align-items: flex-start; gap: .6em; font-size: .9rem; color: hsla(var(--black-hsl), 1); cursor: pointer; }
.cb-check input { margin-top: .2em; width: 1.1em; height: 1.1em; flex: 0 0 auto; accent-color: hsla(var(--darkAccent-hsl), 1); }
.cb-check a { text-decoration: underline; color: hsla(var(--darkAccent-hsl), 1); }
.cb-error { display: none; color: #c0272d; font-weight: 600; margin-bottom: 1em; }
.nl-note { font-size: .8rem; color: hsla(var(--black-hsl), .7); text-align: left; margin: 0 0 1em; }
.cb-submit { width: 100%; }
.cb-success { text-align: center; padding: 1.2em 0; }
.cb-success h4 { color: hsla(var(--darkAccent-hsl), 1); margin: 0 0 .4em; }
.cb-success p { margin: 0; }
@media (max-width: 599px) {
  .cb-row { flex-direction: column; gap: 0; }
}
.a11y-contrast .cb-input { border-color: #000; color: #000; }
.a11y-contrast .cb-label, .a11y-contrast .cb-check { color: #000; }
.a11y-contrast .cb-check input { accent-color: #000; }
.a11y-contrast .cb-check a, .a11y-contrast .cb-success h4 { color: #000; }


/* kontakt: extra breathing space above the Mitarbeiter section */
.section-breather .content-wrapper { padding-top: 10vmax; }


/* tariff comparison cards */
.tarife-section .content-wrapper {
  padding: 6.6vmax var(--pagePadding);
  width: 100%;
}
/* plain flow, not the global .content grid: combined with the fe helper
   .blk { height: 100% } some browsers (Safari) collapse the implicit grid
   rows and paint the blocks on top of each other */
.tarife-section .content { max-width: var(--maxPageWidth); margin: 0 auto; width: 100%; display: block; }
.tarife-section .blk { height: auto; }
.tarife-head p { margin: .4em 0 0; }
.tarif-cards {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 36px);
  margin: 2.2em 0 1em;
}
.tarif-card {
  flex: 1 1 320px;
  /* min-width: 0 lets the card shrink below the min-content width of long
     compound words like "Genossenschafterdarlehen" — without it the flex
     items refuse to shrink and wrap onto separate rows on WIDE screens,
     because the display font grows with the viewport. */
  min-width: 0;
  position: relative;
  border-radius: 16px;
  padding: clamp(24px, 2.8vw, 46px);
  transition: transform .35s ease, box-shadow .35s ease;
}
/* Desktop: the two cards sit side by side, always, at every resolution. */
@media (min-width: 768px) {
  .tarif-cards { flex-wrap: nowrap; }
  .tarif-card { flex: 1 1 0; }
}
.tarif-title { overflow-wrap: break-word; hyphens: manual; }
.tarif-card--member {
  background: hsla(var(--darkAccent-hsl), 1);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}
.tarif-card--member p, .tarif-card--member li, .tarif-card--member h3 { color: #fff; }
.tarif-card--standard {
  background: hsla(var(--white-hsl), 1);
  border: 2px solid hsla(var(--darkAccent-hsl), .18);
}
@media (hover: hover) {
  .tarif-card--member:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0, 0, 0, .22); }
}
.tarif-badge {
  position: absolute; top: -16px; right: clamp(18px, 2.2vw, 34px);
  background: hsla(var(--accent-hsl), 1);
  color: hsla(var(--darkAccent-hsl), 1);
  font-weight: 800;
  font-size: .95rem;
  padding: .5em 1em;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.js .tarif-badge { transform: scale(0); }
.js .tarif-badge.badge-in { animation: badgePop .55s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }
.tarif-title { margin: 0 0 .5em; }
.tarif-price { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
.tarif-num {
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.tarif-unit { font-weight: 600; opacity: .8; }
.tarif-sub { margin: .35em 0 1.2em; opacity: .7; font-size: .95rem; }
.tarif-checks { list-style: none; margin: 0 0 1.3em; padding: 0; }
.tarif-checks li { position: relative; padding-left: 1.7em; margin: .5em 0; }
.tarif-checks li::before {
  content: "\2713";
  position: absolute; left: 0;
  font-weight: 800;
  color: hsla(var(--lightAccent-hsl), 1);
}
.tarif-card--member .tarif-checks li::before { color: hsla(var(--accent-hsl), 1); }
.tarif-note { font-size: .92rem; margin: 0; opacity: .92; }
.tarif-note a { text-decoration: underline; }
.tarif-card--member .tarif-note a { color: hsla(var(--accent-hsl), 1); }
.tarif-footnote { opacity: .65; font-size: .9rem; margin: .4em 0 2em; }
.tarif-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 1em;
  padding-top: clamp(28px, 3.4vw, 56px);
}
.tarif-cta h3 { margin: 0; max-width: 22em; }
@media (prefers-reduced-motion: reduce) {
  .js .tarif-badge { transform: none; animation: none; }
  .tarif-card, .tarif-card:hover { transform: none; transition: none; }
}
/* high contrast */
.a11y-contrast .tarif-card--member { background: #fff; border: 2px solid #000; box-shadow: none; }
.a11y-contrast .tarif-card--member p, .a11y-contrast .tarif-card--member li, .a11y-contrast .tarif-card--member h3 { color: #000; }
.a11y-contrast .tarif-card--standard { background: #fff; border-color: #000; }
.a11y-contrast .tarif-badge { background: #000; color: #fff; box-shadow: none; }
.a11y-contrast .tarif-checks li::before, .a11y-contrast .tarif-card--member .tarif-checks li::before { color: #000; }
.a11y-contrast .tarif-card--member .tarif-note a { color: #000; }


/* beteiligung detail cards (shares + loan), built on the tariff card system */
.tarif-overline {
  display: block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .6em;
}
.tarif-card--member .tarif-overline { color: hsla(var(--accent-hsl), 1); }
.tarif-card--standard .tarif-overline { color: hsla(var(--darkAccent-hsl), 1); }
.tarif-cur {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
}
.beteiligung-detail .tarif-card--standard { background: hsla(var(--white-hsl), 1); }
.tarif-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--alt {
  background: transparent;
  border: 2px solid hsla(var(--darkAccent-hsl), 1);
  color: hsla(var(--darkAccent-hsl), 1);
}
.btn--alt:hover { background: hsla(var(--darkAccent-hsl), 1); color: #fff; }
.a11y-contrast .btn--alt { border-color: #000; color: #000; background: #fff; }
.a11y-contrast .btn--alt:hover { background: #000; color: #fff; }


/* product pages close on the cream CTA bar instead of the lavender one */
.cta-bar--cream { background: hsla(var(--darkAccent-hsl), 1); }


/* CTA contact panels: ported from the genossenschaft landing page */
.cta-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .cta-panels { grid-template-columns: repeat(3, 1fr); }
  .contact-panel { overflow: visible; transition: z-index 0s .5s; }
  .contact-panel:hover { z-index: 10; transition: z-index 0s 0s; }
}
.contact-panel {
  display: block;
  position: relative;
  background: hsla(var(--darkAccent-hsl), 1);
  padding: 3vw 4vw;
  z-index: 1;
}
.contact-panel-inner {
  display: flex;
  align-items: center;
  gap: 3vw;
  position: relative;
  z-index: 2;
}
.contact-panel svg {
  width: 6vw; height: 6vw;
  min-width: 2.5rem; min-height: 2.5rem;
  max-width: 5rem; max-height: 5rem;
  flex-shrink: 0;
  stroke-width: 1;
  color: #fff;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-panel span {
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  font-size: min(calc(0.75rem + 0.8vw), 1.5rem);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-panel:hover svg { transform: scale(1.5) rotate(-12deg); }
.contact-panel:hover span { transform: rotate(12deg) scale(1.2); }
@media (prefers-reduced-motion: reduce) {
  .contact-panel:hover svg, .contact-panel:hover span { transform: none; }
}
.a11y-contrast .contact-panel { background: #fff; border: 2px solid #000; }
.a11y-contrast .contact-panel svg, .a11y-contrast .contact-panel span { color: #000; }


/* project timeline: serpentine SVG drawn on scroll */
.timeline-section .content-wrapper { padding: 6.6vmax var(--pagePadding) 0; width: 100%; }
.timeline-section .content { max-width: 1200px; margin: 0 auto; width: 100%; }
.tl-wrap { position: relative; width: 100%; aspect-ratio: 1500 / 1860; }
.tl-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-path { fill: none; stroke: url(#tlgrad); stroke-width: 20; stroke-linecap: round; }
.tl-dot { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.js .tl-dot { transform: scale(0); }
.js .tl-dot.tl-on { transform: scale(1); }
.tl-month, .tl-cap, .tl-year { position: absolute; text-align: center; line-height: 1.25; }
.tl-month {
  transform: translate(-50%, -50%);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(10px, 1.55vw, 26px);
}
.tl-cap {
  transform: translate(-50%, 0);
  width: 24%;
  font-weight: 500;
  font-size: clamp(9px, 1.3vw, 22px);
}
.tl-cap.tl-future { font-weight: 500; width: 20%; }
.tl-year {
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: clamp(24px, 4.6vw, 76px);
  line-height: 1;
  background: var(--bg);
  padding: 0 .16em;
}
.tl-year--band {
  background: hsla(var(--darkAccent-hsl), 1);
  padding: .04em .2em;
  border-radius: 8px;
}
.js .tl-month, .js .tl-cap, .js .tl-year { opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.js .tl-month { transform: translate(-50%, -30%); }
.js .tl-cap { transform: translate(-50%, 14px); }
.js .tl-year { transform: translate(-50%, -38%); }
.js .tl-month.tl-on { opacity: 1; transform: translate(-50%, -50%); }
.js .tl-cap.tl-on { opacity: 1; transform: translate(-50%, 0); }
.js .tl-year.tl-on { opacity: 1; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
  .js .tl-month, .js .tl-cap, .js .tl-year { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  .js .tl-cap { transform: translate(-50%, 0); }
  .js .tl-dot { transform: none; transition: none; }
}
.a11y-contrast .tl-path { stroke: #000; }
.a11y-contrast .tl-dot { fill: #000; }
.a11y-contrast .tl-band, .a11y-contrast .tl-mzone--band { background: #fff; border-top: 2px solid #000; }
.a11y-contrast .tl-year--band { background: #fff; }


/* the purple band under the last quarter of the timeline, flowing into the
   next (purple) section like on the original page */
.tl-band {
  position: absolute;
  top: 69.4%;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: hsla(var(--darkAccent-hsl), 1);
}
.timeline-section { overflow: hidden; }
.tl-wrap svg, .tl-month, .tl-cap { z-index: 1; }
.tl-year { z-index: 2; }

/* phones: vertical timeline with the same milestones, readable sizes */
.tl-mobile { display: none; position: relative; }
@media (max-width: 767px) {
  .tl-wrap { display: none; }
  .tl-mobile { display: block; }
  .timeline-section .content-wrapper { padding-bottom: 0; }
  .tl-mzone { position: relative; padding: 4px 0 28px 46px; }
  .tl-mzone--band {
    background: hsla(var(--darkAccent-hsl), 1);
    margin: 0 calc(-1 * var(--sqs-mobile-site-gutter, 6vw));
    padding: 28px calc(var(--sqs-mobile-site-gutter, 6vw)) 40px calc(var(--sqs-mobile-site-gutter, 6vw) + 46px);
  }
  .tl-mitem { position: relative; margin-bottom: 26px; }
  .tl-mdot {
    position: absolute;
    left: -46px;
    top: .2em;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--c);
  }
  .tl-mzone--band .tl-mdot { left: calc(-1 * var(--sqs-mobile-site-gutter, 6vw) - 46px + var(--sqs-mobile-site-gutter, 6vw)); }
  .tl-myear { font-weight: 800; font-size: 2rem; line-height: 1; color: var(--c); }
  .tl-mmonth { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; color: var(--c); margin-bottom: .2em; }
  .tl-mcap { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--c); }
  .tl-mrail {
    position: absolute;
    left: 8px;
    top: 6px; bottom: 0;
    width: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .08);
    z-index: 1;
  }
  .tl-mrail-fill {
    position: absolute; inset: 0;
    border-radius: 3px;
    background: linear-gradient(#9779EF, #C58A82 30%, #DEBC3E 48%, #83DC48 66%, #52D63A);
    transform-origin: top;
  }
  .js .tl-mrail-fill { transform: scaleY(0); }
  .js .tl-mitem { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .js .tl-mitem.tl-on { opacity: 1; transform: none; }
  .tl-mitem { padding-right: 4px; }
  @media (prefers-reduced-motion: reduce) {
    .js .tl-mrail-fill { transform: none; }
    .js .tl-mitem { opacity: 1; transform: none; transition: none; }
  }
}
.a11y-contrast .tl-mrail-fill { background: #000; }
.a11y-contrast .tl-mdot { background: #000; }


/* cinema section: the film loads only on play */
.cinema-section .content-wrapper { padding: 6.6vmax var(--pagePadding); width: 100%; }
.cinema-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.cinema-inner h2 { margin: 0 0 .3em; }
.cinema-sub { margin: 0 0 1.8em; }
.yt-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade-link {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .15);
  transition: background .3s ease;
}
.yt-facade:hover .yt-facade-link { background: rgba(0, 0, 0, 0); }
.yt-facade-play {
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  border-radius: 50%;
  background: hsla(var(--accent-hsl), 1);
  color: hsla(var(--darkAccent-hsl), 1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.yt-facade-play svg { width: 44%; height: 44%; fill: currentColor; margin-left: 6%; }
.yt-facade:hover .yt-facade-play { transform: scale(1.12); }
.yt-facade iframe, .yt-facade video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: #000; }
.yt-facade--playing .yt-facade-link { display: none; }
.a11y-contrast .yt-facade-play { background: #000; color: #fff; }


/* potential blobs: white circles carry live HTML content, numbers count up */
.ci-wrap { position: relative; width: 100%; margin: 0 auto; }
.ci-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ci-circle {
  position: absolute;
  left: var(--ci-x); top: var(--ci-y);
  width: calc(var(--ci-d) * var(--ci-s, 1.05));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  container-type: inline-size;
}
.ci-content {
  display: flex; flex-direction: column; align-items: center;
  gap: .8cqw;
  text-align: center;
  padding: 12cqw;
}
.ci-small {
  color: #8a8a9d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 5.4cqw;
  line-height: 1.3;
  max-width: 72cqw;
}
.ci-big .tarif-num { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.ci-big {
  color: hsla(var(--darkAccent-hsl), 1);
  font-weight: 800;
  font-size: 13cqw;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@supports not (width: 1cqw) {
  .ci-small { font-size: 11px; }
  .ci-big { font-size: 26px; }
}
.ci-circle--xl .ci-big { font-size: 31cqw; }
.ci-circle--lg .ci-big { font-size: 15.6cqw; }
.ci-circle--xl .ci-small { font-size: 7cqw; }
.a11y-contrast .ci-circle { border: 2px solid #000; }
.a11y-contrast .ci-small, .a11y-contrast .ci-big { color: #000; }


/* downloads feed: hub managed public PDFs */
.downloads-feed-section[hidden] { display: none; }
.downloads-feed-section .content-wrapper { padding: 0 var(--pagePadding) 6.6vmax; width: 100%; }
.downloads-feed-section .content { max-width: var(--maxPageWidth); margin: 0 auto; width: 100%; }
.downloads-feed h2 { margin: 0 0 .8em; }
.downloads-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.dl-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(170px, 15vw, 230px);
}
.dl-card h3 { margin: 0; hyphens: auto; overflow-wrap: break-word; }
.dl-card-arrow { text-align: right; }
.dl-card-arrow span { display: inline-block; transition: transform .25s ease; }
.dl-card:hover .dl-card-arrow span { transform: translateX(8px); }
.a11y-contrast .dl-card { background: #fff; border: 2px solid #000; }
.a11y-contrast .dl-card h3, .a11y-contrast .dl-card-arrow { color: #000; }

/* ---- press pack (Pressebereich) ------------------------------------------ */
.press-pack-section .content-wrapper { padding: 4vmax var(--pagePadding) 6.6vmax; width: 100%; }
.press-pack-section .content { max-width: var(--maxPageWidth); margin: 0 auto; width: 100%; }
.press-pack-section h2 { margin: 0 0 .7em; }
.press-pack-section h2:not(:first-child) { margin-top: 2.2em; }
.press-rules { margin: 0; padding-left: 1.2em; max-width: 62em; }
.press-rules li { margin-bottom: .55em; color: hsla(var(--black-hsl), 1); }
.press-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.press-color { background: #fff; border: 1px solid rgba(0, 0, 0, .07); padding: clamp(16px, 1.6vw, 24px); display: flex; align-items: center; gap: 16px; }
.press-color-chip { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .08); }
.press-color h4 { margin: 0 0 .15em; }
.press-color p { margin: 0; font-size: .85rem; color: hsla(var(--black-hsl), 1); opacity: .75; }
.press-dl-intro { max-width: 62em; margin: 0 0 1.6em; }
.press-family { margin: 0 0 3em; }
.press-family:last-of-type { margin-bottom: 0; }
.press-family h3 { margin: 0 0 .15em; }
.press-family-desc { margin: 0 0 1em; color: hsla(var(--black-hsl), 1); opacity: .75; }
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.press-card { background: #fff; border: 1px solid rgba(0, 0, 0, .07); padding: clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; }
.press-card h4 { margin: 0 0 .1em; }
.press-variant-desc { font-size: .85rem; color: hsla(var(--black-hsl), 1); opacity: .7; margin: 0 0 .9em; }
.press-preview { background: #fff; border: 1px solid rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; height: 128px; margin-bottom: .9em; padding: 14px; }
.press-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.press-preview--dark { background: #9C69FF; border-color: #9C69FF; }
.press-formats { margin-top: auto; display: grid; gap: .4em; }
.press-format-row { display: flex; gap: .7em; align-items: baseline; }
.press-format-label { font-family: var(--meta-font); font-weight: 600; min-width: 4.8em; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: hsla(var(--black-hsl), 1); opacity: .6; }
.press-format-links { display: flex; flex-wrap: wrap; gap: .2em .75em; font-size: .85rem; }
.press-format-links a { font-weight: 700; text-decoration: none; color: hsla(var(--safeDarkAccent-hsl), 1); }
.press-format-links a:hover { text-decoration: underline; }
.press-contact { margin: 3em 0 0; }
.a11y-contrast .press-card, .a11y-contrast .press-color { background: #fff; border: 2px solid #000; }
.a11y-contrast .press-format-links a { color: #000; text-decoration: underline; }


/* member downloads: same boxes in the portal colour scheme */
.downloads-feed-members[hidden] { display: none; }
.downloads-feed-members { margin-top: clamp(36px, 4vw, 64px); }
.downloads-feed-members h2 { margin: 0 0 .2em; }
.downloads-feed-members-note { margin: 0 0 1.4em; }
.dl-card--member .dl-card-arrow span { color: hsl(var(--accent-hsl)); }


/* hero offer cards: animated stat + benefit checks (StoryBrand recast) */
.offer-stat { display: flex; align-items: baseline; gap: .55em; margin: 0 0 .55em; flex-wrap: wrap; }
.offer-stat-num {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.3vw, 2.5rem);
  line-height: 1;
  color: hsl(var(--accent-hsl));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offer-stat-num .tarif-num { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.offer-stat-unit { font-size: .55em; font-weight: 800; }
.offer-stat-label { color: rgba(255, 255, 255, .88); font-size: .92rem; font-weight: 600; }
.offer-benefits { list-style: none; margin: 0 0 .7em; padding: 0; }
.offer-benefits li { position: relative; padding-left: 1.6em; margin: .32em 0; color: #fff; }
.offer-benefits li::before {
  content: "\2713";
  position: absolute; left: 0;
  font-weight: 800;
  color: hsl(var(--accent-hsl));
}
.offer-cta {
  display: inline-block;
  color: hsl(var(--accent-hsl));
  font-family: var(--heading-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .95rem;
}
.a11y-contrast .offer-stat-num, .a11y-contrast .offer-stat-label,
.a11y-contrast .offer-benefits li, .a11y-contrast .offer-benefits li::before,
.a11y-contrast .offer-cta { color: #000; }


/* hero cards: selling prose instead of bullets */
.offer-sell { color: #fff; margin: 0; font-size: .98rem; line-height: 1.6; }
.offer-sell .sqsrte-text-color--accent { font-weight: 700; }
.a11y-contrast .offer-sell, .a11y-contrast .offer-sell span { color: #000; }


/* anchored sections scroll below the fixed header, smoothly */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id] { scroll-margin-top: min(8.6vw, 140px); }
/* the mission statement is centered inside its full-viewport section, so the
   anchor lands with only half the header offset: that puts the statement in
   the middle of the space below the header instead of 140px past it */
#mission { scroll-margin-top: min(4.3vw, 70px); }


/* CTA tiles: the site's own colour blocked card language */
.cta-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  /* full bleed, like the colour card strips */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .cta-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .cta-tiles { grid-template-columns: repeat(4, 1fr); }
}
.cta-tile {
  background: var(--tile-bg);
  padding: 12%;
  min-height: clamp(240px, 24vw, 380px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cta-tile h3 { margin: 0; }
.cta-tile-tint { color: var(--tile-tint); }
.cta-tile-main { color: hsla(var(--black-hsl), 1); }
.cta-tile-arrow { text-align: right; color: var(--tile-tint); }
.cta-tile-arrow span { display: inline-block; transition: transform .25s ease; }
.cta-tile:hover .cta-tile-arrow span { transform: translateX(8px); }
.a11y-contrast .cta-tile { background: #fff; border: 2px solid #000; }
.a11y-contrast .cta-tile h3, .a11y-contrast .cta-tile h3 span, .a11y-contrast .cta-tile-arrow { color: #000 !important; }

/* ==========================================================================
   Update-Beiträge: Medien-Panel + gebrandete Lightbox
   Das Panel zeigt bis zu 6 Kacheln (Bilder/Videos); ein Klick öffnet die
   Vollbild-Galerie in Markenfarben mit Blättern per Pfeil/Tastatur/Wischen.
   ========================================================================== */
.blog-post .media-panel {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 1.5rem 0 2.5rem;
}
@media (max-width: 899px) { .blog-post .media-panel { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .blog-post .media-panel { grid-template-columns: repeat(2, 1fr); } }
.media-thumb {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 0; padding: 0; cursor: pointer;
  background: hsla(var(--darkAccent-hsl), .15); border-radius: 0;
}
.media-thumb img, .media-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block; margin: 0;
  transition: transform .35s ease;
}
.media-thumb:hover img, .media-thumb:hover video { transform: scale(1.06); }
.media-thumb:focus-visible { outline: 3px solid hsla(var(--accent-hsl), 1); outline-offset: 2px; }
.media-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
}
.media-play svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); }
.media-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: hsla(260.4, 60%, 20%, .68); color: #fff;
  font-family: "Raleway", sans-serif; font-weight: 900; font-size: 1.7rem;
  pointer-events: none;
}

.lb {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; flex-direction: column;
  background: hsla(260.4, 60%, 10%, .96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lb[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.lb-count { color: #fff; font-family: "Raleway", sans-serif; font-weight: 900; letter-spacing: .06em; }
.lb-close {
  width: 44px; height: 44px; border: 0; cursor: pointer;
  background: hsla(var(--darkAccent-hsl), 1); color: #fff; font-size: 1.5rem; line-height: 1;
}
.lb-close:hover, .lb-nav:hover { background: hsla(var(--accent-hsl), 1); color: hsla(var(--darkAccent-hsl), 1); }
.lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 80px 24px; }
.lb-media { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; }
.lb-media img, .lb-media video {
  max-width: 100%; max-height: 100%; object-fit: contain; margin: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; cursor: pointer;
  background: hsla(var(--darkAccent-hsl), 1); color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (max-width: 599px) {
  .lb-stage { padding: 0 8px 12px; }
  .lb-nav { width: 42px; height: 42px; opacity: .92; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* Hoher Kontrast */
.a11y-contrast .lb { background: #000; }
.a11y-contrast .lb-close, .a11y-contrast .lb-nav { background: #fff; color: #000; border: 2px solid #000; }
.a11y-contrast .media-more { background: rgba(0, 0, 0, .8); }
.a11y-contrast .media-thumb { outline: 2px solid #000; }

/* ==========================================================================
   Update-Beiträge: Hero-Sektion
   Voller Seitenbreite, standardmäßig lila; im Hub kann pro Beitrag ein Foto
   als vollflächiger Hintergrund gesetzt werden. Datum als grünes Badge.
   ========================================================================== */
.update-hero {
  position: relative;
  background: hsla(var(--darkAccent-hsl), 1);
  padding: 11rem var(--sqs-mobile-site-gutter) 4.5rem;
  overflow: hidden;
}
.update-hero--photo { background-size: cover; background-position: center; }
.update-hero--photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, hsla(260.4, 60%, 18%, .5) 0%, hsla(260.4, 60%, 14%, .72) 100%);
}
.update-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; }
.update-hero h1 { color: #fff; margin: 0; }
.update-hero-date {
  display: inline-block;
  background: hsla(var(--accent-hsl), 1);
  color: hsla(var(--darkAccent-hsl), 1);
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(0.95rem, 0.7rem + 0.5vw, 1.25rem);
  padding: .5em 1.1em;
  margin-bottom: 1.6rem;
}
.update-hero + .blog-post { padding-top: 3.5rem; }
@media (max-width: 767px) {
  .update-hero { padding: 8.5rem var(--sqs-mobile-site-gutter) 3rem; }
}

/* Hoher Kontrast */
.a11y-contrast .update-hero { background: #fff; border-bottom: 2px solid #000; }
.a11y-contrast .update-hero--photo { background-image: none !important; }
.a11y-contrast .update-hero--photo::before { display: none; }
.a11y-contrast .update-hero h1 { color: #000; }
.a11y-contrast .update-hero-date { background: #000; color: #fff; }

/* ==========================================================================
   Regios Assistent: fixer Chat Button + Panel
   Markenfarben, Raleway Überschriften, bewusst einfach gehalten.
   ========================================================================== */
/* Der schwebende Cookie Button ist bewusst ausgeblendet: die Einstellungen
   sind über den Link "Cookie Einstellungen" im Footer erreichbar. Die Ecke
   gehört dem Assistenten. */
.cookie-settings-btn { display: none !important; }

.ra-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  z-index: 2147483645;
  display: inline-flex; align-items: center; gap: .55em;
  background: hsla(var(--darkAccent-hsl), 1);
  color: #fff;
  border: 0; border-radius: 0;
  padding: .8em 1.25em;
  font-family: "Raleway", sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(36, 21, 57, .35);
  transition: transform .4s ease, opacity .4s ease;
}
/* erscheint erst nach dem ersten Scrollen, wie die Ecken CTAs */
.ra-scrolled .ra-btn { opacity: 1; transform: none; pointer-events: auto; }
.ra-scrolled .ra-btn:hover { transform: translateY(-2px); }
.ra-btn svg { width: 1.3em; height: 1.3em; }
.ra-btn .ra-dot {
  width: .55em; height: .55em; border-radius: 50%;
  background: hsla(var(--accent-hsl), 1);
}
.ra-open .ra-btn { opacity: 0; pointer-events: none; }

.ra-panel {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  z-index: 2147483646;
  width: min(400px, calc(100vw - 2rem));
  height: min(600px, calc(100vh - 3rem));
  display: none; flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(36, 21, 57, .4);
}
.ra-open .ra-panel { display: flex; }

.ra-head {
  background: hsla(var(--darkAccent-hsl), 1);
  color: #fff;
  padding: 14px 16px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.ra-head h3 {
  font-family: "Raleway", sans-serif; font-weight: 900;
  text-transform: uppercase; font-size: 1.05rem; margin: 0; color: #fff;
}
.ra-head h3 span { color: hsla(var(--accent-hsl), 1); }
.ra-head p { margin: .2em 0 0; font-size: .74rem; color: rgba(255, 255, 255, .85); }
.ra-close {
  background: rgba(255, 255, 255, .15); color: #fff;
  border: 0; border-radius: 50%;
  width: 30px; height: 30px; flex: 0 0 auto;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.ra-close:hover { background: rgba(255, 255, 255, .3); }

.ra-log {
  flex: 1; overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: #FBF8F1;
}
.ra-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: .92rem; line-height: 1.45;
  white-space: normal; overflow-wrap: anywhere;
}
.ra-msg.ra-user {
  align-self: flex-end;
  background: hsla(var(--darkAccent-hsl), 1);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ra-msg.ra-bot {
  align-self: flex-start;
  background: #EDE6FF;
  color: #241539;
  border-bottom-left-radius: 4px;
}
.ra-msg.ra-bot a { color: #6b3fd6; font-weight: 700; text-decoration: underline; }
.ra-msg.ra-bot strong { font-weight: 700; }

.ra-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ra-chip {
  background: #fff;
  border: 2px solid hsla(var(--darkAccent-hsl), .5);
  color: #241539;
  border-radius: 999px;
  padding: .45em .9em;
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ra-chip:hover { border-color: hsla(var(--darkAccent-hsl), 1); background: #F3EDFF; }

.ra-typing { display: inline-flex; gap: 4px; padding: 12px 13px; }
.ra-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: hsla(var(--darkAccent-hsl), .55);
  animation: raPulse 1s infinite ease-in-out;
}
.ra-typing i:nth-child(2) { animation-delay: .18s; }
.ra-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes raPulse { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.ra-input {
  display: flex; gap: 8px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #EEE6D9;
}
.ra-input input {
  flex: 1;
  border: 2px solid #E3DACB;
  border-radius: 10px;
  padding: .65em .85em;
  font: inherit; font-size: .95rem;
  color: #241539;
  background: #fff;
}
.ra-input input:focus { outline: none; border-color: hsla(var(--darkAccent-hsl), 1); }
.ra-send {
  background: hsla(var(--accent-hsl), 1);
  color: hsla(var(--darkAccent-hsl), 1);
  border: 0; border-radius: 10px;
  width: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ra-send:disabled { opacity: .45; cursor: default; }
.ra-send svg { width: 20px; height: 20px; }
.ra-note {
  padding: 0 12px 10px;
  background: #fff;
  font-size: .68rem; color: #8a8377;
  text-align: center;
}

@media (max-width: 599px) {
  .ra-btn { right: 1rem; bottom: 1rem; padding: .8em; }
  .ra-btn .ra-label { display: none; }
  .ra-panel {
    right: 0; bottom: 0; left: 0;
    width: 100vw; height: 100dvh;
    border-radius: 0;
  }
}

/* Hoher Kontrast */
.a11y-contrast .ra-btn, .a11y-contrast .ra-head { background: #000 !important; color: #fff; }
.a11y-contrast .ra-btn { border: 2px solid #fff; }
.a11y-contrast .ra-log { background: #fff; }
.a11y-contrast .ra-msg.ra-user { background: #000; }
.a11y-contrast .ra-msg.ra-bot { background: #fff; color: #000; border: 2px solid #000; }
.a11y-contrast .ra-msg.ra-bot a { color: #000; }
.a11y-contrast .ra-chip { border-color: #000; color: #000; background: #fff; }
.a11y-contrast .ra-send { background: #000; color: #fff; }

/* Karte auf der Kontaktseite, öffnet den Assistenten */
.ra-kontakt {
  max-width: var(--maxPageWidth);
  margin: 0 auto;
  padding: 3rem var(--sqs-mobile-site-gutter) 4rem;
  text-align: left;
}
.ra-kontakt h2 { margin-bottom: .5em; }
.ra-kontakt p { max-width: 34em; margin-bottom: 1.4em; }
.ra-kontakt-btn {
  display: inline-flex; align-items: center;
  background: hsla(var(--accent-hsl), 1);
  color: hsla(var(--darkAccent-hsl), 1);
  border: 0; border-radius: 0;
  padding: .9em 1.8em;
  font-family: "Raleway", sans-serif; font-weight: 900;
  text-transform: uppercase; font-size: 1rem;
  cursor: pointer;
}
.ra-kontakt-btn:hover { opacity: .9; }
.a11y-contrast .ra-kontakt-btn { background: #000; color: #fff; }

/* AGB Seite: Inhaltsverzeichnis + Absatznummern */
.agb .agb-toc {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .35em 1.5em;
  background: #F3EDFF; padding: 1.2em 1.4em; margin: 1.5rem 0 2rem;
  font-size: .95rem;
}
@media (max-width: 599px) { .agb .agb-toc { grid-template-columns: 1fr; } }
.agb .agb-toc a { font-weight: 700; }
.agb h3 { margin-top: 2.2em; scroll-margin-top: 110px; }
.agb .agb-download { margin: 1.5rem 0; }
.agb .agb-stand { margin-top: 3rem; font-size: .85rem; opacity: .75; }
.a11y-contrast .agb .agb-toc { background: #fff; border: 2px solid #000; }