/*
 * zweisicht · meinsalviadivinorumtrip.de
 * 1 Concept: two windows on the same moment. The inner view of the person who smoked (dark plum, serif)
 *   and the view of the sober sitter beside them (daylight linen, grotesk). One hero image, two crops.
 * 2 Type: Hedvig Letters Serif (the inner voice, headings, prose) + Host Grotesk (the sitter, labels, UI). Self-hosted.
 * 3 Palette: Raum #f2eee7, Papier #fbf9f5, Tinte #1b2027, Wachblau #2c5878, Innen #221a27, Hell #efe6e0, Lidlicht #e5785a.
 * 4 Layout signature: dual-perspective split view with a role switch (Beide / Ich / Sitter) that swaps columns,
 *   colours and image crops while the shared minute markers stay put; per-section switches in every article.
 * 5 Detail: two-tone dots (coral = Ich, blue = Sitter) on every label; product cards with a six-bar strength meter.
 */

@font-face{font-family:"Hedvig";src:url("fonts/hedvig-serif-latin.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Hedvig";src:url("fonts/hedvig-serif-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF,U+2020,U+20A0-20C0,U+A720-A7FF}
@font-face{font-family:"Host";src:url("fonts/host-grotesk-latin.woff2") format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Host";src:url("fonts/host-grotesk-latin-ext.woff2") format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF,U+2020,U+20A0-20C0,U+A720-A7FF}
:root{--raum:#f2eee7;--papier:#fbf9f5;--tinte:#1b2027;--grau:#585d64;--linie:#d8d1c5;--wach:#2c5878;--wach-h:#dfe8ef;--innen:#221a27;--innen2:#2f2535;--hell:#efe6e0;--hell2:#c9bcc4;--lid:#e5785a;--lid-d:#a8432a;--serif:"Hedvig",Georgia,"Times New Roman",serif;--sans:"Host","Helvetica Neue",Arial,sans-serif;--bg:var(--raum);--fg:var(--tinte);--muted:var(--grau);--acc:var(--wach);--r:14px;--w:1240px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.65 var(--serif);transition:background-color .5s ease,color .5s ease}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--lid);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--tinte);color:#fff;padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem}
.kicker{font:500 .78rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
strong{font-family:var(--sans);font-weight:600;font-size:.94em}
html:has(#rolle-ich:checked){--bg:var(--innen);--fg:var(--hell);--muted:var(--hell2);--acc:#f29a80;--linie:#4a3d50;--papier:#2f2535}
html:has(#rolle-sitter:checked){--bg:#eef2f4;--acc:var(--wach);--linie:#cbd6de}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--linie);backdrop-filter:saturate(1.2)}
.top-in{max-width:var(--w);margin:0 auto;padding:.6rem 1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--fg);margin-right:auto}
.brand img{width:30px;height:auto}
.brand-name{font:400 1.2rem/1 var(--serif);letter-spacing:-.01em}
.lens{border:0;margin:0;padding:3px;display:inline-flex;background:var(--papier);border:1px solid var(--linie);border-radius:999px;position:relative}
.lens-in{position:absolute;opacity:0;pointer-events:none}
.lens-lab{font:500 .85rem/1 var(--sans);padding:.55rem .85rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);transition:background-color .3s,color .3s;white-space:nowrap}
.lens-lab:hover{color:var(--fg)}
.lens-dot,.lens-dot2,.col-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;flex:none}
.lens-lab-ich .lens-dot{background:var(--lid)}
.lens-lab-sitter .lens-dot{background:var(--wach)}
.lens-dot2{background:linear-gradient(90deg,var(--lid) 50%,var(--wach) 50%)}
.lens-in:checked + .lens-lab{color:#fff;background:var(--tinte)}
.lens-ich:checked + .lens-lab{background:var(--innen);color:var(--hell);box-shadow:inset 0 0 0 1px #4a3d50}
.lens-sitter:checked + .lens-lab{background:var(--wach);color:#fff}
.lens-in:checked + .lens-lab .lens-dot{box-shadow:0 0 0 2px currentColor}
.lens-in:focus-visible + .lens-lab{outline:3px solid var(--lid);outline-offset:2px}
.lens-global{order:2}
.menu{order:3;position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;font:500 .9rem/1 var(--sans);padding:.6rem .8rem;border-radius:999px;border:1px solid var(--linie)}
.menu summary::-webkit-details-marker{display:none}
.burger,.burger::before{display:block;width:16px;height:2px;background:currentColor;position:relative}
.burger::before{content:"";position:absolute;top:5px}
.burger{top:-2.5px}
.menu nav{position:absolute;right:0;top:calc(100% + .5rem);background:var(--papier);color:var(--fg);border:1px solid var(--linie);border-radius:var(--r);padding:.5rem;min-width:17rem;box-shadow:0 18px 40px rgb(0 0 0 / .14)}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{display:flex;gap:.8rem;padding:.6rem .7rem;border-radius:8px;text-decoration:none;color:var(--fg);font:400 .98rem/1.3 var(--sans)}
.menu a:hover,.menu a[aria-current]{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.nav-no{font-variant-numeric:tabular-nums;color:var(--muted);width:1.4rem}
main{display:block}
.prose p,.prose ul,.prose ol{max-width:68ch}
.prose h3{font:600 1.05rem/1.3 var(--sans);margin:1.8rem 0 .5rem}
.prose ul,.prose ol{padding-left:1.2rem}
.prose li{margin:.3rem 0}
.prose blockquote{margin:1.4rem 0;padding-left:1rem;border-left:3px solid var(--lid)}
.table{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--linie);border-radius:var(--r);background:var(--papier)}
table{border-collapse:collapse;width:100%;font:400 .92rem/1.45 var(--sans);min-width:34rem}
th,td{text-align:left;vertical-align:top;padding:.7rem .9rem;border-bottom:1px solid var(--linie)}
th{font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
figure{margin:1.5rem 0}
.btn{display:inline-flex;align-items:center;gap:.6rem;font:600 .95rem/1 var(--sans);background:var(--wach);color:#fff;text-decoration:none;padding:.9rem 1.25rem;border-radius:999px;transition:transform .2s,background-color .2s}
.btn::after{content:"→";transition:transform .2s}
.btn:hover{background:#1f4560}
.btn:hover::after{transform:translateX(3px)}
.btn-light{background:var(--hell);color:var(--innen)}
.btn-light:hover{background:#fff}
.hero{max-width:var(--w);margin:0 auto;padding:2.5rem 1.25rem 1.5rem;display:grid;gap:2rem}
.hero h1{font:400 clamp(2.1rem,5.2vw,3.9rem)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 1.3rem;max-width:16ch}
.hero-intro p{font-size:1.12rem;margin:0 0 1rem}
.hero-switch{margin-top:1.6rem}
.hs-lab{font:500 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.hero-lens{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.hl{cursor:pointer;border:1px solid var(--linie);border-radius:var(--r);padding:.9rem 1rem;display:grid;gap:.25rem;background:var(--papier);transition:background-color .35s,color .35s,border-color .35s,transform .2s}
.hl:hover{transform:translateY(-2px)}
.hl-k{font:400 1.5rem/1 var(--serif);display:flex;align-items:center;gap:.5rem}
.hl-k::before{content:"";width:.7rem;height:.7rem;border-radius:50%}
.hl-ich .hl-k::before{background:var(--lid)}
.hl-sitter .hl-k::before{background:var(--wach)}
.hl-beide{grid-column:1 / -1;display:flex;align-items:baseline;gap:.8rem;padding:.6rem 1rem}
.hl-beide .hl-k{font-size:1.05rem}
.hl-beide .hl-k::before{background:linear-gradient(90deg,var(--lid) 50%,var(--wach) 50%)}
.hl-d{font:400 .85rem/1.35 var(--sans);color:var(--muted)}
html:has(#rolle-ich:checked) .hl-ich{background:var(--innen);color:var(--hell);border-color:var(--lid)}
html:has(#rolle-sitter:checked) .hl-sitter{background:var(--wach);color:#fff;border-color:var(--wach)}
html:has(#rolle-sitter:checked) .hl-sitter .hl-d{color:#dce6ee}
html:has(#rolle-beide:checked) .hl-beide{border-color:var(--fg)}
.windows{display:flex;gap:.8rem;min-height:20rem}
.win{margin:0;position:relative;flex:1 1 0;min-width:0;border-radius:22px;overflow:hidden;transition:flex-grow .7s cubic-bezier(.3,.7,.2,1)}
.win img{width:100%;height:100%;object-fit:cover;transition:object-position .9s cubic-bezier(.3,.7,.2,1),transform .9s}
.win-in{border:6px solid var(--innen)}
.win-out{border:6px solid var(--papier);box-shadow:0 0 0 1px var(--linie)}
.win-in img{object-position:var(--crop-in,86%) 50%}
.win-out img{object-position:var(--crop-out,10%) 50%}
.win figcaption{position:absolute;left:.7rem;top:.7rem;font:600 .72rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:.45rem .6rem;border-radius:999px}
.win-in figcaption{background:var(--innen);color:var(--hell)}
.win-out figcaption{background:var(--papier);color:var(--tinte)}
html:has(#rolle-ich:checked) .win-in{flex-grow:3.2}
html:has(#rolle-sitter:checked) .win-out{flex-grow:3.2}
html:has(#rolle-ich:checked) .win-out img,html:has(#rolle-sitter:checked) .win-in img{transform:scale(1.06)}
.hero-product{align-self:start;display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;background:var(--papier);color:var(--tinte);border:1px solid var(--linie);border-radius:var(--r);padding:.9rem}
html:has(#rolle-ich:checked) .hero-product{color:var(--hell)}
.hp-img img{border-radius:10px;background:#fff;width:96px;height:96px;object-fit:contain}
.hp-body p{margin:0}
.hp-k{font:500 .72rem/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--lid-d)}
html:has(#rolle-ich:checked) .hp-k{color:var(--lid)}
.hp-n{font:400 1.2rem/1.25 var(--serif);margin:.2rem 0 !important}
.hp-m{font:400 .88rem/1.3 var(--sans);color:var(--muted);margin-bottom:.7rem !important}
.hp-p{font-weight:600;color:var(--fg)}
.hero-product .btn{padding:.7rem 1rem;font-size:.88rem}
.duo{margin:3.2rem 0}
.duo-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem 1.5rem;margin-bottom:1rem}
.duo-head h2,.plain h2{font:400 clamp(1.5rem,2.6vw,2rem)/1.15 var(--serif);letter-spacing:-.01em;margin:0;max-width:30ch}
.duo-head .lens-lab{padding:.45rem .7rem;font-size:.8rem}
.duo-shared{margin-bottom:1.2rem}
.duo-shared p:last-child{margin-bottom:0}
.duo-cols{display:grid;gap:.9rem;grid-template-columns:1fr}
.col{border-radius:var(--r);padding:1.3rem 1.4rem 1.1rem;min-width:0}
.col-ich{background:var(--innen);color:var(--hell);font-family:var(--serif)}
.col-ich a{color:#f29a80}
.col-sitter{background:var(--papier);color:var(--tinte);border:1px solid var(--linie);font:400 1rem/1.62 var(--sans)}
.col-sitter a{color:var(--wach)}
html:has(#rolle-ich:checked) .col-ich{background:#2c2231;box-shadow:inset 0 0 0 1px #4a3d50}
html:has(#rolle-sitter:checked) .col-sitter{background:#fff}
.col-lab{font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem}
.col-ich .col-lab{color:var(--lid)}
.col-ich .col-dot{background:var(--lid)}
.col-sitter .col-lab{color:var(--wach)}
.col-sitter .col-dot{background:var(--wach)}
.col-body p{margin:0 0 .8rem}
.col-body ul,.col-body ol{padding-left:1.1rem;margin:0 0 .8rem}
.col-body li{margin:.35rem 0}
.col-body>:last-child{margin-bottom:0}
.col-body p>strong:first-child{display:inline-block;font:600 .78rem/1 var(--sans);letter-spacing:.03em;padding:.3rem .5rem;border-radius:6px;margin-right:.45rem;font-variant-numeric:tabular-nums}
.col-ich .col-body p>strong:first-child{background:#3d3043;color:var(--lid)}
.col-sitter .col-body p>strong:first-child{background:var(--wach-h);color:var(--wach)}
.duo:has(.lens-ich:checked) .col-sitter,.duo:has(.lens-sitter:checked) .col-ich,html:has(#rolle-ich:checked) .duo:has(.lens-beide:checked) .col-sitter,html:has(#rolle-sitter:checked) .duo:has(.lens-beide:checked) .col-ich,html:has(#rolle-ich:checked) .timeline .col-sitter,html:has(#rolle-sitter:checked) .timeline .col-ich{display:none}
.timeline{max-width:var(--w);margin:2.5rem auto 0;padding:0 1.25rem}
.tl-head{border-top:1px solid var(--linie);padding-top:1.6rem}
.tl-title{font:400 clamp(1.8rem,3.6vw,2.7rem)/1.1 var(--serif);margin:0 0 1.2rem;letter-spacing:-.015em}
.tl-cols{display:none}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:1.05rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(var(--lid) 0 50%,var(--wach) 50% 100%);background-size:2px 14px;opacity:.55}
.tl-row{position:relative;padding-left:3.2rem}
.tl-row .duo{margin:0 0 2.2rem}
.tl-row .lens{display:none}
.tl-row h2{display:grid;gap:.25rem}
.mark{font:600 .9rem/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--fg)}
.tl-row .mark{position:absolute;left:0;top:.1rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:.66rem;background:var(--bg);border:2px solid var(--fg);z-index:1}
.mark-t{font:400 clamp(1.35rem,2.4vw,1.75rem)/1.15 var(--serif)}
.tl-row .duo-head{margin-bottom:.8rem;min-height:2.2rem;align-items:center}
.check{max-width:var(--w);margin:4rem auto;padding:0 1.25rem;display:grid;gap:1.5rem}
.check-side h2{font:400 clamp(1.7rem,3vw,2.4rem)/1.1 var(--serif);margin:0 0 1.2rem}
.ring{position:relative;width:8.5rem;height:8.5rem}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring-bg{stroke:var(--linie)}
.ring-fg{stroke:var(--wach);stroke-linecap:round;stroke-dasharray:var(--p,0) 100;transition:stroke-dasharray .5s}
.ring-n{position:absolute;inset:0;display:grid;place-items:center;font:400 1.05rem/1 var(--sans);color:var(--muted)}
.ring-n b{font:400 2.1rem/1 var(--serif);color:var(--fg)}
.check-note{font:400 .88rem/1.45 var(--sans);color:var(--muted);max-width:30ch}
.check-list{list-style:none;margin:0;padding:.4rem;background:var(--papier);border:1px solid var(--linie);border-top:6px solid var(--wach);border-radius:var(--r);counter-reset:c}
.check-list li{counter-increment:c;border-bottom:1px dashed var(--linie)}
.check-list li:last-child{border-bottom:0}
.check-list input{position:absolute;opacity:0}
.check-list label{display:grid;grid-template-columns:1.5rem 1fr;gap:.85rem;align-items:start;padding:.8rem .8rem;cursor:pointer;font:400 1rem/1.45 var(--sans);border-radius:8px}
.check-list label:hover{background:color-mix(in srgb,var(--wach) 7%,transparent)}
.box{width:1.5rem;height:1.5rem;border:2px solid var(--wach);border-radius:6px;display:grid;place-items:center;transition:background-color .2s}
.box::after{content:"";width:.45rem;height:.8rem;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.check-list input:checked + label .box{background:var(--wach)}
.check-list input:checked + label .box::after{opacity:1}
.check-list input:checked + label .ct{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.check-list input:focus-visible + label{outline:3px solid var(--lid)}
.nl-band{background:var(--innen);color:var(--hell);margin:4rem 0 0}
.nl-in{max-width:var(--w);margin:0 auto;padding:3.5rem 1.25rem;display:grid;gap:2rem}
.nl-band .kicker{color:var(--lid)}
.nl-band h2{font:400 clamp(1.8rem,3.4vw,2.6rem)/1.08 var(--serif);margin:0 0 1.2rem}
.nl-text a:not(.btn){color:#f29a80}
.nl-band .prose p{color:var(--hell)}
.nl-band .btn-light{margin-top:.6rem}
.scale-lab{display:flex;justify-content:space-between;font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--hell2);margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:2px solid;border-image:linear-gradient(90deg,var(--hell2),var(--lid)) 1}
.products,.product-feature{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));margin:1.8rem 0}
.pc{background:var(--papier);color:var(--tinte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
html:has(#rolle-ich:checked) .pc,.nl-band .pc{background:#fbf9f5;border-color:#fbf9f5;color:var(--tinte)}
.pc-img{display:block;background:#fff;aspect-ratio:1}
.pc-img img{width:100%;height:100%;object-fit:contain;padding:.8rem;transition:transform .4s}
.pc:hover .pc-img img{transform:scale(1.04)}
.pc-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.pc-body p{margin:0}
.pc-lvl{display:flex;align-items:center;gap:.55rem;font:600 .7rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6b6f75}
.pc-bars{display:inline-flex;gap:3px;align-items:flex-end}
.pc-bars i{width:5px;border-radius:2px;background:#d9d3ca}
.pc-bars i:nth-child(1){height:6px}
.pc-bars i:nth-child(2){height:8px}
.pc-bars i:nth-child(3){height:10px}
.pc-bars i:nth-child(4){height:12px}
.pc-bars i:nth-child(5){height:14px}
.pc-bars i:nth-child(6){height:16px}
.pc-bars i:nth-child(-n+1){background:var(--lid)}
.pc-lvl[style*="--lvl:2"] i:nth-child(-n+2),.pc-lvl[style*="--lvl:3"] i:nth-child(-n+3),.pc-lvl[style*="--lvl:4"] i:nth-child(-n+4),.pc-lvl[style*="--lvl:5"] i:nth-child(-n+5),.pc-lvl[style*="--lvl:6"] i:nth-child(-n+6){background:var(--lid)}
.pc-name{font:400 1.08rem/1.25 var(--serif)}
.pc-name a{color:var(--tinte);text-decoration:none}
.pc-name a:hover{text-decoration:underline}
.pc-meta{font:400 .85rem/1.3 var(--sans);color:#5c6168;display:flex;flex-wrap:wrap;gap:.1rem .5rem}
.pc-price{font-weight:600;color:var(--tinte)}
.pc-nl{font:400 .74rem/1.3 var(--sans);color:var(--lid-d)}
.pc-cta{margin-top:auto;display:block;text-align:center;font:600 .88rem/1 var(--sans);padding:.75rem .8rem;border-radius:999px;background:var(--wach);color:#fff;text-decoration:none}
.pc-cta:hover{background:#1f4560}
.index{max-width:var(--w);margin:4rem auto;padding:0 1.25rem}
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.idx a{display:grid;grid-template-columns:2.4rem 1fr;gap:.3rem 1rem;padding:1.1rem .2rem;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--fg);position:relative}
.idx a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--lid) 50%,var(--wach) 50%);transition:width .45s}
.idx a:hover::after{width:100%}
.idx-no{font:600 .8rem/1.9 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;grid-row:span 2}
.idx-t{font:400 1.45rem/1.2 var(--serif)}
.idx-d{font:400 .92rem/1.45 var(--sans);color:var(--muted);max-width:70ch}
.art-head{max-width:var(--w);margin:0 auto;padding:2.4rem 1.25rem 1rem;display:grid;gap:1.6rem;align-items:end}
.art-head h1{font:400 clamp(1.9rem,4.2vw,3.1rem)/1.06 var(--serif);letter-spacing:-.02em;margin:0 0 1rem;max-width:22ch}
.lead{font-size:1.15rem;margin:0 0 .8rem;max-width:52ch;color:var(--muted)}
.upd{font:400 .82rem/1 var(--sans);color:var(--muted);margin:0}
.windows-sm{min-height:11rem;height:11rem}
.art-grid{max-width:var(--w);margin:0 auto;padding:1rem 1.25rem 3rem;display:grid;gap:2rem}
.art-body{min-width:0}
.rail{font:400 .9rem/1.35 var(--sans)}
.rail-t{font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.rail ol{list-style:none;margin:0;padding:0;display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem}
.rail a{display:flex;gap:.55rem;padding:.45rem .7rem;border-radius:8px;color:var(--fg);text-decoration:none;border:1px solid var(--linie);white-space:nowrap}
.rail a:hover,.rail a.on{border-color:var(--acc);color:var(--acc)}
.rail-no{color:var(--muted);font-variant-numeric:tabular-nums}
.intro p:first-child{font-size:1.15rem}
.plain{margin:3rem 0}
.plain h2{margin-bottom:1rem}
.nl-strip{margin:3rem 0 2rem;padding:1.2rem 1.3rem;border-radius:var(--r);background:var(--innen);color:var(--hell);display:grid;gap:1rem;align-items:center}
.nl-strip p{margin:0;font:400 .98rem/1.5 var(--sans)}
.nl-strip strong{color:var(--lid)}
.pager{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin-top:2rem}
.pager a{border:1px solid var(--linie);border-radius:var(--r);padding:1rem 1.1rem;text-decoration:none;color:var(--fg);font:400 1.15rem/1.25 var(--serif);display:grid;gap:.3rem}
.pager a:hover{border-color:var(--acc)}
.pager span{font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pg-next{grid-column:2;text-align:right}
.foot{border-top:1px solid var(--linie);margin-top:3rem;font:400 .9rem/1.55 var(--sans)}
.foot-in{max-width:var(--w);margin:0 auto;padding:2.4rem 1.25rem 3rem;display:grid;gap:1.4rem}
.foot-pub{display:flex;gap:1rem;align-items:center}
.foot-pub img{width:72px;height:72px;flex:none}
.foot-pub p,.foot-disc{margin:0;max-width:64ch}
.foot-disc{color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.foot-nav a{color:var(--fg)}
@media (min-width: 700px){.duo-cols{grid-template-columns:1fr 1fr}
.duo:has(.lens-ich:checked) .col-ich,.duo:has(.lens-sitter:checked) .col-sitter,html:has(#rolle-ich:checked) .duo:has(.lens-beide:checked) .col-ich,html:has(#rolle-sitter:checked) .duo:has(.lens-beide:checked) .col-sitter,html:has(#rolle-ich:checked) .timeline .col-ich,html:has(#rolle-sitter:checked) .timeline .col-sitter{grid-column:1 / -1}
.hero-lens{grid-template-columns:1fr 1fr}
.check{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start}
.nl-strip{grid-template-columns:1fr auto}
.foot-in{grid-template-columns:1.2fr 1fr}
.foot-nav{grid-column:1 / -1}
}
@media (min-width: 1000px){.hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:3rem;padding-top:3.5rem}
.hero-text{grid-row:span 2}
.windows{min-height:30rem}
.tl-cols{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-left:3.2rem;font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.tl-c-ich{color:var(--lid-d)}
.tl-c-sitter{color:var(--wach)}
html:has(#rolle-ich:checked) .tl-c-ich{color:var(--lid);grid-column:1 / -1}
html:has(#rolle-ich:checked) .tl-c-sitter,html:has(#rolle-sitter:checked) .tl-c-ich{display:none}
html:has(#rolle-sitter:checked) .tl-c-sitter{grid-column:1 / -1}
.tl-head{position:sticky;top:3.6rem;z-index:5;background:var(--bg);padding-bottom:.9rem;margin-bottom:1rem}
.tl-row{padding-left:8rem}
.tl::before{left:2.6rem}
.tl-row .mark{width:5.4rem;height:2.4rem;border-radius:999px;font-size:.95rem;top:.1rem}
.tl-cols{margin-left:8rem}
.nl-in{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:start}
.nl-scale .products{grid-template-columns:repeat(4,minmax(0,1fr))}
.art-head{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.windows-sm{height:13rem}
.art-grid{grid-template-columns:13.5rem minmax(0,1fr);gap:3rem}
.rail{position:sticky;top:5rem;align-self:start;max-height:calc(100vh - 6rem);overflow:auto}
.rail ol{flex-direction:column;overflow:visible}
.rail a{border:0;border-left:2px solid var(--linie);border-radius:0;white-space:normal;padding:.4rem .7rem}
.rail a:hover,.rail a.on{border-left-color:var(--acc)}
.art-body{grid-column:2}
.foot-in{grid-template-columns:1.3fr 1fr}
}
@media (max-width: 699px){.top-in{gap:.6rem}
.lens-global{order:4;width:100%;justify-content:stretch}
.lens-global .lens-lab{flex:1;justify-content:center}
.hero-lens .hl-d{display:none}
.windows{min-height:14rem;height:14rem}
.duo-head .lens{width:100%}
.duo-head .lens-lab{flex:1;justify-content:center}
.pager{grid-template-columns:1fr}
.pg-next{grid-column:1}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none !important;animation:none !important}
}
html:has(#rolle-ich:checked) .nl-band,html:has(#rolle-ich:checked) .nl-strip{background:#17111b;box-shadow:inset 0 1px 0 #4a3d50}
.art-body .products{grid-template-columns:repeat(auto-fill,minmax(10.4rem,1fr))}
.prose figure img[src*="mascot"]{width:160px}