@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-regular.woff") format("woff")}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/inter-italic.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-medium.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-semibold.woff") format("woff")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/interdisplay-bold.woff") format("woff")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/interdisplay-extrabold.woff") format("woff")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-500.woff2") format("woff2")}

:root{
  --paper:#F2F6FB; --surface:#FFFFFF; --ink:#13233A; --muted:#566B84; --line:#D9E3EF;
  --blue:#1F6FD1; --blue-2:#0E4FA3; --blue-soft:#E3EDFB; --card:#EEF1F5; --card-line:#8DB4E8; --sky:#3BA9E8; --sun:#E8962E;
  --shadow:0 1px 2px rgba(19,35,58,.05),0 6px 18px rgba(19,35,58,.06);
  --shadow-h:0 2px 4px rgba(19,35,58,.06),0 14px 30px rgba(19,35,58,.12);
  --f-display:"Inter Display","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0E1726; --surface:#152236; --ink:#E5EDF7; --muted:#9DB0C6; --line:#25364E;
  --blue:#5FA8F5; --blue-2:#8CC2FA; --blue-soft:#1A2D48; --card:#18263A; --card-line:#2F5C93; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-h:0 10px 28px rgba(0,0,0,.45); color-scheme:dark}}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0; color:var(--ink); font:16.5px/1.65 var(--f-body); -webkit-font-smoothing:antialiased;
  background:var(--paper) url("img/hintergrund.svg") 0 0/320px 320px repeat; background-attachment:fixed}
@media (prefers-color-scheme:dark){body{background-blend-mode:soft-light}}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--f-display); font-weight:800; letter-spacing:-.015em; line-height:1.12; margin:0}
p{margin:0 0 .9em}
.wrap{max-width:1080px; margin:0 auto; padding:0 max(18px,env(safe-area-inset-left,0px))}
.narrow{max-width:760px}
.eyebrow{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin:0 0 4px; font-weight:500}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 12px; z-index:50}
.skip:focus{left:8px}

/* Icons */
.ic{flex:none; width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue)}
.ic svg,.btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ic.sm{width:34px; height:34px; border-radius:8px}
.ic.sm svg{width:18px; height:18px}

/* Kopf */
header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:60px}
.brand{font-family:var(--f-display); font-weight:800; font-size:18px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:10px}
.brand::before{content:"JN"; display:grid; place-items:center; width:30px; height:30px; border-radius:7px; background:var(--blue); color:#fff; font-size:13px; letter-spacing:.02em}
header nav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
header nav::-webkit-scrollbar{display:none}
header nav a{font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; padding:8px 11px; border-radius:6px; white-space:nowrap}
header nav a:hover,header nav a:focus-visible{color:var(--blue); background:var(--blue-soft)}
@media (max-width:720px){
  header.top .wrap{flex-direction:column; align-items:flex-start; gap:4px; padding-top:10px; padding-bottom:6px}
  header nav{width:100%; margin-left:-10px}
  header nav a{font-size:13.5px; padding:7px 9px}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font:600 15px/1 var(--f-body); padding:12px 18px; border-radius:8px; border:1.5px solid var(--line); color:var(--ink); background:var(--surface); text-decoration:none; cursor:pointer; transition:border-color .2s, transform .2s, box-shadow .2s, background .2s}
.btn svg{width:18px; height:18px}
.btn:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-1px)}
.btn.solid{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.solid:hover{background:var(--blue-2); border-color:var(--blue-2); color:#fff; box-shadow:0 8px 18px rgba(31,111,209,.28)}
.btn:focus-visible{outline:3px solid var(--sky); outline-offset:2px}

/* Hero */
.hero{position:relative; overflow:hidden; color:#fff;
  background:url("img/waben.svg") right center/cover no-repeat,
    radial-gradient(520px 380px at 12% 70%, rgba(120,140,165,.55), transparent 70%),
    radial-gradient(700px 480px at 92% 35%, rgba(170,195,220,.65), transparent 70%),
    radial-gradient(600px 420px at 55% 60%, rgba(30,55,85,.85), transparent 75%),
    linear-gradient(100deg,#2A4562 0%,#33506F 35%,#2B4764 60%,#57758F 85%,#8FA8BF 100%)}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,38,60,.55) 0%, rgba(20,38,60,.25) 45%, transparent 70%); pointer-events:none}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:48px; align-items:center; padding-top:56px; padding-bottom:56px}
.tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0}
.tags li{font-size:13px; font-weight:500; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px}
.tags .soon{background:rgba(255,255,255,.95); color:#14508F; border-color:transparent}
.dot{width:7px; height:7px; border-radius:50%; background:var(--sun)}
.hero h1{font-size:clamp(34px,5vw,56px); letter-spacing:-.025em; line-height:1.04; color:#fff; text-shadow:0 2px 18px rgba(4,40,90,.25)}
.hero h1 span{display:block; color:#7CCBFA}
.hero .sub{font-size:clamp(17px,1.8vw,20px); color:#fff; margin:16px 0 6px; max-width:30em}
.hero .lead{color:rgba(255,255,255,.82); margin-bottom:26px}
.cta{display:flex; flex-wrap:wrap; gap:10px}
.hero .btn{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.55); color:#fff}
.hero .btn:hover{background:rgba(255,255,255,.2); border-color:#fff; color:#fff}
.hero .btn.solid{background:#1F86DA; border-color:#1F86DA; color:#fff}
.hero .btn.solid:hover{background:#3A9DEB; border-color:#3A9DEB; color:#fff; box-shadow:0 10px 22px rgba(4,40,90,.35)}
.hero-cover{margin:0; justify-self:center; width:100%; max-width:280px}
.hero-cover img{filter:drop-shadow(0 8px 12px rgba(4,30,70,.35)) drop-shadow(0 26px 34px rgba(4,30,70,.3)); transition:transform .3s ease, filter .3s ease}
.hero-cover:hover img{transform:translateY(-8px) rotate(-.6deg); filter:drop-shadow(0 12px 16px rgba(4,30,70,.38)) drop-shadow(0 36px 44px rgba(4,30,70,.34))}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr; gap:32px; padding-top:32px; padding-bottom:40px}.hero-cover{max-width:210px; justify-self:start}}
@media (max-width:820px){.hero{background-image:url("img/waben-mobil.svg"),radial-gradient(520px 380px at 12% 70%, rgba(120,140,165,.55), transparent 70%),radial-gradient(700px 480px at 92% 35%, rgba(170,195,220,.65), transparent 70%),radial-gradient(600px 420px at 55% 60%, rgba(30,55,85,.85), transparent 75%),linear-gradient(100deg,#2A4562 0%,#33506F 35%,#2B4764 60%,#57758F 85%,#8FA8BF 100%)}}
.stack{margin-top:28px}

/* Karten */
.stack{display:flex; flex-direction:column; gap:20px; padding-bottom:56px}
.card{background:var(--card); border:1.5px solid var(--card-line); border-radius:14px; padding:26px 28px; box-shadow:var(--shadow); transition:box-shadow .25s, border-color .25s}
.card:hover{box-shadow:var(--shadow-h); border-color:var(--blue)}
.card-h{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.card h2{font-size:clamp(22px,2.4vw,27px)}
@media (max-width:560px){.card{padding:20px 18px; border-radius:12px}.ic{width:38px; height:38px}}
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px}
.duo-a{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:860px){.duo,.duo-a{grid-template-columns:1fr}}

/* Buch */
.split{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose{max-width:40em}
.prose .big{font-size:18.5px; line-height:1.55; font-weight:500}
.thesis{background:var(--blue-soft); border-radius:12px; padding:20px}
.thesis .q{font-family:var(--f-display); font-weight:700; font-size:19px; line-height:1.35; margin:0 0 16px}
.three{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.three li{display:flex; gap:12px; align-items:flex-start}
.three .ic{background:var(--surface)}
.card .ic{background:var(--surface); box-shadow:inset 0 0 0 1px var(--card-line)}
.three b{display:block; font-size:15px}
.three span{color:var(--muted); font-size:14.5px; line-height:1.45}

/* Inhalt */
.intro{color:var(--muted); max-width:52em}
.parts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; margin-top:6px}
@media (max-width:900px){.parts{grid-template-columns:1fr}}
.part{border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden}
.part summary{list-style:none; cursor:pointer; display:flex; gap:12px; align-items:flex-start; padding:14px; position:relative}
.part summary::-webkit-details-marker{display:none}
.part summary:hover{background:var(--blue-soft)}
.ptxt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.pt{font-family:var(--f-display); font-weight:700; font-size:16px}
.pd{font-size:13.5px; color:var(--muted); line-height:1.45}
.pc{font:500 11px var(--f-mono); color:var(--blue); white-space:nowrap; margin-top:4px}
@media (min-width:901px){.pc{display:none}}
.ch{list-style:none; margin:0; padding:0 14px 8px}
.ch li{display:grid; grid-template-columns:54px minmax(0,1fr); gap:6px; padding:7px 0; border-top:1px solid var(--line); font-size:14.5px; line-height:1.4}
.ch .n{font:500 12.5px/1.55 var(--f-mono); color:var(--blue)}
.ch .n.w{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em}

/* Fakten */
.facts{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:9px 20px; margin:0; font-size:15px}
.facts dt{font:500 11.5px/1.95 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:0}
@media (max-width:480px){.facts{grid-template-columns:1fr; gap:0}.facts dd{margin-bottom:10px}}
.checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px}
.checks li{position:relative; padding-left:28px}
.checks li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6FD1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}

/* Leseprobe */
.reader{max-width:700px; font-size:16.5px; line-height:1.75}
.reader p{margin:0 0 1em}
.reader .end{font:13px var(--f-mono); color:var(--muted); border-top:1px solid var(--line); padding-top:14px}

/* Autor */
.author-body{display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; align-items:start}
.author-body img{border-radius:50%; aspect-ratio:1; object-fit:cover; width:150px; box-shadow:0 0 0 5px var(--blue-soft); transition:transform .3s, box-shadow .3s}
.author-body img:hover{transform:translateY(-4px); box-shadow:0 0 0 5px var(--blue-soft),0 16px 28px rgba(19,35,58,.18)}
.author .prose p{font-size:15.5px}
@media (max-width:560px){.author-body{grid-template-columns:1fr}.author-body img{width:120px}}
.contact p{color:var(--muted); font-size:15.5px}
.contact .btn{word-break:break-all; margin-top:4px}

/* Rechtliches */
.legal{padding:40px 0 64px}
.legal .wrap{background:var(--card); border:1.5px solid var(--card-line); border-radius:14px; padding:32px clamp(18px,4vw,40px); box-shadow:var(--shadow)}
.legal h1{font-size:clamp(30px,4vw,42px); margin-bottom:24px}
.legal h2{font-size:21px; margin:28px 0 8px}
.legal h3{font-size:19px; margin:28px 0 8px}
.legal h4{font-family:var(--f-display); font-size:16.5px; margin:20px 0 6px}
.legal p,.legal li{font-size:15.5px}
.legal .src{color:var(--muted); font-size:14px; margin-top:32px}

/* Fuß */
footer{background:var(--surface); border-top:1px solid var(--line); color:var(--muted); padding:28px 0}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px}
footer .brand{margin-bottom:4px}
footer p{margin:0; font-size:14.5px}
footer a{color:var(--muted)}
footer a:hover{color:var(--blue)}