/* Beispielseite recoveriX: die Fachbereichsfarbe. Im PHP setzt das
   fachrichtung_css_vars('recoverix') aus der Farbe der Therapie, hier
   steht sie fest, weil der Prototyp keine Datenbank hat. */
:root{
  --cat-main:#6587B7; --cat-dark:#3F5E8C; --cat-light:#EAF0F8;
  --cat-mid:#BDD4E9;  --cat-deeptext:#27405F;
}

/* ──────────────────────────────────────────────────────────────────────────
   FARBE DES FACHBEREICHS

   Die Werte in `:root` sind die des Prototyps und gelten als Rückfall. Auf der
   Seite setzt `fachrichtung_farbschicht()` (colors.php) sie neu — dieselbe
   Datei bedient alle Fachbereiche. Deshalb stehen in den Regeln darunter keine
   festen Farbwerte mehr, sondern die Variablen: sonst bleibt jede Seite in der
   Farbe des Prototyps stehen. Gemeldet von Alex am 18.09.2026.
   ────────────────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--cat-dark) 0%,var(--cat-deeptext) 70%)}
.hero.has-image{background-image:
  linear-gradient(100deg,
    color-mix(in srgb, var(--cat-deeptext) 86%, transparent) 0%,
    color-mix(in srgb, var(--cat-deeptext) 76%, transparent) 58%,
    color-mix(in srgb, var(--cat-deeptext) 34%, transparent) 84%,
    color-mix(in srgb, var(--cat-deeptext) 12%, transparent) 100%),
  var(--banner-image);
  background-size:cover;background-position:center right}
.hero-badge{background:color-mix(in srgb, var(--cat-deeptext) 55%, transparent);
  color:var(--cat-light);
  border-color:color-mix(in srgb, var(--cat-mid) 45%, transparent)}
/* Überschriften in der Bereichsfarbe, wie auf der Intensivseite. Hero und
   Handlungsbänder haben eigene, spezifischere Regeln. */
h1, h2, h3{color:var(--cat-deeptext)}
.mehr-link{color:var(--cat-dark);border-bottom-color:var(--cat-main)}
.mehr-link:hover{color:var(--cat-main)}
/* Das Handlungsband trägt überall die Grundfarbe der Marke und den
   orangen Terminknopf — beides wechselt nicht je Fachbereich. Nur die
   Intensivseite weicht ab. Deshalb steht hier keine Regel: die Werte
   kommen aus der Themenschicht. */

/* Vorlage therapie-detail — Regeln aus assets/css/therapie-detail.css
   des Kids-Projekts. Die Fachbereichsfarbe kommt aus dem Router.
   Herausgenommen: das harte Ausschalten der Menueleiste ab 960px —
   die Grenze der Erwachsenensite steht in der Themenschicht. */
/* LOCATIONS */
.location-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:960px){
  .hero{padding:56px 0 44px}
  .ansatz-grid,.warum-intro-grid{grid-template-columns:1fr}
  .card-grid,.subtherapy-grid{grid-template-columns:repeat(2,1fr)}
  .warum-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .intensiv-band{grid-template-columns:1fr}
  .diag-grid{grid-template-columns:repeat(3,1fr)}
  .price-grid{grid-template-columns:1fr}
  .testimonial-grid,.location-grid{grid-template-columns:1fr}
  /* Fußzeile: die Regeln für kleine Schirme stehen in site.css.
     Hier standen sie doppelt und haben die dortigen überschrieben, weil
     diese Datei später geladen wird — dadurch sah die Fußzeile auf jeder
     Unterseite anders aus als auf der Startseite, die keine eigene
     Datei hat. */
}
@media(min-width:1280px){
  .hero{min-height:420px;display:flex;align-items:center;padding-top:40px;padding-bottom:36px}
  .hero > .wrap{width:100%}
}
@media(min-width:1600px){
  .hero{min-height:450px}
}
/* Zusatz dieser Site: Fließtext und Überschriftenblöcke auf 1200 Pixel,
   wie überall. */
.ansatz-text p, .warum-intro-grid p{max-width:1200px}

/* Merkmalskarten: die Kids-Datei kennt .feature-grid nur im Mobilteil,
   der Grundzustand steht in site.css. Hier nur die Zeilenhöhe der
   Beschreibung, die dort fehlt. */
.feature-item span{display:block;font-size:13.5px;color:var(--text-mid);
  line-height:1.6;margin-top:3px}
.feature-item b{display:block;font-size:15px;color:var(--green-deepest)}

/* ── Baustein Intensivtherapie: immer in den eigenen Farben ─────────── */
/* Der Block wirbt für die Intensivtherapie und trägt deshalb deren Farbe,
   egal auf welcher Seite er steht. */
.intensiv-band{background:linear-gradient(135deg,#FDF8F0 0%,#FFFFFF 55%);
  border-color:#E0C79E;box-shadow:0 16px 44px -22px rgba(65,36,2,.32)}
.intensiv-badge{background:#B06A10;color:#FFFFFF;
  box-shadow:0 4px 10px rgba(65,36,2,.3)}
.intensiv-band h2{color:#412402}
.intensiv-band .btn-gold{background:#A05F1E;color:#FFFFFF}
.intensiv-band .btn-gold:hover{background:#7E4B0B;color:#FFFFFF}
.intensiv-photo{box-shadow:0 12px 28px -12px rgba(65,36,2,.35)}

/* ── Video ───────────────────────────────────────────────────────────── */
.video-rahmen{max-width:900px;border-radius:20px;overflow:hidden;
  border:1px solid var(--cream-border);background:var(--cat-light)}
.video-rahmen video, .video-rahmen iframe{display:block;width:100%;
  aspect-ratio:16/9;border:0}
/* Platzhalter in derselben Größe wie das spätere Video — so springt beim
   Einsetzen nichts. */
.video-platz{aspect-ratio:16/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  padding:24px;background:linear-gradient(135deg,var(--cat-light) 0%,
  var(--white) 70%)}
.video-knopf{width:66px;height:66px;border-radius:50%;background:var(--cat-main);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:24px;padding-left:4px;box-shadow:0 10px 26px -10px var(--cat-main)}
.video-titel{font-family:'Playfair Display',serif;font-size:19px;
  color:var(--cat-deeptext)}
.video-hinweis{font-size:12.5px;color:var(--text-muted);max-width:420px;
  line-height:1.55}

/* ── Bewertungen ─────────────────────────────────────────────────────── */
/* Kein Foto: die Bilder der Google-Profile gehören den Verfassenden und
   dürfen nicht mitkopiert werden. Die Initiale tut dasselbe. */
.testimonial-ini{width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--cat-light);border:1px solid var(--cat-mid);
  color:var(--cat-dark);display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:21px;font-weight:700}
.testimonial-card{display:flex;flex-direction:column}

/* ── Erfahrungsberichte ──────────────────────────────────────────────── */
.erf-band{margin-top:40px;background:linear-gradient(135deg,
  var(--cat-light) 0%,var(--white) 60%);border:1px solid var(--cat-mid);
  border-left:5px solid var(--cat-main);border-radius:0 20px 20px 0;
  padding:34px 36px}
.erf-band h2{font-size:24px;line-height:1.28;margin-bottom:14px}
.erf-band p{color:var(--text-mid);font-size:14.5px;line-height:1.7;
  max-width:1000px}
.erf-band p + p{margin-top:10px}
.erf-band .btn{margin-top:22px}

@media(max-width:700px){
  .erf-band{padding:26px 22px;border-radius:0 16px 16px 0}
  .erf-band h2{font-size:20px}
  .video-knopf{width:54px;height:54px;font-size:20px}
}

/* ── Fotos ───────────────────────────────────────────────────────────── */
/* Die organische Rundung („Blob") ist Kids-Handschrift. Auf der
   Erwachsenensite ein Rechteck mit weichen Ecken. */
.ansatz-photo-wrap img, .warum-photo-wrap img{border-radius:18px;
  border:none;box-shadow:0 16px 40px -20px rgba(58,64,83,.45)}
.ansatz-photo-wrap::before, .warum-photo-wrap::before{display:none}
.ansatz-photo-wrap, .warum-photo-wrap{max-width:340px}

/* ── Video zentriert ─────────────────────────────────────────────────── */
.video-rahmen{margin:0 auto}
.video-fuss{margin-top:20px;text-align:center}

/* ── Diagnoseplaketten: gleich wie auf den Standortseiten ───────────── */
.dx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dx-link{display:flex;align-items:center;justify-content:space-between;
  gap:14px;background:var(--white);border:1px solid var(--cream-border);
  border-radius:14px;padding:18px 18px 18px 22px;
  font-family:'Playfair Display',serif;font-size:16.5px;font-weight:600;
  color:var(--cat-deeptext);line-height:1.3;position:relative;overflow:hidden;
  transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
.dx-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--cat-main);transition:width .22s}
.dx-link span{width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:var(--cat-light);border:1px solid var(--cat-mid);
  color:var(--cat-dark);font-size:14px;font-weight:700;
  font-family:'Source Sans 3',sans-serif;display:flex;align-items:center;
  justify-content:center;transition:all .22s}
.dx-link:hover{background:var(--cat-light);border-color:var(--cat-main);
  transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(58,64,83,.4)}
.dx-link:hover::before{width:8px}
.dx-link:hover span{background:var(--cat-main);border-color:var(--cat-main);
  color:#fff;transform:translateX(2px)}
@media(max-width:900px){.dx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dx-grid{grid-template-columns:1fr}
  .ansatz-photo-wrap, .warum-photo-wrap{max-width:100%}}

/* ── Preiskarten: Aufzählung mit Punkten ─────────────────────────────── */
/* `.price-features li` in site.css ist ein Flexkasten mit Abstand, aber
   ohne Merkzeichen — die Zeilen standen ohne Anfang da. Die Punkte in der
   Bereichsfarbe, gleiche Bauweise wie `.checklist`. */
.price-features li::before{content:'●';color:var(--cat-main);font-size:8px;
  line-height:1;margin-top:8px;flex-shrink:0}
/* Die Zahl der Preiskarten wechselt je Therapie: recoveriX hat zwei,
   Physiotherapie drei. Ein festes Raster passt deshalb nicht — bei drei
   Spalten und zwei Karten bleibt rechts eine Lücke, bei zwei Spalten und
   drei Karten steht die dritte allein.

   Statt eines Rasters eine Zeile, die umbricht und ihren Inhalt mittig
   setzt: drei Karten füllen die Breite, zwei stehen zentriert, eine steht
   in der Mitte. Ohne Zählung im Markup und ohne Regel je Seite. */
.price-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.price-card{flex:1 1 300px;max-width:380px}
@media(max-width:700px){.price-card{flex:1 1 100%;max-width:none}}



/* ──────────────────────────────────────────────────────────────────────────
   TELEFON: DAS FOTO IM ERSTEN ABSCHNITT

   Die Regel dafür steht auch in nachtraege.css — dort verliert sie aber,
   weil die Seitenstylesheets ZULETZT geladen werden und hier
   `.intensiv-photo img{height:auto}` steht. Deshalb dieselbe Regel noch einmal an
   der Stelle, an der sie gewinnt. Gemeldet von Alex am 29.09.2026:
   die Bilder blieben trotz der Änderung gross.

   Nur der Abschnitt NACH dem Titelbereich; in Karten bleibt das Bild wie es
   ist.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .intensiv-photo,
  .ansatz-photo-wrap,
  .warum-photo-wrap{
    aspect-ratio:16/9; max-height:210px; overflow:hidden; max-width:100%;
  }
  .intensiv-photo img,
  .ansatz-photo-wrap img,
  .warum-photo-wrap img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
}


/* Erster Abschnitt auf dem Telefon: Bild über die volle Breite, Text
   darunter — nicht nebeneinander. `.ansatz-grid` steht in site.css auf
   `.45fr 1.55fr`; die schmale erste Spalte liess das Foto klein und den Text
   danebenstehen. Foto 16:9, höchstens 260px, beschnitten statt gestaucht.
   Gemeldet von Alex am 29.09.2026. */
@media(max-width:760px){
  .ansatz-grid{grid-template-columns:1fr; gap:18px}
  .ansatz-photo-wrap, .warum-photo-wrap{
    aspect-ratio:16/9; max-height:260px; max-width:100%; overflow:hidden;
    margin-left:0; margin-right:0;
  }
  .ansatz-photo-wrap img, .warum-photo-wrap img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
}


/* Behandlungsschwerpunkte: die Fotos der Karten um ein Drittel flacher —
   NUR AUF DEM TELEFON. In site.css steht `aspect-ratio:4/3`; hier 4/2, aus
   drei Teilen Höhe werden zwei. Der Ausschnitt wird oben und unten
   beschnitten, nicht gestaucht, und sitzt etwas höher als die Mitte: Gesichter
   und Hände stehen meist im oberen Teil des Bildes.

   Am Schreibtisch bleibt 4:3 — dort stehen die Karten nebeneinander und die
   Höhe stört nicht. Gewünscht von Alex am 29.09.2026. */
@media(max-width:760px){
  .subtherapy-card .sub-photo{aspect-ratio:4/2}
  .subtherapy-card .sub-photo img{object-position:center 40%}
}

/* ──────────────────────────────────────────────────────────────────────────
   ERFOLGSGESCHICHTE AUF DEM TELEFON

   Zwei Punkte, beide von Alex am 29.09.2026 gemeldet:

   1. Das Foto stand UNTER dem Text — im Markup kommt es nach dem Textblock,
      und einspaltig heisst das: ganz unten, nach zwei Knöpfen. Mit `order`
      rutscht es nach oben, ohne die Reihenfolge im Markup zu ändern (dort
      gehört der Text zuerst, das ist auch für Screenreader richtig).

   2. Die beiden Knöpfe waren verschieden breit — jeder so breit wie sein
      Text. Nebeneinander fällt das nicht auf, untereinander schon. Jetzt
      beide über die volle Breite.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .story-box{display:flex; flex-direction:column; gap:20px}
  .story-photo{order:-1; aspect-ratio:16/9; max-height:240px; width:100%}
  .story-photo img{width:100%; height:100%; object-fit:cover}

  /* Der Knopfkasten trägt seine Anordnung im style-Attribut (display:flex),
     deshalb hier nur Richtung und Breite. */
  .story-box .btn{width:100%; justify-content:center}
}