/* ============================================================================
   /das-buch/ , Desktopdarstellung ab 1100px (30.07.2026)

   Die Seite war auf jeder Breite dieselbe zentrierte Mobilstruktur mit mehr
   Leerraum. Hier bekommt der grosse Schirm eine eigene Anordnung:
   breite Layoutbereiche, schmale Lesetexte, Zweispalter statt Stapel.

   Mobil und Tablet bleiben unberuehrt , unterhalb 1100px greift nichts davon.
   Diese Datei wird nur auf der Buchseite geladen.
   ========================================================================= */
:root{
  --bk-breit:1320px;
  --bk-mittel:1120px;
  --bk-lesen:760px;
}

@media (min-width:1100px){

  /* ---- Breiten nach Zweck statt einer fuer alles --------------------- */
  .bd-book .bd-wrapx{width:min(100% - 4rem, var(--bk-breit));max-width:none}
  .bd-book .bd-band .bd-wrapx{width:min(100% - 4rem, var(--bk-mittel))}

  /* ---- Kopf: Zweispalter, groesseres Cover, weniger Leerraum ---------- */
  .bd-book-hero{padding-block:clamp(3rem,4.5vw,4.5rem) 0}
  .bd-book-hero .bd-wrapx{width:min(100% - 4rem, 1280px)}
  .bd-book-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    align-items:center;gap:clamp(3.5rem,6vw,7rem)}
  .bd-book-hero h1{font-size:clamp(2.8rem,4vw,4.2rem);line-height:1}
  .bd-book-subtitle{font-size:clamp(1.15rem,1.5vw,1.5rem)}
  .bd-book-hero-cover img{width:min(100%,420px);height:auto;margin-left:auto}
  .bd-book-hero .bd-cta-row{gap:.9rem;margin-top:1.8rem}
  .bd-book-hero .bd-btn{min-height:48px;padding:.85rem 1.5rem;font-size:1rem}

  /* ---- Kernaussage zweispaltig: Text links, Aussage rechts ------------ */
  .bd-invite .bd-wrapx{width:min(100% - 4rem, var(--bk-breit));
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(3rem,5vw,6rem);align-items:center;text-align:left}
  .bd-invite .bd-lead{max-width:var(--bk-lesen);
    font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.7;margin:0 0 1.1rem}
  .bd-invite .bd-lead-stark{grid-column:2;grid-row:1/span 4;
    align-self:center;margin:0;max-width:none;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;
    font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1.2;
    color:var(--bd-green-deep,#0f3b2c);
    padding-left:clamp(1.5rem,2vw,2.2rem);
    border-left:2px solid rgba(44,122,93,.28)}
  .bd-invite .bd-more{grid-column:1}

  /* ---- Die fuenf Buchteile: breite Reise statt Mini-Kaertchen --------- */
  .bd-band:has(.bd-parts) .bd-wrapx{width:min(100% - 4rem, 1300px)}
  .bd-parts{gap:1.4rem}
  .bd-part{padding:1.8rem 1.6rem}
  .bd-part-num{font-size:2.1rem}
  .bd-part h3{font-size:1.14rem;line-height:1.3}
  .bd-part p{font-size:1rem;line-height:1.62}

  /* ---- Formate: kraeftige Kaufkarten, Knopf ueber volle Breite -------- */
  .bd-band:has(.bd-formats) .bd-wrapx{width:min(100% - 4rem, var(--bk-mittel))}
  .bd-formats{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
  .bd-format{padding:1.8rem 1.7rem;display:flex;flex-direction:column}
  .bd-format h3{font-size:1.35rem;margin:.7rem 0 .5rem}
  .bd-format p{font-size:.98rem;line-height:1.6;flex:1}
  .bd-format .bd-soon{font-size:1.5rem;font-weight:700;padding:.35rem .9rem;
    border-radius:999px;align-self:flex-start}
  .bd-format .bd-btn{min-height:48px;justify-content:center;width:100%}
  a.bd-format{text-decoration:none;color:inherit;
    transition:transform .5s cubic-bezier(.32,.72,0,1),
               box-shadow .5s cubic-bezier(.32,.72,0,1)}
  a.bd-format:hover{transform:translateY(-4px);
    box-shadow:0 30px 55px -34px rgba(15,59,44,.42)}

  /* ---- Leseprobe: Lesebreite behalten, Rahmen darf breit sein --------- */
  .bd-sample{max-width:none}
  .bd-sample p{max-width:var(--bk-lesen)}

  /* ---- Lied: Strophen im Lesemass, nicht ueber die ganze Breite ------- */
  .bd-song-quote{margin-inline:0;max-width:var(--bk-lesen)}

  /* ---- Rhythmus: die Baender waren zu hoch --------------------------- */
  .bd-book .bd-band{padding-block:clamp(4rem,5.5vw,7rem)}
  .bd-book .bd-invite{padding-block:clamp(3.5rem,4.5vw,5.5rem)}
  .bd-book .bd-closing{padding-block:clamp(4rem,5.5vw,6.5rem)}
  .bd-closing .bd-wrapx{width:min(100% - 4rem, var(--bk-mittel))}
  .bd-closing .bd-verse{font-size:clamp(2rem,3vw,3rem)}
}

@media (min-width:1400px){
  .bd-book-hero-cover img{width:min(100%,460px)}
  .bd-book-hero-grid{min-height:560px}
}

@media (min-width:1100px){
  /* Die grosse Schrift gehoert dem Preis. Der Hoerbuch-Status ist eine
     Angabe, kein Preis , sonst bricht er um und schreit lauter als das Kaufbare. */
  .bd-format .bd-soon{font-size:.82rem;letter-spacing:.08em;font-weight:600;
    text-transform:uppercase;padding:.4rem .85rem;white-space:nowrap}
  .bd-format .bd-soon[style]{font-size:1.6rem;letter-spacing:0;text-transform:none;
    font-family:'Fraunces',Georgia,serif;padding:.3rem .95rem}
}

/* Auf grossen Schirmen wurde es schlechter statt besser: der Container war bei
   1280px gedeckelt, die Schrift wuchs aber mit der Fensterbreite weiter , also
   brachen Titel und Untertitel bei 1920 um, waehrend die Spalte schmaler wurde.
   Der Kopf waechst jetzt mit, die Schrift steigt flacher. */
@media (min-width:1100px){
  .bd-book-hero h1{font-size:clamp(2.6rem,2.9vw,3.9rem)}
  .bd-book-subtitle{font-size:clamp(1.1rem,1.15vw,1.4rem)}
}
@media (min-width:1700px){
  .bd-book-hero .bd-wrapx{width:min(100% - 5rem, 1520px)}
  .bd-book-hero-grid{gap:clamp(4rem,4.5vw,6rem)}
  .bd-book .bd-wrapx{width:min(100% - 5rem, 1500px)}
  .bd-band:has(.bd-parts) .bd-wrapx{width:min(100% - 5rem, 1440px)}
  .bd-invite .bd-wrapx{width:min(100% - 5rem, 1400px)}
}

/* Bei sehr breiten Schirmen wuchsen die Knoepfe mit und sprengten die Zeile.
   Drei gleich grosse Hauptaktionen braucht der Kopf ohnehin nicht , die
   Hoerprobe tritt zurueck. */
@media (min-width:1700px){
  .bd-book-hero .bd-cta-row{flex-wrap:nowrap;align-items:center}
  .bd-book-hero .bd-btn{font-size:1rem;padding:.85rem 1.4rem;white-space:nowrap}
  .bd-book-hero .bd-btn-ghost:last-child{background:none;border:none;padding:.85rem .4rem;
    text-decoration:underline;text-underline-offset:.35em}
}

/* Fehler: .bd-band .bd-wrapx (1120px) ist spezifischer als .bd-book .bd-wrapx
   und hat die Verbreiterung fuer grosse Schirme ausgehebelt , dadurch blieb
   jedes Band bei 1120px, auf 2560px also 44 Prozent der Flaeche. */
@media (min-width:1700px){
  .bd-book .bd-band .bd-wrapx{width:min(100% - 5rem, 1440px)}
  .bd-band:has(.bd-formats) .bd-wrapx{width:min(100% - 5rem, 1380px)}
  .bd-closing .bd-wrapx{width:min(100% - 5rem, 1200px)}
}
@media (min-width:2200px){
  .bd-book .bd-wrapx,
  .bd-book .bd-band .bd-wrapx{width:min(100% - 6rem, 1720px)}
  .bd-book-hero .bd-wrapx{width:min(100% - 6rem, 1720px)}
  .bd-band:has(.bd-parts) .bd-wrapx{width:min(100% - 6rem, 1680px)}
  .bd-band:has(.bd-formats) .bd-wrapx{width:min(100% - 6rem, 1560px)}
  .bd-invite .bd-wrapx{width:min(100% - 6rem, 1600px)}
}

/* Knopf ragte ueber die Karte: width:100% ohne border-box rechnet das
   Innenpolster oben drauf. */
@media (min-width:1100px){
  .bd-format .bd-btn{box-sizing:border-box;max-width:100%}
  .bd-format{overflow:hidden}
}