/* ============================================================ zenpAI — shared design system (ZPA-WEB-0002) Multi-page edition. Dark "Kohle" base, coral scalpel accent. Editorial restraint, elevated. Linked by every page. ============================================================ */ /* ============================================================ zenpAI — Website v3.0 (ZPA-WEB-0001) Dark "Kohle" theme — eggshell on charcoal, Anthropic coral accent. Motion philosophy: editorial restraint over SaaS flourish. ============================================================ */ :root{ /* Core dark palette */ --kohle:#2A2A2C; /* base background */ --kohle-tief:#1C1C1E; /* deeper — heavy sections: Referenz, Kontakt, Footer */ --eierschale:#EDE9E2; /* universal foreground — text, lines, drawing */ --orange:#D97757; /* accent — Anthropic coral */ --cta-bg:#B85434; /* darker terracotta for solid buttons — WCAG AA (4.8:1) with white text */ --cta-bg-hover:#9E4529; /* hover/active for solid buttons — stays in-brand in both themes (6.3:1 white) */ /* Legacy aliases — both old fg/bg tokens now resolve to the eggshell foreground; every rule that used them as a background is fixed explicitly to --kohle / --kohle-tief below. */ --graphit:var(--eierschale); /* primary text — flips per theme */ --kaolin:#EDE9E2; /* always-light cream — used in .dark sections regardless of theme */ --blau:var(--orange); /* accent — Anthropic coral */ --schiefer:#9B958B; /* muted foreground, lifted for the dark field */ --dunkelgrau:#1C1C1E; --hellgrau:#CBC5BB; /* secondary text on dark */ --mittelgrau:#928D85; /* muted text on the deepest sections */ --linie:rgba(237,233,226,0.13); /* eggshell hairline */ --linie-dunkel:rgba(237,233,226,0.13); /* both contexts are dark now */ --ease:cubic-bezier(0.4, 0, 0.2, 1); /* Free, privacy-clean system fonts — no external request, no Google Fonts. */ --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif; --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace; /* Spacing scale — rhythm, not a single value. Separation is carried by space and the §0X headings, not by decorative divider lines. */ --space-section:120px; --space-act:176px; } /* ──────────────────────────────────────────────────────────────────── Light theme — the Kaolin mode the CI book specifies. Toggle via `[data-theme="light"]` on . The dark "Kohle" theme remains the default; light is opt-in (OS preference or the nav button). Heavy "Akt" sections (.dark — Referenz, Kontakt, Footer) stay dark in both modes — they punctuate the page as deliberate dark beats. ──────────────────────────────────────────────────────────────────── */ [data-theme="light"]{ --kohle:#EDE9E2; /* base background flips to kaolin */ --eierschale:#0E1013; /* primary text flips to graphit */ --orange:#C0492A; /* deeper coral for contrast on cream */ --schiefer:#6B7280; /* muted text per the CI light-mode spec */ --linie:rgba(14,16,19,0.12); /* graphit hairline on cream */ } [data-theme="light"] body{background:var(--kohle);color:var(--eierschale)} /* The hero shader now carries a u_lightMode uniform — it renders a cream-silk field in light mode and a charcoal-silk field in dark mode, cross-fading smoothly when the user toggles. The radial vignette stays hidden in light mode (darkening edges on cream reads as a frame, not as atmosphere). */ [data-theme="light"] .hero-vignette{display:none} [data-theme="light"] .hero-fade{background:linear-gradient(to bottom, rgba(237,233,226,0) 0%, rgba(237,233,226,0.6) 50%, rgba(237,233,226,1) 100%)} /* Nav surface flips its translucent base. */ [data-theme="light"] .nav{background:rgba(237,233,226,0.78)} [data-theme="light"] .nav.scrolled{background:rgba(237,233,226,0.94)} [data-theme="light"] .nav-mobile{background:#EDE9E2} /* Smooth theme crossfade. The global reduced-motion rule above kills the transition. */ body,nav,section,.nav-mobile,.hero-fade{transition:background 380ms var(--ease), color 380ms var(--ease), border-color 380ms var(--ease)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{ font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.55; color:var(--eierschale); background:var(--kohle); overflow-x:hidden; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important} } /* Type */ .display{font-weight:800;font-size:clamp(36px,8vw,124px);line-height:0.98;letter-spacing:-0.035em} @media (min-width:560px){.display{line-height:0.96}} .display .light{font-weight:300;font-style:italic;letter-spacing:-0.025em} .display .accent{color:var(--blau)} h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;line-height:1.12} h2{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-0.028em;line-height:1.06} h3{font-size:22px;font-weight:600} h4{font-size:15px;font-weight:600;letter-spacing:0} .mono{font-family:var(--mono);font-weight:500} .eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;color:var(--schiefer);text-transform:uppercase} .section-label{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.12em;color:var(--schiefer);text-transform:uppercase} .section-num{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.12em;color:var(--blau);display:block;margin-bottom:18px} .lede{font-size:clamp(18px,1.4vw,21px);line-height:1.55;max-width:62ch;color:var(--graphit);font-weight:400} .muted{color:var(--schiefer)} /* Layout */ .wrap{max-width:1280px;margin:0 auto;padding:0 32px} @media (max-width:720px){.wrap{padding:0 20px}} section{padding:var(--space-section) 0;position:relative} section.dark{background:var(--kohle-tief);color:var(--kaolin)} /* dark sections stay dark regardless of theme — text always kaolin */ section.dark .muted{color:var(--mittelgrau)} section.dark .eyebrow,section.dark .section-label{color:var(--mittelgrau)} /* Act boundary — monumental air marks a new movement of the argument */ section.act-start{padding-top:var(--space-act)} .section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:72px;gap:32px;flex-wrap:wrap} /* A flex item refuses to shrink below its longest word unless told to. Headings like "Wirtschaftlichkeit." are wider than a 320px screen on their own, so without this the item - and the page with it - grows past the viewport. */ .section-head>*{min-width:0} .section-head .right{text-align:right;color:var(--schiefer);font-family:var(--mono);font-size:12px;letter-spacing:0.08em} section.dark .section-head .right{color:var(--mittelgrau)} @media (max-width:720px){section{padding:80px 0}section.act-start{padding-top:128px}.section-head{margin-bottom:48px}} /* Links & buttons */ a{color:inherit;text-decoration:none} a.link-arrow{ display:inline-flex;align-items:center;gap:10px; font-weight:500;font-size:16px;letter-spacing:-0.005em; padding:14px 0; border-bottom:1px solid var(--graphit); transition:gap 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease); } a.link-arrow .arrow{display:inline-block;transition:transform 320ms var(--ease)} a.link-arrow:hover{gap:14px;border-color:var(--blau);color:var(--blau)} a.link-arrow:hover .arrow{transform:translateX(4px)} section.dark a.link-arrow{border-color:var(--kaolin);color:var(--kaolin)} section.dark a.link-arrow:hover{border-color:var(--blau);color:var(--blau)} a.link-arrow.small{font-size:14px;padding:6px 0} a.inline{color:var(--graphit);border-bottom:1px solid var(--linie);transition:border-color 200ms var(--ease), color 200ms var(--ease)} a.inline:hover{color:var(--blau);border-color:var(--blau)} /* Navigation */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; height:68px; background:rgba(42,42,44,0.82); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color 240ms var(--ease), background 240ms var(--ease); } .nav.scrolled{border-color:var(--linie);background:rgba(42,42,44,0.94)} .nav-inner{max-width:1280px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px} @media (max-width:720px){.nav-inner{padding:0 20px;gap:16px}} .nav-logo{display:flex;align-items:center;gap:10px} .nav-logo .logo-icon{width:26px;height:26px;border:1.8px solid var(--graphit);border-radius:3px;display:flex;flex-direction:column;justify-content:space-between;padding:4px 3px} .nav-logo .logo-icon span{display:block;height:3px;width:100%;background:var(--graphit);border-radius:0.5px} .nav-logo .logo-icon span:first-child{background:var(--blau)} .nav-logo .wordmark{font-weight:800;font-size:19px;letter-spacing:-0.04em;color:var(--graphit)} .nav-logo .wordmark .ai{color:var(--blau)} .nav-menu{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--graphit)} .nav-menu a{position:relative;padding:4px 0} .nav-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--blau);transition:right 260ms var(--ease)} .nav-menu a:hover::after{right:0} @media (max-width:900px){.nav-menu{display:none}} .nav-right{display:flex;align-items:center;gap:20px} .lang-toggle{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:var(--schiefer)} .lang-toggle button{background:none;border:0;padding:4px 6px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.08em;color:var(--schiefer);cursor:pointer;transition:color 200ms var(--ease)} .lang-toggle button.active{color:var(--graphit)} .lang-toggle .sep{color:var(--hellgrau)} .nav-cta{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:-0.005em; color:var(--graphit);border:1px solid var(--graphit); padding:9px 14px;border-radius:2px; transition:background 220ms var(--ease), color 220ms var(--ease); } .nav-cta:hover{background:var(--eierschale);color:var(--kohle)} /* Hamburger toggle — hidden on desktop, shown ≤900px */ .nav-toggle{ display:none;width:34px;height:34px;margin-right:-6px; flex-direction:column;align-items:center;justify-content:center;gap:6px; background:none;border:0;cursor:pointer;padding:0; } .nav-toggle span{ display:block;width:22px;height:1.5px;background:var(--eierschale); transition:transform 260ms var(--ease), opacity 220ms var(--ease); } body.nav-open .nav-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)} body.nav-open .nav-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)} /* Mobile drawer — full panel below the nav bar */ .nav-mobile{ position:fixed;top:68px;left:0;right:0;bottom:0;z-index:99; background:var(--kohle); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms; overflow-y:auto;-webkit-overflow-scrolling:touch; } body.nav-open .nav-mobile{opacity:1;visibility:visible;transform:translateY(0)} body.nav-open{overflow:hidden} .nav-mobile-inner{display:flex;flex-direction:column;padding:8px 20px 56px;max-width:520px;margin:0 auto} .nav-mobile a{ font-family:var(--sans);font-size:clamp(22px,6vw,28px);font-weight:600;letter-spacing:-0.02em; color:var(--eierschale);padding:24px 0;border-top:1px solid var(--linie); transition:color 200ms var(--ease); } .nav-mobile a:first-child{border-top:0} .nav-mobile a:hover,.nav-mobile a:active{color:var(--orange)} .nav-mobile .nav-mobile-cta{ margin-top:36px;border-top:0;text-align:center; background:var(--cta-bg);color:#fff; font-size:16px;font-weight:600;padding:20px 24px;border-radius:2px; } .nav-mobile .nav-mobile-cta:hover{background:var(--cta-bg-hover);color:#fff} @media (min-width:901px){.nav-mobile{display:none}} @media (max-width:900px){.nav-toggle{display:flex}.nav-cta{display:none}} /* Hero */ .hero{ background:var(--kohle); padding:188px 0 120px; position:relative; border-top:0; overflow:hidden; } /* Silk shader canvas — fills hero, sits behind all content */ .hero-shader{ position:absolute;inset:0;width:100%;height:100%; display:block;z-index:0; opacity:0;transition:opacity 1200ms var(--ease); pointer-events:auto; } .hero-shader.ready{opacity:1} /* Soft vignette + fade to solid Kohle at the hero boundary */ .hero-fade{ position:absolute;left:0;right:0;bottom:0;height:220px; background:linear-gradient(to bottom, rgba(42,42,44,0) 0%, rgba(42,42,44,0.6) 50%, rgba(42,42,44,1) 100%); z-index:1;pointer-events:none; } .hero-vignette{ position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse at 50% 40%, rgba(42,42,44,0) 0%, rgba(42,42,44,0) 55%, rgba(42,42,44,0.45) 100%); } .hero > .wrap{position:relative;z-index:2} .hero-copy{max-width:920px} .hero h1.display{margin-bottom:40px} .hero-lede{margin-bottom:48px;color:var(--graphit);font-size:19px;line-height:1.55;max-width:54ch} .hero-cta-row{display:flex;gap:32px;align-items:center;flex-wrap:wrap} /* Appliance schematic — sits on clean Kohle below the hero, the shader stays untouched */ /* Appliance coda — ZPA-BE-0006 now lives as the closing schema above the Impressum. Editorial framing matching the rest of the page: mono eyebrow on the left, italic-light caption on the right, the appliance schema centred below. The schema auto-mounts via [data-zpa-appliance]. */ .appliance-coda{padding:140px 0 120px;background:var(--kohle);border-top:1px solid var(--linie);position:relative;overflow:hidden} .appliance-head{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-bottom:64px;flex-wrap:wrap} .appliance-eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;color:var(--schiefer);text-transform:uppercase} .appliance-cap{font-family:var(--sans);font-size:clamp(20px,2vw,26px);font-weight:300;font-style:italic;letter-spacing:-0.012em;line-height:1.32;color:var(--graphit);max-width:38ch;margin:0;text-align:right} .appliance-mount{display:block;width:100%} .appliance-mount svg.zpa-appliance{display:block;width:100%;height:auto} @media (max-width:900px){.appliance-coda{padding:96px 0 80px}.appliance-head{margin-bottom:44px}.appliance-cap{text-align:left;max-width:none}} @media (max-width:560px){.appliance-coda{padding:72px 0 64px}} /* §01 — Ausgangslage */ .observation-list{display:flex;flex-direction:column;gap:0} .observation{ display:grid;grid-template-columns:120px 1fr 360px;gap:48px;align-items:start; padding:48px 0;border-top:1px solid var(--linie); } .observation:last-child{border-bottom:1px solid var(--linie)} .observation .num{font-family:var(--mono);font-size:13px;letter-spacing:0.12em;color:var(--blau)} .observation .main{font-family:var(--sans);font-size:clamp(22px,2vw,30px);font-weight:300;font-style:italic;line-height:1.35;letter-spacing:-0.015em;color:var(--graphit);max-width:26ch} .observation .main strong{font-style:normal;font-weight:700;letter-spacing:-0.02em} .observation .body{font-size:15px;line-height:1.6;color:var(--schiefer)} @media (max-width:900px){.observation{grid-template-columns:1fr;gap:16px;padding:32px 0}} /* §02 — Stack */ /* DESCENT (ZPA-BE-0005) lives beside the layer list as a sticky scrollytelling column: the three movements of the composition — Agent → Modell → Hardware — sync to the three layers as they scroll. */ .stack-grid{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1fr);gap:56px;align-items:start} .stack-list{display:flex;flex-direction:column;gap:0} .descent-col{position:sticky;top:120px;align-self:start} #zpa-descent-mount{width:100%;max-width:560px;aspect-ratio:1/1;margin:0 auto} @media (max-width:1080px){.stack-grid{gap:36px}} @media (max-width:900px){ .stack-grid{display:block} .stack-list{max-width:960px} .descent-col{position:static;max-width:460px;margin:0 auto 8px} } .stack-layer{ padding:40px 0;border-top:1px solid var(--linie); display:grid;grid-template-columns:72px 1fr;gap:32px; } .stack-layer:last-child{border-bottom:1px solid var(--linie)} .stack-layer .l-num{font-family:var(--mono);font-size:13px;letter-spacing:0.12em;color:var(--schiefer);padding-top:4px} .stack-layer h3{font-size:28px;font-weight:700;letter-spacing:-0.022em;margin-bottom:12px} .stack-layer .l-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--blau);text-transform:uppercase;margin-bottom:10px;display:block} .stack-layer p{font-size:16px;color:var(--graphit);margin-bottom:18px;max-width:52ch} .stack-layer .specs{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--schiefer)} .stack-layer .specs span{display:inline-flex;align-items:center;gap:6px} .stack-layer .specs span::before{content:"·";color:var(--blau);font-weight:700} .stack-layer .specs span:first-child::before{content:""} /* OpenAI-API drop-in line — sits under the Agent-Schicht specs */ .api-compat{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--graphit);margin-top:18px;display:block;line-height:1.5} .api-compat::before{content:"↳ ";color:var(--blau);font-weight:700} /* §02 · B — Architektur-Stack diagram. Six hairline rows, mono labels, component tags separated by middots. No external logo SVGs — mono restraint. */ .archstack{border-top:1px solid var(--linie);margin-top:44px} .arch-row{display:grid;grid-template-columns:230px 1fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--linie);align-items:baseline} .arch-row .arch-layer{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--blau)} .arch-row .arch-comp{font-family:var(--mono);font-size:13px;letter-spacing:0.02em;color:var(--graphit);display:flex;flex-wrap:wrap} .arch-row .arch-comp span{display:inline-flex;align-items:center} .arch-row .arch-comp span::before{content:"·";margin:0 12px;color:var(--schiefer)} .arch-row .arch-comp span:first-child::before{content:"";margin:0} .arch-row .arch-desc{font-size:14px;line-height:1.5;color:var(--schiefer)} @media (max-width:720px){.arch-row{grid-template-columns:1fr;gap:8px;padding:18px 0}} /* — ZPA-BE-0005 · DESCENT — composition styles, mapped to the dark theme. Strokes ride the eggshell foreground; the coral is the scalpel accent. */ .zpa-descent-svg{display:block;width:100%;height:auto;overflow:visible} .zpa-descent-svg .zpa-tick{stroke:var(--eierschale);stroke-width:0.6;fill:none;opacity:0.5;vector-effect:non-scaling-stroke} .zpa-descent-svg .zpa-agent-path{stroke:var(--eierschale);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .zpa-descent-svg .zpa-sch-line{stroke:var(--eierschale);stroke-width:0.7;fill:none;opacity:0.62;vector-effect:non-scaling-stroke} .zpa-descent-svg .zpa-edge{stroke:var(--eierschale);stroke-width:0.6;fill:none;opacity:0.5;vector-effect:non-scaling-stroke} .zpa-descent-svg .zpa-point{fill:var(--eierschale)} .zpa-descent-svg .zpa-point.blau{fill:var(--orange)} .zpa-descent-svg .zpa-agent-head{fill:var(--orange)} .zpa-descent-svg .zpa-trace-dot{fill:var(--orange)} .zpa-descent-svg .zpa-anno{fill:var(--schiefer);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase} .zpa-descent-svg .zpa-caption{fill:var(--schiefer);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase} .prozess-lede{max-width:64ch} /* §04 — Prozess */ .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative} .timeline::before{content:"";position:absolute;top:72px;left:0;right:0;height:1px;background:var(--linie)} .tl-step{padding:32px 32px 32px 0;position:relative;border-right:1px solid var(--linie)} .tl-step:last-child{border-right:0} .tl-step .wk{font-family:var(--mono);font-size:13px;letter-spacing:0.1em;color:var(--blau);text-transform:uppercase;margin-bottom:40px;display:inline-block;background:var(--kohle);padding-right:10px;position:relative;z-index:1} .tl-step .name{font-size:32px;font-weight:700;letter-spacing:-0.022em;line-height:1.08;margin-bottom:18px} .tl-step p{font-size:15px;color:var(--schiefer);margin-bottom:24px;max-width:32ch} .tl-step .del{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--graphit);text-transform:uppercase;padding:6px 10px;border:1px solid var(--linie);display:inline-block;border-radius:2px} @media (max-width:900px){.timeline{grid-template-columns:1fr}.timeline::before{display:none}.tl-step{border-right:0;border-top:1px solid var(--linie);padding:32px 0}.tl-step:first-child{border-top:0}} /* §05 — Referenz */ .referenz{background:var(--kohle-tief);color:var(--eierschale)} .ref-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:start} @media (max-width:1020px){.ref-grid{grid-template-columns:1fr;gap:48px}} .ref-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px} .chip{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--kaolin);padding:6px 12px;border:1px solid var(--linie-dunkel);border-radius:2px} .ref-headline{font-size:clamp(32px,3.6vw,48px);font-weight:800;line-height:1.05;letter-spacing:-0.028em;margin-bottom:32px;max-width:22ch} .ref-body{font-size:17px;line-height:1.6;color:var(--hellgrau);max-width:48ch;margin-bottom:40px} .ref-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linie-dunkel);border:1px solid var(--linie-dunkel)} .ref-kpis .kpi{background:var(--kohle-tief);padding:32px} .ref-kpis .v{font-family:var(--sans);font-size:clamp(42px,4.4vw,64px);font-weight:800;letter-spacing:-0.035em;line-height:1;margin-bottom:12px;display:block} .ref-kpis .v .unit{font-size:0.5em;font-weight:500;color:var(--blau);margin-left:4px;letter-spacing:0;vertical-align:18%} .ref-kpis .l{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mittelgrau);line-height:1.4} .ref-quote{grid-column:1/-1;margin-top:80px;padding-top:48px;border-top:1px solid var(--linie-dunkel);display:grid;grid-template-columns:120px 1fr;gap:48px;align-items:start} @media (max-width:900px){.ref-quote{grid-template-columns:1fr;gap:24px}} .ref-quote .qmark{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--blau);text-transform:uppercase} .ref-quote blockquote{font-family:var(--sans);font-size:clamp(22px,2.2vw,32px);font-weight:300;font-style:italic;line-height:1.35;letter-spacing:-0.012em;color:var(--kaolin);max-width:38ch;margin-bottom:24px} .ref-quote cite{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mittelgrau);font-style:normal} /* §06 — Pakete */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .tier{padding:48px 40px 48px 0;border-right:1px solid var(--linie);display:flex;flex-direction:column} .tier:last-child{border-right:0;padding-right:0} .tier:not(:first-child){padding-left:40px} .tier .t-num{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--blau);text-transform:uppercase;margin-bottom:40px} .tier h3{font-size:34px;font-weight:800;letter-spacing:-0.028em;line-height:1.04;margin-bottom:16px} .tier .t-desc{font-size:15px;color:var(--schiefer);margin-bottom:48px;max-width:28ch;line-height:1.55} .tier .t-unit{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--schiefer);margin-bottom:40px} .tier ul{list-style:none;margin-bottom:40px;flex-grow:1} .tier li{font-size:14px;line-height:1.55;padding:10px 0;border-top:1px solid var(--linie);color:var(--graphit);font-family:var(--sans)} .tier li:first-child{border-top:0} @media (max-width:900px){.tiers{grid-template-columns:1fr}.tier{padding:40px 0!important;border-right:0;border-bottom:1px solid var(--linie)}.tier:last-child{border-bottom:0}} /* §07 — Team · three-discipline consolidated text (replaces the old roster) */ .disziplinen{display:flex;flex-direction:column;gap:0;margin-top:48px} .disziplin{ display:grid;grid-template-columns:96px 1fr 280px;gap:48px;align-items:start; padding:56px 0;border-top:1px solid var(--linie); } .disziplin:last-child{border-bottom:1px solid var(--linie)} .disziplin .d-num{font-family:var(--mono);font-size:13px;letter-spacing:0.12em;color:var(--blau);padding-top:6px} .disziplin .d-name{ font-family:var(--sans);font-size:clamp(24px,2.4vw,32px); font-weight:700;letter-spacing:-0.022em;line-height:1.16;color:var(--graphit);max-width:18ch;margin-bottom:20px; } .disziplin .d-body{font-size:16px;line-height:1.62;color:var(--schiefer);max-width:54ch} .disziplin .d-tag{ font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase; color:var(--schiefer);padding-top:6px;border-top:1px solid var(--linie);align-self:start; } @media (max-width:900px){ .disziplin{grid-template-columns:64px 1fr;gap:24px;padding:40px 0} .disziplin .d-tag{grid-column:1/-1;padding-top:12px;margin-top:12px} } .team-namen{margin-top:64px;padding:32px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .team-namen .namen-eyebrow{ font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--schiefer); text-transform:uppercase;display:block;margin-bottom:18px; } .team-namen .namen-list{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:0} .team-namen .namen-list li{font-size:16px;color:var(--graphit);line-height:1.5} .team-namen .namen-list em{color:var(--schiefer);font-style:italic;font-weight:400} /* §09 — Kontakt */ .kontakt.dark{padding:160px 0} .kontakt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:start} @media (max-width:1020px){.kontakt-grid{grid-template-columns:1fr;gap:48px}} .kontakt h2.kontakt-head{max-width:20ch;margin-bottom:32px;color:var(--kaolin)} .kontakt .k-lede{font-size:18px;color:var(--hellgrau);max-width:42ch;margin-bottom:48px;line-height:1.55} .kontakt .k-alt{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--mittelgrau);margin-top:32px} .kontakt .k-alt a{color:var(--kaolin);border-bottom:1px solid var(--linie-dunkel)} .kontakt .k-alt a:hover{color:var(--blau);border-color:var(--blau)} .kontakt-form{display:flex;flex-direction:column;gap:24px} .kontakt-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .kontakt-form .field{display:flex;flex-direction:column;gap:6px} .kontakt-form label{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--mittelgrau);text-transform:uppercase} .kontakt-form input,.kontakt-form select,.kontakt-form textarea{ background:transparent;border:0;border-bottom:1px solid var(--linie-dunkel); padding:10px 0;color:var(--kaolin);font-family:var(--sans);font-size:15px; transition:border-color 220ms var(--ease); } .kontakt-form input:focus,.kontakt-form select:focus,.kontakt-form textarea:focus{outline:none;border-color:var(--blau)} .kontakt-form select option{background:var(--kohle-tief);color:var(--eierschale)} .kontakt-form textarea{resize:vertical;min-height:80px;font-family:var(--sans)} .kontakt-form button{ align-self:flex-start;margin-top:16px; background:var(--cta-bg);color:#fff;border:0; padding:16px 24px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-0.005em; cursor:pointer;border-radius:2px; transition:background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease); } .kontakt-form button:hover{background:var(--cta-bg-hover);color:#fff;transform:translateX(3px)} @media (max-width:720px){.kontakt-form .row{grid-template-columns:1fr}} /* Footer */ .footer{background:var(--kohle-tief);color:var(--hellgrau);padding:80px 0 32px;border-top:1px solid var(--linie-dunkel)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:72px} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr}} .footer h2{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mittelgrau);margin-bottom:20px;font-weight:500} .footer ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer ul a{color:var(--hellgrau);font-size:14px;transition:color 200ms var(--ease)} .footer ul a:hover{color:var(--blau)} .footer-about{font-size:14px;color:var(--hellgrau);line-height:1.6;max-width:34ch;margin-top:16px} .footer-address{font-family:var(--mono);font-size:12px;color:var(--mittelgrau);line-height:1.6;margin-top:16px} .footer-bottom{border-top:1px solid var(--linie-dunkel);padding-top:24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--mittelgrau)} .footer-logo{display:flex;align-items:center;gap:10px} .footer-logo .logo-icon{width:28px;height:28px;border:1.8px solid var(--kaolin);border-radius:3px;display:flex;flex-direction:column;justify-content:space-between;padding:4px 3px} .footer-logo .logo-icon span{display:block;height:3px;width:100%;background:var(--kaolin)} .footer-logo .logo-icon span:first-child{background:var(--blau)} .footer-logo .wordmark{font-weight:800;font-size:20px;letter-spacing:-0.04em;color:var(--kaolin)} .footer-logo .wordmark .ai{color:var(--blau)} /* Section ledes — clean roman, generous. Italic is reserved for the founder manifesto and the §01 observations, where it carries meaning. */ .stack-lede,.anwendung-lede,.prozess-lede,.pakete-lede,.betrieb-lede{ font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--graphit); max-width:62ch;margin:0 0 56px;font-weight:400; } /* §02 — Stack lede + competitive gap block */ .stack-lede{max-width:64ch} .gap-block,.betrieb-block{margin-top:112px;padding-top:80px;border-top:1px solid var(--linie)} .gap-label{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.12em;color:var(--blau);display:block;margin-bottom:18px} .gap-intro{font-family:var(--sans);font-size:clamp(22px,2.2vw,30px);font-weight:300;font-style:italic;letter-spacing:-0.02em;color:var(--graphit);margin-bottom:44px;max-width:28ch;line-height:1.2} /* Comparison row: the three non-zenpAI columns are equal; the zenpAI card (the answer) gets ~20 % more width so its longer copy breathes without wrapping mid-acronym. Every .gap-stop is pinned to the same min-height so the divider lines align across all four cards regardless of one-line vs. two-line stop copy. */ .gap-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .gap-card{padding:40px 28px 40px 0;border-right:1px solid var(--linie);display:flex;flex-direction:column;min-height:280px} .gap-card:last-child{border-right:0;padding-right:0} .gap-card:not(:first-child){padding-left:28px} .gap-card .gap-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--schiefer);margin-bottom:20px} .gap-card p{font-size:14px;line-height:1.6;color:var(--schiefer);margin-bottom:24px;flex-grow:1} .gap-card .gap-stop{font-family:var(--mono);font-size:12px;letter-spacing:0.03em;color:var(--graphit);line-height:1.5;padding-top:16px;border-top:1px solid var(--linie);min-height:58px;box-sizing:border-box} .gap-card.zpa{background:linear-gradient(180deg, rgba(217,119,87,0.12) 0%, transparent 100%)} .gap-card.zpa .gap-tag{color:var(--blau)} .gap-card.zpa p{color:var(--graphit)} .gap-card.zpa .gap-stop{color:var(--blau);border-top-color:var(--blau)} @media (max-width:1020px){.gap-grid{grid-template-columns:1fr 1fr}.gap-card{border-right:1px solid var(--linie)!important;padding:28px!important;min-height:0}.gap-card:nth-child(2n){border-right:0!important;padding-right:0!important}.gap-card:nth-child(n+3){border-top:1px solid var(--linie)}} @media (max-width:620px){.gap-grid{grid-template-columns:1fr}.gap-card{padding:28px 0!important;border-right:0!important;border-top:1px solid var(--linie)!important}.gap-card:first-child{border-top:0!important}} /* §03 — Anwendungsfälle */ .anwendung-lede{max-width:60ch} /* Two registers: 2 use cases told in full, 4 listed as a compact index */ .uc-featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--linie)} .uc-index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .usecase{display:flex;flex-direction:column} .usecase .uc-num{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--schiefer);margin-bottom:8px} .usecase .uc-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--blau);margin-bottom:16px;display:block} .usecase .uc-stack{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--graphit);margin-top:auto} .usecase .uc-stack span{display:inline-flex;align-items:center;gap:6px} .usecase .uc-stack span::before{content:"·";color:var(--blau);font-weight:700} .usecase .uc-stack span:first-child::before{content:""} /* Featured — full storytelling */ .usecase.featured{padding:48px 56px 48px 0;border-right:1px solid var(--linie);min-height:300px} .usecase.featured:last-child{border-right:0;padding-right:0;padding-left:56px} .usecase.featured h3{font-size:clamp(23px,2.3vw,29px);font-weight:700;letter-spacing:-0.022em;line-height:1.14;margin-bottom:18px;max-width:20ch} .usecase.featured p{font-size:16px;line-height:1.62;color:var(--schiefer);margin-bottom:28px} /* Compact — the index */ .usecase.compact{padding:36px 28px 36px 0;border-right:1px solid var(--linie);min-height:230px} .usecase.compact:last-child{border-right:0;padding-right:0} .usecase.compact:not(:first-child){padding-left:28px} .usecase.compact h3{font-size:17px;font-weight:700;letter-spacing:-0.015em;line-height:1.22;margin-bottom:18px} .anwendung-foot{margin-top:40px;font-size:15px;color:var(--graphit);max-width:60ch} @media (max-width:860px){ .uc-featured-grid{grid-template-columns:1fr} .usecase.featured{border-right:0;padding:36px 0!important;border-top:1px solid var(--linie);min-height:0} .usecase.featured:first-child{border-top:0} .uc-index-grid{grid-template-columns:1fr 1fr} .usecase.compact{padding:28px!important;border-right:1px solid var(--linie)!important;min-height:0} .usecase.compact:nth-child(2n){border-right:0!important;padding-right:0!important} .usecase.compact:nth-child(n+3){border-top:1px solid var(--linie)} } @media (max-width:520px){ .uc-index-grid{grid-template-columns:1fr} .usecase.compact{padding:24px 0!important;border-right:0!important;border-top:1px solid var(--linie)!important} .usecase.compact:first-child{border-top:0!important} } /* §03 · B — Branchen. Five compact verticals so a buyer sees their industry named. */ .branchen-block{margin-top:96px;padding-top:72px;border-top:1px solid var(--linie)} .branchen-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin-top:40px} .branche{padding:32px 22px 32px 0;border-right:1px solid var(--linie);display:flex;flex-direction:column;min-height:240px} .branche:last-child{border-right:0;padding-right:0} .branche:not(:first-child){padding-left:22px} .branche .b-name{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-0.015em;line-height:1.22;margin-bottom:14px;color:var(--graphit)} .branche .b-scope{font-size:13px;line-height:1.55;color:var(--schiefer);margin-bottom:auto} .branche .b-uc{font-family:var(--mono);font-size:11px;letter-spacing:0.03em;line-height:1.5;color:var(--graphit);margin-top:20px;padding-top:14px;border-top:1px solid var(--linie)} @media (max-width:1080px){ .branchen-grid{grid-template-columns:1fr 1fr 1fr} .branche{border-right:1px solid var(--linie)!important;padding:28px!important;min-height:0} .branche:nth-child(3n){border-right:0!important;padding-right:0!important} .branche:nth-child(n+4){border-top:1px solid var(--linie)} } @media (max-width:720px){ .branchen-grid{grid-template-columns:1fr 1fr} .branche{padding:24px!important} .branche:nth-child(3n){border-right:1px solid var(--linie)!important} .branche:nth-child(2n){border-right:0!important;padding-right:0!important} .branche:nth-child(n+3){border-top:1px solid var(--linie)} } @media (max-width:520px){ .branchen-grid{grid-template-columns:1fr} .branche{padding:24px 0!important;border-right:0!important;border-top:1px solid var(--linie)!important} .branche:first-child{border-top:0!important} } /* §05 — Referenz fineprint */ .ref-fineprint{margin-top:40px;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--mittelgrau);line-height:1.5;max-width:80ch} /* §05 · B — externally-cited stats panel (dark section). Big coral numbers, mono labels, footnoted external sources. No internal-model asterisk here. */ .stats-block{margin-top:96px;padding-top:64px;border-top:1px solid var(--linie-dunkel)} .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linie-dunkel);border-bottom:1px solid var(--linie-dunkel);margin-top:40px} .stat{padding:48px 32px 48px 0;border-right:1px solid var(--linie-dunkel);display:flex;flex-direction:column} .stat:last-child{border-right:0;padding-right:0} .stat:not(:first-child){padding-left:32px} .stat-num{font-family:var(--sans);font-size:clamp(48px,6vw,88px);font-weight:800;letter-spacing:-0.035em;line-height:1;color:var(--blau);margin-bottom:20px} .stat-label{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;line-height:1.55;color:var(--kaolin);margin-bottom:auto;max-width:34ch} .stat-cite{font-family:var(--mono);font-size:10.5px;letter-spacing:0.03em;line-height:1.5;color:var(--mittelgrau);margin-top:28px;max-width:38ch} .stat-cite a{color:var(--hellgrau);border-bottom:1px solid var(--linie-dunkel)} .stat-cite a:hover{color:var(--blau);border-color:var(--blau)} @media (max-width:860px){.stats-grid{grid-template-columns:1fr}.stat{padding:36px 0!important;border-right:0;border-bottom:1px solid var(--linie-dunkel)}.stat:last-child{border-bottom:0}} /* §05 · C — testimonials. Honest placeholder cards until permission letters sign. */ .voices-block{margin-top:88px;padding-top:64px;border-top:1px solid var(--linie-dunkel)} .voices-sub{font-family:var(--mono);font-size:12px;letter-spacing:0.05em;color:var(--mittelgrau);margin:14px 0 36px;max-width:60ch;line-height:1.55} .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linie-dunkel);border-bottom:1px solid var(--linie-dunkel)} .testimonial-card{padding:40px 28px 40px 0;border-right:1px solid var(--linie-dunkel);display:flex;flex-direction:column;min-height:220px} .testimonial-card:last-child{border-right:0;padding-right:0} .testimonial-card:not(:first-child){padding-left:28px} .testimonial-card .t-meta{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--blau);margin-bottom:24px;display:block} .testimonial-card blockquote{font-family:var(--sans);font-size:18px;font-weight:300;font-style:italic;line-height:1.45;letter-spacing:-0.012em;color:var(--kaolin);margin:0 0 24px;flex-grow:1} .testimonial-card cite{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mittelgrau);font-style:normal} .testimonial-card.placeholder blockquote{color:var(--hellgrau)} @media (max-width:860px){.testimonials{grid-template-columns:1fr}.testimonial-card{padding:32px 0!important;border-right:0;border-bottom:1px solid var(--linie-dunkel);min-height:0}.testimonial-card:last-child{border-bottom:0}} /* §06 — Pakete (rework) */ .pakete-lede{max-width:62ch} /* Featured tier: emphasis via background tint only — no extra borders (the base .tier border-right already separates the columns cleanly) */ .tier.featured{background:linear-gradient(180deg, rgba(217,119,87,0.10) 0%, transparent 100%);position:relative;padding-left:40px!important;padding-right:40px!important} @media (max-width:900px){.tier.featured{padding:40px 0!important}} .tier .t-badge{position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blau);border:1px solid var(--blau);padding:4px 8px;border-radius:2px} .pakete-foot{margin-top:40px;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--schiefer);line-height:1.6;max-width:70ch} /* §06 · B — Betrieb (Teil B von Pakete) */ .betrieb-lede{max-width:62ch} .sla-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .sla{padding:40px 32px 40px 0;border-right:1px solid var(--linie);display:flex;flex-direction:column} .sla:last-child{border-right:0;padding-right:0} .sla:not(:first-child){padding-left:32px} .sla .sla-num{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--blau);text-transform:uppercase;margin-bottom:24px} .sla h3{font-size:24px;font-weight:700;letter-spacing:-0.02em;line-height:1.12;margin-bottom:16px;max-width:18ch} .sla p{font-size:14px;line-height:1.6;color:var(--schiefer);margin-bottom:24px;flex-grow:1} .sla .sla-price{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:var(--graphit);text-transform:uppercase;padding-top:16px;border-top:1px solid var(--linie)} @media (max-width:900px){.sla-grid{grid-template-columns:1fr}.sla{padding:32px 0!important;border-right:0;border-bottom:1px solid var(--linie)}.sla:last-child{border-bottom:0}} /* §06 · B — Hardware-Klassen. Three spec cards (S/M/L), mono

rows, so Martin can run his sizing math: VRAM / users / kW / U-rack. No photos. */ .hwclass-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin-top:44px} .hwclass-card{padding:40px 32px 40px 0;border-right:1px solid var(--linie);display:flex;flex-direction:column} .hwclass-card:last-child{border-right:0;padding-right:0} .hwclass-card:not(:first-child){padding-left:32px} .hwclass-card.featured{background:linear-gradient(180deg, rgba(217,119,87,0.10) 0%, transparent 100%);padding-left:32px!important;padding-right:32px!important;position:relative} .hwclass-card .hw-klasse{font-family:var(--sans);font-size:44px;font-weight:800;letter-spacing:-0.03em;line-height:1;margin-bottom:8px;color:var(--graphit)} .hwclass-card.featured .hw-klasse{color:var(--blau)} .hwclass-card .hw-tier{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--blau);margin-bottom:28px;display:block} .hwclass-card dl{display:flex;flex-direction:column;gap:0;margin:0} .hwclass-card dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--linie)} .hwclass-card dl div:first-child{border-top:0} .hwclass-card dt{font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--schiefer);flex-shrink:0} .hwclass-card dd{font-family:var(--mono);font-size:12px;letter-spacing:0.01em;color:var(--graphit);margin:0;text-align:right} .hwclass-card.featured dd{color:var(--graphit)} @media (max-width:900px){.hwclass-grid{grid-template-columns:1fr}.hwclass-card{padding:32px 0!important;border-right:0;border-bottom:1px solid var(--linie)}.hwclass-card:last-child{border-bottom:0}.hwclass-card.featured{padding:32px 0!important}} /* §06 · D — Unternehmensgröße. Three honest self-location cards; no sub-50 coverage. */ .size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin-top:44px} .size-card{padding:40px 32px 40px 0;border-right:1px solid var(--linie);display:flex;flex-direction:column} .size-card:last-child{border-right:0;padding-right:0} .size-card:not(:first-child){padding-left:32px} .size-card .size-range{font-family:var(--sans);font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-0.022em;line-height:1.1;margin-bottom:8px;color:var(--graphit)} .size-card .size-kind{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--blau);margin-bottom:20px;display:block} .size-card p{font-size:14px;line-height:1.6;color:var(--schiefer)} .size-note{margin-top:36px;font-size:15px;line-height:1.65;color:var(--graphit);max-width:66ch} @media (max-width:900px){.size-grid{grid-template-columns:1fr}.size-card{padding:32px 0!important;border-right:0;border-bottom:1px solid var(--linie)}.size-card:last-child{border-bottom:0}} /* §07 — Team manifesto + foot */ .founder-manifesto{padding:56px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin-bottom:0;max-width:none} .manifesto-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--blau);text-transform:uppercase;margin-bottom:20px} .manifesto-head{font-family:var(--sans);font-size:clamp(28px,3vw,40px);font-weight:300;font-style:italic;letter-spacing:-0.022em;line-height:1.12;margin-bottom:24px;color:var(--graphit);max-width:24ch} .manifesto-body{font-size:17px;line-height:1.65;color:var(--graphit);max-width:64ch} .team-foot{margin-top:40px;font-size:14px;line-height:1.6;color:var(--schiefer);max-width:70ch} /* §08 — FAQ */ .faq-list{border-top:1px solid var(--linie)} .faq-item{border-bottom:1px solid var(--linie);padding:0} .faq-item summary{list-style:none;padding:28px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;transition:color 200ms var(--ease)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-family:var(--mono);font-size:24px;font-weight:300;color:var(--blau);transition:transform 220ms var(--ease);flex-shrink:0;line-height:1} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item .faq-q{font-family:var(--sans);font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-0.015em;color:var(--graphit);line-height:1.35;max-width:60ch} .faq-item summary:hover .faq-q{color:var(--blau)} .faq-item p{font-size:15px;line-height:1.7;color:var(--schiefer);padding:0 48px 32px 0;max-width:70ch} /* Impressum */ .impressum{padding:80px 0;background:var(--kohle)} .impressum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 48px;margin-top:24px} .impressum-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--blau);text-transform:uppercase;margin-bottom:10px;font-weight:500} .impressum-grid p{font-size:14px;line-height:1.65;color:var(--graphit)} .impressum-grid a{color:var(--graphit);border-bottom:1px solid var(--linie)} .impressum-grid a:hover{color:var(--blau);border-color:var(--blau)} @media (max-width:900px){.impressum-grid{grid-template-columns:1fr 1fr;gap:24px}} @media (max-width:560px){.impressum-grid{grid-template-columns:1fr}} /* Mid-page Cal CTA rule — a thin hairline-bounded invitation between acts. Routes to the same mailto Cal CTA as #kontakt until the real URL ships. */ .cta-rule{ margin-top:64px;padding-top:8px; display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; font-family:var(--sans);font-size:clamp(18px,1.8vw,22px);font-weight:300;font-style:italic; letter-spacing:-0.015em;color:var(--graphit); } .cta-rule a{ font-family:var(--mono);font-style:normal;font-size:13px;font-weight:500;letter-spacing:0.06em; text-transform:uppercase;color:var(--blau);border-bottom:1px solid var(--blau);padding-bottom:3px; transition:gap 200ms var(--ease),opacity 200ms var(--ease);white-space:nowrap; } .cta-rule a:hover{opacity:0.7} section.dark .cta-rule{color:var(--kaolin)} section.dark .cta-rule a{color:var(--blau);border-color:var(--blau)} @media (max-width:720px){.cta-rule{margin-top:48px;padding-top:32px;gap:10px}} /* §10 — Kontakt CTA Cal button */ .cal-button{display:inline-flex;align-items:center;background:var(--cta-bg);color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-0.005em;padding:16px 24px;border-radius:2px;text-decoration:none;margin-top:8px;transition:background 220ms var(--ease), transform 220ms var(--ease), color 220ms var(--ease)} .cal-button:hover{background:var(--cta-bg-hover);color:#fff;transform:translateX(3px)} /* Reveal animations (opacity only, stagger via CSS vars, industrial ease) */ .reveal{opacity:0;transition:opacity 600ms var(--ease)} .reveal.in{opacity:1} .reveal-delay-1{transition-delay:120ms} .reveal-delay-2{transition-delay:240ms} .reveal-delay-3{transition-delay:360ms} .reveal-delay-4{transition-delay:480ms} /* Page load sequence */ .boot{opacity:0;transition:opacity 600ms var(--ease)} .boot.in{opacity:1} /* Utility */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--blau);outline-offset:3px} /* ── Mobile refinements ───────────────────────────────────────────── The grid sections collapse via their own queries above; this block tunes the things that need a phone-specific hand: hero rhythm, single-column splits, tighter padding. */ @media (max-width:900px){ .ref-quote{grid-template-columns:1fr;gap:24px} } @media (max-width:720px){ .hero{padding:128px 0 72px} .kontakt.dark{padding:88px 0} .section-head .right{text-align:left} .gap-block,.betrieb-block{margin-top:80px;padding-top:56px} .faq-item p{padding:0 0 28px 0} .faq-item summary{padding:24px 0;gap:16px} } @media (max-width:600px){ .stack-layer{grid-template-columns:1fr;gap:8px} .stack-layer .l-num{padding-top:0} .ref-kpis{grid-template-columns:1fr} .ref-kpis .kpi{padding:24px} } @media (max-width:560px){ .hero-cta-row{gap:14px} .hero-cta-row .link-arrow{padding:10px 0} } /* ════════════════════════════════════════════════════════════════════ Lift-Pass additions — theme toggle, compliance block, honest placeholders, price-band anchors. All restrained to the existing CI tokens; no new font, no new effects. */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px; background:none;border:1px solid var(--linie);border-radius:50%; color:var(--schiefer);cursor:pointer;padding:0; transition:color 200ms var(--ease),border-color 200ms var(--ease),transform 400ms var(--ease); } .theme-toggle:hover{color:var(--graphit);border-color:var(--graphit);transform:rotate(18deg)} .theme-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .theme-toggle .icon-moon{display:none} [data-theme="light"] .theme-toggle .icon-sun{display:none} [data-theme="light"] .theme-toggle .icon-moon{display:block} /* Compliance / bounded-disclaimer block — sits at the foot of §08 FAQ. Coral accent rule on the left, no shouting. */ .safety{ margin-top:56px;padding:24px 28px; border:1px solid var(--linie);border-left:3px solid var(--orange); font-size:14px;line-height:1.65;color:var(--schiefer); max-width:78ch;border-radius:2px; } .safety strong{color:var(--graphit);font-weight:600} @media (max-width:720px){.safety{padding:20px 22px;font-size:13px}} /* Honest placeholders — the mono note carries the "this will be wired up" promise next to the Cal CTA, without faking success. */ .cal-note{ font-family:var(--mono);font-size:12px;letter-spacing:0.02em;line-height:1.6; color:var(--mittelgrau);margin-top:14px;max-width:54ch; } .cal-note::before{content:"· ";color:var(--orange);font-weight:700} /* Price-band anchors in §06 — every tier carries an "ab €X" number, per the build_command spec ("every price on the page"). */ .tier .t-band{ font-family:var(--sans);font-size:36px;font-weight:800; letter-spacing:-0.028em;line-height:1;color:var(--graphit); margin:0 0 20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; } .tier .t-band small{ font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.1em; color:var(--schiefer);text-transform:uppercase; } .tier.featured .t-band{color:var(--blau)} @media (max-width:720px){.tier .t-band{font-size:30px;margin-bottom:16px}} /* Legitimation badges — pre-nav strip + footer row. CSS is wired now; the markup stays commented out until the badges are real. To activate the pre-nav strip, uncomment it AND add class "has-legit" to (the offsets below push the fixed nav and hero down by the strip height). */ .legit-strip{ display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; position:fixed;top:0;left:0;right:0;z-index:101;height:37px; background:var(--kohle-tief);border-bottom:1px solid var(--linie); font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--schiefer); } .legit-strip img{height:20px;width:auto;display:block;opacity:0.9} .legit-strip .legit-sep{color:var(--schiefer);opacity:0.5} body.has-legit .nav{top:37px} body.has-legit .hero{padding-top:225px} .footer-badges{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px} .footer-badges img{height:28px;width:auto;opacity:0.85} /* ════════════════════════════════════════════════════════════════════ ZPA-WEB-0002 — ELEVATED MULTI-PAGE COMPONENTS Added on top of the original system. Same CI tokens, more surface, stronger hierarchy. Inspired by onprem.ai depth; on-brand coral. ════════════════════════════════════════════════════════════════════ */ :root{ --kohle-card:#303032; /* raised surface on dark */ --kohle-card-2:#343437; --radius:3px; --radius-lg:8px; --shadow-soft:0 10px 34px rgba(0,0,0,0.22); --maxw:1200px; } [data-theme="light"]{ --kohle-card:#F5F2EC; --kohle-card-2:#EFEBE3; --shadow-soft:0 10px 34px rgba(14,16,19,0.07); } /* active nav state */ .nav-menu a.active{color:var(--blau)} .nav-menu a.active::after{right:0} /* breadcrumb under nav on subpages */ .breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--schiefer);display:flex;gap:10px;align-items:center} .breadcrumb a{color:var(--schiefer);transition:color .2s var(--ease)} .breadcrumb a:hover{color:var(--blau)} .breadcrumb .sep{opacity:0.5} /* ── Page hero (subpages) — compact, no shader ───────────────────── */ .page-hero{padding:152px 0 72px;border-bottom:1px solid var(--linie);position:relative;overflow:hidden} .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--blau),transparent 38%)} .page-hero .ph-eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:24px} .page-hero h1{font-size:clamp(38px,6.4vw,84px);font-weight:800;letter-spacing:-0.035em;line-height:0.99;margin-bottom:28px;max-width:16ch} .page-hero h1 .light{font-weight:300;font-style:italic;letter-spacing:-0.02em} .page-hero .ph-lede{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--schiefer);max-width:60ch;margin-bottom:40px} .page-hero .ph-cta{display:flex;gap:28px;align-items:center;flex-wrap:wrap} @media(max-width:720px){.page-hero{padding:120px 0 56px}} /* ── Routing cards (home → subpages) ─────────────────────────────── */ .routing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .route-card{ display:flex;flex-direction:column;gap:14px;padding:36px 32px 32px; background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg); transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); position:relative;min-height:260px; } .route-card:hover{transform:translateY(-4px);border-color:var(--blau);box-shadow:var(--shadow-soft)} .route-card .rc-num{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--blau)} .route-card h3{font-size:26px;font-weight:800;letter-spacing:-0.028em;line-height:1.05} .route-card p{font-size:15px;line-height:1.55;color:var(--schiefer);margin-bottom:auto} .route-card .rc-go{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--graphit);display:inline-flex;gap:8px;align-items:center;transition:gap .24s var(--ease),color .24s var(--ease)} .route-card:hover .rc-go{color:var(--blau);gap:12px} @media(max-width:860px){.routing{grid-template-columns:1fr;gap:14px}.route-card{min-height:0}} /* ── Capability tiles (static, schematic, on-brand) ──────────────── */ .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .cap-tile{ background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg); padding:0;overflow:hidden;display:flex;flex-direction:column; transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); } .cap-tile:hover{transform:translateY(-4px);border-color:var(--blau);box-shadow:var(--shadow-soft)} .cap-screen{ background:var(--kohle-tief);border-bottom:1px solid var(--linie);padding:22px 24px;min-height:148px; font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--kaolin);position:relative; } .cap-screen .cs-bar{display:flex;gap:6px;margin-bottom:16px;opacity:0.7} .cap-screen .cs-bar i{width:9px;height:9px;border-radius:50%;background:var(--linie);display:block} .cap-screen .cs-bar i:first-child{background:var(--blau)} .cap-screen .cs-line{color:var(--schiefer)} .cap-screen .cs-line b{color:var(--kaolin);font-weight:500} .cap-screen .cs-ok{color:var(--blau)} .cap-body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px} .cap-body .cap-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--blau)} .cap-body h3{font-size:20px;font-weight:700;letter-spacing:-0.018em;line-height:1.2} .cap-body p{font-size:14px;line-height:1.6;color:var(--schiefer)} @media(max-width:860px){.cap-grid{grid-template-columns:1fr}} /* ── Feature grid (security / gold standard) ─────────────────────── */ .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin-top:44px} .feature{padding:36px 26px 36px 0;border-right:1px solid var(--linie);display:flex;flex-direction:column;gap:12px} .feature:last-child{border-right:0;padding-right:0} .feature:not(:first-child){padding-left:26px} .feature .f-num{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--blau)} .feature h3{font-size:17px;font-weight:700;letter-spacing:-0.015em;line-height:1.25} .feature p{font-size:13.5px;line-height:1.6;color:var(--schiefer)} @media(max-width:860px){.feature-grid{grid-template-columns:1fr 1fr}.feature{border-right:1px solid var(--linie)!important;padding:28px!important}.feature:nth-child(2n){border-right:0!important;padding-right:0!important}.feature:nth-child(n+3){border-top:1px solid var(--linie)}} @media(max-width:560px){.feature-grid{grid-template-columns:1fr}.feature{padding:24px 0!important;border-right:0!important;border-top:1px solid var(--linie)!important}.feature:first-child{border-top:0!important}} /* ── Server lineup (hardware classes, elevated visual cards) ─────── */ .lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .lineup.four{grid-template-columns:repeat(2,1fr);max-width:800px;margin-left:auto;margin-right:auto} .srv{ background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg); padding:30px 28px 28px;display:flex;flex-direction:column; transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); } .srv:hover{transform:translateY(-4px);border-color:var(--blau);box-shadow:var(--shadow-soft);background:linear-gradient(180deg,rgba(217,119,87,0.12),var(--kohle-card) 60%)} .srv:hover .srv-klasse{color:var(--blau)} .srv .srv-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px} .srv .srv-head>*{min-width:0} /* same shrink rule as .section-head: "MAXIMALE AUSBAUSTUFE" must be allowed to wrap */ .srv .srv-klasse{font-family:var(--sans);font-size:46px;font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--graphit)} .srv .srv-tier{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--blau);text-align:right;max-width:14ch} .srv dl{display:flex;flex-direction:column;margin:0} .srv dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--linie)} .srv dl div:first-child{border-top:0} .srv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--schiefer)} .srv dd{font-family:var(--mono);font-size:12px;color:var(--graphit);margin:0;text-align:right} /* minmax(0,…) rather than 1fr: the spec sheet rows inside a card are wide (dt + gap + "1× NVIDIA RTX PRO 6000 · Blackwell"), and a bare 1fr track adopts that as its minimum, pushing the card past a small phone. */ @media(max-width:980px){.lineup,.lineup.four{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.lineup,.lineup.four{grid-template-columns:minmax(0,1fr)}} /* ── Model catalog table ─────────────────────────────────────────── */ .modeltable{width:100%;border-collapse:collapse;margin-top:20px;font-size:14px} .modeltable thead th{ font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase; color:var(--schiefer);text-align:left;padding:14px 16px;border-bottom:1px solid var(--linie);white-space:nowrap; } .modeltable tbody td{padding:18px 16px;border-bottom:1px solid var(--linie);vertical-align:middle;color:var(--graphit)} .modeltable tbody tr{transition:background .2s var(--ease)} .modeltable tbody tr:hover{background:var(--kohle-card)} .modeltable .m-name{font-weight:600;letter-spacing:-0.01em;color:var(--graphit)} .modeltable .m-vendor{font-family:var(--mono);font-size:12px;color:var(--schiefer)} .modeltable .m-num{font-family:var(--mono);font-size:13px;color:var(--graphit);white-space:nowrap} .modeltable .m-mod{font-family:var(--mono);font-size:11px;color:var(--schiefer)} .modeltable .m-klasse{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--blau);border:1px solid var(--linie);border-radius:999px;padding:3px 10px;display:inline-block} .modeltable .m-status{font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--schiefer)} .modeltable .m-status.live::before{content:"● ";color:var(--blau)} .mtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:720px){.modeltable{min-width:680px}} /* ── CTA band (subpage bottoms) ──────────────────────────────────── */ .cta-band{background:var(--kohle-tief);color:var(--kaolin);padding:96px 0;border-top:1px solid var(--linie)} .cta-band .cb-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .cta-band h2{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-0.028em;line-height:1.04;max-width:18ch;color:var(--kaolin)} .cta-band p{font-size:16px;color:var(--hellgrau);max-width:42ch;margin-top:16px} @media(max-width:720px){.cta-band{padding:64px 0}} /* ── Long-form article / prose (Knowhow essay) ───────────────────── */ .article-hero{padding:148px 0 56px;border-bottom:1px solid var(--linie)} .article-hero .ah-kicker{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:24px} .article-hero h1{font-size:clamp(32px,5vw,62px);font-weight:800;letter-spacing:-0.032em;line-height:1.02;margin-bottom:24px;max-width:20ch} .article-hero .ah-stand{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--schiefer);max-width:62ch;margin-bottom:28px;font-weight:300;font-style:italic} .article-hero .ah-byline{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--schiefer)} .article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:64px;max-width:var(--maxw);margin:0 auto;padding:72px 32px} .toc{position:sticky;top:96px;align-self:start;font-family:var(--mono);font-size:12px;line-height:1.5} .toc .toc-h{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--schiefer);margin-bottom:16px;display:block} .toc ol{list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:toc} .toc ol li{counter-increment:toc} .toc ol li a{color:var(--schiefer);display:flex;gap:10px;transition:color .2s var(--ease)} .toc ol li a::before{content:counter(toc,decimal-leading-zero);color:var(--blau)} .toc ol li a:hover{color:var(--graphit)} @media(max-width:980px){.article-wrap{grid-template-columns:minmax(0,1fr);gap:0;padding:48px 24px}.toc{display:none}} /* Two rules that keep an article inside a phone screen: min-width:0 — without it the wide prose table (min-width:520px on phones) inflates the grid column and drags every paragraph past the viewport instead of scrolling inside its own .ptable-wrap. overflow-wrap — German legal prose runs long ("Verbraucherstreitbeilegung" is wider than a 320px column on its own) and would otherwise hang out past the screen edge, where body{overflow-x:hidden} cuts it off unreachably. It only ever acts on a word that does not fit at all; normal wrapping is untouched. Scoped to prose on purpose — a display heading elsewhere is better off spilling a few px into the gutter than breaking mid-word, and tools/check-responsive.js is what guards those. */ .prose{min-width:0;max-width:none;overflow-wrap:break-word;font-size:18px;line-height:1.7;color:var(--graphit)} .prose>p{margin:0 0 26px} .prose h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-0.024em;line-height:1.1;margin:64px 0 22px;scroll-margin-top:96px} .prose h3{font-size:21px;font-weight:700;letter-spacing:-0.016em;margin:40px 0 16px} .prose a.inline,.prose a[href^="http"]{color:var(--graphit);border-bottom:1px solid var(--blau);transition:color .2s var(--ease)} .prose a[href^="http"]:hover{color:var(--blau)} .prose strong{font-weight:700;color:var(--graphit)} .prose blockquote{margin:36px 0;padding:8px 0 8px 28px;border-left:3px solid var(--orange);font-family:var(--sans);font-size:clamp(20px,2.2vw,26px);font-weight:300;font-style:italic;line-height:1.4;letter-spacing:-0.012em;color:var(--graphit)} .prose blockquote cite{display:block;margin-top:14px;font-family:var(--mono);font-size:12px;font-style:normal;letter-spacing:0.06em;color:var(--schiefer)} .prose .ptable{width:100%;border-collapse:collapse;margin:32px 0;font-size:14px} .prose .ptable th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--schiefer);text-align:left;padding:14px 16px;border-bottom:1px solid var(--linie);background:var(--kohle-card)} .prose .ptable td{padding:14px 16px;border-bottom:1px solid var(--linie);color:var(--graphit);vertical-align:top;line-height:1.5} .prose .ptable td:first-child{font-weight:600;white-space:nowrap} .ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .prose ul.plain{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:12px} .prose ul.plain li{padding-left:24px;position:relative;color:var(--graphit)} .prose ul.plain li::before{content:"—";position:absolute;left:0;color:var(--blau)} .prose sup a{color:var(--blau);font-size:0.7em;text-decoration:none;padding:0 1px;border:0} /* Code snippets in articles. Deliberately dark in both themes — like the .dark sections, a code block is a terminal beat on the page. overflow-x keeps long lines inside the column (the responsive gate checks this). */ .prose pre{margin:30px 0;padding:18px 20px;border:1px solid var(--linie-dunkel);border-radius:10px;background:var(--kohle-tief);overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.65;color:var(--hellgrau)} .prose pre code{font-family:inherit;font-size:inherit;color:inherit;background:none} .refs{max-width:var(--maxw);margin:0 auto;padding:0 32px 96px} .refs h2{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--schiefer);border-top:1px solid var(--linie);padding-top:36px;margin-bottom:24px} .refs ol{list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:12px;max-width:80ch} .refs ol li{counter-increment:r;font-size:13px;line-height:1.55;color:var(--schiefer);padding-left:34px;position:relative} .refs ol li::before{content:"["counter(r)"]";position:absolute;left:0;font-family:var(--mono);color:var(--blau)} .refs ol li a{color:var(--schiefer);border-bottom:1px solid var(--linie);word-break:break-word} .refs ol li a:hover{color:var(--blau);border-color:var(--blau)} /* ── Knowhow hub cards ───────────────────────────────────────────── */ /* auto-fit, not a fixed 3: the row stays full regardless of how many articles are live, so no empty track is left behind when the count is not a multiple. */ .hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:48px} .hub-card{display:flex;flex-direction:column;gap:14px;padding:32px 28px;background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg);transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);min-height:280px} .hub-card.live:hover{transform:translateY(-4px);border-color:var(--blau);box-shadow:var(--shadow-soft)} .hub-card .hc-meta{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--blau)} .hub-card h3{font-size:21px;font-weight:700;letter-spacing:-0.018em;line-height:1.18} .hub-card p{font-size:14px;line-height:1.6;color:var(--schiefer);margin-bottom:auto} .hub-card .hc-go{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--graphit);display:inline-flex;gap:8px;transition:gap .24s var(--ease),color .24s var(--ease)} .hub-card.live:hover .hc-go{color:var(--blau);gap:12px} @media(max-width:860px){.hub-grid{grid-template-columns:1fr}.hub-card{min-height:0}} /* generic raised section helper */ .lede-wide{max-width:64ch} .eyebrow-block{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.12em;color:var(--blau);display:block;margin-bottom:18px} /* Capability tiles — quieted (editorial, no terminal chrome) */ .cap-screen .cs-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--schiefer);display:block;margin-bottom:18px} .cap-screen .cs-q{color:var(--kaolin);font-size:14px;line-height:1.45;margin-bottom:14px} .cap-screen .cs-out{color:var(--schiefer);margin-bottom:16px} /* Compact tier inclusions (Produkt) — replaces long bullet lists */ .tier .t-incl{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--graphit);margin:0 0 40px;flex-grow:1} .tier .t-incl b{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--schiefer);display:block;margin-bottom:8px;font-weight:500} /* Tier budget line (replaces the hard price band — qualifies without a public fixed price) */ .tier .t-frame{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--schiefer);line-height:1.5;margin:0 0 40px} .tier .t-frame::before{content:"· ";color:var(--blau);font-weight:700} .tier.featured .t-frame{color:var(--graphit)} /* §A5 — Pilotprogramm list (dark section) */ .pilot-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie-dunkel)} .pilot-list li{padding:18px 0;border-bottom:1px solid var(--linie-dunkel);font-size:15px;line-height:1.5;color:var(--kaolin);display:flex;gap:14px} .pilot-list li::before{content:"→";color:var(--blau);flex-shrink:0} .pilot-list li strong{color:var(--kaolin);font-weight:600} .pilot-cta{margin-top:32px} /* ════════════════════════════════════════════════════════════════════ FINAL MOBILE PASS (ZPA-WEB-0002) — small-phone hardening, tap targets, sticky mobile CTA, overflow safety. Desktop unaffected. ════════════════════════════════════════════════════════════════════ */ /* Larger, comfortable tap targets for the header controls on touch sizes */ @media (max-width:900px){ .lang-toggle button{padding:8px 8px;font-size:13px} .theme-toggle{width:38px;height:38px} .nav-toggle{width:40px;height:40px} } /* Very small phones: tighten the header so logo + controls never overflow */ @media (max-width:420px){ .nav-right{gap:12px} .lang-toggle{gap:2px} .nav-logo .wordmark{font-size:18px} .wrap{padding:0 18px} } /* Sticky mobile conversion bar — always-visible CTA on phones only */ .mobile-cta{display:none} @media (max-width:720px){ .mobile-cta{ display:flex;align-items:center;justify-content:center;gap:8px; position:fixed;left:0;right:0;bottom:0;z-index:90; background:var(--cta-bg);color:#fff; font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-0.005em; text-decoration:none;text-align:center; padding:15px 18px;padding-bottom:calc(15px + env(safe-area-inset-bottom)); box-shadow:0 -8px 26px rgba(0,0,0,0.22); transition:transform .3s var(--ease); } .mobile-cta:active{background:var(--cta-bg-hover);color:#fff} body.nav-open .mobile-cta{transform:translateY(130%)} body{padding-bottom:58px} } @media print{.mobile-cta{display:none}} /* Prose tables: scroll rather than squish on phones */ @media (max-width:600px){ .prose .ptable{min-width:520px} .article-wrap{padding:40px 18px} .article-hero{padding:128px 0 48px} } /* Let mid-page CTA rules wrap cleanly on the smallest screens */ @media (max-width:480px){ .cta-rule a{white-space:normal} .cta-band .cb-inner{gap:24px} .section-head{margin-bottom:36px} section{padding:64px 0} section.act-start{padding-top:96px} } /* Server-lineup + stat numbers: a touch smaller on phones so nothing clips */ @media (max-width:480px){ .srv .srv-klasse{font-size:40px} .stat-num{font-size:46px} .page-hero h1{letter-spacing:-0.03em} } /* Counting stats: fixed-width digits so the number doesn't jiggle while counting */ .stat-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* Capability tiles — align the three "screens": equal height, ✓ pinned to the bottom so the green guarantee line flushes across all three cards. */ .cap-screen{display:flex;flex-direction:column;min-height:200px} .cap-screen .cs-out{margin-top:auto} @media(max-width:860px){.cap-screen{min-height:0}.cap-screen .cs-out{margin-top:18px}} /* Pilot-list — fix: hanging arrow marker, bold term + text flow inline (no flex columns) */ .pilot-list li{display:block;position:relative;padding:18px 0 18px 30px;gap:0} .pilot-list li::before{position:absolute;left:0;top:18px} /* §P1 Sicherheit — 2-card grid + cost comparison + DSGVO badge */ .feature-grid.two{grid-template-columns:1fr 1fr} @media(max-width:560px){.feature-grid.two{grid-template-columns:1fr}} .secure-split{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;margin-top:56px;padding-top:40px;border-top:1px solid var(--linie)} @media(max-width:860px){.secure-split{grid-template-columns:1fr;gap:40px}} .costcompare .cc-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:14px} .costcompare h3{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin:0 0 4px;color:var(--graphit)} .cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:20px 0} .cc-col{padding:18px 18px 18px 0} .cc-col:first-child{border-right:1px solid var(--linie)} .cc-col:last-child{padding:18px 0 18px 18px} .cc-col .cc-h{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--schiefer);display:block;margin-bottom:12px} .cc-col.on .cc-h{color:var(--blau)} .cc-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .cc-col li{font-size:13.5px;line-height:1.45;color:var(--graphit)} .cc-note{font-size:13.5px;line-height:1.6;color:var(--schiefer);margin:0} .cc-note strong{color:var(--graphit);font-weight:600} .cc-cite{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--schiefer);margin-top:12px} .cc-cite a{color:var(--graphit);border-bottom:1px solid var(--linie)} .cc-cite a:hover{color:var(--blau);border-color:var(--blau)} .dsgvo-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .dsgvo-badge svg{width:148px;height:148px;display:block} .dsgvo-badge .db-cap{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--schiefer);max-width:26ch;line-height:1.55} /* —— bilingual anchor toggle —— */ .lang-toggle a{background:none;border:0;padding:4px 6px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--schiefer);cursor:pointer;text-decoration:none;transition:color 200ms var(--ease)} .lang-toggle a.active{color:var(--graphit)} .lang-toggle a:hover{color:var(--graphit)} @media(max-width:680px){.lang-toggle a{padding:8px 8px;font-size:13px}} /* —— §02·C — Vergleichsmatrix —— */ .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px} .cmp-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:560px} .cmp-table col.c-label{width:36%} .cmp-table col.c-col{width:16%} .cmp-th{text-align:center;padding:0 6px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--schiefer);font-weight:500;vertical-align:bottom;line-height:1.3} .cmp-th.zpa{color:var(--blau);background:rgba(217,119,87,.08);border-top:2px solid var(--blau);border-radius:6px 6px 0 0;padding-top:14px} .cmp-rowlabel{text-align:left;font-weight:400;padding:18px 14px 18px 0;font-size:14px;color:var(--graphit);line-height:1.35;border-bottom:1px solid var(--linie);vertical-align:middle} .cmp-divide th,.cmp-divide td{border-top:1px solid color-mix(in srgb, var(--graphit) 28%, transparent)} .cmp-sub{font-size:11.5px;color:var(--schiefer);margin-top:3px} .cmp-cell{text-align:center;padding:18px 6px;border-bottom:1px solid var(--linie)} .cmp-cell.zpa{background:rgba(217,119,87,.08)} .cmp-table tr:last-child .cmp-cell.zpa{border-radius:0 0 6px 6px} .cmp-b{width:15px;height:15px;vertical-align:middle} .cmp-legend{margin-top:18px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--schiefer)} .cmp-legend .cmp-b{margin-right:6px} .cmp-takeaway{margin-top:30px;padding-top:24px;border-top:1px solid var(--linie);font-size:18px;font-weight:300;font-style:italic;line-height:1.45;color:var(--schiefer);max-width:48ch} .cmp-accent{color:var(--blau)} /* —— §02·B — Architektur als vertikale Achse (Variante 3) —— */ .arch-axis{position:relative;margin-top:44px;padding-left:34px} .arch-axis::before{content:"";position:absolute;left:6px;top:12px;bottom:18px;width:2px;background:color-mix(in srgb, var(--graphit) 16%, transparent)} .arch-axis::after{content:"";position:absolute;left:1px;bottom:8px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--blau)} .arch-axis .arch-node{position:relative;padding:16px 0;border-bottom:1px solid var(--linie)} .arch-axis .arch-node:last-child{border-bottom:0} .arch-axis .arch-node::before{content:"";position:absolute;left:-34px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--kohle);border:2px solid var(--schiefer);box-sizing:border-box;transition:background 280ms var(--ease),border-color 280ms var(--ease),transform 280ms var(--ease)} .arch-axis .arch-node.base::before{background:var(--blau);border-color:var(--blau)} .arch-axis .arch-node.is-active::before{background:var(--blau);border-color:var(--blau);transform:scale(1.15)} .arch-axis .arch-layer{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphit);margin-bottom:4px} .arch-axis .arch-desc{font-size:14px;line-height:1.5;color:var(--schiefer)} @media (max-width:720px){.arch-axis{padding-left:28px}.arch-axis .arch-node::before{left:-28px}} .arch-comp-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .arch-toggle{display:inline-flex;align-items:center;gap:9px;margin-top:22px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blau);user-select:none} .arch-toggle .chev{display:inline-block;font-size:15px;line-height:1;transition:transform 240ms var(--ease)} .arch-toggle .lbl-hide{display:none} .arch-comp-toggle:checked ~ .arch-toggle .lbl-show{display:none} .arch-comp-toggle:checked ~ .arch-toggle .lbl-hide{display:inline} .arch-comp-toggle:checked ~ .arch-toggle .chev{transform:rotate(90deg)} .arch-comp-toggle:focus-visible ~ .arch-toggle{outline:2px solid var(--blau);outline-offset:3px;border-radius:3px} .arch-axis .arch-comp-axis{font-family:var(--mono);font-size:13px;letter-spacing:0.02em;color:var(--graphit);display:none;flex-wrap:wrap;margin-top:14px} .arch-comp-toggle:checked ~ .arch-axis .arch-comp-axis{display:flex} .arch-axis .arch-comp-axis span{display:inline-flex;align-items:center;line-height:1.8} .arch-axis .arch-comp-axis span::before{content:"·";margin:0 12px;color:var(--schiefer)} .arch-axis .arch-comp-axis span:first-child::before{content:"";margin:0} /* —— Sicherheit & Compliance — Band nach §01 —— */ #compliance{padding-top:20px;padding-bottom:20px} .secband{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center;max-width:1000px;margin:0 auto} .secband-emblem{width:300px;height:300px;justify-self:center} .secband-emblem svg{display:block;width:100%;height:100%} .secband-eyebrow{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--blau);margin-bottom:18px} .secband-head{font-family:var(--sans);font-size:clamp(28px,3vw,38px);font-weight:300;letter-spacing:-0.02em;color:var(--graphit);line-height:1.15;max-width:18ch;margin:0 0 20px} .secband-body{font-size:15px;color:var(--schiefer);line-height:1.65;max-width:52ch;margin:0} @media (max-width:720px){.secband{grid-template-columns:1fr;gap:30px;justify-items:center;text-align:center}.secband-emblem{width:220px;height:220px}.secband-head,.secband-body{max-width:38ch}} /* §01 (Produkt) — DSGVO-Siegel links, Felder 01/02 rechts gestapelt */ #architektur{padding-top:96px} #hardware{padding-top:96px} #wirtschaftlichkeit{padding-top:96px} #betrieb{padding-top:96px} .sec-intro{display:grid;grid-template-columns:auto 1fr;justify-content:start;gap:60px;align-items:center;margin-top:44px;padding-left:60px} .sec-intro .dsgvo-badge{margin:0} .sec-intro .dsgvo-badge svg{width:190px;height:190px} .sec-intro .feature-stack{display:flex;flex-direction:column} .sec-intro .feature{border-right:0!important;padding:22px 0!important;border-top:1px solid var(--linie);max-width:52ch} .sec-intro .feature:first-child{border-top:0;padding-top:0!important} .sec-intro .feature:last-child{padding-bottom:0!important} @media(max-width:720px){.sec-intro{grid-template-columns:1fr;gap:32px;justify-items:start;padding-left:0}} /* §04 (Produkt) — Wirtschaftlichkeit / Break-even */ .eco{margin-top:8px} .eco-head{font-size:clamp(22px,2.2vw,28px);font-weight:300;font-style:italic;letter-spacing:-0.02em;color:var(--graphit);line-height:1.25;max-width:32ch;margin:0 0 10px} .eco-lede{font-size:15px;color:var(--schiefer);line-height:1.6;max-width:64ch;margin:0 0 26px} .eco-lede b{color:var(--graphit);font-weight:500} .eco-chart{margin:0 0 8px} .eco-chart svg{display:block;width:100%;height:auto} .eco-legend{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--schiefer);margin-bottom:30px} .eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px} .eco-col{border:1px solid var(--linie);border-radius:10px;padding:20px} .eco-col.on{border-color:color-mix(in srgb, var(--blau) 45%, transparent);background:color-mix(in srgb, var(--blau) 7%, transparent)} .eco-col-h{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--schiefer);margin-bottom:7px} .eco-col.on .eco-col-h{color:var(--blau)} .eco-col-sub{display:block;font-size:14px;font-style:italic;color:var(--schiefer);margin-bottom:7px} .eco-col.on .eco-col-sub{color:var(--graphit)} .eco-col ul{list-style:none;margin:0;padding:0} .eco-col li{font-size:13.5px;color:var(--schiefer);line-height:2} .eco-col li.strong{color:var(--graphit);font-weight:500} .eco-note{font-size:12.5px;color:var(--schiefer);line-height:1.65;max-width:80ch;margin:40px 0 0} .eco-note a{color:var(--graphit);border-bottom:1px solid var(--linie)} @media(max-width:720px){.eco-grid{grid-template-columns:1fr}} /* §04 — Break-even-Kurve (scroll-gesteuert) */ .eco-chart{max-width:600px;margin:8px auto 4px} .eco-split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:44px;align-items:start;margin-top:16px} .eco-split .eco-chart{max-width:none;margin:0} .eco-boxes{display:flex;flex-direction:column;gap:14px} @media(max-width:720px){.eco-split{grid-template-columns:1fr;gap:22px}} .eco-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--mittelgrau);margin-bottom:14px} .eco-line{fill:none;stroke-linecap:round;stroke-linejoin:round} .eco-area{fill:url(#ecoGrad);opacity:0} .eco-bedot{transform-box:fill-box;transform-origin:center;transform:scale(0)} .eco-anno{opacity:0} @keyframes ecoPulse{0%,100%{r:3.6}50%{r:5.2}} .eco-chart.run .eco-bedot circle{animation:ecoPulse 2.4s ease-in-out infinite} .eco-legend{display:flex;gap:24px;flex-wrap:wrap;justify-content:flex-start;font-family:var(--mono);font-size:10.5px;color:var(--schiefer);margin-top:14px} .eco-legend .eco-sw{font-size:13px;vertical-align:-1px} @media (prefers-reduced-motion:reduce){.eco-chart .eco-line{stroke-dashoffset:0!important}.eco-area{opacity:1!important}.eco-bedot{transform:scale(1)!important}.eco-anno{opacity:1!important}} /* §05 — Modellpflege-Modul (zubuchbar) */ .sla-addon{margin-top:24px;border:1px solid var(--linie);border-radius:var(--radius-lg);background:var(--kohle-card);padding:26px 30px;display:flex;flex-direction:column;gap:8px} .sla-addon-num{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--blau);text-transform:uppercase} .sla-addon h3{font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin:2px 0} .sla-addon p{font-size:14px;line-height:1.6;color:var(--schiefer);max-width:84ch;margin:0} .sla-addon-price{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:var(--graphit);text-transform:uppercase;margin-top:8px} /* §05 — Managed-Service-Block (Enthalten / Nicht enthalten) */ .ops-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:8px} .ops-col{border:1px solid var(--linie);border-radius:10px;padding:24px 26px} .ops-col.on{border-color:color-mix(in srgb, var(--blau) 45%, transparent);background:color-mix(in srgb, var(--blau) 7%, transparent)} .ops-col-h{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--schiefer);text-transform:uppercase;margin-bottom:6px} .ops-col.on .ops-col-h{color:var(--blau)} .ops-col ul{list-style:none;margin:0;padding:0} .ops-col li{font-size:14px;color:var(--schiefer);line-height:1.5;padding:11px 0 11px 24px;position:relative;border-top:1px solid var(--linie)} .ops-col li:first-child{border-top:0} .ops-col li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border-radius:50%;background:var(--blau)} .ops-col:not(.on) li::before{content:"+";top:11px;left:0;width:auto;height:auto;border-radius:0;background:none;font-family:var(--mono);font-size:14px;line-height:1.5;color:var(--blau);opacity:.85} .ops-col.on li{color:var(--graphit)} .ops-note{margin:24px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--graphit)} @media(max-width:720px){.ops-split{grid-template-columns:1fr;gap:16px}} /* §M1 — Modell-Katalog: Klassen-/Modalitäts-Filter + Karten-Grid */ .mrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .mrow.mrow-last{margin-bottom:22px} .mrow button{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--schiefer);background:none;border:1px solid var(--linie);border-radius:20px;padding:6px 14px;cursor:pointer;transition:all .18s var(--ease,ease)} .mrow button.active{color:var(--blau);border-color:color-mix(in srgb,var(--blau) 45%,transparent)} .mrow-lbl{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--graphit);text-transform:uppercase;align-self:center;margin-right:4px;min-width:74px} .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:16px;margin-top:8px} .mcard{position:relative;border:1px solid var(--linie);border-radius:var(--radius-lg);background:var(--kohle-card);padding:22px 22px 18px;display:flex;flex-direction:column;gap:11px;transition:border-color .18s ease} .mcard:hover{border-color:color-mix(in srgb,var(--blau) 42%,transparent)} .mcard.rec{border-color:color-mix(in srgb,var(--blau) 55%,transparent)} .mcard-rec{position:absolute;top:-9px;left:20px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--kohle,#16181c);background:var(--blau);border-radius:5px;padding:3px 8px} .mcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .mcard-vendor{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--schiefer);text-transform:uppercase} .mcard h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;line-height:1.14;margin:3px 0 0} .mcard-klasse{flex-shrink:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--blau);border:1px solid color-mix(in srgb,var(--blau) 40%,transparent);border-radius:6px;padding:3px 9px} .mcard-mod{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--graphit);text-transform:uppercase} .mcard-mod::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blau)} .mcard-best{font-size:13.5px;line-height:1.5;color:var(--schiefer)} .mcard-best b{color:var(--graphit);font-weight:500} .mpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px} .mpill{font-family:var(--mono);font-size:10.5px;letter-spacing:0.03em;color:var(--schiefer);border:1px solid var(--linie);border-radius:20px;padding:3px 10px;white-space:nowrap} .mpill.task{color:var(--blau);border-color:color-mix(in srgb,var(--blau) 38%,transparent)} /* §A1 — Use-Cases: prominente Abschluss-CTA */ .uc-cta{margin-top:40px;border:1px solid color-mix(in srgb,var(--blau) 45%,transparent);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--blau) 6%,transparent);padding:32px 28px;text-align:center} .uc-cta-q{font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin:0 0 8px;color:var(--graphit)} .uc-cta-a{font-size:15px;line-height:1.5;color:var(--schiefer);margin:0 0 18px;max-width:60ch;margin-left:auto;margin-right:auto} .uc-cta .link-arrow{font-family:var(--mono);font-size:13px;letter-spacing:0.04em} /* §M1 — Cloud-/nicht-lokal-Tag im Modell-Katalog */ .mpill.cloud{color:var(--graphit);border-color:var(--schiefer);opacity:.85}