/* weil. Grundstil, mobil zuerst */

@font-face { font-family: "Inter"; src: url("schrift/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schrift/Inter-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schrift/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("schrift/InterDisplay-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("schrift/InterDisplay-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  --papier: #FFFDFA;
  --papier-2: #F8F4EE;
  --tinte: #2E2A35;
  --tinte-2: #6B6575;
  --flieder: #C9A6E6;
  --flieder-hell: #F0E6F8;
  --flieder-dunkel: #6A4A8C;
  --rosa: #F3C4D3;
  --rosa-hell: #FBE9EF;
  --rosa-dunkel: #8E4664;
  --gelb: #F7E48A;
  --gelb-hell: #FCF4CF;
  --gelb-dunkel: #6F5A10;
  --blau: #B9D2EE;
  --blau-hell: #E6EFF9;
  --blau-dunkel: #3A5676;
  --linie: rgba(46, 42, 53, 0.08);
  --radius: 24px;
  --radius-klein: 16px;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Display", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0 0 0.5em; letter-spacing: -0.025em; }
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
.leise { color: var(--tinte-2); }
.klein { font-size: 0.92rem; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 22px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(255, 253, 250, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marke { font-family: var(--display); font-weight: 600; font-size: 1.7rem; text-decoration: none; letter-spacing: -0.03em; }
.punkt { color: var(--flieder); }
.menu-knopf {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--tinte); color: var(--papier); border: none; border-radius: 999px;
  padding: 10px 16px; font: inherit; font-weight: 500; font-size: 0.95rem; cursor: pointer;
}
.menu-knopf span.strich { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
nav.menu { display: none; }
nav.menu.offen {
  display: block; position: absolute; left: 12px; right: 12px; top: 76px;
  background: var(--papier); border-radius: var(--radius);
  padding: 12px 18px 18px; box-shadow: 0 20px 60px rgba(46,42,53,0.14);
}
nav.menu a, nav.menu summary {
  display: block; padding: 13px 6px; text-decoration: none; font-size: 1.15rem; font-weight: 500;
  cursor: pointer; list-style: none; border-radius: 12px;
}
nav.menu summary::-webkit-details-marker { display: none; }
nav.menu details a { padding-left: 22px; font-size: 1.02rem; font-weight: 400; }
nav.menu a.aktiv { color: var(--flieder-dunkel); }

@media (min-width: 880px) {
  .menu-knopf { display: none; }
  nav.menu { display: flex; gap: 2px; align-items: center; position: static; }
  nav.menu a, nav.menu summary { padding: 9px 14px; font-size: 0.98rem; border-radius: 999px; font-weight: 500; }
  nav.menu a:hover, nav.menu summary:hover { background: var(--flieder-hell); }
  nav.menu details { position: relative; }
  nav.menu details[open] > div, nav.menu details:hover > div, nav.menu details:focus-within > div {
    display: block; position: absolute; top: calc(100% + 6px); left: 0; background: var(--papier); border-radius: 18px; padding: 8px; min-width: 230px; box-shadow: 0 20px 50px rgba(46,42,53,0.14);
  }
  nav.menu details a { padding: 10px 14px; }
}

/* Bühne */
.buehne { position: relative; padding: 64px 0 48px; overflow: hidden; }
.buehne::before {
  content: ""; position: absolute; inset: -40% -30% auto -30%; height: 140%; z-index: -1;
  background:
    radial-gradient(42% 38% at 18% 30%, rgba(243,196,211,0.75) 0%, rgba(243,196,211,0) 70%),
    radial-gradient(40% 36% at 82% 22%, rgba(185,210,238,0.75) 0%, rgba(185,210,238,0) 70%),
    radial-gradient(44% 40% at 60% 85%, rgba(247,228,138,0.6) 0%, rgba(247,228,138,0) 70%),
    radial-gradient(38% 34% at 30% 90%, rgba(201,166,230,0.55) 0%, rgba(201,166,230,0) 70%);
  filter: blur(10px);
}
.buehne .wort {
  font-family: var(--display); font-weight: 600; font-size: clamp(5.5rem, 27vw, 11rem);
  line-height: 0.85; letter-spacing: -0.06em; margin: 0 0 26px;
}
.buehne .wort .punkt { color: var(--flieder); }
.buehne .claim { font-family: var(--display); font-weight: 500; font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 16px; }
.buehne .unter { max-width: 520px; color: var(--tinte-2); font-size: 1.08rem; }
.buehne .etikett { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.7); margin: 0 0 18px; }

/* Abschnitte */
section { padding: 44px 0; }
section.creme { background: var(--papier-2); border-radius: 36px; margin: 8px 10px; }
section.creme .wrap { padding: 0 16px; }
@media (min-width: 880px) { section { padding: 64px 0; } section.creme .wrap { padding: 0 22px; } }
.einleitung { max-width: 640px; }
.einleitung p { font-size: 1.08rem; }
.einleitung p:first-of-type { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }

/* Türen / Karten */
.tueren { display: grid; gap: 12px; }
.tuer {
  display: flex; flex-direction: column; text-decoration: none; border-radius: var(--radius);
  padding: 26px 24px 22px; min-height: 200px; transition: transform .3s ease, box-shadow .3s ease;
}
.tuer:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(46,42,53,0.09); }
.tuer .etikett { display: inline-block; align-self: flex-start; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.65); }
.tuer h3 { margin-bottom: 8px; font-size: 1.45rem; }
.tuer p { margin: 0 0 auto; color: var(--tinte-2); }
.tuer .pfeil { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; font-size: 0.95rem; }
.tuer .pfeil::after { content: "→"; transition: transform .2s ease; }
.tuer:hover .pfeil::after { transform: translateX(4px); }
.rosa { background: var(--rosa-hell); }
.rosa .etikett, .rosa .pfeil { color: var(--rosa-dunkel); }
.blau { background: var(--blau-hell); }
.blau .etikett, .blau .pfeil { color: var(--blau-dunkel); }
.gelb { background: var(--gelb-hell); }
.gelb .etikett, .gelb .pfeil { color: var(--gelb-dunkel); }
.flieder { background: var(--flieder-hell); }
.flieder .etikett, .flieder .pfeil { color: var(--flieder-dunkel); }

@media (min-width: 700px) {
  .tueren { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tueren.drei { grid-template-columns: repeat(3, 1fr); }
}

/* Geschichte */
.geschichte { max-width: 680px; }
.geschichte p { font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 4.6vw, 1.9rem); line-height: 1.3; letter-spacing: -0.02em; }
.geschichte p::before { content: "„"; color: var(--flieder); }
.geschichte p::after { content: "“"; color: var(--flieder); }
.geschichte .wer { font-family: var(--schrift); font-weight: 400; font-size: 0.98rem; color: var(--tinte-2); letter-spacing: 0; }
.geschichte .wer::before, .geschichte .wer::after { content: ""; }

/* Aufklappen */
.klapp { display: grid; gap: 8px; }
.klapp details { background: #fff; border-radius: var(--radius-klein); overflow: hidden; }
.klapp summary {
  list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; position: relative;
  font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em;
}
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary::after {
  content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--flieder-hell); color: var(--flieder-dunkel);
  display: grid; place-items: center; font-family: var(--schrift); font-size: 1.2rem; font-weight: 500;
  transition: transform .25s ease, background .25s ease;
}
.klapp details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--flieder); color: #fff; }
.klapp .inhalt { padding: 0 20px 20px; max-width: 640px; color: var(--tinte-2); }
.klapp .inhalt strong { color: var(--tinte); }
.klapp .inhalt p:last-child { margin-bottom: 0; }
section.creme .klapp details { background: var(--papier); }

/* Angebote */
.angebote { display: grid; gap: 12px; }
.angebot { border-radius: var(--radius); padding: 24px 22px; background: #fff; }
.angebot .zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.angebot h3 { margin-bottom: 4px; }
.angebot .preis { font-family: var(--display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--gelb-hell); color: var(--gelb-dunkel); }
.angebot p { margin: 10px 0 0; color: var(--tinte-2); }
.angebot .meta { font-size: 0.92rem; margin-top: 8px; }
.angebot .klapp { margin-top: 14px; }
.angebot .klapp details { background: var(--papier-2); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-radius: 999px;
  padding: 13px 22px; font-weight: 600; font-size: 0.98rem; border: none;
  transition: transform .2s ease, background .2s ease;
}
.knopf:hover { transform: translateY(-1px); }
.knopf.voll { background: var(--tinte); color: var(--papier); }
.knopf.voll::after { content: "→"; }
.knopf.leicht { background: var(--flieder-hell); color: var(--flieder-dunkel); }
.knopfzeile { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Hinweiskasten */
.hinweis { border-radius: var(--radius); padding: 22px 22px; background: var(--blau-hell); color: var(--blau-dunkel); max-width: 680px; }
.hinweis p { margin: 0 0 0.6em; }
.hinweis p:last-child { margin: 0; }
.hinweis strong { font-weight: 600; }

/* Fuß */
footer { padding: 40px 0 72px; color: var(--tinte-2); font-size: 0.95rem; }
footer .punkte { display: flex; gap: 6px; margin-bottom: 16px; }
footer .punkte span { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer nav a { text-decoration: none; font-weight: 500; }
footer nav a:hover { color: var(--tinte); }

/* Einblenden beim Scrollen */
.einblenden { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.einblenden.da { opacity: 1; transform: none; }

/* Nach oben */
#nachoben {
  position: fixed; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%;
  border: none; background: var(--tinte); color: var(--papier); font-size: 1.1rem; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 30;
  box-shadow: 0 10px 30px rgba(46,42,53,0.2);
}
#nachoben.da { opacity: 1; pointer-events: auto; }

/* Wortmarke im Kopf */
.marke-bild { height: 30px; width: auto; display: block; }

/* Kalender-Platzhalter */
.kalender-platz { background: var(--papier-2); border-radius: var(--radius); padding: 44px 22px; text-align: center; }
.kalender-platz p { margin: 0 0 6px; }

/* Preistabelle */
.preistabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.preistabelle td { padding: 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.preistabelle tr:last-child td { border-bottom: none; }
.preistabelle td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--tinte); padding-left: 16px; }

/* Formular */
.formular { max-width: 640px; display: grid; gap: 16px; }
.formular label { display: grid; gap: 6px; font-weight: 500; font-size: 0.95rem; }
.formular input[type=text], .formular input[type=email], .formular select, .formular textarea {
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--tinte);
  padding: 13px 16px; border-radius: var(--radius-klein); border: 1.5px solid transparent; background: var(--papier-2);
  transition: border-color .2s ease, background .2s ease;
}
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--flieder); background: #fff; }
.formular textarea { resize: vertical; min-height: 140px; }
.formular .zeile-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--tinte-2); font-size: 0.92rem; }
.formular .zeile-check input { margin-top: 4px; accent-color: var(--flieder-dunkel); width: 18px; height: 18px; }
.formular button { justify-self: start; font: inherit; cursor: pointer; }
.formular .honig { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Über uns */
.ueber-raster { display: grid; gap: 28px; }
.foto-platz {
  width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #FBE9EF, #F0E6F8 55%, #E6EFF9); color: var(--tinte-2); font-size: 0.92rem;
}
.foto-platz img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (min-width: 760px) { .ueber-raster { grid-template-columns: 240px 1fr; gap: 40px; align-items: start; } .foto-platz { width: 240px; height: 240px; } }
nav.menu details.eltern-aktiv > summary { color: var(--flieder-dunkel); }
.formular label[hidden] { display: none; }
.einleitung.ohne-lead p:first-of-type { font-size: 1.08rem; font-weight: 400; }

/* Bilder */
.bildband { padding: 0 0 8px; }
.seitenbild { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.tuer { padding-top: 0; overflow: hidden; }
.tuer .tuerbild { width: calc(100% + 48px); margin: 0 -24px 18px; max-width: none; height: 170px; object-fit: cover; display: block; }
.tuer .etikett { margin-top: 0; }
.tuer.gelb .tuerbild { object-position: center 85%; }
.tuer.flieder .tuerbild { object-position: center 40%; }
.seitenbild.band { aspect-ratio: 3 / 1; object-fit: cover; }

/* Buchungskalender (Cal.com) */
.kalender { background: var(--papier-2); border-radius: var(--radius); padding: 18px; }
.kal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kal-tab { font: inherit; font-size: 0.95rem; border: 1px solid rgba(46,42,53,0.14); background: #fff; color: var(--tinte); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.kal-tab span { color: rgba(46,42,53,0.55); font-size: 0.85em; }
.kal-tab.aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.kal-tab.aktiv span { color: rgba(255,255,255,0.7); }
.kal-flaeche { min-height: 560px; background: var(--flieder-hell); border-radius: 14px; overflow: hidden; }
.kal-flaeche:has(.kal-start-wrap) { min-height: 300px; }
.kal-flaeche[hidden] { display: none; }
.kal-hinweis { margin: 12px 0 0; font-size: 0.85rem; }
.kal-start-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 300px; text-align: center; padding: 0 24px; }
.kal-start { font: inherit; font-size: 1rem; font-weight: 600; border: none; background: var(--tinte); color: var(--papier); border-radius: 999px; padding: 14px 28px; cursor: pointer; transition: transform .2s ease; }
.kal-start:hover { transform: translateY(-1px); }
.kal-start-hinweis { margin: 0; font-size: 0.85rem; color: rgba(46,42,53,0.6); }