/*
  Johanna Kassel – portable HTML-Version
  Gestaltung zentral in dieser Datei. Die Inhalte stehen in index.html.
*/
/* dm-serif-display-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-regular.svg#DMSerifDisplay') format('svg'); /* Legacy iOS */
}

/* dm-serif-display-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-italic.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('/assets/fonts/DMSerifDisplay/dm-serif-display-v17-latin_latin-ext-italic.svg#DMSerifDisplay') format('svg'); /* Legacy iOS */
}
/* manrope-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/Manrope/manrope-v20-latin_latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/Manrope/manrope-v20-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/Manrope/manrope-v20-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root { --paper:#f7f2e9; --ink:#102e3c; --coral:#e75f52; --soft-coral:#ead8d1; --line:#b9c1bd; --serif:"DM Serif Display", Georgia, serif; --sans:"Manrope", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; } button { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; }
.site-header { position:sticky; top:0; z-index:40; display:flex; height:78px; align-items:center; justify-content:space-between; padding:0 clamp(1.25rem,4vw,4.5rem); border-bottom:1px solid rgba(16,46,60,.12); background:rgba(247,242,233,.94); backdrop-filter:blur(16px); }
.brand { display:inline-flex; align-items:center; gap:.7rem; font-family:var(--serif); font-size:1.42rem; letter-spacing:-.035em; }.brand-mark { width:34px; height:34px; object-fit:contain; }.desktop-nav { display:flex; align-items:center; gap:clamp(1rem,2.1vw,2.2rem); font-size:.76rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }.nav-link { position:relative; padding:.45rem 0; }.nav-link:after { position:absolute; bottom:.18rem; left:0; width:0; height:1px; background:var(--coral); content:""; transition:width .18s cubic-bezier(.23,1,.32,1); }.nav-link:hover:after { width:100%; }.nav-cta { display:inline-flex; gap:.42rem; align-items:center; padding:.55rem 0 .48rem; border-bottom:2px solid var(--coral); }.menu-toggle,.mobile-nav { display:none; }
.hero-section { position:relative; display:grid; grid-template-columns:minmax(0,.94fr) minmax(410px,1.06fr); min-height:min(690px,calc(100vh - 78px)); overflow:hidden; }.hero-copy { z-index:2; align-self:center; padding:clamp(4rem,8vw,8.5rem) clamp(1.3rem,6.8vw,9rem) clamp(4rem,8vw,8rem); }.eyebrow { display:flex; gap:.5rem; align-items:center; margin:0 0 1.35rem; font-size:.69rem; font-weight:800; line-height:1.4; letter-spacing:.13em; text-transform:uppercase; }.eyebrow > span { width:19px; height:2px; background:var(--coral); }.eyebrow.coral { color:#c6443d; }.eyebrow.light { color:rgba(255,255,255,.74); }.hero-copy h1,h2 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.055em; line-height:.91; }.hero-copy h1 { max-width:650px; font-size:clamp(4.1rem,7.7vw,7.35rem); } h1 em,h2 em { color:var(--coral); font-style:italic; }.hero-text { max-width:430px; margin:2.1rem 0 2rem; color:#3e5360; font-size:clamp(.95rem,1.15vw,1.07rem); line-height:1.8; }.hero-actions { display:flex; flex-wrap:wrap; gap:1.35rem; align-items:center; }.button-primary { display:inline-flex; gap:.7rem; align-items:center; justify-content:center; padding:.98rem 1.2rem; color:#fff; background:var(--ink); box-shadow:6px 6px 0 var(--coral); font-size:.75rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s cubic-bezier(.23,1,.32,1); }.button-primary:hover { box-shadow:3px 3px 0 var(--coral); transform:translate(3px,3px); }.button-primary:active { transform:scale(.97); }.text-action { display:inline-flex; gap:.6rem; align-items:center; padding-bottom:.3rem; border-bottom:1px solid var(--ink); font-size:.76rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.text-action span { color:var(--coral); font-size:1.15rem; }.hero-visual { position:relative; min-height:100%; overflow:hidden; }.hero-visual:after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,242,233,.46),transparent 32%); content:""; }.hero-visual img { display:block; width:100%; height:100%; min-height:650px; object-fit:cover; object-position:66% center; filter:saturate(.88); }.hero-sticker { position:absolute; z-index:2; top:15.5%; left:8%; padding:1rem 1.05rem .95rem; color:#fff; background:var(--coral); box-shadow:6px 7px 0 rgba(16,46,60,.18); font-family:var(--serif); font-size:clamp(1.2rem,1.75vw,1.65rem); line-height:.92; transform:rotate(-7deg); }.hero-path { position:absolute; z-index:2; right:9%; bottom:10%; display:flex; flex-direction:column; gap:6px; align-items:center; }.hero-path:before,.hero-path:after { width:1px; height:38px; background:var(--ink); content:""; }.hero-path i { display:block; width:7px; height:7px; border:1px solid var(--ink); border-radius:50%; background:var(--coral); }.hero-note { position:absolute; z-index:3; bottom:2.3rem; left:clamp(1.4rem,4.3vw,5.5rem); padding-left:.9rem; border-left:2px solid var(--coral); font-family:var(--serif); font-size:.98rem; line-height:1.05; }
.statement-band { display:flex; min-height:184px; align-items:center; justify-content:space-between; padding:2.5rem clamp(1.3rem,8vw,10rem); border-top:5px solid var(--coral); color:var(--paper); background:var(--ink); }.statement-band p { margin:0; font-family:var(--serif); font-size:clamp(2rem,4vw,4rem); line-height:.96; letter-spacing:-.045em; }.statement-band strong { color:var(--coral); font-weight:400; font-style:italic; }.statement-arrow { color:var(--coral); font-family:Georgia,serif; font-size:clamp(3.5rem,8vw,7rem); }
.content-section { position:relative; padding:clamp(5rem,10vw,10rem) clamp(1.3rem,8.1vw,10rem); }.section-kicker { display:flex; gap:.75rem; align-items:center; font-size:.69rem; font-weight:800; letter-spacing:.125em; text-transform:uppercase; }.section-kicker span { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:50%; font-size:.62rem; letter-spacing:0; }.section-kicker.light { color:var(--paper); }.thread-rail { position:absolute; z-index:3; display:flex; flex-direction:column; gap:7px; align-items:center; }.thread-rail:before,.thread-rail:after { width:1px; height:42px; background:currentColor; content:""; opacity:.52; }.thread-rail i { width:6px; height:6px; border:1px solid currentColor; border-radius:50%; background:currentColor; }.book-rail,.about-rail { top:5rem; right:clamp(1.3rem,4vw,4rem); color:var(--coral); }.why-rail { top:4.5rem; right:clamp(1.3rem,4vw,4rem); color:var(--coral); }.resources-rail { top:4rem; right:clamp(1.3rem,4vw,4rem); color:#a13732; }
.book-layout { display:grid; grid-template-columns:minmax(330px,.9fr) minmax(360px,1.1fr); gap:clamp(3rem,9vw,12rem); align-items:center; max-width:1170px; margin:clamp(2.8rem,5vw,5rem) auto 0; }.book-visual { position:relative; display:flex; min-height:600px; align-items:center; justify-content:center; }.book-paper { position:absolute; background:#f0dfcf; box-shadow:5px 7px 0 rgba(16,46,60,.08); }.book-paper-one { width:75%; height:77%; transform:rotate(7deg); }.book-paper-two { width:63%; height:85%; background:var(--paper); transform:rotate(-10deg); }.book-sun { position:absolute; width:clamp(300px,34vw,470px); height:clamp(300px,34vw,470px); border-radius:50%; background:#e7d0c8; }.book-cover { position:relative; z-index:2; width:min(285px,66%); box-shadow:21px 25px 0 var(--ink),25px 28px 0 rgba(16,46,60,.14); transform:rotate(-4deg); }.book-caption { position:absolute; z-index:3; bottom:10%; left:0; max-width:130px; margin:0; padding:.9rem .85rem; color:var(--ink); background:var(--paper); box-shadow:3px 4px 0 rgba(16,46,60,.14); font-family:var(--serif); font-size:1.05rem; line-height:1.05; transform:rotate(5deg); }.margin-note { margin:0; color:#c6443d; font-family:var(--serif); font-size:1.08rem; font-style:italic; line-height:.92; transform:rotate(-5deg); }.book-note { position:absolute; z-index:4; top:8%; right:0; padding-left:.6rem; border-left:2px solid var(--coral); }.book-copy h2 { margin-top:.9rem; font-size:clamp(3.4rem,6vw,6rem); }.book-subtitle { max-width:465px; margin:1.8rem 0; font-size:1.12rem; font-weight:700; line-height:1.55; }.book-details { display:grid; grid-template-columns:max-content 1fr; gap:.55rem 1.25rem; max-width:440px; padding:1.25rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.8rem; }.book-details span,.upcoming-info span { color:#66757b; }.book-details strong { font-weight:800; }.book-description { max-width:510px; margin:1.7rem 0; color:#41535c; font-size:.95rem; line-height:1.8; }.placeholder-note { margin:1rem 0 0; color:#6a6962; font-size:.68rem; line-height:1.55; }.upcoming-book { display:grid; grid-template-columns:1.2fr .7fr auto; gap:2rem; align-items:end; max-width:1170px; margin:5.5rem auto 0; padding:2rem 0 0; border-top:1px solid var(--line); }.coming-label { display:block; margin-bottom:.65rem; color:#c6443d; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.upcoming-book h3 { margin:0; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.55rem); font-weight:400; letter-spacing:-.04em; line-height:.98; }.upcoming-info { display:grid; grid-template-columns:1fr 1fr; gap:.4rem 1rem; font-size:.72rem; }.upcoming-info strong { text-align:right; }.coming-arrow { align-self:center; color:var(--coral); font-family:Georgia,serif; font-size:3.3rem; }
.why-section { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(2rem,9vw,10rem); overflow:hidden; padding:clamp(5rem,10vw,10rem) clamp(1.3rem,8.1vw,10rem); color:#fff; background:var(--ink); }.why-pattern { position:absolute; z-index:0; inset:0; background:url("assets/media/johanna-kassel-confidence-pattern_72c5478c.jpg") center/cover; mix-blend-mode:screen; opacity:.14; }.why-heading,.why-reasons,.why-side-note { position:relative; z-index:1; }.why-heading h2 { max-width:550px; margin-top:1.5rem; color:var(--paper); font-size:clamp(3.4rem,6.3vw,6.5rem); }.why-heading p { max-width:430px; margin-top:2rem; color:rgba(247,242,233,.77); line-height:1.8; }.why-reasons { display:flex; flex-direction:column; padding-top:.2rem; }.reason { position:relative; display:grid; grid-template-columns:55px 1fr; column-gap:1.25rem; padding:1.45rem 0; }.reason-number { grid-row:span 2; color:var(--coral); font-family:var(--serif); font-size:1.4rem; }.reason h3 { margin:0; font-size:1.02rem; line-height:1.35; }.reason p { margin:.5rem 0 0; color:rgba(247,242,233,.72); font-size:.84rem; line-height:1.7; }.reason-line { position:absolute; right:0; bottom:0; left:0; height:1px; background:rgba(247,242,233,.22); }.why-side-note { position:absolute; right:3.2%; bottom:4.2%; color:var(--coral); font-family:var(--serif); font-size:1.2rem; font-style:italic; line-height:.95; transform:rotate(-5deg); }
.about-section { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); gap:clamp(3rem,9vw,11rem); align-items:center; max-width:1440px; margin:auto; }.about-image-wrap { position:relative; }.portrait-frame { position:relative; width:min(100%,430px); aspect-ratio:.78; overflow:hidden; background:#d7dad2; }.portrait-frame:after { position:absolute; right:-15%; bottom:-7%; width:80%; height:26%; background:var(--coral); content:""; transform:rotate(-11deg); }.portrait-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }.portrait-label { position:absolute; right:-2.2rem; bottom:2.1rem; padding:1rem 1.1rem; color:#fff; background:var(--ink); font-family:var(--serif); font-size:1.35rem; line-height:1; }.portrait-label span { display:block; margin-bottom:.25rem; color:#e4a69e; font-family:var(--sans); font-size:.61rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.about-copy h2 { max-width:720px; margin:1.6rem 0 2rem; font-size:clamp(3rem,5.2vw,5.4rem); }.about-copy > p:not(.placeholder-note) { max-width:650px; color:#40525b; line-height:1.85; }.about-quote { display:grid; grid-template-columns:44px 1fr; gap:.25rem; max-width:640px; margin-top:2.3rem; padding:1.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.about-quote span { color:var(--coral); font-family:var(--serif); font-size:3.3rem; line-height:.75; }.about-quote p { margin:0; font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.12; }.about-note { margin:1.1rem 0 -.1rem 3.2rem; }.about-placeholder { max-width:570px; }
.resources-section { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr); column-gap:clamp(2rem,7vw,8rem); row-gap:2.2rem; overflow:hidden; padding:clamp(5rem,8vw,8.5rem) clamp(1.3rem,8.1vw,10rem); background:var(--soft-coral); }.resources-photo { position:absolute; z-index:0; inset:0 0 0 57%; background:url("assets/media/johanna-kassel-resources-still-life_453e98e7.jpg") center right/cover; mix-blend-mode:multiply; opacity:.38; }.resources-intro,.download-list,.tips-panel { position:relative; z-index:1; }.resources-intro h2 { margin-top:1.4rem; font-size:clamp(3.4rem,6vw,6rem); }.resources-intro > p { max-width:460px; color:#3c4850; line-height:1.75; }.download-list { display:flex; grid-row:2; flex-direction:column; max-width:680px; border-top:1px solid rgba(16,46,60,.32); }.download-item { display:grid; grid-template-columns:52px 1fr auto; gap:.65rem; align-items:center; padding:1.25rem 0; border-bottom:1px solid rgba(16,46,60,.32); transition:padding .18s cubic-bezier(.23,1,.32,1),color .18s cubic-bezier(.23,1,.32,1); }.download-item:hover { padding-left:.6rem; color:#a13732; }.download-index { color:#a13732; font-family:var(--serif); font-size:1.2rem; }.download-name { font-size:.9rem; font-weight:800; }.download-name small { display:block; margin-top:.25rem; color:#4a5a61; font-size:.67rem; font-weight:600; }.tips-panel { align-self:end; padding:2.4rem; background:var(--paper); box-shadow:11px 11px 0 var(--ink); }.tips-panel h3 { margin:0 0 1.1rem; font-family:var(--serif); font-size:2.2rem; font-weight:400; letter-spacing:-.04em; }.tips-panel a { display:flex; gap:1rem; justify-content:space-between; padding:.8rem 0; border-top:1px solid #c4c6be; font-size:.78rem; font-weight:800; }.tips-panel a:hover { color:#c6443d; }.resources-note { position:absolute; z-index:2; right:clamp(2rem,7vw,8rem); bottom:2.4rem; padding-left:.7rem; border-left:2px solid var(--coral); }
.upcoming-books { max-width:1170px; margin:clamp(4.8rem,8vw,8rem) auto 0; padding-top:clamp(2.2rem,4vw,4rem); border-top:1px solid var(--line); }
.upcoming-heading { display:grid; grid-template-columns:minmax(0,.9fr) minmax(260px,.7fr); column-gap:clamp(2rem,8vw,9rem); align-items:end; }
.upcoming-heading h3 { margin:0; font-family:var(--serif); font-size:clamp(2.5rem,5vw,4.7rem); font-weight:400; letter-spacing:-.05em; line-height:.9; }
.upcoming-heading h3 em { color:var(--coral); font-style:italic; }
.upcoming-heading > p { max-width:365px; margin:0 0 .35rem; color:#52636a; font-size:.88rem; line-height:1.7; }
.next-book-card { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr); gap:clamp(2.5rem,7vw,8rem); align-items:center; margin-top:clamp(2.4rem,5vw,4.5rem); padding:clamp(1.8rem,4vw,4rem); color:var(--paper); background:var(--ink); box-shadow:12px 12px 0 var(--coral); }
.future-cover { position:relative; display:flex; min-height:330px; align-items:center; justify-content:center; padding:1.5rem; background:#e7d0c8; }
.future-cover:before,.future-cover:after { position:absolute; background:rgba(255,255,255,.54); content:""; }
.future-cover:before { top:11%; left:11%; width:66%; height:79%; transform:rotate(-8deg); }
.future-cover:after { right:10%; bottom:10%; width:68%; height:76%; background:var(--paper); transform:rotate(7deg); }
.future-cover-placeholder { position:relative; z-index:2; display:grid; width:min(195px,74%); aspect-ratio:.68; place-items:center; border:1px solid rgba(16,46,60,.2); color:var(--ink); background:linear-gradient(135deg,#f7f2e9 0%,#e9d8d0 100%); box-shadow:13px 16px 0 rgba(16,46,60,.56); font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:.9; text-align:center; transform:rotate(-4deg); }
.future-cover-placeholder:before { position:absolute; top:1.1rem; right:1.1rem; left:1.1rem; height:1px; background:var(--coral); content:""; }
.future-cover-placeholder i { position:absolute; right:1.05rem; bottom:1.05rem; width:24px; height:24px; border:2px solid var(--coral); border-left:0; border-radius:0 50% 50% 0; transform:rotate(-40deg); }
.future-cover-image { position:relative; z-index:2; display:block; width:min(195px,74%); box-shadow:13px 16px 0 rgba(16,46,60,.56); transform:rotate(-4deg); }
.cover-tab { position:absolute; z-index:3; top:1.1rem; left:1.1rem; padding:.45rem .55rem; color:#fff; background:var(--coral); font-size:.59rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-4deg); }
.next-book-copy { max-width:600px; }
.book-status { display:inline-flex; margin:0 0 1rem; padding:.44rem .62rem; border:1px solid rgba(247,242,233,.38); color:#f7c6bf; font-size:.63rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.next-book-copy h4 { margin:0; color:var(--paper); font-family:var(--serif); font-size:clamp(2.6rem,4.8vw,4.7rem); font-weight:400; letter-spacing:-.055em; line-height:.9; }
.next-book-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:1.65rem 0; padding:1rem 0; border-top:1px solid rgba(247,242,233,.25); border-bottom:1px solid rgba(247,242,233,.25); }
.next-book-details div { display:grid; gap:.3rem; }
.next-book-details dt { color:#e8a79f; font-size:.63rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.next-book-details dd { margin:0; color:#fff; font-size:.78rem; font-weight:700; line-height:1.5; }
.next-book-description { margin:0; color:rgba(247,242,233,.77); font-size:.88rem; line-height:1.75; }
.next-book-link { margin-top:1.55rem; border-color:#f7f2e9; color:#f7f2e9; }
.next-book-link:hover { color:var(--ink); background:var(--paper); }
.release-switch-note { margin:1rem 0 0; color:#e8a79f; font-size:.66rem; line-height:1.55; }
.release-switch-note code { padding:.08rem .25rem; color:#fff; background:rgba(247,242,233,.14); }

/* Veröffentlichungsvariante: .next-book-card erhält zusätzlich die Klasse is-published. */
.next-book-card.is-published { color:var(--ink); background:#e9d8d0; box-shadow:12px 12px 0 var(--ink); }
.next-book-card.is-published .book-status { border-color:rgba(16,46,60,.28); color:#b6423c; background:rgba(255,255,255,.38); }
.next-book-card.is-published .next-book-copy h4,.next-book-card.is-published .next-book-details dd { color:var(--ink); }
.next-book-card.is-published .next-book-details { border-color:rgba(16,46,60,.25); }
.next-book-card.is-published .next-book-details dt,.next-book-card.is-published .release-switch-note { color:#9e3d37; }
.next-book-card.is-published .next-book-description { color:#354952; }
.next-book-card.is-published .next-book-link { border-color:var(--ink); color:var(--ink); }
.next-book-card.is-published .next-book-link:hover { color:#fff; background:var(--ink); }

@media (max-width:900px) { .upcoming-heading,.next-book-card { grid-template-columns:1fr; }.upcoming-heading { gap:1.3rem; }.upcoming-heading > p { max-width:470px; }.next-book-card { gap:2rem; }.future-cover { min-height:280px; max-width:440px; }.next-book-copy h4 { font-size:clamp(2.8rem,9vw,4.8rem); } }
@media (max-width:560px) { .upcoming-books { margin-top:4rem; }.upcoming-heading h3 { font-size:clamp(2.7rem,13vw,4rem); }.next-book-card { padding:1.35rem; box-shadow:7px 7px 0 var(--coral); }.next-book-card.is-published { box-shadow:7px 7px 0 var(--ink); }.future-cover { min-height:250px; }.next-book-details { grid-template-columns:1fr; gap:.85rem; }.next-book-copy h4 { font-size:clamp(2.5rem,12vw,3.75rem); } }
.newsletter-section { padding:clamp(5rem,10vw,9rem) clamp(1.3rem,8.1vw,10rem); background:var(--paper); text-align:center; }.newsletter-section .eyebrow { justify-content:center; }.newsletter-section h2 { font-size:clamp(3.8rem,7.1vw,7rem); }.newsletter-section > p:not(.eyebrow) { max-width:520px; margin:1.8rem auto; color:#455861; font-size:.91rem; line-height:1.8; }.button-outline { display:inline-flex; gap:.65rem; align-items:center; padding:.9rem 1.1rem; border:1px solid var(--ink); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transition:background .18s cubic-bezier(.23,1,.32,1),color .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1); }.button-outline:hover { color:#fff; background:var(--ink); transform:translateY(-2px); }
.site-footer { display:grid; grid-template-columns:1fr .55fr 1.05fr; gap:3rem; padding:4rem clamp(1.3rem,8.1vw,10rem) 1.6rem; color:var(--paper); background:var(--ink); }.footer-brand { display:flex; flex-direction:column; gap:1.1rem; }.footer-brand img { width:52px; height:52px; object-fit:contain; }.footer-brand p { margin:0; font-family:var(--serif); font-size:1.8rem; line-height:1; }.footer-brand em { color:var(--coral); }.footer-links { display:flex; flex-direction:column; gap:.85rem; align-self:start; padding-top:.6rem; font-size:.76rem; font-weight:700; }.footer-links a:hover { color:var(--coral); }.imprint { align-self:start; padding-left:2rem; border-left:1px solid rgba(247,242,233,.24); color:rgba(247,242,233,.78); font-size:.69rem; line-height:1.65; }.imprint p { margin:0 0 1rem; }.imprint strong { color:#fff; }.imprint-note { color:#e4a69e; }.footer-bottom { display:flex; grid-column:1 / -1; gap:1rem; justify-content:space-between; padding-top:1.5rem; border-top:1px solid rgba(247,242,233,.2); color:rgba(247,242,233,.58); font-size:.64rem; }.footer-bottom a { color:#e4a69e; }
@media (prefers-reduced-motion:no-preference) { .hero-copy,.hero-visual,.book-copy,.about-copy { animation:rise-in .56s cubic-bezier(.23,1,.32,1) both; }.hero-visual { animation-delay:.08s; }.book-copy,.about-copy { animation-delay:.1s; } @keyframes rise-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } }
@media (max-width:900px) { .desktop-nav { display:none; }.menu-toggle { display:grid; width:42px; height:42px; place-items:center; padding:.4rem; border:0; color:var(--ink); background:transparent; }.menu-icon,.menu-icon:before,.menu-icon:after { display:block; width:24px; height:2px; background:currentColor; content:""; transition:transform .18s ease,opacity .18s ease; }.menu-icon { position:relative; }.menu-icon:before { position:absolute; top:-7px; }.menu-icon:after { position:absolute; top:7px; }.menu-toggle[aria-expanded="true"] .menu-icon { background:transparent; }.menu-toggle[aria-expanded="true"] .menu-icon:before { top:0; transform:rotate(45deg); }.menu-toggle[aria-expanded="true"] .menu-icon:after { top:0; transform:rotate(-45deg); }.mobile-nav { position:absolute; top:78px; right:0; left:0; z-index:50; display:none; flex-direction:column; gap:1rem; padding:1.4rem 1.3rem 1.6rem; border-bottom:1px solid rgba(16,46,60,.14); background:var(--paper); box-shadow:0 14px 20px rgba(16,46,60,.08); font-size:.9rem; font-weight:800; }.mobile-nav.is-open { display:flex; }.mobile-book-link { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; padding-top:1rem; border-top:1px solid var(--line); color:#c6443d; }.hero-section,.book-layout,.why-section,.about-section { grid-template-columns:1fr; }.hero-section { min-height:auto; }.hero-copy { padding-top:5.2rem; padding-bottom:4rem; }.hero-visual,.hero-visual img { min-height:430px; }.hero-note { display:none; }.book-layout { gap:2.3rem; }.book-visual { min-height:470px; }.book-caption { left:7%; }.upcoming-book { grid-template-columns:1fr auto; }.upcoming-info { grid-column:1; max-width:350px; }.coming-arrow { grid-column:2; grid-row:1 / span 2; }.why-section { gap:3rem; }.why-side-note { right:8%; }.about-section { max-width:650px; }.about-image-wrap { width:min(83%,430px); }.resources-section { grid-template-columns:1fr; }.resources-photo { inset:0; background-position:right center; opacity:.22; }.download-list { grid-row:auto; }.tips-panel { max-width:470px; }.resources-note { position:relative; right:auto; bottom:auto; grid-row:4; justify-self:end; margin-top:-1.2rem; }.site-footer { grid-template-columns:1fr 1fr; }.imprint { grid-column:1 / -1; padding:2rem 0 0; border-top:1px solid rgba(247,242,233,.24); border-left:0; } }
@media (max-width:560px) { .site-header { height:70px; }.brand { font-size:1.25rem; }.brand-mark { width:30px; height:30px; }.mobile-nav { top:70px; }.hero-copy h1 { font-size:clamp(3.7rem,17.4vw,5.1rem); }.hero-copy { padding-top:4.2rem; }.hero-visual,.hero-visual img { min-height:345px; }.hero-sticker { top:9%; left:7%; }.statement-band { min-height:148px; }.statement-arrow,.thread-rail,.why-side-note { display:none; }.book-visual { min-height:390px; }.book-sun { width:300px; height:300px; }.book-paper-one { width:82%; height:72%; }.book-cover { width:180px; box-shadow:14px 16px 0 var(--ink),17px 19px 0 rgba(16,46,60,.14); }.book-caption { bottom:3%; font-size:.88rem; }.book-note { top:4%; right:2%; font-size:.92rem; }.upcoming-book { gap:1rem; margin-top:4rem; }.upcoming-info { font-size:.67rem; }.portrait-label { right:-1.3rem; bottom:1.2rem; font-size:1.05rem; }.tips-panel { padding:1.8rem 1.45rem; box-shadow:7px 7px 0 var(--ink); }.site-footer { grid-template-columns:1fr; gap:2.2rem; }.footer-bottom,.hero-actions { flex-direction:column; align-items:flex-start; } }