/* ==========================================================================
   martin-lippert.de · Helle Fassung · Schicht fuer Unterseiten
   Laedt nach style-hell.css, tokens.css und start.css. Regeln: DESIGN.md
   ========================================================================== */

/* ── Navigation: wie auf der Startseite, kein dunkles Band hinter der Pille ── */
.navbar, .navbar.scrolled {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: 0 !important; box-shadow: none !important;
}

/* ── Seitenkopf: heller Himmel mit Sonne statt Nachtverlauf ── */
.page-header {
  background:
    radial-gradient(55% 90% at 88% -10%, rgba(255,200,90,.30), transparent 62%),
    linear-gradient(180deg, #8DBFE4 0%, #C4E0F3 34%, #E6F2FA 70%, var(--schnee) 100%);
  border-bottom: 0;
  padding: 156px 0 76px;
}
.page-header::before { display: none; }
.page-header h1 {
  font-family: var(--f-titel); font-weight: 600; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.04; color: var(--tinte);
}
.page-header p { color: var(--tinte-2); }
.page-header .breadcrumb a { color: var(--himmel-700); font-weight: 600; }
.page-header .breadcrumb, .page-header .breadcrumb span { color: var(--tinte-3); }

/* ── Verlaufsschrift: keine Goldschrift auf Hell (DESIGN.md §9) ── */
.text-gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--himmel-700) !important;
}
.cta-section .text-gradient, .cta-section h2 .text-gradient {
  color: var(--tinte) !important; -webkit-text-fill-color: var(--tinte) !important; background: var(--sonne) !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  padding: 0 .14em .02em; border-radius: 8px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ── Dusch-Challenge: Verlaufsschrift (weiss/eisblau) -> Tinte und Himmel ── */
.dc-hero h1, .dc-hero h1 span {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  font-family: var(--f-titel); font-weight: 600; text-transform: uppercase; letter-spacing: .01em;
}
.dc-hero h1 { color: var(--tinte); }
.dc-hero h1 span { color: var(--himmel-700); }

/* ── EN-Startseite: "BREATHE." hat 8 statt 5 Zeichen -> kleiner setzen ── */
@font-face {
  font-family: 'Anton';
  src: url('../schriften/anton-zusatz.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0042, U+0048, U+0052;   /* B H R, Rest steckt in anton-atme.woff2 */
}
.hero-atme-en { font-size: calc(var(--atme) * .6); }
@media (max-width: 1100px) {
  .hero-atme-en { font-size: calc(var(--s) * 22.5); margin-top: calc(var(--s) * 4); }
}

/* ── Handy: lange Knopftexte der Unterseiten brechen um statt ueber den Rand zu ragen ── */
@media (max-width: 760px) {
  main .btn, article .btn, section:not(.hero-hell) .btn { white-space: normal; max-width: 100%; text-align: center; }
  .course-filter-row { flex-wrap: wrap; justify-content: center; overflow: visible; }
}

/* ── Weisse Logos (fuer Dunkel gebaut) auf Hell: dunkel wie die Logoleiste der Startseite ── */
img[src*="aareal-bank-logo"], img[src*="soham-logo-weiss"], img[src*="martin-lippert-logo.svg"] {
  filter: brightness(0) saturate(100%) !important; opacity: .72 !important;
}

/* ── Symbole: vorgefaerbte Himmel-/Tinte-Fassungen aus bilder/icons statt Cyan-Filter ── */
img.pi-accent[src*="/bilder/icons/"], img.pi-mut[src*="/bilder/icons/"] { filter: none !important; }
img.pi-accent:not([src*="/bilder/icons/"]) {
  filter: invert(27%) sepia(52%) saturate(1200%) hue-rotate(182deg) brightness(.9) !important;
}

/* ── Startseite: Zertifikatslogo auf dem Foto wie im Original (floating-cert), hell gesetzt ── */
.hero-cert {
  position: absolute; left: 6%; bottom: 20px; z-index: 4;
  background: rgba(255,255,255,.94); border-radius: var(--r-pille); padding: 9px 16px;
  box-shadow: var(--schatten-2); line-height: 0;
}
.hero-cert img { height: 28px; width: auto; display: block; }
@media (max-width: 1100px) { .hero-cert { left: auto; right: 12px; bottom: 12px; padding: 6px 11px; } .hero-cert img { height: 20px; } }

/* ── Schlussbereich wie im Original ohne Foto: eine Spalte, mittig ── */
.cta-section:not(:has(.cta-foto)) { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.cta-section:not(:has(.cta-foto)) p { margin-left: auto; margin-right: auto; }
.cta-section:not(:has(.cta-foto)) .cta-buttons { justify-content: center; }

/* ── Fotos in Artikeln und Seiten: feiner Rahmen + weicher Schatten wie die Fotokarten der Startseite,
      damit helle Fotos sich vom hellen Grund absetzen (Original-Fotos, nur Rahmung neu) ── */
img.artikel-breit, img.seiten-bild, .article-body img:not([class*="pi-"]):not([src*="icons/"]) {
  border-radius: var(--r-karte);
  border: 1px solid var(--himmel-100);
  box-shadow: var(--schatten-1);
}

/* ── Dusch-Challenge: Hauptknopf Gold mit Tinte wie alle Hauptknoepfe ── */
.dc-hero-cta {
  background: var(--sonne) !important; color: var(--tinte) !important;
  box-shadow: inset 0 -4px 0 var(--sonne-tief), 0 8px 20px rgba(224,165,42,.28) !important;
  font-family: var(--f-titel); text-transform: uppercase; letter-spacing: .04em;
}

/* ══ Feinschliff 01.11.2026 ════════════════════════════════════════════ */
/* Termin-Knopf in den Kurskarten: Weiss auf Himmel-700 (vorher Fast-Schwarz, 2,8:1) */
.termin-btn { color: #fff !important; }
/* Gutschein-Knopf: Hauptaktion der Preiskarte -> Gold mit Tinte */
.gutschein-cta { background: var(--sonne) !important; color: var(--tinte) !important; border-color: var(--sonne-tief) !important; }
.gutschein-cta:hover { background: #FFD27A !important; }
/* Fussnoten-Adresse auf Kategorieseiten klebte am Rand (ausserhalb des Containers) */
footer > address { max-width: var(--breite); margin-left: auto; margin-right: auto; padding-left: var(--rand); padding-right: var(--rand); }
/* Tabellen in Artikeln: am Handy seitlich scrollbar statt abgeschnitten */
@media (max-width: 760px) {
  article table, .article-body table, .blog-content table, main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Handy: Filter-Chips im Blog gut tippbar */
@media (max-width: 760px) { .filter-btn { min-height: 40px; } }

/* ══ Feinschliff 01.11.2026 · Befunde der Designpruefung ═══════════════════ */

/* — Startseiten — */
.btn { white-space: nowrap; }
@media (max-width: 400px) { #hero .hero-breathing-buttons .btn { flex: 1 1 100%; } }
@media (max-width: 900px) {
  div[style*="grid-template-columns:1.2fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 700px) { #kurse div[style*="gradient-card"] { grid-template-columns: 1fr !important; } }
.schritt-karte:not(:has(.schritt-foto)) { padding-top: 36px !important; }
@media (max-width: 760px) { .schritt-karte:not(:has(.schritt-foto)) { padding-top: 26px !important; } }
#kurse + .section { padding-top: 0; }
@media (max-width: 1100px) { .hero-title-kicker { margin-bottom: 14px; } }
.pillar-card { display: flex; flex-direction: column; }
.pillar-card > a:last-child { margin-top: auto; }
#eis-carousel { margin-left: 0; margin-right: 0; }
#eis-carousel img, #eis-carousel .carousel-slide { border-radius: var(--r-karte); }
@media (max-width: 1100px) and (min-width: 701px) {
  #kurse .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}
#challenge-cta h2 .text-gradient { white-space: nowrap; }
@media (max-width: 760px) { #challenge-cta h2 { font-size: clamp(1.8rem, 8vw, 2rem); } }
.um-photo img { object-position: 40% center; }

/* — Tippflaechen am Handy (44 px) — */
@media (max-width: 760px) {
  .pillar-card > a:last-child, .footer-col a, .breadcrumb a { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -6px; margin-bottom: -6px; }
  .filter-btn, .filter-tab, .btn-sm, .streak-badge, .dc-reset-btn { min-height: 44px; }
  summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .study-link { min-height: 44px; display: inline-flex; align-items: center; }
}
.filter-tab { font-family: var(--f-text); }

/* — Blog und Artikel — */
.article-body { max-width: 68ch !important; margin-left: auto !important; margin-right: auto !important; }
.article-body p, .article-body li { font-size: 17px; line-height: 1.7; }
.article-body h2 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); margin: 3rem 0 .75rem; }
.article-body h3 { margin: 2rem 0 .5rem; }
.article-hero + section { padding-top: 48px; }
.blog-card .blog-tag { align-self: flex-start; width: fit-content; }

/* — Rechtsseiten — */
.lesespalte > div { max-width: 760px; margin-left: auto; margin-right: auto; }
.lesespalte p { max-width: 68ch; }
.lesespalte h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 48px 0 16px; }
.lesespalte h3 { font-size: 1.15rem; margin: 28px 0 8px; }
@media (max-width: 600px) { .lesespalte > div { padding: 24px 20px !important; } }

/* — Landingpages — */
.lp-hero h1, .lp-section h3 { text-transform: uppercase; }
.lp-pillar p { text-align: left; }
.lp-section { padding-top: var(--abschnitt); padding-bottom: var(--abschnitt); }

/* — Inhaltsseiten — */
.step-box .step-num {
  flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--sonne) !important; color: var(--tinte) !important; font: 600 1rem/1 var(--f-titel);
}
.section-tag { background: var(--eis-50) !important; color: var(--himmel-700) !important; }
.resource-card .btn-primary[style] { background: var(--sonne) !important; color: var(--tinte) !important; }
.resource-card .btn { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
@media (max-width: 600px) { .resource-card .btn { flex: 1 1 100%; } }
.resource-card { border-top-color: var(--himmel-300) !important; }
section[style*="padding-top:0"] { padding-top: clamp(48px, 6vw, 72px) !important; }
.hero-header { padding-top: 128px; }
.faq-grid-wide { align-items: stretch; }
.faq-split > * { min-width: 0; }
@media (max-width: 760px) {
  main table th:first-child, main table td:first-child { position: sticky; left: 0; background: var(--schnee); z-index: 1; }
  main table th, main table td { padding: 10px 8px; }
}
h1, .milestone-card h3 { text-transform: uppercase; }

/* — Challenge und Dusch-Challenge — */
.dc-week-tag { color: var(--himmel-700) !important; }
.dc-week-duration { color: var(--himmel-700) !important; background: var(--eis-50) !important; border-color: var(--himmel-100) !important; }
@media (max-width: 600px) { .dc-progress { flex-direction: column; align-items: stretch; } }
@media (max-width: 600px) { .dc-days { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 8px; } }
.dc-btn-primary { background: var(--sonne) !important; color: var(--tinte) !important; box-shadow: inset 0 -4px 0 var(--sonne-tief) !important;
  font-family: var(--f-titel); text-transform: uppercase; letter-spacing: .04em; }
.dc-btn-secondary { background: transparent !important; color: var(--tinte) !important; border: 2px solid var(--tinte) !important;
  font-family: var(--f-titel); text-transform: uppercase; letter-spacing: .04em; }
.milestone-card, .dc-step { border-radius: var(--r-karte); }
.dc-step-icon svg { stroke: var(--himmel-700); }

/* — Sprachumschalter: inaktive Sprache lesbar — */
.lang-switch a, .lang-switch-mobile a { opacity: 1 !important; color: var(--tinte-3) !important; }

/* — Kurse, Buchung, Kontakt (Designpruefung 01.11.2026) — */
.btn-primary[style*="background"] { background: var(--sonne) !important; background-image: none !important; color: var(--tinte) !important; }
.ak-step-num { color: #fff !important; }
.zahl-check { background: var(--eis-50) !important; }
@media (max-width: 760px) {
  [style*="grid-template-columns:1fr 2fr"], [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
}
.paket-card { display: flex; flex-direction: column; }
.paket-body { flex: 1; display: flex; flex-direction: column; }
.paket-body .btn { margin-top: auto; }
.paket-card.highlight { border: 2px solid var(--sonne) !important; }
.course-info span { white-space: nowrap; line-height: 1.1; }
@media (max-width: 600px) {
  section:not(.hero-hell) .btn { font-size: .9rem; letter-spacing: .04em; padding-left: 18px; padding-right: 18px; }
  .course-filter-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  #gutschein .fade-up { padding: 20px !important; }
}
.ak-btn-primary { background: var(--sonne) !important; color: var(--tinte) !important; box-shadow: inset 0 -4px 0 var(--sonne-tief) !important;
  font-family: var(--f-titel); text-transform: uppercase; letter-spacing: .04em; }
/* Online schnuppern (02.11.2026, Martin: "ausgerueckt"): Kennzeile, Ueberschrift, Text, Karten und Kalender in einer Spalte */
#termin > .container { max-width: calc(900px + 2 * var(--rand, 24px)); }
#termin h2, #termin .ak-sub, #termin .ak-regeln, #termin .ak-cal { max-width: none; margin-left: 0; margin-right: 0; }
.ak-card { border: 1px solid var(--himmel-100) !important; box-shadow: var(--schatten-1); }
.ak-features li { align-items: flex-start !important; }
body:not(:has(#hero)) .cta-section h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.price-card, .ak-info, .ak-soon-banner { border-radius: var(--r-karte) !important; }
.contact-form :is(input, select, textarea):focus { border-color: var(--himmel-700) !important; box-shadow: 0 0 0 3px rgba(224,165,42,.45) !important; outline: none; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--himmel-700); }
/* Rasterspalten duerfen schrumpfen, sonst waechst die Artikelspalte auf Tabellenbreite (Guide, Vergleichsartikel) */
.guide-split > *, .article-body { min-width: 0; }
.article-body { width: 100%; }
/* Handy: kleine Fliesstexte lesbar (Hinweise, Zitate, Studienangaben); Etiketten mindestens 12,5 px */
@media (max-width: 760px) {
  .buchung-hilfe, .urgency, cite, .study-meta, .lp-cert, .lp-badge { font-size: 14px !important; }
  .glossar-tag, .lp-card-badge { font-size: 12.5px !important; }
}

/* ── Nachpruefung 01.11.2026 ── */
/* Saeulen: Inline-margin-top der Links ueberstimmen, damit alle drei auf einer Linie stehen */
.pillar-card > a:last-child { margin-top: auto !important; padding-top: 24px; }
/* Artikel: echte Lesebreite (68ch misst die Ziffernbreite und ergab ~80 Zeichen) */
.article-body { max-width: 640px !important; }
/* Rechtsseiten: Inline-H2 (16 px) wieder ueber H3; am Handy nur einfacher Innenabstand */
.lesespalte h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; }
@media (max-width: 600px) { .lesespalte > div { padding: 20px 12px !important; } }
/* Dusch-Challenge: Fortschrittsbalken am Handy volle Breite */
.dc-progress-bar-outer { align-self: stretch; width: 100%; }
/* Kursseite: Kursbloecke am Handy einspaltig ohne Ueberbreite */
@media (max-width: 760px) {
  div:has(> .course-media) { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .course-media, .course-info { min-width: 0; }
}
/* Preiszeile der Kursbloecke darf umbrechen (Zusatz „live & 1:1 …“ ragte am Handy 2 px hinaus) */
.course-info div[style*="display:flex;align-items:center;gap:8px"] { flex-wrap: wrap; row-gap: 2px; }
/* Tablet: Kurs-Filterleiste bricht mittig um statt rechts aus dem Bild zu laufen */
@media (min-width: 601px) and (max-width: 1100px) {
  .course-filter-row { flex-wrap: wrap !important; justify-content: center !important; overflow: visible !important; row-gap: 10px; }
}
/* Danke-Seiten: Inhalt beginnt unter der festen Navigation (vorher 4 px darunter verdeckt) */
body:not(:has(.page-header, .hero-header, .hero-hell, .dc-hero, .lp-hero)) section:first-of-type:has(> .container.lesespalte.mitte) { padding-top: max(128px, var(--abschnitt)) !important; }
/* Fragenraster: Karten einer Reihe gleich hoch (Inline-align-items:start ueberstimmt) */
.faq-grid-wide { align-items: stretch !important; }
/* Handy: lange Kursueberschriften mit Luft zum Rand; Querverweise in Artikeln gut tippbar */
@media (max-width: 600px) {
  .course-info h2 { font-size: clamp(1.7rem, 8vw, 2rem) !important; }
  .cta-inline { display: inline-block; padding-top: 9px; padding-bottom: 9px; }
}

/* ── Startseite Handy: Logoleiste (Zertifiziert · Firmenkunden · Partner) als gleichmaessiges Zweier-Raster ── */
@media (max-width: 760px) {
  .trust-group { align-items: stretch !important; width: 100%; }
  .trust-chips { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .trust-chip { width: 100%; height: 60px !important; justify-content: center; padding: 0 12px !important; box-sizing: border-box; }
  .trust-chip img { max-width: 100%; max-height: 34px; width: auto !important; height: auto !important; object-fit: contain; }
  .trust-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Tablet: Beschriftungen in fester Spalte, Logos starten auf einer Linie */
@media (min-width: 761px) and (max-width: 1100px) {
  .trust-strip { display: grid !important; grid-template-columns: 1fr; justify-items: start; }
  .trust-group { display: grid !important; grid-template-columns: 150px auto; align-items: center; gap: 16px; }
}

/* Studien "Was die Forschung beweist" (02.11.2026, Martin: "nicht schoen angeordnet"):
   vier Karten als 2 x 2 statt 3 + 1, mit Luft zum naechsten Abschnitt */
.findings-grid:has(> .finding-chip) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; margin: 40px auto 88px; gap: 20px; }
@media (max-width: 760px) { .findings-grid:has(> .finding-chip) { grid-template-columns: 1fr; margin-bottom: 56px; } }
/* Treffpunkt unter der Karte (Eisheilige, 02.11.2026) */
.treffpunkt-hinweis { margin: 14px 0 0; color: var(--tinte-2); font-size: 1rem; line-height: 1.6; }
.treffpunkt-hinweis a { color: var(--himmel-700); font-weight: 600; }
/* Beschriftung "Treffpunkt Eisbaden" neben der Nadel: Google zeigt bei freien Koordinaten keinen Namen.
   Die Nadel steht beim Laden genau in der Kartenmitte; wer in die Karte klickt (verschieben), blendet das Etikett aus. */
.maps-embed:has(.treffpunkt-etikett) { position: relative; }
.treffpunkt-etikett {
  position: absolute; left: calc(50% + 16px); top: calc(50% - 31px); z-index: 2; pointer-events: none;
  font: 600 15px/1.2 Roboto, Inter, Arial, sans-serif; color: #C5221F; white-space: nowrap;
  text-shadow: -1.5px 0 #fff, 1.5px 0 #fff, 0 -1.5px #fff, 0 1.5px #fff, 0 0 4px #fff;
  transition: opacity .2s;
}
.maps-embed:focus-within .treffpunkt-etikett { opacity: 0; }

/* 03.11.2026 Startseite: Saeulen-Icons Variante 3 (Farbkreise statt Emoji im Sechseck) */
#methode .pillar-icon { clip-path: none; border-radius: 50%; width: 76px; height: 76px; color: #fff; background: var(--himmel-500); }
#methode .pillar-card:nth-child(1) .pillar-icon { background: var(--sonne); color: var(--tinte); }
#methode .pillar-card:nth-child(2) .pillar-icon { background: var(--himmel-500); color: #fff; }
#methode .pillar-card:nth-child(3) .pillar-icon { background: var(--himmel-900); color: #fff; }
#methode .pillar-icon svg { width: 38px; height: 38px; }
@media (max-width: 900px) {
  #methode .pillar-icon { width: 52px; height: 52px; }
  #methode .pillar-icon svg { width: 28px; height: 28px; }
}

/* 03.11.2026 Startseite: "Dein erster Schritt" als Kursfinder statt Telefon-Knopf (Variante B) */
.schritt-finder { display: flex; flex-direction: column; gap: 10px; }
.schritt-finder a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 14px 16px; border: 1.5px solid var(--himmel-100); border-radius: 14px; text-decoration: none; color: var(--tinte); background: #fff; transition: border-color .2s, box-shadow .2s; }
.schritt-finder a:hover, .schritt-finder a:focus-visible { border-color: var(--himmel-500); box-shadow: var(--schatten-1); }
.schritt-finder .sf-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--eis-50); display: grid; place-items: center; color: var(--himmel-700); flex: none; }
.schritt-finder .sf-text { flex: 1; min-width: 0; }
.schritt-finder b { display: block; font-size: .98rem; font-weight: 700; color: var(--tinte); line-height: 1.35; }
.schritt-finder small { display: block; color: var(--tinte-3); font-size: .85rem; margin-top: 2px; }
.schritt-finder .sf-pfeil { color: var(--himmel-700); flex: none; display: grid; }
.schritt-nebenweg { margin: 14px 0 0; text-align: center; font-size: .9rem; color: var(--tinte-2); }
.schritt-nebenweg a { color: var(--himmel-700); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
@media (max-width: 760px) {
  .schritt-finder a { padding: 12px 12px; gap: 12px; }
  .schritt-finder .sf-ic { width: 40px; height: 40px; }
  .schritt-finder b { font-size: .95rem; }
  .schritt-finder small { font-size: .82rem; }
}

/* 03.11.2026 Martin: "unklar, was ist Zertifiziert von und was sind Firmenkunden" ->
   jede Gruppe als eigene Spalte, Beschriftung ueber ihren Logos, Trennlinie zwischen den Gruppen */
@media (min-width: 1101px) {
  .trust-strip { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: center; align-items: start; gap: 0 !important; }
  .trust-group { flex-direction: column; align-items: center; gap: 12px; padding: 4px 36px; }
  .trust-group + .trust-group { border-left: 1px solid var(--himmel-100); }
}
.trust-label { display: inline-flex; align-items: center; gap: 8px; color: var(--tinte-2); }
.trust-label::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--sonne); flex: none; }
@media (min-width: 761px) and (max-width: 1100px) {
  .trust-group { padding: 12px 0; width: 100%; justify-self: stretch; }
  .trust-group + .trust-group { border-top: 1px solid var(--himmel-100); }
  .trust-strip { gap: 0 !important; }
}
@media (max-width: 760px) {
  .trust-strip { gap: 0 !important; }
  .trust-group { padding: 16px 0; gap: 10px !important; }
  .trust-group:first-child { padding-top: 0; }
  .trust-group + .trust-group { border-top: 1px solid var(--himmel-100); }
}

/* 03.11.2026 Martin: Kurs-Filterleiste "bleibt beim Scrollen bestehen und blockiert oben" -> scrollt mit */
.course-filter { position: static !important; }

/* 04.11.2026 Martin (Bildschirmfoto iPhone): Handy-Menue auf Unterseiten unscharf und nicht antippbar.
   style-hell.css legt body.menu-open::before (Abdunklung mit blur) auf z-index 899, die Navigation samt Menue
   liegt auf 100 – die Abdunklung lag also UEBER dem Menue. Jetzt unter der Navigation, ueber dem Inhalt (1–3). */
body.menu-open::before { z-index: 99 !important; }

/* 04.11.2026: Retreat-Kachel (kurse.html, en/courses.html) – das Naturfoto fuellte die Hoehe nicht, unten blieben ~110 px leer */
.retreat-split .retreat-bild picture { display: block; height: 100%; }
.retreat-split .retreat-bild img { position: absolute; inset: 0; height: 100% !important; }

/* 04.11.2026 Martin (Mail „WHM Hell“): „Bilder auf der Seite schöner und heller“.
   Nur Fotos (Ordner /images/ und die Porträts), keine Logos, Icons, Buchcover, App-Symbole, SVG. */
img[src*="images/"]:not([src*="Logos/"]):not([src*="logo"]):not([src*="pwa/"]):not([src*="books/"]):not([src$=".svg"]),
img[src*="Martin-Tshirt"], img[src*="Martin-Sommer"], img[src*="bild-ueber-mich"] {
  filter: brightness(1.07) contrast(1.03) saturate(1.08);
}

/* 04.11.2026 Martin: „ja einfügen“ – Zeitstrahl „So läuft dein Kurstag“ (Fundamentals), Kursseite und Ortsseiten DE/EN */
.kursablauf .section-header { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.zs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0 10px; position: relative; counter-reset: zs; }
.zs::before { content: ""; position: absolute; left: 6%; right: 6%; top: 58px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--himmel-300), var(--himmel-500) 70%, var(--himmel-900)); }
.zs li { position: relative; text-align: center; padding: 0 4px; }
.zs-zeit { display: block; height: 22px; font-family: var(--f-titel); font-weight: 600; font-size: .95rem; letter-spacing: .06em; color: var(--himmel-700); }
.zs-punkt { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: 6px auto 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--himmel-300); box-shadow: 0 6px 18px rgba(22,75,120,.14); }
.zs-punkt img { width: 28px; height: 28px; }
.zs h3 { font-family: var(--f-titel); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .03em; margin: 0 0 6px; color: var(--tinte); }
.zs p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--tinte-2); }
.zs-pause .zs-punkt { border-style: dashed; background: var(--eis-50); }
.zs-hoehe .zs-punkt { width: 76px; height: 76px; margin: 0 auto 10px; background: #fff; border: 4px solid var(--sonne); box-shadow: 0 0 0 6px var(--sonne-hauch), 0 8px 22px rgba(224,165,42,.35); }
.zs-hoehe .zs-punkt svg, .zs-hoehe .zs-punkt img { width: 38px; height: 38px; }
.zs-hoehe h3 { color: var(--himmel-900); }
@media (max-width: 900px) {
  .zs { grid-template-columns: 1fr; gap: 0; }
  .zs::before { left: 31px; right: auto; top: 20px; bottom: 20px; width: 3px; height: auto; background: linear-gradient(180deg, var(--himmel-300), var(--himmel-900)); }
  .zs li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; text-align: left; padding: 0 0 22px; }
  .zs-punkt { grid-row: 1 / span 3; margin: 0; width: 64px; height: 64px; }
  .zs-hoehe .zs-punkt { width: 64px; height: 64px; }
  .zs-zeit { height: auto; grid-column: 2; }
  .zs-zeit:empty, .zs li .zs-zeit:has(+ .zs-punkt) { }
  .zs h3 { grid-column: 2; margin-top: 2px; }
  .zs p { grid-column: 2; }
}
/* 04.11.2026 Zeitstrahl: Spaltenzahl nach Stationen, Aufklapp-Knopf nur am Handy */
.zs.zs-7 { grid-template-columns: repeat(7, 1fr); }
.zs.zs-8 { grid-template-columns: repeat(8, 1fr); }
.zs-knopf { display: none; }
@media (max-width: 900px) {
  .zs.zs-7, .zs.zs-8 { grid-template-columns: 1fr; }
  .zs li { padding-bottom: 14px; align-items: center; }
  .zs li p { display: none; }
  .zs.zs-offen li p { display: block; }
  .zs.zs-offen li { padding-bottom: 22px; align-items: start; }
  .zs-zeit:empty { display: none; }
  .zs-knopf { display: block; margin: 8px auto 0; min-height: 44px; padding: 10px 22px; border-radius: var(--r-pille);
    border: 1.5px solid var(--himmel-300); background: #fff; color: var(--himmel-700); font-weight: 700; font-size: .95rem; cursor: pointer; }
}
@media (max-width: 900px) {
  .zs li { grid-template-columns: 44px 1fr; column-gap: 14px; padding-bottom: 10px; }
  .zs::before { left: 21px; }
  .zs-punkt, .zs-hoehe .zs-punkt { width: 44px; height: 44px; border-width: 2.5px; }
  .zs-hoehe .zs-punkt { border-width: 3px; box-shadow: 0 0 0 4px var(--sonne-hauch); }
  .zs-punkt img { width: 22px; height: 22px; }
  .zs-hoehe .zs-punkt svg, .zs-hoehe .zs-punkt img { width: 26px; height: 26px; }
  .zs h3 { font-size: 1.05rem; margin: 0; }
  .zs-zeit { font-size: .8rem; }
  .kursablauf .section-header { margin-bottom: 28px; }
}
/* 04.11.2026 Martin: Handy-Ansicht „eher mittig“ – Stationen zentriert untereinander, kurze Verbindungsstriche dazwischen */
@media (max-width: 900px) {
  .zs::before { display: none; }
  .zs li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; }
  .zs li::after { content: ""; display: block; width: 3px; height: 22px; margin: 8px 0; border-radius: 3px; background: var(--himmel-300); }
  .zs li:last-child::after { display: none; }
  .zs-zeit { order: 0; height: auto; margin-bottom: 4px; }
  .zs-zeit:not(:empty) { min-height: 0; }
  .zs li .zs-punkt { margin: 0 0 6px; }
  .zs h3 { margin: 0; }
  .zs.zs-offen li p { max-width: 300px; margin: 6px auto 0; }
  .zs.zs-offen li { padding-bottom: 0; }
}
@media (max-width: 900px) { .zs-zeit.zs-leer { display: none; } }
/* 04.11.2026 Martin („ja“ zu zwei Spalten): Handy-Zeitstrahl als nummerierte Karten in zwei Spalten */
@media (max-width: 900px) {
  .zs.zs-7, .zs.zs-8 { grid-template-columns: 1fr 1fr; gap: 14px 12px; counter-reset: zs; }
  .zs li { counter-increment: zs; position: relative; justify-content: center; padding: 18px 8px 14px; background: #fff;
    border: 1px solid var(--himmel-100); border-radius: 16px; box-shadow: var(--schatten-1); }
  .zs li::after { display: none; }
  .zs li h3::before { content: counter(zs) ". "; color: var(--himmel-500); }
  .zs.zs-7 li:last-child { grid-column: 1 / -1; }
  .zs li.zs-hoehe { border-color: var(--sonne); }
  .zs-zeit { position: absolute; top: 8px; right: 10px; margin: 0; font-size: .72rem; }
  .zs.zs-offen li p { max-width: none; font-size: .85rem; }
}

/* 04.11.2026 Handy-Menue wie Desktop: Hauptpunkte ohne Untermenue (Start, Blog, Links) als klickbare Ueberschrift,
   Gruppenlabels aus dem Kurse-Menue (Praesenz, Online, Unternehmen) als kleine Zwischenzeile */
.mobile-menu a.mobile-section-label.mobile-top { display: flex; align-items: center; min-height: 44px; text-decoration: none; cursor: pointer; }
.mobile-menu .mobile-group-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); padding: 10px 0 2px; }
/* 04.11.2026 Martin: Saeulen-Symbole am Handy zu nah an „Mindset/Atmung/Kaelte“ */
@media (max-width: 900px) { #methode .pillar-card .pillar-icon { margin: 0 auto 16px !important; } }
.mobile-menu a.mobile-section-label.mobile-top { padding: 17px 0 7px !important; margin-top: 0; color: var(--himmel-700) !important; border-bottom: 0 !important; min-height: 0; }
/* 04.11.2026 Martin: aufgeklappter Zeitstrahl am Handy „Formatierung total schlimm“ ->
   aufgeklappt eine Station pro Zeile: Symbol links, Titel und Text linksbuendig rechts daneben */
@media (max-width: 900px) {
  .zs.zs-offen { grid-template-columns: 1fr !important; gap: 10px !important; }
  .zs.zs-offen li { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start;
    text-align: left; padding: 14px 16px !important; }
  .zs.zs-offen.zs-7 li:last-child { grid-column: auto; }
  .zs.zs-offen li .zs-punkt { grid-row: 1 / span 2; grid-column: 1; margin: 0 !important; }
  .zs.zs-offen li h3 { grid-column: 2; margin: 10px 0 0 !important; padding-right: 44px; }
  .zs.zs-offen li p { grid-column: 2; display: block; margin: 4px 0 0 !important; max-width: none; font-size: .92rem; line-height: 1.5; text-align: left; }
  .zs.zs-offen .zs-zeit { position: absolute; top: 10px; right: 12px; }
}