/* yt-buch.css 1.0.0 – Buch „Die Erfolgswebsite“: Seite /buch, Startseiten-Teaser (Particle ytbuch),
   Hinweiskasten auf Leistungsseiten. Eigene Datei, damit custom.scss nicht neu kompiliert werden muss.
   Nutzt die Tokens aus custom.scss (--yt-*). Einbindung immer mit ?v=<Version>. */

.ytb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Knöpfe ---------- */
.ytb-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; position: relative; }
.ytb-btn { display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: var(--yt-ink) !important;
  text-decoration: none; padding: .85rem 1.6rem; font-weight: 600; font-size: .95rem; line-height: 1.3;
  border: 1px solid #fff; border-radius: 999px; transition: transform .2s ease; }
.ytb-btn:hover { transform: scale(1.03); }
.ytb-btn:focus-visible, .ytb-link:focus-visible { outline: 3px solid var(--yt-warm); outline-offset: 3px; }
.ytb-btn--rand { background: transparent; color: var(--yt-paper-100) !important; border-color: var(--yt-line-dark); }
.ytb-btn--rand:hover { border-color: var(--yt-red-500); }
.ytb-btn--dunkel { background: var(--yt-ink); color: #fff !important; border-color: var(--yt-ink); }

/* ---------- /buch: Bühne ---------- */
.ytb-hero .ytb-hero-raster { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; position: relative; }
.ytb-hero h1 { max-width: 14ch; }
.ytb-hero h1 em { display: block; font-size: max(.5em, 1.3rem); line-height: 1.15; margin-top: .6rem; }
.ytb-info { position: relative; margin: 1.6rem 0 0; color: var(--yt-gray-400); font-size: .85rem; line-height: 1.5; }
.ytb-cover { margin: 0; justify-self: start; width: 100%; max-width: min(260px, 64vw); position: relative; order: -1; }
.ytb-cover img { display: block; width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
@media (min-width: 900px) {
  .ytb-hero .ytb-hero-raster { grid-template-columns: minmax(0, 1fr) minmax(240px, 400px); gap: clamp(2rem, 4vw, 4rem); }
  .ytb-cover { justify-self: end; max-width: 400px; order: 0; }
}

/* ---------- /buch: Abschnitte ---------- */
.ytb-h2 { font-family: var(--yt-disp); font-weight: 700; font-size: var(--yt-step-2); line-height: 1.05;
  letter-spacing: -.01em; color: var(--yt-ink); margin: 0 0 1.6rem; text-align: left; }
.ytb-wen { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ytb-wen li { border: 1px solid var(--yt-line-light); border-radius: var(--yt-radius-lg); padding: 1.6rem 1.7rem;
  background: #fff; color: var(--yt-black-900); font-size: 1rem; line-height: 1.6; position: relative; }
.ytb-wen li::before { content: ""; display: block; width: 28px; height: 3px; background: var(--yt-red-500); margin-bottom: 1rem; }
.ytb-lernen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ytb-lernen li { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--yt-line-light);
  padding: 1.2rem 0 .6rem; color: var(--yt-black-900); font-size: 1rem; line-height: 1.6; }
.ytb-kap { font-family: var(--yt-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yt-red-600); }
.ytb-umfang { margin: 1.6rem 0 0; color: var(--yt-gray-600); font-size: .95rem; }

.ytb-autor { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; max-width: 60rem;
  background: #fff; border: 1px solid var(--yt-line-light); border-radius: var(--yt-radius-lg); padding: clamp(1.4rem, 3vw, 2.4rem); }
.ytb-autor p { color: var(--yt-black-900); font-size: 1rem; line-height: 1.7; margin: 0; }
.ytb-autor .ytb-h2 { margin: .5rem 0 1rem; }
.ytb-autor-bild { margin: 0; width: min(280px, 70vw); border-radius: var(--yt-radius-md); overflow: hidden; }
.ytb-autor-bild img { display: block; width: 100%; height: auto; }
@media (min-width: 760px) { .ytb-autor { grid-template-columns: 280px 1fr; gap: 2.6rem; } }

/* KI-Kennzeichnung (Art. 50 KI-VO): kleines AI-Zeichen unten rechts, Hausstandard */
.ytb-ki { position: relative; }
.ytb-ki::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; pointer-events: none;
  background: url('/user/images/yt/buch/label-ai-schwarz-50.png') center / contain no-repeat; }

/* ---------- Startseiten-Teaser (Particle ytbuch) ---------- */
.ytb-teaser { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
  background: #fff; border: 1px solid var(--yt-line-light); border-radius: var(--yt-radius-lg); padding: clamp(1.6rem, 4vw, 3.5rem); }
.ytb-teaser-cover { margin: 0; width: min(220px, 56vw); justify-self: center; }
.ytb-teaser-cover img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.ytb-teaser .ytb-kap { display: inline-block; margin-bottom: .8rem; }
.ytb-teaser h2 { font-family: var(--yt-disp); font-weight: 700; font-size: var(--yt-step-2); line-height: 1.05; margin: 0 0 1rem; color: var(--yt-ink); text-align: left; }
.ytb-teaser h2 em { font-style: normal; color: var(--yt-red-600); }
.ytb-teaser p { margin: 0; color: var(--yt-black-900); font-size: 1.05rem; line-height: 1.6; max-width: 40rem; }
.ytb-teaser .ytb-knoepfe { margin-top: 1.6rem; align-items: center; }
.ytb-link { color: var(--yt-red-600) !important; font-weight: 600; text-decoration: none; padding: .85rem .4rem; }
.ytb-link:hover { text-decoration: underline; }
@media (min-width: 760px) {
  .ytb-teaser { grid-template-columns: 220px 1fr; gap: 3rem; }
}

/* ---------- Hinweiskasten auf Leistungsseiten ---------- */
.ytb-hinweis { display: flex; gap: 1.2rem; align-items: center; max-width: 56rem; text-decoration: none;
  background: #fff; border: 1px solid var(--yt-line-light); border-left: 3px solid var(--yt-red-500); border-radius: 0 var(--yt-radius-md) var(--yt-radius-md) 0;
  padding: 1.1rem 1.4rem; color: var(--yt-black-900) !important; }
.ytb-hinweis img { flex: 0 0 auto; width: 64px; height: auto; border-radius: 2px; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.ytb-hinweis b { display: block; font-family: var(--yt-disp); font-size: 1.1rem; margin: .2rem 0 .3rem; color: var(--yt-ink); }
.ytb-hinweis span.ytb-text { display: block; font-size: .93rem; line-height: 1.6; }
.ytb-hinweis .ytb-mehr { display: inline-block; margin-top: .4rem; color: var(--yt-red-600); font-weight: 600; font-size: .9rem; }
.ytb-hinweis:hover .ytb-mehr { text-decoration: underline; }
.ytb-hinweis:focus-visible { outline: 3px solid var(--yt-warm); outline-offset: 3px; }
@media (max-width: 560px) { .ytb-hinweis { flex-direction: column; align-items: flex-start; } .ytb-hinweis img { width: 56px; } }

@media (prefers-reduced-motion: reduce) { .ytb-btn { transition: none; } .ytb-btn:hover { transform: none; } }