/* Bewegungskultur Lüers · statischer Nachbau im bestehenden Design (DESIGN.md) */
@font-face { font-family: "Bitter"; src: url("../fonts/bitter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
:root { --bg-primary: #FAF6EF; --bg-secondary: #F0DDC1; --bg-cta: #2D3C27; --bg-dark: #11160D; --text-primary: #2A2318; --text-secondary: #6E5F49; --text-label: #8A7A62; --text-inverse: #FAF6EF; --text-inverse-secondary: #E6F4E8; --interactive: #48643E; --interactive-hover: #3C5337; --interactive-text: #E6F4E8; --interactive-inverse: #E6F4E8; --interactive-inverse-hover: #B4D8B6; --border: #8A7A62; --border-green: #8FAE84; --f-display: "Bitter", Georgia, serif; --f-body: "Figtree", system-ui, sans-serif; --fs-body: 1.125rem; --lh-body: 1.5; --fs-h3: clamp(1.75rem, 2.6vw, 2.25rem); --radius: 16px; --container: 1120px; --gutter: clamp(20px, 5vw, 40px); --section-y: clamp(56px, 10vw, 128px); --hero-min-h: 900px; --ease: cubic-bezier(.16, 1, .3, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -1px; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
::selection { background: var(--bg-secondary); color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--interactive-inverse); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); box-sizing: content-box; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--interactive); color: var(--interactive-text); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-family: var(--f-body); font-size: .875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 12px; }
.on-dark .eyebrow { color: var(--bg-secondary); }
/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font: 500 .875rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; border: 0; background: var(--interactive); color: var(--interactive-text); }
.btn-inverse { background: var(--bg-primary); color: var(--text-primary); }
/* Outline-Buttons wie button-secondary auf bkl.training */
.btn-ghost { color: var(--interactive); border: 1.5px solid var(--interactive); }
.btn-ghost-inverse { background: transparent; color: var(--bg-secondary); border: 1.5px solid var(--bg-secondary); }
.btn-block { width: 100%; }
.text-link { color: var(--interactive); font-weight: 500; }
.text-link:hover { color: var(--interactive-hover); }
/* Kopf */
.site-head { position: sticky; top: 0; z-index: 10; background: var(--bg-primary); border-bottom: 1px solid transparent; }
.site-head.is-scrolled { border-bottom-color: rgba(138,122,98,.35); }
.site-head .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.wordmark { font-family: var(--f-display); font-weight: 700; font-size: 1.375rem; color: var(--text-primary); text-decoration: none; letter-spacing: -.3px; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.nav a { color: var(--text-primary); text-decoration: none; font-size: .9375rem; text-underline-offset: .35em; }
.nav a:hover { color: var(--interactive-hover); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--border-green); text-decoration-thickness: 2px; }
.head-right { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.menu-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 10px 4px; background: none; border: 0; cursor: pointer; font: 500 .9375rem var(--f-body); color: var(--text-primary); }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 1080px) {
  .site-head .container { min-height: 68px; }
  .wordmark { font-size: 1.2rem; }
  .menu-toggle { display: inline-flex; }
  .head-right { gap: 8px; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-primary); border-bottom: 1px solid rgba(138,122,98,.35); padding: 8px var(--gutter) 20px; }
  .nav.is-open { display: flex; }
  .nav a { font-size: 1.125rem; padding: 14px 0; border-bottom: 1px solid rgba(138,122,98,.2); }
}
/* Hero */
.hero { position: relative; display: flex; align-items: center; color: var(--text-inverse); overflow: hidden; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42,35,24,.5) 0%, rgba(42,35,24,.28) 45%, rgba(42,35,24,.1) 75%); }
.hero .container { position: relative; z-index: 1; width: 100%; padding-top: 64px; padding-bottom: 64px; }
.hero .eyebrow { color: var(--bg-secondary); }
.hero h1 { color: var(--text-inverse); max-width: 11ch; }
.hero .lead { max-width: 34ch; margin: 22px 0 32px; color: var(--text-inverse); }
@media (max-width: 700px) {
  .hero { align-items: flex-end; min-height: 88vh; }
  .hero::after { background: linear-gradient(0deg, rgba(42,35,24,.62) 0%, rgba(42,35,24,.35) 55%, rgba(42,35,24,.12) 100%); }
  .hero picture img { object-position: 62% 50%; }
}
/* Abschnitte */
.section { padding: var(--section-y) 0; }
/* Zwei helle Abschnitte direkt nacheinander: Abstand nicht doppelt */
.section:not(.section-sand):not(.section-dark):not(.section-cta) + .section:not(.section-sand):not(.section-dark):not(.section-cta), .pano-hero + .section { padding-top: calc(var(--section-y) / 2); }
.section-sand { background: var(--bg-secondary); }
.section-dark { background: var(--bg-dark); color: var(--text-inverse); }
.section-cta { background: var(--bg-cta); color: var(--text-inverse); }
.section h2 { font-size: var(--fs-h2); line-height: 1.05; }
.section-dark h2, .section-cta h2 { color: var(--text-inverse); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 112px); align-items: center; }
.split-photo img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }
.split-text h2 { margin-bottom: 28px; }
.split-text p { max-width: 46ch; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-photo { max-width: 520px; }
}
/* Angebot */
.offer { display: grid; grid-template-columns: minmax(0, 448px) minmax(0, 1fr); gap: clamp(40px, 8vw, 112px); align-items: start; }
.offer h2 { margin-bottom: 48px; }
.price-card { background: var(--bg-primary); border: 1.5px solid var(--border-green); border-radius: var(--radius); padding: 24px 24px 28px; }
.price-card h3 { margin-bottom: 14px; }
.price-card p { font-size: 1.0625rem; }
.price { text-align: center; margin: 36px 0 22px; }
.price .amount { font-family: var(--f-display); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -1px; }
.price .per { font-weight: 600; font-size: 1.5rem; color: var(--text-label); }
.price .terms { display: block; margin-top: 6px; font-size: .9375rem; font-weight: 500; color: var(--text-secondary); }
.free { text-align: center; font-size: .9375rem !important; font-weight: 500; color: var(--text-secondary); margin: 14px 0 0; }
.benefits { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1.5px solid var(--border); }
.benefits li { display: flex; align-items: center; gap: 14px; padding: 9px 0; color: var(--text-secondary); }
.benefits li::before {
  content: ""; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348643E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.offer-photo img { width: 100%; border-radius: var(--radius); }
@media (max-width: 860px) {
  .offer { grid-template-columns: 1fr; }
  .offer-photo { order: -1; max-width: 520px; }
  .offer h2 { margin-bottom: 32px; }
}
/* So startest du: Treppe wie live */
.steps-head { margin-bottom: 48px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; }
.step { position: relative; }
.step .card { background: var(--bg-primary); border: 1.5px solid var(--border-green); border-radius: var(--radius); padding: 22px 24px 26px; display: flex; flex-direction: column; min-height: 485px; }
.step:nth-child(2) .card { min-height: 485px; margin-bottom: 75px; }
.step:nth-child(3) .card { min-height: 485px; margin-bottom: 150px; }
.step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-secondary); border-radius: 0 0 var(--radius) var(--radius); z-index: -1; }
.step:nth-child(1)::after { height: 25px; }
.step:nth-child(2)::after { height: 100px; }
.step:nth-child(3)::after { height: 175px; }
.steps { position: relative; z-index: 0; }
.step .num { font-family: var(--f-body); font-weight: 700; font-size: 5rem; line-height: .75; color: var(--text-label); margin: 0; }
.step h3 { margin-top: auto; font-size: var(--fs-h3); line-height: 1.05; }
.step .sub { font-size: .875rem; font-weight: 500; color: var(--text-secondary); margin: 6px 0 18px; }
.step p:last-child { margin: 0; font-size: 1.0625rem; }
.steps-cta { margin-top: 48px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step .card, .step:nth-child(2) .card, .step:nth-child(3) .card { min-height: 0; margin: 0; }
  .step::after { display: none; }
  .step .num { font-size: 3.5rem; margin-bottom: 18px; }
}
/* Trainingshaus */
.house-photo img { width: 100%; object-fit: cover; object-position: 50% 45%; }
.house-text h2 { margin-bottom: 26px; }
.house-text p { color: var(--text-inverse); max-width: 34ch; margin-bottom: 0; }
/* Fragen: wie das Akkordeon auf bkl.training/angebot */
.faq-split { display: grid; grid-template-columns: minmax(0, 448px) minmax(0, 560px); justify-content: space-between; gap: 48px; align-items: start; }
.faq-intro h2 { margin-bottom: 16px; }
.faq-item { border-top: 1.5px solid var(--text-primary); }
.faq-item:last-child { border-bottom: 1.5px solid var(--text-primary); }
.faq-item h3 { font: inherit; letter-spacing: 0; }
.faq-trigger { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left; font: 600 1.125rem/1.3 var(--f-body); color: var(--text-primary); transition: opacity .2s var(--ease); }
@media (hover: hover) {
  .faq-trigger:hover { opacity: .7; }
}
.faq-chevron { flex: 0 0 20px; height: 20px; transition: transform .3s var(--ease); }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-body-inner { overflow: hidden; }
.faq-body p { margin: 0; padding-bottom: 22px; max-width: 65ch; }
@media (max-width: 860px) {
  .faq-split { grid-template-columns: 1fr; gap: 32px; }
}
/* CTA */
.cta { text-align: center; }
.cta h2 { margin-bottom: 18px; }
.cta p { color: var(--text-inverse); max-width: 40ch; margin: 0 auto 32px; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; }
/* Bewertungen */
.reviews-head { margin-bottom: 40px; }
/* Fuß */
.site-foot { background: var(--bg-dark); color: var(--bg-secondary); padding: clamp(80px, 9vw, 112px) 0 40px; }
.site-foot a { color: var(--bg-secondary); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-foot address { font-style: normal; line-height: 1.7; }
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; align-items: center; margin-bottom: clamp(48px, 6vw, 72px); }
.foot-mark { grid-column: 1 / 3; font-family: var(--f-display); font-weight: 700; margin: 0; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-h { font-weight: 700; text-transform: uppercase; margin: 0 0 16px; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-wa { justify-self: start; display: inline-flex; align-items: center; gap: 14px; padding: 20px 26px; border-radius: 999px; background: var(--bg-secondary); color: var(--text-primary) !important; font-weight: 600; }
.foot-wa:hover { text-decoration: none !important; }
.foot-wa svg { width: 22px; height: 22px; flex: 0 0 auto; }
.foot-wa svg:last-child { width: 18px; height: 18px; }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: clamp(56px, 7vw, 80px) 0 0; color: #A8977C; }
.foot-legal span:last-child { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-legal a { color: #A8977C; }
@media (max-width: 860px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-cols > div:last-child { grid-column: 1 / -1; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-mark { grid-column: auto; }
}
@media (max-width: 560px) {
  .foot-cols { grid-template-columns: 1fr; gap: 32px; }
  .foot-legal { flex-direction: column; }
}
/* Unterseiten-Kopf (Probetraining, Rechtliches) */
.page-head { padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 48px); }
.page-head h1 { margin-bottom: 18px; }
.page-head p { max-width: 52ch; color: var(--text-secondary); }
.prose { max-width: 70ch; }
/* ---------- Unterseiten ---------- */
.lead-text { font-size: 1.125rem; max-width: 48ch; }
.label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 12px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; margin-top: 32px; }
/* Foto-Band über dunkler Fläche (Über mich, Gruppentraining) */
.photo-band img { width: 100%; height: clamp(300px, 38vw, 560px); object-fit: cover; }
.band-text { max-width: 560px; }
.band-text h2 { margin-bottom: 22px; }
.band-text p { color: var(--text-inverse); }
/* Über mich: Mein Weg */
.story { display: grid; grid-template-columns: minmax(0, 448px) minmax(0, 1fr); gap: clamp(40px, 8vw, 112px); align-items: start; }
.story-photo { top: 32px; }
.story-photo img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.story-text { max-width: 52ch; }
.story-text h2 { margin-bottom: 28px; }
.statement { font-family: var(--f-display); font-weight: 700; color: var(--text-label); margin: 40px 0; text-wrap: balance; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story-photo { position: static; max-width: 520px; }
}
/* Über mich: Wie ich arbeite */
.principles { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.principle { background: var(--bg-primary); border: 1.5px solid var(--border-green); border-radius: var(--radius); padding: 64px 28px 36px; display: flex; flex-direction: column; }
.principle .icon { width: 115px; height: 115px; margin: 0 auto 64px; }
.principle .icon svg { width: 100%; height: 100%; }
.principle h3 { margin-bottom: 12px; }
.principle p { margin: 0; }
@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; }
  .principle { padding: 40px 24px 32px; }
  .principle .icon { width: 86px; height: 86px; margin: 8px 0 36px; }
}
/* Über mich: Qualifikationen (wie das Raster auf bkl.training) */
.qual-head { max-width: 40ch; margin-bottom: 48px; }
.qual-head h2 { margin-bottom: 16px; }
.qual-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.qual-card { position: relative; background: var(--bg-secondary); border-radius: var(--radius); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.qual-card img { max-width: 62%; max-height: 62%; object-fit: contain; filter: grayscale(100%); mix-blend-mode: multiply; }
.qual-overlay { position: absolute; inset: 0; background: rgba(250, 246, 239, .94); border: 1.5px solid var(--border-green); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; opacity: 0; transform: translateY(4px); transition: opacity .25s cubic-bezier(.16, 1, .3, 1) .05s, transform .3s cubic-bezier(.16, 1, .3, 1) .05s; }
.qual-overlay .name { font-family: var(--f-display); font-weight: 700; margin: 0; }
.qual-overlay .desc { line-height: 1.5; margin: 0; }
.qual-card:focus-visible { outline-offset: 3px; }
.qual-card:hover .qual-overlay, .qual-card:focus-visible .qual-overlay, .qual-card.is-open .qual-overlay { opacity: 1; transform: none; }
@media (max-width: 768px) {
  .qual-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .qual-overlay .desc { font-size: .9375rem; }
}
/* Abschluss mit rundem Portrait (Über mich, Angebot) */
.cta-portrait { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); align-items: center; max-width: 820px; }
.cta-portrait img { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; }
.cta-portrait h2 { margin-bottom: 16px; }
.cta-portrait p { color: var(--text-inverse); max-width: 44ch; }
.cta-portrait .btn-row { margin-top: 24px; }
@media (max-width: 700px) {
  .cta-portrait { grid-template-columns: 1fr; }
  .cta-portrait img { width: 160px; height: 160px; }
}
/* Angebot */
.split-hero { padding: clamp(48px, 7vw, 88px) 0 var(--section-y); }
.split-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, 50%)); gap: clamp(40px, 6vw, 80px); align-items: center; }
.split-hero h1 { font-size: var(--fs-h1); margin-bottom: 22px; }
.split-hero img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) {
  .split-hero .container { grid-template-columns: 1fr; }
  .split-hero .photo { order: -1; max-width: 520px; }
}
.statement-band { text-align: center; padding: clamp(72px, 9vw, 112px) 0; }
.statement-band p.big { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.625rem, 2.6vw, 2.25rem); max-width: 24ch; margin: 0 auto 12px; }
.statement-band p.small { font-weight: 600; margin: 0; }
.facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.facts li { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-weight: 500; }
.facts svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--text-label); }
.price-band { display: flex; justify-content: center; }
.price-band .price-card { width: 100%; }
.group-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.group-row .note { font-size: .9375rem; font-weight: 500; }
/* Kontakt: Formular */
.form-wrap { width: 100%; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; font: 400 1rem/1.5 var(--f-body); color: var(--text-primary); background: var(--bg-primary); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; }
.field-error { display: none; margin: 6px 0 0; color: #9A3B2E; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea { border-color: #9A3B2E; }
.hp { position: absolute; left: -9999px; }
#form-wrap.is-sent form { display: none; }
#form-success h3 { font-size: 1.5rem; margin-bottom: 8px; }
.form-status.is-error { color: #9A3B2E; }
.split-photo.wide img { aspect-ratio: 3 / 2; }
/* Korrekturen nach erster Sichtprüfung */
.container.band-text { max-width: var(--container); }
.band-text > * { max-width: 560px; }
.price-card { color: var(--text-primary); }
/* Bausteine für So startest du, Trainingshaus, Kontakt (aus denen der anderen Seiten abgeleitet) */
.split-reverse .split-photo { order: 2; }
@media (max-width: 860px) {
  .split-reverse .split-photo { order: 0; }
}
.offer > div > p { max-width: 46ch; }
.info-list { margin: 28px 0 0; }
.info-list div { border-top: 1.5px solid var(--text-primary); padding: 16px 0; }
.info-list div:last-child { border-bottom: 1.5px solid var(--text-primary); }
.info-list dt { font-weight: 600; margin-bottom: 4px; }
.info-list dd { margin: 0; color: var(--text-secondary); }
.info-list a { color: inherit; }
.map-box { background: var(--bg-secondary); border: 0; }
.booking-title { margin-bottom: 28px; }
.map-box { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-box .map-hint p { margin: 16px 0 0; }
.section-sand .map-box { background: var(--bg-primary); border: 1.5px solid var(--border-green); }
/* So startest du: Einstieg im Panorama-Aufbau */
.pano-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 8vw, 96px); text-align: center; }
.pano-hero h1 { margin-bottom: 20px; }
.pano-hero .lead-text { margin: 0 auto; max-width: 40ch; }
.pano-img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 55%; border-radius: var(--radius); }
.pano-facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px; color: var(--text-secondary); font-weight: 500; }
.pano-facts li { display: flex; align-items: center; gap: 10px; }
.pano-facts svg { width: 20px; height: 20px; color: var(--text-label); }
@media (max-width: 700px) {
  .pano-hero { text-align: left; }
  .pano-hero .lead-text { margin-left: 0; }
  .pano-img img { aspect-ratio: 4 / 3; }
  .pano-facts { flex-direction: column; justify-content: flex-start; }
}
/* So startest du: Der Weg senkrecht, Kreise füllen sich beim Scrollen */
.weg-v { list-style: none; margin: 0; padding: 0; position: relative; }
.weg-v::before { content: ""; position: absolute; left: 15px; top: 16px; width: 1.5px; height: var(--weg-total, 0px); background: rgba(138,122,98,.35); }
.weg-v::after { content: ""; position: absolute; left: 15px; top: 16px; width: 1.5px; height: var(--weg-p, 0px); background: var(--interactive); }
.weg-v li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 24px; padding-bottom: 56px; }
.weg-v li:last-of-type { padding-bottom: 0; }
.weg-v-dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--interactive); background: var(--bg-secondary); color: var(--interactive); font-size: .875rem; font-weight: 600; transition: background-color .35s var(--ease), color .35s var(--ease); }
.weg-v li.is-done .weg-v-dot { background: var(--interactive); color: var(--interactive-text); }
.weg-v h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.15; margin: 2px 0 10px; }
.weg-v p { margin: 0; max-width: 46ch; }
@media (max-width: 860px) {
  .weg-v li { gap: 18px; padding-bottom: 40px; }
}
/* Trainingshaus: Vollbild-Einstieg */
.full-hero { position: relative; min-height: calc(100svh - 80px); display: flex; align-items: flex-end; color: var(--text-inverse); overflow: hidden; }
.full-hero picture, .full-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.full-hero::after { content: ""; position: absolute; inset: 0; }
.full-hero .container { position: relative; z-index: 1; width: 100%; padding-top: 96px; padding-bottom: clamp(40px, 6vw, 72px); }
.full-hero h1 { color: var(--text-inverse); margin-bottom: 18px; }
.full-hero p { max-width: 44ch; color: var(--text-inverse); }
@media (max-width: 1080px) {
  .full-hero { min-height: calc(100svh - 68px); }
}
/* Kontakt: Drei Wege */
.ways-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 72px); }
.ways-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 88px); align-items: center; }
.ways-hero h1 { margin-bottom: 20px; }
.ways-note { font-size: .9375rem; color: var(--text-secondary); margin-top: 16px; }
.ways-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.way { display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--radius); border: 1.5px solid var(--border-green); background: var(--bg-primary); color: var(--text-primary); text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.way:hover { background: #F5EEE2; border-color: var(--interactive); }
.way svg { width: 24px; height: 24px; color: var(--interactive); }
.way svg:last-child { width: 20px; height: 20px; color: var(--text-label); }
.way b { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.way small { display: block; font-size: .9375rem; color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.way.is-main { background: var(--bg-cta); border-color: var(--bg-cta); color: var(--text-inverse); padding: 30px 24px; }
.way.is-main:hover { background: #26331F; }
.way.is-main svg, .way.is-main svg:last-child { color: var(--interactive-inverse); }
.way.is-main small { color: var(--text-inverse-secondary); }
@media (max-width: 860px) {
  .ways-hero .container { grid-template-columns: 1fr; }
}
/* Kontakt: Karte im Panorama-Format */
.map-box.map-pano { aspect-ratio: 21 / 9; min-height: 0; background: var(--bg-secondary); }
.map-caption { margin: 20px 0 0; max-width: 70ch; }
@media (max-width: 700px) {
  .map-box.map-pano { aspect-ratio: 4 / 5; }
}
.pano-img { display: block; }
.pano-hero .lead-text + .pano-img { margin-top: clamp(40px, 5vw, 64px); }
/* So startest du: Probemonat links, Kalender rechts */
.offer:has(.month-booking) { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.month-booking .label { margin-bottom: 12px; }
@media (max-width: 860px) {
  .offer:has(.month-booking) { grid-template-columns: 1fr; }
}
/* Buttons statt Textlinks */
.house-text .btn-row, .story-text .btn-row, .split-text .btn-row { margin-top: 28px; }
/* Kopfzeile: verschwindet beim Runterscrollen, kommt beim Hochscrollen in voller Höhe zurück */
.site-head { transition: transform .35s var(--ease), border-color .2s var(--ease); }
.site-head.is-hidden { transform: translateY(-100%); }
#termin, #h-story, #fragen, #anfahrt { scroll-margin-top: 80px; }
/* So startest du: Der Weg im Wechsel links/rechts, Farbe breitet sich beim Scrollen aus */
.weg-z-title { text-align: center; }
.weg-z { max-width: 1000px; margin: 0 auto; }
.weg-z::before, .weg-z::after { left: 50%; transform: translateX(-50%); top: var(--weg-top, 16px); width: 2px; }
.weg-z::before { background: rgba(138,122,98,.28); }
.weg-z li { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; }
.weg-z .weg-v-dot { grid-column: 2; grid-row: 1; justify-self: center; border-color: rgba(138,122,98,.45); color: var(--text-label); transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.weg-z li.is-done .weg-v-dot { border-color: var(--interactive); }
.weg-card { grid-row: 1; position: relative; background: var(--bg-primary); border-radius: var(--radius); padding: 24px 28px 26px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.weg-z li:nth-child(odd) .weg-card { grid-column: 1; }
.weg-z li:nth-child(even) .weg-card { grid-column: 3; }
.weg-card::before { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; background: inherit; transform: translateY(-50%) rotate(45deg); }
.weg-z li:nth-child(odd) .weg-card::before { right: -6px; }
.weg-z li:nth-child(even) .weg-card::before { left: -6px; }
.weg-z li.is-done .weg-card { opacity: 1; transform: none; }
.weg-k { font-size: .75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary) !important; margin: 0 0 6px !important; }
.weg-z h3 { margin: 0 0 8px; }
.weg-z p { max-width: none; }
@media (max-width: 760px) {
  .weg-z::before, .weg-z::after { transform: none; }
  .weg-z li { column-gap: 18px; }
  .weg-z li + li { margin-top: 20px; }
  .weg-z .weg-v-dot { grid-column: 1; }
  .weg-z li:nth-child(odd) .weg-card, .weg-z li:nth-child(even) .weg-card { grid-column: 2; }
  .weg-z li:nth-child(odd) .weg-card::before { right: auto; left: -6px; }
  .weg-card { padding: 20px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .weg-card { opacity: 1; transform: none; }
}
/* Der Weg: Kreise ohne Zahlen, Karten ohne Spitze, Oberkante Karte = Oberkante Kreis */
.weg-card::before { display: none; }
.weg-z .weg-v-dot { width: 24px; height: 24px; margin-top: 0; }
@media (max-width: 760px) {
  .weg-z::before, .weg-z::after { left: 11px; }
  .weg-z li { grid-template-columns: 24px minmax(0, 1fr); }
}
.weg-card { transform: none; }
.weg-z li.is-done .weg-v-dot { transform: none; }
/* Der Weg: gleiche Abstände zwischen den Kreisen, Karten mittig neben dem Kreis */
.weg-z { padding: calc(var(--weg-pad, 60px)) 0; }
.weg-z li, .weg-z li + li { height: var(--weg-pitch, 160px); margin-top: 0; align-items: center; }
.weg-z li { padding: 0 !important; box-sizing: border-box; min-height: 0; }
.weg-z .weg-card { align-self: center; }
.weg-z li { grid-template-rows: minmax(0, 1fr); }
.weg-z-title { margin-bottom: 8px; }
@media (max-width: 760px) {
  /* Handy: Karten untereinander in ihrer eigenen Höhe, kein fester Raster-Abstand */
  .weg-z { padding: 16px 0 0; }
  .weg-z li, .weg-z li + li { height: auto; }
  .weg-z li + li { margin-top: 20px; }
}
/* So startest du: Einstieg gespiegelt zum Angebot (Bild links, Text rechts) */
.split-hero-flip .container { grid-template-columns: minmax(0, min(560px, 50%)) minmax(0, 1fr); } /* Foto höchstens halbe Breite, sonst bleiben bei 860 bis 1000 px nur rund 200 px für den Text (16.10.2026) */
.split-hero-flip .facts { margin-top: 32px; }
@media (max-width: 860px) {
  .split-hero-flip .container { grid-template-columns: 1fr; }
}
/* So startest du: Einheit mit Panorama statt Zweispalter */
.einheit-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 56px); }
.einheit-kopf h2 { margin: 0; }
.einheit-kopf p { max-width: 46ch; }
.einheit-teile { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.einheit-teile li { background: var(--bg-primary); border: 1.5px solid var(--border-green); border-radius: var(--radius); padding: 24px 28px 28px; }
.einheit-teile h3 { margin: 0 0 8px; }
.einheit-teile .weg-k { font-family: var(--f-body); font-weight: 700; font-size: 5rem !important; line-height: .75; letter-spacing: 0; text-transform: none; color: var(--text-label) !important; margin: 0 0 32px !important; }
.einheit-teile p:not(.weg-k) { color: var(--text-secondary); margin: 0; max-width: none; }
@media (max-width: 860px) {
  .einheit-kopf, .einheit-teile { grid-template-columns: 1fr; }
  .einheit-teile { gap: 16px; }
}
/* So startest du: Probetraining als Ablauf mit Hochformat-Foto */
.ablauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(40px, 8vw, 112px); align-items: start; }
.ablauf-text h2 { margin-bottom: 28px; }
.ablauf-text > p { max-width: 46ch; }
.ablauf-liste { margin: 32px 0 0; }
.ablauf-liste { display: grid; gap: 24px; }
.ablauf-liste > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; }
.ablauf-liste dt { font-family: var(--f-display); font-weight: 700; }
.ablauf-liste dd { margin: 0; }
.ablauf-photo { top: 96px; }
.ablauf-photo img { width: 100%; border-radius: var(--radius); aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 860px) {
  .ablauf { grid-template-columns: 1fr; }
  .ablauf-photo { position: static; order: -1; max-width: 420px; }
  .ablauf-photo img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .ablauf-liste > div { grid-template-columns: 1fr; gap: 6px; }
}
/* So startest du: Probemonat mit Kalender als grüner Abschluss */
.section-cta .month-booking .label { color: var(--bg-secondary); }
/* Angebot: Abschluss zweispaltig, links Porträt und Einladung, rechts schmaler Kalender */
.cta-booking { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(40px, 8vw, 112px); align-items: start; }
.cta-booking-intro img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin-bottom: clamp(28px, 3vw, 40px); }
.cta-booking-intro h2 { margin-bottom: 16px; }
.cta-booking-intro p { color: var(--text-inverse); max-width: 40ch; }
.cta-booking-intro .btn-row { margin-top: 24px; }
.cta-booking .booking-title { color: var(--text-inverse); }
@media (max-width: 860px) {
  .cta-booking { grid-template-columns: 1fr; }
  .cta-booking-intro img { width: 160px; height: 160px; }
}
/* Trainingshaus: Anfahrt als vier Kacheln, darunter Karte im Panorama, ohne Linien */
.anfahrt-title { margin-bottom: clamp(32px, 4vw, 48px); }
.info-tiles { list-style: none; margin: 0 0 clamp(40px, 5vw, 56px); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 40px) clamp(40px, 6vw, 80px); }
.info-tiles li { display: flex; gap: 18px; align-items: flex-start; }
.info-tiles svg { flex: 0 0 28px; width: 28px; height: 28px; color: var(--interactive); margin-top: 2px; }
.info-tiles h3 { margin: 0 0 6px; }
.info-tiles p { margin: 0; color: var(--text-secondary); max-width: 52ch; }
.info-tiles p + p { margin-top: 8px; }
#anfahrt .map-box.map-pano { background: var(--bg-primary); border: 0; }
.info-tiles a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 760px) {
  .info-tiles { grid-template-columns: 1fr; gap: 28px; }
}
/* Trainingshaus: Der Raum als Bento-Raster nur aus Fotos (Klick öffnet Galerie), Ausstattung als Zeile darunter */
.raum-head { max-width: 560px; margin-bottom: clamp(40px, 5vw, 64px); }
.raum-head h2 { margin-bottom: 20px; }
.raum-head p:not(.eyebrow) { max-width: 52ch; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 20px;
  grid-template-areas: "dach dach rack saeule" "dach dach rack saeule" "kurz wirbel wirbel balls" "hantel wirbel wirbel balls" "unten unten unten scheib" "unten unten unten hund"; }
.b-hund img { object-position: 50% 32%; }
.b-kurz img, .b-wirbel img { object-position: 0% 50%; }
.bento figure { margin: 0; min-height: 0; }
.b-photo { display: block; height: 100%; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.b-photo picture, .b-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-dach { grid-area: dach; }
.b-rack { grid-area: rack; }
.b-saeule { grid-area: saeule; }
.b-wirbel { grid-area: wirbel; }
.b-kurz { grid-area: kurz; }
.b-hund { grid-area: hund; }
.b-hantel { grid-area: hantel; }
.b-balls { grid-area: balls; }
.b-scheib { grid-area: scheib; }
.b-unten { grid-area: unten; }
.ausstattung { margin-top: clamp(40px, 5vw, 56px); max-width: 900px; }
.ausstattung .label { margin-bottom: 14px; }
.ausstattung-zeile { font-family: var(--f-display); font-weight: 700; line-height: 1.5; margin: 0; }
.ausstattung-zeile span { color: var(--border-green); margin: 0 .3em; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 14px;
    grid-template-areas: "dach dach" "rack saeule" "wirbel wirbel" "kurz balls" "hantel balls" "unten unten" "scheib hund"; }
  .b-dach, .b-wirbel { aspect-ratio: 3 / 2; }
  .b-unten { aspect-ratio: 3 / 2; }
}
/* Galerie zum Durchklicken */
.galerie { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: rgba(17, 22, 13, .94); color: var(--text-inverse); }
.galerie::backdrop { background: rgba(17, 22, 13, .94); }
.galerie[open] { display: grid; grid-template-rows: 1fr auto; }
.galerie-bild { display: flex; align-items: center; justify-content: center; padding: 64px 88px 16px; min-height: 0; }
.galerie-bild img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.galerie-fuss { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 12px 24px 28px; font-size: .9375rem; color: var(--text-inverse-secondary); text-align: center; }
.galerie-fuss p { margin: 0; max-width: 60ch; }
.galerie button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(250, 246, 239, .12); color: var(--text-inverse); display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease); }
.galerie button:hover { background: rgba(250, 246, 239, .24); }
.galerie button svg { width: 24px; height: 24px; }
.galerie-zu { top: 16px; right: 16px; }
.galerie-vor { right: 20px; top: 50%; transform: translateY(-50%); }
.galerie-zurueck { left: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .galerie-bild { padding: 72px 12px 12px; }
  .galerie-vor, .galerie-zurueck { top: auto; bottom: 20px; transform: none; }
  .galerie-fuss { padding: 12px 84px 32px; }
}
/* Trainingshaus: Zitat unter „Wer noch da ist.“, zentriert mit Namen */
.wer-zitat { text-align: center; margin-top: clamp(64px, 8vw, 104px); }
.zitat { font-family: var(--f-display); font-weight: 700; max-width: 26ch; margin: 0 auto 16px; text-wrap: balance; }
.zitat-name { font-size: .875rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
/* Startseite: Einstieg füllt den Bildschirm unter der Kopfzeile */
.hero { min-height: calc(100svh - 80px); }
@media (max-width: 1080px) {
  .hero { min-height: calc(100svh - 68px); }
}
@media (min-width: 861px) {
  .hero { align-items: flex-start; }
}
/* Zweispalter: Foto bleibt stehen, während der Text daneben weiterläuft */
@media (min-width: 861px) {
  .split-photo, .offer-photo, .story-photo { position: sticky; top: 96px; align-self: start; }
}
/* Angebot: Foto über dem Gruppentraining oben ausrichten, damit die Köpfe zu sehen sind */
.photo-band img.oben { object-position: 50% 15%; }
/* Angebot: Hinweis neben dem Button in Sand wie der Button */
.group-row .note { color: var(--bg-secondary); }
/* Startseite: Trainingshaus-Foto fast bildschirmhoch */
.house-photo img { height: max(420px, calc(100svh - 80px)); }
@media (max-width: 860px) {
  .house-photo img { height: 70svh; }
}
/* Kopfzeile: Hauptbutton grün wie alle Probetraining-Buttons (eine Farbe für die Hauptaktion) */
.btn-ink { background: var(--interactive); color: var(--interactive-text); }
.btn-ink[aria-current="page"] { background: var(--bg-cta); }
/* Handy: Schriftzug einzeilig, Button kurz */
.wordmark { white-space: nowrap; }
@media (max-width: 480px) {
  .wordmark { font-size: 1.125rem; }
  .btn-zusatz { display: none; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 1rem; }
}
/* Lesbarkeit nach der Abnahme */
.foot-h { font-size: .875rem; color: #CDBB9E; }
.map-caption { font-size: var(--fs-body) !important; color: var(--text-primary) !important; }
.full-hero::after { background: linear-gradient(to top, rgba(17,22,13,.5) 0%, rgba(17,22,13,.32) 45%, rgba(17,22,13,.12) 75%); }
/* Buchungsseite: links Michel und das Wichtigste, rechts der Kalender schmal genug für die Monatsansicht */
.pt-seite { padding-top: clamp(48px, 7vw, 88px); }
.pt-raster { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 700px); justify-content: space-between; gap: clamp(40px, 6vw, 64px); align-items: start; }
.pt-portrait img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin-bottom: 32px; }
.pt-intro h1 { margin-bottom: 20px; }
.pt-intro > p { color: var(--text-primary); }
.pt-anfahrt { margin-top: 36px; padding: 24px; border-radius: var(--radius); background: var(--bg-secondary); }
.pt-anfahrt p:last-child { margin-bottom: 0; }
@media (min-width: 861px) {
  .pt-intro { top: 96px; }
}
@media (max-width: 860px) {
  .pt-raster { grid-template-columns: 1fr; }
}
/* Kartenflächen: abstrakte Karte als Hintergrund, bis Google Maps per Klick lädt */
.map-box.map-pano:not(:has(iframe)), .map-box:not(:has(iframe)), #anfahrt .map-box.map-pano:not(:has(iframe)), .section-sand .map-box:not(:has(iframe)) { background: var(--bg-cta) url("../img/karte-land.jpg") center / cover no-repeat; background-image: image-set(url("../img/karte-land.webp") type("image/webp"), url("../img/karte-land.jpg") type("image/jpeg")); border: 0; }
.map-box .map-hint { background: rgba(250, 246, 239, .92); border-radius: var(--radius); padding: 24px 28px; max-width: 40ch; }
.map-box .map-hint p { color: var(--text-primary); }
/* Handy-Kopfzeile passt in 390px: kleinerer Schriftzug, engerer Abstand, „Menü“ nur für Screenreader */
@media (max-width: 420px) {
  .site-head .container { gap: 12px; }
  .wordmark { font-size: 1rem; }
  .head-right { gap: 6px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Regler für die Feinjustierung (?tweak): Variablen mit den bisherigen Werten als Rückfall */
@media (min-width: 861px) {
  .split, .story, .offer, .ablauf, .cta-booking { column-gap: var(--split-gap, clamp(40px, 8vw, 112px)); }
  .hero .container { padding-top: var(--hero-top, clamp(96px, 16vh, 180px)); }
  .eyebrow { margin-bottom: var(--eyebrow-gap, 12px); }
}
/* Kartenfläche: Hinweis unten rechts, damit die Markierung in der Karte sichtbar bleibt */
@media (max-width: 700px) {
  .map-box:not(:has(iframe)) { padding: 12px; }
  .map-box .map-hint { padding: 14px 16px; max-width: none; }
  .map-box .map-hint p { font-size: .875rem; margin-top: 10px; }
}
@media (max-width: 760px) {
  #anfahrt .map-box.map-pano { aspect-ratio: 1 / 1; }
}
/* Label über Überschrift überall gleich nah (12px), auch dort, wo Absatzregeln es überschrieben haben */
.house-text .eyebrow, .cta .eyebrow, .band-text .eyebrow { margin: 0 0 var(--eyebrow-gap, 12px); }
/* Einheitliche Abstände: Abschnittsüberschrift zu Fließtext 28px, Text zu Button-Reihe 28px */
main .container h2:has(+ p, + .lead-text) { margin-bottom: var(--h2-gap, 28px); }
main .container :is(p, .lead-text, .facts) + .btn-row { margin-top: 28px; }
/* Einstiege: Hauptüberschrift zu Einleitung überall 20px */
main h1:has(+ p, + .lead-text, + .lead) { margin-bottom: 20px; }
.hero h1 + .lead { margin-top: 0; }
.cta .eyebrow { margin: 0 auto var(--eyebrow-gap, 12px); }
/* Buttons nebeneinander: 24px wie das Kartenraster, beim Umbruch 16px zwischen den Zeilen */
.btn-row, .cta-actions { gap: 16px 24px; }
/* Probetraining: Kalender vor der Anfahrt, mobil direkt nach den Fakten */
.pt-raster { grid-template-areas: "intro kal" "anfahrt kal"; grid-template-rows: auto 1fr; row-gap: 0; }
.pt-intro { grid-area: intro; }
.pt-kalender { grid-area: kal; }
.pt-anfahrt { grid-area: anfahrt; align-self: start; }
.pt-hinweis { margin: 16px 0 0; color: var(--text-secondary); }
@media (min-width: 861px) {
  .pt-intro { position: static; }
}
@media (max-width: 860px) {
  .pt-raster { grid-template-areas: "intro" "kal" "anfahrt"; grid-template-rows: auto; row-gap: 32px; }
  .pt-anfahrt { margin-top: 0; }
  .pt-portrait img { width: 88px; height: 88px; margin-bottom: 20px; }
  .pt-intro .facts { margin-bottom: 0; }
}
/* Tippflächen: mindestens 44px auf Touch-Breiten, Optik bleibt gleich */
@media (max-width: 860px) {
  .foot-list { gap: 0; }
  .foot-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  a.text-link[href*="maps/dir"] { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-legal span:last-child { gap: 0 24px; }
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-toggle { min-width: 44px; justify-content: center; }
}
@media (max-width: 420px) {
  .menu-toggle { margin-right: -11px; }
}
@media (min-width: 861px) {
  .nav a { padding-block: 10px; }
}
/* Bewertungen: Kopf mit Google-Link nebeneinander */
.reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 24px; }
.reviews-head .eyebrow { flex-basis: 100%; }
.reviews-head h2 { margin-bottom: 0; }
.reviews-head p:last-child { margin: 0; }
@media (max-width: 860px) {
  .reviews-head p:last-child { margin-top: 16px; }
  .reviews-head p:last-child a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Feinschliff nach Critique */
:root { --icon-tint: #CFDBCA; }
.weg-card { opacity: 1; }
/* Bilder in Zweispaltern scrollen normal mit der Seite, kein Mitlaufen */
.split-photo, .offer-photo, .story-photo, .ablauf-photo { position: static; }
/* Buttons: Variante D "Geerdet", Größe M.
   Pfeil immer sichtbar, beim Hover steigt eine Fläche von unten in den Button und der Pfeil macht einen Schritt. Nichts hebt ab. */
.btn {
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  position: relative; overflow: hidden; isolation: isolate;
  font-size: 1rem; font-weight: 600; min-height: 56px; padding: 18px 30px; gap: 10px;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fuell, var(--bg-cta)); border-radius: inherit; transform: translateY(101%); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.btn::after { content: ""; width: 1.15em; height: 1.15em; flex: 0 0 1.15em; background: currentColor; -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.btn:focus-visible::before { transform: translateY(0); }
.btn:focus-visible::after { transform: translateX(5px); }
.btn:active { transform: scale(.97); }
@media (hover: hover) {
  .btn:hover::before { transform: translateY(0); }
  .btn:hover::after { transform: translateX(5px); }
}
.btn:hover, .btn-ink:hover { background: var(--interactive); }
.btn-ghost { --fuell: var(--interactive); }
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--interactive-text); border-color: var(--interactive); }
.btn-inverse { --fuell: var(--bg-secondary); }
.btn-inverse:hover { background: var(--bg-primary); }
.btn-ghost-inverse { --fuell: var(--bg-secondary); }
.btn-ghost-inverse:hover, .btn-ghost-inverse:focus-visible { background: transparent; color: var(--text-primary); border-color: var(--bg-secondary); }
.btn-ink { font-size: .9375rem; min-height: 44px; padding: 12px 22px; gap: .3em; }
.btn-ink::after { margin-left: 6px; }
.btn-ink[aria-current="page"]:hover { background: var(--bg-cta); }
@media (max-width: 480px) {
  .head-right .btn-ink { font-size: .8125rem; padding: 10px 16px; }
  .head-right .btn-ink::after { display: none; }
}
@media (max-width: 420px) {
  .head-right .btn-ink { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after { transition-duration: .01ms !important; }
}
@media (max-width: 374px) {
  .site-head .container { padding-inline: 16px; gap: 8px; }
  .head-right .btn-ink { padding: 10px 12px; }
}
@media (max-width: 340px) {
  .site-head .container { padding-inline: 12px; }
  .wordmark { font-size: .875rem; }
  .head-right .btn-ink { padding: 8px 10px; font-size: .75rem; }
}
/* Kopfzeilen-Button ohne Pfeil, Fläche beim Hover bleibt */
.btn-ink::after { display: none; }
/* Auf dem Handy kein Button in der Kopfzeile */
@media (max-width: 860px) {
  .head-right .btn-ink { display: none; }
}
@media (max-width: 860px) {
  .wordmark { font-size: 1.25rem; }
  .site-head .container { padding-inline: var(--gutter, 20px); }
}
/* Schriftskala (15.10.2026): feste Rollen statt vieler Einzelgrößen.
   Bitter: H1, H1 kompakt, H2, Aussage, H3, H4. Figtree: Einleitung, Fließtext, Klein, Eyebrow, Label.
   Laufweite relativ zur Größe, Zeilenhöhe nach Stufe. */
:root {
  --fs-h1: clamp(2.75rem, 6.2vw, 5.5rem);          /* 44 bis 88px */
  --fs-h1-kompakt: clamp(2.5rem, 4.5vw, 3.5rem);   /* 40 bis 56px */
  --fs-h2: clamp(2.1rem, 3.6vw, 3rem);             /* 34 bis 48px */
  --fs-aussage: clamp(1.625rem, 2.6vw, 2.25rem);   /* 26 bis 36px */
  --fs-h3-rolle: clamp(1.5rem, 2vw, 1.75rem);      /* 24 bis 28px */
  --fs-h4: clamp(1.25rem, 1.6vw, 1.375rem);        /* 20 bis 22px */
  --fs-lead: clamp(1.1875rem, 1.5vw, 1.3125rem);   /* 19 bis 21px */
  --fs-klein: .9375rem;                            /* 15px */
}
main h1, .hero h1, .pano-hero h1, .full-hero h1, .ways-hero h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.02em; }
.pt-intro h1 { font-size: var(--fs-h1-kompakt); line-height: 1.06; }
main h2 { letter-spacing: -.02em; }
.zitat, .statement, .statement-band .big, .card h3, .price-card h3, .booking-title { font-size: var(--fs-aussage); line-height: 1.12; letter-spacing: -.02em; }
.principle h3, .ausstattung-zeile, .foot-mark { font-size: var(--fs-h3-rolle); letter-spacing: -.01em; }
.principle h3, .foot-mark { line-height: 1.15; }
.weg-z h3, .weg-card h3, .einheit-teile h3, .ablauf-liste dt, .info-tiles h3, .qual-overlay .name { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.01em; }
.hero .lead, main h1 + .lead-text, main h1 + p, .pano-hero .lead-text { font-size: var(--fs-lead); line-height: 1.45; }
.card p:not(.sub):not(.num), .principle p { font-size: 1.125rem; }
.qual-overlay .desc, .pt-hinweis, .card p.sub, .foot-legal, .field label, .field-error, .map-box .map-hint p { font-size: var(--fs-klein); }
.foot-h, .zitat-name { letter-spacing: .2em; }
.split-hero h1, .pano-hero h1 { line-height: 1.04; }
.page-head h1 { font-size: var(--fs-h1-kompakt); line-height: 1.06; letter-spacing: -.02em; }
.statement-band p.big { line-height: 1.12; letter-spacing: -.02em; }
.booking-title { font-size: var(--fs-aussage) !important; line-height: 1.12; }
/* Angebotskarte Startseite: Beschreibung steht über der Karte, Karte nur noch Preis, Buchung, Leistungen */
.offer > div > h2 + p + .price-card { margin-top: 32px; }
/* Kontur-Button ohne eigene Fläche: übernimmt den Grund (Morgenholz oder Sand) */
.btn-ghost, .btn-ghost:hover, .btn-ghost:focus-visible { background: transparent; }
/* Weiter-Link: Verweis auf eine Unterseite ohne Button-Gewicht. Schrift und Pfeil wie die Buttons, Pfeil macht beim Hover den gleichen Schritt */
.weiter-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 1rem/1.2 var(--f-body); color: var(--interactive); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-color: var(--border-green); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.weiter-link::after { content: ""; width: 1.15em; height: 1.15em; flex: 0 0 1.15em; background: currentColor; -webkit-mask: var(--pfeil-maske) center / contain no-repeat; mask: var(--pfeil-maske) center / contain no-repeat; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.weiter-link:hover, .weiter-link:focus-visible { color: var(--bg-cta); text-decoration-color: currentColor; }
.weiter-link:hover::after, .weiter-link:focus-visible::after { transform: translateX(5px); }
:root { --pfeil-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) {
  .weiter-link::after { transition: none; }
}
/* Startseite Angebot: Verweis auf die Angebotsseite mittig unter beiden Spalten */
.offer-weiter { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: clamp(16px, 3vw, 32px); }
.offer > div > .price-card { margin-top: 32px; }
@media (min-width: 861px) {
  .offer:has(.offer-weiter) { row-gap: 56px; }
  .offer-weiter { margin-top: 0; }
}
/* Preiskarte Angebot wie auf der Startseite: gleiche Breite, Titel einzeilig, gleiche Abstände */
.price-band .price-card { max-width: 384px; }
.price-band .price-card h3 { margin-bottom: 14px; }
.price-band .price { margin-top: 36px; }
/* Bewegung aufgeräumt (15.10.2026) */
/* 1. Nichts hebt sich, was man nicht anklicken kann */
@media (hover: hover) {
  .step .card:hover, .principle:hover, .einheit-teile li:hover { transform: none; }
}
.qual-card:hover, .qual-card:focus-visible { transform: none; }
.step .card, .principle, .einheit-teile li { transition: none; }
/* 2. Ein Pfeilschritt für alles: 5px, 400ms, gleiche Kurve wie die Buttons. Footer-WhatsApp hebt sich nicht mehr, der Pfeil zeigt die Richtung */
.way svg:last-child { transition: transform .4s var(--ease); }
.way:hover svg:last-child, .way:focus-visible svg:last-child { transform: translateX(5px); }
.foot-wa { transition: background-color .3s var(--ease); }
.foot-wa:hover { transform: none; background: var(--text-inverse); }
.foot-wa svg:last-child { transition: transform .4s var(--ease); }
.foot-wa:hover svg:last-child, .foot-wa:focus-visible svg:last-child { transform: translate(3px, -3px); }
/* 6. Handy-Menü gleitet von oben herein, schließt schneller */
@media (max-width: 1080px) {
  .nav { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s; }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
}
/* 7. Galerie: Hintergrund blendet beim Öffnen ein, Bild wächst minimal heran. Blättern wechselt direkt */
.galerie[open] { animation: galerie-auf .3s var(--ease) both; }
.galerie[open] .galerie-bild { animation: galerie-bild-auf .4s var(--ease) both; }
@keyframes galerie-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes galerie-bild-auf { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* 3. Bei reduzierter Bewegung: keine Wege mehr, Farben und Deckkraft wechseln weiter sanft */
@media (prefers-reduced-motion: reduce) {
  .site-head, .site-head .container, .faq-body, .faq-chevron, .way svg:last-child, .foot-wa svg:last-child, .weg-v::after { transition: none; }
  .nav, .nav.is-open { transform: none; }
  .way:hover svg:last-child, .foot-wa:hover svg:last-child { transform: none; }
}
/* Kontaktformular: Hinweis zum Datenschutz unter dem Button */
.form-hinweis { margin: 16px 0 0; font-size: var(--fs-klein); color: var(--text-secondary); }
/* Kontakt: Anfahrt als Abschluss, Adresse über der Karte */
.anfahrt-adresse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 0 0 32px; }
.anfahrt-adresse b { font-weight: 600; }
.anfahrt-adresse .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.anfahrt .map-caption { margin-top: 20px; }
/* Handy-Menü: Buchen als letzter, gefüllter Eintrag (Kopf-Button ist dort ausgeblendet) */
.nav a.nav-buchen { display: none; }
@media (max-width: 860px) {
  .nav a.nav-buchen { display: inline-flex; margin-top: 20px; padding: 18px 30px; border-bottom: 0; font-size: 1rem; color: var(--interactive-text); }
  .nav a.nav-buchen:hover { color: var(--interactive-text); }
}
/* Buchungstool von termine.bkl.training: Fenster wächst mit dem Inhalt, Ladehinweis bis zur ersten Höhenmeldung.
   Hell ohne Rahmen (verschmilzt mit der Seite), auf Grün mit &rahmen=karte (Kasten kommt aus dem Widget) */
.bkl-termine { position: relative; }
.bkl-termine iframe { display: block; width: 100%; height: 720px; border: 0; background: transparent; opacity: 0; transition: height .3s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); }
.bkl-termine.is-ready iframe { opacity: 1; }
/* Helle Variante ohne Karte: Das Tool lässt rundum 8px Innenabstand für den Fokusring, hier ausgeglichen, damit die Felder bündig zur Überschrift stehen */
.bkl-termine--hell iframe { width: calc(100% + 16px); margin-inline: -8px; }
.bkl-termine__laden { position: absolute; top: 24px; left: 0; margin: 0; font-size: var(--fs-klein); color: var(--text-secondary); }
.on-dark .bkl-termine__laden { color: var(--bg-secondary); }
.bkl-termine.is-ready .bkl-termine__laden { display: none; }
@media (prefers-reduced-motion: reduce) { .bkl-termine iframe { transition: none; } }
/* Formular: Beim Springen zum ersten Fehler bleibt das Feld unter der Kopfzeile sichtbar */
.field input, .field textarea { scroll-margin-top: 120px; }

/* Rechtstexte (Impressum, Datenschutz, AGB): ruhige Zwischenüberschriften, volle Textfarbe, lesbare Zeilenlänge */
.prose h2 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.01em; margin: 40px 0 10px; }
.page-head .prose p, .prose li { max-width: 70ch; color: var(--text-primary); }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 1.2em; margin: 0; }
.prose li + li { margin-top: 6px; }
.prose code { font-size: .875em; overflow-wrap: anywhere; }
.prose .label { margin-top: 48px; color: var(--text-secondary); }

/* Abschluss mit Kalender: Frage-Zeile mit hellem Link auf Dunkelgrün */
.cta-booking-intro .cta-frage { margin-top: 20px; }
.cta-booking-intro .text-link { color: var(--interactive-inverse); text-decoration: underline; text-underline-offset: 3px; }
.cta-booking-intro .text-link:hover { color: var(--interactive-inverse-hover); }

/* Hover ohne hellen Saum (Michel, 16.10.2026): Die aufsteigende Fläche und der Button-Rand werden an den runden Kanten getrennt geglättet,
   dazwischen blieb ein heller Rand (in Firefox deutlicher). Sobald die Fläche oben ist, übernimmt der Button selbst die Füllfarbe. */
@media (hover: hover) {
  .btn:hover, .btn-ghost:hover, .btn-inverse:hover, .btn-ghost-inverse:hover {
    background-color: var(--fuell, var(--bg-cta));
    transition: color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease), background-color 0s linear .28s;
  }
}
.btn:focus-visible, .btn-ghost:focus-visible, .btn-inverse:focus-visible, .btn-ghost-inverse:focus-visible {
  background-color: var(--fuell, var(--bg-cta));
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease), background-color 0s linear .28s;
}

/* Gemeinschaft-Zitat Trainingshaus breiter, damit Michels längeres Zitat nicht vierzeilig wird (Julian, 16.10.2026) */
.wer-zitat .zitat { max-width: 40ch; }

/* So startest du: Die H1 "Dein Probetraining" wächst mit ihrer Textspalte mit (Julian, 16.10.2026).
   Bei voller H1-Größe ist das Wort "Probetraining" breiter als die Spalte neben dem Foto (Ausnahme, siehe DESIGN.md). */
.split-hero-flip .container > div:not(.photo) { container-type: inline-size; }
.split-hero-flip h1 { font-size: min(var(--fs-h1), 15cqi); }
/* Bewertungen ohne Elfsight (deploy/bewertungen.py schreibt die Karten ins HTML).
   Band zum Wischen, Karten wie die übrigen Karten. Name und Datum oben, Text nach sieben Zeilen abgeschnitten,
   "Mehr lesen" öffnet die ganze Bewertung im Pop-up. Ohne Skript steht der ganze Text in der Karte. */
.stimmen-band { display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 12px; scrollbar-width: thin; scrollbar-color: var(--border-green) transparent; }
/* Mit Skript gleich hohe Karten (Text gekürzt), ohne Skript jede Karte so hoch wie ihr Text */
.stimmen-band.ist-gekuerzt { align-items: stretch; }
/* Wie bei Elfsight: drei Karten auf Inhaltsbreite, Tablet zwei, Handy eine mit Blick auf die nächste */
.stimmen-band .stimme { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--bg-primary); border: 1.5px solid var(--border-green); border-radius: var(--radius); padding: 28px; }
.stimme-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.stimme-initial { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-secondary); color: var(--text-primary); font: 700 1.125rem/1 var(--f-display); }
.stimme-wer { display: flex; flex-direction: column; gap: 2px; margin: 0; line-height: 1.3; }
.stimme-name { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.stimme-meta { font-size: var(--fs-klein); color: var(--text-secondary); }
.stimme-meta a { color: var(--interactive); text-decoration: underline 1px var(--border-green); text-underline-offset: .2em; }
.stimme-meta a:hover { color: var(--interactive-hover); text-decoration-color: currentColor; }
.stimme-text { margin: 0; }
.ist-gekuerzt .stimme-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.stimme-mehr { align-self: flex-start; margin-top: 4px; padding: 0; min-height: 44px; appearance: none; background: none; border: 0; font: 600 1rem/1.2 var(--f-body); color: var(--interactive); text-decoration: underline 1.5px var(--border-green); text-underline-offset: .3em; cursor: pointer; }
.stimme-mehr:hover { color: var(--interactive-hover); text-decoration-color: currentColor; }
/* Pfeile unter dem Band, rechts */
.band-steuerung { display: flex; justify-content: flex-end; margin-top: 24px; }
.band-steuerung[hidden] { display: none; }
.band-pfeile { display: flex; gap: 12px; }
@media (max-width: 1080px) {
  .stimmen-band .stimme { flex-basis: calc((100% - 24px) / 2); }
}
.band-pfeil { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--interactive); background: transparent; color: var(--interactive); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.band-pfeil svg { width: 20px; height: 20px; }
.band-pfeil-links svg { transform: scaleX(-1); }
.band-pfeil:hover:not(:disabled) { background: var(--interactive); color: var(--interactive-text); }
.band-pfeil:disabled { opacity: .35; cursor: default; }
/* Pop-up wie bei Elfsight: alle Bewertungen als Liste zum Scrollen, öffnet an der gewählten Stelle.
   Feste Höhe, Kopf mit Titel und Schließen bleibt stehen. Esc oder Klick daneben schließt. */
.stimme-dialog { width: min(680px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--radius); background: var(--bg-primary); color: var(--text-primary); overflow: hidden; }
.stimme-dialog::backdrop { background: rgba(17, 22, 13, .6); }
.stimme-dialog-innen { display: flex; flex-direction: column; height: min(85vh, 780px); }
.stimme-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 8px 32px; }
.stimme-dialog-titel { margin: 0; font: 700 1.375rem/1.3 var(--f-display); letter-spacing: -.01em; }
.stimme-dialog-quelle { margin: 4px 0 0; font-size: var(--fs-klein); line-height: 1.3; }
.stimme-dialog-quelle a { display: block; margin-top: 4px; font: 500 var(--fs-klein)/1.3 var(--f-body); letter-spacing: 0; color: var(--interactive); text-decoration: underline 1px var(--border-green); text-underline-offset: .2em; }
.stimme-dialog-zu { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-primary); cursor: pointer; transition: background-color .3s var(--ease); }
.stimme-dialog-zu:hover { background: var(--bg-secondary); }
.stimme-dialog-zu svg { width: 22px; height: 22px; }
.stimme-dialog-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 32px; scrollbar-width: thin; scrollbar-color: var(--border-green) transparent; }
.stimme-dialog-eintrag { margin-inline: -16px; padding: 32px 16px; border-radius: 12px; }
.stimme-dialog-eintrag:focus { outline: none; }
.stimme-dialog-eintrag:focus-visible { outline: 2px solid var(--interactive); outline-offset: -2px; }
/* Die gewählte Bewertung leuchtet kurz in Honigsaum auf, damit man sie in der Liste findet */
.stimme-dialog-eintrag.ist-gewaehlt { animation: stimme-gewaehlt 2.4s var(--ease) both; }
@keyframes stimme-gewaehlt { from { background-color: rgba(240, 221, 193, .85); } to { background-color: rgba(240, 221, 193, 0); } }
.stimme-dialog-eintrag + .stimme-dialog-eintrag { padding-top: 8px; }
.stimme-dialog-eintrag .stimme-kopf { margin-bottom: 16px; }
.stimme-dialog-eintrag p:not(.stimme-wer) { margin: 0 0 .75em; }
.stimme-dialog-eintrag p:last-child { margin-bottom: 0; }
html:has(.stimme-dialog[open]) { overflow: hidden; }
@media (max-width: 860px) {
  .band-steuerung { display: none; }
  .stimmen-band .stimme { flex-basis: 86%; }
  .stimme-dialog-kopf { padding: 16px 12px 12px 20px; }
  .stimme-dialog-liste { padding: 0 20px; }
  .stimme-dialog-eintrag { margin-inline: -12px; padding: 24px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .stimme-dialog-eintrag.ist-gewaehlt { animation: none; background-color: rgba(240, 221, 193, .45); }
}