/* ---- fonts.css ---- */
/* ==========================================================================
   Fonts
   ========================================================================== */

/*
 * Montserrat wird vorzugsweise lokal eingebunden.
 *
 * Erwartete Dateien:
 *
 * assets/fonts/montserrat-regular.woff2
 * assets/fonts/montserrat-medium.woff2
 * assets/fonts/montserrat-semibold.woff2
 * assets/fonts/montserrat-bold.woff2
 */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-regular-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-medium-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-semibold-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-bold-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ---- variables.css ---- */
/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Colors
     ------------------------------------------------------------------------ */
  --color-primary: #4e5226;
  --color-primary-hover: #5e6315;
  --color-primary-muted: #5e6315;

  --color-secondary: #5e6315;

  --color-accent: #a09657;

  --color-background:#f5f5f2;
  --color-surface:  #f4fae3;
  --color-surface-muted: #ecece7;
  --color-surface-strong: #323518;

  --color-var-one: #002f36;
  --color-var-one: #00b8b5;
  --color-var-one: #a6cf9e;
  

  --color-text: #030300;
  --color-text-muted: #030300;
  --color-text-inverse: #ffffff;

  --color-heading: #536a48;

  --color-border: #d9dcda;


  /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */

  --font-family:
    "Montserrat",
    Arial,
    sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-h1: clamp(2.5rem, 5vw, 4.75rem);
  --font-size-h2: clamp(2rem, 3.8vw, 3.5rem);
  --font-size-h3: clamp(1.5rem, 2.4vw, 2.25rem);
  --font-size-h4: clamp(1.25rem, 1.8vw, 1.6rem);
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;

  --font-size-body-large: clamp(1.075rem, 1.3vw, 1.25rem);
  --font-size-body: 1rem;
  --font-size-body-small: 0.875rem;
  --font-size-eyebrow: 0.8rem;
  --font-size-button: 0.9rem;

  --line-height-h1: 1.05;
  --line-height-h2: 1.1;
  --line-height-h3: 1.15;
  --line-height-h4: 1.2;
  --line-height-body: 1.7;
  --line-height-body-large: 1.65;

  --letter-spacing-heading: -0.025em;
  --letter-spacing-body: 0;
  --letter-spacing-eyebrow: 0.12em;


  /* ------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------ */

  --space-one: 0.25rem;
  --space-two: 0.5rem;
  --space-three: 0.75rem;
  --space-four: 1rem;
  --space-five: 1.5rem;
  --space-six: 2rem;
  --space-seven: 3rem;
  --space-eight: 4rem;
  --space-nine: 6rem;
  --space-ten: 8rem;

  --section-spacing-small: clamp(3rem, 6vw, 5rem);
  --section-spacing: clamp(5rem, 9vw, 8rem);
  --section-spacing-large: clamp(7rem, 12vw, 11rem);


  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */

  --container-width: 75rem;
  --container-width-wide: 90rem;
  --container-width-narrow: 50rem;

  --container-padding: clamp(1.25rem, 4vw, 3rem);


  /* ------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------ */

  --border-width: 1px;

  --radius-small: 0.5rem;
  --radius-medium: 1rem;
  --radius-large: 1.5rem;
  --radius-round: 999rem;


  /* ------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------ */

  --shadow-small:
    0 0.25rem 1rem rgb(0 0 0 / 0.06);

  --shadow-medium:
    0 1rem 2.5rem rgb(0 0 0 / 0.08);


  /* ------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------ */

  --duration-fast: 150ms;
  --duration-medium: 300ms;
  --duration-slow: 600ms;

  --easing-standard:
    cubic-bezier(0.2, 0.8, 0.2, 1);

  --transition-fast:
    var(--duration-fast)
    var(--easing-standard);

  --transition-medium:
    var(--duration-medium)
    var(--easing-standard);

  --transition-slow:
    var(--duration-slow)
    var(--easing-standard);


  /* ------------------------------------------------------------------------
     Z-index
     ------------------------------------------------------------------------ */

  --z-index-header: 100;
  --z-index-overlay: 200;
}

/* ---- base.css ---- */
/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  margin: 0;

  color: var(--color-text);
  background-color: var(--color-background);

  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;

  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote {
  margin-top: 0;
}

::selection {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0.25rem;
}

/* ---- typography.css ---- */
/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--space-five);

  color: var(--color-heading);

  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}


/* ==========================================================================
   Body text
   ========================================================================== */

p {
  margin-bottom: var(--space-five);
}

p:last-child {
  margin-bottom: 0;
}

.text-large {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}

.text-small {
  font-size: var(--font-size-body-small);
}

.eyebrow {
  margin-bottom: var(--space-four);

  color: var(--color-primary);

  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-eyebrow);

  text-transform: uppercase;
}


/* ==========================================================================
   Rich text
   ========================================================================== */

.rich-text > *:last-child {
  margin-bottom: 0;
}

.rich-text a {
  color: var(--color-primary);

  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.rich-text a:hover,
.rich-text a:focus-visible {
  color: var(--color-primary-hover);
}

.rich-text ul,
.rich-text ol {
  padding-left: 1.5em;
}

.rich-text li + li {
  margin-top: var(--space-two);
}

/* ==========================================================================
   Editorial highlight
   ========================================================================== */

.text-highlight {
  color: var(--color-highlight);
}

.rich-text u {
  text-underline-offset: 0.16em;
}

.rich-text s {
  text-decoration-thickness: 1px;
}


/* ---- layout.css ---- */
/* ==========================================================================
   Containers
   ========================================================================== */

.container {
  width: min(
    calc(100% - (2 * var(--container-padding))),
    var(--container-width)
  );

  margin-inline: auto;
}

.container--wide {
  width: min(
    calc(100% - (2 * var(--container-padding))),
    var(--container-width-wide)
  );

  margin-inline: auto;
}

.container--narrow {
  width: min(
    calc(100% - (2 * var(--container-padding))),
    var(--container-width-narrow)
  );

  margin-inline: auto;
}


/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  padding-block: var(--section-spacing);
}

.section--small {
  padding-block: var(--section-spacing-small);
}

.section--large {
  padding-block: var(--section-spacing-large);
}

.section--surface {
  background-color: var(--color-surface);
}

.section--muted {
  background-color: var(--color-surface-muted);
}

.section--dark {
  color: var(--color-text-inverse);
  background-color: var(--color-surface-strong);
}

/* ---- buttons.css ---- */
/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 3rem;

  padding:
    var(--space-three)
    var(--space-five);

  color: var(--color-text-inverse);
  background-color: var(--color-primary);

  border:
    var(--border-width)
    solid
    var(--color-primary);

  border-radius: var(--radius-round);

  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;

  text-decoration: none;

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.button:visited {
  color: var(--color-text-inverse);
}

.button:hover,
.button:focus-visible {
  color: var(--color-text-inverse);
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);

  transform: translateY(-0.125rem);
}

.button--secondary {
  color: var(--color-primary);
  background-color: transparent;
}

.button--secondary:visited {
  color: var(--color-primary);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

/* ---- animations.css ---- */
/* ==========================================================================
   Animation base
   ========================================================================== */

.animate {
  --animation-delay: 0ms;

  animation-delay: var(--animation-delay);
  animation-duration: var(--duration-slow);
  animation-fill-mode: both;
  animation-timing-function: var(--easing-standard);

  will-change:
    opacity,
    transform;
}


/* ==========================================================================
   Animation variants
   ========================================================================== */

.animate--fade {
  animation-name: animation-fade;
}

.animate--up {
  animation-name: animation-up;
}

.animate--down {
  animation-name: animation-down;
}

.animate--left {
  animation-name: animation-left;
}

.animate--right {
  animation-name: animation-right;
}

.animate--scale {
  animation-name: animation-scale;
}


/* ==========================================================================
   Animation delays
   ========================================================================== */

.animate--delay-1 {
  --animation-delay: 100ms;
}

.animate--delay-2 {
  --animation-delay: 200ms;
}

.animate--delay-3 {
  --animation-delay: 300ms;
}

.animate--delay-4 {
  --animation-delay: 400ms;
}


/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes animation-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes animation-up {
  from {
    opacity: 0;

    transform:
      translateY(var(--space-seven));
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes animation-down {
  from {
    opacity: 0;

    transform:
      translateY(calc(-1 * var(--space-seven)));
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes animation-left {
  from {
    opacity: 0;

    transform:
      translateX(calc(-1 * var(--space-seven)));
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}

@keyframes animation-right {
  from {
    opacity: 0;

    transform:
      translateX(var(--space-seven));
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}

@keyframes animation-scale {
  from {
    opacity: 0;

    transform:
      scale(0.94);
  }

  to {
    opacity: 1;

    transform:
      scale(1);
  }
}


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

@media (prefers-reduced-motion: reduce) {
  .animate {
    opacity: 1;

    transform: none;

    animation: none;
    will-change: auto;
  }
}

/* ---- navbar.css ---- */
/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: var(--z-index-header);

  width: 100%;

  background-color: transparent;

  border-bottom:
    var(--border-width)
    solid
    transparent;

  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
}


.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-six);

  width: min(
    calc(100% - (2 * var(--container-padding))),
    var(--container-width-wide)
  );

  min-height: 5rem;

  margin-inline: auto;
}


/* ==========================================================================
   Logo
   ========================================================================== */

.site-header__logo {
  display: inline-flex;
  align-items: center;

  color: var(--color-heading);

  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);

  text-decoration: none;
}


.site-header__logo img {
  width: auto;
  max-width: 15rem;
  height: 3.75rem;

  object-fit: contain;
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.site-navigation__menu {
  display: flex;
  align-items: center;

  gap: var(--space-six);

  margin: 0;
  padding: 0;

  list-style: none;
}


.site-navigation__link {
  color: var(--color-text);

  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);

  text-decoration: none;

  transition: color var(--transition-fast);
}


.site-navigation__link:hover,
.site-navigation__link:focus-visible,
.site-navigation__link.is-active {
  color: var(--color-primary);
}


/* ==========================================================================
   Main content offset
   ========================================================================== */

#main-content {
  padding-top: 5rem;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 800px) {
  .site-header__inner {
    min-height: 4.5rem;
  }

  .site-navigation__menu {
    gap: var(--space-four);
  }

  #main-content {
    padding-top: 4.5rem;
  }
}
/* Larger brand mark */
.site-header__inner {
  min-height: 9rem;
}

.site-header__logo img {
  max-width: 30rem;
  height: 7.5rem;
}

#main-content {
  padding-top: 9rem;
}

.site-navigation__toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  padding: .65rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-navigation__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: .32rem 0;
  background: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

@media (max-width: 800px) {
  .site-header__inner {
    position: relative;
    min-height: 6rem;
  }

  .site-header__logo img {
    max-width: 18rem;
    height: 5rem;
  }

  .site-navigation__toggle {
    display: block;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
  }

  .site-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: var(--space-five);
    background: var(--color-background);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / .08);
  }

  .site-navigation.is-open {
    display: block;
  }

  .site-navigation__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-navigation__link {
    display: block;
    padding: .8rem 0;
    font-size: var(--font-size-body);
  }

  .site-navigation__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(.64rem) rotate(45deg);
  }

  .site-navigation__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .site-navigation__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-.64rem) rotate(-45deg);
  }

  #main-content {
    padding-top: 6rem;
  }
}


/* ---- footer.css ---- */
/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  color: var(--color-text-inverse);
  background-color: var(--color-surface-strong);
}

.site-footer__inner {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--space-eight);

  width: min(
    calc(100% - (2 * var(--container-padding))),
    var(--container-width-wide)
  );

  margin-inline: auto;

  padding-block: var(--section-spacing-small);
}

.site-footer__logo {
  display: inline-flex;

  color: var(--color-text-inverse);

  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);

  text-decoration: none;
}

.site-footer__logo img {
  width: auto;
  max-width: 16rem;
  height: auto;
  max-height: 7rem;

  object-fit: contain;
}

.site-footer a {
  color: inherit;
}

@media (max-width: 700px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}
.site-footer__navigation,
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-three);
}

.site-footer__link-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-seven);
  margin-top: var(--space-six);
}

.site-footer__link-groups ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav-title {
  margin-bottom: var(--space-three);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 700px) {
  .site-footer__link-groups {
    grid-template-columns: 1fr;
  }
}

/* Larger footer brand mark */
.site-footer__logo img {
  max-width: 32rem;
  max-height: 14rem;
}

@media (max-width: 700px) {
  .site-footer__logo img {
    max-width: min(100%, 22rem);
    max-height: 10rem;
  }
}


/* ---- page-background.css ---- */
/* ==========================================================================
   Page background effect
   ========================================================================== */

.page--background-effect {
  position: relative;

  isolation: isolate;

  --page-effect-size: 1;
}

.page-content {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   Effect layer
   ========================================================================== */

.page-background-effect {
  position: absolute;
  z-index: 0;

  inset: 0;

  overflow: hidden;

  opacity: var(--page-effect-opacity);

  pointer-events: none;
}


/* ==========================================================================
   Dense blurred color field
   ========================================================================== */

.page-background-effect::before {
  position: absolute;

  inset: -8rem;

  content: "";

  background:
    radial-gradient(
      circle
        calc(28rem * var(--page-effect-size))
      at 4% 5%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(25rem * var(--page-effect-size))
      at 28% 3%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 52% 8%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 76% 4%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(29rem * var(--page-effect-size))
      at 98% 10%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(27rem * var(--page-effect-size))
      at 14% 27%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(31rem * var(--page-effect-size))
      at 40% 24%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(25rem * var(--page-effect-size))
      at 67% 29%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 91% 31%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(28rem * var(--page-effect-size))
      at 2% 51%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 27% 48%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(32rem * var(--page-effect-size))
      at 53% 52%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(27rem * var(--page-effect-size))
      at 79% 49%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(29rem * var(--page-effect-size))
      at 101% 55%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 13% 72%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 39% 76%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(29rem * var(--page-effect-size))
      at 65% 70%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(31rem * var(--page-effect-size))
      at 91% 77%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(27rem * var(--page-effect-size))
      at 1% 96%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 28% 98%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 55% 94%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(31rem * var(--page-effect-size))
      at 81% 99%,
      var(--page-effect-color-three) 0%,
      transparent 72%
    );

  filter:
    blur(
      calc(3.5rem * var(--page-effect-size))
    );

  transform: scale(1.08);
}


/* ==========================================================================
   Fine secondary layer
   ========================================================================== */

.page-background-effect::after {
  position: absolute;

  inset: -6rem;

  content: "";

  background:
    radial-gradient(
      circle
        calc(17rem * var(--page-effect-size))
      at 18% 14%,
      var(--page-effect-color-two) 0%,
      transparent 75%
    ),

    radial-gradient(
      circle
        calc(20rem * var(--page-effect-size))
      at 61% 18%,
      var(--page-effect-color-one) 0%,
      transparent 75%
    ),

    radial-gradient(
      circle
        calc(18rem * var(--page-effect-size))
      at 88% 38%,
      var(--page-effect-color-three) 0%,
      transparent 75%
    ),

    radial-gradient(
      circle
        calc(21rem * var(--page-effect-size))
      at 17% 56%,
      var(--page-effect-color-one) 0%,
      transparent 75%
    ),

    radial-gradient(
      circle
        calc(18rem * var(--page-effect-size))
      at 48% 69%,
      var(--page-effect-color-three) 0%,
      transparent 75%
    ),

    radial-gradient(
      circle
        calc(20rem * var(--page-effect-size))
      at 82% 63%,
      var(--page-effect-color-two) 0%,
      transparent 75%
    ),

    radial-gradient(
      circle
        calc(18rem * var(--page-effect-size))
      at 25% 91%,
      var(--page-effect-color-two) 0%,
      transparent 75%
    ),

    radial-gradient(
      circle
        calc(21rem * var(--page-effect-size))
      at 70% 92%,
      var(--page-effect-color-one) 0%,
      transparent 75%
    );

  opacity: 0.55;

  filter:
    blur(
      calc(4.5rem * var(--page-effect-size))
    );

  transform: scale(1.05);
}


/* ==========================================================================
   Two-color variant
   ========================================================================== */

.page--background-effect-two-colors
.page-background-effect::before {
  background:
    radial-gradient(
      circle
        calc(28rem * var(--page-effect-size))
      at 4% 5%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(25rem * var(--page-effect-size))
      at 28% 3%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 52% 8%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 76% 4%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(29rem * var(--page-effect-size))
      at 98% 10%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(27rem * var(--page-effect-size))
      at 14% 27%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(31rem * var(--page-effect-size))
      at 40% 24%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(25rem * var(--page-effect-size))
      at 67% 29%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 91% 31%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(28rem * var(--page-effect-size))
      at 2% 51%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 27% 48%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(32rem * var(--page-effect-size))
      at 53% 52%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(27rem * var(--page-effect-size))
      at 79% 49%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(29rem * var(--page-effect-size))
      at 101% 55%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 13% 72%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 39% 76%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(29rem * var(--page-effect-size))
      at 65% 70%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(31rem * var(--page-effect-size))
      at 91% 77%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(27rem * var(--page-effect-size))
      at 1% 96%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(30rem * var(--page-effect-size))
      at 28% 98%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(26rem * var(--page-effect-size))
      at 55% 94%,
      var(--page-effect-color-one) 0%,
      transparent 72%
    ),

    radial-gradient(
      circle
        calc(31rem * var(--page-effect-size))
      at 81% 99%,
      var(--page-effect-color-two) 0%,
      transparent 72%
    );
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1000px) {
  .page-background-effect::before {
    inset: -6rem;

    filter:
      blur(
        calc(3rem * var(--page-effect-size))
      );
  }

  .page-background-effect::after {
    inset: -5rem;

    filter:
      blur(
        calc(4rem * var(--page-effect-size))
      );
  }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 700px) {
  .page-background-effect::before {
    inset: -4rem;

    filter:
      blur(
        calc(2.5rem * var(--page-effect-size))
      );

    transform: scale(1.04);
  }

  .page-background-effect::after {
    opacity: 0.4;

    filter:
      blur(
        calc(3rem * var(--page-effect-size))
      );
  }
}


/* ==========================================================================
   Reduced transparency
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
  .page-background-effect {
    display: none;
  }
}

/* ---- hero.css ---- */
/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding:
    var(--section-spacing-small)
    var(--container-padding)
    var(--section-spacing);
}

.hero__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
  align-items: center;

  gap: clamp(
    var(--space-seven),
    7vw,
    var(--space-ten)
  );

  width: min(
    100%,
    var(--container-width-wide)
  );

  margin-inline: auto;
}


/* ==========================================================================
   Content
   ========================================================================== */

.hero__content {
  max-width: 42rem;
}

.hero__title {
  margin-bottom: var(--space-six);
}

.hero__text {
  max-width: 38rem;

  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;

  gap: var(--space-four);

  margin-top: var(--space-seven);
}


/* ==========================================================================
   Media
   ========================================================================== */

.hero__media {
  overflow: hidden;

  border-radius: var(--radius-large);

  background-color: var(--color-surface);
}

.hero__media img {
  width: 100%;
  height: auto;

  aspect-ratio: 4 / 3;

  object-fit: cover;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 800px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__content {
    max-width: none;
  }

  .hero__media {
    width: 90%;
    margin-inline: auto;
  }
}

/* ---- cards.css ---- */
/* ==========================================================================
   Cards section
   ========================================================================== */

.cards {
  padding:
    var(--section-spacing)
    var(--container-padding);
}

.cards__inner {
  width: min(
    100%,
    var(--container-width-wide)
  );

  margin-inline: auto;
}

.cards__header {
  max-width: 44rem;

  margin-bottom: var(--space-eight);
}

.cards__title {
  margin-bottom: var(--space-five);
}

.cards__intro {
  color: var(--color-text-muted);

  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}


/* ==========================================================================
   Grid
   ========================================================================== */

.cards__grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 18rem), 22rem)
    );
  justify-content: center;

  gap: var(--space-six);
}


/* ==========================================================================
   Card
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;

  min-height: 100%;

  padding: var(--space-six);

  background-color: var(--color-surface);

  border:
    var(--border-width)
    solid
    var(--color-border);

  border-radius: var(--radius-medium);

  transition:
    border-color var(--transition-medium),
    box-shadow var(--transition-medium),
    transform var(--transition-medium);
}

.card:hover {
  border-color: var(--color-primary-muted);

  box-shadow: var(--shadow-medium);

  transform: translateY(-0.25rem);
}

.card__title {
  margin-bottom: var(--space-four);

  font-size: var(--font-size-h4);
}

.card__text {
  color: var(--color-text-muted);
}

.card__link {
  display: inline-flex;

  margin-top: auto;
  padding-top: var(--space-five);

  color: var(--color-primary);

  font-weight: var(--font-weight-semibold);

  text-decoration: none;
}

.card__link:hover,
.card__link:focus-visible {
  color: var(--color-primary-hover);
}

/* ---- bubblegrid.css ---- */
/* ==========================================================================
   Bubble grid
   ========================================================================== */

.bubble-grid {
  padding:
    var(--section-spacing)
    var(--container-padding);
}

.bubble-grid--background-default {
  background-color: transparent;
}

.bubble-grid--background-surface {
  background-color: var(--color-surface);
}

.bubble-grid--background-muted {
  background-color: var(--color-surface-muted);
}

.bubble-grid--background-dark {
  color: var(--color-text-inverse);
  background-color: var(--color-surface-strong);
}

.bubble-grid__inner {
  width: min(
    100%,
    var(--container-width-wide)
  );

  margin-inline: auto;
}


/* ==========================================================================
   Header
   ========================================================================== */

.bubble-grid__header {
  margin-bottom: var(--space-eight);
}

.bubble-grid__header-content {
  min-width: 0;
}

.bubble__title {
  max-width: 100%;

  margin-bottom: var(--space-four);

  font-size: clamp(
    1.25rem,
    1.7vw,
    2rem
  );
  line-height: 1.15;

  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;

  text-wrap: balance;
}

.bubble-grid__intro {
  color: var(--color-text-muted);

  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}

.bubble-grid--background-dark
.bubble-grid__title,
.bubble-grid--background-dark
.bubble-grid__intro {
  color: inherit;
}


/* ==========================================================================
   Header without image
   ========================================================================== */

.bubble-grid--header-centered
.bubble-grid__header {
  max-width: 52rem;

  margin-right: auto;
  margin-left: auto;

  text-align: center;
}

.bubble-grid--header-centered
.bubble-grid__eyebrow {
  text-align: center;
}

.bubble-grid--header-centered
.bubble-grid__intro {
  max-width: 44rem;

  margin-right: auto;
  margin-left: auto;
}


/* ==========================================================================
   Header with image
   ========================================================================== */

.bubble-grid--has-header-image
.bubble-grid__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: center;

  gap: clamp(
    var(--space-seven),
    7vw,
    var(--space-ten)
  );
}

.bubble-grid--has-header-image
.bubble-grid__header-content {
  max-width: 42rem;
}

.bubble-grid--header-image-left
.bubble-grid__header-media {
  grid-column: 1;
  grid-row: 1;
}

.bubble-grid--header-image-left
.bubble-grid__header-content {
  grid-column: 2;
  grid-row: 1;
}

.bubble-grid--header-image-right
.bubble-grid__header-content {
  grid-column: 1;
  grid-row: 1;
}

.bubble-grid--header-image-right
.bubble-grid__header-media {
  grid-column: 2;
  grid-row: 1;
}

.bubble-grid__header-media {
  overflow: hidden;

  background-color: var(--color-surface);

  border-radius: var(--radius-large);
}

.bubble-grid__header-media img {
  width: 100%;
  height: auto;

  aspect-ratio: 4 / 3;

  object-fit: cover;
}


/* ==========================================================================
   Grid
   ========================================================================== */

.bubble-grid__grid {
  display: grid;

  grid-template-columns:
    repeat(
      12,
      minmax(0, 1fr)
    );

  grid-auto-rows:
    minmax(
      var(--bubble-grid-row-height),
      auto
    );

  align-items: stretch;

  gap: var(--bubble-grid-gap);
}

.bubble-grid--gap-small {
  --bubble-grid-gap: var(--space-four);
}

.bubble-grid--gap-medium {
  --bubble-grid-gap: var(--space-six);
}

.bubble-grid--gap-large {
  --bubble-grid-gap: var(--space-seven);
}

.bubble-grid--rows-compact {
  --bubble-grid-row-height: 4rem;
}

.bubble-grid--rows-medium {
  --bubble-grid-row-height: 6rem;
}

.bubble-grid--rows-generous {
  --bubble-grid-row-height: 8rem;
}


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

.bubble {
  position: relative;

  grid-column:
    var(--bubble-column-start)
    /
    span var(--bubble-column-span);

  grid-row:
    var(--bubble-row-start)
    /
    span var(--bubble-row-span);

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  border: var(--border-width) solid transparent;

  box-shadow: var(--shadow-small);

  transition:
    border-color var(--transition-medium),
    box-shadow var(--transition-medium),
    transform var(--transition-medium);
}

.bubble--border {
  border-color: var(--color-border);
}

.bubble--no-border {
  border-color: transparent;
}

.bubble--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.bubble--link:hover,
.bubble--link:focus-visible {
  box-shadow: var(--shadow-medium);
  transform: translateY(-0.125rem);
}

.bubble--link.bubble--border:hover,
.bubble--link.bubble--border:focus-visible {
  border-color: var(--color-primary-muted);
}


/* ==========================================================================
   Shapes
   ========================================================================== */

.bubble--shape-rounded {
  border-radius: var(--radius-medium);
}

.bubble--shape-soft {
  border-radius: var(--radius-large);
}

.bubble--shape-pill {
  border-radius: clamp(
    var(--radius-large),
    4vw,
    3rem
  );
}


/* ==========================================================================
   Text bubbles
   ========================================================================== */

.bubble--type-text {
  display: flex;
  flex-direction: column;
}

.bubble--tone-surface {
  color: var(--color-text);
  background-color: var(--color-surface);
}

.bubble--tone-muted {
  color: var(--color-text);
  background-color: var(--color-surface-muted);
}

.bubble--tone-primary {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.bubble--tone-strong {
  color: var(--color-text-inverse);
  background-color: var(--color-surface-strong);
  border-color: var(--color-surface-strong);
}

.bubble--tone-glass {
  color: var(--color-text);

  background-color:
    color-mix(
      in srgb,
      var(--color-surface) 82%,
      transparent
    );

  backdrop-filter: blur(0.75rem);
}

.bubble--tone-primary
.bubble__title,
.bubble--tone-primary
.bubble__eyebrow,
.bubble--tone-primary
.bubble__text,
.bubble--tone-strong
.bubble__title,
.bubble--tone-strong
.bubble__eyebrow,
.bubble--tone-strong
.bubble__text {
  color: inherit;
}

.bubble--align-top {
  justify-content: flex-start;
}

.bubble--align-center {
  justify-content: center;
}

.bubble--align-bottom {
  justify-content: flex-end;
}

.bubble__content {
  padding: clamp(
    var(--space-five),
    4vw,
    var(--space-seven)
  );
}

.bubble__title {
  margin-bottom: var(--space-four);
}

.bubble__text {
  color: var(--color-text-muted);
}


/* ==========================================================================
   Image bubbles
   ========================================================================== */

.bubble--type-image {
  display: block;

  margin: 0;

  background-color: var(--color-surface-muted);
}

.bubble--type-image
.bubble__image {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 100%;
  min-height: 100%;
}

.bubble--image-fit-cover
.bubble__image {
  object-fit: cover;
}

.bubble--image-fit-contain
.bubble__image {
  object-fit: contain;
}

.bubble--image-position-center
.bubble__image {
  object-position: center;
}

.bubble--image-position-top
.bubble__image {
  object-position: center top;
}

.bubble--image-position-bottom
.bubble__image {
  object-position: center bottom;
}

.bubble--image-position-left
.bubble__image {
  object-position: left center;
}

.bubble--image-position-right
.bubble__image {
  object-position: right center;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1000px) {
  .bubble-grid--has-header-image
  .bubble-grid__header {
    gap: var(--space-seven);
  }

  .bubble-grid__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-auto-rows: auto;
  }

  .bubble {
    grid-column: auto;
    grid-row: auto;
  }

  .bubble--type-image {
    aspect-ratio: 4 / 3;
  }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 700px) {
  .bubble-grid--has-header-image
  .bubble-grid__header {
    grid-template-columns: 1fr;
  }

  .bubble-grid--header-image-left
  .bubble-grid__header-media,
  .bubble-grid--header-image-left
  .bubble-grid__header-content,
  .bubble-grid--header-image-right
  .bubble-grid__header-media,
  .bubble-grid--header-image-right
  .bubble-grid__header-content {
    grid-column: 1;
  }

  .bubble-grid--header-image-left
  .bubble-grid__header-media {
    grid-row: 1;
  }

  .bubble-grid--header-image-left
  .bubble-grid__header-content {
    grid-row: 2;
  }

  .bubble-grid--header-image-right
  .bubble-grid__header-content {
    grid-row: 1;
  }

  .bubble-grid--header-image-right
  .bubble-grid__header-media {
    grid-row: 2;
  }

  .bubble-grid--has-header-image
  .bubble-grid__header-content {
    max-width: none;
  }

  .bubble-grid__grid {
    grid-template-columns: 1fr;
  }

  .bubble--type-image {
    aspect-ratio: 16 / 10;
  }
}


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

@media (prefers-reduced-motion: reduce) {
  .bubble {
    transition: none;
  }

  .bubble--link:hover,
  .bubble--link:focus-visible {
    transform: none;
  }
}

/* ---- image-text-rows.css ---- */
.image-text-rows { padding:var(--section-spacing-small) var(--container-padding); }
.image-text-rows__inner { width:min(80%, var(--container-width-wide)); margin-inline:auto; }
.image-text-rows__header { width:min(100%, var(--container-width-narrow)); margin:0 auto var(--space-eight); text-align:center; }
.image-text-rows__list { display:grid; gap:var(--space-six); }
.image-text-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(var(--space-six),6vw,var(--space-nine)); padding:clamp(var(--space-three),2vw,var(--space-six)); border-radius:var(--radius-large); }
.image-text-row--reverse .image-text-row__media { order:2; }
.image-text-row--reverse .image-text-row__content { order:1; text-align:right; justify-self:end; }
.image-text-row:not(.image-text-row--reverse) .image-text-row__content { text-align:left; }
.image-text-row__media { overflow:hidden; border-radius:var(--radius-large); }
.image-text-row__media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.image-text-row__content { max-width:38rem; }
.image-text-row__content h3 { margin-bottom:var(--space-five); }
.image-text-row__actions { margin-top:var(--space-six); }
.image-text-row--bg-background { background:var(--color-background); }
.image-text-row--bg-surface { background:var(--color-surface); }
.image-text-row--bg-muted { background:var(--color-surface-muted); }
.image-text-row--bg-strong { background:var(--color-surface-strong); color:var(--color-background); }
.image-text-row--bg-accent { background:var(--color-accent); }
.image-text-row--bg-strong h3 { color:inherit; }
@media (max-width:800px) {
  .image-text-rows__inner { width:100%; }
  .image-text-row { grid-template-columns:1fr; gap:var(--space-five); }
  .image-text-row--reverse .image-text-row__media, .image-text-row--reverse .image-text-row__content { order:initial; }
  .image-text-row__media { order:1 !important; }
  .image-text-row__content, .image-text-row--reverse .image-text-row__content { order:2 !important; max-width:none; text-align:left; justify-self:stretch; }
}

.image-text-row--border-default { border:var(--border-width) solid var(--color-border); }
.image-text-row--border-primary { border:var(--border-width) solid var(--color-primary); }
.image-text-row--border-accent { border:var(--border-width) solid var(--color-accent); }
.image-text-row--border-heading { border:var(--border-width) solid var(--color-heading); }
.image-text-row--border-strong { border:var(--border-width) solid var(--color-surface-strong); }


/* ---- image-text.css ---- */
.image-text {
  width: min(80%, var(--container-width-wide));
  margin: var(--space-six) auto;
  padding: var(--section-spacing-small) clamp(var(--space-five), 5vw, var(--space-eight));
  border-radius: var(--radius-large);
}
.image-text__inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(var(--space-seven),7vw,var(--space-ten)); width:100%; }
.image-text--image-left .image-text__media { order:1; }
.image-text--image-left .image-text__content { order:2; text-align:left; }
.image-text--image-right .image-text__content { text-align:right; }
.image-text__content { max-width:42rem; }
.image-text--image-right .image-text__content { justify-self:end; }
.image-text__title { margin-bottom:var(--space-six); }
.image-text__media { overflow:hidden; border-radius:var(--radius-large); }
.image-text__media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.image-text__actions { margin-top:var(--space-seven); }
.image-text--bg-background { background:var(--color-background); }
.image-text--bg-surface { background:var(--color-surface); }
.image-text--bg-muted { background:var(--color-surface-muted); }
.image-text--bg-strong { background:var(--color-surface-strong); color:var(--color-background); }
.image-text--bg-accent { background:var(--color-accent); }
.image-text--bg-strong .image-text__title, .image-text--bg-strong .eyebrow { color:inherit; }
@media (max-width:800px) {
  .image-text { width:100%; border-radius:0; }
  .image-text__inner { grid-template-columns:1fr; }
  .image-text__media, .image-text--image-left .image-text__media { order:1; }
  .image-text__content, .image-text--image-left .image-text__content, .image-text--image-right .image-text__content { order:2; max-width:none; text-align:left; justify-self:stretch; }
}

.image-text--border-default { border:var(--border-width) solid var(--color-border); }
.image-text--border-primary { border:var(--border-width) solid var(--color-primary); }
.image-text--border-accent { border:var(--border-width) solid var(--color-accent); }
.image-text--border-heading { border:var(--border-width) solid var(--color-heading); }
.image-text--border-strong { border:var(--border-width) solid var(--color-surface-strong); }


/* ---- cta.css ---- */
.cta-block { width:min(80%, var(--container-width-wide)); margin:var(--space-six) auto; padding:var(--section-spacing-small) clamp(var(--space-five),5vw,var(--space-eight)); border-radius:var(--radius-large); }
.cta-block__inner { width:min(100%, var(--container-width-narrow)); margin-inline:auto; text-align:center; }
.cta-block__title { margin-bottom:var(--space-five); }
.cta-block__text { max-width:42rem; margin-inline:auto; }
.cta-block__actions { display:flex; justify-content:center; margin-top:var(--space-six); }
.cta-block--bg-background { background:var(--color-background); }
.cta-block--bg-surface { background:var(--color-surface); }
.cta-block--bg-muted { background:var(--color-surface-muted); }
.cta-block--bg-strong { background:var(--color-surface-strong); color:var(--color-background); }
.cta-block--bg-accent { background:var(--color-accent); }
.cta-block--bg-strong .cta-block__title, .cta-block--bg-strong .eyebrow { color:inherit; }
@media (max-width:800px) { .cta-block { width:100%; border-radius:0; } }

.cta-block--border-default { border:var(--border-width) solid var(--color-border); }
.cta-block--border-primary { border:var(--border-width) solid var(--color-primary); }
.cta-block--border-accent { border:var(--border-width) solid var(--color-accent); }
.cta-block--border-heading { border:var(--border-width) solid var(--color-heading); }
.cta-block--border-strong { border:var(--border-width) solid var(--color-surface-strong); }


/* ---- legal.css ---- */
/* ==========================================================================
   Legal page
   ========================================================================== */

.legal-page {
  padding:
    clamp(
      var(--space-eight),
      8vw,
      var(--space-ten)
    )
    var(--container-padding)
    var(--section-spacing);
}


.legal-page__inner {
  width: min(
    100%,
    52rem
  );

  margin-inline: auto;
}


/* ==========================================================================
   Header
   ========================================================================== */

.legal-page__header {
  margin-bottom:
    clamp(
      var(--space-eight),
      8vw,
      var(--space-ten)
    );
}


.legal-page__title {
  margin-bottom: var(--space-six);
}


.legal-page__introduction {
  max-width: 46rem;

  color: var(--color-text-muted);

  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}


.legal-page__introduction > :first-child {
  margin-top: 0;
}


.legal-page__introduction > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   Legal content
   ========================================================================== */

.legal-page__content {
  color: var(--color-text);

  line-height: 1.7;

  overflow-wrap: break-word;
  hyphens: auto;
}


.legal-page__content > :first-child {
  margin-top: 0;
}


.legal-page__content > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   Headings
   ========================================================================== */

.legal-page__content h2 {
  margin-top:
    clamp(
      var(--space-eight),
      8vw,
      var(--space-ten)
    );

  margin-bottom: var(--space-five);

  text-wrap: balance;
}


.legal-page__content h3 {
  margin-top: var(--space-eight);
  margin-bottom: var(--space-four);

  text-wrap: balance;
}


.legal-page__content h4 {
  margin-top: var(--space-seven);
  margin-bottom: var(--space-four);

  text-wrap: balance;
}


/* ==========================================================================
   Paragraphs
   ========================================================================== */

.legal-page__content p {
  margin-top: 0;
  margin-bottom: var(--space-five);
}


/* ==========================================================================
   Lists
   ========================================================================== */

.legal-page__content ul,
.legal-page__content ol {
  margin-top: 0;
  margin-bottom: var(--space-six);

  padding-left: 1.5em;
}


.legal-page__content li {
  padding-left: 0.25em;
}


.legal-page__content li + li {
  margin-top: var(--space-three);
}


.legal-page__content li > p {
  margin-bottom: var(--space-three);
}


/* ==========================================================================
   Links
   ========================================================================== */

.legal-page__content a,
.legal-page__introduction a {
  color: var(--color-primary);

  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}


.legal-page__content a:hover,
.legal-page__content a:focus-visible,
.legal-page__introduction a:hover,
.legal-page__introduction a:focus-visible {
  color: var(--color-heading);
}


/* ==========================================================================
   Strong / emphasis
   ========================================================================== */

.legal-page__content strong {
  color: var(--color-heading);

  font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 700px) {
  .legal-page {
    padding-bottom: var(--space-ten);
  }

  .legal-page__header {
    margin-bottom: var(--space-eight);
  }

  .legal-page__content h2 {
    margin-top: var(--space-eight);
  }

  .legal-page__content h3 {
    margin-top: var(--space-seven);
  }

  .legal-page__content h4 {
    margin-top: var(--space-six);
  }
}

/* ---- blog.css ---- */
/* ==========================================================================    Blog overview    ========================================================================== */

.blog-overview__header {
  max-width: var(--container-width-narrow);
  margin-bottom: var(--space-seven);
}

.blog-search {
  max-width: 46rem;
  margin-bottom: var(--space-six);
}

.blog-search label {
  display: block;
  margin-bottom: var(--space-two);
  font-weight: var(--font-weight-semibold);
}

.blog-search__row {
  display: flex;
  gap: var(--space-three);
}

.blog-search input[type="search"] {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-three) var(--space-four);
  color: var(--color-text);
  background: var(--color-background);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
}

.blog-filters,
.blog-taxonomy,
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-two);
}

.blog-filters {
  margin-bottom: var(--space-six);
}

.blog-filters__label,
.blog-tags > span {
  font-weight: var(--font-weight-semibold);
}

.blog-filter,
.blog-taxonomy a,
.blog-tags a {
  padding: 0.35rem 0.75rem;
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  text-decoration: none;
}

.blog-filter:hover,
.blog-filter:focus-visible,
.blog-filter.is-active,
.blog-taxonomy a:hover,
.blog-taxonomy a:focus-visible,
.blog-tags a:hover,
.blog-tags a:focus-visible {
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.blog-results-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-three);
  margin-bottom: var(--space-five);
}

.blog-results-summary p {
  margin: 0;
}

.blog-results-summary a {
  color: var(--color-primary);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-six);
}

.blog-card {
  overflow: hidden;
  background: var(--color-background);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-small);
}

.blog-card__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  text-decoration: none;
}

.blog-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-muted);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.blog-card__link:hover .blog-card__media img,
.blog-card__link:focus-visible .blog-card__media img {
  transform: scale(1.025);
}

.blog-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-five);
}

.blog-card time,
.blog-article__date {
  display: block;
  margin-bottom: var(--space-three);
  color: var(--color-text-muted);
  font-size: var(--font-size-body-small);
}

.blog-card h2 {
  margin-bottom: var(--space-three);
  font-size: var(--font-size-h4);
}

.blog-card__more {
  margin-top: auto;
  padding-top: var(--space-four);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.blog-empty {
  padding-block: var(--space-seven);
  text-align: center;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-four);
  margin-top: var(--space-seven);
}

/* ==========================================================================    Blog article    ========================================================================== */

.blog-article__header {
  padding-bottom: var(--space-seven);
}

.blog-back {
  display: inline-block;
  margin-bottom: var(--space-six);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.blog-article__excerpt {
  margin-bottom: var(--space-five);
}

.blog-article__cover {
  margin-top: var(--space-seven);
}

.blog-article__cover img {
  width: 100%;
  max-height: 42rem;
  object-fit: cover;
  border-radius: var(--radius-large);
}

.blog-article__footer {
  border-top: var(--border-width) solid var(--color-border);
}

.blog-tags {
  margin-bottom: var(--space-six);
}

.blog-article__footer .blog-back {
  margin-bottom: 0;
}

@media (max-width: 40rem) {
  .blog-search__row,
  .blog-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-search__row .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__media img {
    transition: none;
  }
}

/* Search controls: text, category and tag search */
.blog-search {
  max-width: none;
}

.blog-search__controls {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
  gap: var(--space-three);
  align-items: stretch;
}

.blog-search__controls input,
.blog-search__controls select {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-three) var(--space-four);
  color: var(--color-text);
  background: var(--color-background);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  font: inherit;
}

.blog-filters--tags {
  margin-top: calc(var(--space-three) * -1);
}

@media (max-width: 60rem) {
  .blog-search__controls {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 40rem) {
  .blog-search__controls {
    grid-template-columns: 1fr;
  }

  .blog-search__controls .button {
    width: 100%;
  }
}


/* ==========================================================================
   Ergänzungen für die statische Version (Bugfixes)
   ========================================================================== */

/* Fehlte komplett – wurde in blog.php verwendet */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* Barrierefreiheit: Sprunglink zum Inhalt */
.skip-link {
  position: absolute;
  top: -10rem;
  left: var(--space-four);
  z-index: calc(var(--z-index-header) + 1);
  padding: var(--space-three) var(--space-five);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-radius: var(--radius-small);
}

.skip-link:focus {
  top: var(--space-four);
}

/* CTA-Bubbles „Jetzt kostenfreies Erstgespräch vereinbaren!“
   (ersetzt die Unterstrich-Linien „_______“ aus dem Editor) */
.bubble--cta {
  justify-content: center;
  text-align: center;
}

.bubble--cta .bubble__content {
  padding-block: var(--space-five);
}

.bubble--cta .bubble__text {
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-bold);
}

.bubble--cta .bubble__text u {
  text-decoration: none;
}

.bubble--cta .bubble__text p::after {
  content: " →";
}

/* Fixierter Header war komplett transparent -> Inhalte darunter unlesbar */
.site-header {
  background-color: color-mix(in srgb, var(--color-background) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-border) 15%, transparent);
}

/* Footer-Adresse: Zeilen standen ohne Umbruch nebeneinander */
.site-footer address {
  font-style: normal;
}

.site-footer address span {
  display: block;
}

/* Burger-Menü: „X“ war schief (Versatz .64rem passte nicht zum Linienabstand) */
@media (max-width: 800px) {
  .site-navigation__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(calc(.32rem + 2px)) rotate(45deg);
  }

  .site-navigation__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(calc(-.32rem - 2px)) rotate(-45deg);
  }
}

/* Blog-Suche ohne Kategorie/Tag-Auswahl */
.blog-search {
  max-width: 46rem;
}

.blog-results-summary {
  margin-bottom: var(--space-five);
}

/* Button unter der Seitenüberschrift (Startseite) */
.bubble-grid__actions {
  margin-top: var(--space-six);
}

/* Mittlere Breite (Tablet): Paare wie auf dem Desktop nebeneinander,
   Kacheln, die in ihrer Zeile allein stehen, über volle Breite */
@media (max-width: 1000px) {
  .bubble--row-single {
    grid-column: 1 / -1;
  }
}

/* Mittlere Breite: Bild neben sehr langem Text nicht in die Höhe ziehen
   (lief sonst seitlich aus dem Raster) */
@media (min-width: 701px) and (max-width: 1000px) {
  .bubble--type-image {
    align-self: start;
  }
}

/* ==========================================================================
   Vergleichszeile (Pakete): Name, Beschreibung, Liste und Preis
   stehen bei allen Paketen auf gleicher Höhe
   ========================================================================== */
.compare-row {
  display: grid;
  grid-column: 1 / -1;
  grid-row: var(--compare-row);
  grid-template-columns: repeat(var(--compare-count), minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--bubble-grid-gap);
}

.compare-row > .bubble {
  grid-column: auto;
  grid-row: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-four);
  padding: clamp(var(--space-five), 3vw, var(--space-six));
}

.bubble--compare .bubble__content,
.bubble--compare .bubble__text {
  display: contents;
}

.bubble--compare .bubble__title,
.bubble--compare .bubble__text > * {
  margin: 0;
}

.bubble--compare .bubble__text > p:last-child {
  margin-top: auto;
  padding-top: var(--space-four);
  border-top: var(--border-width) solid currentColor;
  font-size: var(--font-size-h4);
}

@supports (grid-template-rows: subgrid) {
  .compare-row > .bubble {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--space-four);
  }

  .bubble--compare .bubble__text > p:last-child {
    align-self: end;
  }
}

.compare-row__hint {
  display: none;
}

/* Tablet & Handy: Pakete bleiben nebeneinander und lassen sich wischen */
@media (max-width: 1000px) {
  .compare-row {
    grid-row: auto;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: var(--space-two) var(--space-one) var(--space-four);
  }

  .compare-row > .bubble {
    grid-column: auto;
    grid-row: span 4;
    scroll-snap-align: start;
  }

  .compare-row.is-scrollable + .compare-row__hint {
    display: block;
    grid-column: 1 / -1;
    margin: calc(-1 * var(--space-four)) 0 0;
    font-size: var(--font-size-body-small);
    text-align: center;
    opacity: .7;
  }
}

@media (max-width: 700px) {
  .compare-row {
    grid-auto-columns: 85%;
  }
}

/* Footer: Kontaktdaten unter dem Logo */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-five);
}

.site-footer__navigation .site-footer__link-groups {
  margin-top: 0;
}

.site-footer__logo img {
  max-width: min(100%, 18rem);
}

/* Footer: Rechtliches als horizontale Linkzeile ohne Überschrift */
.site-footer__navigation {
  justify-content: flex-end;
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-two) var(--space-six);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footer: E-Mail + Instagram und Rechtslinks in einer gemeinsamen Zeile */
.site-footer__inner {
  grid-template-columns: 1fr;
  gap: var(--space-six);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-four) var(--space-six);
  padding-top: var(--space-five);
  border-top: var(--border-width) solid rgb(255 255 255 / .15);
}

.site-footer__contact--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-two) var(--space-six);
}

.site-footer__instagram {
  display: inline-flex;
  align-items: center;
  gap: var(--space-two);
}

.site-footer__instagram svg {
  flex: 0 0 auto;
  align-self: center;
}

.site-footer__icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-two);
}

.site-footer__icon-link svg {
  flex: 0 0 auto;
}

/* Kontaktseite: Telefon, E-Mail, Instagram immer in einer Zeile */
.bubble--contact {
  container-type: inline-size;
}

.bubble--contact .bubble__content {
  padding: var(--space-five);
}

.bubble--contact .bubble__title {
  margin-bottom: 0;
  font-size: 1rem;
  font-size: clamp(0.9rem, 6.5cqi, 1.5rem);
  white-space: nowrap;
  hyphens: manual;
  overflow-wrap: normal;
  text-wrap: nowrap;
}

/* Kleine Kacheln (Bilder, kurze Texte) quadratisch:
   Mindesthöhe = eigene Breite (berechnet aus der Rasterbreite).
   Bei viel Text wird die Kachel nur höher, nie breiter. */
.bubble-grid__grid {
  container-type: inline-size;
}

.bubble.bubble--square {
  min-height: calc((100cqi - 11 * var(--bubble-grid-gap)) / 12 * var(--bubble-column-span)
                   + (var(--bubble-column-span) - 1) * var(--bubble-grid-gap));
}

.bubble.bubble--square.bubble--type-image {
  aspect-ratio: auto;
}

@media (max-width: 1000px) {
  .bubble.bubble--square {
    min-height: calc((100cqi - var(--bubble-grid-gap)) / 2);
  }

  .bubble.bubble--square.bubble--row-single {
    min-height: 0;
  }

  .bubble.bubble--square.bubble--type-image.bubble--row-single {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {
  .bubble.bubble--square {
    min-height: 100cqi;
  }
}

/* Foto in voller Größe (z. B. Porträt auf „Über mich“): Kachel = Foto */
.bubble.bubble--image-natural {
  align-self: start;
  min-height: 0;
}

.bubble.bubble--image-natural .bubble__image {
  object-fit: cover;
}

/* Überschriften nicht trennen */
h1, h2, h3, h4,
.bubble__title,
.bubble-grid__title {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

/* Kleine Bildschirme: Text in quadratischen Kacheln mittig-mittig */
@media (max-width: 1000px) {
  .bubble.bubble--square.bubble--type-text {
    justify-content: center;
    text-align: center;
  }

  .bubble.bubble--square.bubble--type-text .rich-text ul {
    display: inline-block;
    text-align: left;
  }
}

/* Handy: große Überschriften so skalieren, dass lange Wörter
   (z. B. „Betriebswirtschaft“) ohne Trennung in die Zeile passen */
@media (max-width: 700px) {
  h1,
  .bubble-grid__title {
    font-size: min(var(--font-size-h1), 8.4vw);
  }
}

/* Rechtstexte: lange Fachwörter dürfen getrennt werden */
.legal-page__content h2,
.legal-page__content h3,
.legal-page__content h4 {
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 700px) {
  .bubble__title {
    font-size: min(1.25rem, 5.2vw);
  }
}

/* Quadratische Textkacheln: Text auf allen Bildschirmgrößen vertikal mittig */
.bubble.bubble--square.bubble--type-text {
  justify-content: center;
}