@font-face {
  font-family: "Instrument";
  src: url("fonts/instrument.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --stein: #e6e3df;          /* ruhiger Grundton */
  --papier: #efede9;         /* etwas heller, für Fenster und Streifen */
  --platz: #d2ccc6;          /* Platzhalter für Fotos */
  --wein: #5b1329;           /* Farbe aus dem Logo, die einzige Akzentfarbe */
  --tinte: #1e1719;
  --leise: #655b5e;
  --linie: rgba(30, 23, 25, 0.2);
  --seite: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--stein);
  color: var(--tinte);
  font-family: "Instrument", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
body:has(dialog[open]) { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: var(--wein); text-underline-offset: 0.22em; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--wein); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--seite); margin: 0 auto; padding: 0 1.5rem; }

.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--wein); color: #fff; padding: 0.5rem 0.9rem; z-index: 60; }
.skip:focus { left: 0.5rem; }

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 0.5em;
}
h2 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); }
h3 { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0 0 1em; max-width: 58ch; }

/* ---------- Fotos ---------- */
.foto { position: relative; overflow: hidden; background: var(--platz); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto .platz { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(30, 23, 25, 0.5); font-size: 0.95rem; text-align: center; padding: 1rem; }
.foto.hoch { aspect-ratio: 4 / 5; }
.foto.quer { aspect-ratio: 3 / 2; }
.foto.breit { aspect-ratio: 4 / 3; }

/* ---------- Einstieg ---------- */
.einstieg { padding: 2rem 0 3.5rem; }
.einstieg .wrap { display: grid; gap: 2.4rem; }
.einstieg-text { display: flex; flex-direction: column; justify-content: space-between; gap: 3.5rem; }
.einstieg-logo { display: block; line-height: 0; width: max-content; }
.einstieg-logo img { height: 74px; width: auto; }
.einstieg h1 { font-size: clamp(2rem, 8.2vw, 4.4rem); color: var(--wein); margin-bottom: 0.4em; overflow-wrap: normal; }
.einstieg .lead { font-size: clamp(1.35rem, 2.2vw, 1.9rem); max-width: 24ch; color: var(--tinte); margin-bottom: 0.7rem; line-height: 1.2; letter-spacing: -0.015em; }
.einstieg .lead strong { font-weight: 600; }
.einstieg .lead-klein { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 40ch; color: var(--leise); margin: 0 0 0.9rem; }
.einstieg .schwerpunkte { margin: 0 0 1.8rem; font-weight: 600; color: var(--wein); max-width: none; letter-spacing: -0.01em; }
.einstieg .foto { aspect-ratio: 16 / 7; max-width: none; }
.hero-bild { position: relative; }
.hero-bild img { object-position: 50% 74%; }
.hero-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(66, 12, 30, 0.85) 0%, rgba(66, 12, 30, 0.55) 45%, rgba(66, 12, 30, 0.5) 100%); pointer-events: none; }
.bildzeile { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; margin: 0; color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
@media (min-width: 900px) {
  .einstieg { padding: 2.2rem 0 0; min-height: min(100svh, 820px); display: flex; overflow-x: clip; }
  .einstieg .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 2rem; align-items: stretch; padding-bottom: 4rem; }
  .einstieg-text { position: relative; z-index: 2; align-self: stretch; justify-content: space-between; gap: 3rem; }
  .hero-bild { margin-right: calc(-1 * (max(0px, (100vw - var(--seite)) / 2) + 1.5rem)); margin-bottom: -4rem; margin-left: -6rem; align-self: end; }
  .einstieg .foto { aspect-ratio: 6 / 5; max-width: none; }
  .hero-bild img { object-position: 28% 60%; }
  .hero-bild { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%); mask-image: linear-gradient(to right, transparent 0%, #000 22%); }
  .hero-bild::after { background: rgba(66, 12, 30, 0.42); }
  .einstieg h1 { font-size: clamp(3rem, 5.6vw, 4.8rem); }
}

/* ---------- Knöpfe und Links ---------- */
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; }
.knopf {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 0.85rem 1.6rem;
  border-radius: 6px;
  border: 2px solid var(--wein);
  background: var(--wein);
  color: #fff;
}
.knopf:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.knopf.leer { background: transparent; color: var(--wein); }
.knopf.leer:hover { background: var(--wein); border-color: var(--wein); color: #fff; }
.knopf.hell { background: #f3e6e9; border-color: #f3e6e9; color: var(--wein); }
.knopf.hell:hover { background: #fff; border-color: #fff; color: var(--wein); }
.text-knopf { font: inherit; font-weight: 600; color: var(--wein); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; }
.text-knopf:hover { color: var(--tinte); }

/* ---------- Eckdaten ---------- */
.eckdaten { background: var(--papier); border-top: 3px solid var(--wein); border-bottom: 1px solid var(--linie); padding: 0.6rem 0 0.9rem; }
.eckdaten dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 2rem; }
.eckdaten dl > div { padding: 1.1rem 0 0.5rem; }
.eckdaten dt { color: var(--wein); opacity: 0.75; font-size: 0.95rem; margin-bottom: 0.15rem; }
.eckdaten dd { margin: 0; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.3; color: var(--wein); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.kopfzeile { display: grid; gap: 0.5rem 3rem; margin-bottom: clamp(2rem, 5vw, 3.4rem); align-items: end; }
.kopfzeile h2 { margin: 0; }
.kopfzeile p { margin: 0; color: var(--leise); }
@media (min-width: 900px) { .kopfzeile { grid-template-columns: 1.2fr 1fr; } }

/* Training */
.drei { display: grid; gap: 0 2.4rem; }
.punkt { border-top: 3px solid var(--wein); padding: 1.3rem 0 1.8rem; }
.punkt h3 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -0.035em; margin: 0 0 0.45rem; }
.punkt p { margin: 0; color: var(--leise); max-width: 30ch; }
@media (min-width: 760px) { .drei { grid-template-columns: repeat(3, 1fr); } }

.formen { display: grid; gap: 0 3rem; margin-top: clamp(2.4rem, 6vw, 4rem); border-top: 1px solid var(--linie); }
.form { padding: 1.8rem 0; border-bottom: 1px solid var(--linie); }
.form h3 { color: var(--wein); margin-bottom: 0.3em; font-size: 1.7rem; }
.form p { margin: 0; max-width: 42ch; }
@media (min-width: 760px) { .formen { grid-template-columns: 1fr 1fr; } }
.koop { margin-top: clamp(2.4rem, 6vw, 4rem); display: grid; align-items: stretch; background: var(--wein); color: #fff; overflow: hidden; }
.koop .foto { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--wein); }
.koop .foto::after { content: ""; position: absolute; inset: 0; background: rgba(66, 12, 30, 0.5); pointer-events: none; }
.koop .foto img { object-position: 50% 30%; }
.koop-text { padding: clamp(1.6rem, 4vw, 3rem); align-self: center; }
.koop-text h3 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 0.4em; max-width: 16ch; }
.koop-text p { margin: 0; max-width: 40ch; font-size: 1.1rem; color: #f0dde2; }
@media (min-width: 700px) { .koop { grid-template-columns: minmax(0, 360px) 1fr; } .koop .foto { aspect-ratio: 4 / 5; } }
.hinweis { margin: 1.8rem 0 0; max-width: none; }

/* Preise */
.abschnitt.hell { background: var(--papier); border-block: 1px solid var(--linie); }
.preise { display: grid; gap: 3rem 3.5rem; }
.tarif h3 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--wein); margin-bottom: 0.15em; }
.tarif .unter { color: var(--leise); margin: 0 0 1.1rem; }
.tarif table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarif th, .tarif td { text-align: right; padding: 0.9rem 0 0.9rem 0.6rem; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.tarif thead th { font-weight: 500; font-size: 0.92rem; color: var(--leise); border-bottom: 2px solid var(--tinte); padding-top: 0; }
.tarif th:first-child, .tarif td:first-child { text-align: left; padding-left: 0; }
.tarif tbody th { font-weight: 600; font-size: 1.1rem; }
.tarif tbody th small { display: block; font-weight: 400; font-size: 0.88rem; color: var(--leise); }
.tarif td { color: var(--leise); }
.tarif td.preis { color: var(--wein); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
@media (min-width: 980px) { .preise { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tarif th, .tarif td { padding-left: 0.4rem; font-size: 0.95rem; } .tarif td.preis { font-size: 1.1rem; } .tarif tbody th { font-size: 1rem; } }

/* Team: Gruppenfoto mit Text darüber */
.team { position: relative; background: var(--wein); color: #fff; overflow: hidden; }
.team-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
.team-text { padding: 2.4rem 0 3.4rem; background: var(--wein); }
.team h2 { color: #fff; max-width: 11em; }
.team p { max-width: 46ch; color: #f0dde2; }
@media (min-width: 900px) {
  .team { min-height: 640px; display: flex; align-items: flex-end; }
  .team-bild { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .team::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(55, 10, 25, 0.94) 0%, rgba(75, 14, 33, 0.78) 28%, rgba(91, 19, 41, 0) 62%); }
  .team-text { position: relative; z-index: 1; width: 100%; background: none; padding: 0 0 4rem; }
}

/* Orte */
.orte { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linie); }
.orte li { padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.orte h3 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.orte p { margin: 0.2rem 0 0; color: var(--leise); }
@media (min-width: 760px) {
  .orte { grid-template-columns: repeat(3, 1fr); gap: 0 2rem; border-top: 0; }
  .orte li { border-top: 1px solid var(--linie); border-bottom: 0; padding-top: 1.2rem; }
}

/* Anfragen */
.anfragen { position: relative; background: var(--wein); color: #fff; overflow: hidden; }
.anfragen::before { content: ""; position: absolute; inset: 0; background: rgba(66, 12, 30, 0.84); z-index: 1; }
.kontakt-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.anfragen .wrap { position: relative; z-index: 2; }
.anfragen h2, .anfragen .mail-gross { color: #fff; }
.anfragen p { color: #f0dde2; }
.anfragen a { color: #fff; }
.mail-gross {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--wein);
  text-decoration-thickness: 0.05em;
  overflow-wrap: anywhere;
  margin: 0.2rem 0 1.6rem;
}
.mail-gross:hover { color: #f3d3db; }
.anfrage-text { display: grid; gap: 0.2rem 3rem; }
.anfrage-text p { max-width: 46ch; }
@media (min-width: 900px) { .anfrage-text { grid-template-columns: 1fr 1fr; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: #c9bfc2; padding: 3rem 0 3.4rem; font-size: 1rem; }
.fuss .wrap { display: grid; gap: 1.6rem; }
.fuss img { height: 56px; width: auto; margin-bottom: 0.8rem; }
.fuss p { margin: 0 0 0.3rem; max-width: none; }
.fuss a, .fuss .text-knopf { color: #e7d3d8; }
.fuss a:hover, .fuss .text-knopf:hover { color: #fff; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; }
@media (min-width: 760px) { .fuss .wrap { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Fenster (Trainer, Impressum, Datenschutz) ---------- */
dialog.fenster {
  width: min(1040px, 94vw);
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--papier);
  color: var(--tinte);
  overflow: hidden;
}
dialog.fenster[open] { display: flex; flex-direction: column; }
dialog.fenster::backdrop { background: rgba(30, 23, 25, 0.62); }
@media (prefers-reduced-motion: no-preference) {
  dialog.fenster[open] { animation: auf 0.22s ease-out; }
  dialog.fenster[open]::backdrop { animation: ein 0.22s ease-out; }
}
@keyframes auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ein { from { opacity: 0; } to { opacity: 1; } }
.fenster-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--linie); background: var(--stein); }
.fenster-kopf h2 { margin: 0; font-size: 1.9rem; color: var(--wein); }
.fenster-inhalt { overflow-y: auto; padding: 1.8rem 1.6rem 2.2rem; }
.fenster-inhalt h3 { font-size: 1.3rem; margin: 0 0 0.7rem; color: var(--wein); }
.fenster-inhalt p { max-width: 70ch; }
.recht h3 { margin-top: 1.8em; }
.recht h3:first-child { margin-top: 0; }
.gruppe + .gruppe { margin-top: 2.6rem; }
.gruppe > h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.team-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.person .foto { margin-bottom: 0.6rem; }
.person .foto .platz { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; color: rgba(30, 23, 25, 0.42); }
.person strong { display: block; font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.01em; }
.person span { display: block; line-height: 1.35; font-size: 0.98rem; }
.person .verein { color: var(--leise); }
.person .beschr { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.5; max-width: none; }
.person .beschr.leer { color: var(--leise); }

/* Bildnachweis */
.bildnachweis { position: absolute; right: 0.6rem; bottom: 0.45rem; z-index: 3; font-size: 0.62rem; line-height: 1; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.01em; pointer-events: none; }
.hero-bild .bildzeile { right: 9rem; }
.koop .foto .bildnachweis { z-index: 3; }
@media (max-width: 520px) { .hero-bild .bildnachweis { bottom: auto; top: 0.6rem; } .hero-bild .bildzeile { right: 1.1rem; } }

/* Preise: Dauer */
.dauer-zeile { margin: 0; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--tinte); letter-spacing: -0.015em; align-self: end; }
.dauer-zeile strong { color: var(--wein); font-weight: 700; }
#preise .kopfzeile { display: block; } #preise .dauer-zeile { margin-top: 0.7rem; }
@media (min-width: 900px) { .eckdaten dl { grid-template-columns: repeat(4, 1fr); } }

/* Logo oben rechts */
.einstieg { padding-top: 1.6rem; }
.einstieg .wrap { position: relative; }
.einstieg-logo { justify-self: end; margin-bottom: 0.4rem; }
.einstieg-logo img { height: 92px; }
@media (min-width: 900px) {
  .einstieg { padding-top: 2.2rem; min-height: min(100svh, 820px); }
  .einstieg-logo { position: absolute; top: 0; right: 1.5rem; z-index: 3; margin: 0; }
  .einstieg-logo img { height: 120px; }
}
@media (min-width: 900px) { .einstieg-text { justify-content: center; padding-top: 4rem; } }
@media (min-width: 900px) { .einstieg-text { justify-content: flex-start; padding-top: 0.6rem; } .einstieg-logo img { height: 104px; } .einstieg-logo { top: 0.5rem; } }
@media (min-width: 900px) { .einstieg-text { padding-top: 3rem; } .einstieg-logo { top: 2.2rem; } }
@media (min-width: 900px) {
  .einstieg-text { justify-content: flex-end; padding-top: 0; }
  .einstieg-logo { top: 2.2rem; }
  .hero-bild { margin-left: -9rem; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 14%, #000 34%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 14%, #000 34%); }
}
@media (min-width: 900px) { .einstieg .foto { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
  .einstieg-logo { left: 1.5rem; right: auto; top: 2.2rem; }
  .einstieg-text { justify-content: flex-start; padding-top: 8.2rem; gap: 2.2rem; }
  .einstieg .foto { aspect-ratio: 2 / 1; }
  .hero-bild { margin-left: -13rem; }
}
@media (min-width: 900px) {
  .einstieg-logo img { height: 92px; }
  .einstieg-text { padding-top: 9.6rem; }
}
@media (min-width: 900px) {
  .einstieg-logo { left: auto; right: 1.5rem; top: 2.2rem; }
  .einstieg-text { padding-top: 5.6rem; }
  .hero-bild { margin-left: -17rem; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,.8) 48%, #000 62%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,.8) 48%, #000 62%); }
  .einstieg .foto { aspect-ratio: 9 / 4; }
}
@media (min-width: 900px) {
  .hero-bild { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 20%, #000 42%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 20%, #000 42%); }
  .hero-bild img { object-position: 50% 82%; }
}
@media (min-width: 900px) {
  .einstieg .foto { aspect-ratio: 9 / 5; }
  .hero-bild img { object-position: 50% 58%; }
  .einstieg h1 { margin-bottom: 1.6em; }
  .einstieg { min-height: min(100svh, 880px); }
}
@media (min-width: 900px) {
  .einstieg h1 { margin-bottom: 0.45em; }
  .einstieg .lead { margin-bottom: 0; }
  .einstieg .lead-klein { margin-top: 5.6rem; }
  .einstieg-logo img { height: 140px; }
  .einstieg-logo { top: 1.6rem; }
}
@media (min-width: 900px) {
  .einstieg-text { padding-top: 9.2rem; }
  .einstieg .lead-klein { margin-top: 2.4rem; }
}
@media (min-width: 900px) { .einstieg-logo img { height: 100px; } .einstieg-logo { top: 2rem; } }
@media (min-width: 900px) {
  .hero-bild { margin-left: -15rem; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 9%, #000 21%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 9%, #000 21%); }
}
@media (min-width: 900px) {
  .einstieg { position: relative; }
  .einstieg::before { content: ""; position: absolute; z-index: 0; left: 8%; right: 0; bottom: 0; height: 66%; background: linear-gradient(to right, rgba(66, 12, 30, 0) 0%, rgba(66, 12, 30, 0.07) 22%, rgba(66, 12, 30, 0.2) 40%, rgba(66, 12, 30, 0.3) 52%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); }
  .einstieg .wrap { z-index: 1; }
}
@media (min-width: 900px) { .einstieg::before { height: 57%; -webkit-mask-image: none; mask-image: none; } }
@media (min-width: 900px) { .einstieg::before { height: 62%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); } }

/* Anfrage */
.anfrage-satz { margin: 0 0 0.6rem; font-size: clamp(1.15rem, 2vw, 1.5rem); max-width: 40ch; color: #f0dde2; }
.anfrage-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 0.4rem; }
.anfrage-knoepfe .telefon { color: #f0dde2; }
.anfrage-knoepfe .telefon a { color: #fff; }

/* Anfrage: Telefon, Soziales */
.anfragen .mail-gross { font-size: clamp(1.5rem, 4vw, 2.9rem); margin: 0.1rem 0 1rem; }
.anfrage-tel { margin: 0; color: #f0dde2; }
.anfrage-tel a { color: #fff; }
.soziales { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.25); max-width: 28rem; }
.soziales h3 { color: #fff; font-size: 1.15rem; margin-bottom: 0.7rem; }
.insta-knopf { display: inline-flex; align-items: center; gap: 0.7rem; color: #fff; text-decoration: none; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 6px; padding: 0.55rem 1rem 0.55rem 0.75rem; }
.insta-knopf:hover { background: #fff; color: var(--wein); }

.soziales { border-top: 0; padding-top: 0; margin-top: 1.1rem; }
.insta-knopf { border: 0; padding: 0.3rem 0; border-radius: 0; }
.insta-knopf:hover { background: none; color: #f3d3db; }

.anfragen a, .anfragen .mail-gross { text-decoration: none; border-bottom: 0; }
.insta-icon { display: inline-flex; margin-top: 0.9rem; color: #fff; opacity: 0.9; }
.insta-icon:hover { color: #f3d3db; opacity: 1; }

.fuss-logo { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 0.8rem; }
.fuss-logo img { margin-bottom: 0; }
.fuss .insta-icon { margin-top: 0; color: #e7d3d8; }
.fuss .insta-icon:hover { color: #fff; }

.orte-text p { margin: 0 0 0.5rem; }
.orte-text .knopf { margin-top: 0.8rem; width: auto; display: inline-block; }

/* Bilder blenden beim Scrollen ein */
.erscheint { opacity: 0; transition: opacity 0.9s ease, transform 0.9s ease; }
.koop .erscheint { transform: translateY(26px); }
.erscheint.sichtbar { opacity: 1; transform: none; }

/* Trainer: Klick auf Karte öffnet Beschreibung */
.person-knopf { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.person-knopf:focus-visible { outline: 2px solid var(--wein); outline-offset: 4px; }
.person-knopf .foto { transition: opacity 0.2s ease; }
.person-knopf:hover .foto { opacity: 0.88; }
.person-knopf .mehr { display: block; margin-top: 0.35rem; font-style: normal; font-size: 0.9rem; color: var(--wein); font-weight: 600; }
.person-knopf:hover .mehr { text-decoration: underline; }
.person > .beschr { display: none; }
[hidden] { display: none !important; }
.zurueck { border: 0; background: none; padding: 0; margin: 0 0 1.4rem; font: inherit; font-weight: 600; color: var(--wein); cursor: pointer; }
.zurueck:hover { text-decoration: underline; }
.detail-karte { display: grid; gap: 1.4rem 2.4rem; align-items: start; }
@media (min-width: 700px) { .detail-karte { grid-template-columns: minmax(200px, 320px) 1fr; } }
.detail-karte .foto { margin: 0; }
.detail-text h3 { font-size: 2rem; margin: 0 0 0.2rem; }
.detail-text .rolle { margin: 0 0 1rem; color: var(--leise); }
.detail-text .beschr { display: block; font-size: 1.1rem; line-height: 1.6; }

/* weicher Übergang am oberen Bildrand */
.hero-bild .foto { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 8%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.88) 38%, #000 52%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 8%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.88) 38%, #000 52%); }
.hero-bild::after { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 8%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.88) 38%, #000 52%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 8%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.88) 38%, #000 52%); }

/* ===== Einstieg als ein Bild, im Stil der Bildbänder weiter unten ===== */
.einstieg { position: relative; overflow: hidden; background: #3c0a1a; color: #fff; padding: 0; min-height: 0; display: block; }
.einstieg::before { display: none !important; }
.einstieg .wrap { position: relative; z-index: 2; display: block; padding: 7.5rem 1.5rem 3.2rem; }
.einstieg-logo { position: absolute !important; top: 1.6rem !important; right: 1.5rem !important; left: auto !important; margin: 0 !important; z-index: 3; }
.einstieg-logo img { height: 84px !important; }
.einstieg-text { display: block !important; padding: 0 !important; max-width: 40rem; }
.einstieg h1 { color: #fff; font-size: clamp(2.3rem, 7vw, 4.6rem); margin: 0 0 0.35em; }
.einstieg .lead, .einstieg .lead strong { color: #fff; }
.einstieg .lead { margin-bottom: 0.8rem; }
.einstieg .lead-klein { color: #ecd9de; margin: 0 0 1rem !important; }
.einstieg .schwerpunkte { color: #f3d3db; margin: 0 0 1.8rem; }
.einstieg .knopf:not(.hell):not(.leer) { background: #f3ece9; color: var(--wein); }
.einstieg .knopf:not(.hell):not(.leer):hover { background: #fff; }
.einstieg .aktionen a:not(.knopf), .einstieg .text-knopf { color: #fff; }
.einstieg .hero-bild { position: absolute !important; inset: 0 !important; margin: 0 !important; z-index: 0; -webkit-mask-image: none !important; mask-image: none !important; align-self: auto; }
.einstieg .hero-bild .foto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; -webkit-mask-image: none !important; mask-image: none !important; background: transparent; }
.einstieg .hero-bild .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62% !important; }
.einstieg .hero-bild::after { background: linear-gradient(to right, rgba(60,10,26,.94) 0%, rgba(60,10,26,.8) 30%, rgba(60,10,26,.38) 62%, rgba(60,10,26,.18) 100%) !important; -webkit-mask-image: none !important; mask-image: none !important; }
@media (max-width: 899px) {
  .einstieg .hero-bild::after { background: linear-gradient(to bottom, rgba(60,10,26,.82) 0%, rgba(60,10,26,.7) 55%, rgba(60,10,26,.55) 100%) !important; }
  .einstieg .hero-bild .foto img { object-position: 68% 60% !important; }
}
@media (min-width: 900px) {
  .einstieg { min-height: min(100svh, 820px); display: flex; align-items: center; }
  .einstieg .wrap { padding: 8rem 1.5rem 5rem; width: 100%; }
  .einstieg-logo { right: 2.5rem !important; }
}
.einstieg .wrap { position: static !important; }
.einstieg-text { position: relative; z-index: 2; }
.einstieg .wrap { max-width: var(--seite); margin: 0 auto; }
.einstieg-text { max-width: 48rem; }
@media (min-width: 900px) {
  .einstieg .hero-bild { left: 30% !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 14%, #000 34%) !important; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 14%, #000 34%) !important; }
  .einstieg .hero-bild::after { background: linear-gradient(to right, rgba(60,10,26,.35) 0%, rgba(60,10,26,.22) 50%, rgba(60,10,26,.12) 100%) !important; }
  .einstieg .hero-bild .foto img { object-position: 50% 62% !important; }
}
@media (max-width: 899px) {
  .einstieg .wrap { padding-top: 9rem; padding-bottom: 3.6rem; }
  .einstieg .hero-bild .bildnachweis { top: auto; bottom: 0.6rem; }
}
@media (min-width: 900px) {
  .einstieg .hero-bild { left: 26% !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.75) 10%, #000 20%) !important; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.75) 10%, #000 20%) !important; }
  .einstieg .lead, .einstieg .lead-klein, .einstieg .schwerpunkte { text-shadow: 0 1px 14px rgba(40,6,18,.75); }
}
@media (min-width: 900px) {
  .einstieg .hero-bild { left: 33% !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.8) 7%, #000 15%) !important; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.8) 7%, #000 15%) !important; }
}

/* schmale Ansicht: Text oben, Foto darunter, beide Spieler sichtbar */
@media (max-width: 899px) {
  .einstieg .hero-bild { top: auto !important; bottom: 0 !important; height: 76vw; max-height: 560px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%) !important; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%) !important; }
  .einstieg .hero-bild .foto img { object-position: 50% 60% !important; }
  .einstieg .hero-bild::after { background: rgba(60,10,26,.12) !important; }
  .einstieg .wrap { padding-bottom: calc(min(76vw, 560px) * 0.62) !important; }
  .einstieg .hero-bild .bildnachweis { bottom: 0.4rem; }
}

/* ===== Einstieg: überall gleich aufgebaut – Text oben, Foto darunter, beide Spieler sichtbar ===== */
.einstieg { display: block !important; min-height: 0 !important; }
.einstieg .wrap { padding: 8.2rem 1.5rem calc(var(--hh) * 0.6) !important; }
.einstieg { --hh: clamp(300px, 54vw, 720px); }
.einstieg-text { max-width: 60rem !important; }
.einstieg .hero-bild { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; height: var(--hh) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 14%, rgba(0,0,0,.75) 32%, #000 52%) !important;
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 14%, rgba(0,0,0,.75) 32%, #000 52%) !important; }
.einstieg .hero-bild .foto img { object-position: 50% 78% !important; }
.einstieg .hero-bild::after { background: rgba(60,10,26,.12) !important; }
@media (min-width: 900px) { .einstieg .wrap { padding-top: 9rem !important; } .einstieg-logo { top: 1.8rem !important; } }
.einstieg { --hh: clamp(300px, 50vw, 660px); }
.einstieg .wrap { padding-bottom: calc(var(--hh) * 0.82) !important; }
.einstieg { --hh: clamp(320px, 58vw, 780px); }
.einstieg .wrap { padding-bottom: calc(var(--hh) * 0.74) !important; }
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 9%, rgba(0,0,0,.85) 20%, #000 30%) !important; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 9%, rgba(0,0,0,.85) 20%, #000 30%) !important; }
.einstieg .hero-bild::after { background: rgba(60,10,26,.04) !important; }
.einstieg .hero-bild .foto img { object-position: 50% 72% !important; }
/* schräger, weicher Übergang statt gerader Linie */
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(171deg, transparent 0px, rgba(0,0,0,.18) 60px, rgba(0,0,0,.5) 150px, rgba(0,0,0,.82) 250px, #000 350px) !important; mask-image: linear-gradient(171deg, transparent 0px, rgba(0,0,0,.18) 60px, rgba(0,0,0,.5) 150px, rgba(0,0,0,.82) 250px, #000 350px) !important; }
@media (max-width: 899px) { .einstieg .hero-bild { -webkit-mask-image: linear-gradient(170deg, transparent 0px, rgba(0,0,0,.2) 40px, rgba(0,0,0,.55) 100px, rgba(0,0,0,.85) 160px, #000 220px) !important; mask-image: linear-gradient(170deg, transparent 0px, rgba(0,0,0,.2) 40px, rgba(0,0,0,.55) 100px, rgba(0,0,0,.85) 160px, #000 220px) !important; } }
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(171deg, transparent 0px, transparent 232px, rgba(0,0,0,.14) 290px, rgba(0,0,0,.45) 380px, rgba(0,0,0,.8) 480px, #000 590px) !important; mask-image: linear-gradient(171deg, transparent 0px, transparent 232px, rgba(0,0,0,.14) 290px, rgba(0,0,0,.45) 380px, rgba(0,0,0,.8) 480px, #000 590px) !important; }
@media (max-width: 899px) { .einstieg .hero-bild { -webkit-mask-image: linear-gradient(170deg, transparent 0px, transparent 70px, rgba(0,0,0,.18) 100px, rgba(0,0,0,.5) 160px, rgba(0,0,0,.85) 220px, #000 280px) !important; mask-image: linear-gradient(170deg, transparent 0px, transparent 70px, rgba(0,0,0,.18) 100px, rgba(0,0,0,.5) 160px, rgba(0,0,0,.85) 220px, #000 280px) !important; } }
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(174deg, transparent 0px, transparent 150px, rgba(0,0,0,.16) 190px, rgba(0,0,0,.5) 255px, rgba(0,0,0,.85) 325px, #000 395px) !important; mask-image: linear-gradient(174deg, transparent 0px, transparent 150px, rgba(0,0,0,.16) 190px, rgba(0,0,0,.5) 255px, rgba(0,0,0,.85) 325px, #000 395px) !important; }
@media (max-width: 899px) { .einstieg .hero-bild { -webkit-mask-image: linear-gradient(172deg, transparent 0px, transparent 48px, rgba(0,0,0,.2) 75px, rgba(0,0,0,.55) 120px, rgba(0,0,0,.88) 170px, #000 215px) !important; mask-image: linear-gradient(172deg, transparent 0px, transparent 48px, rgba(0,0,0,.2) 75px, rgba(0,0,0,.55) 120px, rgba(0,0,0,.88) 170px, #000 215px) !important; } }
/* noch weniger Schatten: Foto beginnt höher, kürzerer Übergang */
.einstieg .wrap { padding-bottom: calc(var(--hh) * 0.64) !important; }
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(174deg, transparent 0px, transparent 150px, rgba(0,0,0,.3) 180px, rgba(0,0,0,.65) 225px, rgba(0,0,0,.92) 275px, #000 320px) !important; mask-image: linear-gradient(174deg, transparent 0px, transparent 150px, rgba(0,0,0,.3) 180px, rgba(0,0,0,.65) 225px, rgba(0,0,0,.92) 275px, #000 320px) !important; }
@media (max-width: 899px) { .einstieg .hero-bild { -webkit-mask-image: linear-gradient(172deg, transparent 0px, transparent 48px, rgba(0,0,0,.3) 68px, rgba(0,0,0,.65) 100px, rgba(0,0,0,.92) 135px, #000 170px) !important; mask-image: linear-gradient(172deg, transparent 0px, transparent 48px, rgba(0,0,0,.3) 68px, rgba(0,0,0,.65) 100px, rgba(0,0,0,.92) 135px, #000 170px) !important; } }
.einstieg .wrap { padding-bottom: calc(var(--hh) * 0.71) !important; }
/* feinerer Übergang, mehr Bild, weniger Rot */
.einstieg { background: #2c1219; --hh: clamp(340px, 62vw, 840px); }
.einstieg .wrap { padding-bottom: calc(var(--hh) * 0.66) !important; }
.einstieg-logo img { filter: none; }
.einstieg .hero-bild::after { background: transparent !important; }
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(174deg, transparent 0px, transparent 120px, rgba(0,0,0,.03) 150px, rgba(0,0,0,.08) 185px, rgba(0,0,0,.17) 225px, rgba(0,0,0,.3) 270px, rgba(0,0,0,.46) 320px, rgba(0,0,0,.63) 375px, rgba(0,0,0,.78) 430px, rgba(0,0,0,.9) 490px, rgba(0,0,0,.97) 550px, #000 600px) !important; mask-image: linear-gradient(174deg, transparent 0px, transparent 120px, rgba(0,0,0,.03) 150px, rgba(0,0,0,.08) 185px, rgba(0,0,0,.17) 225px, rgba(0,0,0,.3) 270px, rgba(0,0,0,.46) 320px, rgba(0,0,0,.63) 375px, rgba(0,0,0,.78) 430px, rgba(0,0,0,.9) 490px, rgba(0,0,0,.97) 550px, #000 600px) !important; }
@media (max-width: 899px) { .einstieg .hero-bild { -webkit-mask-image: linear-gradient(172deg, transparent 0px, transparent 40px, rgba(0,0,0,.05) 60px, rgba(0,0,0,.14) 85px, rgba(0,0,0,.3) 115px, rgba(0,0,0,.52) 150px, rgba(0,0,0,.74) 190px, rgba(0,0,0,.9) 235px, #000 280px) !important; mask-image: linear-gradient(172deg, transparent 0px, transparent 40px, rgba(0,0,0,.05) 60px, rgba(0,0,0,.14) 85px, rgba(0,0,0,.3) 115px, rgba(0,0,0,.52) 150px, rgba(0,0,0,.74) 190px, rgba(0,0,0,.9) 235px, #000 280px) !important; } }
@media (min-width: 900px) { .einstieg .wrap { padding-bottom: calc(var(--hh) * 0.71) !important; } }
/* gleiche Weinfarbe wie die anderen Bereiche, kleinerer Farbanteil, längerer weicher Übergang */
.einstieg { background: var(--wein); --hh: clamp(360px, 70vw, 940px); }
.einstieg .wrap { padding-bottom: calc(var(--hh) * 0.60) !important; }
@media (min-width: 900px) { .einstieg .wrap { padding-bottom: calc(var(--hh) * 0.60) !important; } }
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(174deg, transparent 0px, transparent 90px, rgba(0,0,0,.03) 140px, rgba(0,0,0,.08) 200px, rgba(0,0,0,.16) 270px, rgba(0,0,0,.27) 350px, rgba(0,0,0,.41) 440px, rgba(0,0,0,.56) 540px, rgba(0,0,0,.71) 640px, rgba(0,0,0,.84) 740px, rgba(0,0,0,.94) 840px, #000 930px) !important; mask-image: linear-gradient(174deg, transparent 0px, transparent 90px, rgba(0,0,0,.03) 140px, rgba(0,0,0,.08) 200px, rgba(0,0,0,.16) 270px, rgba(0,0,0,.27) 350px, rgba(0,0,0,.41) 440px, rgba(0,0,0,.56) 540px, rgba(0,0,0,.71) 640px, rgba(0,0,0,.84) 740px, rgba(0,0,0,.94) 840px, #000 930px) !important; }
@media (max-width: 899px) { .einstieg .hero-bild { -webkit-mask-image: linear-gradient(172deg, transparent 0px, transparent 30px, rgba(0,0,0,.05) 60px, rgba(0,0,0,.14) 100px, rgba(0,0,0,.3) 145px, rgba(0,0,0,.5) 195px, rgba(0,0,0,.72) 250px, rgba(0,0,0,.9) 305px, #000 360px) !important; mask-image: linear-gradient(172deg, transparent 0px, transparent 30px, rgba(0,0,0,.05) 60px, rgba(0,0,0,.14) 100px, rgba(0,0,0,.3) 145px, rgba(0,0,0,.5) 195px, rgba(0,0,0,.72) 250px, rgba(0,0,0,.9) 305px, #000 360px) !important; } }
@media (min-width: 900px) { .einstieg .wrap { padding-bottom: calc(var(--hh) * 0.64) !important; } }
/* Rot weiter nach oben, Spieler im Fokus */
.einstieg .hero-bild { -webkit-mask-image: linear-gradient(174deg, transparent 0px, transparent 80px, rgba(0,0,0,.04) 110px, rgba(0,0,0,.12) 150px, rgba(0,0,0,.26) 195px, rgba(0,0,0,.44) 245px, rgba(0,0,0,.63) 300px, rgba(0,0,0,.8) 360px, rgba(0,0,0,.93) 420px, #000 480px) !important; mask-image: linear-gradient(174deg, transparent 0px, transparent 80px, rgba(0,0,0,.04) 110px, rgba(0,0,0,.12) 150px, rgba(0,0,0,.26) 195px, rgba(0,0,0,.44) 245px, rgba(0,0,0,.63) 300px, rgba(0,0,0,.8) 360px, rgba(0,0,0,.93) 420px, #000 480px) !important; }
@media (min-width: 900px) { .einstieg .wrap { padding-bottom: calc(var(--hh) * 0.68) !important; } }
@media (max-width: 899px) { .einstieg .hero-bild { -webkit-mask-image: linear-gradient(172deg, transparent 0px, transparent 25px, rgba(0,0,0,.06) 45px, rgba(0,0,0,.2) 75px, rgba(0,0,0,.45) 110px, rgba(0,0,0,.72) 150px, rgba(0,0,0,.92) 190px, #000 225px) !important; mask-image: linear-gradient(172deg, transparent 0px, transparent 25px, rgba(0,0,0,.06) 45px, rgba(0,0,0,.2) 75px, rgba(0,0,0,.45) 110px, rgba(0,0,0,.72) 150px, rgba(0,0,0,.92) 190px, #000 225px) !important; } }

/* Schließen-Knopf: nur ein Rahmen */
.fenster .schliessen { outline: none; box-shadow: none; }
.fenster .schliessen:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Handy: weniger Rot, mehr Foto */
@media (max-width: 899px) {
  .einstieg { --hh: 118vw; }
  .einstieg .wrap { padding-top: 6.2rem !important; padding-bottom: calc(var(--hh) * 0.34) !important; }
  .einstieg h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); margin-bottom: 0.3em; }
  .einstieg .lead { font-size: 1.2rem; margin-bottom: 0.5rem; }
  .einstieg .lead-klein { font-size: 1rem; margin-bottom: 0.7rem !important; }
  .einstieg .schwerpunkte { margin-bottom: 1.2rem; font-size: 0.98rem; }
  .einstieg .aktionen { gap: 0.9rem 1.2rem; }
  .einstieg .hero-bild { height: var(--hh) !important; max-height: none !important;
    -webkit-mask-image: linear-gradient(176deg, transparent 0px, transparent 10px, rgba(0,0,0,.08) 60px, rgba(0,0,0,.3) 130px, rgba(0,0,0,.6) 200px, rgba(0,0,0,.88) 270px, #000 330px) !important;
            mask-image: linear-gradient(176deg, transparent 0px, transparent 10px, rgba(0,0,0,.08) 60px, rgba(0,0,0,.3) 130px, rgba(0,0,0,.6) 200px, rgba(0,0,0,.88) 270px, #000 330px) !important; }
  .einstieg .hero-bild .foto img { object-position: 38% 70% !important; }
}
@media (max-width: 899px) { .einstieg-logo img { height: 66px !important; } .einstieg-logo { top: 1.1rem !important; } .einstieg .wrap { padding-top: 6.4rem !important; } }
/* Handy: beide Spieler sichtbar */
@media (max-width: 899px) {
  .einstieg { --hh: 96vw; }
  .einstieg .wrap { padding-bottom: calc(var(--hh) * 0.42) !important; }
  .einstieg .hero-bild { -webkit-mask-image: linear-gradient(176deg, transparent 0px, transparent 6px, rgba(0,0,0,.1) 40px, rgba(0,0,0,.35) 95px, rgba(0,0,0,.65) 150px, rgba(0,0,0,.9) 200px, #000 245px) !important; mask-image: linear-gradient(176deg, transparent 0px, transparent 6px, rgba(0,0,0,.1) 40px, rgba(0,0,0,.35) 95px, rgba(0,0,0,.65) 150px, rgba(0,0,0,.9) 200px, #000 245px) !important; }
  .einstieg .hero-bild .foto img { object-position: 16% 75% !important; }
}
@media (max-width: 899px) {
  .einstieg { --hh: 100vw; }
  .einstieg .wrap { padding-bottom: calc(var(--hh) * 0.58) !important; }
  .einstieg .hero-bild { -webkit-mask-image: linear-gradient(176deg, transparent 0px, transparent 4px, rgba(0,0,0,.12) 30px, rgba(0,0,0,.4) 75px, rgba(0,0,0,.7) 120px, rgba(0,0,0,.92) 165px, #000 205px) !important; mask-image: linear-gradient(176deg, transparent 0px, transparent 4px, rgba(0,0,0,.12) 30px, rgba(0,0,0,.4) 75px, rgba(0,0,0,.7) 120px, rgba(0,0,0,.92) 165px, #000 205px) !important; }
}

.rabatt-zeile { margin: 1.6rem 0 0; font-weight: 600; color: var(--wein); max-width: none; }

/* Trainerbeschreibungen */
.detail-text .beschr { max-width: 62ch; }
.detail-text .beschr p { margin: 0 0 0.9rem; font-size: 1.05rem; line-height: 1.62; max-width: none; }
.detail-text .beschr h4 { margin: 1.5rem 0 0.5rem; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wein); }
.detail-text .beschr ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.detail-text .beschr li { margin: 0.15rem 0; line-height: 1.5; }
.detail-text .beschr .fakten { margin: 0 0 0.6rem; display: grid; gap: 0.55rem; }
.detail-text .beschr .fakten dt { font-size: 0.82rem; color: var(--leise); }
.detail-text .beschr .fakten dd { margin: 0; line-height: 1.45; }
.detail-text .beschr .zitat { font-size: 1.2rem; font-weight: 600; color: var(--wein); line-height: 1.35; letter-spacing: -0.01em; }
.detail-text .beschr.leer p { color: var(--leise); }

/* Kontaktformular */
.anfrage-raster { display: grid; gap: 2.2rem; margin-top: 0.4rem; }
@media (min-width: 900px) { .anfrage-raster { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; } }
.anfrage-form { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 1.5rem 1.4rem 1.6rem; backdrop-filter: blur(6px); display: grid; gap: 0.9rem; }
.anfrage-form h3 { margin: 0 0 0.2rem; color: #fff; font-size: 1.25rem; }
.anfrage-form label { display: grid; gap: 0.3rem; font-size: 0.9rem; color: #f0dde2; }
.anfrage-form input[type=text], .anfrage-form textarea { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(255,255,255,.94); color: var(--tinte); width: 100%; }
.anfrage-form textarea { resize: vertical; min-height: 7rem; }
.anfrage-form input:focus-visible, .anfrage-form textarea:focus-visible { outline: 2px solid #f3d3db; outline-offset: 2px; }
.anfrage-form .zustimmung { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.4; }
.anfrage-form .zustimmung input { margin-top: 0.2rem; flex: none; accent-color: var(--wein); }
.anfrage-form .knopf { justify-self: start; background: #f3ece9; color: var(--wein); border-color: #f3ece9; cursor: pointer; }
.anfrage-form .knopf:hover { background: #fff; border-color: #fff; color: var(--wein); }
.anfrage-form .form-status { margin: 0; color: #fff; font-weight: 600; }
.falle { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Trainer-Detail am Handy: kleines Foto neben dem Namen, Text darunter */
@media (max-width: 699px) {
  .detail-karte { grid-template-columns: 112px 1fr; gap: 0.2rem 1.1rem; align-items: center; }
  .detail-text { display: contents; }
  .detail-foto { grid-row: 1 / span 2; }
  .detail-text h3 { grid-column: 2; align-self: end; font-size: 1.5rem; margin: 0; }
  .detail-text .rolle { grid-column: 2; align-self: start; margin: 0; }
  .detail-text .beschr { grid-column: 1 / -1; margin-top: 1.2rem; }
}
@media (max-width: 699px) {
  .detail-karte { grid-template-columns: minmax(0, 46%) 1fr; gap: 0.2rem 1rem; }
  .detail-text h3 { font-size: 1.4rem; }
}
@media (max-width: 699px) { .detail-karte { grid-template-columns: minmax(0, 56%) 1fr; gap: 0.2rem 0.9rem; } .detail-text h3 { font-size: 1.3rem; } }

/* Trainer-Detail am Handy: grosses Foto, Name darunter, Text beginnt sichtbar darunter */
@media (max-width: 699px) {
  .detail-karte { display: block; }
  .detail-text { display: block; }
  .detail-foto { width: 100%; }
  .detail-foto .foto { width: 100%; aspect-ratio: 1 / 1; max-height: 46vh; margin: 0; }
  .detail-foto .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  .detail-text h3 { font-size: 1.45rem; margin: 0.9rem 0 0.1rem; }
  .detail-text .rolle { margin: 0; }
  .detail-text .beschr { margin-top: 1rem; }
}

/* Trainer ohne Beschreibung: nicht klickbar, kein "Mehr erfahren" */
.person-knopf.ohne { cursor: default; }
.person-knopf.ohne:hover .foto { opacity: 1; }