/* =========================================================
   rulers — shared design system
   ========================================================= */

/* ----- FONTS ----- */
@font-face { font-family:'Monoela'; src:url('fonts/Monoela-Thin.woff2') format('woff2'); font-weight:100; font-display:swap; }
@font-face { font-family:'Monoela'; src:url('fonts/Monoela-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Monoela'; src:url('fonts/Monoela-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Monoela'; src:url('fonts/Monoela-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Monoela'; src:url('fonts/Monoela-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
/* Druk — Commercial Type license #2605-XVNNJZ (Schwartzco Inc., 2026)
   License: https://commercialtype.com/eula
   8 styles: Medium/Bold/Heavy/Super + matching Italics */
@font-face { font-family:'Druk'; src:url('fonts/Druk-Medium-Web.woff2')       format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Druk'; src:url('fonts/Druk-MediumItalic-Web.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Druk'; src:url('fonts/Druk-Bold-Web.woff2')         format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Druk'; src:url('fonts/Druk-BoldItalic-Web.woff2')   format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Druk'; src:url('fonts/Druk-Heavy-Web.woff2')        format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Druk'; src:url('fonts/Druk-HeavyItalic-Web.woff2')  format('woff2'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Druk'; src:url('fonts/Druk-Super-Web.woff2')        format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Druk'; src:url('fonts/Druk-SuperItalic-Web.woff2')  format('woff2'); font-weight:900; font-style:italic; font-display:swap; }

/* ----- TOKENS ----- */
:root {
    --bg: #FFF8EE;
    --ink: #0222D0;
    --ink-deep: #021CB0;
    --neo: #DBFF3D;
    --neo-soft: #EDFF8A;
    --neo-dark: #2A3805;
    --paper: #F3EEDF;
    --paper-2: #ECE6D4;
    --line: rgba(2,34,208,0.15);

    --card-royal:    #2E4ED9;
    --card-medium:   #6B83DD;
    --card-soft:     #95A8E0;
    --card-lavender: #D6DCF5;
    --card-deep:     #0A1A4A;
    --card-white:    #FFFFFF;

    --r-card: 22px;
    --r-section: 32px;
    --max: 1400px;

    --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* ----- RESET ----- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Monoela', ui-monospace, SFMono-Regular, Menlo, monospace;
    background:var(--bg);
    color:var(--ink);
    overflow-x:hidden;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
a { color:inherit; }
img,svg { display:block; max-width:100%; }
button { font:inherit; }

/* ----- TYPOGRAPHY UTILS ----- */
.t-mono { font-family:'Monoela', monospace; }
.t-druk { font-family:'Druk', sans-serif; text-transform:uppercase; letter-spacing:.01em; line-height:1; }
.t-eyebrow {
    font-family:'Monoela', monospace;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    opacity:.55;
}

/* ----- NAV ----- */
nav.top {
    position:fixed; top:0; left:0; right:0;
    padding:22px 32px;
    display:flex; justify-content:space-between; align-items:center;
    z-index:1000;
    pointer-events:none;
}
nav.top > * { pointer-events:auto; }
.logo {
    position:absolute; left:50%; transform:translateX(-50%);
    /* Test: Logo in Druk statt Monoela. Rueckbau: font-family 'Monoela', monospace; font-size 1.45rem; font-weight 700; letter-spacing -.03em; text-transform none */
    font-family:'Druk', sans-serif;
    font-size:1.7rem; font-weight:900;
    text-transform:uppercase;
    color:var(--ink); letter-spacing:.02em;
    text-decoration:none;
    transition:color .4s;
}
.logo.inverted { color:var(--neo); }

.lang-switch {
    display:inline-flex; gap:4px; padding:6px;
    background:rgba(2,34,208,0.06);
    border-radius:999px;
    font-family:'Monoela', monospace;
    font-size:.78rem; font-weight:500;
    letter-spacing:.05em; text-transform:uppercase;
    transition:background .35s;
}
.lang-switch button {
    background:transparent; border:0;
    padding:6px 12px; border-radius:999px;
    color:var(--ink); cursor:pointer;
    transition:background .25s, color .25s;
}
.lang-switch button.active { background:var(--ink); color:var(--bg); }
.lang-switch.on-dark { background:rgba(255,255,255,0.12); }
.lang-switch.on-dark button { color:var(--bg); }
.lang-switch.on-dark button.active { background:var(--neo); color:var(--ink); }

.burger {
    width:50px; height:50px; border-radius:50%;
    background:var(--neo);
    display:inline-flex; flex-direction:column;
    justify-content:center; align-items:center;
    gap:5px; border:0; cursor:pointer;
    box-shadow:0 6px 20px rgba(219,255,61,0.35);
    transition:transform .3s, background .3s, box-shadow .3s;
}
.burger:hover {
    transform:scale(1.06);
    box-shadow:0 8px 26px rgba(219,255,61,0.5);
}
.burger span {
    width:18px; height:2px; background:var(--neo-dark); border-radius:2px;
    transition:transform .35s, opacity .35s, background .35s;
}
.burger.open { background:var(--neo); }
.burger.open span { background:var(--neo-dark); }
.burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ----- MENU OVERLAY ----- */
.menu-overlay {
    position:fixed; inset:0;
    background:var(--ink); color:var(--bg);
    z-index:999;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    opacity:0; pointer-events:none;
    transition:opacity .5s ease;
    padding:100px 40px 40px;
}
.menu-overlay::before {
    content:''; position:absolute; top:0; left:0;
    width:60vmin; height:60vmin;
    background:radial-gradient(circle at center, var(--neo) 0%, transparent 70%);
    opacity:.15; transform:translate(-30%,-30%);
    pointer-events:none;
}
.menu-overlay.open { opacity:1; pointer-events:auto; }

.menu-links {
    list-style:none; text-align:center; max-width:900px;
}
.menu-links li {
    margin:14px 0;
    opacity:0; transform:translateY(20px);
    transition:opacity .5s, transform .5s;
}
.menu-overlay.open .menu-links li { opacity:1; transform:translateY(0); }
.menu-overlay.open .menu-links li:nth-child(1) { transition-delay:.10s; }
.menu-overlay.open .menu-links li:nth-child(2) { transition-delay:.16s; }
.menu-overlay.open .menu-links li:nth-child(3) { transition-delay:.22s; }
.menu-overlay.open .menu-links li:nth-child(4) { transition-delay:.28s; }
.menu-overlay.open .menu-links li:nth-child(5) { transition-delay:.34s; }

.menu-links a {
    font-family:'Druk', sans-serif;
    text-transform:uppercase;
    color:var(--bg); text-decoration:none;
    font-size:clamp(2rem, 6vw, 4rem);
    font-weight:800; letter-spacing:.02em;
    line-height:1; display:inline-block; padding:6px 0;
    transition:color .25s;
}
.menu-links a:hover { color:var(--neo); }
.menu-links a[aria-current="page"] { color:var(--neo); }

.menu-sub {
    display:flex; flex-direction:column; gap:4px;
    margin-top:12px;
    opacity:0; max-height:0; overflow:hidden;
    transition:opacity .35s, max-height .45s;
}
.menu-sub.open { opacity:1; max-height:400px; }
.menu-sub a {
    font-family:'Monoela', monospace;
    font-size:1rem; letter-spacing:.05em;
    text-transform:none; color:var(--neo);
    font-weight:400; padding:4px 0;
}
.menu-sub a:hover { color:var(--bg); }

.menu-foot {
    position:absolute; bottom:32px;
    left:0; right:0;
    display:flex; justify-content:space-between;
    padding:0 40px;
    font-family:'Monoela', monospace;
    font-size:.85rem;
    color:rgba(255,248,238,0.55);
    text-transform:uppercase; letter-spacing:.1em;
}
.menu-foot a { text-decoration:none; transition:color .25s; }
.menu-foot a:hover { color:var(--neo); }

/* ----- PAGE WRAPPER ----- */
.page-shell { padding-top:100px; }

/* ----- PAGE HEADER (subpages) ----- */
.page-head {
    padding:100px 32px 60px;
    max-width:var(--max);
    margin:0 auto;
}
.page-head .t-eyebrow { margin-bottom:18px; }
.page-head h1 {
    font-family:'Druk', sans-serif;
    font-size:clamp(2.8rem, 8vw, 7rem);
    font-weight:900;
    line-height:.95;
    letter-spacing:.01em;
    text-transform:uppercase;
}
.page-head .lede {
    margin-top:32px;
    font-size:clamp(1rem, 1.5vw, 1.25rem);
    font-weight:300;
    line-height:1.55;
    max-width:680px;
    opacity:.85;
}

/* ----- SECTION ----- */
.section {
    padding:clamp(80px, 12vw, 140px) 32px;
    max-width:var(--max);
    margin:0 auto;
}
.section-dark {
    background:var(--ink);
    color:var(--bg);
    border-radius:var(--r-section);
    margin:60px 20px;
    padding:clamp(80px, 14vw, 160px) 32px;
    overflow:hidden;
    position:relative;
}
.section-dark::after {
    content:''; position:absolute;
    top:-10%; right:-10%;
    width:40vmin; height:40vmin;
    background:radial-gradient(circle at center, var(--neo) 0%, transparent 70%);
    opacity:.08; pointer-events:none;
}

/* ----- BUTTONS ----- */
.btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px;
    border-radius:999px;
    background:var(--neo);
    color:var(--ink);
    text-decoration:none;
    font-family:'Monoela', monospace;
    font-size:.85rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.12em;
    border:0; cursor:pointer;
    transition:transform .25s var(--ease-out), background .25s;
}
.btn:hover { transform:translateY(-2px); background:var(--neo-soft); }
.btn.neo { background:var(--neo); color:var(--ink); }
.btn.neo:hover { background:var(--neo-soft); }
.btn.ghost {
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--ink);
}
.btn.ghost:hover { background:var(--ink); color:var(--bg); }

/* ----- FOOTER (ultramarine, full-bleed, aeline-style) ----- */
footer.site-footer {
    background:var(--ink);
    color:var(--bg);
    margin-top:80px;
    padding:0;
    position:relative;
    overflow:hidden;
    border-top:0;
}
footer.site-footer::before {
    content:'';
    position:absolute;
    top:-15%; right:-10%;
    width:55vmin; height:55vmin;
    background:radial-gradient(circle at center, var(--neo) 0%, transparent 65%);
    opacity:.08;
    pointer-events:none;
}
.footer-inner {
    max-width:var(--max);
    margin:0 auto;
    padding:60px 32px 28px;
    position:relative;
}
.footer-top {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:60px;
    align-items:start;
}
.footer-brand .footer-logo {
    font-family:'Druk', sans-serif;
    font-size:2.4rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.02em;
    line-height:1;
    margin-bottom:18px;
    color:var(--bg);
}
.footer-tag {
    font-family:'Monoela', monospace;
    font-size:.95rem;
    line-height:1.55;
    opacity:.7;
    margin-bottom:26px;
    max-width:280px;
}
.footer-partner {
    display:inline-flex;
    align-items:center;
    background:#FFFFFF;
    padding:10px 14px;
    border-radius:12px;
    transition:transform .25s var(--ease-out), box-shadow .25s;
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
}
.footer-partner:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.22); }
.footer-partner img { display:block; width:130px; height:auto; }

.footer-nav {
    display:grid;
    grid-template-columns:1fr 1.4fr 1fr;
    gap:30px;
}
.footer-col { display:flex; flex-direction:column; gap:12px; }
.footer-col-label {
    font-family:'Monoela', monospace;
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--neo);
    margin-bottom:8px;
}
.footer-col a {
    color:var(--bg);
    text-decoration:none;
    font-family:'Monoela', monospace;
    font-size:.95rem;
    opacity:.82;
    transition:opacity .2s, color .2s, transform .2s var(--ease-out);
}
.footer-col a:hover { opacity:1; color:var(--neo); transform:translateX(3px); }

/* "from AI with ❤️" — all neo, gently pulsing emoji heart */
.foot-neo {
    color:var(--neo);
    font-weight:600;
    letter-spacing:.08em;
}
.foot-heart {
    display:inline-block;
    margin:0 .05em;
    font-size:1.05em;
    transform-origin:center;
    animation:heartPulse 1.4s ease-in-out infinite;
    text-transform:none;
}
@keyframes heartPulse {
    0%, 100% { transform:scale(1); }
    25%      { transform:scale(1.18); }
    50%      { transform:scale(1); }
    65%      { transform:scale(1.10); }
    80%      { transform:scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .foot-heart { animation:none; }
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding-top:30px;
    margin-top:30px;
    border-top:1px solid rgba(255,248,238,0.12);
    font-family:'Monoela', monospace;
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,248,238,0.55);
}
.footer-legal-row { display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.footer-bottom a {
    color:rgba(255,248,238,0.7);
    text-decoration:none;
    transition:color .2s;
}
.footer-bottom a:hover { color:var(--neo); }

@media (max-width:900px) {
    .footer-inner { padding:50px 22px 22px; }
    .footer-top { grid-template-columns:1fr; gap:40px; }
    .footer-nav { grid-template-columns:1fr 1fr; gap:28px 24px; }
    .footer-brand .footer-logo { font-size:1.8rem; }
    .footer-bottom {
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
}
@media (max-width:480px) {
    .footer-nav { grid-template-columns:1fr; gap:24px; }
}

/* ----- REVEAL ----- */
.reveal {
    opacity:0; transform:translateY(40px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in { opacity:1; transform:translateY(0); }
.reveal-late { transition-delay:.08s; }
.reveal-late-2 { transition-delay:.16s; }

/* Char-stagger headings ("aeline" style) */
.split-line { display:block; overflow:hidden; }
.split-line > span {
    display:inline-block;
    transform:translateY(110%);
    transition:transform 1s var(--ease-out);
}
.split-line.is-in > span { transform:translateY(0); }
.split-line.is-in > span:nth-child(1) { transition-delay:.05s; }
.split-line.is-in > span:nth-child(2) { transition-delay:.10s; }
.split-line.is-in > span:nth-child(3) { transition-delay:.15s; }
.split-line.is-in > span:nth-child(4) { transition-delay:.20s; }
.split-line.is-in > span:nth-child(5) { transition-delay:.25s; }
.split-line.is-in > span:nth-child(6) { transition-delay:.30s; }

/* ----- CURTAIN (between sections) ----- */
.curtain-wrap { position:relative; }
.curtain {
    position:absolute; inset:auto 0 0 0;
    height:0;
    background:var(--ink);
    z-index:1;
    pointer-events:none;
    transform-origin:center bottom;
}

/* ----- MARQUEE STRIP ----- */
.strip {
    background:var(--ink);
    color:var(--bg);
    padding:36px 0;
    overflow:hidden;
    white-space:nowrap;
}
.strip-inner {
    display:inline-flex;
    gap:80px;
    padding-left:80px;
    animation:scrollX 30s linear infinite;
    font-family:'Druk', sans-serif;
    font-size:clamp(2rem, 5vw, 3.5rem);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.01em;
}
.strip-inner span:nth-child(even) { color:var(--neo); }
/* Long-phrase variant: full Druk treatment from base.
   We just neutralize the alternating color and highlight the brand. */
.strip.is-phrase .strip-inner > span { color:inherit; }
.strip.is-phrase .strip-inner .brand { color:var(--neo); }
@keyframes scrollX {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .strip-inner { animation:none; }
}

/* ----- RESPONSIVE NAV/FOOTER ----- */
@media (max-width:900px) {
    nav.top { padding:16px 18px; }
    .page-head { padding:90px 22px 40px; }
    .page-head h1 { font-size:clamp(2.2rem, 13vw, 4rem); }
    .section { padding:70px 22px; }
    .section-dark { padding:70px 22px; margin:40px 12px; border-radius:22px; }
    footer.site-footer { grid-template-columns:1fr; text-align:left; gap:18px; padding:60px 22px 40px; }
    .footer-contact { text-align:left; }
    .menu-foot { padding:0 22px; font-size:.72rem; }
}
@media (max-width:480px) {
    .lang-switch { font-size:.7rem; }
    .lang-switch button { padding:5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .split-line > span, .curtain { opacity:1 !important; transform:none !important; transition:none !important; }
    * { animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* ===== CATEGORY PAGES (pm-*) — shared across performance-marketing, tracking-analytics, ki-agentur & friends ===== */

/* Top header — full-width above the TOC+content grid */
.pm-top {
    position:relative;
    padding:140px 32px 50px;
    max-width:var(--max);
    margin:0 auto;
}
.pm-top .t-eyebrow {
    margin-bottom:24px;
}
.pm-top h1 {
    font-family:'Druk', sans-serif;
    font-size:clamp(2.8rem, 9vw, 8.5rem);
    font-weight:900;
    line-height:.95;
    letter-spacing:.005em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 36px;
    max-width:1030px; /* TOC 230 + gap 80 + content 720 → align with body text right edge */
}
.pm-top .lede {
    font-family:'Monoela', monospace;
    font-size:clamp(1rem, 1.4vw, 1.22rem);
    font-weight:300;
    line-height:1.6;
    opacity:.88;
    max-width:680px;
}

/* TOC + centered content grid */
.pm-shell {
    max-width:var(--max);
    margin:20px auto 0;
    padding:0 32px 80px;
    display:grid;
    grid-template-columns:230px minmax(0, 720px) 1fr;
    gap:80px;
    align-items:start;
}
.pm-toc {
    position:sticky;
    top:110px;
    font-family:'Monoela', monospace;
    align-self:start;
}
.pm-toc .label {
    font-size:.72rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    opacity:.55;
    margin-bottom:16px;
}
.pm-toc ol {
    list-style:none;
    counter-reset:tn;
    border-left:1px solid var(--line);
    margin:0; padding:0;
}
.pm-toc li { counter-increment:tn; margin:0; }
.pm-toc a {
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:9px 14px;
    font-size:.82rem;
    line-height:1.35;
    color:var(--ink);
    text-decoration:none;
    opacity:.55;
    transition:opacity .2s, background .2s, color .2s, box-shadow .2s;
    border-radius:0 6px 6px 0;
}
.pm-toc a::before {
    content:counter(tn, decimal-leading-zero);
    font-size:.66rem;
    letter-spacing:.12em;
    opacity:.5;
    flex-shrink:0;
    margin-top:2px;
    font-weight:500;
}
.pm-toc a:hover { opacity:.95; background:rgba(2,34,208,0.04); }
.pm-toc a.active {
    opacity:1;
    color:var(--ink);
    font-weight:500;
    background:rgba(2,34,208,0.06);
    box-shadow:inset 2px 0 0 var(--ink);
}

.pm-main { min-width:0; }

.pm-section {
    padding:48px 0 0;
    scroll-margin-top:110px;
}
.pm-section + .pm-section { border-top:1px solid var(--line); }
.pm-section .num {
    font-family:'Monoela', monospace;
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    opacity:.55;
    margin-bottom:14px;
}
.pm-section h2 {
    font-family:'Druk', sans-serif;
    font-size:clamp(1.5rem, 3vw, 2.2rem);
    font-weight:900;
    line-height:1.05;
    letter-spacing:.005em;
    text-transform:uppercase;
    color:var(--ink);
    margin-bottom:24px;
}
.pm-section p {
    font-family:'Monoela', monospace;
    font-size:1.02rem;
    line-height:1.7;
    margin-bottom:1.2em;
}
.pm-section ul {
    font-family:'Monoela', monospace;
    font-size:1rem;
    line-height:1.65;
    padding-left:1.4em;
    margin-bottom:1.4em;
}
.pm-section ul li { margin-bottom:.5em; }
.pm-section ul li::marker { color:var(--ink); opacity:.55; }
.pm-section a { color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }

/* Callout */
.pm-callout {
    background:var(--paper);
    border-radius:14px;
    padding:24px 26px;
    margin:1.4em 0;
    border-left:3px solid var(--ink);
    font-family:'Monoela', monospace;
    font-size:.98rem;
    line-height:1.6;
}
.pm-callout strong { color:var(--ink-deep); }

/* Big quote */
.pm-quote {
    margin:1.6em 0;
    padding:32px 30px;
    background:var(--ink);
    color:var(--bg);
    border-radius:18px;
    position:relative;
    overflow:hidden;
}
.pm-quote::before {
    content:'"';
    position:absolute;
    top:-30px; left:18px;
    font-family:'Druk', sans-serif;
    font-size:9rem;
    line-height:1;
    color:var(--neo);
    opacity:.35;
    pointer-events:none;
}
.pm-quote p {
    font-family:'Druk', sans-serif;
    font-size:clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight:500;
    line-height:1.2;
    text-transform:none;
    letter-spacing:.005em;
    margin:0;
    position:relative;
}
.pm-quote p em {
    font-style:normal;
    color:var(--neo);
}

/* Sub-discipline cards */
.pm-disc-card {
    background:var(--paper);
    border-radius:18px;
    padding:24px 28px;
    margin:0;
    display:block;
    text-decoration:none;
    color:var(--ink);
    transition:background .25s, transform .25s var(--ease-out), box-shadow .25s;
    position:relative;
}
.pm-disc-card:hover {
    background:#FFFFFF;
    transform:translateY(-3px);
    box-shadow:0 14px 36px rgba(2,34,208,0.10);
}
.pm-disc-card .arrow-out {
    position:absolute;
    top:24px; right:26px;
    width:34px; height:34px;
    border-radius:50%;
    background:var(--ink);
    color:var(--neo);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:'Monoela', monospace;
    font-size:1rem;
    font-weight:700;
    transition:transform .25s var(--ease-out);
}
.pm-disc-card:hover .arrow-out { transform:rotate(-45deg); }
.pm-disc-card .disc-tag {
    font-family:'Monoela', monospace;
    font-size:.7rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink);
    opacity:.55;
    margin-bottom:6px;
}
.pm-disc-card h3 {
    font-family:'Druk', sans-serif;
    font-size:1.4rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.005em;
    text-transform:uppercase;
    margin-bottom:14px;
    color:var(--ink);
}
.pm-disc-card p {
    font-family:'Monoela', monospace;
    font-size:.95rem;
    line-height:1.55;
    margin:0;
    color:var(--ink);
    opacity:.88;
}
.pm-disc-card .read-more {
    display:inline-block;
    font-family:'Monoela', monospace;
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-top:14px;
    color:var(--ink);
    opacity:.7;
}

/* Highlight pill row */
.pm-pills {
    display:flex; flex-wrap:wrap; gap:8px;
    margin:1.2em 0 1.8em;
}
.pm-pills span {
    font-family:'Monoela', monospace;
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:500;
    color:var(--neo-dark);
    background:var(--neo);
    padding:6px 14px;
    border-radius:999px;
}

/* Dashboard showcase */
.tr-dash {
    display:grid;
    gap:28px;
    margin:1.8em 0 .6em;
}
.tr-dash figure {
    margin:0;
    background:#FFFFFF;
    border-radius:18px;
    padding:14px;
    box-shadow:0 12px 40px rgba(2,34,208,0.08);
    transition:transform .25s var(--ease-out), box-shadow .25s;
}
.tr-dash figure:hover {
    transform:translateY(-3px);
    box-shadow:0 20px 60px rgba(2,34,208,0.14);
}
.tr-dash img {
    width:100%;
    height:auto;
    border-radius:10px;
}
.tr-dash figcaption {
    font-family:'Monoela', monospace;
    font-size:.78rem;
    line-height:1.5;
    letter-spacing:.04em;
    opacity:.65;
    padding:12px 6px 2px;
}

/* Contact block — light theme, unified across site */
.pm-contact {
    margin-top:60px;
    padding:48px 44px;
    background:#FFFFFF;
    color:var(--ink);
    border-radius:24px;
    position:relative;
    overflow:hidden;
    box-shadow:0 12px 50px rgba(2,34,208,0.06);
}
.pm-contact::after {
    content:'';
    position:absolute;
    top:-30%; right:-15%;
    width:50vmin; height:50vmin;
    background:radial-gradient(circle at center, var(--neo) 0%, transparent 65%);
    opacity:.18;
    pointer-events:none;
}
.pm-contact .pm-section-num {
    font-family:'Monoela', monospace;
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink);
    opacity:.55;
    margin-bottom:14px;
    position:relative;
}
.pm-contact h2 {
    font-family:'Druk', sans-serif;
    font-size:clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight:900;
    line-height:1.02;
    text-transform:uppercase;
    letter-spacing:.005em;
    color:var(--ink);
    margin-bottom:20px;
    position:relative;
}
.pm-contact .lede {
    font-family:'Monoela', monospace;
    font-size:1rem;
    line-height:1.6;
    opacity:.78;
    margin-bottom:30px;
    max-width:580px;
    position:relative;
    color:var(--ink);
}
.pm-form {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 20px;
}
.pm-form .field-full { grid-column:1 / -1; }
.pm-form label {
    display:block;
    font-family:'Monoela', monospace;
    font-size:.7rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink);
    opacity:.65;
    margin-bottom:8px;
    font-weight:500;
}
.pm-form input,
.pm-form textarea {
    width:100%;
    background:transparent;
    border:0;
    border-bottom:1.5px solid rgba(2,34,208,0.3);
    padding:10px 0;
    font-family:'Monoela', monospace;
    font-size:1rem;
    color:var(--ink);
    outline:none;
    transition:border-color .25s;
}
.pm-form input::placeholder,
.pm-form textarea::placeholder { color:rgba(2,34,208,0.35); }
.pm-form input:focus,
.pm-form textarea:focus { border-color:var(--ink); }
.pm-form textarea { min-height:120px; resize:vertical; }
.pm-form .submit-row {
    grid-column:1 / -1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    gap:18px;
}
.pm-form .submit-row .hint {
    font-family:'Monoela', monospace;
    font-size:.72rem;
    letter-spacing:.06em;
    opacity:.55;
    color:var(--ink);
}
.pm-form button[type="submit"] {
    background:var(--neo);
    color:var(--ink);
    border:0;
    padding:14px 24px;
    border-radius:999px;
    font-family:'Monoela', monospace;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    transition:transform .25s var(--ease-out), background .25s;
}
.pm-form button[type="submit"]:hover {
    background:var(--neo-soft);
    transform:translateY(-2px);
}

@media (max-width:1180px) {
    .pm-shell { grid-template-columns:220px minmax(0, 1fr); gap:60px; }
    .pm-top h1 { max-width:none; } /* body text fills full width in this band */
}
@media (max-width:1024px) {
    .pm-shell { grid-template-columns:200px minmax(0, 1fr); gap:50px; }
}
@media (max-width:900px) {
    .pm-top { padding:110px 22px 30px; }
    .pm-top h1 { max-width:none; }
    .pm-shell {
        grid-template-columns:1fr;
        gap:0;
        padding:0 22px 60px;
        margin-top:10px;
    }
    .pm-toc {
        position:static;
        margin-bottom:30px;
        padding-bottom:20px;
        border-bottom:1px solid var(--line);
    }
    .pm-toc ol {
        display:flex;
        overflow-x:auto;
        border-left:0;
        gap:0;
        scrollbar-width:none;
    }
    .pm-toc ol::-webkit-scrollbar { display:none; }
    .pm-toc a {
        white-space:nowrap;
        padding:8px 14px;
        border-radius:999px;
        background:var(--paper);
        margin-right:8px;
        box-shadow:none !important;
    }
    .pm-toc a.active {
        background:var(--ink);
        color:var(--bg);
        box-shadow:none !important;
    }
    .pm-toc a.active::before { opacity:.8; }
    .pm-section { padding:36px 0 0; }
    .pm-contact { padding:36px 24px; margin-top:40px; }
    .pm-form { grid-template-columns:1fr; }
    .pm-form .submit-row { flex-direction:column; align-items:stretch; gap:12px; }
    .tr-dash figure { padding:10px; }
}

/* ----- STICKY CONTACT FAB (injected by app.js on every page) ----- */
.fab { position:fixed; right:22px; bottom:22px; z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.fab-menu { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.fab-menu[hidden] { display:none; }
.fab-item {
    display:inline-flex; align-items:center; gap:8px;
    background:#FFFFFF; color:var(--ink);
    font-family:'Monoela', monospace; font-size:.82rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
    padding:11px 18px; border-radius:999px;
    box-shadow:0 8px 30px rgba(2,34,208,0.18);
    transition:transform .2s var(--ease-out), background .2s;
}
.fab-item:hover { transform:translateY(-2px); background:var(--neo); }
.fab-btn {
    width:58px; height:58px; border-radius:50%;
    background:var(--neo); color:var(--ink); border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 34px rgba(219,255,61,0.5), 0 4px 14px rgba(2,34,208,0.2);
    transition:transform .25s var(--ease-out), box-shadow .25s;
}
.fab-btn:hover { transform:translateY(-3px) scale(1.05); }
.fab-btn svg { width:26px; height:26px; }
.fab-btn .fab-x { display:none; font-family:'Monoela', monospace; font-size:1.5rem; font-weight:700; line-height:1; }
.fab.open .fab-btn svg { display:none; }
.fab.open .fab-btn .fab-x { display:block; }
@media (max-width:900px) { .fab { right:14px; bottom:14px; } .fab-btn { width:52px; height:52px; } }
@media print { .fab { display:none; } }

/* ----- COOKIE CONSENT BANNER (injected by app.js) ----- */
@keyframes consentIn {
    0%   { transform:translateY(24px); opacity:0; }
    100% { transform:translateY(0); opacity:1; }
}
.consent {
    position:fixed; left:22px; right:22px; bottom:22px; z-index:950;
    max-width:480px;
    background:var(--ink);
    color:var(--bg);
    border-radius:22px;
    padding:26px 28px 28px;
    box-shadow:0 24px 70px rgba(2,28,176,0.45);
    font-family:'Monoela', monospace;
    overflow:hidden;
    animation:consentIn .5s var(--ease-out) both;
}
/* Neon-Kante oben, wie ein Textmarker-Strich */
.consent::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:5px;
    background:var(--neo);
}
.consent-eyebrow {
    display:block;
    font-size:.66rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--bg); opacity:.55;
    margin-bottom:12px;
}
.consent h3 {
    font-family:'Druk', sans-serif;
    font-size:clamp(1.9rem, 4vw, 2.4rem); font-weight:900;
    line-height:.95;
    text-transform:uppercase; letter-spacing:.01em;
    color:var(--neo); margin-bottom:12px;
}
.consent p { font-size:.88rem; line-height:1.6; color:var(--bg); opacity:.88; margin-bottom:20px; }
.consent p a {
    color:var(--bg);
    text-decoration:underline;
    text-decoration-color:var(--neo);
    text-decoration-thickness:1.5px;
    text-underline-offset:3px;
}
.consent p a:hover { color:var(--neo); }
.consent .consent-row { display:flex; gap:10px; flex-wrap:wrap; }
.consent button {
    font-family:'Monoela', monospace;
    font-size:.8rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    padding:13px 22px; border-radius:999px;
    border:0; cursor:pointer;
    transition:transform .2s var(--ease-out), background .2s, color .2s;
}
.consent button:hover { transform:translateY(-2px); }
.consent button:focus-visible { outline:2px solid var(--neo); outline-offset:3px; }
.consent .c-accept { background:var(--neo); color:var(--ink); }
.consent .c-accept:hover { background:var(--neo-soft); }
.consent .c-deny { background:transparent; color:var(--bg); border:1.5px solid rgba(255,248,238,.55); }
.consent .c-deny:hover { border-color:var(--bg); }
@media (max-width:600px) {
    .consent { left:12px; right:12px; bottom:12px; padding:22px 22px 24px; }
    .consent .consent-row { flex-direction:column; }
    .consent button { width:100%; }
}
@media (prefers-reduced-motion: reduce) { .consent { animation:none; } }
@media print { .consent { display:none; } }