/* ==========================================================================
   Aufwind – Layout: Hülle, Abschnitte, Kopf (schwebende Kapsel), Fuß
   Layout-Wechsel über Container Queries in rem: Sie reagieren auch auf die
   gewählte Schriftgröße (A / A+ / A++), nicht nur auf die Fensterbreite.
   ========================================================================== */

.huelle {
  width: min(100% - 2 * var(--rand), var(--breite-max));
  margin-inline: auto;
}

.huelle--text {
  width: min(100% - 2 * var(--rand), var(--breite-text));
  margin-inline: auto;
}

main {
  display: block;
  container: seite / inline-size;
}

.abschnitt {
  padding-block: var(--abstand-abschnitt);
}

.abschnitt--eng {
  padding-block: calc(var(--abstand-abschnitt) * 0.6);
}

.abschnitt--sand {
  background: var(--farbe-sand);
}

.abschnitt--salbei {
  background: var(--farbe-salbei-100);
}

/* ==========================================================================
   Kopf: schwebende, abgerundete Kapsel
   ========================================================================== */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  padding: 0.625rem var(--rand) 0;
  container: kopf / inline-size;
  pointer-events: none;            /* der transparente Rand darf nichts blockieren */
}

.kopf__kapsel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  max-width: var(--breite-max);
  margin-inline: auto;
  padding: 0.375rem 0.375rem 0.375rem 0.625rem;
  border-radius: var(--radius-pille);
  background: color-mix(in srgb, var(--farbe-weiss) 94%, transparent);
  box-shadow: var(--schatten-m);
  pointer-events: auto;
  transition: border-radius var(--dauer-mittel) var(--kurve-weich);
}

@supports (backdrop-filter: blur(1px)) {
  .kopf__kapsel {
    background: color-mix(in srgb, var(--farbe-weiss) 84%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* --- Marke --------------------------------------------------------------- */
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--klickflaeche);
  padding-right: 0.5rem;
  border-radius: var(--radius-pille);
  color: var(--farbe-petrol-900);
  text-decoration: none;
  flex: none;
}

.marke:hover {
  color: var(--farbe-petrol-900);
}

.marke__zeichen {
  width: 2.625rem;
  height: 2.625rem;
  transition: transform var(--dauer-mittel) var(--kurve-weich);
}

.marke:hover .marke__zeichen {
  transform: rotate(-8deg) scale(1.04);
}

.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.marke__name {
  font-family: var(--schrift-titel);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.marke__zusatz {
  margin-top: 0.2rem;
  color: var(--farbe-text-leise);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Farben der Bildmarke (inline-SVG) */
.mz-grund { fill: var(--farbe-petrol-800); }
.mz-sonne { fill: var(--farbe-koralle-400); }
.mz-wind,
.mz-wind2 { fill: none; stroke-linecap: round; }
.mz-wind { stroke: var(--farbe-mint-300); stroke-width: 5.5; }
.mz-wind2 { stroke: var(--farbe-salbei-200); stroke-width: 4.5; }
.fuss .mz-grund { fill: var(--farbe-petrol-700); }

/* --- Hauptnavigation ------------------------------------------------------ */
.hauptnav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.hauptnav__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding: 0 1rem;
  border-radius: var(--radius-pille);
  color: var(--farbe-petrol-900);
  font-family: var(--schrift-titel);
  font-size: 1.0625rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--dauer-kurz) ease;
}

.hauptnav__liste a:hover {
  background: var(--farbe-mint-100);
}

.hauptnav__liste a[aria-current="page"] {
  background: var(--farbe-mint-200);
  font-weight: 750;
}

.hauptnav__extra {
  display: none;
}

/* --- Schriftgrößen-Umschalter (Segment-Pille) ------------------------------ */
.schriftwahl {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--radius-pille);
  background: var(--farbe-sand);
  flex: none;
}

.schriftwahl__knopf {
  display: inline-grid;
  place-items: center;
  min-width: var(--klickflaeche);
  height: var(--klickflaeche);
  padding: 0 0.4rem;
  border: 0;
  border-radius: var(--radius-pille);
  background: transparent;
  color: var(--farbe-petrol-900);
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1;
  transition: background-color var(--dauer-kurz) ease, color var(--dauer-kurz) ease;
}

.schriftwahl__knopf:nth-child(1) { font-size: 0.9375rem; }
.schriftwahl__knopf:nth-child(2) { font-size: 1.0625rem; }
.schriftwahl__knopf:nth-child(3) { font-size: 1.1875rem; }

.schriftwahl__knopf:hover {
  background: var(--farbe-mint-200);
}

.schriftwahl__knopf[aria-pressed="true"] {
  background: var(--farbe-petrol-900);
  color: var(--farbe-weiss);
}

.schriftwahl__knopf:active {
  transform: scale(0.94);
}

/* --- Menüknopf (nur kompakter Kopf mit JS) ---------------------------------- */
.menueknopf {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--klickflaeche);
  padding: 0 1rem 0 0.8rem;
  border: 0;
  border-radius: var(--radius-pille);
  background: var(--farbe-petrol-900);
  color: var(--farbe-weiss);
  font-family: var(--schrift-titel);
  font-weight: 700;
  flex: none;
}

.menueknopf:hover {
  background: var(--farbe-petrol-700);
}

.menueknopf:active {
  transform: scale(0.97);
}

.menueknopf .icon {
  transition: transform var(--dauer-mittel) var(--kurve-weich);
}

.menueknopf[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

.kopf__termin {
  flex: none;
}

.hauptnav {
  margin-left: auto;
}

/* ---- breiter Kopf: alles in einer Zeile ---- */
@container kopf (min-width: 64rem) {
  .hauptnav__panel {
    display: flex;
    align-items: center;
  }
}

/* ---- kompakter Kopf: Navigation im Panel ---- */
@container kopf (max-width: 63.99rem) {
  .kopf__kapsel {
    flex-wrap: wrap;
  }

  .kopf .kopf__termin {
    display: none;
  }

  /* ohne JavaScript bleibt die Navigation als umbrechende Pillenreihe unter der Marke sichtbar */
  .hauptnav__liste {
    padding: 0.25rem 0;
  }
}

@container kopf (max-width: 63.99rem) {
  @media (scripting: none) {
    .kopf__kapsel {
      border-radius: var(--radius-l);
    }

    .hauptnav {
      order: 5;
      width: 100%;
      margin-left: 0;
    }
  }

  @media (scripting: enabled) {
    .menueknopf {
      display: inline-flex;
    }

    .hauptnav__panel {
      display: none;
      position: absolute;
      inset: calc(100% + 0.5rem) 0 auto;
      max-height: calc(100dvh - 6.5rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--abstand-4);
      border-radius: var(--radius-l);
      background: var(--farbe-flaeche);
      box-shadow: var(--schatten-l);
    }

    .kopf--offen .hauptnav__panel {
      display: block;
      animation: panel-ein var(--dauer-mittel) var(--kurve-weich);
    }

    .hauptnav__liste {
      flex-direction: column;
      gap: 0.125rem;
      padding: 0;
    }

    .hauptnav__liste a {
      justify-content: space-between;
      width: 100%;
      min-height: 3.5rem;
      padding: 0 1.25rem;
      font-size: 1.375rem;
    }

    .hauptnav__liste a::after {
      content: "→";
      color: var(--farbe-petrol-500);
      font-weight: 500;
    }

    .hauptnav__extra {
      display: grid;
      gap: var(--abstand-3);
      margin-top: var(--abstand-4);
      padding: var(--abstand-4);
      border-radius: var(--radius-m);
      background: var(--farbe-mint-100);
    }

    .hauptnav__extra .knopf {
      width: 100%;
    }
  }
}

/* schmaler Kopf: Logo und Abstände verdichten, damit alles in eine Zeile passt.
   Die Klickflächen (Schriftwahl, Menü) bleiben bewusst bei 44 px. */
@container kopf (max-width: 26rem) {
  .kopf__kapsel {
    gap: 0.3rem;
    padding-left: 0.4rem;
  }

  .marke {
    gap: 0.4rem;
    padding-right: 0.15rem;
  }

  .marke__zeichen {
    width: 2.375rem;
    height: 2.375rem;
  }

  .marke__name {
    font-size: 1.15rem;
  }

  .schriftwahl__knopf {
    padding: 0 0.25rem;
  }
}

/* sehr schmaler Kopf (z. B. 360 px mit großer Schrift): nur die Bildmarke zeigen */
@container kopf (max-width: 21rem) {
  .marke__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@container kopf (max-width: 30rem) {
  .marke__zusatz {
    display: none;
  }

  .menueknopf span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .menueknopf {
    width: var(--klickflaeche);
    padding: 0;
    justify-content: center;
  }
}

@media (scripting: none) {
  .menueknopf,
  .schriftwahl {
    display: none !important;
  }
}

@keyframes panel-ein {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
  }
}

/* ==========================================================================
   Seitenkopf der Unterseiten
   ========================================================================== */
.seitenkopf {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.seitenkopf__innen {
  display: grid;
  gap: var(--abstand-5);
  align-items: end;
}

.seitenkopf h1 {
  max-width: 18ch;
}

.seitenkopf__lead {
  max-width: 40rem;
  color: var(--farbe-text);
  font-size: var(--text-l);
  line-height: 1.55;
}

.seitenkopf__deko {
  position: absolute;
  z-index: -1;
  top: -2rem;
  right: -6rem;
  width: min(44rem, 80vw);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

@container seite (min-width: 56rem) {
  .seitenkopf__innen {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-bottom: var(--abstand-4);
  padding: 0;
  list-style: none;
  color: var(--farbe-text-leise);
  font-size: var(--text-s);
}

.brotkrumen li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--farbe-petrol-500);
}

.brotkrumen a {
  color: var(--farbe-text-leise);
}

/* ==========================================================================
   Fuß
   ========================================================================== */
.fuss {
  position: relative;
  margin-top: var(--abstand-8);
  background: var(--farbe-petrol-900);
  color: var(--farbe-mint-100);
  container: fuss / inline-size;
}

.fuss__wellen {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: clamp(2.5rem, 5vw, 5rem);
}

.welle-grund { fill: var(--farbe-petrol-900); }
.welle-linie { fill: none; stroke: var(--farbe-mint-300); stroke-width: 2.5; stroke-linecap: round; opacity: 0.8; }
.welle-linie--2 { stroke: var(--farbe-koralle-400); opacity: 0.6; }

.fuss a:not(.knopf) {
  color: var(--farbe-mint-200);
}

.fuss a:not(.knopf):hover {
  color: var(--farbe-weiss);
}

.fuss :focus-visible {
  outline-color: var(--farbe-fokus-hell);
  box-shadow: 0 0 0 6px var(--farbe-petrol-900);
}

.fuss__innen {
  display: grid;
  gap: var(--abstand-6);
  padding-block: var(--abstand-7) var(--abstand-6);
}

.fuss .fuss__marke .marke {
  color: var(--farbe-weiss);
}

.fuss__marke .marke__zusatz {
  color: var(--farbe-mint-200);
}

.fuss__marke p {
  max-width: 26rem;
  margin-block: var(--abstand-4) var(--abstand-5);
  color: var(--farbe-mint-100);
}

.fuss__titel {
  margin-bottom: var(--abstand-3);
  color: var(--farbe-weiss);
  font-size: var(--text-m);
  letter-spacing: 0;
}

.fuss address {
  font-style: normal;
}

.fuss__liste {
  display: grid;
  gap: 0.25rem;
  margin-top: var(--abstand-3);
  padding: 0;
  list-style: none;
}

.fuss__liste a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--klickflaeche);
  text-decoration: none;
}

.fuss__liste a:hover {
  text-decoration: underline;
}

.fuss__zeiten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
}

.fuss__zeiten dt {
  font-weight: 700;
}

.fuss__notiz {
  margin-top: var(--abstand-3);
  color: var(--farbe-mint-200);
  font-size: var(--text-s);
}

.fuss__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3) var(--abstand-5);
  padding-block: var(--abstand-5) var(--abstand-6);
  border-top: 1px solid color-mix(in srgb, var(--farbe-mint-200) 25%, transparent);
  font-size: var(--text-s);
}

.fuss__leiste ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding: 0;
  list-style: none;
}

.fuss__leiste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
}

.fuss__demo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pille);
  background: color-mix(in srgb, var(--farbe-koralle-400) 16%, transparent);
  color: var(--farbe-koralle-200);
  font-weight: 700;
}

@container fuss (min-width: 44rem) {
  .fuss__innen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container fuss (min-width: 72rem) {
  .fuss__innen {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}