/* ========================[ Breakpoint Small ]======================== */

/* ------------[ Sichtbarkeits-Helfer ]------------ */

.only-m,
.only-l,
.only-xl {
  display: none !important;
}

.no-s {
  display: none !important;
}


/* ========================[ Variablen ]======================== */

:root {

  /* ------------[ Farben ]------------ */

  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #333333;

  --color-cream: #ede5d2;
  --color-olive: #8e7944;
  --color-decor: var(--color-olive);
  --color-band: var(--color-white);
  --color-heading: var(--color-olive-dark);
  --color-olive-dark: #6d5a32;
  --color-dark-brown: #3c2516;
  --button-ghost: var(--color-olive-dark);
  --button-fill: var(--color-cream);
  --color-white-55: rgba(255, 255, 255, 0.55);

  --color-darkest-brown: #20140c;
  --color-darkest-brown-50: rgba(32, 20, 12, 0.5);
  --color-darkest-brown-0: rgba(32, 20, 12, 0);


  /* ------------[ Schriften ]------------ */

  --font-base: 'Lexend', system-ui, sans-serif;
  --font-headline: 'Sulphur Point', system-ui, sans-serif;
  --font-size-body: 1rem;
  --line-height-body: 1.4rem;
  --font-size-h1: 2.2rem;
  --line-height-h1: 2.6rem;
  --font-size-h2: 1.6rem;
  --line-height-h2: 2.2rem;
  --font-size-h3: 1.2rem;
  --line-height-h3: 1.6rem;
  --font-size-h4: 1.1rem;
  --line-height-h4: 1.4rem;


  /* ------------[ Abstände ]------------ */

  --space-6: 0.375rem;
  --space-12: 0.75rem;
  --space-18: 1.125rem;
  --space-24: 1.5rem;
  --space-30: 1.875rem;
  --space-36: 2.25rem;
  --space-42: 2.625rem;
  --space-60: 3.75rem;
  --space-120: 7.5rem;
  --corner-radius: 2rem;
  --header-height: 5rem;
  --keyvisual-height: 100vh;
  --keyvisual-space: var(--space-60);
  --keyvisual-shift: 0px;
  /* Weg der Grafiken beim Scrollen, als Anteil ihrer eigenen Höhe. */
  --shape-travel: 0.12;
  --section-space: var(--space-60);
  --grid-gap: var(--space-18);
  --inner-width: 480px;
  --inner-padding: var(--space-18);
}


/* ========================[ Schriften ]======================== */

@font-face {
  font-family: 'Sulphur Point';
  src: url('../../fonts/sulphur-point-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+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: 'Sulphur Point';
  src: url('../../fonts/sulphur-point-regular-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sulphur Point';
  src: url('../../fonts/sulphur-point-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+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: 'Sulphur Point';
  src: url('../../fonts/sulphur-point-bold-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lexend';
  src: url('../../fonts/lexend-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+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: 'Lexend';
  src: url('../../fonts/lexend-variable-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ========================[ Body ]======================== */

html {
  scroll-padding-top: 6rem;
  interpolate-size: allow-keywords;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--font-size-body);
  font-weight: 350;
  line-height: var(--line-height-body);
  letter-spacing: -0.01em;
  background: var(--color-white);
  pointer-events: none;
}

body > * {
  pointer-events: auto;
}

main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  pointer-events: none;
}

main > * {
  pointer-events: auto;
}


/* ========================[ Begrenzung Inhalt ]======================== */

.inner {
  width: 100%;
  max-width: var(--inner-width);
  padding-right: var(--inner-padding);
  padding-left: var(--inner-padding);
  margin-right: auto;
  margin-left: auto;
}

/* Schmalere Varianten für Textstrecken */
.inner.middle-width {
  max-width: 480px;
}

.inner.small-width {
  max-width: 480px;
}


/* ========================[ Formate für Sektionen ]======================== */

section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}


/* ------------[ Spezielle Klassen für Sektionen ]------------ */

section.olive {
  --button-ghost: var(--color-white);
  --button-fill: var(--color-dark-brown);
  --color-band: var(--color-olive);
  --color-decor: var(--color-cream);
  --color-heading: var(--color-white);
  color: var(--color-white);
  background: var(--color-olive);
}

section.brown {
  --button-ghost: var(--color-white);
  --button-fill: var(--color-dark-brown);
  --color-band: var(--color-dark-brown);
  --color-decor: var(--color-cream);
  --color-heading: var(--color-white);
  color: var(--color-white);
  background: var(--color-dark-brown);
}

section.cream {
  --color-band: var(--color-cream);
  --color-decor: var(--color-olive);
  --color-heading: var(--color-olive-dark);
  color: var(--color-dark-brown);
  background: var(--color-cream);
}

section.white {
  --color-band: var(--color-white);
  --color-decor: var(--color-olive);
  --color-heading: var(--color-olive-dark);
  color: var(--color-dark-brown);
  background: var(--color-white);
}

/* Runde Ecken am Anfang und am Ende des Inhalts. */
.keyvisual + section,
.scroll-anchor + section {
  border-top-left-radius: var(--corner-radius);
  border-top-right-radius: var(--corner-radius);
  margin-top: calc(var(--corner-radius) * -1);
}

main > section:last-child {
  flex-grow: 1;
  border-bottom-left-radius: var(--corner-radius);
  border-bottom-right-radius: var(--corner-radius);
  margin-bottom: calc(var(--corner-radius) * -1);
}


/* ------------[ Sektionen aus dem Baukasten ]------------ */

.section-grid .grid {
  row-gap: var(--space-42);
}

.section-column > * + * {
  margin-top: var(--space-30);
}

.section-column > * + .image-element,
.section-column > * + .gallery,
.section-column > * + .accordion {
  margin-top: var(--space-30);
}

.section-grid {
  overflow: clip;
}

.section-grid .grid > .section-column:has(.image-element.flush) {
  order: 1;
}

.section-grid.centered .section-column {
  text-align: center;
}

.section-grid.align-right .section-column {
  text-align: right;
}

.section-grid.centered .button {
  margin-right: auto;
  margin-left: auto;
}

.section-grid.align-right .button {
  margin-left: auto;
}

.section-grid.centered .icon-list,
.section-grid.align-right .icon-list {
  display: inline-flex;
  text-align: left;
}


/* ========================[ Universelle Klassen ]======================== */

/* ------------[ Positionierung der Elemente ]------------ */

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}


/* ------------[ Verschiedene Abstände ]------------ */

.margin-top {
  margin-top: var(--space-42) !important;
}

.margin-top-small {
  margin-top: var(--space-24) !important;
}

.no-margin {
  margin: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}


/* ------------[ Verschiedene Abstände im Grid ]------------ */

.small-grid-gap {
  gap: var(--space-12) !important;
}

.big-grid-gap {
  gap: var(--space-42) !important;
}


/* ------------[ Klassen für Texte ]------------ */

/* Nur für Screenreader: sichtbar erst bei Fokus (siehe .skip-link) */
.visually-hidden {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ========================[ Animationen ]======================== */

@property --form-winkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

@property --form-wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@media (prefers-reduced-motion: no-preference) {

  .button {
    transition: color 0.3s ease 0.4s;
  }

  .button::before {
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.4s;
  }

  .button-line rect {
    transition: stroke-dashoffset 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Weg hinein: Füllung sofort, Linie wartet, bis die Füllung weg ist */
  .button:hover {
    transition-delay: 0.05s;
  }

  .button:hover::before {
    transition-delay: 0s;
  }

  .button:hover .button-line rect {
    transition-delay: 0.3s;
  }

  /* Verlinktes Angebot: die weiße Fläche wächst beim Überfahren auf. */
  .offers-item.is-linked::before {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .accordion-mark::after {
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .accordion-item::details-content {
    transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
  }

  /* Sprungmarken werden sanft angefahren statt hart gesprungen. Betrifft den Pfeil im Keyvisual und den Skip-Link. */
  html {
    scroll-behavior: smooth;
  }

  .has-js .image-reveal[data-inview]::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: var(--color-band);
    transform: translateY(0);
    transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .has-js .image-reveal[data-inview]:not(.is-inview)::after {
    will-change: transform;
  }

  .has-js .image-reveal[data-inview].is-inview::after {
    transform: translateY(-100%);
  }

  .has-js .keyvisual.split .image-reveal[data-inview].is-inview::after {
    transform: translateX(100%);
  }

  .has-js .keyvisual.full .image-reveal[data-inview]::after {
    z-index: 2;
  }

  /* Der Kreis zeichnet sich drehend auf. */
  .has-js [data-inview] .icon-target {
    -webkit-mask-image: conic-gradient(transparent var(--form-winkel), #000 0);
    mask-image: conic-gradient(transparent var(--form-winkel), #000 0);
    transition: --form-winkel 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85);
  }

  .has-js [data-inview].is-inview .icon-target {
    --form-winkel: 0deg;
  }

  /* Die Tulpe schräg statt drehend: Der Strahl der Drehmaske liegt in der Mitte fast auf der Kontur, dort blieben lose Striche stehen. Eine Kante über Eck trifft keine der Linien parallel und deckt gleichmäßig auf. */
  .has-js [data-inview] .image-shape:not(.icon-target),
  .has-js [data-inview] .cta-shape:not(.icon-target),
  .has-js [data-inview] .cards-shape:not(.icon-target) {
    -webkit-mask-image: linear-gradient(to top right, #000 var(--form-wipe), transparent 0);
    mask-image: linear-gradient(to top right, #000 var(--form-wipe), transparent 0);
    transition: --form-wipe 2.6s cubic-bezier(0.4, 0.15, 0.6, 0.85);
  }

  .has-js [data-inview].is-inview .image-shape:not(.icon-target),
  .has-js [data-inview].is-inview .cta-shape:not(.icon-target),
  .has-js [data-inview].is-inview .cards-shape:not(.icon-target) {
    --form-wipe: 100%;
  }

  .has-js .image-element.has-shape .image-reveal[data-inview]::after {
    transition-delay: 1s;
  }

  /* Die Grafiken wandern beim Scrollen mit, hinter wie vor den Bildern. Weg und Größe setzt main.js, jede Grafik etwas anders. */
  .has-js [data-shape-parallax] {
    transform: translate(var(--shape-parallax-x, 0px), var(--shape-parallax, 0px)) scale(var(--shape-scale, 1));
    will-change: transform;
  }

  .scroll-hint {
    animation: scroll-hint 2.4s ease-in-out infinite;
    transition: color 0.3s ease, background 0.3s ease;
  }

  @keyframes scroll-hint {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(var(--space-6));
    }
  }

}


/* ========================[ Header-Bereich ]======================== */

.skip-link {
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
  text-decoration: none;
  background: var(--color-text);
  padding: var(--space-12) var(--space-18);
  transform: translateY(-100%);
  z-index: 100;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Normaler Header auf Seiten ohne Keyvisual. sticky heißt: steht zunächst im Fluss und bleibt beim Scrollen oben kleben. */
.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  background: var(--color-cream);
  padding-top: var(--space-18);
  padding-bottom: var(--space-18);
  z-index: 50;
}

/* Über dem Keyvisual liegt er auf dem Bild statt darüber. Hier fixed statt sticky, weil er sonst Platz im Fluss beanspruchen und das Keyvisual nach unten schieben würde. */
.site-header.overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: none;
}

@media (prefers-reduced-motion: no-preference) {

  .site-header.overlay {
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, padding 0.3s ease-in-out;
  }
}

/* Sobald gescrollt wird */
.site-header.is-scrolled {
  background: var(--color-white);
  box-shadow: 0px 0 30px rgba(0,0,0,0.4);
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Solange das Menü offen ist, darf die Seite dahinter nicht scrollen */
.has-nav-open,
.has-nav-open body {
  overflow: hidden;
}


/* ------------[ Logo ]------------ */

.logo {
  display: block;
  width: auto;
  height: 2.5rem;
  aspect-ratio: 606.67 / 168.66;
  color: var(--color-olive);
  background: currentColor;
  -webkit-mask: url('../../img/logo-sarina-heimmerer.svg') no-repeat left center / contain;
  mask: url('../../img/logo-sarina-heimmerer.svg') no-repeat left center / contain;
}

.site-header.on-dark .logo {
  color: var(--color-white);
}

.site-header.on-dark .nav-toggle {
  color: var(--color-cream);
}

.site-header.on-dark.is-scrolled .logo,
.site-header.on-dark.is-scrolled .nav-toggle {
  color: var(--color-olive);
}

/* Bei offenem Menü liegt das Logo über dem Overlay und wechselt auf Creme, sonst stünde Oliv auf Dunkelbraun. */
.has-nav-open .logo {
  position: relative;
  color: var(--color-cream);
  z-index: 30;
}


/* ------------[ Hauptnavigation ]------------ */

.main-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.main-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.main-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  font-family: var(--font-base);
  font-size: 1.5rem;
  line-height: 1.8rem;
  text-decoration: none;
  padding: var(--space-6) var(--space-12);
}

.main-nav a.is-current {
  color: var(--color-olive);
}

.nav-actions a {
  color: var(--color-cream);
  background: var(--color-olive-dark);
  border-radius: 1.875rem;
  padding: var(--space-18) var(--space-42);
}


/* ------------[ Subnavigation ]------------ */

.nav-sub-toggle {
  display: none;
}

.main-nav .nav-sub {
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.nav-sub a {
  font-size: 1.125rem;
  line-height: 1.5rem;
  padding: var(--space-12);
}


/* ------------[ Mobile Navigation ]------------ */

.nav-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 2.75rem;
  min-height: 2.75rem;
  position: relative;
  color: var(--color-olive);
  font-family: var(--font-base);
  font-size: 1rem;
  z-index: 30;
}

.has-nav-open .nav-toggle {
  color: var(--color-cream);
}

/* Burger aus drei Linien: die mittlere ist das Element selbst */
.nav-toggle-icon {
  display: block;
  width: 1.5rem;
  height: 2px;
  position: relative;
  background: currentColor;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  background: currentColor;
}

.nav-toggle-icon::before {
  top: -7px;
}

.nav-toggle-icon::after {
  top: 7px;
}

/* Offen wird aus dem Burger ein Kreuz */
.has-nav-open .nav-toggle-icon {
  background: transparent;
}

.has-nav-open .nav-toggle-icon::before,
.has-nav-open .nav-toggle-icon::after {
  top: 0;
}

.has-nav-open .nav-toggle-icon::before {
  transform: rotate(45deg);
}

.has-nav-open .nav-toggle-icon::after {
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {

  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    transition: transform 0.2s ease, top 0.2s ease, background 0.2s ease;
  }
}

/* Mit JavaScript liegt die Navigation hinter dem Button */
.has-js .main-nav {
  display: none;
}

.has-js .main-nav.is-open {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  background: var(--color-dark-brown);
  padding: var(--space-60) var(--space-18);
  z-index: 20;
}


/* ========================[ Standard-Elemente ]======================== */

/* ------------[ Überschriften ]------------ */

h1, h2, h3, h4 {
  font-weight: 400;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  margin: 0 0 18px;
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  margin: 30px 0 18px;
}

div > h2 {
  margin: 0 0 18px;
}

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

div > h3 {
  margin: 30px 0 12px;
}

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

div > h4 {
  margin: 24px 0 6px;
}


/* ------------[ Absätze ]------------ */

p + p {
  margin-top: var(--space-18);
}


/* ------------[ Verlinkungen ]------------ */

/* Fokus wird nie entfernt, nur ersetzt */
:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}


/* ------------[ Buttons ]------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.4rem;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999rem;
  padding: calc(var(--space-24) - 2px) calc(var(--space-30) - 2px);
  overflow: hidden;
  /* eigener Stapelkontext, damit die Füllung unter dem Text bleibt */
  isolation: isolate;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-olive-dark);
  transform-origin: left center;
  z-index: -1;
}

.button:hover {
  color: var(--button-ghost);
}

.button-line {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.button-line rect {
  fill: none;
  stroke: var(--button-ghost);
  stroke-width: 3;
  stroke-dasharray: 102 102;
  stroke-dashoffset: 103;
  ry: 50%;
}

.button:hover .button-line rect {
  stroke-dashoffset: 0;
}

/* Muss über der Füllung liegen, die als ::before dahintersteht */
.button-text {
  position: relative;
}

.button:hover::before {
  transform: scaleX(0);
  transform-origin: right center;
}

/* Weiße Kästen auf dunklen Bändern: dort ist der Untergrund wieder hell, also gilt die helle Fassung – sonst stünde Weiß auf Weiß. */
.teaser,
.cards-item {
  --button-ghost: var(--color-olive-dark);
  --button-fill: var(--color-cream);
}

/* Umriss als Dauerzustand, wählbar im Panel. Beim Überfahren füllt er sich – also genau andersherum als der gefüllte Button. */
.button.outline {
  color: var(--button-ghost);
}

/* Bei der Umriss-Variante ist die Linie der Ruhezustand und bleibt stehen, gezeichnet wird stattdessen die Füllung. */
.button.outline .button-line rect {
  stroke-dashoffset: 0;
}

.button.outline::before {
  background: var(--button-ghost);
  transform: scaleX(0);
  transform-origin: right center;
}

.button.outline:hover {
  color: var(--button-fill);
}

.button.outline:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}


/* ------------[ Bilder ]------------ */

img {
  object-position: var(--focus, center);
}

.image-reveal {
  display: block;
  position: relative;
  overflow: hidden;
}

.image-reveal img {
  display: block;
}

.image-element.round .image-reveal {
  border-radius: 50%;
}


/* ------------[ Listen ]------------ */

.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.icon-list li {
  position: relative;
  padding-left: 2.5rem;
}

.icon-list li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
}

.icon-list.check li::before {
  width: 2rem;
  height: 2rem;
  top: -0.1rem;
  background: currentColor;
  -webkit-mask: url('../../img/icons/icon-check-outline.svg') no-repeat center / contain;
  mask: url('../../img/icons/icon-check-outline.svg') no-repeat center / contain;
}

.icon-list.cross li::before {
  width: 1.5rem;
  height: 1.5rem;
  top: 0.2rem;
  left: 0.25rem;
  background: currentColor;
  -webkit-mask: url('../../img/icons/icon-cross-outline.svg') no-repeat center / contain;
  mask: url('../../img/icons/icon-cross-outline.svg') no-repeat center / contain;
}

.icon-list.dot li::before {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0rem;
  background: currentColor;
  border-radius: 50%;
}

.icon-list.number {
  counter-reset: icon-list;
}

.icon-list.number li {
  counter-increment: icon-list;
}

.icon-list.number li::before {
  content: counter(icon-list) ".";
  font-family: var(--font-headline);
  word-spacing: -0.2em;
}

.icon-list.none li {
  padding-left: 0;
}


/* ------------[ Tabellen ]------------ */

/* ========================[ Sonderelemente ]======================== */

/* ------------[ Spalten ]------------ */

.columns-list {
  gap: var(--space-42);
  margin-top: var(--space-42);
}

.columns.centered .columns-list {
  text-align: center;
}

.columns.centered .button {
  margin-right: auto;
  margin-left: auto;
}

/* Abstände innerhalb einer Spalte */
.columns-list h3 {
  margin-bottom: var(--space-12);
}

.columns-list .icon-list,
.columns-list .button {
  margin-top: var(--space-24);
}

.columns.centered .columns-list .icon-list {
  display: inline-flex;
  text-align: left;
}

.columns-icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  background: currentColor;
  color: var(--color-decor);
  margin: 0 auto var(--space-18);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}


/* ------------[ Text mit Meilensteinen ]------------ */

.milestones h2 {
  color: var(--color-heading);
}

/* Die Linienfarbe kommt jetzt vom Band, siehe "Akkordeon". */
.milestones .accordion {
  margin-top: var(--space-30);
}

.milestones .accordion-item summary {
  color: var(--color-heading);
  font-family: var(--font-base);
}

.milestones-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-42);
}

.milestones-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}


/* ------------[ Schritte ]------------ */

.steps h2 {
  color: var(--color-heading);
}

.steps-image {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  margin-top: var(--space-30);
}

.steps-list {
  counter-reset: steps;
  border: 3px solid var(--color-white);
  margin-top: var(--space-42);
}

.steps-list > li {
  counter-increment: steps;
  padding: var(--space-30);
}

.steps-list > li + li {
  border-top: 3px solid var(--color-white);
}

.steps-list h3 {
  display: flex;
  align-items: center;
  gap: var(--space-18);
  color: var(--color-heading);
  margin-bottom: var(--space-12);
}

.steps-number {
  display: flex;
  color: var(--color-olive-dark);
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
  background: var(--color-white);
  border-radius: 50%;
}

.steps-number::before {
  content: counter(steps, decimal-leading-zero);
}


/* ------------[ Akkordeon ]------------ */

.accordion {
  --accordion-line: currentColor;
  text-align: left;
  border: 3px solid var(--accordion-line);
}

section.cream .accordion {
  --accordion-line: var(--color-white);
}

.accordion-item + .accordion-item {
  border-top: 3px solid var(--accordion-line);
}

/* Das eigene Zeichen ersetzt das Dreieck des Browsers. */
.accordion-item summary {
  display: flex;
  align-items: center;
  gap: var(--space-18);
  justify-content: space-between;
  min-height: 2.8rem;
  cursor: pointer;
  padding: var(--space-18) var(--space-24);
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-item summary::marker {
  content: "";
}

.accordion-mark {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}

.accordion-mark::before,
.accordion-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url('../../img/icons/icon-plus.svg') no-repeat center / contain;
  mask: url('../../img/icons/icon-plus.svg') no-repeat center / contain;
}

.accordion-mark::after {
  opacity: 0;
}

.accordion-item[open] .accordion-mark::after {
  opacity: 1;
  transform: rotate(45deg);
}

.accordion-item::details-content {
  height: 0;
  overflow: hidden;
}

.accordion-item[open]::details-content {
  height: auto;
}

.accordion-answer {
  padding: 0 var(--space-24) var(--space-24);
}


/* ------------[ Häufige Fragen ]------------ */

.faq .accordion {
  margin-top: var(--space-30);
}


/* ------------[ Angebote mit Preisen ]------------ */

.offers h2 {
  color: var(--color-heading);
}

.offers-intro {
  max-width: 44rem;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  margin-top: var(--space-18);
}

/* Rahmen außen, zwischen den Zeilen jeweils eine Linie. */
.offers-list {
  border: 4px solid var(--color-white-55);
  margin-top: var(--space-30);
}

.offers-item {
  padding: var(--space-30);
}

.offers-item.is-linked {
  position: relative;
  isolation: isolate;
}

.offers-item.is-linked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  border-radius: 1.5rem;
  opacity: 0;
  transform: scale(0.96);
  z-index: -1;
}

/* Mit der Tastatur dasselbe Bild wie mit der Maus. */
.offers-item.is-linked:hover::before,
.offers-item.is-linked:has(.offers-title-link:focus-visible)::before {
  opacity: 1;
  transform: scale(1);
}

.offers-title-link {
  text-decoration: none;
}

.offers-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Der Fokus muss die ganze Box zeigen, nicht nur den Titel – der Link ist ja über die Fläche gelegt. */
.offers-item.is-linked:has(.offers-title-link:focus-visible) {
  outline: 3px solid currentColor;
  outline-offset: -3px;
}

.offers-title-link:focus-visible {
  outline: none;
}

.offers-item.is-linked:hover .offers-title-link {
  text-decoration: underline;
}

.offers-item + .offers-item {
  border-top: 4px solid var(--color-white-55);
}

/* Das Zeichen liegt unten links über dem Bild. */
.offers-media {
  align-self: start;
  position: relative;
}

.offers-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.offers-badge {
  position: absolute;
  bottom: var(--space-12);
  right: var(--space-12);
  color: var(--color-cream);
  font-size: 0.8rem;
  line-height: 1.2rem;
  background: var(--color-dark-brown);
  border-radius: 1rem;
  padding: var(--space-6) var(--space-18);
}

/* Zwischen den Teilen eines Angebots – Bild, Text, Eckdaten, Button – überall derselbe Abstand: der des Rasters. Nur Überschrift und Absatz bleiben als Texteinheit enger beieinander. */
.offers-body h3 {
  color: var(--color-heading);
  margin-top: 0;
  margin-bottom: var(--space-12);
}

/* Eckdaten und Termine sehen gleich aus: eine Angabe pro Zeile, darunter eine Linie. */
.offers-details,
.offers-dates {
  margin-top: var(--grid-gap);
}

/* Die Zeilenhöhe kommt aus dem Innenabstand, nicht aus line-height: Bricht eine Angabe um, stünden die beiden Zeilen sonst weit auseinander. */
.offers-details li,
.offers-dates li {
  line-height: 1.5;
  border-bottom: 3px solid white;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

/* Jede Angabe eines Termins in ihrer eigenen Spalte. Langer Text bricht dadurch innerhalb seiner Spalte um, statt die Zeile zu zerreißen. */
.offers-dates li {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  column-gap: var(--space-12);
}

/* Die Überschrift trägt den Abstand nach oben, ihre Liste schließt direkt an sie an. Nur der halbe Rasterabstand: Überschrift und Liste gehören zusammen, der volle riss sie vom Text darüber ab. */
.offers-facts-headline {
  color: var(--color-heading);
  margin-top: var(--space-30);
  margin-bottom: var(--space-6);
}

.offers-facts-headline + .offers-details,
.offers-facts-headline + .offers-dates {
  margin-top: 0;
}

/* Keine feste Breite nötig: Das Datum steht immer als TT.MM.JJJJ und ist dadurch in jeder Zeile gleich breit. */

/* Der Punkt nur, wenn davor auch ein Ort steht. */
.offers-topic.has-dot::before {
  content: " · ";
}

/* Ausgebuchte Termine bleiben stehen und werden nur gekennzeichnet – blass wäre schlechter zu lesen. Auf dem Handy ist für eine dritte Spalte kein Platz, dort rutscht der Hinweis unter die Angaben. */
.offers-booked {
  grid-column: 2;
  align-self: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.offers-details li strong {
  background-color: var(--color-cream);
}

.offers-foot .button {
  margin-top: var(--grid-gap);
}


/* ------------[ Aufruf mit Bild ]------------ */

.cta-text {
  text-align: center;
}

.cta h2 {
  color: var(--color-heading);
}

.cta-text .button {
  margin-top: var(--space-24);
}

/* Die Form liegt hinter dem Freisteller, deshalb bekommt das Bild eine eigene Ebene. */
.cta-media {
  position: relative;
  margin-top: var(--space-12);
}

.cta-shape {
  display: block;
  width: 78%;
  position: absolute;
  top: 0;
  left: 12%;
  color: var(--color-decor);
  z-index: 0;
}

.cta-shape svg {
  width: 100%;
  height: auto;
}

.cta-shape svg [fill],
.cta-shape svg path {
  fill: currentColor;
}

.cta-figure {
  width: 90%;
  height: auto;
  position: relative;
  z-index: 1;
}


/* ------------[ Text mit Bilderraster ]------------ */

.textgallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-42);
}

.textgallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5rem;
}


/* ------------[ Karten mit Bild ]------------ */

.cards {
  position: relative;
  overflow: hidden;
}

.cards h2 {
  color: var(--color-heading);
  margin-bottom: var(--space-42);
}

.cards-background {
  width: 100%;
  height: 40%;
  position: absolute;
  bottom: 0;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}

.cards .inner {
  position: relative;
  z-index: 1;
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  position: relative;
}

.cards-item {
  background: var(--color-white);
  border-radius: 1.5rem;
  padding: var(--space-30);
}

.cards-item h3 {
  color: var(--color-olive-dark);
  margin-bottom: var(--space-12);
}

.cards-item p {
  color: var(--color-dark-brown);
}

.cards-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  max-width: 28rem;
  position: relative;
  margin-top: var(--space-24);
  margin-right: auto;
  margin-bottom: calc(var(--section-space) * -1);
  margin-left: auto;
}

.cards-shape {
  display: block;
  grid-row: 2;
  width: 85%;
  position: absolute;
  top: 0;
  left: 7.5%;
  color: var(--color-decor);
}

.cards-shape svg {
  width: 100%;
  height: auto;
}

.cards-shape svg [fill],
.cards-shape svg path {
  fill: currentColor;
}

.cards-figure {
  grid-row: 2;
  width: auto;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.cards-media .button {
  --button-ghost: var(--color-white);
  grid-row: 1;
  position: relative;
  margin-bottom: var(--space-24);
  z-index: 2;
}


/* ------------[ Text auf Hintergrundbild ]------------ */

.textbackground {
  position: relative;
  overflow: hidden;
}

.textbackground-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 0;
}

.textbackground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-darkest-brown-50);
  z-index: 1;
}

.textbackground .inner {
  position: relative;
  z-index: 2;
}

.textbackground-shape {
  display: none;
}

.textbackground .button {
  margin: 30px 0 0;
}


/* ------------[ Text mit Bild ]------------ */

.textimage {
  overflow: hidden;
}

.textimage-text .button {
  margin-top: var(--space-30);
}

.textimage.image-flush .textimage-media {
  margin-bottom: calc(var(--section-space) * -1);
}

.textimage.shape-behind .textimage-image {
  position: relative;
  z-index: 1;
}

.textimage.shape-behind .textimage-shape {
  z-index: 0;
}

.textimage.round-image .textimage-media {
  padding-left: 14%;
}

.textimage.round-image .textimage-image {
  aspect-ratio: 1;
  border-radius: 50%;
}

.textimage.round-image .textimage-shape {
  width: 80%;
  top: 6%;
  left: -18%;
}

.textimage.original-image .textimage-image {
  aspect-ratio: auto;
  object-fit: contain;
}

.textimage.original-image .textimage-media {
  padding-left: 8%;
}

.textimage.original-image .textimage-shape {
  width: 92%;
  top: 0;
  left: -4%;
}

.textimage-media {
  align-self: start;
  position: relative;
  margin-top: var(--space-42);
  margin-bottom: var(--space-60);
}

.textimage-image {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

.textimage-shape {
  display: block;
  width: 70%;
  position: absolute;
  top: -8%;
  left: 22%;
  color: var(--color-decor);
  pointer-events: none;
}

.textimage-shape svg {
  width: 100%;
  height: auto;
}

.textimage-shape svg [fill],
.textimage-shape svg path {
  fill: currentColor;
}


/* ------------[ Textblock ]------------ */

/* ------------[ Baukasten: Text ]------------ */

.richtext h2,
.richtext h3 {
  margin-bottom: var(--space-12);
}


/* ------------[ Baukasten: Liste ]------------ */

.list-element h3 {
  margin-bottom: var(--space-18);
}


/* ------------[ Baukasten: Bild ]------------ */

.image-element {
  position: relative;
}

.image-element.has-shape {
  margin-bottom: 0;
}

.image-element-img {
  width: 100%;
  height: auto;
}

/* Rechteck: derselbe Zuschnitt wie im Design */
.image-element.rectangle .image-element-img {
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

.image-element.round .image-element-img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.image-element.original .image-element-img {
  aspect-ratio: auto;
  object-fit: contain;
}

.image-element.flush:last-child {
  margin-bottom: calc(var(--section-space) * -1);
}

.image-shape {
  display: block;
  width: 70%;
  position: absolute;
  top: -8%;
  left: 22%;
  color: var(--color-decor);
  pointer-events: none;
}

.image-shape svg {
  width: 100%;
  height: auto;
}

.image-shape svg [fill],
.image-shape svg path {
  fill: currentColor;
}

.image-element.shape-behind .image-element-img {
  position: relative;
  z-index: 1;
}

.image-element.shape-behind .image-shape {
  z-index: 0;
}

.image-element.round.has-shape {
  padding-left: 14%;
}

.image-element.round .image-shape {
  width: 80%;
  top: 6%;
  left: -18%;
}


/* ------------[ Baukasten: Bilderraster ]------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.gallery.square img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5rem;
}

.gallery.original,
.gallery.mark {
  align-items: center;
}

.gallery.original img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.gallery.mark img {
  width: auto;
  max-width: 100%;
  height: 4rem;
  object-fit: contain;
  margin-right: auto;
  margin-left: auto;
}


/* ------------[ Baukasten: Teaser ]------------ */

.teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border-radius: 1.5rem;
  padding: var(--space-30);
}

.teaser h3 {
  color: var(--color-olive-dark);
  margin-bottom: var(--space-12);
}

.teaser p {
  color: var(--color-dark-brown);
}

.teaser .button {
  margin-top: auto;
  align-self: flex-start;
}

.teaser-icon {
  display: block;
  width: 4rem;
  height: 4rem;
  color: var(--color-olive);
  background: currentColor;
  margin-bottom: var(--space-12);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.section-grid.centered .teaser-icon {
  margin-right: auto;
  margin-left: auto;
}

.section-grid.align-right .teaser-icon {
  margin-left: auto;
}

.section-grid.centered .teaser .button {
  align-self: center;
}

.section-grid.align-right .teaser .button {
  align-self: flex-end;
}

/* ------------[ Baukasten: Zitat ]------------ */

.quote {
  border-left: 3px solid var(--color-decor);
  padding-left: var(--space-24);
}

.quote blockquote p {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.quote figcaption {
  font-style: italic;
  margin-top: var(--space-12);
}


/* ========================[ Sonderelemente Website ]======================== */

/* ------------[ Keyvisual ]------------ */

.keyvisual.full,
.keyvisual.split {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  position: sticky;
  top: var(--keyvisual-offset, 0px);
  /* Der Versatz kommt oben dazu und unten weg: Der Inhalt rutscht nach unten, das Band bleibt gleich hoch. */
  padding-top: calc(var(--header-height) + var(--keyvisual-shift));
  padding-bottom: calc(var(--header-height) + var(--space-24) + var(--corner-radius) - var(--keyvisual-shift));
  overflow: hidden;
  z-index: -1;
}

.keyvisual.full {
  --color-band: var(--color-white);
  background: var(--color-white);
}

.keyvisual.full h1,
.keyvisual.full .keyvisual-headline {
  color: var(--color-olive-dark);
}

.keyvisual.full .image-reveal {
  margin-bottom: var(--space-42);
}

.keyvisual.text {
  text-align: center;
  padding-top: calc(var(--header-height) + var(--space-42) + var(--keyvisual-shift));
  padding-bottom: calc(var(--space-60) + var(--corner-radius));
}

.keyvisual.text .keyvisual-text {
  margin-right: auto;
  margin-left: auto;
}

.keyvisual.text .keyvisual-headline {
  color: var(--color-heading);
}

.keyvisual.split .keyvisual-media {
  margin-bottom: var(--space-42);
}

.keyvisual-image {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 540;
  object-fit: cover;
}

.keyvisual.full .image-reveal,
.keyvisual.split .image-reveal {
  width: 100%;
}

.keyvisual-headline {
  color: var(--color-cream);
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.4rem;
  text-transform: uppercase;
  margin-bottom: var(--space-18);
}

.keyvisual h1 {
  max-width: 62rem;
  font-size: 2rem;
  line-height: 2.4rem;
}

.keyvisual-text {
  max-width: 660px;
  font-size: 1rem;
  line-height: 1.5rem;
}

.scroll-hint {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  text-decoration: none;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.scroll-hint:hover {
  color: var(--color-olive-dark);
  background: var(--color-white);
  border: 2px solid var(--color-white);
}

/* Der Fokusrahmen ist sonst dunkel und läge auf dem Foto. */
.scroll-hint:focus-visible {
  outline-color: var(--color-white);
}

.scroll-hint-arrow {
  width: 1rem;
  height: 2.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.scroll-anchor {
  display: block;
  height: 0;
  scroll-margin-top: var(--corner-radius);
}


/* ------------[ Rechtstext ]------------ */

/* Impressum und Datenschutz sind durchlaufender Text. "div > h2" nimmt
   den Abstand nach oben weg, damit Baukasten-Blöcke bündig beginnen –
   hier klebt die Überschrift dadurch am Absatz davor. */
.legal-text div > h2 {
  margin-top: var(--space-42);
}

/* Aufzählungen aus dem Fließtext haben keine Klasse und damit keinen
   Einzug aus dem Reset – die Punkte lägen sonst außerhalb. */
.legal-text ul {
  padding-left: var(--space-24);
  margin-top: var(--space-18);
}

.legal-text li + li {
  margin-top: var(--space-6);
}


/* ========================[ Footer-Bereich ]======================== */

.site-footer {
  position: sticky;
  bottom: 0;
  color: var(--color-white);
  background: var(--color-olive-dark);
  padding-top: calc(var(--corner-radius) + var(--space-60));
  padding-bottom: var(--space-60);
  z-index: -2;
}

.site-footer dd a {
  display: inline-block;
}

.site-footer-name {
  display: block;
  width: auto;
  height: 3rem;
  aspect-ratio: 606.67 / 168.66;
  background: currentColor;
  -webkit-mask: url('../../img/logo-sarina-heimmerer.svg') no-repeat left center / contain;
  mask: url('../../img/logo-sarina-heimmerer.svg') no-repeat left center / contain;
}

.site-footer-contact dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-12);
  margin-top: var(--space-18);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.meta-nav {
  border-top: 3px solid var(--color-white);
  margin-top: var(--space-42);
  padding-top: var(--space-18);
}

.meta-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* Senkrechter Strich zwischen den Punkten, wie im Entwurf */
.meta-nav li + li::before {
  content: "|";
  margin-right: var(--space-6);
}

.meta-nav a {
  display: inline-block;
  min-height: 1.5rem;
}