/* ══════════════════════════════════════════════════════════════ JURZEL Web-Styleguide v1.0 — geteiltes Stylesheet Gilt für Unternehmensseite und alle Produkt-Landingpages. Basiert auf JURZEL Brand Style Guide v5.0 — Apple Native Edition. Nicht pro Seite duplizieren — immer diese Datei verlinken. ══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ── 1. Tokens ───────────────────────────────────────────────── */ :root{ --g:#00875A; --g-deep:#075E40; --g-soft:#DFF3E8; --bg-0:#F7F6F1; --bg-1:#FFFFFF; --bg-2:#EFEDE7; --label:#1B1B17; --label-2:rgba(27,27,23,.62); --label-3:rgba(27,27,23,.34); --label-4:rgba(27,27,23,.15); --line:rgba(0,0,0,.09); --dark-0:#121412; --dark-1:#1C1F1B; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --ease:cubic-bezier(.16,1,.3,1); --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',Inter,system-ui,sans-serif; --pad:clamp(24px,6vw,96px); } @media (prefers-color-scheme:dark){ :root{ --g:#30D68C; --g-soft:#16281F; --bg-0:#121412; --bg-1:#1C1F1B; --bg-2:#262A24; --label:#F6F5F1; --label-2:rgba(246,245,241,.64); --label-3:rgba(246,245,241,.36); --label-4:rgba(246,245,241,.13); --line:rgba(255,255,255,.08); } } html{scroll-behavior:smooth} html,body{max-width:100%;overflow-x:hidden} body{font-family:var(--font);background:var(--bg-0);color:var(--label);-webkit-font-smoothing:antialiased;font-size:17px;font-weight:400;line-height:1.65;overflow-wrap:break-word} img,svg,video,iframe{max-width:100%} /* ── 2. Typografie ───────────────────────────────────────────── */ .t-display{font-size:clamp(44px,8vw,104px);font-weight:800;line-height:.98;letter-spacing:-.035em;color:var(--label);hyphens:auto;overflow-wrap:break-word} .t-heading{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1.08;color:var(--label);hyphens:auto;overflow-wrap:break-word} /* hyphens:auto = Notbremse gegen hässliche Wort-Zerreißungen in engen Spalten (z.B. .apple-inner bei ~900-1100px): lange, unteilbare Wörter wie "Verlagssatz" oder "Systemvorlagen" werden nötigenfalls an einer Silbengrenze mit Bindestrich getrennt statt mitten im Wort abgeschnitten. overflow-wrap:break-word bleibt als allerletzte Reserve, falls der Browser keine Trennstelle kennt. Der eigentliche Fix ist aber, dass die Spalte gar nicht erst so eng wird -- siehe .apple-inner Breakpoint (1100px). */ .t-title{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--label)} .t-body{font-size:16.5px;font-weight:400;color:var(--label-2);line-height:1.7} .t-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--label-3)} .t-caption{font-size:13px;font-weight:400;color:var(--label-3)} /* ── 3. Layout-Helfer ────────────────────────────────────────── */ .wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1240px;margin:0 auto} .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap} .eyebrow::before{content:'';width:20px;height:2px;background:var(--g);flex-shrink:0;border-radius:1px} section{padding:clamp(56px,14vw,104px) var(--pad)} .sec-header{max-width:620px;margin-bottom:clamp(36px,8vw,60px)} .sec-header h2{margin-bottom:16px} .sec-header p{max-width:540px} /* ── 4. Navigation — Liquid Glass ────────────────────────────── */ nav{position:fixed;inset:0 0 auto;z-index:300;height:60px;display:flex;align-items:center;justify-content:space-between; padding:0 var(--pad);background:color-mix(in srgb, var(--bg-1) 78%, transparent); backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5); border-bottom:1px solid var(--line)} .nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none} .nav-wordmark{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--label)} .nav-links{display:flex;gap:30px;list-style:none} .nav-links a{font-size:13px;font-weight:600;color:var(--label-2);text-decoration:none;transition:color .15s var(--ease)} .nav-links a:hover{color:var(--label)} .nav-cta{font-size:13px;font-weight:700;padding:9px 20px;border-radius:var(--r-pill);background:var(--g);color:#fff; text-decoration:none;transition:transform .15s var(--ease),background .15s var(--ease);white-space:nowrap} .nav-cta:hover{transform:translateY(-1px);background:var(--g-deep)} .nav-right{display:flex;align-items:center;gap:10px} @media(max-width:900px){.nav-links{display:none}} /* Mobiles Menü —
/, kein JavaScript nötig */ .nav-toggle{display:none;position:relative} .nav-toggle-summary{list-style:none;cursor:pointer;width:38px;height:38px;display:flex;align-items:center;justify-content:center; border-radius:var(--r-pill);-webkit-tap-highlight-color:transparent} .nav-toggle-summary::-webkit-details-marker{display:none} .nav-toggle-summary::marker{content:'';display:none} .nav-toggle-summary svg{display:block;color:var(--label)} .nav-toggle-summary .i-close{display:none} .nav-toggle[open] .nav-toggle-summary .i-open{display:none} .nav-toggle[open] .nav-toggle-summary .i-close{display:block} .nav-toggle-panel{position:fixed;top:60px;left:0;right:0;background:var(--bg-1);border-bottom:1px solid var(--line); padding:8px var(--pad) 18px;display:flex;flex-direction:column;max-height:calc(100vh - 60px);overflow-y:auto; box-shadow:0 16px 30px rgba(0,0,0,.12)} .nav-toggle-panel a{padding:14px 2px;font-size:15px;font-weight:600;color:var(--label);text-decoration:none;border-bottom:1px solid var(--line)} .nav-toggle-panel a:last-child{border-bottom:none} .nav-toggle-panel a.nav-toggle-cta{margin-top:10px;text-align:center;font-weight:700;color:#fff; background:var(--g);border-radius:var(--r-pill);border-bottom:none;padding:13px} @media(max-width:900px){.nav-toggle{display:block}} @media(max-width:480px){.nav-cta{display:none}} /* ── 5. Hero-Rahmen — Fokusrahmen als Layout-Prinzip ─────────── */ .hero{padding:clamp(96px,26vw,150px) var(--pad) 60px;position:relative} .hero-frame{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(40px,10vw,88px) clamp(20px,6vw,56px) clamp(32px,8vw,64px);overflow:hidden} .corner{position:absolute;width:34px;height:34px;pointer-events:none} .corner svg{width:100%;height:100%;display:block} .corner.tl{top:-1px;left:-1px} .corner.tr{top:-1px;right:-1px;transform:scaleX(-1)} .corner.bl{bottom:-1px;left:-1px;transform:scaleY(-1)} .corner.br{bottom:-1px;right:-1px;transform:scale(-1,-1)} .hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 55% 60% at 82% 20%, color-mix(in srgb, var(--g) 12%, transparent) 0%, transparent 62%)} .hero-content{position:relative;z-index:1;max-width:920px} .hero-h1{margin-bottom:26px} .hero-h1 .w1{color:var(--label-4)} .hero-h1 .w2{color:var(--label)} .hero-h1 .w3,.focus-word{color:var(--g);position:relative;display:inline-block;padding:0 .05em;white-space:nowrap;max-width:100%} @media(max-width:480px){ .t-display{font-size:clamp(22px,9vw,44px)} .t-heading{font-size:clamp(24px,7.5vw,48px)} } @media(max-width:340px){ .t-display{font-size:clamp(20px,8.2vw,44px)} .t-heading{font-size:clamp(22px,7vw,48px)} } .hero-h1 .w3 i,.focus-word i{position:absolute;border-color:var(--g);border-style:solid;border-width:0;width:.22em;height:.22em;opacity:0;animation:fc .5s var(--ease) forwards} .hero-h1 .w3 i:nth-child(1),.focus-word i:nth-child(1){top:-.02em;left:-.06em;border-top-width:3px;border-left-width:3px;animation-delay:.3s} .hero-h1 .w3 i:nth-child(2),.focus-word i:nth-child(2){top:-.02em;right:-.06em;border-top-width:3px;border-right-width:3px;animation-delay:.4s} .hero-h1 .w3 i:nth-child(3),.focus-word i:nth-child(3){bottom:-.02em;right:-.06em;border-bottom-width:3px;border-right-width:3px;animation-delay:.5s} .hero-h1 .w3 i:nth-child(4),.focus-word i:nth-child(4){bottom:-.02em;left:-.06em;border-bottom-width:3px;border-left-width:3px;animation-delay:.6s} @keyframes fc{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}} @media(prefers-reduced-motion:reduce){.hero-h1 .w3 i,.focus-word i{animation:none;opacity:1}} .hero-sub{max-width:520px;margin-bottom:40px;font-size:18px} .hero-note{font-size:13.5px;color:var(--label-3)} .hero-note b{color:var(--g);font-weight:700} .hero-dot{position:absolute;bottom:26px;right:56px;width:9px;height:9px;border-radius:50%;background:var(--g);z-index:1} /* ── 6. Buttons ──────────────────────────────────────────────── */ .hero-cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:36px} .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;padding:15px 30px; border-radius:var(--r-pill);background:var(--g);color:#fff;text-decoration:none;max-width:100%;text-align:center; box-shadow:0 10px 26px color-mix(in srgb, var(--g) 32%, transparent);transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb, var(--g) 40%, transparent)} .btn-secondary{font-size:14px;font-weight:700;color:var(--label-2);text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:2px;transition:color .15s var(--ease),border-color .15s var(--ease)} .btn-secondary:hover{color:var(--g);border-color:var(--g)} /* ── 7. Tags / Badges ────────────────────────────────────────── */ .plat-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} .ptag{font-size:11px;font-weight:700;padding:5px 13px;border-radius:var(--r-pill);border:1px solid var(--line); background:var(--bg-1);color:var(--label-2)} .launch-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);margin-bottom:24px} .launch-badge.live{background:var(--g-soft);color:var(--g)} .launch-badge.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--g)} .launch-badge.soon{background:var(--line);color:var(--label-3)} /* ── 8. Trennlinien-Raster (ein Baustein, vier Einsatzarten) ── Container: Hairline-Grid — Zellen durch 1–2px Linie getrennt, gemeinsamer Rahmen, gemeinsamer Radius. Spaltenzahl per Modifier. */ .hgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .hgrid.cols-2{grid-template-columns:1fr 1fr} .hgrid.cols-3{grid-template-columns:repeat(3,1fr)} .hgrid.cols-4{grid-template-columns:repeat(4,1fr)} @media(max-width:800px){.hgrid.cols-2,.hgrid.cols-3,.hgrid.cols-4{grid-template-columns:1fr 1fr}} @media(max-width:560px){.hgrid.cols-2,.hgrid.cols-3,.hgrid.cols-4{grid-template-columns:1fr}} .hgrid > *{background:var(--bg-1);min-width:0} .hgrid .is-muted{background:var(--bg-2)} .hgrid .is-accent{background:var(--g-soft)} /* Alte Klassennamen — funktional identisch mit .hgrid, für Bestandscode */ .pair-grid,.absence-grid,.pos-matrix,.launch-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .pair-grid{grid-template-columns:1fr 1fr} .absence-grid{grid-template-columns:repeat(3,1fr);gap:2px} .pos-matrix{grid-template-columns:repeat(2,1fr);gap:2px;max-width:740px} .launch-grid{grid-template-columns:1fr 1fr;gap:2px} @media(max-width:800px){.pair-grid,.launch-grid{grid-template-columns:1fr}} @media(max-width:700px){.absence-grid{grid-template-columns:1fr 1fr}.pos-matrix{grid-template-columns:1fr}} @media(max-width:420px){.absence-grid{grid-template-columns:1fr}} .pair-grid>*,.absence-grid>*,.pos-matrix>*,.launch-grid>*{min-width:0} .pair-card{background:var(--bg-1);padding:clamp(24px,6vw,36px)} .pair-card .t-title{margin-bottom:10px} .pair-card p{font-size:14.5px;color:var(--label-2);line-height:1.65} .absence-item{display:flex;align-items:center;gap:10px;padding:18px 20px;background:var(--bg-1); font-size:14px;font-weight:600;color:var(--label-3)} .absence-item svg{flex-shrink:0;opacity:.5} .pos-cell{background:var(--bg-1);padding:24px;min-width:0} .pos-cell.hl{background:var(--g-soft)} .pos-row{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label-3);margin-bottom:8px} .pos-name{font-size:18px;font-weight:800;margin-bottom:4px;letter-spacing:-.01em} .pos-name.em{color:var(--g)} .pos-sub{font-size:13px;color:var(--label-3)} .launch-card{background:var(--bg-1);padding:44px} .launch-card.soon{background:var(--bg-2)} .launch-top{display:flex;align-items:center;gap:16px;margin-bottom:18px} .launch-name{font-size:22px;font-weight:800;letter-spacing:-.015em} .launch-name small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label-3)} .launch-tag{font-size:15px;color:var(--label-2);line-height:1.6;margin-bottom:24px;max-width:380px} .launch-cta{font-size:13.5px;font-weight:700;color:var(--g);text-decoration:none;display:inline-flex;align-items:center;gap:6px} .launch-cta:hover{text-decoration:underline} .launch-note{font-size:13px;color:var(--label-3)} /* ── 9. Geisterziffern — nummerierte Listen (Prinzipien, Schritte) ── */ .mp-list{border-top:1px solid var(--line)} .mp{position:relative;display:grid;grid-template-columns:140px 1fr;align-items:center;padding:38px 0;border-bottom:1px solid var(--line);overflow:hidden} .mp-n{font-size:96px;font-weight:800;color:var(--label-4);line-height:1;letter-spacing:-.04em;pointer-events:none} .mp-body-wrap{max-width:600px;min-width:0} .mp-title{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;color:var(--label)} .mp-body{font-size:15.5px;color:var(--label-2);line-height:1.65} @media(max-width:700px){.mp{grid-template-columns:1fr}.mp-n{font-size:56px;margin-bottom:4px}} @media(max-width:420px){.mp-n{font-size:40px}} .m-q{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.28;max-width:700px;margin-bottom:20px;color:var(--label)} .m-q em{color:var(--label-2);font-style:normal;font-weight:400} .m-lead{max-width:620px;margin-bottom:64px} /* ── 10. Dunkles Band — Datenschutz, Apple-nativ, jede dunkle Fläche ── Ein Baustein, zwei Layouts: einspaltig (Standard) oder mit Mockup (.split). */ .privacy,.apple-band,.dark-band{background:var(--dark-0);color:#F6F5F1;border-radius:var(--r-xl); padding:clamp(32px,7vw,64px);margin:0 var(--pad);position:relative;overflow:hidden} .privacy::before,.apple-band::before,.dark-band::before{content:'';position:absolute;inset:0; background:radial-gradient(ellipse 50% 60% at 88% 0%, color-mix(in srgb, var(--g) 14%, transparent), transparent 60%);pointer-events:none} .privacy .t-heading,.apple-band .t-heading,.dark-band .t-heading{color:#fff} .privacy .t-label,.apple-band .t-label,.dark-band .t-label{color:rgba(246,245,241,.5)} .privacy .t-label::before,.apple-band .t-label::before,.dark-band .t-label::before{background:var(--g)} .privacy p,.dark-band p{color:rgba(246,245,241,.62);max-width:560px;position:relative} @media(max-width:900px){.privacy,.apple-band,.dark-band{margin:0;border-radius:0}} .apple-band{padding:0} .apple-inner{position:relative;display:grid;grid-template-columns:minmax(420px,1fr) minmax(220px,380px);gap:clamp(28px,5vw,56px);align-items:center;padding:64px} .apple-inner>*{min-width:0} @media(max-width:1200px){.apple-inner{grid-template-columns:1fr;padding:clamp(28px,7vw,48px) clamp(20px,5vw,32px)}} .apple-band p.lead{color:rgba(246,245,241,.66);max-width:460px;margin-bottom:32px} .apple-list{display:flex;flex-direction:column;gap:20px} .apple-item{display:flex;gap:14px} .apple-item>div{min-width:0} .apple-item .dot{width:6px;height:6px;border-radius:50%;background:var(--g);flex-shrink:0;margin-top:8px} .apple-item .t-title{color:#fff;margin-bottom:4px;font-size:15.5px} .apple-item p{color:rgba(246,245,241,.5);font-size:13.5px;line-height:1.6} /* Dekorative App-Mockup-Grafik (Sidebar + Content) — veranschaulicht NavigationSplitView / Liquid Glass ohne echten Screenshot. */ .mockup{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:flex} .mockup-sb{width:34%;background:rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.08);padding:16px 10px;display:flex;flex-direction:column;gap:8px} .mockup-sb .dot-logo{width:16px;height:16px;border-radius:5px;background:var(--g);margin-bottom:10px} .mockup-row{height:8px;border-radius:4px;background:rgba(255,255,255,.14)} .mockup-row.active{background:var(--g)} .mockup-row.w1{width:70%}.mockup-row.w2{width:50%}.mockup-row.w3{width:60%} .mockup-main{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:10px} .mockup-bar{height:9px;border-radius:4px;background:rgba(255,255,255,.09)} .mockup-bar.short{width:40%} /* ── 11. Prozess-Diagramm (Trichter) — produktspezifisch, optional ── */ .funnel-section{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start;max-width:1240px;margin:0 auto;padding:0 var(--pad)} @media(max-width:900px){.funnel-section{grid-template-columns:1fr;gap:36px}} .funnel-section>*{min-width:0} .funnel-svg{width:100%;height:auto} .funnel-band{stroke:var(--line);stroke-width:1} .funnel-b1{fill:var(--bg-1)} .funnel-b2{fill:var(--g-soft);stroke:color-mix(in srgb, var(--g) 30%, transparent)} .funnel-b3{fill:var(--dark-0);stroke:var(--dark-0)} .funnel-dot{fill:var(--g)} .funnel-text{display:flex;flex-direction:column;gap:0} .ft-row{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:20px} .ft-row>*{min-width:0} .ft-row:first-child{border-top:none} .ft-row:last-child .ft-name{color:var(--g)} .ft-num{font-size:12px;font-weight:700;color:var(--label-3);letter-spacing:.06em;padding-top:4px} .ft-name{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px} .ft-desc{font-size:15px;color:var(--label-2);line-height:1.65;max-width:440px} .trichter-quote{margin-top:44px;font-size:19px;font-weight:600;color:var(--label);max-width:600px;letter-spacing:-.01em} .trichter-quote span{color:var(--label-3);font-weight:400} /* ── 12. Closer / Footer ─────────────────────────────────────── */ .closer{text-align:center;padding:clamp(64px,18vw,140px) var(--pad)} .closer h2{margin-bottom:22px} .closer p{max-width:460px;margin:0 auto 40px} footer{border-top:1px solid var(--line);padding:36px var(--pad);display:flex;align-items:center; justify-content:space-between;flex-wrap:wrap;gap:20px} .f-logo{display:flex;align-items:center;gap:9px} .f-wm{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--label-2)} .f-links{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none} .f-links a{font-size:12.5px;color:var(--label-3);text-decoration:none} .f-links a:hover{color:var(--label)} .f-copy{font-size:12px;color:var(--label-4)} /* ── 13. Rechtstext-Seiten (Datenschutz, Impressum, AGB) ──────── Für lange, strukturierte Fließtext-Inhalte ohne Marketing-Anspruch. Nutzt .mp-list/.mp (Geisterziffern) für nummerierte Abschnitte — dieselbe Sprache wie Markenprinzipien, nur dichter befüllt. */ .legal{padding:150px 0 40px} .legal-head{max-width:680px;margin-bottom:56px} .legal-head .t-heading{margin-bottom:14px} .legal-meta{margin-top:18px} .legal-toc{position:static;height:auto;display:flex;flex-wrap:wrap;gap:10px 28px;padding:22px 28px;border:1px solid var(--line); border-radius:var(--r-lg);background:var(--bg-1);margin-bottom:8px} /* .legal-toc is a