/* ==========================================================================
   Melanie Kranz · WEBSITE 2026 – Ergänzungen zum Designsystem
   MOBILE FIRST: Grundregeln gelten fürs Handy, @media (min-width) erweitert
   für Tablet und Desktop. Nutzt ausschließlich Variablen aus tokens.css.
   Reihenfolge im <head>: tokens.css → website.css → seiten.css
   ========================================================================== */

html { scroll-padding-top: 5rem; }
body { padding-bottom: 4.75rem; }               /* Platz für die Aktionsleiste unten (Handy) */
@media (min-width: 64rem) { body { padding-bottom: 0; } }

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--stein-50); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kopf__innen { min-height: 4.75rem; }
@media (max-width: 26rem) {
  .menue-knopf { padding: 0; width: 2.9rem; height: 2.9rem; justify-content: center; flex: none; gap: 0; }
  .menue-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .marke img { width: 3.2rem; }
}
.marke { gap: .6rem; }
.marke img { width: 3.6rem; }
.marke__name { font-size: 1.2rem; }
.marke__leistungen { display: block; font-size: .6875rem; color: var(--stein-700); letter-spacing: .01em; margin-top: .1rem; white-space: nowrap; }
@media (min-width: 64rem) { .kopf__innen { min-height: 5.75rem; } .marke img { width: 4.5rem; } .marke__name { font-size: 1.45rem; } .marke__zusatz { font-size: var(--text-s); } .marke__leistungen { font-size: var(--text-xs); } }

/* Großes Logo auf der Startseite */
.start-hero__logo { width: 15rem; mix-blend-mode: multiply; margin: 0 0 var(--abstand-5) -.4rem; }
@media (min-width: 52rem) { .start-hero__logo { width: 22rem; margin-bottom: var(--abstand-6); } }

.menue-knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-size: var(--text-s); font-weight: var(--gewicht-halbfett);
  color: var(--farbe-text); background: var(--farbe-flaeche);
  border: 1px solid var(--stein-300); border-radius: var(--radius-rund);
  padding: .55rem 1rem .55rem .85rem; cursor: pointer;
}
.menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, background .2s;
}
.menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
.menue-knopf__striche::before { top: -6px; } .menue-knopf__striche::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { transform: translateY(-6px) rotate(-45deg); }

.kopf__termin { display: none; padding: .6rem 1.15rem; }
.kopf__innen { gap: var(--abstand-3); }
.kopf__innen .marke { margin-right: auto; }

/* Hauptmenü – Handy: Klapp-Panel unter dem Kopf */
.hauptnav {
  position: fixed; inset: 4.75rem 0 0 0; z-index: 49;
  background: var(--stein-50); overflow-y: auto;
  padding: var(--abstand-4) var(--rand-seite) var(--abstand-8);
  display: none;
}
.hauptnav.ist-offen { display: block; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; }
.hauptnav__gruppe { border-bottom: 1px solid var(--farbe-linie); padding-block: var(--abstand-3); }
.hauptnav__titel {
  display: flex; align-items: center; gap: var(--abstand-3);
  font-size: var(--text-xs); font-weight: var(--gewicht-halbfett); letter-spacing: var(--sperrung-label);
  text-transform: uppercase; color: var(--oliv-600); padding: var(--abstand-2) 0;
}
.hauptnav__titel img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.hauptnav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 0; font-size: var(--text-l); color: var(--farbe-text); text-decoration: none;
}
.hauptnav a::after { content: "›"; color: var(--oliv-400); font-size: 1.4em; line-height: 1; }
.hauptnav a[aria-current="page"] { color: var(--oliv-700); font-weight: var(--gewicht-halbfett); }
.hauptnav__einzeln { padding-top: var(--abstand-3); }
.hauptnav__kontakt { margin-top: var(--abstand-5); display: grid; gap: var(--abstand-3); }
.hauptnav__kontakt .button { width: 100%; }
.hauptnav__kontakt .button::after { content: none; }
body.menue-offen { overflow: hidden; }
/* backdrop-filter würde das fixierte Menü im Kopf einsperren – bei offenem Menü abschalten */
body.menue-offen .kopf { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--stein-50); }

/* Desktop: waagerechtes Menü mit Aufklapp-Listen */
@media (min-width: 64rem) {
  .menue-knopf { display: none; }
  .hauptnav { position: static; display: block; background: none; padding: 0; overflow: visible; }
  .hauptnav > ul { display: flex; align-items: center; gap: var(--abstand-1); }
  .hauptnav__gruppe { position: relative; border: 0; padding: 0; }
  .hauptnav__titel, .hauptnav > ul > li > a {
    font-size: var(--text-s); letter-spacing: 0; text-transform: none; font-weight: var(--gewicht-normal);
    color: var(--farbe-text); padding: .55rem .85rem; border-radius: var(--radius-rund); cursor: pointer;
  }
  .hauptnav__titel img { display: none; }
  .hauptnav__titel::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); margin-left: .1rem; opacity: .6; }
  .hauptnav > ul > li > a::after { content: none; }
  .hauptnav__gruppe:hover .hauptnav__titel, .hauptnav__gruppe:focus-within .hauptnav__titel,
  .hauptnav > ul > li > a:hover { background: var(--oliv-100); color: var(--oliv-800); }
  .hauptnav__gruppe.ist-aktiv .hauptnav__titel, .hauptnav > ul > li > a[aria-current="page"] { background: var(--oliv-100); color: var(--oliv-700); font-weight: var(--gewicht-halbfett); }
  .hauptnav__gruppe ul {
    position: absolute; top: calc(100% + .4rem); left: 0; min-width: 15rem;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-m);
    box-shadow: var(--schatten-m); padding: var(--abstand-2);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
  }
  .hauptnav__gruppe ul::before { content: ""; position: absolute; inset: -.6rem 0 auto 0; height: .6rem; }
  .hauptnav__gruppe:hover ul, .hauptnav__gruppe:focus-within ul { opacity: 1; visibility: visible; transform: none; }
  .hauptnav__gruppe ul a { font-size: var(--text-s); padding: .6rem .8rem; border-radius: var(--radius-s); }
  .hauptnav__gruppe ul a:hover { background: var(--oliv-50); }
  .hauptnav__gruppe ul a::after { content: none; }
  .hauptnav__einzeln { padding: 0; }
  .hauptnav__kontakt { display: none; }
  .kopf__innen .kopf__termin { display: inline-flex; margin-left: var(--abstand-2); white-space: nowrap; }
  .hauptnav__titel, .hauptnav > ul > li > a { white-space: nowrap; padding: .5rem .7rem !important; }
  .hauptnav > ul { gap: 0; }
}

/* ---------- Aktionsleiste unten (nur Handy) ---------- */
.aktionsleiste {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-2);
  padding: .6rem var(--rand-seite) calc(.6rem + env(safe-area-inset-bottom));
  background: rgb(250 249 245 / .96); backdrop-filter: blur(10px); border-top: 1px solid var(--farbe-linie);
}
.aktionsleiste .button { padding: .7rem .3rem; width: 100%; white-space: nowrap; gap: .35rem; font-size: .875rem; }
.aktionsleiste svg { width: 1.1rem; height: 1.1rem; }
@media (min-width: 64rem) { .aktionsleiste { display: none; } }

/* ---------- Startseite: Hero ---------- */
.start-hero { padding: 0 0 var(--abstand-7); position: relative; overflow: hidden; }
.start-hero__bild { position: relative; margin: 0 calc(var(--rand-seite) * -1); }
.start-hero__bild img.foto { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; object-position: 50% 30%; border-radius: 0 0 var(--radius-l) var(--radius-l); }
.start-hero__bild::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; border-radius: 0 0 var(--radius-l) var(--radius-l); background: linear-gradient(to top, rgb(37 40 4 / .45), transparent); }
.start-hero__siegel {
  position: absolute; left: var(--rand-seite); bottom: var(--abstand-4); z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-size: var(--text-s);
  background: rgb(41 39 40 / .45); backdrop-filter: blur(6px); padding: .35rem .8rem; border-radius: var(--radius-rund);
}
.start-hero__siegel .sterne { color: var(--gold-500); letter-spacing: .05em; }
.start-hero__text { padding-top: var(--abstand-6); }
.start-hero h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.6rem); }
.start-hero .punktliste { color: var(--stein-700); margin-bottom: var(--abstand-5); }
.start-hero__bogen { display: none; }
@media (min-width: 52rem) {
  .start-hero { padding: var(--abstand-8) 0 var(--abstand-9); }
  .start-hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--abstand-8); align-items: center; }
  .start-hero__bild { margin: 0; order: 2; }
  .start-hero__bild img.foto, .start-hero__bild::after { border-radius: var(--radius-l); }
  .start-hero__bild img.foto { aspect-ratio: 4/5; box-shadow: var(--schatten-m); }
  .start-hero__text { padding-top: 0; }
  .start-hero__bogen { display: block; position: absolute; width: 42%; left: -16%; top: -10%; z-index: 1; pointer-events: none; }
}

/* ---------- Startseite: Einstieg (mobil: Aussage + Wahl Pferd/Hund im ersten Bildschirm) ---------- */
.einstieg { position: relative; overflow: hidden; padding: var(--abstand-5) 0 var(--abstand-7); background: var(--farbe-flaeche-ruhig); }
.einstieg__bogen { display: none; }
/* Sternbogen in Unterseiten-Köpfen auf dem Handy ausblenden, damit er keine Überschrift überlagert */
@media (max-width: 51.99rem) { .seitenkopf__bogen { display: none; } }
.einstieg .container { position: relative; display: grid; gap: var(--abstand-5); }
.einstieg__logo { display: none; }
.einstieg h1 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3.2rem); margin-bottom: var(--abstand-2); }
.einstieg h1.einstieg__claim { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.6rem); color: var(--oliv-600); font-weight: var(--gewicht-halbleicht); margin: 0; }
.einstieg__vertrauen { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: var(--text-s); color: var(--stein-700); }
.einstieg__vertrauen span { display: inline-flex; align-items: center; gap: .4rem; }
.einstieg__vertrauen .sterne { color: var(--gold-500); letter-spacing: .05em; }
.einstieg .lead { margin: 0; }
.wahl-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-3); }
.wahl {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3/4;
  border-radius: var(--radius-l); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none;
  padding: var(--abstand-4); box-shadow: var(--schatten-m); transition: transform .2s, box-shadow .2s;
}
.wahl:hover { color: #fff; transform: translateY(-3px); }
.wahl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.wahl:hover img { transform: scale(1.04); }
.wahl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(37 40 4 / .9) 0%, rgb(37 40 4 / .25) 55%, transparent 80%); }
.wahl__fuer { font-size: .6875rem; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--gold-300); font-weight: var(--gewicht-halbfett); }
.wahl strong { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); font-weight: var(--gewicht-normal); line-height: 1.1; margin: .15rem 0 .25rem; }
.wahl small { font-size: var(--text-xs); color: rgb(255 255 255 / .88); line-height: 1.35; }
.wahl__pfeil { position: absolute; top: var(--abstand-3); right: var(--abstand-3); width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--gold-500); color: var(--stein-900); display: grid; place-items: center; font-size: 1.1rem; }
@media (min-width: 40rem) { .wahl small { font-size: var(--text-s); } .wahl { padding: var(--abstand-5); } }
@media (min-width: 64rem) {
  .einstieg { padding: var(--abstand-8) 0 var(--abstand-9); }
  .einstieg__bogen { display: none; }
  .einstieg .container { grid-template-columns: 1fr 1.15fr; grid-template-areas: "text wahl" "lead wahl" "vertrauen wahl"; column-gap: var(--abstand-8); row-gap: var(--abstand-4); align-items: start; }
  .einstieg__text { grid-area: text; }
  .einstieg .lead { grid-area: lead; }
  .einstieg__vertrauen { grid-area: vertrauen; }
  .wahl-raster { grid-area: wahl; align-self: center; }
  .einstieg__text { display: grid; gap: var(--abstand-4); }
  .einstieg__logo { display: block; width: 19rem; mix-blend-mode: multiply; margin-left: -.5rem; }
  .wahl-raster { gap: var(--abstand-5); }
}

/* ---------- Leistungskarten auf den Übersichtsseiten Pferd / Hund ---------- */
.angebote { display: grid; gap: var(--abstand-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .angebote { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .angebote--3 { grid-template-columns: repeat(3, 1fr); } }
.angebot { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--farbe-text); transition: box-shadow .2s, transform .2s; }
.angebot:hover { box-shadow: var(--schatten-m); transform: translateY(-2px); color: var(--farbe-text); }
.angebot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.angebot__inhalt { padding: var(--abstand-5); display: flex; flex-direction: column; gap: var(--abstand-3); flex: 1; }
.angebot h3 { margin: 0; font-size: var(--text-xl); color: var(--oliv-600); }
.angebot p { margin: 0; font-size: var(--text-s); color: var(--stein-700); }
.angebot .textlink { margin-top: auto; padding-top: var(--abstand-2); }

/* ---------- Wegweiser Pferd / Hund ---------- */
.wegweiser { display: grid; gap: var(--abstand-4); }
@media (min-width: 40rem) { .wegweiser { grid-template-columns: 1fr 1fr; gap: var(--abstand-5); } }
.weg {
  position: relative; display: block; border-radius: var(--radius-l); overflow: hidden; color: #fff; text-decoration: none;
  min-height: 24rem; isolation: isolate; box-shadow: var(--schatten-s); transition: transform .2s, box-shadow .2s;
}
.weg:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--schatten-m); }
.weg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.weg:hover img { transform: scale(1.04); }
.weg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(37 40 4 / .88) 0%, rgb(37 40 4 / .35) 55%, rgb(37 40 4 / .05) 100%); }
.weg__inhalt { position: absolute; inset: auto 0 0 0; padding: var(--abstand-5); }
.weg__fuer { font-size: var(--text-xs); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--gold-300); font-weight: var(--gewicht-halbfett); }
.weg h3 { color: #fff; margin: .2rem 0 .4rem; font-size: var(--text-xl); }
.weg p { margin: 0 0 var(--abstand-3); color: rgb(255 255 255 / .88); font-size: var(--text-s); }
.weg__links { display: flex; flex-wrap: wrap; gap: .4rem; }
.weg__links span { font-size: var(--text-xs); font-weight: var(--gewicht-halbfett); padding: .3rem .7rem; border-radius: var(--radius-rund); background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .3); }
@media (min-width: 64rem) { .weg { min-height: 26rem; } .weg__inhalt { padding: var(--abstand-6); } }

/* ---------- Leistungs-Kacheln (kompakt, mobil gut tippbar) ---------- */
.kacheln { display: grid; gap: var(--abstand-3); grid-template-columns: 1fr; }
@media (min-width: 36rem) { .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .kacheln { grid-template-columns: repeat(3, 1fr); gap: var(--abstand-4); } }
.kachel {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--abstand-4); align-items: center;
  padding: var(--abstand-3); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m); text-decoration: none; color: var(--farbe-text); transition: border-color .15s, box-shadow .15s;
}
.kachel:hover { border-color: var(--oliv-300); box-shadow: var(--schatten-s); color: var(--farbe-text); }
.kachel img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-s); }
.kachel strong { display: block; font-size: var(--text-m); }
.kachel span { display: block; font-size: var(--text-s); color: var(--stein-500); line-height: 1.4; }
.kachel .karte__tier { margin-top: .35rem; }
@media (min-width: 64rem) {
  .kachel { grid-template-columns: 1fr; padding: 0; overflow: hidden; align-items: start; }
  .kachel img { width: 100%; height: auto; aspect-ratio: 3/2; border-radius: 0; }
  .kachel > div { padding: 0 var(--abstand-5) var(--abstand-5); }
}

/* ---------- Werte / Versprechen ---------- */
.werte { display: grid; gap: var(--abstand-5); }
@media (min-width: 48rem) { .werte { grid-template-columns: repeat(3, 1fr); gap: var(--abstand-6); } }
.wert { padding-top: var(--abstand-4); border-top: 2px solid var(--gold-500); }
.wert h3 { font-size: var(--text-l); font-weight: var(--gewicht-halbfett); margin-bottom: var(--abstand-2); }
.wert p { margin: 0; color: var(--stein-700); }

/* ---------- Bewertungen ---------- */
.bewertung-kopf { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: center; margin-bottom: var(--abstand-5); }
.quelle {
  display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem; border-radius: var(--radius-rund);
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); font-size: var(--text-s); text-decoration: none; color: var(--farbe-text);
}
.quelle:hover { border-color: var(--oliv-300); color: var(--farbe-text); }
.quelle b { font-weight: var(--gewicht-halbfett); }
.quelle .sterne { color: var(--gold-500); }
.quelle__logo { width: 1.25rem; height: 1.25rem; flex: none; }
/* Bewertungen: festes Raster, kein seitliches Wischen */
.bewertungen { display: grid; gap: var(--abstand-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .bewertungen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .bewertungen { grid-template-columns: repeat(3, 1fr); } }
.bewertung {
  scroll-snap-align: start; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-m);
  padding: var(--abstand-5); display: flex; flex-direction: column; gap: var(--abstand-3); margin: 0;
}
.bewertung .sterne { color: var(--gold-500); letter-spacing: .1em; font-size: 1.05rem; }
.bewertung blockquote { margin: 0; font-size: var(--text-m); font-weight: var(--gewicht-halbleicht); color: var(--stein-900); }
.bewertung figcaption { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); font-size: var(--text-s); color: var(--stein-500); }
.bewertung figcaption strong { color: var(--farbe-text); display: block; }
.bewertung__von { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-xs); }
.wisch-hinweis { display: none; }

/* Fazit aus den Kundenstimmen */
.fazit { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-left: 4px solid var(--gold-500); border-radius: var(--radius-m); padding: var(--abstand-5); margin-bottom: var(--abstand-6); }
.fazit__titel { font-weight: var(--gewicht-halbfett); font-size: var(--text-l); color: var(--oliv-700); margin: 0 0 var(--abstand-4); }
.fazit__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .fazit__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .fazit__liste { grid-template-columns: repeat(4, 1fr); } }
.fazit__liste li { position: relative; padding-left: 1.6rem; }
.fazit__liste li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--gold-500); }
.fazit__liste strong { display: block; }
.fazit__liste span { font-size: var(--text-s); color: var(--stein-700); }

/* Weitere Bewertungen aufklappen */
.mehr-bewertungen { margin-top: var(--abstand-5); }
.mehr-bewertungen > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--text-s); font-weight: var(--gewicht-halbfett); color: var(--oliv-700);
  padding: .75rem 1.4rem; border: 2px solid var(--oliv-500); border-radius: var(--radius-rund); background: transparent;
}
.mehr-bewertungen > summary::-webkit-details-marker { display: none; }
.mehr-bewertungen > summary:hover { background: var(--oliv-100); }
.mehr-bewertungen > summary::after { content: "▾"; transition: transform .2s; }
.mehr-bewertungen[open] > summary::after { transform: rotate(180deg); }
.mehr-bewertungen .mehr-auf, .mehr-bewertungen[open] .mehr-zu { display: none; }
.mehr-bewertungen[open] .mehr-auf { display: inline; }
.mehr-bewertungen > .bewertungen { margin-top: var(--abstand-5); }

/* ---------- Unterseiten-Kopf mit Foto ---------- */
.seitenkopf--foto { padding: 0; background: var(--farbe-flaeche-ruhig); }
.seitenkopf--foto .seitenkopf__foto { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.seitenkopf--foto .container { padding-block: var(--abstand-6) var(--abstand-7); }
.seitenkopf h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); }
@media (min-width: 52rem) {
  .seitenkopf--foto { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 30rem; }
  .seitenkopf--foto .seitenkopf__foto { order: 2; aspect-ratio: auto; height: 100%; }
  .seitenkopf--foto .container { max-width: calc(var(--breite-inhalt) / 2); margin: 0 0 0 auto; align-self: center; padding-block: var(--abstand-8); }
}
.seitenkopf__tiere { display: flex; gap: .4rem; margin-bottom: var(--abstand-3); }

/* Wechsel Pferd ⇄ Hund auf Leistungsseiten */
.tierwechsel { display: flex; width: fit-content; padding: .25rem; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-rund); margin-bottom: var(--abstand-5); }
.tierwechsel a { padding: .4rem 1rem; border-radius: var(--radius-rund); text-decoration: none; color: var(--stein-700); font-size: var(--text-s); }
.tierwechsel a[aria-current="page"] { background: var(--oliv-500); color: #fff; font-weight: var(--gewicht-halbfett); }

/* ---------- Aufklapp-Listen (Indikationen, FAQ) ---------- */
.klapp { border-top: 1px solid var(--farbe-linie); }
.klapp details { border-bottom: 1px solid var(--farbe-linie); }
.klapp summary {
  list-style: none; cursor: pointer; padding: var(--abstand-4) 2.5rem var(--abstand-4) 0; position: relative;
  font-size: var(--text-l); font-weight: var(--gewicht-halbfett);
}
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; border-radius: 50%;
  background: var(--oliv-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%234B5005' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat;
  transition: transform .2s;
}
.klapp details[open] summary::after { transform: rotate(180deg); }
.klapp details > div { padding: 0 0 var(--abstand-5); }
.klapp details > div > :last-child { margin-bottom: 0; }

/* ---------- Bild + Text nebeneinander ---------- */
.teilung { display: grid; gap: var(--abstand-6); align-items: center; }
@media (min-width: 52rem) { .teilung { grid-template-columns: 1fr 1fr; gap: var(--abstand-8); } .teilung--umgekehrt > :first-child { order: 2; } }
.teilung img.bild-rund { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bildpaar { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--abstand-3); }
.bildpaar img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-m); }
.bildpaar img:last-child { margin-top: var(--abstand-7); }

/* ---------- Methoden-Liste mit Symbol ---------- */
.methoden { display: grid; gap: var(--abstand-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .methoden { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .methoden { grid-template-columns: repeat(3, 1fr); } }
.methode { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-m); padding: var(--abstand-5); }
.methode h3 { font-size: var(--text-l); font-weight: var(--gewicht-halbfett); margin-bottom: var(--abstand-2); display: flex; gap: .6rem; align-items: center; }
.methode h3::before { content: ""; flex: none; width: .9rem; height: .9rem; background: var(--gold-500); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.methode p { margin: 0; font-size: var(--text-s); color: var(--stein-700); }

/* ---------- Bildraster (kein seitliches Wischen) ---------- */
.fotostreifen { display: grid; gap: var(--abstand-3); grid-template-columns: 1fr 1fr; }
.fotostreifen a { display: block; }
.fotostreifen img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); }
@media (min-width: 52rem) { .fotostreifen { grid-template-columns: repeat(4, 1fr); gap: var(--abstand-4); } .fotostreifen img { aspect-ratio: 3/4; } }

/* ---------- Sprungnavigation auf langen Seiten (bricht um, scrollt nicht seitlich) ---------- */
.sprungnav { background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-linie); }
.sprungnav ul { list-style: none; margin: 0; padding: var(--abstand-4) 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.sprungnav span { width: 100%; font-size: var(--text-xs); font-weight: var(--gewicht-halbfett); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--stein-500); }
.sprungnav a { display: block; padding: .4rem .85rem; border-radius: var(--radius-rund); border: 1px solid var(--stein-300); text-decoration: none; color: var(--farbe-text); font-size: var(--text-s); }
.sprungnav a:hover { background: var(--oliv-100); border-color: var(--oliv-300); }
@media (min-width: 52rem) { .sprungnav span { width: auto; align-self: center; margin-right: var(--abstand-2); } }

/* ---------- Preis-Hinweis auf Leistungsseiten ---------- */
.preisbox { display: grid; gap: var(--abstand-4); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-left: 4px solid var(--gold-500); border-radius: var(--radius-m); padding: var(--abstand-5); }
.preisbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }
.preisbox li { display: flex; justify-content: space-between; gap: var(--abstand-4); border-bottom: 1px dashed var(--farbe-linie); padding-bottom: var(--abstand-2); }
.preisbox li small { color: var(--stein-500); font-size: var(--text-s); line-height: 1.45; }
.preisbox li strong { font-weight: var(--gewicht-halbfett); }
.preisbox li b { color: var(--oliv-600); font-weight: var(--gewicht-halbleicht); font-size: var(--text-l); white-space: nowrap; }
.preisbox p { margin: 0; font-size: var(--text-s); color: var(--stein-700); }
@media (min-width: 52rem) { .preisbox { grid-template-columns: 1.3fr 1fr; align-items: center; } }

/* ---------- Thermografie: Fallbeispiele ---------- */
.faelle { display: grid; gap: var(--abstand-5); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .faelle { grid-template-columns: 1fr 1fr; } }
.fall { margin: 0; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; }
.fall__bilder { display: grid; gap: 2px; background: var(--farbe-linie); }
@media (min-width: 40rem) {
  .fall__bilder--2 { grid-template-columns: 1fr 1fr; }
  .fall__bilder--3 { grid-template-columns: 1fr 1fr; }
  .fall__bilder--3 > :first-child { grid-column: 1 / -1; }
}
.fall__bilder a { display: block; background: #fff; position: relative; }
.fall__bilder img { width: 100%; height: 100%; object-fit: contain; background: #fff; max-height: 26rem; }
.fall__bilder a::after { content: ""; position: absolute; right: .5rem; bottom: .5rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgb(41 39 40 / .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/62% no-repeat; }
.fall figcaption { padding: var(--abstand-5); display: flex; flex-direction: column; gap: var(--abstand-2); }
.fall h3 { font-size: var(--text-l); font-weight: var(--gewicht-halbfett); margin: 0; }
.fall p { margin: 0; font-size: var(--text-s); color: var(--stein-700); }
.fall__wert { align-self: flex-start; font-size: var(--text-xs); font-weight: var(--gewicht-halbfett); padding: .15rem .6rem; border-radius: var(--radius-rund); background: var(--signal-rot-hell); color: var(--signal-rot); }
/* Fallgruppen als Aufklappbereiche */
.fallgruppe { border-top: 1px solid var(--farbe-linie); scroll-margin-top: 6rem; }
.fallgruppe:last-of-type { border-bottom: 1px solid var(--farbe-linie); }
.fallgruppe > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--abstand-3);
  padding: var(--abstand-4) 0;
}
.fallgruppe > summary::-webkit-details-marker { display: none; }
.fallgruppe__titel { font-size: var(--text-xl); color: var(--oliv-600); line-height: 1.2; flex: 1; }
.fallgruppe__anzahl { font-size: var(--text-xs); font-weight: var(--gewicht-halbfett); color: var(--oliv-700); background: var(--oliv-100); padding: .2rem .65rem; border-radius: var(--radius-rund); white-space: nowrap; }
.fallgruppe > summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--oliv-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%234B5005' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat;
  transition: transform .2s;
}
.fallgruppe[open] > summary::after { transform: rotate(180deg); }
.fallgruppe > summary:hover .fallgruppe__titel { color: var(--oliv-800); }
.fallgruppe > .faelle { padding-bottom: var(--abstand-7); }

/* ---------- Bildvergrößerung (Lupe) ---------- */
.lupe-dialog { border: 0; padding: 0; background: transparent; max-width: min(96vw, 80rem); max-height: 92vh; }
.lupe-dialog::backdrop { background: rgb(20 20 18 / .85); }
.lupe-dialog img { max-width: 100%; max-height: 82vh; width: auto; margin: 0 auto; border-radius: var(--radius-s); background: #fff; }
.lupe-dialog p { color: #fff; text-align: center; font-size: var(--text-s); margin: var(--abstand-3) auto 0; max-width: 60rem; }
.lupe-dialog button { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: #fff; color: var(--stein-900); font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* ---------- Preisseite ---------- */
.preisnav { position: sticky; top: 4.75rem; z-index: 10; background: rgb(250 249 245 / .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--farbe-linie); }
.preisnav ul { list-style: none; margin: 0; padding: var(--abstand-3) 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.preisnav ul::-webkit-scrollbar { display: none; }
.preisnav a { white-space: nowrap; display: block; padding: .45rem .95rem; border-radius: var(--radius-rund); border: 1px solid var(--stein-300); text-decoration: none; color: var(--farbe-text); font-size: var(--text-s); }
.preisnav a:hover { background: var(--oliv-100); border-color: var(--oliv-300); }
@media (min-width: 64rem) { .preisnav { top: 5.75rem; } }
.preisliste { list-style: none; margin: 0 0 var(--abstand-5); padding: 0; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-m); }
.preisliste li { display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--abstand-4); padding: var(--abstand-4) var(--abstand-5); }
.preisliste li + li { border-top: 1px solid var(--farbe-linie); }
.preisliste strong { font-size: var(--text-m); }
.preisliste .betrag { font-size: var(--text-l); color: var(--oliv-600); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.preisliste small { grid-column: 1 / -1; color: var(--stein-500); font-size: var(--text-s); }
.preisgruppe { margin-bottom: var(--abstand-8); }
/* Preisseite: Listen linksbündig in derselben Flucht wie Kopf und Schnellwahl */
.preise-spalte > * { max-width: 52rem; }
/* Methoden-Raster mit 5 Karten: auf dem Desktop 3 + 2 ohne Lücke */
@media (min-width: 64rem) {
  .methoden--5 { grid-template-columns: repeat(6, 1fr); }
  .methoden--5 > * { grid-column: span 2; }
  .methoden--5 > :nth-child(n+4) { grid-column: span 3; }
}
.preisgruppe h2 { display: flex; align-items: center; gap: var(--abstand-3); }
.preisgruppe h2 img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }

/* ---------- Über mich: Werdegang ---------- */
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--oliv-200); }
.zeitleiste li { position: relative; padding-bottom: var(--abstand-5); }
.zeitleiste li::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px var(--stein-50); }
.zeitleiste strong { display: block; }
.zeitleiste span { color: var(--stein-500); font-size: var(--text-s); }

/* ---------- Kontakt-Band (Abschluss jeder Seite) ---------- */
.kontaktband { text-align: center; }
.kontaktband .hero__aktionen { justify-content: center; }
.kontaktband p { margin-inline: auto; }

/* ---------- WhatsApp-Button (Markengrün nur hier) ---------- */
.button--whatsapp { background: #1E8E4B; color: #fff; }
.button--whatsapp:hover { background: #17733C; color: #fff; }
.button svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- Formular: Pflichtfelder & Fehlermeldungen ---------- */
.pflicht { color: var(--signal-rot); font-weight: var(--gewicht-halbfett); }
.optional { font-weight: var(--gewicht-normal); color: var(--stein-500); font-size: var(--text-xs); }
.feld__hilfe { font-size: var(--text-xs); color: var(--stein-700); line-height: 1.45; }
.feld__fehler { display: none; font-size: var(--text-xs); color: var(--signal-rot); }
.feld input:user-invalid, .feld textarea:user-invalid, .feld select:user-invalid { border-color: var(--signal-rot); background: var(--signal-rot-hell); }
.feld:has(:user-invalid) > .feld__fehler { display: block; }
.einwilligung:has(input:user-invalid) { color: var(--signal-rot); }
.formular-meldung { border-radius: var(--radius-m); padding: var(--abstand-5); margin-bottom: var(--abstand-5); }
.formular-meldung p { margin: var(--abstand-2) 0 0; }
.formular-meldung--ok { background: var(--oliv-50); border-left: 4px solid var(--signal-gruen); }
.formular-meldung--fehler { background: var(--signal-rot-hell); border-left: 4px solid var(--signal-rot); color: var(--signal-rot); font-weight: var(--gewicht-halbfett); }
.formular button[disabled] { opacity: .6; cursor: wait; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular { position: relative; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: var(--text-xl); margin-top: var(--abstand-7); }
.rechtstext h3 { font-size: var(--text-l); font-weight: var(--gewicht-halbfett); margin-top: var(--abstand-5); }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: var(--abstand-2); }

/* ---------- Platzhalter (nur im Entwurf sichtbar) ---------- */
.platzhalter { background: var(--gold-50); outline: 2px dashed var(--gold-500); outline-offset: 2px; border-radius: 4px; padding: 0 .2em; }
.platzhalter-box { position: relative; outline: 2px dashed var(--gold-500); outline-offset: 4px; }
.platzhalter-box::before {
  content: attr(data-hinweis); position: absolute; top: -.9rem; right: .75rem; z-index: 2;
  background: var(--gold-500); color: var(--stein-900); font-size: var(--text-xs); font-weight: var(--gewicht-halbfett);
  padding: .1rem .6rem; border-radius: var(--radius-rund);
}

/* ---------- Dachzeile: Stern vor UND nach der Beschriftung (wie in den Druckvorlagen) ---------- */
/* Sterne als Schriftzeichen mit geschütztem Leerzeichen: kein Umbruch zwischen Stern und Wort,
   ein Stern kann also nie allein in einer Zeile stehen */
.dachzeile { display: block; line-height: 1.5; }
.dachzeile::before, .dachzeile::after {
  display: inline; width: auto; height: auto; background: none; clip-path: none;
  color: var(--farbe-akzent); font-size: 1.05em; letter-spacing: 0;
}
.dachzeile::before { content: "★\00a0"; }
.dachzeile::after { content: "\00a0★"; }

/* ---------- Zeilenumbruch: Zeilen so weit wie möglich füllen ----------
   website.css nutzt text-wrap: pretty (Absätze) und balance (Überschriften).
   Beides bricht bewusst früher um und verschenkt Platz – hier auf normalen Umbruch zurückgesetzt. */
p, li, blockquote, figcaption, .lead, h1, h2, h3, h4, summary { text-wrap: wrap; }

/* ---------- Kleinigkeiten ---------- */
.abschnitt { padding-block: var(--abstand-7); }
@media (min-width: 52rem) { .abschnitt { padding-block: var(--abstand-9); } }
.abschnitt__kopf { margin-bottom: var(--abstand-6); }
.fuss { padding-bottom: var(--abstand-6); }
/* Vollständiges Logo in Originalfarben auf heller Karte (dunkle Schrift wäre auf Anthrazit nicht lesbar) */
.fuss__logo { display: inline-block; background: var(--stein-50); border-radius: var(--radius-m); padding: var(--abstand-4) var(--abstand-5); margin-bottom: var(--abstand-4); }
.fuss__logo img { width: 12rem; mix-blend-mode: multiply; }
.fuss__sozial { margin-top: var(--abstand-4); }
@media (min-width: 48rem) { .fuss__logo img { width: 13rem; } }
.textlink--hell { color: var(--gold-300); }

/* ---------- Thermografie hervorheben (Alleinstellungsmerkmal) ---------- */
/* Startseite: Band mit Wärmebildern */
.thermo-band .sternliste li::before { color: var(--gold-300); }
.thermo-band .bildpaar img { border: 1px solid rgb(255 255 255 / .15); }
/* Pferdeseite: hervorgehobene Thermografie-Karte (goldener Rahmen + Etikett) */
.angebot--hervor { position: relative; border: 2px solid var(--gold-500); }
.angebot--hervor .angebot__etikett { position: absolute; top: var(--abstand-3); left: var(--abstand-3); box-shadow: var(--schatten-s, 0 1px 3px rgb(0 0 0 / .15)); }

/* ---------- Ablauf-Schritte: auf dem Desktop als Zeilen (Nummer | Titel | Text) ----------
   Das automatische Raster aus website.css erzeugt bei 4–6 Schritten unvollständige Reihen
   und ungleich hohe Kacheln. Als Zeilen bleibt es bei jeder Anzahl geschlossen. */
@media (min-width: 52rem) {
  .schritte { grid-template-columns: 1fr; gap: 0; border-bottom: 2px solid var(--oliv-200); }
  .schritte li { display: grid; grid-template-columns: 4rem 15rem minmax(0, 1fr); column-gap: var(--abstand-5); align-items: baseline; padding-block: var(--abstand-4); }
  .schritte li::before { margin-bottom: 0; }
  .schritte strong { margin-bottom: 0; }
}