/* Seiten-CSS aus dem Prototyp (buch-spinnennetz), Entwurf einzige Fassung */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#FFFFFF; --text:#000000; --muted:#4A5360; --line:#D5DDE6; --paper:#F2F6FA;
  --blue:#0070C0; --blue-dk:#005A9C; --sky:#00B0F0; --soft:#E6F2FB; --stop:#262626; --on-stop:#FFFFFF;
  --font:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --w:1160px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14181D; --text:#F2F5F8; --muted:#AAB4BF; --line:#2C343D; --paper:#1A2028;
    --blue:#3C9DE2; --blue-dk:#2C88CB; --sky:#33C3F5; --soft:#1A2733; --stop:#F2F5F8; --on-stop:#14181D;
  }
}
:root[data-theme="dark"]{
  --bg:#14181D; --text:#F2F5F8; --muted:#AAB4BF; --line:#2C343D; --paper:#1A2028;
  --blue:#3C9DE2; --blue-dk:#2C88CB; --sky:#33C3F5; --soft:#1A2733; --stop:#F2F5F8; --on-stop:#14181D;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4.5rem);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:300;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:600;line-height:1.15;margin:0}
p{margin:0}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 1.5rem}
.btn{display:inline-block;background:var(--blue);color:#fff;border:2px solid var(--blue);padding:.7rem 1.25rem;border-radius:4px;font-weight:600;text-decoration:none;font-size:1rem;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.btn.line{background:transparent;color:var(--blue)}
.btn.line:hover{background:var(--soft)}

/* ---------- Entwurfswahl ---------- */
.drafts{background:var(--paper);border-bottom:1px solid var(--line);font-size:.93rem}
.drafts .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding-top:.7rem;padding-bottom:.7rem}
.drafts .lbl{color:var(--muted)}
.drafts [role=tablist]{display:flex;flex-wrap:wrap;gap:.4rem}
.drafts [role=tab]{font:inherit;font-weight:400;padding:.4rem .9rem;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer}
.drafts [role=tab][aria-selected="true"]{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600}

/* ---------- Kopf ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.mark{font-weight:600;font-size:1.3rem;letter-spacing:.01em;color:var(--text);text-decoration:none}
.mark span{color:var(--blue)}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{color:var(--text);text-decoration:none;font-weight:400;font-size:.97rem}
.nav a:hover{color:var(--blue)}
.nav .btn{color:#fff;padding:.5rem 1rem}
@media (max-width:760px){.nav a:not(.btn){display:none}}


.s42-bar{background:#1f1f1f;color:#fff;font-size:.95rem;line-height:1.45}
.s42-bar .in{max-width:1160px;margin:0 auto;padding:.6rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem}
.s42-bar .in::before{content:"";width:.6rem;height:.6rem;background:#FF4040;border-radius:1px;flex:none}
.s42-bar b{font-weight:600}
.s42-bar a{color:#fff;text-underline-offset:3px}
.s42-bar a.tel{font-weight:600;white-space:nowrap}
.s42-bar .more{margin-left:auto;color:#d0d0d0}
@media (max-width:640px){.s42-bar .more{margin-left:0}}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.sec{padding:5rem 0;border-top:1px solid var(--line)}
.sec-head{max-width:44rem;margin-bottom:2.5rem}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.015em}
.sec-head p{margin-top:1rem;color:var(--muted);font-size:1.12rem}
.small{font-size:.88rem;color:var(--muted)}

/* Hero */
.hero{background:#14191f;color:#fff;position:relative;overflow:hidden}
.hero .web{position:absolute;inset:0;width:100%;height:100%;opacity:.16;pointer-events:none}
.hero .web path,.hero .web circle{fill:none;stroke:#00B0F0;stroke-width:1}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem 3rem;align-items:center;padding-top:4.5rem;padding-bottom:4.5rem}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-top:3rem}}
.hero .kick{color:#7fd6f7;font-weight:600;font-size:1rem}
.hero h1{font-size:clamp(2.6rem,6vw,4.8rem);letter-spacing:-.025em;margin-top:.4rem}
.hero .claim{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:300;line-height:1.3;margin-top:1rem;max-width:26ch;color:#e6eef5}
.hero .lead{margin-top:1.5rem;max-width:36rem;font-size:1.1rem;color:#c9d4de}
.hero .actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
.hero .btn.line{color:#fff;border-color:#fff;background:transparent}
.hero .btn.line:hover{background:rgba(255,255,255,.08)}
.hero .meta{margin-top:1.5rem;font-size:.95rem;color:#aab6c1}
.hero .meta b{color:#fff;font-weight:600}
.hero .cover{justify-self:center;width:min(100%,380px);filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
@media (max-width:860px){.hero .cover{width:min(70%,300px);order:-1}}

/* Warum ein Roman */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}
.why p + p{margin-top:1rem}
.why .side{border-left:4px solid var(--blue);padding-left:1.5rem}
.why .side b{display:block;font-weight:600;font-size:1.2rem;margin-bottom:.4rem}
@media (max-width:820px){.why{grid-template-columns:1fr;gap:2rem}}

/* Drei Teile */
.parts{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid var(--blue)}
.parts li{counter-increment:p;padding:1.5rem 1.75rem 0 0}
.parts li + li{padding-left:1.75rem;border-left:1px solid var(--line)}
.parts .n{color:var(--blue);font-weight:600}
.parts .n::before{content:"Teil " counter(p)}
.parts h3{font-size:1.35rem;margin:.3rem 0 .2rem}
.parts .who{color:var(--muted);font-size:.95rem}
.parts p.x{margin-top:.8rem}
.parts .goal{margin-top:1rem;font-size:.95rem;font-weight:600}
@media (max-width:860px){.parts{grid-template-columns:1fr}.parts li + li{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:1.5rem}}

.quote{background:#262626;color:#fff;padding:4rem 0}
.quote blockquote{margin:0;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;font-weight:300;max-width:30ch}
.quote blockquote b{color:#FF4040;font-weight:600}
.quote p{margin-top:1rem;color:#c4c4c4}

/* Personas */
.persona-sw{display:flex;flex-wrap:wrap;gap:.5rem}
.persona-sw button{font:inherit;font-weight:400;font-size:1rem;padding:.6rem 1.1rem;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer}
.persona-sw button:hover{border-color:var(--blue)}
.persona-sw button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pcard{margin-top:1.75rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:opacity .2s}
.pcard.swap{opacity:0}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}}
.pcard > div{padding:1.4rem 1.5rem}
.pcard > div + div{border-left:1px solid var(--line)}
.pcard .lb{font-size:.88rem;color:var(--blue);font-weight:600}
.pcard h3{font-size:1.15rem;margin:.35rem 0 .4rem}
.pcard p{font-size:.98rem}
.pcard .next{background:var(--soft)}
.pcard .next a{display:inline-block;margin-top:.8rem;font-weight:600}
@media (max-width:960px){.pcard{grid-template-columns:1fr 1fr}.pcard > div:nth-child(3){border-left:0}.pcard > div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.pcard{grid-template-columns:1fr}.pcard > div + div{border-left:0;border-top:1px solid var(--line)}}

/* Danach */
.after{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:900px){.after{grid-template-columns:1fr}}
.after > div{border:1px solid var(--line);border-radius:6px;padding:1.5rem;display:flex;flex-direction:column}
.after img{width:100%;max-width:240px;height:auto;align-self:flex-start;border-radius:3px;margin-bottom:1rem;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.after .lb{font-size:.88rem;color:var(--muted)}
.after h3{font-size:1.2rem;margin:.25rem 0 .5rem}
.after .go{margin-top:auto;padding-top:1rem;font-weight:600}

/* Autor */
.author{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2.5rem;align-items:start}
.author img{width:200px;height:200px;border-radius:50%;object-fit:cover;border:5px solid var(--soft)}
.author h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.author .role{color:var(--blue);font-weight:600;margin-top:.3rem}
.author p.x{margin-top:1rem;max-width:44rem}
.author ul{list-style:none;margin:1.25rem 0 0;padding:0;max-width:44rem}
.author li{padding:.55rem 0;border-top:1px solid var(--line);font-size:.97rem}
@media (max-width:700px){.author{grid-template-columns:1fr}.author img{width:150px;height:150px}}

/* Bestellen */
.order{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem;align-items:center}
@media (max-width:820px){.order{grid-template-columns:1fr}}
.order dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem}
.order dt{font-weight:600}
.order dd{margin:0}
.order .actions{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem 1rem}
.order .cv{width:min(100%,260px);justify-self:center;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.foot{border-top:1px solid var(--line);padding:2.5rem 0 3rem;color:var(--muted);font-size:.9rem}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
.foot b{color:var(--text);font-weight:600}
.foot a{color:var(--muted)}

/* Ehemalige Inline-Styles (CSP: keine style-Attribute) */
.st1{margin-bottom:1.25rem !important}
.st2{margin-top:1rem !important}
.st3{margin-bottom:1.5rem !important}