@import url("fonts.css");

/* ============================================================================
   RossVita
   Dunkel, warm, filmisch, typografiegefuehrt.

   Die Entscheidung dahinter: das Bildmaterial sind Handyfotos aus harter
   Mittagssonne. Gross und hell gezeigt verstaerkt das ihre Schwaeche. Dunkel,
   eng geschnitten und warm gradiert werden sie zu Fragmenten — und Fragmente
   wirken absichtlich.

   Deshalb traegt hier die SCHRIFT, nicht das Foto. Grosse Serifen, gesperrte
   Versalien, Haarlinien, unterstrichene Textlinks statt fetter Knoepfe.
   ========================================================================= */

:root {
  /* Dunkel — die Grundstimmung. Tiefes Petrol (blaugruen, gedeckt, hochwertig).
     Gold (Messing) bleibt der einzige Akzent — petrol+gold wirkt ruhig und
     vertrauenswuerdig. */
  --nacht:       #1E5C5C;
  --nacht-2:     #266565;
  --nacht-3:     #2E7070;
  --kopf:        #123F40;   /* Menueleiste: dunkler als die Seite, damit sie sich abhebt */

  /* Hell — die Lesebereiche */
  --papier:      #F7F1E0;
  --papier-2:    #EFE8D3;

  /* Messing — der einzige Akzent. Genau einer. */
  --messing:     #DDBE88;
  --messing-tief:#96703C;

  /* Schrift auf dunkel */
  --hell:        #F4F7F3;
  --hell-leise:  #BFD8D5;
  /* Schrift auf hell */
  --dunkel:      #0F3B3C;
  --dunkel-leise:#3F6668;

  --linie-hell:  rgba(244,247,243,.22);
  --linie-dunkel:rgba(15,59,60,.18);

  --breite:      1240px;
  --eng:         680px;
  --ruhig:       .7s cubic-bezier(.19,1,.22,1);
  --sehr-ruhig:  1.15s cubic-bezier(.19,1,.22,1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;                    /* 16px Basis, wie bei ruhigen Business-/Coaching-Seiten */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;                 /* mobiles Menue liegt rechts ausserhalb */
}
@supports (overflow-x: clip) { html { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--hell-leise);
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Typografie ----------------------------------------------------------
   Gleiche Schriften wie auf rossvita.de: Playfair Display fuer Ueberschriften,
   Source Sans 3 als Fliesstext — auf Wunsch von Jennifer, selbst gehostet. */

h1, h2, h3 {
  font-family: "Pontano Sans", Arial, sans-serif;
  font-weight: 400;
  color: var(--hell);
  margin: 0 0 .48em;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2rem, 3.4vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -.032em;
}
h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.2;
}
h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.42rem);
  line-height: 1.3;
}

p { margin: 0 0 1.2em; max-width: 62ch; }
.gross { font-size: clamp(1.12rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--hell); font-weight: 400; }

/* Gesperrte Versalien — das Erkennungszeichen. Klein, ruhig, sicher. */
.marke {
  display: block;
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--messing);
  font-weight: 700;
  margin: 0 0 1.6rem;
}

/* Auf hellen Baendern kippt die Schriftfarbe */
.hell-band { background: var(--papier); color: var(--dunkel-leise); }
.hell-band h1, .hell-band h2, .hell-band h3, .hell-band .gross { color: var(--dunkel); }
.hell-band .marke { color: var(--messing-tief); }
.hell-band-2 { background: var(--papier-2); color: var(--dunkel-leise); }
.hell-band-2 h1, .hell-band-2 h2, .hell-band-2 h3, .hell-band-2 .gross { color: var(--dunkel); }
.hell-band-2 .marke { color: var(--messing-tief); }

/* --- Textlink mit Haarlinie. Ersetzt fast alle Knoepfe. ------------------ */
.pfad {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--hell);
  text-decoration: none;
  padding-bottom: .55rem;
  position: relative;
}
.pfad::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; opacity: .42;
  transform-origin: left; transition: transform var(--ruhig), opacity var(--ruhig);
}
.pfad:hover::after { opacity: 1; transform: scaleX(1.06); }
/* Alle Link-Knoepfe (Telefon, Kosten, Angebote ansehen ...): weisser Kasten, gleiche Groesse wie
   der Termin-Knopf. Das "Ansehen" in den Tueren ist ein <span> und bleibt Textlink. */
a.pfad, .hell-band a.pfad, .hell-band-2 a.pfad {
  background: #fff; color: var(--nacht); padding: .7rem 1.4rem; font-size: .72rem;
  letter-spacing: .12em; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--linie-dunkel);
}
a.pfad::after { display: none; }
a.pfad:hover { background: var(--messing); }
.hell-band .pfad, .hell-band-2 .pfad { color: var(--dunkel); }

/* Der EINE gefuellte Knopf. Sparsam, sonst verliert er seine Wirkung. */
.knopf {
  display: inline-block;
  padding: .7rem 1.4rem;
  background: var(--messing);
  color: var(--nacht);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background var(--ruhig), color var(--ruhig);
}
.knopf:hover { background: var(--hell); color: var(--nacht); }
.knopf--linie {
  background: transparent; color: var(--hell);
  box-shadow: inset 0 0 0 1px var(--linie-hell);
}
.knopf--linie:hover { background: var(--hell); color: var(--nacht); box-shadow: none; }
.hell-band .knopf--linie, .hell-band-2 .knopf--linie { color: var(--dunkel); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
/* Zweiter, ebenfalls gefuellter Knopf — heller statt Messing, damit er neben
   dem Hauptknopf genauso sichtbar ist, aber erkennbar zweitrangig bleibt. */
.knopf--hell { background: var(--hell); color: var(--nacht); }
.knopf--hell:hover { background: var(--messing); color: var(--nacht); }
.hell-band .knopf--linie:hover, .hell-band-2 .knopf--linie:hover { background: var(--dunkel); color: var(--papier); }

/* Sprungmarken: nicht unter der festen Kopfzeile verschwinden */
[id] { scroll-margin-top: 6.5rem; }
/* "Auf dieser Seite": kleine Orientierungszeile unter dem Seitenanfang */
.seitennav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline; margin-top: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); font-size: .9rem; }
.seitennav span { font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing); font-weight: 700; }
.seitennav a { color: var(--hell); text-decoration: none; border-bottom: 1px solid var(--linie-hell); padding-bottom: .1rem; }
.seitennav a:hover { border-bottom-color: var(--messing); }

/* --- Raster --------------------------------------------------------------- */
.huelle { width: min(100% - 2.8rem, var(--breite)); margin-inline: auto; }
.huelle-eng { width: min(100% - 2.8rem, var(--breite)); margin-inline: auto; }
/* Schmale Lesespalte nur, wo sie sinnvoll ist: Rechtstexte, Formular, zentrierte Schlussbloecke */
.huelle-eng.schmal { width: min(100% - 2.8rem, var(--eng)); }
/* Ganze Seitenbreite: Saetze laufen ueber die volle Breite aus, keine schmale Lesespalte */
.huelle:not(.zitat) :is(p, .frage__inhalt), .huelle-eng:not(.schmal):not(.zitat) :is(p, .frage__inhalt) { max-width: none; }

.band { padding: 3mm 0; }
.band--knapp { padding: 2mm 0; }

/* --- Kopf ----------------------------------------------------------------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: .9rem 0;
  background: var(--kopf);
  box-shadow: 0 1px 0 rgba(244,247,243,.14), 0 8px 24px rgba(0,0,0,.16);
  transition: padding var(--ruhig);
}
.kopf.ist-gescrollt { padding: .65rem 0; }

.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Pontano Sans", sans-serif;
  font-size: 2rem; letter-spacing: .02em;
  color: var(--hell); text-decoration: none; font-weight: 600;
  padding-block: .25rem;               /* 24px Tippziel, auch im Fuss */
  text-shadow: 0 1px 4px rgba(15,59,60,.7);
}
.logo__bild { height: 3rem; width: auto; display: block; }
/* Schriftzug: weiche, runde Schrift wie auf dem Tuerschild, einfarbig. */
.logo__wort { font-family: "Pontano Sans", sans-serif; font-weight: 700; letter-spacing: -.01em; }

.nav { display: flex; align-items: center; gap: 2.4rem; }
.nav a {
  white-space: nowrap;
  color: var(--hell-leise); text-decoration: none;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  position: relative; padding: .5rem 0;
  transition: color var(--ruhig);
  text-shadow: 0 1px 4px rgba(15,59,60,.7);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px;
  background: var(--messing); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ruhig);
}
/* Der Termin-Knopf in der Navigation ist ein .knopf (gefuellt, dunkler Text) und
   kein normaler Nav-Link — ohne diese Regel gewinnt ".nav a" durch hoehere
   Spezifitaet und macht den Text auf dem goldenen Grund fast unlesbar. */
.nav a.knopf {
  color: var(--nacht); text-shadow: none; padding: .65rem 1.3rem;
}
.nav a.knopf::after { display: none; }
/* Desktop: jeder Menuepunkt ein eigenes Feld, der aktuelle Punkt heller hinterlegt. */
@media (min-width: 1121px) {
  .nav { gap: .2rem; }
  .nav a { padding: .55rem .65rem; letter-spacing: .12em; border-radius: 0; }
  .nav a::after { display: none; }
  .nav a:hover { background: rgba(244,247,243,.1); }
  .nav a[aria-current="page"] { background: rgba(244,247,243,.16); }
  .nav a.knopf { border-radius: 0; margin-left: .8rem; }
  .nav a.knopf:hover { background: var(--hell); }
}
.nav a:hover { color: var(--hell); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--hell); }

.nav-schalter { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; color: var(--hell); }
.nav-schalter svg { display: block; }

/* Seiten ohne Hero brauchen Platz unter der festen Kopfzeile. */
.ohne-hero { padding-top: clamp(6.5rem, 11vw, 9rem); }

/* --- Hero ---------------------------------------------------------------
   Fruehere Fassung 1: Vollbild mit object-fit: cover, Text darueber. Beschnitt das
   Pferd und setzte die Schrift auf helles Gras.
   Fruehere Fassung 2: Foto als gerahmte Tafel, Zitat zentriert direkt darunter.
   Jetzt, auf Jennifers Wunsch: Text und Foto wieder nebeneinander, Text links,
   Pferd rechts — und die Schrift insgesamt groesser, der Coaching-Hinweis oben
   ("Pferdegestuetztes Coaching · Freiburg") deutlich groesser als zuvor. */
.hero { padding: clamp(7rem, 11vw, 9rem) 0 clamp(2rem, 4vw, 3rem); }
/* Text und Foto nebeneinander, normal grosses Bild statt Vollbild-Hintergrund.
   Das Foto ist gerahmt wie jedes andere Bild der Seite (.rahmen), keine
   Sonderrolle mehr. Am Handy stapelt sich alles normal, Text zuerst. */
.hero__innen {
  --ueberlapp: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; align-items: start;
}
.hero__foto img { width: 100%; height: auto; display: block; }
/* Stil des Tuerschilds: abgerundete Ecken, Text in weisser Umrandung. Das Foto liegt
   ueber dem Rahmen, oben etwas hoeher, der Rahmen ragt unten ueber das Foto hinaus. */
.hero__foto {
  grid-column: 2; grid-row: 1; position: relative; z-index: 2;
  margin: 0 0 .5rem calc(var(--ueberlapp) * -1); border-radius: 18px;
}
.hero__text {
  grid-column: 1; grid-row: 1; align-self: stretch; margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; justify-content: center;
  border: 2px solid rgba(244,247,243,.9); border-radius: 28px;
  padding: clamp(1.6rem, 3.2vw, 2.8rem);
  padding-right: calc(var(--ueberlapp) + clamp(1.4rem, 2.6vw, 2.2rem));
}
.hero__marke {
  display: block; font-family: "Pontano Sans", sans-serif; font-style: normal;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: .02em;
  text-transform: none; font-weight: 700; color: var(--messing); margin: 0 0 1.1rem;
}
.hero h1 { font-family: "Pontano Sans", sans-serif; font-weight: 700; font-style: normal; letter-spacing: -.01em; margin-bottom: .7rem; font-size: clamp(2rem, 3.4vw, 2.55rem); }
.hero__unter {
  color: var(--hell);
  font-size: clamp(1rem, 1.2vw, 1.1rem); margin-bottom: 2rem;
}
@media (max-width: 900px) {
  .hero { padding-top: clamp(6rem, 18vw, 8rem); }
  .hero__innen { grid-template-columns: 1fr; gap: 2rem; }
  .hero__foto { grid-column: 1; grid-row: 2; margin: 0; }
  .hero__text { grid-column: 1; grid-row: 1; margin-top: 0; padding-right: clamp(1.6rem, 3.2vw, 2.8rem); }
  .hero h1 { max-width: 100%; }
}
/* Feine Zeile unter dem Hero: Ort, Zielgruppen, die zwei wichtigsten Fakten. */
.hero__signatur {
  grid-column: 2; grid-row: 1; align-self: end; margin: 0; max-width: none; text-align: right; z-index: 3;
  font-family: "Caveat", cursive; font-weight: 700; color: #fff;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.15; padding-right: .4rem; white-space: nowrap;
}
.hero__signatur span { font-size: .85em; }
@media (max-width: 900px) { .hero__signatur { grid-column: 1; grid-row: 3; } }
.hero__fuss { border-top: 1px solid var(--linie-hell); margin-top: clamp(2.5rem, 5vw, 4rem); }
.hero__fuss div {
  display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; padding: 1.2rem 0;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--hell-leise);
}

/* --- Haarlinie ueber jedem Abschnitt --------------------------------------- */
.kapitel {
  border-top: 1px solid var(--linie-hell); padding-top: 1rem; margin-bottom: 1.2rem;
}
.hell-band .kapitel, .hell-band-2 .kapitel { border-top-color: var(--linie-dunkel); }
.kapitel h2 { margin-bottom: 0; }

/* --- Die zwei Tueren -----------------------------------------------------
   Frueher: Bild als Hintergrund mit object-fit: cover, Text darauf. Beides hat
   geschnitten. Jetzt liegt das ganze Foto oben, der Text darunter auf dunklem Grund. */
.tueren {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem);
  width: min(100% - 2.8rem, var(--breite)); margin: 0 auto clamp(2rem, 4vw, 3.2rem);
}
@media (max-width: 820px) { .tueren { grid-template-columns: 1fr; } }
.tuer {
  display: flex; flex-direction: column; text-decoration: none; background: var(--nacht-2);
  border: 1px solid var(--linie-hell); border-radius: 18px; overflow: hidden;
  transition: background var(--ruhig);
}
.tuer:hover { background: var(--nacht-3); }
/* Beide Fotos sind hochformatig, aber leicht unterschiedlich im Seitenverhaeltnis
   (768x1024 und 768x1093). Jennifer will beide Fotos VOLLSTAENDIG sehen, nicht
   beschnitten — und beide gleich gross. Deshalb hier eine gemeinsame Box in einem
   festen Seitenverhaeltnis, das Foto darin mit object-fit: contain, zentriert.
   Der schmalste Rand (bei "privat" links/rechts) faellt kaum auf. */
.tuer__bild { overflow: hidden; aspect-ratio: 4 / 3; background: var(--nacht-2); position: relative; }
/* Wechselnde Fotos: alle liegen uebereinander, das aktive blendet ein. Ohne JavaScript
   bleibt das erste Foto stehen. */

.wechsel > :first-child { transform: none; }
.wechsel--an > :first-child { transform: translateX(100%); }
.wechsel--an > .ist-links { transform: translateX(-100%); }
.wechsel--an > .ist-aktiv { transform: none; }
.wechsel--an > .ist-raus { transform: translateX(-100%); }

.mit-schau { padding-top: 5.7rem; }


















.wechsel--hoch { position: relative; aspect-ratio: 4 / 5; }
.wechsel picture img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tuer__bild img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 45%;
  transition: transform var(--sehr-ruhig), filter var(--sehr-ruhig);
  filter: brightness(.92);
}
.tuer:hover .tuer__bild img { transform: scale(1.02); filter: brightness(1); }
.tuer__innen { padding: clamp(1.8rem, 3.2vw, 2.8rem); flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.tuer__innen .pfad { margin-top: auto; }
.tuer__innen .marke { font-weight: 700; font-size: 1.05rem; }
.tuer__innen h3 { margin-bottom: .5rem; color: var(--hell); }
.tuer__innen p { color: var(--hell-leise); font-size: .95rem; max-width: none; margin-bottom: 1.5rem; }

/* --- Zwei Spalten -------------------------------------------------------- */

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.zwei--oben { align-items: start; }
.zwei--eng-links { grid-template-columns: .78fr 1.22fr; }
.zwei--eng-rechts { grid-template-columns: 1.22fr .78fr; }
/* Textspalte neben dem Foto ist breiter als die Standard-Lesebreite (62ch) - voll ausnutzen */
.zwei--eng-links p, .zwei--eng-rechts p { max-width: none; }
@media (max-width: 880px) {
  .zwei, .zwei--eng-links, .zwei--eng-rechts { grid-template-columns: 1fr; gap: 2.6rem; }
}
.rahmen { overflow: hidden; background: var(--nacht-2); border-radius: 14px; }
.rahmen img { width: 100%; height: auto; display: block; }

/* --- Vollbreites Bildband ------------------------------------------------- */
/* Bildtafel — volle Breite waere bei 1,33 ueber 1000px hoch. Deshalb als Tafel
   mittig gesetzt, in natuerlicher Hoehe. Nichts wird beschnitten. */
.bild-band { line-height: 0; height: clamp(120px, 15vw, 200px); overflow: hidden; }
.bild-band img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bild-tafel { width: min(100% - 2.8rem, 440px); margin-inline: auto; }
.bild-tafel--schmal { width: min(100% - 2.8rem, 340px); }
.bild-tafel--hoch { width: min(100% - 2.8rem, 300px); margin-bottom: 2rem; }
.bild-tafel--breit { width: min(100% - 2.8rem, 560px); }
.wechsel--quer { position: relative; aspect-ratio: 4 / 3; }
.posten__spruch { font-family: "Pontano Sans", sans-serif; font-weight: 700; color: var(--dunkel); font-size: 1.1rem; margin: 0 0 .4rem; }
.posten__schluss { font-style: italic; font-size: .92rem; margin: 1.1rem 0 0; color: var(--dunkel-leise); }

/* --- Leistungen als typografische Liste, nicht als Kacheln --------------- */
.liste { border-top: 1px solid var(--linie-hell); }
.hell-band .liste, .hell-band-2 .liste { border-top-color: var(--linie-dunkel); }
.posten {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.2rem 2rem;
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid var(--linie-hell);
  align-items: start;
}
.hell-band .posten, .hell-band-2 .posten { border-bottom-color: var(--linie-dunkel); }
.posten__nr {
  font-family: "Pontano Sans", sans-serif;
  font-size: .78rem; letter-spacing: .1em; color: var(--messing); padding-top: .5rem;
}
.hell-band .posten__nr, .hell-band-2 .posten__nr { color: var(--messing-tief); }
.posten__was h3 { margin-bottom: .5rem; }
.posten__was p { margin-bottom: .7rem; max-width: 54ch; }
.posten__preis {
  font-family: "Pontano Sans", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--hell); white-space: nowrap; text-align: right;
  padding-top: .1rem;
}
.hell-band .posten__preis, .hell-band-2 .posten__preis { color: var(--dunkel); }
.posten__preis small {
  display: block; font-family: "Source Sans 3", sans-serif; font-size: .72rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--hell-leise); margin-top: .4rem;
}
.hell-band .posten__preis small, .hell-band-2 .posten__preis small { color: var(--dunkel-leise); }
@media (max-width: 700px) {
  .posten { grid-template-columns: 2.4rem 1fr; gap: .6rem 1rem; }
  .posten__preis { grid-column: 2; text-align: left; padding-top: .4rem; }
  .posten__preis small { display: inline; margin-left: .9rem; }
}

/* --- Aufzaehlung mit Haarlinien statt Punkten ---------------------------- */
.striche { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.striche li { position: relative; padding-left: 2.4rem; margin-bottom: .7rem; }
.striche li::before {
  content: ""; position: absolute; left: 0; top: .88em; width: 1.3rem; height: 1px;
  background: var(--messing); opacity: .8;
}
.hell-band .striche li::before, .hell-band-2 .striche li::before { background: var(--messing-tief); }
.striche li > a:first-child { display: inline-block; padding-block: .2rem; }

/* --- Nummerierter Ablauf ------------------------------------------------- */
.schritte { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.schritte li {
  position: relative; padding-left: 3.4rem; padding-bottom: 2rem; counter-increment: schritt;
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; left: 0; top: .12em;
  font-family: "Pontano Sans", sans-serif;
  font-size: .8rem; letter-spacing: .1em; color: var(--messing);
}
.hell-band .schritte li::before, .hell-band-2 .schritte li::before { color: var(--messing-tief); }
.schritte li::after {
  content: ""; position: absolute; left: .55rem; top: 2.1em; bottom: .6rem; width: 1px;
  background: var(--linie-hell);
}
.hell-band .schritte li::after, .hell-band-2 .schritte li::after { background: var(--linie-dunkel); }
.schritte li:last-child { padding-bottom: 0; }
.schritte li:last-child::after { display: none; }
.schritte strong { display: block; color: var(--hell); font-weight: 500; margin-bottom: .2rem; }
.hell-band .schritte strong, .hell-band-2 .schritte strong { color: var(--dunkel); }

/* --- Grosses Zitat, allein auf dunkel ------------------------------------
   Nachgemessen direkt auf rossvita.de: das Bildzitat ("Was koennen Pferde dir
   ueber dich selbst zeigen?") steht dort in Pontano Sans, fett, NICHT kursiv
   (font-weight 700, font-style normal — per computed style von der Live-Seite
   geprueft, nicht geraten). Dieses Muster gilt fuer jedes Foto-Kapitel auf der
   Startseite: Bild, dann hier das dazugehoerige Zitat/die Ueberschrift, zentriert. */
.zitat { text-align: center; }
.zitat blockquote, .zitat h1, .zitat .zitat__satz {
  margin: 0 auto 2rem; max-width: 30ch;
  font-family: "Pontano Sans", sans-serif; font-style: normal; font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.3; color: var(--hell);
  letter-spacing: -.01em;
}
.zitat h1 { max-width: 20ch; }
.zitat .zitat__satz--gold, .hell-band .zitat .zitat__satz--gold { color: var(--messing); font-weight: 700; }
.zitat .zitat__satz--klein { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; max-width: 44ch; font-weight: 400; }
.hell-band .zitat blockquote, .hell-band-2 .zitat blockquote,
.hell-band .zitat h1, .hell-band-2 .zitat h1,
.hell-band .zitat .zitat__satz, .hell-band-2 .zitat .zitat__satz { color: var(--dunkel); }
.zitat figcaption {
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--hell-leise);
}

/* --- Stimmen: schmale Spalten, Haarlinien ------------------------------- */
.stimmen-hinweis { font-size: .85rem; margin: 0 0 2rem; color: var(--dunkel-leise); }
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 900px) { .stimmen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stimmen { grid-template-columns: 1fr; } }
.stimme {
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--linie-hell);
  box-shadow: inset 1px 0 0 var(--linie-hell);
}
.hell-band .stimme, .hell-band-2 .stimme { border-top-color: var(--linie-dunkel); box-shadow: inset 1px 0 0 var(--linie-dunkel); }
.stimme blockquote { margin: 0 0 1.4rem; font-size: 1rem; line-height: 1.64; color: var(--hell); }
.stimme blockquote::before {
  content: "„"; display: block; margin-bottom: .1rem;
  font-family: "Pontano Sans", sans-serif; font-weight: 700; font-size: 2rem;
  line-height: 1; color: var(--messing); opacity: .85;
}
.hell-band .stimme blockquote, .hell-band-2 .stimme blockquote { color: var(--dunkel); }
.stimme figcaption { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--hell-leise); }
.hell-band .stimme figcaption, .hell-band-2 .stimme figcaption { color: var(--dunkel-leise); }

/* --- Qualifikationen: vier kleine Kaesten in einer Zeile --- */
.qual {
  list-style: none; padding: 0; margin: 0 0 1.8rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
@media (max-width: 900px) { .qual { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .qual { grid-template-columns: 1fr; } }
.qual > li {
  background: var(--papier); border: 1px solid var(--linie-dunkel); border-radius: 12px;
  padding: .75rem .95rem; line-height: 1.3;
  display: flex; flex-direction: column;
}
.qual strong { display: block; color: var(--dunkel); font-weight: 500; font-size: .95rem; line-height: 1.25; margin-bottom: .25rem; }
.qual span { font-size: .85rem; line-height: 1.35; }
.qual__siegel { display: flex; align-items: flex-start; gap: .5rem; margin-top: auto; padding-top: .7rem; }
.qual__siegel-icon { width: 1.05rem; height: 1.3rem; flex: none; margin-top: .05rem; color: var(--messing-tief); }
.qual__siegel-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.qual__siegel-label {
  font-family: "Pontano Sans", sans-serif; font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--messing-tief);
}
.qual__siegel-inst {
  font-size: .82rem; font-style: italic; color: var(--dunkel-leise);
  overflow-wrap: break-word;
}
.qual__siegel-inst abbr { text-decoration-style: dotted; cursor: help; }

/* --- Wie es weitergeht: Karten am Ende jeder Unterseite ------------------- */
.weiter-wege { padding-bottom: 3mm; }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 900px) { .karten { grid-template-columns: 1fr; } }
.karte {
  display: flex; flex-direction: column; text-decoration: none; background: var(--nacht-2);
  border: 1px solid var(--linie-hell); border-radius: 18px; overflow: hidden; transition: background var(--ruhig);
}
.karte:hover { background: var(--nacht-3); }
.karte__bild { aspect-ratio: 16 / 10; overflow: hidden; }
.karte__bild img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--sehr-ruhig); }
.karte:hover .karte__bild img { transform: scale(1.03); }
.karte__text { padding: 1.3rem 1.5rem 1.5rem; }
.karte__text h3 { font-size: 1.15rem; margin: 0 0 .3rem; color: var(--hell); }
.karte__text p { font-size: .95rem; margin: 0 0 1rem; color: var(--hell-leise); }
.karte__mehr { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--messing); }

.qual__siegel + .qual__siegel { margin-top: 0; padding-top: .5rem; }

/* Angebote als Kaesten wie die Zertifikate, untereinander (Unternehmen, Privat) */
.qual--angebote { grid-template-columns: 1fr; max-width: none; gap: 1rem; margin-bottom: 1.8rem; }
.qual--angebote > li { padding: 1.3rem 1.6rem 1.4rem; color: var(--dunkel-leise); }
.qual--angebote strong { font-size: 1.2rem; margin-bottom: .6rem; }
.qual--angebote p { font-size: 1rem; line-height: 1.6; margin: 0 0 .8rem; max-width: none; color: inherit; }
.qual--angebote p a { color: var(--messing-tief); }
.qual--angebote .posten__spruch { color: var(--dunkel); font-size: 1.05rem; }
.qual--angebote .striche { font-size: .98rem; margin: 0 0 1rem; }
.qual--angebote .striche li { padding: 0 0 0 1.6rem; background: none; border: 0; display: block; }
.qual--angebote .qual__siegel-inst { font-size: .95rem; }
.qual--angebote .qual__siegel-label { font-size: .7rem; }
.qual--angebote .qual__siegel-icon { width: 1.15rem; height: 1.4rem; }

.qual--angebote .knopf--preis { align-self: flex-start; margin-top: 1.1rem; padding: .7rem 1.4rem; font-size: .72rem; }
/* Kaesten in voller Breite, Inhalt einspaltig darin */
.qual__raster > :last-child { margin-bottom: 0; }
/* Ziel des Preis-Links auf der Preisliste kurz hervorheben */
.posten:target { background: rgba(221, 190, 136, .16); box-shadow: 0 0 0 .6rem rgba(221, 190, 136, .16); }

/* --- Aufklapper ---------------------------------------------------------- */
.frage { border-bottom: 1px solid var(--linie-hell); }
.hell-band .frage, .hell-band-2 .frage { border-bottom-color: var(--linie-dunkel); }
.frage summary {
  cursor: pointer; list-style: none; padding: 1.5rem 3rem 1.5rem 0; position: relative;
  color: var(--hell); font-size: 1.02rem; font-weight: 400;
  font-family: "Pontano Sans", sans-serif;
  transition: color var(--ruhig);
}
.hell-band .frage summary, .hell-band-2 .frage summary { color: var(--dunkel); }
.frage summary:hover { color: var(--messing); }
.hell-band .frage summary:hover, .hell-band-2 .frage summary:hover { color: var(--messing-tief); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before, .frage summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; background: var(--messing);
  transition: transform var(--ruhig), opacity var(--ruhig);
}
.hell-band .frage summary::before, .hell-band .frage summary::after,
.hell-band-2 .frage summary::before, .hell-band-2 .frage summary::after { background: var(--messing-tief); }
.frage summary::before { width: 13px; height: 1px; margin-top: -.5px; }
.frage summary::after  { width: 1px; height: 13px; margin-top: -6.5px; right: 10px; }
.frage[open] summary::after { transform: rotate(90deg); opacity: 0; }
.frage__inhalt { padding: 0 0 1.7rem; max-width: 60ch; }
.frage__inhalt p:last-child { margin-bottom: 0; }

/* --- Formular ------------------------------------------------------------- */
.feld { margin-bottom: 1.7rem; }
/* Anfrageformular: weisse Karte, Felder untereinander, petrolfarbene Trennlinien */
.anfrage { background: #fff; padding: clamp(1.4rem, 3vw, 2.4rem); }
.anfrage .feld { margin: 0; padding: 1.2rem 0; border-bottom: 1px solid var(--nacht); }
.anfrage .feld:first-of-type { padding-top: 0; }
.anfrage .feld input[type="text"], .anfrage .feld input[type="email"], .anfrage .feld input[type="tel"],
.anfrage .feld textarea, .anfrage .feld select { border-bottom: 0; padding: .45rem 0; }
.anfrage .feld select { background: #fff; }
.feld label {
  display: block; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dunkel-leise); margin-bottom: .5rem; font-weight: 500;
}
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld textarea, .feld select {
  width: 100%; padding: .85rem 0; border: 0; border-bottom: 1px solid var(--linie-dunkel);
  background: transparent; font-family: inherit; font-size: 1.02rem; color: var(--dunkel);
  border-radius: 0; transition: border-color var(--ruhig);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-bottom-color: var(--messing-tief);
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld select { appearance: none; cursor: pointer; }
.wahl { display: flex; gap: .9rem; align-items: flex-start; margin: 2rem 0 1.6rem; }
.wahl input { margin-top: .18rem; flex-shrink: 0; width: 24px; height: 24px; accent-color: var(--messing-tief); }
.wahl label { font-size: .92rem; line-height: 1.6; color: var(--dunkel-leise); }

/* --- Fuss ---------------------------------------------------------------- */
.fuss { background: var(--nacht-2); padding: clamp(4rem,8vw,6rem) 0 2.2rem; font-size: .94rem; }
.fuss__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }
@media (max-width: 800px) { .fuss__raster { grid-template-columns: 1fr; gap: 2.4rem; } }
.fuss h4 {
  font-family: "Source Sans 3", sans-serif; font-size: 1rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--messing); margin: 0 0 1.2rem; font-weight: 700;
}
/* Soziale Kanaele: farbig hinterlegte Felder */
.fuss .fuss__social { display: flex; flex-wrap: wrap; gap: .45rem; }
.fuss .fuss__social a {
  background: var(--messing); color: var(--nacht); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; padding: .3rem .8rem; border-radius: 0;
  transition: background var(--ruhig);
}
.fuss .fuss__social a:hover { background: var(--hell); color: var(--nacht); }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li a { display: inline-block; padding-block: .32rem; }
.fuss a { color: var(--hell-leise); text-decoration: none; transition: color var(--ruhig); }
.fuss a:hover { color: var(--hell); }
.fuss__unten {
  border-top: 1px solid var(--linie-hell); padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .3rem 2rem; justify-content: space-between; align-items: center;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-leise);
}
.fuss__unten > span { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; }
.fuss__unten a { display: inline-block; padding-block: .45rem; }

/* --- Ruf-Band ------------------------------------------------------------ */
.ruf { text-align: center; }
.ruf h2 { max-width: 30ch; margin-inline: auto; }
.ruf p { margin-inline: auto; }

/* --- Kleinkram ----------------------------------------------------------- */
.mitte { text-align: center; }
.mitte p { margin-inline: auto; }
.oben { margin-top: 2.4rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; align-items: center; }
.knopfreihe--mitte { justify-content: center; }
a { color: var(--messing); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.hell-band a, .hell-band-2 a { color: var(--messing-tief); }

.springmarke { position: absolute; left: -9999px; top: 0; background: var(--messing); color: var(--nacht); padding: .9rem 1.4rem; z-index: 100; }
.springmarke:focus { left: 0; }
:focus-visible { outline: 1px solid var(--messing); outline-offset: 4px; }

.notiz {
  border-left: 1px solid var(--messing); padding-left: 1.4rem;
  font-size: .93rem; color: var(--hell-leise); margin-top: 2rem;
}
.hell-band .notiz, .hell-band-2 .notiz { color: var(--dunkel-leise); border-left-color: var(--messing-tief); }

/* --- Einblenden ---------------------------------------------------------- */
.zeigt { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform var(--sehr-ruhig); }
.zeigt.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .zeigt { opacity: 1; transform: none; } }

/* --- Mobile Navigation --------------------------------------------------- */
@media (max-width: 1120px) {
  .nav-schalter { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    background: var(--nacht-2); box-shadow: inset 1px 0 0 var(--linie-hell);
    flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 5rem 2.4rem 2.4rem; gap: 2rem;
    transform: translateX(100%); transition: transform var(--ruhig); z-index: 40;
  }
  .nav.ist-offen { transform: none; }
  .nav a { font-size: .92rem; letter-spacing: .18em; }
}

@media print {
  body { background: #fff; color: #000; }
  .kopf, .nav-schalter, .hero__bild, .zeigt { opacity: 1; transform: none; }
}


/* --- Fliessender Eindruck ---------------------------------------------------
   Vorhang: Die grosse Foto-Show bleibt oben stehen, der Inhalt schiebt sich beim Scrollen
   darueber. Beim Seitenwechsel blendet die naechste Seite ueber (Kopfleiste bleibt stehen). */
.mit-schau > .schau { position: sticky; top: 5.7rem; z-index: 0; }
.mit-schau > :not(.schau) { position: relative; z-index: 1; }
.mit-schau > :not(.schau):not(.hell-band):not(.hell-band-2) { background: var(--nacht); }
.mit-schau > .schau + * { border-radius: 26px 26px 0 0; }
/* Vorhang auch auf der Startseite: Hero und Foto-Band bleiben stehen, der Inhalt schiebt sich darueber. */
.vorhang { position: sticky; top: 0; z-index: 0; }
.vorhang + * { position: relative; z-index: 1; border-radius: 26px 26px 0 0; }
.vorhang + *:not(.hell-band):not(.hell-band-2) { background: var(--nacht); }

/* Grosse Fotos laufen beim Scrollen minimal langsamer mit (siehe seite.js) */





@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: ease; }
.kopf { view-transition-name: kopf; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* --- Grosse Foto-Show (Angebotsseiten) -------------------------------------
   Jedes Foto steht vollstaendig da (nichts wird abgeschnitten, kein unscharfer Rand). Links und
   rechts schauen die Nachbarfotos hervor; beim Wechsel fahren die Fotos seitlich herein. */
.schau { --H: clamp(175px, min(36vh, 28vw), 375px); position: relative; width: 100%; height: var(--H); overflow: hidden; background: var(--nacht); margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.schau__spur { display: flex; gap: .75rem; height: 100%; width: max-content; transition: transform 1s cubic-bezier(.22, .7, .2, 1); }
.schau__spur.ohne-fahrt { transition: none; }
.schau .folie { position: relative; flex: none; height: 100%; aspect-ratio: 4 / 3; opacity: .45; transition: opacity 1s ease; }
.schau .folie.breit { aspect-ratio: 16 / 9; }
.schau .folie.hoch { aspect-ratio: 3 / 4; }
.schau .folie.quadrat { aspect-ratio: 1 / 1; }
.schau .folie.mittel { aspect-ratio: 7 / 5; }
.schau .folie.ist-aktiv { opacity: 1; }
.schau .folie picture, .schau .folie picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.schau__titel {
  position: absolute; z-index: 2; right: 1.2rem; bottom: 1rem; margin: 0; max-width: none; text-align: right;
  display: flex; align-items: center; gap: .55rem;
  font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: clamp(.75rem, 1.5vw, 1.07rem); letter-spacing: .1em;
  text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.schau__titel::before { content: ""; flex: none; width: 2.2em; height: 2.2em; background: url(../img/logo.png) center / contain no-repeat; }
.schau__pfeil, .schau__runter { position: absolute; z-index: 3; color: #fff; }
.schau__pfeil { display: none; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 3.2rem; padding: 0; background: rgba(15,59,60,.6); border: 0; cursor: pointer; transition: background var(--ruhig), color var(--ruhig); }
.schau--an .schau__pfeil { display: block; }
.schau__pfeil--zurueck { left: 0; }
.schau__pfeil--weiter { right: 0; }
.schau__pfeil:hover { background: var(--messing); color: var(--nacht); }
.schau__pfeil svg, .schau__runter svg { display: block; margin: auto; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schau__runter { left: 50%; bottom: 1rem; transform: translateX(-50%); width: 3rem; height: 3rem; display: flex; align-items: center; }
.schau__runter svg { width: 2rem; height: 2rem; }


/* --- Das Team auf vier Beinen (Ueber Jennifer) ------------------------------ */
.mitarbeiter { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2rem; }
.ma { background: #fff; border: 1px solid var(--linie-dunkel); border-radius: 18px; overflow: hidden; display: flex; flex-direction: row; align-items: flex-start; gap: clamp(1.2rem, 3vw, 2.2rem); padding: 1.2rem; }
.ma .rahmen { flex: none; width: 240px; border-radius: 12px; aspect-ratio: 3 / 4; }
.ma .rahmen img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .ma { flex-direction: column; }
  .ma .rahmen { width: min(60%, 240px); }
}
.ma__text { padding: .3rem .4rem .4rem 0; max-width: 78ch; }
.ma__text .marke { margin-bottom: .3rem; }
.ma__text h3 { margin: 0 0 .3rem; }
.ma__zeile { font-style: italic; color: var(--dunkel-leise); margin: 0 0 1rem; }
.ma__text .striche strong { color: var(--dunkel); font-weight: 600; }
.ma__notiz { font-size: .9rem; margin: 1rem 0 0; color: var(--dunkel-leise); }

/* --- Angebote einklappbar: Name, kurzer Lockertext, Button ------------------ */
.teaser { margin: 0 0 .8rem; }
.teaser__preis { white-space: nowrap; font-weight: 700; color: var(--messing-tief); }
.mehr > summary { list-style: none; }
.mehr > summary::-webkit-details-marker { display: none; }
.qual--angebote .mehr__knopf { padding: .7rem 1.4rem; font-size: .72rem; }
.mehr__knopf span { font-size: inherit; }
.mehr__zu { display: none; }
.mehr[open] .mehr__auf { display: none; }
.mehr[open] .mehr__zu { display: inline; }
.mehr__inhalt { margin-top: 1.4rem; }

/* Einklappbare Bloecke ausserhalb der Angebotskarten */
.mehr { margin-top: 1.2rem; }
.mehr + .knopfreihe.oben { margin-top: 1.2rem; }

/* Preisliste: Klartext-Name und "Fuer wen" je Angebot */
.posten__art { margin: -.1rem 0 .6rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hell-leise); }
.hell-band .posten__art, .hell-band-2 .posten__art { color: var(--dunkel-leise); }
.posten__fuer b { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--messing); margin-right: .4rem; }
.hell-band .posten__fuer b, .hell-band-2 .posten__fuer b { color: var(--messing-tief); }

/* Rueckmeldungen aus Team-Tagen: Kernaussage fett, darunter ein Satz */
.stimme p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--hell-leise); }
.stimme .stimme__kopf { margin: 0 0 .6rem; font-family: "Pontano Sans", sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: var(--messing); }
.hell-band .stimme p, .hell-band-2 .stimme p { color: var(--dunkel-leise); }
.hell-band .stimme .stimme__kopf, .hell-band-2 .stimme .stimme__kopf { color: var(--messing-tief); }

/* Zuschlaege pro weitere Person: Name links, Betrag rechts */
.zuschlag { list-style: none; margin: .6rem 0 1rem; padding: 0; max-width: 26rem; }
.zuschlag li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linie-hell); }
.hell-band .zuschlag li, .hell-band-2 .zuschlag li { border-bottom-color: var(--linie-dunkel); }
.zuschlag b { white-space: nowrap; }


/* Zwei Preise nebeneinander (z. B. 60 und 90 Min.) */
.posten__preis--zwei { display: flex; gap: 2.2rem; justify-content: flex-end; }
@media (max-width: 700px) { .posten__preis--zwei { justify-content: flex-start; gap: 1.6rem; } .posten__preis--zwei small { margin-left: 0; } }

.teaser { max-width: none; }

/* Ovale Aufklapp-Knoepfe */
.mehr__knopf--oval { border-radius: 999px; padding-left: 1.6rem; padding-right: 1.6rem; }

/* Klartext-Bezeichnung hinter dem Angebotsnamen, gleiche Groesse */
.posten__zusatz { font-size: inherit; font-weight: inherit; color: var(--messing); }
.hell-band .posten__zusatz, .hell-band-2 .posten__zusatz { color: var(--messing-tief); }

/* Die drei Team-Stufen: sichtbar eine Gruppe */
.stufen { margin: 1.2rem 0; padding: 1.6rem 0 0 1.6rem; border-left: 3px solid var(--messing); background: rgba(244,247,243,.05); }
.hell-band .stufen, .hell-band-2 .stufen { border-left-color: var(--messing-tief); background: rgba(15,59,60,.04); }
.stufen__kopf { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--messing); }
.hell-band .stufen__kopf, .hell-band-2 .stufen__kopf { color: var(--messing-tief); }
.stufen .posten:last-child { border-bottom: 0; }
.stufen .posten { padding-right: 1.4rem; }
@media (max-width: 700px) { .stufen { padding-left: 1rem; } }

/* Eckdaten (Fuer wen / Dauer / Preis) als klare Tabelle statt Symbolzeilen */
.eckdaten { display: grid; grid-template-columns: 7.5rem 1fr; gap: .45rem 1.2rem; margin: 1rem 0 1.2rem; }
.eckdaten dt { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--messing-tief); padding-top: .2rem; }
.eckdaten dd { margin: 0; }
.mehr__teil { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--linie-dunkel); }
.qual--angebote .mehr__kopf { margin: 0 0 .5rem; font-family: "Pontano Sans", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--dunkel); }
@media (max-width: 560px) { .eckdaten { grid-template-columns: 1fr; gap: 0; } .eckdaten dd { margin-bottom: .6rem; } }

/* Angebotsnamen im Fliesstext als anklickbare Knoepfe: Petrol auf hellem, Hellgruen auf dunklem Grund */
a.modul { display: inline-block; margin: .15rem .15rem .15rem 0; padding: .15rem .8rem; border-radius: 999px; background: var(--hell-leise); color: var(--nacht); font-weight: 600; font-size: .92em; line-height: 1.5; text-decoration: none; transition: background var(--ruhig), color var(--ruhig); }
a.modul:hover { background: var(--messing); color: var(--nacht); }
.hell-band a.modul, .hell-band-2 a.modul { background: var(--nacht); color: var(--hell); }
.hell-band a.modul:hover, .hell-band-2 a.modul:hover { background: var(--messing-tief); color: #fff; }

/* Aufklapp-Knopf (button) wie die Aufklapper */
[data-aufklappen] .mehr__zu { display: none; }
[data-aufklappen][aria-expanded="true"] .mehr__auf { display: none; }
[data-aufklappen][aria-expanded="true"] .mehr__zu { display: inline; }

/* Handy: Preiszeilen mit zwei Preisen duerfen umbrechen, sonst wird die Seite breiter als der Bildschirm */
@media (max-width: 700px) { .posten > * { min-width: 0; } .posten__preis--zwei { flex-wrap: wrap; row-gap: .6rem; } }

/* Handy: Startfoto oben und sofort sichtbar, "Auf dieser Seite" ordentlich in zwei Spalten, Abstand Preis/Dauer */
@media (max-width: 700px) {
  .hero__foto { grid-row: 1; }
  .hero__text { grid-row: 2; }
  .hero__foto.zeigt { opacity: 1; transform: none; transition: none; }
  .hero__foto img { max-height: 42vh; object-fit: cover; object-position: center 35%; }
  .seitennav { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.2rem; align-items: start; }
  .seitennav span { grid-column: 1 / -1; }
  .seitennav a { justify-self: start; line-height: 1.35; }
  .posten__preis--zwei small { margin-left: .55rem; }
}

/* Handy: Zertifikate kompakt, zwei nebeneinander, nur Titel und Zertifizierung */
@media (max-width: 520px) {
  .qual:not(.qual--angebote) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .qual:not(.qual--angebote) > li { padding: .6rem .7rem .65rem; }
  .qual:not(.qual--angebote) strong { font-size: .86rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .qual:not(.qual--angebote) > li > span:not(.qual__siegel) { display: none; }
  .qual:not(.qual--angebote) .qual__siegel { padding-top: .45rem; gap: .35rem; }
  .qual:not(.qual--angebote) .qual__siegel-icon { width: .85rem; height: 1.05rem; }
  .qual:not(.qual--angebote) .qual__siegel-inst { font-size: .74rem; }
}