/* ==========================================================================
   YOUTUBE — yt-* Namespace (Template youtube)
   Sammelseite „Der Kritische Pfad": Hero mit Kanal-CTAs, neuestes Video,
   automatische Playlist-Sektionen, Prompt-/Blog-/Download-Teaser.
   Basis-Bausteine kommen aus search.css (sf-hero, sf-results), grid.css
   (pw-grid, pw-grid-card) und prompts.css (pr-result, pr-copy).
   ========================================================================== */

.pw-youtube { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); }
@media (prefers-color-scheme: dark) { .pw-youtube { color: var(--pw-fg); } }

/* ---- Inhalts-Bänder mit alternierenden Hintergründen ----
   Band 1 + 3: Seitengrund (bg-alt aus .sf-page), Band 2 + 4: hell. */
.yt-band { padding: var(--pw-space-2xl) 0; }
.yt-band--light { background: #fff; }
.yt-band .yt-section:first-child { margin-top: 0; }

/* ---- Hero-Ergänzungen (Basis: .sf-hero) ---- */
.yt-hero__eyebrow { margin: 0 0 var(--pw-space-sm); font-size: 12px; font-weight: 700; color: var(--pw-brand); text-transform: uppercase; letter-spacing: 0.08em; }
.sf-hero__bgimage--youtube { width: 480px; transform: translateY(25%); }
@media (max-width: 900px) { .sf-hero__bgimage--youtube { width: 300px; } }
.yt-hero__ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.yt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--pw-radius-sm); font-size: 15px; font-weight: 600; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.yt-btn--primary { background: var(--pw-brand); border: 1px solid var(--pw-brand); color: #fff; }
.yt-btn--primary:hover { background: var(--pw-brand-hover); border-color: var(--pw-brand-hover); color: #fff; }
.yt-btn--secondary { background: #fff; border: 1px solid var(--pw-border); color: var(--pw-text); }
.yt-btn--secondary:hover { border-color: var(--pw-brand); color: var(--pw-brand); }

/* ---- Sektionen ---- */
.yt-section { margin: var(--pw-space-2xl) 0 0; }
.yt-section__heading { margin: 0 0 var(--pw-space-lg); font-size: 22px; font-weight: 700; color: var(--pw-text); letter-spacing: -0.01em; }
.yt-subheading { margin: var(--pw-space-xl) 0 var(--pw-space-md); font-size: 17px; font-weight: 700; color: var(--pw-text); }

/* Kontext-Karte: Symbol, Titel, Auszug, Textlink. Titel und Auszug haben eine
   feste Zeilenzahl, damit alle Karten exakt gleich hoch sind und die Textlinks
   auf einer Linie enden. --yt-card-title-lh/--yt-card-text-lh halten
   line-height und min-height synchron. */
.yt-card { --yt-card-title-lh: 1.35; --yt-card-text-lh: 1.55; display: flex; flex-direction: column; padding: var(--pw-space-lg) 28px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); color: inherit; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.yt-card:hover { border-color: var(--pw-brand); }
.yt-card__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(var(--pw-brand-rgb), 0.1); margin-bottom: var(--pw-space-md); }
.yt-card__icon::before { content: ""; width: 24px; height: 24px; background-color: var(--pw-brand); -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.yt-card__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--pw-text); line-height: var(--yt-card-title-lh); min-height: calc(2em * var(--yt-card-title-lh)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-card__excerpt { margin: var(--pw-space-sm) 0 0; font-size: 15px; color: var(--pw-text-secondary); line-height: var(--yt-card-text-lh); min-height: calc(3em * var(--yt-card-text-lh)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yt-card__more { margin-top: var(--pw-space-lg); align-self: flex-end; font-size: 14px; font-weight: 600; color: var(--pw-brand); }

@media (prefers-color-scheme: dark) {
	.yt-card { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.yt-card:hover { border-color: var(--pw-brand); }
	.yt-card__icon { background: rgba(var(--pw-brand-rgb), 0.16); }
	.yt-card__title { color: var(--pw-fg); }
}

/* ---- Neuestes Video (volle Breite, bündig mit dem Karten-Grid) ---- */
.yt-latest { max-width: none; }
.yt-latest__embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--pw-radius-md); }
.yt-latest__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pw-space-md); margin: var(--pw-space-md) 0 6px; }
.yt-latest__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--pw-text); }
.yt-latest__description { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pw-text-secondary); }
.yt-latest__article { flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--pw-brand); white-space: nowrap; }
@media (max-width: 600px) { .yt-latest__head { flex-direction: column; gap: 4px; } }

/* ---- Playlist-Galerie: 3 Karten sichtbar, Pfeile blättern ---- */
.yt-playlist { margin: var(--pw-space-xl) 0 0; }
.yt-playlist:first-of-type { margin-top: 0; }
.yt-playlist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-md); margin: 0 0 var(--pw-space-md); }
.yt-playlist__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--pw-text); }
.yt-playlist__nav { display: flex; gap: 8px; }
.yt-playlist__arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0 0 3px; background: #fff; border: 1px solid var(--pw-border); border-radius: 50%; font-size: 22px; line-height: 1; color: var(--pw-text); cursor: pointer; transition: border-color 0.2s, color 0.2s, opacity 0.2s; }
.yt-playlist__arrow:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
.yt-playlist__arrow:disabled { opacity: 0.35; pointer-events: none; }
.yt-playlist__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--pw-space-lg)) / 3); gap: var(--pw-space-lg); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.yt-playlist__track::-webkit-scrollbar { display: none; }
.yt-playlist__track > * { scroll-snap-align: start; }

/* ---- Artikel-Gruppen (Band 3) ---- */
.yt-article-group { margin: 0 0 var(--pw-space-xl); }
.yt-article-group:last-child { margin-bottom: 0; }

/* ---- Teaser Prompt-Bibliothek (Band 4, weiß) ---- */
.yt-library__lead { margin: 0 0 var(--pw-space-lg); font-size: 15px; line-height: 1.6; color: var(--pw-text-secondary); max-width: 640px; }
/* Spotlight: Prompt des Monats, hervorgehoben wie die Featured-Box der
   Bibliothek (oranger Rahmen + Tönung), Karte in voller Breite */
.yt-spotlight { margin: 0 0 var(--pw-space-xl); padding: 20px; background: rgba(var(--pw-brand-rgb),0.04); border: 1px solid rgba(var(--pw-brand-rgb),0.35); border-radius: var(--pw-radius-md); }
.yt-spotlight__label { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--pw-brand); text-transform: uppercase; letter-spacing: 0.08em; }
.yt-library__cta { display: flex; justify-content: center; margin: var(--pw-space-xl) 0 0; }

/* ---- Videokarten ---- */
.yt-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); overflow: hidden; transition: border-color 0.2s; }
.yt-card:hover { border-color: var(--pw-brand); }
.yt-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--pw-bg-alt); }
.yt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.yt-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.yt-card__play::after { content: ""; width: 46px; height: 32px; background: rgba(0,0,0,0.7); border-radius: 8px; -webkit-mask: none; clip-path: none; }
.yt-card__play::before { content: ""; position: absolute; z-index: 1; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; }
.yt-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px; }
.yt-card__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.yt-card__link { color: var(--pw-text); }
.yt-card__link:hover { color: var(--pw-text); }
.yt-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.yt-card__meta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; font-size: 13px; }
.yt-card__date { color: var(--pw-text-muted); font-variant-numeric: tabular-nums; }
.yt-card__article { font-weight: 600; color: var(--pw-brand); }

/* ---- Dark Mode ---- */
@media (prefers-color-scheme: dark) {
	.yt-band--light { background: #0a0a0a; }
	.yt-spotlight { background: rgba(var(--pw-brand-rgb),0.08); }
	.yt-btn--secondary { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.yt-btn--secondary:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
	.yt-section__heading { color: var(--pw-fg); }
	.yt-subheading { color: var(--pw-fg); }
	.yt-latest__title { color: var(--pw-fg); }
	.yt-playlist__title { color: var(--pw-fg); }
	.yt-playlist__arrow { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.yt-card { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.yt-card__media { background: #0a0a0a; }
	.yt-card__link { color: var(--pw-fg); }
	.yt-card__link:hover { color: var(--pw-fg); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.yt-playlist__track { grid-auto-columns: calc((100% - var(--pw-space-lg)) / 2); }
}
@media (max-width: 640px) {
	.yt-card__meta { flex-direction: column; align-items: flex-start; }
	.yt-playlist__track { grid-auto-columns: 85%; }
}

/* ---- Client-Leiste: Logo plus Name je Setup-Artikel ----
   Steht zwischen Band 1 und Band 2. Aufbau wie die Playlist-Galerie:
   Kopfzeile mit Pfeilen, darunter ein Scroll-Snap-Track. Die Logos kommen
   als CSS-Maske herein (--logo-url), damit SVG und PNG gleich aussehen,
   die Textfarbe annehmen und im Dark Mode mitgehen. */
.yt-clients__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pw-space-md); margin: 0 0 var(--pw-space-md); }
.yt-clients__intro { min-width: 0; }
.yt-clients .yt-section__heading { margin-bottom: 4px; }
.yt-clients__lead { margin: 0; font-size: 15px; color: var(--pw-text-secondary); }
.yt-clients__nav { display: flex; gap: 8px; flex: none; }
.yt-clients__arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0 0 3px; background: #fff; border: 1px solid var(--pw-border); border-radius: 50%; font-size: 22px; line-height: 1; color: var(--pw-text); cursor: pointer; transition: border-color 0.2s, color 0.2s, opacity 0.2s; }
.yt-clients__arrow:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
.yt-clients__arrow:disabled { opacity: 0.35; pointer-events: none; }

/* overflow-x: auto schneidet auch oben und unten ab. Die Kachel hebt sich beim
   Hover um 2px und wirft einen Schatten nach unten; ohne Innenabstand kappt die
   Scrollkante die orange Oberkante. Das Padding schafft den Platz, die
   negativen Aussenabstaende halten die Leiste optisch an derselben Stelle. */
.yt-clients__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--pw-space-md)) / 5); gap: var(--pw-space-md); margin: -8px 0 -10px; padding: 8px 0 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.yt-clients__track::-webkit-scrollbar { display: none; }
.yt-clients__track > li { scroll-snap-align: start; }

.yt-client { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; height: 100%; padding: var(--pw-space-lg) var(--pw-space-md); background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); text-align: center; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.yt-client:hover { border-color: var(--pw-brand); box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-2px); }
.yt-client__logo { width: 34px; height: 34px; margin-bottom: 2px; background-color: var(--pw-text); -webkit-mask-image: var(--logo-url); mask-image: var(--logo-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background-color 0.2s; }
.yt-client:hover .yt-client__logo { background-color: var(--pw-brand); }
.yt-client__logo--ask { display: flex; align-items: center; justify-content: center; background: none; color: var(--pw-text-muted); font-size: 26px; font-weight: 700; line-height: 1; }
.yt-client:hover .yt-client__logo--ask { background: none; color: var(--pw-brand); }
.yt-client__name { font-size: 15px; font-weight: 600; color: var(--pw-text); line-height: 1.3; }
.yt-client__kind { font-size: 13px; color: var(--pw-text-secondary); line-height: 1.3; }
.yt-client--finder { border-style: dashed; }

@media (prefers-color-scheme: dark) {
	.yt-clients__arrow { background: var(--pw-bg-alt); }
	.yt-client { background: var(--pw-bg-alt); }
}
@media (max-width: 1024px) { .yt-clients__track { grid-auto-columns: calc((100% - 3 * var(--pw-space-md)) / 4); } }
@media (max-width: 860px)  { .yt-clients__track { grid-auto-columns: calc((100% - 2 * var(--pw-space-md)) / 3); } }
@media (max-width: 640px)  { .yt-clients__track { grid-auto-columns: calc((100% - var(--pw-space-md)) / 2); } .yt-clients__head { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .yt-clients__track { scroll-behavior: auto; } .yt-client:hover { transform: none; } }

/* Client-Leiste schliesst direkt an Band 1 an, deshalb oben kein voller Abstand. */
.yt-band--tight { padding-top: 0; }