@font-face { font-family: "DM Serif Display"; src: url("schrift/DMSerifDisplay-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  color-scheme: only light;
  --marke: #a83a5c; --marke-dunkel: #7e2a44; --marke-hell: #f6e4ea; --lupe: #f5b301;
  --bg: #f6f2e9; --karte: #ffffff; --text: #1f2a33; --leise: #5f6b75; --linie: #e2dccf;
  --schatten: 0 1px 2px rgba(60, 25, 35, .08), 0 12px 32px rgba(60, 25, 35, .14);
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breite: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marke-dunkel); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; color: var(--marke-dunkel); }
.innen { max-width: var(--breite); margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }

.kopf { position: sticky; top: 0; z-index: 10; background: var(--marke); border-bottom: 3px solid var(--lupe); }
.kopf .innen { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.kopf .logo img { height: 40px; width: auto; }
.kopf nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.kopf nav a { color: #fff; text-decoration: none; font-size: .95rem; }
.kopf nav a:hover { color: #ffe9a8; }
@media (max-width: 760px) { .kopf nav a:not(.sprache) { display: none; } }

.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: 600 1rem var(--sans); text-decoration: none; border: 2px solid var(--marke); background: var(--marke); color: #fff; cursor: pointer; }
.knopf.leise { background: transparent; color: var(--marke-dunkel); }
.bald { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 14px; background: var(--marke-dunkel); color: #fff; font-size: .85rem; line-height: 1.25; }
.bald svg { width: 26px; height: 26px; }
.bald b { display: block; font-size: 1.02rem; }

.held { padding: 56px 0 48px; overflow: hidden; }
.held .innen { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.dachzeile { font: 600 .82rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--marke); margin: 0 0 14px; }
.held h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); }
.lead { font-size: 1.12rem; color: var(--leise); margin: 20px 0 26px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.szene { margin: 0; min-width: 0; }
.szene img { width: 100%; border-radius: 24px; box-shadow: var(--schatten); }
@media (max-width: 900px) { .held .innen { grid-template-columns: 1fr; } }

.abschnitt { padding: 56px 0; }
.abschnitt.hell { background: var(--marke-hell); }
.abschnitt h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 26px; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.punkt { background: var(--karte); border-radius: 18px; padding: 22px 24px; box-shadow: 0 1px 0 var(--linie); min-width: 0; }
.punkt h3 { font-size: 1.3rem; margin-bottom: 8px; }
.punkt p { margin: 0; color: var(--leise); }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.karte { background: var(--karte); border-radius: 18px; overflow: hidden; box-shadow: var(--schatten); min-width: 0; }
.karte div { padding: 18px 22px 22px; }
.karte h3 { font-size: 1.35rem; margin-bottom: 8px; }
.karte p { margin: 0; color: var(--leise); }
@media (max-width: 900px) { .drei, .karten { grid-template-columns: 1fr; } }
.szenen-titel { font-size: 1.6rem; margin: 40px 0 18px; }
.szenen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 18px; }
.szenen figure { margin: 0; min-width: 0; }
.szenen img { width: 100%; border-radius: 14px; box-shadow: var(--schatten); }
.szenen figcaption { margin-top: 8px; font-size: .92rem; text-align: center; }
@media (min-width: 901px) { .szenen figure:first-child { grid-column: span 2; grid-row: span 2; } }
@media (max-width: 900px) { .szenen { grid-template-columns: repeat(2, 1fr); } .szenen figure:first-child { grid-column: span 2; } }
@media (max-width: 600px) {
  .szenen { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -20px; padding: 4px 20px 16px; scroll-padding-inline: 20px; }
  .szenen figure { flex: none; width: 76vw; scroll-snap-align: start; }
}
.eltern { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: center; }
.eltern > div { min-width: 0; }
.liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.liste li { position: relative; padding-left: 28px; }
.liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; background: var(--lupe); }
.handy { margin: 0; border: 8px solid #2a1c22; border-radius: 32px; overflow: hidden; background: #2a1c22; box-shadow: var(--schatten); }
.handy img { width: 100%; border-radius: 24px; }
@media (max-width: 760px) { .eltern { grid-template-columns: 1fr; } .handy { max-width: 280px; } }

.recht { padding: 48px 0 72px; }
.recht .innen { max-width: 820px; }
.recht h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); margin-bottom: 16px; overflow-wrap: anywhere; }
.recht h2 { font-size: 1.5rem; margin: 34px 0 10px; }
.recht h3 { font-size: 1.2rem; margin: 22px 0 8px; }
.recht p, .recht li { color: #2d3944; overflow-wrap: anywhere; }
form.kontakt { display: grid; gap: 8px; max-width: 560px; margin-top: 20px; }
form.kontakt label { font-weight: 600; margin-top: 8px; }
form.kontakt label span { font-weight: 400; color: var(--leise); }
form.kontakt input, form.kontakt textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; max-width: 100%; }
form.kontakt .falle { position: absolute; left: -9999px; }
form.kontakt .knopf { justify-self: start; margin-top: 10px; }
.kontakt-hinweis { font-size: .9rem; color: var(--leise); }
.kontakt-fehler { background: #fbe9e7; border-radius: 10px; padding: 4px 16px; color: #8a2b1d; }
.kontakt-danke { background: #e5f2e1; border-radius: 10px; padding: 14px 18px; }

.fuss { background: var(--marke-dunkel); color: #f3dde4; padding: 28px 0; font-size: .92rem; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
.fuss img { height: 32px; width: auto; }
.fuss nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; }
.fuss a { color: #fff; }