/*
 * your-matrix Bibliothek, Stile der Inhaltsbereiche.
 * Alles ist unter .ym gescoped, damit Divi nicht kollidiert.
 * Seitenhintergrund, Kopf und Schrift (Open Sans, lokal) kommen von Divi.
 *
 * Gestaltung: ruhig und hochwertig. Tiefe entsteht über Flächen, feine Linien,
 * Bild, Größe und Weißraum, nie über Schatten. Das eine Signatur-Element ist
 * das Punkteraster in Aqua auf der dunklen Kopffläche (wie im Handy-Menü).
 * Bewegung kommt aus ym-bewegung.js (GSAP), ohne Skript ist alles sichtbar.
 */

.ym {
  --navy: #25385D;
  --navy-tief: #1A2B48;
  --tinte: #19333E;
  --grau: #5C6772;
  --cyan: #0A89C5;
  --cyan-d: #0877AB;
  --aqua: #7FD8DC;
  --linie: #DCE4EA;
  --linie-fein: #EEF2F5;
  --flaeche: #F4F8FA;
  --hell: #E8F6F7;
  --rot: #B3263E;
  --feldlinie: #768796;
  --r-gross: 24px;
  --r-karte: 18px;
  --r-klein: 12px;
  --ym-weich: cubic-bezier(.22, 1, .36, 1);
  /* Gemeinsame Abstandsskala (02.10.2026): Block 96/72/56, Kopfteil zum Raster 40/32/24, Rasterluecke 24/20/16 */
  --abstand-block: 96px;
  --abstand-eng: 96px;
  --abstand-kopf: 40px;
  --luecke: 24px;
  color: var(--tinte);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Grundregeln ---------- */
.ym *, .ym *::before, .ym *::after { box-sizing: border-box; }
.ym img, .ym video { height: auto; max-width: 100%; display: block; }
.ym a { color: inherit; }
.ym button, .ym input, .ym select, .ym textarea { font: inherit; color: inherit; letter-spacing: normal; }
.ym button { cursor: pointer; }
.ym :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.ym [hidden] { display: none !important; }
.ym p { padding: 0; }
.ym h1, .ym h2, .ym h3 { padding: 0; font-weight: 500; text-transform: none; letter-spacing: normal; }
.ym mark { background: #FFE6A0; color: inherit; border-radius: 3px; padding: 0 2px; }
.ym-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Divi setzt Listen mit hoher Spezifität (#left-area ul). Eigene Listen zurücksetzen. */
.ym ol.ym-krumen, .ym ol.ym-transkript, .ym .ym-fehler-box ul, .ym ul.ym-mehr-liste, .ym ul.ym-reihe, .ym ul.ym-gespraech-liste {
  list-style: none !important; padding: 0 !important; margin: 0;
}
.ym ol.ym-krumen li, .ym ol.ym-transkript li, .ym ul.ym-mehr-liste li, .ym ul.ym-reihe li, .ym ul.ym-gespraech-liste li { list-style: none !important; }
.ym ul.ym-punkte { list-style: disc !important; padding: 0 0 0 20px !important; margin: 0; line-height: 1.6; }
.ym ul.ym-punkte li { margin: 0 0 8px; }

/* ---------- Typografie ---------- */
.ym .ym-h1 { font-size: clamp(34px, 2.4vw + 18px, 54px); line-height: 1.06; margin: 0; color: var(--navy); letter-spacing: -.02em; text-align: left; }
.ym .ym-h2 { font-size: clamp(24px, 1.1vw + 16px, 32px); line-height: 1.15; margin: 0 0 14px; color: var(--navy); letter-spacing: -.015em; text-align: left; }
.ym .ym-h2 .ym-linie { text-align: left; }
.ym .ym-unter { color: var(--grau); margin: 10px 0 0; font-size: 17px; }
.ym .ym-fett { font-weight: 600; }
.ym .ym-abstand { margin-top: 20px; }
.ym .ym-klein { font-size: 14px; color: var(--grau); margin: 14px 0 0; line-height: 1.55; }
.ym .ym-klein-titel { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--grau); margin: 0 0 14px; }
.ym .ym-marke-text { display: block; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cyan-d); margin: 0; }
.ym .ym-block { margin-top: var(--abstand-block); }
.ym .ym-block-eng { margin-top: var(--abstand-eng); }
.ym .ym-kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: var(--abstand-kopf); }
.ym .ym-zurueck { margin: var(--abstand-kopf) 0 0; }

/* Abschnittskopf: Überschrift mit kurzer Linie, die sich beim Scrollen zeichnet */
.ym .ym-abschnitt-kopf { margin-bottom: var(--abstand-kopf); }
.ym .ym-abschnitt-kopf .ym-h2 { margin: 0; }
.ym .ym-abschnitt-kopf p { margin: 10px 0 0; color: var(--grau); font-size: 17px; line-height: 1.55; }
/* Zweispaltiger Kopfteil: Ueberschrift und Einleitung an der ersten Grundlinie ausgerichtet */
.ym .ym-abschnitt-kopf-mit-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 48px; align-items: baseline; }
.ym .ym-abschnitt-kopf-mit-text p { margin: 0; }
/* Kritik R18 N2: Themenbeschreibung und Hinweissatz als zwei Absätze */
.ym .ym-abschnitt-kopf-texte { min-width: 0; }
.ym .ym-abschnitt-kopf-mit-text .ym-blick-thema { color: var(--tinte); font-size: 19px; line-height: 1.5; }
.ym .ym-abschnitt-kopf-mit-text .ym-blick-thema + p { margin-top: 8px; }
.ym .ym-linie { display: none; }

/* ---------- Knöpfe und Links ---------- */
.ym .ym-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; border-radius: 999px; background: var(--navy); color: #fff;
  font-weight: 600; font-size: 16px; line-height: 1.2; padding: 12px 26px; min-height: 48px; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .18s var(--ym-weich);
}
.ym .ym-knopf:hover { background: var(--navy-tief); color: #fff; }
.ym .ym-knopf:active { transform: scale(.97); }
.ym .ym-knopf svg { width: 16px; height: 16px; flex: none; }
.ym .ym-knopf-rand { background: transparent; color: var(--navy); border-color: var(--navy); }
.ym .ym-knopf-rand:hover { background: var(--navy); color: #fff; }
.ym .ym-knopf-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.ym .ym-knopf-hell:hover { background: #fff; color: var(--navy); border-color: #fff; }
.ym .ym-knopf-aqua { background: var(--aqua); color: var(--navy); }
.ym .ym-knopf-aqua:hover { background: #fff; color: var(--navy); }
.ym .ym-knopf-klein { padding: 9px 18px; min-height: 44px; font-size: 15px; }
.ym .ym-knopf-breit { width: 100%; margin-top: 24px; }
.ym .ym-knopf-fav { gap: 8px; }
.ym .ym-knopf-fav svg { width: 18px; height: 18px; flex: none; }
.ym .ym-knopf-fav[aria-pressed="true"] { background: #fff; border-color: var(--navy); color: var(--navy); }
.ym .ym-knopf-fav[aria-pressed="true"] svg path { fill: #25385D; }
.ym .ym-knopf-fav[aria-pressed="true"]:hover { background: var(--hell); color: var(--navy); }
.ym .ym-knopf:disabled { opacity: .6; cursor: progress; }
.ym .ym-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.ym .ym-knoepfe-spalte { display: flex; flex-direction: column; gap: 10px; }
.ym .ym-textlink {
  display: inline-block; background: none; border: 0; padding: 10px 0; margin: -10px 0; color: var(--cyan-d); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; line-height: 1.5;
}
.ym .ym-textlink:hover { color: var(--navy); }

/* ---------- Brotkrumen ---------- */
.ym .ym-krumen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--grau); margin: 0 0 18px; }
.ym .ym-krumen li + li::before { content: "›"; margin-right: 6px; color: #9AA7B1; }
.ym .ym-krumen a { color: var(--navy); font-weight: 600; text-decoration: none; display: inline-block; padding: 12px 0; margin: -12px 0; }
.ym .ym-krumen a:hover { text-decoration: underline; }

/* ---------- Meldungen und Formulare ---------- */
.ym .ym-meldung { background: var(--hell); padding: 14px 18px; border-radius: var(--r-klein); margin: 20px 0 0; font-size: 15px; line-height: 1.55; }
.ym .ym-fehler { color: var(--rot); font-weight: 600; font-size: 15px; margin: 12px 0 0; }
.ym .ym-fehler-box { border: 1px solid var(--rot); background: #FDF3F5; color: var(--tinte); border-radius: var(--r-klein); padding: 14px 18px; margin: 20px 0 0; font-size: 15px; }
.ym .ym-fehler-box p { margin: 0 0 4px; color: var(--rot); }
.ym .ym-fehler-box li { margin: 2px 0; }
.ym .ym-feld { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.ym .ym-feld label { font-weight: 600; font-size: 14px; color: var(--navy); }
.ym .ym-feld small { color: var(--grau); font-size: 13px; }
.ym .ym-feld input, .ym .ym-feld select, .ym .ym-feld textarea,
.ym .ym-anmelden-form input[type="text"], .ym .ym-anmelden-form input[type="password"], .ym .ym-anmelden-form input[type="email"] {
  width: 100%; padding: 12px 16px; border: 1px solid var(--feldlinie); border-radius: var(--r-klein); background: #fff;
  min-height: 50px; color: var(--tinte); font-size: 16px; transition: border-color .15s;
}
.ym .ym-feld select { -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325385D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }
.ym .ym-feld input:focus, .ym .ym-feld select:focus, .ym .ym-feld textarea:focus,
.ym .ym-anmelden-form input:focus { border-color: var(--cyan); outline: 3px solid rgba(10, 137, 197, .22); outline-offset: 0; }
.ym .ym-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.ym .ym-voll { grid-column: 1 / -1; }
.ym .ym-check { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0 0; font-size: 15px; margin-top: 16px; line-height: 1.5; }
.ym .ym-check input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--cyan); }
.ym .ym-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ym .ym-zeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; font-size: 15px; flex-wrap: wrap; }
.ym .ym-zweispaltig { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--luecke); align-items: start; }
.ym .ym-zweispaltig > aside { position: sticky; top: 110px; }
.ym .ym-formular-seite .ym-zweispaltig > div:first-child,
.ym .ym-anmelden-form { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: clamp(24px, 3.5vw, 40px); }
.ym .ym-formular-seite .ym-zweispaltig > aside { background: var(--flaeche); border-color: transparent; }

/* Anmeldeformular von WordPress (wp_login_form) */
.ym .ym-anmelden-form form p { display: flex; flex-direction: column; gap: 7px; margin: 18px 0 0; }
.ym .ym-anmelden-form form label { font-weight: 600; font-size: 14px; color: var(--navy); }
.ym .ym-anmelden-form .login-remember label { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 15px; color: var(--tinte); }
.ym .ym-anmelden-form .login-remember input { width: 20px; height: 20px; accent-color: var(--cyan); }
.ym .ym-anmelden-form .login-submit input[type="submit"] {
  width: 100%; margin-top: 10px; border: 0; border-radius: 999px; background: var(--cyan-d); color: #fff;
  font-weight: 600; font-size: 16px; padding: 12px 24px; min-height: 50px; cursor: pointer; transition: background-color .2s;
}
.ym .ym-anmelden-form .login-submit input[type="submit"]:hover { background: var(--navy); }
.ym .ym-anmelden.ym-zweispaltig { align-items: stretch; }
.ym .ym-anmelden.ym-zweispaltig > aside { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.ym .ym-anmelden .ym-h1 { font-size: clamp(30px, 2vw + 16px, 40px); }

/* ---------- Karten der Seite ---------- */
.ym .ym-seite-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: clamp(22px, 3vw, 30px); }
.ym .ym-seite-karte + .ym-seite-karte { margin-top: var(--luecke); }
.ym .ym-seite-karte p { margin: 0 0 12px; }
.ym .ym-seite-karte p:last-child { margin-bottom: 0; }
.ym .ym-seite-karte .ym-h2 { font-size: 22px; }
.ym .ym-karte-dunkel { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-color: var(--navy); }
.ym .ym-karte-dunkel .ym-h2 { color: #fff; }
.ym .ym-karte-dunkel .ym-klein { color: rgba(255, 255, 255, .75); }
.ym .ym-karte-dunkel .ym-textlink { color: var(--aqua); }
.ym .ym-karte-dunkel .ym-textlink:hover { color: #fff; }
.ym .ym-karte-dunkel > *:not(.ym-hero-punkte) { position: relative; z-index: 1; }
.ym .ym-liste-dl { margin: 0 0 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; font-size: 15px; }
.ym .ym-liste-dl dt { color: var(--grau); }
.ym .ym-liste-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Kopfbereich mit Punkteraster (Signatur) ---------- */
.ym .ym-hero { position: relative; color: #fff; padding: clamp(28px, 4.5vw, 60px) clamp(22px, 4.5vw, 60px); margin: 0 0 var(--abstand-block); min-height: 220px; display: flex; align-items: flex-end; }
.ym .ym-hero-flaeche {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: var(--r-gross);
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(10, 137, 197, .42), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgba(127, 216, 220, .14), transparent 60%),
    linear-gradient(165deg, var(--navy-tief) 0%, var(--navy) 58%, #1B2E4C 100%);
}
.ym .ym-hero-punkte {
  position: absolute; left: -10%; right: -10%; top: -12%; bottom: -12%; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(127, 216, 220, .42) 1.2px, transparent 2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 90% at 82% 30%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%);
  mask-image: radial-gradient(75% 90% at 82% 30%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%);
  will-change: transform;
}
.ym .ym-karte-dunkel .ym-hero-punkte { background-size: 20px 20px; -webkit-mask-image: radial-gradient(80% 90% at 90% 10%, #000, transparent 72%); mask-image: radial-gradient(80% 90% at 90% 10%, #000, transparent 72%); }
.ym .ym-hero-zeichen { position: absolute; right: clamp(-20px, 1vw, 40px); top: 50%; width: clamp(180px, 26vw, 300px); transform: translateY(-50%); color: #fff; opacity: .16; pointer-events: none; }
.ym .ym-hero-glyph { width: 100%; height: auto; display: block; }
.ym .ym-hero-bild { position: absolute; inset: 0; overflow: hidden; }
.ym .ym-hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.08); }
.ym .ym-hero-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26, 43, 72, .96) 0%, rgba(26, 43, 72, .82) 42%, rgba(26, 43, 72, .25) 100%); }
.ym .ym-hero-inhalt { position: relative; z-index: 1; max-width: 640px; }
.ym .ym-hero .ym-marke-text { color: var(--aqua); margin-bottom: 14px; }
.ym .ym-hero .ym-h1 { color: #fff; }
.ym .ym-hero-text { margin: 14px 0 0; font-size: clamp(16px, .4vw + 14px, 19px); line-height: 1.55; color: rgba(255, 255, 255, .86); }
.ym .ym-hero-suche { margin-top: 28px; }
.ym .ym-hero .ym-suche { max-width: 560px; }

/* Kopf einer Seite ohne dunkle Fläche (Konto, Formulare) */
.ym .ym-kopfzeile .ym-h1 { margin-bottom: 0; }

/* ---------- Hinweis für Gäste: helle Karte mit Schloss ---------- */
.ym .ym-gast-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 24px; align-items: center;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: clamp(22px, 3vw, 30px);
  margin: 0;
}
.ym .ym-vorschau .ym-gast-karte { margin-top: var(--abstand-kopf); }
.ym .ym-gast-ikon { width: 56px; height: 56px; border-radius: 50%; background: var(--hell); color: var(--cyan-d); display: grid; place-items: center; flex: none; }
.ym .ym-gast-ikon svg { width: 24px; height: 24px; }
.ym .ym-gast-ikon-offen { background: var(--aqua); color: var(--navy); }
.ym .ym-gast-text p { margin: 0; color: var(--grau); font-size: 15px; line-height: 1.55; }
.ym .ym-gast-titel.ym-gast-titel { font-size: 20px; font-weight: 500; color: var(--navy); line-height: 1.25; margin: 0 0 4px; }
.ym .ym-gast-karte .ym-knoepfe { margin: 0; flex-wrap: nowrap; }

/* ---------- Suche ---------- */
.ym .ym-suche { position: relative; flex: 1 1 360px; max-width: 520px; }
.ym .ym-suche > svg { position: absolute; z-index: 2; left: 18px; top: 27px; transform: translateY(-50%); width: 19px; height: 19px; color: var(--grau); pointer-events: none; }
.ym .ym-suche-feld {
  width: 100%; padding: 13px 18px 13px 50px; border: 1px solid var(--feldlinie); border-radius: 999px;
  background: #fff; min-height: 54px; font-size: 16px; color: var(--tinte); -webkit-appearance: none; appearance: none;
}
.ym .ym-hero .ym-suche-feld { border-color: transparent; }
.ym .ym-suche-feld::placeholder { color: var(--grau); opacity: 1; }
.ym .ym-suche-feld:focus { border-color: var(--cyan); outline: 3px solid rgba(127, 216, 220, .55); outline-offset: 0; }

/* Aufklappfeld der Live-Suche: weiß mit Linie, ohne Schatten */
.ym .ym-live {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: min(580px, 92vw);
  background: #fff; color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--r-karte);
  max-height: min(72vh, 660px); overflow: auto; padding: 8px; text-align: left; box-shadow: none;
}
.ym .ym-live-filter {
  position: sticky; top: -8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: #fff; padding: 10px 10px 12px; margin: -8px -8px 4px; border-bottom: 1px solid var(--linie); border-radius: var(--r-karte) var(--r-karte) 0 0;
}
.ym .ym-live-filter > span { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--grau); margin-right: 4px; }
.ym .ym-live-gruppe { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--grau); padding: 10px 12px 4px; margin: 0; }
.ym .ym-live-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }
.ym .ym-live-chips .ym-chip { cursor: pointer; }
.ym .ym-live-chips .ym-chip[aria-selected="true"] { border-color: var(--navy); background: var(--flaeche); }
.ym .ym-live-treffer {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 8px 10px; border-radius: var(--r-klein);
  text-decoration: none; align-items: center; color: var(--tinte);
}
.ym .ym-live-treffer[aria-selected="true"], .ym .ym-live-treffer:hover { background: var(--flaeche); }
.ym .ym-live-treffer img, .ym .ym-live-icon { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; object-position: 50% 0%; }
.ym .ym-live-icon { display: grid; place-items: center; color: #fff; background: var(--g, var(--navy)); }
.ym .ym-live-icon svg { width: 20px; height: 20px; }
.ym .ym-live-treffer b { display: block; color: var(--navy); font-size: 15px; line-height: 1.3; }
.ym .ym-live-meta { display: block; font-size: 12px; color: var(--grau); }
.ym .ym-live-format {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 3px; padding: 2px 8px; border: 1px solid var(--linie);
  border-radius: 999px; background: #fff; font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--navy);
}
.ym .ym-live-format svg { width: 10px; height: 10px; flex: none; }
.ym .ym-live-schnipsel { display: block; font-size: 13px; line-height: 1.45; margin-top: 2px; }
.ym .ym-live-schnipsel em { font-style: normal; font-weight: 600; color: var(--cyan-d); }
.ym .ym-live-fuss {
  display: block; text-align: center; padding: 12px; margin-top: 4px; border-top: 1px solid var(--linie);
  font-weight: 600; color: var(--cyan-d); text-decoration: none; border-radius: 0 0 10px 10px;
}
.ym .ym-live-fuss[aria-selected="true"], .ym .ym-live-fuss:hover { background: var(--flaeche); }
.ym .ym-live-laedt { padding: 16px 12px; color: var(--grau); font-size: 16px; line-height: 1.5; margin: 0; }

/* ---------- Filter ---------- */
.ym .ym-filter { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.ym .ym-filter-reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ym .ym-filter-name { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--grau); margin-right: 8px; }
.ym .ym-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); background: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--navy); min-height: 44px; text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.ym .ym-chip svg { width: 15px; height: 15px; flex: none; }
.ym .ym-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.ym .ym-chip:hover { border-color: var(--navy); }
.ym .ym-chip-klein { padding: 5px 12px; min-height: 36px; font-size: 13px; }
.ym .ym-chip-klein svg { width: 13px; height: 13px; }
.ym .ym-anzahl { color: var(--grau); font-size: 14px; margin: 0 0 var(--abstand-kopf); }
.ym .ym-alle-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ym .ym-alle-kopf .ym-h2 { margin: 0; }
.ym .ym-alle[aria-busy="true"] .ym-raster { opacity: .55; transition: opacity .2s; }
.ym .ym-mehr { display: flex; justify-content: center; margin-top: var(--abstand-kopf); }

/* ---------- Gangfarben (Standard; eigene Farben kommen aus ym-farben.css) ---------- */
.ym [data-ym-gang="realitaet"], .ym[data-ym-gang="realitaet"] { --g: #25385D; }
.ym [data-ym-gang="beziehungen"], .ym[data-ym-gang="beziehungen"] { --g: #0877AB; }
.ym [data-ym-gang="kopf"], .ym[data-ym-gang="kopf"] { --g: #19333E; }
.ym [data-ym-gang="zeit"], .ym[data-ym-gang="zeit"] { --g: #2F6B73; }
.ym [data-ym-gang="tipps"], .ym[data-ym-gang="tipps"] { --g: #4A5568; }

/* ---------- Format-Kacheln mit Zähler ---------- */
.ym .ym-formate3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luecke); }
.ym .ym-format-kachel {
  display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte);
  padding: 22px 24px; text-decoration: none; min-height: 112px;
  transition: transform .35s var(--ym-weich), border-color .2s;
}
.ym .ym-format-kachel:hover { transform: translateY(-3px); border-color: var(--cyan); }
.ym .ym-format-ikon { width: 56px; height: 56px; border-radius: 16px; background: var(--hell); color: var(--navy); display: grid; place-items: center; flex: none; }
.ym .ym-format-ikon svg { width: 24px; height: 24px; }
.ym .ym-format-text { min-width: 0; }
.ym .ym-format-kachel b { display: block; font-size: 20px; color: var(--navy); line-height: 1.2; letter-spacing: -.01em; }
.ym .ym-format-kachel small { display: block; font-size: 14px; color: var(--grau); margin-top: 3px; }
.ym .ym-format-zahl { margin-left: auto; text-align: right; flex: none; }
.ym .ym-format-zahl b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ym .ym-format-zahl small { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-top: 4px; }

/* ---------- Gänge der Bibliothek: Bildkarten ---------- */
.ym .ym-gaenge2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luecke); }
.ym .ym-gaenge2-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ym .ym-gang2 {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden;
  color: var(--tinte); text-decoration: none;
  transition: transform .35s var(--ym-weich), border-color .2s;
}
.ym a.ym-gang2:hover { transform: translateY(-3px); border-color: var(--cyan); }
.ym .ym-gang2-bild { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--g, var(--navy)); }
.ym .ym-gang2-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ym-weich); }
.ym a.ym-gang2:hover .ym-gang2-bild img { transform: scale(1.05); }
.ym .ym-gang2-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 22, 36, .05) 0%, rgba(12, 22, 36, 0) 30%, rgba(12, 22, 36, .55) 65%, rgba(12, 22, 36, .9) 100%);
}
.ym .ym-gang2-nr { position: absolute; z-index: 2; left: 16px; top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(25, 51, 62, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 5px 10px; }
.ym .ym-gang2-titel {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; display: flex; flex-direction: column; gap: 1px;
  color: #fff;
}
.ym .ym-gang2-titel b, .ym .ym-gang2-titel i { font-style: normal; font-weight: 500; line-height: 1.15; font-size: 21px; letter-spacing: -.01em; }
.ym .ym-gang2-titel i { font-weight: 400; font-size: 17px; opacity: .92; }
.ym .ym-gang2-inhalt { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; gap: 12px; }
.ym .ym-gang2-text { display: block; font-size: 14.5px; line-height: 1.55; color: var(--tinte); }
.ym .ym-gang2-fuss { margin-top: auto; display: block; font-size: 13px; font-weight: 600; color: var(--grau); padding-top: 12px; border-top: 1px solid var(--linie-fein); }

/* Audio „Worum es geht“ (Jens 08.10.2026): Karte als div, oben der Link, unten Knopf und Zahlen */
.ym div.ym-gang2-hoeren:has(.ym-gang2-link:hover) { transform: translateY(-3px); border-color: var(--cyan); }
.ym div.ym-gang2-hoeren:has(.ym-gang2-link:hover) .ym-gang2-bild img { transform: scale(1.05); }
.ym .ym-gang2-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.ym .ym-gang2-link:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.ym .ym-gang2-hoeren .ym-gang2-inhalt { flex: 1 1 auto; padding-bottom: 0; }
.ym .ym-gang2-unten { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 18px; margin-top: auto; }
.ym .ym-gang2-unten .ym-gang2-fuss { margin-top: 0; }

.ym .ym-hoeren { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ym .ym-hoeren-knopf {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px;
  border: 1px solid var(--linie); border-radius: 999px; background: #fff; color: var(--navy);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .15s var(--ym-weich);
}
.ym .ym-hoeren-knopf:hover { border-color: var(--g, var(--cyan)); }
.ym .ym-hoeren-knopf:active { transform: scale(.97); }
.ym .ym-hoeren-knopf:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.ym .ym-hoeren-icon { flex: 0 0 auto; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--g, var(--navy)); color: #fff; box-sizing: border-box; }
.ym .ym-hoeren-icon .ym-hoeren-pause { display: none; }
.ym .ym-hoeren-knopf[aria-pressed="true"] .ym-hoeren-play { display: none; }
.ym .ym-hoeren-knopf[aria-pressed="true"] .ym-hoeren-pause { display: inline; }
.ym .ym-hoeren-spur { flex: 1 1 auto; min-width: 24px; height: 4px; border-radius: 2px; background: var(--linie-fein, #EEF2F5); overflow: hidden; }
.ym .ym-hoeren-balken { display: block; width: 100%; height: 100%; background: var(--g, var(--cyan)); transform: scaleX(0); transform-origin: left center; }
.ym .ym-hoeren-dauer { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--grau); font-variant-numeric: tabular-nums; }
/* In den Karten: Länge rechts neben dem Knopf, Balken erst beim Abspielen über die volle Breite */
.ym .ym-gang2-unten .ym-hoeren { flex-wrap: wrap; row-gap: 10px; }
.ym .ym-gang2-unten .ym-hoeren-dauer { margin-left: auto; }
.ym .ym-gang2-unten .ym-hoeren-spur { order: 3; flex: 1 0 100%; display: none; }
.ym .ym-gang2-unten .ym-hoeren-aktiv .ym-hoeren-spur { display: block; }

/* Themenseite: Hörprobe unter der Themenleiste */
.ym .ym-gang-hoeren { display: flex; align-items: center; gap: 20px; margin: 0 0 var(--abstand-block); padding: 16px 20px; border: 1px solid var(--linie); border-radius: 16px; background: #fff; }
.ym .ym-gang-hoeren .ym-hoeren { flex: 1 1 auto; }

/* Fragen an dich (Jens 08.10.2026): Fragenkataloge von Bettina und Petra auf der Themenseite.
   Kernfragen als Fragekarten (Werkzeug aus dem Coaching), Detailfragen als Liste,
   „Auf den Punkt gebracht“ als dunkles Band zum Mitnehmen. */
.ym .ym-fragen-titel { margin: 0 0 22px; }
.ym .ym-fragen-label { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.ym .ym-fragen-zahl { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--g, var(--navy)); background: color-mix(in srgb, var(--g, var(--navy)) 12%, #fff); border-radius: 999px; padding: 2px 9px; }

.ym ul.ym-fragekarten { list-style: none !important; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ym ul.ym-fragekarten li.ym-fragekarte {
  margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px;
  background: #fff; border: 1px solid var(--linie); border-radius: 14px;
  font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--navy);
}
.ym ul.ym-fragekarten li.ym-fragekarte::before {
  content: "?"; content: "?" / ""; flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 14px; font-weight: 700; line-height: 1; color: #fff; background: var(--g, var(--navy));
}

.ym .ym-fragen-detail { margin-top: 40px; }
.ym ul.ym-fragen-liste { list-style: none !important; margin: 0; padding: 0 !important; }
.ym ul.ym-fragen-liste li { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--linie-fein); font-size: 16px; line-height: 1.55; color: var(--tinte); break-inside: avoid; }
.ym .ym-fragen-spalten > ul.ym-fragen-liste { columns: 2; column-gap: 56px; }
.ym .ym-fragen-spalten > ul.ym-fragen-liste > li:first-child, .ym .ym-fragen-vorschau > ul.ym-fragen-liste > li:first-child { padding-top: 0; }
.ym li.ym-fragen-gruppe { padding-bottom: 6px; }
.ym .ym-fragen-gruppe-titel { display: block; margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--g, var(--navy)); }
.ym li.ym-fragen-gruppe ul.ym-fragen-liste li { padding: 6px 0 6px 16px; border-bottom: 0; position: relative; }
.ym li.ym-fragen-gruppe ul.ym-fragen-liste li::before { content: ""; position: absolute; left: 2px; top: 1em; width: 6px; height: 1px; background: var(--grau); }

.ym .ym-fragen-vorschau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: start; }
.ym .ym-fragen-schloss { padding: 20px 22px; border-radius: 14px; background: color-mix(in srgb, var(--g, var(--navy)) 7%, #fff); border: 1px solid color-mix(in srgb, var(--g, var(--navy)) 18%, #fff); }
.ym .ym-fragen-schloss-zeile { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; color: var(--navy); }
.ym .ym-fragen-schloss-zeile svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--g, var(--navy)); }
.ym .ym-fragen-schloss .ym-knoepfe { margin: 14px 0 0; }

.ym .ym-fragen-punkt { margin-top: 40px; padding: 28px 32px 30px; border-radius: var(--r-karte); background: var(--navy); color: #fff; }
.ym .ym-fragen-punkt .ym-fragen-label { color: var(--aqua); }
.ym ul.ym-fragen-punkt-liste { list-style: none !important; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; }
.ym ul.ym-fragen-punkt-liste li { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.4; color: #fff; }

/* Eröffnung (Jens 08.10.2026): „Die Bibliothek öffnet bald“ mit Fortschritt statt Kaufknopf */
.ym .ym-start-stand { display: flex; flex-direction: column; gap: 8px; }
.ym .ym-start-zahl { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.ym progress.ym-start-balken { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--linie); overflow: hidden; color: var(--cyan); }
.ym progress.ym-start-balken::-webkit-progress-bar { background: var(--linie); border-radius: 4px; }
.ym progress.ym-start-balken::-webkit-progress-value { background: var(--cyan); border-radius: 4px; }
.ym progress.ym-start-balken::-moz-progress-bar { background: var(--cyan); border-radius: 4px; }
.ym ul.ym-start-themen { list-style: none !important; margin: 6px 0 0; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.ym ul.ym-start-themen li { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--grau); }
.ym-start-bestand, .ym .ym-start-bestand { margin: 4px 0 12px; font-size: 14px; font-weight: 600; color: #25385D; }
.ym-start-karte ul.ym-start-themen { grid-template-columns: minmax(0, 1fr); }
.ym .ym-start-thema-zahl { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.ym-start-karte { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 4px; padding: 18px 20px; border: 1px solid var(--linie, #DCE4EA); border-radius: 16px; background: var(--hellblau, #EAF0F6); }
.ym .ym-start-titel { margin: 0; font-size: 19px; font-weight: 600; color: var(--navy); }
.ym-start-karte .ym-knoepfe { margin: 4px 0 0; }
.ym .ym-warteliste .ym-fehler-box { margin: 0 0 16px; }
.ym-warteliste-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; margin: 40px 0 0; padding: 32px 36px; border: 1px solid var(--linie, #DCE4EA); border-radius: 18px; background: var(--hellblau, #EAF0F6); scroll-margin-top: 120px; }
.ym .ym-warteliste-text { display: flex; flex-direction: column; gap: 12px; }
.ym .ym-warteliste-text p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tinte); }
.ym h2.ym-warteliste-titel { margin: 0; padding: 0; font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--navy); }
.ym .ym-warteliste .ym-feld { margin-top: 0; }
.ym .ym-warteliste .ym-feld input { background: #fff; }
.ym .ym-warteliste .ym-knopf { margin-top: 16px; }
.ym .ym-warteliste .ym-meldung { margin: 0; background: #fff; }
.ym .ym-warteliste .ym-klein { margin: 10px 0 0; }
@media (max-width: 860px) {
  .ym-warteliste-band { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .ym h2.ym-warteliste-titel { font-size: 22px; }
}
.ym .ym-start-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinte); }
.ym .ym-start-kasten { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 14px; background: color-mix(in srgb, var(--g, var(--navy)) 7%, #fff); border: 1px solid color-mix(in srgb, var(--g, var(--navy)) 18%, #fff); }
.ym .ym-start-kasten-titel { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; color: var(--navy); }
.ym .ym-start-kasten-titel svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--g, var(--navy)); }
.ym .ym-start-kasten-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinte); }
.ym .ym-start-kasten .ym-knoepfe { margin-top: 4px; }
.ym .ym-start-hinweis { margin: 0 0 var(--luecke); }
.ym .ym-start-band { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: var(--luecke); padding: 18px 22px; border-radius: var(--r-karte); background: var(--navy); color: #fff; }
.ym .ym-start-band-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ym .ym-start-band-titel { margin: 0; font-size: 18px; font-weight: 600; color: #fff; }
.ym .ym-start-band .ym-start-zahl { color: rgba(255, 255, 255, .85); }
.ym .ym-start-band progress.ym-start-balken { background: rgba(255, 255, 255, .2); max-width: 420px; }
.ym .ym-start-band progress.ym-start-balken::-webkit-progress-bar { background: rgba(255, 255, 255, .2); }
.ym .ym-start-band progress.ym-start-balken::-webkit-progress-value { background: var(--aqua); }
.ym .ym-start-band progress.ym-start-balken::-moz-progress-bar { background: var(--aqua); }

/* Gang-Seite: Leiste mit allen vier Gängen, der aktuelle hervorgehoben */
.ym .ym-gang-leiste { margin: 0 0 var(--abstand-block); }
.ym ol.ym-gang-leiste-liste { list-style: none !important; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luecke); }
.ym ol.ym-gang-leiste-liste li { list-style: none !important; margin: 0; padding: 0; display: flex; min-width: 0; }
.ym .ym-gang-leiste-name { min-width: 0; }
.ym .ym-gang-leiste-punkt {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 16px;
  background: #fff; color: var(--navy); font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; hyphens: none; overflow-wrap: normal; word-break: normal;
  transition: border-color .2s, transform .3s var(--ym-weich);
}
.ym a.ym-gang-leiste-punkt:hover { border-color: var(--g, var(--cyan)); transform: translateY(-2px); }
/* Gang-Leiste ohne Nummern (Jens 03.10.2026: Nummerierung wirkt wie KI-Muster); Farbpunkt des Gangs vor dem Namen */
.ym .ym-gang-leiste-punkt-farbe { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--g, var(--navy)); }
/* Aktive Kachel immer Navy (Jens 03.10.2026: Petrol von Gang 04 passte nicht); Gangfarbe nur als Akzent am Punkt */
.ym .ym-gang-leiste-aktiv { background: var(--navy); border-color: var(--navy); color: #fff; }
.ym .ym-gang-leiste-aktiv .ym-gang-leiste-punkt-farbe { background: var(--aqua); }
.ym .ym-gang-weiter { font-size: 17px; }

/* Gang-Seite: schlanker Einstieg unter dem Originaltext */
.ym .ym-gang-einstieg { padding: 0 0 var(--abstand-kopf); border-bottom: 1px solid var(--linie); margin-bottom: var(--abstand-kopf); }
.ym .ym-gang-einstieg .ym-marke-text { color: var(--g, var(--cyan-d)); margin-bottom: 10px; }
.ym .ym-gang-einstieg-titel { margin: 0; }
.ym .ym-gang-einstieg-text { margin: 12px 0 0; font-size: 17px; color: var(--grau); line-height: 1.55; max-width: 72ch; }
.ym .ym-gang-einstieg-suche { margin-top: 22px; }
.ym .ym-gang-seite .ym-vorschau, .ym .ym-gang-seite .ym-alle { margin-top: 0; }

/* ---------- Karten ---------- */
.ym .ym-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luecke); }
.ym .ym-raster.ym-drei, .ym .ym-raster.ym-sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ym .ym-karte {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--r-karte); overflow: hidden;
  transition: transform .35s var(--ym-weich), border-color .2s;
}
.ym .ym-karte:hover { transform: translateY(-3px); border-color: var(--cyan); }
.ym .ym-karte-gesperrt:hover { transform: none; border-color: var(--linie); }
.ym .ym-karte-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.ym .ym-karte-bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g, var(--navy)); }
.ym .ym-karte-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transition: transform .8s var(--ym-weich); }
.ym a.ym-karte-link:hover .ym-karte-bild img { transform: scale(1.05); }
.ym .ym-karte-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 22, 36, 0) 50%, rgba(12, 22, 36, .66)); }
.ym .ym-karte-gesperrt .ym-karte-bild::after { background: linear-gradient(180deg, rgba(12, 22, 36, .18), rgba(12, 22, 36, .7)); }
.ym .ym-karte-gang { display: none; }
.ym .ym-karte .ym-marke-text, .ym .ym-probe .ym-marke-text { font-size: 13px; letter-spacing: 0; }
.ym .ym-karte .ym-marke-text::before, .ym .ym-probe .ym-marke-text::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g, var(--navy)); margin-right: 7px; vertical-align: 1px; }
.ym .ym-marke {
  position: absolute; z-index: 2; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.4; border-radius: 999px; padding: 4px 10px;
}
.ym .ym-marke svg { width: 13px; height: 13px; }
.ym .ym-marke-statisch { position: static; align-self: flex-start; margin-bottom: auto; }
.ym .ym-schloss { position: absolute; z-index: 2; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); display: grid; place-items: center; }
.ym .ym-schloss svg { width: 20px; height: 20px; }
.ym .ym-dauer { position: absolute; z-index: 2; right: 12px; bottom: 10px; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
/* „Neu“: Auffüller in „Weiterschauen“, unten links; Format oben links und Dauer unten rechts bleiben frei */
.ym .ym-marke-neu { position: absolute; z-index: 2; left: 12px; bottom: 10px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; border-radius: 999px; padding: 3px 10px; }
.ym .ym-fortschritt {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; width: 100%; height: 4px; border: 0; margin: 0;
  background: rgba(255, 255, 255, .3); -webkit-appearance: none; appearance: none; color: var(--aqua);
}
.ym .ym-fortschritt::-webkit-progress-bar { background: rgba(255, 255, 255, .3); }
.ym .ym-fortschritt::-webkit-progress-value { background: var(--aqua); }
.ym .ym-fortschritt::-moz-progress-bar { background: var(--aqua); }
.ym .ym-karte-text { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 18px; flex: 1; }
.ym .ym-karte-titel { font-weight: 500; font-size: 16.5px; line-height: 1.3; color: var(--navy); letter-spacing: -.005em; }
.ym h3.ym-karte-titel { margin: 0; padding: 0; font-family: inherit; letter-spacing: -.005em; text-transform: none; }
.ym .ym-untertitel { font-size: 14px; color: var(--grau); }
.ym .ym-treffer { font-size: 13px; color: var(--cyan-d); font-weight: 600; }
.ym .ym-karte-coach { font-size: 13.5px; color: var(--grau); margin-top: auto; padding-top: 8px; }
.ym .ym-herz {
  position: absolute; z-index: 4; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--navy); padding: 0; transition: transform .18s var(--ym-weich);
}
.ym .ym-herz:active { transform: scale(.92); }
.ym .ym-herz svg { width: 20px; height: 20px; }
.ym .ym-herz[aria-pressed="true"] { color: var(--rot); }
.ym .ym-herz[aria-pressed="true"] path { fill: currentColor; }
.ym .ym-leer { background: #fff; border: 1px dashed var(--feldlinie); border-radius: var(--r-karte); padding: 36px 24px; text-align: center; color: var(--grau); margin: 0; }

/* ---------- Kostproben auf der Startseite ---------- */
.ym-kostproben .ym-proben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luecke); list-style: none; margin: 0; padding: 0; line-height: inherit; }
.ym-kostproben .ym-proben > .ym-probe { margin: 0; padding: 0; }
.ym .ym-probe { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; transition: transform .35s var(--ym-weich), border-color .2s; }
.ym .ym-probe:hover { transform: translateY(-3px); border-color: var(--cyan); }
.ym .ym-probe-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g, var(--navy)); display: block; }
.ym .ym-probe-bild > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transition: transform .8s var(--ym-weich); }
.ym .ym-probe:hover .ym-probe-bild > img { transform: scale(1.05); }
.ym .ym-probe-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 22, 36, .08), rgba(12, 22, 36, .62)); pointer-events: none; }
.ym .ym-probe-bild.ym-probe-laeuft::after, .ym .ym-probe-bild.ym-probe-laeuft .ym-probe-label, .ym .ym-probe-bild.ym-probe-laeuft .ym-dauer { display: none; }
.ym .ym-probe-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 3; }
.ym .ym-probe-bild audio { position: absolute; left: 12px; right: 12px; bottom: 12px; width: calc(100% - 24px); z-index: 3; }
.ym .ym-probe-label { position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--navy); font-size: 12px; font-weight: 600; letter-spacing: .04em; border-radius: 999px; padding: 6px 12px; }
.ym .ym-probe-label svg { width: 13px; height: 13px; }
.ym .ym-probe-play {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--navy); display: grid; place-items: center; padding: 0;
  text-decoration: none; transition: transform .25s var(--ym-weich), background-color .2s;
}
.ym .ym-probe-play:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.ym .ym-probe-play:active { transform: translate(-50%, -50%) scale(.96); }
.ym .ym-probe-play svg { width: 28px; height: 28px; margin-left: 2px; }
.ym .ym-probe-schloss svg { width: 24px; height: 24px; margin: 0; }
.ym .ym-probe-text { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.ym .ym-probe-titel { margin: 0; font-size: 19px; line-height: 1.25; color: var(--navy); letter-spacing: -.01em; font-weight: 500; }
.ym .ym-probe-titel a { text-decoration: none; }
.ym .ym-probe-titel a:hover { color: var(--cyan-d); }
.ym .ym-probe-auszug { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--grau); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ym .ym-proben-fuss { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin: var(--abstand-kopf) 0 0; color: var(--grau); font-size: 15px; }
.ym .ym-proben-fuss .ym-knopf { margin: 0; }

/* ---------- Ort: „Du bist in der Bibliothek“ ---------- */
.ym .ym-ort {
  display: flex; align-items: center; gap: 14px; background: var(--flaeche); color: var(--tinte); border-radius: 999px;
  padding: 8px 20px 8px 8px; margin: 0 0 var(--abstand-kopf); font-weight: 500; font-size: 16px; line-height: 1.25;
}
.ym .ym-ort img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.ym .ym-ort-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ym .ym-ort small { display: block; font-weight: 600; color: var(--g, var(--cyan-d)); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ym .ym-ort a { margin-left: auto; color: var(--navy); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.ym .ym-ort a:hover { color: var(--cyan-d); }

/* ---------- Beitrag ---------- */
.ym .ym-beitrag { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--abstand-kopf); align-items: start; }
.ym .ym-beitrag-seite { position: sticky; top: 110px; }
.ym .ym-spieler { background: #0C1624; border-radius: var(--r-gross); overflow: hidden; }
.ym .ym-spieler video { width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; object-fit: contain; }
/* Vor dem Start füllt das Vorschaubild die Fläche, oben ausgerichtet (keine schwarzen Balken) */
.ym .ym-spieler video[poster]:not(.ym-gestartet) { object-fit: cover; object-position: 50% 0%; }
/* YouTube und Vimeo: Zwei-Klick-Player */
.ym .ym-extern { position: relative; aspect-ratio: 16 / 9; background: var(--navy); color: #fff; }
.ym .ym-extern-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.ym .ym-extern-schicht { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px; padding: clamp(16px, 3vw, 28px); background: linear-gradient(180deg, rgba(12, 22, 36, .05) 30%, rgba(12, 22, 36, .82)); }
.ym .ym-extern-start { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 22px 8px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .15s cubic-bezier(.23, 1, .32, 1), background-color .2s; }
.ym .ym-extern-start:hover { background: var(--hell); }
.ym .ym-extern-start:active { transform: scale(.97); }
.ym .ym-extern-start:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.ym .ym-extern-play { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.ym .ym-extern-play svg { width: 18px; height: 18px; margin-left: 2px; }
.ym .ym-extern-hinweis { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.5; color: #fff; }
.ym .ym-extern-hinweis a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ym .ym-extern-hinweis a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.ym .ym-extern iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) { .ym .ym-extern { aspect-ratio: auto; min-height: 260px; } .ym .ym-extern-hinweis { font-size: 13px; } }
.ym .ym-spieler-leer { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--navy); color: #fff; padding: 24px; text-align: center; }
.ym .ym-spieler-leer-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; opacity: .12; }
.ym .ym-spieler-leer-inhalt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ym .ym-spieler-leer-zeichen { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--aqua); display: grid; place-items: center; }
.ym .ym-spieler-leer-zeichen svg { width: 28px; height: 28px; }
.ym .ym-spieler-leer p { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.35; color: #fff; }
.ym .ym-gang-link { margin: 20px 0 0; font-size: 16px; }
.ym .ym-audio { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; }
.ym .ym-audio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.ym .ym-audio::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(37, 56, 93, .15), rgba(12, 22, 36, .9)); }
.ym .ym-audio > *:not(img) { position: relative; z-index: 2; }
.ym .ym-audio-titel { font-weight: 500; font-size: 22px; line-height: 1.3; margin-bottom: 12px; letter-spacing: -.01em; }
.ym .ym-audio audio { width: 100%; }
.ym .ym-fortsetzen {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--hell); border-radius: var(--r-klein); padding: 12px 18px; margin-top: 16px; font-size: 15px;
}
.ym .ym-beitrag-kopf { margin-top: 28px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ym .ym-beitrag-titel { margin: 0; font-size: clamp(28px, 1.8vw + 14px, 40px); }
.ym .ym-beitrag-meta { margin: 8px 0 0; font-size: 15px; font-weight: 400; color: var(--grau); }
.ym .ym-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.ym .ym-vorspann-klein { font-size: 18px; font-weight: 400; margin: 20px 0 0; line-height: 1.5; }
.ym .ym-beschreibung { margin-top: 16px; }
.ym .ym-beschreibung p { margin: 0 0 12px; }
.ym .ym-auch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ym .ym-sprecher { display: flex; flex-direction: column; gap: 14px; }
.ym .ym-sprecher > div { display: flex; gap: 14px; align-items: center; }
.ym .ym-coach-mini b { display: block; color: var(--navy); }
.ym .ym-coach-mini span span { font-size: 14px; color: var(--grau); }
.ym .ym-rund { display: block; border-radius: 50%; overflow: hidden; flex: none; background: var(--navy); width: 56px; height: 56px; }
.ym .ym-rund img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.ym .ym-rund-64 { width: 64px; height: 64px; }
.ym .ym-rund-48 { width: 48px; height: 48px; }
.ym .ym-rund-gast { display: grid; place-items: center; background: var(--aqua); color: var(--navy); font-weight: 600; font-size: 20px; line-height: 1; }

/* Personen (Coaches und Gäste): rundes Foto oder Initialen auf Navy-Tönung */
.ym .ym-person-rund { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #E3E8F0; color: var(--navy); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: .02em; }
.ym .ym-person-rund img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 50% 0%; }
.ym .ym-pr-28 { width: 28px; height: 28px; font-size: 10.5px; }
.ym .ym-pr-48 { width: 48px; height: 48px; font-size: 17px; }
.ym .ym-pr-56 { width: 56px; height: 56px; font-size: 19px; }
.ym .ym-karte-coach { display: flex; align-items: center; gap: 8px; }
.ym .ym-avatare { display: inline-flex; flex: none; }
.ym .ym-avatare .ym-person-rund { border: 2px solid #fff; }
.ym .ym-avatare .ym-person-rund + .ym-person-rund { margin-left: -8px; }
.ym .ym-avatare-mehr { font-size: 10.5px; letter-spacing: 0; }
.ym h2.ym-gespraech-titel { margin: 0 0 16px; padding: 0; text-align: left; font-family: inherit; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; text-transform: none; color: var(--navy); }
.ym .ym-gespraech-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ym .ym-gespraech-person { margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ym .ym-gespraech-text { min-width: 0; }
.ym .ym-gespraech-name { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--navy); }
.ym .ym-gespraech-zeile { display: block; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--grau); }

/* Reihe: eine Zeile je Folge, Formate als Symbole (keine Nummern) */
.ym ul.ym-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ym .ym-reihe-folge { margin: 0; padding: 4px 4px 4px 10px; display: flex; align-items: center; gap: 8px; border-radius: var(--r-klein); min-height: 44px; }
.ym .ym-reihe-folge.ym-reihe-hier { background: var(--hell); }
.ym a.ym-reihe-titel { flex: 1; min-width: 0; padding: 8px 0; font-size: 15px; line-height: 1.35; color: var(--navy); text-decoration: none; }
.ym a.ym-reihe-titel:hover { text-decoration: underline; text-underline-offset: 3px; }
.ym a.ym-reihe-titel[aria-current="page"] { font-weight: 600; }
.ym .ym-reihe-formate { display: inline-flex; gap: 4px; flex: none; }
.ym a.ym-reihe-format { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--grau); text-decoration: none; transition: background-color .15s, color .15s; }
.ym a.ym-reihe-format svg { width: 16px; height: 16px; }
.ym a.ym-reihe-format:hover { background: var(--flaeche); color: var(--navy); }
.ym a.ym-reihe-format[aria-current="page"], .ym a.ym-reihe-format.ym-reihe-format-hier { background: var(--navy); color: #fff; }
.ym a.ym-reihe-format:focus-visible, .ym a.ym-reihe-titel:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 767px) { .ym a.ym-reihe-format { width: 44px; height: 44px; } }

/* Rechte Spalte: „Mehr zu …“ als kurze Liste */
.ym ul.ym-mehr-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ym .ym-mehr-liste li { margin: 0; padding: 0; }
.ym .ym-mehr-liste a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: var(--r-klein); text-decoration: none; color: var(--tinte); }
.ym .ym-mehr-liste a:hover { background: var(--flaeche); }
.ym .ym-mehr-liste a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 0; }
.ym .ym-mehr-bild { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--navy); }
.ym .ym-mehr-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.ym .ym-mehr-text { min-width: 0; }
.ym .ym-mehr-titel { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--navy); }
.ym .ym-mehr-zeile { display: block; font-size: 14px; line-height: 1.4; color: var(--grau); margin-top: 2px; }
.ym .ym-mehr-alle { margin: 14px 0 0; font-size: 15px; }

/* Abschnittskopf mit Link rechts („Alle Inhalte in …“) */
.ym .ym-abschnitt-kopf-link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.ym .ym-abschnitt-kopf-link .ym-textlink { font-size: 16px; }

/* Transkript mit Zeitmarken */
.ym .ym-ts-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ym .ym-ts-kopf .ym-h2 { margin: 0; }
.ym .ym-transkript { max-height: 420px; overflow: auto; }
.ym .ym-transkript li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-radius: 10px; margin: 0; min-height: 44px; align-items: start; }
.ym .ym-transkript li.ym-aktiv { background: var(--hell); }
.ym .ym-transkript button {
  background: none; border: 0; padding: 8px 0; color: var(--cyan-d); font-weight: 600; font-size: 14px;
  text-align: left; font-variant-numeric: tabular-nums; align-self: start; min-height: 44px; line-height: 1.4;
}
.ym .ym-transkript p { margin: 0; padding: 10px 0 8px; font-size: 15px; line-height: 1.5; }

/* ---------- Interview zum Lesen ---------- */
.ym .ym-lesen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--abstand-kopf); align-items: start; }
.ym .ym-interview { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: clamp(24px, 4vw, 56px); font-size: 18px; line-height: 1.75; }
.ym .ym-interview .ym-h1 { margin: 10px 0 14px; font-size: clamp(28px, 1.8vw + 14px, 40px); }
.ym .ym-interview .ym-unter { margin: -6px 0 18px; }
.ym .ym-vorspann { font-size: 20px; line-height: 1.6; color: var(--tinte); font-weight: 400; margin: 0 0 30px; }
.ym .ym-wechsel { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; margin: 0 0 28px; }
.ym .ym-wechsel p { margin: 0 0 10px; }
.ym .ym-wechsel p:last-child { margin-bottom: 0; }
.ym .ym-wechsel.ym-frage p { font-weight: 500; color: var(--navy); }
.ym .ym-wer { display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-d); margin-bottom: 4px; }
.ym .ym-frage-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--hell); color: var(--navy); display: grid; place-items: center; font-weight: 600; font-size: 22px; }
.ym .ym-absatz { margin: 0 0 26px; }
.ym .ym-absatz p { margin: 0 0 10px; }
.ym .ym-lesen-seite { position: sticky; top: 110px; display: flex; flex-direction: column; gap: var(--luecke); }
.ym .ym-lesen-seite .ym-seite-karte + .ym-seite-karte { margin-top: 0; }

/* ---------- Konto ---------- */
.ym .ym-konto-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--abstand-kopf); align-items: start; margin-top: 0; }
.ym .ym-konto-nav { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 4px; background: var(--flaeche); border-radius: var(--r-karte); padding: 10px; }
.ym .ym-konto-nav a { text-decoration: none; padding: 11px 14px; border-radius: var(--r-klein); font-weight: 600; color: var(--navy); min-height: 44px; display: flex; align-items: center; }
.ym .ym-konto-nav a:hover { background: #fff; }
.ym .ym-konto-teile { display: flex; flex-direction: column; gap: var(--luecke); }
.ym .ym-konto-teile .ym-seite-karte + .ym-seite-karte { margin-top: 0; }
.ym .ym-konto-teil { scroll-margin-top: 110px; }
.ym .ym-konto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--luecke); align-items: stretch; }
.ym .ym-konto .ym-seite-karte + .ym-seite-karte { margin-top: 0; }
.ym .ym-konto dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; font-size: 15px; }
.ym .ym-konto dt { color: var(--grau); }
.ym .ym-konto dd { margin: 0; font-weight: 600; }
.ym .ym-schalter { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie-fein); font-size: 15px; min-height: 48px; }
.ym .ym-schalter input { width: 22px; height: 22px; flex: none; accent-color: var(--cyan); }
.ym form .ym-knopf { margin-top: 18px; }

/* ---------- Breitenstufen ---------- */
@media (max-width: 980px) {
  .ym { --abstand-block: 72px; --abstand-eng: 72px; --abstand-kopf: 32px; --luecke: 20px; }
}
@media (max-width: 767px) {
  .ym { --abstand-block: 56px; --abstand-eng: 56px; --abstand-kopf: 24px; --luecke: 16px; }
}
@media (max-width: 1180px) {
  .ym .ym-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ym .ym-raster.ym-drei, .ym .ym-raster.ym-sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ym .ym-gaenge2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ym .ym-gaenge2-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ym .ym-beitrag, .ym .ym-lesen { grid-template-columns: minmax(0, 1fr); }
  .ym .ym-lesen-seite, .ym .ym-beitrag-seite { position: static; }
  .ym .ym-gang2-titel b { font-size: 19px; }
  .ym .ym-gang2-titel i { font-size: 16px; }
}
/* Gast-Hinweis: Knöpfe unter den Text, sobald der Text daneben unter 40 Zeichen pro Zeile fällt */
@media (max-width: 1100px) {
  .ym .ym-gast-karte { grid-template-columns: auto minmax(0, 1fr); }
  .ym .ym-gast-karte .ym-knoepfe { grid-column: 1 / -1; flex-wrap: wrap; }
}
/* Abschnittskopf mit Text, 901 bis 1099 px: Titelspalte breiter, damit „Ein Blick in dieses Thema“
   einzeilig bleibt (Kritik R13, N32: bei 981 px stand „Thema“ allein in Zeile 2, Spalte 307 px). */
@media (min-width: 901px) and (max-width: 1099px) {
  .ym .ym-abschnitt-kopf-mit-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 40px; }
}
@media (max-width: 900px) {
  .ym .ym-fragen-spalten > ul.ym-fragen-liste { columns: 1; }
  .ym .ym-fragen-vorschau, .ym ul.ym-fragen-punkt-liste { grid-template-columns: minmax(0, 1fr); }
  .ym .ym-raster, .ym .ym-raster.ym-sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ym .ym-raster.ym-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ym .ym-formate3, .ym .ym-felder, .ym .ym-zweispaltig, .ym .ym-konto, .ym .ym-konto-grid, .ym .ym-abschnitt-kopf-mit-text { grid-template-columns: minmax(0, 1fr); }
  .ym .ym-abschnitt-kopf-mit-text { gap: 8px; }
  .ym .ym-abschnitt-kopf-mit-text p { margin: 0; }
  .ym .ym-zweispaltig > aside { position: static; }
  .ym .ym-format-kachel { min-height: 0; padding: 18px 20px; }
  .ym .ym-konto-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .ym .ym-suche { max-width: none; }
  .ym .ym-filter-reihe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ym .ym-filter-reihe::-webkit-scrollbar { display: none; }
  .ym .ym-chip { flex: none; }
  .ym .ym-live { left: 0; right: auto; width: 100%; }
  .ym .ym-hero-zeichen { right: -8%; opacity: .12; }
  .ym .ym-hero-inhalt { max-width: 560px; }
  /* Kostproben ohne Wischen: eine Spalte, Bild links neben dem Text */
  .ym-kostproben .ym-proben { grid-template-columns: minmax(0, 1fr); }
  .ym.ym-kostproben .ym-probe { flex-direction: row; }
  .ym.ym-kostproben .ym-probe-bild { flex: 0 0 42%; aspect-ratio: auto; min-height: 220px; }
  .ym.ym-kostproben .ym-probe-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
  .ym .ym-proben-fuss > span { flex-basis: 100%; text-align: center; }
}
@media (max-width: 700px) {
  .ym .ym-gaenge2, .ym .ym-gaenge2-drei { grid-template-columns: minmax(0, 1fr); }
  .ym .ym-raster.ym-drei { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ym ul.ym-start-themen { grid-template-columns: minmax(0, 1fr); }
  .ym ul.ym-fragekarten { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ym ul.ym-fragekarten li.ym-fragekarte { flex-direction: row; align-items: flex-start; padding: 14px 16px; font-size: 16px; }
  .ym .ym-fragen-punkt { padding: 22px 20px 24px; }
  .ym ul.ym-fragen-punkt-liste li { font-size: 18px; }
  .ym .ym-gang2-unten { padding: 12px 16px 16px; }
  .ym .ym-gang-hoeren { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  /* Eine Spalte, Bild oben in voller Breite (16:10, Köpfe bleiben oben im Bild), nie hochkant beschnitten */
  .ym .ym-raster, .ym .ym-raster.ym-drei, .ym .ym-raster.ym-sechs { grid-template-columns: minmax(0, 1fr); }
  .ym .ym-karte-text { padding: 14px 16px 16px; gap: 4px; }
  .ym .ym-karte-titel { font-size: 16px; }
  .ym .ym-hero { padding: 26px 22px 28px; min-height: 0; }
  .ym .ym-hero-zeichen { width: 150px; right: -36px; top: 18%; transform: none; opacity: .12; }
  .ym .ym-hero-suche { margin-top: 22px; }
  .ym .ym-gast-karte { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 20px; }
  .ym .ym-gast-ikon { width: 48px; height: 48px; }
  .ym .ym-gast-karte .ym-knoepfe .ym-knopf { flex: 1 1 auto; }
  .ym .ym-interview { font-size: 17px; }
  .ym .ym-wechsel { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .ym .ym-wechsel .ym-rund, .ym .ym-frage-icon { width: 44px; height: 44px; }
  .ym .ym-ort { flex-wrap: wrap; border-radius: 20px; padding: 10px 16px 12px 10px; row-gap: 4px; }
  .ym .ym-ort a { margin-left: 62px; min-height: 44px; display: inline-flex; align-items: center; }
  .ym .ym-format-zahl b { font-size: 28px; }
  .ym .ym-seite-karte { padding: 20px; }
  .ym .ym-formular-seite .ym-zweispaltig > div:first-child, .ym .ym-anmelden-form { padding: 22px 20px; }
  .ym .ym-gang2-titel { padding: 0 16px 14px; }
  .ym .ym-gang2-inhalt { padding: 14px 16px 16px; }
  .ym .ym-probe-text { padding: 16px 18px 18px; }
  .ym.ym-kostproben .ym-probe { flex-direction: column; }
  .ym.ym-kostproben .ym-probe-bild { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .ym.ym-kostproben .ym-probe-bild img { position: static; }
}
@media (max-width: 400px) {
  .ym .ym-felder { gap: 0; }
  .ym .ym-knoepfe .ym-knopf { flex: 1 1 100%; }
  .ym .ym-gast-karte .ym-knoepfe { flex-direction: column; align-items: stretch; }
}

/* Gang-Leiste (03.10.2026): zwei Spalten bis 1024 px, unter 480 px eine Spalte (zwei Spalten ergäben dort ein Wort je Zeile).
   Kacheln einer Reihe gleich hoch (Raster dehnt, Inhalt mittig). Umbruch nur an Wortgrenzen und nach „/“ (<wbr> aus PHP). */
@media (max-width: 1024px) {
  .ym ol.ym-gang-leiste-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ym .ym-gang-leiste-punkt { font-size: 14px; padding: 10px 14px; gap: 10px; min-height: 56px; }
}
@media (max-width: 480px) {
  .ym ol.ym-gang-leiste-liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ym .ym-gang-leiste-punkt { min-height: 56px; }
}


/* ---------- Hover-Bewegung nur mit Maus (Finger kennt kein Hover) ---------- */
@media (hover: none), (pointer: coarse) {
  .ym .ym-karte:hover, .ym a.ym-gang2:hover, .ym .ym-format-kachel:hover, .ym .ym-probe:hover, .ym a.ym-gang-leiste-punkt:hover { transform: none; }
  .ym a.ym-gang2:hover .ym-gang2-bild img, .ym a.ym-karte-link:hover .ym-karte-bild img, .ym .ym-probe:hover .ym-probe-bild > img { transform: none; }
  .ym .ym-probe-play:hover { transform: translate(-50%, -50%); }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .ym .ym-karte, .ym .ym-gang2, .ym .ym-gang2-bild img, .ym .ym-karte-bild img, .ym .ym-probe-bild > img, .ym .ym-format-kachel, .ym .ym-knopf, .ym .ym-probe, .ym .ym-probe-play, .ym .ym-gang2-pfeil, .ym .ym-herz { transition: none; }
  .ym .ym-karte:hover, .ym a.ym-gang2:hover, .ym .ym-format-kachel:hover, .ym .ym-probe:hover { transform: none; }
  .ym a.ym-gang2:hover .ym-gang2-bild img, .ym a.ym-karte-link:hover .ym-karte-bild img, .ym .ym-probe:hover .ym-probe-bild > img { transform: none; }
  .ym a.ym-gang2:hover .ym-gang2-pfeil { transform: none; }
  .ym-kostproben .ym-proben { scroll-behavior: auto; }
  .ym div.ym-gang2-hoeren:has(.ym-gang2-link:hover), .ym div.ym-gang2-hoeren:has(.ym-gang2-link:hover) .ym-gang2-bild img { transform: none; }
  .ym .ym-hoeren-knopf { transition: none; }
}

/* ---------- Drucken (Interview, Kündigungsbestätigung) ---------- */
@media print {
  .ym .ym-lesen-seite, .ym .ym-krumen-nav, .ym .ym-ort, .ym [data-ym-drucken], .ym .ym-zweispaltig > aside, .ym .ym-hero-flaeche { display: none !important; }
  .ym .ym-lesen, .ym .ym-zweispaltig { display: block; }
  .ym .ym-interview { border: 0; padding: 0; }
}

/* ---------- Angebotsseite aus WordPress-Kernblöcken (.ym-angebote) ---------- */
.ym-angebote .ym-angebote-spalten { gap: 24px; align-items: stretch; margin-top: 40px; }
.ym-angebote .ym-angebot {
  display: flex; flex-direction: column; gap: 12px; background: #fff; color: #19333E;
  border: 1px solid #DCE4EA; border-radius: 24px; padding: 32px; box-shadow: none;
}
.ym-angebote .ym-angebot > * { margin-top: 0; margin-bottom: 0; }
.ym-angebote .ym-angebot h2 { color: #25385D; margin: 0; padding: 0; letter-spacing: -.01em; }
.ym-angebote .ym-marke { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #0877AB; margin: 0; padding: 0; }
.ym-angebote .ym-preis { font-size: 34px; font-weight: 500; line-height: 1.1; color: #25385D; margin: 0; padding: 0; letter-spacing: -.02em; }
.ym-angebote .ym-angebot ul { margin: 0; padding-left: 20px; }
.ym-angebote .ym-angebot ul li { margin: 0 0 6px; }
.ym-angebote .ym-angebot .wp-block-buttons { margin-top: auto; padding-top: 8px; }
/* Hinweiszeile über dem Knopf (vor/nach der Eröffnung) rückt mit dem Knopf nach unten. */
.ym-angebote .ym-angebot .ym-start-bestand { margin: auto 0 0; padding-top: 16px; }
.ym-angebote .ym-angebot .ym-start-bestand + .wp-block-buttons { margin-top: 0; }
.ym-angebote .ym-angebot .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #25385D; color: #fff;
  font-weight: 600; padding: 12px 26px; min-height: 48px; text-decoration: none; border: 0;
}
.ym-angebote .ym-angebot .wp-block-button__link:hover { background: #1C2C4A; color: #fff; }
.ym-angebote .ym-angebot .wp-block-button__link:focus-visible { outline: 3px solid #0A89C5; outline-offset: 3px; }
.ym-angebote .ym-angebot:nth-child(2) { background: #25385D; border-color: #25385D; color: #fff; }
.ym-angebote .ym-angebot:nth-child(2) h2,
.ym-angebote .ym-angebot:nth-child(2) .ym-preis,
.ym-angebote .ym-angebot:nth-child(2) li,
.ym-angebote .ym-angebot:nth-child(2) p { color: #fff; }
.ym-angebote .ym-angebot:nth-child(2) .ym-marke { color: #7FD8DC; }
.ym-angebote .ym-angebot:nth-child(2) .wp-block-button__link { background: #7FD8DC; color: #25385D; }
.ym-angebote .ym-angebot:nth-child(2) .wp-block-button__link:hover { background: #fff; color: #25385D; }
.ym-angebote .ym-angebot:nth-child(2) .wp-block-button__link:focus-visible { outline-color: #7FD8DC; }
.ym-angebote .ym-angebot a:not(.wp-block-button__link):not(.ym-knopf) { color: #0877AB; font-weight: 600; text-underline-offset: 3px; }
.ym-angebote .ym-angebot:nth-child(2) a:not(.wp-block-button__link) { color: #7FD8DC; }
/* Drei Angebote: nebeneinander erst, wenn jede Karte breit genug ist, sonst untereinander */
@media (max-width: 1100px) {
  .ym-angebote .ym-angebote-spalten { flex-direction: column; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot { flex-basis: 100% !important; width: 100%; }
}
@media (max-width: 560px) {
  .ym-angebote .ym-angebot { padding: 24px 20px; }
  .ym-angebote .ym-preis { font-size: clamp(24px, 7vw, 30px); line-height: 1.15; }
}
/* Kritik R14 F4: Preiszeilen nie mitten im Wort brechen (break-word erbte die Zeile aus der Karte,
   bei 1180 stand „erfolgsbezoge / n“). Der Textpreis der Firmenkarte ist ein Satz, keine Zahl:
   in drei Spalten kleiner, damit „erfolgsbezogen,“ in die Zeile passt (1101 bis 1440: 2 Zeilen). */
.ym-angebote .ym-preis { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ym-angebote .ym-preis-zusatz { margin: 6px 0 0; padding: 0; font-size: 15px; line-height: 1.45; color: var(--grau, #5B6B7A); }
@media (min-width: 1101px) {
  .ym-angebote .ym-angebot:nth-child(3) .ym-preis { font-size: clamp(20px, 1.75vw, 26px); line-height: 1.2; }
}

/* Schrift-Skala (Jens 03.10.2026): Kopf 700, Überschriften/Titel 500, Bedienung und Marken 600, Text 400 */
.ym .ym-h1 { font-weight: 700; }

/* Spaltenzahl nach Anzahl (ym_raster_spalten): nie eine Karte allein in der letzten Reihe.
   Steht am Ende, damit es die allgemeinen Raster-Regeln derselben Breite sticht. */
@media (min-width: 1181px) {
  .ym .ym-raster.ym-w2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ym .ym-raster.ym-w3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .ym .ym-raster.ym-m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ym .ym-raster.ym-m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 900px) {
  .ym .ym-raster.ym-s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ym .ym-raster.ym-s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Themen-Seiten am Handy: H1 (Divi-Kopf) 30 px, die H2 „Inhalte in …“ höchstens
   23 px, damit das Verhältnis mindestens 1,30 ist (gemessen 03.10.2026: 30/24 = 1,25). */
@media (max-width: 600px) {
  .ym .ym-h2.ym-gang-einstieg-titel { font-size: 23px; }
}

/* =========================================================
   Zustände Runde 2 (03.10.2026). Steht am Ende, damit die Regeln
   die allgemeinen Breitenstufen gleicher Spezifität stechen.
   ========================================================= */

/* Eine Hauptfarbe, feste Rangfolge: „Mitglied werden“ Navy gefüllt (Weiß auf Navy 11,6:1),
   „Anmelden“ als Rand-Knopf (.ym-knopf-rand). */
.ym .ym-knopf-haupt { background: var(--navy); border-color: var(--navy); color: #fff; }
.ym .ym-knopf-haupt:hover { background: var(--navy-tief); border-color: var(--navy-tief); color: #fff; }

/* Helle Karte (Einblick, „Noch kein Zugang?“): trägt den Navy-Knopf sichtbar */
.ym .ym-karte-hell { background: var(--hell); border-color: var(--hell); color: var(--tinte); }
.ym .ym-karte-hell .ym-h2 { color: var(--navy); margin: 0 0 10px; }
.ym .ym-karte-hell p { color: var(--tinte); }
.ym .ym-karte-hell .ym-klein { color: #3E4A55; }
.ym .ym-karte-hell .ym-textlink { color: var(--navy); }
.ym .ym-karte-hell .ym-textlink:hover { color: var(--navy-tief); text-decoration-thickness: 2px; }

/* Schloss auf gesperrten Karten: kleines Abzeichen oben rechts, nie über Gesichtern */
.ym .ym-schloss { left: auto; right: 12px; top: 12px; width: 30px; height: 30px; transform: none; }
.ym .ym-schloss svg { width: 15px; height: 15px; }

/* Kicker ohne Großbuchstaben (R1-Beschluss): „Inhalte“ in den Format-Kacheln */
.ym .ym-format-zahl small { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Reihe: gesperrte Folgen für Gäste mit kleinem Schloss */
.ym .ym-reihe-schloss { display: inline-block; margin-left: 6px; color: var(--grau); vertical-align: -2px; }
.ym .ym-reihe-schloss svg { width: 14px; height: 14px; display: block; }
/* Kritik R18 N9: Schloss an der Stelle der Formatknöpfe, eine Spalte breit */
.ym .ym-reihe-zu { width: 40px; height: 40px; display: grid; place-items: center; }
.ym .ym-reihe-zu .ym-reihe-schloss { margin: 0; }
.ym .ym-reihe-zu .ym-reihe-schloss svg { width: 16px; height: 16px; }

/* Einzelansicht 600 bis 1180 (eine Spalte): Seitenkarten paarweise nebeneinander, eine
   übrig bleibende Karte und das Transkript in voller Breite. Vorher stand „Im Gespräch“
   944 px breit mit einer Person und 700 px Leere (Kritik 03.10.2026). Zweispaltig bei
   1024 ließ links bis zu 500 px leer, weil die Seitenspalte schmal und lang wurde. */
@media (min-width: 600px) and (max-width: 1180px) {
  .ym .ym-beitrag-seite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luecke); align-items: stretch; }
  .ym .ym-beitrag-seite > .ym-seite-karte { margin-top: 0; }
  .ym .ym-beitrag-seite > .ym-ts-karte,
  .ym .ym-beitrag-seite > .ym-seite-karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Einblick braucht mehr Breite (Text und zwei Knöpfe), „Im Gespräch“ weniger */
  .ym .ym-beitrag-seite:has(> .ym-einblick-karte) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  /* Gedehnte Gesprächs-Karte: Inhalt mittig statt oben mit Leere darunter */
  .ym .ym-beitrag-seite > .ym-gespraech { display: flex; flex-direction: column; justify-content: center; }
}

/* /anmelden/: beide Karten oben bündig (die zweite erbte den Abstand von
   .ym-seite-karte + .ym-seite-karte), Ziele am Handy mindestens 44 px */
.ym .ym-anmelden.ym-zweispaltig > .ym-seite-karte { margin-top: 0; }
.ym .ym-anmelden.ym-zweispaltig > aside { position: static; }
.ym .ym-anmelden .ym-zeile { margin-top: 16px; }
.ym .ym-anmelden .ym-zeile .ym-textlink,
.ym .ym-anmelden .ym-klein .ym-textlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }
.ym .ym-anmelden .ym-klein { margin-top: 8px; }

/* Abschnitt „Weitermachen“ als Sprungziel unter der festen Kopfzeile */
.ym [id="weiter"] { scroll-margin-top: 120px; }

/* ---------- 404-Seite (includes/fehlerseite.php) ---------- */
/* Fuß sitzt unten, auch wenn der Inhalt kürzer ist als der Bildschirm (kein Weiß-Loch) */
body.error404 #et-main-area { display: flex; flex-direction: column; min-height: calc(100vh - 104px); }
body.error404 #et-main-area > #main-content { flex: 1 0 auto; }
@media (max-width: 980px) { body.error404 #et-main-area { min-height: calc(100vh - 83px); } }
.ym-fehler-haupt { background: #fff; }
.ym-fehler-haupt > .container { padding: 40px 0 var(--ym-fehler-unten, 96px); }
.ym.ym-fehlerseite .ym-fehler-kopf { min-height: 280px; align-items: center; overflow: hidden; border-radius: var(--r-gross); margin-bottom: 72px; }
.ym.ym-fehlerseite .ym-fehler-kopf .ym-hero-flaeche { border-radius: var(--r-gross); }
.ym.ym-fehlerseite .ym-fehler-kopf .ym-h1 { margin: 0; font-size: clamp(30px, 1.6vw + 18px, 44px); line-height: 1.12; }
/* Signatur: die Zahl als feine Aqua-Kontur, ruhig, rechts in der Fläche */
.ym .ym-fehler-zahl {
  position: absolute; z-index: 0; right: clamp(24px, 5vw, 72px); top: 50%; transform: translateY(-50%);
  font-size: clamp(110px, 12.5vw, 190px); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(127, 216, 220, .6); pointer-events: none; user-select: none;
}
.ym.ym-fehlerseite .ym-hero-inhalt { max-width: none; flex: 1 1 auto; padding-right: calc(1.6 * clamp(110px, 12.5vw, 190px) + 32px); }
.ym .ym-fehler-themen .ym-abschnitt-kopf { margin-bottom: var(--abstand-kopf); }
.ym .ym-fehler-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--linie); }
.ym .ym-fehler-links-titel { font-size: 15px; color: var(--grau); }
.ym .ym-fehler-links ul { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.ym .ym-fehler-links li { list-style: none !important; margin: 0; padding: 0; }
.ym .ym-fehler-links .ym-textlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }
@media (max-width: 767px) {
  .ym-fehler-haupt > .container { padding-top: 24px; --ym-fehler-unten: 56px; }
  .ym.ym-fehlerseite .ym-fehler-kopf { flex-direction: column; align-items: flex-start; min-height: 0; margin-bottom: 48px; }
  .ym .ym-fehler-zahl { position: relative; right: auto; top: auto; transform: none; font-size: 84px; margin: 0 0 14px; }
  .ym.ym-fehlerseite .ym-hero-inhalt { max-width: none; padding-right: 0; }
  .ym .ym-fehler-links { margin-top: 40px; }
}

/* Zwei-Klick am Handy: Hinweis und Knopf als dunkler Streifen unter dem Bild,
   das Vorschaubild bleibt ganz sichtbar (Kritik 03.10.2026: Hinweis deckte das halbe Bild) */
@media (max-width: 600px) {
  .ym .ym-extern:not(.ym-extern-offen) { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; }
  .ym .ym-extern:not(.ym-extern-offen) .ym-extern-bild { position: relative; inset: auto; aspect-ratio: 16 / 9; height: auto; }
  .ym .ym-extern:not(.ym-extern-offen) .ym-extern-schicht { position: relative; inset: auto; background: var(--navy); padding: 16px 18px 18px; gap: 12px; }
  .ym .ym-extern-hinweis { font-size: 14px; }
  .ym .ym-extern.ym-extern-offen { aspect-ratio: 16 / 9; min-height: 0; }
}

/* Anmelde-Formular: Absenden ebenfalls in der einen Hauptfarbe Navy */
.ym .ym-anmelden-form .login-submit input[type="submit"] { background: var(--navy); }
.ym .ym-anmelden-form .login-submit input[type="submit"]:hover { background: var(--navy-tief); }

/* Schrift der Bibliotheksbereiche selbst setzen: Divi lädt seine Grundstile (Schriftart
   des Body) erst nach dem ersten Bild nach (divi-dynamic-css, asynchron). Bis dahin
   standen die Bereiche in Times, danach in Open Sans, Brotkrumen und Listen brachen
   anders um (gemessen: Einzelansicht 390 px CLS 0,074, 1440 px 0,026). Die Datei mit
   @font-face (lokal, OMGF) lädt vorher und blockierend, Open Sans steht also bereit. */
.ym { font-family: var(--et_global_body_font, 'Open Sans'), 'Open Sans', 'Segoe UI', Arial, sans-serif; }
/* Hochzählende Zahl in den Format-Kacheln: Platz für drei Ziffern von Anfang an,
   sonst bricht der Text daneben während des Zählens um (gemessen CLS 0,013 bei 390 px) */
.ym .ym-format-zahl b { display: inline-block; min-width: 3ch; }

/* Abschnitt unter dem Kopf der Themen-Seiten und der Bibliothek: Abstand 96/72/56 schon
   im Plugin-CSS, damit er beim ersten Aufruf nach leerem Divi-Cache nicht von Divis 4 %
   auf 96 px springt (Kritik Kopf R11). Nur Abschnitte mit dieser Klasse. */
.ym-bibliothek-abschnitt.et_pb_section { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 980px) {
  .ym-bibliothek-abschnitt.et_pb_section { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 767px) {
  .ym-bibliothek-abschnitt.et_pb_section { padding-top: 56px; padding-bottom: 56px; }
}

/* Format-Kacheln (N25, N26): Zahl unter dem Text in allen dreispaltigen Breiten.
   Bis 0.1.107 galt das nur bis 1070 px Rasterbreite; darüber kam die Querform zurück
   (Zahl als dritte Spalte) und der Text schrumpfte bei 1340 bis 1535 px auf 141 bis 171 px,
   Titel nebeneinanderliegender Kacheln standen bis 11 px versetzt (Kritik R13, N26).
   Jetzt ohne obere Grenze: Textspalte wächst mit der Kachel, Titel stehen oben auf einer Linie.
   Einspaltig (bis 900 px) unberührt. */
.ym .ym-formate3 { container: ym-formate / inline-size; }
@media (min-width: 901px) {
  .ym .ym-format-kachel { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; column-gap: 16px; row-gap: 10px; grid-template-rows: auto 1fr; padding: 20px; }
  .ym .ym-format-kachel .ym-format-ikon { width: 48px; height: 48px; border-radius: 14px; }
  .ym .ym-format-kachel .ym-format-ikon { grid-row: 1 / span 2; }
  .ym .ym-format-kachel .ym-format-zahl { grid-column: 2; align-self: end; margin-left: 0; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .ym .ym-format-kachel .ym-format-zahl b { font-size: 28px; }
  .ym .ym-format-kachel .ym-format-zahl small { margin-top: 0; }
}

/* Raster links/rechts (Messung 04.10.2026, pruefung/raster-lr.md) */
/* Ursache 4: Zeilen der Reihe in der Einzelansicht links und rechts gleich weit vom Rand
   (vorher 10 / 4 px, Titel saß 6 px aus der Mitte) */
.ym .ym-reihe-folge { padding: 4px 10px; }
/* Ursache 3: Format-Kacheln bei 320 px, Text war 114 px breit in 98 px Box. Unter 361 px
   Symbol, Lücke und Innenabstand kleiner, Titel 18 px; keine Silbentrennung. */
@media (max-width: 360px) {
  .ym .ym-format-kachel { gap: 12px; padding: 16px; }
  .ym .ym-format-ikon { width: 44px; height: 44px; border-radius: 12px; }
  .ym .ym-format-kachel b { font-size: 18px; }
  .ym .ym-format-zahl b { font-size: 28px; }
}
/* Kleinigkeiten: Brotkrumen der Einzelansicht bis 600 px in einer Zeile, der letzte Eintrag
   (Titel, steht ohnehin als Überschrift darunter) wird mit … gekürzt statt allein umzubrechen.
   404-Linkzeile bis 600 px untereinander statt 3 + 1. */
@media (max-width: 600px) {
  .ym .ym-krumen { flex-wrap: nowrap; }
  .ym .ym-krumen li { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ym .ym-krumen li:last-child { flex-shrink: 999; min-width: 3em; }
  .ym .ym-fehler-links ul { flex-direction: column; gap: 0; }
}
/* Kritik R14 F5: Einzelansicht unter 768 px nur der Rücklink aufs Thema („‹ Realität akzeptieren …“),
   voll ausgeschrieben, darf umbrechen. Drei gekürzte Glieder („Bibliothe… › … › We…“) sagten nichts mehr.
   Der Titel steht ohnehin als Überschrift darunter. */
@media (max-width: 767px) {
  .ym .ym-krumen-nav--zurueck .ym-krumen { flex-wrap: wrap; }
  .ym .ym-krumen-nav--zurueck .ym-krumen li { display: none; }
  .ym .ym-krumen-nav--zurueck .ym-krumen li.ym-krumen-eltern { display: block; flex: 1 1 auto; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
  .ym .ym-krumen-nav--zurueck .ym-krumen li.ym-krumen-eltern::before { content: none; }
  .ym .ym-krumen-nav--zurueck .ym-krumen-eltern a::before { content: "‹"; content: "‹" / ""; margin-right: 6px; font-weight: 600; }
}
/* Punkteraster aus (Jens 04.10.2026). Betrifft .ym-hero-punkte (Kopf der Bibliothek, Karte "Zur Bibliothek" im Konto, Shop-Kopf).
   Zum Zurückholen diese Zeile entfernen. */
.ym .ym-hero-punkte { display: none; }

/* Kritik R14 F13: Marke „your-matrix“ nie am Bindestrich umbrechen (ym_marke_schuetzen) */
.ym-marke-ganz { white-space: nowrap; }

/* ---------- Kritik R15 (04.10.2026) ---------- */
/* N7: „Einblick“ steht als eigenes Etikett hinter den Angaben, nicht als vierter Punkt einer Mittelpunkt-Kette. */
.ym .ym-einblick-etikett { display: inline-block; margin-left: 8px; padding: 0 10px; border-radius: 999px; background: var(--hell); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.7; vertical-align: 1px; white-space: nowrap; }
/* N11: Ziele mindestens 44 px. Formatknöpfe der Reihe auf allen Breiten, Folgentitel als ganze Zeile. */
.ym a.ym-reihe-format { width: 44px; height: 44px; }
.ym a.ym-reihe-titel { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
.ym .ym-probe-titel a { display: inline-block; padding: 10px 0; margin: -10px 0; }
/* N8: Zusatzlinks „Anmelden“ und „Firmencode einlösen“ stehen gleich gebaut in ihrer Karte, unterstrichen und 44 px hoch. */
.ym-angebote .ym-angebot .ym-angebot-zusatz { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; min-height: 44px; margin: 0; }
.ym-angebote .ym-angebot .ym-angebot-zusatz a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ym-angebote .ym-angebot .ym-angebot-zusatz a:hover { text-decoration-thickness: 2px; }
@media (min-width: 1101px) {
  /* Drei Karten nebeneinander: Knöpfe auf einer Linie, auch wenn die mittlere Karte keinen Zusatzlink hat. */
  .ym-angebote .ym-angebote-spalten > .ym-angebot:not(:has(.ym-angebot-zusatz))::after { content: ""; display: block; min-height: 44px; }
  /* Preiszeilen in einer Größe (vorher 34 / 34 / 26 px). */
  .ym-angebote .ym-angebote-spalten .ym-preis { font-size: clamp(20px, 1.75vw, 26px); line-height: 1.2; }
}
/* N4: Angebot anfragen, gebaut wie die Angebote: Text links in lesbarer Breite, rechts die Karte mit beiden Wegen. */
.ym-anfrage .ym-anfrage-spalten { gap: 24px; align-items: stretch; margin-top: 8px; margin-bottom: 0; }
.ym-anfrage .ym-anfrage-text { display: flex; align-items: center; }
.ym-anfrage .ym-anfrage-text p { margin: 0; padding: 0; font-size: 20px; line-height: 1.6; color: #19333E; }
.ym-anfrage .ym-anfrage-spalten > .ym-anfrage-karte { flex: 0 0 380px; justify-content: center; }
.ym-anfrage .ym-anfrage-karte .wp-block-buttons { margin-top: 0; }
.ym-anfrage .ym-anfrage-karte a[href^="mailto:"]:not(.wp-block-button__link) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ym-anfrage .ym-anfrage-karte a[href^="mailto:"]:not(.wp-block-button__link):hover { text-decoration-thickness: 2px; }
@media (max-width: 900px) {
  .ym-anfrage .ym-anfrage-spalten { flex-direction: column; }
  .ym-anfrage .ym-anfrage-spalten > .ym-anfrage-karte, .ym-anfrage .ym-anfrage-spalten > .ym-anfrage-text { flex-basis: auto; width: 100%; }
  .ym-anfrage .ym-anfrage-text p { font-size: 18px; }
}

/* ---------- Kritik R16 (04.10.2026) ---------- */
/* F1: Angebot anfragen, Text und Karte oben bündig (vorher Text senkrecht mittig, 45 px tiefer als die Karte). */
.ym-anfrage .ym-anfrage-spalten { align-items: flex-start; }
.ym-anfrage .ym-anfrage-text { align-items: flex-start; }
/* F2: Angebote 720 bis 1100 px: eine Karte je Reihe, innen zwei Spalten. Links Etikett, Titel, Preis,
   Knopf und Zusatzlink, rechts die Liste (vorher bis 440 px leer rechts neben kurzen Listen).
   Die letzte Reihe (1fr) nimmt auf, wenn die Liste länger ist als die linke Spalte.
   Spalten 1 : 1 bis 820 px, darüber 5 : 6: so passt „Coaching & Workshops“ in eine Zeile und
   neben keiner Liste bleiben mehr als 80 px frei (gemessen 720 bis 1100). */
@media (min-width: 720px) and (max-width: 1100px) {
  .ym-angebote .ym-angebote-spalten > .ym-angebot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 40px; row-gap: 12px; align-items: start; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot > * { grid-column: 1; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot > ul { grid-column: 2; grid-row: 1 / -1; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .ym-angebote .ym-angebote-spalten > .ym-angebot { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
/* F2: Der Preis ist nie größer als der Kartentitel (vorher bis 1100 px 34 px unter einem 26-px-Titel). */
@media (max-width: 1100px) {
  .ym-angebote .ym-angebote-spalten .ym-preis { font-size: 22px; line-height: 1.2; }
}
/* F16: drei Karten nebeneinander ab 1101 px: Titel etwas kleiner, bis die Karte breit genug ist,
   damit „Team“ nicht allein in der zweiten Zeile steht. Preis bleibt kleiner oder gleich. */
@media (min-width: 1101px) {
  .ym-angebote .ym-angebote-spalten .ym-angebot h2 { font-size: clamp(22px, 1.8vw, 26px); }
}
/* F6: Reihenkarte. Ist die Zeile einer Folge schmaler als 322 px (Seitenleiste 1100 bis 1365, Handy),
   steht der Titel über die volle Breite und die Formatknöpfe in der Zeile darunter
   (vorher Titel in einer 70-bis-141-px-Restspalte, bis zu sechs Zeilen). */
.ym ul.ym-reihe { container: ym-reihe / inline-size; }
@media (max-width: 1099px) {
  @container ym-reihe (max-width: 321px) {
    .ym .ym-reihe-folge { flex-wrap: wrap; row-gap: 0; }
    .ym a.ym-reihe-titel { flex: 1 1 100%; }
  }
}
/* R17 N5: In der Seitenleiste (ab 1100 px) erst unter 280 px umbrechen. Bei 1280 ist die Zeile 289 px breit,
   der Titel passt neben die Formatknöpfe; vorher wurde die Reihe 390 statt 228 px hoch und links blieben 428 px leer. */
@media (min-width: 1100px) {
  @container ym-reihe (max-width: 279px) {
    .ym .ym-reihe-folge { flex-wrap: wrap; row-gap: 0; }
    .ym a.ym-reihe-titel { flex: 1 1 100%; }
  }
}
/* F16: „Reihe“ als Dachzeile über dem Reihennamen (vorher Reihe „…“ als Satz, „lässt““ allein in Zeile 2). */
.ym .ym-reihe-dach { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: #0877AB; }
/* F11: Fokusring auf dunklen Flächen in Aqua (Navy-Karte der Angebote und Anfrage, Kostproben-Bilder):
   Cyan erreichte dort 2,99 bzw. 1,55 : 1. #main-content sticht die seitenweite Fokusregel der Veredelung. */
html #main-content .ym-angebote .ym-angebot:nth-child(2) :focus-visible,
html #main-content .ym .ym-probe-bild :focus-visible { outline-color: #7FD8DC; }
/* F16: Reihenname in der Seitenkarte 18 px (bei 20 px stand bei 1280 und 390 „lässt“ allein in Zeile 2).
   Unter 375 px bleiben 20 px: dort bricht der Name ohnehin in zwei volle Zeilen. */
.ym .ym-reihe-karte h2.ym-gespraech-titel { font-size: 18px; }
@media (max-width: 374px) { .ym .ym-reihe-karte h2.ym-gespraech-titel { font-size: 20px; } }
/* R17 N9: Erster Block der Bibliothek ohne eigenen Kopf (ueberschrift="aus", Divi-Abschnitt hat schon 96/56 px
   Innenabstand): kein zusätzlicher Blockabstand. Vorher 192 px Luft über „Was dich erwartet“. */
.ym.ym-bibliothek > .ym-block-eng:first-child, .ym.ym-bibliothek > .ym-block:first-child { margin-top: 0; }
/* R17 N7: Seitenkopf der Format- und Rubrikseiten mit rechter Spalte (Anzahl, Themen mit Anzahl).
   Vorher endete der Text bei 1440 px nach 317 px, daneben 835 px Navy ohne Inhalt. */
.ym .ym-hero.ym-hero-mit-seite { justify-content: space-between; gap: 32px 56px; }
.ym .ym-hero-seite { position: relative; z-index: 1; flex: 0 1 380px; min-width: 0; color: #fff; }
.ym .ym-hero-gesamt { margin: 0 0 10px; font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .86); }
.ym .ym-hero-gesamt b { display: block; font-size: 40px; font-weight: 600; line-height: 1.1; color: #fff; }
.ym ul.ym-hero-liste { list-style: none !important; margin: 0; padding: 0 !important; border-top: 1px solid rgba(255, 255, 255, .22); }
.ym ul.ym-hero-liste > li { list-style: none !important; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, .9); min-height: 44px; }
.ym ul.ym-hero-liste > li::marker { content: ""; }
.ym .ym-hero-liste a { display: flex; align-items: center; min-height: 44px; flex: 1 1 auto; color: #fff; text-decoration: none; }
.ym .ym-hero-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
html #main-content .ym .ym-hero-liste a:focus-visible { outline: 2px solid #7FD8DC; outline-offset: 2px; }
.ym .ym-hero-anzahl { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: #7FD8DC; }
@media (max-width: 980px) {
  .ym .ym-hero.ym-hero-mit-seite { flex-wrap: wrap; align-items: flex-start; }
  .ym .ym-hero-seite { flex-basis: 100%; }
  .ym .ym-hero-gesamt b { display: inline; font-size: 24px; margin-right: 6px; }
}
@media (max-width: 767px) {
  .ym .ym-hero-seite { display: none; }
}
/* R17 N11: zwei H1-Stufen. Bildkopf (Navy-Kopf der Format-, Rubrik- und Fehlerseite) wie die Divi-Köpfe von
   Kontakt, Wir für euch und den Themen: 47/30 px, 600. Inhaltsseiten (Einzelansicht, Anmelden, Konto, Firmencode,
   Impressum, Angebote): 40/30 px, 600. Vorher 52,6/700, 41/700, 39,9/700, 40/700 und 30/500 gemischt. */
.ym .ym-h1 { font-size: clamp(30px, 2.8vw, 40px); font-weight: 600; line-height: 1.12; }
.ym .ym-anmelden .ym-h1, .ym .ym-interview .ym-h1 { font-size: clamp(30px, 2.8vw, 40px); }
.ym .ym-hero .ym-h1, .ym.ym-fehlerseite .ym-fehler-kopf .ym-h1 { font-size: clamp(30px, 3.26vw, 47px); }
/* R17 N16: Eingabefelder mit kräftigem Ring (vorher 3 px Cyan mit 22 % Deckkraft, gegen Weiß rund 1,3 : 1).
   #0A89C5 gegen Weiß 3,9 : 1. Gilt für Anmelden, Konto und Formulare der Bibliothek. */
.ym .ym-feld input:focus-visible, .ym .ym-feld select:focus-visible, .ym .ym-feld textarea:focus-visible,
.ym .ym-anmelden-form input:focus-visible, .ym .ym-anmelden-form input:focus { outline: 2px solid #0A89C5; outline-offset: 2px; }
/* Kritik R18 N9: gesperrte Folge bricht nie um, das Schloss bleibt rechts neben dem Titel */
.ym .ym-reihe-folge.ym-reihe-gesperrt { flex-wrap: nowrap; }
.ym .ym-reihe-gesperrt a.ym-reihe-titel { flex: 1 1 auto; }

/* ===== Kritik R19 (04.10.2026) ===== */
/* N6: Themenleiste. Spalten nach Textlänge statt gleich breit: ab 1240 px alle vier Namen einzeilig
   (vorher „Realität akzeptieren und meistern“ bei 1920 bis 1100 zweizeilig, bei 1280 auch „Alles „nur“ in meinem Kopf“).
   Darunter zwei gleich breite Spalten wie bis 1024 px, dort steht jeder Name in einer Zeile. */
@media (min-width: 1240px) {
  .ym ol.ym-gang-leiste-liste { grid-template-columns: repeat(4, auto); gap: 16px; }
  .ym .ym-gang-leiste-punkt { padding: 12px 14px; gap: 10px; }
}
@media (min-width: 481px) and (max-width: 1239px) {
  .ym ol.ym-gang-leiste-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* N5: Angebote. Drei Karten nebeneinander erst ab 1240 px (vorher ab 1101: bei 1101 bis ~1240 brach
   „Coaching & Workshops“ als einziger Titel zweizeilig). Darunter eine Karte je Reihe, innen zwei Spalten.
   Titelgröße wächst mit der Breite und fällt nie: ab 720 px clamp(22, 1.8vw, 26), also 22 bis 1222 px. */
@media (min-width: 1101px) and (max-width: 1239px) {
  .ym-angebote .ym-angebote-spalten { flex-direction: column; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot { flex-basis: 100% !important; width: 100%; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 40px; row-gap: 12px; align-items: start; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot > * { grid-column: 1; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot > ul { grid-column: 2; grid-row: 1 / -1; }
  .ym-angebote .ym-angebote-spalten > .ym-angebot:not(:has(.ym-angebot-zusatz))::after { content: none; }
  .ym-angebote .ym-angebote-spalten .ym-preis { font-size: 22px; line-height: 1.2; }
}
@media (min-width: 720px) {
  .ym-angebote .ym-angebote-spalten .ym-angebot h2 { font-size: clamp(22px, 1.8vw, 26px); }
}
/* Einzelansicht (Weg zur 9): Leerfläche neben der kürzeren Spalte. Ab 1181 px zwei Spalten; bei einem Gespräch
   mit nur einer Person steht ihr Foto in der Angabenzeile, die Karte „Im Gespräch“ entfällt dort (PHP setzt
   .ym-gespraech-schmal nur dann). Darunter bleibt die Karte neben „Das war ein Einblick“ stehen.
   Die Knöpfe der Einblick-Karte stehen bis 1365 px nebeneinander (vorher bei 1181 bis 1365 untereinander, +58 px). */
.ym .ym-meta-person { display: none; }
@media (min-width: 1181px) {
  .ym .ym-beitrag-seite > .ym-gespraech-schmal { display: none; }
  .ym .ym-meta-person { display: inline-block; vertical-align: middle; margin: -4px 6px 0 2px; line-height: 0; }
  .ym .ym-meta-person .ym-person-rund { width: 28px; height: 28px; font-size: 10.5px; }
}
@media (min-width: 1181px) and (max-width: 1365px) {
  .ym .ym-einblick-karte { padding-left: 24px; padding-right: 24px; }
  .ym .ym-einblick-karte .ym-knoepfe { flex-wrap: nowrap; gap: 8px; }
  .ym .ym-einblick-karte .ym-knopf { padding-left: 16px; padding-right: 16px; }
}
/* N4: Suchfeld für Gäste auf heller Fläche (Startseite unter „Die Gänge der Bibliothek“, Bibliothek unter
   „Was dich erwartet“). Gleiches Feld wie im Kopf der Mitglieder, mit Linie statt auf Navy. */
.ym .ym-start-suche, .ym .ym-gast-suche { margin: 0 0 var(--abstand-kopf); }
.ym .ym-start-suche .ym-suche, .ym .ym-gast-suche .ym-suche { max-width: 520px; }
.ym .ym-start-suche .ym-live, .ym .ym-gast-suche .ym-live { box-shadow: 0 18px 40px -24px rgba(25, 51, 62, .35); }
.ym .ym-live-schloss { display: inline-grid; place-items: center; vertical-align: -2px; margin-left: 6px; color: var(--grau); }
.ym .ym-live-schloss svg { width: 13px; height: 13px; }
/* Weg zur 10 (Anmelden): „Angemeldet bleiben“ samt Kästchen ist ein Ziel von mindestens 44 px Höhe
   (vorher nur das Kästchen 20 × 20 als eigenes Ziel, die Beschriftung klickbar, aber 22 px hoch). */
.ym .ym-anmelden-form .login-remember { margin: 4px 0 8px; }
.ym .ym-anmelden-form .login-remember label { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding-right: 8px; }