/* ============================================================
   VICARI – polish.css
   Feinschliff: Tastbarkeit, Fokus, Motion-Timing, Schattenton.
   Wird als LETZTES Stylesheet geladen und überschreibt gezielt.
   Layout, Farben, Schriften und Struktur bleiben unangetastet.
   Diese Datei kann jederzeit ersatzlos entfernt werden.
   ============================================================ */

/* ---------- 1. Easing-Tokens ------------------------------------
   Die eingebauten CSS-Kurven (ease, ease-out) sind zu schwach –
   Bewegung startet träge, genau im Moment höchster Aufmerksamkeit.
   Diese Kurven starten schnell und laufen weich aus.              */
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Schatten warm eingefärbt statt neutralem Schwarz.
     Auf dem warmen Untergrund (#F9F6F1) wirkt reines Schwarz grau
     und schmutzig; ein Braunton der Grundfarbe wirkt weich. */
  --shadow: rgba(64, 54, 40, 0.085);
}

/* ---------- 2. Tastbarkeit ---------------------------------------
   Bisher hatte kein einziges Element einen :active-Zustand.
   Auf dem Handy gibt es kein Hover – ohne :active bekommt ein
   Nutzer beim Antippen keinerlei Rückmeldung.                     */
.btn-primary,
.btn-secondary,
.btn-doctolib,
.btn-ghost,
.btn-nav,
.card,
.leistung-card,
.team-card,
.finder-tile,
.faq-q,
.nav-toggle,
.nav-burger,
#fab-termin {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-primary:active,
.btn-secondary:active,
.btn-doctolib:active,
.btn-ghost:active,
.btn-nav:active,
#fab-termin:active {
  transform: scale(0.972);
  transition-duration: 90ms;
}

.card:active,
.leistung-card:active,
.team-card:active,
.finder-tile:active {
  transform: scale(0.988);
  transition-duration: 90ms;
}

.faq-q:active {
  opacity: 0.62;
  transition-duration: 80ms;
}

/* ---------- 3. Motion-Timing --------------------------------------
   Hover-Übergänge liefen mit 0,4–0,55 s und ohne definierte Kurve.
   Alles, was der Nutzer dutzendfach auslöst, gehört unter 250 ms.  */
.btn-primary,
.btn-secondary,
.btn-doctolib,
.btn-ghost,
.btn-nav {
  transition: background-color 180ms var(--ease-out),
              border-color 180ms var(--ease-out),
              color 180ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              transform 160ms var(--ease-out);
}

.card,
.leistung-card,
.team-card {
  transition: box-shadow 240ms var(--ease-out),
              border-top-color 240ms var(--ease-out),
              transform 220ms var(--ease-out);
}

.finder-tile {
  transition: background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              transform 170ms var(--ease-out);
}

/* Akkordeon: bewegt sich auf dem Bildschirm → ease-in-out */
.faq-a { transition: max-height 320ms var(--ease-in-out); }
.faq-arrow { transition: transform 260ms var(--ease-out); }

/* ---------- 4. Hover nur dort, wo es Hover gibt --------------------
   Auf Touchgeräten bleibt ein :hover nach dem Antippen hängen –
   die Karte sieht dann dauerhaft „angefasst" aus.                  */
@media (hover: none) {
  .card:hover,
  .leistung-card:hover,
  .team-card:hover,
  .finder-tile:hover {
    transform: none;
  }
}

/* ---------- 5. Sichtbarer Tastaturfokus ----------------------------
   Bislang gab es praktisch keinen Fokusstil. Wer mit der Tastatur
   navigiert, sah nicht, wo er sich befindet. Für Mausnutzer ändert
   sich nichts, da :focus-visible nur bei Tastatur greift.          */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.btn-primary:focus-visible,
.btn-doctolib:focus-visible {
  outline-color: var(--accent-dark);
  outline-offset: 4px;
}

/* Auf dunklen Flächen heller Ring */
.finder-tile:focus-visible,
footer a:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

/* ---------- 6. Optische Feinheiten ---------------------------------
   Grosse Grade in Cormorant Garamond brauchen etwas engere Laufweite;
   bei kleinen Graden gilt das Gegenteil. Reine Optik, kein Umbruch. */
h1 { letter-spacing: -0.018em; }
/* h2 bewusst unveraendert: engere Laufweite verschob Zeilenumbrueche */

/* Ziffern in Kennzahlen und Öffnungszeiten tabellarisch ausrichten */
.stat-num,
.stat-number,
.oeffnungszeiten,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Einzelner Absatz lief über 149 Zeichen Zeilenlänge – ermüdend. */
.highlight-box p { max-width: 68ch; }

/* ---------- 7. Bewegung respektieren ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active,
  .btn-secondary:active,
  .btn-doctolib:active,
  .btn-ghost:active,
  .btn-nav:active,
  .card:active,
  .leistung-card:active,
  .team-card:active,
  .finder-tile:active,
  #fab-termin:active {
    transform: none;
  }
}

/* ---------- 8. Praxis-Hinweis in der Topbar -------------------------
   Die Topbar ist immer da und immer gleich grün – das Auge überliest
   sie nach dem zweiten Besuch. Ein Hinweis muss sich deshalb in der
   FARBE unterscheiden, nicht nur im Text. Warmer Lehmton statt Grün,
   etwas größer, mit ruhig pulsierendem Punkt. Kein Popup: wer mit
   Zahnschmerzen die Nummer sucht, soll nicht erst wegklicken müssen. */
.topbar--hinweis {
  background: #8A5A3B;
  font-size: 0.86rem;
  padding: 0.72rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.topbar--hinweis strong { font-weight: 600; }

.hinweis-punkt {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFD9A0;
  margin-right: 0.6rem;
  vertical-align: 1px;
  animation: hinweis-puls 2.6s var(--ease-in-out) infinite;
}

@keyframes hinweis-puls {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

@media (max-width: 600px) {
  .topbar--hinweis { font-size: 0.76rem; line-height: 1.45; }
  .topbar--hinweis .sep { display: block; height: 0; margin: 0; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .hinweis-punkt { animation: none; }
}

/* ---------- 9. Topbar-Höhe dynamisch --------------------------------
   nav, Hero und Mobilmenü rechneten fest mit 38px Topbar bzw. 108px
   Gesamthöhe. Sobald der Hinweis zwei- oder dreizeilig umbricht (Handy),
   schob sich die Topbar über das Logo. Die Höhe wird jetzt gemessen und
   als Variable gesetzt; die 38/108px bleiben als Rückfallwert stehen. */
nav { top: var(--topbar-h, 38px); }
.hero { padding-top: calc(var(--topbar-h, 38px) + 70px); }
.nav-links.open { top: calc(var(--topbar-h, 38px) + 70px); }
#navLinks.open { top: calc(var(--topbar-h, 38px) + 70px) !important; }

/* ---------- 10. Leistungen – Foto-Kacheln statt Icon-Grid -----------
   Grosszuegiges 3-Spalten-Grid, echte Praxis-/Produktfotografie als
   Kachelhintergrund, Titel als Overlay unten. Fuer Kategorien ohne
   Foto (noch in Arbeit) eine ruhige Platzhalter-Variante, damit das
   Raster nicht auseinanderfaellt, bevor alle Bilder da sind. */
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.leistung-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: var(--accent-xlight);
}

.leistung-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out, ease-out);
}

.leistung-tile:hover img { transform: scale(1.045); }

.leistung-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,16,10,.82) 100%);
}

.leistung-tile-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.5rem;
}

.leistung-tile-titel {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  margin: 0 0 .3rem;
  transition: color 200ms var(--ease-out, ease-out);
}

.leistung-tile-text {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
  max-width: 26ch;
  margin: 0;
}

/* Platzhalter: helle Flaeche, Titel dunkel, dezente gestrichelte Kontur
   statt Foto -- sichtbar "kommt noch", nicht wie ein Fehler. */
.leistung-tile-platzhalter {
  background: var(--bg);
  border: 1.5px dashed var(--border);
}
.leistung-tile-platzhalter .leistung-tile-content {
  position: static;
  padding: 1.6rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.leistung-tile-platzhalter .leistung-tile-titel { color: var(--text); }
.leistung-tile-platzhalter .leistung-tile-text { color: var(--text-mid); }
.leistung-tile-platzhalter:hover { border-color: var(--accent); }
.leistung-tile-platzhalter:hover .leistung-tile-titel { color: var(--accent-dark); }

.leistung-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

@media (max-width: 1024px) {
  .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .leistungen-grid { grid-template-columns: 1fr; gap: .9rem; }
  .leistung-tile { aspect-ratio: 5 / 4; }
  .leistung-tile-titel { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .leistung-tile img { transition: none; }
}

/* ---------- 11. Platzhalter-Icon (KFO/Laser/CMD, bis Fotos da sind) --- */
.leistung-tile-icon {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.leistung-tile-icon svg { width: 22px; height: 22px; }

/* ---------- 12. Warum-wir-Kacheln (Foto-Variante) --------------------- */
@media (max-width: 640px) {
  .warum-grid { grid-template-columns: 1fr !important; }
}

/* ---------- 13. Ärzte-Karten – kompakt, Foto+Text nebeneinander ----
   Vorherige Version zeigte die Fotos ueber halbe Viewportbreite an,
   obwohl die Quelldateien nur 800px breit sind - das gab sichtbare
   Unschaerfe auf groesseren/Retina-Bildschirmen. Jetzt ein kompaktes
   2x2-Grid, Fotogroesse an die tatsaechliche Aufloesung angepasst,
   Foto und Text nebeneinander in jeder Karte, alternierend. */
.arzt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.arzt-karte {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--accent-xlight);
  border-radius: 14px;
  padding: .9rem;
  transition: background 220ms var(--ease-out, ease-out);
}
.arzt-karte:hover { background: var(--accent-light); }

.arzt-karte:nth-child(even) { flex-direction: row-reverse; }

.arzt-karte-foto {
  flex: 0 0 108px;
  width: 108px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.arzt-karte-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out, ease-out);
}
.arzt-karte:hover .arzt-karte-foto img { transform: scale(1.04); }

.arzt-karte-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.arzt-karte-text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 .25rem;
  color: var(--text);
  line-height: 1.15;
}
.arzt-karte-text .role {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 600;
  margin-bottom: .5rem;
}
.arzt-karte-text p {
  font-size: .8rem;
  color: var(--text-mid);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 640px) {
  .arzt-grid { grid-template-columns: 1fr; }
  .arzt-karte, .arzt-karte:nth-child(even) { flex-direction: row; }
  .arzt-karte-foto { flex-basis: 34vw; }
}

/* ---------- 14. Warum-wir-Kacheln: Bild unbeschnitten zeigen -------- */
.leistung-tile-unbeschnitten img { object-fit: contain !important; background: #e9e4da; }

/* ---------- 15. Ärzte-Grid: 2 Spalten statt 3 (Pauline neben Nicolas) */
.aerzte-grid { grid-template-columns: 1fr 1fr; }

/* ---------- 16. Ärzte-Grid Startseite: etwas kleiner (schmalerer Container) */
.aerzte-grid { max-width: 780px; margin: 0 auto; }

/* ---------- 17. Bild-Reveal: Foto zoomt beim Erscheinen sanft heraus --- */
.leistung-tile img { transform: scale(1.06); transition: transform 1100ms cubic-bezier(.22,1,.36,1); }
.leistung-tile.visible img { transform: scale(1); }
.leistung-tile.visible:hover img { transform: scale(1.04); transition-duration: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .leistung-tile img, .leistung-tile.visible img { transform: none !important; transition: none !important; }
}

/* ---------- 18. Hero-Video (Vollbild, hinter dem Text) ----------------- */
.hero { background-image: none !important; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 45%;
  z-index: 0;
  pointer-events: none;
}
.hero::before { z-index: 1; }
.hero-inner { position: relative; z-index: 2; }
/* Fallback: reduzierte Bewegung -> nur Poster zeigen */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background-image: url('images/hero-poster.jpg') !important; background-size: cover; background-position: center 45%; }
}

/* Text-Seite etwas staerker abdunkeln, damit das Wand-Logo nicht mit der Headline konkurriert */
.hero::before { background: linear-gradient(120deg, rgba(10,20,12,0.80) 0%, rgba(10,20,12,0.55) 45%, rgba(10,20,12,0.18) 100%) !important; }

/* ---------- 19. Statement-Sektion: grosse ruhige Aussage ---------------- */
.statement {
  padding: 9rem 0;
  background: var(--bg-white);
}
.statement-inner { max-width: 1100px; }
.statement-kicker {
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 2rem;
}
.statement-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.statement-text span { display: block; }
.statement-text em { font-style: italic; color: var(--accent-dark); }
/* gestaffelt einblenden */
.statement-text span:nth-child(2) { transition-delay: 140ms; }

@media (max-width: 640px) { .statement { padding: 5rem 0; } }

/* ---------- 20. Symptom-Finder: hell, ruhig, im Stil der Kacheln ------- */
.finder-section {
  background: var(--bg) !important;
  padding: 7rem 0 !important;
}
.finder-intro .section-tag { color: var(--accent) !important; }
.finder-intro h2 { color: var(--text) !important; }
.finder-intro p { color: var(--text-mid) !important; }

.finder-grid { gap: 1rem !important; }

.finder-tile {
  background: var(--bg-white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 2rem 1.25rem 1.75rem !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.finder-tile:hover {
  background: var(--bg-white) !important;
  border-color: var(--accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 34px rgba(74,89,64,.14) !important;
}
.finder-tile.active {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: #fff !important;
}
.finder-tile svg {
  width: 40px !important; height: 40px !important;
  margin: 0 auto 1rem !important;
  color: var(--accent);
  stroke-width: 1.5;
  transition: transform .3s ease;
}
.finder-tile:hover svg { transform: scale(1.08); }
.finder-tile.active svg { color: #fff; }
.finder-tile span {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

.finder-result {
  background: var(--bg-white) !important;
  border: 1px solid var(--border);
  border-radius: 16px !important;
  padding: 2.5rem 3rem !important;
  box-shadow: 0 18px 50px rgba(74,89,64,.10);
}

/* ---------- 21. Footer: Sprechzeiten ------------------------------------ */
.footer-hours { border-collapse: collapse; font-size: .82rem; color: #aaa; }
.footer-hours td { padding: .2rem 0; vertical-align: top; }
.footer-hours td:first-child { color: #ccc; padding-right: 1.25rem; white-space: nowrap; }

/* ---------- 22. Hero: Neue-Patienten-Hinweis ---------------------------- */
.hero-note {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 1.5rem 0 0;
  font-size: .85rem; color: rgba(255,255,255,.82);
  letter-spacing: .01em;
}
.hero-note-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8fd0a0;
  box-shadow: 0 0 0 0 rgba(143,208,160,.6);
  animation: heroDot 2.2s ease-out infinite;
}
@keyframes heroDot {
  0%   { box-shadow: 0 0 0 0 rgba(143,208,160,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(143,208,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(143,208,160,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-note-dot { animation: none; } }

/* ---------- 23. Topbar: Notfall-Hinweis --------------------------------- */
.topbar-notfall {
  color: #fff !important; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 1px;
}
.topbar-notfall:hover { border-bottom-color: #fff; }
@media (max-width: 640px) {
  /* Auf Mobile Adresse ausblenden, Notfall behalten */
  .topbar-notfall-sep { display: none; }
  .topbar-notfall { display: block; margin-top: .15rem; }
}

/* ---------- 24. Reveal: weicheres Timing, Kacheln etwas langsamer ------- */
.leistung-tile.reveal { transition-duration: .7s; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ---------- 25. Mobile: Ärzte-Grid einspaltig, Kachel-Texte kompakter --- */
@media (max-width: 640px) {
  .aerzte-grid { grid-template-columns: 1fr; max-width: none; }
  /* Personen-Kacheln: Portrait beibehalten, Text klein, Bild bleibt sichtbar */
  .aerzte-grid .leistung-tile,
  #section-team .leistungen-grid .leistung-tile { aspect-ratio: 4 / 5; }
  .aerzte-grid .leistung-tile-titel,
  #section-team .leistungen-grid .leistung-tile-titel { font-size: 1.35rem; line-height: 1.15; }
  .leistung-tile-content { padding: 1.1rem 1.1rem 1.1rem; }
  .leistung-tile-text { font-size: .82rem; }
}

/* ---------- 26. Hero-Video mobil: Hochformat-Ausschnitt mittig ---------- */
@media (max-width: 640px) {
  .hero-video { object-position: center 55%; }
  .hero { background-image: url('images/hero-poster-mobile.jpg') !important; background-size: cover; background-position: center 55%; }
}

/* ---------- 27. Hero: Video staerker in den Vordergrund ----------------- */
/* Overlay zurueckhaltender, damit das Video sichtbar bleibt; Text bekommt
   stattdessen einen weichen Schatten fuer Lesbarkeit. */
.hero::before {
  background: linear-gradient(105deg, rgba(10,20,12,.62) 0%, rgba(10,20,12,.34) 42%, rgba(10,20,12,.10) 75%) !important;
}
.hero-inner h1,
.hero-inner .hero-sub,
.hero-inner .hero-note { text-shadow: 0 2px 24px rgba(0,0,0,.45); }

.hero-inner .hero-sub {
  font-size: 1.05rem;
  max-width: 34ch;
  opacity: .92;
}
.hero-actions { margin-top: 2rem; }

@media (max-width: 640px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(10,20,12,.30) 0%, rgba(10,20,12,.58) 45%, rgba(10,20,12,.80) 100%) !important;
  }
  .hero-inner .hero-sub { font-size: .98rem; max-width: none; }
}

/* Text nach unten setzen (Fiedler-Prinzip): Video bleibt oben frei sichtbar */
@media (min-width: 641px) {
  .hero-video { object-position: center 42%; }
  .hero-inner { justify-content: flex-end !important; padding-bottom: 5rem; }
  .hero { justify-content: flex-end !important; }
  .hero::before {
    background: linear-gradient(180deg, rgba(10,20,12,.18) 0%, rgba(10,20,12,.22) 40%, rgba(10,20,12,.72) 100%) !important;
  }
}

/* ---------- 28. Weiche Übergänge zwischen den Abschnitten --------------- */
/* Statt harter Farbkanten blenden die Sektionsränder ineinander.
   Umgesetzt über Pseudo-Elemente, damit der Inhalt unberührt bleibt. */
.soft-top,
.soft-bottom { position: relative; }

.soft-top::before,
.soft-bottom::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
}
.soft-top::before { top: 0; }
.soft-bottom::after { bottom: 0; }

/* Weiß, das nach oben in Creme ausläuft */
.soft-top--from-cream::before {
  background: linear-gradient(to bottom, #F9F6F1 0%, rgba(249,246,241,0) 100%);
}
/* Weiß, das nach unten in Creme ausläuft */
.soft-bottom--to-cream::after {
  background: linear-gradient(to top, #F9F6F1 0%, rgba(249,246,241,0) 100%);
}
/* Creme, das nach oben in Weiß ausläuft */
.soft-top--from-white::before {
  background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255,255,255,0) 100%);
}
/* Creme, das nach unten in Weiß ausläuft */
.soft-bottom--to-white::after {
  background: linear-gradient(to top, #FFFFFF 0%, rgba(255,255,255,0) 100%);
}

/* Inhalte über den Verlauf heben */
.soft-top > *, .soft-bottom > * { position: relative; z-index: 2; }

@media (max-width: 640px) {
  .soft-top::before, .soft-bottom::after { height: 55px; }
}

/* ---------- 29. Leistungsseiten: großes Querformat-Hero statt Farbverlauf */
.page-hero-photo {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 6rem 0 3.5rem;
}
.page-hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
.page-hero-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,12,.55) 0%, rgba(10,20,12,.25) 35%, rgba(10,20,12,.80) 100%);
  z-index: 1;
}
.page-hero-photo .container { position: relative; z-index: 2; max-width: 800px; }
.page-hero-photo .breadcrumb { color: rgba(255,255,255,.75); }
.page-hero-photo .breadcrumb a, .page-hero-photo .breadcrumb span { color: rgba(255,255,255,.6); }
.page-hero-photo .section-tag { color: #A8C49E; }
.page-hero-photo h1 { color: #fff; font-size: clamp(2.2rem,5vw,3.8rem); margin-bottom: 1rem; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.page-hero-photo p { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 580px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

@media (max-width: 640px) {
  .page-hero-photo { min-height: 52vh; padding: 6.5rem 0 2.5rem; }
}