/* ══════════════════════════════════════════════════════════════
   /angebot/intensivtherapie — nur diese Seite.
   Seitenfarbe: Intensivtherapie #B06A10 / #412402 / #F0D6AE.
   Im PHP setzt das fachrichtung_css_vars('intensivtherapie').
   ══════════════════════════════════════════════════════════════ */

:root{
  --cat-main:#B06A10; --cat-dark:#7E4B0B; --cat-light:#FBF3E7;
  --cat-mid:#F0D6AE;  --cat-deeptext:#412402;
}

/* Hero in der Bereichsfarbe abgedunkelt: das Foto muss durchkommen,
   der Text muss lesbar bleiben. */
.hero{background:linear-gradient(135deg,#6B4008 0%,#412402 70%)}
.hero.has-image{background-image:
  linear-gradient(100deg,rgba(50,28,3,.82) 0%,rgba(58,33,4,.72) 58%,
                  rgba(65,36,2,.34) 84%,rgba(65,36,2,.12) 100%),
  var(--banner-image);
  background-size:cover;background-position:center right}
.hero-badge{background:rgba(65,36,2,.55);color:#F0D6AE;
  border-color:rgba(240,214,174,.45)}

/* ── Zitat mit Quelle ────────────────────────────────────────── */
/* .tf-zitat kommt aus site.css. Die Quelle stand dort im Zitat selbst;
   hier eine eigene Zeile, damit der Name nicht mitkursiv wird. */
.zitat-quelle{margin-top:8px;padding-left:22px;font-size:12.5px;
  font-weight:600;color:var(--text-muted)}

/* ── Vorteile: sechs Karten ──────────────────────────────────── */
.it-vorteile{grid-template-columns:repeat(3,1fr)}
.it-vorteile .card{border-top:4px solid var(--cat-main);
  padding-top:22px;display:flex;flex-direction:column;gap:9px}
.card-ic{width:46px;height:46px;border-radius:12px;background:var(--cat-light);
  display:flex;align-items:center;justify-content:center;font-size:21px;
  margin-bottom:2px}
.it-vorteile .card h3{font-family:'Playfair Display',serif;font-size:18px;
  color:var(--cat-deeptext);line-height:1.25}
.it-vorteile .card p{color:var(--text-mid);font-size:13.5px;line-height:1.6}
.it-vorteile .card:hover{transform:translateY(-5px);
  box-shadow:0 16px 34px -14px var(--cat-main);border-color:var(--cat-mid)}
@media(max-width:900px){.it-vorteile{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.it-vorteile{grid-template-columns:1fr}}

/* ── Fließtextspalte ─────────────────────────────────────────── */
/* Begrenzte Zeilenlänge: der SEO-Abschnitt und der Teamtext laufen
   sonst über die volle Breite von 1320 Pixeln und werden unlesbar. */
.it-text{max-width:1200px;color:var(--text-mid);font-size:14.5px;
  line-height:1.75}
.it-text p{max-width:1200px}

/* ── Fokus-Programme ─────────────────────────────────────────── */
.fp-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
/* Farben hier wörtlich, nicht über Variablen: an dieser Stelle sind
   mehrfach andere Werte angekommen als gesetzt waren, und die Ursache
   liess sich nicht finden. Ein fester Wert kann nichts überschreiben. */
.fp-karte{background:#FBF3E7;border:1px solid #E0C79E;border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 30px -14px rgba(65,36,2,.28);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.fp-karte:hover{transform:translateY(-6px);border-color:#B06A10;
  box-shadow:0 24px 48px -18px rgba(65,36,2,.42)}
.fp-bild{position:relative;aspect-ratio:16/7;overflow:hidden;background:#F0D6AE}
.fp-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fp-karte:hover .fp-bild img{transform:scale(1.04)}
.fp-marke{position:absolute;left:16px;bottom:14px;background:#412402;
  color:#F0D6AE;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:6px 14px;border-radius:20px}

.fp-inhalt{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.fp-inhalt h3{font-size:19px;line-height:1.3;color:#412402;margin-bottom:10px}
.fp-text{font-size:13.5px;color:#5A4634;line-height:1.6;margin-bottom:16px}

/* Kennzahlen des Programms: Dauer, Frequenz, Einheiten, Länge. */
.fp-daten{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.fp-daten span{background:#FFFFFF;border:1px solid #D9A96A;color:#7E4B0B;
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;
  white-space:nowrap}

.fp-punkte{list-style:none;margin-bottom:16px}
.fp-punkte li{position:relative;padding:4px 0 4px 22px;font-size:13.5px;
  color:#5A4634;line-height:1.55}
.fp-punkte li::before{content:'➝';position:absolute;left:0;top:4px;
  color:#B06A10;font-weight:700}

.fp-fuerwen{background:#FDF8F0;border-left:3px solid #B06A10;
  padding:12px 14px;font-size:12.5px;color:#5A4634;line-height:1.55;
  margin-bottom:18px}
.fp-fuerwen b{color:#412402;font-weight:700}

/* Der Knopf sitzt unten, über die ganze Kartenbreite, in Dunkelbraun. */
.fp-inhalt .btn{margin-top:auto;width:100%;background:#A05F1E;color:#FFFFFF;
  border:none}
.fp-inhalt .btn:hover{background:#7E4B0B;color:#FFFFFF;
  box-shadow:0 8px 20px rgba(65,36,2,.35)}

@media(max-width:900px){.fp-liste{grid-template-columns:1fr}}

/* ── Diagnoseliste ───────────────────────────────────────────── */
/* Alle Erkrankungen, bei denen wir helfen — die Liste bleibt vollständig
   und unverändert. Geändert ist nur die Form: aus flachen Zeilen mit
   Randstrich werden Karten mit eigenem Feld für den Pfeil. Beim
   Überfahren füllt sich die Karte, statt nur zu verrutschen. */
.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:#FFFFFF;border:1px solid #E8D4B2;border-radius:14px;
  padding:18px 18px 18px 22px;font-family:'Playfair Display',serif;
  font-size:16.5px;font-weight:600;color:#412402;line-height:1.3;
  position:relative;overflow:hidden;
  transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
/* Schmaler Streifen links: er nimmt die Bereichsfarbe auf, ohne dass ein
   einseitiger Rahmen die runden Ecken bricht. */
.dx-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:#B06A10;transition:width .22s}
.dx-link span{width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:#FBF3E7;border:1px solid #E8D4B2;color:#B06A10;font-size:14px;
  font-weight:700;font-family:'Source Sans 3',sans-serif;
  display:flex;align-items:center;justify-content:center;
  transition:background .22s,color .22s,border-color .22s,transform .22s}
.dx-link:hover{background:#FBF3E7;border-color:#B06A10;transform:translateY(-3px);
  box-shadow:0 14px 30px -14px rgba(65,36,2,.4)}
.dx-link:hover::before{width:8px}
.dx-link:hover span{background:#B06A10;border-color:#B06A10;color:#FFFFFF;
  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}}

/* ── Häufige Fragen ──────────────────────────────────────────── */
/* Aufbau aus assets/css/faq.css übernommen, damit die Ausklappfelder
   auf beiden Seiten gleich aussehen. Kein Skript nötig: <details>. */
.it-faq{max-width:1200px}
.qa{background:var(--white);border:1px solid var(--cream-border);
  border-radius:14px;margin-bottom:10px;transition:all .25s;overflow:hidden}
.qa[open]{border-color:var(--cat-main);box-shadow:0 8px 22px -8px var(--cat-main)}
.qa summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:14px;padding:16px 20px;min-height:56px;font-weight:600;font-size:15px;
  color:var(--cat-deeptext);line-height:1.45;transition:background .18s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--cat-light)}
.qa summary:focus-visible{outline:3px solid var(--cat-main);outline-offset:-3px}
.qa-mark{width:28px;height:28px;border-radius:50%;background:var(--cat-light);
  color:var(--cat-deeptext);display:flex;align-items:center;
  justify-content:center;font-size:12px;flex-shrink:0;margin-left:auto;
  transition:all .25s}
.qa[open] .qa-mark{transform:rotate(180deg);background:var(--cat-main);
  color:var(--white)}
.qa-a{padding:0 20px 18px;color:var(--text-mid);font-size:14px;line-height:1.7}

/* ── Abschluss ───────────────────────────────────────────────── */
/* Das zweite CTA-Band steht nicht am Seitenende (darunter folgt der
   SEO-Abschnitt), deshalb bleibt es beim Blaugrau der Marke. */

/* Symbole in der Merkliste der Apartments — dieselbe Spaltenbreite
   für alle, sonst springt der Text von Zeile zu Zeile. */
.checklist li i{font-style:normal;font-size:15px;line-height:1.4;width:22px;
  flex-shrink:0;text-align:center}
.checklist li i + *,
.checklist li:has(i)::before{display:none}
.checklist li:has(i)::before{content:none}

/* ── Handlungsbänder dieser Seite ────────────────────────────────────── */
/* Dunkelbraun statt Blaugrau: die Seite trägt durchgehend die Farbe der
   Intensivtherapie, und die Bänder sind ihre stärksten Flächen. */
.cta-band{background:#412402!important}
.cta-band h2{color:#F6E7D0}
.cta-band p{color:rgba(240,214,174,.82)}
.cta-band .btn-gold{background:#A05F1E;color:#FFFFFF}
.cta-band .btn-gold:hover{background:#B06A10;color:#FFFFFF;
  box-shadow:0 8px 20px rgba(65,36,2,.5)}
.cta-band .btn-outline-light{border-color:rgba(255,255,255,.55);color:#FFFFFF}
.cta-band .btn-outline-light:hover{background:rgba(255,255,255,.14);
  border-color:#FFFFFF;color:#FFFFFF}
.cta-sub{color:rgba(240,214,174,.6)}

/* ── Apartments: kurzer Hinweis, kein zweiter Katalog ────────────────── */
/* Direkt darüber steht der Baustein „Erfahrungsberichte": helles Feld,
   Foto links, Text rechts. Derselbe Aufbau zweimal hintereinander liest
   sich wie eine Wiederholung. Der Baustein bleibt wie er ist — dieser
   Block wird anders: das Foto ist die Fläche, der Text liegt darauf. */
.ap-band{position:relative;border-radius:22px;overflow:hidden;
  min-height:360px;display:flex;align-items:flex-end;
  background:#412402;box-shadow:0 18px 44px -20px rgba(65,36,2,.5)}
.ap-bild{position:absolute;inset:0}
.ap-bild img{width:100%;height:100%;object-fit:cover}
/* Der Verlauf beginnt links satt und läuft nach rechts aus: der Text
   bleibt lesbar, das Foto bleibt sichtbar. */
.ap-bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(50,28,3,.93) 0%,rgba(58,33,4,.86) 42%,
             rgba(65,36,2,.55) 70%,rgba(65,36,2,.28) 100%)}
.ap-text{position:relative;z-index:1;padding:44px 46px;max-width:660px}
.ap-marke{display:inline-block;background:#F0D6AE;color:#412402;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 15px;border-radius:20px;margin-bottom:16px}
.ap-text h2{font-size:27px;line-height:1.22;color:#FFFFFF;margin-bottom:12px}
.ap-text p{font-size:14.5px;color:rgba(246,231,208,.88);line-height:1.65}
/* Die fünf Angaben der Wix-Seite, wortgleich — als Reihe statt als Liste.
   Sie werden zusammen gelesen, nicht eine nach der anderen. */
.ap-fakten{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.ap-fakten span{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.12);border:1px solid rgba(240,214,174,.4);
  border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:600;
  color:#F6E7D0}
.ap-fakten i{font-style:normal;font-size:14px;line-height:1}
.ap-text .btn{background:#F0D6AE;color:#412402;border:none}
.ap-text .btn:hover{background:#FFFFFF;color:#412402;
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
@media(max-width:900px){
  .ap-band{min-height:0}
  /* Oben durchsichtiger, sonst ist vom Foto nichts zu sehen. */
  .ap-bild::after{background:linear-gradient(180deg,rgba(50,28,3,.25) 0%,
                  rgba(58,33,4,.82) 42%,#412402 100%)}
  /* 200px Polster oben liessen auf dem Telefon eine grosse dunkle Fläche
     stehen — das Foto darunter ist vom Verlauf fast verdeckt, also sah es
     aus wie ein Fehler. 120px zeigen genug vom Raum, ohne Leere.
     Gemeldet von Alex am 29.09.2026. */
  .ap-text{padding:120px 22px 28px;max-width:none}
}

/* ── Überschriften und Akzente dieser Seite ──────────────────────────── */
/* Die Seite trägt durchgehend die Farbe der Intensivtherapie. Ohne diese
   Regel bleiben alle Überschriften im Dunkelblau der Marke, während
   Beschriftungen, Kanten und Knöpfe braun sind — zwei Systeme auf einer
   Seite. Hero und Handlungsbänder haben eigene, spezifischere Regeln und
   bleiben davon unberührt. */
h1, h2, h3{color:#412402}
.stat b{color:#B06A10}
.mehr-link{color:#7E4B0B;border-bottom-color:#B06A10}
.mehr-link:hover{color:#B06A10}
.tf-zitat{border-left-color:#B06A10;color:#412402}
.crumb-current{background:#FBF3E7;color:#412402;border-color:#E0C79E}
.crumb a:hover{background:#FBF3E7;color:#7E4B0B}

/* Knöpfe im Hero: dieselbe Farbe wie alle Hauptknöpfe der Seite. */
.hero .btn-gold{background:#A05F1E;color:#FFFFFF}
.hero .btn-gold:hover{background:#B06A10;color:#FFFFFF;
  box-shadow:0 8px 20px rgba(65,36,2,.45)}
.hero .btn-outline-light{border-color:rgba(240,214,174,.5);color:#F6E7D0}
.hero .btn-outline-light:hover{background:rgba(240,214,174,.16);
  border-color:#F0D6AE;color:#FFFFFF}

/* ── Erfahrungsberichte ──────────────────────────────────────────────── */
/* Der Baustein ist auf allen Seiten derselbe — hier bekommt er nur die
   Farben der Seite, nicht eine andere Form. */
.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 .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)}



/* ──────────────────────────────────────────────────────────────────────────
   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){
  /* Die Fotos der Text-mit-Foto-Abschnitte: 16:9, höchstens 260px — dasselbe
     Mass wie auf den Angebots-, Therapie- und Diagnoseseiten.

     OHNE Stellungsselektor: `main > .hero + section` traf nichts, weil
     zwischen Titelbereich und erstem Abschnitt die Brotkrumenleiste als
     `<div>` steht. Diese Bildkästen kommen nur in solchen Abschnitten vor,
     nicht in Karten — deshalb ist die einfache Regel hier richtig.
     Gemeldet von Alex am 29.09.2026. */
  .intensiv-photo, .wer-photo, .ansatz-photo-wrap, .adult-photo{
    aspect-ratio:16/9; max-height:260px; max-width:100%; overflow:hidden;
  }
  .intensiv-photo img, .wer-photo img, .ansatz-photo-wrap img, .adult-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   TEXT-MIT-FOTO: BILD ÜBER DIE VOLLE BREITE, SOBALD DER ABSCHNITT EINSPALTIG IST

   `.intensiv-band` wird unter 960px einspaltig. Das Foto blieb dabei schmal —
   es behielt die Breite seiner früheren Spalte und stand als kleiner Kasten
   über dem Text. Gemeldet von Alex am 29.09.2026 mit Bildschirmfoto.

   Die Grenze ist 960 und nicht 760: massgeblich ist, wann der Abschnitt
   umbricht, nicht ob das Gerät ein Telefon ist.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .intensiv-band .intensiv-photo,
  .ansatz-grid .ansatz-photo-wrap,
  .wer-grid .wer-photo{
    width:100%; max-width:100%; margin-left:0; margin-right:0;
    aspect-ratio:16/9; max-height:300px; overflow:hidden;
  }
  .intensiv-band .intensiv-photo img,
  .ansatz-grid .ansatz-photo-wrap img,
  .wer-grid .wer-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   WAS IST INTENSIVTHERAPIE? — FOTO ÜBER DIE VOLLE BREITE

   Der Abschnitt benutzt die Bildform `rund` (`.tf-rund`), nicht `intensiv-band`.
   Sechs Anläufe am 29.09.2026 gingen deshalb ins Leere: geändert wurde jedes
   Mal eine Klasse, die dort nicht vorkommt. Gefunden erst, als die Klassen der
   gerenderten Seite ausgelesen wurden.

   Auf dem Telefon: Bild über die volle Breite, 16:9. Die organische Rundung
   und der Kreis dahinter stammen aus dem Kids-Projekt — bei voller Breite
   wirken sie unruhig, deshalb dort eckig und ohne Kreis. Am Schreibtisch
   bleibt die runde Form, wie von Alex gewünscht.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .tf-rund{grid-template-columns:1fr; gap:20px}
  .tf-rund-bild{max-width:100%; width:100%}
  .tf-rund-bild img{width:100%; aspect-ratio:16/9; max-height:300px;
    object-fit:cover; border-radius:16px}
  .tf-rund-bild::before{display:none}
}