/* ========================================================================== ibx company, Designsystem „Architektonische Präzision" -------------------------------------------------------------------------- 1 Schriften 6 Kopf und Navigation 11 Listen und Index 2 Tokens hell 7 Abschnitte und Raster 12 Fakten, Ablauf, Datenfluss 3 Tokens dunkel 8 Bühne (Hero) 13 Referenzen, Beiträge 4 Grundlagen 9 Typografie im Inhalt 14 Formulare 5 Hilfsklassen 10 Bilder und Platzhalter 15 Fuß, 404, Druck Regeln: keine Rundungen, keine Verläufe, Linien 1px, Bewegung ≤ 200 ms. ========================================================================== */ /* 1 Schriften ------------------------------------------------------------ */ @font-face { font-family: "Geist"; src: url("../fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* 2 Tokens hell ---------------------------------------------------------- */ :root { --paper: #F3F1EC; /* Grundfläche, Kalkstein */ --paper-2: #E8E4DA; /* Stein, zweite Fläche */ --paper-3: #DCD7CB; /* Platzhalter, Tabellenkopf */ --surface: #FAF9F6; /* Felder, erhabene Flächen */ --ink: #11151C; /* Text, Linien stark */ --ink-2: #343A44; /* Fließtext */ --muted: #5B616B; /* Beschriftungen, Metadaten */ --line: #D2CDC1; /* Haarlinie */ --line-2: #B8B2A4; /* Haarlinie betont */ --panel: #1F2A3D; /* Markenblau (Navy der Marke), invertierte Flächen */ --panel-ink: #F2EFE8; --panel-muted: #AEB6C3; --panel-line: #34425A; --accent: #8B5310; /* Messing, textfähig auf Papier und Stein (≥ 4,9:1) */ --accent-soft: #E6A85A;/* Bernstein der Marke: Flächen, Schaltfläche, Grafik */ --mark: #B86F1C; /* Bernstein dunkler: Satzzeichen, Quadrate auf hell (≥ 3:1) */ --focus: #8B5310; --ok: #2F6B45; --error: #A3312A; --img-filter: none; --shadow-none: none; /* Typografie */ --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --fs-display: clamp(2.6rem, 0.6rem + 7.4vw, 9.5rem); --fs-h1: clamp(2.35rem, 1.1rem + 4.6vw, 5.75rem); --fs-h2: clamp(1.9rem, 1.15rem + 2.9vw, 4.1rem); --fs-h3: clamp(1.3rem, 1.05rem + 0.95vw, 1.95rem); --fs-h4: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); --fs-lead: clamp(1.13rem, 1.02rem + 0.42vw, 1.42rem); --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); --fs-small: 0.9375rem; --fs-label: 0.75rem; --lh-tight: 0.98; --lh-head: 1.08; --lh-body: 1.62; --measure: 64ch; /* Raster und Abstände (Basis 8) */ --max: 1520px; --gx: clamp(20px, 4.4vw, 72px); --gap: clamp(16px, 2vw, 32px); --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: clamp(64px, 8vw, 128px); --s-9: clamp(88px, 12vw, 192px); --header-h: 72px; --ease: cubic-bezier(.2, .6, .2, 1); --t: 160ms; color-scheme: light; } /* 3 Tokens dunkel -------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0D1015; --paper-2: #15181D; --paper-3: #1E2228; --surface: #171A20; --ink: #EEEAE2; --ink-2: #C8CBD0; --muted: #9AA0AA; --line: #272B33; --line-2: #3A3F49; --panel: #13213A; --panel-ink: #F2EFE8; --panel-muted: #A9B3C4; --panel-line: #2A3B57; --accent: #E6A85A; --accent-soft: #E6A85A; --mark: #E6A85A; --focus: #F0BC78; --ok: #7CC596; --error: #F08A80; --img-filter: brightness(.92) contrast(1.03); color-scheme: dark; } } :root[data-theme="dark"] { --paper: #0D1015; --paper-2: #15181D; --paper-3: #1E2228; --surface: #171A20; --ink: #EEEAE2; --ink-2: #C8CBD0; --muted: #9AA0AA; --line: #272B33; --line-2: #3A3F49; --panel: #13213A; --panel-ink: #F2EFE8; --panel-muted: #A9B3C4; --panel-line: #2A3B57; --accent: #E6A85A; --accent-soft: #E6A85A; --mark: #E6A85A; --focus: #F0BC78; --ok: #7CC596; --error: #F08A80; --img-filter: brightness(.92) contrast(1.03); color-scheme: dark; } /* 4 Grundlagen ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--paper); } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "ss01" 0, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } a:hover { text-decoration-thickness: 2px; } button, input, select, textarea { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; } ::selection { background: var(--accent-soft); color: #12161D; } strong, b { font-weight: 600; color: var(--ink); } abbr[title] { text-decoration: underline dotted; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .panel :focus-visible { outline-color: var(--accent-soft); } h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 500; margin: 0; text-wrap: balance; } p, ul, ol, dl, blockquote, figure, table { margin: 0; } p { text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 5 Hilfsklassen --------------------------------------------------------- */ .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--gx); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; font-weight: 500; text-decoration: none; } .skip-link:focus { top: 12px; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gx); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 450; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.4; } .label--ink { color: var(--ink); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Schaltflächen: rechteckig, eindeutig, mit Pfeil als Richtung */ .btn { --b-bg: var(--ink); --b-fg: var(--paper); display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 52px; padding: 14px 20px 14px 22px; background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bg); border-radius: 0; font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); } .btn::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t) var(--ease); } .btn:hover { --b-bg: var(--ink-2); text-decoration: none; } .btn:hover::after { transform: translateX(3px); } .btn--ghost { --b-bg: transparent; --b-fg: var(--ink); border-color: var(--ink); } .btn--ghost:hover { --b-bg: var(--ink); --b-fg: var(--paper); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: progress; } /* Textlink mit Pfeil */ .arrow-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; line-height: 1.3; } .arrow-link::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t) var(--ease); } .arrow-link:hover { border-bottom-width: 2px; padding-bottom: 2px; } .arrow-link:hover::after { transform: translateX(3px); } .panel .arrow-link { color: var(--panel-ink); } /* 6 Kopf und Navigation -------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); } .site-header__bar { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; } .brand svg { height: 26px; width: auto; } .brand__sub { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line-2); line-height: 1.25; } .nav-primary { margin-left: auto; } .nav-primary ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 1.9vw, 30px); } .nav-primary a { display: block; padding: 8px 0; text-decoration: none; color: var(--ink); font-size: 0.9375rem; font-weight: 450; border-bottom: 1px solid transparent; } .nav-primary a:hover { border-bottom-color: var(--ink); } .nav-primary .current-menu-item > a, .nav-primary .current-menu-ancestor > a, .nav-primary .current-page-ancestor > a, .nav-primary a[aria-current="page"] { border-bottom-color: var(--ink); } .nav-primary .menu-item--legal > a::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--accent-soft); vertical-align: 1px; } .header-tools { display: flex; align-items: center; gap: var(--s-3); } .header-cta { padding: 10px 14px 10px 16px; min-height: 42px; gap: 16px; font-size: 0.9375rem; } .lang-switch { display: flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: .06em; } .lang-switch a, .lang-switch span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 4px; text-decoration: none; color: var(--muted); } .lang-switch a:hover { color: var(--ink); } .lang-switch [aria-current="true"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); } .lang-switch .sep { min-width: 0; padding: 0; color: var(--line-2); } /* Darstellung: Automatisch, Hell, Dunkel */ .theme-switch { position: relative; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid transparent; color: var(--ink); cursor: pointer; } .icon-btn:hover { border-color: var(--line-2); } .icon-btn svg { width: 18px; height: 18px; } .theme-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 236px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); z-index: 60; } .theme-menu[hidden] { display: none; } .theme-menu__title { padding: 8px 10px 6px; } .theme-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); font-size: 0.9375rem; } .theme-option:hover { background: var(--paper-2); } .theme-option svg { width: 16px; height: 16px; flex: none; } .theme-option__check { margin-left: auto; opacity: 0; } .theme-option[aria-checked="true"] .theme-option__check { opacity: 1; } .theme-switch [data-icon] { display: none; } .theme-switch [data-icon="auto"] { display: block; } .theme-switch[data-mode="light"] [data-icon="auto"], .theme-switch[data-mode="dark"] [data-icon="auto"] { display: none; } .theme-switch[data-mode="light"] [data-icon="light"], .theme-switch[data-mode="dark"] [data-icon="dark"] { display: block; } .theme-menu__hint { padding: 8px 10px 6px; font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 6px; line-height: 1.45; } .theme-switch--inline { display: flex; border: 1px solid var(--line-2); width: max-content; } .theme-switch--inline button { padding: 9px 14px; background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: 0.875rem; border-right: 1px solid var(--line-2); } .theme-switch--inline button:last-child { border-right: 0; } .theme-switch--inline button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .panel .theme-switch--inline, .site-footer .theme-switch--inline { border-color: var(--panel-line); } .site-footer .theme-switch--inline button { color: var(--panel-muted); border-color: var(--panel-line); } .site-footer .theme-switch--inline button[aria-pressed="true"] { background: var(--panel-ink); color: var(--panel); } /* Menü: nur Schaltfläche „Menü“ (Zeichenstift: zwei Linien, Akzentpunkt) plus Erstgespräch, alle Breiten */ .header-tools { margin-left: auto; gap: clamp(10px, 1.4vw, 22px); } .menu-toggle { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 2px 0 8px; margin-right: -6px; background: transparent; border: 0; color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; } .menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Projektseiten: dezenter Link zurück zur Referenzübersicht, unter der Beschreibung (18.10.2026) */ .ref-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 6px 0; color: var(--ink); opacity: .62; text-decoration: none; transition: opacity 200ms ease; pointer-events: auto; /* Vollbild-Text hat pointer-events: none */ font-family: var(--mono); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; } .ref-back svg { flex: none; transition: transform 300ms var(--ease-arch); } .ref-back:hover, .ref-back:focus-visible { opacity: 1; } .ref-back:hover svg { transform: translateX(-3px); } .ref-back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .cs2h__text .ref-back, .cs__lead-col .ref-back { justify-self: start; } .mt-icon { width: 32px; height: 24px; overflow: visible; flex: none; } .mt-icon line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; fill: none; transform-box: view-box; transform-origin: 16px 12px; transition: transform 450ms var(--ease-arch), stroke-dashoffset 450ms var(--ease-arch); } .mt-icon .mt-b { stroke-dasharray: 22; stroke-dashoffset: 12; } .mt-icon .mt-d { fill: var(--accent-soft); transform-box: view-box; transition: transform 500ms var(--ease-arch); } .menu-toggle:hover .mt-b, .menu-toggle:focus-visible .mt-b { stroke-dashoffset: 0; } .menu-toggle:hover .mt-d, .menu-toggle:focus-visible .mt-d { transform: translateX(10px); } .menu-toggle.is-x .mt-a { transform: translateY(4px) rotate(45deg); } .menu-toggle.is-x .mt-b { stroke-dashoffset: 0; transform: translateY(-4px) rotate(-45deg); } .menu-toggle.is-x .mt-d { transform: translate(-1px, -4px); } /* Geöffnetes Menü: Panel unter der Schaltfläche (kein Vollbild). Kante zieht sich auf, Einträge steigen nacheinander ein. */ .mobile-nav { position: fixed; z-index: 70; top: var(--nav-top, var(--header-h)); right: max(var(--gx), calc((100% - var(--max)) / 2 + var(--gx))); width: min(540px, calc(100% - 2 * var(--gx))); } .mobile-nav[hidden] { display: none; } .mobile-nav__panel { position: relative; max-height: calc(100vh - var(--nav-top, var(--header-h)) - 16px); overflow-y: auto; background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); padding: clamp(18px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px) clamp(22px, 2.6vw, 32px); opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--ease-arch), transform 420ms var(--ease-arch); } .mobile-nav.is-open .mobile-nav__panel { opacity: 1; transform: none; } .mobile-nav__edge { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--accent-soft); transform: scaleY(0); transform-origin: top; transition: transform 700ms var(--ease-arch) 80ms; } .mobile-nav.is-open .mobile-nav__edge { transform: none; } .mobile-nav__body { display: grid; gap: clamp(22px, 3vh, 30px); } .mobile-nav__list { list-style: none; margin: 0; padding: 0; counter-reset: mnav; } .mobile-nav__list li { position: relative; counter-increment: mnav; } .mobile-nav__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-arch); } .mobile-nav__list a { display: flex; align-items: baseline; gap: 16px; padding: 11px 0; text-decoration: none; color: var(--ink); font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem); font-weight: 450; letter-spacing: -0.035em; line-height: 1.1; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-arch), transform 500ms var(--ease-arch), padding-left 300ms var(--ease-arch); } .mobile-nav__list a::before { content: counter(mnav, decimal-leading-zero); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .06em; color: var(--muted); min-width: 22px; transform: translateY(-0.55em); transition: color 250ms; } .mobile-nav__list a:hover, .mobile-nav__list a:focus-visible { padding-left: 10px; } .mobile-nav__list a:hover::before, .mobile-nav__list a:focus-visible::before, .mobile-nav__list .current-menu-item > a::before, .mobile-nav__list .current-page-ancestor > a::before, .mobile-nav__list a[aria-current="page"]::before { color: var(--accent); } .mobile-nav.is-open .mobile-nav__list li::after { transform: scaleX(1); } .mobile-nav.is-open .mobile-nav__list a { opacity: 1; transform: none; } .mobile-nav__list li:nth-child(1)::after, .mobile-nav__list li:nth-child(1) a { transition-delay: 60ms; } .mobile-nav__list li:nth-child(2)::after, .mobile-nav__list li:nth-child(2) a { transition-delay: 100ms; } .mobile-nav__list li:nth-child(3)::after, .mobile-nav__list li:nth-child(3) a { transition-delay: 140ms; } .mobile-nav__list li:nth-child(4)::after, .mobile-nav__list li:nth-child(4) a { transition-delay: 180ms; } .mobile-nav__list li:nth-child(5)::after, .mobile-nav__list li:nth-child(5) a { transition-delay: 220ms; } .mobile-nav__list li:nth-child(n+6)::after, .mobile-nav__list li:nth-child(n+6) a { transition-delay: 260ms; } .mobile-nav__list a:hover { transition-delay: 0s; } .mobile-nav__aside { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; opacity: 0; transition: opacity 500ms var(--ease-arch) 260ms; } .mobile-nav.is-open .mobile-nav__aside { opacity: 1; } .mobile-nav__block { display: grid; gap: 12px; justify-items: start; align-content: start; } .mobile-nav__block .btn { margin-top: 4px; } .mobile-nav__contact { line-height: 1.65; font-size: 0.9375rem; } .mobile-nav__contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); } .mobile-nav__contact a:hover { border-bottom-color: var(--ink); } .mobile-nav__contact span { color: var(--muted); } .mobile-nav__row { display: grid; gap: 12px; justify-items: start; } @media (max-width: 560px) { .mobile-nav__aside { grid-template-columns: 1fr; } .mobile-nav__list a { padding: 10px 0; } } @media (max-width: 560px) { .header-tools .header-cta { display: none; } } @media (prefers-reduced-motion: reduce) { .mobile-nav, .mobile-nav *, .mt-icon * { transition: none !important; } } @media (max-width: 640px) { :root { --header-h: 60px; } .brand__sub { display: none; } .brand svg { height: 22px; } } /* Pfad (Breadcrumb) */ .breadcrumb { padding-top: var(--s-5); } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--line-2); } .breadcrumb a { text-decoration: none; color: var(--muted); } .breadcrumb a:hover { color: var(--ink); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ink); } /* 7 Abschnitte und Raster ------------------------------------------------ */ .section { position: relative; padding-block: var(--s-8); background: var(--paper); } .section--tight { padding-block: var(--s-7); } .section--flush-top { padding-top: 0; } .section--stone { background: var(--paper-2); } .section--panel, .panel { background: var(--panel); color: var(--panel-muted); --ink: var(--panel-ink); --ink-2: #D3D7DE; --muted: var(--panel-muted); --line: var(--panel-line); --line-2: #46536A; --paper: var(--panel); --paper-2: #253042; --paper-3: #2C394D; --surface: #223043; --focus: var(--accent-soft); --accent: var(--accent-soft); } .section--panel h1, .section--panel h2, .section--panel h3, .section--panel h4 { color: var(--panel-ink); } .section + .section:not(.section--stone):not(.section--panel):not(.section--flush-top)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 2 * var(--gx)), calc(var(--max) - 2 * var(--gx))); border-top: 1px solid var(--line); } /* Kopfzeile eines Abschnitts: Index links, Titel, optionaler Text */ .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-4); margin-bottom: var(--s-7); align-items: start; } .sec-head__index { grid-column: 1 / span 3; padding-top: 0.65em; } .sec-head__index .label { display: flex; gap: 14px; } .sec-head__index .label b { color: var(--ink); font-weight: 500; } .sec-head__title { grid-column: 4 / span 9; } .sec-head__title h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.038em; max-width: 18ch; } .sec-head__text { grid-column: 4 / span 6; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); } .sec-head__text p + p { margin-top: 0.8em; } .sec-head--wide .sec-head__title h2 { max-width: 24ch; } .sec-head--label { margin-bottom: var(--s-5); } @media (max-width: 900px) { .sec-head__index, .sec-head__title, .sec-head__text { grid-column: 1 / -1; } .sec-head__index { padding-top: 0; } .sec-head { margin-bottom: var(--s-6); } } /* Freier Inhalt eines Abschnitts in Spalten 4 bis 12 */ .sec-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .sec-body > * { grid-column: 4 / span 9; } .sec-body > .full { grid-column: 1 / -1; } .sec-body > .prose { grid-column: 4 / span 7; } @media (max-width: 900px) { .sec-body > *, .sec-body > .prose { grid-column: 1 / -1; } } /* 8 Bühne (Hero) --------------------------------------------------------- */ .hero { position: relative; padding-top: clamp(40px, 7vw, 112px); padding-bottom: var(--s-8); overflow: hidden; } .hero__grid-lines { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--max); margin-inline: auto; padding-inline: var(--gx); } .hero__grid-lines span { border-left: 1px solid var(--line); opacity: .55; } .hero__grid-lines span:last-child { border-right: 1px solid var(--line); } .hero > .wrap { position: relative; } .hero__eyebrow { margin-bottom: var(--s-5); display: flex; align-items: center; gap: 14px; } .hero__eyebrow::before { content: ""; width: 28px; border-top: 1px solid var(--ink); } .hero__title { font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.052em; font-weight: 500; max-width: 15ch; hyphens: manual; } .hero__title em { font-style: normal; color: var(--muted); } .hero__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(32px, 4.5vw, 72px); align-items: end; row-gap: var(--s-5); } .hero__lead { grid-column: 1 / span 6; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 46ch; } .hero__lead p + p { margin-top: .75em; } .hero__actions { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); justify-content: flex-start; } .hero__media { margin-top: var(--s-8); } .hero--page .hero__title { font-size: var(--fs-h1); max-width: 18ch; letter-spacing: -0.045em; line-height: 0.98; } .hero--page { padding-top: clamp(28px, 4vw, 64px); padding-bottom: var(--s-7); } .hero--split .hero__row { align-items: start; } @media (max-width: 900px) { .hero__lead, .hero__actions { grid-column: 1 / -1; } .hero__grid-lines { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .hero__actions .btn { width: 100%; } } /* Bühne mit Kennzeile (Fakten unter dem Hero) */ .hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: var(--s-7); } .hero-facts > div { padding: 18px 20px 0 0; } .hero-facts > div + div { padding-left: 20px; border-left: 1px solid var(--line); } .hero-facts dt { margin-bottom: 6px; } .hero-facts dd { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.4; } @media (max-width: 900px) { .hero-facts { grid-template-columns: 1fr 1fr; } .hero-facts > div:nth-child(3) { padding-left: 0; border-left: 0; } .hero-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; } } /* 9 Typografie im Inhalt ------------------------------------------------- */ .prose { color: var(--ink-2); max-width: var(--measure); } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.1; letter-spacing: -0.03em; margin-top: 2.1em; } .prose h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; margin-top: 1.9em; } .prose h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; margin-top: 1.6em; } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.7em; } .prose ul, .prose ol { padding-left: 1.2em; } .prose li + li { margin-top: 0.45em; } .prose ul li::marker { color: var(--accent); content: "■ "; font-size: 0.6em; } .prose a { color: var(--ink); } .prose blockquote, .prose .wp-block-quote { border-left: 1px solid var(--ink); padding: 4px 0 4px 24px; margin-left: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); } .prose blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: var(--fs-small); color: var(--muted); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); } .prose th { font-weight: 500; color: var(--ink); border-bottom-color: var(--ink); } .prose .wp-block-table { overflow-x: auto; } .prose figure figcaption, .prose .wp-element-caption { margin-top: 10px; font-size: 0.8125rem; color: var(--muted); } .prose code { font-family: var(--mono); font-size: .9em; background: var(--paper-2); padding: 1px 5px; } .prose details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; } .prose details summary { cursor: pointer; color: var(--ink); font-weight: 500; } .prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; } .prose .wp-block-button__link { /* Kernblock-Schaltflächen erscheinen als .btn */ display: inline-flex; align-items: center; gap: 28px; min-height: 52px; padding: 14px 22px; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 0; font-weight: 500; } .prose .is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .lead, .prose .is-style-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); } .prose > p:first-child.is-style-lead { margin-top: 0; } /* 10 Bilder und Platzhalter ---------------------------------------------- */ .media { position: relative; margin: 0; } .media__frame { position: relative; overflow: hidden; background: var(--paper-3); } .media__frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); } .media__frame--contain { background: var(--paper-2); } .media__frame--contain img { object-fit: contain; padding: clamp(16px, 4%, 56px); filter: none; } .media--r169 .media__frame { aspect-ratio: 16 / 9; } .media--r21 .media__frame { aspect-ratio: 21 / 9; } .media--r32 .media__frame { aspect-ratio: 3 / 2; } .media--r43 .media__frame { aspect-ratio: 4 / 3; } .media--r45 .media__frame { aspect-ratio: 4 / 5; } .media--r11 .media__frame { aspect-ratio: 1 / 1; } .media__caption { display: flex; gap: 14px; align-items: baseline; margin-top: 12px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); } .media__caption .label { flex: none; } @media (max-width: 640px) { .media--r21 .media__frame { aspect-ratio: 4 / 3; } } /* Platzhalter: architektonische Konvention (Öffnung mit Diagonalen) */ .ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 2vw, 24px); background: linear-gradient(to top right, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px), var(--line-2) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px), var(--line-2) calc(50% + .5px), transparent calc(50% + .5px)), var(--paper-2); outline: 1px solid var(--line-2); outline-offset: -1px; color: var(--muted); } .ph__tag { align-self: flex-start; background: var(--paper-2); padding: 4px 8px; border: 1px solid var(--line-2); } .ph__text { align-self: flex-start; max-width: 36ch; background: var(--paper-2); padding: 10px 12px; border: 1px solid var(--line-2); font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); } .ph__text b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; } /* Geteilte Komposition: Bild und Text */ .split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-6); align-items: center; } .split__media { grid-column: 1 / span 7; } .split__body { grid-column: 9 / span 4; } .split--right .split__media { grid-column: 6 / span 7; order: 2; } .split--right .split__body { grid-column: 1 / span 4; order: 1; } .split--top { align-items: start; } .split__body h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; } .split__body h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; } .split__body > * + * { margin-top: 1rem; } .split__body .label + h2, .split__body .label + h3 { margin-top: 1.1rem; } .split__body .arrow-link, .split__body .btn { margin-top: 1.6rem; } @media (max-width: 900px) { .split__media, .split__body, .split--right .split__media, .split--right .split__body { grid-column: 1 / -1; order: initial; } } /* Großes Statement */ .statement { font-size: clamp(1.7rem, 1rem + 2.9vw, 3.6rem); line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); font-weight: 450; max-width: 26ch; text-wrap: balance; } .statement em { font-style: normal; color: var(--muted); } /* 11 Listen und Index ----------------------------------------------------- */ .index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: idx; } .index__item { border-bottom: 1px solid var(--line); counter-increment: idx; } .index__link, .index__static { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(22px, 2.6vw, 36px) 0; text-decoration: none; color: inherit; align-items: baseline; transition: background-color var(--t) var(--ease); } .index__num { grid-column: 1 / span 1; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; color: var(--muted); } .index__num::before { content: counter(idx, decimal-leading-zero); } .index__title { grid-column: 2 / span 5; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.35rem); line-height: 1.08; letter-spacing: -0.032em; color: var(--ink); font-weight: 500; } .index__text { grid-column: 7 / span 5; color: var(--ink-2); max-width: 52ch; } .index__text p + p { margin-top: .6em; } .index__tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; } .index__arrow { grid-column: 12 / span 1; justify-self: end; align-self: center; width: 22px; height: 22px; color: var(--ink); transition: transform var(--t) var(--ease); } .index__link:hover { background: var(--paper-2); } .index__link:hover .index__arrow { transform: translateX(4px); } .index__link:hover .index__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; } .index--compact .index__title { font-size: var(--fs-h3); } @media (min-width: 901px) { .index__link:hover { margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3); } } @media (max-width: 900px) { .index__num { grid-column: 1 / -1; margin-bottom: 10px; } .index__title { grid-column: 1 / span 11; } .index__arrow { grid-column: 12 / span 1; align-self: start; margin-top: 6px; } .index__text { grid-column: 1 / -1; margin-top: 12px; } } /* Raster mit Spalten (Leistungsfelder, Prinzipien) */ .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-6); } .cols > * { grid-column: span 4; } .cols--2 > * { grid-column: span 6; } .cols--4 > * { grid-column: span 3; } .col-item { border-top: 1px solid var(--ink); padding-top: 18px; } .col-item .label { display: block; margin-bottom: 18px; } .col-item h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.022em; } .col-item h3 a { text-decoration: none; } .col-item h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; } .col-item p { margin-top: 12px; } .col-item .arrow-link { margin-top: 18px; } @media (max-width: 1000px) { .cols > *, .cols--4 > * { grid-column: span 6; } } @media (max-width: 640px) { .cols > *, .cols--2 > *, .cols--4 > * { grid-column: 1 / -1; } } /* Merkmalliste mit Quadraten */ .ticks { list-style: none; margin: 0; padding: 0; } .ticks li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); } .ticks li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 8px; height: 8px; background: var(--accent); } .ticks li:first-child { border-top: 1px solid var(--line); } /* Schlagworte (eckig, nur Kontur) */ .tag { display: inline-block; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } .tag + .tag::before { content: "·"; margin-right: 14px; color: var(--line-2); } /* 12 Fakten, Ablauf, Datenfluss ------------------------------------------ */ .facts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--ink); } .fact { padding: 22px 24px 4px 0; } .fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); } .fact__value { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -0.05em; color: var(--ink); font-weight: 450; font-variant-numeric: tabular-nums; } .fact__label { margin-top: 14px; color: var(--ink-2); max-width: 30ch; } .fact__source { margin-top: 10px; } @media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .fact + .fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; } } .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--gap); counter-reset: step; } .step { border-top: 1px solid var(--ink); padding-top: 18px; counter-increment: step; position: relative; } .step__num { display: flex; justify-content: space-between; margin-bottom: 28px; min-height: 1.4em; } .step__num::before { content: counter(step, decimal-leading-zero); } .step h3 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.012em; } .step p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.55; } .step__out { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; color: var(--ink); } .step__out .label { display: block; margin-bottom: 4px; } @media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); } } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } } /* Datenfluss: Stationen mit Daten, Zugriff, Kontrolle */ .flow { border: 1px solid var(--line-2); counter-reset: flow; } .flow__row { counter-increment: flow; } .flow__n::before { content: counter(flow, decimal-leading-zero); } .flow__head, .flow__row { display: grid; grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .flow__head { background: var(--paper-2); border-bottom: 1px solid var(--line-2); } .flow__head > div { padding: 12px 16px; } .flow__row + .flow__row { border-top: 1px solid var(--line); } .flow__row > div { padding: 18px 16px; font-size: var(--fs-small); line-height: 1.5; } .flow__row > div + div, .flow__head > div + div { border-left: 1px solid var(--line); } .flow__n { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); white-space: nowrap; } .flow__title { color: var(--ink); font-weight: 500; font-size: 1rem; } .flow__title small { display: block; margin-top: 6px; font-weight: 400; color: var(--ink-2); font-size: var(--fs-small); } .flow__human { position: relative; } .flow__human.is-human::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 8px; vertical-align: 1px; } .flow__note { padding: 14px 16px; border-top: 1px solid var(--line-2); font-size: 0.8125rem; color: var(--muted); background: var(--paper-2); } .flow__mlabel { display: none; } @media (max-width: 900px) { .flow__head { display: none; } .flow__row { grid-template-columns: 40px minmax(0, 1fr); } .flow__row > div { padding: 14px 12px; } .flow__row > div { border-left: 0 !important; } .flow__row > div:nth-child(n+3) { grid-column: 2; padding-top: 0; } .flow__mlabel { display: block; margin-bottom: 4px; } } /* Zitat / Kundenstimme */ .quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .quote__mark { grid-column: 1 / span 3; } .quote__body { grid-column: 4 / span 8; } .quote blockquote { margin: 0; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.22; letter-spacing: -0.025em; color: var(--ink); font-weight: 450; text-wrap: pretty; } .quote figcaption { margin-top: var(--s-5); display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; } .quote figcaption b { color: var(--ink); font-weight: 500; } @media (max-width: 900px) { .quote__mark, .quote__body { grid-column: 1 / -1; } .quote__mark { margin-bottom: var(--s-4); } } /* Handlungsband */ .cta-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-5); align-items: end; } .cta-band__title { grid-column: 1 / span 8; } .cta-band__title h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.04em; max-width: 16ch; } .cta-band__title p { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; } .cta-band__actions { grid-column: 9 / span 4; display: grid; gap: var(--s-4); justify-items: start; } .cta-band__contact { display: grid; gap: 6px; font-size: var(--fs-small); } .cta-band__contact a { color: var(--ink); } @media (max-width: 900px) { .cta-band__title, .cta-band__actions { grid-column: 1 / -1; } } /* FAQ als Disclosure */ .faq { border-top: 1px solid var(--ink); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--s-4); align-items: center; padding: 22px 0; color: var(--ink); font-size: var(--fs-h4); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 14px; height: 14px; justify-self: end; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform var(--t) var(--ease); } .faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat; } .faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .faq__answer { padding: 0 0 26px; max-width: 70ch; } .faq__answer > * + * { margin-top: .8em; } /* 13 Referenzen, Beiträge ------------------------------------------------- */ .cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-8); } .case { grid-column: span 6; } .case--lead { grid-column: 1 / -1; } .case a { text-decoration: none; color: inherit; display: block; } .case__meta { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .case h3 { margin-top: 12px; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 26ch; } .case--lead h3 { font-size: var(--fs-h2); max-width: 22ch; line-height: 1.04; letter-spacing: -0.04em; } .case p { margin-top: 12px; max-width: 56ch; } .case a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; } .case .media__frame img { transition: transform 400ms var(--ease); } .case a:hover .media__frame img { transform: scale(1.015); } .case--lead .case__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .case--lead .case__grid > .media { grid-column: 1 / span 8; } .case--lead .case__grid > .case__text { grid-column: 9 / span 4; } @media (max-width: 900px) { .case { grid-column: 1 / -1; } .case--lead .case__grid > .media, .case--lead .case__grid > .case__text { grid-column: 1 / -1; } .case--lead .case__text { margin-top: 12px; } } .posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .post-row { border-bottom: 1px solid var(--line); } .post-row a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 24px 0; text-decoration: none; color: inherit; align-items: baseline; } .post-row__date { grid-column: 1 / span 2; } .post-row__title { grid-column: 3 / span 6; font-size: var(--fs-h4); line-height: 1.3; color: var(--ink); font-weight: 500; letter-spacing: -0.012em; } .post-row__cat { grid-column: 10 / span 3; justify-self: end; text-align: right; } .post-row a:hover .post-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } @media (max-width: 760px) { .post-row a { grid-template-columns: 1fr; row-gap: 8px; } .post-row__date, .post-row__title, .post-row__cat { grid-column: 1; justify-self: start; text-align: left; } } /* Artikelkopf und Artikel */ .article-head { padding-top: clamp(28px, 4vw, 64px); padding-bottom: var(--s-6); } .article-head h1 { font-size: clamp(2.1rem, 1.2rem + 3.3vw, 4.4rem); line-height: 1.02; letter-spacing: -0.042em; max-width: 22ch; margin-top: var(--s-4); } .article-head .lead { margin-top: var(--s-5); max-width: 52ch; } .article-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: var(--s-6); padding-top: 14px; border-top: 1px solid var(--line); } .article-meta div { display: grid; gap: 2px; } .article-meta dd { margin: 0; color: var(--ink); font-size: var(--fs-small); } .article-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .article-body > .prose { grid-column: 4 / span 7; max-width: none; } .article-body > aside { grid-column: 1 / span 2; } @media (max-width: 900px) { .article-body > .prose, .article-body > aside { grid-column: 1 / -1; } .article-body > aside { margin-bottom: var(--s-5); } } .case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); } .case-facts > div { padding: 16px 20px 0 0; } .case-facts > div + div { padding-left: 20px; border-left: 1px solid var(--line); } .case-facts dd { margin: 6px 0 0; color: var(--ink); line-height: 1.45; } @media (max-width: 900px) { .case-facts { grid-template-columns: 1fr 1fr; row-gap: 18px; } .case-facts > div:nth-child(3) { padding-left: 0; border-left: 0; } } /* Seitennavigation */ .pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: var(--s-7); padding-top: 18px; border-top: 1px solid var(--line); } .pager .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; text-decoration: none; font-family: var(--mono); font-size: .8125rem; } .pager .page-numbers.current { box-shadow: inset 0 -1px 0 var(--ink); color: var(--ink); } /* Filterleiste */ .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-6); } .filters a { padding: 9px 14px; border: 1px solid var(--line-2); text-decoration: none; font-size: .875rem; color: var(--ink-2); } .filters a:hover { border-color: var(--ink); color: var(--ink); } .filters a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Hinweisfeld (offene Punkte, Übersetzung fehlt) */ .notice { border: 1px solid var(--line-2); border-left: 3px solid var(--accent); padding: 14px 18px; background: var(--surface); font-size: var(--fs-small); color: var(--ink-2); } /* 14 Formulare ------------------------------------------------------------ */ .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--gap); } .field { display: grid; gap: 8px; align-content: start; } .field--full { grid-column: 1 / -1; } .field label, .field legend { color: var(--ink); font-weight: 500; font-size: .9375rem; padding: 0; } .field .opt { font-weight: 400; color: var(--muted); font-size: .8125rem; margin-left: 6px; } .field .hint { font-size: .8125rem; color: var(--muted); } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 0; font-size: 1rem; line-height: 1.4; transition: border-color var(--t) var(--ease); -webkit-appearance: none; appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%235D636E' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; } .field textarea { min-height: 160px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; } .field [aria-invalid="true"] { border-color: var(--error); } .field__error { color: var(--error); font-size: .875rem; display: flex; gap: 8px; align-items: baseline; } .field__error::before { content: "!"; font-family: var(--mono); font-weight: 600; } .field__error[hidden] { display: none; } .check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9375rem; color: var(--ink-2); } .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); } .form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s-5); } .form__status { grid-column: 1 / -1; padding: 18px 20px; border: 1px solid var(--line-2); background: var(--surface); } .form__status[hidden] { display: none; } .form__status h3 { font-size: var(--fs-h4); line-height: 1.3; } .form__status p, .form__status ul { margin-top: 8px; font-size: var(--fs-small); } .form__status ul { padding-left: 1.1em; } .form__status--ok { border-left: 3px solid var(--ok); } .form__status--error { border-left: 3px solid var(--error); } .form__status a { color: var(--ink); } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 700px) { .form { grid-template-columns: 1fr; } .form__foot .btn { width: 100%; } } /* Kontaktkarte neben dem Formular */ .contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-7); } .contact-grid__form { grid-column: 1 / span 7; } .contact-grid__aside { grid-column: 9 / span 4; } .contact-grid--intro .contact-grid__intro { grid-column: 1 / span 4; } .contact-grid--intro .contact-grid__intro p { max-width: 42ch; color: var(--ink-2); line-height: 1.6; } .contact-grid--intro .contact-grid__intro p + p { margin-top: 14px; } .contact-grid--intro .contact-grid__form { grid-column: 6 / -1; } /* Text links, Formular rechts (18.10.2026) */ .contact-card { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: var(--s-5); } .contact-card dl { display: grid; gap: var(--s-4); margin: 0; } .contact-card dd { margin: 4px 0 0; color: var(--ink); } .contact-card dd a { color: var(--ink); } .contact-person { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; } .contact-person .media__frame { aspect-ratio: 1; } @media (max-width: 900px) { .contact-grid__form, .contact-grid__aside, .contact-grid--intro .contact-grid__intro, .contact-grid--intro .contact-grid__form { grid-column: 1 / -1; } } /* 15 Fuß, 404, Druck ------------------------------------------------------ */ .site-footer { background: var(--panel); color: var(--panel-muted); padding-top: var(--s-8); padding-bottom: var(--s-5); --paper: var(--panel); --focus: var(--accent-soft); --ink: var(--panel-ink); --ink-2: #D3D7DE; --muted: var(--panel-muted); --line: var(--panel-line); --line-2: #46536A; } .site-footer a { color: var(--panel-ink); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-6); padding-bottom: var(--s-7); border-bottom: 1px solid var(--panel-line); } .footer-claim { grid-column: 1 / span 4; } .footer-claim .brand { color: var(--panel-ink); } .footer-claim .brand svg { height: 34px; } .footer-claim p { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.45; color: var(--panel-ink); max-width: 30ch; letter-spacing: -0.01em; } .footer-col { grid-column: span 2; } .footer-col--wide { grid-column: span 3; } .footer-col h2 { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--panel-muted); font-weight: 450; margin-bottom: 16px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; } .footer-col address { font-style: normal; font-size: .9375rem; line-height: 1.6; color: var(--panel-ink); } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; padding-top: var(--s-5); font-size: .8125rem; } .footer-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .footer-memberships { display: flex; flex-wrap: wrap; gap: 8px 22px; } .footer-tools { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; } .site-footer .lang-switch a { color: var(--panel-muted); } .site-footer .lang-switch [aria-current="true"] { color: var(--panel-ink); box-shadow: inset 0 -1px 0 var(--panel-ink); } @media (max-width: 1000px) { .footer-claim { grid-column: 1 / -1; } .footer-col, .footer-col--wide { grid-column: span 6; } } @media (max-width: 520px) { .footer-col, .footer-col--wide { grid-column: 1 / -1; } } .page-404 .hero__title { max-width: 14ch; } /* Ausgabe ohne Bewegung: Inhalte sind immer sichtbar. Dezentes Einblenden nur per Klasse .reveal, die site.js setzt, und nur ohne reduzierte Bewegung. */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } } @media print { .site-header, .site-footer, .hero__grid-lines, .theme-switch, .lang-switch, .skip-link, .btn::after { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } a { text-decoration: underline; } .section { padding-block: 24px; } .section--panel, .panel { background: #fff; color: #000; --ink: #000; --ink-2: #000; --muted: #333; } } /* Inhalt eines Abschnitts: Kernblöcke wie Fließtext, Module in voller Breite */ .sec-flow > * + * { margin-top: var(--s-5); } .sec-flow > p, .sec-flow > .wp-block-list, .sec-flow > h3, .sec-flow > h4, .sec-flow > blockquote, .sec-flow > details { max-width: var(--measure); } .sec-flow > p + p, .sec-flow > p + .wp-block-list, .sec-flow > .wp-block-list + p { margin-top: 1em; } .sec-flow > h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.1; letter-spacing: -0.03em; margin-top: var(--s-7); } .sec-flow > h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; margin-top: var(--s-6); } .sec-flow > h2 + *, .sec-flow > h3 + * { margin-top: 0.8em; } .sec-flow > .wp-block-list { padding-left: 1.2em; } .sec-flow > .wp-block-list li::marker { color: var(--accent); content: "■ "; font-size: 0.6em; } .sec-flow > .wp-block-list li + li { margin-top: .45em; } .sec-flow > .is-style-lead, .sec-flow > p.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); } .sec-flow > * + .index, .sec-flow > * + .cols, .sec-flow > * + .facts, .sec-flow > * + .steps, .sec-flow > * + .flow, .sec-flow > * + .split, .sec-flow > * + .cases-block { margin-top: var(--s-7); } .sec-flow .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; } .sec-flow .wp-block-button__link { display: inline-flex; align-items: center; min-height: 52px; padding: 14px 22px; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 0; font-weight: 500; } .sec-flow .is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .sec-body > .sec-flow.full { grid-column: 1 / -1; } .more-link { margin-top: var(--s-6); } .statement-block .label { margin-bottom: var(--s-4); } /* Inhaltsverzeichnis „Auf dieser Seite" */ .toc { border-top: 1px solid var(--ink); padding-top: 14px; } .toc ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--gap); } .toc li { border-bottom: 1px solid var(--line); } .toc a { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; text-decoration: none; color: var(--ink); } .toc a:hover span:last-child { text-decoration: underline; } /* Bildfläche-Breiten */ .media-block--offset { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .media-block--offset > .media { grid-column: 4 / span 9; } @media (max-width: 900px) { .media-block--offset > .media { grid-column: 1 / -1; } } .media-block--bleed { margin-inline: calc(-1 * var(--gx)); } .media-block--bleed .media__caption { padding-inline: var(--gx); } /* Kleine Bildflächen (Porträt im Kontaktfeld): Platzhalter ohne Text */ .contact-person .ph__tag, .contact-person .ph__text { display: none; } .contact-person .ph { padding: 0; } /* Terminbuchung (Modul): ins Designsystem eingepasst. Das Modul bringt eigenes Inline-CSS mit; hier werden Farben, Schrift und Ecken überschrieben. */ .booking-block { font-family: var(--font); color: var(--ink-2); } .booking-block .ibx-termin, .booking-block .ibx-termin * { font-family: inherit !important; border-radius: 0 !important; box-shadow: none !important; } .booking-block .ibx-termin { background: transparent !important; color: var(--ink-2) !important; padding: 0 !important; max-width: none !important; border: 0 !important; } .booking-block .ibx-termin h2, .booking-block .ibx-termin h3, .booking-block .ibx-termin h4 { color: var(--ink) !important; font-weight: 500 !important; letter-spacing: -0.015em; } .booking-block .ibx-termin-step { border-top: 1px solid var(--ink) !important; padding-top: 18px !important; margin-top: 0 !important; background: transparent !important; } .booking-block .ibx-termin-day, .booking-block .ibx-termin-slot { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; font-size: .9375rem !important; } .booking-block .ibx-termin-day:hover, .booking-block .ibx-termin-slot:hover { border-color: var(--ink) !important; } .booking-block .ibx-termin-day.is-active, .booking-block .ibx-termin-slot.is-active, .booking-block .ibx-termin-day[aria-pressed="true"], .booking-block .ibx-termin-slot[aria-pressed="true"], .booking-block .ibx-termin-day.active, .booking-block .ibx-termin-slot.active { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; } .booking-block .ibx-termin input, .booking-block .ibx-termin textarea, .booking-block .ibx-termin select { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; min-height: 48px; padding: 12px 14px !important; font-size: 1rem !important; } .booking-block .ibx-termin input[type="checkbox"] { min-height: 0; width: 20px; height: 20px; padding: 0 !important; accent-color: var(--ink); } .booking-block .ibx-termin-submit, .booking-block .ibx-termin button[type="submit"] { background: var(--ink) !important; color: var(--paper) !important; border: 1px solid var(--ink) !important; min-height: 52px; padding: 14px 22px !important; font-weight: 500 !important; cursor: pointer; } .booking-block .ibx-termin-submit:hover { background: var(--ink-2) !important; } .booking-block .ibx-termin a { color: var(--ink) !important; } .booking-block .ibx-termin-msg { border-left: 3px solid var(--accent) !important; background: var(--surface) !important; color: var(--ink) !important; } .booking-block__note { margin-bottom: var(--s-5); max-width: var(--measure); } /* Newsletter-Anmeldung */ .nl-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-5); align-items: end; border-top: 1px solid var(--ink); padding-top: var(--s-5); } .nl-block__text { grid-column: 1 / span 6; } .nl-block__title { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; } .nl-block__text p { margin-top: 10px; max-width: 46ch; } .nl-form, .nl-block > .form__status { grid-column: 8 / span 5; display: grid; gap: var(--s-4); } .nl-form__row { display: flex; gap: 0; } .nl-form__row input { flex: 1; min-width: 0; } .nl-form__row .btn { flex: none; } .nl-form .field input[type="email"] { width: 100%; min-height: 52px; padding: 13px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-right: 0; border-radius: 0; font-size: 1rem; } @media (max-width: 900px) { .nl-block__text, .nl-form, .nl-block > .form__status { grid-column: 1 / -1; } } .booking-block { max-width: 560px; } /* Tageszellen sind im Modul quadratisch; die Breite bestimmt ihre Größe */ .booking-block .ibx-termin-navlabel, .booking-block .ibx-termin-lead, .booking-block .ibx-termin-slotlabel, .booking-block .ibx-termin-chosen { color: var(--ink) !important; } .booking-block .ibx-termin-lead { color: var(--muted) !important; text-align: left !important; } .booking-block .ibx-termin-wdhead { color: var(--muted) !important; font-family: var(--mono) !important; font-size: .6875rem !important; letter-spacing: .06em; } .booking-block .ibx-termin-prev, .booking-block .ibx-termin-next, .booking-block .ibx-termin-back { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; } .booking-block .ibx-termin-prev[disabled], .booking-block .ibx-termin-next[disabled] { opacity: .35; } .booking-block .ibx-termin-day:disabled, .booking-block .ibx-termin-day-off, .booking-block .ibx-termin-day-full, .booking-block .ibx-termin-day-empty { background: transparent !important; border-color: transparent !important; color: var(--muted) !important; opacity: 1 !important; font-weight: 400 !important; } .booking-block .ibx-termin-wdhead, .booking-block .ibx-termin-wdhead * { color: var(--muted) !important; } .booking-block .ibx-termin-day-empty { visibility: hidden; } .booking-block .ibx-termin-day:not(:disabled):not(.ibx-termin-day-off):not(.ibx-termin-day-full) { font-weight: 600 !important; } .booking-block .ibx-termin-msg.err { border-left-color: var(--error) !important; } /* ========================================================================== 16 Ausbaustufe 2: Identität, Systemplan, Zugänge, Projekte -------------------------------------------------------------------------- Wiedererkennung über drei Mittel: Bernstein als einzige Akzentfarbe (Quadrat, Satzzeichen, Bestand im Systemplan, Hauptschaltfläche), das Achsraster aus der Architekturzeichnung (Achsen A bis E mit Kennung im Quadrat) und Produktansichten im immer gleichen Rahmen. ========================================================================== */ .section--panel, .panel, .site-footer { --mark: var(--accent-soft); } /* Überschriften brechen nie mitten im Wort. Größen sind so gewählt, dass die längsten Wörter passen; die Prüfung läuft automatisch (tools/check-layout). */ h1, h2, h3, h4, .hero__title, .statement, .index__title, .fact__value, .project__title, .path__title, .case h3, .svc-list__title, .trust__name { overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; } .pt { color: var(--mark); } /* Quadrat der Marke */ .sq { display: inline-block; width: 8px; height: 8px; background: var(--mark); flex: none; } /* Abschnittsnummer mit Quadrat */ .sec-head__index .label { align-items: center; } .sec-head__index .label b { display: inline-flex; align-items: center; gap: 10px; } .sec-head__index .label b::before { content: ""; width: 8px; height: 8px; background: var(--mark); } /* Hauptnavigation: aktiver Punkt in Bernstein */ .nav-primary .current-menu-item > a, .nav-primary .current-menu-ancestor > a, .nav-primary .current-page-ancestor > a, .nav-primary a[aria-current="page"] { border-bottom: 2px solid var(--mark); padding-bottom: 7px; } .nav-primary .menu-item--legal > a::before { background: var(--mark); } /* Schaltflächen */ .btn--accent { --b-bg: var(--accent-soft); --b-fg: #11151C; border-color: var(--accent-soft); } .btn--accent:hover { --b-bg: #F0BC78; border-color: #F0BC78; } .btn--line { --b-bg: transparent; --b-fg: var(--ink); border-color: var(--ink); } .btn--line:hover { --b-bg: var(--ink); --b-fg: var(--paper); } /* Hero: Achsraster mit Kennung, ruhigere Proportionen */ .hero__grid-lines { counter-reset: axis; } .hero__grid-lines span { position: relative; counter-increment: axis; opacity: 1; border-left-color: color-mix(in srgb, var(--line) 70%, transparent); } .hero__grid-lines span::before { content: counter(axis, upper-alpha); position: absolute; top: 14px; left: -12px; width: 23px; height: 23px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); border: 1px solid var(--line-2); background: var(--paper); } .hero--home { padding-top: clamp(72px, 9vw, 152px); } .hero--home .hero__title { font-size: clamp(2.7rem, 0.9rem + 7vw, 9rem); line-height: 0.94; max-width: 11ch; } .hero__eyebrow::before { border-top: 0; width: 8px; height: 8px; background: var(--mark); } .hero__lead { color: var(--ink-2); } .hero__media--shot { margin-top: clamp(56px, 7vw, 112px); } @media (max-width: 900px) { .hero__grid-lines span::before { display: none; } } /* Produktansicht: Desktop auf ruhigem Grund, Mobil steht unten rechts über */ .shot { margin: 0; } .shot__stage { position: relative; background: var(--paper-2); padding: clamp(18px, 5%, 72px) clamp(18px, 8%, 120px); outline: 1px solid var(--line); outline-offset: -1px; } .section--stone .shot__stage { background: var(--paper-3); } .panel .shot__stage, .section--panel .shot__stage { background: #26334A; outline-color: var(--panel-line); } .shot__desk { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; outline: 1px solid var(--line-2); } .shot__desk img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .shot__mobile { position: absolute; right: clamp(10px, 3%, 48px); bottom: clamp(-1px, 2%, 32px); width: clamp(84px, 19%, 240px); aspect-ratio: 9 / 17; overflow: hidden; background: #fff; outline: 1px solid var(--line-2); box-shadow: 0 0 0 6px var(--paper-2); } .section--stone .shot__mobile { box-shadow: 0 0 0 6px var(--paper-3); } .shot__mobile img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .shot--duo .shot__stage { padding-right: clamp(40px, 16%, 220px); } .shot__cap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 12px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); } .shot__cap .label { color: var(--ink); } .shot__cap .label::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--mark); margin-right: 8px; vertical-align: 1px; } .media--r1610 .media__frame { aspect-ratio: 16 / 10; } /* Vertrauensbereich */ .trust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-4); align-items: start; } .trust__label { grid-column: 1 / span 3; display: flex; align-items: center; gap: 10px; padding-top: 20px; } .trust__list { grid-column: 4 / span 9; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); } .trust__list li { border-bottom: 1px solid var(--line); } .trust__list li:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); } .trust__list a, .trust__list li > .trust__name { text-decoration: none; color: inherit; } .trust__list a, .trust__list li { display: block; } .trust__list a, .trust__list li:not(:has(a)) { padding: 18px 18px 18px 0; } .trust__list li:not(:nth-child(3n+1)) a, .trust__list li:not(:nth-child(3n+1)):not(:has(a)) { padding-left: 18px; } .trust__name { display: block; color: var(--ink); font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; } .trust__meta { display: block; margin-top: 6px; } .trust__list a:hover .trust__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; } .trust__note { grid-column: 4 / span 9; font-size: var(--fs-small); color: var(--muted); max-width: 70ch; } @media (max-width: 900px) { .trust__label, .trust__list, .trust__note { grid-column: 1 / -1; } .trust__label { padding-top: 0; } .trust__list { grid-template-columns: 1fr 1fr; } .trust__list li:not(:nth-child(3n+1)) { border-left: 0; } .trust__list li:nth-child(even) { border-left: 1px solid var(--line); } .trust__list li:not(:nth-child(3n+1)) a, .trust__list li:not(:nth-child(3n+1)):not(:has(a)) { padding-left: 0; } .trust__list li:nth-child(even) a, .trust__list li:nth-child(even):not(:has(a)) { padding-left: 14px; } } /* Systemplan */ .sysplan-block { display: grid; gap: var(--s-7); } .sysplan { margin: 0; } .sysplan__svg { width: 100%; height: auto; overflow: visible; } .sysplan__svg text { font-family: var(--font); } .sp-t { font-size: 15px; fill: var(--ink); font-weight: 450; letter-spacing: -0.01em; } .sp-t--person { font-size: 14px; fill: var(--ink-2); } .sp-t--human { fill: #11151C; font-weight: 550; } .sp-row { font-family: var(--mono) !important; font-size: 11.5px; letter-spacing: .08em; fill: var(--muted); } .sp-row-n { fill: var(--ink); } .sp-row--bus { fill: var(--accent); } .sp-note { font-family: var(--mono) !important; font-size: 11px; letter-spacing: .06em; fill: var(--accent); text-transform: uppercase; } .sp-axis { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 6; } .sp-axis-tag { fill: var(--paper); stroke: var(--line-2); } .section--stone .sp-axis-tag { fill: var(--paper-2); } .sp-axis-t { font-family: var(--mono) !important; font-size: 11px; fill: var(--muted); } .sp-floor { stroke: var(--line); stroke-width: 1; } .sp-link { stroke: var(--ink); stroke-width: 1; } .sp-flow { stroke: var(--ink); stroke-width: 1.2; } .sp-head { fill: none; stroke: var(--ink); stroke-width: 1.2; } .sp-person { fill: none; stroke: var(--ink); stroke-width: 1.5; } .sp-step { fill: var(--paper); stroke: var(--ink); stroke-width: 1; } .section--stone .sp-step { fill: var(--paper-2); } .sp-step.is-human { fill: var(--accent-soft); stroke: var(--accent-soft); } .sp-soft { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; } .sp-bus { stroke: var(--accent-soft); stroke-width: 3; } .sp-joint { fill: var(--accent-soft); } @media (prefers-reduced-motion: no-preference) { .js .sysplan.reveal { opacity: 1; transform: none; } .js .sysplan .sp-link, .js .sysplan .sp-flow { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 900ms var(--ease); } .js .sysplan.is-in .sp-link, .js .sysplan.is-in .sp-flow { stroke-dashoffset: 0; } } .sysplan__list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 899px) { .sysplan__svg { display: none; } .sysplan__list { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; gap: var(--s-5); } .sysplan__group { border-top: 1px solid var(--ink); padding-top: 12px; } .sysplan__group .label b { color: var(--ink); font-weight: 500; margin-right: 8px; } .sysplan__group ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sysplan__group li { border: 1px solid var(--line-2); padding: 10px 12px; color: var(--ink); font-size: .9375rem; line-height: 1.3; background: var(--surface); } .sysplan__group li.is-human { background: var(--accent-soft); border-color: var(--accent-soft); color: #11151C; font-weight: 550; grid-column: 1 / -1; } .sysplan__human { display: block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 450; margin-top: 2px; } .sysplan__bus { border-top: 3px solid var(--accent-soft); padding-top: 10px; color: var(--accent); } } /* Wirkung unter dem Systemplan */ .benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-5); counter-reset: ben; } .benefits li { border-top: 1px solid var(--ink); padding-top: 16px; counter-increment: ben; } .benefits li::before { content: counter(ben, decimal-leading-zero); display: block; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; color: var(--muted); margin-bottom: 18px; } .benefits h3 { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.25; letter-spacing: -0.012em; } .benefits p { margin-top: 8px; font-size: var(--fs-small); line-height: 1.55; } @media (max-width: 1100px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .benefits { grid-template-columns: 1fr; } .benefits li::before { margin-bottom: 8px; } } /* Zugänge: zwei gleichwertige Flächen */ .paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .path { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 4.2vw, 72px); background: var(--paper-2); min-height: clamp(420px, 44vw, 640px); container-type: inline-size; } .path--paper { background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px; } .path--panel { background: var(--panel); } .path__label { display: flex; align-items: center; gap: 10px; } .path__title { margin-top: clamp(28px, 4vw, 64px); font-size: clamp(2rem, 9cqi, 3.9rem); line-height: 1.0; letter-spacing: -0.042em; max-width: 13ch; } .path__text { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 36ch; } .path__text p + p { margin-top: .6em; } .path__items { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--line-2); } .path__items li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); position: relative; color: var(--ink); font-size: .9375rem; } .path__items li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 7px; height: 7px; background: var(--mark); } .path__more { margin-top: auto; padding-top: var(--s-6); } @media (max-width: 900px) { .paths { grid-template-columns: 1fr; } .path { min-height: 0; } } /* Ausgewählte Projekte: drei Kompositionen im selben Raster */ .projects { display: grid; row-gap: var(--s-9); } .project { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-5); align-items: start; } .project__head { container-type: inline-size; } .project__meta { display: flex; gap: 18px; margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--ink); } .project__meta span:first-child { color: var(--ink); } .project__title { font-size: clamp(1.75rem, 10cqi, 3.5rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 16ch; text-wrap: balance; } .project__title a { text-decoration: none; color: inherit; } .project__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; } .project__facts { display: grid; gap: var(--s-4); margin: 0; } .project__facts dt { margin-bottom: 4px; } .project__facts dd { margin: 0; color: var(--ink-2); max-width: 44ch; } .project__more { margin-top: var(--s-5); } /* 0: breit, Text darunter in zwei Spalten */ .project--v0 .project__media { grid-column: 1 / -1; } .project--v0 .project__head { grid-column: 1 / span 6; } .project--v0 .project__body { grid-column: 8 / span 5; padding-top: 14px; border-top: 1px solid var(--line); } /* 1: Bild rechts groß, Text links schmal */ .project--v1 .project__media { grid-column: 5 / span 8; grid-row: 1 / span 2; } .project--v1 .project__head { grid-column: 1 / span 4; grid-row: 1; } .project--v1 .project__body { grid-column: 1 / span 4; grid-row: 2; align-self: end; } /* 2: Bild links, Text rechts, mit freier Fläche oben */ .project--v2 .project__media { grid-column: 1 / span 7; grid-row: 1 / span 2; } .project--v2 .project__head { grid-column: 9 / span 4; grid-row: 1; padding-top: clamp(0px, 6vw, 96px); } .project--v2 .project__body { grid-column: 9 / span 4; grid-row: 2; align-self: end; } @media (max-width: 1000px) { .project--v1 .project__media, .project--v2 .project__media, .project--v1 .project__head, .project--v2 .project__head, .project--v1 .project__body, .project--v2 .project__body, .project--v0 .project__head, .project--v0 .project__body { grid-column: 1 / -1; grid-row: auto; padding-top: 0; } .project--v0 .project__body { border-top: 0; } } /* Leistungen kompakt in zwei Spalten */ .svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); border-top: 1px solid var(--ink); } .svc-list li { border-bottom: 1px solid var(--line); } .svc-list a { display: grid; grid-template-columns: minmax(0, 1fr) 22px; column-gap: var(--s-4); row-gap: 6px; padding: 22px 0; text-decoration: none; color: inherit; } .svc-list__title { color: var(--ink); font-size: var(--fs-h4); line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; } .svc-list__text { grid-column: 1; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); max-width: 46ch; } .svc-list__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; color: var(--ink); transition: transform var(--t) var(--ease); } .svc-list a:hover .svc-list__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; } .svc-list a:hover .svc-list__arrow { transform: translateX(4px); } @media (max-width: 760px) { .svc-list { grid-template-columns: 1fr; } } /* Kontaktabschluss mit Ansprechpartner */ .cta-section { padding-block: var(--s-9); } .cta-section .cta-band__title h2 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5.6rem); line-height: 0.98; letter-spacing: -0.048em; max-width: 13ch; } .cta-band__actions { align-content: end; } .cta-person { display: grid; gap: var(--s-4); margin: var(--s-3) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); width: 100%; } .cta-person dt { margin-bottom: 4px; } .cta-person dd { margin: 0; color: var(--ink); display: grid; gap: 2px; } .cta-person dd span { color: var(--muted); font-size: var(--fs-small); } .cta-person a { color: var(--ink); } /* Referenzkarten: Titelgröße folgt der Spaltenbreite */ .case { container-type: inline-size; } .case h3 { font-size: clamp(1.3rem, 6.4cqi, 2.1rem); } .case--lead h3 { font-size: clamp(1.8rem, 5.2cqi, 4.1rem); } /* Abschnittsrhythmus: Kopf knapper, wenn ein Modul direkt folgt */ .section--intro { padding-top: var(--s-7); padding-bottom: var(--s-7); } .case--lead .case__text { container-type: inline-size; } .case--lead h3 { font-size: clamp(1.6rem, 9cqi, 3.4rem); } /* Hero: bewusste Umbrüche (Zeilenumbruch im Feld) statt schmaler Spalte */ .hero--home .hero__title { max-width: 17ch; } @media (max-width: 640px) { .hero--home .hero__title br { display: none; } .hero--home .hero__title { max-width: 10ch; } } /* Fußzeile setzt sich vom Kontaktabschluss (Navy) ab: tiefer, fast schwarz */ .site-footer { --panel: #10151F; background: #10151F; --line: #262E3D; --panel-line: #262E3D; border-top: 4px solid var(--accent-soft); } :root[data-theme="dark"] .site-footer { background: #07090C; --panel: #07090C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { background: #07090C; --panel: #07090C; } } .site-footer .footer-top { border-bottom-color: #262E3D; } .t-name { display: block; } .project__title .t-name, .case h3 .t-name { color: var(--ink); } .project__title .t-claim, .case h3 .t-claim { color: var(--ink-2); } /* Elternpunkt nicht markieren, wenn der Unterpunkt selbst im Menü steht (Leistungen › Legal Tech) */ .nav-primary li.current-page-ancestor:has(~ li.current-menu-item) > a, .nav-primary li.current-menu-ancestor:has(~ li.current-menu-item) > a { border-bottom-color: transparent; padding-bottom: 8px; border-bottom-width: 1px; } .project--v0 .project__title { font-size: clamp(1.75rem, 8cqi, 3.1rem); max-width: 20ch; } .hero__eyebrow { align-items: baseline; } .hero__eyebrow::before { flex: none; transform: translateY(-1px); } /* ========================================================================== 17 Bildgeführte Komposition (Art Direction 17.10.2026, hat Vorrang) Architektur entsteht durch Proportion, Ausschnitt und Freifläche, nicht durch Rasterlinien. Bernstein nur noch für Hauptschaltfläche und die Erfassungs-Markierungen im Hero. ========================================================================== */ :root { --fs-body: clamp(0.975rem, 0.95rem + 0.1vw, 1.0625rem); --fs-lead: clamp(1.0625rem, 1rem + 0.22vw, 1.1875rem); --fs-h2: clamp(1.75rem, 1.15rem + 1.9vw, 3.1rem); --ease-arch: cubic-bezier(.22, .61, .21, 1); --img-filter: none; } :root[data-theme="dark"] { --img-filter: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --img-filter: none; } } /* Zurücknehmen: Rasterlinien, Achskennungen, Quadrate, farbige Satzzeichen */ .hero__grid-lines { display: none; } .pt { color: inherit; } .sq, .hero__eyebrow::before, .sec-head__index .label b::before { display: none; } .sec-head__text { font-size: var(--fs-lead); max-width: 52ch; } .sec-head__title h2 { letter-spacing: -0.032em; } /* Raster mit Randspalten: Bilder dürfen in die Randspalte bis an die Browserkante */ .bleed, .hp__grid, .feature { display: grid; grid-template-columns: [full-start] minmax(calc(var(--gx) - var(--gap)), 1fr) [content-start] repeat(12, minmax(0, calc((var(--max) - 2 * var(--gx) - 11 * var(--gap)) / 12))) [content-end] minmax(calc(var(--gx) - var(--gap)), 1fr) [full-end]; column-gap: var(--gap); } /* --- Hero: Plan wird Bild ---------------------------------------------- */ .planhero { position: relative; padding-top: clamp(16px, 2vw, 32px); } .hp__grid { align-items: end; min-height: clamp(560px, calc(100svh - var(--header-h) - 32px), 940px); } .hp__text { grid-column: 2 / 7; grid-row: 1; align-self: end; padding: 0 var(--gap) clamp(32px, 5vw, 80px) 0; position: relative; z-index: 2; } .hp__visual { grid-column: 7 / full-end; grid-row: 1; position: relative; align-self: stretch; overflow: hidden; background: var(--paper-2); min-height: 520px; } .hp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .hp__lines, .hp__marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hp__lines path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .85; transition: opacity 800ms var(--ease-arch); } .hp__marks path { fill: none; stroke: var(--accent-soft); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .hp__eyebrow { margin-bottom: clamp(20px, 2.4vw, 36px); } .hp__title { font-size: clamp(2.35rem, 1.05rem + 2.75vw, 3.85rem); line-height: 1.0; letter-spacing: -0.042em; font-weight: 500; max-width: 12ch; } .hp__lead { margin-top: clamp(20px, 2vw, 28px); max-width: 40ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); } .hp__lead p + p { margin-top: .6em; } .hp__actions { margin-top: clamp(24px, 2.6vw, 36px); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; } .hp__tag { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(12, 15, 20, .72); color: #F2EFE8; backdrop-filter: blur(6px); font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; } .hp__tag span { width: 7px; height: 7px; background: var(--accent-soft); } /* Endzustand (auch ohne Skript und bei reduzierter Bewegung) */ .hp__lines { opacity: 0; } .js .hp__lines { opacity: 1; } .js .hp__visual.is-revealed .hp__lines path { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .js .hp__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hpDraw 760ms var(--ease-arch) calc(120ms + var(--i) * 42ms) forwards; } .js .hp__img { opacity: 0; animation: hpFallback 1ms 3600ms forwards; } .js .hp__visual.is-done .hp__img { opacity: 1; animation: none; } .js .hp__marks path { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .hp__visual.is-revealed .hp__marks path { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-arch) calc(var(--i) * 90ms); } .js .hp__tag { opacity: 0; transform: translateY(6px); transition: opacity 600ms var(--ease-arch) 500ms, transform 600ms var(--ease-arch) 500ms; } .js .hp__visual.is-revealed .hp__tag { opacity: 1; transform: none; } .js .hp__text > * { opacity: 0; transform: translateY(10px); animation: hpText 700ms var(--ease-arch) forwards; } .js .hp__text > :nth-child(1) { animation-delay: 420ms; } .js .hp__text > :nth-child(2) { animation-delay: 520ms; } .js .hp__text > :nth-child(3) { animation-delay: 640ms; } .js .hp__text > :nth-child(4) { animation-delay: 740ms; } } @media (prefers-reduced-motion: reduce) { .js .hp__lines { opacity: 0; } } @keyframes hpDraw { to { stroke-dashoffset: 0; } } @keyframes hpText { to { opacity: 1; transform: none; } } @keyframes hpFallback { to { opacity: 1; } } @media (max-width: 899px) { .planhero { padding-top: 0; } .hp__grid { min-height: 0; align-items: start; } .hp__visual { grid-column: full-start / full-end; grid-row: 1; aspect-ratio: 4 / 5; min-height: 0; max-height: 72svh; width: 100%; } .hp__text { grid-column: content-start / content-end; grid-row: 2; padding: 28px 0 8px; } .hp__title { max-width: 11ch; } .hp__lines path:not(.m) { display: none; } .hp__tag { font-size: .625rem; padding: 6px 10px; } } @media (min-width: 900px) and (max-width: 1180px) { .hp__text { grid-column: 2 / 8; } .hp__visual { grid-column: 8 / full-end; } } /* --- Bild-Text-Komposition, randlos ------------------------------------ */ .feature { padding-block: clamp(56px, 8vw, 128px); align-items: center; row-gap: 28px; } .feature__media { margin: 0; position: relative; overflow: hidden; background: var(--paper-2); } .feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .feature--hl .feature__media { height: clamp(380px, 64vh, 760px); } .feature--hm .feature__media { height: clamp(320px, 50vh, 600px); } .feature--hs .feature__media { height: clamp(240px, 36vh, 440px); } .feature--right .feature__media { grid-column: 6 / full-end; grid-row: 1; } .feature--right .feature__text { grid-column: 2 / 6; grid-row: 1; padding-right: clamp(0px, 2vw, 32px); } .feature--left .feature__media { grid-column: full-start / 9; grid-row: 1; } .feature--left .feature__text { grid-column: 10 / 14; grid-row: 1; } .feature--full .feature__media { grid-column: full-start / full-end; } .feature--full .feature__text { grid-column: 2 / 8; } .feature__label { margin-bottom: 16px; } .feature__title { font-size: clamp(1.6rem, 1.15rem + 1.35vw, 2.6rem); line-height: 1.06; letter-spacing: -0.034em; max-width: 14ch; } .feature__body { margin-top: 16px; max-width: 42ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); } .feature__body p + p { margin-top: .6em; } .feature__more { margin-top: 22px; } .feature__cap { position: absolute; left: 16px; bottom: 14px; font-size: .75rem; color: #F2EFE8; background: rgba(12,15,20,.6); padding: 4px 8px; } .feature + .feature { padding-top: 0; } @media (max-width: 899px) { .feature { padding-block: 48px; } .feature--right .feature__media, .feature--left .feature__media, .feature--full .feature__media { grid-column: full-start / full-end; grid-row: 1; height: auto; aspect-ratio: 4 / 3; } .feature--right .feature__text, .feature--left .feature__text, .feature--full .feature__text { grid-column: content-start / content-end; grid-row: 2; padding: 0; } .feature--left .feature__media { grid-column: full-start / 13; margin-right: 0; } .feature--right .feature__media { grid-column: 3 / full-end; } } /* Links: präziser Hover und Fokus */ .arrow-link { transition: border-color 300ms var(--ease-arch); } .arrow-link::after { transition: transform 400ms var(--ease-arch); } /* --- Projekte editorial ------------------------------------------------- */ .projects-block { padding-block: clamp(56px, 8vw, 128px); } .pjs__head, .pj, .pjs__more { display: grid; grid-template-columns: [full-start] minmax(calc(var(--gx) - var(--gap)), 1fr) [content-start] repeat(12, minmax(0, calc((var(--max) - 2 * var(--gx) - 11 * var(--gap)) / 12))) [content-end] minmax(calc(var(--gx) - var(--gap)), 1fr) [full-end]; column-gap: var(--gap); } .pjs__head > * { grid-column: 2 / 10; } .pjs__title { margin-top: 14px; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.034em; } .pjs__more { margin-top: clamp(40px, 5vw, 72px); } .pjs__more > a { grid-column: 2 / 8; justify-self: start; } .pj { margin-top: clamp(56px, 8vw, 128px); row-gap: 22px; align-items: end; } .pj__media { display: block; position: relative; overflow: hidden; background: var(--paper-2); } .pj__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; transition: transform 900ms var(--ease-arch); } .pj__media:hover img { transform: scale(1.012); } .pj__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 12px; border-top: 1px solid var(--line-2); } .pj__name { color: var(--ink); font-weight: 500; font-size: .9375rem; } .pj__title { margin-top: 14px; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 2rem); line-height: 1.12; letter-spacing: -0.026em; max-width: 18ch; } .pj__title a { text-decoration: none; color: inherit; } .pj__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; } .pj__desc { margin-top: 12px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 42ch; } .pj__more { margin-top: 18px; } .pj--v0 .pj__media { grid-column: 5 / full-end; grid-row: 1; height: clamp(360px, 62vh, 740px); } .pj--v0 .pj__text { grid-column: 2 / 5; grid-row: 1; padding-right: 8px; } .pj--v1 .pj__media { grid-column: full-start / 10; grid-row: 1; height: clamp(340px, 56vh, 660px); } .pj--v1 .pj__text { grid-column: 11 / 14; grid-row: 1; } .pj--v2 .pj__media { grid-column: 2 / 14; grid-row: 1; height: clamp(260px, 42vh, 520px); } .pj--v2 .pj__text { grid-column: 2 / 8; grid-row: 2; } @media (max-width: 899px) { .pjs__head > *, .pjs__more > a { grid-column: content-start / content-end; } .pj { margin-top: 56px; } .pj--v0 .pj__media, .pj--v1 .pj__media, .pj--v2 .pj__media { grid-row: 1; height: auto; aspect-ratio: 16 / 11; } .pj--v0 .pj__media { grid-column: 3 / full-end; } .pj--v1 .pj__media { grid-column: full-start / 13; } .pj--v2 .pj__media { grid-column: full-start / full-end; } .pj--v0 .pj__text, .pj--v1 .pj__text, .pj--v2 .pj__text { grid-column: content-start / content-end; grid-row: 2; } } /* Ruhigere Module der restlichen Startseite */ .svc-list__title { font-size: 1.125rem; } .quote blockquote { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.85rem); line-height: 1.32; max-width: 40ch; } .step h3 { font-size: 1.0625rem; } .step p { font-size: .9375rem; } .cta-section .cta-band__title h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.9rem); } .cta-band__title p { font-size: var(--fs-body); max-width: 40ch; } /* Website-Ansichten nie seitlich anschneiden: Breitformate ≥ 16:10, Anschnitt nur unten */ .pj--v0 .pj__media { height: auto; aspect-ratio: 16 / 10; } .pj--v1 .pj__media { height: auto; aspect-ratio: 16 / 9; } .pj--v2 .pj__media { height: auto; aspect-ratio: 21 / 9; } @media (max-width: 899px) { .pj--v0 .pj__media, .pj--v1 .pj__media, .pj--v2 .pj__media { aspect-ratio: 16 / 10; } } /* Keine technischen Markierungen mehr: Abschnittsnummern, Menüpunkt-Quadrat, Farbkante */ .sec-head__index .label b { display: none; } .nav-primary .menu-item--legal > a::before { display: none; } .site-footer { border-top: 0; } /* ========================================================================== 18 Dritte Fassung: vollflächiger Hero, wechselnde Abschnittstypen ========================================================================== */ /* Freigeben beim Eintritt: nur, was beim Laden unterhalb liegt, wird kurz angedeutet (nie ganz versteckt). Ohne Skript oder Beobachter: sofort sichtbar. */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] img, .js [data-reveal] .ph { transition: clip-path 900ms var(--ease-arch), transform 1100ms var(--ease-arch); } .js [data-reveal].rv-pending img { clip-path: inset(0 0 0 16%); transform: scale(1.03); } .js [data-reveal-text] > * { transition: opacity 650ms var(--ease-arch), transform 650ms var(--ease-arch); } .js [data-reveal-text].rv-pending > * { opacity: 0; transform: translateY(12px); } .js [data-reveal-text] > :nth-child(2) { transition-delay: 80ms; } .js [data-reveal-text] > :nth-child(3) { transition-delay: 160ms; } } /* --- Kopfzeile über dem Hero ------------------------------------------- */ body:has(.planhero--full) .site-header { position: fixed; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); background: transparent; border-bottom-color: transparent; color: #F2EFE8; transition: background-color 350ms var(--ease-arch), border-color 350ms var(--ease-arch), color 350ms var(--ease-arch); } body:has(.planhero--full) .site-header::before { content: ""; position: absolute; inset: 0 0 -60% 0; pointer-events: none; z-index: -1; background: linear-gradient(180deg, rgba(8, 10, 14, .62) 0%, rgba(8, 10, 14, 0) 100%); transition: opacity 350ms var(--ease-arch); } body:has(.planhero--full) .site-header:not(.is-solid) .brand, body:has(.planhero--full) .site-header:not(.is-solid) .nav-primary a, body:has(.planhero--full) .site-header:not(.is-solid) .icon-btn, body:has(.planhero--full) .site-header:not(.is-solid) .lang-switch [aria-current="true"], body:has(.planhero--full) .site-header:not(.is-solid) .menu-toggle { color: #F2EFE8; } body:has(.planhero--full) .site-header:not(.is-solid) .brand__sub, body:has(.planhero--full) .site-header:not(.is-solid) .lang-switch a { color: rgba(242, 239, 232, .72); } body:has(.planhero--full) .site-header:not(.is-solid) .lang-switch [aria-current="true"] { box-shadow: inset 0 -1px 0 #F2EFE8; } body:has(.planhero--full) .site-header:not(.is-solid) .nav-primary a:hover { border-bottom-color: #F2EFE8; } body:has(.planhero--full) .site-header:not(.is-solid) .header-cta { --b-bg: #F2EFE8; --b-fg: #11151C; border-color: #F2EFE8; } body:has(.planhero--full) .site-header:not(.is-solid) .menu-toggle { border-color: rgba(242, 239, 232, .55); } body:has(.planhero--full) .site-header.is-solid { background: var(--paper); border-bottom-color: var(--line); color: var(--ink); } body:has(.planhero--full) .site-header.is-solid::before { opacity: 0; } /* --- Hero vollflächig ---------------------------------------------------- */ .planhero--full { position: relative; height: 100vh; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; background: #0E1116; color: #F2EFE8; } .planhero--full .hp__visual { position: absolute; inset: 0; min-height: 0; background: #0E1116; } .planhero--full .hp__img { object-position: 50% 50%; } .planhero--full .hp__lines { inset: auto; } .planhero--full .hp__lines path { stroke: rgba(242, 239, 232, .82); stroke-width: 1.1; } .hp__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 10, 14, .80) 0%, rgba(8, 10, 14, .52) 30%, rgba(8, 10, 14, 0) 58%), linear-gradient(0deg, rgba(8, 10, 14, .62) 0%, rgba(8, 10, 14, 0) 46%); } .hp__content { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--max); margin-inline: auto; padding: 0 var(--gx) clamp(40px, 8vh, 104px); z-index: 2; } .planhero--full .hp__text { padding: 0; max-width: 34rem; } .planhero--full .hp__eyebrow { color: rgba(242, 239, 232, .78); margin-bottom: 18px; } .planhero--full .hp__title { color: #F7F4EE; font-size: clamp(2.3rem, 1.15rem + 3vw, 4.3rem); line-height: 1.0; letter-spacing: -0.04em; max-width: 15ch; } .planhero--full .hp__lead { color: rgba(242, 239, 232, .88); max-width: 44ch; } .planhero--full .arrow-link { color: #F2EFE8; } @media (prefers-reduced-motion: no-preference) { .js .planhero--full .hp__text > * { animation-duration: 650ms; } .js .planhero--full .hp__text > :nth-child(1) { animation-delay: 150ms; } .js .planhero--full .hp__text > :nth-child(2) { animation-delay: 230ms; } .js .planhero--full .hp__text > :nth-child(3) { animation-delay: 330ms; } .js .planhero--full .hp__text > :nth-child(4) { animation-delay: 420ms; } } @media (max-width: 899px) { .planhero--full .hp__img { object-position: 40% 50%; } .hp__shade { background: linear-gradient(0deg, rgba(8, 10, 14, .88) 0%, rgba(8, 10, 14, .62) 38%, rgba(8, 10, 14, .1) 70%, rgba(8, 10, 14, .35) 100%); } .hp__content { padding-bottom: 32px; } .planhero--full .hp__title { max-width: 12ch; } .planhero--full .hp__actions .btn { width: 100%; } } /* --- Nutzenaussage (typografisch) ---------------------------------------- */ .gains { padding-block: clamp(72px, 10vw, 152px) clamp(56px, 7vw, 104px); } .gains__label { margin-bottom: 22px; } .gains__statement { font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.9rem); line-height: 1.16; letter-spacing: -0.03em; color: var(--ink); font-weight: 450; max-width: 30ch; text-wrap: balance; } .gains__statement em { font-style: normal; color: var(--muted); } .gains__items { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); } .gains__items li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line-2); } .gains__items b { color: var(--ink); font-weight: 500; font-size: 1rem; } .gains__items span { font-size: .9375rem; color: var(--ink-2); line-height: 1.5; max-width: 34ch; } @media (max-width: 900px) { .gains__items { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .gains__items { grid-template-columns: 1fr; } } /* --- Leistungsfelder mit Produktansicht (asymmetrisch) ------------------- */ .offer { padding-block: clamp(56px, 7vw, 112px); background: var(--paper-2); } .offer__grid { display: grid; grid-template-columns: [full-start] minmax(calc(var(--gx) - var(--gap)), 1fr) [content-start] repeat(12, minmax(0, calc((var(--max) - 2 * var(--gx) - 11 * var(--gap)) / 12))) [content-end] minmax(calc(var(--gx) - var(--gap)), 1fr) [full-end]; column-gap: var(--gap); row-gap: clamp(28px, 3vw, 48px); align-items: start; } .offer__head { grid-column: 2 / 7; grid-row: 1; } .offer__title { margin-top: 14px; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.034em; } .offer__list { grid-column: 2 / 6; grid-row: 2; list-style: none; margin: 0; padding: 0; counter-reset: of; } .offer__list li { counter-increment: of; padding: 22px 0 24px; border-top: 1px solid var(--line-2); } .offer__list li::before { content: counter(of, decimal-leading-zero); display: block; font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); margin-bottom: 10px; } .offer__list h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.18; letter-spacing: -0.02em; } .offer__list p { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 40ch; } .offer__list .arrow-link { margin-top: 14px; font-size: .9375rem; } .offer__media { grid-column: 7 / full-end; grid-row: 1 / span 2; margin: 0; position: relative; padding-bottom: clamp(60px, 9vw, 140px); } .offer__main { aspect-ratio: 1860 / 1363; overflow: hidden; background: var(--paper-3); } .offer__main img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; display: block; } .offer__detail { position: absolute; left: clamp(-120px, -8vw, -24px); bottom: 0; width: clamp(200px, 30%, 420px); aspect-ratio: 1377 / 756; overflow: hidden; box-shadow: 0 0 0 8px var(--paper-2); background: var(--paper-3); } .offer__detail img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; display: block; } .offer__cap { position: absolute; right: var(--gx); bottom: 0; max-width: 34ch; font-size: .8125rem; line-height: 1.45; color: var(--muted); text-align: right; } @media (max-width: 899px) { .offer__head, .offer__list { grid-column: content-start / content-end; } .offer__media { grid-column: 3 / full-end; grid-row: 2; padding-bottom: 72px; } .offer__list { grid-row: 3; } .offer__detail { left: -24px; width: 52%; } .offer__cap { position: static; margin-top: 12px; text-align: left; padding-right: var(--gx); } } /* --- Bildband ------------------------------------------------------------ */ .band { margin: 0; } .band__img { height: clamp(300px, 58vh, 680px); overflow: hidden; background: var(--paper-2); } .band__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .band__cap { max-width: var(--max); margin: 0 auto; padding: 14px var(--gx) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .band__cap span { grid-column: 8 / -1; font-size: .875rem; color: var(--muted); line-height: 1.5; } @media (max-width: 899px) { .band__img { height: auto; aspect-ratio: 4 / 3; } .band__cap span { grid-column: 1 / -1; } } /* --- Projekte: zwei versetzt, weitere als Liste -------------------------- */ .pj--va .pj__media { grid-column: full-start / 9; grid-row: 1; height: auto; aspect-ratio: 16 / 10; } .pj--va .pj__text { grid-column: 2 / 7; grid-row: 2; } .pjs--pair { display: grid; grid-template-columns: 1fr; } .pjs--pair .pj--vb { margin-top: clamp(-520px, -30vw, -200px); } .pj--vb .pj__media { grid-column: 10 / full-end; grid-row: 1; height: auto; aspect-ratio: 4 / 5; } .pj--vb .pj__media img { object-position: 0 0; } .pj--vb .pj__text { grid-column: 10 / 14; grid-row: 2; } .pjs__rest { list-style: none; margin: clamp(56px, 7vw, 104px) auto 0; padding: 0 var(--gx); max-width: var(--max); } .pjs__rest li { border-top: 1px solid var(--line); } .pjs__rest li:last-child { border-bottom: 1px solid var(--line); } .pjs__rest a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 16px 0; text-decoration: none; color: inherit; align-items: baseline; } .pjs__rest-name { grid-column: 1 / span 4; color: var(--ink); font-weight: 500; } .pjs__rest-kind { grid-column: 5 / span 4; } .pjs__rest-ind { grid-column: 9 / span 4; font-size: .9375rem; color: var(--ink-2); } .pjs__rest a:hover .pjs__rest-name { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; } @media (max-width: 899px) { .pjs--pair .pj--vb { margin-top: 56px; } .pj--va .pj__media { grid-column: full-start / 13; aspect-ratio: 16 / 10; } .pj--vb .pj__media { grid-column: 5 / full-end; aspect-ratio: 4 / 5; } .pj--va .pj__text, .pj--vb .pj__text { grid-column: content-start / content-end; } .pjs__rest a { grid-template-columns: 1fr; row-gap: 4px; } .pjs__rest-name, .pjs__rest-kind, .pjs__rest-ind { grid-column: 1; } } /* --- Vorher, nachher ---------------------------------------------------- */ .flows { padding-block: clamp(64px, 8vw, 128px); } .flows__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 12px; margin-bottom: clamp(32px, 4vw, 56px); } .flows__head > * { grid-column: 1 / span 7; } .flows__title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.034em; } .flows__intro { font-size: var(--fs-body); color: var(--ink-2); max-width: 46ch; } .flows__row { display: grid; grid-template-columns: 5fr 6fr 3fr; column-gap: var(--gap); padding: 18px 0; border-top: 1px solid var(--line); align-items: baseline; } .flows__row:last-child { border-bottom: 1px solid var(--line); } .flows__row--head { border-top: 1px solid var(--ink); padding: 12px 0; } .flows__before { color: var(--muted); font-size: .9375rem; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-decoration-thickness: 1px; } .flows__after { color: var(--ink); font-size: 1.0625rem; line-height: 1.45; } .flows__proj { font-size: .875rem; color: var(--ink-2); } .flows__proj a { color: var(--ink-2); } @media (max-width: 760px) { .flows__head > * { grid-column: 1 / -1; } .flows__row { grid-template-columns: 1fr; row-gap: 6px; } .flows__row--head { display: none; } } /* --- Branchen ------------------------------------------------------------ */ .industries { padding-block: clamp(56px, 7vw, 112px); background: var(--paper-2); } .industries__head { margin-bottom: clamp(28px, 3vw, 44px); } .industries__title { margin-top: 12px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.08; letter-spacing: -0.03em; } .industries__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; } .industries__list li { border-top: 1px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .industries__list h3 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.015em; } .industries__list p { font-size: .9375rem; color: var(--ink-2); line-height: 1.5; } .industries__list .arrow-link { margin-top: auto; padding-top: 6px; font-size: .9375rem; align-self: flex-start; } @media (max-width: 1000px) { .industries__list { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .industries__list { grid-template-columns: 1fr; } } /* Ruhiger Kontaktabschluss */ .cta-section.section--stone .cta-band__title h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.4rem); } /* Hero-Text in der ruhigen Zone unter den Monitoren: Titel links, Beschreibung und Kontakt rechts */ .hp__content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .planhero--full .hp__text { grid-column: 1 / span 7; max-width: none; } .hp__side { grid-column: 8 / span 5; } .planhero--full .hp__title { font-size: clamp(2.1rem, 1.1rem + 2.4vw, 3.4rem); max-width: none; } .planhero--full .hp__lead { margin-top: 0; max-width: 42ch; } .planhero--full .hp__actions { margin-top: 20px; } .hp__shade { background: linear-gradient(0deg, rgba(8, 10, 14, .9) 0%, rgba(8, 10, 14, .72) 22%, rgba(8, 10, 14, .2) 42%, rgba(8, 10, 14, 0) 55%); } @media (prefers-reduced-motion: no-preference) { .js .hp__side > * { opacity: 0; transform: translateY(10px); animation: hpText 650ms var(--ease-arch) forwards; } .js .hp__side > :nth-child(1) { animation-delay: 330ms; } .js .hp__side > :nth-child(2) { animation-delay: 420ms; } } @media (max-width: 899px) { .planhero--full .hp__text, .hp__side { grid-column: 1 / -1; } .hp__side { margin-top: 16px; } .planhero--full .hp__eyebrow { display: none; } .hp__shade { background: linear-gradient(0deg, rgba(8, 10, 14, .92) 0%, rgba(8, 10, 14, .8) 34%, rgba(8, 10, 14, .25) 56%, rgba(8, 10, 14, 0) 70%); } } @media (max-width: 899px) { .planhero--full .hp__text { grid-row: 1; padding: 0; } .hp__side { grid-row: 2; } } /* ========================================================================== 19 Hero „Viele Wege. Ein klarer Fluss." (eigene Visualisierung) ========================================================================== */ :root { --hero-fg: #11151C; --hero-fg2: #2E343D; --hero-veil: 240, 236, 229; --fv-stage: #DAD5CD; --fv-line: rgba(24, 27, 32, .55); } :root[data-theme="dark"] { --hero-fg: #F4F1EA; --hero-fg2: rgba(242, 239, 232, .86); --hero-veil: 18, 15, 13; --fv-stage: #3A322D; --fv-line: rgba(242, 236, 226, .62); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-fg: #F4F1EA; --hero-fg2: rgba(242, 239, 232, .86); --hero-veil: 18, 15, 13; --fv-stage: #3A322D; --fv-line: rgba(242, 236, 226, .62); } } .planhero--flow { background: var(--fv-stage); color: var(--hero-fg); } .planhero--flow .hp__visual { background: var(--fv-stage); } .fv__pic, .fv__pic img { position: absolute; inset: 0; width: 100%; height: 100%; } .fv__pic img { object-fit: cover; object-position: 50% 50%; display: block; } .fv__pic--dark { display: none; } :root[data-theme="dark"] .fv__pic--light { display: none; } :root[data-theme="dark"] .fv__pic--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fv__pic--light { display: none; } :root:not([data-theme="light"]) .fv__pic--dark { display: block; } } .fv__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; } .fv__lines--mob { display: none; } @media (max-width: 899px) { .fv__lines--desk { display: none; } .fv__lines--mob { display: block; } } .fv__lines path { fill: none; stroke: var(--fv-line); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } .fv__lines .fv-b { stroke-width: 1.6; } .fv__lines .fv-b--accent { stroke: var(--accent-soft); stroke-width: 2; } .fv__lines .fv-g { stroke-width: .8; opacity: .7; } .planhero--flow .hp__shade { background: linear-gradient(90deg, rgba(var(--hero-veil), .74) 0%, rgba(var(--hero-veil), .42) 30%, rgba(var(--hero-veil), 0) 52%), linear-gradient(0deg, rgba(var(--hero-veil), .62) 0%, rgba(var(--hero-veil), 0) 42%); } .planhero--flow .hp__content { align-items: end; } .planhero--flow .hp__text { grid-column: 1 / span 6; grid-row: 1; } .planhero--flow .hp__side { grid-column: 1 / span 5; grid-row: 2; margin-top: 18px; } .planhero--flow .hp__eyebrow { color: var(--hero-fg2); } .planhero--flow .hp__title { color: var(--hero-fg); font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4.9rem); line-height: .98; letter-spacing: -0.045em; } .planhero--flow .hp__lead { color: var(--hero-fg2); max-width: 44ch; } .planhero--flow .arrow-link { color: var(--hero-fg); } /* Kopfzeile über diesem Hero: Farben je Theme */ body:has(.planhero--flow) .site-header:not(.is-solid) .brand, body:has(.planhero--flow) .site-header:not(.is-solid) .nav-primary a, body:has(.planhero--flow) .site-header:not(.is-solid) .icon-btn, body:has(.planhero--flow) .site-header:not(.is-solid) .lang-switch [aria-current="true"], body:has(.planhero--flow) .site-header:not(.is-solid) .menu-toggle { color: var(--hero-fg); } body:has(.planhero--flow) .site-header:not(.is-solid) .brand__sub, body:has(.planhero--flow) .site-header:not(.is-solid) .lang-switch a { color: var(--hero-fg2); } body:has(.planhero--flow) .site-header:not(.is-solid) .lang-switch [aria-current="true"] { box-shadow: inset 0 -1px 0 var(--hero-fg); } body:has(.planhero--flow) .site-header:not(.is-solid) .nav-primary a:hover { border-bottom-color: var(--hero-fg); } body:has(.planhero--flow) .site-header:not(.is-solid) .header-cta { --b-bg: var(--hero-fg); --b-fg: rgb(var(--hero-veil)); border-color: var(--hero-fg); } body:has(.planhero--flow) .site-header:not(.is-solid) .menu-toggle { border-color: color-mix(in srgb, var(--hero-fg) 45%, transparent); } body:has(.planhero--flow) .site-header::before { background: linear-gradient(180deg, rgba(var(--hero-veil), .7) 0%, rgba(var(--hero-veil), 0) 100%); } /* Choreografie (etwa 3 s, einmalig): Wege zeichnen, Umwege lösen sich, Bahnen, dann Licht und Material */ .js .fv__lines { opacity: 1; transition: opacity 800ms var(--ease-arch); } .js .fv.is-done .fv__lines { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .js .fv__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .fv__lines .fv-w { animation: hpDraw 900ms var(--ease-arch) calc(60ms + var(--i) * 70ms) forwards; } .js .fv__lines .fv-b { animation: hpDraw 800ms var(--ease-arch) calc(900ms + var(--i) * 90ms) forwards; } .js .fv__lines .fv-g { animation: hpDraw 700ms var(--ease-arch) calc(500ms + var(--i) * 80ms) forwards; } .js .fv__img { opacity: 0; transform: scale(1.025); transition: opacity 1100ms var(--ease-arch), transform 1700ms var(--ease-arch); animation: hpFallback 1ms 5000ms forwards; } .js .fv.is-revealed .fv__img { opacity: 1; transform: none; animation: none; } .js .planhero--flow .hp__text > *, .js .planhero--flow .hp__side > * { animation-delay: 120ms; } } @media (prefers-reduced-motion: reduce) { .js .fv__lines { display: none; } } @media (max-width: 899px) { .planhero--flow .hp__text, .planhero--flow .hp__side { grid-column: 1 / -1; } .planhero--flow .hp__shade { background: linear-gradient(0deg, rgba(var(--hero-veil), .9) 0%, rgba(var(--hero-veil), .74) 34%, rgba(var(--hero-veil), .2) 58%, rgba(var(--hero-veil), 0) 72%); } .planhero--flow .hp__title { font-size: clamp(2.4rem, 1.4rem + 5vw, 3.2rem); } } .planhero--flow .hp__shade { background: linear-gradient(90deg, rgba(var(--hero-veil), .55) 0%, rgba(var(--hero-veil), .28) 30%, rgba(var(--hero-veil), 0) 48%), linear-gradient(0deg, rgba(var(--hero-veil), .42) 0%, rgba(var(--hero-veil), 0) 38%); } @media (max-width: 899px) { .planhero--flow .hp__shade { background: linear-gradient(0deg, rgba(var(--hero-veil), .9) 0%, rgba(var(--hero-veil), .72) 32%, rgba(var(--hero-veil), .15) 55%, rgba(var(--hero-veil), 0) 68%); } } /* ========================================================================== 20 Hero mit Wieland-Gerät (Varianten a hell, b und c dunkel) ========================================================================== */ .planhero--device { background: #1A1B1E; } .dv__pic { display: none; } .dv__pic, .dv__pic img { position: absolute; inset: 0; width: 100%; height: 100%; } .dv__pic img { object-fit: cover; object-position: 60% 50%; } .planhero--device[data-v="a"] .dv__pic[data-k="a"], .planhero--device[data-v="b"] .dv__pic[data-k="b"], .planhero--device[data-v="c"] .dv__pic[data-k="c"] { display: block; } .planhero--device[data-v="a"] { background: #DDD6CB; } .planhero--device[data-v="c"] { background: #121B2A; } /* Textfarben je Variante; gelten auch für die Kopfzeile darüber */ body:has(.planhero--device[data-v="a"]) { --hero-fg: #11151C; --hero-fg2: #2E343D; --hero-veil: 236, 231, 223; } body:has(.planhero--device[data-v="b"]) { --hero-fg: #F4F1EA; --hero-fg2: rgba(242, 239, 232, .84); --hero-veil: 22, 21, 20; } body:has(.planhero--device[data-v="c"]) { --hero-fg: #F4F1EA; --hero-fg2: rgba(236, 240, 248, .84); --hero-veil: 14, 22, 36; } .planhero--device { color: var(--hero-fg); } .planhero--device .hp__shade { background: linear-gradient(90deg, rgba(var(--hero-veil), .62) 0%, rgba(var(--hero-veil), .30) 32%, rgba(var(--hero-veil), 0) 50%); } .planhero--device .hp__content { align-items: end; } .planhero--device .hp__text { grid-column: 1 / span 6; grid-row: 1; } .planhero--device .hp__side { grid-column: 1 / span 5; grid-row: 2; margin-top: 18px; } .planhero--device .hp__eyebrow { color: var(--hero-fg2); } .planhero--device .hp__title { color: var(--hero-fg); font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4.9rem); line-height: .98; letter-spacing: -0.045em; } .planhero--device .hp__lead { color: var(--hero-fg2); max-width: 42ch; font-size: clamp(.95rem, .9rem + .15vw, 1.0625rem); } .planhero--device .arrow-link { color: var(--hero-fg); } body:has(.planhero--device) .site-header:not(.is-solid) .brand, body:has(.planhero--device) .site-header:not(.is-solid) .nav-primary a, body:has(.planhero--device) .site-header:not(.is-solid) .icon-btn, body:has(.planhero--device) .site-header:not(.is-solid) .lang-switch [aria-current="true"], body:has(.planhero--device) .site-header:not(.is-solid) .menu-toggle { color: var(--hero-fg); } body:has(.planhero--device) .site-header:not(.is-solid) .brand__sub, body:has(.planhero--device) .site-header:not(.is-solid) .lang-switch a { color: var(--hero-fg2); } body:has(.planhero--device) .site-header:not(.is-solid) .lang-switch [aria-current="true"] { box-shadow: inset 0 -1px 0 var(--hero-fg); } body:has(.planhero--device) .site-header:not(.is-solid) .header-cta { --b-bg: var(--hero-fg); --b-fg: rgb(var(--hero-veil)); border-color: var(--hero-fg); } body:has(.planhero--device) .site-header:not(.is-solid) .menu-toggle { border-color: color-mix(in srgb, var(--hero-fg) 45%, transparent); } body:has(.planhero--device) .site-header::before { background: linear-gradient(180deg, rgba(var(--hero-veil), .55) 0%, rgba(var(--hero-veil), 0) 100%); } /* Einstieg: Bild weich sichtbar, Ausschnitt minimal, Text versetzt */ @media (prefers-reduced-motion: no-preference) { .js .dv:not(.dv--plan) .dv__img { animation: dvIn 1400ms var(--ease-arch) both; } .js .planhero--device .hp__text > *, .js .planhero--device .hp__side > * { animation-delay: 300ms; } .js .planhero--device .hp__side > :nth-child(1) { animation-delay: 520ms; } .js .planhero--device .hp__side > :nth-child(2) { animation-delay: 620ms; } } @keyframes dvIn { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } } /* Vorschauauswahl */ .dv__pick { position: absolute; right: var(--gx); bottom: clamp(24px, 4vh, 48px); z-index: 3; display: flex; align-items: center; gap: 4px; padding: 6px; background: rgba(250, 249, 246, .92); backdrop-filter: blur(8px); border: 1px solid rgba(17, 21, 28, .14); } .dv__pick .label { padding: 0 8px 0 6px; color: #5B616B; } .dv__pick button { font: inherit; font-size: .8125rem; padding: 8px 12px; border: 1px solid transparent; background: transparent; color: #11151C; cursor: pointer; } .dv__pick button:hover { border-color: rgba(17, 21, 28, .3); } .dv__pick button[aria-pressed="true"] { background: #11151C; color: #FAF9F6; } @media (max-width: 899px) { .planhero--device .hp__text, .planhero--device .hp__side { grid-column: 1 / -1; } .planhero--device .hp__shade { background: linear-gradient(0deg, rgba(var(--hero-veil), .92) 0%, rgba(var(--hero-veil), .78) 30%, rgba(var(--hero-veil), .15) 50%, rgba(var(--hero-veil), 0) 60%); } .planhero--device .hp__title { font-size: clamp(2.3rem, 1.4rem + 5vw, 3.1rem); } .dv__pic img { object-position: 50% 30%; } .dv__pick { left: 12px; right: 12px; top: calc(var(--header-h) + 10px); bottom: auto; justify-content: center; flex-wrap: wrap; } .dv__pick .label { display: none; } .dv__pick button { padding: 6px 8px; font-size: .75rem; } } @media (max-width: 899px) { .dv__pick { left: auto; right: 12px; top: auto; bottom: calc(100% - 100svh + 12px); bottom: auto; top: calc(var(--header-h) + 8px); padding: 4px; gap: 2px; } .dv__pick button { padding: 5px 9px; font-size: 0; } .dv__pick button::after { content: attr(data-k); font-size: .75rem; text-transform: uppercase; } } .planhero--device .hp__visual { background: transparent; } /* Planzeichnung zum Gerätemotiv A: Raum, Licht, Gerät, Oberfläche, dann öffnet sich das Bild aus dem Bildschirm */ .dv__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; opacity: 0; z-index: 1; } .dv__lines--mob { display: none; } @media (max-width: 899px) { .dv__lines--desk { display: none; } .dv__lines--mob { display: block; } } .dv__lines path { fill: none; stroke: rgba(17, 21, 28, .58); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .dv__lines .dl--light { stroke: rgba(17, 21, 28, .32); stroke-dasharray: none; } .dv__lines .dl--ui { stroke: rgba(17, 21, 28, .42); stroke-width: .9; } .dv__lines .dl--curve { stroke: var(--accent-soft); stroke-width: 1.8; } .js .dv--plan .dv__lines { opacity: 1; transition: opacity 700ms var(--ease-arch); } .js .dv--plan.is-done .dv__lines { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .js .dv--plan .dv__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .dv--plan .dl--room { animation: hpDraw 700ms var(--ease-arch) 80ms forwards; } .js .dv--plan .dl--light { animation: hpDraw 800ms var(--ease-arch) calc(160ms + var(--i) * 70ms) forwards; } .js .dv--plan .dl--device { animation: hpDraw 750ms var(--ease-arch) calc(380ms + var(--i) * 110ms) forwards; } .js .dv--plan .dl--ui { animation: hpDraw 600ms var(--ease-arch) calc(780ms + var(--i) * 55ms) forwards; } .js .dv--plan .dl--curve { animation: hpDraw 650ms var(--ease-arch) 1150ms forwards; } .js .dv--plan .dv__img { animation: hpFallback 1ms 4500ms forwards; opacity: 0; } .js .dv--plan.is-done .dv__img { opacity: 1; animation: none; } } @media (prefers-reduced-motion: reduce) { .dv__lines { display: none !important; } } /* ========================================================================== 21 Hero-Slider (Projekte im Geräteset) ========================================================================== */ .planhero--slider .hs__pic { display: block; opacity: 0; transition: opacity 1000ms var(--ease-arch); } .planhero--slider .hs__pic img { transition: transform 7000ms linear; } .planhero--slider .hs__pic.is-active { opacity: 1; z-index: 0; } .planhero--slider .hs__pic.is-active:not(.dv__pic) img { transform: scale(1.02); } .hs__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-width: var(--max); margin-inline: auto; padding: 0 var(--gx) clamp(28px, 4.5vh, 52px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; pointer-events: none; } .hs__caps { grid-column: 8 / span 4; pointer-events: auto; } .hs__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(17, 21, 28, .25); color: var(--hero-fg); } .hs__cap[hidden] { display: none; } .hs__name { font-weight: 500; font-size: .9375rem; } .hs__kind { color: var(--hero-fg2); } .hs__num { color: var(--hero-fg2); } .hs__link { margin-left: auto; font-size: .875rem; } .hs__ctrl { grid-column: 12 / span 1; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; pointer-events: auto; } .hs__btn { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(17, 21, 28, .28); background: rgba(250, 249, 246, .55); color: #11151C; cursor: pointer; backdrop-filter: blur(6px); transition: background-color 250ms var(--ease-arch), border-color 250ms var(--ease-arch); } .hs__btn:hover { background: rgba(250, 249, 246, .9); border-color: #11151C; } .hs__btn .i-play { display: none; } .hs__btn[aria-pressed="true"] .i-play { display: block; } .hs__btn[aria-pressed="true"] .i-pause { display: none; } .hs__prog { flex: 1 0 100%; height: 2px; background: rgba(17, 21, 28, .14); margin-top: 6px; overflow: hidden; } .hs__prog span { display: block; height: 100%; width: 100%; background: #11151C; transform: scaleX(0); transform-origin: left; } /* Verlauf der Ladelinie steuert site.js (Web Animations, gekoppelt an den Wechsel), nicht mehr CSS */ @keyframes hsProg { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .planhero--slider .hs__pic img { transition: none; transform: none !important; } } @media (max-width: 899px) { .hs__bar { padding-bottom: 14px; grid-template-columns: 1fr auto; } .hs__caps { grid-column: 1; } .hs__ctrl { grid-column: 2; } .hs__link { display: none; } .hs__kind { display: none; } .planhero--slider .hp__content { padding-bottom: 84px; } .hs__btn { width: 34px; height: 34px; } } .planhero--slider .hs__pic, .planhero--slider .hs__pic img { position: absolute; inset: 0; width: 100%; height: 100%; } .planhero--slider .hs__pic img { object-fit: cover; object-position: 60% 50%; } @media (max-width: 899px) { .planhero--slider .hs__pic img { object-position: 50% 30%; } } /* Slider: Textblock höher, Steuerung zurückhaltend */ @media (min-width: 900px) { .planhero--slider .hp__content { padding-bottom: clamp(120px, 19vh, 210px); } } .hs__ctrl { flex-wrap: nowrap; align-items: center; gap: 2px; } .hs__btn { width: 32px; height: 32px; border: 0; background: transparent; backdrop-filter: none; color: var(--hero-fg2); opacity: .75; transition: opacity 250ms var(--ease-arch), color 250ms var(--ease-arch); } .hs__btn:hover, .hs__btn:focus-visible { background: transparent; color: var(--hero-fg); opacity: 1; } .hs__btn svg { width: 14px; height: 14px; } .hs__btn[data-hs="pause"] svg { width: 11px; height: 11px; } .hs__prog { flex: 0 0 56px; height: 1px; margin: 0 0 0 10px; background: rgba(17, 21, 28, .16); } .hs__prog span { background: rgba(17, 21, 28, .6); } .hs__ctrl { grid-column: 11 / span 2; } .hs__caps { grid-column: 7 / span 4; } @media (max-width: 899px) { .hs__ctrl { grid-column: 2; } .hs__caps { grid-column: 1; } .hs__prog { display: none; } } /* Slider: Planzeichnung bei jedem Wechsel */ .hs--plan .dv__lines { opacity: 0; transition: opacity 650ms var(--ease-arch); } .hs--plan .dv__lines.is-on { opacity: 1; transition-duration: 150ms; } .planhero--slider .hs__pic { transition-duration: 550ms; } @media (prefers-reduced-motion: no-preference) { .hs--plan .dv__lines.is-on path { stroke-dasharray: 1; stroke-dashoffset: 1; } .hs--plan .dv__lines.is-on .dl--room { animation: hpDraw 650ms var(--ease-arch) 40ms forwards; } .hs--plan .dv__lines.is-on .dl--light { animation: hpDraw 750ms var(--ease-arch) calc(100ms + var(--i) * 60ms) forwards; } .hs--plan .dv__lines.is-on .dl--device { animation: hpDraw 700ms var(--ease-arch) calc(260ms + var(--i) * 90ms) forwards; } .hs--plan .dv__lines.is-on .dl--ui { animation: hpDraw 550ms var(--ease-arch) calc(620ms + var(--i) * 50ms) forwards; } .hs--plan .dv__lines.is-on .dl--curve { animation: hpDraw 600ms var(--ease-arch) 900ms forwards; } } /* Slider: Überschrift und Einleitung je Projekt, gestapelt in einer Zelle (keine Sprünge beim Wechsel) */ .hs__stack { display: grid; } .hs__stack > .hs__x { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 450ms var(--ease-arch), transform 450ms var(--ease-arch), visibility 0s linear 450ms; } .hs__stack > .hs__x.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 650ms var(--ease-arch) 250ms, transform 650ms var(--ease-arch) 250ms, visibility 0s; } .planhero--slider .hs__titles { margin: 0; align-items: end; } /* kürzere Überschriften sitzen unten, Abstand zur Einleitung bleibt gleich */ @media (prefers-reduced-motion: reduce) { .hs__stack > .hs__x, .hs__stack > .hs__x.is-active { transition: none; transform: none; } } @media (max-width: 899px) { .planhero--slider .hp__eyebrow { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* ========================================================================== 22 Leistungen als Schwerpunkte, Rechenbeispiele, Projektgalerie (17.10.2026) ========================================================================== */ .focus { padding: clamp(72px, 11vh, 140px) 0 clamp(56px, 8vh, 104px); } .focus__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(28px, 4vh, 48px); align-items: start; } .focus__head { grid-column: 1 / 7; } .focus__title, .gallery__title, .nums__title, .mosaic__title { margin-top: 14px; font-size: clamp(2rem, 1.25rem + 2.3vw, 3.5rem); line-height: 1.06; max-width: 24ch; } .focus__intro, .nums__intro { margin-top: 18px; max-width: 40ch; color: var(--ink-2); font-size: 1rem; line-height: 1.7; } .focus__media { grid-column: 1 / 7; margin: 0; } .focus__img { overflow: hidden; background: var(--paper-2); } .focus__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .focus__cap { margin-top: 10px; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; } .focus__cols { grid-column: 8 / 13; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; display: grid; align-content: start; } .focus__col { display: grid; gap: 6px; padding: 20px 0 22px; border-top: 1px solid var(--line-2); } .focus__col:last-child { border-bottom: 1px solid var(--line-2); } .focus__h { font-size: 1.125rem; line-height: 1.3; } .focus__desc { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.65; max-width: 44ch; } .focus__link { justify-self: start; margin-top: 4px; font-size: 0.875rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .3s ease; } .focus__link:hover, .focus__link:focus-visible { border-bottom-color: var(--ink); } /* Ablaufzeichnung (für die Unterseite Automatisierung und KI) */ .fl__svg { display: block; width: 100%; height: auto; overflow: visible; } .fl__svg--tall { display: none; max-width: 420px; margin: 0 auto; } .fl__svg text { fill: var(--ink); font-family: var(--sans, inherit); } .fl__cap { font-family: var(--mono) !important; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; fill: var(--muted) !important; } .fl__in { font-size: 17px; } .fl__t { font-size: 19px; font-weight: 500; } .fl__d { font-size: 15px; fill: var(--muted) !important; } .fl__l { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; } .fl__l--main { stroke: var(--accent-soft); stroke-width: 2.4; } .fl__node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .fl__dot { fill: var(--accent-soft); } @media (prefers-reduced-motion: no-preference) { .js .fl-wrap .fl__l { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-arch) calc(120ms + var(--i) * 110ms); } .js .fl-wrap.is-in .fl__l { stroke-dashoffset: 0; } .js .fl-wrap .fl__node, .js .fl-wrap .fl__dot, .js .fl-wrap text { opacity: 0; transition: opacity 600ms var(--ease-arch) 500ms; } .js .fl-wrap.is-in .fl__node, .js .fl-wrap.is-in .fl__dot, .js .fl-wrap.is-in text { opacity: 1; } } /* Rechenbeispiele: kompakter Ergebnisbereich, zwei gleichwertige Spalten */ .nums { background: var(--paper-2); padding: clamp(64px, 9vh, 112px) 0; } .nums__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 96px); margin-top: clamp(28px, 4vh, 48px); align-items: start; } .cx { display: grid; align-content: start; gap: 14px; padding-top: 18px; border-top: 1px solid var(--ink); min-width: 0; } .cx__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .cx__project { font-size: 1.0625rem; font-weight: 500; } .cx__status { color: var(--accent); } .cx__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-top: 6px; line-height: 1; } .cx__num { font-size: clamp(2.8rem, 1.7rem + 3.3vw, 5rem); line-height: .95; letter-spacing: -0.045em; font-weight: 450; font-variant-numeric: lining-nums; white-space: nowrap; } .cx__pre, .cx__unit { font-size: clamp(1.1rem, .95rem + .5vw, 1.45rem); letter-spacing: -0.02em; color: var(--ink-2); } .cx__mean { display: grid; gap: 2px; line-height: 1.4; } .cx__mean b { font-weight: 500; } .cx__mean span { color: var(--muted); font-size: 0.9375rem; } .cx__second { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); line-height: 1.4; } .cx__second b { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); font-weight: 500; letter-spacing: -0.02em; } .cx__second span { color: var(--ink-2); font-size: 0.9375rem; } .cx__explain { color: var(--ink-2); line-height: 1.55; max-width: 46ch; } .cx__how summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 450; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 3px; } .cx__how summary:hover, .cx__how summary:focus-visible { border-bottom-color: var(--ink); } .cx__how summary::-webkit-details-marker { display: none; } .cx__how summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 250ms var(--ease-arch); } .cx__how[open] summary::after { transform: translateY(2px) rotate(-135deg); } .cx__how-body { padding: 14px 0 4px; display: grid; gap: 12px; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); } .cx__how-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .cx__how-body li { display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line-2); } .cx__how-body li b { font-weight: 500; color: var(--ink); } .cx__how-body li em { font-style: normal; color: var(--muted); font-size: 0.8125rem; } .cx__how-kind { font-size: 0.75rem; color: var(--muted); } .cx__how-note { color: var(--muted); font-size: 0.8125rem; } /* Projektgalerie: abwechselnd breit und zwei nebeneinander, Bildhöhe etwa 420 bis 600 px */ .gallery { padding: clamp(64px, 9vh, 112px) 0 clamp(64px, 9vh, 112px); } .gl { display: grid; row-gap: clamp(44px, 6vh, 72px); margin-top: clamp(28px, 4vh, 44px); } .gl__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } .gl__row--wide .gl__item { grid-column: 1 / 11; } .gl__row--pair .gl__item:nth-child(1) { grid-column: 1 / 7; } .gl__row--pair .gl__item:nth-child(2), .gl__row--pair .gl__aside { grid-column: 7 / 13; } .gl__row--end .gl__aside { grid-column: 7 / 13; } .gl__media { display: block; overflow: hidden; background: var(--paper-2); } .gl__media img { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 0; transition: transform 1100ms var(--ease-arch); } .gl__row--wide .gl__media img { aspect-ratio: 20 / 9; max-height: 600px; } .gl__row--pair .gl__media img { aspect-ratio: 16 / 10; max-height: 480px; } .gl__media:hover img { transform: scale(1.015); } .gl__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); row-gap: 4px; margin-top: 14px; align-items: baseline; } .gl__meta { grid-column: 1 / -1; } .gl__ind { color: var(--accent); } .gl__name { grid-column: 1; font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; } .gl__name a { color: inherit; text-decoration: none; } .gl__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .gl__desc { grid-column: 1; color: var(--ink-2); line-height: 1.5; max-width: 52ch; } .gl__more { grid-column: 2; grid-row: 2 / span 2; align-self: start; } .gl__aside { display: grid; gap: 12px; justify-items: start; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); } .gl__inds { font-size: 1.125rem; line-height: 1.5; max-width: 32ch; } .gl__all { margin-top: 8px; } @media (max-width: 899px) { .focus__head, .focus__media, .focus__cols { grid-column: 1 / -1; grid-row: auto; } .nums__grid { grid-template-columns: 1fr; gap: 48px; } .gl__row--wide .gl__item, .gl__row--pair .gl__item:nth-child(1), .gl__row--pair .gl__item:nth-child(2), .gl__row--pair .gl__aside, .gl__row--end .gl__aside { grid-column: 1 / -1; } .gl__row--pair { row-gap: 40px; } .gl__row--wide .gl__media img { aspect-ratio: 16 / 9; } .gl__cap { grid-template-columns: 1fr; } .gl__more { grid-column: 1; grid-row: auto; margin-top: 8px; } } @media (max-width: 699px) { .fl__svg--wide { display: none; } .fl__svg--tall { display: block; } .fl__in { font-size: 15px; } } /* Fallstudie: großes Kopfbild und Detailansichten (17.10.2026) */ .case-hero { position: relative; margin: clamp(32px, 5vh, 56px) 0 0; } .case-hero__main img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; object-position: 50% 0; border: 1px solid var(--line); } .case-hero--mob { padding-bottom: 4%; } .case-hero__mob { position: absolute; right: 4%; bottom: 0; width: 15%; min-width: 120px; } .case-hero__mob img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 18; object-fit: cover; object-position: 50% 0; border: 1px solid var(--line-2); background: var(--paper); } .case-hero__src { margin-top: 10px; color: var(--muted); } .cv { padding: clamp(40px, 6vh, 72px) 0; } .cv__label { margin-bottom: 18px; } .cv__grid { display: grid; gap: clamp(24px, 3vw, 40px); } .cv__row { display: grid; gap: var(--gap); align-items: start; } .cv__row--with-mob { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); } .cv__row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv__row--mobs { grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); } .cv__fig { margin: 0; } .cv__img { overflow: hidden; background: var(--paper-2); } .cv__img img { display: block; width: 100%; height: auto; border: 1px solid var(--line); } .cv__fig--mob .cv__img img { aspect-ratio: 9 / 18; object-fit: cover; object-position: 50% 0; } .cv__cap { margin-top: 8px; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; } @media (max-width: 899px) { .case-hero__mob { width: 26%; right: 3%; } .cv__row--with-mob, .cv__row--pair { grid-template-columns: 1fr; } .cv__row--with-mob .cv__fig--mob { max-width: 60%; } } /* ========================================================================== 23 Leichtigkeit (gestalterische Referenz ab 17.10.2026) Eine Schrift, große Titel leicht (300) mit ruhiger Laufweite, Zwischentitel normal (400), kleine Beschreibungstexte mit großzügigem Zeilenabstand, Kennzeilen in der Grundschrift statt Monospace. Fließtext bleibt 400 für Lesbarkeit und Kontrast in beiden Themes. ========================================================================== */ h1, h2, .hero__title, .hp__title, .focus__title, .gallery__title, .nums__title, .pjs__title, .offer__title, .cta-band__title h2, .case--lead h3, .article-head h1, .sec-head h2, .intro__title, .pf__title, .cs__title { font-weight: 300; letter-spacing: -0.022em; } h3, h4, .index__title, .trust__name, .post-row__title, .focus__h, .gl__name, .cx__project, .fc__title, .flow__title { font-weight: 400; letter-spacing: -0.012em; } .hero--page .hero__title { letter-spacing: -0.025em; line-height: 1.02; } .label { font-family: var(--font); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .btn, .header-cta, .arrow-link { font-weight: 400; } .menu-toggle { font-family: var(--font); font-size: 0.75rem; letter-spacing: .12em; } .lang-switch { font-family: var(--font); letter-spacing: .08em; } b, strong { font-weight: 500; } /* Projektmosaik: drei Spalten, quer 16:10 und hoch 4:5, schmale Fugen */ .mosaic { padding: clamp(24px, 4vh, 48px) 0 clamp(72px, 10vh, 128px); } .mosaic__head { margin-bottom: clamp(24px, 4vh, 40px); } .mo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; } .mo__col { display: grid; gap: 10px; align-content: start; } .mo__tile { position: relative; display: block; overflow: hidden; background: var(--paper-2); color: #fff; text-decoration: none; } .mo__tile img { display: block; width: 100%; height: auto; object-fit: cover; } .mo__tile--q img { aspect-ratio: 16 / 10; } .mo__tile--h img { aspect-ratio: 4 / 5; } .mo__tile::after { content: ""; position: absolute; inset: 0; background: rgba(9, 11, 15, .42); opacity: 0; transition: opacity .3s ease; } .mo__cap { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .4s ease; } .mo__name { font-size: clamp(1.15rem, .95rem + .6vw, 1.55rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; } .mo__kind { font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .mo__tile:hover::after, .mo__tile:focus-visible::after { opacity: 1; } .mo__tile:hover .mo__cap, .mo__tile:focus-visible .mo__cap { opacity: 1; transform: none; } .mo__tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .mo__text { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 8%; margin: 0; text-align: center; font-size: clamp(1.15rem, .9rem + .8vw, 1.6rem); font-weight: 300; line-height: 1.35; color: var(--ink); letter-spacing: -0.01em; } .mosaic__more { margin-top: clamp(28px, 4vh, 44px); } @media (hover: none) { .mo__tile::after { opacity: 1; background: linear-gradient(to top, rgba(9, 11, 15, .55), rgba(9, 11, 15, 0) 45%); } .mo__cap { opacity: 1; transform: none; place-content: end start; justify-items: start; text-align: left; gap: 2px; padding: 12px 14px; } .mo__name { font-size: 1rem; } } @media (max-width: 899px) { .mo { grid-template-columns: 1fr; gap: 10px; } .focus__cols { margin-top: 8px; } } /* Ergebnisbereich leichter */ .cx__num { font-weight: 300; letter-spacing: -0.035em; } .cx__project { font-weight: 400; } .cx__mean b, .cx__second b { font-weight: 400; } /* Hero: leichtere Überschrift */ .planhero--device .hp__title, .planhero--full .hp__title { font-weight: 300; letter-spacing: -0.028em; line-height: 1.02; } .planhero--slider .hp__lead { font-size: 0.9375rem; line-height: 1.65; } /* Bewegung nach Referenz: kurze Überblendung statt Ausschnitt-Zoom, normales Scrollen */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] img, .js [data-reveal] .ph { transition: opacity 600ms ease, transform 800ms ease; } .js [data-reveal].rv-pending img, .js [data-reveal].rv-pending .ph { clip-path: none; opacity: 0; transform: translateY(14px); } .js [data-reveal-text].rv-pending > * { opacity: 0; transform: translateY(8px); } .js [data-reveal-text] > * { transition: opacity 500ms ease, transform 600ms ease; } } /* Fallstudie im Portfolio-Aufbau (Referenz ab 17.10.2026) */ .cs-hero { display: grid; place-items: center; } .cs-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; } .cs-hero__shade { position: absolute; inset: 0; background: rgba(8, 10, 14, .28); } .cs-hero__title { position: relative; z-index: 1; margin: 0; color: #F7F4EE; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); font-weight: 300; letter-spacing: -0.02em; text-align: center; padding: 0 var(--gx); } .cs-hero__down { position: absolute; z-index: 1; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%); color: #F7F4EE; padding: 8px; opacity: .85; transition: opacity .3s ease, transform .4s ease; } .cs-hero__down:hover, .cs-hero__down:focus-visible { opacity: 1; transform: translate(-50%, 3px); } .cs { padding-bottom: clamp(64px, 10vh, 120px); } .cs:focus { outline: none; } .cs__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(36px, 5vh, 56px); align-items: start; } .cs__lead-col { grid-column: 1 / 8; } .cs__title { margin-top: 14px; font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); line-height: 1.08; max-width: 20ch; } .cs__title::after { content: ""; display: block; width: 72px; height: 1px; margin-top: 22px; background: var(--ink); } .cs__lead { margin-top: 22px; max-width: 46ch; font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); font-weight: 300; line-height: 1.6; color: var(--ink); } .cs__facts { grid-column: 9 / 13; margin: 0; padding-top: 6px; display: grid; gap: 0; font-size: 0.875rem; } .cs__facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .cs__facts dt { color: var(--muted); } .cs__facts dd { margin: 0; color: var(--ink); } .cs__text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); padding-bottom: clamp(48px, 7vh, 88px); font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); } .cs__col { display: grid; gap: 12px; align-content: start; max-width: 54ch; } .cs__built { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cs__built b { font-weight: 400; color: var(--ink); } .cs__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; } .cs__g { margin: 0; overflow: hidden; background: var(--paper-2); } .cs__g img { display: block; width: 100%; height: auto; } .cs__g--full { grid-column: 1 / -1; } .cs__g--full img { max-height: 92vh; object-fit: cover; object-position: 50% 50%; } .cs__result { padding-top: clamp(56px, 9vh, 104px); max-width: none; display: grid; gap: 14px; } .cs__result > * { max-width: 56ch; } .cs__rtitle { font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.4rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; } .cs__result p:not(.label) { color: var(--ink-2); line-height: 1.7; } .cs__next { margin-top: clamp(64px, 10vh, 120px); padding-top: 28px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; } .cs__next-link { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 28px; row-gap: 8px; align-items: end; color: var(--ink); text-decoration: none; } .cs__next-link .label { grid-column: 2; } .cs__next-name { grid-column: 2; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; transition: opacity .3s ease; } .cs__next-img { grid-column: 1; grid-row: 1 / span 2; width: clamp(120px, 14vw, 200px); overflow: hidden; } .cs__next-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s ease; } .cs__next-link:hover .cs__next-name { opacity: .7; } .cs__next-link:hover .cs__next-img img { transform: scale(1.03); } .cs__contact { color: var(--ink-2); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; } @media (max-width: 899px) { .cs__lead-col, .cs__facts { grid-column: 1 / -1; } .cs__text { grid-template-columns: 1fr; row-gap: 32px; } .cs__gallery { grid-template-columns: 1fr; } .cs__next { grid-template-columns: 1fr; } } /* Restliche Kennzeilen ohne Monospace (Code in Beiträgen bleibt Monospace) */ .footer-col h2, .index__num, .flow__n, .brand__sub, .hs__num, .hs__kind, .lang-switch, .cx__how-kind, .fl__cap, .num, .sec-head__index .label { font-family: var(--font) !important; } @media (max-width: 899px) { .mo__text { aspect-ratio: auto; padding: 36px 8%; } } /* Slider-Feinschliff (17.10.2026): Projektzeile einzeilig auf Höhe der Pfeile, Leiste höher, Überschrift näher an der Dachzeile, Bild höher gesetzt (Planlinien folgen über dieselbe Bildfläche). */ .hs__bar { padding-bottom: clamp(44px, 7.5vh, 84px); align-items: center; } .hs__caps { grid-column: 4 / span 7; } .hs__cap { flex-wrap: nowrap; align-items: center; gap: 14px; min-height: 32px; padding-top: 0; border-top: 0; white-space: nowrap; min-width: 0; } .hs__name { font-weight: 400; } .hs__kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hs__link { flex: none; font-size: .8125rem; } .hs__ctrl { align-self: center; } .planhero--slider .hp__eyebrow { margin-bottom: 10px; } @media (min-width: 900px) { .planhero--slider .hp__visual { top: -8vh; } } @media (max-width: 899px) { .hs__caps { grid-column: 1; } } /* Menü-Panel schlanker (17.10.2026): kleinere Einträge, ab sieben Einträgen zweispaltig, Fußzeile mit Symbolen */ .mobile-nav { width: min(460px, calc(100% - 2 * var(--gx))); } .mobile-nav__panel { padding: 20px 26px 18px; } .mobile-nav__body { gap: 18px; } .mobile-nav__list a { font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); font-weight: 300; letter-spacing: -0.01em; padding: 10px 0; gap: 14px; } .mobile-nav__list a::before { font-size: 0.625rem; transform: translateY(-0.35em); min-width: 18px; } .mobile-nav__list:has(li:nth-child(7)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .mobile-nav__foot { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); opacity: 0; transition: opacity 500ms var(--ease-arch) 240ms; } .mobile-nav.is-open .mobile-nav__foot { opacity: 1; } .mobile-nav__cta { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ink); text-decoration: none; font-size: 0.9375rem; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .3s ease; } .mobile-nav__cta:hover, .mobile-nav__cta:focus-visible { border-bottom-color: var(--ink); } .mobile-nav__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; } .mobile-nav__foot .lang-switch { font-size: 0.75rem; } .theme-switch--icons { display: inline-flex; gap: 2px; } .theme-switch--icons .icon-btn { width: 32px; height: 32px; color: var(--muted); border: 1px solid transparent; } .theme-switch--icons .icon-btn svg { width: 16px; height: 16px; } .theme-switch--icons .icon-btn:hover { color: var(--ink); border-color: transparent; } .theme-switch--icons .icon-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--line-2); } /* ========================================================================== 24 Entwurf Einstieg: Bühne, Einführung, ausgewähltes Projekt (17.10.2026) ========================================================================== */ /* Bühne: dunkle Fläche in der Projektfarbe, Oberfläche groß bis über den Rand, Aussage links frei */ .stage { position: relative; min-height: 640px; background: var(--st-bg); color: #F4F1EC; overflow: hidden; isolation: isolate; } .stage__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 42%, color-mix(in srgb, var(--st-accent) 22%, transparent) 0%, transparent 70%), radial-gradient(40% 50% at 12% 100%, color-mix(in srgb, var(--st-accent) 8%, transparent) 0%, transparent 70%); } .stage__media { position: absolute; z-index: 0; left: 46%; top: 17vh; width: 84vw; margin: 0; } .stage__media img { display: block; width: 100%; height: auto; border-radius: 14px 0 0 0; border: 1px solid rgba(255, 255, 255, .09); border-right: 0; box-shadow: 0 50px 120px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .3); } .stage__inner { position: relative; z-index: 1; height: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--gx); display: grid; grid-template-rows: 1fr auto; } .stage__copy { align-self: center; max-width: min(36rem, 40vw); padding-top: var(--header-h); } .stage__title { margin: 0; color: #F7F4EE; font-size: clamp(2.8rem, 1.5rem + 3.6vw, 5.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.035em; } .stage__text { margin-top: 26px; max-width: 34ch; color: rgba(244, 241, 236, .74); font-size: 1rem; line-height: 1.65; } .stage__actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } .stage__link { color: #F4F1EC; text-decoration: none; font-size: .9375rem; border-bottom: 1px solid rgba(244, 241, 236, .35); padding-bottom: 3px; transition: border-color .3s ease; } .stage__link:hover, .stage__link:focus-visible { border-bottom-color: #F4F1EC; } .stage__proj { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 0 0 clamp(24px, 4.5vh, 44px); font-size: .8125rem; color: rgba(244, 241, 236, .62); } .stage__proj a { color: #F4F1EC; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--st-accent) 70%, transparent); padding-bottom: 1px; } .stage__proj-k { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--st-accent); } .stage__proj-note { color: rgba(244, 241, 236, .45); } @media (prefers-reduced-motion: no-preference) { .stage__media { animation: stIn 1400ms cubic-bezier(.2, .7, .2, 1) 120ms both; } .stage__copy > * { animation: stText 900ms ease 260ms both; } .stage__copy > :nth-child(2) { animation-delay: 380ms; } .stage__copy > :nth-child(3) { animation-delay: 480ms; } } @keyframes stIn { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } } @keyframes stText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 899px) { .stage { height: auto; min-height: 0; padding-bottom: 0; } .stage__inner { display: block; } .stage__copy { max-width: none; padding-top: calc(var(--header-h) + 40px); } .stage__media { position: relative; left: auto; top: auto; width: 150vw; margin: 40px 0 0 var(--gx); } .stage__proj { padding: 22px var(--gx) 28px; } .stage .stage__proj { margin: 0; } } /* Einführung: helle, kühle Fläche, Aussage und Absatz nebeneinander, drei Felder in einer Zeile */ .brief { background: #FBFAF7; padding: clamp(80px, 12vh, 140px) 0 clamp(64px, 10vh, 112px); } .brief__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(36px, 6vh, 64px); align-items: end; } .brief__head { grid-column: 1 / 7; } .brief__title { margin-top: 14px; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; max-width: 18ch; color: var(--ink); } .brief__text { grid-column: 8 / 13; max-width: 46ch; color: var(--ink-2); font-size: 1rem; line-height: 1.7; } .brief__fields { grid-column: 1 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .brief__field { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; padding: 22px 44px 22px 0; border-top: 1px solid var(--ink); color: var(--ink); text-decoration: none; } .brief__n { grid-row: 1; font-size: .75rem; color: var(--accent); padding-top: .35em; } .brief__t { grid-row: 1; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.015em; } .brief__d { grid-column: 2; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); } .brief__arrow { position: absolute; right: 4px; top: 24px; transition: transform .35s ease; } .brief__arrow svg { width: 16px; height: 16px; } .brief__field:hover .brief__arrow, .brief__field:focus-visible .brief__arrow { transform: translateX(4px); } .brief__field:hover .brief__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } @media (max-width: 899px) { .brief__head, .brief__text, .brief__fields { grid-column: 1 / -1; } .brief__fields { grid-template-columns: 1fr; gap: 0; } } /* Ausgewähltes Projekt: Farbe aus dem Projekt, kleinerer Maßstab, Gesamtansicht plus ein Detail */ .spot { background: var(--sp-bg); color: #EEF4F6; padding: clamp(80px, 12vh, 136px) 0; overflow: hidden; } .spot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .spot__text { grid-column: 1 / 5; padding-bottom: 8px; } .spot__label { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-accent); } .spot__name { margin-top: 18px; color: #fff; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.9rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; } .spot__ind { margin-top: 10px; color: rgba(238, 244, 246, .7); font-size: .9375rem; } .spot__desc { margin-top: 22px; max-width: 38ch; color: rgba(238, 244, 246, .86); font-size: .9375rem; line-height: 1.7; } .spot__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: #fff; text-decoration: none; font-size: .9375rem; border-bottom: 1px solid var(--sp-accent); padding-bottom: 4px; } .spot__link svg { width: 15px; height: 15px; transition: transform .35s ease; } .spot__link:hover svg, .spot__link:focus-visible svg { transform: translateX(4px); } .spot__media { grid-column: 6 / 13; position: relative; margin: 0; padding-bottom: 6%; } .spot__main { border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 10, 20, .45); } .spot__main img { display: block; width: 100%; height: auto; } .spot__detail { position: absolute; left: -9%; bottom: 0; width: 23%; border-radius: 22px; overflow: hidden; border: 6px solid #0B0F14; box-shadow: 0 30px 60px rgba(0, 10, 20, .5); } .spot__detail img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 17; object-fit: cover; object-position: 50% 0; } @media (max-width: 899px) { .spot__text, .spot__media { grid-column: 1 / -1; } .spot__media { margin-top: 44px; padding-bottom: 14%; } .spot__detail { left: auto; right: 4%; width: 32%; } } /* Einführung im dunklen Thema: eigene ruhige Fläche statt der hellen */ :root[data-theme="dark"] .brief { background: #14171C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brief { background: #14171C; } } /* Entwurf, Feinschliff: zweizeilige Aussage, Bild ab der Mitte, Kennzeichnung links davon, Detail rechts */ .stage__title { font-size: clamp(2.6rem, 1.4rem + 3.2vw, 4.8rem); } .stage__copy { max-width: min(40rem, 45vw); } .stage__media { left: 50%; } .stage__proj { max-width: 46vw; } .spot__detail { left: auto; right: -5%; bottom: -2%; } @media (max-width: 899px) { .stage { display: flex; flex-direction: column; } .stage__inner { display: contents; } .stage__copy { order: 1; padding-left: var(--gx); padding-right: var(--gx); } .stage__media { order: 2; } .stage__proj { order: 3; max-width: none; } .spot__detail { right: 2%; } } @media (max-width: 899px) { .stage__copy { max-width: none; align-self: stretch; } .stage__title { font-size: clamp(2.4rem, 1.6rem + 4vw, 3.2rem); } } @media (max-width: 899px) { .stage__media { left: auto; width: 165vw; margin-top: 36px; } } @media (max-width: 899px) { .hs__bar { padding-bottom: 14px; } } /* Bühne als Sektion im Seitenverlauf (nicht Hero): eigene Höhe, kein Abstand für die Kopfzeile */ .stage--section { height: min(92svh, 880px); min-height: 640px; } .stage--section .stage__copy { padding-top: 0; } .stage--section .stage__media { top: 13%; } @media (prefers-reduced-motion: no-preference) { .stage--section .stage__media, .stage--section .stage__copy > * { animation: none; } .js .stage--section .stage__media.rv-pending img { opacity: 0; transform: translateX(40px); } .js .stage--section .stage__media img { transition: opacity 900ms ease, transform 1200ms cubic-bezier(.2, .7, .2, 1); } } @media (max-width: 899px) { .stage--section { height: auto; min-height: 0; } .stage--section .stage__copy { padding-top: clamp(64px, 10vh, 96px); } } /* ========================================================================== 25 Rechenbeispiele als zwei Abschnitte 50/50, Bild bis zum Browserrand, animierte Vergleichsbalken (17.10.2026) ========================================================================== */ .nums { background: #FBFAF7; padding-bottom: 0; } .nums .nums__head { padding-bottom: clamp(36px, 6vh, 64px); } .nx-list { display: grid; } .nx { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #FBFAF7; } .nx + .nx { border-top: 1px solid var(--line); } .nx__media { position: relative; margin: 0; min-height: clamp(460px, 62vh, 720px); overflow: hidden; background: #1a1612; } .nx__go { position: absolute; inset: 0; z-index: 2; } /* Bild führt zur Fallstudie (18.10.2026) */ .nx__case { margin-top: 18px; } /* Berechnung und Fallstudie nebeneinander, gleiche Schrift (18.10.2026); offene Berechnung nimmt die ganze Breite, der Link rückt darunter */ .nx__acts { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(20px, 2.4vw, 36px); row-gap: 16px; margin-top: 30px; } .nx .nx__acts .nx__how { margin-top: 0; } .nx__acts .nx__how[open] { flex-basis: 100%; } .nx__acts .nx__case { margin: 0; } .nx__acts .nx__case .arrow-link { font-size: 0.9375rem; font-weight: 450; line-height: inherit; border-bottom: 1px solid var(--line-2); padding-bottom: 3px; } .nx__acts .nx__case .arrow-link:hover, .nx__acts .nx__case .arrow-link:focus-visible { border-bottom: 1px solid var(--ink); padding-bottom: 3px; } .nx__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; } .nx--img-right .nx__media img { object-position: 0 0; } /* Freigestellte Geräte (PNG mit Schatten im Alphakanal): ganz zeigen, auf der Abschnittsfläche */ .nx__media--fit { --fit-pad: clamp(24px, 4vw, 72px); background: transparent; } :root body.draft-calm .nx__media--fit { background: transparent; } .nx__media--fit img, .nx--img-right .nx__media--fit img { top: var(--fit-pad); left: var(--fit-pad); width: calc(100% - 2 * var(--fit-pad)); height: calc(100% - 2 * var(--fit-pad)); object-fit: contain; object-position: 50% 50% !important; } /* Desktop: Geräte 30 % größer. Nur der transparente Rand des PNGs läuft über den Rahmen, Geräte und Schatten bleiben ganz (sichtbarer Inhalt 88 % der Bildbreite × 1,3 bleibt bei jeder Spaltenbreite ab 900 px unter der Spalte). */ @media (min-width: 900px) { .nx__media--fit img { scale: 1.3; } } /* Ab 1200 px größer: 1,3 × 1,15 = 1,5, danach auf Wunsch 7 % kleiner = 1,4 (17.10.2026). Das passt nicht mehr in die Spalte: Das Bild wächst vom äußeren Rand weg nach innen und ragt in den Abstand vor dem Text, rechts bzw. links bleibt es im Fenster. Ohne Zeigerereignisse, damit der transparente Rand den Text nicht abdeckt. */ @media (min-width: 1200px) { .nx__media--fit { overflow: visible; z-index: 0; } .nx__media--fit img { scale: 1.4; transform-origin: 66% 50%; pointer-events: none; } .nx--img-left .nx__media--fit img { transform-origin: 34% 50%; } } .nx__note { position: absolute; left: 16px; bottom: 14px; z-index: 1; max-width: calc(100% - 32px); padding: 6px 10px; background: rgba(12, 14, 18, .62); color: rgba(255, 255, 255, .86); font-size: .75rem; line-height: 1.4; backdrop-filter: blur(6px); } .nx--img-right .nx__media { order: 2; } .nx--img-right .nx__body { order: 1; } .nx__body { display: flex; align-items: center; } .nx__inner { width: 100%; max-width: 620px; padding: clamp(48px, 8vh, 96px) clamp(28px, 5vw, 88px); } .nx--img-left .nx__inner { margin-right: auto; } .nx--img-right .nx__inner { margin-left: auto; } .nx__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .nx__project { font-size: .9375rem; color: var(--ink-2); } .nx__status { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 3px 8px; } .nx__headline { margin-top: 14px; font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.35rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); max-width: 18ch; } .nx__text { margin-top: 16px; max-width: 44ch; color: var(--ink-2); font-size: .9375rem; line-height: 1.65; } .nx__fig { margin-top: 28px; } .nx__num { display: flex; align-items: baseline; gap: 10px; line-height: 1; color: var(--ink); } .nx__num > span:not(.nx__pre):not(.nx__unit) { font-size: clamp(2.8rem, 1.8rem + 2.6vw, 4.2rem); font-weight: 400; letter-spacing: -0.04em; font-variant-numeric: lining-nums; } .nx__pre, .nx__unit { font-size: 1.125rem; color: var(--ink-2); } .nx__mean { margin-top: 8px; font-size: .875rem; color: var(--muted); line-height: 1.5; } .nx__mean b { font-weight: 500; color: var(--ink); } .nx__how { margin-top: 22px; } /* Balken: beide ab null auf derselben Skala, Vorher neutral, Mit ibx im Akzent */ .bars { margin-top: 26px; display: grid; gap: 14px; } .bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .8125rem; line-height: 1.35; } .bar__label { color: var(--ink-2); } .bar__val { white-space: nowrap; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; } .bar__val small { font-size: .75rem; font-weight: 400; color: var(--muted); } .bar__track { display: block; height: 10px; margin-top: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; } .bar__fill { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--w, 1)); background: #B9B4AA; } .bar--after .bar__fill { background: var(--accent-soft); } .bars__diff { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: .875rem; } .bars__diff-k { color: var(--ink-2); } .bars__diff-v { color: var(--ink); font-weight: 500; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .js .bars .bar__fill { transform: scaleX(0); transition: transform 1100ms cubic-bezier(.22, .61, .21, 1); } .js .bars .bar--after .bar__fill { transition-delay: 150ms; } .js .bars.is-in .bar__fill { transform: scaleX(var(--w, 1)); } .js .bars .bars__diff { opacity: 0; transition: opacity 500ms ease 900ms; } .js .bars.is-in .bars__diff { opacity: 1; } } :root[data-theme="dark"] .nums, :root[data-theme="dark"] .nx { background: #14171C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nums, :root:not([data-theme="light"]) .nx { background: #14171C; } } :root[data-theme="dark"] .bar__fill { background: #5B5F66; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar__fill { background: #5B5F66; } } :root[data-theme="dark"] .bar--after .bar__fill { background: var(--accent-soft); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar--after .bar__fill { background: var(--accent-soft); } } @media (max-width: 899px) { .nx { grid-template-columns: 1fr; } .nx__media, .nx--img-right .nx__media { order: 0; min-height: 0; aspect-ratio: 4 / 3; } .nx__media--fit { --fit-pad: 16px; } .nx__body, .nx--img-right .nx__body { order: 1; } .nx__inner { max-width: none; padding: 32px var(--gx) 48px; } } /* Fuß: Darstellung als Symbole auf dunkler Fläche */ .site-footer .theme-switch--icons .icon-btn { color: var(--panel-muted); } .site-footer .theme-switch--icons .icon-btn:hover { color: var(--panel-ink); } .site-footer .theme-switch--icons .icon-btn[aria-pressed="true"] { color: var(--panel-ink); border-color: var(--panel-line); } /* Einführung: Absatz direkt unter der Überschrift */ .brief__grid { align-items: start; } .brief__head { grid-column: 1 / 8; } .brief__text { grid-column: 1 / 7; margin-top: calc(-1 * clamp(14px, 3vh, 36px)); } @media (max-width: 899px) { .brief__head, .brief__text { grid-column: 1 / -1; } .brief__text { margin-top: 0; } } /* Slider: Dachzeile steht je Slide direkt über der Überschrift; die H1 bleibt nur für Screenreader und Suche */ .planhero--slider .hs__h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .planhero--slider .hs__tblock .hp__eyebrow { margin-bottom: 14px; } /* Rechenbeispiele: Zweitkennzahl kleiner neben der Hauptzahl, Bildplatzhalter bis ein Motiv gepflegt ist */ .nx__fig--2 { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, rgba(0,0,0,.1)); } .nx__fig--2 .nx__num > span:not(.nx__pre):not(.nx__unit) { font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.4rem); } .nx__fig--2 .nx__pre, .nx__fig--2 .nx__unit { font-size: 1rem; } .nx__media--empty { display: flex; align-items: center; justify-content: center; background: var(--surface-2, #ebe7e0); background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,.035) 22px 23px); } .nx__media--empty span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } [data-theme="dark"] .nx__media--empty { background-color: #1c1e23; background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.04) 22px 23px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nx__media--empty { background-color: #1c1e23; background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.04) 22px 23px); } } /* Rechenbeispiele: Kopf und beide Abschnitte leicht voneinander abgesetzt (Kopf hell, dann Kalkstein, dann Stein) */ .nx:nth-child(odd) { background: var(--paper); } .nx:nth-child(even) { background: var(--paper-2); } .nx + .nx { border-top: 0; } :root[data-theme="dark"] .nx:nth-child(odd) { background: #0F1216; } :root[data-theme="dark"] .nx:nth-child(even) { background: #1B1F25; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nx:nth-child(odd) { background: #0F1216; } :root:not([data-theme="light"]) .nx:nth-child(even) { background: #1B1F25; } } /* Rechenbeispiele: Text an die Außenkante, bündig mit der Seitenspalte (Kopf darüber) */ @media (min-width: 900px) { .nx { --nx-out: max(var(--gx), calc((100vw - var(--max)) / 2 + var(--gx))); } .nx--img-right .nx__inner { margin-left: 0; margin-right: auto; padding-left: var(--nx-out); } .nx--img-left .nx__inner { margin-right: 0; margin-left: auto; padding-right: var(--nx-out); } } /* Ausgewähltes Projekt: Geräte freigestellt (ohne Hintergrund) und groß, Text darüber mittig zur Bildhöhe */ .spot__grid { align-items: center; } .spot__text { padding-bottom: 0; } .spot__media { padding-bottom: 0; } .spot__main { border-radius: 0; overflow: visible; box-shadow: none; } @media (min-width: 900px) { .spot__media { grid-column: 5 / 13; margin-right: calc(-1 * var(--gx)); } .spot__text { align-self: center; margin-top: -4vh; } } @media (max-width: 899px) { .spot__media { margin: 36px calc(-1 * var(--gx)) 0; } } /* Bühne als Sektion: längere Beschreibung, breitere Zeile */ .stage--section .stage__text { max-width: 52ch; } /* Slider (17.10.2026, Runde 3): Text höher und breiter; Projektzeile in jedem Slide an derselben Stelle, bündig mit der Überschrift: Zähler | Name über Leistung (feste Spalte) | Fallstudie. */ @media (min-width: 900px) { .planhero--slider .hp__content { padding-bottom: clamp(190px, 30vh, 320px); } .planhero--slider .hp__lead { max-width: 56ch; } .hs__caps { grid-column: 1 / span 9; } .hs__cap { display: grid; grid-template-columns: 4.5rem minmax(0, 24rem) auto; column-gap: 24px; row-gap: 3px; align-items: center; padding-top: 16px; border-top: 1px solid rgba(17, 21, 28, .16); white-space: nowrap; } .hs__num { grid-row: 1 / 3; grid-column: 1; } .hs__name { grid-row: 1; grid-column: 2; } .hs__kind { grid-row: 2; grid-column: 2; font-size: .6875rem; } .hs__link { grid-row: 1 / 3; grid-column: 3; margin-left: 0; justify-self: start; } .hs__cap[hidden] { display: none; } .hs__bar { align-items: end; } } /* Rechenbeispiele: Textspalte breiter, Abstand zum Bild etwas knapper */ @media (min-width: 900px) { .nx__inner { max-width: 760px; } .nx--img-left .nx__inner { padding-left: clamp(28px, 4vw, 64px); } .nx--img-right .nx__inner { padding-right: clamp(28px, 4vw, 64px); } .nx__text { max-width: 54ch; } } /* ========================================================================== 26 Entwurf „ruhig“ (17.10.2026), nur auf der Vorschauseite (body.draft-calm) Ein warmweißer Grundton, Trennung durch Abstand und Haarlinien, dunkel nur der Footer, Akzent nur für Kontakt und Diagramm, eine Schriftfamilie mit zwei Schnitten (400/500). ========================================================================== */ :root body.draft-calm { --dc-sec: clamp(72px, 11vh, 128px); --dc-h2: clamp(2rem, 1.35rem + 1.9vw, 3.1rem); --dc-h3: clamp(1.45rem, 1.2rem + .8vw, 1.95rem); } :root body.draft-calm .brief, :root body.draft-calm .nums, :root body.draft-calm .nx, :root body.draft-calm .nx:nth-child(n), :root body.draft-calm .gallery, :root body.draft-calm .cta-section, :root body.draft-calm .section--stone { background: var(--paper); } :root body.draft-calm .brief, :root body.draft-calm .gallery, :root body.draft-calm .cta-section { padding-block: var(--dc-sec); } :root body.draft-calm .nums { padding-top: var(--dc-sec); padding-bottom: var(--dc-sec); } :root body.draft-calm .brief > .wrap, :root body.draft-calm .nums > .wrap:first-child, :root body.draft-calm .gallery > .wrap, :root body.draft-calm .cta-section > .wrap { position: relative; } :root body.draft-calm .brief > .wrap::before, :root body.draft-calm .nums > .wrap:first-child::before, :root body.draft-calm .gallery > .wrap::before, :root body.draft-calm .cta-section > .wrap::before { content: ""; position: absolute; left: var(--gx); right: var(--gx); top: calc(-1 * var(--dc-sec)); border-top: 1px solid var(--line); } :root body.draft-calm .section + .section::before { display: none; } /* Typografie: Überschriften 400, Zwischenüberschriften 500, gleiche Stufen in allen Abschnitten */ :root body.draft-calm .planhero--slider .hp__title { font-weight: 400; letter-spacing: -0.035em; } :root body.draft-calm .brief__title, :root body.draft-calm .nums__title, :root body.draft-calm .gallery__title, :root body.draft-calm .cta-section .cta-band__title h2 { font-size: var(--dc-h2); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; } :root body.draft-calm .nx__headline { font-size: var(--dc-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; } :root body.draft-calm .gl__name { font-weight: 500; } :root body.draft-calm .brief__t { font-weight: 500; font-size: 1.125rem; } :root body.draft-calm .label, :root body.draft-calm .nums__head .label, :root body.draft-calm .gallery__head .label { font-size: .6875rem; letter-spacing: .08em; color: var(--muted); } :root body.draft-calm .brief__text, :root body.draft-calm .nums__intro, :root body.draft-calm .nx__text, :root body.draft-calm .gl__desc, :root body.draft-calm .cta-band__title p { font-size: .9688rem; line-height: 1.65; color: var(--ink-2); } :root body.draft-calm .cta-band__title p { max-width: 44ch; } /* Hero: ein Motiv, keine Planlinien, keine Nummerierung, Bedienung reduziert */ :root body.draft-calm .planhero--slider .dv__lines, :root body.draft-calm .hs__num { display: none; } :root body.draft-calm .hs__cap { border-top-color: rgba(17, 21, 28, .12); } /* Leistungen kompakt: ohne Nummern, feine Linien */ :root body.draft-calm .brief__n { display: none; } :root body.draft-calm .brief__field { grid-template-columns: 1fr; border-top: 1px solid var(--line-2); padding-block: 20px; } :root body.draft-calm .brief__d { grid-column: 1; } /* Wirtschaftlichkeit: beide Abschnitte gleiche Fläche, gleiche Hierarchie, Abstand statt Farbwechsel */ :root body.draft-calm .nums .nums__head { padding-bottom: clamp(40px, 6vh, 64px); } :root body.draft-calm .nx-list { row-gap: clamp(56px, 9vh, 104px); } :root body.draft-calm .nx__status { border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-size: .8125rem; color: var(--muted); } :root body.draft-calm .nx__status::before { content: "·"; margin-right: 8px; } :root body.draft-calm .nx__media { background: var(--paper-2); } :root body.draft-calm .nx__num > span:not(.nx__pre):not(.nx__unit) { font-weight: 400; } :root body.draft-calm .nx__fig--2 { border-top: 0; padding-top: 0; margin-top: 22px; } :root body.draft-calm .nx__derive { margin-top: 18px; max-width: 54ch; font-size: .8125rem; line-height: 1.6; color: var(--muted); } :root body.draft-calm .nx__inner { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px); } /* Diagramm: gemeinsame Skala ab null, vorher neutral, mit ibx dezent im Akzent, Einsparung schraffiert und betont */ :root body.draft-calm .bars { margin-top: 30px; gap: 16px; } :root body.draft-calm .bar__track { height: 12px; background: transparent; border-left: 1px solid var(--ink); } :root body.draft-calm .bar--before .bar__fill { background: color-mix(in srgb, var(--ink) 22%, var(--paper)); } :root body.draft-calm .bar--after .bar__fill { background: color-mix(in srgb, var(--accent-soft) 78%, var(--paper)); } :root body.draft-calm .bars:not(.bars--single) .bar--after .bar__track { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent-soft) 30%, transparent) 0 2px, transparent 2px 7px); } :root body.draft-calm .bars__diff { border-top: 0; padding-top: 4px; } :root body.draft-calm .bars__diff-k { display: inline-flex; align-items: center; gap: 8px; } :root body.draft-calm .bars__diff-k::before { content: ""; width: 14px; height: 10px; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent-soft) 60%, transparent) 0 2px, transparent 2px 5px); } :root body.draft-calm .bars__diff-v { font-size: 1.125rem; } @media (prefers-reduced-motion: no-preference) { :root body.draft-calm .js .bars .bar__fill, :root.js body.draft-calm .bars .bar__fill { transition-duration: 950ms; } :root body.draft-calm .js .bars .bars__diff, :root.js body.draft-calm .bars .bars__diff { transition: opacity 400ms ease 800ms; } } /* Referenzen: gleiche Bildbehandlung (flache Seitenansichten, Haarlinie), kurze Beschriftung */ :root body.draft-calm .gl__media { border: 1px solid var(--line); background: var(--paper-2); } :root body.draft-calm .gl__ind { color: var(--muted); } :root body.draft-calm .gl__row--wide .gl__item { grid-column: 1 / 13; } /* Kontakt kompakt: Text, Ansprechpartner und Schaltfläche zusammen */ :root body.draft-calm .cta-band { align-items: start; row-gap: 28px; } :root body.draft-calm .cta-band__title { grid-column: 1 / span 7; } :root body.draft-calm .cta-band__actions { grid-column: 8 / span 5; align-content: start; padding-top: 6px; } :root body.draft-calm .cta-person { margin-top: 4px; padding-top: 18px; gap: 14px; } @media (max-width: 899px) { :root body.draft-calm .cta-band__title, :root body.draft-calm .cta-band__actions { grid-column: 1 / -1; } :root body.draft-calm .nx-list { row-gap: 48px; } } @media (min-width: 900px) { :root body.draft-calm .hs__cap { grid-template-columns: minmax(0, 24rem) auto; } :root body.draft-calm .hs__name, :root body.draft-calm .hs__kind { grid-column: 1; } :root body.draft-calm .hs__link { grid-column: 2; } } :root body.draft-calm .gl__aside { border-top: 0; padding-top: 0; } :root body.draft-calm .gl__all .btn { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } :root body.draft-calm .gl__all .btn:hover { border-color: var(--ink); } /* Entwurf: Schraffur der Einsparung erst nach dem Aufbau der Balken einblenden */ :root body.draft-calm .bars:not(.bars--single) .bar--after .bar__track { position: relative; background: transparent; } :root body.draft-calm .bars:not(.bars--single) .bar--after .bar__track::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent-soft) 34%, transparent) 0 2px, transparent 2px 7px); } :root body.draft-calm .bars:not(.bars--single) .bar--after .bar__fill { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { :root.js body.draft-calm .bars .bar--after .bar__track::before { opacity: 0; transition: opacity 400ms ease 700ms; } :root.js body.draft-calm .bars.is-in .bar--after .bar__track::before { opacity: 1; } } /* Logo beim ersten Seitenaufruf je Besuch: i, b, x nacheinander, danach „company“ als Ganzes (Klasse ibx-intro aus dem Kopfskript, nur ohne reduzierte Bewegung, einmal je Sitzung). */ @media (prefers-reduced-motion: no-preference) { .ibx-intro .site-header .brand .wm { transform-box: fill-box; transform-origin: 50% 100%; animation: wmIn 560ms cubic-bezier(.22, .61, .21, 1) both; } .ibx-intro .site-header .brand .wm--i { animation-delay: 120ms; } .ibx-intro .site-header .brand .wm--b { animation-delay: 300ms; } .ibx-intro .site-header .brand .wm--x { animation-delay: 480ms; } .ibx-intro .site-header .brand__sub { animation: wmSub 700ms ease 1050ms both; } } @keyframes wmIn { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } } @keyframes wmSub { from { opacity: 0; } to { opacity: 1; } } /* Slider-Leiste (17.10.2026, Runde 4): Projektzeile rechts, Ladelinie als Oberkante, runde Pfeile, Pause nur sichtbar bei Tastaturfokus (Zeiger pausiert beim Überfahren). Gilt für alle Slides. */ .hs__panel { grid-column: 7 / 13; pointer-events: auto; min-width: 0; } .hs__prog, .hs__prog:where(*) { display: block; flex: none; width: 100%; height: 1px; margin: 0 0 16px; background: rgba(17, 21, 28, .16); overflow: hidden; } .hs__prog span { display: block; height: 100%; width: 100%; background: rgba(17, 21, 28, .7); transform: scaleX(0); transform-origin: left; } .hs__row { display: flex; align-items: center; gap: 24px; } .hs__caps { flex: 1 1 auto; min-width: 0; } .hs__cap, .hs__cap:where(*) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 20px; row-gap: 3px; align-items: center; padding-top: 0; border-top: 0; white-space: nowrap; min-height: 0; } .hs__cap[hidden] { display: none; } .hs__num { grid-row: 1 / 3; grid-column: 1; } .hs__name { grid-row: 1; grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hs__kind { grid-row: 2; grid-column: 2; font-size: .6875rem; } .hs__link { grid-row: 1 / 3; grid-column: 3; margin-left: 0; } .hs__ctrl { flex: none; display: flex; align-items: center; gap: 8px; } .hs__btn, .hs__btn:where(*) { width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(17, 21, 28, .28); background: transparent; color: #11151C; opacity: 1; backdrop-filter: none; cursor: pointer; transition: background-color 250ms var(--ease-arch), border-color 250ms var(--ease-arch), color 250ms var(--ease-arch); } .hs__btn:hover, .hs__btn:focus-visible { background: #11151C; border-color: #11151C; color: #F7F4EE; opacity: 1; } .hs__btn svg { width: 18px; height: 18px; } .hs__btn--pause { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .hs__btn--pause:focus-visible { position: static; width: 42px; height: 42px; margin: 0; clip: auto; overflow: visible; border: 1px solid #11151C; } .hs__btn--pause svg { width: 14px; height: 14px; } @media (min-width: 900px) { .hs__caps, .hs__ctrl { grid-column: auto; } .hs__cap { grid-template-columns: auto minmax(0, 1fr) auto; } .hs__num { grid-row: 1 / 3; grid-column: 1; display: inline; } .hs__name, .hs__kind { grid-column: 2; } .hs__link { grid-column: 3; } .hs__bar { align-items: end; } } @media (max-width: 1199px) and (min-width: 900px) { .hs__panel { grid-column: 6 / 13; } } @media (max-width: 899px) { .hs__bar { grid-template-columns: 1fr; } .hs__panel { grid-column: 1 / -1; } .hs__prog { display: block; margin-bottom: 12px; } .hs__cap { grid-template-columns: auto minmax(0, 1fr); } .hs__btn { width: 38px; height: 38px; } } /* Slider-Pfeile kleiner (17.10.2026) */ .hs__btn, .hs__btn:where(*) { width: 32px; height: 32px; } .hs__btn svg { width: 14px; height: 14px; } .hs__btn--pause:focus-visible { width: 32px; height: 32px; } .hs__ctrl { gap: 6px; } @media (max-width: 899px) { .hs__btn { width: 30px; height: 30px; } } /* Slider: nur die Pfeile, ohne Kreis (Trefferfläche bleibt 32 px) */ .hs__btn, .hs__btn:where(*) { border: 0; border-radius: 0; background: transparent; color: #11151C; opacity: .7; } .hs__btn:hover, .hs__btn:focus-visible { background: transparent; color: #11151C; opacity: 1; } .hs__btn svg { width: 18px; height: 18px; transition: transform 250ms var(--ease-arch); } .hs__btn[data-hs="next"]:hover svg { transform: translateX(3px); } .hs__btn[data-hs="prev"]:hover svg { transform: translateX(-3px); } .hs__btn--pause:focus-visible { border: 0; outline: 1px solid #11151C; } .hs__ctrl { gap: 4px; } /* Rechenbeispiele, Textbild (17.10.2026): Projektzeile ohne Rahmen, Überschrift im Schnitt der übrigen Überschriften, Kennzahlen gleich groß nebeneinander über einer Haarlinie, Bedeutung und Zeitraum in zwei ruhigen Zeilen. */ .nx__status { border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-size: .8125rem; color: var(--muted); } .nx__status::before { content: "·"; margin-right: 8px; } .nx__headline { font-weight: 400; letter-spacing: -0.025em; } .nx__text { margin-top: 18px; } .nx__figs { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 28px 40px; } .nx__figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx__figs .nx__fig, .nx__figs .nx__fig--2 { margin: 0; padding: 0; border: 0; } .nx__figs .nx__num { flex-wrap: wrap; gap: 4px 8px; } .nx__figs .nx__num > span:not(.nx__pre):not(.nx__unit) { font-size: clamp(2.1rem, 1.5rem + 1.4vw, 3rem); font-weight: 400; letter-spacing: -0.035em; } .nx__figs .nx__pre, .nx__figs .nx__unit { font-size: 1rem; } .nx__figs .nx__mean { margin-top: 12px; font-size: .8125rem; line-height: 1.5; } .nx__figs .nx__mean b { display: block; font-weight: 500; color: var(--ink); } .nx__figs .nx__mean span { display: block; color: var(--muted); } .nx .bars { margin-top: 30px; } .nx__how { margin-top: 30px; } @media (max-width: 599px) { .nx__figs--2 { grid-template-columns: 1fr; } } /* Rechenbeispiele: Donut (Anteil in Prozent), baut sich beim ersten Sichtbarwerden einmal in rund einer Sekunde auf */ .dn { display: flex; align-items: center; gap: 24px; margin: 30px 0 0; } .dn__ring { position: relative; flex: none; width: 132px; height: 132px; } .dn__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .dn__ring circle { fill: none; stroke-width: 9; } .dn__track { stroke: color-mix(in srgb, var(--ink) 10%, transparent); } .dn__arc { stroke: var(--accent-soft); stroke-linecap: butt; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--p)); } .dn__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; margin: 0; } .dn__head { display: block; font-size: .6875rem; color: var(--muted); margin-bottom: 4px; } .dn__num { font-size: 1.75rem; font-weight: 400; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; } .dn__cap { min-width: 0; font-size: .8125rem; line-height: 1.5; } .dn__cap b { display: block; font-weight: 500; color: var(--ink); font-size: .9375rem; margin-bottom: 4px; } .dn__cap span { display: block; color: var(--muted); max-width: 40ch; } @media (prefers-reduced-motion: no-preference) { .js .dn .dn__arc { stroke-dashoffset: 100; transition: stroke-dashoffset 1000ms cubic-bezier(.22, .61, .21, 1) 100ms; } .js .dn.is-in .dn__arc { stroke-dashoffset: calc(100 - var(--p)); } } @media (max-width: 599px) { .dn { gap: 18px; } .dn__ring { width: 112px; height: 112px; } .dn__num { font-size: 1.5rem; } } /* Zwei Donuts nebeneinander: Ring oben, Beschriftung darunter */ .dns { margin-top: 30px; } .dns .dn { margin: 0; } .dns--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } .dns--2 .dn { flex-direction: column; align-items: flex-start; gap: 16px; } .dns--2 .dn__ring { width: 120px; height: 120px; } @media (max-width: 599px) { .dns--2 { gap: 24px; } .dns--2 .dn__ring { width: 104px; height: 104px; } } /* Kontaktabschluss mit Porträt (Entwurf 17.10.2026): kompakt, Höhe aus Bild und Inhalt, warmer heller Grund */ .ccl { background: var(--paper); padding: clamp(48px, 7vh, 80px) 0; border-top: 1px solid var(--line); } .ccl__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: center; } .ccl--plain .ccl__grid { grid-template-columns: minmax(0, 1fr); } /* Ohne Porträt (18.10.2026): Frage groß links, Text, Name und Schaltfläche rechts */ .ccl--plain .ccl__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 112px); align-items: end; } .ccl--plain .ccl__title { grid-column: 1; grid-row: 1 / span 3; align-self: center; max-width: 14ch; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.9rem); } .ccl--plain .ccl__text, .ccl--plain .ccl__person, .ccl--plain .ccl__actions { grid-column: 2; } .ccl--plain .ccl__text { margin-top: 0; } @media (max-width: 899px) { .ccl--plain .ccl__body { grid-template-columns: minmax(0, 1fr); } .ccl--plain .ccl__title { grid-column: 1; grid-row: auto; } .ccl--plain .ccl__text, .ccl--plain .ccl__person, .ccl--plain .ccl__actions { grid-column: 1; } .ccl--plain .ccl__text { margin-top: 18px; } } .ccl__photo { margin: 0; overflow: hidden; background: var(--paper-2); aspect-ratio: 6 / 5; max-height: 480px; } .ccl__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .ccl__title { font-size: clamp(2rem, 1.35rem + 1.9vw, 3.1rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); max-width: 16ch; } .ccl__text { margin-top: 18px; max-width: 46ch; font-size: 1rem; line-height: 1.65; color: var(--ink-2); } .ccl__person { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 2px; max-width: 46ch; font-size: .9375rem; } .ccl__person b { font-weight: 500; color: var(--ink); } .ccl__person span { color: var(--muted); font-size: .875rem; } .ccl__actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } .ccl__mail { color: var(--ink-2); font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; } .ccl__mail:hover { color: var(--ink); text-decoration-color: var(--ink); } @media (max-width: 899px) { .ccl { padding: 40px 0 48px; } .ccl__grid { grid-template-columns: 1fr; row-gap: 28px; } .ccl__photo { aspect-ratio: 4 / 3; max-height: none; } } .ccl { padding: clamp(40px, 5vh, 56px) 0; } .ccl__photo { aspect-ratio: 5 / 4; max-height: 440px; } /* Fallstudie: dezenter Hinweis auf Symbolbilder im Kopfbild */ .cs-hero__note { position: absolute; z-index: 2; right: var(--gx); bottom: 22px; margin: 0; padding: 5px 9px; background: rgba(12, 14, 18, .5); color: rgba(255, 255, 255, .82); font-size: .6875rem; letter-spacing: .02em; backdrop-filter: blur(6px); } /* Fußzeile: Leitsatz ausführlicher, daher kleiner und ruhiger gesetzt */ .footer-claim p { font-size: .9375rem; line-height: 1.7; max-width: 44ch; letter-spacing: 0; color: var(--panel-muted); } /* ========================================================================== 27 Portfolio: Übersicht und Fallstudien (17.10.2026, inc/portfolio.php). Entwurf und Begründung: relaunch/entwurf-portfolio/. Handschrift: Bild führt, Text ordnet. Rechteckige Bildflächen mit schmaler Fuge (8 px), große Titel leicht (300), kleine Texte ruhig. Das Bernstein- Quadrat der Marke markiert Projekte, Kapitel und Bildpunkte. Jedes Bild trägt einen Hinweis, was es zeigt (Website, Mockup mit Beispieldaten, Demo, Schema). Bewegung: Bilder enthüllen sich einmal, Filter blenden kurz, sonst nichts. ========================================================================== */ :root { --pf-joint: 8px; --pf-ease: cubic-bezier(.22, .61, .21, 1); --pf-ink-on-img: #11151C; --pf-veil: 236, 231, 223; --pf-hfg: #11151C; --pf-hfg2: #343A44; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pf-veil: 18, 18, 18; --pf-hfg: #F4F1EA; --pf-hfg2: rgba(242, 239, 232, .82); } } :root[data-theme="dark"] { --pf-veil: 18, 18, 18; --pf-hfg: #F4F1EA; --pf-hfg2: rgba(242, 239, 232, .82); } /* Bild je Darstellung (hell/dunkel), folgt System und Schalter */ .pf-theme-d { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-theme-l { display: none; } :root:not([data-theme="light"]) .pf-theme-d { display: contents; } } :root[data-theme="dark"] .pf-theme-l { display: none; } :root[data-theme="dark"] .pf-theme-d { display: contents; } .pf-theme-l { display: contents; } :root[data-theme="light"] .pf-theme-d { display: none; } .pf picture { display: contents; } /* Quadrat der Marke */ .pf-sq { display: inline-block; width: 7px; height: 7px; background: var(--accent-soft); margin-right: 10px; vertical-align: 1px; flex: none; } /* Bildhinweis: einheitlich an jedem Bild */ .pf-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-block; padding: 6px 9px 5px; background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); font-size: .6875rem; line-height: 1.2; letter-spacing: .02em; font-weight: 450; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } .pf-tag--top { top: 12px; bottom: auto; left: auto; right: 12px; } .pf-tag--inline { position: static; margin-left: 8px; vertical-align: 1px; background: var(--paper-2); } /* Interne Hinweise (fehlende Angaben). Über die Entwurfsleiste ausblendbar. */ .pf-int { margin: 24px 0 0; padding: 12px 14px; max-width: 72ch; border: 1px dashed var(--mark); background: color-mix(in srgb, var(--accent-soft) 9%, transparent); color: var(--ink); font-family: var(--mono); font-size: .78rem; line-height: 1.55; } .pf-int::before { content: "Intern"; display: block; margin-bottom: 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mark); } .pf-int code { font-size: .95em; } /* ========================================================================== Übersicht: Einstieg ========================================================================== */ .pfh { padding: clamp(28px, 4.5vh, 56px) 0 clamp(48px, 7vh, 88px); } .pfh__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .pfh__text { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-bottom: 2px; } .pfh__text .label { display: flex; align-items: center; } .pfh__title { margin: 0; color: var(--ink); font-weight: 300; font-size: clamp(2.7rem, 1.2rem + 3.9vw, 5.6rem); line-height: .98; letter-spacing: -0.042em; } .pfh__title em, .pfh__title span { display: block; font-style: normal; color: var(--muted); } .pfh__lead { margin-top: 28px; max-width: 34ch; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: var(--ink-2); } .pfh__more { margin-top: 30px; } .pfh__stage { grid-column: 6 / -1; margin-right: calc(-1 * (var(--gx) + max(0px, (100vw - var(--max)) / 2))); display: grid; grid-template-columns: 1.42fr 1fr; grid-template-rows: 57fr 43fr; gap: var(--pf-joint); height: clamp(520px, calc(100svh - var(--header-h) - 110px), 820px); } .pfh__fig { position: relative; display: block; overflow: hidden; background: var(--paper-2); color: inherit; text-decoration: none; isolation: isolate; } .pfh__fig--a { grid-column: 1 / -1; grid-row: 1; background: #D9D2C6; } .pfh__fig--c { grid-column: 1; grid-row: 2; background: #063C5A; } .pfh__fig--b { grid-column: 2; grid-row: 2; background: #E8E4DB; } .pfh__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); transition: transform 1100ms var(--pf-ease); } .pfh__fig--c img { object-fit: contain; padding: 7% 7% 0; object-position: 50% 100%; } .pfh__fig::after { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 14, 0); transition: background-color 400ms var(--pf-ease); } .pfh__cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 8px 11px 7px; background: var(--paper); color: var(--ink); font-size: .8125rem; font-weight: 450; line-height: 1.25; } .pfh__cap span:last-child { color: var(--muted); } .pfh__cap .pf-sq { margin-right: 2px; } .pfh__fig:hover img { transform: scale(1.025); } .pfh__fig:hover::after { background: rgba(8, 10, 14, .08); } .pfh__fig:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } /* ========================================================================== Übersicht: Filter ========================================================================== */ .pff { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); } .pff__bar { display: flex; align-items: center; gap: 22px; min-height: 68px; } .pff__label { flex: none; margin: 0; } .pff__list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .pff__btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); color: var(--ink); background: transparent; font-size: .875rem; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 200ms var(--pf-ease), color 200ms var(--pf-ease), border-color 200ms var(--pf-ease); } .pff__btn .num { font-size: .75rem; color: var(--muted); transition: color 200ms var(--pf-ease); } .pff__btn:hover { border-color: var(--ink); text-decoration: none; } .pff__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .pff__btn[aria-pressed="true"] .num { color: color-mix(in srgb, var(--paper) 65%, transparent); } .pff__sep { width: 1px; height: 24px; margin: 0 8px; background: var(--line-2); } .pff__count { margin: 0 0 0 auto; flex: none; } /* ========================================================================== Übersicht: kuratierte Komposition ========================================================================== */ .pfg { padding: clamp(48px, 6.5vw, 104px) 0 clamp(72px, 8vw, 128px); } .pfg__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(64px, 7vw, 112px); } .pfg__note { margin-top: clamp(56px, 6vw, 88px); padding-top: 18px; border-top: 1px solid var(--line); max-width: 78ch; font-size: .8125rem; color: var(--muted); } .pfg__empty { font-size: 1.1rem; color: var(--muted); } .pfc { position: relative; grid-column: span 12; display: flex; flex-direction: column; min-width: 0; } .pfc[hidden] { display: none !important; } .pfc[data-slot="pair"] { grid-column: span 6; } .pfc[data-slot="asym-a"] { grid-column: span 7; } .pfc[data-slot="asym-b"] { grid-column: span 5; } .pfc[data-slot="trio"] { grid-column: span 4; } .pfc[data-slot="split"] { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; } .pfc__media { position: relative; margin: 0; overflow: hidden; background: var(--paper-2); aspect-ratio: 3 / 2; isolation: isolate; } .pfc[data-slot="feature"] .pfc__media { aspect-ratio: 21 / 9; } .pfc[data-slot="asym-a"] .pfc__media, .pfc[data-slot="asym-b"] .pfc__media { aspect-ratio: auto; height: clamp(320px, 37vw, 580px); } .pfc[data-slot="trio"] .pfc__media { aspect-ratio: 4 / 5; } .pfc[data-slot="split"] .pfc__media { grid-column: 1 / span 7; aspect-ratio: 16 / 10; } .pfc[data-slot="split"] .pfc__body { grid-column: 9 / -1; padding-top: 0; } .pfc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); transition: transform 1100ms var(--pf-ease); } .pfc__img--h, .pf-tag--h { display: none; } .pfc[data-slot="trio"] .pfc__img--q, .pfc[data-slot="asym-b"] .pfc__img--q, .pfc[data-slot="trio"] .pf-tag--q, .pfc[data-slot="asym-b"] .pf-tag--q { display: none; } .pfc[data-slot="trio"] .pfc__img--h, .pfc[data-slot="asym-b"] .pfc__img--h { display: block; } .pfc[data-slot="trio"] .pf-tag--h, .pfc[data-slot="asym-b"] .pf-tag--h { display: inline-block; } /* Markenfläche hinter freigestellten Geräten (Feld „Hintergrundfarbe“ der Referenz) */ .pfc__media[style*="--pf-bg"] { background: var(--pf-bg); } .pfc__media[style*="--pf-bg"] .pfc__img--h { object-fit: contain; object-position: 50% 100%; padding: 8% 6% 0; } /* Bildpaar: Gesamtansicht und Detail, nur auf dem großen Platz */ .pfc__duo, .pf-tag--duo { display: none; } .pfc[data-slot="feature"] .has-duo .pfc__duo { position: absolute; inset: 0; display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--pf-joint); background: var(--paper); } .pfc[data-slot="feature"] .has-duo .pf-tag--duo { display: inline-block; } .pfc[data-slot="feature"] .has-duo > .pfc__img, .pfc[data-slot="feature"] .has-duo figcaption { display: none; } .pfc__duo-a, .pfc__duo-b { position: relative; overflow: hidden; background: var(--paper-2); } .pfc__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(8, 10, 14, 0); transition: background-color 400ms var(--pf-ease); pointer-events: none; } .pfc:hover .pfc__img { transform: scale(1.025); } .pfc:hover .pfc__media::after { background: rgba(8, 10, 14, .07); } .pfc__body { position: relative; display: grid; gap: 12px; padding-top: 20px; align-content: start; } .pfc__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; } .pfc__i { color: var(--ink); } .pfc__title { margin: 0; max-width: 24ch; color: var(--ink); font-weight: 400; font-size: clamp(1.3rem, 1.05rem + .7vw, 1.8rem); line-height: 1.14; letter-spacing: -0.022em; } .pfc__title a { color: inherit; text-decoration: none; } .pfc__title a::after { content: ""; position: absolute; z-index: 3; inset: 0; } .pfc__link { position: absolute; inset: 0; z-index: 2; } /* Bild führt zur Fallstudie (18.10.2026) */ .pfc[data-slot="split"] .pfc__title a::after, .pfc[data-slot="feature"] .pfc__title a::after { inset: 0; } .pfc { } .pfc__title a:focus-visible { outline: none; } .pfc:has(.pfc__title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 8px; } .pfc__claim { display: block; color: var(--muted); font-weight: 300; } .pfc__rest { display: grid; gap: 14px; } .pfc__text { margin: 0; max-width: 46ch; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .pfc__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .pfc__tags li { padding: 4px 8px 3px; border: 1px solid var(--line); color: var(--muted); font-size: .75rem; line-height: 1.3; } .pfc__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; color: var(--ink); font-size: .875rem; font-weight: 500; } .pfc__go::after { content: ""; width: 14px; height: 14px; background: currentColor; transition: transform 200ms var(--pf-ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } .pfc:hover .pfc__go::after, .pfc:focus-within .pfc__go::after { transform: translateX(4px); } /* Großes Projekt: Titel links, Text rechts */ .pfc[data-slot="feature"] .pfc__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 24px; } .pfc[data-slot="feature"] .pfc__meta { grid-column: 1 / -1; } .pfc[data-slot="feature"] .pfc__title { grid-column: 1 / span 6; max-width: 20ch; font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 1.7vw, 3rem); line-height: 1.04; letter-spacing: -0.034em; } .pfc[data-slot="feature"] .pfc__rest { grid-column: 8 / -1; align-self: end; } .pfc[data-slot="split"] .pfc__title { font-weight: 300; font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.5rem); line-height: 1.06; letter-spacing: -0.03em; } /* Schema statt Bild (Projekt ohne echtes Bildmaterial) */ .pfc__media--schema { background: var(--panel); color: var(--panel-ink); display: grid; place-items: center; } .pf-schema { list-style: none; margin: 0; padding: clamp(28px, 4vw, 56px); width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; } .pf-schema::before { content: ""; position: absolute; left: clamp(28px, 4vw, 56px); right: clamp(28px, 4vw, 56px); top: calc(clamp(28px, 4vw, 56px) + 3px); height: 1px; background: var(--panel-line); } .pf-schema li { position: relative; padding: 0 18px 0 0; display: grid; gap: 14px; } .pf-schema__k { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); background: var(--panel); position: relative; z-index: 1; padding-right: 10px; justify-self: start; } .pf-schema__t { font-size: clamp(.95rem, .85rem + .4vw, 1.25rem); line-height: 1.35; font-weight: 300; color: var(--panel-ink); max-width: 18ch; } .pfc__media--schema .pf-tag { background: color-mix(in srgb, var(--panel-ink) 12%, transparent); color: var(--panel-ink); } /* Filter: kurze Übergänge */ @media (prefers-reduced-motion: no-preference) { .pfg__list.is-out .pfc { opacity: 0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease; } .pfc.is-in { animation: pfIn 420ms var(--pf-ease) both; animation-delay: calc(var(--k, 0) * 45ms); } } @keyframes pfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ========================================================================== Übersicht: Werkschau (pf-overview, Darstellung „werkschau“) Ein Bildsystem für alle Projekte: Geräte im selben Studio (assets/work, 16:10), Werkverzeichnis im Kopf, Filter klebt unter der Kopfzeile, ruhiges Raster. ========================================================================== */ .pfw { padding: clamp(28px, 4.5vh, 56px) 0 clamp(56px, 8vh, 104px); } .pfw__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); } .pfw__text { grid-column: 1 / span 5; grid-row: 1; display: flex; flex-direction: column; gap: 28px; } .pfw__text .label { display: flex; align-items: center; margin: 0; } .pfw__title { font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4.9rem); } .pfw__lead { margin-top: 0; } .pfw__index { grid-column: 1 / span 5; grid-row: 2; align-self: end; margin-top: clamp(36px, 6vh, 64px); } .pfw__label { margin: 0 0 12px; } .pfw__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .pfw__row { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto 14px; align-items: baseline; gap: 14px; padding: 14px 0 13px; border-bottom: 1px solid var(--line); color: var(--muted); text-decoration: none; transition: color 250ms var(--pf-ease); } .pfw__n { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; transition: color 250ms var(--pf-ease); } .pfw__name { color: var(--ink-2); font-size: 1.0625rem; letter-spacing: -0.01em; transition: color 250ms var(--pf-ease); } .pfw__kind { font-size: .8125rem; text-align: right; } .pfw__row::after { content: ""; width: 14px; height: 14px; align-self: center; background: currentColor; opacity: 0; transform: translateX(-6px); transition: opacity 250ms var(--pf-ease), transform 250ms var(--pf-ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } .pfw__row:hover, .pfw__row.is-on { color: var(--ink); text-decoration: none; } .pfw__row:hover .pfw__name, .pfw__row.is-on .pfw__name { color: var(--ink); } .pfw__row.is-on .pfw__n { color: var(--accent); } .pfw__row.is-on::after { opacity: 1; transform: none; } .pfw__row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .pfw__all { margin: 22px 0 0; } .pfw__stage { grid-column: 6 / -1; grid-row: 1 / span 2; position: relative; overflow: hidden; background: #CFC6B8; margin-right: calc(-1 * (var(--gx) + max(0px, (100vw - var(--max)) / 2))); min-height: clamp(560px, calc(100svh - var(--header-h) - 96px), 860px); } .pfw__fig { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 700ms var(--pf-ease); } .pfw__fig.is-on { opacity: 1; z-index: 1; } .pfw__fig { pointer-events: none; } .pfw__fig.is-on { pointer-events: auto; } .pfw__go { position: absolute; inset: 0; z-index: 2; } .pfw__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.035); transition: transform 1600ms var(--pf-ease); } .pfw__fig.is-on img { transform: none; } /* Filter: Reiter statt Kästen, klebt beim Scrollen unter der Kopfzeile */ .pf--ws .pff { position: sticky; top: var(--header-h); z-index: 30; scroll-margin-top: var(--header-h); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .pf--ws .pff__list { gap: 2px; } .pf--ws .pff__btn { position: relative; border: 0; padding: 0 12px; color: var(--muted); } .pf--ws .pff__btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--accent-soft); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--pf-ease); } .pf--ws .pff__btn:hover { color: var(--ink); } .pf--ws .pff__btn[aria-pressed="true"] { background: transparent; color: var(--ink); } .pf--ws .pff__btn[aria-pressed="true"] .num { color: var(--muted); } .pf--ws .pff__btn[aria-pressed="true"]::after { transform: scaleX(1); } /* Raster: alle Bilder 16:10, das erste breit */ .pf--ws .pfg__list { row-gap: clamp(72px, 7vw, 120px); } .pf--ws .pfc[data-slot] .pfc__media { aspect-ratio: 16 / 10; height: auto; } .pf--ws .pfc[data-slot="feature"] .pfc__media { aspect-ratio: 2 / 1; } .pf--ws .pfc__media--studio { background: #CFC6B8; } .pf--ws .pfc__media--studio .pfc__img { object-position: 50% 62%; } .pf--ws .pfc:hover .pfc__img { transform: scale(1.035); } .pfc__view { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 9px; background: var(--ink); color: var(--paper); font-size: .8125rem; font-weight: 500; line-height: 1.2; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--pf-ease), transform 300ms var(--pf-ease); pointer-events: none; } .pfc__view::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } .pf--ws .pfc:hover .pfc__view, .pf--ws .pfc:focus-within .pfc__view { opacity: 1; transform: none; } /* Schema (Projekt ohne Bild): Stufen untereinander, sobald die Karte schmal wird */ .pf--ws .pfc__media--schema { container-type: inline-size; } @container (max-width: 560px) { .pf--ws .pf-schema { grid-template-columns: 1fr; gap: 20px; } .pf--ws .pf-schema::before { display: none; } .pf--ws .pf-schema__t { max-width: 34ch; } } @media (max-width: 1099px) { .pfw__text, .pfw__index { grid-column: 1 / span 6; } .pfw__stage { grid-column: 7 / -1; } .pfw__kind { display: none; } } @media (max-width: 899px) { .pfw { padding-top: 24px; } .pfw__grid { display: block; } .pfw__text { gap: 20px; } .pfw__title { font-size: clamp(2.45rem, 1.4rem + 5.4vw, 4rem); } .pfw__stage { margin: 28px calc(-1 * var(--gx)) 0; min-height: 0; aspect-ratio: 4 / 3; } .pfw__kind { display: block; } } @media (max-width: 759px) { .pf--ws .pfc[data-slot] .pfc__media { aspect-ratio: 4 / 3; } .pf--ws .pfc[data-slot] .pfc__media--schema { aspect-ratio: auto; padding-bottom: 44px; } .pfc__view { display: none; } .pfw__row { grid-template-columns: 2.4em minmax(0, 1fr) 14px; } .pfw__kind { display: none; } } @media (prefers-reduced-motion: reduce) { .pfw__fig, .pfw__fig img, .pfc__view { transition: none; } } /* ========================================================================== Fallstudie: Kopf ========================================================================== */ .cs2h { position: relative; } .cs2h__k { display: flex; align-items: center; margin: 0 0 22px; } .cs2h__t { margin: 0; color: inherit; font-weight: 300; } .cs2h__name { display: flex; align-items: center; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); font-weight: 500; letter-spacing: -0.005em; margin-bottom: 14px; } .cs2h__claim { display: block; font-size: clamp(2.5rem, 1.25rem + 3.6vw, 5.2rem); line-height: .98; letter-spacing: -0.042em; font-weight: 300; } .cs2h__sum { margin: clamp(28px, 4vh, 44px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 40rem; } .cs2h__sum div { border-top: 1px solid currentColor; padding-top: 12px; border-top-color: color-mix(in srgb, currentColor 35%, transparent); } .cs2h__sum dt { color: inherit; opacity: .78; margin-bottom: 6px; } .cs2h__sum dd { margin: 0; font-size: .9375rem; line-height: 1.55; } /* Überlagert: Bild vollflächig, Text in der freien Bildhälfte */ .cs2h--overlay { min-height: clamp(560px, calc(100svh - var(--header-h)), 900px); display: grid; align-items: end; overflow: hidden; color: var(--pf-hfg); background: rgb(var(--pf-veil)); } .cs2h--overlay .cs2h__media { position: absolute; inset: 0; } .cs2h--overlay .cs2h__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 66% 50%); } .cs2h__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--pf-veil), .78) 0%, rgba(var(--pf-veil), .42) 34%, rgba(var(--pf-veil), 0) 54%); } .cs2h--overlay .cs2h__in { position: relative; z-index: 1; padding-block: clamp(48px, 9vh, 112px); } .cs2h--overlay .cs2h__text { max-width: 36rem; } .cs2h--overlay .cs2h__k, .cs2h--overlay .cs2h__sum dt { color: var(--pf-hfg2); } .cs2h--overlay .cs2h__sum dd { color: var(--pf-hfg); } @media (prefers-reduced-motion: no-preference) { .js .cs2h--overlay .cs2h__media img { animation: pfZoom 1600ms var(--pf-ease) both; } .js .cs2h__text > * { animation: pfIn 800ms var(--pf-ease) both; } .js .cs2h__text > :nth-child(2) { animation-delay: 90ms; } .js .cs2h__text > :nth-child(3) { animation-delay: 200ms; } } @keyframes pfZoom { from { opacity: .0; transform: scale(1.03); } to { opacity: 1; transform: none; } } /* Nebeneinander: Text links, Bild bis an den rechten Rand */ .cs2h--split { color: var(--ink); } .cs2h__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); min-height: clamp(560px, calc(100svh - var(--header-h)), 880px); } .cs2h--split .cs2h__text { grid-column: 1 / span 5; align-self: end; padding: clamp(40px, 7vh, 96px) 0; } .cs2h--split .cs2h__k, .cs2h--split .cs2h__sum dt { color: var(--muted); } .cs2h--split .cs2h__name { color: var(--ink); } .cs2h--split .cs2h__claim { color: var(--ink); } .cs2h--split .cs2h__media { grid-column: 6 / -1; position: relative; margin: 0; margin-right: calc(-1 * (var(--gx) + max(0px, (100vw - var(--max)) / 2))); overflow: hidden; background: #E9E5DC; } .cs2h--split .cs2h__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs2h--split .cs2h__media { background: var(--paper-2); } :root:not([data-theme="light"]) .cs2h--split .cs2h__media img { object-fit: contain; object-position: 30% 60%; padding: 8% 0 8% 6%; } } :root[data-theme="dark"] .cs2h--split .cs2h__media { background: var(--paper-2); } :root[data-theme="dark"] .cs2h--split .cs2h__media img { object-fit: contain; object-position: 30% 60%; padding: 8% 0 8% 6%; } /* Steckbrief */ .cs2f { border-bottom: 1px solid var(--line); } .cs2f__dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--ink); } .cs2f__dl div { padding: 16px 18px 20px 0; } .cs2f__dl div + div { padding-left: 18px; border-left: 1px solid var(--line); } .cs2f__dl dt { margin-bottom: 8px; } .cs2f__dl dd { margin: 0; color: var(--ink); font-size: .9375rem; line-height: 1.45; } .cs2f__dl dd small { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; } .cs2f__dl a { color: inherit; } /* Kapitelnavigation */ .cs2toc { border-bottom: 1px solid var(--line); } .cs2toc ol { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .cs2toc li + li { border-left: 1px solid var(--line); } .cs2toc a { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 18px; color: var(--ink-2); font-size: .875rem; text-decoration: none; white-space: nowrap; } .cs2toc li:first-child a { padding-left: 0; } .cs2toc a .num { font-size: .72rem; color: var(--muted); } .cs2toc a:hover { color: var(--ink); text-decoration: underline; } /* Kapitel */ .cs2c { padding-top: clamp(80px, 9vw, 152px); } .cs2c__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: clamp(32px, 4vw, 56px); } .cs2c__no { grid-column: 1 / span 3; display: flex; align-items: baseline; gap: 14px; margin: 0; padding-top: .6em; } .cs2c__no .num { color: var(--ink); } .cs2c__no .num::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--accent-soft); vertical-align: 1px; } .cs2c__title { grid-column: 4 / span 8; margin: 0; color: var(--ink); font-weight: 300; font-size: clamp(2rem, 1.25rem + 2.3vw, 3.6rem); line-height: 1.02; letter-spacing: -0.036em; } .cs2c__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .cs2c__body > * { grid-column: 4 / span 7; } .cs2c__body--split > .cs2-prose { grid-column: 4 / span 5; } .cs2c__body--split > .cs2-scatter { grid-column: 10 / -1; } .cs2m .pf-int { margin-left: calc((100% - 11 * var(--gap)) / 12 * 3 + 3 * var(--gap)); } .cs2-prose p + p { margin-top: 1em; } .cs2-prose p { max-width: 60ch; } .cs2-lead { color: var(--ink); font-size: clamp(1.15rem, 1rem + .45vw, 1.45rem); line-height: 1.45; font-weight: 400; letter-spacing: -0.01em; max-width: 44ch; } .cs2-src { margin-top: 12px; color: var(--muted); font-size: .8125rem; line-height: 1.5; } .cs2-h3 { margin: 0 0 14px; color: var(--ink); font-weight: 400; font-size: clamp(1.3rem, 1.05rem + .7vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; } .cs2-cap { margin-top: 14px; color: var(--ink-2); font-size: .875rem; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .cs2-cap .label { color: var(--ink); } /* Vorher-Werkzeuge: verstreute Felder */ .cs2-scatter { list-style: none; margin: 0; padding: 0; position: relative; min-height: 220px; align-self: start; } .cs2-scatter li { position: absolute; padding: 9px 12px 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: .8125rem; white-space: nowrap; transition: transform 900ms var(--pf-ease), opacity 600ms var(--pf-ease); } .cs2-scatter li:nth-child(1) { left: 4%; top: 0; transform: rotate(-3deg); } .cs2-scatter li:nth-child(2) { left: 46%; top: 30px; transform: rotate(2.5deg); } .cs2-scatter li:nth-child(3) { left: 16%; top: 78px; transform: rotate(4deg); } .cs2-scatter li:nth-child(4) { left: 52%; top: 116px; transform: rotate(-2deg); } .cs2-scatter li:nth-child(5) { left: 6%; top: 158px; transform: rotate(-1.5deg); } /* Zitate */ .cs2-quote { margin: 0; } .cs2-quote blockquote { margin: 0; } .cs2-quote p { color: var(--ink); font-weight: 300; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.35; letter-spacing: -0.015em; } .cs2-quote figcaption { margin-top: 12px; color: var(--muted); font-size: .8125rem; } .cs2-pair__text .cs2-quote { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .cs2-quote--pull { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .cs2-quote--pull blockquote, .cs2-quote--pull figcaption { grid-column: 4 / span 8; } .cs2-quote--pull p { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.6rem); line-height: 1.12; letter-spacing: -0.03em; } .cs2-quote--big { margin-top: clamp(56px, 7vw, 104px); padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .cs2-quote--big blockquote, .cs2-quote--big figcaption { grid-column: 4 / span 8; } .cs2-quote--big p { font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); line-height: 1.25; } /* Ziele */ .cs2-goals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .cs2c__body > .cs2-goals { grid-column: 4 / -1; } .cs2-goals li { border-top: 1px solid var(--ink); padding-top: 14px; } .cs2-goals .num { display: block; margin-bottom: 14px; font-size: .75rem; color: var(--muted); } .cs2-goals p { color: var(--ink); font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.45; } .cs2-aside { margin-top: 28px; max-width: 60ch; color: var(--ink-2); font-size: .9375rem; } /* Lösung: vier Disziplinen */ .cs2-disc { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .cs2-disc__col { border-top: 1px solid var(--line-2); padding-top: 16px; } .cs2-disc__k { margin: 0 0 14px; display: flex; align-items: center; color: var(--ink); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; } .cs2-disc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cs2-disc li { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); } /* Datenfluss (Schema) */ .cs2-flow { margin: clamp(56px, 7vw, 104px) 0 0; } .cs2-flow__grid { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: auto 56px auto; column-gap: clamp(40px, 6vw, 96px); } .cs2-flow__node { position: relative; z-index: 1; padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--line-2); } .cs2-flow__node p { margin-top: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; } .cs2-flow__node--l { grid-column: 1; grid-row: 1; } .cs2-flow__node--c { grid-column: 2; grid-row: 1; background: var(--panel); border-color: var(--panel); } .cs2-flow__node--c .label { color: var(--panel-ink); display: flex; align-items: center; } .cs2-flow__node--c p { color: var(--panel-muted); } .cs2-flow__node--r { grid-column: 3; grid-row: 1; } .cs2-flow__ext { grid-column: 2; grid-row: 3; position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 14px 18px; border: 1px dashed var(--line-2); background: var(--paper); } .cs2-flow__ext ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .cs2-flow__ext li { padding: 5px 9px 4px; background: var(--paper-2); color: var(--ink); font-size: .8125rem; } .cs2-flow__ln { position: absolute; z-index: 0; background: var(--ink); transform-origin: left center; } .cs2-flow__ln--l { left: calc((100% - 2 * clamp(40px, 6vw, 96px)) / 3.15 * 1); width: clamp(40px, 6vw, 96px); top: 48px; height: 1px; } .cs2-flow__ln--r { right: calc((100% - 2 * clamp(40px, 6vw, 96px)) / 3.15 * 1); width: clamp(40px, 6vw, 96px); top: 48px; height: 1px; } .cs2-flow__ln--b { left: 50%; width: 1px; height: 56px; transform-origin: center top; } @media (prefers-reduced-motion: no-preference) { .js [data-pf-flow] .cs2-flow__ln { transition: transform 800ms var(--pf-ease) 200ms; } .js [data-pf-flow].is-pending .cs2-flow__ln--l, .js [data-pf-flow].is-pending .cs2-flow__ln--r { transform: scaleX(0); } .js [data-pf-flow].is-pending .cs2-flow__ln--b { transform: scaleY(0); } .js [data-pf-flow] .cs2-flow__node, .js [data-pf-flow] .cs2-flow__ext { transition: opacity 600ms var(--pf-ease), transform 600ms var(--pf-ease); } .js [data-pf-flow].is-pending .cs2-flow__node--l, .js [data-pf-flow].is-pending .cs2-flow__node--r, .js [data-pf-flow].is-pending .cs2-flow__ext { opacity: 0; transform: translateY(8px); } } /* Einblicke: Bild mit Markierungen */ .cs2-anno { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } .cs2-anno__fig { grid-column: 1 / span 8; position: relative; margin: 0; background: #1A1D21; } .cs2-anno__pic { position: relative; } .cs2-anno__pic img { width: 100%; height: auto; } .cs2-anno__m, .cs2-anno__n { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; background: var(--accent-soft); color: #11151C; font-family: var(--mono); font-size: .75rem; font-weight: 600; } .cs2-anno__m { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(230, 168, 90, .25); } .cs2-anno__text { grid-column: 10 / -1; padding-top: 4px; } .cs2-anno__text > p { color: var(--ink-2); font-size: .9375rem; } .cs2-anno__legend { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; } .cs2-anno__legend li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); } .cs2-anno__legend b { display: block; color: var(--ink); font-weight: 500; } .cs2-anno__legend .cs2-anno__n { grid-row: span 2; } /* Einblicke: Bild hoch und Text */ .cs2-pair { margin-top: clamp(72px, 9vw, 144px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; } .cs2-pair__fig { grid-column: 2 / span 4; position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #191A1C; } .cs2-pair__fig img { width: 100%; height: 100%; object-fit: cover; } .cs2-pair__text { grid-column: 7 / span 5; } .cs2-pair__text > p { color: var(--ink-2); font-size: .9375rem; max-width: 52ch; } .cs2-pair__text > p + p { margin-top: 1em; } /* Gesamtansicht über die volle Breite */ .cs2-full { position: relative; margin: clamp(72px, 9vw, 144px) 0 0; } .cs2-full > img { width: 100%; height: clamp(360px, 52vw, 820px); object-fit: cover; object-position: 50% 55%; background: #1A1B1E; } .cs2-full .cs2-cap { margin-top: 14px; } /* Ergebnis */ .cs2-cmp { margin-top: clamp(40px, 5vw, 64px); } .cs2-cmp { margin-left: calc((100% - 11 * var(--gap)) / 12 * 3 + 3 * var(--gap)); } .cs2-cmp table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; } .cs2-cmp th, .cs2-cmp td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-top: 1px solid var(--line); } .cs2-cmp thead th { border-top: 0; padding-top: 0; padding-bottom: 10px; } .cs2-cmp tbody th { width: 20%; color: var(--ink); font-weight: 500; } .cs2-cmp td:nth-child(2) { width: 34%; color: var(--muted); } .cs2-cmp td:nth-child(3) { color: var(--ink); } .cs2-cmp td:nth-child(3)::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--accent-soft); vertical-align: 1px; } .cs2-says { margin-top: clamp(40px, 5vw, 64px); margin-left: calc((100% - 11 * var(--gap)) / 12 * 3 + 3 * var(--gap)); padding: 22px 24px; background: var(--paper-2); max-width: 46rem; } .cs2-says ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .cs2-says li { color: var(--ink-2); } .cs2-says b { color: var(--ink); font-weight: 500; margin-right: 6px; } .cs2-more { margin-top: clamp(40px, 5vw, 64px); margin-left: calc((100% - 11 * var(--gap)) / 12 * 3 + 3 * var(--gap)); max-width: 60ch; color: var(--ink-2); } .cs2-more .label { display: block; margin-bottom: 8px; } .cs2-more .arrow-link { margin-top: 16px; } .cs2-kpi { margin: clamp(40px, 5vw, 64px) 0 0 calc((100% - 11 * var(--gap)) / 12 * 3 + 3 * var(--gap)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 52rem; } .cs2-kpi div { border-top: 1px solid var(--ink); padding-top: 14px; } .cs2-kpi dt { color: var(--ink); font-size: 1rem; line-height: 1.4; } .cs2-kpi__v { display: block; margin-bottom: 6px; font-weight: 300; font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem); line-height: 1; letter-spacing: -0.04em; } .cs2-kpi dd { margin: 8px 0 0; color: var(--muted); font-size: .8125rem; } /* Marke (CFL) */ .cs2c--brand .cs2-disc { margin-top: 0; } .cs2-brand { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pf-joint); row-gap: var(--pf-joint); } .cs2-brand__mark { grid-column: 1 / span 7; grid-row: span 2; margin: 0; background: #1C272F; display: grid; place-items: center; min-height: clamp(320px, 34vw, 520px); position: relative; padding: 10%; } .cs2-brand__mark img { width: min(100%, 520px); height: auto; } .cs2-brand__mark figcaption { position: absolute; left: 16px; bottom: 14px; color: rgba(242, 239, 232, .7); } .cs2-brand__sw { grid-column: 8 / -1; background: var(--surface); padding: 22px 24px; border: 1px solid var(--line); } .cs2-brand__sw ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .cs2-brand__sw li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .875rem; } .cs2-brand__sw code { font-family: var(--mono); font-size: .75rem; color: var(--muted); } .cs2-brand__chip { width: 34px; height: 34px; background: var(--c); border: 1px solid var(--line); flex: none; } .cs2-brand__type { grid-column: 8 / -1; background: #FBFAF8; color: #1B2630; padding: 22px 24px 24px; border: 1px solid var(--line); } .cs2-brand__type .label { color: #5B6A75; } .cs2-brand__serif { margin-top: 12px; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.08; letter-spacing: -0.01em; color: #1C272F; } .cs2-brand__serif em { font-style: normal; color: #86681D; } .cs2-brand__sans { margin-top: 18px; font-family: "Raleway", system-ui, sans-serif; font-size: .9375rem; line-height: 1.6; color: #1B2630; max-width: 40ch; } .cs2-brand__fn { margin-top: 8px; font-size: .75rem; color: #5B6A75; } .cs2-brand__fn span { color: #1B2630; font-weight: 500; } .cs2-brand__src { grid-column: 1 / -1; } @font-face { font-family: "Newsreader"; src: url("../brand/newsreader-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Raleway"; src: url("../brand/raleway-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* Einblicke CFL */ .cs2-wide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .cs2-wide__fig { grid-column: 1 / span 8; position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; } .cs2-wide__fig img { width: 100%; height: 100%; object-fit: cover; } .cs2-wide__text { grid-column: 10 / -1; } .cs2-list { list-style: none; margin: 0; padding: 0; counter-reset: l; border-top: 1px solid var(--line); } .cs2-list li { counter-increment: l; display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9375rem; } .cs2-list li::before { content: counter(l, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; color: var(--muted); padding-top: .2em; } .cs2-lagen { margin-top: clamp(72px, 9vw, 144px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; } .cs2-lagen__text { grid-column: 1 / span 5; } .cs2-lagen__text > p { color: var(--ink-2); font-size: .9375rem; max-width: 46ch; } .cs2-lagen__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .cs2-lagen__list li { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: .875rem; line-height: 1.35; } .cs2-lagen__list .num { font-size: .7rem; color: var(--mark); } .pf-plate { display: block; position: relative; background: #1C272F; overflow: hidden; } .cs2-lagen__fig { grid-column: 7 / -1; position: relative; margin: 0 calc(-1 * (var(--gx) + max(0px, (100vw - var(--max)) / 2))) 0 0; aspect-ratio: 3 / 2; } .cs2-lagen__fig img { width: 100%; height: 100%; object-fit: cover; } .cs2-lagen__fig.pf-plate img { object-fit: contain; object-position: 30% 50%; padding: 4% 0 4% 4%; } .cs2-duo { margin-top: clamp(72px, 9vw, 144px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pf-joint); } .cs2-duo__a, .cs2-duo__b { position: relative; margin: 0; overflow: hidden; height: clamp(300px, 38vw, 600px); background: var(--paper-2); } .cs2-duo__a { grid-column: 1 / span 9; } .cs2-duo__b { grid-column: 10 / -1; } .cs2-duo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .cs2-duo__cap { grid-column: 1 / -1; } .cs2-two { margin-top: clamp(72px, 9vw, 144px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .cs2-two figure { margin: 0; } .cs2-two img { width: 100%; height: auto; } .cs2-two .pf-plate { aspect-ratio: 3 / 2; } .cs2-two .pf-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7% 0 5% 2%; object-position: 100% 50%; } /* Nächstes Projekt und Kontakt */ .cs2-next { margin-top: clamp(96px, 11vw, 176px); border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 120px); } .cs2-next__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; color: inherit; text-decoration: none; } .cs2-next__media { grid-column: 1 / span 7; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); } .cs2-next__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1100ms var(--pf-ease); } .cs2-next__in:hover .cs2-next__media img { transform: scale(1.025); } .cs2-next__text { grid-column: 9 / -1; display: grid; gap: 14px; } .cs2-next__name { color: var(--ink); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 1.7vw, 3rem); line-height: 1.04; letter-spacing: -0.034em; } .cs2-next__name span { display: block; color: var(--muted); } .cs2-next__why { color: var(--ink-2); font-size: .9375rem; max-width: 40ch; } .cs2-next__in:focus-visible { outline: 2px solid var(--focus); outline-offset: 8px; } .cs2-next__in:hover .pfc__go::after { transform: translateX(4px); } /* ========================================================================== Tablet ========================================================================== */ @media (max-width: 1099px) { .pff__bar { flex-wrap: wrap; gap: 8px 12px; padding-block: 12px; min-height: 0; } .pff__list { order: 3; flex: 1 0 100%; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gx); scrollbar-width: none; margin: 0 calc(-1 * var(--gx)); padding: 0 var(--gx); } .pff__list::-webkit-scrollbar { display: none; } .pff__list li { scroll-snap-align: start; flex: none; } .pfh__text { grid-column: 1 / span 6; } .pfh__stage { grid-column: 7 / -1; grid-template-columns: 1fr 1fr; } .pfc[data-slot="feature"] .pfc__title { grid-column: 1 / span 7; } .pfc[data-slot="feature"] .pfc__rest { grid-column: 8 / -1; } .pfc[data-slot="trio"] .pfc__title { font-size: 1.2rem; } .cs2h--split .cs2h__text { grid-column: 1 / span 6; } .cs2h--split .cs2h__media { grid-column: 7 / -1; } .cs2-disc { grid-template-columns: 1fr 1fr; row-gap: 32px; } .cs2-anno__fig { grid-column: 1 / -1; } .cs2-anno__text { grid-column: 1 / -1; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); } .cs2-anno__legend { margin-top: 0; } .cs2-brand__mark { grid-column: 1 / -1; grid-row: auto; } .cs2-brand__sw, .cs2-brand__type { grid-column: span 6; } .cs2-wide__fig { grid-column: 1 / -1; } .cs2-wide__text { grid-column: 1 / span 8; padding-top: 24px; } } @media (max-width: 899px) { .pfh { padding-top: 24px; } .pfh__grid { display: block; } .pfh__text { gap: 22px; } .pfh__title { font-size: clamp(2.45rem, 1.4rem + 5.4vw, 4rem); } .pfh__lead { margin-top: 18px; font-size: 1rem; } .pfh__more { display: none; } .pfh__stage { margin: 28px calc(-1 * var(--gx)) 0; height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .pfh__fig--a { aspect-ratio: 4 / 3; } .pfh__fig--c, .pfh__fig--b { aspect-ratio: 4 / 5; } } /* Fallstudie bis 1099 px: Text im Kopf schmaler, Kontakt zweizeilig, Lebenslagen untereinander */ @media (max-width: 1099px) { .cs2h--overlay .cs2h__text { max-width: min(46%, 30rem); } .cs2h--overlay .cs2h__sum { grid-template-columns: 1fr; gap: 14px; } .cs2h__veil { background: linear-gradient(90deg, rgba(var(--pf-veil), .86) 0%, rgba(var(--pf-veil), .55) 40%, rgba(var(--pf-veil), 0) 64%); } .cs2-lagen { display: block; } .cs2-lagen__text { max-width: 44rem; } .cs2-lagen__fig { margin: 32px calc(-1 * var(--gx)) 0; } .cs2-pair__fig { grid-column: 1 / span 5; } .cs2-pair__text { grid-column: 7 / -1; } } /* Fallstudie bis 899 px: Kopf untereinander, Kapitel über die volle Breite */ @media (max-width: 899px) { .cs2h--overlay { display: block; min-height: 0; background: var(--paper); color: var(--ink); } .cs2h--overlay .cs2h__media { position: relative; aspect-ratio: 5 / 4; } .cs2h--overlay .cs2h__text { max-width: 40rem; } .cs2h__veil { display: none; } .cs2h--overlay .cs2h__in { padding-block: 28px 40px; } .cs2h--overlay .cs2h__k, .cs2h--overlay .cs2h__sum dt { color: var(--muted); } .cs2h--overlay .cs2h__sum dd { color: var(--ink-2); } .cs2h__sum { grid-template-columns: 1fr 1fr; } .cs2h__grid { display: flex; flex-direction: column-reverse; min-height: 0; } .cs2h--split .cs2h__text { padding: 28px 0 40px; max-width: 40rem; } .cs2h--split .cs2h__media { margin: 0 calc(-1 * var(--gx)); aspect-ratio: 5 / 4; } .cs2c__head { display: block; } .cs2c__no { padding: 0; margin-bottom: 14px; } .cs2c__body { display: block; } .cs2c__body--split { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gap); } .cs2m .pf-int, .cs2-cmp, .cs2-says, .cs2-more, .cs2-kpi { margin-left: 0; } .cs2-quote--pull, .cs2-quote--big { display: block; } } /* ========================================================================== Smartphone ========================================================================== */ @media (max-width: 759px) { .pfh__fig--c img { padding: 10% 6% 0; } .pfh__cap { left: 8px; bottom: 8px; padding: 6px 8px 5px; font-size: .75rem; } .pfh__cap span:last-child { display: none; } .pfh__fig--a .pfh__cap span:last-child { display: inline; } .pff__bar { flex-wrap: wrap; gap: 8px 12px; padding-block: 12px; min-height: 0; } .pff__list { order: 3; flex: 1 0 100%; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gx); scrollbar-width: none; margin: 0 calc(-1 * var(--gx)); padding: 0 var(--gx); } .pff__list::-webkit-scrollbar { display: none; } .pff__list li { scroll-snap-align: start; } .pff__btn { height: 44px; } .pfg__list { row-gap: 56px; } .pfc, .pfc[data-slot] { grid-column: 1 / -1; } .pfc[data-slot="feature"] .pfc__media, .pfc[data-slot="pair"] .pfc__media, .pfc[data-slot="asym-a"] .pfc__media { aspect-ratio: 4 / 3; height: auto; } .pfc[data-slot="asym-b"] .pfc__media, .pfc[data-slot="trio"] .pfc__media { aspect-ratio: 4 / 5; height: auto; } .pfc[data-slot="split"] { display: flex; align-items: stretch; } .pfc[data-slot="split"] .pfc__media { aspect-ratio: auto; } .pfc[data-slot="split"] .pfc__body { padding-top: 20px; } .pfc[data-slot="feature"] .pfc__body { display: grid; grid-template-columns: 1fr; } .pfc[data-slot="feature"] .pfc__title, .pfc[data-slot="feature"] .pfc__rest { grid-column: 1; } .pfc[data-slot="feature"] .pfc__title, .pfc[data-slot="split"] .pfc__title { font-size: 1.75rem; } .pf-schema { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px 56px; } .pf-schema::before { left: 27px; right: auto; top: 34px; bottom: 70px; width: 1px; height: auto; } .pf-schema li { padding-left: 0; } .pf-schema__k { padding: 2px 10px 2px 0; } .cs2h--overlay { display: block; min-height: 0; background: var(--paper); color: var(--ink); } .cs2h--overlay .cs2h__media { position: relative; aspect-ratio: 5 / 4; } .cs2h__veil { display: none; } .cs2h--overlay .cs2h__in { padding-block: 28px 40px; } .cs2h--overlay .cs2h__k, .cs2h--overlay .cs2h__sum dt { color: var(--muted); } .cs2h--overlay .cs2h__sum dd { color: var(--ink-2); } .cs2h__sum { grid-template-columns: 1fr; gap: 14px; } .cs2h__claim { font-size: clamp(2.3rem, 1.3rem + 5vw, 3.2rem); } .cs2h__grid { display: flex; flex-direction: column-reverse; min-height: 0; } .cs2h--split .cs2h__text { padding: 28px 0 40px; } .cs2h--split .cs2h__media { margin: 0 calc(-1 * var(--gx)); aspect-ratio: 5 / 4; } .cs2f__dl { grid-template-columns: 1fr 1fr; } .cs2f__dl div, .cs2f__dl div + div { padding: 14px 12px 16px 0; border-left: 0; border-top: 1px solid var(--line); } .cs2f__dl div:nth-child(-n+2) { border-top: 0; } .cs2f__dl div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line); } .cs2toc a { min-height: 48px; } .cs2c__head, .cs2c__body, .cs2-anno, .cs2-pair, .cs2-wide, .cs2-lagen, .cs2-next__in, .cs2-quote--pull, .cs2-quote--big { display: block; } .cs2c__no { padding: 0; margin-bottom: 14px; } .cs2c__title { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.5rem); } .cs2m .pf-int, .cs2-cmp, .cs2-says, .cs2-more, .cs2-kpi { margin-left: 0; } .cs2c__body--split .cs2-scatter { margin-top: 28px; } .cs2-goals { grid-template-columns: 1fr; gap: 18px; } .cs2-disc { grid-template-columns: 1fr; row-gap: 26px; } .cs2-flow__grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; row-gap: 26px; } .cs2-flow__node--l, .cs2-flow__node--c, .cs2-flow__node--r, .cs2-flow__ext { grid-column: 1; grid-row: auto; } .cs2-flow__node--c { order: -1; } .cs2-flow__ln--l, .cs2-flow__ln--r { display: none; } .cs2-flow__ln--b { left: 28px; top: 40px; bottom: 40px; height: auto; } .cs2-anno__fig { margin: 0 calc(-1 * var(--gx)); } .cs2-anno__m { width: 22px; height: 22px; font-size: .7rem; } .cs2-anno__text { display: block; } .cs2-anno__legend { margin-top: 20px; } .cs2-pair__fig { margin-bottom: 26px; } .cs2-full > img { height: 64vw; } .cs2-cmp table, .cs2-cmp tbody, .cs2-cmp tr, .cs2-cmp th, .cs2-cmp td { display: block; width: auto !important; } .cs2-cmp thead { display: none; } .cs2-cmp tr { padding: 14px 0; border-top: 1px solid var(--line); } .cs2-cmp th, .cs2-cmp td { border: 0; padding: 2px 0; } .cs2-cmp td:nth-child(2)::before { content: attr(data-k) ": "; margin-right: 4px; } .cs2-kpi { grid-template-columns: 1fr; } .cs2-brand { display: block; } .cs2-brand > * + * { margin-top: var(--pf-joint); } .cs2-brand__mark { min-height: 240px; } .cs2-wide__fig { margin: 0 calc(-1 * var(--gx)); } .cs2-lagen__list { grid-template-columns: 1fr; } .cs2-lagen__fig { margin: 28px calc(-1 * var(--gx)) 0; } .cs2-duo { grid-template-columns: 1fr 1fr; } .cs2-duo__a { grid-column: 1 / -1; height: 56vw; } .cs2-duo__b { grid-column: 1 / -1; height: 120vw; margin-top: var(--pf-joint); } .cs2-two { grid-template-columns: 1fr; gap: 36px; } .cs2-next__media { margin-bottom: 22px; } } /* ========================================================================== 28 Produktpräsentation (Aufbau „produkt“, 17.10.2026, inc/product.php). Entwurf und Begründung: relaunch/entwurf-wieland/. Zuerst für Wieland: „Ein Betrieb. Ein gemeinsames System.“ Projektfarbe aus der Anwendung (Feld, Inline-Variable --pd-c), Akzent auf dunklem Grund (--pd-a). Helle Projektfläche, Linien und der eine dunkle Produktabschnitt werden daraus gemischt, hell und dunkel getrennt. Bewegung: Bilder enthüllen sich einmal, Bildstreifen öffnet sich seitlich, aufklappbare Entscheidungen blenden weich. ========================================================================== */ .pd { --pd-c: #00625C; /* Vorgabe, je Projekt per Feld überschrieben */ --pd-a: #5CC4B6; --pd-ink: color-mix(in srgb, var(--pd-c) 88%, #000); /* Text und Marken auf hellem Grund */ --pd-plate: color-mix(in srgb, var(--pd-c) 9%, #FAFAF8); /* helle Projektfläche */ --pd-plate-line: color-mix(in srgb, var(--pd-c) 18%, #F5F3EF); --pd-app: #14171C; --pd-field: color-mix(in srgb, var(--pd-c) 6%, #101111); /* dunkler Produktabschnitt */ --pd-f-ink: #ECF2F0; --pd-f-ink-2: rgba(236, 242, 240, .78); --pd-f-muted: rgba(236, 242, 240, .56); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd { --pd-ink: color-mix(in srgb, var(--pd-a) 90%, #fff); --pd-plate: #17191C; --pd-plate-line: #2A2D31; --pd-field: #0E0F10; } /* dunkel neutral grau, ohne Grünstich (17.10.2026) */ } :root[data-theme="dark"] .pd { --pd-ink: color-mix(in srgb, var(--pd-a) 90%, #fff); --pd-plate: #17191C; --pd-plate-line: #2A2D31; --pd-field: #0E0F10; } /* dunkel neutral grau, ohne Grünstich (17.10.2026) */ .pd picture { display: contents; } .pd-k { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: .75rem; font-weight: 450; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4; } .pd-sq { width: 8px; height: 8px; background: var(--pd-c); flex: none; } .pd-num { font-family: var(--mono); font-size: .75rem; color: var(--pd-ink); letter-spacing: .04em; } .pd-h2 { margin: 14px 0 18px; max-width: 17ch; color: var(--ink); font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 3.1rem); line-height: 1.04; letter-spacing: -0.034em; } .pd-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin: 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; } .pd-tag { display: inline-block; padding: 5px 8px 4px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: .6875rem; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; } figure > .pd-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; } .pd-field__seq > .pd-tag { left: auto; right: 12px; bottom: auto; top: 12px; } .pd-tag--dark { border-color: rgba(236, 242, 240, .16); background: rgba(20, 23, 28, .78); color: var(--pd-f-muted); } /* Einstieg -------------------------------------------------------------- */ .pd-hero { padding-top: clamp(32px, 5vh, 64px); } .pd-hero__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .pd-hero__head { grid-column: 1 / span 8; } .pd-hero__name { display: block; margin: 20px 0 16px; color: var(--ink); font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; } .pd-hero__t { margin: 0; color: var(--ink); font-weight: 300; font-size: clamp(2.6rem, 1.15rem + 3.7vw, 5.1rem); line-height: .98; letter-spacing: -0.044em; } .pd-hero__t { text-wrap: nowrap; } @media (max-width: 759px) { .pd-hero__t { text-wrap: balance; } } .pd-hero__side { grid-column: 9 / -1; padding-bottom: 6px; } .pd-hero__sum { margin: 0; max-width: 34ch; color: var(--ink); font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); line-height: 1.48; } .pd-facts { margin: 24px 0 0; border-top: 1px solid var(--line); } .pd-facts { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; column-gap: 12px; } /* alle Zeilen an der längsten Bezeichnung ausgerichtet (18.10.2026) */ .pd-facts div { grid-column: 1 / -1; grid-template-columns: subgrid; display: grid; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .pd-facts dt { white-space: nowrap; color: var(--muted); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; } .pd-facts dd { margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.45; } .pd-hero__stage { position: relative; margin: clamp(24px, 3.5vh, 44px) 0 0; } .pd-hero__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 34%; bottom: 0; background: var(--pd-plate); } .pd-hero__frame { position: relative; } .pd-hero__frame img { display: block; width: 100%; height: auto; } .pd-hero__frame .pd-cap { padding: 6px 0 0; } /* Einführung ------------------------------------------------------------ */ .pd-intro { background: var(--pd-plate); } .pd-intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-block: clamp(40px, 5vw, 72px) clamp(72px, 8vw, 120px); } .pd-intro__text { grid-column: 1 / span 6; } .pd-lead { margin: 0 0 18px; max-width: 30ch; color: var(--ink); font-size: clamp(1.3rem, 1.05rem + .8vw, 1.85rem); line-height: 1.3; letter-spacing: -0.018em; } .pd-intro__text p:not(.pd-lead) { max-width: 58ch; color: var(--ink-2); } .pd-intro__text p + p { margin-top: .9em; } .pd-map { grid-column: 8 / -1; margin: 0; } .pd-map__row { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; margin: 0; padding: 0; list-style: none; } .pd-map__row::before { content: ""; position: absolute; top: 14px; left: 16.5%; right: 16.5%; height: 1px; background: var(--pd-c); transform-origin: left center; } .pd-map__row li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 6px; text-align: center; color: var(--ink-2); font-size: .8125rem; line-height: 1.4; } .pd-map__row li::before { content: ""; width: 11px; height: 11px; margin: 9px 0 12px; border: 1px solid var(--pd-c); background: var(--pd-plate); } .pd-map__row .pd-map__core::before { width: 17px; height: 17px; margin: 6px 0 9px; background: var(--pd-c); } .pd-map__k { color: var(--ink); font-size: .9375rem; font-weight: 500; } .pd-map__ext { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--pd-plate-line); text-align: center; color: var(--ink); font-size: .875rem; } .pd-map__ext span { margin-right: 10px; color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .pd-src { margin-top: 12px; color: var(--muted); font-size: .8125rem; line-height: 1.5; text-align: center; } /* Produktmomente -------------------------------------------------------- */ .pd-moment { padding: clamp(88px, 10vw, 156px) 0; } .pd-moment p { max-width: 48ch; color: var(--ink-2); font-size: 1rem; line-height: 1.62; } /* 01 Planen: Planungsspalte auf App-Fläche, Text daneben, Kopfleiste der Mitarbeiter als breiter Streifen */ .pd-plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; } .pd-plan__panel { position: relative; grid-column: 1 / span 6; display: grid; place-items: center; margin: 0; padding: clamp(32px, 4.5vw, 64px) 0; background: var(--pd-app); } /* Fläche je Baustein (Ton des Bildschirms), damit der Ausschnitt randlos steht */ .pd-plan__panel img { display: block; width: min(68%, 392px); height: auto; } .pd-plan__text { grid-column: 8 / -1; display: grid; gap: 28px; } .pd-strip { position: relative; grid-column: 1 / -1; margin: clamp(48px, 6vw, 88px) 0 0; } .pd-strip__img { position: relative; overflow: hidden; background: var(--pd-app); } .pd-strip__img img { display: block; width: 100%; height: auto; } .pd-strip .pd-cap { padding-top: 10px; } @media (prefers-reduced-motion: no-preference) { .js .pd-strip.rv-pending .pd-strip__img img { clip-path: inset(0 0 0 30%); } .js .pd-strip .pd-strip__img img { transition: clip-path 1100ms var(--ease-arch); } } /* Entscheidung im Detail (aufklappbar) */ .pd-why { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pd-why summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 14px 0; cursor: pointer; list-style: none; } .pd-why summary::-webkit-details-marker { display: none; } .pd-why summary::after { content: ""; grid-row: 1 / span 2; grid-column: 2; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat; color: var(--ink); transition: transform 300ms var(--ease-arch); } .pd-why[open] summary::after { transform: rotate(45deg); } .pd-why summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } .pd-why__k { color: var(--pd-ink); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .pd-why__t { color: var(--ink); font-size: 1rem; font-weight: 500; } .pd-why dl { display: grid; gap: 14px; margin: 0; padding: 4px 0 20px; } .pd-why dt { color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; } .pd-why dd { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } @media (prefers-reduced-motion: no-preference) { .pd-why[open] dl { animation: pdOpen 380ms var(--ease-arch) both; } } @keyframes pdOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* 02 Vor Ort: der eine dunkle Produktabschnitt */ .pd-moment--dark { background: var(--pd-field); color: var(--pd-f-ink); } .pd-moment--dark .pd-k { color: var(--pd-f-muted); } .pd-moment--dark .pd-num { color: var(--pd-a); } .pd-moment--dark .pd-h2 { color: #F4F7F6; } .pd-moment--dark p { color: var(--pd-f-ink-2); } .pd-field { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gap); align-items: center; } .pd-field__text { grid-column: 1 / span 4; grid-row: 1; } .pd-field__seq { position: relative; grid-column: 5 / span 7; grid-row: 1 / span 2; margin: 0 0 0 -2%; } .pd-field__seq img { display: block; width: 100%; height: auto; } .pd-field__seq--wide { grid-column: 5 / -1; margin: 0; } @media (min-width: 900px) { .pd-field__seq[style*="--sx"], .pd-plan__panel[style*="--sx"] { translate: var(--sx, 0) var(--sy, 0); } } /* Feld image_shift (18.10.2026) */ .pd-seq__cap { display: grid; grid-template-columns: 31% 30% 1fr; margin-top: -6px; padding: 0 4% 0 9%; color: var(--pd-f-muted); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; } .pd-field__b { grid-column: 11 / -1; grid-row: 1 / span 2; align-self: end; justify-self: end; width: min(100%, 210px); margin: 0 0 -24px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); } .pd-field__b img { display: block; width: 100%; height: auto; } .pd-field__why { grid-column: 1 / span 4; grid-row: 2; align-self: start; margin-top: 30px; } .pd-moment--dark .pd-why { border-color: rgba(236, 242, 240, .14); } .pd-moment--dark .pd-why__k { color: var(--pd-a); } .pd-moment--dark .pd-why__t, .pd-moment--dark .pd-why summary::after { color: var(--pd-f-ink); } .pd-moment--dark .pd-why dt { color: var(--pd-f-muted); } .pd-moment--dark .pd-why dd { color: var(--pd-f-ink-2); } .pd-moment--dark .pd-why summary:focus-visible { outline-color: var(--pd-a); } .pd-pull { margin: 30px 0 0; padding: 2px 0 2px 18px; border-left: 1px solid var(--pd-a); } .pd-pull p { margin: 0; color: var(--pd-f-ink); font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); font-weight: 300; line-height: 1.35; letter-spacing: -0.012em; } .pd-pull footer { margin-top: 10px; color: var(--pd-f-muted); font-size: .8125rem; } /* Ergebnis --------------------------------------------------------------- */ .pd-result { padding: clamp(88px, 10vw, 150px) 0 clamp(80px, 9vw, 130px); } .pd-result .pd-h2 { max-width: 22ch; } .pd-changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 34px 0 0; padding: 0; list-style: none; } .pd-changes li { border-top: 1px solid var(--ink); padding-top: 16px; } .pd-changes b { display: block; margin: 12px 0 8px; color: var(--ink); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.012em; } .pd-changes p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } /* Zitat mit rundem Foto (18.10.2026) */ /* Weitere Stimmen (18.10.2026): Karten in zwei Spalten unter dem Hauptzitat */ .pd-voices { margin-top: clamp(48px, 6vw, 88px); } .pd-voices__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pd-voices__nav { display: flex; gap: 8px; } .pd-voices__btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: border-color 200ms, background 200ms, opacity 200ms; } .pd-voices__btn:hover:not(:disabled) { border-color: var(--ink); } .pd-voices__btn:disabled { opacity: .3; cursor: default; } /* Karussell (18.10.2026): Karten nebeneinander, die nächste schaut an, wischen oder Pfeile */ .pd-voices__list { display: flex; gap: clamp(16px, 2vw, 28px); margin: 22px 0 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; } .pd-voices__list::-webkit-scrollbar { display: none; } .pd-voices__list:focus-visible { outline: 2px solid var(--pd-c); outline-offset: 4px; } .pd-voice { display: flex; flex: 0 0 min(44%, 560px); flex-direction: column; margin: 0; padding: clamp(22px, 2.6vw, 32px); background: var(--pd-plate); scroll-snap-align: start; } .pd-voice .pd-voice__by { margin-top: auto; } .pd-voice__stars { margin: 0 0 14px; color: var(--pd-c); font-size: .9375rem; letter-spacing: .18em; line-height: 1; } /* alle Stimmen mit fünf Sternen wie auf der alten Seite (18.10.2026) */ .pd-voice blockquote { margin-bottom: 20px; } @media (max-width: 899px) { .pd-voice { flex-basis: 86%; } } .pd-voice blockquote { margin: 0; } .pd-voice blockquote p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } .pd-voice__by { display: flex; align-items: center; gap: 14px; margin: 0; padding-top: 16px; border-top: 1px solid var(--pd-plate-line); } .pd-voice__by img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .pd-voice__by b { display: block; color: var(--ink); font-size: .875rem; font-weight: 500; } .pd-voice__by small { display: block; margin-top: 2px; color: var(--muted); font-size: .75rem; line-height: 1.4; } .pd-quote.pd-quote--rund { grid-template-columns: 112px minmax(0, 1fr); align-items: start; } /* kleiner und oben bündig mit dem Zitat (18.10.2026) */ .pd-quote--rund .pd-quote__pic { margin-top: 10px; } .pd-quote--rund .pd-quote__pic img { border-radius: 50%; } @media (max-width: 899px) { .pd-quote.pd-quote--rund { grid-template-columns: 72px 1fr; } .pd-quote--rund .pd-quote__pic { margin-top: 4px; } } /* Zitat ohne Foto (18.10.2026): Zitat und Langfassung nebeneinander, volle Breite */ .pd-quote--plain { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; } .pd-quote--plain > * { grid-column: auto !important; grid-row: auto !important; } .pd-quote--plain blockquote:first-of-type { grid-row: 1 / span 2 !important; } @media (max-width: 899px) { .pd-quote--plain { grid-template-columns: minmax(0, 1fr) !important; } .pd-quote--plain blockquote:first-of-type { grid-row: auto !important; } } .pd-quote { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: center; margin: clamp(56px, 6vw, 96px) 0 0; padding: clamp(24px, 3vw, 40px); background: var(--pd-plate); } .pd-quote__pic { grid-row: 1 / span 2; } .pd-quote__pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; } .pd-quote blockquote { margin: 0; align-self: end; } .pd-quote blockquote p { margin: 0; color: var(--ink); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 1.7vw, 3rem); line-height: 1.08; letter-spacing: -0.032em; } .pd-quote figcaption { align-self: start; margin-top: 16px; color: var(--ink-2); font-size: .875rem; line-height: 1.5; } .pd-quote figcaption b { color: var(--ink); font-weight: 500; margin-right: 6px; } .pd-quote figcaption span { display: block; margin-top: 4px; color: var(--muted); font-size: .8125rem; } .pd-quote figcaption a { color: var(--ink); } /* Tablet ------------------------------------------------------------------ */ @media (max-width: 1099px) { .pd-hero__head { grid-column: 1 / span 8; } .pd-hero__side { grid-column: 1 / span 8; margin-top: 26px; } .pd-intro__text { grid-column: 1 / span 7; } .pd-map { grid-column: 8 / -1; } .pd-plan__panel { grid-column: 1 / span 6; } .pd-plan__text { grid-column: 7 / -1; } .pd-field__text, .pd-field__why { grid-column: 1 / span 5; } .pd-field__seq { grid-column: 6 / -1; } .pd-field__b { display: none; } } /* Smartphone -------------------------------------------------------------- */ @media (max-width: 759px) { .pd-hero { padding-top: 24px; } .pd-hero__top, .pd-intro__grid, .pd-plan, .pd-field { display: block; } .pd-hero__t { font-size: clamp(2.45rem, 1.3rem + 5.6vw, 3.3rem); } .pd-hero__side { margin-top: 20px; } .pd-hero__stage { margin-top: 26px; } .pd-hero__stage::before { top: 30%; } .pd-hero__frame { padding: 0; } .pd-hero__frame .pd-cap { padding: 8px var(--gx) 0; } .pd-intro__grid { padding-block: 32px 64px; } .pd-map { margin-top: 36px; } .pd-map__row li { font-size: .75rem; } .pd-moment { padding: 72px 0; } .pd-plan__panel { margin: 0 calc(-1 * var(--gx)); padding: 32px 0; } .pd-plan__panel img { width: 72%; } .pd-plan__text { margin-top: 28px; } .pd-strip { margin-top: 40px; } .pd-strip__img { margin: 0 calc(-1 * var(--gx)); } .pd-strip__img img { width: 180%; max-width: none; } .pd-field__seq { margin: 30px calc(-1 * var(--gx)) 0; } .pd-seq__cap { font-size: .625rem; } .pd-field__b { display: block; width: 46%; margin: -18% 0 0 auto; position: relative; z-index: 2; } .pd-field__why { margin-top: 32px; } .pd-changes { grid-template-columns: 1fr; gap: 22px; } .pd-quote { grid-template-columns: 88px 1fr; column-gap: 16px; padding: 22px; } .pd-quote__pic { grid-row: 1; grid-column: 1; } .pd-quote figcaption { grid-row: 1; grid-column: 2; align-self: center; margin-top: 0; } .pd-quote blockquote { grid-row: 2; grid-column: 1 / -1; margin-top: 18px; } } /* Nächstes Projekt direkt nach dem Ergebnis */ .pd .cs2-next { margin-top: 0; } /* Inhalte der bisherigen Fallstudie (17.10.2026): Liste vorher, Funktionen je Moment, Bild rechts, Gerät schmal auf Projektfläche, Link, ausführliche Kundenstimme. */ .pd-before { margin-top: 30px; } .pd-before__k { margin: 0 0 6px; color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .pd-before ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; padding: 0; list-style: none; } .pd-before li { padding: 9px 0; border-top: 1px solid var(--pd-plate-line); color: var(--ink-2); font-size: .875rem; line-height: 1.45; } .pd-more { margin-top: 18px; } .pd-feats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--gap); margin: clamp(56px, 6.5vw, 96px) 0 0; padding: 0; list-style: none; } .pd-feats li { padding: 14px 0 6px; border-top: 1px solid var(--line-2); } .pd-feats b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1rem; font-weight: 500; letter-spacing: -0.008em; } .pd-feats p { margin: 0; max-width: 40ch; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } .pd-field > .pd-feats { grid-row: 3; } .pd-moment--dark .pd-feats li { border-color: rgba(236, 242, 240, .16); } .pd-moment--dark .pd-feats b { color: var(--pd-f-ink); } .pd-moment--dark .pd-feats p { color: var(--pd-f-ink-2); } .pd-moment--dark .arrow-link { color: var(--pd-f-ink); } .pd-plan--r .pd-plan__panel { grid-column: 7 / -1; grid-row: 1; } .pd-plan--r .pd-plan__text { grid-column: 1 / span 5; grid-row: 1; } .pd-plan--device .pd-plan__panel { background: var(--pd-plate); padding: clamp(40px, 5vw, 76px) 0; } .pd-plan--device .pd-plan__panel img { width: min(50%, 300px); filter: drop-shadow(0 28px 34px rgba(8, 24, 22, .24)); } .pd-plan--free .pd-plan__panel { padding: 0; background: none; } .pd-plan--free .pd-plan__panel img { width: min(88%, 560px); filter: none; } /* Körnig wie Sand einblenden (18.10.2026): Canvas über dem Bild baut es Korn für Korn auf (site.js), danach steht das Bild */ .pd-plan--sand .pd-plan__panel { overflow: visible; } .pd-sand { position: absolute; z-index: 2; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .js .pd-plan--sand .pd-plan__panel:not(.is-sanded) img { opacity: 0; } } /* Porträt im Hochformat (18.10.2026): Foto füllt die Bildfläche, ohne Fläche dahinter */ .pd-plan--portrait .pd-plan__panel { padding: 0; background: none; display: block; overflow: hidden; } .pd-plan--portrait .pd-plan__panel img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; } /* Foto bis an den Bildschirmrand (18.10.2026): Bild rechts, läuft über den Satzspiegel bis zum Fensterrand */ .pd-plan--foto .pd-plan__panel { display: block; padding: 0; background: none; overflow: hidden; } .pd-plan--foto.pd-plan--r .pd-plan__panel { margin-right: calc(-1 * (var(--gx) + max(0px, (100vw - var(--max)) / 2))); } .pd-plan--foto:not(.pd-plan--r) .pd-plan__panel { margin-left: calc(-1 * (var(--gx) + max(0px, (100vw - var(--max)) / 2))); } .pd-plan--foto .pd-plan__panel img { display: block; width: 100%; height: auto; max-width: none; } /* Höher nach unten (Wunsch des Users): Oberkante und linke Kante bleiben, das Bild wächst nur nach unten. Die zusätzliche Höhe wird per negativem Außenabstand ausgeglichen, damit die Zentrierung zur Textspalte gleich bleibt. */ @media (min-width: 900px) { .pd-plan--foto .pd-plan__panel { aspect-ratio: 1672 / 941; overflow: visible; } .pd-plan--foto { --fx: min(8vw, 130px); } .pd-plan--foto .pd-plan__panel img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + var(--fx)); object-fit: cover; object-position: 50% 35%; } .pd-plan--foto .pd-feats { padding-top: var(--fx); } /* Funktionszeile rückt um dieselbe Länge nach unten */ } @media (max-width: 899px) { .pd-plan--foto .pd-plan__panel, .pd-plan--foto.pd-plan--r .pd-plan__panel { margin: 0 calc(-1 * var(--gx)); } } /* Figur mit Gesprächsverlauf (18.10.2026): Figur ohne Fläche, bis zum Ellenbogen, Sprechblasen rechts wie ein Chat */ .pd-plan--figur .pd-plan__panel { display: block; padding: 0; aspect-ratio: 5 / 4.4; overflow: visible; background: none; } .pd-plan--figur .pd-chat__fig { position: absolute; left: 0; bottom: 0; height: 100%; } .pd-plan--figur .pd-chat__fig img { width: auto; height: 100%; display: block; } .pd-chat { position: absolute; z-index: 2; right: -12%; top: 6%; width: min(58%, 350px); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .pd-chat__b { position: relative; padding: 10px 14px 11px; border-radius: 16px; font-size: .875rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(20, 20, 22, .12); } .pd-chat__who { display: block; margin-bottom: 2px; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; } .pd-chat__b--gast { justify-self: end; max-width: 88%; background: #fff; color: #11151C; /* fest dunkel, die Blase bleibt auch im Dunkelmodus weiß (18.10.2026) */ border-bottom-right-radius: 4px; } .pd-chat__b--bot { justify-self: start; max-width: 92%; background: var(--pd-c, #8A6A3A); color: #fff; border-bottom-left-radius: 4px; } .pd-chat__dots { display: none; gap: 5px; align-items: center; height: 18px; padding: 0 2px; } .pd-chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: pdDot 1s ease-in-out infinite; } .pd-chat__dots i:nth-child(2) { animation-delay: .15s; } .pd-chat__dots i:nth-child(3) { animation-delay: .3s; } @keyframes pdDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } } @keyframes pdBubble { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes pdMsg { from { opacity: 0; } to { opacity: 1; } } /* Ablauf per site.js: Blase erscheint mit Tipp-Punkten (is-typing), dann steht die Nachricht (is-on) */ .js .pd-chat__b { display: none; } .js .pd-chat__b.is-typing, .js .pd-chat__b.is-on { display: block; animation: pdBubble 320ms cubic-bezier(.2, .9, .3, 1.1) both; transform-origin: bottom right; } .js .pd-chat__b--bot.is-typing, .js .pd-chat__b--bot.is-on { transform-origin: bottom left; } .js .pd-chat__b.is-typing { justify-self: auto; width: auto; } .js .pd-chat__b.is-typing .pd-chat__dots { display: inline-flex; } .js .pd-chat__b.is-typing .pd-chat__msg { display: none; } .js .pd-chat__b.is-on { animation: none; } .js .pd-chat__b.is-on .pd-chat__msg { animation: pdMsg 300ms ease both; } .js .pd-chat__b--gast.is-typing { justify-self: end; } .js .pd-chat__b--bot.is-typing { justify-self: start; } @media (max-width: 899px) { .pd-plan--figur .pd-plan__panel { aspect-ratio: 4 / 4.6; } .pd-plan--figur .pd-chat__fig { height: 78%; } .pd-chat { top: 3%; right: var(--gx, 16px); width: 60%; gap: 8px; } .pd-chat__b { font-size: .8125rem; padding: 8px 12px 9px; } .pd-chat__b--bot, .js .pd-chat__b--bot.is-typing { justify-self: end; max-width: 100%; } } .pd-plan--quer .pd-plan__panel img { justify-self: start; width: 120%; max-width: none; margin-left: -5%; } /* 20 % größer, ragt in die freie Spalte 7 */ @media (min-width: 1100px) { .pd-plan--r.pd-plan--quer .pd-plan__panel img { justify-self: end; margin-left: 0; margin-right: -5%; } } /* Bild rechts: gespiegelt, ragt nach links in die freie Spalte statt über den Rand (18.10.2026) */ .pd-result__head p { max-width: 62ch; color: var(--ink-2); } .pd-quote__pic { grid-row: 1 / span 3; } .pd-quote .pd-quote__long { align-self: start; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pd-plate-line); } .pd-quote .pd-quote__long p { max-width: 72ch; color: var(--ink-2); font-size: .9375rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; } .pd-quote__long span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } @media (max-width: 1099px) { .pd-plan--r .pd-plan__panel { grid-column: 7 / -1; } .pd-plan--r .pd-plan__text { grid-column: 1 / span 6; } .pd-plan--quer .pd-plan__panel img { justify-self: center; width: 100%; margin-left: 0; } } @media (max-width: 759px) { .pd-before ul { grid-template-columns: 1fr; } .pd-feats { grid-template-columns: 1fr; margin-top: 44px; } .pd-plan--device .pd-plan__panel img { width: 58%; } .pd-plan--free .pd-plan__panel img { width: 92%; } .pd-plan--quer .pd-plan__panel img { justify-self: center; width: 100%; margin-left: 0; } .pd-quote__pic { grid-row: 1; } .pd-quote .pd-quote__long { grid-row: 3; grid-column: 1 / -1; } } /* Vollbild über dem Einstieg (17.10.2026): füllt den ersten Bildschirm unter der Kopfzeile, hell und dunkel getrennt (pf-theme-l/-d), Ausschnitt per Fokuspunkt. */ .pd-full { position: relative; height: calc(100svh - var(--header-h)); min-height: 420px; margin: 0; overflow: hidden; background: var(--pd-plate); } .pd-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 64% 60%); } .pd-full .pd-full__tag { position: absolute; left: var(--gx); bottom: 16px; z-index: 2; } /* Vollbild freigestellt (Wieland 17.10.2026): Geräte ganz zeigen, Verlauf in der Projektfarbe statt Fotohintergrund */ .pd-full--frei { background: radial-gradient(80% 70% at 50% 58%, color-mix(in srgb, var(--pd-c) 20%, var(--pd-plate)) 0%, var(--pd-plate) 52%, transparent 100%); } .pd-full--frei img { inset: auto; left: var(--gx); top: 7%; width: calc(100% - 2 * var(--gx)); height: 86%; object-fit: contain; object-position: 50% 55%; } .pd-full--szene img { object-position: 85% 58%; } /* Kennzeile und Headline links auf dem Vollbild (17.10.2026) */ .pd-full__text { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; } .pd-full__text .wrap { width: 100%; } .pd-full__text .pd-k { color: var(--ink-2); } /* Platz bis zum MacBook: Geräte beginnen bei 38,5 % der Bildbreite, der Text rückt mit dem Raster ein (17.10.2026) */ .pd-full--szene { --pd-txt: calc(36vw - max(0px, (100vw - var(--max)) / 2) - var(--gx)); } .pd-full__title { margin: 16px 0 0; max-width: var(--pd-txt, 36vw); color: var(--ink); font-weight: 300; font-size: clamp(2rem, min(3.8vw, var(--pd-txt, 36vw) / 8.6), 4.2rem); line-height: 1.04; letter-spacing: -0.035em; } /* Höhe folgt dem Bild (16:9), damit es nie seitlich beschnitten wird und die Geräte nicht unter die Headline rutschen */ .pd-full--szene { height: min(calc(100svh - var(--header-h)), 56.25vw); min-height: 0; } .pd-full__title { overflow-wrap: normal; word-break: normal; hyphens: manual; } /* nie mitten im Wort trennen; zu lange Wörter verkleinert site.js (18.10.2026) */ .pd-full__lead { margin: 20px 0 0; max-width: min(44ch, var(--pd-txt, 32vw)); color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } .pd-full__lead + .pd-full__lead { margin-top: 12px; } /* mehrere Absätze (18.10.2026) */ /* Unterschrift unter dem Vollbild-Text (18.10.2026): Bild als Maske, eingefärbt in Textfarbe, wird von links nach rechts geschrieben */ .pd-full__sign { margin: 18px 0 0; color: var(--ink); } .pd-full__sign span { display: block; width: clamp(150px, 13vw, 210px); aspect-ratio: 1200 / 306; background: currentColor; -webkit-mask: var(--sign) left center / contain no-repeat; mask: var(--sign) left center / contain no-repeat; } @media (prefers-reduced-motion: no-preference) { @keyframes pdSign { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .js .pd-full__sign span { animation: pdSign 1600ms cubic-bezier(.45, .05, .35, 1) 2.6s both; } } html.a11y-calm .pd-full__sign span { animation: none !important; clip-path: none !important; } /* Unterschrift als Strichpfad: jeder Zug wird nacheinander geschrieben (--d Start, --t Dauer je Zug, 18.10.2026) */ .pd-full__sign--stift .pd-sign { display: block; width: clamp(170px, 15vw, 240px); height: auto; overflow: visible; } .pd-full__sign--stift { margin-top: 14px; } @media (prefers-reduced-motion: no-preference) { @keyframes pdSignDraw { to { stroke-dashoffset: 0; } } .js .pd-full__sign--stift path { stroke-dasharray: 1.05 1.05; stroke-dashoffset: 1.05; } .js .pd-full.is-typed .pd-full__sign--stift path { animation: pdSignDraw var(--t) cubic-bezier(.35, .1, .55, 1) calc(.35s + var(--d)) forwards; } /* erst wenn die Headline fertig getippt ist (18.10.2026) */ } html.a11y-calm .pd-full__sign--stift path { animation: none !important; stroke-dashoffset: 0 !important; } /* Blätter-Ebene: deckungsgleich über dem hellen Bild, bewegt sich leicht wie im Wind (17.10.2026) */ .pd-full__pic { position: absolute; inset: 0; display: block; } .pd-full .pd-full__leaf { transform-origin: 0 0; will-change: transform; } @keyframes pdLeaf { 0% { transform: none; } 25% { transform: translate(.35%, .25%) rotate(.45deg) skewX(.4deg); } 50% { transform: translate(-.15%, .45%) rotate(-.2deg) skewX(-.3deg); } 75% { transform: translate(.5%, .1%) rotate(.6deg) skewX(.5deg); } 100% { transform: translate(.1%, .35%) rotate(.15deg); } } @media (max-width: 1099px) { .pd-full--szene { height: auto; min-height: 0; } .pd-full--szene img { position: static; width: 100%; height: auto; } .pd-full__text { position: static; display: block; padding: 36px 0 26px; background: var(--paper); } .pd-full__title { max-width: 18ch; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.2rem); } .pd-full__lead { max-width: 52ch; } .pd-full__pic { position: relative; inset: auto; } .pd-full--szene .pd-full__leaf { position: absolute; inset: 0; width: 100%; height: 100%; } } @media (max-width: 759px) { .pd-full--frei { height: auto; min-height: 0; padding: 36px var(--gx) 20px; } .pd-full--frei img { position: static; width: 100%; height: auto; } .pd-full--szene { height: auto; min-height: 0; } .pd-full--szene img { position: static; width: 100%; height: auto; } .pd-full__text { padding: 28px 0 22px; } } .pd-hero--after-full { padding-top: clamp(56px, 9vh, 112px); } @media (prefers-reduced-motion: no-preference) { .js .pd-full img { animation: pfZoom 1600ms var(--pf-ease) both; } .js .pd-full .pd-full__leaf { animation: pfZoom 1600ms var(--pf-ease) both, pdLeaf 7s ease-in-out 1.6s infinite alternate; } } /* Abschluss mit Terminbuchung statt Ansprechpartner (17.10.2026) */ .pd-book { padding: clamp(72px, 8vw, 128px) 0 clamp(80px, 9vw, 140px); border-top: 1px solid var(--line); } .pd-book__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } .pd-book__text { grid-column: 1 / span 5; } .pd-book__text p { max-width: 44ch; color: var(--ink-2); line-height: 1.6; } .pd-book__text .pd-h2 { max-width: 21ch; } .pd-book__alt { margin-top: 22px; font-size: .9375rem; } .pd-book__alt a { color: var(--ink); } .pd-book--page { --pd-c: #B0782A; } /* Terminblock auf normalen Seiten (Kontakt), Akzent wie Über uns (18.10.2026) */ .pd-book__cal { grid-column: 7 / -1; max-width: 600px; } @media (max-width: 1099px) { .pd-book__text { grid-column: 1 / -1; } .pd-book__cal { grid-column: 1 / -1; margin-top: 36px; } } /* Kachelübersicht (Wieland 17.10.2026): was das System abbildet, auf einen Blick */ .pd-tiles { padding: clamp(80px, 9vw, 140px) 0 clamp(24px, 3vw, 48px); } .pd-tiles__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .pd-tiles__head .pd-k, .pd-tiles__head .pd-h2 { grid-column: 1 / span 7; } .pd-tiles__head p:not(.pd-k) { grid-column: 8 / -1; grid-row: 2; margin: 0 0 18px; max-width: 46ch; color: var(--ink-2); font-size: 1rem; line-height: 1.6; } .pd-tiles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; } .pd-tile { display: grid; grid-template-columns: 24px 1fr; column-gap: 16px; align-content: start; padding: 22px 0 26px; border-top: 1px solid var(--line-2); } .pd-tile__ic { grid-row: 1 / span 2; margin-top: 1px; color: var(--pd-ink); } .pd-tile h3 { margin: 0 0 6px; color: var(--ink); font-size: 1rem; font-weight: 500; letter-spacing: -0.008em; line-height: 1.35; } .pd-tile p { margin: 0; max-width: 40ch; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } @media (max-width: 1099px) { .pd-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-tiles__head .pd-k, .pd-tiles__head .pd-h2, .pd-tiles__head p:not(.pd-k) { grid-column: 1 / -1; grid-row: auto; } } @media (max-width: 759px) { .pd-tiles__head { display: block; } .pd-tiles__grid { grid-template-columns: 1fr; } } /* Fußzeile (17.10.2026): Social Media statt Anschrift; Darstellung Hell, Dunkel, Auto als Text ohne Rahmen */ .footer-col .footer-social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9375rem; } .theme-switch--text { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: .06em; } .theme-switch--text button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 4px; background: none; border: 0; border-radius: 0; color: var(--muted); font: inherit; letter-spacing: inherit; cursor: pointer; } .theme-switch--text button:hover { color: var(--ink); } .theme-switch--text button[aria-pressed="true"] { color: var(--ink); font-weight: 600; } .theme-switch--text button, .theme-switch--text button:focus { outline: none; box-shadow: none; } .theme-switch--text button:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .theme-switch--text .sep { padding: 0; color: var(--line-2); } .site-footer .theme-switch--text button { color: var(--panel-muted); } .site-footer .theme-switch--text button:hover, .site-footer .theme-switch--text button[aria-pressed="true"] { color: var(--panel-ink); } /* Runde 17.10.2026 abends: fette Headlines, gestaffeltes Einblenden, Bilder, Schreibmaschine, Nächstes Projekt, Fußzeile */ .pd .pd-h2, .pd .pd-hero__t, .pd-full__title, .pd .cs2-next__name { font-weight: 600; letter-spacing: -0.035em; } .pd .pd-hero__t .pd-hero__name { font-weight: 500; letter-spacing: -0.01em; } @media (prefers-reduced-motion: no-preference) { /* Kacheln und Veränderungen nacheinander */ .js .pd-tiles__grid[data-reveal-text] > *, .js .pd-changes[data-reveal-text] > * { transition: opacity 600ms ease, transform 700ms ease; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(1), .js .pd-changes[data-reveal-text] > :nth-child(1) { transition-delay: 0ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(2), .js .pd-changes[data-reveal-text] > :nth-child(2) { transition-delay: 120ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(3), .js .pd-changes[data-reveal-text] > :nth-child(3) { transition-delay: 240ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(4) { transition-delay: 360ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(5) { transition-delay: 480ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(6) { transition-delay: 600ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(7) { transition-delay: 720ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(8) { transition-delay: 840ms; } .js .pd-tiles__grid[data-reveal-text] > :nth-child(9) { transition-delay: 960ms; } .js .pd-tiles__grid[data-reveal-text].rv-pending > *, .js .pd-changes[data-reveal-text].rv-pending > * { opacity: 0; transform: translateY(16px); } /* Bilder dezent: weich einblenden und leicht anheben */ .js .pd [data-reveal] img, .js .cs2-next [data-reveal] img { transition: opacity 900ms ease, transform 1100ms var(--pf-ease, ease); } .js .pd [data-reveal].rv-pending img, .js .cs2-next [data-reveal].rv-pending img { clip-path: none; opacity: 0; transform: translateY(18px) scale(1.01); } /* Schreibmaschine: Zeichen erscheinen nacheinander, Platz bleibt reserviert */ .js .pd-full__title.is-typing .tw { opacity: 0; } .js .pd-full__title .tw.on { opacity: 1; } .js .pd-full__title .tw { position: relative; } .js .pd-full__title .tw.cur::after { content: ""; position: absolute; right: -.04em; top: .12em; bottom: .08em; width: .06em; background: currentColor; animation: pdCaret 900ms steps(1) infinite; } @keyframes pdCaret { 50% { opacity: 0; } } } /* Nächstes Projekt mit freigestelltem Gerätebild: keine Fläche, Bild ganz */ .cs2-next__media--frei { aspect-ratio: auto; overflow: visible; background: none; margin-top: clamp(32px, 4.5vw, 72px); align-self: end; } .cs2-next__media--frei img { height: auto; object-fit: contain; } .cs2-next__media--frei .pf-tag { background: var(--paper-2); border: 1px solid var(--line); } /* ohne Bildfläche sonst unsichtbar (18.10.2026) */ @media (min-width: 900px) { .cs2-next__media--frei { translate: 0 3.5vw; } } /* Gerätebild tiefer, Wunsch des Users (18.10.2026) */ /* Fußzeile: Leitsatz breiter, die drei Spalten rechts gleich breit */ .footer-top { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); } .footer-top > .footer-claim { grid-column: 1; } .footer-top > .footer-col, .footer-top > .footer-col--wide { grid-column: auto; } @media (max-width: 1000px) { .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-top > .footer-claim { grid-column: 1 / -1; } } @media (max-width: 620px) { .footer-top { grid-template-columns: minmax(0, 1fr); } } .footer-col .footer-social { gap: 6px 16px; margin-top: 20px; } .footer-social a { display: inline-flex; color: var(--panel-muted); transition: color 160ms ease; } .footer-social a:hover, .footer-social a:focus-visible { color: var(--panel-ink); } /* Nächstes Projekt: Text mittig neben dem Bild statt unten (17.10.2026) */ .pd .cs2-next__in, .cs2-next__in { align-items: center; } /* Dunkler Modus: weicher Verlauf links hinter Headline und Beschreibung, damit der Text auf den Lichtflecken lesbar bleibt (17.10.2026) */ @media (min-width: 1100px) { :root[data-theme="dark"] .pd-full--szene .pd-full__text { background: linear-gradient(90deg, rgba(10, 11, 12, .62) 0%, rgba(10, 11, 12, .45) 30%, rgba(10, 11, 12, 0) 48%); } } @media (min-width: 1100px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-full--szene .pd-full__text { background: linear-gradient(90deg, rgba(10, 11, 12, .62) 0%, rgba(10, 11, 12, .45) 30%, rgba(10, 11, 12, 0) 48%); } } /* Funktionen im Detail unter jedem Moment: nacheinander einblenden (17.10.2026) */ @media (prefers-reduced-motion: no-preference) { .js .pd-feats[data-reveal-text] > * { transition: opacity 1100ms ease, transform 1300ms var(--pf-ease, ease); } .js .pd-feats[data-reveal-text] > :nth-child(1) { transition-delay: 0ms; } .js .pd-feats[data-reveal-text] > :nth-child(2) { transition-delay: 350ms; } .js .pd-feats[data-reveal-text] > :nth-child(3) { transition-delay: 700ms; } .js .pd-feats[data-reveal-text] > :nth-child(4) { transition-delay: 1050ms; } .js .pd-feats[data-reveal-text].rv-pending > * { opacity: 0; transform: translateY(22px); } } /* Kopfbild mit Ebene (Smartphone-Screen) darüber, blendet nach dem Dashboard ein (17.10.2026) */ .pd-hero__comp { position: relative; display: block; } .pd-hero__over { position: absolute; display: block; z-index: 2; } .pd-hero__frame .pd-hero__over img { width: 100%; height: auto; } @media (prefers-reduced-motion: no-preference) { .js .pd .pd-hero__over[data-reveal] img { transition: opacity 1000ms ease 900ms, transform 1200ms var(--pf-ease, ease) 900ms; } .js .pd .pd-hero__over[data-reveal].rv-pending img, .js .pd [data-reveal].rv-pending .pd-hero__over img { opacity: 0; transform: translateY(40px); } } /* Aufklappen der Entscheidung verschiebt das Bild nicht mehr: Bild und Text oben ausgerichtet, der Text etwas eingerückt, damit die Ruhelage wie vorher wirkt (17.10.2026) */ @media (min-width: 760px) { .pd-plan { align-items: start; } .pd-plan__text { padding-top: clamp(16px, 3vw, 56px); } .pd-field { align-items: start; } .pd-field__seq { align-self: start; } .pd-field__text { padding-top: clamp(16px, 3vw, 56px); } } /* Vollbild in Ebenen (17.10.2026): Hintergrund füllt immer den ganzen Bildschirm, Geräte stehen rechts darauf. Geräte-Bild: Gerät 93,25 % der Bildbreite, Rand 3,38 % seitlich und 12,4 % unten (Schatten). */ .pd-full--ebenen { --pd-txt: calc(33.5vw - max(0px, (100vw - var(--max)) / 2) - var(--gx)); height: calc(100svh - var(--header-h)); min-height: 560px; container-type: size; } .pd-full--ebenen .pd-full__stage { position: absolute; inset: 0; display: block; } .pd-full--ebenen .pd-full__pic { position: absolute; inset: 0; display: block; } .pd-full--ebenen img { object-position: 50% 50%; } .pd-full--ebenen .pd-full__dev { position: absolute; z-index: 1; right: 2.5cqw; bottom: 15cqh; width: min(calc(66.5cqw * var(--dev-f, 1)), calc(128cqh * var(--dev-f, 1))); transform: translate(3.38%, 12.4%); } /* Gerät 62 % breit, höher gesetzt */ .pd-full--ebenen .pd-full__dev img { position: static; inset: auto; display: block; width: 100%; height: auto; object-fit: initial; } /* Vollbild mit Figur statt Geräten (18.10.2026): steht unten auf dem Rand, Größe nach der Höhe */ .pd-full--figur .pd-full__dev { right: 8cqw; bottom: 0; width: auto; height: 90cqh; transform: none; } .pd-full--figur .pd-full__dev img { width: auto; height: 100%; } .pd-full--figur-r .pd-full__dev { right: 0; } /* Figur endet auch rechts: bündig an den Rand */ /* Vollbild mit Foto statt Geräten (18.10.2026, Über uns): Porträt rechts als Abzug mit Schatten, vertikal mittig */ .pd-full--ebenen.pd-full--foto .pd-full__dev { right: 9cqw; bottom: 50%; width: auto; height: min(78cqh, 62cqw); transform: translateY(50%); } .pd-full--foto .pd-full__dev img { width: auto; height: 100%; border-radius: 3px; box-shadow: 0 34px 70px rgba(20, 20, 22, .28), 0 6px 16px rgba(20, 20, 22, .12); } @media (max-width: 899px) { .pd-full--ebenen.pd-full--foto .pd-full__dev { right: 50%; bottom: 7%; width: auto; height: 86%; transform: translateX(50%); } } /* Figur vor den Geräten (18.10.2026): Geräte etwas kleiner und weiter links, Figur unten rechts bündig davor */ .pd-full--person .pd-full__dev { right: 5cqw; width: min(55cqw, 106cqh); } /* Bot darf die Geräte rechts verdecken (Wunsch des Users) */ .pd-full--person .pd-full__person { position: absolute; z-index: 2; right: 0; bottom: 0; height: 88cqh; pointer-events: none; } .pd-full--person .pd-full__person img { position: static; display: block; width: auto; height: 100%; object-fit: initial; filter: drop-shadow(-18px 0 40px rgba(20, 20, 22, .18)); } /* Figur aus zwei Ebenen (18.10.2026, Über uns): Mensch als Figur, KI-Ebene liegt deckungsgleich darüber und flackert später ein */ .pd-full--figur.pd-full--person .pd-full__dev { right: 8cqw; width: auto; } .pd-full--figur.pd-full--person .pd-full__person { right: 8cqw; height: 90cqh; } .pd-full--figur.pd-full--person .pd-full__person img { filter: none; } /* KI-Ebene: alle 20 s ein kurzer Impuls wie beim Einblenden (18.10.2026, Wunsch des Users) */ @keyframes ibxPuls { 0%, 94% { opacity: 1; clip-path: inset(0); transform: none; filter: none; animation-timing-function: steps(1, end); } 94.6% { clip-path: inset(14% 0 62% 0); transform: translateX(-12px); filter: drop-shadow(6px 0 0 rgba(0, 210, 255, .7)) drop-shadow(-6px 0 0 rgba(255, 40, 90, .7)); animation-timing-function: steps(1, end); } 95.2% { opacity: .45; clip-path: inset(0); transform: translateX(8px) skewX(-5deg); filter: brightness(1.5); animation-timing-function: steps(1, end); } 95.8% { opacity: 1; clip-path: inset(55% 0 12% 0); transform: translateX(-5px); filter: drop-shadow(-5px 0 0 rgba(0, 210, 255, .6)) drop-shadow(5px 0 0 rgba(255, 40, 90, .6)); animation-timing-function: steps(1, end); } 96.4% { opacity: .8; clip-path: inset(0); transform: translateX(3px); filter: drop-shadow(3px 0 0 rgba(255, 40, 90, .45)) brightness(1.2); animation-timing-function: steps(1, end); } 97.2% { opacity: 1; clip-path: inset(0); transform: translateX(-1px); filter: drop-shadow(-2px 0 0 rgba(0, 210, 255, .35)); animation-timing-function: steps(1, end); } 98%, 100% { opacity: 1; clip-path: inset(0); transform: none; filter: none; } } @media (min-width: 1100px) { .pd-full--figur.pd-full--person { --pd-txt: calc(44vw - max(0px, (100vw - var(--max)) / 2) - var(--gx)); } /* Figur steht weiter rechts: breitere Textspalte */ .pd-full--figur.pd-full--person .pd-full__title { white-space: nowrap; } /* Zeilen wie gesetzt, site.js verkleinert bei Bedarf */ } .pd-full--ebenen .pd-full__text { z-index: 2; } @media (max-width: 1099px) { .pd-full--figur.pd-full--person .pd-full__dev { right: 6%; width: auto; } .pd-full--figur.pd-full--person .pd-full__person { right: 6%; height: 94%; } .pd-full--ebenen { height: auto; min-height: 0; container-type: normal; } .pd-full--ebenen .pd-full__stage { position: relative; aspect-ratio: 16 / 9; } .pd-full--ebenen .pd-full__dev { right: 2.5%; bottom: 13%; width: calc(66.5% * var(--dev-f, 1)); } .pd-full--figur .pd-full__dev { right: 6%; bottom: 0; width: auto; height: 94%; } .pd-full--figur-r .pd-full__dev { right: 0; } .pd-full--person .pd-full__dev { right: 5%; width: 58%; } .pd-full--person .pd-full__person { height: 92%; } } @media (min-width: 1100px) { :root[data-theme="dark"] .pd-full--ebenen .pd-full__text { background: linear-gradient(90deg, rgba(10, 11, 12, .62) 0%, rgba(10, 11, 12, .45) 30%, rgba(10, 11, 12, 0) 48%); } } @media (min-width: 1100px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-full--ebenen .pd-full__text { background: linear-gradient(90deg, rgba(10, 11, 12, .62) 0%, rgba(10, 11, 12, .45) 30%, rgba(10, 11, 12, 0) 48%); } } /* Schaltfläche im Vollbild (17.10.2026): rot, weiße innenliegende Linie, ploppt nach der Headline ein und pulsiert */ .pd-full__cta { margin: 28px 0 0; pointer-events: auto; } .pd-pulse { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; background: #D7262E; color: #fff; font-size: .9375rem; font-weight: 500; letter-spacing: .01em; text-decoration: none; box-shadow: inset 0 0 0 4px #D7262E, inset 0 0 0 5.5px rgba(255, 255, 255, .92); } .pd-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(215, 38, 46, .55); pointer-events: none; } .pd-pulse:hover { background: #BF1E26; box-shadow: inset 0 0 0 4px #BF1E26, inset 0 0 0 5.5px #fff; color: #fff; } .pd-pulse:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @keyframes pdPop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 80% { transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } } @keyframes pdPulse { 0% { box-shadow: 0 0 0 0 rgba(215, 38, 46, .55); } 70% { box-shadow: 0 0 0 18px rgba(215, 38, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 38, 46, 0); } } @media (prefers-reduced-motion: no-preference) { .js .pd-pulse { opacity: 0; animation: pdPop 650ms cubic-bezier(.2, .9, .3, 1.2) 3.6s both; } .js .pd-pulse::after { animation: pdPulse 2.2s ease-out 4.4s infinite; } } /* Geräte in den Momenten: deutlicher einblenden, wenn man in den Abschnitt kommt (17.10.2026) */ @media (prefers-reduced-motion: no-preference) { .js .pd [data-reveal-late] img { transition: opacity 1200ms ease, transform 1400ms var(--pf-ease, cubic-bezier(.2, .7, .2, 1)); } .js .pd [data-reveal-late].rv-pending img { opacity: 0; transform: translateY(70px) scale(.95); } } /* Schwebende Symbole unten rechts (17.10.2026): dezent, gleich groß, Stil der Fußzeile */ .fab-stack { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 8px; } .fab { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink-2); cursor: pointer; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: color 160ms ease, border-color 160ms ease, transform 200ms ease, opacity 250ms ease; } .fab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .fab:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-1px); } .fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .fab[aria-expanded="true"] { color: var(--ink); border-color: var(--line-2); } .fab--top { opacity: 0; visibility: hidden; transform: translateY(6px); } .fab--top.is-on { opacity: 1; visibility: visible; transform: none; } .a11y-panel { position: fixed; right: 72px; bottom: 20px; z-index: 901; width: min(320px, calc(100vw - 92px)); padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .18); } .a11y-panel[hidden] { display: none; } .a11y-panel__t { margin: 0; font-weight: 600; } .a11y-panel__k { margin: 6px 0 12px; color: var(--muted); font-size: .8125rem; line-height: 1.45; } .a11y-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer; text-align: left; } .a11y-opt__s { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--line); transition: background 160ms ease; } .a11y-opt__s::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); transition: transform 160ms ease; } .a11y-opt[aria-pressed="true"] .a11y-opt__s { background: var(--ink); } .a11y-opt[aria-pressed="true"] .a11y-opt__s::after { transform: translateX(12px); } .a11y-panel__f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; white-space: nowrap; text-align: left; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8125rem; } .a11y-reset { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; cursor: pointer; } @media (max-width: 759px) { .fab-stack { right: 12px; bottom: 12px; } .fab { width: 38px; height: 38px; } .a11y-panel { right: 12px; bottom: 64px; width: calc(100vw - 24px); } } @media print { .fab-stack, .a11y-panel, .a11y-guide { display: none !important; } } /* Wirkung der Einstellungen */ html.a11y-text { font-size: 112.5%; } html.a11y-contrast { --ink-2: var(--ink); --muted: var(--ink-2); --line: var(--line-2); } html.a11y-contrast body { filter: contrast(1.12); } html.a11y-links a:not(.fab):not(.pd-pulse) { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-calm .rv-pending img, html.a11y-calm .rv-pending > * { opacity: 1 !important; transform: none !important; } html.a11y-calm .pd-pulse, html.a11y-calm .pd-full__title .tw { opacity: 1 !important; } .a11y-guide { display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 899; height: 36px; pointer-events: none; background: color-mix(in srgb, var(--ink) 8%, transparent); border-block: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); } html.a11y-guide .a11y-guide { display: block; } /* Startseite und Menü (17.10.2026 abends) */ /* Leiste im Hero: Nummer und Art lagen im dunklen Modus hellgrau auf dem hellen Bild */ .planhero .hs__num, .planhero .hs__kind { color: var(--hero-fg2) !important; } /* Headlines der Startseite fett wie in der Wieland-Präsentation */ body.home .hp__title, body.home .planhero--device .hp__title, body.home .planhero--full .hp__title, body.home main h2 { font-weight: 600; letter-spacing: -0.035em; } /* Menü: unter dem letzten Eintrag keine zweite Linie (die Fußzeile des Menüs hat schon eine) */ .mobile-nav__list li:last-child::after { display: none; } /* Darstellung als Symbole ohne Rahmen; aktiv in voller Textfarbe */ .theme-switch--bare { display: inline-flex; gap: 2px; } .theme-switch--bare .icon-btn, .theme-switch--bare .icon-btn:hover, .theme-switch--bare .icon-btn[aria-pressed="true"] { border: 0 !important; box-shadow: none !important; outline: none; background: none; } .theme-switch--bare .icon-btn { width: 30px; height: 30px; color: var(--muted); } .theme-switch--bare .icon-btn:hover, .theme-switch--bare .icon-btn[aria-pressed="true"] { color: var(--ink); } .theme-switch--bare .icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .site-footer .theme-switch--bare .icon-btn { color: var(--panel-muted); } .site-footer .theme-switch--bare .icon-btn:hover, .site-footer .theme-switch--bare .icon-btn[aria-pressed="true"] { color: var(--panel-ink); } /* „Was wir tun“: drei Punkte nacheinander, langsam */ @media (prefers-reduced-motion: no-preference) { .js .brief__fields[data-reveal-text] > * { transition: opacity 1100ms ease, transform 1300ms cubic-bezier(.2, .7, .2, 1); } .js .brief__fields[data-reveal-text] > :nth-child(2) { transition-delay: 350ms; } .js .brief__fields[data-reveal-text] > :nth-child(3) { transition-delay: 700ms; } .js .brief__fields[data-reveal-text].rv-pending > * { opacity: 0; transform: translateY(22px); } .js .hs__tblock .hp__title.is-typing .tw { opacity: 0; } .js .hs__tblock .hp__title .tw.on { opacity: 1; } .js .hs__tblock .hp__title .tw { position: relative; } .js .hs__tblock .hp__title .tw.cur::after { content: ""; position: absolute; right: -.04em; top: .12em; bottom: .08em; width: .06em; background: currentColor; animation: pdCaret 900ms steps(1) infinite; } } html.a11y-calm .hp__title .tw { opacity: 1 !important; } /* Ausgewähltes Projekt: neuronales Netz der Summit-Startseite im rechten Drittel hinter den Geräten (17.10.2026) */ .spot--netz { position: relative; isolation: isolate; } .spot--netz > .wrap { position: relative; z-index: 1; } .spot__netz { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Keil: Form zeichnet das Skript (oben ab Mitte, schräg bis 100 px vor der rechten Ecke) */ .spot__netz canvas { display: block; width: 100%; height: 100%; } @media (max-width: 899px) { .spot__netz { opacity: .75; } } /* Sticker auf der oberen linken Ecke des MacBooks (17.10.2026), ersetzt die rechteckige Schaltfläche. Lage im Geräte-Bild: Ecke bei 10 % / 16,6 %. Rot, weiße innenliegende Linie, ploppt ein, pulsiert. */ .pd-full__dev .pd-badge, .hs__fig .pd-badge { position: absolute; left: 10%; top: 16.6%; z-index: 3; width: clamp(92px, 9cqw, 138px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-12deg); border-radius: 50%; background: #D7262E; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 5px #D7262E, inset 0 0 0 6.5px rgba(255, 255, 255, .92), 0 10px 24px rgba(0, 0, 0, .28); } @media (max-width: 1099px) { .pd-full__dev .pd-badge, .hs__fig .pd-badge { width: clamp(70px, 16vw, 110px); } } .pd-badge__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14%; text-align: center; line-height: 1.05; } .pd-badge__k { font-size: clamp(.5625rem, .8cqw, .75rem); letter-spacing: .12em; text-transform: uppercase; opacity: .9; } .pd-badge__t { font-size: clamp(.8125rem, 1.25cqw, 1.125rem); font-weight: 600; letter-spacing: -0.01em; } .pd-badge__a { font-size: clamp(.75rem, 1cqw, .9375rem); margin-top: 2px; } .pd-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } .pd-badge:hover { background: #BF1E26; box-shadow: inset 0 0 0 5px #BF1E26, inset 0 0 0 6.5px #fff, 0 12px 28px rgba(0, 0, 0, .32); } .pd-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @keyframes pdBadgePop { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(.4); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1.1); } 80% { transform: translate(-50%, -50%) rotate(-13deg) scale(.96); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } } @media (prefers-reduced-motion: no-preference) { .js .pd-full__dev .pd-badge { opacity: 0; animation: pdBadgePop 700ms cubic-bezier(.2, .9, .3, 1.2) 3.6s both; } .js .pd-full__dev .pd-badge::after { animation: pdPulse 2.2s ease-out 4.5s infinite; } } html.a11y-calm .pd-full__dev .pd-badge { opacity: 1 !important; } /* Sticker ohne Link, mit Apple-Logo (18.10.2026) */ .pd-badge--static { cursor: default; } .pd-badge--static:hover { background: #D7262E; } .pd-badge__logo { width: 34%; height: auto; margin-bottom: 3%; } .pd-badge--apple .pd-badge__k { letter-spacing: .06em; } /* Einblendung mit Figur (18.10.2026): erst die Geräte, dann die Figur mit digitalem Störflackern, dann der Sticker */ @keyframes ibxGlitch { 0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; filter: none; animation-timing-function: steps(1, end); } 6% { opacity: .95; clip-path: inset(12% 0 70% 0); transform: translateX(-16px); filter: drop-shadow(7px 0 0 rgba(0, 210, 255, .75)) drop-shadow(-7px 0 0 rgba(255, 40, 90, .75)); animation-timing-function: steps(1, end); } 12% { opacity: .35; clip-path: inset(58% 0 18% 0); transform: translateX(12px) skewX(-6deg); animation-timing-function: steps(1, end); } 18% { opacity: 1; clip-path: inset(0 0 55% 0); transform: translateX(5px); filter: drop-shadow(-5px 0 0 rgba(0, 210, 255, .7)) drop-shadow(5px 0 0 rgba(255, 40, 90, .7)) brightness(1.4); animation-timing-function: steps(1, end); } 24% { opacity: 0; animation-timing-function: steps(1, end); } 32% { opacity: 1; clip-path: inset(28% 0 30% 0); transform: translateX(-9px); filter: drop-shadow(9px 0 0 rgba(0, 210, 255, .6)) drop-shadow(-9px 0 0 rgba(255, 40, 90, .6)); animation-timing-function: steps(1, end); } 40% { opacity: .7; clip-path: inset(0); transform: translateX(3px) skewX(4deg); filter: brightness(1.8) contrast(1.3); animation-timing-function: steps(1, end); } 46% { opacity: 0; animation-timing-function: steps(1, end); } 54% { opacity: 1; clip-path: inset(66% 0 0 0); transform: translateX(-6px); filter: drop-shadow(4px 0 0 rgba(0, 210, 255, .6)); animation-timing-function: steps(1, end); } 62% { opacity: 1; clip-path: inset(0); transform: translateX(2px); filter: drop-shadow(-3px 0 0 rgba(0, 210, 255, .5)) drop-shadow(3px 0 0 rgba(255, 40, 90, .5)); animation-timing-function: steps(1, end); } 74% { transform: translateX(-1px); filter: drop-shadow(2px 0 0 rgba(255, 40, 90, .35)); animation-timing-function: steps(1, end); } 84% { transform: none; filter: brightness(1.15); } 100% { opacity: 1; clip-path: inset(0); transform: none; filter: none; } } @media (prefers-reduced-motion: no-preference) { .js .pd-full .pd-full__person img { animation: ibxGlitch 1300ms linear 3.5s both; } /* 2 s später, Wunsch des Users */ .js .pd-full--figur.pd-full--person .pd-full__person img { animation: ibxGlitch 1300ms linear 3.5s both, ibxPuls 20s linear 4.8s infinite; } /* danach alle 20 s ein Impuls */ .js .pd-full--person .pd-full__dev .pd-badge { animation-delay: 5.3s; } .js .pd-full--person .pd-full__dev .pd-badge::after { animation-delay: 6.2s; } .js .hs__fig .hs__bot, .js .hs__fig .hs__badge { opacity: 0; } .js .hs__fig.is-active .hs__bot { animation: ibxGlitch 1300ms linear 2.25s both; } /* 2 s nach den Geräten, Wunsch des Users */ .js .hs__fig.is-active .hs__badge { animation: pdBadgePop 700ms cubic-bezier(.2, .9, .3, 1.2) 3.75s both; } .js .hs__fig.is-active .hs__badge::after { animation: pdPulse 2.2s ease-out 4.6s infinite; } } /* Slider: Figur in derselben Bildfläche wie das Slide-Bild (cover, 60 % 50 %), Sticker auf der MacBook-Ecke */ .hs__fig { position: absolute; inset: 0; z-index: 1; overflow: hidden; container-type: size; pointer-events: none; visibility: hidden; } .hs__fig.is-active { visibility: visible; } .hs__cover { position: absolute; width: max(100cqw, 160cqh); height: max(62.5cqw, 100cqh); left: calc((100cqw - max(100cqw, 160cqh)) * .6); top: calc((100cqh - max(62.5cqw, 100cqh)) * .5); } .hs__bot { position: absolute; right: 0; bottom: 0; height: 84%; width: auto; filter: none; } .hs__fig .pd-badge.hs__badge { left: 55.5%; top: 25%; pointer-events: auto; } @media (max-width: 899px) { .hs__cover { width: max(100cqw, 50cqh); height: max(200cqw, 100cqh); left: calc((100cqw - max(100cqw, 50cqh)) * .5); top: calc((100cqh - max(200cqw, 100cqh)) * .3); } .hs__bot { right: -4%; bottom: 47%; height: 31%; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); } .hs__fig .pd-badge.hs__badge { left: 16%; top: 22%; } } html.a11y-calm .hs__fig .hs__bot, html.a11y-calm .hs__fig .hs__badge { opacity: 1 !important; animation: none !important; } /* Smartphone: Sticker-Text mit mehr Luft, große Headline im Einstieg passt in die Breite (17.10.2026) */ @media (max-width: 759px) { .pd-badge__in { padding: 20%; gap: 1px; } .pd-badge__k { font-size: .5rem; letter-spacing: .1em; } .pd-badge__t { font-size: .75rem; } .pd-badge__a { font-size: .6875rem; } .pd .pd-hero__t { font-size: clamp(2rem, 10.5vw, 2.75rem); overflow-wrap: anywhere; hyphens: manual; } } /* Sticker: Schrift wächst mit dem Kreis und reicht fast bis an die weiße Linie (17.10.2026) */ .pd-full__dev .pd-badge, .hs__fig .pd-badge { container-type: inline-size; } .pd-badge .pd-badge__in { padding: 9%; gap: 0; line-height: .98; } .pd-badge .pd-badge__k { font-size: 12.5cqi; letter-spacing: .1em; margin-bottom: 2cqi; } .pd-badge .pd-badge__t { font-size: 21cqi; letter-spacing: -0.02em; } .pd-badge .pd-badge__a { font-size: 15cqi; margin-top: 1cqi; } /* Kennzahlen „rund … €“: Vorsatz und Betrag immer in einer Zeile, Betrag passt sich der Spaltenbreite an (17.10.2026) */ .nx__figs .nx__fig { container-type: inline-size; min-width: 0; } .nx__figs .nx__num { flex-wrap: nowrap; white-space: nowrap; gap: 8px; } .nx__figs .nx__num > span:not(.nx__pre):not(.nx__unit) { font-size: min(3rem, calc(21cqi - 10px)); } @media (max-width: 1099px) { .nx__figs--2 { grid-template-columns: 1fr; } } /* zu schmal für zwei große Beträge nebeneinander */ /* Ausgewähltes Projekt: zweiter Link zur Website (17.10.2026) */ .spot__links { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 0; } .spot__link--ext:hover svg, .spot__link--ext:focus-visible svg { transform: translate(2px, -2px); } /* Dunkler Moment: Bild läuft bis an den rechten Bildschirmrand (17.10.2026) */ @media (min-width: 760px) { .pd-field__seq--bleed { grid-column: 5 / -1; margin: 0 calc(-1 * (var(--gx) + max(0px, (100vw - var(--max)) / 2))) 0 0; } .pd-field__seq--bleed img { width: 100%; } } /* Einstieg: Headline bleibt in ihrer Spalte und bricht um, statt in die Eckdaten zu laufen (17.10.2026) */ .pd-hero__head { min-width: 0; } .pd .pd-hero__t { text-wrap: balance; overflow-wrap: break-word; } /* Kartenstapel wie im Apple Wallet (17.10.2026): Karten liegen versetzt übereinander, von den hinteren schaut das Register heraus, ein Klick holt die Karte nach vorn. --pos 0 = ganz hinten, n−1 = vorn. */ .pd-plan--stack .pd-plan__panel { padding: 0; background: none; display: block; place-items: initial; } .pd-stack { --tab: 50px; position: relative; padding-bottom: calc((var(--n) - 1) * var(--tab) + 18px); } .pd-stack::before { content: ""; display: block; padding-top: 62.5%; } /* Kartenhöhe 16:10 der Breite */ .pd-card { position: absolute; left: 0; right: 0; top: calc(var(--pos) * var(--tab)); aspect-ratio: 16 / 10; z-index: calc(var(--pos) + 1); border-radius: 18px; overflow: hidden; background: var(--pd-c); box-shadow: 0 -1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px rgba(10, 14, 20, .22); transform: scale(calc(1 - (var(--n) - 1 - var(--pos)) * .035)); transform-origin: 50% 0; transition: top 650ms cubic-bezier(.2, .8, .2, 1), transform 650ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease; } .pd-card__tab { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--tab); padding: 0 20px; border: 0; background: var(--pd-c); color: #fff; font: inherit; cursor: pointer; text-align: left; } .pd-card__name { font-size: .9375rem; font-weight: 500; letter-spacing: .01em; } .pd-card__num { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; color: var(--pd-a); } .pd-card__img { position: absolute; inset: var(--tab) 0 0 0; } .pd-plan--stack .pd-card__img img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; } .pd-card:not(:last-child):hover { transform: scale(calc(1 - (var(--n) - 1 - var(--pos)) * .035)) translateY(-8px); } .pd-card[data-front] .pd-card__tab { cursor: default; } .pd-card__tab:focus-visible { outline: 2px solid var(--pd-a); outline-offset: -4px; } @media (prefers-reduced-motion: reduce) { .pd-card { transition: none; } } html.a11y-calm .pd-card { transition: none !important; } @media (max-width: 759px) { .pd-stack { --tab: 42px; } .pd-card { border-radius: 14px; } .pd-card__tab { padding: 0 14px; } } :root[data-theme="dark"] .pd-card { outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-card { outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; } } /* Bildstrecke bis an den rechten Rand (17.10.2026): Text oben, darunter eckige Bilder nebeneinander, wischen/ziehen/Pfeile */ .pd-plan--reel { align-items: start; } .pd-plan--reel .pd-plan__text { grid-column: 1 / span 7; padding-top: 0; } .pd-reel { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px); --bleed: calc(var(--gx) + max(0px, (100vw - var(--max)) / 2)); } .pd-reel__track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; margin-right: calc(-1 * var(--bleed)); padding-right: var(--bleed); scrollbar-width: none; cursor: grab; outline: none; } .pd-reel__track::-webkit-scrollbar { display: none; } .pd-reel__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; } .pd-reel__track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } .pd-reel__item { flex: 0 0 clamp(280px, 44vw, 640px); margin: 0; scroll-snap-align: start; } .pd-reel__item img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 0; pointer-events: none; -webkit-user-drag: none; } .pd-reel__item figcaption { display: flex; gap: 12px; align-items: baseline; padding-top: 14px; border-top: 0; color: var(--ink); font-size: .9375rem; } .pd-reel__n { font-family: var(--mono); font-size: .75rem; color: var(--pd-ink); letter-spacing: .04em; } .pd-reel__ctrl { display: flex; align-items: center; gap: 8px; margin-top: 22px; } .pd-reel__count { margin-right: auto; font-family: var(--mono); font-size: .8125rem; color: var(--muted); letter-spacing: .04em; } .pd-reel__count b { color: var(--ink); font-weight: 500; } .pd-reel__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 0; background: none; color: var(--ink); cursor: pointer; transition: background 160ms ease, color 160ms ease, opacity 160ms ease; } .pd-reel__btn:hover { background: var(--ink); color: var(--paper); } .pd-reel__btn[disabled] { opacity: .35; cursor: default; background: none; color: var(--ink); } .pd-reel__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .js .pd-reel[data-reveal-text] .pd-reel__item { transition: opacity 1000ms ease, transform 1200ms cubic-bezier(.2, .7, .2, 1); } .js .pd-reel[data-reveal-text] .pd-reel__item:nth-child(2) { transition-delay: 150ms; } .js .pd-reel[data-reveal-text] .pd-reel__item:nth-child(3) { transition-delay: 300ms; } .js .pd-reel[data-reveal-text] .pd-reel__item:nth-child(n+4) { transition-delay: 450ms; } .js .pd-reel[data-reveal-text].rv-pending .pd-reel__item { opacity: 0; transform: translateX(60px); } } @media (max-width: 759px) { .pd-reel__item { flex-basis: 82vw; } .pd-plan--reel .pd-plan__text { padding-top: 0; } } /* Kopfbild-Ebene mit weichem Schatten (CFL, 17.10.2026): liegt auf dem Bild auf */ .pd-hero__over--shadow img { filter: drop-shadow(-4px 4px 6px rgba(0, 0, 0, .35)) drop-shadow(-22px 26px 40px rgba(0, 0, 0, .5)); } /* nach links unten, damit er auf dem hellen Backend sichtbar ist */ /* Hell, Gerät bis über den rechten Rand (CFL 03, 17.10.2026): doppelt so groß, tiefer, rechts angeschnitten */ .pd-moment--clip { overflow-x: clip; } .pd-plan--bleed .pd-plan__panel { align-self: start; justify-items: start; margin-top: clamp(16px, 3vw, 48px); } .pd-plan--bleed .pd-plan__panel img { width: min(145%, 924px); max-width: none; } /* doppelt so groß, dann 25 % kleiner, dann 10 % größer, ohne Schatten */ @media (max-width: 1099px) { .pd-plan--bleed .pd-plan__panel img { width: 141%; } } @media (max-width: 759px) { .pd-plan--bleed .pd-plan__panel { margin: 8px calc(-1 * var(--gx)) 0 0; } .pd-plan--bleed .pd-plan__panel img { width: 115%; } } .pd-hero { overflow-x: clip; } /* Ebene mit Schattenfläche (CFL-Handy) darf über den Rand ragen, ohne seitlich zu scrollen */ /* Produktpräsentation: Platzhalter, solange ein Bild fehlt (17.10.2026, Hub OS) */ .pd-ph { display: grid; align-content: center; justify-items: center; gap: 10px; width: 100%; min-height: clamp(280px, 34vw, 460px); padding: 32px; text-align: center; border: 1px dashed var(--line-2, rgba(0,0,0,.18)); background: var(--surface-2, #ebe7e0); background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,.035) 22px 23px); } .pd-ph__k { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .pd-ph__t { max-width: 46ch; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; } .pd-ph--dark { border-color: rgba(236, 242, 240, .2); background-color: rgba(255, 255, 255, .04); background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.04) 22px 23px); } .pd-ph--dark .pd-ph__k, .pd-ph--dark .pd-ph__t { color: var(--pd-f-muted, rgba(236, 242, 240, .7)); } .pd-plan--free .pd-ph, .pd-plan--device .pd-ph { margin: 0 auto; } [data-theme="dark"] .pd-ph:not(.pd-ph--dark) { background-color: #1c1e23; background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.04) 22px 23px); border-color: rgba(255,255,255,.16); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-ph:not(.pd-ph--dark) { background-color: #1c1e23; background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.04) 22px 23px); border-color: rgba(255,255,255,.16); } } /* Bühne als Vollbild (18.10.2026, Kontakt): Foto bildschirmfüllend, Text weiß links unten auf weichem Verlauf */ .hero--full { position: relative; display: flex; align-items: flex-end; min-height: max(560px, calc(100svh - var(--header-h))); padding: 0 0 clamp(48px, 7vh, 96px); overflow: hidden; color: #fff; background: #1B1D20; } .hero--full .hero-full__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; } .hero--full .hero-full__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 15, 17, .62) 0%, rgba(14, 15, 17, .38) 34%, rgba(14, 15, 17, 0) 58%), linear-gradient(0deg, rgba(14, 15, 17, .45) 0%, rgba(14, 15, 17, 0) 45%); } .hero--full .hero-full__text { position: relative; z-index: 1; width: 100%; } .hero--full .hero__eyebrow { color: rgba(255, 255, 255, .82); } .hero--full .hero__title { margin-top: 14px; color: #fff; } .hero--full .hero__lead { max-width: 40ch; margin-top: 22px; color: rgba(255, 255, 255, .9); } .hero--full .hero__lead p { color: inherit; } @media (max-width: 899px) { .hero--full { min-height: 78svh; } .hero--full .hero-full__img { object-position: 68% 30%; } .hero--full .hero-full__shade { background: linear-gradient(0deg, rgba(14, 15, 17, .78) 0%, rgba(14, 15, 17, .5) 42%, rgba(14, 15, 17, 0) 72%); } } /* Vollbild mit Foto im Querformat (18.10.2026, Kontakt): Abzug rechts, Breite statt Höhe begrenzt, damit er nicht in den Text ragt */ .pd-full--ebenen.pd-full--foto-quer .pd-full__dev { right: 6cqw; bottom: 50%; width: min(50cqw, 96cqh); height: auto; transform: translateY(50%); } .pd-full--foto-quer .pd-full__dev img { width: 100%; height: auto; } @media (max-width: 1099px) { .pd-full--ebenen.pd-full--foto-quer .pd-full__dev { right: 50%; bottom: 50%; width: 72%; height: auto; transform: translate(50%, 50%); } } /* Vollbild mit Terminbuchung statt Bild (18.10.2026, Kontakt): Kalender als helle Karte rechts, mobil unter dem Text */ .pd-full--cal .pd-full__cal { position: absolute; z-index: 3; right: 6cqw; top: 50%; transform: translateY(-50%); width: min(560px, 44cqw); max-height: 88cqh; overflow: auto; padding: clamp(20px, 2.2vw, 32px); background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 3px; } /* ohne Schatten, Wunsch User */ @media (max-width: 1099px) { .pd-full--cal .pd-full__stage { aspect-ratio: auto; padding: 28px 0 40px; } .pd-full--cal .pd-full__cal { position: relative; right: auto; top: auto; transform: none; width: auto; max-width: 600px; max-height: none; margin: 0 var(--gx); } } /* ========================================================================== Blog „Wissen“ im Stil der Referenzseiten (18.10.2026): Übersicht mit Leitbeitrag und Kartenraster, Beitrag mit Eckdaten, großem Bild, Inhaltsverzeichnis und weiteren Beiträgen ========================================================================== */ .bp-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); } .bp-hero__t { margin: 16px 0 0; color: var(--ink); font-size: clamp(2.8rem, 1.4rem + 5vw, 6.4rem); font-weight: 600; line-height: .96; letter-spacing: -0.045em; } .bp-hero__lead { max-width: 54ch; margin: 24px 0 0; color: var(--ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; } .bp-filter { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .bp-filter ul { display: flex; gap: 0 28px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .bp-filter ul::-webkit-scrollbar { display: none; } .bp-filter a { display: inline-flex; align-items: baseline; gap: 6px; padding: 20px 0 17px; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: .9375rem; white-space: nowrap; text-decoration: none; transition: color 200ms, border-color 200ms; } .bp-filter a:hover { color: var(--ink); } .bp-filter a[aria-current] { color: var(--ink); border-bottom-color: var(--pd-c); } .bp-filter .num { color: var(--muted); font-size: .75rem; } .bp-list { padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 120px); } .bp-card__link { display: block; color: inherit; text-decoration: none; } .bp-card__link:hover { text-decoration: none; } .bp-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--pd-plate); } .bp-pic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); } .bp-card__link:hover .bp-pic__img { transform: scale(1.035); } .bp-pic__ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(18px, 2vw, 28px); background-color: color-mix(in srgb, var(--pd-c) 26%, #F3EFE8); background-size: cover; background-position: center; background-blend-mode: multiply; } .bp-pic__ph::before { content: ""; position: absolute; left: clamp(18px, 2vw, 28px); top: clamp(18px, 2vw, 28px); width: 10px; height: 10px; background: var(--pd-c); } /* Ersatzfläche ohne Beitragsbild: warm getönt, Kategorie groß */ .bp-pic__ph span { color: var(--ink); font-size: clamp(1.3rem, 1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; } .bp-card__body { display: block; margin-top: 20px; } .bp-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; } .bp-meta__cat { color: var(--ink); } .bp-meta__cat::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--pd-c); vertical-align: 1px; } .bp-card__t { margin: 12px 0 0; color: var(--ink); font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; } .bp-card__link:hover .bp-card__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; } .bp-card__ex { display: -webkit-box; margin-top: 10px; overflow: hidden; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .bp-card--lead .bp-card__link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; } .bp-card--lead .bp-pic { grid-column: 1 / span 7; aspect-ratio: 16 / 10; } .bp-card--lead .bp-card__body { grid-column: 9 / -1; margin: 0; } .bp-card--lead .bp-card__t { margin-top: 16px; font-size: clamp(1.8rem, 1.1rem + 1.9vw, 2.9rem); line-height: 1.05; letter-spacing: -0.035em; } .bp-card--lead .bp-card__ex { margin-top: 18px; font-size: 1rem; -webkit-line-clamp: 5; } .bp-card__go { margin-top: 28px; } .bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 4.5vw, 72px) var(--gap); margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(44px, 4.5vw, 72px); border-top: 1px solid var(--line); } .bp-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: clamp(56px, 6vw, 88px); } .bp-pager a, .bp-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); color: var(--ink); font-size: .875rem; text-decoration: none; } .bp-pager a:hover { border-color: var(--ink); } .bp-pager .current { background: var(--ink); border-color: var(--ink); color: var(--paper); } .bp-pager .dots { border-color: transparent; } /* Beitrag */ .bp-head { padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 4vw, 60px); } .bp-head__t { max-width: 22ch; margin: 16px 0 0; color: var(--ink); font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; } .bp-head__lead { max-width: 60ch; margin: 24px 0 0; color: var(--ink-2); font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); line-height: 1.55; } .bp-facts { display: flex; flex-wrap: wrap; gap: 16px clamp(28px, 4vw, 56px); margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--line); } .bp-facts dt { color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .bp-facts dd { margin: 4px 0 0; color: var(--ink); font-size: .9375rem; } .bp-figure { margin: 0 0 clamp(48px, 6vw, 96px); } .bp-figure__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; } .bp-main { padding-bottom: clamp(72px, 8vw, 128px); } .bp-main__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .bp-prose { grid-column: 3 / span 8; max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; } .bp-main__grid--toc .bp-prose { grid-column: 5 / span 8; } .bp-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } .bp-toc__k { margin: 0; color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .bp-toc ol { margin: 14px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line); } .bp-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--ink-2); font-size: .875rem; line-height: 1.4; text-decoration: none; transition: color 200ms, border-color 200ms; } .bp-toc a:hover, .bp-toc a.is-on { color: var(--ink); border-left-color: var(--pd-c); } .bp-prose > p:first-child { color: var(--ink); font-size: 1.1875rem; line-height: 1.65; } .bp-prose h2 { margin-top: 2.3em; color: var(--ink); font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; scroll-margin-top: calc(var(--header-h) + 24px); } .bp-prose h3 { color: var(--ink); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; } .bp-prose a { color: var(--ink); text-decoration-color: var(--pd-c); text-decoration-thickness: 1px; text-underline-offset: .2em; } .bp-prose a:hover { text-decoration-thickness: 2px; } .bp-prose ul li::marker { color: var(--pd-c); } .bp-prose blockquote, .bp-prose .wp-block-quote { padding-left: 24px; border-left: 2px solid var(--pd-c); color: var(--ink); font-size: 1.25rem; line-height: 1.5; } .bp-more { padding: clamp(72px, 8vw, 120px) 0; background: var(--pd-plate); } .bp-more__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 24px; } .bp-more__head .pd-k { grid-column: 1 / -1; } .bp-more__head .pd-h2 { margin-bottom: 0; } .bp-more .bp-grid { margin-top: 40px; padding-top: 0; border-top: 0; } .bp-nl { padding-top: clamp(56px, 6vw, 88px); } @media (max-width: 1099px) { .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bp-main__grid--toc .bp-toc { grid-column: 1 / -1; position: static; margin-bottom: 40px; } .bp-prose, .bp-main__grid--toc .bp-prose { grid-column: 1 / -1; } } @media (max-width: 899px) { .bp-card--lead .bp-card__link { display: block; } .bp-card--lead .bp-card__body { margin-top: 22px; } } @media (max-width: 699px) { .bp-grid { grid-template-columns: 1fr; } .bp-more__head { grid-template-columns: 1fr; } .bp-more__all { justify-self: start; margin-top: 16px; } .bp-prose { font-size: 1rem; } } /* Blogvorschau auf der Startseite (18.10.2026): Kopf mit Link, Leitbeitrag links, kompakte Einträge rechts */ .bp-home { padding: clamp(80px, 9vw, 140px) 0; border-top: 1px solid var(--line); } .bp-home__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: clamp(40px, 4.5vw, 72px); } .bp-home__title { grid-column: 1 / span 7; } .bp-home__title .pd-h2 { max-width: 18ch; margin-bottom: 0; } .bp-home__side { grid-column: 9 / -1; } .bp-home__side p { max-width: 40ch; margin: 0 0 20px; color: var(--ink-2); line-height: 1.6; } .bp-home__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } .bp-home__grid > .bp-card { grid-column: 1 / span 7; } .bp-home__grid > .bp-card .bp-pic { aspect-ratio: 16 / 10; } .bp-home__grid > .bp-card .bp-card__t { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.1; letter-spacing: -0.03em; } .bp-home__list { grid-column: 9 / -1; margin: 0; padding: 0; list-style: none; } .bp-home__list li + li { border-top: 1px solid var(--line); } .bp-mini { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px 0; color: inherit; text-decoration: none; } .bp-home__list li:first-child .bp-mini { padding-top: 0; } .bp-mini:hover { text-decoration: none; } .bp-mini .bp-pic { aspect-ratio: 1; } .bp-mini .bp-pic__ph span { display: none; } .bp-mini:hover .bp-pic__img { transform: scale(1.05); } .bp-mini__t { margin: 8px 0 0; color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; } .bp-mini:hover .bp-mini__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; } @media (max-width: 899px) { .bp-home__title, .bp-home__side, .bp-home__grid > .bp-card, .bp-home__list { grid-column: 1 / -1; } .bp-home__side { margin-top: 20px; } .bp-home__list { margin-top: 36px; } .bp-mini { grid-template-columns: 92px minmax(0, 1fr); } } /* Startseite: Bild im Rechenbeispiel (bis an den Rand) ragte 26 px über den rechten Rand und erzeugte Querscrollen, am Abschnitt abschneiden (18.10.2026) */ .nums { overflow-x: clip; } /* Newsletter kompakt in der Fußzeile, rechte Spalte (18.10.2026) */ .nl-foot { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--panel-line); } .nl-foot__text { margin: 0 0 14px; color: var(--panel-muted); font-size: .875rem; line-height: 1.5; } .nl-foot .nl-form { display: grid; gap: 12px; } .nl-foot .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nl-foot .nl-form .field input[type="email"] { min-height: 46px; padding: 11px 12px; background: transparent; color: var(--panel-ink); border-color: var(--panel-line); font-size: .9375rem; } .nl-foot .nl-form .field input[type="email"]:focus { border-color: var(--panel-ink); outline: none; } .nl-foot .nl-foot__btn { display: inline-flex; align-items: center; justify-content: center; width: 50px; min-height: 46px; padding: 0; border: 0; background: var(--panel-ink); color: var(--panel); } .nl-foot .check { color: var(--panel-muted); font-size: .8125rem; line-height: 1.45; } .nl-foot .check a { color: var(--panel-ink); text-decoration: underline; } .nl-foot .form__status { color: var(--panel-ink); } .nl-foot .check input { accent-color: var(--panel-ink); } .nl-foot .nl-foot__btn::after, .nl-foot .nl-foot__btn::before { display: none; } /* nur ein Pfeil im Knopf */ /* Beitrag mit Vollbild (18.10.2026): Foto bildschirmfüllend, Kennzeile und Headline unten links auf dem Bild */ .bp-cover { position: relative; display: flex; align-items: flex-end; min-height: max(520px, calc(100svh - var(--header-h))); overflow: hidden; background: #16181B; color: #fff; } .bp-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .bp-cover__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 13, 15, .78) 0%, rgba(12, 13, 15, .42) 34%, rgba(12, 13, 15, 0) 62%), linear-gradient(90deg, rgba(12, 13, 15, .35) 0%, rgba(12, 13, 15, 0) 55%); } .bp-cover__text { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(40px, 7vh, 88px); } .bp-cover .pd-k { color: rgba(255, 255, 255, .85); } .bp-cover .pd-sq { background: var(--pd-a); } .bp-cover__t { max-width: 20ch; margin: 18px 0 0; color: #fff; font-size: clamp(2.4rem, 1.2rem + 4vw, 5.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); } .bp-cover + .breadcrumbs, .bp-cover + nav { margin-top: 0; } .bp-intro { padding: clamp(12px, 2vw, 24px) 0 clamp(48px, 6vw, 88px); } .bp-intro .bp-head__lead { margin-top: 8px; } /* Eckdaten getrennt durch senkrechte Haarlinien */ .bp-facts { gap: 14px 0; } .bp-facts > div { padding: 0 clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--line-2); } .bp-facts > div:first-child { padding-left: 0; border-left: 0; } @media (max-width: 699px) { .bp-cover { min-height: 72svh; } .bp-facts > div { padding: 0 16px; } .bp-facts > div:nth-child(3) { padding-left: 0; border-left: 0; } .bp-facts { display: grid; grid-template-columns: 1fr 1fr; } .bp-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; } .bp-facts > div:nth-child(even) { border-left: 1px solid var(--line-2); } } /* Eckdaten auf dem Vollbild (18.10.2026): weiß, Haarlinien hell */ .bp-facts--cover { margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top-color: rgba(255, 255, 255, .28); } .bp-facts--cover > div { border-left-color: rgba(255, 255, 255, .28); } .bp-facts--cover dt { color: rgba(255, 255, 255, .7); } .bp-facts--cover dd { color: #fff; } .bp-cover .bp-cover__shade { background: linear-gradient(0deg, rgba(12, 13, 15, .86) 0%, rgba(12, 13, 15, .5) 38%, rgba(12, 13, 15, 0) 66%), linear-gradient(90deg, rgba(12, 13, 15, .35) 0%, rgba(12, 13, 15, 0) 55%); } @media (max-width: 699px) { .bp-facts--cover > div:nth-child(even) { border-left-color: rgba(255, 255, 255, .28); } .bp-cover { min-height: 86svh; } } /* Menü neu (18.10.2026, kein Vollbild): Panel unter „Menü“, zwei Spalten im Stil der Referenzseiten */ .mobile-nav { width: min(820px, calc(100% - 2 * var(--gx))); --pd-c: #B0782A; } .mobile-nav__panel { padding: 0; border-color: var(--line); box-shadow: 0 30px 60px -30px rgba(20, 20, 22, .25); } .mobile-nav__edge { display: none; } .mobile-nav__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; } .mobile-nav__nav { padding: clamp(18px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px); } .mobile-nav__list, .mobile-nav__list:has(li:nth-child(7)) { display: block; } .mobile-nav__list a { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 14px 0; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; } .mobile-nav__list a::before { content: ""; width: 8px; height: 8px; min-width: 0; margin: 0; transform: translateY(-.2em); background: var(--pd-c); opacity: 0; transition: opacity 200ms; align-self: center; } .mobile-nav__list a:hover, .mobile-nav__list a:focus-visible { padding-left: 0; } .mobile-nav__list a:hover::before, .mobile-nav__list a:focus-visible::before, .mobile-nav__list .current-menu-item > a::before, .mobile-nav__list .current-page-ancestor > a::before, .mobile-nav__list .current_page_parent > a::before { opacity: 1; color: inherit; } .mobile-nav__list .mn-t { grid-column: 2; } .mobile-nav__list .mn-d { grid-column: 2; margin-top: 5px; color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; } .mobile-nav__list a:hover .mn-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; } .mobile-nav__side { display: grid; align-content: start; gap: 0; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px); background: color-mix(in srgb, var(--pd-c) 7%, var(--paper)); border-left: 1px solid var(--line); opacity: 0; transition: opacity 500ms var(--ease-arch) 200ms; } .mobile-nav.is-open .mobile-nav__side { opacity: 1; } .mobile-nav__k { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .mobile-nav__k .pd-sq { width: 7px; height: 7px; background: var(--pd-c); } .mobile-nav__svc { display: grid; gap: 9px; margin: 0 0 28px; padding: 0; list-style: none; } .mobile-nav__svc a, .mobile-nav__mail a { color: var(--ink); font-size: .9375rem; text-decoration: none; } .mobile-nav__svc a:hover, .mobile-nav__mail a:hover { text-decoration: underline; text-underline-offset: .18em; } .mobile-nav__mail { margin: 0 0 22px; } .mobile-nav__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; background: var(--ink); color: var(--paper); font-size: .9375rem; text-decoration: none; } .mobile-nav__btn:hover { background: var(--pd-c); color: #fff; } .mobile-nav__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; } .mobile-nav__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 14px clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--line); } @media (max-width: 699px) { .mobile-nav__body { grid-template-columns: 1fr; } .mobile-nav__side { border-left: 0; border-top: 1px solid var(--line); } .mobile-nav__list a { padding: 11px 0; } } /* Karte rechts im Menü (18.10.2026) */ .mobile-nav__card { display: grid; gap: 0; margin: 0 0 26px; color: var(--ink); text-decoration: none; } .mobile-nav__card-pic { display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 14px; background: var(--pd-plate, var(--paper-2)); } .mobile-nav__card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); } .mobile-nav__card:hover .mobile-nav__card-pic img { transform: scale(1.04); } .mobile-nav__card .mobile-nav__k { margin-bottom: 8px; } .mobile-nav__card-t { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; } .mobile-nav__card-go { margin-top: 10px; color: var(--ink-2); font-size: .8125rem; } .mobile-nav__card:hover .mobile-nav__card-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; } @media (max-width: 699px) { .mobile-nav__card { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; } .mobile-nav__card-pic { grid-row: 1 / span 3; aspect-ratio: 1; margin: 0; } .mobile-nav__card-go { display: none; } } /* Leistungen-Übersicht (18.10.2026): große Zeilen mit Projektbild, abwechselnd links und rechts */ .pd-svcs { padding: clamp(72px, 8vw, 128px) 0; } .pd-svcs__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 80px); } .pd-svcs__head p:not(.pd-k) { max-width: 56ch; color: var(--ink-2); line-height: 1.6; } .pd-svcs__list { display: grid; gap: clamp(56px, 7vw, 112px); margin: 0; padding: 0; list-style: none; } .pd-svc__link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; color: inherit; text-decoration: none; } .pd-svc__link:hover { text-decoration: none; } .pd-svc__pic { position: relative; grid-column: 1 / span 7; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--pd-plate); } .pd-svc__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms cubic-bezier(.2, .7, .2, 1); } .pd-svc__link:hover .pd-svc__pic img { transform: scale(1.03); } .pd-svc__cap { position: absolute; left: 14px; bottom: 12px; padding: 5px 9px; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink-2); font-size: .6875rem; letter-spacing: .04em; } .pd-svc__note { position: absolute; right: 12px; top: 12px; } .pd-svc__body { grid-column: 9 / -1; display: grid; justify-items: start; } .pd-svc--r .pd-svc__pic { grid-column: 6 / -1; grid-row: 1; } .pd-svc--r .pd-svc__body { grid-column: 1 / span 4; grid-row: 1; } .pd-svc__num { color: var(--pd-c); font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; } .pd-svc__t { margin: 12px 0 0; color: var(--ink); font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; } .pd-svc__tx { margin-top: 16px; color: var(--ink-2); font-size: 1rem; line-height: 1.6; } .pd-svc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .pd-svc__tags span { padding: 5px 10px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: .75rem; } .pd-svc__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: .9375rem; font-weight: 500; } .pd-svc__go::after { content: "→"; transition: transform 300ms; } .pd-svc__link:hover .pd-svc__go::after { transform: translateX(4px); } .pd-svc__link:hover .pd-svc__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; } @media (max-width: 899px) { .pd-svc__pic, .pd-svc--r .pd-svc__pic, .pd-svc__body, .pd-svc--r .pd-svc__body { grid-column: 1 / -1; grid-row: auto; } .pd-svc__body { margin-top: 22px; } } /* Leistungen als Karten (18.10.2026): Raster 3/2/1, Symbol, Titel, Text, „Mehr erfahren“; letzte Karte dunkel als Einladung */ .pd-lcards { padding: clamp(72px, 8vw, 128px) 0 clamp(40px, 5vw, 72px); } .pd-lcards__head { max-width: 820px; margin-bottom: clamp(36px, 4vw, 60px); } .pd-lcards__head .pd-h2 { max-width: 20ch; } .pd-lcards__head p:not(.pd-k) { max-width: 56ch; color: var(--ink-2); line-height: 1.6; } .pd-lcards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; } .pd-lcards__grid > li { display: flex; } .pd-lcard { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(24px, 2.6vw, 36px); background: var(--pd-plate); border: 1px solid transparent; color: inherit; text-decoration: none; transition: border-color 250ms, transform 400ms cubic-bezier(.2, .7, .2, 1); } .pd-lcard:hover { border-color: var(--line-2); transform: translateY(-3px); text-decoration: none; } .pd-lcard .pd-ico, .pd-lcard > svg { width: 28px; height: 28px; color: var(--pd-c); } .pd-lcard__t { margin: 22px 0 0; color: var(--ink); font-size: clamp(1.3rem, 1.05rem + .6vw, 1.6rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; } .pd-lcard__tx { margin-top: 12px; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } .pd-lcard__go { display: inline-flex; gap: 8px; margin-top: auto; padding-top: 24px; color: var(--ink); font-size: .875rem; font-weight: 500; } .pd-lcard__go::after { content: "→"; transition: transform 300ms; } .pd-lcard:hover .pd-lcard__go::after { transform: translateX(4px); } .pd-lcard--cta { background: var(--ink); color: var(--paper); } .pd-lcard--cta .pd-lcard__t, .pd-lcard--cta .pd-lcard__go { color: var(--paper); } .pd-lcard--cta .pd-lcard__tx { color: color-mix(in srgb, var(--paper) 75%, transparent); } @media (max-width: 1099px) { .pd-lcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 699px) { .pd-lcards__grid { grid-template-columns: 1fr; } } /* Hinweisbox (Förderung) */ .pd-boxw { padding: clamp(24px, 3vw, 48px) 0 clamp(72px, 8vw, 120px); } .pd-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px clamp(28px, 4vw, 64px); align-items: start; padding: clamp(28px, 3.4vw, 52px); border: 1px solid var(--line-2); } .pd-box .pd-h2 { max-width: 18ch; } .pd-box__main p:not(.pd-k):not(.pd-box__note) { max-width: 60ch; color: var(--ink-2); line-height: 1.65; } .pd-box__note { max-width: 60ch; margin-top: 14px; color: var(--muted); font-size: .8125rem; line-height: 1.5; } .pd-box__btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 15px 22px; border: 1px solid var(--ink); color: var(--ink); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .pd-box__btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; } @media (max-width: 899px) { .pd-box { grid-template-columns: 1fr; } } /* Bild volle Breite zwischen Abschnitten (18.10.2026) */ .pd-bild { position: relative; margin: 0; overflow: hidden; height: min(78svh, 56.25vw); min-height: 320px; background: var(--pd-plate); } .pd-bild__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } .pd-bild > .pd-bild__note { position: absolute; left: max(var(--gx), calc((100% - var(--max)) / 2 + var(--gx))); bottom: 18px; } /* Textfeld auf dem Vollbreitenbild (18.10.2026): helles Rechteck unten rechts */ .pd-bild__box { position: absolute; right: max(var(--gx), calc((100% - var(--max)) / 2 + var(--gx))); bottom: clamp(24px, 4vw, 56px); width: min(440px, 40%); margin: 0; padding: clamp(22px, 2.4vw, 34px); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .pd-bild__t { margin: 12px 0 0; color: var(--ink); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; } .pd-bild__tx { margin: 14px 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } @media (max-width: 899px) { .pd-bild { height: auto; min-height: 0; overflow: visible; } .pd-bild__img { height: auto; aspect-ratio: 16 / 9; } .pd-bild__box { position: relative; right: auto; bottom: auto; width: auto; margin: -36px var(--gx) 0; background: var(--paper); } .pd-bild > .pd-bild__note { left: 12px; bottom: auto; top: 12px; } } /* Textfeld auf dem Bild blendet verzögert ein, wenn das Bild im Blick ist (18.10.2026) */ @media (prefers-reduced-motion: no-preference) { .js .pd-bild__box { opacity: 0; transform: translateY(24px); transition: opacity 900ms cubic-bezier(.2, .7, .2, 1) 900ms, transform 1100ms cubic-bezier(.2, .7, .2, 1) 900ms; } .js .pd-bild.is-on .pd-bild__box { opacity: 1; transform: none; } } html.a11y-calm .pd-bild__box { opacity: 1 !important; transform: none !important; transition: none !important; } /* Karten und Kacheln nacheinander langsam einblenden (18.10.2026) */ @media (prefers-reduced-motion: no-preference) { .js [data-stagger] > li { opacity: 0; transform: translateY(28px); transition: opacity 1000ms cubic-bezier(.2, .7, .2, 1), transform 1200ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(min(var(--i, 0), 8) * 200ms); } .js [data-stagger].is-on > li { opacity: 1; transform: none; } } html.a11y-calm [data-stagger] > li { opacity: 1 !important; transform: none !important; transition: none !important; } /* Einzelleistungen (18.10.2026): Karten ohne Link, Schritte, Ergebnisliste */ .pd-kgrid--dark { background: var(--panel, #12151A); color: #EEF1EF; } .pd-kgrid--dark .pd-h2 { color: #F4F7F6; } .pd-kgrid--dark .pd-k { color: rgba(238, 241, 239, .65); } .pd-kgrid--dark .pd-lcards__head p:not(.pd-k) { color: rgba(238, 241, 239, .78); } .pd-kgrid--dark .pd-lcard { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); } .pd-kgrid--dark .pd-lcard__t { color: #F4F7F6; } .pd-kgrid--dark .pd-lcard__tx { color: rgba(238, 241, 239, .75); } .pd-kgrid--dark .pd-lcard svg { color: var(--pd-a); } .pd-kgrid { padding-bottom: clamp(72px, 8vw, 128px); } .pd-lcard--static:hover { transform: none; border-color: transparent; } .pd-kgrid__grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-schw { padding: clamp(72px, 8vw, 128px) 0; border-top: 1px solid var(--line); } .pd-sch__list { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 var(--gap); margin: 0; padding: 0; list-style: none; counter-reset: none; } .pd-sch { position: relative; padding-top: 28px; border-top: 2px solid var(--line-2); } .pd-sch::before { content: ""; position: absolute; left: 0; top: -2px; width: 44px; height: 2px; background: var(--pd-c); } .pd-sch__n { color: var(--pd-c); font-size: clamp(2rem, 1.4rem + 1.5vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; } .pd-sch__t { margin: 18px 0 0; color: var(--ink); font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .pd-sch__tx { margin: 10px 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } .pd-sch__out { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-size: .875rem; line-height: 1.45; } .pd-sch__out span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .pd-box__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 22px 0 0; padding: 0; list-style: none; } .pd-box__list li { position: relative; padding-left: 28px; color: var(--ink); font-size: .9375rem; line-height: 1.5; } .pd-box__list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 9px; border-left: 2px solid var(--pd-c); border-bottom: 2px solid var(--pd-c); transform: rotate(-45deg); transform-origin: 30% 60%; } @media (max-width: 1099px) { .pd-sch__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); } } @media (max-width: 699px) { .pd-sch__list, .pd-box__list, .pd-kgrid__grid:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; } } /* Genau vier Kacheln: zwei Spalten statt drei, damit keine allein steht (18.10.2026, Leistungsseiten) */ @media (min-width: 700px) { .pd-tiles__grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Referenzen mit Gerätebildern (18.10.2026) */ .pd-refs { padding: clamp(72px, 8vw, 128px) 0; border-top: 1px solid var(--line); } .pd-refs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); } .pd-refs__head .pd-h2 { margin-bottom: 0; } .pd-refs__grid { display: grid; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; } .pd-ref { display: block; color: inherit; text-decoration: none; } .pd-ref:hover { text-decoration: none; } .pd-ref__stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 10; padding: 6% 7% 9%; background: var(--pd-plate) center / cover no-repeat; } .pd-ref__dev { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(20, 20, 22, .18)); transition: transform 900ms cubic-bezier(.2, .7, .2, 1); } .pd-ref__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pd-ref:hover .pd-ref__dev { transform: translateY(-6px) scale(1.02); } .pd-ref__stage > .pd-ref__note { position: absolute; left: 12px; bottom: 12px; } .pd-ref__body { display: block; margin-top: 20px; } .pd-ref__k { color: var(--muted); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; } .pd-ref__t { margin: 10px 0 0; color: var(--ink); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; } .pd-ref__tx { display: block; margin-top: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } .pd-ref__go { display: inline-flex; gap: 8px; margin-top: 18px; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: .9375rem; font-weight: 500; } .pd-ref__go::after { content: "→"; transition: transform 300ms; } .pd-ref:hover .pd-ref__go::after { transform: translateX(4px); } @media (max-width: 899px) { .pd-refs__grid { grid-template-columns: 1fr; } .pd-refs__head { flex-direction: column; align-items: flex-start; } } /* Fragen nach Themen (18.10.2026) */ .pd-faq { padding: clamp(72px, 8vw, 128px) 0; } .pd-faq__head { margin-bottom: clamp(36px, 4vw, 64px); } .pd-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } .pd-faq__nav { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 28px); } .pd-faq__nav ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .pd-faq__nav a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: var(--pd-plate); border: 1px solid transparent; color: var(--ink); font-size: .9375rem; text-decoration: none; transition: border-color 200ms, background 200ms; } .pd-faq__nav a:hover, .pd-faq__nav a.is-on { border-color: var(--line-2); background: var(--paper); } .pd-faq__nav a.is-on { border-color: var(--pd-c); } .pd-faq__nav svg { width: 20px; height: 20px; color: var(--pd-c); } .pd-faq__nav .num { color: var(--muted); font-size: .75rem; } .pd-faq__main { grid-column: 5 / -1; display: grid; gap: clamp(48px, 5vw, 80px); } .pd-faq__group { scroll-margin-top: calc(var(--header-h) + 24px); } .pd-faq__gt { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--ink); font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); font-weight: 600; letter-spacing: -0.03em; } .pd-faq__gt svg { width: 26px; height: 26px; color: var(--pd-c); } .pd-faq .faq { border-top: 2px solid var(--ink); } .pd-faq .faq summary { font-weight: 500; } @media (max-width: 1099px) { .pd-faq__nav { grid-column: 1 / -1; position: static; margin-bottom: 36px; } .pd-faq__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-faq__main { grid-column: 1 / -1; } } @media (max-width: 599px) { .pd-faq__nav ul { grid-template-columns: 1fr; } } /* Referenzkarten ohne Hintergrund, Geräte kleiner (18.10.2026, Wunsch User) */ .pd-ref__stage { background: none !important; padding: 9% 16% 11%; } .pd-ref--photo .pd-ref__stage { padding: 0; } .pd-ref__dev { filter: none; } /* nur der Schatten aus dem Bild, kein nachträglicher (Wunsch User 18.10.2026) */ .pd-ref__stage > .pd-ref__note { left: 0; bottom: 0; } /* Kundeninterview (18.10.2026) */ .bp--iv .bp-intro .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; } .iv-person { display: flex; align-items: center; gap: 16px; padding: 16px 22px 16px 16px; background: var(--pd-plate); } .iv-person__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .iv-person p { margin: 0; line-height: 1.35; } .iv-person b { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; } .iv-person span { color: var(--muted); font-size: .8125rem; } .bp--iv .bp-prose { grid-column: 3 / span 8; } .iv .is-style-lead, .iv > p:first-child { color: var(--ink); font-size: 1.25rem; line-height: 1.6; } .iv h2.iv-q { margin-top: 2.6em; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.25; letter-spacing: -0.02em; } .iv h2.iv-q::before, .iv h2.iv-q + p::before { display: block; margin-bottom: 10px; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .iv h2.iv-q::before { content: var(--iv-q); color: var(--pd-c); } .iv h2.iv-q + p { padding-left: 22px; border-left: 2px solid var(--pd-c); } .iv h2.iv-q + p::before { content: var(--iv-a); color: var(--muted); } .iv-pull { margin: 2.6em 0; padding: 0; border: 0; } .iv-pull p { margin: 0; color: var(--ink); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; } .iv-pull p::before { content: "„"; } .iv-pull p::after { content: "“"; } .iv-pull cite { display: block; margin-top: 16px; color: var(--muted); font-size: .875rem; font-style: normal; } .bp-ivcase { padding: clamp(64px, 7vw, 112px) 0; border-top: 1px solid var(--line); } .bp-ivcase__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px var(--gap); align-items: center; } @media (max-width: 899px) { .bp--iv .bp-intro .wrap, .bp-ivcase__grid { grid-template-columns: 1fr; } .bp--iv .bp-prose { grid-column: 1 / -1; } } /* Referenzkarten: keine Hover-Bewegung am Gerät, nur Titel unterstreichen (18.10.2026, Wunsch User) */ .pd-ref__dev { transition: none; } .pd-ref:hover .pd-ref__dev { transform: none; } .pd-ref:hover .pd-ref__go::after { transform: none; } .pd-ref:hover .pd-ref__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; } /* Referenzkarten ganz ohne Hover-Effekt (18.10.2026, Wunsch User) */ .pd-ref, .pd-ref:hover, .pd-ref:hover * { text-decoration: none !important; } .pd-ref__go::after { transition: none; } .pd-ref__stage { padding: 12% 18% 10%; } /* Referenzbereich mit eigener Fläche (18.10.2026, Wunsch User) */ .pd-refs { background: var(--pd-plate); border-top: 0; } .pd-refs .pd-ref__note { background: var(--paper); } /* Referenzbereich hell weiß, deutlich abgesetzt (dunkel: Kartenfläche) */ .pd-refs { background: #FFFFFF; } :root[data-theme="dark"] .pd-refs { background: var(--pd-plate); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-refs { background: var(--pd-plate); } } /* Leistungsseiten Ausbau (18.10.2026): Schritte mit Einleitung, Hinweis, Siegeln, Ergebnis; zwei Seiten; Gruppen mit Haken */ .pd-schw--plate { background: var(--pd-plate); border-top: 0; } .pd-lcards__head p:not(.pd-k) { max-width: 62ch; } .pd-sch__note { max-width: 70ch; margin: clamp(32px, 4vw, 48px) 0 0; padding: 18px 22px; border-left: 2px solid var(--pd-c); background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink-2); line-height: 1.6; } .pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; } .pd-badges li { padding: 7px 12px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: .8125rem; } .pd-res { max-width: 70ch; margin: clamp(28px, 3vw, 40px) 0 0; color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.55; } .pd-res::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; background: var(--pd-c); vertical-align: 2px; } .pd-zwei, .pd-gruppen { padding: clamp(72px, 8vw, 128px) 0; border-top: 1px solid var(--line); } .pd-zw__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .pd-zw__col { padding: clamp(24px, 3vw, 40px); background: var(--pd-plate); } .pd-zw__t { margin: 0 0 22px; color: var(--ink); font-size: clamp(1.3rem, 1.05rem + .6vw, 1.6rem); font-weight: 600; letter-spacing: -0.025em; } .pd-zw__col ol { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; } .pd-zw__col li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; } .pd-zw__n { color: var(--pd-c); font-family: var(--mono); font-size: .8125rem; padding-top: 2px; } .pd-zw__col b { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; } .pd-zw__col li p { margin: 6px 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } .pd-zw__col .pd-res { font-size: 1rem; } .pd-zwei--vs .pd-zw__col--a { background: transparent; border: 1px solid var(--line-2); } .pd-zwei--vs .pd-zw__col--a b { color: var(--ink-2); font-weight: 450; } .pd-zwei--vs .pd-zw__col--b { background: var(--ink); } .pd-zwei--vs .pd-zw__col--b .pd-zw__t, .pd-zwei--vs .pd-zw__col--b b { color: var(--paper); } .pd-zwei--vs .pd-zw__col--b .pd-zw__n { color: var(--pd-a); } .pd-gruppen__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; } .pd-grp { padding: clamp(22px, 2.4vw, 30px); background: var(--pd-plate); } .pd-grp > svg { width: 26px; height: 26px; color: var(--pd-c); } .pd-grp__t { margin: 16px 0 14px; color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; } .pd-grp ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .pd-grp ul li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: .875rem; line-height: 1.5; } .pd-grp ul li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 5px; border-left: 1.5px solid var(--pd-c); border-bottom: 1.5px solid var(--pd-c); transform: rotate(-45deg); } @media (max-width: 1099px) { .pd-gruppen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 699px) { .pd-zw__grid, .pd-gruppen__grid { grid-template-columns: 1fr; } } /* Vollbild mit handgezeichneter Skizze (18.10.2026, Strategie): liegt ohne Fläche direkt auf dem Hintergrund */ .pd-full--skizze .pd-full__skizze { position: absolute; z-index: 1; right: 2.5cqw; top: 50%; width: min(56cqw, 118cqh); transform: translateY(-46%); } /* weiter rechts, mehr Luft zum Text (18.10.2026) */ .pd-full--skizze .pd-full__skizze img { position: static; display: block; width: 100%; height: auto; object-fit: initial; filter: none; } @media (max-width: 1099px) { .pd-full--skizze .pd-full__stage { aspect-ratio: auto; } .pd-full--skizze .pd-full__pic { position: absolute; inset: 0; } .pd-full--skizze .pd-full__skizze { position: relative; right: auto; top: auto; width: auto; max-width: 560px; margin: 0 auto; padding: 32px var(--gx) 40px; transform: none; } } /* Referenzkarten: Geräte 10 % größer und Notebooks auf einer Höhe (18.10.2026, Wunsch User) */ .pd-ref__stage { padding: 9.5% 14.8% 8.5%; overflow: visible; } .pd-ref--photo .pd-ref__stage { padding: 0; overflow: hidden; } .pd-ref__dev { transform: translateY(var(--dy, 0%)); } /* Referenzkarten: Glanz beim Hover (18.10.2026, Wunsch User). Versatz sitzt am Rahmen, damit nichts springt */ .pd-ref__dw { position: relative; display: block; width: 100%; height: 100%; transform: translateY(var(--dy, 0%)); } .pd-ref__dev, .pd-ref:hover .pd-ref__dev { transform: none; } .pd-ref__glanz { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; background: linear-gradient(112deg, transparent 43%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .12) 54%, transparent 57%) 100% 0 / 260% 100% no-repeat; } .pd-ref:hover .pd-ref__glanz, .pd-ref:focus-visible .pd-ref__glanz { background-position: 0% 0; transition: background-position 1400ms cubic-bezier(.45, .05, .4, 1); } @media (prefers-reduced-motion: reduce) { .pd-ref__glanz { display: none; } } /* Referenzkarten browserfest (18.10.2026): Bild über die Kartenbreite, MacBook-Unterkante auf fester Linie (Safari löste height:100% im Flex-Rahmen anders auf) */ .pd-ref__dw { position: absolute; left: 14.8%; right: 14.8%; top: 75%; width: auto; height: auto; transform: translateY(calc(var(--b, .9) * -100%)); } .pd-ref__dw .pd-ref__dev { width: 100%; height: auto; object-fit: fill; } .pd-ref__glanz { background-image: linear-gradient(112deg, transparent 44%, rgba(255, 255, 255, .06) 47%, rgba(255, 255, 255, .24) 50%, rgba(255, 255, 255, .06) 53%, transparent 56%); } /* Vollbild: Gerät je Seite kleiner/höher (Meta ibx_pd_full_dev_fit, 18.10.2026), nur wo gesetzt */ .pd-full--ebenen .pd-full__dev--fit { bottom: calc(15cqh + var(--dev-up, 0) * 1cqh); width: min(calc(66.5cqw * var(--dev-f, 1) * var(--dev-s, 1)), calc(128cqh * var(--dev-f, 1) * var(--dev-s, 1))); } @media (max-width: 1099px) { .pd-full--ebenen .pd-full__dev--fit { bottom: calc(13% + var(--dev-up, 0) * 1%); width: calc(66.5% * var(--dev-f, 1) * var(--dev-s, 1)); } } /* Kundenstimme dezent (pd-ergebnis quote_tone=dezent, 18.10.2026, corelaw): ohne Fläche, Haarlinie, Lesegröße */ .pd-quote.pd-quote--dezent { grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 32px 0 0; background: none; border-top: 1px solid var(--line, rgba(0, 0, 0, .12)); } .pd-quote--dezent .pd-quote__pic { grid-row: 1 / span 2; margin-top: 4px; } .pd-quote--dezent blockquote { align-self: start; } .pd-quote--dezent blockquote p { max-width: 64ch; color: var(--ink-2); font-weight: 400; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; letter-spacing: 0; } .pd-quote--dezent figcaption { margin-top: 14px; } @media (max-width: 899px) { .pd-quote.pd-quote--dezent { grid-template-columns: 52px 1fr; column-gap: 14px; padding: 24px 0 0; } .pd-quote--dezent .pd-quote__pic { grid-row: 1; grid-column: 1; margin-top: 0; } .pd-quote--dezent figcaption { grid-row: 1; grid-column: 2; align-self: center; margin-top: 0; } .pd-quote--dezent blockquote { grid-row: 2; grid-column: 1 / -1; margin-top: 16px; } } /* Fallstudie: Ergebnis weiß, Nächstes Projekt auf der Projektfläche, damit sich beide abheben (18.10.2026, Wunsch User) */ .pd .pd-result { background: #FFFFFF; } .pd .cs2-next { background: var(--pd-plate); border-top: 0; } :root[data-theme="dark"] .pd .pd-result { background: var(--pd-field); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd .pd-result { background: var(--pd-field); } } /* Fragenformular im Vollbild von „Fragen und Antworten“ (18.10.2026): helle Karte wie der Kalender auf Kontakt */ .pd-full__frage .frage__t { margin: 6px 0 8px; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; } .pd-full__frage .frage__x { margin: 0 0 18px; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } .pd-full__frage .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .pd-full__frage .form > .form__status, .pd-full__frage .field--full, .pd-full__frage .form__foot { grid-column: 1 / -1; } .pd-full__frage textarea { min-height: 110px; } .pd-full__frage .form__foot { display: flex; justify-content: flex-end; } .pd-full__frage .check span { font-size: .8125rem; line-height: 1.5; } @media (max-width: 560px) { .pd-full__frage .form { grid-template-columns: 1fr; } } /* Demo-Systeme als Karussell (18.10.2026): Karten wie die Referenzkarten, drei sichtbar, Pfeile oben rechts */ .pd-demos { padding: clamp(72px, 8vw, 128px) 0; background: #FFFFFF; } :root[data-theme="dark"] .pd-demos { background: var(--pd-plate); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-demos { background: var(--pd-plate); } } .pd-demos__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .pd-demos__x { max-width: 58ch; margin: 16px 0 0; color: var(--ink-2); line-height: 1.6; } .pd-demos__more { margin: 18px 0 0; } .pd-demos__list { position: relative; margin-top: clamp(28px, 3vw, 44px); padding-bottom: 8px; } /* Bezugsrahmen, sonst ragt der Screenreader-Hinweis aus dem Karussell und verbreitert die Seite */ .pd-demo { flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3); scroll-snap-align: start; } .pd-demo .pd-ref { height: 100%; } .pd-demos__note { margin: 22px 0 0; max-width: 72ch; color: var(--muted); font-size: .8125rem; line-height: 1.55; } @media (max-width: 1099px) { .pd-demo { flex-basis: calc((100% - clamp(16px, 2vw, 28px)) / 2); } } @media (max-width: 640px) { .pd-demo { flex-basis: 86%; } .pd-demos__head { align-items: flex-start; flex-direction: column; } } /* Hinweisbox als Farbfläche (Förderung, 18.10.2026, Wunsch User): warm getönt aus der Seitenfarbe, ohne Rahmen, Schaltfläche gefüllt */ .pd-box.pd-box--farbe { border: 0; background: color-mix(in srgb, var(--pd-c, #B0782A) 16%, #FBFAF7); } .pd-box--farbe .pd-box__btn { background: var(--ink); border-color: var(--ink); color: var(--paper); } .pd-box--farbe .pd-box__btn:hover { background: transparent; color: var(--ink); } :root[data-theme="dark"] .pd-box.pd-box--farbe { background: color-mix(in srgb, var(--pd-c, #B0782A) 22%, #17191C); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-box.pd-box--farbe { background: color-mix(in srgb, var(--pd-c, #B0782A) 22%, #17191C); } } /* Kopf-Slider auf flachen Bildschirmen (MacBook, 18.10.2026, Wunsch User): Bildausschnitt nach unten, damit die Geräte über der Bildzeile (Nummer, Projekt, Fallstudie) stehen. Planlinien und Bot folgen, sie lesen object-position bzw. stehen in .hs__cover. */ @media (min-width: 900px) and (min-aspect-ratio: 16/10) { .planhero--slider .hs__pic img { object-position: 60% 75%; } .hs__cover { top: calc((100cqh - max(62.5cqw, 100cqh)) * .75); } } @media (min-width: 900px) and (min-aspect-ratio: 17/10) { .planhero--slider .hs__pic img { object-position: 60% 100%; } .hs__cover { top: calc(100cqh - max(62.5cqw, 100cqh)); } } /* Gastro-Slide auf flachen Bildschirmen: Figur etwas kleiner und unten weich ausgeblendet, damit die Bildzeile frei bleibt; Sticker wandert mit dem Bildausschnitt, sonst wird er oben angeschnitten (18.10.2026). */ @media (min-width: 900px) and (min-aspect-ratio: 16/10) { .hs__bot { height: 76%; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 90%); mask-image: linear-gradient(to bottom, #000 70%, transparent 90%); } .hs__fig .pd-badge.hs__badge { top: calc(25% + (max(62.5cqw, 100cqh) - 100cqh) * .25); } } @media (min-width: 900px) and (min-aspect-ratio: 17/10) { .hs__fig .pd-badge.hs__badge { top: calc(25% + (max(62.5cqw, 100cqh) - 100cqh) * .5); } } /* Skizzen im Dunkelmodus: helle Fassung statt dunkler Tinte (19.10.2026, Wunsch User), tools/skizze-dunkel.py */ .pd-full__skizze .pd-skizze--dunkel { display: none; } /* schlägt .pd picture { display: contents } */ :root[data-theme="dark"] .pd-full--skizze .pd-skizze--hell { display: none; } :root[data-theme="dark"] .pd-full--skizze .pd-skizze--dunkel { display: contents; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pd-full--skizze .pd-skizze--hell { display: none; } :root:not([data-theme="light"]) .pd-full--skizze .pd-skizze--dunkel { display: contents; } } /* Terminbuchung (19.10.2026, Wunsch User): „Anderer Tag“ ohne Rahmen wie „Andere Zeit“; Feldbeschriftungen folgen der Seitenfarbe, im Dunkelmodus hell */ .booking-block .ibx-termin { --nv: var(--ink); } .booking-block .ibx-termin-back, .booking-block .ibx-termin-back2 { border: 0 !important; padding: 4px 0 !important; color: var(--ink-2) !important; } .booking-block .ibx-termin-back:hover, .booking-block .ibx-termin-back2:hover { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 3px; } .booking-block .ibx-termin-fields label, .booking-block .ibx-termin-consent { color: var(--ink-2) !important; } /* Buchung bestätigt (19.10.2026, Wunsch User): gezeichneter Haken statt grünem Kasten, Text hell im Dunkelmodus */ .booking-block .ibx-termin-done { text-align: left !important; padding: 26px 0 0 !important; } .booking-block .ibx-termin-check { width: 68px; height: 68px; margin: 0 0 24px !important; background: none !important; color: var(--ink) !important; } .booking-block .ibx-termin-check svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; } .booking-block .ibx-termin-check__ring { stroke: var(--accent-soft); stroke-width: 1.4; stroke-dasharray: 189; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; } .booking-block .ibx-termin-check__tick { stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 40; stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference) { .booking-block .ibx-termin-done:not([hidden]) .ibx-termin-check__ring { animation: ibxTerminRing 700ms cubic-bezier(.65, 0, .35, 1) both; } .booking-block .ibx-termin-done:not([hidden]) .ibx-termin-check__tick { animation: ibxTerminTick 420ms cubic-bezier(.3, .7, .3, 1) 560ms both; } } @keyframes ibxTerminRing { from { stroke-dashoffset: 189; } to { stroke-dashoffset: 0; } } @keyframes ibxTerminTick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } } .booking-block .ibx-termin-doneText { color: var(--ink) !important; font-size: 1.125rem !important; line-height: 1.55; max-width: 32em; margin: 0; } /* Karussell-Pfeile ohne Kreis (19.10.2026, Wunsch User), gilt für Kundenstimmen und Demos; Klickfläche bleibt 46 px */ .pd-voices__btn { border: 0 !important; border-radius: 0; background: transparent; } .pd-voices__btn svg { width: 20px; height: 20px; transition: transform 200ms; } .pd-voices__btn:hover:not(:disabled) { color: var(--pd-c, var(--accent)); } .pd-voices__btn[data-voices-prev]:hover:not(:disabled) svg { transform: translateX(-3px); } .pd-voices__btn[data-voices-next]:hover:not(:disabled) svg { transform: translateX(3px); } .pd-voices__btn:focus-visible { outline: 2px solid var(--pd-c, var(--accent)); outline-offset: 2px; } /* Einwilligung (Cookie-Banner) und Newsletter-Pop-up (19.10.2026, inc/einwilligung.php) */ .consent { position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 1000; width: min(440px, calc(100vw - 24px)); padding: 24px 24px 22px; background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-2); box-shadow: 0 18px 50px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(12px); transition: opacity 260ms, transform 260ms; } .consent[hidden] { display: none; } .consent.is-open { opacity: 1; transform: none; } .consent__k { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .consent__sq { width: 8px; height: 8px; flex: none; background: var(--accent-soft, var(--accent)); } .consent__t { margin: 0 0 8px; color: var(--ink); font-size: 1.375rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .consent__d { margin: 0; font-size: .875rem; line-height: 1.6; } .consent__d a { color: var(--ink); } .consent__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .consent__btn { min-height: 46px; padding: 10px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: .9375rem; cursor: pointer; transition: background 200ms, color 200ms; } .consent__btn:hover, .consent__btn:focus-visible { background: var(--ink); color: var(--paper); } .consent-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .consent-open:hover { text-decoration: underline; text-underline-offset: 3px; } .nlpop { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; } .nlpop[hidden] { display: none; } .nlpop__bg { position: absolute; inset: 0; background: rgba(10, 11, 12, .55); opacity: 0; transition: opacity 260ms; } .nlpop__box { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: clamp(26px, 4vw, 40px); background: var(--paper); color: var(--ink-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(16px); transition: opacity 300ms, transform 300ms; } .nlpop.is-open .nlpop__bg, .nlpop.is-open .nlpop__box { opacity: 1; transform: none; } .nlpop__x { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; } .nlpop__x:hover { color: var(--accent); } .nlpop__t { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; } .nlpop__d { margin: 0 0 22px; line-height: 1.6; } .nlpop__l { display: block; margin: 0 0 6px; color: var(--muted); font-size: .8125rem; } .nlpop__row { display: flex; gap: 10px; margin-bottom: 14px; } .nlpop__row input { flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); background: var(--surface, transparent); color: var(--ink); font: inherit; } .nlpop__row .btn { flex: none; } .nlpop .check { font-size: .8125rem; } .nlpop__msg { margin: 12px 0 0; font-size: .875rem; } .nlpop__msg:empty { display: none; } .nlpop__msg.is-err { color: var(--error, #b32d2e); } .nlpop__ok { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.5; } html.nlpop-open { overflow: hidden; } @media (max-width: 520px) { .nlpop__row { flex-direction: column; } .consent__btns { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .consent, .nlpop__bg, .nlpop__box { transition: none; } }