/* Buchwelt: ein illustriertes Lesebuch, kein Warenhaus.
   Papier #faf7ed, Wald #203f2d, Fuchston #9a4628, Nacht #192b40.
   Bestehende Inhalte und Illustrationen bleiben unverändert. */
:root { --breite-max:82rem; --rundung:8px; --blatt:#f0eadc; --rose:#f4e6dc; --himmel:#e6ecec; }
::selection { background:var(--wald); color:var(--grund); }
.kopf { padding-block:1.25rem; margin-inline:auto; }
.marke { font-size:1.85rem; letter-spacing:-.045em; }
.marke small { letter-spacing:.025em; font-size:.68rem; }
.navigation ul { gap:1.5rem; }
.navigation a { font-size:.85rem; }
.navigation a[aria-current="page"] { text-decoration-thickness:2px; }
.hero { grid-template-columns:1fr; gap:2.75rem; padding-block:3.5rem 0; }
.herotext { display:grid; grid-template-columns:1.2fr 1fr; column-gap:5rem; align-items:start; }
.herotext .vorzeile { grid-column:1/-1; margin-bottom:1.75rem; }
.hero h1 { grid-column:1; grid-row:2/4; font-size:clamp(3rem,5.5vw,5.1rem); line-height:1.04; max-width:14ch; letter-spacing:-.045em; margin:0; }
.herotext .einleitung { grid-column:2; margin-top:.5rem; font-size:1.12rem; max-width:36ch; }
.herotext .aktionen { grid-column:2; margin-block:1.25rem 0; gap:.6rem 1.5rem; }
.knopf, .mond .knopf { min-height:52px; padding:.85rem 1.6rem; border:1px solid var(--grund); border-radius:5px; background:var(--akzent); color:var(--akzent-text); font-size:.9rem; }
.knopf:hover, .mond .knopf:hover { background:var(--akzent-hover); }
.textlink { font-size:.9rem; }
.herobild { position:relative; border-radius:8px 8px 0 0; padding:0; width:100%; background:var(--salbei); overflow:visible; }
.herobild img { width:100%; aspect-ratio:1206/510; object-fit:contain; border-radius:8px 8px 0 0; }
.herobild figcaption { padding:1rem 1.5rem; background:var(--wald); color:var(--grund); text-align:left; font-size:.85rem; letter-spacing:.025em; display:flex; align-items:center; gap:1rem; }
.herobild figcaption::before { content:'✦'; font-size:1.25rem; color:var(--grund); }
section { padding-block:6rem; }
section + section { border-top:0; }
/* Der Abstand zum Regal wird nur einmal vergeben. */
.themenabschnitt { padding-bottom:0; }
.regalabschnitt { padding-top:clamp(3rem,6vw,5rem); }
.sectionhead { margin-bottom:2.75rem; }
h2 { font-size:clamp(2.3rem,3.8vw,3.65rem); letter-spacing:-.035em; }
.vorzeile { font-size:.7rem; letter-spacing:.16em; }
.themen { gap:0; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
.themenkarte { display:flex; flex-direction:column; border:0; border-right:1px solid var(--linie); border-radius:0; background:transparent; padding:2rem 1.5rem; transition:background .2s ease; }
.themenkarte:first-child { padding-left:0; }
.themenkarte:last-child { border-right:0; }
.themenicon { width:64px; height:64px; margin-bottom:1.5rem; color:var(--wald); --icon-farbe:#b9c79c; }
.themenicon .icon-flaeche { fill:var(--blatt); }
.themenicon .icon-motiv { fill:var(--icon-farbe); fill-opacity:.8; stroke:currentColor; stroke-width:1.4; }
.themenicon .icon-detail { stroke:currentColor; stroke-width:1.5; }
.themenkarte:first-child .themenicon, .themenkarte:last-child .themenicon { color:var(--akzent); --icon-farbe:#dca881; }
.themenkarte h3 { font-size:1.8rem; min-height:2.5em; line-height:1.15; letter-spacing:-.025em; }
.themenkarte p { font-size:1rem; max-width:23ch; }
.themenkarte span { margin-top:auto; padding-top:1.5rem; color:var(--akzent); }
.themenkarte:hover { background:var(--salbei); }
.buchraster { column-gap:2rem; row-gap:3.5rem; }
.buchkarte { background:transparent; border:0; border-radius:0; }
.buchbild { border-radius:5px; background:var(--blatt); min-height:355px; padding:2.5rem; position:relative; overflow:hidden; flex-shrink:0; }
.katalog .buchkarte:nth-child(3n+2) .buchbild { background:var(--salbei); }
.katalog .buchkarte:nth-child(3n+3) .buchbild { background:var(--himmel); }
.buchbild img { height:275px; filter:drop-shadow(8px 12px 7px rgb(32 63 45 / 20%)); transform:none; transition:transform .35s ease; }
.buchbild:hover img { transform:translateY(-4px); }
.regalabschnitt .buchbild { min-height:355px; padding:1.75rem; background:radial-gradient(ellipse at 30% 18%, #faf7ed 0%, #e6e8d6 48%, #becbb1 100%); box-shadow:inset 0 -20px 32px rgb(32 63 45 / 8%); }
.regalabschnitt .buchkarte:nth-child(2) .buchbild { background:radial-gradient(ellipse at 30% 18%, #fff8e8 0%, #eddfc7 48%, #d1b69b 100%); }
.regalabschnitt .buchkarte:nth-child(3) .buchbild { background:radial-gradient(ellipse at 30% 18%, #f2f3e9 0%, #dbe5dc 48%, #a5bcb2 100%); }
.regalabschnitt .buchbild img { width:auto; height:275px; max-height:none; max-width:100%; border-radius:2px; box-shadow:2px 3px 0 #f5eedc, 5px 5px 0 #c3b99f, 10px 18px 22px rgb(32 45 30 / 24%); filter:none; }
.kartentext { padding:1.75rem 0 0; }
.kartentext h3 { font-size:1.8rem; letter-spacing:-.025em; line-height:1.15; }
.kartentext .textlink { justify-content:flex-start; align-self:flex-start; padding-block:.75rem; text-decoration:none; }
.kartentext .textlink > span:first-child { text-decoration:underline; text-underline-offset:5px; }
.mond { position:relative; overflow:hidden; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); padding:3.5rem; border-radius:8px; gap:3rem; background:var(--nacht); margin-top:1rem; margin-bottom:0; }
.mond::before { content:''; position:absolute; width:420px; height:420px; border:1px solid rgb(250 247 237 / 16%); border-radius:50%; left:-100px; top:-90px; pointer-events:none; }
.mondbild { position:relative; display:grid; place-items:center; width:100%; max-width:none; margin:0; filter:drop-shadow(8px 14px 12px rgb(0 0 0 / 24%)); }
.mondbild img { width:auto; height:auto; max-width:100%; max-height:480px; object-fit:contain; object-position:center; }
.mond h2 { font-size:clamp(2.8rem,4.3vw,4.4rem); letter-spacing:-.04em; }
.mond p { max-width:44ch; }
.mond .knopf { margin-top:1rem; }
.kurzvorstellung { max-width:100%; padding:1.5rem 0 5rem; gap:3rem; }
.autorinnenbild { flex:0 0 240px; margin:0; max-width:100%; }
.kurzvorstellung img { width:240px; height:auto; border-radius:48% 48% 8px 8px; }
.autorinnenbild figcaption { margin-top:.65rem; color:var(--text-leise); font-size:.7rem; text-align:center; }
.kurzvorstellung h2 { font-size:clamp(2rem,3vw,3rem); }
.fuss { padding-block:2.5rem; }
.fuss strong { font-size:2rem; letter-spacing:-.04em; }
.fuss p:not(.fussnote) { max-width:45ch; }
.fussnote { font-size:1rem; line-height:1.7; font-weight:600; color:var(--text); max-width:75ch; }
.seitenkopf { padding-block:4.5rem 2rem; max-width:880px; }
.seitenkopf h1 { font-size:clamp(3rem,5.5vw,5rem); letter-spacing:-.045em; }
.katalog { padding-top:1rem; }
.filter { padding-block:1rem; border-block:1px solid var(--linie); gap:.5rem; }
.filter button { background:transparent; border-color:transparent; padding:.65rem 1.1rem; }
.filter button:hover { background:var(--salbei); }
.filter button[aria-pressed="true"]:hover { background:var(--wald); }
.buchdetail { gap:5rem; padding-bottom:4rem; }
.detailbild { background:var(--blatt); padding:3rem; border-radius:6px; position:sticky; top:2rem; }
.detailbild img { transform:rotate(-2deg); }
.passend { border-left:3px solid var(--wald); border-radius:0; }
.autorinnenseite { padding-block:5rem; }
@media (prefers-reduced-motion:no-preference) {
 .herotext { animation:buchwelt-ankunft .7s ease both; }
 .herobild { animation:buchwelt-ankunft .9s ease both; }
 @keyframes buchwelt-ankunft { from { opacity:.3; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
}
@media (max-width:1000px) {
 .herotext { column-gap:2rem; }
 .hero h1 { font-size:clamp(3rem,5.8vw,4.5rem); }
 .themenkarte:nth-child(2) { border-right:0; }
 .themenkarte:nth-child(3) { padding-left:0; }
 .themenkarte:nth-child(-n+2) { border-bottom:1px solid var(--linie); }
 .buchbild { padding:1.5rem; min-height:300px; }
 .buchbild img, .regalabschnitt .buchbild img { height:235px; }
 .mond { gap:3rem; padding:3rem; }
 .buchdetail { gap:2.5rem; }
}
@media (max-width:700px) {
 .kopf { padding-block:.8rem; gap:.4rem; }
 .marke { font-size:1.6rem; }
 .marke img { width:44px; height:44px; }
 .marke small { font-size:.62rem; }
 .navigation ul { gap:.25rem; }
 .navigation a { min-height:44px; padding-inline:.55rem; }
 .hero { padding-top:2rem; gap:2rem; }
 .herotext { display:block; }
 .herotext .vorzeile { font-size:.63rem; margin-bottom:1rem; }
 .hero h1 { font-size:clamp(2.8rem,10.5vw,4.5rem); max-width:14ch; }
 .herotext .einleitung { font-size:1rem; margin-top:1.5rem; max-width:40ch; }
 .herotext .aktionen { margin-top:1.5rem; }
 .herobild img { aspect-ratio:1206/510; }
 .herobild figcaption { padding:1.15rem 1rem; font-size:.75rem; gap:.6rem; background:linear-gradient(180deg, #e5ebdb, var(--salbei)); color:var(--wald); border-radius:0 0 8px 8px; }
 .herobild figcaption::before { color:var(--akzent); }
 section { padding-block:3.5rem; }
 .sectionhead { margin-bottom:2rem; }
 h2 { font-size:2.45rem; }
 .themenkarte { padding:1.5rem 1rem; }
 .themenkarte h3 { font-size:1.45rem; min-height:3.3em; }
 .themenkarte p { font-size:.95rem; }
 .themenkarte span { font-size:.8rem; }
 .buchraster { grid-template-columns:minmax(0,1fr); gap:1.75rem; align-items:start; }
 .buchkarte { min-width:0; overflow:visible; }
 .buchkarte + .buchkarte { padding-top:1.75rem; border-top:1px solid var(--linie); }
 .buchbild { min-height:330px; padding:2rem; }
 .buchbild img, .regalabschnitt .buchbild img { height:270px; }
 .kartentext { padding-top:1.5rem; }
 .mond { grid-template-columns:1fr; padding:2rem 1.5rem; gap:2.5rem; margin-top:0; }
 .mond h2 { font-size:2.9rem; }
 .mondbild { max-width:280px; margin-inline:auto; }
 .mondbild img { max-height:380px; }
 .mond .knopf { width:100%; }
 .kurzvorstellung { flex-direction:column; gap:1.5rem; align-items:start; padding:0 0 3rem; }
 .autorinnenbild { flex-basis:auto; width:220px; align-self:center; }
 .kurzvorstellung img { width:100%; height:auto; }
 .kurzvorstellung h2 { font-size:2rem; }
 .kurzvorstellung .vorzeile { font-size:.6rem; }
 .seitenkopf { padding-block:2.5rem 1rem; }
 .seitenkopf h1 { font-size:3rem; }
 .filter { gap:.25rem; }
 .filter button { font-size:.8rem; padding:.6rem .8rem; }
 .detailbild { position:static; padding:2rem; }
 .buchdetail { gap:2rem; }
 .autorinnenseite { padding-block:3rem; }
 .fuss { gap:1.5rem; }
 .fuss nav { display:grid; grid-template-columns:repeat(2,max-content); column-gap:1rem; }
}
/* Über Dolly: Fotoplatz im festen Hochformat 4:5 für ein späteres echtes Foto
   (Lieferung 1200 x 1500 px, Gesicht mittig). Ohne Foto zeigt
   .fotorahmen-platzhalter den Hinweis, mit Foto genügt ein <img> im .fotorahmen. */
.autorinnenfoto { width:100%; max-width:400px; margin:0; justify-self:center; }
.fotorahmen { aspect-ratio:4 / 5; overflow:hidden; border-radius:50% 50% 8px 8px / 40% 40% 8px 8px; background:var(--blatt); }
.fotorahmen img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.fotorahmen-platzhalter { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem 2rem; border:2px dashed #b9ab94; background:radial-gradient(ellipse at 50% 38%, var(--grund) 0%, var(--blatt) 70%); color:var(--text-leise); text-align:center; }
.fotorahmen-platzhalter p { margin:0; font-size:.9rem; }
.fotorahmen-platzhalter span { display:block; margin-bottom:.5rem; font-family:Georgia,"Times New Roman",serif; font-size:1.5rem; line-height:1.2; color:var(--text); }
/* Impressum und Datenschutz: noch fehlende Angaben deutlich als OFFEN markieren. */
.offen-hinweis { margin-block:2rem; padding:1rem 1.25rem; border-left:4px solid var(--akzent); background:var(--rose); }
.recht h3 { margin:2rem 0 .75rem; font-size:1.3rem; }
.offene-angaben { display:grid; gap:.6rem; margin:0 0 1rem; }
.offene-angaben div { display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:.3rem 1.5rem; align-items:baseline; padding:.85rem 1.1rem; border:2px dashed #c9b9a3; border-radius:6px; background:var(--flaeche); }
.offene-angaben dt { font-weight:700; color:var(--text); }
.offene-angaben dd { margin:0; color:var(--text-leise); }
.offen { display:inline-block; margin-right:.5rem; padding:0 .5rem; border-radius:4px; background:var(--akzent); color:var(--akzent-text); font-size:.78rem; font-weight:700; letter-spacing:.08em; line-height:1.7; }
/* Im Fließtext steht ohnehin ein Leerzeichen nach dem Etikett. */
p .offen { margin-right:0; }
.vorbehalt { margin-top:2.5rem; font-size:.9rem; color:var(--text-leise); }
/* Rechtstexte: Anschrift, Kurzfassung, Inhaltsübersicht und abgesetzter Widerspruchshinweis (Art. 21 Abs. 4 DSGVO). */
.recht address { margin:0 0 1rem; font-style:normal; overflow-wrap:anywhere; }
/* Links auf eigener Zeile bekommen eine Berührfläche von 44 px. */
.recht address a, .kontaktwege a { display:inline-flex; align-items:center; min-height:44px; }
.recht li { margin-bottom:.4rem; }
.kurzfassung { margin-block:2rem; padding:1.25rem 1.5rem; border-radius:6px; background:var(--salbei); }
.kurzfassung h2, .recht-inhalt h2 { margin-top:0; font-size:1.3rem; }
.kurzfassung ul { margin:0; padding-left:1.25rem; }
.recht-inhalt { margin-block:2rem; }
.recht-inhalt ol { margin:0; padding-left:1.6rem; columns:2; column-gap:2.5rem; }
.recht-inhalt li { margin:0; break-inside:avoid; }
.recht-inhalt a { display:inline-flex; align-items:center; min-height:44px; }
.widerspruch { margin-block:2rem; padding:1.25rem 1.5rem; border:2px solid var(--akzent); border-radius:6px; background:var(--flaeche); }
.widerspruch h3 { margin-top:0; }
.widerspruch p { margin-bottom:0; }
@media (max-width:700px) {
 .recht-inhalt ol { columns:1; }
 .autorinnenfoto { max-width:320px; }
 .fotorahmen-platzhalter { padding-top:3rem; }
 .offene-angaben div { grid-template-columns:minmax(0,1fr); }
}

/* Kurze Buchvideos: Originalformat erhalten, erst auf Wunsch laden.
   Abstand zum vorigen Abschnitt nur hier vergeben, nicht zusätzlich am Mondblock. */
.videoabschnitt { padding-block:clamp(3rem,5vw,4rem); }
.mehrwert { padding-bottom:0; }
.mehrwert + .videoabschnitt { padding-top:2rem; }
.videokarte { margin:0; width:100%; max-width:560px; padding:clamp(.75rem,3vw,2rem); background:var(--blatt); border-radius:8px; }
.videokarte video { width:100%; height:auto; object-fit:contain; border-radius:8px; background:var(--nacht); box-shadow:0 6px 18px rgb(31 62 45 / 16%); }
.videokarte figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; margin-top:1rem; font-size:.85rem; color:var(--text-leise); }
.videokarte .textlink { font-size:.85rem; }

@media (min-width:900px) {
 .videoabschnitt { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:3rem; }
 .videoabschnitt .sectionhead { margin-bottom:0; }
 .videoabschnitt .videokarte { justify-self:end; }
 .videokarte-hochkant { max-width:420px; }
 .videokarte video { display:block; width:auto; max-width:100%; max-height:min(75vh,620px); margin-inline:auto; }
}

/* Elterntexte und „Pädagogischer Mehrwert“: ruhige Hervorhebung ohne Plakette oder Siegel.
   Kopfzeile, kurze Begründung, Themenzeile und ein beiger Kasten mit offenen Gesprächsfragen. */
.elterntext { max-width:var(--zeilenbreite); color:var(--text-leise); }
.mehrwert-themen { color:var(--wald); }
.gespraech { padding:clamp(1.25rem,3vw,2rem); background:var(--blatt); border-radius:8px; }
.gespraech h3 { margin-bottom:.5rem; font-size:1.5rem; }
.gespraech ul { margin:1rem 0; padding-left:1.25rem; }
.gespraech li { margin-bottom:.6rem; }
.gespraech li::marker { color:var(--akzent); }
.gespraech .alter { margin-bottom:0; }
.gespraech ul + .alter { padding-top:1rem; border-top:1px solid var(--linie); }
.kartentext p.mehrwert-hinweis { margin:-.25rem 0 1rem; color:var(--wald); font-size:.85rem; font-weight:700; }
.mehrwert-hinweis span, .mehrwert-erklaerung span { color:var(--akzent); }
.mehrwert-erklaerung { max-width:var(--zeilenbreite); margin-top:1.25rem; font-size:.9rem; color:var(--text-leise); }
.mehrwert-erklaerung strong { color:var(--wald); }
@media (min-width:900px) {
 .mehrwert { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:3rem; }
 .mehrwert .sectionhead { margin-bottom:0; }
}