/* Julia Siering – Alltagsbegleitung mit Herz
   Gestaltung abgeleitet aus den Rechnungsvorlagen:
   Puder & Creme, Tannengrün, Herzrot, Schreibschrift-Name, Zweige als Strichzeichnung. */

/* Schriften liegen lokal – keine Verbindung zu Google (DSGVO). */
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/great-vibes-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --creme: #fbf3ea;
  --creme-hell: #fffaf4;
  --puder: #f5e3d3;
  --puder-rand: #ecd3c0;
  --tanne: #1e3a1f;
  --tanne-hell: #2f5530;
  --herzrot: #b3262c;
  --tinte: #2f2925;
  --leise: #5f5650;
  --feldrand: #8a786d;
  /* Heide-Touch (HK): gedecktes Heidekraut-Lila, nur für Blüten; etwas tieferer Puder für den Heideboden */
  --heide: #9a5f8a;
  --puder-tief: #eed3bf;

  --schrift: "Nunito Sans", "Avenir Next", Avenir, system-ui, sans-serif;
  --schreibschrift: "Great Vibes", "Snell Roundhand", cursive;

  --huelle: 72rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --abstand: clamp(4.5rem, 9vw, 7.5rem);
  --radius: 1.25rem;

  /* Wärme: Morgenlicht, weiche braun getönte Schatten, feine Papierkörnung */
  --licht: rgba(247, 207, 165, 0.5);
  --schatten: 0 1px 2px rgba(120, 72, 40, 0.05), 0 16px 36px -18px rgba(120, 72, 40, 0.3);
  --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ---------- Grundlagen ---------- */

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

html {
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.1875rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* Feine Papierkörnung als Schicht über der ganzen Seite,
   damit Flächen, Wellen und Bänder gleich wirken und keine Kanten entstehen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--koernung);
  pointer-events: none;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--tanne);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.75rem);
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--tanne);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--herzrot);
}

:focus-visible {
  outline: 3px solid var(--herzrot);
  outline-offset: 3px;
  border-radius: 4px;
}

.huelle {
  width: 100%;
  max-width: var(--huelle);
  margin-inline: auto;
  padding-inline: var(--rand);
}

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

.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 20;
  padding: 0.75rem 1.25rem;
  background: var(--tanne);
  color: var(--creme);
  border-radius: 999px;
  font-weight: 700;
}

.sprung:focus {
  top: 0.75rem;
  color: var(--creme);
}

.symbol-sprite {
  display: none;
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--tanne);
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

button.knopf {
  font-family: inherit;
  cursor: pointer;
}

button.knopf:disabled {
  opacity: 0.7;
  cursor: progress;
}

.knopf svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.knopf--voll {
  background: var(--tanne);
  color: var(--creme);
  box-shadow: 0 10px 22px -12px rgba(30, 58, 31, 0.6);
}

.knopf--voll:hover {
  background: var(--tanne-hell);
  border-color: var(--tanne-hell);
  color: var(--creme);
}

.knopf--rahmen {
  background: transparent;
  color: var(--tanne);
}

.knopf--rahmen:hover {
  background: var(--puder);
  color: var(--tanne);
}

/* ---------- Leiste oben ---------- */

.leiste {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--creme) 94%, transparent);
  border-bottom: 1px solid var(--puder-rand);
  backdrop-filter: blur(6px);
}

.leiste__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.leiste__name {
  display: none;
  font-family: var(--schreibschrift);
  font-size: 2rem;
  line-height: 1;
  color: var(--tanne);
  text-decoration: none;
}

.leiste__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leiste__nav a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--tinte);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.leiste__nav a:hover {
  color: var(--herzrot);
}

.leiste .knopf {
  min-height: 2.875rem;
  padding-inline: 1.15rem;
}

/* ---------- Kopf mit Foto und Welle (wie auf der Rechnung) ---------- */

.kopf {
  position: relative;
  min-height: clamp(20rem, 30vw, 27rem);
  overflow: hidden;
  background: radial-gradient(ellipse 55% 80% at 16% 28%, var(--licht), transparent 72%);
}

.kopf__foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 3px;
  width: min(58%, 60rem);
  margin: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%);
}

.kopf__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
}

.kopf__inhalt {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(6rem, 12vw, 10rem);
}

.wortmarke {
  display: inline-block;
  color: var(--tinte);
  text-decoration: none;
}

.wortmarke:hover {
  color: var(--tinte);
}

/* Der Schwung des J hängt wie auf der Rechnung links über der Zeile darunter.
   Auf schmalen Bildschirmen nur so weit, wie der Seitenrand Platz lässt. */
.wortmarke__name {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: max(-0.32em, calc(0.5rem - var(--rand)));
  margin-bottom: 0;
  font-family: var(--schreibschrift);
  font-size: clamp(3.5rem, 2.25rem + 5vw, 6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--tanne);
}

/* Schriftzug in Versalien wie im Logo der Rechnung */
.wortmarke__zeile,
.wortmarke__zielgruppe {
  display: block;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wortmarke__zeile {
  font-weight: 500;
}

.wortmarke__zielgruppe {
  margin-top: 0.35rem;
  color: var(--herzrot);
  font-weight: 500;
}

.kopf__welle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(4.5rem, 9vw, 9rem);
  pointer-events: none;
}

.welle__band {
  fill: var(--puder);
}

.welle__flaeche {
  fill: var(--creme);
}

.welle__linie {
  fill: none;
  stroke: var(--tanne);
  stroke-width: 1.75;
}

/* ---------- Einstieg ---------- */

.einstieg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.einstieg__text {
  max-width: 40rem;
}

.gruss {
  margin-bottom: 0.4rem;
  color: var(--herzrot);
  font-family: var(--schreibschrift);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1.1;
  rotate: -2deg;
  transform-origin: left center;
}

/* Die drei Sätze aus der Rechnungs-Fußzeile, je eine Zeile */
.einstieg h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.9rem);
}

.einstieg h1 span {
  display: block;
}

.einstieg__lead {
  margin-top: 1.5rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  line-height: 1.6;
}

.trenner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 26rem;
  margin-block: 2rem;
  color: var(--tanne);
}

.trenner::before {
  content: "";
  flex: 1;
  border-top: 1px solid var(--puder-rand);
}

.trenner svg {
  width: 3.25rem;
  height: 1.5rem;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.eckdaten {
  margin-top: clamp(0rem, 2vw, 1rem);
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--puder-rand);
  border-radius: var(--radius);
  background: var(--creme-hell);
  box-shadow: var(--schatten);
}

.eckdaten dl {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.eckdaten div {
  display: grid;
  gap: 0.1rem;
}

.eckdaten dt {
  color: var(--leise);
  font-size: 0.9375rem;
}

.eckdaten dd {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}

.eckdaten dd a {
  text-decoration: none;
}

/* ---------- Abschnitte allgemein ---------- */

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

.abschnitt__kopf {
  max-width: 44rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.abschnitt__kopf p {
  margin-top: 1rem;
  color: var(--leise);
}

/* Umrandete Kreis-Symbole wie Uhr und Auto auf der Rechnung */
.kreis {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--tanne);
  border-radius: 50%;
  background: var(--puder);
  color: var(--tanne);
}

.kreis svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------- Leistungen ---------- */

.leistungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 6vw, 5rem);
}

.leistung {
  padding-top: 1.75rem;
  border-top: 1px solid var(--puder-rand);
}

.leistung__kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.leistung p {
  margin-top: 1rem;
}

.blattliste {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.blattliste li {
  position: relative;
  padding-left: 1.75rem;
}

.blattliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 1.05rem;
  height: 0.65rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 13'%3E%3Cpath d='M1 6.5C5 1 13 .5 20 6c-6 5.5-14 6-19 .5Z M3 6.5h13' fill='none' stroke='%231e3a1f' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Warme Bänder mit Wellenkante ---------- */

.abschnitt--warm {
  position: relative;
  margin-top: clamp(6rem, 12vw, 9rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--puder);
}

.welle-oben::before,
.welle-unten::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--puder);
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.welle-oben::before {
  bottom: calc(100% - 1px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V52C180 24 400 10 700 32S1220 78 1440 40V90Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V52C180 24 400 10 700 32S1220 78 1440 40V90Z'/%3E%3C/svg%3E");
}

.welle-unten::after {
  top: calc(100% - 1px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0V36C240 70 520 80 780 54S1230 10 1440 34V0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0V36C240 70 520 80 780 54S1230 10 1440 34V0Z'/%3E%3C/svg%3E");
}

.welle-unten + .abschnitt {
  padding-top: calc(var(--abstand) + 2rem);
}

/* ---------- Für Angehörige ---------- */

.angehoerige {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.angehoerige__text h2 {
  margin-bottom: 1.25rem;
}

.angehoerige__text p {
  max-width: 34rem;
  margin-bottom: 2rem;
}

.angehoerige__liste {
  gap: 1rem;
  margin-top: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--creme-hell);
  box-shadow: var(--schatten);
}

/* ---------- Häufige Fragen ---------- */

.fragen {
  max-width: 52rem;
  border-bottom: 1px solid var(--puder-rand);
}

.frage {
  border-top: 1px solid var(--puder-rand);
}

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  color: var(--tanne);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

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

/* Plus im Kreis, wird beim Öffnen zum Kreuz */
.frage summary::after {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--tanne);
  border-radius: 50%;
  background:
    linear-gradient(var(--tanne), var(--tanne)) center / 0.9rem 2px no-repeat,
    linear-gradient(var(--tanne), var(--tanne)) center / 2px 0.9rem no-repeat,
    var(--puder);
  transition: rotate 0.2s ease;
}

.frage[open] summary::after {
  rotate: 45deg;
}

.frage summary:hover {
  color: var(--herzrot);
}

.frage p {
  max-width: 44rem;
  padding-bottom: 1.5rem;
}

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

/* ---------- Ablauf ---------- */

.schritte {
  --spalt: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem var(--spalt);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Verbindungslinie zwischen den Nummern */
.schritte::before {
  content: "";
  position: absolute;
  top: 1.625rem;
  left: 1.625rem;
  right: calc((100% - 2 * var(--spalt)) / 3 - 1.625rem);
  border-top: 2px solid var(--puder-rand);
}

.schritt {
  position: relative;
}

.schritt .kreis {
  font-size: 1.25rem;
  font-weight: 800;
}

.schritt h3 {
  margin-top: 1.25rem;
}

.schritt p {
  margin-top: 0.5rem;
  color: var(--leise);
}

/* ---------- Über uns ---------- */

.ueber {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.ueber__text {
  max-width: 40rem;
}

.ueber__text h2 {
  margin-bottom: 1.25rem;
}

.ueber__text p + p {
  margin-top: 1rem;
}

.unterschrift {
  margin-top: 2rem;
}

.unterschrift__gruss {
  color: var(--leise);
}

.unterschrift__name {
  font-family: var(--schreibschrift);
  font-size: 3rem;
  line-height: 1.1;
  color: var(--tanne);
}

.unterschrift__zusatz {
  margin-top: 0.25rem;
  color: var(--leise);
  font-size: 1rem;
}

.ueber__tasse {
  width: 15rem;
  height: 15rem;
  margin-bottom: -0.5rem;
  padding: 1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--licht), transparent 68%);
  color: var(--tanne);
}

/* Team: wer für die Betreuung da ist */
.team__titel {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.person {
  padding: 1.75rem;
  border: 1px solid var(--puder-rand);
  border-radius: var(--radius);
  background: var(--creme-hell);
  box-shadow: var(--schatten);
}

.person--offen {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.person__monogramm,
.person__foto {
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 1.25rem;
  border: 2px solid var(--tanne);
  border-radius: 50%;
}

.person__monogramm {
  display: grid;
  place-items: center;
  background: var(--puder);
  color: var(--tanne);
  font-family: var(--schreibschrift);
  font-size: 2.2rem;
  line-height: 1;
  padding-right: 0.2rem;
}

.person__monogramm--herz {
  border-color: var(--puder-rand);
  background: transparent;
  color: var(--herzrot);
}

.person__monogramm--herz svg {
  width: 2.25rem;
  height: 2.25rem;
}

.person__foto {
  object-fit: cover;
}

.person__name {
  margin: 0;
  color: var(--tanne);
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.3;
}

.person__rolle {
  margin-top: 0.15rem;
  color: var(--herzrot);
  font-size: 1rem;
  font-weight: 600;
}

.person__text {
  margin-top: 0.75rem;
  color: var(--leise);
}

.person__link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
}

/* ---------- Kontakt ---------- */

.kontakt__kopf {
  max-width: 44rem;
  margin-bottom: 2rem;
}

.kontakt__kopf p {
  margin-top: 1rem;
}

.kontakt__kopf .aktionen {
  margin-top: 1.5rem;
}

/* Kontakt-Kopf links, Karte des Heidekreises rechts */
.kontakt__oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: 2.5rem;
}

.kontakt__oben .kontakt__kopf {
  margin-bottom: 0;
}

.karte {
  margin: 0;
}

.karte__bild {
  width: 100%;
  height: auto;
  overflow: visible;
}

.karte__kreis {
  fill: var(--creme-hell);
  stroke: var(--tanne);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 16px rgba(120, 72, 40, 0.18));
}

/* Ortsnamen mit hellem Rand, damit sie über der Grenzlinie lesbar bleiben */
.karte__orte text {
  fill: var(--tinte);
  font-family: var(--schrift);
  font-size: 15px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--creme-hell);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.karte__text {
  margin-top: 0.75rem;
  color: var(--leise);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

.karte__quelle {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

.karte__quelle a {
  color: var(--leise);
}

/* Kontaktleiste wie die Fußzeile der Rechnung */
.kontaktleiste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--creme-hell);
  box-shadow: var(--schatten);
  list-style: none;
}

.kontaktleiste li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.kontaktleiste svg {
  width: 2rem;
  height: 2rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--tanne);
}

.kontaktleiste__titel {
  color: var(--leise);
  font-size: 0.9375rem;
}

.kontaktleiste__wert {
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.kontaktleiste__wert a {
  text-decoration: none;
}

.kontaktleiste__gross {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 800;
}

.kontakt__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--leise);
  font-size: 1.0625rem;
}

.kontakt__hinweis svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  margin-top: 0.1rem;
  color: var(--tanne);
}

/* ---------- Mitarbeit ---------- */

/* Kontakt und Mitarbeit bilden zusammen mit dem Fuß ein warmes Band */
#kontakt {
  padding-bottom: 0;
}

#mitarbeiten {
  margin-top: 0;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}

.mitmachen {
  display: flex;
  align-items: center;
  gap: 1.5rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px dashed var(--puder-rand);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--creme-hell) 60%, transparent);
}

.mitmachen__herz {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  color: var(--herzrot);
}

.mitmachen__text {
  flex: 1;
}

.mitmachen__text h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

.mitmachen__text p {
  margin-top: 0.5rem;
  color: var(--leise);
}

.mitmachen .knopf {
  flex: none;
}

/* ---------- Fuß ---------- */

.fuss {
  position: relative;
  padding-top: 0.5rem;
  background: var(--puder);
}

/* Unterseiten: Fuß beginnt mit einer Welle */
.fuss.welle-oben {
  margin-top: clamp(6rem, 12vw, 9rem);
}

.fuss__dank {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  color: var(--herzrot);
  font-family: var(--schreibschrift);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  line-height: 1.2;
}

.fuss__dank svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

/* Trennlinie nur so breit wie der Inhalt, nicht über den Seitenrand */
.fuss__innen {
  padding-top: 1.75rem;
  background: linear-gradient(var(--puder-rand), var(--puder-rand)) top center / calc(100% - 2 * var(--rand)) 1px no-repeat;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  color: var(--leise);
  font-size: 1rem;
}

.fuss__marke {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.fuss__name {
  font-family: var(--schreibschrift);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--tanne);
}

.fuss__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss__nav a {
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--tinte);
}

/* Heidelandschaft am Seitenende: Hügel, Wacholder, Heidekraut, Heidschnucke */
.heide-landschaft {
  width: 100%;
  height: clamp(5.5rem, 9vw, 8.5rem);
  margin-top: 1.25rem;
}

.landschaft__ferne {
  fill: none;
  stroke: var(--puder-rand);
  stroke-width: 1.6;
}

.landschaft__boden {
  fill: var(--puder-tief);
}

.landschaft__linie {
  fill: none;
  stroke: var(--tanne);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landschaft__wacholder {
  fill: var(--puder-tief);
  stroke: var(--tanne);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.landschaft__bluete {
  fill: var(--heide);
}

.landschaft__bluete-hell {
  fill: #bd8ab0;
}

.landschaft__stiel {
  fill: none;
  stroke: var(--tanne);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.landschaft__wolle {
  fill: var(--creme-hell);
  stroke: var(--tanne);
  stroke-width: 1.6;
}

.landschaft__kopf {
  fill: var(--tanne);
}

.landschaft__beine {
  stroke-width: 2.2;
}

/* ---------- Warteliste ---------- */

.warteliste {
  max-width: 44rem;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.warteliste h1 {
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
}

.warteliste__einleitung {
  margin-top: 1.25rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
}

.warteliste__persoenlich {
  margin-top: 1rem;
  color: var(--leise);
}

.formular {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--puder-rand);
  border-radius: var(--radius);
  background: var(--creme-hell);
  box-shadow: var(--schatten);
}

.feld {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.feld__titel {
  padding: 0;
  color: var(--tanne);
  font-weight: 700;
}

.pflicht {
  margin-left: 0.35rem;
  color: var(--leise);
  font-size: 0.875rem;
  font-weight: 400;
}

.feld__hilfe {
  color: var(--leise);
  font-size: 1rem;
}

.formular input[type="text"],
.formular input[type="tel"],
.formular input[type="email"],
.formular select,
.formular textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--feldrand);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--tinte);
  font: inherit;
  font-size: 1.125rem;
}

.formular textarea {
  min-height: 7rem;
  resize: vertical;
}

.formular select {
  padding-right: 2.75rem;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231e3a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 1.25rem;
}

.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  border-color: var(--tanne);
}

.wahl {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.3rem;
  cursor: pointer;
}

.wahl input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.2rem 0 0;
  accent-color: var(--tanne);
}

.wahl--einwilligung {
  font-size: 1rem;
}

.feld-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__fehler {
  padding: 1rem 1.25rem;
  border: 2px solid var(--herzrot);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--herzrot);
  font-weight: 700;
}

.formular .knopf {
  justify-self: start;
}

.formular__erfolg {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--puder-rand);
  border-radius: var(--radius);
  background: var(--puder);
}

.formular__erfolg h2 {
  font-size: 1.75rem;
}

.formular__erfolg p {
  margin-top: 0.75rem;
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */

.rechtliches {
  max-width: 46rem;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.rechtliches h1 {
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  margin-bottom: 2rem;
}

.rechtliches h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.rechtliches p + p,
.rechtliches ul {
  margin-top: 0.85rem;
}

.rechtliches .hinweis {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--puder-rand);
  border-radius: var(--radius);
  background: var(--puder);
  font-size: 1rem;
}

.zurueck {
  display: inline-block;
  margin-top: 2.5rem;
  font-weight: 700;
}

/* ---------- Kleinere Bildschirme ---------- */

@media (max-width: 960px) {
  .leiste__nav {
    display: none;
  }

  .leiste__name {
    display: block;
  }

  .einstieg,
  .angehoerige,
  .ueber,
  .kontakt__oben {
    grid-template-columns: minmax(0, 1fr);
  }

  .karte {
    max-width: 22rem;
  }

  .eckdaten {
    max-width: 30rem;
  }

  .ueber__tasse {
    width: 10rem;
    height: 10rem;
    padding: 1rem;
    margin: 0;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  /* Foto rückt unter den Schriftzug, die Welle schneidet es unten ab */
  .kopf {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 3px;
  }

  .kopf__inhalt {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
  }

  .kopf__foto {
    position: relative;
    width: 100%;
    height: clamp(13rem, 55vw, 20rem);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .kopf__welle {
    height: 4rem;
  }

  .leistungen,
  .kontaktleiste {
    grid-template-columns: minmax(0, 1fr);
  }

  .mitmachen {
    flex-direction: column;
    align-items: flex-start;
  }

  .feld-paar {
    grid-template-columns: minmax(0, 1fr);
  }

  .formular .knopf {
    justify-self: stretch;
    justify-content: center;
  }

  .frage summary {
    font-size: 1.125rem;
  }

  /* Schritte untereinander, Linie links */
  .schritte {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .schritte::before {
    display: block;
    top: 1.625rem;
    bottom: 1.625rem;
    left: 1.5rem;
    right: auto;
    border-top: 0;
    border-left: 2px solid var(--puder-rand);
  }

  .schritt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
  }

  .schritt .kreis {
    grid-row: span 2;
  }

  .schritt h3 {
    margin-top: 0.6rem;
  }
}

.nummer-kurz {
  display: none;
}

@media (max-width: 420px) {
  .leiste .nummer-lang {
    display: none;
  }

  .leiste .nummer-kurz {
    display: inline;
  }

  .leiste__name {
    font-size: 1.75rem;
  }

  .aktionen .knopf {
    width: 100%;
    justify-content: center;
  }
}

@media print {
  body::after,
  .leiste,
  .kopf__welle,
  .aktionen,
  .welle-oben::before,
  .welle-unten::after {
    display: none;
  }
}

/* Unterseiten zeigen den Namen auch auf großen Bildschirmen */
.leiste__name--immer {
  display: block;
}