/* Nancy Klünder & Strahlend Du. Gestaltung siehe DESIGN.md: Weiß und Moos tragen, Gold leuchtet. */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/bodoni-moda-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jost-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jost-latin-500-normal.woff2) format('woff2'); }

:root {
  --moos: #2f4a36; --moos-tief: #233829; --gold: #eeab40; --gold-dunkel: #8a5a0e; --licht: #fbf2df;
  --tinte: #1e2620; --leise: #586257; --linie: #e5dfd1; --weiss: #fff;
  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --rand: clamp(20px, 5vw, 64px); --abstand: clamp(64px, 9vw, 120px); --breite: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--weiss); color: var(--tinte); font: 400 1.0625rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dunkel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--moos); }
:focus-visible { outline: 2px solid var(--gold-dunkel); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; color: var(--tinte); letter-spacing: -.005em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
.wrap { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.lesen { max-width: 38em; }
.zwei { display: grid; gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (min-width: 900px) { .zwei { grid-template-columns: 1fr 1fr; } }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--moos); color: #fff; padding: 10px 16px; z-index: 99; }
.skip:focus { left: 8px; }
.klein { font-size: .875rem; color: var(--leise); }
.unter { font: 500 .8125rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dunkel); margin: -.2em 0 1.4em; }
.unter-lang { color: var(--leise); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 999px; background: var(--moos); color: #fff; font: 500 1rem/1.2 var(--sans); text-decoration: none; letter-spacing: .02em; border: 0; cursor: pointer; transition: background .2s, transform .2s; }
.knopf:hover { background: var(--moos-tief); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf.gold { background: var(--gold); color: var(--moos-tief); }
.knopf.gold:hover { background: #f6c066; color: var(--moos-tief); }
.leise { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.weiter { margin-top: 1.6em; }

/* Hinweisleiste */
.hinweisleiste { background: var(--gold); color: var(--moos-tief); text-align: center; font-size: .9375rem; padding: 10px var(--rand); }
.hinweisleiste p { margin: 0; }
.hinweisleiste a { color: inherit; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kopf.unten { border-bottom-color: var(--linie); }
.kopf-in { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 10px var(--rand); display: flex; align-items: center; gap: 24px; min-height: 76px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); margin-right: auto; }
.marke img { width: 52px; height: auto; }
.marke b { display: block; font: 500 1.25rem/1.1 var(--serif); }
.marke small { display: block; font: 400 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dunkel); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a { display: block; padding: 10px 12px; color: var(--tinte); text-decoration: none; font-size: .9875rem; border-radius: 999px; }
.nav a:hover { color: var(--moos); background: var(--licht); }
.nav a[aria-current="page"] { color: var(--moos); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--moos); text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap; }
.menue-knopf { display: none; }
@media (max-width: 1080px) {
  .kopf-tel span { display: none; }
  .kopf-tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--linie); border-radius: 50%; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--moos); border-radius: 999px; background: none; color: var(--moos); font: 500 .9375rem var(--sans); cursor: pointer; }
  .menue-knopf i { width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
  .menue-knopf i::after { content: ''; position: absolute; left: 0; right: 0; top: 3.5px; border-top: 1.5px solid currentColor; }
  .nav { position: fixed; inset: 76px 0 auto 0; background: #fff; border-bottom: 1px solid var(--linie); padding: 8px var(--rand) 24px; display: none; max-height: calc(100vh - 76px); overflow: auto; }
  .nav.offen { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { padding: 14px 0; font: 500 1.4rem var(--serif); border-bottom: 1px solid var(--linie); border-radius: 0; }
  .nav a:hover { background: none; }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--gold-dunkel); }
}
@media (max-width: 420px) { .marke b { font-size: 1.05rem; } .marke img { width: 44px; } .kopf-in { gap: 10px; } }

/* Startseite: Kopf auf Moos mit Goldring */
.hero { background: var(--moos); color: #fff; overflow: hidden; }
.hero-raster { display: grid; gap: 32px; align-items: center; padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(56px, 9vw, 120px); }
@media (min-width: 900px) { .hero-raster { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero-dach { font: 500 .8125rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4em; }
.hero-lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 30em; color: #e9eee9; }
.hero-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 2em; }
.hero-tel { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 500; }
.hero-tel:hover { color: var(--gold); }
.hero-zeichen { justify-self: center; width: min(100%, 460px); }
@media (max-width: 899px) { .hero-zeichen { order: -1; width: min(62vw, 300px); } }

/* Abschnitte */
.abschnitt { padding: var(--abstand) 0; }
.hell + .hell { padding-top: 0; }
.preise + .hell, .beitrag + .hell { padding-top: var(--abstand); }
.text.schmal .lesen { max-width: 40em; }
.text.schmal h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.text.moos { background: var(--moos); color: #e9eee9; padding: var(--abstand) 0; }
.text.moos h2 { color: #fff; }
.text.moos .lesen { max-width: 44em; }
.text.frage { padding: clamp(48px, 7vw, 88px) 0; }
.text.frage .lesen { max-width: none; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: clamp(28px, 4vw, 48px) 0; }
.text.frage p { font: 500 clamp(1.35rem, 2.8vw, 2rem)/1.3 var(--serif); color: var(--moos); margin: 0 0 .35em; }
.text.frage p:last-child { color: var(--gold-dunkel); margin: 0; }
figure { margin: 0; }
.foto img { width: 100%; max-height: 560px; object-fit: cover; }
.foto.hoch { max-width: 420px; justify-self: center; }
.foto.hoch img { aspect-ratio: 3 / 4; max-height: none; object-position: 50% 20%; }
picture { display: block; }
.portrait { position: relative; max-width: 440px; justify-self: center; }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.portrait::after { content: ''; position: absolute; inset: -14px; border: 1px solid var(--gold); border-radius: 50%; pointer-events: none; }
@media (min-width: 900px) { .mit-bild .portrait { order: 0; } }

/* Projekt GESUNDHEIT */
.gesundheit { background: var(--licht); }
.gesundheit h2.gross { font-size: clamp(2rem, 4.6vw, 3.4rem); color: var(--moos); }
.gesundheit .leitsatz { font: 400 clamp(1.2rem, 2.2vw, 1.6rem)/1.3 var(--serif); color: var(--gold-dunkel); }
.gesundheit-text p { font: 500 clamp(1.25rem, 2.2vw, 1.55rem)/1.35 var(--serif); color: var(--moos); margin-bottom: .45em; }
.gesundheit-text p:nth-child(3) { color: var(--gold-dunkel); }
.gesundheit-text strong { font-weight: 500; }
.flyer-liste { list-style: none; padding: 0; margin: 1.6em 0 0; border-top: 1px solid rgba(138,90,14,.25); }
.flyer-liste li { padding: 12px 0; border-bottom: 1px solid rgba(138,90,14,.25); font: 500 .9375rem var(--sans); letter-spacing: .04em; }

/* Achse von Kopf bis Fuß */
.achse h2 { margin-bottom: 1em; }
.achse-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.achse-liste a { display: grid; grid-template-columns: 56px 1fr 28px; gap: 4px 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--tinte); transition: background .2s; }
@media (min-width: 760px) { .achse-liste a { grid-template-columns: 96px 120px 1fr 28px; padding: 34px 0; } }
.achse-liste a:hover { background: var(--licht); }
.achse-liste a:hover .pfeil { transform: translateX(4px); }
.ziffer { font: 400 clamp(2.6rem, 5vw, 3.8rem)/1 var(--serif); color: var(--gold); grid-row: span 2; }
@media (min-width: 760px) { .ziffer { grid-row: auto; } }
.zone { font: 500 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dunkel); }
.achse-liste .was h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 .15em; }
.achse-liste .was span { color: var(--leise); }
@media (max-width: 759px) { .achse-liste .was { grid-column: 2; } .achse-liste .pfeil { grid-column: 3; grid-row: 1 / span 2; } }
.pfeil { color: var(--gold-dunkel); transition: transform .2s; }

/* Angebot (Flyer) */
.angebot { background: var(--licht); }
.angebot-raster { display: grid; gap: 24px 64px; }
@media (min-width: 900px) { .angebot-raster { grid-template-columns: 1.3fr 1fr; } .stoffe, .angebot-hinweis { grid-column: 1 / -1; } }
.angebot-kopf h2 { color: var(--moos); }
.angebot-kopf h2:empty { display: none; }
.preis { font: 500 clamp(2.2rem, 5vw, 3.4rem)/1 var(--serif); color: var(--moos); margin: 0; }
.preiszusatz { font: 500 .8125rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dunkel); margin-top: .6em; }
@media (min-width: 900px) { .angebot-preis { text-align: right; align-self: end; } }
.stoffe { list-style: none; margin: 8px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(138,90,14,.3); display: flex; flex-wrap: wrap; gap: 6px 22px; }
.stoffe li { font: 400 clamp(1.25rem, 2.4vw, 1.75rem)/1.35 var(--serif); color: var(--tinte); }
.angebot-hinweis { margin: 0; font: 500 .9375rem var(--sans); color: var(--gold-dunkel); }

/* Wortliste */
.wortliste { list-style: none; padding: 0; columns: 2 260px; gap: 40px; }
.wortliste li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--linie); }

/* Reihen (Inhaltsstoffe) */
.reihen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.reihen-liste li { display: grid; gap: 20px 40px; align-items: start; }
@media (min-width: 760px) { .reihen-liste li { grid-template-columns: 280px 1fr; } .reihen-liste li:nth-child(even) { grid-template-columns: 1fr 280px; } .reihen-liste li:nth-child(even) figure { order: 2; } }
.reihen-liste img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.reihen-liste .reihe-titel { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: .2em; }
.reihen-liste .unter { margin-bottom: .8em; }

/* Preise als Behandlungskarte */
.preise { padding: clamp(40px, 6vw, 72px) 0 !important; border-top: 1px solid var(--linie); }
.preis-raster { display: grid; gap: 16px 64px; }
@media (min-width: 900px) { .preis-raster { grid-template-columns: 300px 1fr; } }
.preis-kopf h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .2em; }
.preis-kopf .unter { margin-bottom: 0; letter-spacing: .08em; text-transform: none; font-size: .9375rem; }
.preisliste { list-style: none; margin: 0; padding: 0; }
.preisliste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 24px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.preisliste li:first-child { padding-top: 4px; }
.preisliste .name { font-weight: 500; font-size: 1.0625rem; }
.preisliste .betrag { font: 500 1.2rem/1.3 var(--serif); color: var(--gold-dunkel); white-space: nowrap; text-align: right; }
.preisliste .beschr { grid-column: 1 / -1; color: var(--leise); font-size: .9375rem; line-height: 1.6; }
.preisliste li.ohne-text .name { font-weight: 400; color: var(--leise); }
.preis-nach { margin-top: 1.2em; color: var(--leise); font-size: .9375rem; }

/* Fragen */
.fragen-liste { border-top: 1px solid var(--linie); max-width: 52em; }
.fragen-liste details { border-bottom: 1px solid var(--linie); }
.fragen-liste summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.plus { flex: 0 0 22px; height: 22px; position: relative; }
.plus::before, .plus::after { content: ''; position: absolute; left: 3px; right: 3px; top: 10px; border-top: 1.5px solid var(--gold-dunkel); transition: transform .2s; }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }
.antwort { padding: 0 0 20px; max-width: 42em; }

/* Neuigkeiten */
.beitrag { border-top: 1px solid var(--linie); padding: clamp(48px, 7vw, 88px) 0 !important; }
.beitrag:first-child { border-top: 0; }
.datum { font: 500 .8125rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dunkel); }
.beitrag .foto img { aspect-ratio: auto; max-height: 520px; object-fit: contain; background: var(--licht); }

/* Galerie */
.galerie-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .galerie-raster { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.galerie-raster img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Kontaktwege */
.kontakt-kurz { background: var(--licht); }
.preise + .kontakt-kurz { margin-top: var(--abstand); }
.wege { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(138,90,14,.3); }
.wege a { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(138,90,14,.3); text-decoration: none; color: var(--tinte); }
.wege a svg { flex: 0 0 auto; margin-top: 4px; color: var(--gold-dunkel); }
.wege b { display: block; font: 500 .75rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dunkel); }
.wege a:hover { color: var(--moos); }

/* Standort */
.standort-karte { background: var(--moos); color: #e9eee9; padding: clamp(40px, 6vw, 72px); text-align: center; border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; max-width: 440px; width: 100%; justify-self: center; }
.standort-karte p:last-child { max-width: 15em; margin: 0 auto; }
.standort-karte .strasse-nr { font: 400 clamp(4rem, 10vw, 7rem)/1 var(--serif); color: var(--gold); margin-bottom: .25em; }
.standort-karte p { margin: 0; font: 400 1.15rem/1.4 var(--serif); }

/* Seitenkopf der Unterseiten */
.seitenkopf { background: var(--moos); color: #fff; overflow: hidden; }
.seitenkopf-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: clamp(44px, 7vw, 88px); padding-bottom: clamp(44px, 7vw, 88px); position: relative; }
.seitenkopf h1 { color: #fff; margin: 0; font-size: clamp(2.2rem, 5.4vw, 4rem); }
.seitenkopf .lead { margin: .8em 0 0; color: #dfe7df; font-size: 1.15rem; max-width: 36em; }
.seitenkopf-ring { width: clamp(120px, 18vw, 220px); flex: 0 0 auto; opacity: .95; }
@media (max-width: 600px) { .seitenkopf-ring { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 150px; opacity: .25; } }

/* Rechtstexte */
.recht h2 { font-size: 1.35rem; margin-top: 1.8em; }
.recht h2:first-child { margin-top: 0; }
.smliste { columns: 2 220px; }

/* Formular */
.kontakt { background: var(--weiss); }
.kontakt .zwei { align-items: start; }
.adresse { font-size: 1.05rem; }
.kontaktform { background: var(--licht); padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .kontaktform { grid-template-columns: 1fr 1fr; } }
.kontaktform .ganz, .form-titel { grid-column: 1 / -1; }
.form-titel { font-size: 1.5rem; margin: 0; }
.feld label, .legende { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: 6px; }
.feld input, .feld textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #cdbf9f; background: #fff; font: inherit; color: var(--tinte); border-radius: 0; }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--gold-dunkel); outline-offset: 0; border-color: var(--gold-dunkel); }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #a3271b; }
fieldset { border: 0; padding: 0; margin: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #cdbf9f; background: #fff; border-radius: 999px; cursor: pointer; font-size: .9375rem; min-height: 44px; }
.wahl input { accent-color: var(--moos); }
.feld .zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; font-weight: 400; }
.zustimmung input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--moos); flex: 0 0 auto; }
.feld.haken.ungueltig .zustimmung { color: #a3271b; }
.honig { position: absolute; left: -9999px; }
.form-status { margin: 0; min-height: 1.4em; }
.form-status.fehler { color: #a3271b; }
.formular-erfolg { grid-column: 1 / -1; font-size: 1.15rem; }

/* Fuß */
.fuss { background: var(--moos-tief); color: #d5ddd5; padding: clamp(56px, 8vw, 96px) 0 0; margin-top: 0; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { color: var(--gold); }
.fuss h2 { font: 500 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2em; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { padding: 4px 0; }
.fuss-raster { display: grid; gap: 40px; }
@media (min-width: 900px) { .fuss-raster { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.fuss-marke img { width: 150px; }
.fuss-leitsatz { font: 400 1.3rem/1.3 var(--serif); color: #fff; margin-top: 18px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 28px; padding-bottom: 28px; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.14); font-size: .875rem; }

/* Handyleiste */
.leiste { display: none; }
@media (max-width: 760px) {
  .leiste { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.98); border-top: 1px solid var(--linie); transform: translateY(110%); transition: transform .25s; }
  .leiste.da { transform: none; }
  .leiste a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 999px; color: var(--moos); text-decoration: none; font-weight: 500; font-size: .9375rem; }
  .leiste a.leiste-haupt { background: var(--moos); color: #fff; border-color: var(--moos); }
  body { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kopf, .leiste, .fuss, .hinweisleiste { display: none; } }

/* Fußpflege als eigener Block (Startseite) */
.fussblock { background: var(--licht); }
.fuss-raster2 { display: grid; gap: 32px 72px; align-items: center; }
@media (min-width: 900px) { .fuss-raster2 { grid-template-columns: 1fr 1.1fr; } }
.fuss-kopf h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--moos); margin: .1em 0 .3em; }
.fuss-unter { color: var(--leise); max-width: 30em; }
.fuss-preise { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(138,90,14,.3); }
.fuss-preise li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(138,90,14,.3); transition: padding .3s ease, background-color .3s ease; }
.fuss-preise li:hover { padding-left: 10px; padding-right: 10px; background: rgba(255,255,255,.6); }
.fuss-preise span { font-weight: 500; }
.fuss-preise b { font: 500 clamp(1.4rem, 2.6vw, 1.9rem)/1 var(--serif); color: var(--gold-dunkel); white-space: nowrap; }

/* Geschäftspartner: Foto mit langsamem Ken-Burns, Video-Platz */
.partner .foto.hoch { overflow: hidden; }
.partner .foto.hoch img { animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 50% 30%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translateY(-1.5%); } }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--moos-tief); overflow: hidden; width: 100%; }
.video img, .video video, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border: 0; }
.video-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(35,56,41,.35); border: 0; color: #fff; font: 500 1rem var(--sans); cursor: pointer; transition: background .3s; }
.video-start:hover { background: rgba(35,56,41,.15); }
.play { width: 76px; height: 76px; border-radius: 50%; background: var(--gold); position: relative; transition: transform .3s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 0 0 rgba(238,171,64,.5); animation: puls 2.6s ease-out infinite; }
.play::after { content: ''; position: absolute; left: 31px; top: 24px; border-left: 20px solid var(--moos-tief); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.video-start:hover .play { transform: scale(1.08); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(238,171,64,.45); } 80%, 100% { box-shadow: 0 0 0 22px rgba(238,171,64,0); } }
.video-hinweis { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: .75rem; color: #e9eee9; }

/* Bewegung: Einblenden beim Scrollen, Hero-Auftritt, Goldring, Schweben, Hover */
.js .zeige { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--v, 0ms); }
.js .zeige.da { opacity: 1; transform: none; }
.hero-text > * { animation: auf .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-text > :nth-child(2) { animation-delay: .08s; } .hero-text > :nth-child(3) { animation-delay: .18s; } .hero-text > :nth-child(4) { animation-delay: .28s; }
@keyframes auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-zeichen { position: relative; }
.hero-zeichen img { position: relative; z-index: 1; animation: erscheinen 1.4s cubic-bezier(.2,.7,.2,1) both, schweben 7s ease-in-out 1.4s infinite alternate; }
@keyframes erscheinen { from { opacity: 0; transform: scale(.9) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes schweben { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.hero-ring { position: absolute; inset: -6%; width: 112%; height: 112%; pointer-events: none; }
.hero-ring .zug { fill: none; stroke: var(--gold); stroke-width: .5; stroke-dasharray: 316; stroke-dashoffset: 316; opacity: .55; animation: zeichnen 2.4s cubic-bezier(.6,.1,.2,1) .4s forwards; }
.hero-ring .punkte { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 0 9; opacity: .5; transform-origin: 50px 50px; animation: drehen 80s linear infinite; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes drehen { to { transform: rotate(360deg); } }
.parallax { will-change: transform; }
.knopf svg, .leise svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.knopf:hover svg, .leise:hover svg { transform: translateX(4px); }
.achse-liste .ziffer { transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s; }
.achse-liste a:hover .ziffer { transform: translateX(6px) scale(1.06); color: var(--gold-dunkel); }
.portrait img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.portrait:hover img { transform: scale(1.03); }
.portrait::after { transition: inset .6s cubic-bezier(.2,.7,.2,1), border-color .6s; }
.portrait:hover::after { inset: -22px; border-color: var(--gold-dunkel); }
.seitenkopf-ring { animation: erscheinen 1.2s cubic-bezier(.2,.7,.2,1) both; }
.seitenkopf h1 { animation: auf .9s cubic-bezier(.2,.7,.2,1) both; }
.seitenkopf .lead { animation: auf .9s cubic-bezier(.2,.7,.2,1) .12s both; }
@media (prefers-reduced-motion: reduce) {
  .js .zeige { opacity: 1; transform: none; }
  .hero-text > *, .hero-zeichen img, .seitenkopf-ring, .seitenkopf h1, .seitenkopf .lead, .partner .foto.hoch img, .play { animation: none !important; }
  .hero-ring .zug { animation: none; stroke-dashoffset: 0; } .hero-ring .punkte { animation: none; }
  .parallax { transform: none !important; }
}