/* bindungsreich – Farben und Schrift von der Visitenkarte (gemessen) */
@font-face {
  font-family: "Didact Gothic";
  src: url("../fonts/didact-gothic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --violett: #58447c;
  --violett-tief: #3f2f5c;
  --beere: #94536f;
  --flieder: #b8a5ce;
  --flieder-hell: #e9e1f2;
  --flaeche: #f7f3fa;
  --weiss: #fff;
  --text: #3f3550;
  --schrift: "Didact Gothic", "Century Gothic", "URW Gothic", Futura, sans-serif;
  --breite: 68rem;
  --rund: 1.25rem;
}

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

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.7;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
  word-spacing: -.03em;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--beere); text-underline-offset: .2em; }
a:hover { color: var(--violett); }
:focus-visible { outline: 3px solid var(--beere); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { color: var(--violett); font-weight: 400; line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--violett); color: var(--weiss); padding: .5rem 1rem; border-radius: .5rem; z-index: 10; }
.skip:focus { top: 1rem; color: var(--weiss); }

.wrap { width: min(100% - 2rem, var(--breite)); margin-inline: auto; }
section { padding-block: clamp(3.5rem, 8vw, 6rem); }

/* Hamburger-Menü (wie darminbalance, auf allen Bildschirmgrößen gleich) */
.menue {
  position: fixed; z-index: 20;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
}
.menue__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-left: auto; padding: 0;
  border: 0; border-radius: .9rem; cursor: pointer;
  background: var(--violett); box-shadow: 0 .5rem 1.25rem -.5rem rgba(88, 68, 124, .6);
  transition: background-color .2s;
}
.menue__knopf:hover { background: var(--violett-tief); }
.menue__striche { display: block; width: 1.5rem; height: 1.1rem; position: relative; }
.menue__striche span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--weiss);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.menue__striche span:nth-child(1) { top: 0; }
.menue__striche span:nth-child(2) { top: calc(50% - 1px); width: 70%; left: 30%; background: var(--flieder); }
.menue__striche span:nth-child(3) { top: calc(100% - 2px); }
.menue__knopf[aria-expanded="true"] .menue__striche span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.menue__knopf[aria-expanded="true"] .menue__striche span:nth-child(2) { opacity: 0; }
.menue__knopf[aria-expanded="true"] .menue__striche span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }
.menue ul {
  position: absolute; top: calc(100% + .6rem); right: 0;
  list-style: none; margin: 0; padding: .75rem; min-width: 13rem;
  display: flex; flex-direction: column; gap: .15rem;
  background: rgba(255, 255, 255, .97); border-radius: var(--rund);
  box-shadow: 0 1rem 2.5rem -1rem rgba(63, 47, 92, .45);
  opacity: 0; visibility: hidden; transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.menue.offen ul { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.menue a {
  display: block; padding: .55rem .9rem; border-radius: .6rem;
  color: var(--violett); text-decoration: none; font-size: 1.1rem;
}
.menue a:hover, .menue a:focus-visible { background: var(--flieder-hell); color: var(--violett-tief); }
.menue li:nth-child(4) { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--flieder-hell); }
.menue li:nth-child(n+4) a { font-size: .95rem; color: var(--beere); }
@media (prefers-reduced-motion: reduce) {
  .menue ul, .menue__striche span { transition: none; }
}
/* Sprungziele nicht unter dem Menüknopf verstecken */
section[id], header[id] { scroll-margin-top: 1rem; }

/* Kopf */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--flieder-hell);
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3rem, 8vw, 5.5rem);
  text-align: center;
  isolation: isolate;
}
.hero__deko {
  position: absolute; inset: -6% -10% auto auto;
  width: min(130%, 82rem); opacity: .45; z-index: -1; pointer-events: none;
}
.hero__logo { width: min(100%, 38rem); margin: 0 auto clamp(2rem, 5vw, 3rem); }
/* Handy: Logo kleiner, auf Höhe des Menüknopfs daneben */
@media (max-width: 40rem) {
  .hero { padding-top: max(1rem, env(safe-area-inset-top, 0px)); }
  .hero__logo { width: calc(100% - 3rem - .75rem); max-width: 17rem; margin: 0 0 2rem; }
}
.hinweis {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--weiss); color: var(--violett);
  border-radius: 999px; padding: .45rem 1.1rem; font-size: .95rem;
  box-shadow: 0 1px 0 rgba(88, 68, 124, .08);
  margin-bottom: 1.5rem;
}
.hinweis::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--beere);
  animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hinweis::before { animation: none; } }

.hero h1 { max-width: 30ch; margin-inline: auto; }
.hero .lead { max-width: 38rem; margin: 0 auto 2rem; }

.knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  text-decoration: none; font-size: 1.05rem;
  border: 2px solid var(--violett);
  transition: background-color .2s, color .2s;
}
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--voll { background: var(--violett); color: var(--weiss); }
.knopf--voll:hover { background: var(--violett-tief); border-color: var(--violett-tief); color: var(--weiss); }
.knopf--rand { color: var(--violett); background: transparent; }
.knopf--rand:hover { background: var(--violett); color: var(--weiss); }

/* Slogan-Streifen wie die Rückseite der Visitenkarte */
.band { background: var(--beere); padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.band img { width: min(100%, 30rem); margin-inline: auto; }

/* Angebot */
.angebot h2, .orte h2 { text-align: center; }
.angebot .intro { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.karten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.karte {
  background: var(--weiss); border-radius: var(--rund);
  padding: 1.75rem 1.5rem 1.5rem;
}
/* kurzer Farbstrich statt Randkante (Kante passt nicht zu runden Ecken) */
.karte::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--flieder); margin-bottom: 1rem; }
.karte:first-child::before { background: var(--beere); }
.karte h3 { margin-bottom: .4em; }
.karte p { margin: 0; }
.status { display: inline-block; font-size: .85rem; color: var(--beere); margin-bottom: .6rem; letter-spacing: .04em; text-transform: uppercase; }

/* Über mich */
.ueber { background: var(--weiss); }
.ueber__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .ueber__raster { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.ueber__bild { position: relative; max-width: 20rem; margin-inline: auto; }
.ueber__bild { width: 100%; max-width: 22rem; margin: 0 auto; }
/* Foto in organischem Rahmen (rahmen.svg liegt darüber, Mitte frei) */
.ueber__rahmen {
  position: relative; aspect-ratio: 400 / 420; overflow: hidden; border-radius: 1.75rem;
  /* Papierfläche mit feinem Raster wie in der Vorlage */
  background-color: var(--flaeche);
  background-image: linear-gradient(var(--flieder-hell) 1px, transparent 1px), linear-gradient(90deg, var(--flieder-hell) 1px, transparent 1px);
  background-size: 1.25rem 1.25rem;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(88, 68, 124, .45);
}
.ueber__rahmen picture { position: absolute; inset: 8% 8.5%; }
.ueber__rahmen picture img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  border-radius: 1.75rem;
  box-shadow: 0 1.25rem 2.25rem -1rem rgba(88, 68, 124, .5);
}
.ueber__rahmen .ueber__deko { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ueber__bild figcaption { text-align: center; margin-top: 1rem; color: var(--violett); letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; }
.zitat {
  margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--beere);
  background: var(--flaeche); border-radius: 0 var(--rund) var(--rund) 0;
  color: var(--violett); font-size: 1.25rem;
}
.zitat p { margin: 0; }

/* Ein Ort, an dem … */
.orte__liste { list-style: none; padding: 0; margin: 2rem auto 0; max-width: 44rem; display: grid; gap: .9rem; }
.orte__liste li {
  display: flex; gap: .9rem; align-items: baseline;
  background: var(--weiss); border-radius: var(--rund); padding: 1rem 1.25rem;
  color: var(--violett); font-size: 1.15rem;
}
/* Herz als SVG statt Zeichen – iOS zeigt „♥“ sonst als rotes Emoji */
.orte__liste li::before {
  content: ""; flex: none; width: .85rem; height: .75rem; transform: translateY(.05em);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath fill='%2394536f' d='M12 21 10.3 19.4C4.2 13.9 0 10.1 0 5.5 0 2.4 2.4 0 5.5 0 7.2 0 8.9.8 10 2.1 11.1.8 12.8 0 14.5 0 17.6 0 20 2.4 20 5.5c0 0 0 0 0 0 .1 4.6-4.1 8.4-10.2 13.9z' transform='translate(2 0)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.orte__schluss { text-align: center; margin-top: 2rem; color: var(--beere); font-size: 1.2rem; }

/* Kontakt */
.kontakt { background: var(--violett); color: var(--flieder-hell); }
.kontakt h2 { color: var(--weiss); }
.kontakt__raster { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .kontakt__raster { grid-template-columns: 1fr 1fr; } }
.kontakt address { font-style: normal; font-size: 1.15rem; line-height: 1.9; }
.kontakt address strong { display: block; color: var(--weiss); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
.kontakt a { color: var(--weiss); }
.kontakt a:hover { color: var(--flieder); }
.kontakt .knopf--voll { background: var(--weiss); color: var(--violett); border-color: var(--weiss); }
.kontakt .knopf--voll:hover { background: var(--flieder-hell); border-color: var(--flieder-hell); color: var(--violett-tief); }
.kontakt .knopf--rand { color: var(--weiss); border-color: var(--weiss); }
.kontakt .knopf--rand:hover { background: var(--weiss); color: var(--violett); }
.kontakt .knoepfe { justify-content: flex-start; }

/* Fuß */
.fuss { background: var(--violett-tief); color: var(--flieder); font-size: .95rem; padding-block: 1.5rem; }
.fuss .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; }
.fuss a { color: var(--flieder-hell); }
.fuss nav { display: flex; gap: 1.25rem; }
.fuss p { margin: 0; }
@media (max-width: 40rem) {
  .fuss .wrap { flex-direction: column; align-items: stretch; gap: 1rem; }
  .fuss nav { order: -1; flex-direction: column; gap: .5rem; }
  .fuss nav a { display: block; padding: .7rem 1rem; border-radius: .6rem; background: rgba(255, 255, 255, .08); text-decoration: none; }
}

/* Unterseiten (Impressum, Datenschutz) */
.seite-kopf { background: var(--flieder-hell); padding-block: 1.5rem; }
.seite-kopf img { width: 15rem; }
.rechtstext { padding-block: clamp(2.5rem, 6vw, 4rem); max-width: 46rem; }
.rechtstext h2 { font-size: 1.35rem; margin-top: 2rem; }

/* sanftes Einblenden (nur mit JS und ohne reduzierte Bewegung) */
.js .einblenden { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .7s ease; }
.js .einblenden.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .einblenden { opacity: 1; transform: none; transition: none; } }