:root{
    --ink:#05070c;
    --ink2:#0b111d;
    --paper:#f3efe6;
    --paper-ink:#1d1a14;
    --cyan:#7bcbff;
    --cyan-dim:#3f5c72;
    --amber:#e0b56c;
    --text:#e7ecf3;
    --text-muted:#93a1b4;
    --rule:rgba(255,255,255,0.14);
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --max: 720px;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
  .prose{max-width:var(--max); margin:0 auto;}

  /* Top bar */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    background:rgba(5,7,12,0.86);
    backdrop-filter:saturate(140%) blur(6px);
    border-bottom:1px solid var(--rule);
  }
  .topbar .mark{
    font-family:var(--sans); font-weight:800; letter-spacing:0.14em;
    font-size:15px; color:var(--text); text-decoration:none;
  }
  .btn{
    display:inline-block;
    padding:11px 22px;
    border-radius:3px;
    font-size:15px; font-weight:600;
    text-decoration:none;
    border:1px solid var(--cyan);
    color:var(--ink);
    background:var(--cyan);
    transition:background .15s ease, color .15s ease;
  }
  .btn:hover{background:transparent; color:var(--cyan);}
  .btn.ghost{
    background:transparent; color:var(--text); border-color:var(--rule);
  }
  .btn.ghost:hover{border-color:var(--cyan); color:var(--cyan);}
  .topbar .btn{padding:9px 18px; font-size:14px;}

  /* Hero */
  .hero{
    display:flex;
    flex-direction:column;
    gap:36px;
    padding:52px 24px 64px;
    max-width:1080px; margin:0 auto;
  }
  .hero-text{order:2; flex:1;}
  .hero-image{order:1; max-width:280px; width:100%; margin:0 auto;}
  .hero-image img{width:100%; height:auto; border-radius:2px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.7);}
  .kicker{
    font-size:14px; color:var(--cyan); font-weight:600; margin:0 0 14px;
  }
  .wordmark{
    font-family:var(--sans);
    font-weight:800;
    font-size:clamp(52px, 15vw, 96px);
    line-height:0.92;
    letter-spacing:-0.01em;
    margin:0 0 18px;
    position:relative;
    display:inline-block;
    color:var(--text);
  }
  .wordmark::after{
    content:"CLEAR";
    position:absolute; left:3px; top:2px;
    color:var(--cyan);
    z-index:-1;
    opacity:0.55;
    clip-path:inset(0 0 55% 0);
  }
  .hero .tagline{
    font-family:var(--serif);
    font-weight:400;
    font-style:italic;
    font-size:clamp(21px, 4vw, 28px);
    color:var(--text);
    margin:0 0 18px;
    max-width:22ch;
  }
  .hero p.lead{
    color:var(--text-muted);
    font-size:16px;
    margin:0 0 28px;
    max-width:42ch;
  }
  .hero-ctas{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
  .badge{
    display:inline-block;
    font-size:13px; color:var(--text-muted);
    border:1px solid var(--rule); border-radius:20px;
    padding:7px 14px; margin-top:22px;
  }
  .badge b{color:var(--cyan); font-weight:600;}

  section{padding:64px 0;}
  section h2{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(26px, 4vw, 34px);
    margin:0 0 28px;
  }

  /* Klappentext */
  .section-paper{background:var(--paper); color:var(--paper-ink);}
  .section-paper h2{color:var(--paper-ink);}
  .section-paper p{font-size:17px; margin:0 0 18px; max-width:62ch;}
  .pull{
    font-family:var(--serif); font-style:italic;
    font-size:clamp(22px,3.6vw,28px);
    line-height:1.4;
    border-left:3px solid var(--amber);
    padding-left:22px;
    margin:34px 0;
    max-width:56ch;
    color:var(--paper-ink);
  }

  /* Quotes */
  .quotes{
    display:flex; flex-wrap:wrap; gap:16px;
  }
  .quote{
    margin:0;
    background:var(--ink2);
    border:1px solid var(--rule);
    border-radius:2px;
    padding:28px 26px;
    flex:1 1 100%;
  }
  .quote p{
    font-size:18px; line-height:1.5; margin:0 0 14px;
    font-family:var(--serif);
  }
  .quote cite{
    font-style:normal; font-size:13px; color:var(--cyan);
    letter-spacing:0.04em;
  }
  .hl{color:var(--cyan);}

  /* Epilog */
  .voices{
    display:flex; flex-wrap:wrap; gap:16px; margin-top:30px;
  }
  .voice{
    background:var(--ink); border:1px solid var(--rule); border-radius:2px;
    padding:26px; flex:1 1 100%;
  }
  .voice .who{
    font-size:13px; letter-spacing:0.08em; color:var(--text-muted);
    margin:0 0 10px;
  }
  .voice p{
    font-family:var(--serif); font-style:italic;
    font-size:17px; margin:0; color:var(--text);
  }

  /* Autor */
  .author{display:flex; flex-direction:column; gap:18px;}
  .author p{font-size:17px; max-width:60ch;}

  /* Kaufen */
  .section-buy{text-align:center;}
  .buy-row{
    display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:26px 0 18px;
  }
  .isbn{color:var(--text-muted); font-size:14px;}
  .note{color:var(--text-muted); font-size:14px; margin-top:10px;}

  footer{
    border-top:1px solid var(--rule);
    padding:40px 24px 48px;
    color:var(--text-muted); font-size:13px;
  }
  footer .cols{
    display:flex; flex-direction:column; gap:28px;
    max-width:1080px; margin:0 auto;
  }
  footer .copyright{margin-top:20px; opacity:0.8;}

  @media (min-width:720px){
    .hero{flex-direction:row; align-items:center; padding-top:88px; padding-bottom:96px;}
    .hero-text{order:1; text-align:left; flex:1.15;}
    .hero-image{order:2; max-width:320px; width:320px; margin:0; flex:0 0 320px;}
    .hero p.lead{max-width:46ch;}
    .quote{flex:1 1 45%;}
    .voices{flex-wrap:nowrap;}
    .voice{flex:1 1 0;}
    footer .cols{flex-direction:row; justify-content:space-between; align-items:flex-start;}
    .paperback{flex-direction:row; text-align:left; gap:34px; padding:30px 38px;}
    .paperback img{width:170px;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
  }

  /* Kaufen-Bereich */
  .lead-small{color:var(--text-muted); max-width:50ch; margin:0 auto;}
  .paperback{display:flex; flex-direction:column; align-items:center; gap:18px; max-width:640px; margin:56px auto 0; padding:28px 24px; border:1px solid var(--rule); border-radius:3px; background:var(--ink2); text-align:center;}
  .paperback img{width:170px; height:auto;}
  .paperback h3{font-family:var(--serif); font-weight:400; font-size:23px; margin:0 0 10px;}
  .paperback p{margin:0 0 6px; color:var(--text-muted); font-size:16px;}
  .paperback .isbn{font-size:13px;}
  /* Fußzeile */
  .footer-nav{display:flex; flex-wrap:wrap;}
  .footer-nav a{color:var(--text); text-decoration:none; font-size:14px; margin-right:24px;}
  .footer-nav a:last-child{margin-right:0;}
  .footer-nav a:hover{color:var(--cyan);}
  /* Rechtliche Unterseiten */
  .page{padding:48px 24px 80px;}
  .page h1{font-family:var(--serif); font-weight:400; font-size:26px; font-size:clamp(25px,6.4vw,38px); margin:0 0 28px; overflow-wrap:anywhere;}
  .page h2{font-family:var(--serif); font-weight:400; font-size:21px; margin:36px 0 10px;}
  .page p, .page li{color:var(--text); font-size:16px; max-width:66ch; margin:0 0 12px;}
  .page ul{padding-left:22px; margin:0 0 12px;}
  .page address{font-style:normal; line-height:1.75; margin:0 0 18px;}
  .page a{color:var(--cyan);}
  .page .stand{color:var(--text-muted); font-size:14px; margin-top:36px;}

  @media (min-width:720px){
    .paperback{flex-direction:row; text-align:left; gap:34px; padding:30px 38px;}
    .paperback img{width:170px;}
  }


  /* Zusätze: Navigation, Badge als Link, Leseprobe */
  .topbar .right{display:flex; align-items:center; gap:18px;}
  .toplink{color:var(--text); text-decoration:none; font-size:14px;}
  .toplink:hover{color:var(--cyan);}
  a.badge{text-decoration:none;}
  a.badge:hover{border-color:var(--cyan);}
  .buy-row .btn{white-space:nowrap;}
  .facts{display:flex; flex-wrap:wrap; gap:0 28px; justify-content:center; margin:30px auto 0; padding:0; max-width:760px; list-style:none; color:var(--text-muted); font-size:14px;}
  .facts li{margin:4px 0;}
  .facts b{color:var(--text); font-weight:600;}
  .reading{background:var(--paper); color:var(--paper-ink); padding:48px 24px 72px;}
  .reading .prose{max-width:36rem;}
  .reading h1{font-family:var(--serif); font-weight:400; font-size:clamp(28px,6.5vw,40px); margin:0 0 10px; text-align:center;}
  .reading .intro{text-align:center; text-indent:0; color:#5b564a; font-size:16px; line-height:1.6; margin:0 auto 44px; max-width:34rem;}
  .reading .kap{margin-top:64px;}
  .reading h2{font-family:var(--serif); font-weight:400; text-align:center; margin:0 0 34px; color:var(--paper-ink);}
  .reading h2 span{display:block;}
  .reading h2 .nr{font-size:15px; letter-spacing:.16em; font-variant:small-caps;}
  .reading h2 .titel{font-size:clamp(22px,5vw,28px); font-style:italic; margin-top:4px;}
  .reading p{font-family:var(--serif); font-size:18px; line-height:1.72; margin:0; text-indent:1.4em; max-width:none; color:var(--paper-ink); hyphens:auto; -webkit-hyphens:auto;}
  .reading p.erst{text-indent:0;}
  .reading hr{border:0; border-top:1px solid #cfc7b4; margin:56px auto 0; width:60px;}
  .weiter{padding:64px 0 72px; text-align:center;}
  .weiter h2{font-family:var(--serif); font-weight:400; font-size:clamp(24px,5vw,32px); margin:0 0 12px;}
  .weiter p{color:var(--text-muted); max-width:44ch; margin:0 auto;}

  /* robuster Abstand ohne flex-gap (ältere Browser) */
  .buy-row{gap:0; margin-left:-7px; margin-right:-7px;}
  .buy-row .btn{margin:7px;}
  .hero-ctas{gap:0;}
  .hero-ctas .btn{margin:0 12px 12px 0;}
  .topbar .right{gap:0;}
  .toplink{margin-right:18px;}
  .facts{gap:0;}
  .facts li{margin:4px 14px;}

  /* Autorenfoto und Taschenbuch-Foto */
  .author-box{display:flex; flex-direction:row; align-items:center; text-align:left;}
  .author-box p{max-width:none; margin:0 0 0 22px; flex:1 1 auto;}
  .author-photo{width:100px; height:100px; flex:0 0 100px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 10px 26px -10px rgba(0,0,0,.45);}
  .paperback figure{margin:0 0 18px; text-align:center;}
  .paperback figure img{width:230px; max-width:100%; height:auto; border-radius:4px; box-shadow:0 18px 40px -18px rgba(0,0,0,.8);}
  .paperback figcaption{font-size:12px; color:var(--text-muted); margin-top:8px;}
  @media (min-width:720px){
    .author-box p{margin:0 0 0 30px;}
    .paperback figure{margin:0 34px 0 0;}
    .paperback figure img{width:250px;}
  }