/* pitchr Ghost-Theme. Look 1:1 aus der freigegebenen Landingpage (start_body.html), ergänzt um Ghost-Teile. */

/* Grundlage */
html,body{margin:0;background:#ECEBE6}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.px{--ink:#121211;--paper:#ECEBE6;--paper2:#F4F3EF;--red:#E3261B;--btn:#C82019;--yel:#F2E01E;--soft:#55534C;--line:#CFCBC1;--font-body:var(--gh-font-body,"Newsreader",Georgia,serif);--font-head:var(--gh-font-heading,"Archivo Black","Archivo",sans-serif);background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
.px main{flex:1 0 auto;min-width:0;width:100%}
.px *{box-sizing:border-box}
.px a{color:inherit}
.px img{max-width:100%}
.px .wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.px .h{font-family:var(--font-head);font-weight:900;text-transform:lowercase;letter-spacing:-.045em;line-height:.9;margin:0}
.px .mono{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.px mark{background:var(--yel);color:var(--ink);padding:0 .08em}
.px .btn{display:inline-block;font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;text-decoration:none;padding:16px 28px;border:2px solid var(--ink);background:var(--btn);color:var(--paper);box-shadow:6px 6px 0 var(--ink);transition:transform .15s}
.px .btn:hover{transform:translate(-2px,-2px)}
.px .btn.ink{background:var(--ink);color:var(--paper)}
.px .ul{font-family:"Archivo",sans-serif;font-weight:800;font-size:17px;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}
.px .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.px .skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;padding:10px 14px;text-decoration:none}
.px .skip:focus{top:12px}
.px a:focus-visible,.px button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Kopf */
.px .top{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20}
.px .top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.px .top img{height:46px;width:auto;display:block}
.px .nav{display:flex;align-items:center;gap:26px;font-family:"Archivo",sans-serif;font-weight:700;font-size:16px}
.px .nav a{text-decoration:none}
.px .nav a:hover,.px .nav a[aria-current]{color:var(--red)}
.px .nav .btn{font-size:15px;padding:10px 18px;box-shadow:4px 4px 0 var(--ink)}
.px .nav .btn:hover{color:var(--paper)}

/* Hero */
.px .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:72px 0 88px}
.px .hero h1{font-size:clamp(44px,6vw,94px);line-height:1.02}
.px .hero h1 .nw+.nw{margin-top:.04em}
.px .hero h1 mark{padding:0 .1em .02em;background:linear-gradient(transparent 9%,var(--yel) 9%)}
.px .nw{display:block;white-space:nowrap}
.px .hero p.lead{font-size:23px;line-height:1.45;max-width:30ch;margin:28px 0 26px}
.px .hero .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px}
.px .stage{position:relative;min-height:440px}
.px .stamp{position:absolute;left:4%;top:8%;width:92%;height:auto;transform:rotate(-4deg);animation:pz-press .9s cubic-bezier(.2,1.4,.4,1) .2s both}
@keyframes pz-press{0%{transform:scale(1.35) rotate(-10deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-4deg);opacity:1}}
.px .chip{position:absolute;z-index:2;font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;background:var(--yel);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px 16px}
.px .chip.a{right:2%;top:2%;transform:rotate(5deg)}
.px .chip.b{left:0;bottom:6%;transform:rotate(-3deg);background:var(--paper2)}
.px .card{position:absolute;right:0;bottom:-2%;width:62%;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(3deg);background:#fff;display:block}
.px .card img{display:block;width:100%;height:auto}
.px .card.card-logo{background:var(--paper2);padding:12% 10%}

/* Anmeldeformular (Ghost Members) */
.px .sf{max-width:520px;margin:0}
.px .sf-row{display:flex;height:52px;border:2px solid var(--ink);background:var(--paper2);transition:box-shadow .15s}
.px .sf-row:focus-within{box-shadow:5px 5px 0 var(--ink)}
.px .sf-in{flex:1;min-width:0;width:0;border:0;border-radius:0;background:transparent;margin:0;padding:0 16px;font:400 17px/1.2 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);-webkit-appearance:none;appearance:none}
.px .sf-in::placeholder{color:#77756e;opacity:1}
.px .sf-in:focus{outline:none}
.px .sf-btn{flex:none;display:grid;align-items:center;justify-items:center;border:0;border-radius:0;margin:0;padding:0 20px;background:var(--btn);color:#fff;font:700 17px/1 "Archivo",Arial,sans-serif;cursor:pointer;-webkit-appearance:none;appearance:none}
.px .sf-btn:hover{background:var(--red)}
.px .sf-btn:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}
.px .sf-btn span{grid-area:1/1}
.px .sf-wait{visibility:hidden}
.px .sf.loading .sf-go{visibility:hidden}
.px .sf.loading .sf-wait{visibility:visible}
.px .sf.loading .sf-btn{cursor:progress;pointer-events:none}
.px .sf.error .sf-go,.px .sf.invalid .sf-go{visibility:visible}
.px .sf.error .sf-wait,.px .sf.invalid .sf-wait{visibility:hidden}
.px .sf.error .sf-btn{pointer-events:auto;cursor:pointer}
.px .sf-msgs p{display:none;margin:12px 0 0;font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;line-height:1.4}
.px .sf.success .sf-row{display:none}
.px .sf.success .sf-ok{display:block;margin:0;padding:66px 16px 14px;background:var(--yel);border:2px solid var(--ink);color:var(--ink)} /* oben Platz für den Stempel "fast dabei." */
.px .sf.error .sf-err,.px .sf.invalid .sf-err{display:block;color:var(--btn)}
.px .sf-fine{font-family:"Archivo",sans-serif;font-weight:500;font-size:15px;line-height:1.45;color:var(--soft);margin:12px 0 0;max-width:520px}
.px .sf-fine a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.px .sf-member{max-width:520px;margin:0;padding:14px 16px;background:var(--yel);border:2px solid var(--ink);font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;line-height:1.35;color:var(--ink)}

/* Ressort-Band */
.px .band{background:var(--yel);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;white-space:nowrap}
.px .band div{display:inline-block;padding:16px 0;animation:pz-marq 38s linear infinite;font-family:"Archivo Black","Archivo",sans-serif;font-size:30px;text-transform:lowercase;letter-spacing:-.02em}
.px .band span{margin:0 26px}
.px .band span.d{color:var(--red)}
@keyframes pz-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Abschnitte */
.px section.s{padding:96px 0}
.px .s h2{font-size:clamp(44px,6vw,88px)}
.px .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:52px}
.px .figs.one{display:block}
.px .figs.one+.figs.more{margin-top:28px}
.px .fig{background:var(--paper2);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:26px 24px}
.px .fig p{font-size:18px;line-height:1.5;margin:0 0 12px}
.px .fig .w{font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;border-top:2px solid var(--ink);padding-top:12px}
.px .rdhead{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline}
.px .rdhead a{font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;color:var(--ink)}
.px .fig.latest{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center}
.px .fig.latest.noimg{grid-template-columns:minmax(0,1fr)}
.px .fig.latest .lt-img{display:block}
.px .fig.latest img{width:100%;height:auto;display:block;border:2px solid var(--ink)}
.px .fig.latest h3{font-family:var(--font-head);font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.03em;margin:8px 0 12px}
.px .fig.latest h3 a,.px .pc-t a{text-decoration:none}
.px .fig.latest h3 a:hover,.px .pc-t a:hover{color:var(--red)}
.px .fig.latest p{max-width:60ch}
.px .pc{display:flex;flex-direction:column}
.px .pc-img{display:block;margin:-26px -24px 20px;border-bottom:2px solid var(--ink);aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.px .pc-img img{display:block;width:100%;height:100%;object-fit:cover}
.px .pc-t{font-family:var(--font-head);font-size:24px;line-height:1.08;letter-spacing:-.02em;margin:10px 0 12px}
.px .pc-x{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.px .pc-x:empty{display:none}
.px .fig .pc-go{display:block;margin-top:auto;text-decoration:none}
.px .pc-go span{color:var(--red)}
.px .pc:hover .pc-go{color:var(--red)}
.px .empty{font-size:22px;line-height:1.45;margin:40px 0 0;padding:26px 24px;border:2px dashed var(--ink);max-width:40ch}
.px .after{margin-top:40px;display:flex;flex-wrap:wrap;gap:20px;align-items:center}

/* Pitch */
.px .pitch h2{font-size:clamp(60px,10vw,156px)}
.px .pitch .row{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:36px}
.px .pitch p{font-size:22px;line-height:1.5;max-width:46ch;margin:0}

/* Partner */
.px .plist{list-style:none;padding:0;margin:44px 0 0}
.px .plist a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:32px;align-items:center;padding:26px 0;border-top:2px solid var(--ink);text-decoration:none}
.px .plist li:last-child a{border-bottom:2px solid var(--ink)}
.px .plist .k{font-family:"Archivo Black","Archivo",sans-serif;font-size:clamp(42px,6.4vw,96px);letter-spacing:-.045em;line-height:1;text-transform:lowercase}
.px .plist a:hover .k{color:var(--red)}
.px .plist .t{font-size:19px;line-height:1.45}
.px .plist .ar{font-family:"Archivo Black","Archivo",sans-serif;font-size:44px}
.px .mailline{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.px .mailline a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:5px}
.px .cp{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper2);border:2px solid var(--ink);padding:9px 12px;cursor:pointer}
.px .cp.ok{background:var(--yel)}
.px section,.px .end{scroll-margin-top:84px}
.px #abo{scroll-margin-top:96px}
.px .fine{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--soft);margin-top:18px;line-height:1.5}

/* Schluss */
.px .end{background:var(--red);border-top:2px solid var(--ink);color:var(--paper)}
.px .end .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:88px;padding-bottom:88px}
.px .end .mono{color:var(--paper);opacity:.85}
.px .end h2{font-size:clamp(48px,6.4vw,100px);color:var(--paper);margin-top:16px}
.px .end ul{list-style:none;padding:0;margin:30px 0 0;max-width:46ch}
.px .end li{position:relative;padding:12px 0 12px 34px;border-top:2px solid rgba(236,235,230,.35);font-size:20px;line-height:1.4}
.px .end li::before{content:"";position:absolute;left:0;top:18px;width:16px;height:16px;background:var(--yel);border:2px solid var(--ink)}
.px .endbox{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:30px 28px 26px}
.px .endbox .mono{color:var(--soft);opacity:1;margin-bottom:14px}
.px .foot{background:var(--ink);color:var(--paper);padding:34px 0;font-family:"IBM Plex Mono",monospace;font-size:13px}
.px .foot .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
.px .foot a{color:var(--paper);text-decoration:none;margin-right:20px}
.px .foot a:hover{color:var(--yel)}
.px .foot b{font-family:"Archivo Black","Archivo",sans-serif;font-size:18px;color:var(--red)}

/* Einblenden nur mit JavaScript, ohne Ausblenden */
.px.js .rv{transform:translateY(26px);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.px.js .rv.in{transform:none}
@media (prefers-reduced-motion:reduce){.px .stamp,.px .band div{animation:none}.px.js .rv{transform:none}}
.px .swipe{display:none}

/* Lese-Raster: Textspalte (68 Zeichen), breit und volle Breite wie im Ghost-Editor */
.px .rd-grid{--main:min(68ch,calc(100% - 40px));display:grid;grid-template-columns:[full-start] minmax(20px,1fr) [wide-start] minmax(0,150px) [main-start] var(--main) [main-end] minmax(0,150px) [wide-end] minmax(20px,1fr) [full-end];font-family:var(--font-body);font-size:21px}
.px .rd-grid>*{grid-column:main-start/main-end;min-width:0}
.px .pg-grid,.px .pg .rd-grid{font-size:18px}

/* Lesen: Ausgabe (post.hbs) */
.px .rd-head{padding:64px 0 8px}
.px .rd-head>*{grid-column:main-start/wide-end}
.px .rd-head>.rd-fig,.px .rd-figwrap>.rd-fig{grid-column:wide-start/wide-end}
.px .rd-meta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.px .rd-meta a{display:inline-block;padding:14px 0;margin:-14px 0} /* Ressort-Link: Tippfläche 44 px, Zeile bleibt gleich hoch */
.px .rd-title{font-family:var(--font-head);font-weight:900;font-size:clamp(38px,5.4vw,76px);line-height:1;letter-spacing:-.035em;margin:18px 0 0;text-wrap:balance}
.px .rd-lead{font-size:23px;line-height:1.45;max-width:46ch;margin:22px 0 0}
.px .rd-fig{margin:36px 0 0}
.px .rd-fig img{display:block;width:100%;height:auto;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.px .rd-fig figcaption,.px .rd-body figcaption{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.5;color:var(--soft);margin-top:12px}

/* Lesetypografie im Inhalt ({{content}}) */
.px .rd-body{padding:44px 0 96px;line-height:1.62}
.px .rd-body>*{margin:0 0 1.1em}
.px .rd-body>*:last-child{margin-bottom:0}
.px .rd-body>.kg-width-wide{grid-column:wide-start/wide-end}
.px .rd-body>.kg-width-full{grid-column:full-start/full-end}
.px .kg-width-wide img,.px .kg-width-full img{width:100%}
.px .rd-body h2,.px .rd-body h3,.px .rd-body h4{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:1.8em 0 .55em}
.px .rd-body h2{font-size:1.5em}
.px .rd-body h3{font-size:1.22em}
.px .rd-body h4{font-size:1.02em}
.px .rd-body>h2:first-child,.px .rd-body>h3:first-child{margin-top:0}
.px .rd-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.px .rd-body a:hover{color:var(--red)}
.px .rd-body strong,.px .rd-body b{font-weight:700}
.px .rd-body ul,.px .rd-body ol{padding-left:1.25em}
.px .rd-body li{margin:.35em 0}
.px .rd-body li::marker{color:var(--red)}
.px .rd-body blockquote{margin:1.4em 0;padding:.1em 0 .1em 1em;border-left:6px solid var(--red);font-style:italic}
.px .rd-body blockquote.kg-blockquote-alt{border:0;padding:0 1em;text-align:center;font-size:1.25em;line-height:1.45}
.px .rd-body hr{border:0;border-top:2px solid var(--ink);margin:2.2em 0;height:0}
.px .rd-body figure{margin:1.6em 0}
.px .rd-body img{display:block;max-width:100%;height:auto}
.px .rd-body code{font-family:"IBM Plex Mono",monospace;font-size:.82em;background:var(--paper2);border:1px solid var(--line);padding:.1em .3em}
.px .rd-body pre{background:var(--ink);color:var(--paper);padding:20px;overflow-x:auto;font-size:15px;line-height:1.55}
.px .rd-body pre code{background:none;border:0;padding:0;color:inherit}
.px .rd-body table{display:block;overflow-x:auto;border-collapse:collapse;font-family:"Archivo",sans-serif;font-size:16px;line-height:1.4}
.px .rd-body th,.px .rd-body td{border:2px solid var(--ink);padding:8px 12px;text-align:left;vertical-align:top}
.px .rd-body th{background:var(--yel)}
.px .rd-body iframe{max-width:100%}
.px .kg-card{margin:1.6em 0}
.px .kg-image-card img{border:2px solid var(--ink)}
.px .kg-width-full.kg-image-card img{border-left:0;border-right:0}
.px .kg-embed-card{display:flex;flex-direction:column;align-items:center}
.px .kg-callout-card{font-size:.95em}
.px .kg-bookmark-card a{text-decoration:none}

/* Ghost-Hinweis für gesperrte Inhalte (Standard-Markup von Ghost, nur im pitchr-Look) */
.px .gh-post-upgrade-cta{margin:1.6em 0;font-family:"Archivo",sans-serif;color:var(--ink)}
.px .gh-post-upgrade-cta-content{background:var(--paper2)!important;color:var(--ink);border:2px solid var(--ink);border-radius:0;box-shadow:8px 8px 0 var(--ink);padding:32px 28px;align-items:flex-start;text-align:left}
.px .gh-post-upgrade-cta h2{font-family:var(--font-head);font-weight:900;font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.03em;color:var(--ink);margin:0}
.px .gh-post-upgrade-cta p{color:var(--soft);margin:18px 0 0}
.px .gh-post-upgrade-cta small{font-size:16px}
.px .gh-post-upgrade-cta a{color:var(--ink);text-decoration-color:var(--red)}
.px .gh-post-upgrade-cta a:hover{color:var(--red);opacity:1}
.px .gh-post-upgrade-cta a.gh-btn{display:inline-block;background:var(--btn);color:var(--paper)!important;border:2px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--ink);font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;padding:14px 24px;margin:24px 0 0;text-decoration:none}
.px .gh-post-upgrade-cta a.gh-btn:hover{opacity:1;transform:translate(-2px,-2px)}

/* Seiten (page.hbs) */
.px .pg-head{padding:64px 0 0}
.px .pg-head .h{font-size:clamp(48px,8vw,88px)}
.px .pg-lead{font-size:21px;line-height:1.5;margin:24px 0 0;max-width:46ch}
.px .pg-body{line-height:1.6;padding-top:36px}
.px .pg-body h2,.px .pg-body h3{font-size:20px;margin:36px 0 8px}
.px .pg-body p{margin:0 0 .8em}

/* Listen: Archiv, Übersicht, Schlagwort, Autor */
.px .lst h1.h{font-size:clamp(44px,6vw,88px)}
.px .lst-lead{font-size:21px;line-height:1.5;max-width:46ch;margin:24px 0 0}
.px .lst-body{font-size:19px;line-height:1.55;max-width:68ch;margin-top:20px}
.px .lst-body a{text-decoration-color:var(--red);text-decoration-thickness:2px}
.px .arch{list-style:none;padding:0;margin:44px 0 0}
.px .arch .ar-i a{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:28px;align-items:baseline;padding:24px 0;border-top:2px solid var(--ink);text-decoration:none}
.px .arch .ar-i:last-child a{border-bottom:2px solid var(--ink)}
.px .ar-d{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--soft)}
.px .ar-b{display:block}
.px .ar-t{display:block;font-family:var(--font-head);font-weight:900;font-size:clamp(24px,2.6vw,36px);line-height:1.08;letter-spacing:-.03em}
.px .ar-x{display:block;font-size:18px;line-height:1.5;margin-top:8px;max-width:70ch;color:var(--ink)}
.px .ar-x:empty{display:none}
.px .ar-ar{font-family:"Archivo Black","Archivo",sans-serif;font-size:32px}
.px .arch .ar-i a:hover .ar-t,.px .arch .ar-i a:hover .ar-ar{color:var(--red)}
.px .arch .empty{list-style:none;margin-top:0}
.px .pag{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;margin-top:40px;font-family:"Archivo",sans-serif;font-weight:800;font-size:17px}
.px .pag-a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}
.px .pag-n{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}

/* Guide (custom-guide.hbs): eigener Abschnitt "v1.2" am Ende dieser Datei */

/* Weitere Ausgaben unter einem Beitrag */
.px .more-s .figs.more{margin-top:40px}

/* Fehler */
.px .err{padding:96px 0 120px}
.px .err .h{font-size:clamp(44px,7vw,96px);margin-top:16px}
.px .err-p{font-size:21px;line-height:1.5;max-width:42ch;margin:24px 0 32px}
.px .err-a{display:flex;flex-wrap:wrap;gap:20px 30px;align-items:center}

@media (max-width:900px){
.px .wrap{padding:0 20px}
.px .top .wrap{height:64px}
.px .top img{height:38px}
.px .hero p.lead{font-size:20px;margin:22px 0 22px}
.px .stage{min-height:320px;margin-top:8px}
.px .card{width:72%}
.px .chip{font-size:15px;padding:8px 12px}
.px .band div{font-size:22px;padding:12px 0}
.px .band span{margin:0 16px}
.px .fig{padding:22px 20px}
.px .pc-img{margin:-22px -20px 18px}
.px .fig.latest{grid-template-columns:1fr}
.px .plist a{gap:8px;padding:22px 0}
.px .plist .t{font-size:17px}
.px .pitch p{font-size:19px}
.px .end .wrap{gap:36px;padding-top:64px;padding-bottom:64px}
.px .end li{font-size:18px}
.px .endbox{padding:24px 20px 22px;box-shadow:6px 6px 0 var(--ink)}
.px .btn{font-size:17px;padding:15px 22px}
.px .foot .wrap{flex-direction:column;align-items:flex-start}
.px .foot span{display:flex;flex-wrap:wrap;gap:10px 18px}
.px .foot a{margin-right:0}
.px .nav a:not(.btn){display:none}
.px .hero,.px .end .wrap{grid-template-columns:minmax(0,1fr)}
.px .hero{padding:44px 0 56px}
.px .stage{min-height:340px}
.px .figs{grid-template-columns:1fr}
.px .pitch .row,.px .plist a{grid-template-columns:1fr}
.px .plist .ar{display:none}
.px section.s{padding:64px 0}
/* Handy: weitere Ausgaben als Wisch-Leiste mit angeschnittener nächster Karte */
.px .figs.more{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:28px -20px 0;padding:0 20px 14px;scroll-padding:0 20px}
.px .figs.more::-webkit-scrollbar{display:none}
.px .figs.more .fig{scroll-snap-align:start;box-shadow:5px 5px 0 var(--ink)}
.px .figs.one{margin:40px 0 0}
.px .swipe{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:10px}
/* Handy: Partner-Zeilen zeigen, dass sie antippbar sind */
.px .plist a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k ar" "t t";column-gap:12px}
.px .plist .k{grid-area:k}
.px .plist .t{grid-area:t}
.px .plist .ar{display:flex;grid-area:ar;align-items:center;justify-content:center;width:44px;height:44px;font-size:26px;border:2px solid var(--ink);background:var(--yel);box-shadow:3px 3px 0 var(--ink)}
.px .plist a:active .k{color:var(--red)}
.px .pitch .row .btn{text-align:center}
.px .end h2{line-height:1;letter-spacing:-.035em}
.px section,.px .end{scroll-margin-top:76px}
.px #abo{scroll-margin-top:84px}
.px .chip.a{top:-3%}
.px .chip.b{bottom:-7%}
.px.js .figs .rv{transform:none;transition:none}
.px .foot span{gap:0 18px}
.px .foot a{display:inline-block;padding:14px 0}
.px .hero .ctas a{display:inline-block;padding:10px 0}
.px .nav .btn{min-height:44px;display:inline-flex;align-items:center}
.px .cp{min-height:44px}
.px .rdhead a,.px .mailline a{display:inline-block;padding:12px 0;margin:-12px 0}
.px .pag-a{display:inline-block;padding:10px 0}
.px .sf-fine a{display:inline-block;padding:12px 0;margin:-12px 0}
/* Lesen und Listen auf dem Handy */
.px .rd-head,.px .pg-head{padding-top:40px}
.px .rd-lead{font-size:20px}
.px .rd-fig{margin-top:28px}
.px .rd-fig img{box-shadow:5px 5px 0 var(--ink)}
.px .rd-grid{font-size:19px}
.px .pg-grid,.px .pg .rd-grid{font-size:17px}
.px .rd-body{padding:32px 0 64px}
.px .gh-post-upgrade-cta-content{padding:24px 20px;box-shadow:5px 5px 0 var(--ink)}
.px .arch .ar-i a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d ar" "b b";gap:8px 12px;padding:20px 0}
.px .ar-d{grid-area:d}
.px .ar-b{grid-area:b}
.px .ar-ar{grid-area:ar;font-size:24px}
.px .ar-x{font-size:17px}
.px .err{padding:64px 0 80px}
}
@media (max-width:420px){
.px .hero h1{font-size:42px}
.px .s h2{font-size:42px}
.px .lst h1.h{font-size:42px}
.px .pitch h2{font-size:54px}
.px .plist .k{font-size:40px}
.px .end h2{font-size:44px}
.px .sf-btn{padding:0 14px;font-size:16px}
.px .sf-in{padding:0 12px}
}
/* Sehr schmale Handys (320 px): Platz für den Platzhalter im Formular der roten Schluss-Sektion */
@media (max-width:360px){
.px .endbox{padding-left:16px;padding-right:16px}
.px .sf-btn{padding:0 12px}
}


/* ===== Motion-Schicht (motion/motion.css, Fassung 2) ===== */
/* pitchr Motion-Schicht, CSS-Teil. Stand 04.10.2026, Fassung 2 nach der Art-Director-Prüfung.

   EINBAU (Ghost):
   1. motion.css und danach design.css ans Ende von assets/css/screen.css hängen (kein eigener Request).
   2. In home.hbs die h1-Zeile durch das Partial partials/pz-hero-h1.hbs ersetzen: {{> "pz-hero-h1"}}.
      Die Wort-Spans stehen damit im HTML, der Aufstieg ist reines CSS ab dem ersten Paint, ganz ohne JavaScript.
      Ohne das Partial bleibt die Headline einfach statisch, nur der Textmarker wischt.
   3. Vor </body>: <script defer src="{{asset "js/motion.js"}}"></script>. Keine Abhängigkeiten, GSAP wird nicht mehr gebraucht.
   4. Die Zeile <script>document.documentElement.classList.add('pz-js')</script> im <head> ist nicht mehr nötig.
   5. CSS und JS mit gzip oder brotli ausliefern (Ghost komprimiert selbst, bei Proxy oder CDN davor prüfen).

   Grundsatz: Nichts wartet auf JavaScript, nichts blendet über die Deckkraft ein. Text, Knöpfe, Formulare und Zahlen
   stehen ab dem ersten Paint fertig da, wie gedruckt. Bewegung gibt es nur als Druck-Moment:
   Satz steigt aus dem Spiegel, Textmarker, Stempel, Sticker, Ausgabe wird hingeschoben, Passer rastet ein,
   Formularkasten wird abgesetzt, Tinte füllt Partnerzeilen, Knopf wird gedrückt, "fast dabei." wird gestempelt.
   Animiert werden nur transform (auch translate, scale, rotate einzeln), clip-path, text-shadow, der Schatten des
   Formularkastens und visibility als harter Schalter vor einem Aufschlag. Keine Deckkraft, keine Layout-Verschiebung.
   prefers-reduced-motion: keine Animation, alles im Endzustand.

   Steuerung durch motion.js (nur für Dinge unterhalb des ersten Bildschirms):
   .pz-arm = Startzustand steht und wartet (nur gesetzt, solange das Element ganz außerhalb des Bildes liegt)
   .pz-go  = Element ist im Bild, der Druck-Moment läuft einmal ab. */

/* ---------- 0. Alte Einblendung des Themes (.rv, translateY) aus: Text steht sofort ---------- */
.px.js .rv,.px.js .rv.in{transform:none;transition:none}

/* ---------- 1. Hero-Headline: Wörter steigen aus dem Satzspiegel (reines CSS) ----------
   Die Maske schneidet nur unten ab. Padding und negativer Margin geben Ober- und Unterlängen Luft,
   ohne die Zeilenhöhe zu ändern. --i im Partial steuert die Staffelung. */
.px .pz-w{display:inline-block;padding:.16em 0 .18em;margin:-.16em 0 -.18em;clip-path:inset(-1em -.5em 0 -.5em);vertical-align:baseline}
.px .pz-wi{display:inline-block}

/* Textmarker unter "funded." als eigene Fläche, damit er wischen kann. Ohne Animation steht er einfach da. */
.px .hero h1 mark{position:relative;z-index:0;background:none}
.px .hero h1 mark::before{content:"";position:absolute;left:0;right:0;top:9%;bottom:0;background:var(--yel);z-index:-1;transform-origin:0 50%}

@media (prefers-reduced-motion:no-preference){
  .px .hero h1 .pz-wi{animation:pz-rise .52s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0) * 55ms)}
  .px .hero h1 mark::before{animation:pz-wipe .42s cubic-bezier(.65,0,.35,1) .3s backwards}
}
@keyframes pz-rise{from{transform:translateY(130%)}}
@keyframes pz-wipe{from{transform:scaleX(0)}}

/* ---------- 2. Bühne: Ausgabe wird hingeschoben, Stempel schlägt auf, Sticker werden aufgeklebt ----------
   Volle Deckkraft ab dem ersten Bild. Vor dem Aufschlag sind die Sticker unsichtbar (visibility),
   nicht halbtransparent. Ease-in bis zum Aufschlag, dann hartes Stehen: kein Nachfedern.
   Läuft als reines CSS ab dem ersten Paint (Desktop: neben der Headline, Handy 390x844: Stempel unten im Bild).
   Liegt die Bühne beim Start ganz unter dem Bild (kleine Handys), setzt motion.js .pz-arm: Startzustand wartet,
   der Stempel ist bis dahin unsichtbar, und beim Hineinscrollen (.pz-go) läuft alles einmal ab.
   Die Kopien pz-slam-r, pz-slide-r, pz-slap-r sind nötig, damit die Animation dafür neu startet. */
.px .chip.a{--pz-rot:10deg}
.px .chip.b{--pz-rot:-11deg}
@keyframes pz-slam{
  0%{scale:1.3;rotate:-6deg;animation-timing-function:cubic-bezier(.5,0,.85,.35)}
  72%{scale:.975;rotate:0deg;animation-timing-function:cubic-bezier(.2,.7,.35,1)}
  100%{scale:1;rotate:0deg}
}
@keyframes pz-slam-r{
  0%{scale:1.3;rotate:-6deg;animation-timing-function:cubic-bezier(.5,0,.85,.35)}
  72%{scale:.975;rotate:0deg;animation-timing-function:cubic-bezier(.2,.7,.35,1)}
  100%{scale:1;rotate:0deg}
}
@keyframes pz-slide{0%{translate:56px 30px;rotate:8deg}}
@keyframes pz-slide-r{0%{translate:56px 30px;rotate:8deg}}
@keyframes pz-slap{0%{visibility:hidden;translate:0 -16px;scale:1.22;rotate:var(--pz-rot)}100%{visibility:visible}}
@keyframes pz-slap-r{0%{visibility:hidden;translate:0 -16px;scale:1.22;rotate:var(--pz-rot)}100%{visibility:visible}}

/* Die alte CSS-Stempelanimation des Themes (pz-press, mit Deckkraft) aus; die Regeln darunter ersetzen sie */
.px .stage .stamp{animation:none}
@media (prefers-reduced-motion:no-preference){
  .px .stage .stamp{animation:pz-slam .3s linear backwards}
  .px .stage .card{animation:pz-slide .6s cubic-bezier(.16,1,.3,1) backwards}
  .px .stage .chip{animation:pz-slap .2s cubic-bezier(.55,0,.9,.4) .42s backwards}
  .px .stage .chip.b{animation-delay:.54s}
  .px .stage.pz-arm .stamp{animation-name:pz-slam-r}
  .px .stage.pz-arm .card{animation-name:pz-slide-r}
  .px .stage.pz-arm .chip{animation-name:pz-slap-r}
  .px .stage.pz-arm:not(.pz-go) .stamp,
  .px .stage.pz-arm:not(.pz-go) .card,
  .px .stage.pz-arm:not(.pz-go) .chip{animation-play-state:paused}
  .px .stage.pz-arm:not(.pz-go) .stamp{visibility:hidden}
}

/* ---------- 3. Abschnitts-Überschriften: Passer rastet ein ----------
   Die zweite Druckfarbe sitzt erst versetzt und springt in zwei harten Schritten ins Register.
   Die Schrift selbst bewegt sich nie und ist immer voll lesbar. Endzustand = Theme ohne Änderung. */
.px section.s h2.h{--pz-reg:var(--red)}
.px .end h2.h{--pz-reg:var(--ink)}
@keyframes pz-reg{
  0%{text-shadow:-.065em .012em 0 var(--pz-reg);animation-timing-function:steps(1,end)}
  45%{text-shadow:-.024em .004em 0 var(--pz-reg);animation-timing-function:steps(1,end)}
  75%{text-shadow:.009em 0 0 var(--pz-reg);animation-timing-function:steps(1,end)}
  100%{text-shadow:0 0 0 transparent}
}
@media (prefers-reduced-motion:no-preference){
  .px h2.h.pz-arm{animation:pz-reg .42s backwards}
  .px h2.h.pz-arm:not(.pz-go){animation-play-state:paused}
}

/* ---------- 4. Runden-Karten: Textmarker zieht einmal über den Betrag ----------
   Die Zahl steht immer sofort und korrekt da, nur der gelbe Kasten dahinter wischt von links. */
.px .fig .n{position:relative;z-index:0;background:none}
.px .fig .n::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--yel);z-index:-1;transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .px .fig.pz-arm .n::before{animation:pz-wipe .45s cubic-bezier(.65,0,.35,1) backwards}
  .px .fig.pz-arm:nth-child(2) .n::before{animation-delay:.12s}
  .px .fig.pz-arm:nth-child(3) .n::before{animation-delay:.24s}
  .px .fig.pz-arm:not(.pz-go) .n::before{animation-play-state:paused}
}

/* ---------- 5. Formularkasten im Schluss: wird auf die Seite abgesetzt ----------
   Erst angehoben (längerer Schatten), dann ein kurzer Aufsetzer. Voll sichtbar und klickbar, kein Federn. */
.px .endbox{--pz-sh:10px}
@media (max-width:900px){.px .endbox{--pz-sh:6px}}
@keyframes pz-setdown{0%{translate:-8px -8px;box-shadow:calc(var(--pz-sh) + 8px) calc(var(--pz-sh) + 8px) 0 var(--ink)}}
@media (prefers-reduced-motion:no-preference){
  .px .endbox.pz-arm{animation:pz-setdown .26s cubic-bezier(.55,0,.9,.4) backwards}
  .px .endbox.pz-arm:not(.pz-go){animation-play-state:paused}
}

/* ---------- 6. Partner-Zeilen: Tinten-Füllung von links, Pfeil-Kachel kippt ----------
   motion.js legt in jede Zeile eine Kopie des Inhalts (.pz-ink, aria-hidden) mit Tintengrund.
   Sie wird per clip-path von links aufgedeckt, Text und Fläche wechseln dadurch exakt an der Kante. */
.px .plist.pz-inked a{position:relative;isolation:isolate}
.px .plist .pz-ink{position:absolute;top:0;bottom:0;left:-16px;right:-16px;z-index:1;display:grid;grid-template-columns:inherit;grid-template-areas:inherit;column-gap:inherit;row-gap:inherit;gap:inherit;align-items:inherit;padding:inherit;padding-left:16px;padding-right:16px;background:var(--ink);color:var(--paper);pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .42s cubic-bezier(.65,0,.25,1)}
.px .plist .pz-ink .k,.px .plist a:hover .pz-ink .k{color:var(--yel)}
.px .plist .pz-ink .t{color:var(--paper)}
.px .plist .pz-ink .ar{background:var(--btn);color:var(--paper);border-color:var(--paper);box-shadow:4px 4px 0 var(--yel);transform:rotate(0deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1) .08s}
@media (hover:hover){
  .px .plist a:hover .pz-ink{clip-path:inset(0 0 0 0)}
  .px .plist a:hover .pz-ink .ar{transform:rotate(-12deg) translate(-2px,-2px)}
  .px .plist a:hover .ar{transform:rotate(-12deg)}
}
.px .plist a:focus-visible .pz-ink,
.px .plist a.pz-tap .pz-ink,
.px .plist a:active .pz-ink{clip-path:inset(0 0 0 0)}
.px .plist a:focus-visible .pz-ink .ar,
.px .plist a.pz-tap .pz-ink .ar,
.px .plist a:active .pz-ink .ar{transform:rotate(-12deg) translate(-2px,-2px)}
.px .plist .ar{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
/* Tipp auf dem Handy: Füllung sofort, damit das Feedback vor dem Mail-Wechsel sichtbar ist */
.px .plist a.pz-tap .pz-ink,.px .plist a:active .pz-ink{transition-duration:.16s}
.px .plist.pz-inked a:focus-visible{outline:none}
.px .plist a:focus-visible .pz-ink{box-shadow:inset 0 0 0 3px var(--yel)}

/* ---------- 7. Knöpfe: drücken sich in ihren Schatten ---------- */
.px .btn:active,.px .nav .btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink);transition-duration:.05s}

/* ---------- 8. Erfolgsstempel "fast dabei." (Ghost setzt .success am Formular) ----------
   Schlägt mit voller Deckkraft auf, kein Nachfedern. Das Formular gibt beim Aufschlag 3 px nach. */
.px form[data-members-form],.px .bhform form{position:relative}
.px .pz-dabei{position:absolute;right:-6px;top:26px;z-index:3;pointer-events:none;display:block;background:var(--paper);transform:translateY(-50%) rotate(-7deg)}
.px .pz-dabei-ink{display:block;font-family:"Archivo Black","Archivo",sans-serif;font-size:30px;line-height:1;letter-spacing:-.03em;text-transform:lowercase;color:var(--btn);padding:8px 16px 10px;border:4px solid var(--btn);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E")}
@media (max-width:420px){.px .pz-dabei{right:-4px}.px .pz-dabei-ink{font-size:26px}}
@keyframes pz-jolt{50%{translate:0 3px}}
@media (prefers-reduced-motion:no-preference){
  .px .pz-dabei{animation:pz-slam .3s linear backwards}
  .px form.pz-jolt{animation:pz-jolt .1s .2s}
}

/* ---------- Bewegung reduziert: keine Übergänge ---------- */
@media (prefers-reduced-motion:reduce){
  .px .plist .pz-ink,.px .plist .pz-ink .ar,.px .plist .ar,.px .btn{transition:none}
}


/* ===== Design-Feinschliff (motion/design.css) ===== */
/* pitchr Design-Feinschliff. Überschreibt nur gezielt; nach dem Theme-CSS und nach motion.css laden.
   Körnung: selbst erzeugtes SVG-Rauschen (feTurbulence) als data-URI, keine fremden Dateien. */

.px{
  --pz-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .066 1.9 0 0 0 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
  --pz-grain-hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .92 0 0 0 0 .9 2.2 0 0 0 -1.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)' opacity='.16'/%3E%3C/svg%3E");
}

/* 1. Papier: feine Druck-Körnung auf allen Papierflächen */
.px{background-image:var(--pz-grain);background-size:240px 240px}
.px .fig,.px .endbox,.px .chip.b{background-image:var(--pz-grain);background-size:240px 240px}

/* 2. Schluss-Sektion: dunkleres Markenrot (#C82019) für lesbaren Fließtext (WCAG AA 4,8:1 statt 3,9:1),
      dazu Körnung in zwei Lagen: dunkle Punkte und helle Fehlstellen wie bei Risodruck */
.px .end{background-color:var(--btn);background-image:var(--pz-grain-hi),var(--pz-grain);background-size:260px 260px,240px 240px}
.px .end .mono{opacity:1}

/* 3. Fuß: Claim groß genug für AA-Kontrast bei Rot auf Tinte (gilt dann als großer Text) */
.px .foot b{font-size:22px;letter-spacing:-.01em}

/* 4. Sichtbarer Fokus für Tastatur, auf jedem Grund lesbar */
.px a:focus-visible,.px button:focus-visible,.px input:focus-visible,.px [tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.px .btn:focus-visible{outline-offset:4px}
.px .foot a:focus-visible,.px .end > .wrap > div:not(.endbox) a:focus-visible{outline-color:var(--yel)}
.px .top a:focus-visible img{outline:none}
.px ::selection{background:var(--yel);color:var(--ink)}

/* 5. Partner: Pfeil auch am Desktop als Kachel (wie am Handy), damit sie beim Hover kippen kann */
@media (min-width:901px){
  .px .plist .ar{display:flex;align-items:center;justify-content:center;width:64px;height:64px;font-size:34px;line-height:1;border:2px solid var(--ink);background:var(--yel);box-shadow:4px 4px 0 var(--ink)}
}

/* 6. Rhythmus: mehr Luft zwischen Pitch und Partner (vorher halber Abschnittsabstand) */
.px section.pitch{padding-bottom:144px}
@media (max-width:900px){.px section.pitch{padding-bottom:104px}}

/* 7. Satz: Überschriften ausbalanciert, keine einzelnen Wörter in der letzten Zeile */
.px .s h2,.px .end h2{text-wrap:balance}
.px p,.px .plist .t,.px .end li{text-wrap:pretty}

/* 8. Ghost-Formular braucht keinen Platzhalter für ein iframe (nur beehiiv brauchte die Mindesthöhe) */
.px .bhform:has(form[data-members-form]){min-height:0}

/* 9. Hero-Karte: feste Bildproportion (8:5 wie das Ausgabe-Cover), damit die Bühne nicht springt, solange das Bild lädt.
      Gemessen: ohne diese Regel rückt die Karte beim Eintreffen der Bildmaße ins Bild (Layout-Verschiebung 0,0136 am Handy). */
.px .card img{aspect-ratio:8/5;object-fit:cover}
.px .card.card-logo img{aspect-ratio:auto;object-fit:contain}


/* ===== v1.2 · Guide-Verkaufsseite, Mitgliederbereich, Archiv und Ressorts (04.10.2026) =====
   Look wie das übrige Theme: Papier, Tinte, Rot, Gelb, eckig, harte Schatten, Archivo Black klein, Newsreader, IBM Plex Mono.
   Bewegung nur als Druck-Moment (Stempel, Marker, Streichung, Passer), nie über die Deckkraft, alles aus bei prefers-reduced-motion. */

.px{--gd-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");--signal:#2F5BFF;--desk:#DCD9D0}

/* --- Bausteine --- */
.px .gd-s+.gd-s{border-top:2px solid var(--ink)}
.px .gd-h2{margin-top:16px;max-width:15ch;text-wrap:balance}
.px .gd-h2-wide{max-width:20ch}
.px .gd-copy{margin-top:28px;max-width:58ch}
.px .gd-copy p{font-size:21px;line-height:1.55;margin:0 0 .85em}
.px .gd-copy p:last-child{margin-bottom:0}
.px .gd-intro{font-size:21px;line-height:1.5;margin:22px 0 0;max-width:46ch}
.px .gd-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.px .gd-fuss{font-size:19px;line-height:1.5;font-style:italic;margin:48px 0 0;max-width:52ch}
.px .gd mark{background:var(--yel);color:var(--ink);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.px .gd-stempel-ink{display:inline-block;font-family:"Archivo Black","Archivo",sans-serif;font-weight:900;text-transform:lowercase;letter-spacing:-.03em;line-height:1;color:var(--btn);border:4px solid var(--btn);padding:8px 14px 10px;white-space:nowrap;-webkit-mask-image:var(--gd-mask);mask-image:var(--gd-mask)}
.px .gd-stempel{position:absolute;z-index:2;pointer-events:none;display:block}
.px #holen,.px #leseprobe,.px #download,.px .gd-formbox{scroll-margin-top:92px}

/* --- S1 Hero --- */
.px .gd-hero{padding:56px 0 76px}
.px .gd-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);grid-template-areas:"head stage" "body stage";column-gap:56px;align-items:start}
.px .gd-hero-head{grid-area:head}
.px .gd-stage{grid-area:stage;align-self:center;position:relative;margin:0 -12px 0 0}
.px .gd-hero-body{grid-area:body}
.px .gd-name{margin:18px 0 0}
.px .gd-name span{display:inline-block;font-family:"Archivo",sans-serif;font-weight:800;font-size:17px;line-height:1.2;padding:7px 12px;border:2px solid var(--ink);background:var(--paper2);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.5deg)}
.px .gd-h1{font-size:clamp(42px,5.4vw,86px);line-height:.98;margin-top:24px;text-wrap:balance}
.px .gd-h1 mark{padding:0 .06em;background:linear-gradient(transparent 10%,var(--yel) 10%,var(--yel) 94%,transparent 94%) no-repeat 0 0/100% 100%}
.px .gd-stack{display:block;width:100%;height:auto}
.px .gd-stempel-hero{left:1%;bottom:3%;transform:rotate(-9deg);--pz-rot:-7deg}
.px .gd-stempel-hero .gd-stempel-ink{font-size:clamp(34px,3.6vw,54px)}
.px .gd-sub{font-size:22px;line-height:1.5;max-width:36ch;margin:24px 0 0}
.px .gd-sub b{font-family:"Archivo",sans-serif;font-weight:800}
.px .gd-cta{margin-top:30px;display:grid;justify-items:start;gap:14px}
.px .gd-cta-btn{font-size:19px;padding:18px 30px}
.px .gd-kopplung{font-family:"Archivo",sans-serif;font-weight:600;font-size:16px;line-height:1.45;max-width:46ch;margin:4px 0 0}
.px .gd-cta-2{display:inline-block;margin-top:6px}
.px .gd-fakten{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.px .gd-fakten li{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;line-height:1.3;padding:7px 10px;border:2px solid var(--ink);background:var(--paper2)}
.px .gd-band div{animation-duration:30s}

/* --- S2 Problem: Folien wie auf dem Cover des Guides --- */
.px .gd-folien{position:relative;width:100%;max-width:580px;aspect-ratio:10/9;margin-left:auto;container-type:inline-size}
.px .gd-folie{position:absolute;border:2px solid var(--ink);font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.px .gd-folie-3,.px .gd-folie-2{display:flex;justify-content:space-between;align-items:flex-start;padding:3.4cqw 3.6cqw;font-size:2.3cqw}
.px .gd-folie-3{right:0;top:0;width:72%;height:52%;background:#1E1E1C;color:#A9A69D;transform:rotate(5deg)}
.px .gd-folie-2{right:6%;top:9%;width:74%;height:52%;background:#2B2B28;color:#CFCBC1;transform:rotate(1.5deg)}
.px .gd-folie-1{left:0;bottom:3%;width:90%;background:var(--paper2);color:var(--ink);box-shadow:2cqw 2cqw 0 var(--btn);transform:rotate(-2.5deg);padding:3.4cqw 3.8cqw 3cqw;letter-spacing:0;text-transform:none;font-family:"Archivo",sans-serif}
.px .gd-folie-top,.px .gd-folie-ft{display:flex;justify-content:space-between;gap:2cqw;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.px .gd-folie-pr{display:flex;gap:4cqw;align-items:flex-start;margin:4.6cqw 0 4.4cqw}
.px .gd-folie-av{flex:none;display:flex;align-items:center;justify-content:center;width:15cqw;height:15cqw;border-radius:50%;background:var(--red);color:var(--paper);font-family:"Archivo Black","Archivo",sans-serif;font-size:4.6cqw;text-transform:uppercase}
.px .gd-folie-tx{display:grid;gap:.9cqw;min-width:0}
.px .gd-folie-at{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:2.6cqw;color:var(--soft)}
.px .gd-folie-nm{font-family:"Archivo",sans-serif;font-weight:800;font-size:4.4cqw;line-height:1.15;letter-spacing:-.01em}
.px .gd-folie-ln{font-size:3cqw;line-height:1.3}
.px .gd-folie-lk{font-size:3cqw;font-weight:700;color:var(--signal)}
.px .gd-folie-ft{padding-top:2.6cqw;border-top:2px solid var(--line);letter-spacing:.04em;text-transform:none;color:var(--ink)}
.px .gd-folie-ft b{font-family:"Archivo",sans-serif;font-weight:800;font-size:3cqw;margin-right:.6cqw}

/* --- S3 Story: Punkt gegen Linie, auf Tinte --- */
.px .gd-story{background:var(--ink);color:var(--paper)}
.px .gd-story .mono{color:#B9B6AD}
.px .gd-story .gd-copy p{color:#E4E2DC}
.px .gd-pl{margin:0;border:2px solid #4A4944;background:#1B1B19;padding:32px 30px 24px}
.px .gd-pl-row+.gd-pl-row{margin-top:30px;padding-top:26px;border-top:2px solid #33322F}
.px .gd-pl-k{display:block;color:#CFCBC1}
.px .gd-pl-dot{display:block;width:24px;height:24px;border-radius:50%;background:var(--red);margin-top:16px;box-shadow:0 0 0 6px #1B1B19,0 0 0 8px var(--red)}
.px .gd-pl-w{position:relative;list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.px .gd-pl-w::before{content:"";position:absolute;left:0;right:0;top:9px;height:6px;background:var(--yel);transform-origin:0 50%}
.px .gd-pl-w li{position:relative;display:grid;align-content:start;gap:6px;padding-right:10px}
.px .gd-pl-p{display:flex;gap:6px;height:24px;align-items:center;position:relative}
.px .gd-pl-p i{display:block;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.px .gd-pl-w b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--yel);margin-top:6px}
.px .gd-pl-w span:last-child{font-family:"Archivo",sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:var(--paper)}
.px .gd-pl-w li{column-gap:0}
.px .gd-pl figcaption{margin-top:22px;font-size:12px}
.px .gd-kern{margin:88px 0 0;padding:0}
.px .gd-kern p{font-family:var(--font-body);font-style:italic;font-size:clamp(30px,3.8vw,56px);line-height:1.2;margin:0;max-width:24ch;color:var(--paper);text-wrap:balance}
.px .gd-kern mark{padding:0 .12em}
.px .gd-kern footer{margin-top:20px;color:#B9B6AD}

/* --- S4 Vision: Korrekturfahne --- */
.px .gd-vp-head,.px .gd-vp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 120px;column-gap:36px}
.px .gd-vp-head{margin-top:52px;padding-bottom:10px;border-bottom:4px solid var(--ink)}
.px .gd-vp-head span:last-child,.px .gd-vp-s{justify-self:end;text-align:right}
.px .gd-vp-list{list-style:none;margin:0;padding:0}
.px .gd-vp{align-items:baseline;padding:22px 0;border-bottom:2px solid var(--ink)}
.px .gd-vp p{margin:0}
.px .gd-vp-v{font-size:19px;line-height:1.45;color:var(--soft)}
.px .gd-vp-v s{text-decoration:none;background:linear-gradient(var(--btn),var(--btn)) no-repeat 0 60%/100% 2.5px}
.px .gd-vp-n{font-family:"Archivo",sans-serif;font-weight:700;font-size:20px;line-height:1.38}
.px .gd-vp-s{font-size:12px;white-space:nowrap;background:var(--yel);color:var(--ink);padding:3px 7px;border:2px solid var(--ink)}
.px .gd-vp-schluss{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1.3;margin:40px 0 0;max-width:36ch}

/* --- S5 Inhalt: echte Seiten als Blätter --- */
.px .gd-teile{margin-top:60px;display:grid;gap:80px}
.px .gd-teil{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:center}
.px .gd-teil:nth-child(2){grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.px .gd-teil:nth-child(2) .gd-blatt{order:2}
.px .gd-blatt{margin:0}
.px .gd-blatt img{display:block;width:100%;height:auto;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);background:var(--paper);transform:rotate(-1.5deg)}
.px .gd-teil:nth-child(2) .gd-blatt img{transform:rotate(1.5deg)}
.px .gd-teil-t{font-family:var(--font-head);font-weight:900;text-transform:lowercase;font-size:clamp(32px,3.4vw,54px);letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance}
.px .gd-teil-s{margin:16px 0 0}
.px .gd-teil-tx p:not(.mono){font-size:21px;line-height:1.55;max-width:44ch;margin:16px 0 0}

/* --- S6 Leseprobe: Blatt auf dem Tisch --- */
.px .gd-lese{background-color:var(--desk);background-image:var(--pz-grain);background-size:240px 240px}
.px .gd-lese-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:64px;align-items:start}
.px .gd-sheet{position:relative;background:var(--paper);background-image:var(--pz-grain);background-size:240px 240px;border:2px solid var(--ink);box-shadow:14px 14px 0 var(--ink);padding:52px 56px 28px;max-width:780px;transform:rotate(-.6deg)}
.px .gd-sheet-n{position:absolute;right:40px;top:22px;font-family:"Archivo Black","Archivo",sans-serif;font-size:150px;line-height:.8;color:#D3D0C7}
.px .gd-sheet-k{position:relative}
.px .gd-sheet-h{position:relative;font-size:clamp(46px,5vw,76px);margin-top:14px;max-width:none}
.px .gd-sheet-p{font-size:20px;line-height:1.55;margin:22px 0 0}
.px .gd-felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin-top:28px}
.px .gd-feld-k{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:16px;line-height:1.25;padding-bottom:8px;border-bottom:3px solid var(--ink)}
.px .gd-feld-l{display:block;height:108px;background:repeating-linear-gradient(to bottom,transparent 0 34px,var(--ink) 34px 36px)}
.px .gd-formel{margin-top:30px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--paper2);padding:20px 22px}
.px .gd-formel p{margin:0}
.px .gd-formel-s{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;line-height:1.45}
.px .gd-formel-b{font-size:18px;line-height:1.5;margin-top:12px!important}
.px .gd-feld-1{margin-top:28px}
.px .gd-sheet-f{display:flex;justify-content:space-between;margin-top:36px;font-size:12px;letter-spacing:.06em;text-transform:none}
.px .gd-lese-side{position:sticky;top:96px}
.px .gd-blatt-orig img{transform:rotate(2deg);box-shadow:8px 8px 0 var(--ink)}
.px .gd-blatt-orig figcaption{font-size:12px;margin-top:16px}
.px .gd-danach{font-size:19px;line-height:1.5;margin:26px 0 22px}

/* --- S7 Alle Kapitel: aufklappbares Inhaltsverzeichnis --- */
.px .gd-kap{background:var(--yel);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.px .gd-kap+.gd-s{border-top:0}
.px .gd-toc summary{list-style:none;display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;padding:24px 0;cursor:pointer}
.px .gd-toc summary::-webkit-details-marker{display:none}
.px .gd-toc summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.px .gd-toc-t{font-family:var(--font-head);font-weight:900;font-size:clamp(30px,3vw,46px);line-height:1;text-transform:lowercase;letter-spacing:-.035em}
.px .gd-toc-n{flex:1;color:var(--ink)}
.px .gd-toc-x,.px .gd-q i{position:relative;flex:none;width:48px;height:48px;border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.px .gd-toc-x::before,.px .gd-toc-x::after,.px .gd-q i::before,.px .gd-q i::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:3px;background:var(--ink);transform:translate(-50%,-50%)}
.px .gd-toc-x::after,.px .gd-q i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.px .gd-toc[open] .gd-toc-x::after,.px .gd-q[open] i::after{transform:translate(-50%,-50%) rotate(0deg)}
.px .gd-toc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 240px;gap:24px 56px;padding:4px 0 44px}
.px .gd-toc-bild{align-self:start;margin-top:34px}
.px .gd-toc-bild img{transform:rotate(2deg);box-shadow:8px 8px 0 var(--ink)}
.px .gd-toc-bild figcaption{font-size:12px;margin-top:14px;color:var(--ink)}
.px .gd-toc-teil h3{margin:0 0 12px;color:var(--ink)}
.px .gd-toc-teil ol+h3{margin-top:36px}
.px .gd-toc ol{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--ink)}
.px .gd-toc li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:13px 0;border-top:2px solid var(--ink)}
.px .gd-toc-k{font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;line-height:1.3}
.px .gd-toc-s{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;white-space:nowrap;padding-top:3px}
.px .gd-toc-d{grid-column:1/-1;font-size:17px;line-height:1.45;margin-top:4px}

/* --- S8 Stapel als Beleg, Formular daneben --- */
.px .gd-stapel-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:start;margin-top:52px}
.px .gd-beleg{position:relative;background:var(--paper2);background-image:var(--pz-grain);background-size:240px 240px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:8px 30px 28px}
.px .gd-posten{list-style:none;margin:0;padding:0}
.px .gd-posten li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:5px;padding:17px 0;border-bottom:2px dashed var(--ink)}
.px .gd-po-n{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;line-height:1.25}
.px .gd-po-s{font-size:12px;white-space:nowrap;padding-top:4px;color:var(--ink)}
.px .gd-po-t{grid-column:1/-1;font-size:17px;line-height:1.45}
.px .gd-posten .gd-po-lauf{margin:16px -14px 0;padding:16px 14px;background:var(--yel);border:2px solid var(--ink)}
.px .gd-preis{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding-top:20px;border-top:5px double var(--ink)}
.px .gd-preis-t{font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;line-height:1.35;margin:0;max-width:30ch}
.px .gd-stempel-preis{position:relative;flex:none;transform:rotate(-8deg);margin-right:6px}
.px .gd-stempel-preis .gd-stempel-ink{font-size:46px;padding:8px 14px 10px}
.px .gd-risiko{font-size:17px;line-height:1.5;margin:16px 0 0;color:var(--soft)}
.px .gd-stapel .gd-formbox{position:sticky;top:96px}

/* Formularkasten Guide */
.px .gd-fb-k{font-size:17px;line-height:1.5;margin:0 0 18px}
.px .gd-fb-k b{font-family:"Archivo",sans-serif;font-weight:800}
.px .gd-fb-in{margin:18px 0 0;font-family:"Archivo",sans-serif;font-weight:700;font-size:16px}
.px .gd-fb-in a{display:inline-block;padding:10px 0;margin:-10px 0;text-decoration:underline;text-decoration-color:var(--btn);text-decoration-thickness:2px;text-underline-offset:4px}
.px .sf--stack{max-width:none}
.px .sf--stack .sf-row{display:grid;height:auto;border:0;background:none;gap:12px}
.px .sf--stack .sf-row:focus-within{box-shadow:none}
.px .sf--stack .sf-in{width:100%;height:56px;border:2px solid var(--ink);background:var(--paper2);transition:box-shadow .15s}
.px .sf--stack .sf-in:focus{box-shadow:5px 5px 0 var(--ink)}
.px .sf--stack .sf-btn{width:100%;min-height:58px;padding:12px 18px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-size:18px;line-height:1.2;text-align:center}
.px .sf--stack .sf-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.px .sf--stack .sf-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.px .sf-short{display:none}
.px .sf--stack~.sf-fine{max-width:none}
.px .sf--stack .sf-ok{line-height:1.45}
.px .sf--stack.success .sf-ok{padding-top:66px}

/* --- S9 Ablauf --- */
.px .gd-weg{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:4px solid var(--ink)}
.px .gd-weg li{position:relative;padding:30px 32px 6px 0}
.px .gd-weg li+li{padding-left:40px}
.px .gd-weg li+li::before{content:"\2192";position:absolute;left:-10px;top:38px;color:var(--btn);font-family:"Archivo Black","Archivo",sans-serif;font-size:30px;line-height:1}
.px .gd-weg-n{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;font-family:"Archivo Black","Archivo",sans-serif;font-size:28px;line-height:1;background:var(--yel);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.px .gd-weg-t{font-family:var(--font-head);font-weight:900;text-transform:lowercase;letter-spacing:-.03em;font-size:clamp(26px,2.4vw,34px);line-height:1.05;margin:22px 0 10px}
.px .gd-weg p{font-size:19px;line-height:1.5;margin:0;max-width:34ch}
.px .gd-weg-heute{grid-template-columns:minmax(0,1fr);border-top:0;max-width:880px}
.px .gd-weg-heute li,.px .gd-weg-heute li+li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;align-items:start;padding:24px 0;border-left:0;border-top:2px solid var(--ink)}
.px .gd-weg-heute li:last-child{border-bottom:2px solid var(--ink)}
.px .gd-weg-heute li+li::before{display:none}
.px .gd-weg-heute p{font-size:20px;line-height:1.5;max-width:none;padding-top:10px}

/* --- S10 Für wen --- */
.px .gd-wen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:52px;align-items:start}
.px .gd-wen-box{border:2px solid var(--ink);padding:26px 28px 14px}
.px .gd-wen-ja{background:var(--paper2);background-image:var(--pz-grain);background-size:240px 240px;box-shadow:8px 8px 0 var(--ink)}
.px .gd-wen-nein{border-style:dashed}
.px .gd-wen-t{font-family:var(--font-head);font-weight:900;text-transform:lowercase;letter-spacing:-.03em;font-size:32px;line-height:1;margin:0 0 14px}
.px .gd-wen-box ul{list-style:none;margin:0;padding:0}
.px .gd-wen-box li{position:relative;padding:14px 0 14px 38px;border-top:2px solid var(--ink);font-size:18px;line-height:1.45}
.px .gd-wen-ja li::before{content:"";position:absolute;left:0;top:18px;width:20px;height:20px;background:var(--yel);border:2px solid var(--ink)}
.px .gd-wen-ja li::after{content:"";position:absolute;left:6px;top:20px;width:6px;height:11px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.px .gd-wen-nein li::before,.px .gd-wen-nein li::after{content:"";position:absolute;left:1px;top:27px;width:20px;height:3px;background:var(--btn);transform:rotate(45deg)}
.px .gd-wen-nein li::after{transform:rotate(-45deg)}

/* --- S11 Herausgeber --- */
.px .gd-hg-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.px .gd-hg-a{display:inline-block;margin-top:14px;padding:12px 0}
.px .gd-sa-k{margin-bottom:14px}
.px .gd-hg-card .pc,.px .gd-sa .pc{max-width:460px}
.px .gd-hg-card .pc-img,.px .gd-sa .pc-img,.px .rs-grid .pc-img{aspect-ratio:1200/630}

/* --- S12 Fragen --- */
.px .gd-faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:start}
.px .gd-faq-list{border-bottom:2px solid var(--ink)}
.px .gd-q{border-top:2px solid var(--ink)}
.px .gd-q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;cursor:pointer;font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;line-height:1.3}
.px .gd-q summary::-webkit-details-marker{display:none}
.px .gd-q summary:hover span{color:var(--btn)}
.px .gd-q summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.px .gd-q i{width:42px;height:42px;background:var(--yel)}
.px .gd-q i::before,.px .gd-q i::after{width:18px}
.px .gd-q p{font-size:19px;line-height:1.55;margin:0 0 24px;max-width:60ch}
.px .gd-q a,.px .gd-dl-off a,.px .gd-pitch-f a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--btn);text-decoration-thickness:2px;text-underline-offset:3px}

/* --- S13 Schluss --- */
.px .gd-end-t{font-size:21px;line-height:1.5;margin:26px 0 0;max-width:40ch}
.px .gd-end-k{font-family:"Archivo",sans-serif;font-weight:600;font-size:16px;line-height:1.5;margin:18px 0 0;max-width:44ch;padding-left:14px;border-left:4px solid var(--yel)}
.px .gd-end .endbox .mono{margin-bottom:14px}

/* --- Gratis-Guide im Anmeldekasten von Beitrag, Archiv und Ressort (Review C5) --- */
.px .ab-guide{font-family:"Archivo",sans-serif;font-weight:600;font-size:16px;line-height:1.45;margin:0 0 16px;max-width:46ch}
.px .ab-guide b{font-weight:800}
.px .ab-guide a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--btn);text-decoration-thickness:2px;text-underline-offset:3px}

/* --- Handy-Leiste "Guide holen" (nur unter 900 px, nur mit JavaScript) --- */
.px .gd-bar{display:none}

/* --- Mitgliederansicht (Danke-Seite) --- */
.px .gd-m-hero{padding:56px 0 84px}
.px .gd-m-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:center}
.px .gd-m-stamp{margin:0}
.px .gd-m-stamp .gd-stempel-ink{font-size:26px;transform:rotate(-4deg)}
.px .gd-m-h1{max-width:12ch}
.px .gd-dl{margin-top:32px}
.px .gd-dl-c>*{margin:0 0 14px}
.px .gd-dl-c>*:last-child{margin-bottom:0}
.px .gd-dl-c>[hidden]{display:none}
.px .gd-dl-c p{font-size:18px;line-height:1.5;max-width:52ch}
.px .gd-dl-c a:not(.kg-btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--btn);text-decoration-thickness:2px;text-underline-offset:3px}
.px .gd-dl-c h2,.px .gd-dl-c h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;line-height:1.2}
.px .gd-dl .kg-button-card{display:block;width:auto;margin:0 0 14px}
.px .gd-dl .kg-btn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;max-width:580px;height:auto;min-height:76px;padding:18px 20px 18px 24px;border:2px solid var(--ink);border-radius:0;background:var(--btn);color:var(--paper);box-shadow:8px 8px 0 var(--ink);font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;line-height:1.25;text-decoration:none;opacity:1;transition:transform .15s}
.px .gd-dl .kg-btn::after{content:"\2193";flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--paper);font-family:"Archivo Black","Archivo",sans-serif;font-size:24px;line-height:1}
.px .gd-dl .kg-btn:hover{opacity:1;transform:translate(-2px,-2px)}
.px .gd-dl .kg-btn:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--ink);transition-duration:.05s}
.px .gd-dl .kg-btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.px .gd-dl-off{font-size:18px;line-height:1.5;padding:16px 18px;border:2px dashed var(--ink);max-width:52ch;margin:0}
.px .gd-m-cover{margin:0;justify-self:center}
.px .gd-m-cover img{display:block;width:100%;max-width:380px;height:auto;border:2px solid var(--ink);box-shadow:14px 14px 0 var(--btn);transform:rotate(3deg)}
.px .gd-heute .gd-h2{max-width:18ch}
.px .gd-sa-erst{font-family:"Archivo",sans-serif;font-weight:800;font-size:20px}
.px .gd-pitch{background:var(--yel);background-image:var(--pz-grain);background-size:240px 240px;border-top:2px solid var(--ink);padding:84px 0 72px}
.px .gd-pitch h2{font-size:clamp(52px,8vw,120px)}
.px .gd-pitch-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-top:30px}
.px .gd-pitch-row p{font-size:21px;line-height:1.5;max-width:50ch;margin:0}
.px .gd-pitch-f{margin:44px 0 0;font-family:"Archivo",sans-serif;font-weight:700;font-size:17px}
.px .gd-pitch-h{margin:10px 0 0;color:var(--ink)}

/* --- Archiv: Ressort-Leiste und Monate --- */
.px .rs{margin-top:40px}
.px .rs-k{margin-bottom:14px}
.px .rs-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.px .rs-c{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:2px solid var(--ink);background:var(--paper2);box-shadow:3px 3px 0 var(--ink);font-family:"Archivo",sans-serif;font-weight:800;font-size:16px;line-height:1.2;text-decoration:none;color:var(--ink);transition:transform .12s}
.px .rs-c:hover{background:var(--yel)}
.px .rs-c:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.05s}
.px .rs-c.is-on{background:var(--ink);color:var(--paper)}
.px .rs-c-alle{background:var(--paper)}
.px .rs-n{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12px;line-height:1;padding:3px 5px;border:1.5px solid currentColor}
.px .arch-m{margin-top:52px}
.px .arch .ar-mh:not([hidden]){display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:44px 0 12px;border-bottom:4px solid var(--ink)}
.px .arch .ar-mh:first-child{padding-top:0}
.px .arch .ar-mh:not([hidden])+.ar-i a{border-top:0}
.px .ar-mh-t{font-family:var(--font-head);font-weight:900;text-transform:lowercase;letter-spacing:-.035em;font-size:clamp(30px,3.4vw,50px);line-height:1;margin:0}
.px .ar-mh-t::after{content:"."}
.px .ar-mh-n:empty{display:none}

/* --- Ressort-Seite (tag.hbs) --- */
.px .rs-titel{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:22px}
.px .rs-page h1.rs-h{font-size:clamp(54px,9vw,150px);line-height:.92;margin:0;max-width:100%;overflow-wrap:break-word;hyphens:auto}
.px .rs-stempel{margin:0;transform:rotate(-6deg)}
.px .rs-stempel .gd-stempel-ink{font-size:clamp(22px,2.2vw,30px)}
.px .rs-lead{max-width:52ch}
.px .rs-grid{margin-top:52px}
.px .rs-grid .empty{grid-column:1/-1}
.px .rs-weitere{margin-top:72px;padding-top:28px;border-top:2px solid var(--ink)}

/* --- Bewegung (nur ohne reduzierte Bewegung) --- */
@keyframes gd-mark{from{background-size:0% 100%}}
@keyframes gd-strike{from{background-size:0% 2.5px}}
@keyframes gd-wipe-y{from{transform:scaleY(0)}}
@media (max-width:600px) and (prefers-reduced-motion:no-preference){.px .gd-pl-linie.pz-arm .gd-pl-w::before{animation-name:gd-wipe-y}}
@media (prefers-reduced-motion:no-preference){
  .px .gd-h1 mark{animation:gd-mark .5s cubic-bezier(.65,0,.35,1) .3s backwards}
  .px .gd-stage .gd-stack{animation:pz-slide .6s cubic-bezier(.16,1,.3,1) backwards}
  .px .gd-stage .gd-stempel{animation:pz-slap .22s cubic-bezier(.55,0,.9,.4) .5s backwards}
  .px .gd-stage.pz-arm .gd-stack{animation-name:pz-slide-r}
  .px .gd-stage.pz-arm .gd-stempel{animation-name:pz-slap-r}
  .px .gd-stage.pz-arm:not(.pz-go) .gd-stack,.px .gd-stage.pz-arm:not(.pz-go) .gd-stempel{animation-play-state:paused}
  .px .pz-stamp.pz-arm{animation:pz-slam-r .3s linear backwards}
  .px .pz-stamp.pz-arm:not(.pz-go){animation-play-state:paused;visibility:hidden}
  .px .gd-vp.pz-arm .gd-vp-v s{animation:gd-strike .45s cubic-bezier(.65,0,.35,1) .08s backwards}
  .px .gd-vp.pz-arm:not(.pz-go) .gd-vp-v s{animation-play-state:paused}
  .px .gd-pl-linie.pz-arm .gd-pl-w::before{animation:pz-wipe .8s cubic-bezier(.65,0,.35,1) .1s backwards}
  .px .gd-pl-linie.pz-arm:not(.pz-go) .gd-pl-w::before{animation-play-state:paused}
  .px .gd-bar{transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s}
  .px .gd-bar.is-an{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
}

/* --- Tablet und Handy --- */
@media (max-width:900px){
  .px .gd-split,.px .gd-hg-grid,.px .gd-faq-grid,.px .gd-m-grid,.px .gd-stapel-grid,.px .gd-lese-grid,.px .gd-wen-grid,.px .gd-toc-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .px .gd-copy p,.px .gd-intro,.px .gd-teil-tx p:not(.mono),.px .gd-end-t,.px .gd-pitch-row p{font-size:19px}
  .px .gd-hero{padding:32px 0 56px}
  /* Handy-Hero (Review C1): Kopf mit Unterzeile, dann Knopf mit Kopplungssatz, dann Bild, dann die Fakten.
     Der Körper wird mit display:contents aufgelöst, damit Knopf und Fakten einzeln um das Bild herum stehen können. */
  .px .gd-hero-grid{display:flex;flex-direction:column}
  .px .gd-hero-head{order:1}
  .px .gd-hero-body{display:contents}
  .px .gd-cta{order:2;margin-top:20px}
  .px .gd-stage{order:3;margin:30px -8px 0;max-width:620px}
  .px .gd-fakten{order:4;margin-top:18px}
  .px .gd-name{margin-top:14px}
  .px .gd-name span{font-size:15px}
  .px .gd-h1{margin-top:18px}
  .px .gd-cta-btn{width:100%;text-align:center;font-size:18px;padding:17px 20px}
  .px .gd-kopplung{font-size:15px}
  .px .gd-cta-2{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:-6px 0 0}
  .px .gd-sub{font-size:19px;margin-top:16px}
  .px .gd-fakten li{font-size:11.5px}
  .px .gd-folien{margin:0 auto;max-width:520px}
  .px .gd-pl{padding:22px 18px 18px}
  .px .gd-sheet-k{padding-right:64px}
  .px .gd-kern{margin-top:56px}
  .px .gd-vp-head{display:none}
  .px .gd-vp{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"v s" "n n";row-gap:10px;padding:20px 0}
  .px .gd-vp:first-child{border-top:4px solid var(--ink);margin-top:36px}
  .px .gd-vp-v{grid-area:v;font-size:17px}
  .px .gd-vp-n{grid-area:n;font-size:18px}
  .px .gd-vp-s{grid-area:s;align-self:start}
  .px .gd-teile{gap:56px;margin-top:44px}
  .px .gd-teil,.px .gd-teil:nth-child(2){grid-template-columns:minmax(0,1fr);gap:28px}
  .px .gd-teil:nth-child(2) .gd-blatt{order:0}
  .px .gd-blatt{width:64%;max-width:320px}
  .px .gd-teil:nth-child(2) .gd-blatt{margin-left:auto}
  .px .gd-blatt img{box-shadow:7px 7px 0 var(--ink)}
  .px .gd-sheet{padding:30px 20px 20px;box-shadow:8px 8px 0 var(--ink);transform:none;margin:0 -4px}
  .px .gd-sheet-n{font-size:96px;right:18px;top:16px}
  .px .gd-sheet-h{font-size:44px}
  .px .gd-sheet-p{font-size:18px}
  .px .gd-felder{grid-template-columns:minmax(0,1fr);gap:18px}
  .px .gd-feld-l{height:72px}
  .px .gd-formel{padding:16px 16px;box-shadow:5px 5px 0 var(--ink)}
  .px .gd-formel-s{font-size:17px}
  .px .gd-formel-b{font-size:17px}
  .px .gd-lese-side{position:static;display:grid;grid-template-columns:42% minmax(0,1fr);gap:8px 22px;align-items:start}
  .px .gd-blatt-orig{width:auto;max-width:none;grid-row:1/3}
  .px .gd-danach{font-size:17px;margin:0}
  .px .gd-lese-side .btn{grid-column:1/-1;text-align:center;margin-top:26px}
  .px .gd-toc summary{padding:18px 0}
  .px .gd-toc-n{flex-basis:100%;order:3}
  .px .gd-toc-x{margin-left:auto}
  .px .gd-toc-k{font-size:17px}
  .px .gd-toc-d{font-size:16px}
  .px .gd-toc-bild{width:60%;max-width:280px;margin-top:8px}
  .px .gd-stapel-grid{margin-top:40px}
  .px .gd-beleg{padding:4px 18px 22px;box-shadow:6px 6px 0 var(--ink)}
  .px .gd-posten .gd-po-lauf{margin:14px -8px 0;padding:14px 8px}
  .px .gd-po-n{font-size:18px}
  .px .gd-po-t{font-size:16px}
  .px .gd-preis-t{font-size:17px}
  .px .gd-stempel-preis .gd-stempel-ink{font-size:36px}
  .px .gd-stapel .gd-formbox{position:static}
  .px .gd-weg{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .px .gd-weg li,.px .gd-weg li+li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;padding:22px 0;border-left:0;border-top:2px solid var(--ink)}
  .px .gd-weg li:first-child{border-top:0}
  .px .gd-weg li+li::before{display:none}
  .px .gd-weg-t{margin:6px 0 6px;font-size:28px}
  .px .gd-weg li>p{grid-column:2}
  .px .gd-weg-heute li,.px .gd-weg-heute li+li{grid-template-columns:48px minmax(0,1fr);gap:18px}
  .px .gd-weg-heute li:first-child{border-top:2px solid var(--ink)}
  .px .gd-weg-heute .gd-weg-n{width:48px;height:48px;font-size:24px}
  .px .gd-weg-heute p{font-size:18px;padding-top:6px}
  .px .gd-wen-box{padding:22px 18px 10px}
  .px .gd-wen-box li{font-size:17px}
  .px .gd-wen-t{font-size:28px}
  .px .gd-q summary{font-size:18px}
  .px .gd-q p{font-size:17px}
  .px .gd-end-t{margin-top:20px}
  .px .gd-m-hero{padding:32px 0 60px}
  .px .gd-m-cover{justify-self:start;width:56%;max-width:260px;margin-top:8px}
  .px .gd-m-cover img{box-shadow:9px 9px 0 var(--btn)}
  .px .gd-dl .kg-btn{font-size:18px;min-height:70px;padding:16px 16px 16px 18px;box-shadow:6px 6px 0 var(--ink)}
  .px .gd-pitch{padding:64px 0 56px}
  .px .gd-pitch-row{grid-template-columns:minmax(0,1fr)}
  .px .gd-pitch-row .btn{text-align:center}
  .px #holen,.px #leseprobe,.px #download,.px .gd-formbox{scroll-margin-top:80px}
  .px .rs{margin-top:32px}
  .px .rs-list{gap:8px}
  .px .rs-c{font-size:15px;padding:8px 12px}
  .px .arch .ar-mh:not([hidden]){padding-top:36px;flex-wrap:wrap;gap:6px 16px}
  .px .ar-mh-t{font-size:34px}
  .px .rs-weitere{margin-top:56px}
  /* Leiste */
  .px .gd-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:2px solid var(--ink);transform:translateY(110%);visibility:hidden}
  .px .gd-bar[hidden]{display:none}
  .px .gd-bar.is-an{transform:none;visibility:visible}
  .px .gd-bar-t{flex:1;min-width:0;display:grid;gap:3px;line-height:1.2}
  .px .gd-bar-t b{font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .px .gd-bar-t span{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .px .gd-bar-btn{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 18px;background:var(--btn);color:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:"Archivo",sans-serif;font-weight:800;font-size:17px;text-decoration:none}
  .px .gd-bar-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
  .px.gd-bar-an .foot{padding-bottom:104px}
  /* Review M2: solange die Leiste an ist, nur ein roter Knopf im Bild */
  .px .top .nav .btn{transition:opacity .15s,visibility 0s linear 0s}
  .px.gd-bar-an .top .nav .btn{opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s linear .15s}
  /* Review M2: Tippflächen mindestens 44 px hoch, Layout bleibt gleich (Innenabstand plus negativer Außenabstand) */
  .px .gd-fb-in a{padding:14px 0;margin:-14px 0}
}
@media (max-width:600px){
  .px .gd-pl-w{grid-template-columns:minmax(0,1fr);margin-top:16px}
  .px .gd-pl-w::before{left:9px;right:auto;top:6px;bottom:6px;width:6px;height:auto;transform-origin:50% 0}
  .px .gd-pl-w li{grid-template-columns:auto 34px minmax(0,1fr);align-items:center;gap:12px;padding:5px 0}
  .px .gd-pl-p{flex-direction:column;gap:2px;height:auto;width:24px;align-items:center}
  .px .gd-pl-p i{width:12px;height:12px}
  .px .gd-pl-w b{margin-top:0}
  .px .gd-pl-w span:last-child{font-size:16px}
}
@media (max-width:420px){
  /* Handy-Hero kompakter, damit Knopf und Bedingung im ersten Bildschirm stehen (Review C1, L1). "für Founder" steht im Etikett, "vor dem Raise" in der Unterzeile. */
  .px .gd-k-wer{display:none}
  .px .gd-hero{padding-top:24px}
  .px .gd-h1{font-size:38px}
  .px .gd-sub{font-size:17.5px;line-height:1.45}
  .px .gd-s h2.gd-h2{font-size:40px}
  .px .gd-sheet-h{font-size:40px}
  .px .gd-teil-t{font-size:30px}
  .px .gd-pitch h2{font-size:52px}
  .px .rs-page h1.rs-h{font-size:52px}
}
@media (max-width:380px){
  .px .gd-h1{font-size:34px}
}
@media (max-width:359px){
  .px .sf--stack .sf-full{display:none}
  .px .sf--stack .sf-short{display:inline}
  .px .gd-h1{font-size:32px}
  .px .gd-s h2.gd-h2{font-size:36px}
  .px .gd-bar-t b{font-size:14px}
  .px .gd-bar-btn{padding:0 14px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .px .gd-toc-x::after,.px .gd-q i::after,.px .gd-dl .kg-btn,.px .rs-c{transition:none}
}