/* ===================================================================== Mint Editorial · Marketing-Website (Entwurf 09.10.2026) Basis: Mint-Styleguide E4 (Geist + Instrument Serif, Mint #45C4B0, Tintenpille). Erweiterung für Marketing: Türkis, Blau, Violett und Verläufe (Wunsch Auftraggeber). Layout: dunkle und helle Flächen im Wechsel; jede Fläche setzt ihre Farben über Tokens. ===================================================================== */ /* ---------- Schriften (selbst gehostet, SIL Open Font License) ---------- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Titelschriften echter Editorial-Stile (Styleguide-Karte, Stilproben) */ @font-face { font-family: 'Stil Glasklar'; font-weight: 600; font-display: swap; src: url(../fonts/stile/glasklar-titel.woff2) format('woff2'); } @font-face { font-family: 'Stil Werkhalle'; font-weight: 300 700; font-display: swap; src: url(../fonts/stile/werkhalle-titel.woff2) format('woff2'); } @font-face { font-family: 'Stil Collage'; font-weight: 400; font-display: swap; src: url(../fonts/stile/collage-titel.woff2) format('woff2'); } @font-face { font-family: 'Stil Collage Serif'; font-weight: 400; font-display: swap; src: url(../fonts/stile/collage-serif.woff2) format('woff2'); } @font-face { font-family: 'Stil Licht'; font-weight: 300; font-display: swap; src: url(../fonts/stile/licht-titel.woff2) format('woff2'); } @font-face { font-family: 'Stil Kupfer'; font-weight: 100 900; font-display: swap; src: url(../fonts/stile/kupfer-titel.woff2) format('woff2'); } @font-face { font-family: 'Stil Kupfer Schrift'; font-weight: 400; font-display: swap; src: url(../fonts/stile/kupfer-schrift.woff2) format('woff2'); } /* ---------- Tokens ---------- */ :root { /* Marke und Marketing-Erweiterung */ --mint: #45c4b0; /* Markenfarbe, nie Textfarbe auf Hell */ --mint-hell: #8be8d8; --mint-tief: #0b7867; /* Mint als Text auf Hell (5,2 : 1) */ --tuerkis: #2cc6e2; --blau: #3d6bff; --blau-tief: #1c2ba3; --violett: #7b5cff; --violett-hell: #b8a6ff; --nacht: #070a17; --nacht-2: #0d1226; --nacht-3: #141b3a; --papier: #f4f5fa; --tinte: #0d1020; --verlauf: linear-gradient(105deg, #45c4b0 0%, #2cc6e2 28%, #3d6bff 62%, #7b5cff 100%); --verlauf-text: linear-gradient(100deg, #8be8d8 0%, #45c4b0 22%, #5aa8ff 58%, #a68bff 100%); --verlauf-text-hell: linear-gradient(100deg, #0b7867 0%, #1798b3 34%, #3d4fe0 66%, #6a45f0 100%); --schrift: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-mega: clamp(3.25rem, 7.6vw, 7.75rem); --t-display: clamp(2.75rem, 6.2vw, 6rem); --t-h2: clamp(2.125rem, 4.4vw, 3.875rem); --t-h3: clamp(1.3125rem, 1.7vw, 1.5rem); --t-lead: clamp(1.0625rem, 1.35vw, 1.25rem); --t-text: 1rem; --t-klein: 0.875rem; --t-mini: 0.75rem; --r-karte: 1.5rem; --r-medien: 1.125rem; --r-feld: 0.875rem; --r-pille: 62.4375rem; --kopf-h: 4.5rem; --rahmen-max: 94rem; /* = 80rem bei der früheren Grundgröße, Seitenbreite bleibt gleich */ --rand: clamp(1rem, 4vw, 3rem); --takt: 180ms; --kurve: cubic-bezier(0.22, 1, 0.36, 1); /* Bewegungskurve aus dem Stil Glasklar */ /* Flächen-Standard (hell) — jede .flaeche-* überschreibt diese Tokens */ --bg: #ffffff; --bg-2: #f4f5fa; --karte: #ffffff; --karte-2: #f4f5fa; --linie: #e6e8f0; --linie-stark: #d3d7e3; --text: #0d1020; --text-2: #4b5168; --text-3: #636a83; --akzent-text: #0b7867; --knopf-bg: #0d1020; --knopf-text: #ffffff; --schatten: 0 1px 0.125rem rgba(13, 16, 40, 0.06), 0 0.875rem 2.25rem rgba(13, 16, 40, 0.1); --schatten-gross: 0 0.125rem 0.375rem rgba(13, 16, 40, 0.06), 0 1.875rem 5rem rgba(13, 16, 40, 0.16); color-scheme: light; } /* ---------- Flächen ---------- */ .flaeche-hell, .flaeche-papier, .flaeche-nacht, .flaeche-aurora, .flaeche-tief { background: var(--bg); color: var(--text); } .flaeche-hell { --bg: #ffffff; --bg-2: #f4f5fa; --karte: #ffffff; --karte-2: #f4f5fa; --linie: #e6e8f0; --linie-stark: #d3d7e3; --text: #0d1020; --text-2: #4b5168; --text-3: #636a83; --akzent-text: #0b7867; --knopf-bg: #0d1020; --knopf-text: #ffffff; --schatten: 0 1px 0.125rem rgba(13, 16, 40, 0.06), 0 0.875rem 2.25rem rgba(13, 16, 40, 0.1); color-scheme: light; } .flaeche-papier { --bg: #f4f5fa; --bg-2: #eceef6; --karte: #ffffff; --karte-2: #f4f5fa; --linie: #e1e4ee; --linie-stark: #cfd3e0; --text: #0d1020; --text-2: #4b5168; --text-3: #616881; --akzent-text: #0b7867; --knopf-bg: #0d1020; --knopf-text: #ffffff; --schatten: 0 1px 0.125rem rgba(13, 16, 40, 0.05), 0 0.875rem 2.25rem rgba(13, 16, 40, 0.08); color-scheme: light; } .flaeche-nacht, .flaeche-aurora, .flaeche-tief { --bg: #070a17; --bg-2: #0d1226; --karte: #10162f; --karte-2: #161d3d; --linie: rgba(255, 255, 255, 0.09); --linie-stark: rgba(255, 255, 255, 0.2); --text: #f3f5fb; --text-2: #b6bdd4; --text-3: #8a93ae; --akzent-text: #8be8d8; --knopf-bg: #ffffff; --knopf-text: #0b0e1e; --schatten: 0 1px 0.125rem rgba(0, 0, 0, 0.4), 0 1.125rem 2.75rem rgba(0, 0, 0, 0.45); --schatten-gross: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4), 0 2.5rem 6.25rem rgba(0, 0, 0, 0.55); color-scheme: dark; } .flaeche-tief { --bg: #04050c; } .flaeche-aurora { position: relative; isolation: isolate; overflow: hidden; } .flaeche-aurora::before { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 15% 20%, rgba(69, 196, 176, 0.32), transparent 70%), radial-gradient(45% 55% at 85% 15%, rgba(123, 92, 255, 0.38), transparent 70%), radial-gradient(50% 60% at 60% 85%, rgba(61, 107, 255, 0.34), transparent 70%); filter: saturate(115%); } /* ---------- Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Wie synthesia.io: bis 1600 px Fensterbreite 16 px Grundschrift, darüber wächst alles mit (1 % der Breite). */ html { font-size: max(85%, 0.85vw); /* 13.10.: Schrift insgesamt 15 % kleiner (Auftraggeber) */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 1rem); } body { margin: 0; font-family: var(--schrift); font-size: var(--t-text); line-height: 1.55; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } body.thema-nacht { --bg: #070a17; --text: #f3f5fb; background: #070a17; color: #f3f5fb; color-scheme: dark; } body.thema-hell { background: #ffffff; color: #0d1020; } img, video, svg { display: block; max-width: 100%; } video { background: #0b0e1e; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.1875rem; } button { font: inherit; color: inherit; } :focus-visible { outline: 0.125rem solid var(--mint); outline-offset: 0.1875rem; border-radius: 0.375rem; } ::selection { background: #216e65; color: #fff; } h1, h2, h3, h4, p { margin: 0; } [hidden] { display: none !important; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .nur-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rahmen { width: 100%; max-width: calc(var(--rahmen-max) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); } .abschnitt { padding-block: clamp(5rem, 10vw, 8.75rem); position: relative; } .abschnitt--eng { padding-block: clamp(3.5rem, 7vw, 6rem); } .abschnitt__kopf { display: grid; gap: 1.125rem; max-width: 51.25rem; margin-bottom: clamp(2.25rem, 5vw, 4rem); } .abschnitt__kopf--mitte { margin-inline: auto; text-align: center; justify-items: center; } .abschnitt__kopf--breit { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; gap: 2.5rem; } .abschnitt__titel { font-size: var(--t-h2); font-weight: 640; line-height: 1.02; letter-spacing: -0.038em; } .abschnitt__lead { font-size: var(--t-lead); line-height: 1.55; color: var(--text-2); max-width: 62ch; } .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; } .verlaufstext { background: var(--verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .flaeche-hell .verlaufstext, .flaeche-papier .verlaufstext { background-image: var(--verlauf-text-hell); } .kicker { font-size: var(--t-mini); font-weight: 620; letter-spacing: 0.09em; text-transform: uppercase; color: var(--akzent-text); } .pille { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.875rem 0 0.625rem; border-radius: var(--r-pille); font-size: 0.8125rem; font-weight: 520; color: var(--text); background: color-mix(in srgb, var(--karte-2) 80%, transparent); border: 1px solid var(--linie); backdrop-filter: blur(0.5rem); } .pille__punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0.25rem rgba(69, 196, 176, 0.18); } .chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.6875rem; border-radius: var(--r-pille); font-size: 0.7813rem; font-weight: 540; color: var(--text-2); background: var(--karte-2); border: 1px solid var(--linie); white-space: nowrap; } .chip svg { width: 0.875rem; height: 0.875rem; } /* ---------- Knöpfe ---------- */ .knopf { --h: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; height: var(--h); padding: 0 1.375rem; border-radius: var(--r-pille); border: 1px solid transparent; font: 560 0.9375rem/1 var(--schrift); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background var(--takt) ease, box-shadow var(--takt) ease, border-color var(--takt) ease, color var(--takt) ease, transform var(--takt) ease; } .knopf svg { width: 1.0625rem; height: 1.0625rem; flex: none; transition: transform var(--takt) var(--kurve); } .knopf:hover svg.pfeil { transform: translateX(0.1875rem); } .knopf--primaer { background: var(--knopf-bg); color: var(--knopf-text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0.5rem 1.5rem rgba(13, 16, 40, 0.18); } .knopf--primaer:hover { box-shadow: 0 0 0 0.25rem rgba(69, 196, 176, 0.28), 0 0.625rem 1.875rem rgba(61, 107, 255, 0.28); } .knopf--zweit { background: transparent; color: var(--text); border-color: var(--linie-stark); } .knopf--zweit:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } .knopf--leuchtend { position: relative; background: #ffffff; color: #0b0e1e; } .knopf--leuchtend::before { content: ''; position: absolute; inset: -0.125rem; z-index: -1; border-radius: inherit; background: var(--verlauf); filter: blur(0.75rem); opacity: 0.55; transition: opacity var(--takt) ease; } .knopf--leuchtend:hover::before { opacity: 0.9; } .knopf--klein { --h: 2.5rem; padding: 0 1.0625rem; font-size: 0.875rem; } .knopf--gross { --h: 3.5rem; padding: 0 1.75rem; font-size: 1rem; } .knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .textlink { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 560; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie-stark); padding-bottom: 0.125rem; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; } .textlink:hover { border-bottom-color: var(--text); } .textlink svg { width: 0.9375rem; height: 0.9375rem; } /* ---------- Kopfzeile ---------- */ .kopf { position: fixed; inset: 0 0 auto 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); transition: background var(--takt) ease, border-color var(--takt) ease, box-shadow var(--takt) ease; border-bottom: 1px solid transparent; } .kopf[data-kopf='dunkel'] { --text: #f3f5fb; --text-2: #b6bdd4; --linie: rgba(255, 255, 255, 0.1); --knopf-bg: #ffffff; --knopf-text: #0b0e1e; color: #f3f5fb; } .kopf[data-kopf='hell'] { --text: #0d1020; --text-2: #4b5168; --linie: #e3e6ef; --knopf-bg: #0d1020; --knopf-text: #ffffff; color: #0d1020; } /* Navigation auf dunklem Kopf in reinem Weiß (Vorgabe 11.10.) */ .kopf[data-kopf='dunkel'] .kopf__nav > a, .kopf[data-kopf='dunkel'] .mega__knopf, .kopf[data-kopf='dunkel'] .kopf__direkt { color: #ffffff; } /* nur die oberste Ebene, nie die Links in der Mega-Tafel */ .kopf.ist-fest[data-kopf='dunkel'] { background: rgba(9, 72, 68, 0.86); border-bottom-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(1rem) saturate(140%); } .kopf.ist-fest[data-kopf='hell'] { background: rgba(255, 255, 255, 0.82); border-bottom-color: #e8eaf1; backdrop-filter: blur(1rem) saturate(140%); } .kopf__innen { height: var(--kopf-h); display: flex; align-items: center; gap: 1.75rem; } .kopf__marke { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; flex: none; } .kopf__marke svg { height: 1.375rem; width: auto; fill: var(--mint); } .kopf__produkt { font-size: 0.9375rem; font-weight: 540; color: var(--text-2); padding-left: 0.625rem; border-left: 1px solid var(--linie); line-height: 1.125rem; } .kopf__nav { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; } .kopf__nav a { font-size: 0.9063rem; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 0.625rem; transition: color var(--takt), background var(--takt); } .kopf__nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); } .kopf__aktion { margin-left: auto; display: flex; align-items: center; gap: 0.625rem; } .kopf__menue { display: none; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; border: 1px solid var(--linie); background: transparent; cursor: pointer; align-items: center; justify-content: center; } .kopf__menue svg { width: 1.25rem; height: 1.25rem; } .mobilmenue { padding: 0.5rem var(--rand) 1.25rem; display: grid; gap: 0.25rem; } .mobilmenue a { padding: 0.875rem 0.25rem; font-size: 1.125rem; font-weight: 560; text-decoration: none; border-bottom: 1px solid var(--linie); } .kopf[data-kopf='dunkel'] .mobilmenue { background: rgba(7, 52, 50, 0.97); } .kopf[data-kopf='hell'] .mobilmenue { background: rgba(255, 255, 255, 0.98); } /* ---------- Held 1 · Fließband ---------- */ .held { position: relative; isolation: isolate; overflow: hidden; } .held-1 { padding-top: calc(var(--kopf-h) + clamp(1.75rem, 5vw, 4rem)); padding-bottom: clamp(3.5rem, 7vw, 6rem); background: var(--nacht); color: #f3f5fb; } .held-1__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .held-1__licht span { position: absolute; border-radius: 50%; filter: blur(4.375rem); opacity: 0.55; animation: schweben 18s ease-in-out infinite alternate; } .held-1__licht span:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(69, 196, 176, 0.75), transparent 65%); } .held-1__licht span:nth-child(2) { width: 52vw; height: 52vw; right: -16vw; top: -18vw; background: radial-gradient(circle, rgba(123, 92, 255, 0.8), transparent 65%); animation-duration: 22s; } .held-1__licht span:nth-child(3) { width: 50vw; height: 40vw; left: 30vw; bottom: -26vw; background: radial-gradient(circle, rgba(61, 107, 255, 0.75), transparent 65%); animation-duration: 26s; } .held-1__raster { position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); } @keyframes schweben { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4vw, 3vw, 0) scale(1.12); } } .held-1__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; } .held-1__text { display: grid; gap: 1.625rem; align-content: center; position: relative; z-index: 2; } .held-1__titel { font-size: clamp(2.5rem, 4.5vw, 4.375rem); font-weight: 660; line-height: 0.98; letter-spacing: -0.045em; } .held-1__titel .zeile { white-space: nowrap; } .held-1__titel .zeile { display: block; } .wechselbox { display: block; position: relative; height: 1.08em; margin: 0.04em 0 0.02em; } .wechselwort { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--serif); font-weight: 400; font-size: 1.42em; line-height: 0.82; letter-spacing: -0.02em; padding-right: 0.08em; background: var(--verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: transform 700ms var(--kurve), opacity 500ms ease, filter 600ms ease; } .wechselwort.ist-raus { transform: translateY(-38%); opacity: 0; filter: blur(0.625rem); } .wechselwort.ist-rein { transform: translateY(38%); opacity: 0; filter: blur(0.625rem); } .held-1__unter { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.5; color: #c4cbe0; max-width: 34ch; } .held-1__unter strong { color: #fff; font-weight: 600; } .held-1__vertrauen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.125rem; font-size: 0.8438rem; color: #98a1bd; } .held-1__vertrauen span { display: inline-flex; align-items: center; gap: 0.4375rem; } .held-1__vertrauen svg { width: 0.9375rem; height: 0.9375rem; color: var(--mint); } /* Prozessband: Material → Styleguide → Filme */ .band { position: relative; height: clamp(28.75rem, 44vw, 38.75rem); margin-right: calc(-1 * var(--rand) - max(0px, (100vw - var(--rahmen-max) - 2 * var(--rand)) / 2)); } .band__schritt { position: absolute; top: 0.875rem; font-size: 0.7188rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #8f98b6; display: flex; align-items: center; gap: 0.5rem; } .band__schritt b { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.6875rem; color: #e9ecf6; letter-spacing: 0; } .band__schritt--1 { left: 0; } .band__schritt--2 { left: 9.125rem; } .band__schritt--3 { left: 27.5rem; } .band__material { position: absolute; left: 0; top: 50%; width: 7.375rem; height: 9.375rem; transform: translateY(-50%); } .material { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(0.625rem) scale(0.96); transition: opacity 500ms ease, transform 600ms var(--kurve); } .material.ist-aktiv { opacity: 1; transform: none; } .material__name { position: absolute; left: 0; right: 0; bottom: -0.125rem; text-align: center; font-size: 0.75rem; color: #9aa3bf; } .mat-web { width: 7rem; height: 5.25rem; border-radius: 0.625rem; background: #f7fbfb; box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.35); overflow: hidden; position: relative; } .mat-web::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 0.75rem; background: #e7eef2; } .mat-web i { position: absolute; display: block; border-radius: 0.1875rem; } .mat-folie { width: 7rem; height: 4.125rem; border-radius: 0.375rem; background: #f1eee7; box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.35); position: relative; overflow: hidden; } .mat-folie i, .mat-bild i, .mat-film i, .mat-heft i { position: absolute; display: block; } .mat-bild { width: 6.5rem; height: 6.5rem; position: relative; } .mat-bild i { width: 4.75rem; height: 5.75rem; border-radius: 0.375rem; box-shadow: 0 0.625rem 1.625rem rgba(0, 0, 0, 0.4); background-size: cover; background-position: center; border: 0.25rem solid #f3ede4; } .mat-film { width: 7.25rem; height: 4.375rem; border-radius: 0.5rem; background: #060b26; box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; } .mat-heft { width: 5.375rem; height: 7rem; border-radius: 0.25rem 0.5rem 0.5rem 0.25rem; background: #faf3df; box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.35); position: relative; overflow: hidden; } .band__fluss { position: absolute; left: 7rem; top: 50%; width: 2.875rem; height: 0.125rem; transform: translateY(-50%); } .band__fluss svg { width: 2.875rem; height: 0.75rem; overflow: visible; } .band__fluss path { stroke: url(#flussverlauf); stroke-width: 2; fill: none; stroke-dasharray: 4 6; animation: fliessen 1.1s linear infinite; } @keyframes fliessen { to { stroke-dashoffset: -20; } } /* Styleguide-Karte */ .sg-karte { --sg-grund: #f7fbfb; --sg-tinte: #00233b; --sg-akzent: #45c4b0; --sg-zweit: #065fe0; --sg-zart: #af94db; --sg-neutral: #5f7080; --sg-titel: 'Stil Glasklar', var(--serif); position: absolute; left: 10rem; top: 50%; transform: translateY(-50%); z-index: 3; width: 16.375rem; padding: 1.125rem; border-radius: 1.375rem; background: rgba(16, 22, 47, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 3.75rem rgba(123, 92, 255, 0.18); backdrop-filter: blur(1.125rem); display: grid; gap: 0.875rem; color: #eef1f9; } .sg-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; } .sg-karte__marke { display: flex; align-items: center; gap: 0.5625rem; min-width: 0; } .sg-karte__logo { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; display: grid; place-items: center; background: var(--sg-akzent); color: var(--sg-grund); font: 700 0.875rem/1 var(--schrift); transition: background 600ms ease, color 600ms ease; flex: none; } .sg-karte__name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-karte__stil { font-size: 0.7188rem; color: #9aa3bf; white-space: nowrap; } .sg-karte__vorschau { position: relative; aspect-ratio: 16 / 9; border-radius: 0.75rem; overflow: hidden; background: var(--sg-grund); color: var(--sg-tinte); transition: background 600ms ease, color 600ms ease; padding: 0.875rem 0.875rem 0.75rem; display: flex; flex-direction: column; justify-content: space-between; } .sg-karte__probe { font-family: var(--sg-titel); font-size: 1.4375rem; line-height: 1.02; letter-spacing: -0.01em; transition: color 600ms ease; } .sg-karte__probe em { font-style: normal; color: var(--sg-akzent); } .sg-karte__balken { height: 0.25rem; border-radius: 0.25rem; background: var(--sg-akzent); width: 46%; animation: balken 3.2s var(--kurve) infinite; transform-origin: left; transition: background 600ms ease; } @keyframes balken { 0%, 12% { transform: scaleX(0); } 40%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } } .sg-karte__zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; } .sg-karte__label { font-size: 0.6563rem; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: #8e97b4; } .sg-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem; } .sg-palette i { height: 1.875rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.12); transition: background 600ms ease; animation: farbe-ein 3.2s var(--kurve) infinite; } .sg-palette i:nth-child(1) { background: var(--sg-grund); animation-delay: 0ms; } .sg-palette i:nth-child(2) { background: var(--sg-tinte); animation-delay: 80ms; } .sg-palette i:nth-child(3) { background: var(--sg-akzent); animation-delay: 160ms; } .sg-palette i:nth-child(4) { background: var(--sg-zweit); animation-delay: 240ms; } .sg-palette i:nth-child(5) { background: var(--sg-zart); animation-delay: 320ms; } @keyframes farbe-ein { 0% { transform: scale(0.9); } 8% { transform: scale(1.06); } 14%, 100% { transform: scale(1); } } .sg-karte__schrift { display: flex; align-items: baseline; gap: 0.625rem; } .sg-karte__aa { font-family: var(--sg-titel); font-size: 1.875rem; line-height: 1; color: #fff; } .sg-karte__schriftname { font-size: 0.75rem; color: #aab2cc; line-height: 1.3; } .sg-kurve { width: 100%; height: 2.5rem; } .sg-kurve path.spur { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; fill: none; } .sg-kurve path.linie { stroke: var(--sg-akzent); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: kurve-zeichnen 3.2s var(--kurve) infinite; transition: stroke 600ms ease; } .sg-kurve circle { fill: #fff; } @keyframes kurve-zeichnen { 0%, 10% { stroke-dashoffset: 200; } 55%, 100% { stroke-dashoffset: 0; } } .sg-karte__fuss { display: flex; flex-wrap: wrap; gap: 0.375rem; } .sg-karte__fuss span { font-size: 0.6875rem; color: #c9cfe2; padding: 0.25rem 0.5rem; border-radius: 62.4375rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); } /* Förderband */ .foerderband { position: absolute; left: 20.625rem; right: 0; top: 2.875rem; bottom: 0.375rem; z-index: 2; mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 7.5rem), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 7.5rem), transparent 100%); } .spur { position: absolute; left: 0; right: 0; height: 33.33%; } .spur:nth-child(1) { top: 0; } .spur:nth-child(2) { top: 33.33%; } .spur:nth-child(3) { top: 66.66%; } .spur::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(139, 232, 216, 0.25), rgba(123, 92, 255, 0.12) 60%, transparent); } .kachel-band { position: absolute; left: 0; top: 50%; display: grid; gap: 0.4375rem; will-change: transform; } .kachel-band__medien { position: relative; border-radius: 0.75rem; overflow: hidden; background: #111733; box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); } .kachel-band__medien video, .kachel-band__medien img { width: 100%; height: 100%; object-fit: cover; } .kachel-band--16x9 .kachel-band__medien { width: clamp(9.375rem, 15vw, 13.375rem); aspect-ratio: 16 / 9; } .kachel-band--9x16 .kachel-band__medien { width: clamp(4rem, 6.4vw, 5.75rem); aspect-ratio: 9 / 16; } .kachel-band--1x1 .kachel-band__medien { width: clamp(6rem, 9.6vw, 8.25rem); aspect-ratio: 1; } .kachel-band__label { font-size: 0.6875rem; color: #a3abc6; white-space: nowrap; display: flex; align-items: center; gap: 0.375rem; } .kachel-band__label i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--mint); flex: none; } /* ---------- Held 2 · Briefing ---------- */ .held-2 { padding-top: calc(var(--kopf-h) + clamp(2.5rem, 7vw, 6rem)); padding-bottom: clamp(4.5rem, 9vw, 7.5rem); background: #fbfcff; color: #0d1020; } .held-2__himmel { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .held-2__himmel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 60% at 12% 8%, rgba(69, 196, 176, 0.42), transparent 70%), radial-gradient(50% 55% at 88% 6%, rgba(123, 92, 255, 0.42), transparent 70%), radial-gradient(60% 50% at 50% 100%, rgba(61, 107, 255, 0.26), transparent 70%), linear-gradient(180deg, #eef2ff 0%, #fbfcff 70%); } .held-2__himmel::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(13, 16, 32, 0.08) 1px, transparent 1px); background-size: 1.375rem 1.375rem; mask-image: linear-gradient(180deg, #000, transparent 70%); } .held-2__inhalt { display: grid; justify-items: center; text-align: center; gap: 1.375rem; } .held-2__titel { font-size: clamp(2.625rem, 6.2vw, 6.25rem); font-weight: 660; line-height: 0.98; letter-spacing: -0.048em; } .held-2__titel .zeile { display: block; } .held-2__titel .serif { font-size: 1.08em; letter-spacing: -0.02em; } .held-2__unter { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: #4b5168; max-width: 56ch; line-height: 1.55; } .briefing { width: min(100%, 51.25rem); margin-top: 0.625rem; text-align: left; background: #ffffff; border-radius: 1.375rem; padding: 1.125rem 1.125rem 0.875rem; box-shadow: 0 0.125rem 0.375rem rgba(13, 16, 40, 0.05), 0 1.875rem 5rem rgba(61, 70, 160, 0.18), 0 0 0 1px rgba(13, 16, 40, 0.06); display: grid; gap: 0.75rem; position: relative; } .briefing::before { content: ''; position: absolute; inset: -1px; border-radius: 1.4375rem; padding: 1px; background: var(--verlauf); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; pointer-events: none; } .briefing.ist-ziehen { box-shadow: 0 0 0 0.1875rem rgba(69, 196, 176, 0.6), 0 1.875rem 5rem rgba(61, 70, 160, 0.2); } .briefing__feld { width: 100%; min-height: 6.5rem; resize: vertical; border: 0; outline: 0; background: transparent; font: 400 1.125rem/1.5 var(--schrift); color: #0d1020; padding: 0.25rem 0.25rem 0; } .briefing__feld::placeholder { color: #8a90a6; } .briefing__dateien { display: flex; flex-wrap: wrap; gap: 0.5rem; } .briefing__datei { position: relative; flex: none; width: 4.5rem; height: 4.5rem; border-radius: 0.75rem; overflow: hidden; background: var(--farbe, #636a83); box-shadow: 0 0 0 1px rgba(13, 16, 40, 0.08), 0 0.375rem 1rem color-mix(in srgb, var(--farbe, #636a83) 28%, transparent); animation: datei-rein 360ms var(--kurve); } .briefing__datei img, .briefing__datei video { display: block; width: 100%; height: 100%; object-fit: cover; background: #eef0f6; } .briefing__datei-flaeche { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.25rem; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--farbe) 78%, #ffffff), var(--farbe)); } .briefing__datei-flaeche svg { width: 1.375rem; height: 1.375rem; } .briefing__datei-flaeche b { font-size: 0.8125rem; font-weight: 760; letter-spacing: 0.03em; } .briefing__datei-typ { position: absolute; left: 0.3125rem; bottom: 0.3125rem; padding: 0.0625rem 0.3125rem; border-radius: 0.3125rem; background: var(--farbe); color: #fff; font-size: 0.5625rem; font-weight: 760; letter-spacing: 0.03em; } .briefing__datei button { position: absolute; top: 0.25rem; right: 0.25rem; width: 1.25rem; height: 1.25rem; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 16, 32, 0.6); color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--takt); backdrop-filter: blur(0.25rem); } .briefing__datei:hover button, .briefing__datei button:focus-visible { opacity: 1; } @media (hover: none) { .briefing__datei button { opacity: 1; } } @keyframes datei-rein { from { opacity: 0; transform: scale(0.85); } } .briefing__leiste { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .briefing__knopf { display: inline-flex; align-items: center; gap: 0.4375rem; height: 2.25rem; padding: 0 0.75rem; border-radius: 0.6875rem; border: 1px solid #e1e4ee; background: #ffffff; font-size: 0.8438rem; font-weight: 540; color: #2b3048; cursor: pointer; } .briefing__knopf:hover { background: #f4f5fa; } .briefing__knopf svg { width: 1rem; height: 1rem; } .briefing__knopf[aria-pressed='true'] { background: #0d1020; color: #fff; border-color: #0d1020; } .briefing__trenner { width: 1px; height: 1.375rem; background: #e3e6ef; margin: 0 0.125rem; } .briefing__senden { margin-left: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: #0d1020; color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform var(--takt), box-shadow var(--takt); } .briefing__senden:hover { box-shadow: 0 0 0 0.25rem rgba(69, 196, 176, 0.3); } .briefing__senden svg { width: 1.125rem; height: 1.125rem; } .briefing__hinweis { font-size: 0.8125rem; color: #6a7088; } .briefing__typen { display: inline-flex; align-items: center; } .briefing__typen span { width: 1.375rem; height: 1.625rem; border-radius: 0.25rem; display: grid; place-items: center; font-size: 0.5rem; font-weight: 700; color: #fff; margin-left: -0.375rem; box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15); transform: rotate(var(--r, 0deg)); } .briefing__typen span:first-child { margin-left: 0; } /* ---------- Held 3 · Wand ---------- */ .held-3 { min-height: max(42.5rem, 100svh); background: #03040a; color: #fff; display: grid; place-items: center; padding: calc(var(--kopf-h) + 2.5rem) 0 4.5rem; } .wand { position: absolute; inset: -4% -4%; z-index: -2; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 0.625rem; transform: rotate(-4deg) scale(1.06); animation: wand-gleiten 40s linear infinite alternate; } @keyframes wand-gleiten { from { transform: rotate(-4deg) scale(1.06) translateY(0); } to { transform: rotate(-4deg) scale(1.06) translateY(-6%); } } .wand__zelle { position: relative; border-radius: 0.875rem; overflow: hidden; background: #0d1226; aspect-ratio: 16 / 9; } .wand__zelle video, .wand__zelle img { width: 100%; height: 100%; object-fit: cover; } .wand__zelle span { position: absolute; left: 0.625rem; bottom: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.6); } .held-3::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 50%, rgba(3, 4, 10, 0.88) 0%, rgba(3, 4, 10, 0.72) 45%, rgba(3, 4, 10, 0.25) 100%), linear-gradient(180deg, rgba(3, 4, 10, 0.75) 0%, transparent 18%, transparent 82%, rgba(3, 4, 10, 0.92) 100%); } .held-3__inhalt { display: grid; justify-items: center; text-align: center; gap: 1.5rem; } .held-3__titel { font-size: var(--t-mega); font-weight: 670; line-height: 0.92; letter-spacing: -0.05em; } .held-3__titel .zeile { display: block; } .held-3__titel .serif { font-size: 1.04em; letter-spacing: -0.02em; } .held-3__unter { font-size: clamp(1.0625rem, 1.45vw, 1.3125rem); line-height: 1.55; color: #c9cfe2; max-width: 52ch; } .held-3__zaehler { display: flex; gap: 1.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; } .held-3__zaehler div { display: grid; gap: 0.125rem; text-align: center; } .held-3__zaehler b { font-family: var(--serif); font-weight: 400; font-size: 2.5rem; line-height: 1; } .held-3__zaehler span { font-size: 0.7813rem; color: #9aa3bf; } /* ---------- Held 4 · Formate ---------- */ .held-4 { padding-top: calc(var(--kopf-h) + clamp(2.25rem, 6vw, 5rem)); padding-bottom: clamp(4rem, 8vw, 6.875rem); background: #ffffff; color: #0d1020; } .held-4__licht { position: absolute; inset: auto -10% -30% 20%; height: 90%; z-index: -1; pointer-events: none; background: radial-gradient(45% 55% at 30% 50%, rgba(69, 196, 176, 0.35), transparent 70%), radial-gradient(45% 55% at 70% 45%, rgba(123, 92, 255, 0.32), transparent 70%), radial-gradient(40% 40% at 55% 75%, rgba(61, 107, 255, 0.28), transparent 70%); filter: blur(1.25rem); } .held-4__kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2.5rem; align-items: end; margin-bottom: clamp(2.25rem, 5vw, 4rem); } .held-4__titel { font-size: var(--t-display); font-weight: 660; line-height: 0.95; letter-spacing: -0.05em; } .held-4__titel .serif { display: block; font-size: 1.1em; letter-spacing: -0.02em; } .held-4__seite { display: grid; gap: 1.375rem; padding-bottom: 0.5rem; } .held-4__seite p { font-size: var(--t-lead); color: #4b5168; line-height: 1.55; } .triptychon { display: grid; grid-template-columns: 16fr 9fr 5.1fr; gap: clamp(0.75rem, 1.6vw, 1.375rem); align-items: end; } .triptychon figure { margin: 0; display: grid; gap: 0.625rem; } .triptychon .medien { border-radius: var(--r-medien); overflow: hidden; background: #0d1020; box-shadow: var(--schatten-gross); } .triptychon .medien video { width: 100%; height: 100%; object-fit: cover; } .triptychon figure:nth-child(1) .medien { aspect-ratio: 16 / 9; } .triptychon figure:nth-child(2) .medien { aspect-ratio: 1; } .triptychon figure:nth-child(3) .medien { aspect-ratio: 9 / 16; } .triptychon figcaption { display: flex; justify-content: space-between; gap: 0.625rem; font-size: 0.8125rem; color: #4b5168; } .triptychon figcaption b { font-weight: 620; color: #0d1020; } .filmwahl { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 62.4375rem; background: #eef0f6; border: 1px solid #e3e6ef; } .filmwahl button { height: 2.25rem; padding: 0 1rem; border-radius: 62.4375rem; border: 0; background: transparent; font-size: 0.875rem; font-weight: 540; color: #4b5168; cursor: pointer; } .filmwahl button[aria-pressed='true'] { background: #0d1020; color: #fff; box-shadow: 0 0.125rem 0.5rem rgba(13, 16, 40, 0.2); } /* ---------- Held 5 · Studio ---------- */ .held-5 { padding-top: calc(var(--kopf-h) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(4rem, 8vw, 6.875rem); background: #0a0b1f; color: #f3f5fb; } .held-5__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 0% 0%, rgba(69, 196, 176, 0.32), transparent 70%), radial-gradient(60% 70% at 100% 10%, rgba(123, 92, 255, 0.5), transparent 70%), radial-gradient(60% 50% at 50% 110%, rgba(61, 107, 255, 0.45), transparent 70%), linear-gradient(180deg, #0a0b1f, #0d0f2c); } .held-5__gitter { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .held-5__text { display: grid; gap: 1.5rem; } .held-5__titel { font-size: clamp(2.75rem, 5.2vw, 5rem); font-weight: 660; line-height: 0.98; letter-spacing: -0.045em; } .held-5__titel .serif { display: block; font-size: 1.12em; letter-spacing: -0.02em; } .held-5__unter { font-size: var(--t-lead); color: #c4cbe0; line-height: 1.55; max-width: 40ch; } .studio { border-radius: 1.25rem; overflow: hidden; background: #f3f3f1; color: #121212; font-family: var(--schrift); box-shadow: 0 3.125rem 7.5rem rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 5rem rgba(123, 92, 255, 0.25); display: grid; grid-template-rows: auto 1fr; min-width: 0; } .studio__leiste { display: flex; align-items: center; gap: 0.625rem; height: 2.75rem; padding: 0 0.875rem; background: #ffffff; border-bottom: 1px solid #ededea; } .studio__punkte { display: flex; gap: 0.375rem; } .studio__punkte i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #e2e2de; } .studio__marke svg { height: 0.875rem; width: auto; fill: #45c4b0; } .studio__schritte { display: flex; gap: 0.125rem; margin-left: 0.5rem; padding: 0.1875rem; border-radius: 62.4375rem; background: #e8e8e4; font-size: 0.7188rem; } .studio__schritte span { padding: 0.25rem 0.625rem; border-radius: 62.4375rem; color: #5f5f5b; } .studio__schritte span.ist-aktiv { background: #fff; color: #121212; box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.08); font-weight: 560; } .studio__koerper { display: grid; grid-template-columns: 13.75rem minmax(0, 1fr); grid-template-areas: 'chat mitte' 'chat stile'; gap: 0.75rem; padding: 0.75rem; min-height: 0; } .studio__chat { grid-area: chat; } .studio__mitte { grid-area: mitte; } .studio__stile { grid-area: stile; } .studio__chat { background: #fff; border-radius: 1rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5625rem; font-size: 0.7813rem; line-height: 1.45; min-width: 0; } .studio__chat h4 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.01em; } .studio__blase { padding: 0.5625rem 0.6875rem; border-radius: 0.75rem; background: #f6f6f4; color: #2a2a28; } .studio__blase--ich { background: #121212; color: #fff; align-self: flex-end; max-width: 92%; } .studio__blase--mint { display: grid; gap: 0.25rem; } .studio__blase--mint span { display: flex; gap: 0.4375rem; align-items: flex-start; } .studio__blase--mint svg { width: 0.8125rem; height: 0.8125rem; color: #0b7867; flex: none; margin-top: 0.125rem; } .studio__eingabe { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.6875rem; border-radius: 0.75rem; background: #f6f6f4; color: #6b6b73; font-size: 0.75rem; } .studio__eingabe b { margin-left: auto; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: #121212; display: grid; place-items: center; color: #fff; } .studio__eingabe svg { width: 0.8125rem; height: 0.8125rem; } .studio__mitte { display: grid; gap: 0.625rem; min-width: 0; align-content: start; } .studio__bild { position: relative; border-radius: 0.875rem; overflow: hidden; background: #0d1020; aspect-ratio: 16 / 9; } .studio__bild video { width: 100%; height: 100%; object-fit: cover; } .studio__auswahl { position: absolute; left: 4.6%; top: 22%; width: 46%; height: 42%; border: 0.125rem solid #45c4b0; border-radius: 0.5rem; box-shadow: 0 0 0 0.25rem rgba(69, 196, 176, 0.25); opacity: 0; transition: opacity 300ms ease; pointer-events: none; } .studio__auswahl.ist-sichtbar { opacity: 1; } .studio__auswahl::after { content: 'Titel'; position: absolute; left: -0.125rem; top: -1.5rem; height: 1.25rem; padding: 0 0.5rem; border-radius: 0.375rem; background: #45c4b0; color: #062e28; font-size: 0.6875rem; font-weight: 620; display: grid; place-items: center; } .studio__zeiger { position: absolute; width: 1.25rem; height: 1.25rem; left: 70%; top: 70%; transition: left 900ms var(--kurve), top 900ms var(--kurve); pointer-events: none; filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.4)); } .studio__szenen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .studio__szene { position: relative; border-radius: 0.625rem; overflow: hidden; aspect-ratio: 16 / 9; background: #ddd; border: 0.125rem solid transparent; } .studio__szene img { width: 100%; height: 100%; object-fit: cover; } .studio__szene span { position: absolute; left: 0.375rem; bottom: 0.25rem; font-size: 0.625rem; font-weight: 620; color: #fff; text-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.6); } .studio__szene.ist-aktiv { border-color: #45c4b0; } .studio__stile { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; align-content: start; } .studio__stile p { grid-column: 1 / -1; } .studio__stile p { font-size: 0.6563rem; font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b73; } .studio__stil { display: grid; gap: 0.25rem; padding: 0.3125rem; border-radius: 0.75rem; border: 0.125rem solid transparent; background: #fff; cursor: pointer; text-align: left; font-size: 0.7188rem; font-weight: 540; color: #121212; } .studio__stil img { border-radius: 0.5rem; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } .studio__stil[aria-pressed='true'] { border-color: #45c4b0; background: #f2fbf7; } .studio__stil:hover { background: #f6f6f4; } /* ---------- Vertrauensleiste ---------- */ .vertrauen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .vertrauen__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .vertrauen__punkt { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.625rem 1.375rem; border-left: 1px solid var(--linie); } .vertrauen__punkt:first-child { border-left: 0; padding-left: 0; } .vertrauen__punkt svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--akzent-text); margin-top: 0.125rem; } .vertrauen__punkt b { display: block; font-size: 0.9375rem; font-weight: 600; } .vertrauen__punkt span { font-size: 0.8438rem; color: var(--text-2); } /* ---------- Galerie ---------- */ .filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } .filter button { height: 2.375rem; padding: 0 1rem; border-radius: 62.4375rem; border: 1px solid var(--linie-stark); background: transparent; color: var(--text-2); font-size: 0.875rem; font-weight: 540; cursor: pointer; transition: background var(--takt), color var(--takt), border-color var(--takt); } .filter button:hover { color: var(--text); } .filter button[aria-pressed='true'] { background: var(--knopf-bg); color: var(--knopf-text); border-color: var(--knopf-bg); } .galerie { columns: 3 18.75rem; column-gap: 1.25rem; } .kachel { break-inside: avoid; margin: 0 0 1.375rem; display: grid; gap: 0.75rem; } .kachel[hidden] { display: none; } .kachel__knopf { all: unset; display: block; cursor: pointer; border-radius: var(--r-medien); position: relative; } .kachel__knopf:focus-visible { outline: 0.125rem solid var(--mint); outline-offset: 0.25rem; } .kachel__medien { position: relative; border-radius: var(--r-medien); overflow: hidden; background: var(--karte-2); box-shadow: var(--schatten); transform: translateZ(0); } .kachel__medien video, .kachel__medien img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--kurve); } .kachel__knopf:hover .kachel__medien video, .kachel__knopf:hover .kachel__medien img { transform: scale(1.025); } .kachel--16x9 .kachel__medien { aspect-ratio: 16 / 9; } .kachel--9x16 .kachel__medien { aspect-ratio: 9 / 16; } .kachel--1x1 .kachel__medien { aspect-ratio: 1; } .kachel__format { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 1; height: 1.5rem; padding: 0 0.5625rem; border-radius: 62.4375rem; background: rgba(8, 10, 24, 0.62); color: #fff; font-size: 0.7188rem; font-weight: 600; display: inline-flex; align-items: center; backdrop-filter: blur(0.375rem); } .kachel__spielen { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(8, 10, 24, 0.62); display: grid; place-items: center; color: #fff; backdrop-filter: blur(0.375rem); transition: background var(--takt); } .kachel__spielen svg { width: 0.875rem; height: 0.875rem; } .kachel__knopf:hover .kachel__spielen { background: var(--mint); color: #062e28; } .kachel__briefing { position: absolute; inset: auto 0.75rem 0.75rem 0.75rem; z-index: 1; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: rgba(8, 10, 24, 0.72); color: #eef1f9; font-size: 0.7813rem; line-height: 1.4; backdrop-filter: blur(0.625rem); opacity: 0; transform: translateY(0.375rem); transition: opacity var(--takt) ease, transform var(--takt) ease; } .kachel__knopf:hover .kachel__briefing, .kachel__knopf:focus-visible .kachel__briefing { opacity: 1; transform: none; } .kachel__text { display: grid; gap: 0.1875rem; padding-inline: 0.125rem; } .kachel__titel { font-size: 1.0313rem; font-weight: 600; letter-spacing: -0.01em; } .kachel__meta { font-size: 0.8125rem; color: var(--text-3); } .kachel__weg { font-size: 0.8125rem; color: var(--text-2); display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .kachel__weg svg { width: 0.875rem; height: 0.875rem; color: var(--akzent-text); } .galerie__fuss { margin-top: 1.125rem; font-size: 0.8125rem; color: var(--text-3); } /* ---------- So geht's ---------- */ .schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.875rem, 1.6vw, 1.375rem); } .schritt { display: grid; gap: 1rem; align-content: start; } .schritt__bild { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--r-karte); overflow: hidden; display: grid; place-items: center; isolation: isolate; } .schritt__bild--1 { background: linear-gradient(160deg, #d6f5ef 0%, #9fded3 45%, #3d8fa8 100%); } .schritt__bild--2 { background: linear-gradient(160deg, #dfe6ff 0%, #9fb4ff 45%, #3d55d6 100%); } .schritt__bild--3 { background: linear-gradient(160deg, #e8e0ff 0%, #b29dff 45%, #5b3fd0 100%); } .schritt__bild--4 { background: linear-gradient(160deg, #d7f1fb 0%, #8fd3ea 40%, #6a5cf0 100%); } .schritt__bild::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 30% 20%, rgba(255, 255, 255, 0.55), transparent 70%); } .schritt__nr { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; font-size: 0.8125rem; font-weight: 640; background: var(--knopf-bg); color: var(--knopf-text); } .schritt__kopf { display: flex; align-items: center; gap: 0.75rem; } .schritt h3 { font-size: var(--t-h3); font-weight: 620; letter-spacing: -0.02em; } .schritt p { font-size: 0.9375rem; color: var(--text-2); line-height: 1.6; } /* Schritt 1: Material wird Styleguide */ .s1 { position: relative; width: 78%; height: 70%; } .s1__blatt { position: absolute; border-radius: 0.625rem; background: #fff; box-shadow: 0 0.875rem 2.125rem rgba(10, 40, 50, 0.25); } .s1__blatt--a { left: 0; top: 4%; width: 62%; height: 52%; transform: rotate(-6deg); } .s1__blatt--b { right: 0; top: 0; width: 50%; height: 44%; transform: rotate(5deg); background: #1b2042; } .s1__blatt--c { left: 16%; bottom: 0; width: 70%; height: 46%; padding: 0.75rem; display: grid; gap: 0.5rem; align-content: start; } .s1__blatt--a::before, .s1__blatt--a::after { content: ''; position: absolute; left: 10%; right: 30%; height: 0.4375rem; border-radius: 0.25rem; background: #d7e3ea; top: 22%; } .s1__blatt--a::after { top: 40%; right: 50%; background: #45c4b0; } .s1__blatt--b::before { content: ''; position: absolute; inset: 22% 14% auto 14%; height: 34%; border-radius: 0.375rem; background: linear-gradient(110deg, #45c4b0, #3d6bff, #7b5cff); } .s1__farben { display: flex; gap: 0.3125rem; } .s1__farben i { flex: 1; height: 1.375rem; border-radius: 0.375rem; animation: farbe-ein 3.2s var(--kurve) infinite; } .s1__farben i:nth-child(2) { animation-delay: 90ms; } .s1__farben i:nth-child(3) { animation-delay: 180ms; } .s1__farben i:nth-child(4) { animation-delay: 270ms; } .s1__schrift { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: #0d1020; } .s1__schrift small { font-family: var(--schrift); font-size: 0.6875rem; color: #6a7088; } /* Schritt 2: Briefing */ .s2 { width: 84%; background: #fff; border-radius: 1rem; padding: 0.875rem; box-shadow: 0 1.125rem 2.5rem rgba(20, 30, 90, 0.25); display: grid; gap: 0.625rem; font-size: 0.8125rem; color: #2b3048; } .s2__text { min-height: 3.625rem; line-height: 1.45; } .s2__text::after { content: ''; display: inline-block; width: 0.125rem; height: 0.9375rem; background: #0d1020; margin-left: 0.125rem; vertical-align: -0.125rem; animation: blinken 1s steps(1) infinite; } @keyframes blinken { 50% { opacity: 0; } } .s2__leiste { display: flex; align-items: center; gap: 0.375rem; } .s2__senden { margin-left: auto; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #0d1020; color: #fff; display: grid; place-items: center; } .s2__senden svg { width: 0.875rem; height: 0.875rem; } /* Schritt 3: Film */ .s3 { width: 86%; display: grid; grid-template-columns: 16fr 9fr; gap: 0.5rem; align-items: end; } .s3 .s3__f { border-radius: 0.625rem; overflow: hidden; box-shadow: 0 1rem 2.25rem rgba(20, 10, 80, 0.35); background: #0d1020; } .s3 .s3__f:nth-child(1) { aspect-ratio: 16 / 9; } .s3 .s3__f:nth-child(2) { aspect-ratio: 9 / 16; } .s3 video { width: 100%; height: 100%; object-fit: cover; } /* Schritt 4: Feinschliff */ .s4 { width: 86%; position: relative; } .s4__bild { border-radius: 0.75rem; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 1rem 2.25rem rgba(20, 30, 90, 0.3); position: relative; } .s4__bild img { width: 100%; height: 100%; object-fit: cover; } .s4__rahmen { position: absolute; left: 4%; top: 20%; width: 50%; height: 42%; border: 0.125rem solid #45c4b0; border-radius: 0.375rem; box-shadow: 0 0 0 0.25rem rgba(69, 196, 176, 0.3); animation: rahmen-puls 3s ease-in-out infinite; } @keyframes rahmen-puls { 0%, 100% { box-shadow: 0 0 0 0.1875rem rgba(69, 196, 176, 0.25); } 50% { box-shadow: 0 0 0 0.4375rem rgba(69, 196, 176, 0.12); } } .s4__blase { position: absolute; right: -4%; bottom: -14%; max-width: 70%; padding: 0.5625rem 0.75rem; border-radius: 0.75rem 0.75rem 0.25rem 0.75rem; background: #0d1020; color: #fff; font-size: 0.7813rem; box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.3); } .s4__antwort { position: absolute; left: -4%; bottom: -30%; padding: 0.5rem 0.6875rem; border-radius: 0.75rem 0.75rem 0.75rem 0.25rem; background: #fff; color: #0b7867; font-size: 0.75rem; font-weight: 560; box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.18); display: flex; gap: 0.375rem; align-items: center; } .s4__antwort svg { width: 0.8125rem; height: 0.8125rem; } /* ---------- Styleguide-Labor ---------- */ .labor-gitter { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .merkmale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem 1.75rem; margin-top: 2.25rem; } .merkmal { display: grid; gap: 0.375rem; padding-top: 1rem; border-top: 1px solid var(--linie); } .merkmal svg { width: 1.375rem; height: 1.375rem; color: var(--akzent-text); } .merkmal b { font-size: 0.9688rem; font-weight: 600; } .merkmal span { font-size: 0.875rem; color: var(--text-2); line-height: 1.55; } .labor { border-radius: 1.75rem; padding: clamp(1rem, 2vw, 1.5rem); background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten-gross); display: grid; gap: 1.125rem; position: relative; } .labor__zone { border: 1.5px dashed var(--linie-stark); border-radius: 1.125rem; padding: 1.125rem; display: flex; align-items: center; gap: 1rem; transition: border-color var(--takt), background var(--takt); } .labor__zone.ist-ziehen { border-color: var(--mint); background: rgba(69, 196, 176, 0.08); } .labor__zone-symbol { width: 3rem; height: 3rem; border-radius: 0.875rem; background: var(--karte-2); display: grid; place-items: center; flex: none; } .labor__zone-symbol svg { width: 1.375rem; height: 1.375rem; color: var(--akzent-text); } .labor__zone b { display: block; font-size: 0.9375rem; font-weight: 600; } .labor__zone span { font-size: 0.8438rem; color: var(--text-2); } .labor__zone label { margin-left: auto; } .labor__vorlagen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8125rem; color: var(--text-3); } .labor__vorlagen button { height: 2rem; padding: 0 0.75rem; border-radius: 62.4375rem; border: 1px solid var(--linie-stark); background: transparent; color: var(--text-2); font-size: 0.8125rem; font-weight: 540; cursor: pointer; } .labor__vorlagen button[aria-pressed='true'] { background: var(--knopf-bg); color: var(--knopf-text); border-color: var(--knopf-bg); } .labor__ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .labor__film { --p-grund: #f7fbfb; --p-tinte: #00233b; --p-akzent: #45c4b0; --p-zweit: #065fe0; --p-zart: #d0f2ed; grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: var(--p-grund); color: var(--p-tinte); transition: background 500ms ease, color 500ms ease; container-type: inline-size; } .lf__flaeche { position: absolute; right: -8%; top: -18%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--p-zart); transition: background 500ms ease; animation: lf-kreis 6s var(--kurve) infinite; } .lf__flaeche--2 { right: 18%; top: 52%; width: 18%; background: var(--p-zweit); animation-delay: 300ms; } @keyframes lf-kreis { 0% { transform: scale(0.6); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.04); opacity: 0; } } .lf__inhalt { position: absolute; left: 7%; top: 14%; right: 40%; display: grid; gap: 4cqw; } .lf__kicker { font: 650 2.1cqw/1 var(--schrift); letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-akzent); filter: saturate(1.1); } .lf__titel { font: 650 6.2cqw/1.02 var(--schrift); letter-spacing: -0.03em; } .lf__titel span { display: inline-block; opacity: 0; transform: translateY(40%); animation: lf-wort 6s var(--kurve) infinite; } .lf__titel span:nth-child(2) { animation-delay: 140ms; } .lf__titel span:nth-child(3) { animation-delay: 280ms; } .lf__titel span:nth-child(4) { animation-delay: 420ms; } @keyframes lf-wort { 0%, 6% { opacity: 0; transform: translateY(40%); } 16%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } } .lf__strich { height: 0.9cqw; width: 38%; border-radius: 1cqw; background: var(--p-akzent); transform-origin: left; animation: lf-strich 6s var(--kurve) infinite; } @keyframes lf-strich { 0%, 18% { transform: scaleX(0); } 34%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } } .lf__zahl { position: absolute; right: 9%; bottom: 12%; font: 300 13cqw/0.9 var(--schrift); letter-spacing: -0.04em; color: var(--p-tinte); } .lf__zahl small { font-size: 0.32em; font-weight: 600; color: var(--p-akzent); margin-left: 0.1em; } .lf__marke { position: absolute; left: 7%; bottom: 9%; display: flex; align-items: center; gap: 1.2cqw; font: 600 2cqw/1 var(--schrift); } .lf__marke i { width: 3.4cqw; height: 3.4cqw; border-radius: 1cqw; background: var(--p-tinte); transition: background 500ms ease; } .labor__palette { display: grid; gap: 0.625rem; } .labor__farben { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; } .labor__farbe { display: grid; gap: 0.375rem; } .labor__farbe i { height: 2.875rem; border-radius: 0.75rem; border: 1px solid var(--linie); transition: background 500ms ease; } .labor__farbe code { font: 500 0.6875rem/1.2 var(--mono); color: var(--text-3); } .labor__farbe small { font-size: 0.6875rem; color: var(--text-2); } .labor__info { display: grid; gap: 0.625rem; align-content: start; font-size: 0.8438rem; color: var(--text-2); } .labor__info b { color: var(--text); font-weight: 600; } .labor__zeile { display: flex; justify-content: space-between; gap: 0.625rem; padding: 0.5625rem 0; border-bottom: 1px solid var(--linie); } .labor__datenschutz { font-size: 0.7813rem; color: var(--text-3); display: flex; gap: 0.5rem; align-items: center; } .labor__datenschutz svg { width: 0.9375rem; height: 0.9375rem; color: var(--akzent-text); flex: none; } /* ---------- Stile & Tempo ---------- */ .stilwand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 1vw, 0.875rem); } .stilwand__zelle { margin: 0; display: grid; gap: 0.5rem; } .stilwand__medien { position: relative; border-radius: 0.875rem; overflow: hidden; aspect-ratio: 16 / 9; background: var(--karte-2); box-shadow: var(--schatten); } .stilwand__medien video, .stilwand__medien img { width: 100%; height: 100%; object-fit: cover; } .stilwand figcaption { font-size: 0.8125rem; color: var(--text-2); display: flex; justify-content: space-between; gap: 0.5rem; } .stilwand figcaption b { color: var(--text); font-weight: 580; } .tempo { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; } .tempo__text { display: grid; gap: 1.125rem; } .tempo__text h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 640; letter-spacing: -0.035em; line-height: 1.05; } .segment { display: inline-flex; padding: 0.25rem; gap: 0.25rem; border-radius: 62.4375rem; background: var(--karte-2); border: 1px solid var(--linie); width: fit-content; max-width: 100%; flex-wrap: wrap; } .segment button { height: 2.375rem; padding: 0 1rem; border-radius: 62.4375rem; border: 0; background: transparent; color: var(--text-2); font-size: 0.875rem; font-weight: 560; cursor: pointer; } .segment button[aria-pressed='true'] { background: var(--knopf-bg); color: var(--knopf-text); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.18); } .tempo__beschreibung { min-height: 3.2em; color: var(--text-2); font-size: 0.9688rem; } .tempo__medien { border-radius: 1.375rem; overflow: hidden; aspect-ratio: 16 / 9; background: #0d1020; box-shadow: var(--schatten-gross); } .tempo__medien video { width: 100%; height: 100%; object-fit: cover; } /* ---------- Formate ---------- */ .formate { display: grid; grid-template-columns: 16fr 9fr 5.1fr; gap: clamp(0.75rem, 1.6vw, 1.5rem); align-items: end; } .formate figure { margin: 0; display: grid; gap: 0.75rem; } .formate .medien { border-radius: var(--r-medien); overflow: hidden; background: #0d1020; box-shadow: var(--schatten-gross); } .formate .medien video { width: 100%; height: 100%; object-fit: cover; } .formate figure:nth-child(1) .medien { aspect-ratio: 16 / 9; } .formate figure:nth-child(2) .medien { aspect-ratio: 1; } .formate figure:nth-child(3) .medien { aspect-ratio: 9 / 16; } .formate figcaption { display: grid; gap: 0.125rem; font-size: 0.8438rem; color: var(--text-2); } .formate figcaption b { font-size: 0.9375rem; color: var(--text); font-weight: 620; } .formate__wahl { margin-bottom: 1.75rem; } /* ---------- Lösungen ---------- */ .loesungen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.875rem, 1.6vw, 1.375rem); } .loesung { border-radius: var(--r-karte); background: var(--karte); border: 1px solid var(--linie); padding: 1.375rem; display: grid; gap: 1rem; align-content: start; box-shadow: var(--schatten); } .loesung__symbol { width: 2.875rem; height: 2.875rem; border-radius: 0.875rem; display: grid; place-items: center; color: #fff; } .loesung__symbol svg { width: 1.375rem; height: 1.375rem; } .loesung:nth-child(1) .loesung__symbol { background: linear-gradient(140deg, #45c4b0, #1798b3); } .loesung:nth-child(2) .loesung__symbol { background: linear-gradient(140deg, #2cc6e2, #3d6bff); } .loesung:nth-child(3) .loesung__symbol { background: linear-gradient(140deg, #3d6bff, #7b5cff); } .loesung:nth-child(4) .loesung__symbol { background: linear-gradient(140deg, #7b5cff, #b04fd8); } .loesung h3 { font-size: 1.25rem; font-weight: 620; letter-spacing: -0.02em; } .loesung ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .loesung li { font-size: 0.9063rem; line-height: 1.5; color: var(--text-2); padding-left: 1.125rem; position: relative; } .loesung li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.125rem; border-radius: 0.125rem; background: var(--mint); } .loesung li b { color: var(--text); font-weight: 580; } .loesung .textlink { margin-top: 0.25rem; justify-self: start; font-size: 0.875rem; } /* ---------- Enterprise ---------- */ .enterprise-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; } .enterprise-punkt { background: var(--bg); padding: clamp(1.375rem, 2.4vw, 2rem); display: grid; gap: 0.625rem; align-content: start; } .enterprise-punkt svg { width: 1.5rem; height: 1.5rem; color: var(--akzent-text); } .enterprise-punkt b { font-size: 1.0625rem; font-weight: 610; letter-spacing: -0.01em; } .enterprise-punkt span { font-size: 0.9063rem; color: var(--text-2); line-height: 1.6; } /* ---------- Preise ---------- */ .preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .paket { position: relative; border-radius: 1.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); display: grid; gap: 1.375rem; align-content: start; } .paket--hervor { border-color: transparent; background: linear-gradient(var(--karte), var(--karte)) padding-box, var(--verlauf) border-box; border: 1.5px solid transparent; } .paket__kopf { display: grid; gap: 0.5rem; } .paket__name { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; font-size: 1.375rem; font-weight: 640; letter-spacing: -0.02em; } .paket__name .chip { height: 1.5rem; font-size: 0.7188rem; } .paket__fuer { font-size: 0.9375rem; color: var(--text-2); } .paket__preis { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; } .paket__betrag { font-family: var(--serif); font-size: clamp(3.375rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; } .paket__einheit { font-size: 0.9375rem; color: var(--text-2); } .paket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6875rem; } .paket li { display: flex; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.45; } .paket li svg { width: 1.125rem; height: 1.125rem; color: var(--akzent-text); flex: none; margin-top: 1px; } .paket__fuss { font-size: 0.8125rem; color: var(--text-3); } .credits { margin-top: clamp(1rem, 2vw, 1.5rem); border-radius: 1.5rem; padding: clamp(1.25rem, 2.4vw, 1.75rem); background: var(--karte-2); border: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.75rem; align-items: center; } .credits h3 { font-size: 1.25rem; font-weight: 620; letter-spacing: -0.02em; margin-bottom: 0.375rem; } .credits p { font-size: 0.9063rem; color: var(--text-2); } .credits__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; } .credits__liste div { border-radius: 1rem; background: var(--karte); border: 1px solid var(--linie); padding: 0.875rem; display: grid; gap: 0.25rem; } .credits__liste b { font-size: 0.9063rem; font-weight: 600; } .credits__liste span { font-size: 0.8125rem; color: var(--text-2); } /* ---------- FAQ ---------- */ .faq-gitter { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .faq-liste { display: grid; } .faq-liste details { border-bottom: 1px solid var(--linie); } .faq-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.375rem 0; font-size: 1.0938rem; font-weight: 580; letter-spacing: -0.01em; } .faq-liste summary::-webkit-details-marker { display: none; } .faq-liste summary svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform var(--takt) var(--kurve); color: var(--text-2); } .faq-liste details[open] summary svg { transform: rotate(45deg); } .faq-liste details p { padding: 0 0 1.375rem; color: var(--text-2); font-size: 0.9688rem; line-height: 1.65; max-width: 64ch; } /* ---------- Abschluss ---------- */ .abschluss { text-align: center; } .abschluss__inhalt { display: grid; gap: 1.5rem; justify-items: center; } .abschluss__titel { font-size: var(--t-display); font-weight: 660; line-height: 0.98; letter-spacing: -0.048em; max-width: 16ch; } .abschluss__titel .serif { letter-spacing: -0.02em; } .abschluss__lead { font-size: var(--t-lead); color: var(--text-2); max-width: 56ch; } .abschluss__mini { font-size: 0.8438rem; color: var(--text-3); } /* ---------- Fuß ---------- */ .fuss { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; border-top: 1px solid var(--linie); } .fuss__gitter { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 1.75rem; } .fuss__marke { display: grid; gap: 0.875rem; align-content: start; } .fuss__marke svg { height: 1.5rem; width: auto; fill: var(--mint); } .fuss__marke p { font-size: 0.875rem; color: var(--text-2); max-width: 30ch; } .fuss h4 { font-size: 0.75rem; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.875rem; } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; } .fuss li a { font-size: 0.9063rem; color: var(--text-2); text-decoration: none; } .fuss li a:hover { color: var(--text); } .fuss__unten { margin-top: 3rem; padding-top: 1.375rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; font-size: 0.8125rem; color: var(--text-3); } .sprache { display: inline-flex; gap: 0.375rem; align-items: center; } .sprache a, .sprache span { padding: 0.1875rem 0.5rem; border-radius: 62.4375rem; text-decoration: none; } .sprache [aria-current='true'] { background: var(--karte-2); color: var(--text); border: 1px solid var(--linie); } .sprache small { font-size: 0.6875rem; } /* ---------- Dialoge ---------- */ dialog { border: 0; padding: 0; color: inherit; max-width: none; max-height: none; background: transparent; } dialog::backdrop { background: rgba(5, 7, 18, 0.72); backdrop-filter: blur(0.375rem); } .dialog__karte { position: relative; border-radius: 1.625rem; background: #ffffff; color: #0d1020; box-shadow: 0 2.5rem 7.5rem rgba(0, 0, 0, 0.45); overflow: hidden; } .dialog__zu { position: absolute; right: 0.875rem; top: 0.875rem; z-index: 3; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(13, 16, 32, 0.06); color: inherit; display: grid; place-items: center; cursor: pointer; } .dialog__zu:hover { background: rgba(13, 16, 32, 0.12); } .dialog__zu svg { width: 1.125rem; height: 1.125rem; } /* Demo */ .demodialog .dialog__karte { zoom: var(--dialog-zoom, 1); width: min(32rem, calc(100vw - 1.5rem)); max-height: calc(100svh - 1.5rem); overflow-y: auto; padding: clamp(1.25rem, 3.5vw, 1.875rem); } .demodialog h2 { font-size: 1.5rem; font-weight: 640; letter-spacing: -0.025em; line-height: 1.15; padding-right: 2.5rem; } .demodialog .unter { font-size: 0.875rem; line-height: 1.5; color: #4b5168; margin-top: 0.375rem; } .demo__fortschritt { display: flex; gap: 0.375rem; margin: 0.875rem 0 1.125rem; } .demo__fortschritt i { flex: 1; height: 0.25rem; border-radius: 0.25rem; background: #e6e8f0; } .demo__fortschritt i.ist-aktiv { background: var(--verlauf); } .demo__wahl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.375rem; } /* kompakte Auswahl-Pillen, Mehrfachauswahl */ .demo__wahl button { display: inline-flex; align-items: center; padding: 0.5625rem 0.9375rem; border-radius: 999px; border: 1.5px solid #e1e4ee; background: #fff; cursor: pointer; font-size: 0.875rem; font-weight: 560; color: #0d1020; transition: border-color var(--takt), background var(--takt); } .demo__wahl button:hover { border-color: #b9bfcc; } .demo__wahl button span { font-size: 0.8125rem; font-weight: 400; color: #636a83; } .demo__wahl button[aria-pressed='true'] { border-color: #45c4b0; background: #f2fbf7; box-shadow: 0 0 0 1px #45c4b0 inset; } .formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; } .feld { display: grid; gap: 0.375rem; } .feld--breit { grid-column: 1 / -1; } .feld label { font-size: 0.8438rem; font-weight: 560; color: #2b3048; } .feld label small { font-weight: 400; color: #6a7088; } .feld input, .feld select { height: 2.875rem; border-radius: 0.75rem; border: 1px solid #d3d7e3; background: #f8f9fc; padding: 0 0.8125rem; font: 400 0.9375rem var(--schrift); color: #0d1020; } .feld input:focus, .feld select:focus { outline: 0; border-color: #0d1020; background: #fff; } .feld input[aria-invalid='true'] { border-color: #b42318; } /* Website im Demo-Formular: besonderes Feld, weil daraus der eigene Styleguide-Entwurf entsteht */ .feld.feld--stil { gap: 0.75rem; padding: 1rem 1.125rem 1.125rem; border-radius: 1rem; background: linear-gradient(160deg, #e6f7f2 0%, #f3fbf9 100%); box-shadow: inset 0 0 0 1.5px #45c4b0, 0 0.75rem 1.75rem -1rem rgba(11, 120, 103, 0.45); } .feld--stil__kopf { display: flex; align-items: flex-start; gap: 0.75rem; } .feld--stil__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: #0b7867; color: #fff; } .feld--stil__icon svg { width: 1.25rem; height: 1.25rem; } .feld.feld--stil label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 650; color: #0d1020; } .feld--stil__marke { padding: 0.1875rem 0.5rem; border-radius: 999px; background: #0b7867; color: #fff; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; } .feld--stil p { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: #355b55; } .feld.feld--stil input { border-color: #9fdccf; background: #fff; } .feld.feld--stil input:focus { border-color: #0b7867; box-shadow: 0 0 0 3px rgba(69, 196, 176, 0.28); } /* kompakte Fassung im Demo-Dialog: Titel und Etikett in einer Zeile, kleinerer Text und kleineres Feld */ .feld.feld--stil-klein { position: relative; gap: 0.5rem; padding: 0.875rem 0.875rem 0.875rem; border-radius: 0.875rem; } .feld--stil-klein .feld--stil__kopf { gap: 0.625rem; align-items: center; } .feld--stil-klein .feld--stil__icon { width: 2rem; height: 2rem; border-radius: 0.5625rem; } .feld--stil-klein .feld--stil__icon svg { width: 1rem; height: 1rem; } .feld.feld--stil-klein label { font-size: 0.875rem; gap: 0.375rem; } .feld--stil-klein .feld--stil__marke { position: absolute; right: 0.875rem; top: 0; translate: 0 -50%; padding: 0.1875rem 0.5rem; font-size: 0.625rem; box-shadow: 0 0 0 2px #fff; } /* Etikett sitzt auf der Kante, spart eine Zeile */ .feld--stil-klein p { margin-top: 0.125rem; font-size: 0.75rem; } .feld.feld--stil-klein input { height: 2.5rem; } .feld__fehler { font-size: 0.7813rem; color: #b42318; } /* Einwilligung als flache graue Pille: die ganze Fläche ist klickbar, großer runder Haken links */ .feld--check { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.125rem 0.875rem 0.875rem; border: 1px solid transparent; border-radius: 1rem; background: #f2f3f6; font-size: 0.875rem; line-height: 1.45; color: #3c4258; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; } .feld--check:hover { background: #ebedf2; } .feld--check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .feld--check__haken { flex: none; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #fff; color: transparent; box-shadow: inset 0 0 0 1.5px #b8bdca, 0 1px 2px rgba(13, 16, 32, 0.08); transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1); } .feld--check__haken svg { width: 1.0625rem; height: 1.0625rem; } .feld--check:hover .feld--check__haken { color: #c3c8d4; } .feld--check input:checked + .feld--check__haken { background: #0b7867; color: #fff; box-shadow: 0 0.25rem 0.625rem -0.25rem rgba(11, 120, 103, 0.6); scale: 1.06; } .feld--check:has(input:checked) { background: #e8f6f2; border-color: #a9dfd3; } .feld--check input:focus-visible + .feld--check__haken { outline: 2px solid var(--mint); outline-offset: 2px; } .feld--check input[aria-invalid='true'] + .feld--check__haken { box-shadow: inset 0 0 0 1.5px #b42318; } .feld--check:has(input[aria-invalid='true']) { border-color: #f1c4bf; background: #fdf3f2; } .demo__aktionen { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } .demo__aktionen .knopf--primaer { --knopf-bg: #0d1020; --knopf-text: #fff; } .demo__aktionen .knopf--zweit { --text: #0d1020; --linie-stark: #d3d7e3; } .demo__hinweis { margin-top: 1rem; font-size: 0.75rem; color: #6a7088; } /* „Termin wählen“ über die ganze Breite; ohne Zustimmung ausgegraut */ .demo__aktionen--ende .knopf { width: 100%; justify-content: center; } .demodialog .feld__titel { font-size: 0.875rem; margin-bottom: 0.625rem; } .demodialog .demo__wahl { gap: 0.4375rem; margin-bottom: 1.125rem; } .demodialog .demo__wahl button { padding: 0.4375rem 0.8125rem; font-size: 0.8125rem; } .demodialog .formular { gap: 0.75rem; } .demodialog .feld { gap: 0.3125rem; } .demodialog .feld label { font-size: 0.8125rem; } .demodialog .feld input { height: 2.5rem; font-size: 0.875rem; border-radius: 0.625rem; } .demodialog .demo__aktionen { margin-top: 1.125rem; } .demodialog .knopf { font-size: 0.9375rem; } .demodialog .knopf:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; transform: none; } .demo__datenschutz { margin-top: 0.875rem; font-size: 0.8125rem; line-height: 1.5; color: #6a7088; } .demo__datenschutz span { display: block; margin-bottom: 0.25rem; color: #0b7867; font-weight: 560; } .demo__datenschutz span[hidden] { display: none; } .demo__datenschutz a { color: #0b7867; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; } /* Schritt 2: Calendly im Dialog, dafür wird die Karte breiter */ .demodialog .dialog__karte:has(.demo__schritt--termin:not([hidden])) { width: min(52rem, calc(100vw - 1.5rem)); } .demo__kalender { position: relative; min-height: 30rem; border-radius: 1rem; overflow: hidden; background: #ffffff; } .demo__kalender iframe { position: relative; display: block; width: 100%; height: 38rem; border: 0; opacity: 0; transition: opacity 300ms ease; } .demo__kalender.ist-geladen iframe { opacity: 1; } .demo__kalender-laden { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.875rem; color: #6a7088; } .demo__kalender.ist-geladen .demo__kalender-laden { display: none; } .demo__kalender-blockiert { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: #4b5168; } .demo__kalender-blockiert b { display: block; margin-bottom: 0.25rem; color: #0d1020; } .demo__kalender-blockiert .knopf { --knopf-bg: #0d1020; --knopf-text: #fff; } .demo__kalender.ist-blockiert .demo__kalender-blockiert { display: grid; } .demo__kalender.ist-blockiert iframe, .demo__kalender.ist-blockiert .demo__kalender-laden { display: none; } .demo__extern { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: #0b7867; text-decoration: none; } .demo__extern svg { width: 0.9rem; height: 0.9rem; } .demo__danke { display: grid; gap: 0.875rem; justify-items: start; } .demo__danke-symbol { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--verlauf); display: grid; place-items: center; color: #fff; } .demo__danke-symbol svg { width: 1.625rem; height: 1.625rem; } /* Film */ .filmdialog .dialog__karte { width: min(73.75rem, calc(100vw - 1.5rem)); max-height: calc(100svh - 1.5rem); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18.75rem, 0.85fr); background: #0b0e1e; color: #f3f5fb; } .filmdialog .dialog__zu { background: rgba(255, 255, 255, 0.1); color: #fff; } .film__buehne { background: #04050c; display: grid; place-items: center; padding: clamp(0.875rem, 2vw, 1.75rem); min-height: 0; position: relative; } .film__buehne video { max-width: 100%; max-height: calc(100svh - 7.5rem); border-radius: 0.875rem; background: #000; } .film__nav { position: absolute; inset: auto 1rem 1rem auto; display: flex; gap: 0.5rem; } .film__nav button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; cursor: pointer; } .film__nav button:hover { background: rgba(255, 255, 255, 0.14); } .film__nav svg { width: 1rem; height: 1rem; } .film__seite { padding: clamp(1.375rem, 2.6vw, 2rem); display: grid; gap: 1.125rem; align-content: start; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, 0.08); } .film__seite h2 { font-size: 1.625rem; font-weight: 640; letter-spacing: -0.03em; line-height: 1.1; padding-right: 2.25rem; } .film__meta { display: flex; flex-wrap: wrap; gap: 0.375rem; } .film__meta .chip { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); color: #c9cfe2; } .film__briefing { border-radius: 1rem; padding: 0.875rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.9063rem; line-height: 1.6; color: #dfe3f0; } .film__label { font-size: 0.7188rem; font-weight: 620; letter-spacing: 0.09em; text-transform: uppercase; color: #8be8d8; } .film__schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5625rem; } .film__schritte li { display: flex; gap: 0.625rem; font-size: 0.875rem; color: #c9cfe2; opacity: 0; transform: translateY(0.25rem); transition: opacity 300ms ease, transform 300ms var(--kurve); } .film__schritte li.ist-da { opacity: 1; transform: none; } .film__schritte svg { width: 1rem; height: 1rem; color: #45c4b0; flex: none; margin-top: 0.125rem; } .film__seite .knopf { justify-self: start; } /* ---------- Variantenleiste (nur Entwurf) ---------- */ .varianten { position: fixed; left: 50%; bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 0.25rem; padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem; border-radius: 62.4375rem; background: rgba(13, 16, 32, 0.88); color: #fff; box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); backdrop-filter: blur(0.75rem); font-size: 0.7813rem; max-width: calc(100vw - 1.5rem); } .varianten__label { color: #9aa3bf; margin-right: 0.375rem; white-space: nowrap; } .varianten a { min-width: 2rem; height: 2rem; padding: 0 0.625rem; border-radius: 62.4375rem; display: inline-grid; place-items: center; text-decoration: none; color: #dfe3f0; font-weight: 560; white-space: nowrap; } .varianten a:hover { background: rgba(255, 255, 255, 0.1); } .varianten a[aria-current='page'] { background: #fff; color: #0d1020; } /* ---------- Übersicht (Startseite der Entwürfe) ---------- */ .uebersicht-kopf { padding-top: calc(var(--kopf-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .uebersicht-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .entwurf { display: grid; gap: 0.875rem; text-decoration: none; color: inherit; } .entwurf__bild { border-radius: 1.375rem; overflow: hidden; aspect-ratio: 16 / 10; background: var(--karte-2); box-shadow: var(--schatten-gross); border: 1px solid var(--linie); } .entwurf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 700ms var(--kurve); } .entwurf:hover .entwurf__bild img { transform: scale(1.02); } .entwurf__text { display: grid; gap: 0.375rem; } .entwurf__titel { display: flex; align-items: center; gap: 0.625rem; font-size: 1.25rem; font-weight: 620; letter-spacing: -0.02em; } .entwurf__titel span { font-family: var(--serif); font-weight: 400; font-size: 1.625rem; color: var(--akzent-text); } .entwurf__text p { font-size: 0.9063rem; color: var(--text-2); max-width: 60ch; } .plan-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; } .plan-liste div { border-radius: 1.125rem; border: 1px solid var(--linie); padding: 1rem; background: var(--karte); display: grid; gap: 0.375rem; } .plan-liste b { font-size: 0.9375rem; } .plan-liste span { font-size: 0.8438rem; color: var(--text-2); } .plan-liste code { font: 500 0.75rem var(--mono); color: var(--text-3); } /* ---------- Responsiv ---------- */ @media (max-width: 1180px) { .kopf__nav a { padding: 0.5rem 0.5625rem; font-size: 0.875rem; } .studio__koerper { grid-template-columns: 11.875rem minmax(0, 1fr); } } @media (max-width: 1024px) { .kopf__nav { display: none; } .kopf__menue { display: inline-flex; } .held-1__gitter, .held-5__gitter, .labor-gitter, .tempo, .faq-gitter, .held-4__kopf, .abschnitt__kopf--breit { grid-template-columns: minmax(0, 1fr); } .band { margin-right: calc(-1 * var(--rand)); height: 27.5rem; } .schritte, .loesungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .enterprise-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vertrauen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vertrauen__punkt:nth-child(3) { border-left: 0; padding-left: 0; } .fuss__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fuss__marke { grid-column: 1 / -1; } .filmdialog .dialog__karte { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .film__seite { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .film__buehne video { max-height: 56svh; } .credits { grid-template-columns: minmax(0, 1fr); } .stilwand { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { :root { --kopf-h: 4rem; } .kopf__produkt { display: none; } .kopf__aktion .knopf { --h: 2.5rem; padding: 0 0.9375rem; font-size: 0.875rem; } .band { height: auto; display: grid; gap: 0.875rem; margin-right: 0; } .band__schritt, .band__material, .band__fluss { display: none; } .sg-karte { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 22.5rem; } .foerderband { position: relative; left: auto; top: auto; bottom: auto; height: 25rem; margin-inline: calc(-1 * var(--rand)); } .kachel-band--16x9 .kachel-band__medien { width: 8.5rem; } .kachel-band--9x16 .kachel-band__medien { width: 3.25rem; } .kachel-band--1x1 .kachel-band__medien { width: 5.25rem; } .kachel-band__label { font-size: 0.625rem; } .held-1__titel { font-size: clamp(2.375rem, 11vw, 3.5rem); } .schritte, .loesungen, .enterprise-gitter, .preise, .uebersicht-gitter, .plan-liste { grid-template-columns: minmax(0, 1fr); } .merkmale { grid-template-columns: minmax(0, 1fr); } .vertrauen__liste { grid-template-columns: minmax(0, 1fr); } .vertrauen__punkt { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); } .vertrauen__punkt:first-child { border-top: 0; } .formate, .triptychon { grid-template-columns: 16fr 9fr; } .formate figure:nth-child(1), .triptychon figure:nth-child(1) { grid-column: 1 / -1; } .stilwand { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stilwand__zelle:nth-child(n+9) { display: none; } .labor__ergebnis { grid-template-columns: minmax(0, 1fr); } .labor__zone { flex-wrap: wrap; } .labor__zone label { margin-left: 0; } .studio__koerper { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'mitte' 'stile' 'chat'; } .studio__stile { grid-template-columns: repeat(5, minmax(0, 1fr)); } .studio__stil { font-size: 0; gap: 0; } .studio__schritte { display: none; } .wand { grid-template-columns: repeat(2, 1fr); inset: -2% -30%; } .fuss__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demo__wahl, .formular { grid-template-columns: minmax(0, 1fr); } .briefing__trenner { display: none; } .varianten__label { display: none; } .galerie { columns: 2 10rem; column-gap: 0.75rem; } .kachel__briefing { display: none; } } /* ---------- Ruhige Bewegung ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .wand { animation: none; } } /* Nachträge */ .endung { display: inline-block; transition: opacity 240ms ease, transform 240ms var(--kurve); } .endung.ist-weg { opacity: 0; transform: translateY(-0.18em); } .nur-sr:focus-visible + .knopf, .nur-sr:focus-visible + .briefing__knopf { outline: 0.125rem solid var(--mint); outline-offset: 0.1875rem; } .briefing__url input { width: 100%; height: 2.625rem; border-radius: 0.75rem; border: 1px solid #d3d7e3; background: #f8f9fc; padding: 0 0.75rem; font: 400 0.9375rem var(--schrift); color: #0d1020; } .briefing__url input:focus { outline: 0; border-color: #0d1020; background: #fff; } .briefing__format { display: inline-flex; gap: 0.25rem; } .feld__titel { font-size: 0.9375rem; margin-bottom: 0.75rem; color: #0d1020; } .feld__titel small { color: #6a7088; font-weight: 400; } .demo__zaehler { font-size: 0.8125rem; color: #6a7088; } .demo__briefing { margin-top: 0.875rem; display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; color: #0b7867; } .demo__briefing svg { width: 1rem; height: 1rem; } .studio { position: relative; } .held-4__steuer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem; margin-bottom: 1.125rem; } .kopf__marke svg, .fuss__marke svg, .studio__marke svg { display: block; } .kachel__medien { display: block; } .kachel__format, .kachel__spielen { pointer-events: none; } /* ===================================================================== Variante 6 · Synthesia-Layout mit Mint-Design (Stand 10.10.2026) Hero im Verlauf mit Briefing-Feld, Beispielbibliothek mit Filter-Tags und Ausblendung (nach Poolday), drei Schrittkarten, Logo-Band, Demo-Karte in Teal, FAQ zweispaltig (nach Synthesia). ===================================================================== */ .seite.thema-hell { background: #ffffff; color: #0d1020; } .kopf[data-kopf='hell'] .kopf__marke svg { fill: var(--mint); } .kopf__nav a { font-size: 0.9375rem; } /* Verlauf: Jede Testversion setzt nur diese Tokens. Die Übergangsstufen hängen am unteren Rand, damit Bibliothekstitel und Kartenanfang auf jeder Bildschirmhöhe gleich liegen. */ /* Hero-Verlauf: Variante C (Teal → Grau) ist seit 10.10. Standard; A (Nachtblau → Violett) über :root[data-verlauf='a'] */ .held-6 { --v-himmel: linear-gradient(180deg, #0c5c58 0, #0e6a64 18%, #10766e calc(100% - 30rem), #138078 calc(100% - 22rem), #1a8c82 calc(100% - 14rem), #9fd9cf calc(100% - 7rem), #f4f5fa 100%); --v-licht-1: rgba(139, 232, 216, 0.34); --v-licht-2: rgba(44, 198, 226, 0.24); --v-serif: #e0fff9; background: #f4f5fa; color: #f3f5fb; } .held-6__himmel { position: relative; isolation: isolate; background: var(--v-himmel); padding: calc(var(--kopf-h) + clamp(2.75rem, 5vw, 5rem)) 0 12rem; } .held-6__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(36% 22% at 8% 40%, var(--v-licht-1), transparent 70%), radial-gradient(36% 22% at 94% 34%, var(--v-licht-2), transparent 70%); } .held-6__licht::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.4px); background-size: 1.125rem 1.125rem; background-position: center top; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 78%); opacity: 0.2; } .held-6__inhalt { display: grid; justify-items: center; text-align: center; gap: 1.5rem; } /* Desktop: Headline, Subline, Prozess und Knopf stehen als Block vertikal mittig im ersten Bildschirm (zwischen Kopf und unterem Rand); wird der Block höher als der Bildschirm, wächst die Fläche einfach mit. */ @media (min-width: 761px) { .held-6__himmel { padding-top: var(--kopf-h); } .held-6__inhalt { box-sizing: border-box; min-height: calc(100svh - var(--kopf-h)); align-content: center; padding-block: clamp(1.5rem, 4svh, 3rem); } } .held-6__pille { display: inline-flex; align-items: center; gap: 0.5rem; height: 1.875rem; padding: 0 0.8125rem 0 0.625rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: #e9ecf6; } .held-6__pille--siegel { border: 0; gap: 0.3125rem; height: 1.375rem; padding: 0 0.5625rem 0 0.25rem; font-size: 0.625rem; letter-spacing: 0.07em; } .held-6__pille--siegel .siegel { width: 0.9375rem; height: 0.9375rem; flex: none; } .held-6__pille--siegel .siegel--check { margin-left: -0.125rem; } .held-6__trenner { width: 1px; height: 0.6875rem; margin: 0 0.25rem 0 0.125rem; background: rgba(255, 255, 255, 0.28); } .held-6__titelrahmen { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; } .cursor-buehne { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } .nutzer-cursor { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; transition: opacity 400ms ease; } .nutzer-cursor.ist-bereit { opacity: 1; } .nutzer-cursor__innen { display: flex; align-items: flex-start; animation: cursor-schweben 6.5s ease-in-out infinite alternate; } .nutzer-cursor--jacques .nutzer-cursor__innen { animation-duration: 7.5s; animation-delay: -3s; } .nutzer-cursor svg { width: 0.875rem; height: 0.875rem; flex: none; filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.35)); transition: transform 160ms ease; } .nutzer-cursor.ist-klick svg { transform: scale(0.8); } .nutzer-cursor svg path { fill: var(--farbe); stroke: #ffffff; stroke-width: 1.8; stroke-linejoin: round; } .nutzer-cursor span { margin: 0.5625rem 0 0 -0.125rem; padding: 0.125rem 0.375rem 0.1875rem; border-radius: 0.3125rem; background: var(--farbe); color: #ffffff; font-size: 0.6875rem; font-weight: 640; line-height: 1.2; white-space: nowrap; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); } .nutzer-cursor--steffi { --farbe: #16994a; } .nutzer-cursor--jacques { --farbe: #e8481c; } @keyframes cursor-schweben { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(0.25rem, -0.375rem) rotate(-2deg); } 100% { transform: translate(-0.1875rem, 0.25rem) rotate(1.5deg); } } /* Fiktive Dateien, die Steffi und Jacques vom Rand holen und im Upload ablegen */ .flug-datei { position: absolute; left: 0; top: 0; width: 1.875rem; height: 2.375rem; will-change: transform, opacity; filter: drop-shadow(0 0.5rem 0.625rem color-mix(in srgb, var(--farbe) 50%, transparent)); } .flug-datei svg { width: 100%; height: 100%; display: block; overflow: visible; } @media (max-width: 1100px) { .cursor-buehne { display: none; } } @media (prefers-reduced-motion: reduce) { .nutzer-cursor__innen { animation: none; } } .held-6__titel { font-size: clamp(2.5rem, 5.3vw, 4.875rem); font-weight: 640; line-height: 1; letter-spacing: -0.045em; color: #fff; } .held-6__titel .zeile { display: block; } .am-stueck { white-space: nowrap; } @media (min-width: 900px) { .held-6__titel .zeile { white-space: nowrap; } } .held-6__titel .serif { font-size: 1.06em; letter-spacing: -0.02em; color: var(--v-serif); margin-top: 0.04em; } .held-6__unter { font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.6; color: rgba(234, 238, 252, 0.88); max-width: 62rem; text-wrap: balance; } /* auf dem Desktop ein Satz je Zeile */ .held-6__unter .held-6__thema { white-space: nowrap; } @media (max-width: 960px) { .held-6__umbruch { display: none; } } .held-6__unter strong { color: #fff; font-weight: 640; } .held-6__thema { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--takt), text-decoration-color var(--takt); } .held-6__thema:hover { color: var(--mint-hell); text-decoration-color: var(--mint-hell); } .held-6__hinweis { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.78); } /* Briefing-Feld */ .briefing--syn { width: min(100%, 48rem); margin-top: 0.375rem; padding: 1rem 1rem 0.75rem; border-radius: 1.25rem; color: #0d1020; } .briefing--syn::before { display: none; } .briefing--syn .briefing__feld { min-height: 5.75rem; font-size: 1rem; } .briefing__hochladen { display: inline-flex; align-items: center; gap: 0.5625rem; height: 2.25rem; padding: 0 0.75rem 0 0.5rem; border-radius: 0.625rem; background: #f2f4fa; font-size: 0.875rem; font-weight: 560; color: #2b3048; cursor: pointer; transition: background var(--takt); } .briefing__hochladen:hover { background: #e7eaf4; } /* Dateifächer: drei Dokumente wie ausgeteilte Karten (Mitte erhöht), beim Überfahren weiter aufgefächert */ .datei-faecher { position: relative; flex: none; width: 3.375rem; height: 2.25rem; margin: 0 0.125rem 0 -0.125rem; } .datei-faecher svg { position: absolute; top: 0.25rem; width: 1.375rem; height: 1.625rem; overflow: visible; transform-origin: 50% 100%; filter: drop-shadow(0 0.0625rem 0.15rem rgba(13, 16, 40, 0.2)); transition: transform 420ms var(--kurve); } .datei-faecher svg:nth-child(1) { left: 0; transform: rotate(-12deg); } .datei-faecher svg:nth-child(2) { left: 0.95rem; transform: translateY(-0.4375rem); } .datei-faecher svg:nth-child(3) { left: 1.9rem; transform: rotate(12deg); } .briefing__hochladen:hover .datei-faecher svg:nth-child(1), .briefing.ist-ziehen .datei-faecher svg:nth-child(1) { transform: translate(-0.125rem, -0.125rem) rotate(-20deg); } .briefing__hochladen:hover .datei-faecher svg:nth-child(2), .briefing.ist-ziehen .datei-faecher svg:nth-child(2) { transform: translateY(-0.6875rem); } .briefing__hochladen:hover .datei-faecher svg:nth-child(3), .briefing.ist-ziehen .datei-faecher svg:nth-child(3) { transform: translate(0.125rem, -0.125rem) rotate(20deg); } .held-6__unter strong .held-6__thema { font-weight: inherit; } /* Senden-Knopf: Kreis, beim Überfahren breiter mit „Buche 15 min Demo“ */ .briefing--syn .briefing__senden { margin-left: auto; width: auto; min-width: 2.5rem; height: 2.5rem; padding: 0 0.6875rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 0; background: #d9dce8; color: #fff; transition: background var(--takt) ease, box-shadow var(--takt) ease, padding 380ms var(--kurve), gap 380ms var(--kurve); } .briefing__senden-text { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 0.875rem; font-weight: 580; letter-spacing: -0.005em; transition: max-width 420ms var(--kurve), opacity 220ms ease; } .briefing--syn .briefing__senden svg { width: 1.125rem; height: 1.125rem; transition: transform 380ms var(--kurve); } .briefing--syn.ist-bereit .briefing__senden { background: #0d1020; } .briefing--syn .briefing__senden:hover, .briefing--syn .briefing__senden:focus-visible { background: #0d1020; padding: 0 0.75rem 0 1.125rem; gap: 0.5rem; box-shadow: 0 0 0 0.25rem rgba(69, 196, 176, 0.32); } .briefing--syn .briefing__senden:hover .briefing__senden-text, .briefing--syn .briefing__senden:focus-visible .briefing__senden-text { max-width: 12rem; opacity: 1; } .briefing--syn .briefing__senden:hover svg, .briefing--syn .briefing__senden:focus-visible svg { transform: rotate(90deg); } /* Hero, neue Version „Ablauf“ (10.10.): Briefing → Styleguide → Film-Export statt Chatfeld. Die vorherige Version mit Chatfeld bleibt über :root[data-held='chat'] erhalten (Umschalter unten links). */ .held-6 .briefing--syn, .held-6__hinweis { display: none; } :root[data-held='chat'] .held-6 .briefing--syn { display: grid; } :root[data-held='chat'] .held-6__hinweis { display: block; } :root[data-held='chat'] .held-ablauf, :root[data-held='chat'] .held-6__aktion { display: none; } /* Eine Einheit --e = 1/56 der Breite: alles skaliert mit, 1 e = 1 rem bei voller Breite. 2,5D wie die Prozessgrafik: .held-ablauf ist die Bühne mit Perspektive, .held-ablauf__raum dreht sich zur Maus (mint.js), die Stationen liegen in verschiedenen Tiefen (data-z), die Kanal-Icons ganz vorn. */ .held-ablauf { --e: calc(100cqw / 56); --karte-h: calc(var(--e) * 11.125); container-type: inline-size; width: min(100%, 56rem); margin-top: 0.375rem; perspective: 1500px; perspective-origin: 50% 40%; text-align: left; } .held-ablauf__raum { display: grid; grid-template-columns: 13fr 2.5fr 19fr 21.5fr; align-items: end; transform-style: preserve-3d; will-change: transform; } .held-ablauf__schritt, .held-ablauf__pfeil { transform-style: preserve-3d; will-change: translate; } .held-ablauf__schritt { display: grid; gap: calc(var(--e) * 0.6); min-width: 0; } .held-ablauf__label { display: inline-flex; align-items: center; gap: calc(var(--e) * 0.45); padding-left: calc(var(--e) * 0.3); font-size: max(0.6875rem, calc(var(--e) * 0.8125)); font-weight: 600; letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.6); transition: color 400ms ease; } .held-ablauf__label::before { content: ''; flex: none; width: calc(var(--e) * 0.42); height: calc(var(--e) * 0.42); border-radius: 50%; background: rgba(255, 255, 255, 0.32); transition: background 400ms ease, box-shadow 400ms ease; } .held-ablauf__schritt--briefing .held-ablauf__label, .held-ablauf__schritt.ist-an .held-ablauf__label { color: #ffffff; } .held-ablauf__schritt:has(.hat-bild) .held-ablauf__label::before, .held-ablauf__schritt.ist-an .held-ablauf__label::before { background: var(--mint-hell); box-shadow: 0 0 0 0.25em rgba(69, 196, 176, 0.25); } .held-ablauf__karte { position: relative; display: block; box-sizing: border-box; height: var(--karte-h); border-radius: calc(var(--e) * 1.25); background: #ffffff; color: #0d1020; box-shadow: 0 0.125rem 0.375rem rgba(13, 16, 40, 0.05), 0 1.25rem 3.5rem rgba(16, 20, 80, 0.3); } /* Hover: Karten und Filme wachsen sanft in rund einer Sekunde */ /* Hover über JS (Klasse .ist-ueber, mit Toleranz): CSS-:hover springt im gedrehten 3D-Raum an und aus */ .held-ablauf__drop.ist-ueber { scale: 1.05; } .held-ablauf__schritt.ist-an .held-ablauf__stil.ist-ueber { scale: 1.06; transition: scale 1s cubic-bezier(0.22, 1, 0.36, 1); } .held-ablauf__schritt.ist-an .held-ablauf__satz.ist-da .held-ablauf__film.ist-ueber { scale: 1.1; transition: scale 1s cubic-bezier(0.22, 1, 0.36, 1); } /* Die Mitte wartet als gestrichelter Platzhalter und ploppt auf, sobald sie dran ist */ .held-ablauf__stil { border: 1.5px dashed rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); box-shadow: none; scale: 0.9; transition: scale 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 260ms ease; } .held-ablauf__schritt.ist-an .held-ablauf__stil { border-width: 0; border-color: transparent; background: transparent; scale: 1; overflow: hidden; isolation: isolate; box-shadow: 0 1.25rem 3.5rem rgba(8, 10, 50, 0.35); transition: scale 620ms cubic-bezier(0.34, 1.56, 0.64, 1), background 160ms ease, border-color 160ms ease, box-shadow 400ms ease; } /* Briefing: echter Drop-Bereich aus Glas – gestrichelt, halbtransparent, weißer Ordner (ohne Kreis) mit Upload-Pfeil */ .held-ablauf__drop { width: 100%; padding: 0; font: inherit; text-align: center; cursor: pointer; color: #ffffff; border: 1.5px dashed rgba(255, 255, 255, 0.5); background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1.25rem 3rem rgba(8, 10, 50, 0.28); transition: scale 1s cubic-bezier(0.22, 1, 0.36, 1), border-color var(--takt) ease, background var(--takt) ease, box-shadow var(--takt) ease; } .held-ablauf__drop.ist-ueber, .held-ablauf__drop.ist-ziehen { border-color: var(--mint-hell); background: linear-gradient(160deg, rgba(139, 232, 216, 0.26), rgba(69, 196, 176, 0.1)); } .held-ablauf__drop.ist-ziehen { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 0.25rem rgba(69, 196, 176, 0.35), 0 1.25rem 3rem rgba(8, 10, 50, 0.3); } .held-ablauf__drop:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; } .held-ablauf__leer { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--e) * 0.3); padding: 0 calc(var(--e) * 0.6); transition: opacity 260ms ease, scale 260ms ease; } .held-ablauf__ordner { position: relative; display: grid; place-items: center; width: calc(var(--e) * 3.9); transition: scale 420ms var(--kurve); } .held-ablauf__ordner-bild { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 calc(var(--e) * 0.28) calc(var(--e) * 0.45) rgba(2, 38, 34, 0.45)); } .held-ablauf__ordner i { position: absolute; right: calc(var(--e) * -0.5); bottom: calc(var(--e) * -0.4); display: grid; place-items: center; width: calc(var(--e) * 1.5); height: calc(var(--e) * 1.5); border-radius: 50%; background: #0a5c55; color: #ffffff; box-shadow: 0 0 0 calc(var(--e) * 0.14) #ffffff, 0 calc(var(--e) * 0.15) calc(var(--e) * 0.4) rgba(2, 38, 34, 0.4); transition: translate 420ms var(--kurve); } .held-ablauf__ordner i svg { width: calc(var(--e) * 0.85); height: calc(var(--e) * 0.85); } .held-ablauf__drop.ist-ueber .held-ablauf__ordner, .held-ablauf__drop.ist-ziehen .held-ablauf__ordner { scale: 1.06; } .held-ablauf__drop.ist-ueber .held-ablauf__ordner i, .held-ablauf__drop.ist-ziehen .held-ablauf__ordner i { translate: 0 calc(var(--e) * -0.25); } .held-ablauf__drop-typen { position: absolute; left: 0; right: 0; bottom: calc(var(--e) * 0.85); font-size: max(0.625rem, calc(var(--e) * 0.62)); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); } .held-ablauf__drop.hat-bild .held-ablauf__leer { opacity: 0; scale: 0.92; } .held-ablauf__ablagen { position: absolute; inset: 0; pointer-events: none; } .held-ablauf__ablage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--e) * 0.6); opacity: 0; transition: opacity 260ms ease; } .held-ablauf__ablage.ist-da { opacity: 1; transition-duration: 90ms; } .held-ablauf__ablage small { max-width: calc(var(--e) * 11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(0.625rem, calc(var(--e) * 0.6875)); font-weight: 560; color: rgba(255, 255, 255, 0.82); } /* Abgelegtes Material: Bild mit Rahmen, Dateityp-Icon schräg oben links; Websites im Browserfenster */ .held-ablauf__datei { position: relative; display: block; width: calc(var(--e) * 10); border-radius: calc(var(--e) * 0.45); background: #ffffff; padding: calc(var(--e) * 0.18); rotate: -2deg; box-shadow: 0 calc(var(--e) * 0.45) calc(var(--e) * 1.2) rgba(8, 10, 40, 0.35); } .held-ablauf__datei img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--e) * 0.3); } .held-ablauf__datei--web { padding-top: calc(var(--e) * 0.75); } .held-ablauf__datei--web::before { content: ''; position: absolute; left: calc(var(--e) * 0.45); top: calc(var(--e) * 0.24); width: calc(var(--e) * 1.6); height: calc(var(--e) * 0.32); background: radial-gradient(circle at calc(var(--e) * 0.16) 50%, #ff6157 calc(var(--e) * 0.13), transparent calc(var(--e) * 0.15)), radial-gradient(circle at calc(var(--e) * 0.64) 50%, #ffc12f calc(var(--e) * 0.13), transparent calc(var(--e) * 0.15)), radial-gradient(circle at calc(var(--e) * 1.12) 50%, #2acb42 calc(var(--e) * 0.13), transparent calc(var(--e) * 0.15)); } .held-ablauf__datei--web::after { content: ''; position: absolute; left: calc(var(--e) * 2.4); right: calc(var(--e) * 1.2); top: calc(var(--e) * 0.2); height: calc(var(--e) * 0.4); border-radius: 999px; background: #eef0f6; } .held-ablauf__typ { position: absolute; left: calc(var(--e) * -0.95); top: calc(var(--e) * -1.05); width: calc(var(--e) * 2.1); rotate: -14deg; filter: drop-shadow(0 calc(var(--e) * 0.15) calc(var(--e) * 0.3) rgba(8, 10, 40, 0.35)); } .held-ablauf__typ svg { display: block; width: 100%; height: auto; overflow: visible; } .held-ablauf__drop.ist-landet .held-ablauf__ablage.ist-da .held-ablauf__datei { animation: ablage-landen 600ms cubic-bezier(0.3, 0.7, 0.2, 1) both; } @keyframes ablage-landen { from { opacity: 0; translate: 0 calc(var(--e) * -3); scale: 1.25; rotate: 6deg; } } /* Pfeil: gepunktet, ein Lichtpunkt läuft hinüber, danach bleibt der Weg in Mint */ .held-ablauf__pfeil { position: relative; height: var(--karte-h); display: grid; place-items: center; } .held-ablauf__pfeil i { position: relative; width: 70%; height: 3px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.1px, transparent 1.6px); background-size: 7px 3px; background-position: left center; animation: pfeil-punkte 1.1s linear infinite; } @keyframes pfeil-punkte { to { background-position: 7px center; } } .held-ablauf__pfeil i::after { content: ''; position: absolute; right: 0; top: 50%; width: calc(var(--e) * 0.55); height: calc(var(--e) * 0.55); border: solid rgba(255, 255, 255, 0.55); border-width: 2px 2px 0 0; border-radius: 1px; translate: 0 -50%; rotate: 45deg; transition: border-color 300ms ease; } .held-ablauf__pfeil i::before { content: ''; position: absolute; top: 50%; left: 0; width: calc(var(--e) * 0.6); height: calc(var(--e) * 0.6); margin: calc(var(--e) * -0.3) 0 0 calc(var(--e) * -0.3); border-radius: 50%; background: #c4fff4; box-shadow: 0 0 calc(var(--e) * 0.7) calc(var(--e) * 0.2) rgba(69, 196, 176, 0.85); opacity: 0; animation: pfeil-lauf 2.2s linear infinite; } .held-ablauf__pfeil.ist-an i { background-image: radial-gradient(circle, var(--mint-hell) 1.1px, transparent 1.6px); } .held-ablauf__pfeil.ist-an i::after { border-color: var(--mint-hell); } .held-ablauf__pfeil.ist-an i::before { animation: pfeil-puls 720ms cubic-bezier(0.45, 0, 0.25, 1) both, pfeil-lauf 2.2s linear 1.1s infinite; } @keyframes pfeil-puls { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* laufend: ein Lichtpunkt wandert immer wieder von links nach rechts über die Punkte (wie in der Prozessgrafik) */ @keyframes pfeil-lauf { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* Styleguide: das Reel des Stils, 16:9 */ /* Video randlos bis zur Kante, ohne Rahmen und ohne Kante */ .held-ablauf__stil video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: rgba(255, 255, 255, 0.08); opacity: 0; transition: opacity 200ms ease; } .held-ablauf__schritt.ist-an .held-ablauf__stil video.ist-da { opacity: 1; transition: opacity 260ms ease 120ms; } /* Film-Export ohne Karte: drei Filme frei im Raum (wie die Prozessgrafik), gepunktete Linien von der Styleguide-Karte, Kanal-Icons schräg angepinnt und weiter vorn. Vorher warten gestrichelte Platzhalter. */ .held-ablauf__schritt--export .held-ablauf__label { padding-left: calc(var(--e) * 8.4); } .held-ablauf__export { position: relative; height: var(--karte-h); transform-style: preserve-3d; } .held-ablauf__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .held-ablauf__linie { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 0.13; stroke-linecap: round; stroke-dasharray: 0 0.42; transition: stroke 400ms ease; animation: held-fluss 1.1s linear infinite; } @keyframes held-fluss { to { stroke-dashoffset: -0.42; } } .held-ablauf__schritt.ist-an .held-ablauf__linie { stroke: var(--mint-hell); } .held-ablauf__puls { fill: #c4fff4; opacity: 0; filter: drop-shadow(0 0 4px rgba(69, 196, 176, 0.95)); } @media (prefers-reduced-motion: reduce) { .held-ablauf__pfeil i, .held-ablauf__pfeil i::before, .held-ablauf__linie { animation: none; } } .held-ablauf__platz { position: absolute; box-sizing: border-box; border: 1.5px dashed rgba(255, 255, 255, 0.3); border-radius: calc(var(--e) * 0.55); background: rgba(255, 255, 255, 0.04); transition: opacity 300ms ease; } .held-ablauf__schritt.ist-an .held-ablauf__platz { opacity: 0; transition-delay: 200ms; } .held-ablauf__satz { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; } .held-ablauf__schritt.ist-an .held-ablauf__satz.ist-da { pointer-events: auto; } .held-ablauf__film { position: absolute; margin: 0; border-radius: calc(var(--e) * 0.55); background: #e9ecf4; transform-style: preserve-3d; box-shadow: 0 calc(var(--e) * 0.5) calc(var(--e) * 1.3) rgba(0, 0, 0, 0.35); opacity: 0; translate: calc(var(--e) * -1.5) 0; scale: 0.7; transition: opacity 200ms ease, translate 260ms ease, scale 260ms ease; } .held-ablauf__film video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .held-ablauf__schritt.ist-an .held-ablauf__satz.ist-da .held-ablauf__film { opacity: 1; translate: 0 0; scale: 1; transition: opacity 240ms ease calc(var(--i) * 130ms), translate 640ms cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--i) * 130ms), scale 640ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 130ms); } .held-ablauf__kanal { position: absolute; top: calc(var(--e) * -0.75); display: grid; place-items: center; width: calc(var(--e) * 1.9); height: calc(var(--e) * 1.9); border-radius: calc(var(--e) * 0.55); background: #ffffff; box-shadow: 0 calc(var(--e) * 0.2) calc(var(--e) * 0.6) rgba(0, 0, 0, 0.3); transform: translateZ(calc(var(--e) * 1.4)) rotate(var(--dreh, 0deg)); scale: 0.3; opacity: 0; transition: opacity 150ms ease, scale 200ms ease; } .held-ablauf__kanal--or { right: calc(var(--e) * -0.75); } .held-ablauf__kanal--ol { left: calc(var(--e) * -0.75); } .held-ablauf__kanal svg { width: calc(var(--e) * 1.3); height: calc(var(--e) * 1.3); } .held-ablauf__schritt.ist-an .held-ablauf__satz.ist-da .held-ablauf__kanal { scale: 1; opacity: 1; transition: scale 560ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(460ms + var(--i) * 130ms + var(--k, 0) * 90ms), opacity 200ms ease calc(460ms + var(--i) * 130ms + var(--k, 0) * 90ms); } /* Material, das ein Cursor vom Rand holt und trägt (gleiche Datei-Kachel wie im Drop-Bereich, kleiner) */ .flug-bild { --e: 0.55rem; position: absolute; left: 0; top: 0; width: 5.5rem; transform-origin: 50% 50%; will-change: transform, opacity; } .flug-bild .held-ablauf__datei { width: 100%; rotate: 0deg; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.4); } /* Demo-Knopf und Trailer-Link unter dem Ablauf */ .held-6__aktion { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem 1.5rem; width: 100%; margin-top: 0.5rem; } .held-6__aktion > .knopf { grid-column: 2; } /* Demo-Knopf genau mittig unter der Strecke, Trailer-Link rechts daneben */ .held-6__aktion > .held-6__trailer-link { grid-column: 3; justify-self: start; } .held-6__aktion .knopf { --knopf-bg: #ffffff; --knopf-text: #0b0e1e; } .held-6__aktion .held-6__trailer-link { margin-left: 0; font-size: 0.875rem; } .werkzeug button:not(:has(i)) { padding: 0 0.75rem; } /* Beispielbibliothek: starke Headline, Filter-Tags, Karten in Spalten, unten ausgeblendet */ .bibliothek__kopf { position: relative; display: grid; justify-items: center; text-align: center; gap: 1.75rem; margin-top: clamp(4.5rem, 7vw, 6.5rem); } .bibliothek__titel { font-size: clamp(1.875rem, 3.5vw, 3.25rem); font-weight: 620; line-height: 1.08; letter-spacing: -0.038em; color: #fff; } .bibliothek__titel span { display: block; color: rgba(255, 255, 255, 0.62); } .bibliothek__ueberschrift { display: grid; justify-items: center; gap: 1rem; } /* Überzeile in Versalien nur per CSS: im Text bleibt die Marke klein („Made with mint“) */ .bibliothek__kicker { font-size: 0.8125rem; font-weight: 620; letter-spacing: 0.18em; text-transform: uppercase; color: #bff3e9; } .bibliothek__tags { display: flex; gap: 0.25rem; padding: 0.3125rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(6, 8, 24, 0.28); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(0.625rem); } .bibliothek__tags::-webkit-scrollbar { display: none; } .bibliothek__tags button { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; font-weight: 540; white-space: nowrap; cursor: pointer; transition: background var(--takt), color var(--takt), box-shadow var(--takt); } .bibliothek__tags button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .bibliothek__tags button[aria-pressed='true'] { background: #fff; color: #0d1020; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.16); } .bibliothek__tags svg { width: 1.0625rem; height: 1.0625rem; } .held-6 > .rahmen { position: relative; margin-top: -9rem; padding-bottom: clamp(3.5rem, 6vw, 5.5rem); } .bibliothek { position: relative; } .bibliothek__fenster { position: relative; max-height: 64rem; overflow: hidden; } .bibliothek.ist-gekappt .bibliothek__fenster { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22rem), rgba(0, 0, 0, 0.35) calc(100% - 9rem), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 22rem), rgba(0, 0, 0, 0.35) calc(100% - 9rem), transparent 100%); } .bibliothek.ist-offen .bibliothek__fenster { max-height: none; -webkit-mask-image: none; mask-image: none; } .bibliothek__spalten { columns: 4 15rem; column-gap: 1rem; } .bibliothek__spalten > .bib-karte { break-inside: avoid; margin-bottom: 1rem; } .bibliothek__spalten.ist-verteilt { columns: auto; display: flex; gap: 1rem; align-items: flex-start; } .bibliothek__spalte { flex: 1 1 0; min-width: 0; display: grid; gap: 1rem; } .bibliothek__spalte > .bib-karte { margin: 0; } .bibliothek__mehr { display: none; justify-content: center; position: relative; z-index: 1; margin-top: -4.5rem; } .bibliothek.ist-gekappt:not(.ist-offen) .bibliothek__mehr { display: flex; } .bibliothek__mehr .knopf { background: #ffffff; color: #0d1020; border-color: #dfe2ec; box-shadow: 0 0.5rem 1.5rem rgba(13, 16, 40, 0.1); } .bibliothek__mehr .knopf:hover { background: #f4f5fa; } .bibliothek__fuss { margin-top: 2.25rem; text-align: center; font-size: 0.75rem; color: #aeb3c4; } /* bewusst blass (Wunsch 10.10.) */ .bib-karte { all: unset; box-sizing: border-box; container-type: inline-size; display: block; width: 100%; border-radius: 1rem; overflow: hidden; background: #ffffff; cursor: pointer; box-shadow: 0 1px 2px rgba(13, 16, 40, 0.06), 0 0.75rem 2rem rgba(30, 30, 90, 0.1); transition: transform 300ms var(--kurve), box-shadow 300ms ease; } .bib-karte:hover { transform: translateY(-0.1875rem); box-shadow: 0 2px 4px rgba(13, 16, 40, 0.06), 0 1.25rem 2.75rem rgba(30, 30, 90, 0.16); } .bib-karte:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; } .bib-karte__medien { position: relative; display: block; aspect-ratio: var(--ar); overflow: hidden; background: #e9ecf3; } .bib-karte__medien video { width: 100%; height: 100%; object-fit: cover; background: #e9ecf3; transition: transform 700ms var(--kurve); } .bib-karte:hover video { transform: scale(1.035); } .bib-karte__format { position: absolute; left: 0.625rem; top: 0.625rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 999px; background: rgba(8, 10, 24, 0.55); color: #fff; font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; backdrop-filter: blur(0.375rem); } .bib-karte__spielen { position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #0d1020; opacity: 0; transform: scale(0.85); transition: opacity var(--takt) ease, transform 300ms var(--kurve); } .bib-karte__spielen svg { width: 1.125rem; height: 1.125rem; margin-left: 0.125rem; } .bib-karte:hover .bib-karte__spielen, .bib-karte:focus-visible .bib-karte__spielen { opacity: 1; transform: none; } .bib-karte__fuss { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem 0.8125rem 0.75rem; } .bib-karte__symbol { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: grid; place-items: center; background: #f2f4fa; border: 1px solid #e6e8f0; color: #2b3048; } .bib-karte__symbol svg { width: 1.125rem; height: 1.125rem; } .bib-karte__text { flex: 1; min-width: 0; display: grid; gap: 0.125rem; } .bib-karte__text b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: #0d1020; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bib-karte__text span { font-size: 0.8125rem; color: #6a7088; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bib-karte__kat { flex: none; padding: 0.1875rem 0.5rem; border-radius: 999px; background: #f2f4fa; font-size: 0.75rem; font-weight: 560; color: #4b5168; } @container (max-width: 270px) { .bib-karte__kat { display: none; } } /* Produkttrailer: Desktop groß in „So geht’s“, Smartphone im Hero statt Briefing-Feld (wie synthesia.io/syren) */ .held-6__trailer-link { all: unset; display: inline-flex; align-items: center; gap: 0.3125rem; margin-left: 0.375rem; color: #fff; font-weight: 560; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 0.2em; } .held-6__trailer-link svg { width: 0.75rem; height: 0.75rem; } .held-6__trailer-link:hover { color: var(--mint-hell); } .held-6__trailer-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; } .held-6__mobil { display: none; } .wie__trailer { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .trailer { display: grid; gap: 0.75rem; } .trailer__buehne { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; border-radius: 1.625rem; overflow: hidden; isolation: isolate; background: #070a17; box-shadow: 0 1.875rem 5rem rgba(20, 20, 80, 0.25); } .trailer--mobil .trailer__buehne { border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35); } .trailer__start { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: block; cursor: pointer; background: radial-gradient(55% 75% at 88% 12%, rgba(123, 92, 255, 0.42), transparent 70%), radial-gradient(55% 70% at 8% 100%, rgba(139, 232, 216, 0.4), transparent 70%), linear-gradient(120deg, #0b4f4c 0%, #0f6a64 55%, #1a8c82 100%); } /* Mint wie Hero und Demo-Karte, oben rechts ein Hauch Violett */ .trailer__start:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; } .trailer__punkte { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.4px); background-size: 0.75rem 0.75rem; -webkit-mask-image: radial-gradient(50% 60% at 62% 45%, #000, transparent 75%); mask-image: radial-gradient(50% 60% at 62% 45%, #000, transparent 75%); } .trailer__chip { position: absolute; left: 5%; top: 7%; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.55em 1em; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: max(0.75rem, 1.6cqw); font-weight: 600; backdrop-filter: blur(0.5rem); } .trailer__chip svg { width: 0.9em; height: 0.9em; } .trailer__gross { position: absolute; left: 5%; bottom: 9%; font-size: 7.6cqw; font-weight: 640; line-height: 0.95; letter-spacing: -0.045em; color: #fff; } .trailer__gross .serif { color: #8be8d8; } .trailer__film { position: absolute; right: 5%; top: 14%; width: 37%; aspect-ratio: 16 / 9; border-radius: 1.2cqw; overflow: hidden; transform: perspective(70cqw) rotateY(-10deg); box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15); } .trailer__film video { width: 100%; height: 100%; object-fit: cover; } .trailer__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 9cqw; height: 9cqw; min-width: 3.5rem; min-height: 3.5rem; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; backdrop-filter: blur(0.5rem); transition: background var(--takt), color var(--takt), transform 300ms var(--kurve); } .trailer__play svg { width: 34%; height: 34%; margin-left: 6%; } .trailer__start:hover .trailer__play { background: var(--mint); color: #062e28; transform: translate(-50%, -50%) scale(1.06); } .trailer__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; } .trailer.ist-aktiv .trailer__start { display: none; } .trailer__hinweis { font-size: 0.75rem; color: var(--text-3, #6a7088); text-align: center; } .trailer--mobil .trailer__hinweis { color: rgba(255, 255, 255, 0.7); } .trailer__hinweis-ersatz, .trailer.ist-ersatz .trailer__hinweis-yt { display: none; } .trailer.ist-ersatz .trailer__hinweis-ersatz { display: inline; } /* So geht’s: drei große Schrittkarten */ .wie__kopf .abschnitt__titel { font-size: clamp(2.125rem, 3.4vw, 3rem); } .wie__schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem); } /* So funktioniert: drei Karten im Stil hochwertiger App-Karten (Referenz 11.10.): Überschrift in der Karte, ein schwebendes Objekt. Karten in mint-Farben (kräftige Türkis-Verläufe von dunkel oben nach hell unten), nur der fiktive Kunde „Feldkreis“ zeigt Grün- und Erdtöne; Keyvisual = creamAI-Foto (Nano Banana 2.1 Edit auf eigener Komposition) + Vektoren, Quellen in werkzeuge/wie-karten/. Kachel 2 baut eine Szene auf, Kachel 3 zeigt eine Änderung. */ .wk2 { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); aspect-ratio: 3 / 4; padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.375rem, 2vw, 1.75rem) clamp(1.25rem, 1.8vw, 1.625rem); border-radius: clamp(1.5rem, 2.4vw, 2.25rem); /* eigene Maße in rem: cqw gilt hier noch für den äußeren Container */ color: #fff; box-shadow: 0 1.75rem 3rem -1.75rem rgba(6, 50, 46, 0.45); } .wk2::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 55% at 0% 0%, rgba(255, 255, 255, 0.14), transparent 62%), radial-gradient(90% 60% at 100% 100%, rgba(139, 232, 216, 0.28), transparent 70%); pointer-events: none; } .wk2--1 { background: linear-gradient(180deg, #0c5c58 0%, #138078 48%, #4fc6b5 100%); } .wk2--2 { background: linear-gradient(180deg, #0e6a64 0%, #1a948a 50%, #8ae2d4 100%); } .wk2--3 { background: linear-gradient(180deg, #0b544f 0%, #12786f 50%, #3bb5a5 100%); } .wk2__text { display: grid; gap: 2.4cqw; align-content: start; } .wk2__nr { font-size: clamp(0.6875rem, 3cqw, 0.8125rem); font-weight: 620; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .wk2 h3 { font-size: clamp(1.375rem, 7.4cqw, 2.125rem); font-weight: 620; line-height: 1.05; letter-spacing: -0.03em; color: #fff; } .wk2 p { font-size: clamp(0.875rem, 4.1cqw, 1.0625rem); line-height: 1.5; color: rgba(255, 255, 255, 0.82); } .wk2__objekt { position: relative; display: grid; place-items: center; min-height: 0; margin-block: 4cqw 1cqw; } @keyframes wk2-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.8cqw; } } /* Kachel 1: schwebendes Mini-Styleguide aus dem echten Stil „Feldkreis“ (Farben, Schrift, Form, Bewegung als echter Clip, Layouts); die Bausteine erscheinen nacheinander, als würde mint sie gerade festhalten */ @font-face { font-family: 'Stil Figtree'; font-weight: 300 900; font-display: swap; src: url(../fonts/stile/figtree-vf.woff2) format('woff2'); } .fk-blatt { display: grid; gap: 2.4cqw; width: 76cqw; padding: 4cqw 4.4cqw 4.6cqw; border-radius: 3.4cqw; background: #F3EEE4; color: #134A47; font-family: 'Stil Figtree', var(--schrift); rotate: -4deg; box-shadow: 0 7cqw 13cqw -3cqw rgba(3, 30, 26, 0.6); animation: wk2-schweben 7s ease-in-out infinite; } .fk-blatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding-bottom: 2.4cqw; border-bottom: 1px solid rgba(19, 74, 71, 0.16); } .fk-blatt__marke { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: 3.6cqw; font-weight: 650; letter-spacing: -0.02em; } .fk-blatt__marke svg { width: 4.2cqw; height: 4.2cqw; } .fk-blatt__kopf small { font-size: 2.1cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6D9678; } .fk-blatt__titel { font-size: 2.2cqw; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: #6D9678; margin-bottom: -1cqw; } .fk-blatt__farben { display: flex; gap: 1.5cqw; } .fk-blatt__farben i { width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: var(--f); box-shadow: inset 0 0 0 1px rgba(19, 74, 71, 0.14); } .fk-blatt__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; } .fk-blatt__zelle { display: grid; justify-items: start; align-content: center; gap: 0.8cqw; min-height: 17cqw; padding: 2cqw 2.4cqw; border-radius: 2.2cqw; background: #fff; } .fk-blatt__zelle small { font-size: 2.2cqw; font-weight: 550; color: #6D9678; } .fk-blatt__aa { font-size: 8.4cqw; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #134A47; } .fk-blatt__form { width: 9.4cqw; height: 9.4cqw; } .fk-blatt__layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; } .fk-blatt__layouts img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 1.2cqw; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(19, 74, 71, 0.45); } .fk-blatt__farben i, .fk-blatt__zelle, .fk-blatt__layouts img { animation: fk-auf 11s calc(var(--i) * 0.14s) cubic-bezier(0.22, 1, 0.36, 1) infinite both; } @keyframes fk-auf { 0%, 3% { opacity: 0; scale: 0.6; } 9%, 93% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 0.9; } } .fk-blatt__zelle--film { position: relative; overflow: hidden; padding: 0; background: #134A47; } .fk-blatt__zelle--film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fk-blatt__zelle--film small { position: absolute; left: 2cqw; top: 1.6cqw; font-size: 1.9cqw; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: #9CCB94; } /* Szene im Feldkreis-Stil (Kachel 2 und 3) */ .wk2__szene { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 3cqw; overflow: hidden; box-shadow: 0 6cqw 12cqw -3cqw rgba(4, 30, 28, 0.6); } .wk2--2 .wk2__szene { rotate: -3deg; translate: 0 -12%; } .wk2__szene video { display: block; width: 100%; height: 100%; object-fit: cover; } .fk-szene { display: block; width: 100%; height: 100%; } .fk-kicker { font: 500 4.6px 'Stil Figtree', var(--schrift); fill: #9CCB94; } .fk-titel { font: 500 14.5px 'Stil Figtree', var(--schrift); letter-spacing: -0.15px; fill: #E7F4DA; } .fk-akzent { fill: #F4DEAD; } .fk-zeile { font: 400 5px 'Stil Figtree', var(--schrift); fill: #BFD8C6; } .wk2__briefing { position: absolute; left: 3%; right: 3%; bottom: -2%; display: grid; gap: 2.2cqw; padding: 3.2cqw 3.6cqw; border-radius: 4cqw; background: #fff; color: #4b5168; font-size: 3.4cqw; line-height: 1.45; text-align: left; box-shadow: 0 5cqw 10cqw -3cqw rgba(4, 30, 28, 0.5); } .wk2__briefing-fuss { display: flex; justify-content: space-between; align-items: center; } .wk2__anhang { display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 2.2cqw; border-radius: 2cqw; background: #f1f3f7; font-size: 3cqw; font-weight: 560; color: #2b3048; } .wk2__anhang svg { width: 3cqw; height: 3cqw; } .wk2__senden { display: grid; place-items: center; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: #0b7867; color: #fff; } .wk2__senden svg { width: 3.2cqw; height: 3.2cqw; } /* Kachel 2: Briefing wird abgeschickt, darüber läuft die echte Titelszene aus dem Stil */ .wk2--2 .wk2__senden { animation: wk2-senden 8s ease-in-out infinite; } @keyframes wk2-senden { 0%, 6%, 16%, 100% { scale: 1; } 10% { scale: 0.86; } } /* Kachel 3: Editor mit drei Szenen des echten Stils. Szene für Szene: Wunsch im Chat, mint tippt, die Szene ändert sich (Kreis größer, Text getauscht, Zahl geändert), Bestätigung, Haken in der Szenenleiste. Drei verschiedene Layouts des Stils: Titel (Kreisfenster), Prozess (Bogen mit Stationen), Kennzahl (Ring mit Zahl). Ablauf steuert mint.js. */ .fs { display: grid; align-content: center; justify-items: stretch; place-items: center stretch; gap: 0; } .fs-editor { display: grid; gap: 1.6cqw; padding: 1.8cqw; border-radius: 3.4cqw; background: #fff; box-shadow: 0 6cqw 12cqw -3cqw rgba(4, 30, 28, 0.55); } .fs-buehne { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 1.8cqw; overflow: hidden; background: #134A47; } .fs-szene { position: absolute; inset: 0; opacity: 0; scale: 1.03; transition: opacity 520ms ease, scale 900ms cubic-bezier(0.22, 1, 0.36, 1); } .fs-szene.ist-da { opacity: 1; scale: 1; } .fs-titel { font: 500 12px 'Stil Figtree', var(--schrift); letter-spacing: -0.15px; fill: #E7F4DA; } .fs-punkte circle { fill: #F4DEAD; } .fs-nummern text { font: 600 4.4px 'Stil Figtree', var(--schrift); fill: #134A47; text-anchor: middle; } .fs-stationen text { font: 600 5.4px 'Stil Figtree', var(--schrift); fill: #E7F4DA; text-anchor: middle; } .fs-stationen-unter text { font: 400 4.2px 'Stil Figtree', var(--schrift); fill: #BFD8C6; text-anchor: middle; } .fs-zahl { font: 500 40px 'Stil Figtree', var(--schrift); letter-spacing: -0.5px; fill: #F4DEAD; font-variant-numeric: tabular-nums; } .fs-prozent { font: 500 16px 'Stil Figtree', var(--schrift); fill: #E7F4DA; } .fs-erklaerung text { font: 400 6.3px 'Stil Figtree', var(--schrift); fill: #E7F4DA; } .fs-ring { stroke-dasharray: 100; stroke-dashoffset: 15; transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1); } .fs-szene.ist-geaendert .fs-ring { stroke-dashoffset: 10; } .fs-sonne { transform-box: view-box; transform-origin: 160px 90px; transition: rotate 900ms cubic-bezier(0.22, 1, 0.36, 1); } .fs-szene.ist-geaendert .fs-sonne { rotate: 18deg; } .fs-kreis { transform-box: view-box; transform-origin: 250px 93px; transition: transform 800ms cubic-bezier(0.34, 1.4, 0.5, 1); } .fs-szene.ist-geaendert .fs-kreis { transform: scale(1.16); } .fs-alt, .fs-neu { transition: opacity 380ms ease, translate 520ms cubic-bezier(0.22, 1, 0.36, 1); } .fs-neu { opacity: 0; translate: 0 5px; } .fs-szene.ist-geaendert .fs-alt { opacity: 0; translate: 0 -5px; } .fs-szene.ist-geaendert .fs-neu { opacity: 1; translate: 0 0; transition-delay: 160ms; } .fs-marker { fill: #F4DEAD; opacity: 0; transform-box: fill-box; transform-origin: left center; scale: 0 1; } .fs-szene.ist-geaendert .fs-marker { animation: fs-markieren 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes fs-markieren { 0% { opacity: 0.32; scale: 0 1; } 35% { opacity: 0.32; scale: 1 1; } 100% { opacity: 0; scale: 1 1; } } .fs-leiste { display: flex; gap: 1.4cqw; } .fs-mini { position: relative; width: 15cqw; aspect-ratio: 16 / 9; border-radius: 1cqw; overflow: hidden; opacity: 0.55; box-shadow: 0 0 0 0.35cqw transparent; transition: opacity 300ms ease, box-shadow 300ms ease; } .fs-mini img { display: block; width: 100%; height: 100%; object-fit: cover; } .fs-mini b { position: absolute; left: 0.8cqw; top: 0.7cqw; display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: rgba(13, 16, 32, 0.6); color: #fff; font-size: 1.9cqw; font-weight: 650; transition: background 300ms ease; } .fs-mini.ist-aktiv { opacity: 1; box-shadow: 0 0 0 0.35cqw #0b7867; } .fs-mini.ist-fertig { opacity: 1; } .fs-mini.ist-fertig b { background: #0b7867; font-size: 0; } .fs-mini.ist-fertig b::after { content: ''; width: 1.5cqw; height: 0.8cqw; margin-top: -0.3cqw; border: solid #fff; border-width: 0 0 0.45cqw 0.45cqw; rotate: -45deg; } .fs-chat { display: grid; justify-items: start; gap: 1.4cqw; margin-top: -2cqw; padding-inline: 1cqw; min-height: 21cqw; align-content: start; } /* Wunsch rechts, darunter die Antwort links: nie übereinander */ .fs-blase { justify-self: end; max-width: 66cqw; padding: 2.2cqw 3.2cqw; border-radius: 3.2cqw 3.2cqw 1cqw 3.2cqw; background: #0d1020; color: #fff; font-size: 3.3cqw; line-height: 1.35; box-shadow: 0 3cqw 8cqw -2cqw rgba(0, 0, 0, 0.4); opacity: 0; translate: 0 1.5cqw; transition: opacity 320ms ease, translate 420ms cubic-bezier(0.22, 1, 0.36, 1); } .fs-antwort { display: inline-flex; align-items: center; gap: 1.6cqw; padding: 2cqw 2.8cqw; border-radius: 3.2cqw 3.2cqw 3.2cqw 1cqw; background: #fff; color: #0b7867; font-size: 3.3cqw; font-weight: 600; box-shadow: 0 3cqw 8cqw -2cqw rgba(0, 0, 0, 0.3); opacity: 0; translate: 0 1.5cqw; transition: opacity 320ms ease, translate 420ms cubic-bezier(0.22, 1, 0.36, 1); } .fs-antwort svg { width: 3.2cqw; height: 3.2cqw; } .fs-blase.ist-da, .fs-antwort.ist-da { opacity: 1; translate: 0 0; } .fs-tippen { display: none; gap: 0.9cqw; padding-block: 1.2cqw; } .fs-tippen i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #0b7867; animation: fs-tippen 900ms ease-in-out infinite; } .fs-tippen i:nth-child(2) { animation-delay: 150ms; } .fs-tippen i:nth-child(3) { animation-delay: 300ms; } @keyframes fs-tippen { 0%, 60%, 100% { opacity: 0.3; translate: 0 0; } 30% { opacity: 1; translate: 0 -0.6cqw; } } .fs-antwort.ist-tippt .fs-tippen { display: inline-flex; } .fs-antwort.ist-tippt svg, .fs-antwort.ist-tippt .fs-antwort__text { display: none; } @media (prefers-reduced-motion: reduce) { .wk2, .wk2 * { animation: none !important; } } @media (max-width: 900px) { .wk2 { aspect-ratio: auto; min-height: 31rem; } } /* gestapelt: Höhe aus dem Inhalt, nie breiter als die Spalte */ /* Vertrauen: Zeile + kleines Logo-Band */ .syn-vertrauen { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid #eceef4; text-align: center; overflow: hidden; } .syn-vertrauen__zeile { font-size: 0.8125rem; font-weight: 560; line-height: 1.6; letter-spacing: 0.16em; text-transform: uppercase; color: #6a7088; margin-bottom: 1.75rem; } .logo-band { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .logo-band__spur { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; gap: 4.5rem; animation: logo-lauf 46s linear infinite; } .logo-band:hover .logo-band__spur { animation-play-state: paused; } .logo-band__spur li { flex: none; display: flex; align-items: center; height: 2.5rem; color: #9399af; transition: color var(--takt); } .logo-band__spur li:hover { color: #0d1020; } @keyframes logo-lauf { to { transform: translateX(calc(-50% - 2.25rem)); } } .syn-vertrauen__hinweis { margin-top: 1.25rem; font-size: 0.75rem; color: #9aa0b5; } .lg { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.375rem; font-weight: 700; line-height: 1; white-space: nowrap; } .lg svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } .lg-nordwerk { gap: 0; font-size: 1.125rem; letter-spacing: 0.22em; } .lg-nordwerk i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; margin-left: -0.125rem; align-self: flex-start; } .lg-roesterei { font-family: 'Stil Collage Serif', Georgia, serif; font-weight: 400; font-size: 1.5rem; } .lg-halden { font-family: 'Stil Werkhalle', var(--schrift); letter-spacing: 0.06em; } .lg-kontor { gap: 0.125rem; font-family: 'Stil Kupfer', Georgia, serif; font-weight: 600; font-size: 1.625rem; letter-spacing: -0.01em; } .lg-kontor sup { font: 700 0.5em/1 var(--schrift); margin-left: 0.125rem; align-self: flex-start; } .lg-licht { font-family: 'Stil Licht', var(--schrift); font-weight: 300; font-size: 1.5rem; letter-spacing: 0.02em; } .lg-campus { font-size: 1.125rem; font-weight: 800; letter-spacing: 0.04em; } .lg-berg { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.75rem; } .lg-velto { gap: 0; font-size: 1.75rem; font-weight: 760; letter-spacing: -0.05em; } .lg-velto i { font-style: normal; } /* Demo-Karte in Teal auf gepunktetem Grund (nach Poolday) */ .syn-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 6vw, 5.5rem); } .syn-cta__raster { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(13, 16, 32, 0.2) 1px, transparent 1.2px); background-size: 0.375rem 0.625rem; -webkit-mask-image: radial-gradient(64% 62% at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(64% 62% at 50% 50%, #000 10%, transparent 75%); } .syn-cta { /* Verlauf der Demo-Karte (Mint, seit 11.10. heller wie der Hero): hier die Farben ändern (oben → unten, dazu die Lichtflecken von unten) */ --cta-nacht: #0c5c58; --cta-tief: #0e6a64; --cta-indigo: #12786f; --cta-blau: #1a8c82; --cta-violett: #5fd8c4; --cta-licht: #effffb; --cta-akzent: #2a9cab; --cta-koernung: 0.78; } /* frühere Variante „Blau und Violett“ */ :root[data-cta='blau'] .syn-cta { --cta-nacht: #06021a; --cta-tief: #13024a; --cta-indigo: #1c06b0; --cta-blau: #3214e6; --cta-violett: #8a3ff2; --cta-licht: #eee2ff; --cta-akzent: #5a0f6e; } .syn-cta__karte { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 1.125rem; padding: clamp(3rem, 5.5vw, 4.75rem) clamp(1.5rem, 4vw, 3rem) clamp(5.5rem, 8.5vw, 8rem); border-radius: 1.75rem; color: #fff; /* seit 11.10.: wie die Prozessgrafik – oben Türkis (links) und etwas Blau-Violett (rechts), nach unten ins Dunkle */ background: radial-gradient(75% 95% at 14% 0%, rgba(69, 196, 176, 0.72), transparent 72%), radial-gradient(70% 95% at 88% 0%, rgba(104, 88, 255, 0.55), transparent 72%), linear-gradient(180deg, #0f5e60 0%, #0c3f48 42%, #08182a 76%, #070a17 100%); box-shadow: 0 2rem 5rem rgba(6, 40, 44, 0.3); } /* Lichtflecken: sechs weiche Ellipsen mit eigenem Tempo, dadurch wird die Kante des hellen Bands unruhig und wandert */ .syn-cta__glut { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .syn-cta__glut i { position: absolute; border-radius: 50%; will-change: transform; animation: ease-in-out infinite alternate; } .syn-cta__glut i:nth-child(1) { left: 20%; width: 80%; top: 22%; height: 50%; opacity: 0.55; background: radial-gradient(closest-side, var(--cta-akzent), transparent); animation-name: cta-fleck-a; animation-duration: 13s; } .syn-cta__glut i:nth-child(2) { left: -25%; width: 70%; bottom: -2%; height: 62%; opacity: 0.85; background: radial-gradient(closest-side, var(--cta-blau), color-mix(in srgb, var(--cta-blau) 40%, transparent) 60%, transparent); animation-name: cta-fleck-b; animation-duration: 9s; } .syn-cta__glut i:nth-child(3) { left: -50%; right: -50%; bottom: -40%; height: 74%; background: radial-gradient(closest-side, var(--cta-violett) 0%, color-mix(in srgb, var(--cta-violett) 60%, transparent) 55%, transparent 100%); animation-name: cta-fleck-c; animation-duration: 7s; } .syn-cta__glut i:nth-child(4) { left: -8%; width: 62%; bottom: -24%; height: 46%; background: radial-gradient(closest-side, var(--cta-licht) 0%, var(--cta-licht) 30%, color-mix(in srgb, var(--cta-licht) 45%, transparent) 62%, transparent 100%); animation-name: cta-fleck-d; animation-duration: 6s; } .syn-cta__glut i:nth-child(5) { left: 44%; width: 66%; bottom: -27%; height: 42%; background: radial-gradient(closest-side, var(--cta-licht) 0%, var(--cta-licht) 25%, color-mix(in srgb, var(--cta-licht) 40%, transparent) 60%, transparent 100%); animation-name: cta-fleck-e; animation-duration: 8s; } .syn-cta__glut i:nth-child(6) { left: 28%; width: 46%; bottom: -10%; height: 38%; opacity: 0.8; background: radial-gradient(closest-side, var(--cta-violett), transparent); animation-name: cta-fleck-f; animation-duration: 5s; } /* Lichtflecken nur noch oben (Türkis und Blau-Violett wandern langsam), das helle Band unten entfällt */ .syn-cta__glut i:nth-child(n+3) { display: none; } .syn-cta__glut i:nth-child(1) { left: -12%; width: 72%; top: -38%; bottom: auto; height: 86%; opacity: 0.55; background: radial-gradient(closest-side, rgba(69, 196, 176, 0.95), transparent); } .syn-cta__glut i:nth-child(2) { left: 46%; right: auto; width: 66%; top: -40%; bottom: auto; height: 84%; opacity: 0.45; background: radial-gradient(closest-side, rgba(104, 88, 255, 0.9), transparent); animation-name: cta-fleck-e; } @keyframes cta-fleck-a { from { transform: translate3d(-12%, 6%, 0) scale(0.9); } to { transform: translate3d(14%, -8%, 0) scale(1.15); } } @keyframes cta-fleck-b { from { transform: translate3d(-6%, 12%, 0) scale(0.92, 0.85); } to { transform: translate3d(32%, -6%, 0) scale(1.12, 1.1); } } @keyframes cta-fleck-c { from { transform: translate3d(-4%, 9%, 0) scale(1, 0.88); } to { transform: translate3d(4%, -7%, 0) scale(1.06, 1.12); } } @keyframes cta-fleck-d { from { transform: translate3d(-10%, 14%, 0) scale(0.9, 0.8) rotate(-4deg); } to { transform: translate3d(22%, -6%, 0) scale(1.1, 1.15) rotate(3deg); } } @keyframes cta-fleck-e { from { transform: translate3d(12%, -4%, 0) scale(1.08, 1.12) rotate(4deg); } to { transform: translate3d(-24%, 12%, 0) scale(0.9, 0.82) rotate(-3deg); } } @keyframes cta-fleck-f { from { transform: translate3d(-40%, 6%, 0) scale(0.85); } to { transform: translate3d(50%, -10%, 0) scale(1.2); } } /* Körnung über allem: grobes und feines Rauschen, im hellen Teil am stärksten */ .syn-cta__karte::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--cta-koernung); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 15rem 15rem, 11.25rem 11.25rem; } .syn-cta h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: #fff; } .syn-cta__unter { font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 36rem; } .syn-cta .knopf--primaer { --knopf-bg: #ffffff; --knopf-text: #0b0e1e; margin-top: 0.75rem; } .syn-cta .knopf--primaer:hover { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.22), 0 0.75rem 2rem rgba(10, 0, 60, 0.35); } .syn-cta__fakten { list-style: none; margin: 0.375rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.25); } .syn-cta__fakten li { display: inline-flex; align-items: center; gap: 0.4375rem; } .syn-cta__fakten svg { width: 1rem; height: 1rem; color: var(--mint-hell); } @media (prefers-reduced-motion: reduce) { .syn-cta__glut i { animation: none; } } /* FAQ zweispaltig (nach Synthesia) */ /* FAQ als weiße Karte auf weichem Mint-Verlauf: Marke „FAQ“, Titel, Einleitung, darunter zwei Spalten mit Fragen (Frage-Icon, Etikett, Pfeil). Offene Frage leicht mint getönt, Öffnen weich animiert (wo der Browser es kann). */ .syn-faq { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4.5rem, 8vw, 7rem); background: radial-gradient(60% 80% at 100% 0%, rgba(69, 196, 176, 0.35), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(139, 232, 216, 0.28), transparent 70%), linear-gradient(120deg, #f4f6f8 0%, #e6f6f1 55%, #c9eee5 100%); } .syn-faq__karte { padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 4.5vw, 4rem) clamp(1.75rem, 4vw, 3.25rem); border-radius: clamp(1.5rem, 2.5vw, 2.25rem); background: #ffffff; box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.45), 0 2rem 4.5rem -1.5rem rgba(6, 60, 54, 0.28); } .syn-faq__kopf { display: grid; justify-items: start; gap: 0.875rem; max-width: 46rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } .syn-faq__marke { padding: 0.3125rem 0.75rem; border-radius: 999px; background: #e3f6f1; color: #0b7867; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.04em; } .syn-faq__titel { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.035em; } .syn-faq__lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); } .syn-faq__lead a, .syn-faq__lead button { all: unset; cursor: pointer; font-weight: 600; color: #0b7867; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .syn-faq__lead a:hover, .syn-faq__lead button:hover { color: #0d1020; } .syn-faq__lead button:focus-visible, .syn-faq__lead a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 0.25rem; } .syn-faq__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .syn-faq__spalte { border-top: 1px solid #e6e9ef; } .syn-faq__liste details { border-bottom: 1px solid #e6e9ef; transition: background 260ms ease; } /* gerade Trennlinien; nur die offene Frage ist gerundet */ .syn-faq__liste details[open] { border-radius: 0.875rem; background: #f2faf8; border-bottom-color: transparent; } .syn-faq__liste summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; padding: 1.125rem 1rem; font-size: 1.0313rem; font-weight: 600; letter-spacing: -0.01em; color: #0d1020; border-radius: 0.875rem; transition: background 200ms ease; } .syn-faq__liste summary::-webkit-details-marker { display: none; } .syn-faq__liste summary:hover { background: #f6f9f9; } .syn-faq__liste details[open] summary:hover { background: transparent; } .syn-faq__liste summary:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; } .syn-faq__liste summary > svg:first-child { width: 1.375rem; height: 1.375rem; color: #0b7867; } .syn-faq__liste summary > svg:last-child { width: 1.25rem; height: 1.25rem; color: #8a90a6; transition: transform 300ms var(--kurve), color 200ms ease; } .syn-faq__liste details[open] summary > svg:last-child { transform: rotate(180deg); color: #0b7867; } .syn-faq__liste summary em { display: inline-block; margin-left: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: #e3f6f1; color: #0b7867; font-size: 0.75rem; font-style: normal; font-weight: 600; letter-spacing: 0; vertical-align: 0.1em; } .syn-faq__liste details p { padding: 0 1rem 1.25rem 3.25rem; font-size: 0.9688rem; line-height: 1.6; color: var(--text-2); } /* weiches Auf- und Zuklappen in Browsern mit ::details-content */ @supports selector(::details-content) { .syn-faq__liste { interpolate-size: allow-keywords; } .syn-faq__liste details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--kurve), content-visibility 320ms allow-discrete; } .syn-faq__liste details[open]::details-content { block-size: auto; } } /* Prozessgrafik „So funktioniert Mint“ (geparkt): Material → Styleguide → Filme, Raster 1200 × 560 */ .prozess { overflow: hidden; isolation: isolate; padding-bottom: clamp(5rem, 9vw, 8rem); } .prozess::before { content: ''; position: absolute; inset: 0 0 auto; height: 100%; z-index: -1; pointer-events: none; /* oben kräftig Mint (links) und Blau-Violett (rechts), weit nach unten gezogen, erst dann ins Dunkle */ background: radial-gradient(72% 62% at 16% 0%, rgba(69, 196, 176, 0.78), rgba(69, 196, 176, 0.28) 48%, transparent 78%), radial-gradient(68% 64% at 86% 0%, rgba(104, 88, 255, 0.72), rgba(104, 88, 255, 0.26) 48%, transparent 78%), linear-gradient(180deg, #0f5a5e 0%, rgba(14, 62, 78, 0.7) 32%, rgba(9, 24, 40, 0.35) 60%, rgba(7, 10, 23, 0) 85%); } .prozess__raster { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 9rem 9rem; background-position: center top; -webkit-mask-image: radial-gradient(70% 70% at 50% 55%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 70% at 50% 55%, #000 20%, transparent 80%); } .prozess__kopf .abschnitt__titel { font-size: clamp(2.125rem, 3.6vw, 3.25rem); } .prozess__kopf .serif { color: var(--mint-hell); } .prozess__geparkt { display: inline-flex; align-items: center; height: 1.875rem; padding: 0 0.875rem; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.3); font-size: 0.75rem; font-weight: 560; letter-spacing: 0.04em; color: #c9cfe2; } .prozess__szene { position: relative; container-type: inline-size; margin-top: clamp(1rem, 3vw, 2.5rem); perspective: 1700px; perspective-origin: 50% 45%; } .prozess__grafik { position: relative; z-index: 1; aspect-ratio: var(--prozess-seiten, 1200 / 520); transform-style: preserve-3d; will-change: transform; } @media (min-width: 1101px) { .prozess__ein, .prozess__aus { display: contents; } } .prozess__ein-punkt, .prozess__aus-punkt, .prozess__mitte { transform-style: preserve-3d; transition: scale 1s cubic-bezier(0.22, 1, 0.36, 1); } .prozess__ein-punkt:hover, .prozess__aus-punkt:hover, .prozess__mitte:hover { scale: 1.1; } /* Hinweis über dem Element beim Überfahren (sitzt im Raum etwas vor dem Element, damit Kanal-Icons ihn nicht verdecken) */ [data-hinweis]::after { content: attr(data-hinweis); position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 0.875rem); padding: 0.5rem 0.8125rem; border-radius: 0.625rem; background: rgba(13, 16, 32, 0.94); color: #ffffff; font-size: 0.8125rem; font-weight: 560; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0.75rem 2rem rgba(0, 0, 0, 0.45); opacity: 0; transform: translate(-50%, 0.375rem) translateZ(3.4cqw); transition: opacity 300ms ease, transform 500ms var(--kurve); } [data-hinweis]:hover::after { opacity: 1; transform: translate(-50%, 0) translateZ(3.4cqw); } .prozess__aus-punkt[data-hinweis]::after { bottom: calc(100% + 1.75rem); } .prozess__mitte[data-hinweis]::after { font-size: 0.875rem; padding: 0.5625rem 0.9375rem; } /* Karte minimal vor die Raumebene, sonst wechselt der Treffertest zwischen Karte und Raum hin und her (Hover flackert) */ @media (min-width: 1101px) { .prozess__mitte { translate: 0 0 2px; } } .prozess__linien { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .prozess__strich { fill: none; stroke: rgba(255, 255, 255, 0.34); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 7; animation: prozess-fluss 1.1s linear infinite; } .prozess__pfeil { fill: rgba(255, 255, 255, 0.75); } .prozess__puls { fill: var(--mint-hell); filter: drop-shadow(0 0 4px rgba(139, 232, 216, 0.9)); } @keyframes prozess-fluss { to { stroke-dashoffset: -7.1; } } .prozess__ein, .prozess__aus { list-style: none; margin: 0; padding: 0; } .prozess__ein-punkt, .prozess__aus-punkt { position: absolute; } .prozess__ein-punkt { transform: translate(-50%, -50%); } .prozess__aus-punkt { transform: translateY(-50%); } .prozess__kachel { display: grid; place-items: center; width: 4.1cqw; height: 4.1cqw; border-radius: 1.05cqw; background: #ffffff; box-shadow: 0 0 0 0.4cqw rgba(255, 255, 255, 0.06), 0 0.9cqw 2.2cqw rgba(0, 0, 0, 0.45); } .prozess__kachel svg { width: 2.8cqw; height: 2.8cqw; } .prozess__kachel--glas { background: linear-gradient(180deg, #ffffff, #eef1f8); } .prozess__kachel--glas svg { width: 3.8cqw; height: 3.8cqw; overflow: visible; } .prozess__pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 2.9cqw; height: 2.9cqw; border-radius: 0.8cqw; background: #ffffff; transform: translateZ(2.6cqw) rotate(var(--dreh, 0deg)); box-shadow: 0 0.5cqw 1.2cqw rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(13, 16, 32, 0.06); } .prozess__pin svg { width: 2cqw; height: 2cqw; } .prozess__pin--or { top: -1.3cqw; right: -1.3cqw; } .prozess__pin--ol { top: -1.3cqw; left: -1.3cqw; } .prozess__film { display: block; height: 5.6cqw; border-radius: 0.7cqw; overflow: hidden; background: #10162f; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1cqw 2.4cqw rgba(0, 0, 0, 0.45); } .prozess__film video { width: 100%; height: 100%; object-fit: cover; } .prozess__film--16x9 { aspect-ratio: 16 / 9; } .prozess__film--9x16 { aspect-ratio: 9 / 16; } .prozess__film--1x1 { aspect-ratio: 1; } .prozess__stufe { display: none; } /* Mitte: Styleguide-Scroll füllt die Karte, unten ein weicher Verlauf über dem Inhalt */ .prozess__mitte { position: absolute; border-radius: 1.5rem; background: #efece3; isolation: isolate; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 0.7cqw rgba(255, 255, 255, 0.04), 0 2rem 4rem rgba(0, 0, 0, 0.45); } .prozess__scroll { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #efece3; border-radius: inherit; } @media (prefers-reduced-motion: reduce) { .prozess__strich { animation: none; } } /* Unter 1100 px: Grafik gestapelt (Material ↓ Styleguide ↓ Filme) */ @media (max-width: 1100px) { .prozess__szene { perspective: none; } .prozess__grafik { aspect-ratio: auto; display: grid; justify-items: center; transform: none !important; } .prozess__ein-punkt, .prozess__aus-punkt { translate: none !important; } .prozess__linien { display: none; } .prozess__ein, .prozess__aus { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; width: 100%; } .prozess__ein-punkt, .prozess__aus-punkt { position: static; transform: none; } .prozess__kachel { width: 3rem; height: 3rem; border-radius: 0.75rem; } .prozess__kachel svg { width: 2rem; height: 2rem; } .prozess__kachel--glas svg { width: 2.75rem; height: 2.75rem; } .prozess__film { height: 4.5rem; border-radius: 0.5rem; } .prozess__aus { gap: 0.75rem; } .prozess__stufe { display: block; width: 2px; height: 2.5rem; margin: 1rem 0; background-image: linear-gradient(rgba(255, 255, 255, 0.45) 40%, transparent 0); background-size: 2px 0.5rem; } .prozess__mitte { position: relative; inset: auto !important; width: 100% !important; max-width: 40rem; height: auto !important; aspect-ratio: 16 / 9; } .prozess__aus-punkt { position: relative; inset: auto !important; } .prozess__pin { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; } .prozess__pin svg { width: 1.2rem; height: 1.2rem; } .prozess__pin--or { top: -0.6rem; right: -0.6rem; } .prozess__pin--ol { top: -0.6rem; left: -0.6rem; } .prozess__aus { gap: 1.25rem; padding-top: 0.5rem; } } /* Hinweis für geplante Unterseiten und Entwurfswerkzeug */ .hinweis-toast { position: fixed; left: 50%; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); z-index: 80; max-width: min(34rem, calc(100vw - 2rem)); padding: 0.75rem 1rem; border-radius: 0.875rem; background: #0d1020; color: #fff; font-size: 0.875rem; line-height: 1.45; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transform: translate(-50%, 0.5rem); transition: opacity 200ms ease, transform 300ms var(--kurve); } .hinweis-toast.ist-da { opacity: 1; transform: translate(-50%, 0); } .hinweis-toast b { color: var(--mint-hell); font-weight: 600; } .werkzeug { position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; border-radius: 999px; background: rgba(13, 16, 32, 0.9); color: #fff; font-size: 0.78rem; box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08); backdrop-filter: blur(0.75rem); max-width: calc(100vw - 2rem); } .werkzeug__label { color: #aeb5cc; white-space: nowrap; } @media (max-width: 900px) { .wie__schritte { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; gap: 2.75rem; } .syn-faq__liste { grid-template-columns: minmax(0, 1fr); } .syn-faq__spalte + .syn-faq__spalte { border-top: 0; } } @media (max-width: 760px) { .prozess__aus .prozess__film { height: 3.6rem; } .held-6 .briefing--syn, .held-6__hinweis, .wie__trailer { display: none; } .held-ablauf, .held-6__aktion, :root[data-held='chat'] .held-6 .briefing--syn, :root[data-held='chat'] .held-6__hinweis { display: none; } .held-6__mobil { display: grid; gap: 1.25rem; width: 100%; margin-top: 0.25rem; } .held-6__mobil > .knopf { width: 100%; --knopf-bg: #ffffff; --knopf-text: #0b0e1e; } /* 13.10.: auf dem Handy ohne „Filmbeispiele ansehen“ — die Filme folgen direkt darunter und sind früher im Bild */ .held-6__beispiele-mobil { display: none; } .bibliothek__kopf { margin-top: 2.5rem; gap: 1.125rem; } .trailer--mobil .trailer__gross { font-size: 9cqw; } .trailer--mobil .trailer__film { top: 22%; } .held-6__himmel { padding-bottom: 10rem; } .held-6 > .rahmen { margin-top: -7.5rem; } .held-6__inhalt { gap: 1.25rem; } .bibliothek__fenster { max-height: 52rem; } .bibliothek__spalten.ist-verteilt, .bibliothek__spalte { gap: 0.625rem; } .bib-karte__fuss { gap: 0.5rem; padding: 0.5625rem 0.625rem 0.625rem; } .bib-karte__symbol { display: none; } .bib-karte__text b { font-size: 0.8125rem; } .bib-karte__text span { font-size: 0.75rem; } .logo-band__spur { gap: 3rem; } @keyframes logo-lauf { to { transform: translateX(calc(-50% - 1.5rem)); } } .syn-faq__liste details p { padding-left: 1rem; } .syn-cta__fakten { flex-direction: column; align-items: center; } .syn-cta__fakten li { text-align: left; } .briefing--syn .briefing__senden:hover .briefing__senden-text { max-width: 0; opacity: 0; } .briefing--syn .briefing__senden:hover { padding: 0 0.6875rem; gap: 0; } } @media (prefers-reduced-motion: reduce) { .logo-band { -webkit-mask-image: none; mask-image: none; } .logo-band__spur { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; padding-inline: 1rem; } .logo-band__spur li[aria-hidden] { display: none; } } /* Testversionen Header-Verlauf (10.10.): A = Standard in .held-6, B–E über :root[data-verlauf] */ :root[data-verlauf='b'] .held-6 { --v-himmel: linear-gradient(180deg, #070a17 0, #08132e 12%, #0b2447 34%, #0d3b55 calc(100% - 30rem), #0f5a60 calc(100% - 22rem), #13786f calc(100% - 14rem), #8fd3c8 calc(100% - 7rem), #f4f5fa 100%); --v-licht-1: rgba(69, 196, 176, 0.32); --v-licht-2: rgba(61, 107, 255, 0.26); --v-serif: #d9fff7; } /* Nachtblau → Teal → Grau */ :root[data-verlauf='b'] .kopf.ist-fest[data-kopf='dunkel'], :root[data-verlauf='b'] .kopf[data-kopf='dunkel'] .mobilmenue { background: rgba(7, 14, 30, 0.82); } :root[data-verlauf='a'] .held-6 { --v-himmel: linear-gradient(180deg, #070a17 0, #0b1138 12%, #18217f 34%, #2d34b8 calc(100% - 30rem), #4643d2 calc(100% - 22rem), #6a55e4 calc(100% - 14rem), #a99af2 calc(100% - 7rem), #f4f5fa 100%); --v-licht-1: rgba(69, 196, 176, 0.4); --v-licht-2: rgba(44, 198, 226, 0.3); --v-serif: #d9fff7; } /* A: Nachtblau → Violett → Grau */ :root[data-verlauf='c'] .held-6 { --v-himmel: linear-gradient(180deg, #0c5c58 0, #0e6a64 18%, #10766e calc(100% - 30rem), #138078 calc(100% - 22rem), #1a8c82 calc(100% - 14rem), #9fd9cf calc(100% - 7rem), #f4f5fa 100%); --v-licht-1: rgba(139, 232, 216, 0.34); --v-licht-2: rgba(44, 198, 226, 0.24); --v-serif: #e0fff9; } /* Teal → Grau */ :root[data-verlauf='c'] .kopf.ist-fest[data-kopf='dunkel'], :root[data-verlauf='c'] .kopf[data-kopf='dunkel'] .mobilmenue { background: rgba(9, 72, 68, 0.86); } :root[data-verlauf='d'] .held-6 { --v-himmel: linear-gradient(180deg, #0a4f57 0, #0c6470 14%, #11708a 30%, #1f5fc4 calc(100% - 26rem), #2d5be0 calc(100% - 18rem), #4a6cf0 calc(100% - 12rem), #a9bcf7 calc(100% - 6rem), #f4f5fa 100%); --v-licht-1: rgba(69, 196, 176, 0.34); --v-licht-2: rgba(61, 107, 255, 0.3); --v-serif: #dcfbff; } /* Teal → Blau → Grau */ :root[data-verlauf='d'] .kopf.ist-fest[data-kopf='dunkel'], :root[data-verlauf='d'] .kopf[data-kopf='dunkel'] .mobilmenue { background: rgba(8, 60, 68, 0.86); } :root[data-verlauf='e'] .held-6 { --v-himmel: linear-gradient(180deg, #03100f 0, #041d1c 14%, #06302e 34%, #0a403d calc(100% - 30rem), #0e524e calc(100% - 22rem), #156660 calc(100% - 14rem), #9cc9c2 calc(100% - 7rem), #f4f5fa 100%); --v-licht-1: rgba(69, 196, 176, 0.26); --v-licht-2: rgba(69, 196, 176, 0.16); --v-serif: #c8f7ee; } /* Dunkelteal → Grau */ :root[data-verlauf='e'] .kopf.ist-fest[data-kopf='dunkel'], :root[data-verlauf='e'] .kopf[data-kopf='dunkel'] .mobilmenue { background: rgba(3, 18, 17, 0.84); } .werkzeug { gap: 0.25rem; padding: 0.3125rem 0.375rem 0.3125rem 0.875rem; } .werkzeug__label { margin-right: 0.375rem; } .werkzeug button { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.625rem 0 0.375rem; border: 0; border-radius: 999px; background: transparent; color: #dfe3f0; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .werkzeug button:hover { background: rgba(255, 255, 255, 0.1); } .werkzeug button[aria-pressed='true'] { background: #ffffff; color: #0d1020; } .werkzeug button i { width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); } .werkzeug__trenner { width: 1px; height: 1.25rem; margin: 0 0.5rem; background: rgba(255, 255, 255, 0.18); } .werkzeug__name { min-width: 11.5rem; padding: 0 0.5rem 0 0.375rem; color: #fff; white-space: nowrap; } @media (max-width: 760px) { .werkzeug__name, .werkzeug__label { display: none; } .werkzeug { left: 50%; transform: translateX(-50%); padding-left: 0.375rem; } }