/* ============================================================ implec — zentrales Design-System (Komponenten-Layer) Alle im Design-Manual definierten Elemente sind hier als wiederverwendbare Klassen umgesetzt. HTML-Seiten enthalten nur noch Struktur + Text. Design-Änderungen = hier, einmal. ============================================================ */ /* ——— Hausschrift: Radikal (Nootype) ——— */ @font-face { font-family:'Radikal'; src:url('assets/fonts/radikal-light.woff2') format('woff2'),url('assets/fonts/radikal-light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Radikal'; src:url('assets/fonts/radikal-regular.woff2') format('woff2'),url('assets/fonts/radikal-regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Radikal'; src:url('assets/fonts/radikal-bold.woff2') format('woff2'),url('assets/fonts/radikal-bold.woff') format('woff'); font-weight:500 700; font-style:normal; font-display:swap; } /* JetBrains Mono (Tags/Badges) — selbst gehostet statt Google Fonts (kein Drittdaten-Transfer). Variable Datei deckt Weight 400–500 ab. */ @font-face { font-family:'JetBrains Mono'; src:url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'JetBrains Mono'; src:url('assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ——— Tokens ——— */ :root { /* Farben */ --purple:#3C005F; --purple-deep:#25003B; --purple-soft:#51187a; --red:#E6002D; --red-deep:#B80024; --ink:#2A0040; --ink-soft:#6e6e73; --ink-faint:#b0a8bb; --paper:#fbfbfd; --white:#ffffff; --cream:#f5f5f7; --panel:#f3eef7; --line:rgba(60,0,95,0.08); --line-2:rgba(0,0,0,0.08); --line-3:rgba(60,0,95,0.1); --pink:#ff8da3; --gold:#FBBC05; /* Schrift */ --sans:"Radikal","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; /* Radius / Maße */ --r-card:24px; --r-card-sm:16px; --r-pill:980px; --r-tag:6px; --maxw:1280px; /* Akzent (pro Seite überschreibbar) */ --accent:var(--purple); --accent-cta:var(--red); } *{ box-sizing:border-box; } /* overflow-x:clip kappt das aus-dem-Viewport geschobene mobile Menü-Panel (position:fixed, translateX(100%)), ohne einen Scroll-Container zu erzeugen — position:sticky in der Nav bleibt dadurch funktionsfähig. WICHTIG: auch auf , nicht nur — ein position:fixed-Element hängt am Viewport (initialer Container) und wird von overflow:clip auf NICHT geclippt; ohne body-clip bleibt das Menü-Panel horizontal scrollbar (Mobile). */ html{ scroll-behavior:smooth; scroll-padding-top:110px; overflow-x:clip; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5; overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{ max-width:100%; display:block; } a{ color:inherit; } /* ============================================================ LAYOUT ============================================================ */ .wrap{ max-width:var(--maxw); margin:0 auto; } .wrap--1500{ max-width:1500px; margin:0 auto; } .wrap--1200{ max-width:1200px; margin:0 auto; } .wrap--1100{ max-width:1100px; margin:0 auto; } .section{ padding:88px 22px; } .section--lg{ padding:120px 22px; } .section--flush-top{ padding-top:0; } .section--white{ background:var(--white); } .section--cream{ background:var(--cream); } .section--panel{ background:var(--panel); } .section--dark{ background:linear-gradient(165deg,#2A0040 0%,#14001f 100%); color:#fff; } .section--dark-flat{ background:var(--purple-deep); color:#fff; } .center{ text-align:center; } .section-head{ text-align:center; max-width:720px; margin:0 auto 48px; } .section-head .lead{ margin-left:auto; margin-right:auto; } /* Grids */ .grid{ display:grid; gap:14px; } .grid--2{ grid-template-columns:1fr 1fr; } .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } .gap-24{ gap:24px; } /* ============================================================ TYPOGRAFIE ============================================================ */ /* Kicker/Eyebrow: Radikal, gemischte Schreibung, gut lesbar (Vorschlag 3 „dezent gemischt"). Früher Mono/UPPERCASE/0.18em — auf Wunsch zurück auf lesbar. */ .eyebrow{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--accent-cta); margin:0 0 12px; letter-spacing:0.06em; text-transform:uppercase; } .eyebrow--accent{ color:var(--accent); } .eyebrow--pink{ color:var(--pink); } /* Metadaten (Datum/Lesedauer auf Karten): dezent gedämpftes Grau statt Signalrot */ .eyebrow--meta{ color:var(--ink-soft); font-weight:500; } .eyebrow--mono{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; } /* A11y: rotes Eyebrow auf Cream nutzt --red-deep (6,3:1 statt 4,38:1); Farb-Modifier ausgenommen */ .section--cream .eyebrow:not(.eyebrow--meta):not(.eyebrow--accent):not(.eyebrow--pink){ color:var(--red-deep); } .h1{ font-size:clamp(40px,6.5vw,84px); font-weight:600; line-height:1.02; letter-spacing:-0.025em; margin:0 0 16px; } /* Display-Hero (zentriert, groß) — für Pillar-/Produkt-Heros mit Akzent-Wort */ .h1--xl{ font-size:clamp(44px,9vw,104px); line-height:1.0; letter-spacing:-0.04em; max-width:16ch; margin-left:auto; margin-right:auto; text-wrap:balance; } .subhero--left .h1--xl{ margin-left:0; margin-right:0; } /* Akzent-Wort: Purple→Rot→Purple Verlauf, in den Text geclippt */ .accent{ background:linear-gradient(90deg,var(--purple) 0%,var(--red) 50%,var(--purple) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .h2{ font-size:clamp(30px,5vw,48px); font-weight:600; line-height:1.05; letter-spacing:-0.025em; margin:0 0 14px; } .h2--xl{ font-size:clamp(34px,6vw,72px); } .h2--dark{ font-weight:700; letter-spacing:-0.03em; } .h3{ font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-0.015em; margin:0; } .lead{ font-size:clamp(17px,2vw,21px); color:var(--ink-soft); letter-spacing:-0.01em; margin:0; } .muted{ color:var(--ink-soft); } .text{ font-size:15px; color:var(--ink-soft); line-height:1.5; } /* ============================================================ BUTTONS / LINKS ============================================================ */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:var(--r-pill); font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } .btn--sm{ padding:10px 22px; font-size:14px; } .btn--lg{ padding:15px 32px; font-size:17px; } .btn--block{ width:100%; justify-content:center; } .btn--primary{ background:var(--red); color:#fff; } .btn--primary:hover{ background:var(--red-deep); transform:translateY(-1px); } .btn--purple{ background:var(--accent); color:#fff; } .btn--purple:hover{ background:var(--purple-soft); transform:translateY(-1px); } /* Ghost-Button: hell-tauglich (Standard auf creme/weißen Flächen) */ .btn--ghost{ border-color:var(--rule,rgba(60,0,95,0.18)); color:var(--ink); background:transparent; } .btn--ghost:hover{ background:rgba(60,0,95,0.05); border-color:rgba(60,0,95,0.3); } /* Auf dunklen Flächen (dunkler Hero/CTA) weiß-transparent */ .on-dark .btn--ghost,.hero .btn--ghost,.section--dark .btn--ghost,.wp-panel--dark .btn--ghost{ border-color:rgba(255,255,255,0.4); color:#fff; background:rgba(255,255,255,0.12); backdrop-filter:blur(8px); } .on-dark .btn--ghost:hover,.hero .btn--ghost:hover,.section--dark .btn--ghost:hover,.wp-panel--dark .btn--ghost:hover{ background:rgba(255,255,255,0.2); } .btn .arrow::after,.arr::after{ content:"→"; } .link{ text-decoration:none; color:var(--accent); font-size:14px; font-weight:500; transition:opacity .15s ease; } .link:hover{ opacity:.7; } .link::after{ content:" ›"; } .link--red{ color:var(--red); } .link--soft{ color:var(--ink-soft); } /* ============================================================ EYEBROW / TAGS / CHIPS ============================================================ */ .tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill); background:rgba(60,0,95,0.08); color:var(--purple); font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; } .tag--red{ background:rgba(230,0,45,0.10); color:var(--red); } .chip{ padding:6px 14px; border-radius:var(--r-pill); background:var(--panel); color:var(--accent); font-size:13px; font-weight:500; } .chip--ghost{ padding:5px 12px; background:rgba(255,255,255,0.08); color:#fff; font-size:11.5px; } .chip--city{ padding:5px 12px; background:#f0edf3; color:var(--purple); font-size:11.5px; font-weight:500; } /* Pills-Filter */ .pills{ display:inline-flex; gap:6px; padding:6px; background:var(--cream); border-radius:var(--r-pill); flex-wrap:wrap; } .pills--bordered{ background:#fff; border:1px solid var(--line); } .pill{ appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; font-family:var(--sans); line-height:1.5; padding:7px 16px; border-radius:var(--r-pill); color:var(--ink); font-size:13px; font-weight:500; } .pill--active{ background:var(--ink); color:#fff; } .pill--active-accent{ background:var(--accent); color:#fff; } /* ============================================================ FOTO-PLATZHALTER (.ph — bis echte Bilder vorliegen) ============================================================ */ .ph{ background:repeating-linear-gradient(135deg,rgba(60,0,95,0.06) 0 2px,transparent 2px 14px),linear-gradient(135deg,rgba(60,0,95,0.16),rgba(230,0,45,0.10)); background-color:#ece6f1; } .ph.dark{ background:repeating-linear-gradient(135deg,rgba(255,255,255,0.06) 0 2px,transparent 2px 14px),linear-gradient(135deg,rgba(230,0,45,0.30),rgba(60,0,95,0.55)); background-color:#1a0030; } .ph.cover{ position:absolute; inset:0; width:100%; height:100%; } /* Echte Bilder: object-fit-cover als Fläche / Hintergrund */ .img-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .media{ width:100%; height:100%; object-fit:cover; display:block; } /* ============================================================ MOTION ============================================================ */ @keyframes kenburns{ 0%{transform:scale(1) translate(0,0);} 100%{transform:scale(1.12) translate(-1.5%,-1.5%);} } .kenburns{ animation:kenburns 18s ease-out infinite alternate; } @keyframes pulsering{ 0%{box-shadow:0 0 0 0 rgba(230,0,45,0.45);} 70%{box-shadow:0 0 0 16px rgba(230,0,45,0);} 100%{box-shadow:0 0 0 0 rgba(230,0,45,0);} } .playring{ animation:pulsering 2.4s ease-out infinite; } .lift{ transition:transform .2s ease, box-shadow .2s ease; } .lift:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(60,0,95,0.10); } /* ============================================================ NAV (Haupt-Website) ============================================================ */ .sticky{ position:sticky; top:0; z-index:40; } .utility{ background:var(--ink); color:rgba(255,255,255,0.8); font-size:12.5px; padding:7px 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; } .utility__group{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; } .utility b{ color:#fff; } .utility .gold{ color:var(--gold); } .utility__link{ display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; transition:color .15s ease; } .utility__link:hover{ color:#fff; } .utility__link .icon{ flex:none; } .nav{ background:rgba(251,251,253,0.92); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line); height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; } .nav__logo{ height:24px; } .nav__links{ display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:400; align-items:center; height:62px; } .nav__links > li{ color:var(--ink); cursor:pointer; } .nav__actions{ display:flex; align-items:center; gap:16px; } /* Dropdown-Trigger (Lösungen / Services / Insights / Über uns) */ .has-drop{ height:100%; display:flex; align-items:center; position:static; } .nav-trigger{ display:flex; align-items:center; gap:6px; height:62px; margin:0; padding:0; background:none; border:0; border-top:2px solid transparent; border-bottom:2px solid transparent; cursor:pointer; font-family:var(--sans); font-size:14.5px; font-weight:400; color:var(--ink); } .nav-trigger .caret{ display:none; } .has-drop:hover > .nav-trigger, .has-drop.open > .nav-trigger{ color:var(--purple); border-bottom-color:var(--red); font-weight:400; } .has-drop:hover > .nav-trigger .caret, .has-drop.open > .nav-trigger .caret{ transform:rotate(180deg); } /* Dropdown-Sheet (volle Breite, alle Links sofort sichtbar — kein zweites Hover-Level) */ .mega{ position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 40px 80px rgba(60,0,95,0.12); padding:36px 40px 28px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; transition-delay:140ms; z-index:50; } .has-drop:hover > .mega, .has-drop.open > .mega{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; } .mega > .wrap{ max-width:var(--maxw); margin:0 auto; } .mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 44px; } .mega-colgroup + .mega-colgroup{ margin-top:22px; } .mega-col__title{ margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid rgba(60,0,95,0.09); font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--purple-deep); } .mega-col__title--flat{ margin:0; padding:0; border:0; } .mega-badge{ display:inline-block; margin-left:6px; padding:2px 9px; border-radius:var(--r-pill); font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; vertical-align:middle; } .mega-badge--red{ background:rgba(230,0,45,0.12); color:var(--red); } .mega-badge--purple{ background:rgba(60,0,95,0.10); color:var(--purple); } .mega-link{ display:block; padding:9px 10px; border-radius:11px; text-decoration:none; color:var(--ink); margin-bottom:1px; transition:background .15s ease; } .mega-link:hover{ background:rgba(60,0,95,0.07); } .mega-link b{ font-size:15px; font-weight:600; display:block; line-height:1.25; } .mega-link span{ font-size:12px; color:var(--ink-soft); } /* Lösungen — KI-Leiste (abgesetzter Hintergrund) */ .mega__ki{ margin-top:24px; padding:18px 22px; background:var(--panel); border-radius:16px; } .mega__ki-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; } .mega__ki-cards{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:12px; align-items:stretch; } .ki-card{ display:block; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); transition:box-shadow .2s ease, transform .2s ease; } .ki-card:hover{ box-shadow:0 12px 30px rgba(60,0,95,0.10); transform:translateY(-2px); } .ki-card b{ display:block; font-size:14.5px; font-weight:600; } .ki-card span{ font-size:12px; color:var(--ink-soft); } .mega__ki-cards .btn{ align-self:center; white-space:nowrap; } /* Lösungen — Wissen-&-Tools-Leiste (Soft-Panel) */ .mega__bar{ margin-top:20px; padding:16px 20px; background:var(--panel); border-radius:16px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .mega__bar-label{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--red); margin-right:6px; } /* .nav__links-Präfix: schlägt .nav__links > li a (color:inherit) */ .nav__links .mega__bar a{ display:inline-flex; align-items:baseline; gap:6px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:600; padding:8px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:0 1px 2px rgba(60,0,95,0.04); transition:border-color .15s ease, color .15s ease; } .nav__links .mega__bar a:hover{ border-color:var(--purple); color:var(--purple); } .mega__bar a span{ color:var(--ink-soft); font-size:11.5px; font-weight:400; } .mega__bar .sep{ display:none; } /* Services-Dropdown (2 Spalten + CTA) */ .mega__services{ display:grid; grid-template-columns:1fr 1fr 1fr 0.9fr; gap:32px; align-items:start; } .mega__cta{ background:var(--purple-deep); color:var(--cream); border-radius:16px; padding:24px; } .mega__cta-eyebrow{ display:block; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:rgba(246,242,236,0.65); margin-bottom:10px; } .mega__cta h3{ font-size:22px; font-weight:700; letter-spacing:-0.02em; margin:0 0 10px; color:#fff; } .mega__cta p{ font-size:13px; color:rgba(255,255,255,0.78); margin:0 0 18px; } /* Insights-Dropdown (Links + Featured Card) */ .mega__insights{ display:grid; grid-template-columns:1fr 0.8fr 1.3fr; gap:40px; align-items:start; } .mega-feature{ display:grid; grid-template-columns:128px 1fr; gap:16px; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:box-shadow .2s ease; } .mega-feature:hover{ box-shadow:0 16px 40px rgba(60,0,95,0.12); } .mega-feature__media{ aspect-ratio:1/1; } .mega-feature__media img{ width:100%; height:100%; object-fit:cover; } .mega-feature__body{ padding:16px 18px 16px 0; display:flex; flex-direction:column; gap:6px; } .mega-feature__eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--purple); } .mega-feature__body b{ font-size:15.5px; font-weight:600; line-height:1.3; } .mega-feature__date{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:auto; } .mega-feature__more{ font-size:13px; font-weight:600; color:var(--red); margin-top:6px; } /* Über-uns-Dropdown (2 Spalten + Kennzahlen) */ .mega__about{ display:grid; grid-template-columns:1fr 1fr 0.9fr; gap:40px; align-items:start; } .mega__stats{ display:flex; flex-direction:column; gap:16px; padding-left:32px; border-left:1px solid var(--line); } .mega__stat b{ display:block; font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--purple); line-height:1; } .mega__stat span{ font-size:12px; color:var(--ink-soft); } .burger{ display:none; font-size:30px; line-height:1; width:44px; height:44px; align-items:center; justify-content:center; margin-right:-10px; cursor:pointer; color:var(--ink); background:none; border:0; padding:0; } /* Mobiler Übersichts-Link im Akkordeon — auf Desktop ausgeblendet (Hover-Mega + Klick-Navigation) */ .mega__overview{ display:none; } /* ============================================================ HERO (fullbleed) ============================================================ */ .hero{ position:relative; height:92vh; min-height:780px; background:#0a0410; overflow:hidden; color:#fff; } .hero--sister{ height:90vh; min-height:760px; background:#1a0030; } .hero--half{ height:56vh; min-height:460px; } .hero--third{ height:38vh; min-height:320px; } .hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,4,16,0.4) 0%,rgba(10,4,16,0) 30%,rgba(10,4,16,0) 50%,rgba(10,4,16,0.85) 100%); } .hero--sister .hero__scrim{ background:linear-gradient(180deg,rgba(26,0,48,0.55) 0%,rgba(26,0,48,0.1) 30%,rgba(26,0,48,0.2) 55%,rgba(26,0,48,0.9) 100%); } .hero__glow{ position:absolute; top:-10%; right:-5%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(230,0,45,0.35),transparent 70%); filter:blur(20px); } .hero__content{ position:absolute; left:5%; bottom:9%; max-width:760px; } .hero__kicker{ font-size:21px; font-weight:500; color:#fff; margin:0 0 18px; letter-spacing:-0.01em; } .hero__kicker--mono{ font-size:14px; font-weight:600; color:var(--red); letter-spacing:0.04em; text-transform:uppercase; } .hero__title{ font-size:clamp(40px,8vw,84px); font-weight:600; line-height:1.02; letter-spacing:-0.03em; margin:0 0 14px; } .hero__title--gradient{ background:linear-gradient(180deg,#fff 0%,#c8b8d6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero__accent{ -webkit-text-fill-color:var(--red); color:var(--red); } /* Tieferes Overlay für Bild-Heros (hero-image): links + unten fast deckend, damit weißer Text auf beliebigen Motiven lesbar bleibt. */ .hero__scrim--deep{ background: linear-gradient(90deg, rgba(10,4,16,0.88) 0%, rgba(10,4,16,0.55) 42%, rgba(10,4,16,0.12) 78%, rgba(10,4,16,0) 100%), linear-gradient(180deg, rgba(10,4,16,0.45) 0%, rgba(10,4,16,0.1) 30%, rgba(10,4,16,0.55) 72%, rgba(10,4,16,0.9) 100%); } /* Leichter LILA-Verlauf für HELLE Illustrations-Heros (Creme-Hintergrund): nur so viel Abdunklung links/unten (in Brand-Lila statt Schwarz), dass der weiße Titel lesbar bleibt — die Skyline rechts bleibt hell. Kein schwerer Schwarz-Schleier. */ .hero__scrim--light{ background: linear-gradient(90deg, rgba(37,0,59,0.84) 0%, rgba(37,0,59,0.62) 32%, rgba(37,0,59,0.28) 58%, rgba(37,0,59,0.10) 78%, rgba(37,0,59,0) 100%), linear-gradient(180deg, rgba(37,0,59,0.16) 0%, rgba(37,0,59,0) 50%, rgba(37,0,59,0.20) 80%, rgba(37,0,59,0.44) 100%); } .hero__sub{ font-size:clamp(18px,2.2vw,24px); font-weight:400; color:rgba(255,255,255,0.86); margin:0; max-width:600px; line-height:1.25; letter-spacing:-0.01em; } .hero__trust{ display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:20px 0 0; } .hero__trust li{ font-size:14px; font-weight:500; color:rgba(255,255,255,0.88); display:flex; align-items:center; gap:7px; } .hero__actions{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; } .showreel{ position:absolute; top:8%; right:4%; display:flex; align-items:center; gap:12px; padding:8px 18px 8px 8px; appearance:none; -webkit-appearance:none; font-family:var(--sans); line-height:1; background:rgba(255,255,255,0.12); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:var(--r-pill); border:1px solid rgba(255,255,255,0.18); cursor:pointer; color:#fff; font-size:14px; font-weight:500; } .showreel__play{ width:34px; height:34px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:13px; } .price-pill{ position:absolute; right:4%; bottom:9%; display:flex; align-items:center; gap:6px; padding:6px 6px 6px 22px; background:rgba(40,28,56,0.75); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-radius:var(--r-pill); border:1px solid rgba(255,255,255,0.08); color:#fff; font-size:15px; } .price-pill a{ padding:10px 24px; background:var(--red); color:#fff; border-radius:var(--r-pill); text-decoration:none; font-weight:500; } /* ============================================================ TRUST-BAR ============================================================ */ .trust{ padding:28px 22px; background:#fff; border-bottom:1px solid rgba(60,0,95,0.06); } .trust__inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; } .trust__points{ display:flex; gap:28px; flex-wrap:wrap; font-size:14.5px; color:var(--ink-soft); } .trust__logos{ display:flex; gap:30px; align-items:center; font-weight:700; font-size:18px; color:rgba(37,0,59,0.6); letter-spacing:-0.01em; } .stars{ color:var(--gold); letter-spacing:1px; } /* ============================================================ BENTO / TILES ============================================================ */ /* Gleiches 3er-Raster wie .grid--3 darunter (zwei 14px-Fugen), damit die rechte Spalte exakt mit der dritten Kachel der Folgereihe fluchtet. */ .bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .bento > .tile--big{ grid-column:span 2; } .bento__col{ display:grid; grid-template-rows:1fr 1fr; gap:14px; } .tile{ position:relative; overflow:hidden; border-radius:var(--r-card); padding:36px; background:#fff; border:1px solid rgba(0,0,0,0.06); min-height:280px; } .tile--big{ padding:56px 48px; min-height:580px; } .tile--md{ min-height:280px; } .tile--dark{ background:#2A0040; color:#fff; border:none; } .tile--purple-grad{ background:linear-gradient(135deg,#3C005F 0%,#25003B 100%); color:#fff; border:none; } .tile--red-grad{ background:linear-gradient(135deg,#E6002D 0%,#B80024 100%); color:#fff; border:none; } .tile--cream{ background:var(--cream); border:none; } .tile__rel{ position:relative; } .tile__eyebrow{ font-size:13px; font-weight:600; margin:0; letter-spacing:0.06em; text-transform:uppercase; } .tile__title{ font-weight:600; line-height:1.05; letter-spacing:-0.02em; margin:8px 0 14px; font-size:32px; } .tile__title--xl{ font-size:48px; max-width:560px; } .tile__title--lg{ font-size:44px; } .tile__text{ font-size:15px; margin:0; } .tile__link{ position:absolute; bottom:32px; left:36px; text-decoration:none; font-size:15px; } .tile__links{ display:flex; gap:20px; margin-top:28px; font-size:17px; } .tile__links a{ text-decoration:none; } .on-dark, .on-dark .tile__text{ color:rgba(255,255,255,0.85); } .t-pink{ color:var(--pink); } .t-purple{ color:var(--purple); } .t-red{ color:var(--red); } /* Uptime-Visual */ .uptime{ display:flex; gap:10px; align-items:flex-end; margin-top:28px; } .uptime__bar{ width:28px; border-radius:8px; background:linear-gradient(180deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); } .uptime__num{ font-size:38px; font-weight:600; letter-spacing:-0.025em; line-height:1; } .uptime__cap{ font-size:13px; color:rgba(255,255,255,0.6); margin-top:4px; } /* Bildzone in Kacheln: Foto in eigener Zone bei voller Deckkraft, Verlaufs-Naht zum Text — Text und Bild überlappen nie (UniFi-Prinzip wie beim Expand-Grid). */ .tile__media{ position:absolute; top:0; right:0; bottom:0; width:60%; } .tile__media img{ width:100%; height:100%; object-fit:cover; display:block; } .tile__media::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:120px; z-index:1; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%); } .tile--dark .tile__media::before{ background:linear-gradient(90deg,#2A0040 0%,rgba(42,0,64,0) 100%); } .tile__media--narrow{ width:58%; } .tile--cream .tile__media::before{ background:linear-gradient(90deg,var(--cream) 0%,rgba(245,245,247,0) 100%); } /* Textzone neben der seitlichen Bildzone */ .tile--big .tile__rel{ max-width:40%; } .tile__rel--narrow{ max-width:38%; } /* Link im Textfluss (statt absolut), wenn eine Bildzone den unteren Rand belegt */ .tile__link--inline{ position:static; display:inline-block; margin-top:16px; } /* ============================================================ DISZIPLINEN (dunkle Karten) ============================================================ */ .disc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .disc{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:34px 32px; display:flex; flex-direction:column; min-height:280px; } .disc__head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; } .disc__icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(60,0,95,0.55); color:var(--cream); } .disc__icon--red{ background:rgba(230,0,45,0.22); color:#fff; } .disc__num{ font-size:13px; font-weight:700; color:rgba(255,255,255,0.4); } .disc h3{ font-size:26px; font-weight:700; letter-spacing:-0.02em; color:#fff; margin:0 0 10px; } .disc p{ font-size:15px; color:rgba(255,255,255,0.68); line-height:1.5; margin:0 0 24px; } .disc__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; } /* ============================================================ STATS ============================================================ */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1100px; margin:0 auto; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); } .stat{ padding:48px 24px; border-right:1px solid var(--line-2); text-align:center; } .stat:last-child{ border-right:none; } .stat__num{ font-size:clamp(48px,8vw,88px); font-weight:600; letter-spacing:-0.04em; line-height:1; color:var(--ink); } .stat__label{ font-size:15px; color:var(--ink-soft); margin-top:14px; } /* Auszeichnungs-Siegel (Siegel-Reihe, z.B. Trust-Band unter Hero) */ .awards{ display:flex; justify-content:center; align-items:center; gap:40px; flex-wrap:wrap; margin-top:40px; } .awards__seal{ height:140px; width:auto; display:block; } /* Mehr Luft, wenn die Reihe im Trust-Band direkt unter dem Hero sitzt */ .trust{ padding-bottom:56px; } .trust .awards{ margin-top:56px; } @media (max-width:560px){ .awards{ gap:24px; } .awards__seal{ height:104px; } .trust .awards{ margin-top:40px; } } /* Spec-Band (Schwester-Seiten, kleiner, Akzentfarbe) */ .spec{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:1px solid var(--line-3); border-bottom:1px solid var(--line-3); } .spec__item{ padding:38px 22px; border-right:1px solid var(--line-3); text-align:center; } .spec__item:last-child{ border-right:none; } .spec__num{ font-size:52px; font-weight:700; letter-spacing:-0.03em; line-height:1; color:var(--accent); } .spec__label{ font-size:13.5px; color:var(--ink-soft); margin-top:10px; } /* ============================================================ KARTEN (Cases / Posts / Use-Cases) ============================================================ */ .card{ background:#fff; border-radius:var(--r-card); overflow:hidden; border:1px solid rgba(0,0,0,0.06); } /* Ganze Karte als Link (verbindlich, s. CLAUDE.md): braucht kein Inline-Style. */ a.card{ text-decoration:none; color:inherit; } .card--soft{ background:var(--paper); } .card--panel{ background:var(--panel); border:none; } .card__media{ position:relative; aspect-ratio:4/3; } .card__media--wide{ aspect-ratio:16/10; } /* Iso-Illustrations-Medien: weisse Buehne, Illustration zentriert (statt Foto-Cover) */ .card__media--illu{ display:flex; align-items:center; justify-content:center; background:#fff; padding:28px 24px; } .card__media--illu .iso{ width:100%; max-width:210px; height:auto; overflow:visible; display:block; } /* Gezeichnete Spot-Illustration (freigestelltes PNG) auf derselben weissen Buehne */ .card__media--illu picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; } .card__illu-img{ width:100%; height:100%; max-width:300px; object-fit:contain; display:block; } .card__illu-ring{ position:absolute; top:18px; right:18px; width:22px; height:22px; border-radius:50%; border:2px dotted var(--purple-soft); opacity:.5; } /* Checklisten-Karten: Illustration rechts neben Text, kein Hintergrund */ .card--ill-right .card__ill{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:110px; padding:12px 16px 12px 0; } .card--ill-right .card__ill img{ max-height:88px; width:auto; object-fit:contain; display:block; } .feed-grid > .card.card--ill-right{ flex-direction:row; align-items:center; height:auto; } .card--ill-right .card__body{ flex:1; min-width:0; } .card__badge{ position:absolute; bottom:16px; left:16px; padding:5px 12px; border-radius:var(--r-pill); background:rgba(40,4,64,0.7); color:#fff; font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; } .card__badge--accent{ background:rgba(60,0,95,0.85); } .card__badge--light{ background:rgba(255,255,255,0.95); color:var(--ink); } /* Referenz-Kennzahl als Pill im Bild (der „Gewinn" der Referenz): weisses Pill, rote Schrift — sonst exakt wie das Kategorie-Badge (Mono, Versalien, gleiche Größe/Tracking, erbt aus .card__badge). */ .card__badge--stat{ background:rgba(255,255,255,0.95); color:var(--red); } /* Badge-Reihe am unteren Bildrand: Kategorie/Ort links, Kennzahl rechts — solange beide nebeneinander passen. Passt es nicht, bricht es per wrap-reverse um; die Kategorie (DOM-erste) landet dann auf der unteren Zeile, die Kennzahl darüber. */ .card__tags{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; flex-wrap:wrap-reverse; justify-content:space-between; gap:8px; } .card__tags .card__badge{ position:static; max-width:100%; } .card__loc{ position:absolute; bottom:16px; right:16px; display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,0.90); color:var(--ink); font-family:var(--ff); font-size:12px; font-weight:500; } .card__body{ padding:24px 26px 28px; } .card__foot{ display:flex; justify-content:space-between; align-items:center; padding-top:16px; margin-top:18px; border-top:1px solid var(--line-2); } .card__stat{ font-size:18px; font-weight:600; color:var(--red); letter-spacing:-0.02em; } /* content-feed („Mehr zum Thema") — alle Kacheln exakt gleich groß: einheitliches Bild-Seitenverhältnis, gleich hohe Reihen, Karte füllt die Zelle. */ .feed-grid{ grid-auto-rows:1fr; } .feed-grid > .card{ display:flex; flex-direction:column; height:100%; } .feed-grid .card__media, .feed-grid .card__media--wide{ aspect-ratio:16/10; } .feed-grid .card__body{ display:flex; flex-direction:column; flex:1 1 auto; } .feed-grid .card__foot{ margin-top:auto; } /* Insights-Übersicht: Referenz- und Artikel-Kacheln exakt gleich hoch (gleiche Logik wie .feed-grid). Referenzen nutzen sonst ein höheres 4/3-Bild + Foot und ragen damit über die 16/10-Artikel-Kacheln hinaus — hier vereinheitlicht: gleiches Bildverhältnis, gleich hohe Reihen, Karte füllt die Zelle, Foot unten. */ #insights-grid{ grid-auto-rows:1fr; } #insights-grid > .card{ display:flex; flex-direction:column; height:100%; } #insights-grid .card__media, #insights-grid .card__media--wide{ aspect-ratio:16/10; } #insights-grid .card__body{ display:flex; flex-direction:column; flex:1 1 auto; } #insights-grid .card__foot{ margin-top:auto; } /* ============================================================ PREIS-PAKETE ============================================================ */ .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1200px; margin:0 auto; } .plan{ background:var(--paper); color:var(--ink); border-radius:var(--r-card); padding:40px 32px; border:1px solid var(--line-2); position:relative; } .plan--featured{ background:#2A0040; color:#fff; border:none; } .plan__badge{ position:absolute; top:24px; right:24px; font-size:11px; font-weight:600; color:var(--pink); text-transform:uppercase; letter-spacing:0.08em; } .plan__name{ font-size:14px; font-weight:600; letter-spacing:-0.01em; } .plan__price{ font-size:64px; font-weight:600; letter-spacing:-0.03em; margin-top:12px; line-height:1; } .plan__per{ font-size:13px; color:var(--ink-soft); margin-top:6px; } .plan--featured .plan__per{ color:rgba(255,255,255,0.6); } .plan__list{ list-style:none; padding:0; margin:32px 0 0; display:grid; gap:12px; font-size:15px; } .plan__list li{ display:flex; gap:10px; } .plan__list li::before{ content:"✓"; color:var(--purple); } .plan--featured .plan__list li::before{ color:var(--red); } .plan{ display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; } .plan:hover{ box-shadow:0 16px 48px rgba(60,0,95,0.12); transform:translateY(-2px); } .plan__name strong{ font-weight:700; } .plan__note{ font-size:13px; color:var(--ink-soft); margin-top:10px; } .plan--featured .plan__note{ color:rgba(255,255,255,0.6); } .plan__list{ flex:1 0 auto; align-content:start; } .plan__cta{ margin-top:32px; } /* — Pricing: Kalkulator-Karte — */ .pricing-calc{ max-width:1200px; margin:14px auto 0; background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-card); padding:32px 28px; } .pricing-calc__inner{ max-width:640px; margin:0 auto; display:grid; gap:16px; } .pricing-calc__title{ font-size:clamp(19px,2.2vw,23px); font-weight:600; letter-spacing:-0.02em; margin:0 0 6px; } .pricing-calc__row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; padding:12px 0; border-bottom:1px solid var(--line-2); } .pricing-calc__row:last-child{ border-bottom:none; } .pricing-calc__plan{ font-size:15px; } .pricing-calc__plan strong{ font-weight:700; } .pricing-calc__result{ font-size:17px; font-weight:600; } .pricing-calc__note{ font-size:13px; color:var(--ink-soft); margin:0; } /* — Pricing: implec-Shield-Band (Premium-Security, dunkel) — */ .plan-shield{ max-width:1200px; margin:14px auto 0; background:var(--purple-deep); color:#fff; border-radius:var(--r-card); padding:56px 48px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .plan-shield .plan__per{ color:rgba(255,255,255,0.6); } .plan-shield__sub{ font-size:17px; color:rgba(255,255,255,0.75); margin:12px 0 24px; } .plan-shield__list{ grid-template-columns:1fr 1fr; column-gap:32px; flex:none; } .plan-shield .plan__list li::before{ color:var(--red); } .plan-shield .btn--ghost{ border-color:rgba(255,255,255,0.45); color:#fff; } .plan-shield .btn--ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.7); } @media (max-width:760px){ .plan-shield{ grid-template-columns:1fr; padding:40px 24px; } .plan-shield__list{ grid-template-columns:1fr; } } /* ============================================================ STANDORTE / GEO ============================================================ */ .geo-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; } .map{ border-radius:var(--r-card); overflow:hidden; position:relative; aspect-ratio:4/3; border:1px solid rgba(0,0,0,0.06); min-height:300px; } .map__label{ position:absolute; top:18px; left:20px; font-size:11px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); } .map__pin{ position:absolute; left:30%; top:62%; display:flex; align-items:center; gap:10px; } .map__pin .dot{ width:16px; height:16px; border-radius:50%; background:var(--red); box-shadow:0 0 0 8px rgba(230,0,45,0.12); } /* SVG-Karte: implec-Standorte Deutschland + Niederrhein-Inset (self-hosted, kein externer Karten-Dienst -> DSGVO-konform) */ .map--geo{ background:#fff; } .map--geo .map__label{ z-index:2; } .geo-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .geo-de{ fill:url(#geoGlow); stroke:rgba(60,0,95,0.35); stroke-width:1.5; stroke-linejoin:round; } .geo-link{ fill:none; stroke:rgba(230,0,45,0.45); stroke-width:1.2; stroke-dasharray:3 4; } .geo-lens{ fill:none; stroke:rgba(60,0,95,0.16); stroke-width:1; stroke-dasharray:2 4; } .geo-inset{ fill:#faf8fc; stroke:rgba(60,0,95,0.18); } .geo-ititle{ fill:var(--ink-soft); font-family:var(--mono); font-size:9px; letter-spacing:0.06em; } .geo-ispoke{ fill:none; stroke:rgba(60,0,95,0.20); stroke-width:0.8; stroke-dasharray:1 4; } .geo-idot{ fill:var(--purple); stroke:#fff; stroke-width:1; } .geo-ilabel{ fill:var(--ink-soft); font-family:var(--mono); font-size:6.5px; } .geo-icore{ fill:var(--red); stroke:#fff; stroke-width:1.5; } .geo-pin2{ fill:var(--red-deep); stroke:#fff; stroke-width:2; } .geo-sub{ fill:var(--ink-soft); font-family:var(--mono); font-size:9px; letter-spacing:0.05em; } .geo-label--main{ fill:var(--red); font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:-0.01em; } .geo-label--main2{ fill:var(--red-deep); font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:-0.01em; } .geo-pin__halo{ fill:none; stroke:rgba(230,0,45,0.30); stroke-width:1.5; } .geo-pin__pulse{ fill:rgba(230,0,45,0.22); } .geo-pin__core{ fill:var(--red); stroke:#fff; stroke-width:2; } @media (prefers-reduced-motion:no-preference){ .geo-pin__pulse{ transform-box:fill-box; transform-origin:center; animation:geo-pulse 2.6s ease-out infinite; } } @keyframes geo-pulse{ 0%{ transform:scale(.5); opacity:.55; } 70%{ transform:scale(2.4); opacity:0; } 100%{ transform:scale(2.4); opacity:0; } } .loc-stack{ display:grid; gap:14px; } .loc-card{ background:#fff; border-radius:20px; padding:24px 26px; border:1px solid rgba(0,0,0,0.06); } .loc-card__head{ display:flex; justify-content:space-between; align-items:baseline; } .loc-card h3{ font-size:24px; font-weight:600; letter-spacing:-0.02em; margin:8px 0; } .loc-card p{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.5; } /* ============================================================ ZITAT (großes Testimonial) ============================================================ */ .quote{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; border-radius:28px; overflow:hidden; background:var(--paper); border:1px solid rgba(0,0,0,0.06); } .quote__media{ min-height:480px; position:relative; } .quote__body{ padding:56px 48px; display:flex; flex-direction:column; justify-content:center; } .quote__text{ font-size:28px; font-weight:500; line-height:1.3; letter-spacing:-0.02em; color:var(--ink); margin:0; } .avatar{ width:44px; height:44px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--red)); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:600; } .who{ display:flex; gap:12px; align-items:center; margin-top:28px; } .who b{ font-size:16px; font-weight:600; color:var(--ink); display:block; } .who span{ font-size:13px; color:var(--ink-soft); } .metrics{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line-2); } .metrics .m-num{ font-size:40px; font-weight:600; letter-spacing:-0.03em; color:var(--ink); line-height:1; } .metrics .m-cap{ font-size:13px; color:var(--ink-soft); margin-top:6px; } /* ============================================================ VERGLEICHSTABELLE ============================================================ */ .compare{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line-3); background:#fff; } .compare__row{ display:grid; grid-template-columns:1fr 1fr 1.1fr; font-size:15px; } .compare__row--head{ background:#2A0040; color:#fff; } .compare__row:nth-child(even){ background:var(--paper); } .compare__cell{ padding:16px 24px; } .compare__cell--head{ font-weight:600; font-size:14px; } .compare__cell--key{ font-weight:600; color:var(--ink); } .compare__cell--other{ color:var(--ink-soft); } .compare__cell--win{ color:var(--ink); background:rgba(60,0,95,0.03); display:flex; gap:8px; } .compare__cell--win::before{ content:"✓"; color:var(--red); font-weight:700; } .compare__cell--implec{ background:var(--purple); display:flex; align-items:center; gap:8px; } /* implec-Spalte als erhöhte, gerahmte Karte mit CTA-Abschluss (nur im .compare-block) */ .compare-block{ position:relative; padding-top:16px; --implec-col:calc(1.15 / 3.15 * 100%); } .compare-block .compare{ position:relative; z-index:1; border:none; background:transparent; } .compare-block .compare__row{ grid-template-columns:1fr 1fr 1.15fr; } .compare-block .compare__row:nth-child(even){ background:transparent; } .compare-block .compare__row:nth-child(even) .compare__cell--key, .compare-block .compare__row:nth-child(even) .compare__cell--other{ background:var(--paper); } .compare-block .compare__cell--head{ display:flex; align-items:center; } .compare-block .compare__cell--win{ background:transparent; gap:10px; align-items:flex-start; } .compare-block .compare__cell--win::before{ flex:0 0 auto; width:20px; height:20px; border-radius:999px; background:var(--red); color:#fff; font-size:12px; line-height:1; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; } .compare__spotlight{ position:absolute; top:0; bottom:0; right:0; width:var(--implec-col); border:2px solid var(--purple); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(60,0,95,0.18); z-index:0; pointer-events:none; } .compare__badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:11px; font-weight:600; padding:4px 14px; border-radius:var(--r-pill); white-space:nowrap; box-shadow:0 4px 12px rgba(230,0,45,0.30); } .compare__cta{ position:relative; z-index:2; width:var(--implec-col); margin-left:auto; padding:18px 24px 22px; } .compare__cta .btn{ width:100%; justify-content:center; } /* ============================================================ BEWERTUNGEN (Masonry) ============================================================ */ .reviews{ columns:3 320px; column-gap:16px; } .review{ break-inside:avoid; margin-bottom:16px; background:var(--paper); border-radius:18px; padding:26px 28px; border:1px solid rgba(60,0,95,0.07); } .review__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .review__stars{ color:var(--gold); font-size:15px; } .review p{ font-size:15.5px; line-height:1.55; color:var(--ink); margin:0 0 18px; } .review__who{ display:flex; align-items:center; gap:11px; } .review__ava{ width:38px; height:38px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; } .review__who b{ font-size:15px; font-weight:600; color:var(--ink); } /* ============================================================ FAQ ============================================================ */ .faq-cat{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--accent-cta); letter-spacing:0.16em; margin:44px 0 8px; text-transform:uppercase; } .faq-cat:first-of-type{ margin-top:32px; } details.faq{ border-top:1px solid var(--line-3); } details.faq > summary{ list-style:none; padding:18px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:18px; font-weight:600; color:var(--ink); } details.faq > summary::-webkit-details-marker{ display:none; } .faq-plus{ color:var(--red); font-size:22px; flex-shrink:0; transition:transform .2s ease; } details.faq[open] .faq-plus{ transform:rotate(45deg); } details.faq p{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px; max-width:780px; } /* ============================================================ KONTAKT (Formular + Kontaktwege) ============================================================ */ .form{ background:#fff; border-radius:var(--r-card); padding:36px; border:1px solid var(--line); } .form label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; } .input{ width:100%; padding:13px 14px; border-radius:12px; border:1px solid rgba(60,0,95,0.15); font-size:15px; font-family:inherit; background:var(--paper); } .field{ margin-bottom:16px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .form__hint{ font-size:12px; color:var(--ink-faint); margin:14px 0 0; text-align:center; } .form__success{ text-align:center; padding:40px 10px; } .form__check{ width:64px; height:64px; border-radius:50%; background:rgba(230,0,45,0.1); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 18px; } .ways{ display:grid; gap:16px; } .way{ display:flex; gap:18px; align-items:center; background:#fff; color:var(--ink); border-radius:18px; padding:24px 26px; border:1px solid var(--line); text-decoration:none; } a.way{ transition:box-shadow 0.2s ease, transform 0.2s ease; } a.way:hover{ box-shadow:0 16px 48px rgba(60,0,95,0.12); transform:translateY(-2px); } .way--hot{ background:#2A0040; color:#fff; border:none; } .way__icon{ width:48px; height:48px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(60,0,95,0.08); color:var(--purple); } .way--hot .way__icon{ background:rgba(255,255,255,0.12); color:#fff; } .way__body{ flex:1; } .way__body h3{ font-size:19px; font-weight:700; letter-spacing:-0.015em; margin:0 0 4px; } .way__body p{ font-size:13.5px; margin:0; line-height:1.4; color:var(--ink-soft); } .way--hot .way__body p{ color:rgba(255,255,255,0.7); } .way__cta{ padding:10px 18px; background:var(--panel); color:var(--purple); border-radius:var(--r-pill); font-size:13.5px; font-weight:600; white-space:nowrap; text-decoration:none; } .way--hot .way__cta{ background:var(--red); color:#fff; } .contact-person{ display:flex; align-items:center; gap:16px; background:#fff; border-radius:18px; padding:20px 24px; border:1px solid var(--line); } .contact-person__img{ width:80px; height:80px; border-radius:50%; object-fit:cover; flex-shrink:0; } .contact-person strong{ font-size:16px; font-weight:600; letter-spacing:-0.01em; display:block; margin-bottom:2px; } /* ============================================================ GLOSSAR / WHITEPAPER ============================================================ */ .gloss-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line-2); text-decoration:none; color:var(--ink); transition:opacity .15s ease; } .gloss-row:hover{ opacity:.65; } .gloss-row b{ font-size:17px; font-weight:500; } .gloss-row span{ font-size:12px; color:var(--ink-soft); font-weight:500; } /* ============================================================ FOOTER (Haupt-Website, hell) ============================================================ */ .site-footer{ background:var(--cream); padding:24px 22px 44px; font-size:12px; color:var(--ink-soft); letter-spacing:-0.01em; } .site-footer__top{ margin:0 0 24px; border-bottom:1px solid var(--line-2); padding-bottom:18px; } .foot-cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:32px; padding-bottom:24px; border-bottom:1px solid var(--line-2); } .foot-cols h4{ margin:0 0 12px; font-size:12px; font-weight:600; color:var(--ink); } .foot-cols ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } .foot-cols a{ color:var(--ink-soft); text-decoration:none; } .foot-legal{ margin-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; } .foot-legal__links{ display:flex; gap:18px; flex-wrap:wrap; } .foot-legal a{ color:var(--ink-soft); text-decoration:none; } /* ============================================================ FOOTER (Schwester-Seiten, dunkel) ============================================================ */ .dfooter{ background:var(--purple-deep); color:#fff; padding:64px 26px 36px; } .dfooter__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.14); } .dfooter__brand{ font-size:24px; font-weight:700; letter-spacing:-0.03em; } .dfooter p{ font-size:15px; color:rgba(255,255,255,0.7); line-height:1.5; max-width:320px; margin-top:14px; } .dfooter h4{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin:0 0 14px; font-weight:600; } .dfooter ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:14px; } .dfooter ul a{ color:rgba(255,255,255,0.85); text-decoration:none; } .dfooter__by{ display:flex; align-items:center; gap:9px; margin-top:20px; font-size:13px; color:rgba(255,255,255,0.6); } .dfooter__partner{ margin-top:16px; } .dfooter__partner span{ padding:5px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,0.1); font-size:12px; } .dfooter__legal{ padding-top:24px; display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:12px; } .dfooter__legal a{ color:inherit; text-decoration:none; margin-left:0; } .dfooter__legal-links{ display:flex; gap:18px; } /* ============================================================ SCHWESTER-NAV ============================================================ */ .snav{ background:rgba(251,252,254,0.85); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line); padding:0 26px; height:56px; display:flex; align-items:center; justify-content:space-between; } .snav__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; } .snav__name{ font-size:21px; font-weight:700; letter-spacing:-0.03em; color:var(--purple-deep); } .snav__name span{ color:var(--accent); } .snav__by{ display:flex; align-items:center; gap:6px; border-left:1px solid rgba(60,0,95,0.15); padding-left:11px; font-size:12px; color:var(--ink-soft); } .snav__links{ display:flex; gap:30px; list-style:none; padding:0; margin:0; font-size:14px; font-weight:500; } .snav__links li{ color:var(--purple-deep); opacity:.8; } .snav__links li.active{ color:var(--accent); opacity:1; } .snav__links a{ color:inherit; text-decoration:none; } .snav__links li.active a{ border-bottom:2px solid var(--red); padding-bottom:3px; } .snav__actions{ display:flex; align-items:center; gap:14px; } /* Capability-Grid (Schwester) */ .caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .cap{ background:#fff; border-radius:var(--r-card-sm); padding:28px 26px; min-height:160px; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(60,0,95,0.05); } .cap__icon{ font-size:26px; } .cap h3{ font-size:20px; font-weight:600; color:var(--purple-deep); line-height:1.15; margin:auto 0 0; } .cap--wide{ grid-column:span 2; flex-direction:row; align-items:stretch; padding:0; overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr; } .cap--wide .cap__txt{ padding:28px 26px; } .cap--wide h3{ margin:0 0 10px; font-size:21px; } .cap--wide p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0; max-width:240px; } .cap--wide .cap__media{ position:relative; min-height:160px; } /* Bento (Schwester, 6-Spalten-Optik → 3) */ .sbento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .sbento__tile{ border-radius:20px; overflow:hidden; position:relative; min-height:300px; background:#fff; color:var(--purple-deep); border:1px solid var(--line); } .sbento__tile--dark{ background:#1a0030; color:#fff; border:none; } .sbento__tile--wide{ grid-column:span 2; } .sbento__tile .inner{ position:relative; padding:32px; } .sbento__tile .inner p{ font-size:13px; font-weight:600; margin:0; } .sbento__tile .inner h3{ font-size:26px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:8px 0 0; max-width:300px; } /* CTA-Band (Schwester) */ .cta-band{ padding:100px 26px; background:linear-gradient(135deg,#25003B 0%,#1a0030 100%); color:#fff; text-align:center; position:relative; overflow:hidden; } .cta-band__glow{ position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(230,0,45,0.24),transparent 70%); } .cta-band__inner{ position:relative; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1040px){ .snav__links{ display:none; } /* Burger über dem Vollbild-Overlay halten, damit er als Schließen-Button klickbar bleibt */ .burger{ display:inline-flex; position:relative; z-index:60; } .nav.mobile-open .burger{ color:var(--ink); } .bento, .bento__col, .grid--2, .grid--3, .grid--4, .disc-grid, .plans, .geo-grid, .quote, .sbento, .caps, .dfooter__grid, .foot-cols, .field-row, .mega__grid{ grid-template-columns:1fr; } .bento > .tile--big{ grid-column:auto; } .tile--big{ min-height:auto; } .tile--md{ min-height:auto; } /* Bildzonen stapeln mobil: Text oben, Foto kantenbündig darunter */ .tile__media{ position:relative; top:auto; right:auto; bottom:auto; left:auto; width:auto; height:260px; margin:24px -36px -36px; } .tile--big .tile__media{ margin:24px -48px -56px; } .tile__media::before{ top:0; left:0; right:0; bottom:auto; width:auto; height:48px; background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%); } .tile--dark .tile__media::before{ background:linear-gradient(180deg,#2A0040 0%,rgba(42,0,64,0) 100%); } .tile--cream .tile__media::before{ background:linear-gradient(180deg,var(--cream) 0%,rgba(245,245,247,0) 100%); } .tile--big .tile__rel, .tile__rel--narrow{ max-width:none; } .tile__link{ position:static; display:inline-block; margin-top:16px; } .sbento__tile--wide, .cap--wide{ grid-column:span 1; } .cap--wide{ grid-template-columns:1fr; } .utility{ padding:7px 20px; } .nav, .snav{ padding:0 20px; } /* Mobiles Vollbild-Menü mit Akkordeon (Links bleiben im DOM, kein display:none) */ .nav__links{ position:fixed; left:0; right:0; top:0; height:100vh; height:100dvh; margin:0; padding:84px 20px 48px; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(100%); transition:transform .25s ease; z-index:45; } .nav.mobile-open .nav__links{ transform:translateX(0); } .nav__links > li{ width:100%; border-bottom:1px solid var(--line); } .nav__links > li.active{ height:auto; } .has-drop{ display:block; height:auto; } .nav-trigger{ width:100%; justify-content:space-between; height:auto; padding:16px 4px; border-bottom:0; font-size:17px; } .nav-trigger .caret{ display:inline; } .nav__links > li > a{ display:block; height:auto; border-top:0; padding:16px 4px; font-size:17px; } /* Dropdown wird Akkordeon */ .mega{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0; max-height:0; overflow:hidden; transition:max-height .3s ease; transition-delay:0s; } .has-drop.open > .mega{ max-height:3000px; padding:4px 0 18px; } .mega > .wrap{ max-width:none; } /* Übersichts-Link: der Trigger klappt mobil nur auf/zu — dieser Link führt zur Übersichtsseite */ .mega__overview{ display:flex; align-items:center; gap:8px; padding:14px 4px; margin-bottom:6px; font-size:15px; font-weight:500; color:var(--purple); text-decoration:none; border-bottom:1px solid var(--line); } .mega__overview span{ color:var(--red); } .mega__services, .mega__insights, .mega__about{ grid-template-columns:1fr; gap:22px; } .mega__ki-cards{ grid-template-columns:1fr; } .mega__stats{ padding-left:0; border-left:0; flex-direction:row; flex-wrap:wrap; gap:24px; } .mega-feature{ grid-template-columns:96px 1fr; } } @media (max-width:760px){ .section, .section--lg{ padding-left:18px; padding-right:18px; } .stats, .spec{ grid-template-columns:1fr 1fr; } /* min-width:0 lässt die Grid-Zellen schrumpfen, sonst sprengt z. B. "196.000" die Spalte */ .stat, .spec__item{ border-right:none; border-bottom:1px solid var(--line-2); min-width:0; padding-left:8px; padding-right:8px; } .stat__num{ font-size:clamp(28px,9vw,52px); } .spec__num{ font-size:clamp(26px,8vw,44px); } .reviews{ columns:1; } .compare__row{ grid-template-columns:1fr 1fr; } /* Spezifitäts-Override: .compare-block .compare__row (0,2,0) > .compare__row (0,1,0) */ .compare-block .compare__row{ grid-template-columns:1fr 1fr; } .compare__row--head{ display:none; } .compare__cell--other{ display:none; } .compare-block{ padding-top:0; } .compare__spotlight{ display:none; } .compare-block .compare__cell--win{ background:var(--panel); } .compare__cta{ width:100%; padding:20px 24px 0; } /* Hero mobil: Inhalt bleibt unten verankert, aber der Hero WÄCHST mit langem Text (height:auto + min-height als Banner-Floor) statt oben unter der Nav abzuschneiden (Hero ist overflow:hidden). Flex-Column + justify-end hält die Bottom-Anmutung; der Inhalt wird position:relative (z-index über dem Scrim) und fließt mit. */ .hero{ height:auto; display:flex; flex-direction:column; justify-content:flex-end; } .hero__content{ position:relative; z-index:2; left:auto; right:auto; bottom:auto; max-width:none; margin:0; padding:88px 6% 48px; } .showreel, .price-pill{ display:none; } } /* ============================================================ UNTERSEITEN-KOMPONENTEN ============================================================ */ /* aktiver Nav-Link */ /* einfache (Nicht-Dropdown-)Links: volle Höhe + Border-Balken wie bei den Triggern */ .nav__links > li > a{ display:flex; align-items:center; height:62px; border-top:2px solid transparent; border-bottom:2px solid transparent; text-decoration:none; color:inherit; } /* aktiver / gehoverter Nav-Link: roter Balken (kein Fett) */ .nav__links > li:hover > a, .nav__links > li.active > a{ color:var(--purple); border-bottom-color:var(--red); } .has-drop.active > .nav-trigger{ color:var(--purple); border-bottom-color:var(--red); font-weight:400; } .nav__links > li a{ text-decoration:none; color:inherit; } /* Sub-Hero (heller Seitenkopf) */ .subhero{ padding:80px 22px 48px; text-align:center; } .subhero .eyebrow{ display:block; } .subhero .lead{ max-width:680px; margin:0 auto; } .subhero--left{ text-align:left; } .subhero--left .lead{ margin:0; } /* Optionaler gezeichneter Illu-Anker im Hero (freigestelltes PNG, zentriert) */ .subhero__illu{ margin:44px auto 0; max-width:520px; } .subhero__illu img{ width:100%; height:auto; display:block; } /* Split-Hero: Text links, Illustration rechts (nur Service-Landingpages mit illu) */ .subhero--split{ display:flex; align-items:center; justify-content:center; gap:56px; text-align:left; max-width:1180px; margin-inline:auto; padding:72px 22px 56px; } .subhero--split .subhero__text{ flex:1 1 0; min-width:0; } .subhero--split .eyebrow{ display:block; } .subhero--split .h1--xl{ margin:0; max-width:none; text-align:left; } .subhero--split .h1--calm{ font-size:clamp(34px,5vw,56px); margin:0 0 0; text-align:left; } .subhero--split .lead{ margin:18px 0 0; max-width:46ch; } .subhero--split .subhero__meta{ display:flex; margin-top:16px; } .subhero--split .subhero__actions{ justify-content:flex-start; margin-top:28px; } .subhero--split .subhero__illu{ flex:0 1 44%; max-width:480px; margin:0; } @media (max-width:860px){ .subhero--split{ flex-direction:column; text-align:center; gap:8px; padding:56px 20px 40px; } .subhero--split .h1--xl{ text-align:center; } .subhero--split .h1--calm{ text-align:center; } .subhero--split .lead{ margin-inline:auto; } .subhero--split .subhero__meta, .subhero--split .subhero__actions{ justify-content:center; } .subhero--split .subhero__illu{ flex:0 1 auto; max-width:340px; margin:0 auto 8px; } } /* Feature-Karte (Icon + Titel + Text) */ .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .feat{ background:#fff; border:1px solid var(--rule, rgba(60,0,95,0.1)); border-radius:20px; padding:30px 28px; } .feat__icon{ width:48px; height:48px; border-radius:12px; background:rgba(60,0,95,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--purple); } .feat h3{ font-size:21px; font-weight:600; letter-spacing:-0.015em; margin:0 0 8px; color:var(--ink); } .feat p{ font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0; } /* Team-Grid */ .team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .member{ text-align:center; } .member__photo{ aspect-ratio:1; border-radius:20px; overflow:hidden; position:relative; margin-bottom:14px; } .member h3{ font-size:17px; font-weight:600; margin:0; color:var(--ink); } .member p{ font-size:13px; color:var(--ink-soft); margin:2px 0 0; } /* Werte / Icon-Liste */ .values{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .value h3{ font-size:20px; font-weight:600; margin:0 0 8px; color:var(--ink); } .value p{ font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0; } /* Zeitleiste (Firmen-Historie) — horizontale Achse, Karten abwechselnd oben/unten */ /* Scrollbarer Viewport: läuft per JS langsam von selbst, bleibt manuell scrollbar. Fade-Maske links/rechts lässt Einträge weich ein- und auslaufen. */ .timeline-viewport{ position:relative; margin:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; padding:4px 0; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%); } .timeline-viewport:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; border-radius:8px; } .timeline-viewport::-webkit-scrollbar{ display:none; } /* selbst verschieben: Greif-Cursor (Drag per Maus, JS) */ @media (hover:hover){ .timeline-viewport{ cursor:grab; } } .timeline-viewport.is-dragging{ cursor:grabbing; user-select:none; } .timeline{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; width:max-content; } /* Echte Flex-Abstandshalter links/rechts (Pseudo-Elemente zählen NICHT bei :nth-child/:first/:last → Zickzack & Achse bleiben intakt). Erzeugen — anders als container-padding — zuverlässig scrollbaren Platz, damit auch der erste/letzte Eintrag mittig gescrollt werden kann. Breite per JS über --tl-pad. */ .timeline::before, .timeline::after{ content:""; flex:0 0 var(--tl-pad,40px); } .tl-item{ position:relative; flex:0 0 clamp(210px,64vw,236px); height:480px; } /* durchgehende Achse: vertikal mittig, jedes Item zeichnet sein Segment */ .tl-item::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--line-3); } .tl-item:first-child::before{ left:50%; } /* Linie beginnt am ersten Punkt (2002) */ .tl-item:last-child::before{ right:50%; } /* Linie endet am letzten Punkt (2026) */ /* Punkt mittig auf der Achse */ .tl-dot{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; width:13px; height:13px; border-radius:50%; background:var(--purple); border:2px solid var(--white); box-shadow:0 0 0 1px var(--line-3); } /* Inhalt zur Achse hin verankert → wächst von ihr weg, kreuzt sie nie */ .tl-content{ position:absolute; left:50%; transform:translateX(-50%); width:min(112%,264px); } .tl-content::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:2px; height:20px; background:var(--line-3); } .tl-item:nth-child(odd) .tl-content{ bottom:calc(50% + 20px); } .tl-item:nth-child(odd) .tl-content::after{ bottom:-20px; } .tl-item:nth-child(even) .tl-content{ top:calc(50% + 20px); } .tl-item:nth-child(even) .tl-content::after{ top:-20px; } /* Karte */ .tl-card{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:0 6px 16px rgba(60,0,95,0.06); } /* Jahr als Tag/Pill (Design-System: Mono, Versalien, Pill) */ .tl-year{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--r-pill); background:rgba(60,0,95,0.08); color:var(--purple); font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; line-height:1.2; margin:0 0 10px; } .tl-title{ font-size:17px; font-weight:600; margin:0 0 6px; color:var(--ink); letter-spacing:-0.01em; } .tl-text{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:0; } /* aktueller/jüngster Eintrag (2026): Signal in Rot, Karte hervorgehoben */ .tl-item--current .tl-dot{ background:var(--red); } .tl-item--current .tl-year{ color:var(--red); background:rgba(230,0,45,0.10); } .tl-item--current .tl-card{ border-color:rgba(230,0,45,0.35); box-shadow:0 6px 18px rgba(230,0,45,0.12); } /* Auszeichnungen: Gold-Akzent (Token --gold), Pokal-Icon + Label */ .tl-award{ display:inline-flex; align-items:center; gap:6px; margin:0 0 8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); } .tl-award svg{ color:var(--gold); } .tl-item--award .tl-card{ border-color:rgba(251,188,5,0.55); box-shadow:0 6px 18px rgba(251,188,5,0.16); } .tl-item--award .tl-year{ color:var(--ink); background:rgba(251,188,5,0.20); } .tl-item--award .tl-dot{ background:var(--gold); } @media (prefers-reduced-motion:no-preference){ .tl-item--current .tl-dot{ animation:pulsering 2.6s ease-out infinite; } } /* Jobs-Liste */ .jobs{ display:grid; gap:12px; } .job{ display:flex; justify-content:space-between; align-items:center; gap:20px; background:#fff; border:1px solid var(--rule, rgba(60,0,95,0.1)); border-radius:16px; padding:22px 26px; text-decoration:none; color:var(--ink); transition:box-shadow .2s ease, transform .2s ease; flex-wrap:wrap; } .job:hover{ box-shadow:0 12px 30px rgba(60,0,95,0.10); transform:translateY(-2px); } .job h3{ font-size:19px; font-weight:600; margin:0; } .job__meta{ font-size:13px; color:var(--ink-soft); margin-top:4px; } /* Artikel-Layout (Blog) */ .answer-box{ background:#f0edf3; border-radius:16px; padding:26px 30px; max-width:760px; margin:0 auto; } .answer-box--wide{ max-width:none; } .answer-box .label{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--implec-red,#E6002D); } .answer-box p{ font-size:19px; font-weight:600; line-height:1.5; color:var(--ink); margin:8px 0 0; } .article{ max-width:720px; margin:0 auto; } .article p{ font-size:17px; line-height:1.75; color:var(--ink-2,#2A2530); margin:0 0 22px; } .article h2{ font-size:28px; font-weight:600; letter-spacing:-0.02em; margin:40px 0 14px; color:var(--ink); } .article ul{ font-size:17px; line-height:1.7; color:var(--ink-2,#2A2530); padding-left:22px; margin:0 0 22px; } .article li{ margin-bottom:8px; } .article .pullquote{ font-size:24px; font-weight:600; line-height:1.35; letter-spacing:-0.02em; color:var(--purple); margin:36px 0; padding:2px 0 2px 24px; border-left:3px solid var(--red); } .byline{ display:flex; align-items:center; gap:12px; justify-content:center; margin-top:24px; font-size:14px; color:var(--ink-soft); } .author-box{ display:flex; gap:18px; align-items:center; background:var(--paper); border:1px solid var(--rule, rgba(60,0,95,0.1)); border-radius:20px; padding:26px 28px; max-width:720px; margin:40px auto 0; } .author-photo{ border-radius:50%; object-fit:cover; flex-shrink:0; } .fullbleed-img{ aspect-ratio:21/9; position:relative; overflow:hidden; border-radius:24px; } /* Randlos/kantenbündig (image full:true) — Foto-Band zwischen Textblöcken, schwebt nicht als abgerundete Kachel auf dem grauen Section-Hintergrund. */ .fullbleed-img--edge{ border-radius:0; } /* Conversion-/Lead-Box (Blog) — Interaktionsgrundlage je Artikeltyp. Variante "offen": Direkt-Download (Checkliste/Vorlage/Matrix). Variante .conversion--gated: schlankes Lead-Formular (Whitepaper, gegen E-Mail). */ .conversion{ max-width:720px; margin:48px auto 0; background:var(--panel); border:1px solid var(--line-3); border-radius:20px; padding:30px 32px; } .conversion__eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin:0 0 10px; } .conversion__title{ font-size:21px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:0 0 8px; } .conversion__text{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px; max-width:560px; } .conversion__action{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .conversion__form{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .conversion__form .input{ flex:1 1 260px; } .conversion__form .input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(60,0,95,0.10); } .conversion__note{ font-size:12px; color:var(--ink-faint); margin:12px 0 0; } .conversion__note a{ color:var(--purple); } @media (max-width:760px){ .conversion{ padding:24px 22px; } } /* Checklisten-Landingpages (Lead-Magnets) — ruhige, abhakbare Prüflisten. Inhalt = data/pages/.json (checklist-Komponente), Druck-/PDF-fähig. */ .check-wrap{ max-width:1100px; margin:0 auto; padding:56px 24px 24px; } .check-wrap--with-ill{ display:flex; gap:64px; align-items:flex-start; } .check-wrap--with-ill .check-wrap__content{ flex-grow:1; min-width:0; max-width:600px; } .check-wrap__ill{ width:300px; flex-shrink:0; } .check-wrap__ill img{ max-width:100%; object-fit:contain; } @media (max-width:768px){ .check-wrap--with-ill{ flex-direction:column; gap:32px; } .check-wrap__ill{ width:100%; max-width:260px; margin:0 auto; order:-1; } } /* Embed-Modus (Checklisten-Modal): Illustration bleibt rechts, halb so groß — kein column-stack. */ .embed .check-wrap--with-ill{ flex-direction:row; gap:32px; } .embed .check-wrap__ill{ width:150px; max-width:150px; flex-shrink:0; margin:0; order:0; } .check-eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin:0 0 8px; max-width:680px; } .check-title{ font-size:30px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:0 0 10px; max-width:680px; } .check-lead{ font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0 0 28px; max-width:680px; } .check-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-3); } .check-list li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line-3); font-size:16px; line-height:1.5; color:var(--ink); cursor:pointer; transition:opacity .12s ease; } .check-list li:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; border-radius:6px; } .check-box{ position:relative; flex-shrink:0; width:22px; height:22px; border:2px solid var(--purple); border-radius:6px; margin-top:1px; transition:background .12s ease, border-color .12s ease; } .check-list li.is-done .check-box{ background:var(--purple); border-color:var(--purple); } .check-list li.is-done .check-box::after{ content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } .check-list li.is-done > span:last-child{ color:var(--ink-soft); } .check-num{ font-family:var(--mono); font-size:12px; color:var(--red); flex-shrink:0; margin-top:3px; min-width:22px; } /* Handlungs-Tipp: unter der Frage (No-JS-Liste) bzw. unter offenen Punkten im Ergebnis */ .check-tip{ display:block; font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:4px; font-weight:400; } .cl-result__tip{ display:block; font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:6px; font-weight:400; } .check-result{ margin:22px 0 0; } .check-result__line{ margin:0; font-family:var(--mono); font-size:13px; letter-spacing:0.04em; color:var(--ink-soft); } .check-result__count{ color:var(--purple); font-weight:600; } .check-result__verdict{ margin:12px 0 0; padding:14px 16px; border-radius:12px; background:var(--panel); font-size:14px; line-height:1.55; color:var(--ink-2,#2A2530); } .check-result__verdict b{ font-weight:600; } .check-result__verdict.is-good b{ color:var(--purple); } .check-result__verdict.is-low{ background:rgba(230,0,45,0.07); } .check-result__verdict.is-low b{ color:var(--red); } /* Checklisten-Quiz — Progressive Enhancement (assets/js/checklist-quiz.js). Führt Punkt für Punkt durch die Liste und zeigt am Ende eine eigene Ergebnis-Seite. Ist JS aktiv, blendet cl-quiz-on die statische Liste aus. */ .cl-quiz-on .check-list, .cl-quiz-on .check-result{ display:none; } .cl-quiz{ margin-top:24px; } .cl-quiz__progress{ margin:0 0 30px; } .cl-quiz__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px; } .cl-quiz__meta b{ color:var(--purple); font-weight:600; } .cl-quiz__bar{ height:6px; border-radius:999px; background:var(--line-3); overflow:hidden; } .cl-quiz__bar span{ display:block; height:100%; width:0; background:var(--purple); border-radius:999px; transition:width .35s cubic-bezier(.4,0,.2,1); } .cl-quiz__view{ outline:none; } .cl-quiz__num{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--red); margin:0 0 14px; } .cl-quiz__q{ font-size:24px; line-height:1.35; letter-spacing:-0.02em; font-weight:400; color:var(--ink); margin:0 0 28px; text-wrap:balance; } .cl-quiz__q strong{ font-weight:600; } .cl-quiz__answers{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .cl-quiz__ans{ font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.3; text-align:left; padding:18px 22px; border-radius:var(--r-card-sm); border:1px solid var(--line-3); background:var(--white); color:var(--ink); cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; } .cl-quiz__ans:hover{ border-color:var(--purple); transform:translateY(-1px); } .cl-quiz__ans:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; } .cl-quiz__ans small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:400; margin-top:7px; } .cl-quiz__ans--yes.is-active{ border-color:var(--purple); background:var(--panel); } .cl-quiz__ans--no.is-active{ border-color:var(--red); background:rgba(230,0,45,0.06); } .cl-quiz__back{ margin:20px 0 0; padding:6px 0; background:none; border:0; font-family:var(--sans); font-size:14px; color:var(--ink-soft); cursor:pointer; } .cl-quiz__back:hover{ color:var(--purple); } /* Ergebnis-Seite */ .cl-result__score{ display:flex; align-items:center; gap:24px; padding:0 0 24px; } .cl-result__ring{ flex:none; position:relative; width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--ring,var(--purple)) calc(var(--p,0)*1%), var(--line-3) 0); } .cl-result__ring i{ width:74px; height:74px; border-radius:50%; background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-style:normal; } .cl-result__ring b{ font-size:36px; line-height:1; font-weight:600; letter-spacing:-0.02em; color:var(--ink); } .cl-result__ring span{ font-size:12px; line-height:1; color:var(--ink-soft); margin-top:3px; } .cl-result__label{ font-size:22px; font-weight:600; letter-spacing:-0.02em; color:var(--purple); margin:0 0 6px; } .cl-result--low .cl-result__label{ color:var(--red); } .cl-result__hint{ font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0; } .cl-result__why{ margin:20px 0 0; padding:16px 18px; border-radius:var(--r-card-sm); background:var(--panel); } .cl-result--low .cl-result__why{ background:rgba(230,0,45,0.06); } .cl-result__why-title{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin:0 0 8px; } .cl-result__why p:last-child{ font-size:15px; line-height:1.6; color:var(--ink-2,#2A2530); margin:0; text-wrap:pretty; } .cl-result__open{ margin:24px 0 0; border-top:1px solid var(--line-3); padding-top:8px; } .cl-result__open-title{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin:14px 0; } .cl-result__open ul{ list-style:none; margin:0; padding:0; } .cl-result__open li{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line-3); font-size:15px; line-height:1.5; color:var(--ink); } .cl-result__open li .check-num{ margin-top:2px; } .cl-result__restart{ margin:24px 0 0; padding:11px 22px; background:none; border:1px solid var(--line-3); border-radius:999px; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color .15s ease, color .15s ease; } .cl-result__restart:hover{ border-color:var(--purple); color:var(--purple); } @media (prefers-reduced-motion: reduce){ .cl-quiz__bar span, .cl-quiz__ans, .cl-result__restart{ transition:none; } } @media (max-width:520px){ .cl-quiz__answers{ grid-template-columns:1fr; } .cl-quiz__q{ font-size:21px; } .cl-result__score{ flex-direction:column; align-items:flex-start; gap:18px; } } @media print{ .sticky, .site-footer, .conversion, .section--dark{ display:none !important; } body{ background:#fff; } .check-wrap{ padding:0; } .check-wrap--with-ill{ display:block; } .check-wrap__ill{ display:none; } .check-box{ border-color:#333; } } /* Blog: 2-Spalten-Layout mit mitscrollender Sidebar (2/3 Text, 1/3 Aside) */ .article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px 56px; align-items:start; } .article-layout > .article{ max-width:none; margin:0; } .article-layout > .author-box{ grid-column:1; margin:16px 0 0; max-width:none; } .article h2{ scroll-margin-top:110px; } .article-aside{ grid-column:2; grid-row:1 / span 2; position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; gap:18px; } .aside-eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin:0 0 10px; } /* TL;DR */ .aside-tldr{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card-sm); padding:18px 20px; } .aside-tldr ul{ margin:0; padding-left:18px; } .aside-tldr li{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-bottom:8px; } .aside-tldr li:last-child{ margin-bottom:0; } /* Inhaltsverzeichnis */ .aside-toc{ border:1px solid var(--line); border-radius:var(--r-card-sm); padding:18px 20px; } .aside-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; } .aside-toc li{ counter-increment:toc; } .aside-toc a{ display:flex; gap:10px; font-size:13.5px; line-height:1.45; color:var(--ink); text-decoration:none; padding:9px 0; border-top:1px solid var(--line); } .aside-toc li:first-child a{ border-top:0; padding-top:0; } .aside-toc a:hover{ color:var(--purple); } .aside-toc a::before{ content:counter(toc); font-family:var(--mono); font-size:11px; color:var(--red); flex:none; } /* Lexikon: Spot-Illustration links neben der „Kurz erklärt"-Box — transparentes WebP direkt auf dem Seitenhintergrund (kein Feld, kein Rahmen) */ .lex-defrow{ display:flex; align-items:center; gap:32px; } .lex-defrow .answer-box{ flex:1 1 auto; margin:0; } .lex-defrow__ill{ flex:0 0 200px; display:flex; align-items:center; justify-content:center; } .lex-defrow__ill img{ display:block; max-width:100%; max-height:170px; width:auto; height:auto; } @media (max-width:720px){ .lex-defrow{ flex-direction:column; } .lex-defrow__ill{ flex-basis:auto; } .lex-defrow__ill img{ max-height:140px; } } /* Conversion-Box als Sidebar-Variante */ .conversion--aside{ max-width:none; margin:0; padding:20px 22px; border-radius:var(--r-card-sm); } .conversion--aside .conversion__title{ font-size:18px; } .conversion--aside .conversion__text{ font-size:13.5px; line-height:1.55; margin:0 0 16px; max-width:none; } .conversion--aside .conversion__action{ flex-direction:column; align-items:stretch; gap:12px; } .conversion--aside .conversion__action .btn{ justify-content:center; padding:11px 20px; font-size:14px; } .conversion--aside .conversion__action a:not(.btn){ font-size:13px; } /* Kompakter Autor */ .aside-author{ display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:var(--r-card-sm); padding:16px 18px; } .aside-author .avatar{ width:42px; height:42px; flex:none; } .aside-author b{ display:block; font-size:14px; color:var(--ink); } .aside-author span{ font-size:12px; color:var(--ink-soft); } /* Checklisten-Modal (öffnet die Checklistenseite als Overlay statt neuer Seite) */ .cl-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(14,11,18,0.55); backdrop-filter:saturate(140%) blur(6px); animation:cl-fade .15s ease; } @keyframes cl-fade{ from{ opacity:0 } to{ opacity:1 } } .cl-modal__panel{ position:relative; width:min(760px,100%); height:min(86vh,920px); background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 30px 80px rgba(37,0,59,0.45); } .cl-modal__frame{ width:100%; height:100%; border:0; display:block; } .cl-modal__close{ position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,0.92); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .cl-modal__close:hover{ background:#fff; } @media (max-width:760px){ .cl-modal{ padding:0; } .cl-modal__panel{ width:100%; height:100%; border-radius:0; } } /* Video-Lightbox (Showreel/Film) — wird per assets/js/video-modal.js erzeugt */ .vlightbox{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:32px; background:rgba(14,11,18,0.78); backdrop-filter:saturate(140%) blur(8px); animation:cl-fade .15s ease; } .vlightbox__panel{ position:relative; width:min(1100px,100%); border-radius:24px; overflow:hidden; box-shadow:0 30px 80px rgba(37,0,59,0.55); background:#000; } .vlightbox__video{ display:block; width:100%; height:auto; max-height:82vh; background:#000; } .vlightbox__close{ position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,0.2); background:rgba(14,11,18,0.55); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .vlightbox__close:hover{ background:rgba(14,11,18,0.8); } @media (max-width:760px){ .vlightbox{ padding:0; } .vlightbox__panel{ border-radius:0; } } /* Video-Poster-Kachel (Komponente components/video.php) — öffnet die Lightbox */ .vposter{ position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer; overflow:hidden; border-radius:var(--r-card); background:var(--implec-purple-deep,#25003B); aspect-ratio:16/9; } .vposter img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vposter__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(37,0,59,0.10) 0%, rgba(37,0,59,0) 40%, rgba(37,0,59,0.50) 100%); } .vposter__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:var(--implec-red,#E6002D); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .15s ease; } .vposter:hover .vposter__play{ transform:translate(-50%,-50%) scale(1.06); background:var(--implec-red-deep,#B80024); } .vposter:focus-visible{ outline:2px solid var(--implec-red,#E6002D); outline-offset:3px; } .vposter__meta{ position:absolute; left:16px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--r-pill); background:rgba(14,11,18,0.5); backdrop-filter:blur(10px); color:#fff; font-size:13px; font-weight:500; } /* KI-Kennzeichnung (EU AI Act Art. 50): dezentes "KI-generiert"-Wasserzeichen unten rechts — sehr zurückhaltend, aber lesbar (gesetzlich muss es erkennbar bleiben). Mono-Versalien, halbtransparentes Weiß mit Schatten für Lesbarkeit über beliebigen Frames. Token-Farben, keine Hintergrund-Box. */ .vposter__ai{ position:absolute; right:14px; bottom:13px; z-index:2; pointer-events:none; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,255,255,0.72); text-shadow:0 1px 3px rgba(14,11,18,0.55); } /* Im Lightbox-Video tief unten rechts, bewusst sehr zurückhaltend (aber per Gesetz noch erkennbar). */ .vlightbox__ai{ position:absolute; right:14px; bottom:12px; z-index:3; pointer-events:none; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:0.03em; text-transform:uppercase; color:rgba(255,255,255,0.40); text-shadow:0 1px 3px rgba(0,0,0,0.5); } @media (max-width:760px){ .vlightbox__ai{ right:10px; bottom:8px; font-size:9.5px; } } /* Screenreader-only (visuell versteckt, für Assistenztechnik lesbar) */ .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; } @media (max-width:980px){ .article-layout{ grid-template-columns:1fr; gap:32px; } .article-aside{ grid-column:1; grid-row:auto; position:static; } .article-layout > .author-box{ grid-column:1; } } /* Prozess-Schritte (Case-Detail) */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .step__num{ font-family:var(--mono); font-size:13px; color:var(--implec-red,#E6002D); letter-spacing:0.08em; } .step h3{ font-size:20px; font-weight:600; margin:8px 0 8px; color:var(--ink); } .step p{ font-size:15px; color:var(--ink-soft); line-height:1.6; margin:0; } @media (max-width:1040px){ .feat-grid, .team-grid, .values, .steps{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ .feat-grid, .team-grid, .values, .steps{ grid-template-columns:1fr; } } /* Split-Layout (Bild/Text nebeneinander, bricht mobil um) */ .split{ display:grid; grid-template-columns:3fr 2fr; } .split--even{ grid-template-columns:1fr 1fr; } @media (max-width:1040px){ .split, .split--even{ grid-template-columns:1fr; } } /* ============================================================ LEXIKON ============================================================ */ .lex-search{ max-width:560px; margin:0 auto 22px; position:relative; } .lex-search input{ width:100%; padding:15px 18px; border-radius:var(--r-pill); border:1px solid var(--line-3); font-size:16px; font-family:inherit; background:#fff; } .lex-search input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(60,0,95,0.10); } .az{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:760px; margin:0 auto 16px; } .az button{ min-width:34px; height:34px; padding:0 8px; border-radius:9px; border:1px solid var(--line-3); background:#fff; color:var(--ink); font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease,color .15s ease; } .az button:hover{ background:var(--panel); } .az button.active{ background:var(--ink); color:#fff; border-color:var(--ink); } .az button:disabled{ opacity:.3; cursor:default; } .lex-cats{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:760px; margin:0 auto 16px; } .lex-cats button{ height:30px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--line-3); background:#fff; color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; cursor:pointer; transition:background .15s ease,color .15s ease; } .lex-cats button:hover{ background:var(--panel); } .lex-cats button.active{ background:var(--purple); color:#fff; border-color:var(--purple); } .lex-count{ text-align:center; font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-bottom:28px; } .lex-group{ margin-bottom:18px; } .lex-group__letter{ font-family:var(--sans); font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); border-bottom:1px solid var(--line-3); padding-bottom:8px; margin:0 0 6px; } .lex-item{ display:block; padding:16px 4px; border-bottom:1px solid var(--line-2); text-decoration:none; color:var(--ink); transition:background .12s ease; } .lex-item:hover{ background:var(--paper); } .lex-item b{ font-size:18px; font-weight:600; } .lex-item .lex-cat{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--purple); background:rgba(60,0,95,0.07); padding:3px 10px; border-radius:var(--r-pill); margin-left:8px; } .lex-item p{ margin:6px 0 0; font-size:14.5px; color:var(--ink-soft); line-height:1.5; } .lex-empty{ text-align:center; color:var(--ink-soft); padding:40px 0; display:none; } /* Begriffsseite */ .term-def{ font-size:21px; line-height:1.6; color:var(--ink-2,#2A2530); max-width:720px; } .seealso{ display:flex; flex-wrap:wrap; gap:8px; } .seealso a{ padding:8px 16px; border-radius:var(--r-pill); background:var(--panel); color:var(--purple); font-size:14px; text-decoration:none; } .seealso a:hover{ background:rgba(60,0,95,0.12); } /* ============================================================ WHITEPAPER — Hub, Landingpages & Lead-Formular ============================================================ */ .wp-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; } .wp-aside{ position:sticky; top:88px; } .wp-panel{ background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:var(--r-card); padding:32px 30px; box-shadow:0 18px 48px rgba(60,0,95,0.10); } .wp-panel--dark{ background:linear-gradient(165deg,#2A0040 0%,#14001f 100%); color:var(--cream); border:none; } .wp-panel__eyebrow{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin:0 0 10px; } .wp-panel--dark .wp-panel__eyebrow{ color:var(--pink); } .wp-panel h3{ font-size:22px; font-weight:600; letter-spacing:-0.02em; margin:0 0 6px; } .wp-panel p.wp-sub{ font-size:14px; color:var(--ink-soft); margin:0 0 20px; line-height:1.5; } .wp-panel--dark p.wp-sub{ color:rgba(246,242,236,0.75); } /* Inhaltsverzeichnis / „Das erwartet Sie" */ .wp-toc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } .wp-toc li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink); line-height:1.5; } .wp-toc li::before{ content:""; flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%; background:rgba(60,0,95,0.08); background-image:linear-gradient(135deg,var(--purple),var(--red)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; } /* Lead-Formular */ .wp-form{ display:flex; flex-direction:column; gap:14px; } .wp-field{ display:flex; flex-direction:column; gap:6px; } .wp-field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); letter-spacing:0.01em; } .wp-panel--dark .wp-field label{ color:rgba(246,242,236,0.7); } .wp-form input, .wp-form select, .wp-form textarea{ padding:13px 16px; border:1px solid var(--line-2); border-radius:12px; font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s; width:100%; } .wp-form input:focus, .wp-form select:focus, .wp-form textarea:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(60,0,95,0.10); } .wp-choice{ display:flex; gap:10px; } .wp-choice label{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); font-size:13.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; background:#fff; transition:all .15s; } .wp-choice input{ position:absolute; opacity:0; width:0; height:0; } .wp-choice label:has(input:checked){ border-color:var(--purple); background:rgba(60,0,95,0.06); color:var(--purple); } /* Dunkles Panel: eigene Pill-Farben, sonst gewinnt .wp-panel--dark .wp-field label (Cream auf Weiß). */ .wp-panel--dark .wp-choice label{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.25); color:rgba(246,242,236,0.85); } .wp-panel--dark .wp-choice label:has(input:checked){ background:var(--cream); border-color:var(--cream); color:var(--purple); } .wp-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); line-height:1.45; } .wp-consent input{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; accent-color:var(--purple); } .wp-panel--dark .wp-consent{ color:rgba(246,242,236,0.7); } .wp-form .btn{ width:100%; justify-content:center; margin-top:4px; } .wp-note{ font-size:11.5px; color:var(--ink-faint); margin:2px 0 0; line-height:1.4; text-align:center; } .wp-panel--dark .wp-note{ color:rgba(246,242,236,0.5); } /* Erfolgsmeldung nach Absenden */ .wp-success{ display:none; text-align:center; } .wp-success.is-active{ display:block; } .wp-success__icon{ width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:rgba(230,0,45,0.10); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:26px; } .wp-panel--dark .wp-success__icon{ background:rgba(255,255,255,0.10); color:var(--pink); } /* freier Download */ .wp-dl{ display:flex; flex-direction:column; gap:10px; } .wp-badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; padding:5px 12px; border-radius:var(--r-pill); } .wp-badge--free{ background:rgba(230,0,45,0.10); color:var(--red); } .wp-badge--gated{ background:rgba(60,0,95,0.08); color:var(--purple); } .wp-panel--dark .wp-badge--free{ background:rgba(255,255,255,0.12); color:var(--pink); } /* Hub-Karten-Fußzeile */ .wp-cardfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; } @media (max-width:860px){ .wp-grid{ grid-template-columns:1fr; gap:32px; } .wp-aside{ position:static; } } /* ============================================================ Action-Modal — Conversion (Variante A: Optionskarten) Buttons mit Kontakt-Aktion öffnen dieses Modal statt zu navigieren. ============================================================ */ .actmodal{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(37,0,59,0.55); backdrop-filter:saturate(160%) blur(6px); opacity:0; transition:opacity .18s ease; } .actmodal[hidden]{ display:none; } .actmodal.is-open{ opacity:1; } .actmodal__panel{ position:relative; width:min(940px,100%); height:min(760px,90vh); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; background:#fff; border-radius:24px; box-shadow:0 30px 80px rgba(37,0,59,0.35); transform:translateY(14px); transition:transform .22s cubic-bezier(.2,.8,.2,1); } /* Feste Panel-Höhe → das Modal behält in allen Ansichten dieselbe Größe. Die jeweils sichtbare Ansicht füllt das Panel und scrollt bei Bedarf intern. */ .actmodal__view:not([hidden]){ flex:1 1 auto; min-height:0; overflow-y:auto; } .actmodal.is-open .actmodal__panel{ transform:translateY(0); } .actmodal__close{ position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:999px; border:1px solid var(--line,rgba(60,0,95,0.12)); background:#fff; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .actmodal__close:hover{ background:var(--cream); } .actmodal__back{ position:absolute; top:18px; left:22px; z-index:3; background:none; border:0; cursor:pointer; font-family:var(--ff); font-size:14px; color:var(--ink-soft); padding:4px 0; } .actmodal__back:hover{ color:var(--red); } .actmodal__head{ text-align:center; padding:46px 44px 6px; } .actmodal__title{ font-size:clamp(24px,3.2vw,30px); letter-spacing:-0.025em; margin:0 0 10px; color:var(--ink); } .actmodal__sub{ font-size:16px; color:var(--ink-soft); margin:0 auto; max-width:52ch; } .actmodal__opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:24px 44px 14px; } .actopt{ position:relative; display:flex; flex-direction:column; gap:12px; text-align:left; padding:24px 22px; border:1px solid var(--line,rgba(60,0,95,0.12)); border-radius:18px; background:#fff; cursor:pointer; text-decoration:none; color:inherit; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .actopt:hover{ box-shadow:0 16px 48px rgba(60,0,95,0.12); transform:translateY(-3px); border-color:rgba(60,0,95,0.25); } .actopt--hot{ border-color:var(--red); box-shadow:0 8px 28px rgba(230,0,45,0.12); } .actopt__hint{ position:absolute; top:-10px; left:22px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--red); padding:3px 9px; border-radius:999px; } .actopt__chip{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:rgba(60,0,95,0.08); color:var(--purple); align-self:flex-start; } .actopt__chip svg{ width:23px; height:23px; } .actopt__chip--red{ background:rgba(230,0,45,0.10); color:var(--red); } .actopt__title{ font-size:18px; font-weight:600; letter-spacing:-0.01em; } .actopt__text{ font-size:14px; color:var(--ink-soft); flex:1; } .actopt__cta{ font-family:var(--ff); font-size:14px; font-weight:500; color:var(--red); } .actopt__cta::after{ content:" →"; } .actmodal__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:8px 0 0; padding:14px 44px 40px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); } .actmodal__trust span{ display:inline-flex; align-items:center; gap:6px; } .actmodal__trust span+span::before{ content:"·"; margin-right:22px; color:var(--line,rgba(60,0,95,0.2)); } /* Rückruf-Formular */ .actmodal__form{ padding:24px 44px 44px; max-width:560px; margin:0 auto; } .actfield{ margin-bottom:14px; } .actfield label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px; } .actfield__opt{ color:var(--ink-faint); } .actfield-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .actmodal__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .actmodal__hint{ font-size:12px; color:var(--ink-faint); margin:12px 0 0; text-align:center; } .actmodal__note{ font-size:13px; color:var(--red); margin:12px 0 0; text-align:center; } .actmodal__note a{ color:var(--red); } /* Erfolg */ .actmodal__view[hidden]{ display:none; } /* schlägt display:flex der Center-View */ .actmodal__view--center{ text-align:center; padding:54px 44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; } .actmodal__check{ width:56px; height:56px; border-radius:50%; background:rgba(230,0,45,0.10); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:28px; } /* Calendly — füllt die Kalender-Ansicht vollständig, damit das transparente Calendly-iframe exakt so hoch ist wie sein Container (kein durchscheinender Spinner mehr) und das Modal nicht springt. */ .actmodal__view[data-view="calendar"]:not([hidden]){ display:flex; flex-direction:column; overflow:hidden; padding:14px 10px 12px; } /* Vorwärm-Zustand: lädt Calendly unsichtbar im Hintergrund, sobald das Modal öffnet. Volle Panel-Breite (position:absolute inset:0), damit Calendly korrekt misst; visibility:hidden hält es aus Fokus & a11y heraus. */ .actmodal__view[data-view="calendar"][data-prewarm]{ display:flex; flex-direction:column; overflow:hidden; padding:14px 10px 12px; position:absolute; inset:0; visibility:hidden; pointer-events:none; } .actmodal__calendly{ flex:1 1 auto; min-height:0; } .actmodal__calendly .calendly-inline-widget{ height:100% !important; min-width:0 !important; } .actmodal__calendly iframe{ height:100% !important; } .actmodal__calendly .calendly-spinner{ display:none !important; } @media (max-width:760px){ .actmodal{ padding:0; } .actmodal__panel{ width:100%; max-height:100vh; min-height:100vh; border-radius:0; } .actmodal__opts{ grid-template-columns:1fr; padding:22px 20px 8px; } .actmodal__head{ padding:52px 20px 6px; } .actmodal__form{ padding:20px; } .actmodal__trust{ padding:14px 20px 32px; } .actfield-row{ grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce){ .actmodal, .actmodal__panel{ transition:none; } .actopt:hover{ transform:none; } } /* ============================================================ ROOM-GRID (Raumgrößen als bildbetonte, klickbare Karten + Modal) Vier Karten nebeneinander (responsiv 4 → 2 → 1), gleich hoch. Klick auf die ganze Karte öffnet das Detail-Modal (großes Bild, Detailtext, empfohlenes Setup, „Passt, wenn …" + CTA). ============================================================ */ .roomgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; } .roomcard{ position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; cursor:pointer; text-align:left; transition:box-shadow .2s ease, transform .2s ease; } .roomcard:hover{ box-shadow:0 18px 50px rgba(60,0,95,0.14); transform:translateY(-3px); } .roomcard:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; } /* Illustration wie auf /loesungen/ (card__media--illu): freigestellt auf weißem Feld, contain + Padding */ .roomcard__media{ position:relative; aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; padding:14px 16px; border-bottom:1px solid var(--line); } .roomcard__media img{ width:100%; height:100%; object-fit:contain; display:block; } .roomcard__plus{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1; } .roomcard__more{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px 10px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--purple); text-align:center; background:linear-gradient(to top, rgba(255,255,255,0.96), rgba(255,255,255,0)); opacity:0; transition:opacity .2s ease; } .roomcard:hover .roomcard__more, .roomcard:focus-visible .roomcard__more{ opacity:1; } .roomcard__body{ display:flex; flex-direction:column; padding:20px 22px 24px; flex:1; } .roomcard__cap{ display:flex; align-items:baseline; gap:9px; margin:0 0 6px; } .roomcard__cap b{ font-size:21px; font-weight:700; line-height:1; letter-spacing:-0.02em; color:var(--purple); } .roomcard__cap span{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); } .roomcard__body .h3{ margin-bottom:8px; } .roomcard__lead{ color:var(--ink-soft); margin:0; font-size:14px; line-height:1.5; } @media (max-width:980px){ .roomgrid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .roomgrid{ grid-template-columns:1fr; } } /* ---- Detail-Modal (ein