/* BendYourMind: Lesestücke (ruhige Lesespalte, große Serifenschrift) und Mitnahmen (Druckansicht A4).
   Baut auf marke.css auf. */

/* ---------- Lesestück ---------- */
.kopfbild{position:relative;height:clamp(240px,44vh,420px);overflow:hidden;isolation:isolate}
.kopfbild .bild{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:right 42%}
.kopfbild .schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 78%,transparent) 0%,color-mix(in srgb,var(--bg) 30%,transparent) 34%,transparent 60%,var(--bg) 100%),linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,transparent 55%)}
.lesestueck{width:min(720px,100%);margin-inline:auto;padding:8px max(22px,env(safe-area-inset-left,0px)) 72px}
.lesestueck .claim{margin-bottom:18px}
.lesestueck h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;animation:none}
.lesestueck h1 span{display:block;margin-top:14px;font-size:clamp(22px,2.6vw,30px);line-height:1.2;font-style:italic;letter-spacing:0;color:var(--muted)}
.lesestueck .fuerwen{margin-top:26px;padding-left:18px;border-left:1px solid var(--glint);font-size:17px;color:var(--muted);max-width:56ch}
.lesestueck .text{margin-top:40px;font-family:var(--display);font-weight:500;font-size:clamp(21px,2.1vw,24px);line-height:1.52}
.lesestueck .text p{margin-top:1.05em}
.lesestueck .text p:first-child{margin-top:0}
.lesestueck .text p:first-child::first-letter{font-size:3.1em;float:left;line-height:.86;padding:.06em .1em 0 0;font-weight:500}
.lesestueck .text h2{margin-top:2em;font-size:clamp(28px,3.2vw,38px);line-height:1.12}
.lesestueck .text ol,.lesestueck .text ul{margin-top:1.05em;display:flex;flex-direction:column;gap:.7em;padding-left:1.3em}
.lesestueck .text ol{list-style:decimal}
.lesestueck .text ul{list-style:none;padding-left:0}
.lesestueck .text ul li{padding-left:1.1em;border-left:1px solid var(--glint)}
.lesestueck .text li::marker{color:var(--glint);font-weight:600}
.lesestueck .text strong{font-weight:700}
.lesestueck sup{font-family:var(--body);font-size:.5em;line-height:0;margin-left:1px}
.lesestueck sup a{text-decoration:none;color:var(--muted);border-bottom:1px solid var(--glint)}
.einladung{margin-top:64px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.einladung p{font-family:var(--display);font-style:italic;font-size:26px;line-height:1.2}
.quellen{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.quellen h2{font-family:var(--body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.quellen ol{display:flex;flex-direction:column;gap:8px}
.quellen li{overflow-wrap:anywhere}
.quellen li>span{font-weight:700;color:var(--fg);margin-right:6px}
.quellen a{color:inherit}

/* Kopfbilder der Lesestücke aus der vorhandenen Serie */
.bild-teich .kopfbild .bild{background-image:url(../teich/bilder/hell.jpg);background-image:image-set(url(../teich/bilder/hell.webp) type("image/webp"),url(../teich/bilder/hell.jpg) type("image/jpeg"))}
:root[data-thema="dunkel"] .bild-teich .kopfbild .bild{background-image:url(../teich/bilder/dunkel.jpg);background-image:image-set(url(../teich/bilder/dunkel.webp) type("image/webp"),url(../teich/bilder/dunkel.jpg) type("image/jpeg"))}
@media (max-width:820px){.bild-teich .kopfbild .bild{background-image:url(../teich/bilder/hell-m.jpg);background-image:image-set(url(../teich/bilder/hell-m.webp) type("image/webp"),url(../teich/bilder/hell-m.jpg) type("image/jpeg"))}:root[data-thema="dunkel"] .bild-teich .kopfbild .bild{background-image:url(../teich/bilder/dunkel-m.jpg);background-image:image-set(url(../teich/bilder/dunkel-m.webp) type("image/webp"),url(../teich/bilder/dunkel-m.jpg) type("image/jpeg"))}}
.bild-bambus .kopfbild .bild{background-image:url(../bambus/bilder/hell.jpg);background-image:image-set(url(../bambus/bilder/hell.webp) type("image/webp"),url(../bambus/bilder/hell.jpg) type("image/jpeg"))}
:root[data-thema="dunkel"] .bild-bambus .kopfbild .bild{background-image:url(../bambus/bilder/dunkel.jpg);background-image:image-set(url(../bambus/bilder/dunkel.webp) type("image/webp"),url(../bambus/bilder/dunkel.jpg) type("image/jpeg"))}
@media (max-width:820px){.bild-bambus .kopfbild .bild{background-image:url(../bambus/bilder/hell-m.jpg);background-image:image-set(url(../bambus/bilder/hell-m.webp) type("image/webp"),url(../bambus/bilder/hell-m.jpg) type("image/jpeg"))}:root[data-thema="dunkel"] .bild-bambus .kopfbild .bild{background-image:url(../bambus/bilder/dunkel-m.jpg);background-image:image-set(url(../bambus/bilder/dunkel-m.webp) type("image/webp"),url(../bambus/bilder/dunkel-m.jpg) type("image/jpeg"))}}

/* ---------- Mitnahme: Bildschirm ---------- */
.mitnahme .blattseite{width:min(820px,100%);margin:10px auto 0;background:var(--surface);border:1px solid var(--line);padding:clamp(22px,5vw,54px);box-shadow:0 30px 60px -40px rgba(0,0,0,.5)}
.blattmarke{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:20px}
.blattmarke img{width:26px;height:26px}
.mitnahme h1{margin-top:16px;font-size:clamp(30px,4vw,44px);line-height:1.06;animation:none}
.mitnahme .ein{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.mitnahme .ein strong{color:var(--fg)}
.tage{margin-top:24px;display:flex;flex-direction:column}
.tage li{padding:14px 0 16px;border-top:1px solid var(--line);break-inside:avoid}
.tage h2{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.15;letter-spacing:0;display:flex;align-items:baseline;gap:14px}
.tage h2 span{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted);flex:none;border-bottom:1px solid var(--glint);padding-bottom:2px}
.tage p{margin-top:6px;font-size:15.5px;line-height:1.45}
.tage .wozu{font-size:14px;color:var(--muted)}
.tage .wozu b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-right:4px}
.tage .notiz{margin-top:22px;border-bottom:1px solid var(--muted);opacity:.6}
.danach{margin-top:18px;padding-top:14px;border-top:1px solid var(--glint);font-size:13.5px;line-height:1.5;color:var(--muted)}
.mitnahme .hinweis{width:min(820px,100%);margin:18px auto 48px;font-size:13.5px;color:var(--muted)}

@media (max-width:820px){
  .kopfbild{height:230px}
  .kopfbild .bild{background-position:78% 40%}
  .lesestueck{padding-bottom:52px}
  .lesestueck .text{margin-top:30px}
  .tage h2{flex-direction:column;gap:6px;align-items:flex-start}
}

/* ---------- Mitnahme: Druck, eine Seite A4, immer hell ---------- */
@page{size:A4;margin:11mm 14mm}
@media print{
  :root,:root[data-thema="dunkel"]{--bg:#fff;--surface:#fff;--fg:#1C1D1F;--muted:#4A463F;--line:#CFC7B8;--glint:#B8923F;color-scheme:light}
  html,body{background:#fff}
  body{font-size:10pt;line-height:1.35}
  .nur-schirm{display:none!important}
  .nur-dunkel{display:none!important}.nur-hell{display:block!important}
  .mitnahme .wrap{padding:0;width:100%;max-width:none}
  .mitnahme .blattseite{width:100%;margin:0;border:0;padding:0;box-shadow:none}
  .blattmarke{font-size:12pt;gap:6pt}
  .blattmarke img{width:15pt;height:15pt}
  .mitnahme h1{font-size:20pt;margin-top:6pt;line-height:1.05}
  .mitnahme .ein{font-size:8.6pt;margin-top:6pt;line-height:1.38}
  .tage{margin-top:7pt}
  .tage li{padding:5.5pt 0 7pt}
  .tage h2{font-size:12.5pt;gap:8pt;flex-direction:row;align-items:baseline}
  .tage h2 span{font-size:6.5pt;padding-bottom:1pt}
  .tage p{font-size:9.6pt;margin-top:2.5pt;line-height:1.32}
  .tage .wozu{font-size:8.2pt}
  .tage .wozu b{font-size:6.5pt}
  .tage .notiz{margin-top:22pt}
  .danach{font-size:7.6pt;margin-top:6pt;padding-top:5pt;line-height:1.35}
}