/* Karunahaus – eigene Anpassungen (über dem Theme) */

/* Überschriften-Schrift: ruhige Serife (Lora) – waermer/hochwertiger als reine Sans.
   @import muss vor allen anderen Regeln stehen, sonst ignoriert der Browser es. */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&display=swap');

/* ======================================================================
   Farb-Tokens (Phase 1) – Hybrid: Logo-Farben + WCAG-AA-sichere Aktionsfarben
   Logo gemessen: Orange #FF6600, Blau #355E8A.
   ====================================================================== */
:root{
  --c-orange:#FF6600;        /* Logo-Akzent: grosse Flaechen/Akzente */
  --c-action:#FF6600;        /* Buttons, Text-Links, Akzente – Logo-Orange */
  --c-action-dark:#E65C00;   /* Hover/aktiv – etwas dunkleres Orange */
  --c-blue:#355E8A;          /* Logo-Blau (derzeit nicht fuer Ueberschriften genutzt) */
  --c-blue-dark:#274565;     /* Hover bei blauen Links */
  --c-text:#2B2B2B;          /* Fliesstext */
  --c-text-muted:#6B6259;    /* Datum, Sekundaertext */
  --c-bg:#FAF6EE;            /* Seitenhintergrund (Token) */
  --c-surface:#FFFFFF;       /* Kartenflaechen */
  --c-border:#E6DECF;        /* Rahmen/Trennlinien */
}

/* ---------- Inhaltsbreite: ruhig gefasst, vom Inhalt GEFUELLT (16.06.2026) ----------
   Owner-Entscheid: "fuellend & links". Der Inhaltsbereich ist bewusst ruhig
   gefasst, sodass der linksbuendige Fliesstext ihn fast ausfuellt (kaum Leerraum,
   klare linke Kante). Der Container ist zentriert -> symmetrische Aussenraender,
   kein "links-schwerer" Eindruck. width:auto loest die feste Theme-Breite (1170),
   bleibt darunter fluid. */
/* Inhaltsbereich (#main): ruhig gefasst, damit der linksbuendige Text ihn fuellt. */
@media (min-width: 1200px) { #main .container { width: auto; max-width: 1040px; } }
@media (min-width: 1600px) { #main .container { width: auto; max-width: 1100px; } }
/* Kopf & Fuss behalten die breitere Leiste -> Navigation bleibt einzeilig
   (das globale .container greift nur ausserhalb von #main). */
@media (min-width: 1200px) { .container { width: auto; max-width: 1200px; } }
/* Startseite "so lassen": der heute frueh bewusst gestaltete Hero-Bereich
   (zentriertes Video, zentrierter Begruessungstext) bleibt auf voller Leistenbreite. */
@media (min-width: 1200px) { .page-home #main .container { max-width: 1200px; } }

/* ---------- Kopf weiss halten ---------- */
#header { background: #fff; }

/* Logo links, grosszuegig; aus dem Float nehmen, damit der Kopf Höhe bekommt */
#header #logo img { max-height: 96px !important; height: auto !important; width: auto !important; }
#header .navbar-brand { float: none !important; display: inline-block; height: auto; padding: 8px 0; }
@media (max-width: 991px) { #header #logo img { max-height: 58px !important; } }

/* Desktop: Logo links, direkt daneben der Button, Menü rechts (eine Zeile).
   Wird es schmal, bricht das Menü sauber um – nie ins Logo hinein. */
@media (min-width: 768px) {
  #header .navbar > .container { display: flex; flex-wrap: wrap; align-items: center; }
  #header .navbar-header { float: none !important; order: 1; }
  #header .header-cta-wrap { clear: none !important; float: none; padding: 0; margin-left: 18px; order: 2; }
  #header #navbar { clear: none !important; float: none !important; width: auto; padding: 0; margin-left: 24px; order: 3; }
  #header .navbar-nav { display: flex; flex-wrap: wrap; float: none !important; margin: 0; }
  #header .navbar-nav > li { float: none !important; }
}

/* „Seminarübersicht" – hervorgehobener Button links unter dem Logo */
#header .header-cta-wrap { clear: both; padding: 0 15px 10px; }
#header .header-cta {
  display: inline-block;
  background: var(--c-action);
  color: #fff;
  padding: 8px 20px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
  text-decoration: none;
}
#header .header-cta:hover, #header .header-cta:focus { background: var(--c-action-dark); color: #fff; }
/* Auf der Startseite uebernimmt der Hero-Button "Seminarübersicht" – orangen Kopf-Button dort ausblenden */
body.page-home #header .header-cta-wrap { display: none; }
/* Ohne den Button blieb das Menue links kleben (grosse Luecke rechts -> linkslastig).
   Auf der Startseite das Menue nach rechts schieben: Logo links, Menue rechts, ausbalanciert. */
@media (min-width: 768px) { body.page-home #header #navbar { margin-left: auto; } }

/* ---------- Kopf robust: fragile Theme-Regeln neutralisieren ----------
   Das Theme macht .navbar-header bei <=991px position:fixed: das Logo loest
   sich aus dem Fluss, ragt aus dem 50px-Kopf heraus und ueberlappt den Inhalt.
   Als Ausgleich gibt es .navbar-nav{padding-top:62px} (grosse leere Flaeche im
   geoeffneten Mobil-Menue) und .mod_article.first>.container{padding-top:45px}.
   Hier alles abschalten -> ein kompakter, mitfliessender Kopf auf allen Breiten,
   Logo vollstaendig drin, keine Leerflaeche, keine Ueberlappung. */
#header .navbar-header {
  position: static !important;
  float: none !important;
  left: auto !important; right: auto !important; top: auto !important;
  box-shadow: none !important;
  margin: 0 !important;
}
#header .navbar,
#header .navbar > .container { min-height: 0 !important; }
#header .navbar-brand {
  height: auto !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  line-height: 1 !important;
}
#header #logo { display: inline-block !important; max-width: none !important; }
#header #logo figure { float: none !important; margin: 0; }
#header #logo figure img { float: none !important; display: block; }

@media (max-width: 991px) {
  /* mobiles Menue: kein 62px-Leerraum mehr (war Ausgleich fuer den fixed-Kopf) */
  #header .navbar-nav { padding-top: 8px !important; }
  /* Inhalt nicht mehr um die alte fixed-Kopf-Hoehe nach unten schieben */
  .mod_article.first > .container { padding-top: 0 !important; }
}

/* ---------- Navigation: besserer Kontrast ----------
   Theme setzt die Menuetexte auf blasses #868686 (zu wenig Kontrast).
   Hier auf das kraeftige Textgrau heben (lesbar, ruhig), Hover/aktiv in
   Marken-Orange. #header-Scope schlaegt die Theme-Regeln sauber. */
#header .navbar-nav > li > a,
#header .navbar-nav .dropdown-menu > li > a {
  color: var(--c-text);
}
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a:focus,
#header .navbar-nav > .active > a,
#header .navbar-nav > .open > a,
#header .navbar-nav .dropdown-menu > li > a:hover,
#header .navbar-nav .dropdown-menu > li > a:focus {
  color: var(--c-action);
}

/* Logo, Button und Navigation sauber auf einer vertikalen Mittellinie */
@media (min-width: 768px) {
  #header .navbar > .container { align-items: center; }
  #header .header-cta-wrap { display: flex; align-items: center; }
  #header .navbar-nav { align-items: center; }
}

/* ---------- Fuss ---------- */
#footer .kh-foot-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--c-text-muted); margin: 0 0 8px;
}
#footer .kh-foot-list { list-style: none; margin: 0; padding: 0; }
#footer .kh-foot-list li { margin: 0 0 5px; }
#footer .kh-foot-list a { font-size: 14px; }
#footer .kh-legal { margin-top: 10px; }
#footer .kh-legal a { margin-right: 14px; font-size: 13px; }

/* ======================================================================
   Startseite – kompakteres, übersichtlicheres Layout (weniger Scrollen)
   ====================================================================== */

/* --- Hero (#article-22): ruhige, EINSPALTIGE Anordnung. Alle Hauptinhalte
   linksbuendig und ueber die volle Inhaltsbreite (gleiche linke + rechte Kante).
   HTML-Reihenfolge = Anzeige: Titel, Einfuehrungstext, Video, Segenssatz.
   Kein Zweispalter, keine Zentrierung, kein zweiter Button. --- */

/* alle Hero-Bloecke: volle Breite, linksbuendig, kein Float/keine Cap.
   #main-Praefix noetig, um die globale 70ch-Cap (Phase 7.1) zu schlagen. */
#main #article-22 .kh-hero-banner,
#main #article-22 .ce_text.kh-intro,
#main #article-22 .ce_text.kh-blessing,
#main #article-22 .ce_player {
  float: none; width: 100%; max-width: none;
  margin-left: 0; margin-right: 0;
  padding-left: 0; padding-right: 0; text-align: left;
}

/* --- Video-Hero (Startseite): das Hausvideo als grosses Hero-Band mit
   Text-Overlay + ein CTA. Das Overlay ist klick-durchlaessig
   (pointer-events:none), damit Play/Pause und die Video-Steuerung normal
   bedienbar bleiben; nur der CTA-Knopf faengt Klicks ab. --- */
#article-22 .kh-hero-banner {
  position: relative; margin: 0 0 26px;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(40,30,15,.14);
  background: #11161f;
}
#article-22 .kh-hero-video-el {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2;        /* = Video 1200x800: ganzes Bild, NICHTS abgeschnitten */
  object-fit: cover;          /* Poster fuellt sauber, ohne Verzerrung */
  background: #11161f;
}
/* Titel + Untertitel + Knopf jetzt UEBER dem Video (nicht mehr im Bild,
   Owner-Wunsch 16.06.2026): ruhiger, zentrierter Kopf auf hellem Seiten-
   hintergrund. Dunkle Schrift statt weiss-auf-Video. */
#article-22 .kh-hero-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 18px;
}
#article-22 .kh-hero-head .kh-hero-h1 {
  margin: 0; color: var(--c-blue); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.1;
}
#article-22 .kh-hero-head .kh-hero-sub {
  margin: 6px 0 0; color: var(--c-text-muted);
  font-size: clamp(1rem, 2.6vw, 1.5rem); font-weight: 400; line-height: 1.3;
  letter-spacing: .01em;
}
#article-22 .kh-hero-cta {
  display: inline-block; margin-top: 20px;
  background: var(--c-action); color: #fff;
  padding: 12px 28px; border-radius: 6px;
  font-weight: 700; font-size: 1.5rem; letter-spacing: .2px;
  text-decoration: none; transition: background .15s ease, transform .15s ease;
  pointer-events: auto;            /* Knopf bleibt klickbar */
}
#article-22 .kh-hero-cta:hover, #article-22 .kh-hero-cta:focus {
  background: var(--c-action-dark); color: #fff; transform: translateY(-1px);
}
@media (max-width: 575px) {
  #article-22 .kh-hero-head { margin-bottom: 14px; }
}

/* Hero-Video bewusst kleiner und mittig (Owner-Wunsch 16.06.2026: ~30% schmaler).
   #main-Praefix + spaetere Position schlagen die linksbuendige Hero-Gruppe (oben).
   Auf Handys (<768px) bleibt das Video voll breit, sonst wuerde es winzig. */
@media (min-width: 768px) {
  #main #article-22 .kh-hero-banner {
    max-width: 70%;
    margin-left: auto; margin-right: auto;
  }
}

/* Einfuehrungstext: Block als Ganzes mittig im Inhaltsbereich (max ~800px),
   Fliesstext bleibt linksbuendig. Geringere Abstaende zwischen den Absaetzen.
   #main-Praefix + spaetere Position schlagen die linksbuendige Hero-Gruppe (oben). */
#main #article-22 .ce_text.kh-intro {
  max-width: 800px; margin: 0 auto 22px;
}
#article-22 .ce_text.kh-intro p { font-size: 2rem; line-height: 1.5; margin: 0 0 .45em; }
#article-22 .ce_text.kh-intro p:last-child { margin-bottom: 0; }

/* Video ueber die volle Inhaltsbreite, kein Text daneben */
#article-22 .ce_player { margin: 0 0 26px; }
#article-22 .ce_player video {
  width: 100%; height: auto; display: block; border-radius: 4px;
}

/* Segenssatz: eigener, ruhiger Block unter dem Video – ZENTRIERT.
   #main-Praefix noetig, um die linksbuendige Hero-Gruppe zu schlagen. */
#main #article-22 .ce_text.kh-blessing {
  max-width: 800px; margin: 0 auto; padding-top: 16px;   /* zentriert, KEINE Trennlinie */
  text-align: center;
}
#article-22 .kh-blessing .kh-blessing-om {
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 4vw, 3rem);        /* OM SHANTI gross (10px-rem-Basis) */
  font-weight: 600; letter-spacing: .14em; line-height: 1.2; color: var(--c-text);
}
#article-22 .kh-blessing .kh-blessing-wish {
  margin: 0 auto; max-width: 620px;
  font-size: 1.5rem;                          /* Wunsch darunter etwas kleiner, aber lesbar */
  font-style: italic; line-height: 1.6; color: var(--c-text-muted);
}

/* Leerraum zwischen Hero und "Naechste Seminare" deutlich reduzieren.
   Quelle war: #article-104(18) + dessen .container(40) + Headline-padding(26). */
#article-22 { padding-bottom: 0 !important; margin-bottom: 0 !important; }
#article-104 { padding-top: 0 !important; margin-top: 0 !important; }
#article-104 > .container { padding-top: 18px !important; }
#article-104 > .container > .row > .ce_headline {
  margin-top: 0; margin-left: 0; margin-right: 0; padding-top: 6px;
}

/* --- "Nächste Seminare": kompaktes Karten-Grid (3 nebeneinander) statt
   grosser, hoher Bänder – kleinere Bilder, deutlich weniger Scrollen. --- */
.kh-seminar-cards { display: flex; flex-wrap: wrap; }
.kh-seminar-cards > [class*="col-"] { display: flex; margin-bottom: 24px; }
.kh-card {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid #e8e4dc; border-radius: 6px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07);
  transition: box-shadow .15s ease;
}
.kh-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
/* Bildflaeche mit fixer, einheitlicher Hoehe – Bild wird vollstaendig
   eingepasst (contain), also kleiner, aber NIE abgeschnitten. Dezenter
   Hintergrund fuellt den Rand bei Hoch-/Querformaten. */
.kh-card-img {
  display: flex; align-items: center; justify-content: center;
  height: 150px; padding: 8px; background: #f3efe8; overflow: hidden;
}
.kh-card-img img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
  transition: transform .2s ease;
}
.kh-card:hover .kh-card-img img { transform: scale(1.03); }
.kh-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 16px 16px; }
.kh-card-title { font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.kh-card-title a { color: #333; text-decoration: none; }
.kh-card-title a:hover { color: var(--c-action); }
/* Seminarleitung: eigene Zeile ueber dem Datum, hervorgehoben (Orange), kleiner als Titel */
/* Seminarleitung: eigene Zeile ueber dem Datum, fett schwarz hervorgehoben, kleiner als Titel */
.kh-card-leader { color: #1a1a1a; font-size: 14px; font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.kh-card-date { color: var(--c-text-muted); font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.kh-card-teaser {
  font-size: 14px; line-height: 1.5; color: var(--c-text);
  /* Kurze Teaser stehen ganz; laengere werden auf ~5 Zeilen begrenzt und
     sind dann INNERHALB der Karte scrollbar (kein Abschneiden mehr). */
  max-height: calc(1.5em * 5); overflow-y: auto;
  margin-bottom: 12px; padding-right: 8px;
  /* dezenter, schmaler Scrollbalken in Markenfarbe (Firefox + WebKit) */
  scrollbar-width: thin; scrollbar-color: var(--c-orange) transparent;
  overscroll-behavior: contain;
}
.kh-card-teaser::-webkit-scrollbar { width: 6px; }
.kh-card-teaser::-webkit-scrollbar-thumb {
  background: var(--c-orange); border-radius: 3px;
}
.kh-card-teaser::-webkit-scrollbar-track { background: transparent; }
.kh-card-teaser p { margin: 0 0 .4em; }
.kh-card-teaser strong { font-weight: 600; }
.kh-card-more {
  margin-top: auto; align-self: flex-start;
  display: inline-block; background: var(--c-action); color: #fff;
  padding: 6px 16px; border-radius: 4px; font-weight: 700; font-size: 14px;
  text-decoration: none; transition: background .15s ease;
}
.kh-card-more:hover, .kh-card-more:focus { background: var(--c-action-dark); color: #fff; }

/* ======================================================================
   Seminarübersicht – Monatsnavigation als Leiste OBEN statt Sidebar rechts
   ====================================================================== */

/* Reihenfolge im Kopf-Bereich von /seminare.html (article-179):
   1. Überschrift  2. Monatsleiste (volle Breite)  3. Seminarliste (volle Breite).
   Das Monatsmenü steht im HTML nach der Liste – per Flex-"order" rückt es nach oben. */
#article-179 > .container > .row:first-of-type { display: flex; flex-wrap: wrap; }
#article-179 > .container > .row:first-of-type > .ce_headline { flex: 0 0 100%; max-width: 100%; }
#article-179 .mod_eventmenu.month-navi-2 { order: 1; flex: 0 0 100%; max-width: 100%; }
#article-179 .mod_eventlist            { order: 2; flex: 0 0 100%; max-width: 100%; }

/* Vergangene Seminare (#article-195): hat KEIN Monatsmenü -> die Liste klebte
   als col-sm-9 linksbündig (25% Leerraum rechts). Volle Breite + zentrierte
   Karten/Überschrift, damit alles mittig steht. */
#article-195 .mod_eventlist.col-sm-9 { float: none; width: 100%; }
#article-195 .kh-seminar-cards { justify-content: center; }
#article-195 .seitentitel { text-align: center; }

/* Monatsleiste: ruhige helle Taefelchen mit blauer Schrift (Marke); Orange
   bleibt Akzent fuer Hover + aktiven Monat – kein "Block aus Orange" mehr. */
.mod_eventmenu.month-navi-2 {
  background: #faf7f1; border: 1px solid #e8e1d4; border-radius: 10px;
  padding: 14px 18px; margin-bottom: 24px;
}
.mod_eventmenu.month-navi-2 h2 {
  font-size: 12px; font-weight: 700; color: var(--c-text-muted);
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: .07em;
}
.mod_eventmenu.month-navi-2 ul {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: 0; padding: 0; list-style: none;
}
.mod_eventmenu.month-navi-2 li { margin: 0; }
.mod_eventmenu.month-navi-2 a {
  display: inline-block; background: #fff; color: var(--c-blue);
  border: 1px solid #dccfba;
  padding: 7px 15px; border-radius: 6px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mod_eventmenu.month-navi-2 a:hover,
.mod_eventmenu.month-navi-2 a:focus {
  background: var(--c-action); border-color: var(--c-action); color: #fff;
}

/* ======================================================================
   Farbsystem anwenden (Phase 2) + Layout-Korrekturen (Phasen 4–8)
   ====================================================================== */

/* --- Phase 2.1 (rev. 15.06.2026): Ueberschriften H1–H3 -> Logo-Blau, Schrift Lora ---
   Blau/Orange ist die gewollte Marke: Blau traegt nun die Ueberschriften (ruhig,
   hochwertig), Orange bleibt fuer Aktionen/Links/Buttons (siehe unten).
   #main-Scope laesst Kopf/Navi/Fuss unberuehrt; schlaegt die Theme-Regel
   .h1/.h2/.h3{color:#ff6600} per hoeherer Spezifitaet. */
#main h1, #main h2, #main h3,
#main .h1, #main .h2, #main .h3,
#main .ce_headline, #main .seitentitel {
  color: var(--c-blue);
}
#main h1, #main h2, #main h3, #main h4,
#main .h1, #main .h2, #main .h3,
#main .ce_headline, #main .seitentitel,
#article-22 .kh-hero-banner h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

/* --- Phase 2.3: Textlinks im Inhalt -> Aktions-Orange (AA-sicher) ---
   Buttons (.btn / .kh-card-more / .hyperlink_txt) sind ausgenommen. */
#main .ce_text a:not(.btn):not(.hyperlink_txt) { color: var(--c-action); }
#main .ce_text a:not(.btn):not(.hyperlink_txt):hover,
#main .ce_text a:not(.btn):not(.hyperlink_txt):focus { color: var(--c-action-dark); }

/* --- Phase 2.2: generische Buttons/Formular-Schalter -> Orange, weisser Text --- */
#main .btn-primary,
#main button[type="submit"],
#main input[type="submit"] {
  background-color: var(--c-action); border-color: var(--c-action); color: #fff;
}
#main .btn-primary:hover, #main .btn-primary:focus,
#main button[type="submit"]:hover, #main input[type="submit"]:hover {
  background-color: var(--c-action-dark); border-color: var(--c-action-dark); color: #fff;
}

/* --- Sekundaerer Knopf: "Zurueck"/"Zum Anfahrtsbeschrieb" u.ae. (.back-Links).
   Das Theme gibt ihnen eine graue Box mit orangem Text (faellt aus dem System).
   Hier zu einem einheitlichen Umriss-Knopf vereinheitlicht: orange Linie + Text,
   beim Hover gefuellt. Passt zum orangen Aktions-System. --- */
#main p.back a {
  display: inline-block;
  background: transparent; color: var(--c-action);
  border: 1px solid var(--c-action);
  padding: 9px 22px; border-radius: 5px;
  font-weight: 700; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
#main p.back a:hover, #main p.back a:focus {
  background: var(--c-action); color: #fff;
}

/* --- Phase 4: aktiver Monat hervorgehoben – gefuelltes Aktions-Orange (Akzent) --- */
.mod_eventmenu.month-navi-2 a.active,
.mod_eventmenu.month-navi-2 li.active > a,
.mod_eventmenu.month-navi-2 strong.active {
  background: var(--c-action); border-color: var(--c-action); color: #fff; font-weight: 700;
}

/* --- Phase 5: "Alle Seminare ansehen" -> normaler, zentrierter Button --- */
#main .ce_hyperlink { text-align: center; }
#main .ce_hyperlink .hyperlink_txt {
  display: inline-block; width: auto;
  background: var(--c-action); color: #fff;
  padding: 10px 24px; border-radius: 5px;
  font-weight: 700; text-decoration: none;
  transition: background .15s ease;
}
#main .ce_hyperlink .hyperlink_txt:hover,
#main .ce_hyperlink .hyperlink_txt:focus { background: var(--c-action-dark); color: #fff; }

/* --- Phase 6: Mitarbeiter-Seite – festes Layout statt Float-Umfluss ---
   Foto feste Breite links, Absaetze bilden als BFC die rechte Spalte
   (fliessen nie unter das Bild). Reines CSS, HTML unveraendert. */
@media (min-width: 768px) {
  #article-194 .image_container.float_left {
    float: left; width: 220px; margin: 4px 28px 14px 0;
  }
  #article-194 .image_container.float_left img {
    width: 100%; height: auto; display: block; border-radius: 4px;
  }
  #article-194 .ce_text > p { overflow: hidden; }
}
@media (max-width: 767px) {
  #article-194 .image_container.float_left { float: none; width: 200px; margin: 0 0 12px; }
}

/* --- Fliesstext-Bloecke: fuellen den ruhig gefassten Inhaltsbereich (16.06.2026) ---
   Vorher 70ch (~630px) -> schmale Insel mit grosser Leerflaeche rechts. 94ch
   fuellt den (oben bewusst gefassten) Inhaltsbereich linksbuendig fast aus,
   bleibt aber bei angenehmer Zeilenlaenge; Text bleibt am gemeinsamen linken Rand. */
#main .ce_text.col-md-12, #main .ce_text.col-xs-12 { max-width: 94ch; }
/* Mitarbeiter behaelt mehr Platz fuer Bild + Text-Spalte (hoehere Spezifitaet) */
#article-194 .ce_text.col-xs-12.block { max-width: 860px; }

/* Zentrierte Seitenkoepfe (Yoga/Dana/Ratgeber) ECHT mittig: das 94ch-max-width
   oben + Bootstrap-float:left wuerden den zentrierten Titel sonst in eine links
   angedockte Box quetschen (Titel ~74px zu weit links). Hier: volle Inhaltsbreite,
   zentriert. Die Startseite nutzt eigene Hero-Klassen und bleibt unberuehrt. */
#main .ce_text.rg-head, #main .ce_text.kh-pagehead, #main .ce_text.sr-head {
  float: none; width: 100%; max-width: none; margin-left: auto; margin-right: auto;
}

/* --- Phase 7.2: Hero-H1 kleiner, nicht ueber volle Breite --- */
#main .seitentitel h1, #main h1.seitentitel, #main .seitentitel.h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15;
}

/* --- Galerie fuellt die Inhaltsbreite (16.06.2026; vorher auf 70% verkleinert,
   wirkte gegenueber dem breiteren Container zu klein/zentriert-isoliert) --- */
@media (min-width: 992px) {
  #main .ce_gallery ul.cols_3 { max-width: 100%; margin: 0; }
}

/* ======================================================================
   Foto-Album (Flipbook) – aufgeschlagenes Buch mit Umblätter-Animation.
   JS unter /assets/flipbook/flipbook.js baut das DOM; ohne JS bleibt das
   alte Raster (ul) sichtbar. Buch ist intrinsisch 960×360, wird per
   transform:scale() in die verfügbare Breite eingepasst.
   ====================================================================== */
.fb-wrap { margin: 1.5em auto 0; outline: none; }
.fb-viewport {
  position: relative; display: flex; justify-content: center;
  -webkit-perspective: 2200px; perspective: 2200px;
}
.fb-stage {
  position: relative;
  width: 960px; height: 360px; transform-origin: top center;
  will-change: transform;
}
/* Buchdecke (Hardcover): ragt als blaue Decke rund um die Seiten hervor.
   Liegt hinter dem Buch und traegt den Schlagschatten (Buch auf der Flaeche).
   .fb-stage ist durch das JS-transform:scale() ein Stacking-Context -> die
   z-index:-1-Pseudoelemente liegen sicher hinter dem Buch (.fb-book, z auto). */
.fb-stage::before {
  content: ''; position: absolute; z-index: -1;
  top: -12px; bottom: -14px; left: -13px; right: -13px;
  border-radius: 8px;
  /* schlichter oranger Rahmen im Webseiten-Orange */
  background: linear-gradient(180deg, #FF7A22 0%, #F0610C 55%, #DA560A 100%);
  box-shadow:
    0 22px 48px rgba(28, 20, 8, .38),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* (kein cremefarbener Seitenstapel mehr – nur oranger Rand + Bilder, Owner-Wunsch) */
.fb-book {
  position: relative; width: 100%; height: 100%;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  /* leere Hälften wirken wie cremefarbene Buchseiten mit Mittelfalz */
  background:
    linear-gradient(90deg,
      #fffdf8 0%, #f4ecdd 48%, #c7bb9f 49.6%, #8d8267 50%,
      #c7bb9f 50.4%, #f4ecdd 52%, #fffdf8 100%);
  /* unmittelbarer Rand der Bilder ebenfalls orange (kein cremefarbener Saum) */
  border: 1px solid var(--c-action, #FF6600);
  box-shadow: 0 4px 12px rgba(30, 22, 10, .22);
  border-radius: 3px;
}
.fb-spine {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 26px;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  /* orange Buchbindung in der Mitte (falls zwischen den Seiten sichtbar) */
  background: linear-gradient(90deg,
    rgba(230,92,0,0) 0%, rgba(230,92,0,.30) 45%, rgba(204,82,0,.45) 50%,
    rgba(230,92,0,.30) 55%, rgba(230,92,0,0) 100%);
}

/* Ein Blatt (rechte Hälfte), dreht um den Buchrücken (linke Kante) */
.fb-leaf {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  transform-origin: left center;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.45, .05, .25, 1);
}
.fb-leaf.fb-flipped { transform: rotateY(-180deg); }

/* Vorder-/Rückseite eines Blatts */
.fb-face {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #ece4d6;
}
.fb-front { transform: rotateY(0deg); }
.fb-back  { transform: rotateY(180deg); }
/* Orange Falz in der Buchmitte (Webseiten-Stil); keine dunklen Schatten/
   Spiegelungen mehr an den Fotorändern */
.fb-front { box-shadow: inset 7px 0 0 0 var(--c-action, #FF6600); }
.fb-back  { box-shadow: inset -7px 0 0 0 var(--c-action, #FF6600); }

/* Foto randlos – ohne Passepartout/Rahmen, keine Veränderung an den Rändern */
.fb-photo {
  background-size: cover; background-position: center;
}
.fb-page-blank { background: #f4ecdd; }

.fb-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 12px; font-size: 13px; line-height: 1.25; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 100%);
}

/* Umschläge im Webseiten-Orange */
.fb-cover { display: flex; align-items: center; justify-content: center; }
.fb-cover-front { background: linear-gradient(135deg, #FF7A22, #DA560A); }
.fb-cover-back  { background: linear-gradient(135deg, #C2530A, #8A3C06); }
.fb-cover-inner { text-align: center; color: #fff; padding: 24px; }
.fb-cover-title {
  font-size: 26px; font-weight: 600; letter-spacing: .02em;
  border-bottom: 3px solid rgba(255, 255, 255, .85);
  display: inline-block; padding-bottom: 10px; margin-bottom: 14px;
}
.fb-cover-sub { font-size: 13px; opacity: .8; }

/* Glanz/Spiegelung beim Blättern bewusst entfernt (Owner-Wunsch: keine
   Verspiegelungen der Fotos). Element bleibt im DOM, aber unsichtbar. */
.fb-gloss { display: none; }

/* Steuerleiste */
.fb-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 14px;
}
.fb-counter { color: var(--c-text-muted, #6B6259); font-size: 14px; min-width: 130px; text-align: center; }
.fb-btn {
  cursor: pointer; background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #E6DECF); color: var(--c-action, #B85916);
  border-radius: 999px; line-height: 1; transition: background .15s, color .15s, opacity .15s;
}
.fb-prev, .fb-next { width: 44px; height: 44px; font-size: 24px; }
.fb-full { width: 40px; height: 40px; font-size: 18px; }
.fb-btn:hover:not(:disabled) { background: var(--c-action, #B85916); color: #fff; }
.fb-btn:disabled { opacity: .35; cursor: default; }

/* Vollbild-Overlay */
.fb-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(22, 17, 10, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fb-overlay .fb-wrap { margin: 0; }
.fb-overlay .fb-counter { color: #e9e2d4; }
.fb-overlay .fb-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.fb-overlay .fb-btn:hover:not(:disabled) { background: var(--c-orange, #FF6600); border-color: var(--c-orange, #FF6600); }
.fb-close {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px;
  font-size: 22px; z-index: 2;
}

/* ======================================================================
   Startseite (.page-home): Willkommens-Banner im Kopf + vergroessertes Logo
   Beides NUR auf der Willkommensseite (currentPath == '/index.html').
   ====================================================================== */

/* ---- Willkommens-Banner ENTFERNT (Owner-Wunsch 16.06.2026) ----
   Markup ist aus layout.njk geloescht; bis zum naechsten Dienst-Neustart
   liefert der gecachte Server ihn evtl. noch aus -> hier hart ausgeblendet.
   (Die restlichen .kh-welcome-* Regeln unten sind damit wirkungslos.) */
.kh-welcome-banner {
  display: none !important;
}
.kh-welcome-banner .kh-welcome-text {
  margin: 0;
  padding: 9px 15px;
  text-align: center;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.35;
}
.kh-welcome-banner .kh-welcome-sub {
  display: block;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .2px;
  opacity: .92;
  margin-top: 2px;
}
@media (max-width: 767px) {
  .kh-welcome-banner .kh-welcome-text { font-size: 15px; padding: 8px 12px; }
  .kh-welcome-banner .kh-welcome-sub { font-size: 12px; }
}

/* ---- Logo 100% groesser, nur Startseite ----
   transform: scale() vergroessert rein optisch und beeinflusst den Layout-Fluss
   NICHT -> Button, Menue und Inhalt bleiben exakt an ihrer Stelle ("nichts sonst
   verschieben"). transform-origin steuert das Wachstum nach unten; das Logo darf
   dabei in den Hero hineinragen ("nach unten ueberlappen"). z-index hebt es ueber
   den nachfolgenden Hero, damit es nicht verdeckt wird. */
.page-home #header { position: relative; z-index: 10; }
/* #logo hat im Theme overflow:hidden (beschneidet das skalierte Bild auf die
   alte Box) -> hier freigeben, damit das vergroesserte Logo sichtbar ueberlappt. */
.page-home #header #logo { position: relative; z-index: 20; overflow: visible !important; }

/* Grosser Desktop (>=1200px): Menue passt einzeilig neben das Logo. Hier waechst
   das Logo per transform symmetrisch aus der oberen Mitte nach unten in den Hero
   ("nach unten ueberlappen"); transform veraendert den Fluss nicht -> Button,
   Menue und Inhalt bleiben exakt stehen. Rechte Kante bleibt vor dem Button. */
@media (min-width: 1200px) {
  .page-home #header #logo figure img {
    transform: scale(2);
    transform-origin: top center;
  }
}

/* Schmaler (<1200px): das Menue bricht unter Logo/Button um. Ein ueberlappendes
   Logo wuerde dann Menuepunkte verdecken -> stattdessen im Fluss vergroessern.
   Der Kopf wird etwas hoeher, aber nichts wird verdeckt. */
@media (max-width: 1199px) {
  .page-home #header #logo img { max-height: 150px !important; }
}
@media (max-width: 767px) {
  .page-home #header #logo img { max-height: 116px !important; }
}