/* ============================================================ JANDLsecure – Theme · "Cupertino" Edition Apple-inspiriertes Designsystem (light-first, viel Raum, große Typo, runde Ecken, weiche Schatten, Scroll-Motion). ============================================================ */ :root { /* --- Farben --- */ --ink: #000000; --ink-2: #0a0a0c; --ink-3: #16171b; --paper: #fbfbfd; --paper-2: #f5f5f7; --paper-3: #ececed; --card: #ffffff; --text: #1d1d1f; --strong: #1d1d1f; /* Überschriften/Icons – schaltet mit dem Modus */ --text-2: #424245; --text-dk: #d6d6db; --muted: #6e6e73; /* KORREKTUR 2026-07-20 (Accessibility-Audit, WCAG 2.1 AA): war #86868b, Kontrast gegen die hellen Papierfarben nur 3.3-3.6:1 (axe-core color-contrast, "serious"). Betraf u.a. .svc-code, .sg-measures-label, .foot-bottom .mono sitweit. Neuer Wert erreicht >=4.5:1 gegen alle verwendeten hellen Hintergruende (--paper/--paper-2/--card). */ --muted-2: #6b6b6f; --muted-dk: #98989d; /* Akzent folgt der in Ghost eingestellten accent_color (Branding-Editor) */ --amber: var(--ghost-accent-color, #DA9B31); --amber-lt: color-mix(in srgb, var(--amber) 74%, #ffffff); /* KORREKTUR 2026-07-20: war 80%-Mix (~3.4-3.7:1 Kontrast bei .eyebrow, .sg-pill-n, .sg-status-tag -- axe-core "serious"). 64%-Mix erreicht >=4.5:1 gegen alle verwendeten hellen Hintergruende, bleibt aber als Formel an --amber gekoppelt (falls der Marken-Akzent sich aendert). */ --amber-dk: color-mix(in srgb, var(--amber) 64%, #000000); /* KORREKTUR 2026-07-20: war #2b7cff (~3.55-3.86:1 bei .more-Links). */ --blue: #2569d9; /* Apple-typischer „Learn more"-Akzent (dezent) */ --good: #2fbf71; --line: rgba(0, 0, 0, 0.10); --line-2: rgba(0, 0, 0, 0.06); --line-dk: rgba(255, 255, 255, 0.12); /* --- Typo --- */ --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --f-disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* --- Form --- */ --wrap: 1120px; --r-sm: 12px; --r: 20px; --r-lg: 28px; --r-xl: 40px; --pill: 980px; --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06); --sh-2: 0 2px 8px rgba(0,0,0,.06), 0 24px 60px -20px rgba(0,0,0,.18); --sh-3: 0 40px 120px -30px rgba(0,0,0,.35); --ease: cubic-bezier(.2, .7, .2, 1); /* Header-Glas (schaltet im Dark-Mode) */ --header-bg: rgba(251, 251, 253, 0.72); --mobile-bg: rgba(251, 251, 253, 0.96); color-scheme: light; } /* ============================================================ DARK MODE · data-theme="dark" auf Nur neutrale Flächen + Text kippen; bewusst dunkle Sektionen (Hero, Technologie, CTA, Marquee) bleiben unverändert. ============================================================ */ :root[data-theme="dark"] { --paper: #000000; --paper-2: #101013; --paper-3: #1a1a1d; --card: #1c1c1f; --text: #f5f5f7; --strong: #ffffff; --text-2: #c7c7cc; --muted: #a1a1a6; --muted-2: #8e8e93; --amber-dk: color-mix(in srgb, var(--amber) 68%, #ffffff); --blue: #4a94ff; --line: rgba(255, 255, 255, 0.14); --line-2: rgba(255, 255, 255, 0.08); --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45); --sh-2: 0 2px 8px rgba(0,0,0,.45), 0 24px 60px -20px rgba(0,0,0,.7); --header-bg: rgba(10, 10, 12, 0.72); --mobile-bg: rgba(10, 10, 12, 0.96); color-scheme: dark; } @media (prefers-reduced-motion: no-preference) { html { transition: none; } body, .site-header, .bento-cell, .svc, .post, .step, .calc, .site-footer, .faq-q, .sec-head h2, .statement h2 { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--f-body); font-size: 17px; line-height: 1.6; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .wrap--narrow { max-width: 720px; } .wrap--wide { max-width: 1320px; } h1, h2, h3, h4 { font-family: var(--f-disp); text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.06; } a { color: inherit; text-decoration: none; } p { margin: 0; } .mono { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(218,155,49,.28); } /* ---------- eyebrow ---------- */ .eyebrow { display: inline-block; color: var(--amber-dk); font-family: var(--f-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none; margin-bottom: 16px; } .eyebrow.mono { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ---------- buttons (Apple-Pill) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--f-body); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--pill); cursor: pointer; text-transform: none; transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .btn:hover { transform: scale(1.035); } .btn:active { transform: scale(.98); } .btn-amber { background: var(--amber); color: #1a1206; box-shadow: 0 6px 22px -8px rgba(218,155,49,.7); } .btn-amber:hover { background: var(--amber-lt); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #1d1d1f; } .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); } .btn-ghost-dark { background: transparent; border-color: var(--line); color: var(--text); } .btn-ghost-dark:hover { border-color: var(--text); background: var(--paper-2); } .btn-lg { padding: 16px 34px; font-size: 1.08rem; } /* chevron „Mehr erfahren" link (Apple-Stil) */ .clink { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 500; font-size: 1.02rem; transition: gap .25s var(--ease); } .clink::after { content: "›"; font-size: 1.25em; line-height: 0; transform: translateY(1px); } .clink:hover { gap: 8px; } /* ---------- skip link ---------- */ .skip-link { position: absolute; top: -100px; left: 12px; z-index: 200; padding: 12px 20px; background: var(--amber); color: #1d1d1f; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; transition: top .2s var(--ease); } .skip-link:focus { top: 0; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); } .site-header.scrolled { border-bottom-color: var(--line-2); } .nav { display: flex; align-items: center; justify-content: space-between; height: 56px; } .brand { display: flex; align-items: center; gap: 9px; color: var(--text); padding: 8px 0; margin: -8px 0; } .brand .mark { width: 24px; height: 24px; flex: none; } .brand b { font-family: var(--f-disp); font-weight: 600; letter-spacing: -0.01em; font-size: 1.05rem; } .brand-logo-img { height: 30px; width: auto; max-width: 210px; display: block; } .foot-brand .brand-logo-img { height: 36px; } .brand-logo-swap { display: inline-flex; align-items: center; } .brand-logo-swap .brand-logo-dark { display: none; } :root[data-theme="dark"] .brand-logo-swap .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-swap .brand-logo-dark { display: block; } .brand .sub { color: var(--amber-dk); font-weight: 600; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { color: var(--text-2); font-size: 0.86rem; font-weight: 400; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-cta .btn { padding: 8px 18px; font-size: 0.86rem; } .burger { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 10px; margin: -10px; } /* ---------- Theme-Umschalter ---------- */ .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--text); cursor: pointer; padding: 0; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .theme-toggle:hover { background: var(--paper-2); transform: scale(1.06); } .theme-toggle:active { transform: scale(.94); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ico-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } .theme-toggle .tt-label { display: none; } .nav-mobile .theme-toggle { width: auto; height: auto; border-radius: var(--pill); padding: 12px 18px; gap: 10px; justify-content: flex-start; margin-top: 8px; } .nav-mobile .theme-toggle .tt-label { display: inline; font-size: 1rem; font-weight: 500; } .nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 24px 22px; background: var(--mobile-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line-2); } .nav-mobile a:not(.btn) { color: var(--text); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line-2); } .nav-mobile .btn { margin-top: 16px; justify-content: center; } .nav-mobile[hidden] { display: none; } .nav-mobile.open { display: flex; animation: navdrop .4s var(--ease); } @keyframes navdrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; text-align: center; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% -8%, rgba(218,155,49,.30), transparent 60%), radial-gradient(70% 60% at 15% 108%, rgba(43,124,255,.18), transparent 60%), radial-gradient(60% 50% at 88% 110%, rgba(218,155,49,.12), transparent 60%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; padding-block: clamp(90px, 14vw, 170px) clamp(40px, 6vw, 80px); } .hero .eyebrow { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 16px; border-radius: var(--pill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 500; margin-bottom: 28px; } .hero .eyebrow .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(47,191,113,.6); animation: pulse 2.4s infinite; } .hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; margin: 0 auto; max-width: 20ch; } .hero h1 .grad { background: linear-gradient(180deg, #F0BC5C 0%, #DA9B31 55%, #b47e1f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero-claim { margin: clamp(14px, 2vw, 22px) auto 0; font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; background: linear-gradient(180deg, #F0BC5C 0%, #DA9B31 60%, #b47e1f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero p.lead { margin: clamp(22px, 3vw, 34px) auto 0; max-width: 40ch; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4; color: rgba(255,255,255,.78); font-weight: 400; letter-spacing: -0.015em; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(30px, 4vw, 44px); } /* Produkt-„Hero-Device": Leitstellen-Karte */ .hero-stage { position: relative; z-index: 2; margin-top: clamp(20px, 5vw, 56px); display: flex; justify-content: center; padding-inline: 24px; } .ops { width: min(520px, 100%); background: linear-gradient(180deg, rgba(28,29,34,.9), rgba(10,10,12,.92)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 30px; position: relative; overflow: hidden; text-align: left; box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .ops .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: .85; animation: scan 4.5s linear infinite; } @keyframes scan { 0% { transform: translateY(0); } 100% { transform: translateY(340px); } } .ops-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted-dk); } .status { display: inline-flex; align-items: center; gap: 8px; color: #7FD6A0; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(47,191,113,.6); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,191,113,.5); } 70% { box-shadow: 0 0 0 9px rgba(47,191,113,0); } 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); } } @media (prefers-reduced-motion: reduce) { .ops .scan, .dot, .hero .eyebrow .dot { animation: none; } } .ops-big { font-family: var(--f-disp); font-weight: 600; font-size: 2rem; color: #fff; margin-top: 20px; letter-spacing: -0.02em; } .ops-tel { font-family: var(--f-mono); color: var(--amber-lt); font-size: 1.3rem; letter-spacing: 0.01em; margin-top: 6px; } .ops-rows { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.1); } .ops-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--text-dk); font-size: 0.92rem; } .ops-row span:first-child { color: var(--muted-dk); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } /* ---------- Cert-Marquee ---------- */ /* Ruhige, einzelne Qualifikationszeile (ersetzt das Laufband) */ .certline { background: var(--ink-2); color: #fff; padding-block: 16px; border-top: 1px solid var(--line-dk); } .certline .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 16px; text-align: center; } .certline-label { color: var(--muted-dk); } .certline-items { color: var(--text-dk); font-size: 0.82rem; letter-spacing: 0.1em; } .marquee { background: var(--ink-2); color: #fff; padding-block: 26px; overflow: hidden; position: relative; } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); } .marquee::after { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); } .marquee-label { text-align: center; color: var(--muted-dk); margin-bottom: 18px; } .marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 26s linear infinite; } .marquee-track span { color: var(--text-dk); font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; } .marquee-track span::before { content: "✓"; color: var(--amber); } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ============================================================ Section-Frame ============================================================ */ .block { padding-block: clamp(80px, 12vw, 160px); } .block--tight { padding-block: clamp(56px, 8vw, 100px); } .block--paper2 { background: var(--paper-2); } .sec-head { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; } .sec-head--left { margin-inline: 0; text-align: left; } .sec-head h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.03; color: var(--strong); } .sec-head p { color: var(--muted); margin-top: 20px; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.45; font-weight: 400; letter-spacing: -0.015em; } /* Großes Statement (Apple „Big Type") */ .statement { text-align: center; } .statement h2 { font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.05; color: var(--strong); max-width: 18ch; margin-inline: auto; letter-spacing: -0.03em; } .statement h2 .muted { color: var(--muted-2); } .statement p { color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 52ch; margin: 26px auto 0; } /* ============================================================ Bento-Grid ============================================================ */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .bento-cell { position: relative; background: var(--card); border-radius: var(--r-lg); padding: 34px; overflow: hidden; box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); display: flex; flex-direction: column; } .bento-cell:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .bento-cell.span-3 { grid-column: span 3; } .bento-cell.span-2 { grid-column: span 2; } .bento-cell.span-4 { grid-column: span 4; } .bento-cell.span-6 { grid-column: span 6; } .bento-cell.tall { min-height: 340px; } .bento-cell.dark { background: linear-gradient(150deg, var(--ink-3), var(--ink)); color: #fff; } .bento-cell.dark .bento-p { color: var(--text-dk); } .bento-cell.amber { background: linear-gradient(150deg, var(--amber-lt), var(--amber)); color: #1a1206; } .bento-cell.amber .bento-p { color: #3a2a08; } .bento-k { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .bento-cell.dark .bento-k { color: var(--amber-lt); } .bento-cell.amber .bento-k { color: #5a4310; } .bento-num { font-family: var(--f-disp); font-weight: 600; font-size: clamp(2.8rem, 6vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .bento-num em { font-style: normal; color: var(--amber-dk); } .bento-cell.dark .bento-num em { color: var(--amber-lt); } .bento-h { font-size: 1.5rem; margin: 6px 0 10px; letter-spacing: -0.02em; } .bento-p { color: var(--muted); font-size: 1rem; line-height: 1.5; } .bento-cell .clink { margin-top: auto; padding-top: 18px; } .bento-cell.dark .clink { color: #7fb0ff; } .bento-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--paper-2); display: grid; place-items: center; color: var(--strong); margin-bottom: 18px; } .bento-cell.dark .bento-ico { background: rgba(255,255,255,.08); color: #fff; } .bento-ico svg { width: 24px; height: 24px; } /* ============================================================ Services (runde Karten) ============================================================ */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .svc { background: var(--card); border-radius: var(--r-lg); padding: 34px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .svc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .svc-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--paper-2); display: grid; place-items: center; color: var(--strong); transition: background .3s var(--ease), color .3s var(--ease); } .svc:hover .svc-ico { background: var(--amber); color: #1a1206; } .svc-ico svg { width: 26px; height: 26px; } .svc-code { color: var(--muted-2); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; } .svc h3 { font-size: 1.4rem; color: var(--strong); letter-spacing: -0.02em; } .svc p { color: var(--muted); font-size: 1rem; line-height: 1.5; } .svc .more, .svc .clink { margin-top: auto; padding-top: 8px; color: var(--blue); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: gap .25s var(--ease); } .svc .more::after { content: "›"; font-size: 1.2em; line-height: 0; } .svc:hover .more { gap: 8px; } /* ============================================================ Technologie-Kapitel (dunkel, „Screenshot"-Mock) ============================================================ */ .tech { background: var(--ink); color: #fff; overflow: hidden; } .tech .sec-head h2 { color: #fff; } .tech .sec-head p { color: var(--text-dk); } .tech-stage { position: relative; margin-top: 20px; border-radius: var(--r-lg); background: linear-gradient(160deg, #14151a, #0a0a0c); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--sh-3); overflow: hidden; } .tech-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); } .tech-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3b40; } .tech-bar i:nth-child(1) { background: #ff5f57; } .tech-bar i:nth-child(2) { background: #febc2e; } .tech-bar i:nth-child(3) { background: #28c840; } .tech-bar span { margin-left: 12px; color: var(--muted-dk); font-family: var(--f-mono); font-size: 0.72rem; } .tech-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.06); } .tech-tile { background: #0d0e12; padding: 26px; } .tech-tile .tk { color: var(--muted-dk); font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .tech-tile .tv { font-family: var(--f-disp); font-weight: 600; font-size: 1.9rem; margin-top: 8px; letter-spacing: -0.02em; } .tech-tile .tv em { font-style: normal; color: var(--amber-lt); } .tech-tile .tl { width: 100%; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); margin-top: 16px; overflow: hidden; } .tech-tile .tl i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--amber), var(--amber-lt)); } .tech-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; margin-top: clamp(40px, 6vw, 72px); } .tech-feat h3 { color: #fff; font-size: 1.2rem; margin-bottom: 8px; } .tech-feat p { color: var(--muted-dk); font-size: 0.98rem; line-height: 1.5; } .tech-feat .k { color: var(--amber-lt); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 12px; } /* ============================================================ Ablauf / Steps ============================================================ */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; } .step { background: var(--card); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-1); position: relative; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--amber-dk); font-weight: 600; } .step h3 { font-size: 1.3rem; color: var(--strong); margin: 16px 0 10px; letter-spacing: -0.02em; } .step p { color: var(--muted); font-size: 0.98rem; line-height: 1.5; } /* ---------- Kurz erklärt / Answer-Block ---------- */ .aeo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .aeo-item { background: var(--card); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-1); border-top: 3px solid var(--amber); } .aeo-item h3 { font-size: 1.18rem; color: var(--strong); letter-spacing: -0.01em; margin-bottom: 10px; } .aeo-item p { color: var(--muted); font-size: 1rem; line-height: 1.55; } .aeo-item a { color: var(--amber-dk); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 940px) { .aeo { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .aeo { grid-template-columns: 1fr; } } /* ---------- Einsatzgebiete ---------- */ .regions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .region-col { background: var(--card); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--sh-1); } .region-k { color: var(--amber-dk); display: block; margin-bottom: 12px; } .region-col h3 { font-size: 1.6rem; color: var(--strong); letter-spacing: -0.02em; margin-bottom: 12px; } .region-col > p { color: var(--muted); font-size: 1rem; line-height: 1.5; } .region-cities { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; } .region-cities a { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--text); font-size: 0.92rem; font-weight: 500; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); } .region-cities a:hover { border-color: var(--amber); background: var(--paper-2); transform: translateY(-2px); } .region-more { color: var(--muted-2); font-size: 0.92rem; line-height: 1.6; } .region-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 28px; } .region-links { display: flex; flex-wrap: wrap; gap: 8px 22px; } @media (max-width: 940px) { .regions { grid-template-columns: 1fr; } } /* ---------- Regionale Landingpages ---------- */ .region-body { max-width: 900px; margin-inline: auto; } .region-body > .region-cities { margin: 24px 0; } .rp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0; } .rp-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 26px; box-shadow: var(--sh-1); } .rp-card h3 { font-size: 1.2rem; color: var(--strong); margin: 0 0 8px; letter-spacing: -0.01em; } .rp-card p { color: var(--muted); font-size: 0.98rem; margin: 0; line-height: 1.5; } .region-body .rp-lead { font-size: 1.28rem; line-height: 1.5; color: var(--text-2); } .region-body .rp-nearby { font-size: 0.98rem; color: var(--muted); background: var(--paper-2); border-radius: var(--r-sm); padding: 16px 20px; } .region-body ul { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .region-body ul li { position: relative; padding-left: 30px; color: var(--text-2); font-size: 1rem; line-height: 1.5; margin: 0; } .region-body ul li strong { color: var(--strong); } .region-body ul li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--amber); -webkit-mask: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4 10-11' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4 10-11' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Blockquote als hervorgehobener Inline-CTA auf Landing-/Regionalseiten */ .region-body blockquote { background: linear-gradient(150deg, var(--paper-2), var(--paper-3)); border-left: 4px solid var(--amber); border-radius: var(--r-sm); padding: 22px 26px; font-size: 1.1rem; font-style: normal; color: var(--text-2); } .region-body blockquote strong { color: var(--strong); } @media (max-width: 560px) { .region-body ul { grid-template-columns: 1fr; } } .rp-services { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 4px; } .region-related .region-cities { justify-content: flex-start; } @media (max-width: 640px) { .rp-cards { grid-template-columns: 1fr; } } /* ---------- stats band ---------- */ .statband { background: var(--paper-2); } .statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .statgrid .stat .n { font-family: var(--f-disp); font-weight: 600; font-size: clamp(2.8rem, 6vw, 4.6rem); letter-spacing: -0.04em; color: var(--strong); font-variant-numeric: tabular-nums; line-height: 1; } .statgrid .stat .n em { font-style: normal; color: var(--amber-dk); } .statgrid .stat .l { color: var(--muted); margin-top: 12px; font-size: 1rem; } /* ============================================================ FAQ (Accordion) ============================================================ */ .faq { max-width: 820px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: var(--strong); font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: -0.02em; padding: 26px 44px 26px 0; position: relative; display: block; } .faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.7rem; color: var(--muted); transition: transform .35s var(--ease); } .faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); color: var(--amber-dk); } .faq-a { overflow: hidden; max-height: 0; transition: max-height .4s var(--ease); } .faq-a-inner { padding: 0 44px 28px 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; } /* KORREKTUR 2026-07-20 (Accessibility-Audit, WCAG 2.1 SC 1.4.1): Links im Fließtext duerfen sich nicht nur per Farbe unterscheiden. */ .faq-a-inner a, .foot-brand p a { color: var(--amber-dk); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ Blog ============================================================ */ .blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; } .blog-head .sec-head { text-align: left; margin: 0; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .post { background: var(--card); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .post:hover { transform: translateY(-5px); box-shadow: var(--sh-2); } .post .thumb { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--paper-2); display: block; } .post .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .post:hover .thumb img { transform: scale(1.05); } .post .thumb i { position: absolute; inset: 0; background: linear-gradient(135deg, var(--ink-3), var(--ink)); } /* ---------- Generiertes Marken-Cover (ohne Feature-Image) ---------- */ .cover { --cg: 218, 155, 49; /* Akzent-Grundton (rgb) */ position: absolute; inset: 0; display: block; overflow: hidden; background: radial-gradient(120% 110% at 78% -20%, rgba(var(--cg), .34), transparent 58%), radial-gradient(90% 80% at 8% 120%, rgba(var(--cg), .12), transparent 60%), linear-gradient(150deg, #16171b, #060608); } .cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 85%); mask-image: linear-gradient(160deg, #000, transparent 85%); } .cover-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--cg), .9), transparent); animation: scan 5s linear infinite; } .cover-mark { position: absolute; right: -8%; bottom: -14%; width: 62%; height: auto; color: rgba(var(--cg), .5); filter: drop-shadow(0 8px 24px rgba(0,0,0,.4)); } .cover-tag { position: absolute; left: 16px; top: 16px; z-index: 2; color: #fff; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); padding: 6px 12px; border-radius: var(--pill); font-size: 0.66rem; } @media (prefers-reduced-motion: reduce) { .cover-scan { animation: none; } } /* Farbrotation über die Blog-Übersicht */ .blog-grid .post:nth-child(3n+2) .cover { --cg: 43, 124, 255; } .blog-grid .post:nth-child(3n+3) .cover { --cg: 47, 191, 113; } /* Cover als breiter Banner auf der Artikelseite */ .article-cover { position: relative; inset: auto; display: block; aspect-ratio: 21 / 9; border-radius: var(--r-lg); box-shadow: var(--sh-2); } .article-cover .cover-mark { width: 30%; right: 4%; bottom: -8%; } @media (max-width: 640px) { .article-cover { aspect-ratio: 16 / 9; } } .post .cat { position: absolute; left: 14px; top: 14px; z-index: 2; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #1d1d1f; padding: 6px 12px; border-radius: var(--pill); font-size: 0.66rem; } .post .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .post .meta { color: var(--muted-2); display: flex; gap: 14px; font-size: 0.68rem; } .post h3 { font-size: 1.28rem; color: var(--strong); line-height: 1.2; letter-spacing: -0.02em; } .post h3 a:hover { color: var(--amber-dk); } .post p { color: var(--muted); font-size: 0.96rem; line-height: 1.5; } .post .read { margin-top: auto; color: var(--blue); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; font-size: 0.95rem; transition: gap .25s var(--ease); } .post .read::after { content: "›"; font-size: 1.2em; line-height: 0; } .post:hover .read { gap: 8px; } /* pagination */ .pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--strong); } .pagination a:hover { color: var(--amber-dk); } .pagination .disabled { color: var(--muted); opacity: .5; } .pagination .page-count { color: var(--muted); } /* ============================================================ Page / Article Header ============================================================ */ .page-head { text-align: center; padding-block: clamp(80px, 11vw, 150px) clamp(30px, 5vw, 60px); } .page-head .eyebrow { color: var(--amber-dk); } .page-head h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; color: var(--strong); max-width: 16ch; margin-inline: auto; } .page-head p { color: var(--muted); margin: 22px auto 0; max-width: 60ch; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; } .article-head { text-align: center; padding-block: clamp(80px, 11vw, 140px) clamp(24px, 4vw, 44px); } .article-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 24px; font-size: 0.7rem; } .article-meta .cat-link { color: var(--amber-dk); } .article-head h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1.04; color: var(--strong); max-width: 20ch; margin-inline: auto; } .article-lead { color: var(--muted); font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 24px auto 0; max-width: 44ch; font-weight: 400; } .article-byline { margin-top: 24px; color: var(--muted-2); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .article-feature { margin-block: clamp(24px, 4vw, 48px); } .article-feature img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); } .article-feature figcaption { color: var(--muted); margin-top: 14px; text-align: center; } /* ---------- prose ---------- */ .post-content { padding-block: 20px 10px; font-size: 1.16rem; line-height: 1.72; color: var(--text-2); } .post-content > * + * { margin-top: 1.5em; } .post-content h2 { font-size: 1.9rem; color: var(--strong); margin-top: 2em; letter-spacing: -0.02em; } .post-content h3 { font-size: 1.4rem; color: var(--strong); margin-top: 1.7em; } .post-content a { color: var(--amber-dk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .post-content a:hover { color: var(--amber); } .post-content img, .post-content .kg-card { border-radius: var(--r); } .post-content blockquote { border-left: 4px solid var(--amber); padding: 4px 0 4px 26px; margin-left: 0; color: var(--strong); font-size: 1.4rem; font-style: normal; letter-spacing: -0.01em; line-height: 1.4; } .post-content ul, .post-content ol { padding-left: 1.3em; } .post-content li + li { margin-top: 0.5em; } .post-content code { font-family: var(--f-mono); background: var(--paper-2); padding: 2px 7px; font-size: 0.85em; border-radius: 6px; } .post-content pre { background: var(--ink); color: var(--text-dk); padding: 22px; overflow-x: auto; font-family: var(--f-mono); font-size: 0.9rem; border-radius: var(--r); } .post-content hr { border: 0; border-top: 1px solid var(--line); } .article-foot { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .tag-list { display: flex; flex-wrap: wrap; gap: 10px; } .tag { border: 1px solid var(--line); padding: 7px 15px; border-radius: var(--pill); color: var(--muted); font-size: 0.7rem; } .tag:hover { border-color: var(--amber); color: var(--strong); } .comments-wrap { padding-block: 20px 80px; } /* ============================================================ CTA ============================================================ */ .cta { background: var(--ink); color: #fff; text-align: center; position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 130% at 50% 120%, rgba(218,155,49,.28), transparent 62%), radial-gradient(50% 80% at 50% -20%, rgba(43,124,255,.14), transparent 60%); } .cta .inner { position: relative; z-index: 1; padding-block: clamp(80px, 12vw, 150px); } .cta h2 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; max-width: 16ch; margin-inline: auto; letter-spacing: -0.03em; } .cta p { color: rgba(255,255,255,.72); margin: 22px auto 38px; max-width: 46ch; font-size: clamp(1.1rem, 2vw, 1.35rem); } .cta-actions { justify-content: center; } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--paper-2); color: var(--muted); border-top: 1px solid var(--line-2); } .foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr 1fr 1.2fr; gap: 40px; padding-block: 70px 44px; } .site-footer h4 { color: var(--text); font-size: 0.82rem; letter-spacing: 0; text-transform: none; margin: 0 0 16px; font-weight: 600; } .foot-links { display: flex; flex-direction: column; gap: 12px; } .foot-links a { color: var(--muted); font-size: 0.92rem; transition: color .2s; } .foot-links a:hover { color: var(--text); } .foot-brand .brand { margin-bottom: 16px; } .foot-brand p { color: var(--muted); font-size: 0.92rem; max-width: 34ch; line-height: 1.6; } .foot-quali { color: var(--muted-2); font-size: 0.68rem; letter-spacing: 0.08em; margin-top: 10px; } .foot-contact { color: var(--muted); font-size: 0.92rem; line-height: 1.9; } .foot-contact a:hover { color: var(--text); } .foot-bottom { border-top: 1px solid var(--line-2); padding-block: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted-2); } .foot-bottom .mono { font-size: 0.68rem; } /* ============================================================ Reveal-Motion ============================================================ */ .reveal { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1000px) { .bento { grid-template-columns: repeat(4, 1fr); } .bento-cell.span-3, .bento-cell.span-4 { grid-column: span 4; } .bento-cell.span-2 { grid-column: span 2; } .tech-body { grid-template-columns: repeat(2, 1fr); } .tech-feats { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 940px) { .stats, .svc-grid, .steps { grid-template-columns: repeat(2, 1fr); } .statgrid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } .blog-grid { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } .nav-cta .btn:not(.burger) { display: none; } .burger { display: block; } } @media (max-width: 560px) { body { font-size: 16px; } .bento, .svc-grid, .steps, .statgrid, .foot-grid, .tech-body { grid-template-columns: 1fr; } .bento-cell.span-2, .bento-cell.span-3, .bento-cell.span-4 { grid-column: span 1; } .blog-head { align-items: flex-start; } } /* ============================================================ Koenig-Editor-Cards (Blog-Inhalte) ============================================================ */ .gh-content { position: relative; } .gh-content > * { margin-block: 0; } .gh-content > * + * { margin-top: 1.5em; } .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin-inline: calc(50% - 42.5vw); max-width: 1040px; left: 50%; transform: translateX(-50%); } .kg-width-full { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; left: 50%; transform: translateX(-50%); } .gh-content .kg-width-full img { width: 100%; border-radius: 0; } figure.kg-card { margin: 0; } .kg-image-card img { margin-inline: auto; } .kg-image-card figcaption, .kg-embed-card figcaption, .kg-gallery-card figcaption { text-align: center; color: var(--muted); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 12px; } .kg-gallery-container { display: flex; flex-direction: column; gap: 10px; max-width: 1040px; margin-inline: auto; } .kg-gallery-row { display: flex; flex-direction: row; gap: 10px; } .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .kg-bookmark-card, .kg-bookmark-card * { box-sizing: border-box; } .kg-bookmark-card { width: 100%; } .kg-bookmark-container { display: flex; min-height: 148px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; box-shadow: var(--sh-1); } .kg-bookmark-content { flex: 1 1 60%; display: flex; flex-direction: column; padding: 22px; overflow: hidden; } .kg-bookmark-title { font-weight: 600; color: var(--strong); } .kg-bookmark-description { margin-top: 10px; color: var(--muted); font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 0.8rem; color: var(--muted); } .kg-bookmark-icon { width: 20px; height: 20px; } .kg-bookmark-author::after { content: "•"; margin: 0 6px; } .kg-bookmark-thumbnail { flex: 1 1 33%; min-height: 148px; } .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .kg-callout-card { display: flex; gap: 12px; padding: 20px 24px; border-radius: var(--r-sm); } .kg-callout-card-emoji { font-size: 1.15rem; } .kg-callout-card-grey, .kg-callout-card-background-grey { background: var(--paper-2); } .kg-callout-card-white, .kg-callout-card-background-white { background: #fff; border: 1px solid var(--line); } .kg-callout-card-blue, .kg-callout-card-background-blue { background: #e3eef7; } .kg-callout-card-green, .kg-callout-card-background-green { background: #e3f2e8; } .kg-callout-card-yellow, .kg-callout-card-background-yellow { background: #faf3dd; } .kg-callout-card-red, .kg-callout-card-background-red { background: #f8e6e3; } .kg-callout-card-pink, .kg-callout-card-background-pink { background: #f8e3f0; } .kg-callout-card-purple, .kg-callout-card-background-purple { background: #ece3f8; } .kg-callout-card-accent, .kg-callout-card-background-accent { background: var(--amber); color: #1a1206; } /* Pastell-Callouts im Dark-Mode lesbar halten */ :root[data-theme="dark"] .kg-callout-card-blue, :root[data-theme="dark"] .kg-callout-card-background-blue, :root[data-theme="dark"] .kg-callout-card-green, :root[data-theme="dark"] .kg-callout-card-background-green, :root[data-theme="dark"] .kg-callout-card-yellow, :root[data-theme="dark"] .kg-callout-card-background-yellow, :root[data-theme="dark"] .kg-callout-card-red, :root[data-theme="dark"] .kg-callout-card-background-red, :root[data-theme="dark"] .kg-callout-card-pink, :root[data-theme="dark"] .kg-callout-card-background-pink, :root[data-theme="dark"] .kg-callout-card-purple, :root[data-theme="dark"] .kg-callout-card-background-purple, :root[data-theme="dark"] .kg-callout-card-white, :root[data-theme="dark"] .kg-callout-card-background-white { color: #1d1d1f; } .kg-button-card { display: flex; } .kg-button-card.kg-align-center { justify-content: center; } .kg-btn { display: inline-flex; align-items: center; padding: 13px 28px; font-family: var(--f-body); font-size: 1rem; font-weight: 500; background: var(--amber); color: #1a1206; border-radius: var(--pill); } .kg-header-card { padding: 64px 40px; text-align: center; background: var(--ink); color: #fff; border-radius: var(--r-lg); } .kg-signup-card { padding: 44px; background: var(--ink); color: #fff; border-radius: var(--r-lg); } .kg-signup-card input { padding: 12px; border-radius: var(--r-sm); } .kg-toggle-card { border: 1px solid var(--line); padding: 20px 24px; border-radius: var(--r-sm); } .kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .kg-audio-card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); padding: 14px; border-radius: var(--r-sm); } .kg-video-container { position: relative; } .kg-video-container video, .kg-embed-card iframe { max-width: 100%; border-radius: var(--r); } .kg-file-card { border: 1px solid var(--line); border-radius: var(--r-sm); } .kg-file-card-container { display: flex; justify-content: space-between; gap: 14px; padding: 18px; } .kg-product-card .kg-product-card-container { border: 1px solid var(--line); padding: 22px; border-radius: var(--r); } .kg-nft-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .kg-nft-card .kg-nft-card-container { padding: 16px; } .kg-nft-image-container img { width: 100%; } .kg-blockquote-alt { font-style: normal; font-size: 1.4rem; color: var(--strong); } @media (max-width: 640px) { .kg-gallery-row { flex-direction: column; } .kg-bookmark-container { flex-direction: column; } .kg-bookmark-thumbnail { min-height: 160px; } } /* ============================================================ Anfrage-Kalkulator (/angebot) ============================================================ */ .calc { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: clamp(24px, 4vw, 44px); } .calc-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 32px; padding: 0; counter-reset: step; flex-wrap: wrap; } .calc-steps li { counter-increment: step; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; padding-right: 8px; } .calc-steps li::before { content: counter(step); width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--muted); } .calc-steps li.is-active { color: var(--strong); } .calc-steps li.is-active::before { background: var(--amber); border-color: var(--amber); color: #1a1206; } .calc-panel h2 { font-size: 1.7rem; color: var(--strong); margin-bottom: 22px; letter-spacing: -0.02em; } .calc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .calc-choice { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); font: inherit; } .calc-choice:hover { border-color: var(--amber); transform: translateY(-3px); box-shadow: var(--sh-1); } .calc-choice svg { width: 32px; height: 32px; color: var(--strong); } .calc-choice-t { font-family: var(--f-disp); font-weight: 600; font-size: 1.2rem; color: var(--strong); letter-spacing: -0.02em; } .calc-choice-d { color: var(--muted); font-size: 0.92rem; } .calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .calc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .calc .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .calc .field label { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .calc input, .calc textarea, .calc select { font: inherit; padding: 13px 15px; border: 1px solid var(--line); background: var(--paper); color: var(--text); border-radius: var(--r-sm); width: 100%; transition: border-color .2s, box-shadow .2s; } .calc input:focus, .calc textarea:focus, .calc select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(218,155,49,.16); } .calc-estimate { margin-top: 26px; padding: 26px; background: var(--ink); color: #fff; border-radius: var(--r); } .calc-est-label { color: var(--amber-lt); } .calc-est-value { font-family: var(--f-disp); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; } .calc-est-note { color: var(--muted-dk); font-size: 0.85rem; margin: 12px 0 0; line-height: 1.5; } .calc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .muted-note { color: var(--muted); background: var(--paper-2); padding: 14px 18px; border-radius: var(--r-sm); font-size: 0.92rem; } .calc-hint { color: var(--muted); font-size: 0.66rem; margin: 4px 0 0; } .calc-error { color: #c0392b; margin-top: 14px; font-size: 0.92rem; } .calc-done { text-align: center; padding-block: 24px; } .calc-check { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: rgba(47,191,113,0.15); color: var(--good); display: grid; place-items: center; } .calc-check svg { width: 38px; height: 38px; } @media (max-width: 640px) { .calc-choices, .calc-fields, .calc-form-row { grid-template-columns: 1fr; } }