:root { --bg: #f5f7fb; --card: #ffffff; --card2: #eef3f9; --line: #d9e2ef; --text: #182236; --muted: #647184; --accent: #2563eb; --accent2: #0f9f7a; --danger: #dc2626; --warn: #b7791f; --shadow: 0 18px 45px rgba(24,34,54,.08); /* RGB-Tripel für halbtransparente Glas-Flächen/Linien – im Dark Mode dunkel. */ --glassRGB: 255,255,255; --lineRGB: 217,226,239; /* Breite der App-Ansicht. Topbar-Inhalt, Layout und Fusszeile richten sich danach aus, damit auf breiten Monitoren alles mittig steht statt links zu kleben. */ --app-max: 1500px; /* Maximale Inhaltsbreite der Hauptspalte: --app-max abzüglich Sidebar (200px) und deren Innenabstand (24px). Die Sidebar selbst klebt am linken Rand. */ --main-max: calc(var(--app-max) - 224px); } /* Dark Mode: gleiche Variablennamen, dunkle Werte. Aktiviert per data-theme="dark" auf (Toggle in Topbar/Landing-Nav; ohne gespeicherte Wahl folgt ein Inline-Snippet im der Systemeinstellung). */ :root[data-theme="dark"] { /* Neutral-kühle Graustufen mit klar abgesetzten Ebenen (bg < card < card2) statt eines flächigen Marineblaus – ruhiger, hochwertiger, besserer Kontrast. */ --bg: #0e1116; --card: #181c23; --card2: #222732; --line: #2e343f; --text: #e7e9ec; --muted: #949cab; --accent: #4b8bf5; --accent2: #1cbda8; --danger: #f0716f; --warn: #e4ad4c; --shadow: 0 16px 40px rgba(0,0,0,.5); --glassRGB: 24,28,35; --lineRGB: 46,52,63; color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* Sanftes Scrollen zu Ankern (Landing-Nav); Sektionen stoppen unterhalb der Sticky-Leiste statt darunter zu verschwinden. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } section[id] { scroll-margin-top: 84px; } /* Hell/Dunkel-Umschalter (Landing-Nav + App-Topbar). */ .themeToggle { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0; font-size: 17px; line-height: 1; cursor: pointer; transition: border-color .15s, transform .15s; } .themeToggle:hover { border-color: var(--accent); transform: translateY(-1px); filter: none; background: var(--card); } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; overflow-wrap: anywhere; } .topbar { display: flex; justify-content: space-between; align-items: center; /* Die Leiste bleibt voll breit (Rand + Blur ueber die ganze Seite), ihr Inhalt folgt aber --app-max, damit er buendig ueber dem Layout darunter sitzt. */ padding: 14px max(22px, calc((100% - var(--app-max)) / 2)); border-bottom: 1px solid var(--line); background: rgba(var(--glassRGB),.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); } /* Wortmarke darf niemals umbrechen oder gequetscht werden. */ .brand { font-size: 18px; font-weight: 800; white-space: nowrap; flex-shrink: 0; } .brand.big { font-size: 24px; } .brandMark { width: 30px; height: 30px; object-fit: contain; display: block; } .landingNav .brandMark { width: 38px; height: 38px; } .brandLink { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; } .brandLink:hover { color: var(--text); filter: brightness(1.08); } .brand .tag { color: var(--muted); font-size: 12px; margin-left: 8px; } .keybox { display: flex; gap: 8px; } .langSelect { padding: 6px 8px; font-size: 13px; max-width: 130px; } .landingNav .langSelect { background: var(--card2); } .view { display: block; } h1, h2, h3 { text-wrap: balance; overflow-wrap: normal; hyphens: none; } p, li { text-wrap: pretty; } h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; } label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); } .checkline { display: flex; grid-template-columns: none; flex-direction: row; align-items: flex-start; gap: 8px; line-height: 1.35; } .checkline input { width: auto; margin-top: 2px; } .humanField { display: grid; gap: 6px; font-size: 13px; color: var(--muted); position: relative; } .humanField small { color: var(--muted); font-size: 12px; margin-top: -2px; } .hpField { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .humanRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; background: #f9fbff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; } /* Cloudflare Turnstile: ruhig eingebettet, gleiche Kartenoptik wie die übrigen Felder. */ .turnstileBox { display: grid; justify-content: center; background: #f9fbff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; min-height: 78px; } .turnstileBox iframe { border-radius: 8px; max-width: 100%; } .humanBadge { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,159,122,.12); color: var(--accent2); font-weight: 900; border: 1px solid rgba(15,159,122,.32); } .humanQuestion { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--text); font-weight: 800; min-width: 0; } .humanConfirm { grid-column: 1 / -1; display: flex; grid-template-columns: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 8px 10px; color: var(--text); font-weight: 700; } .humanConfirm input { width: 16px; height: 16px; min-width: 16px; padding: 0; accent-color: var(--accent2); } input, select, textarea, button { font: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; } textarea { resize: vertical; } button { cursor: pointer; background: var(--accent); border: none; color: white; font-weight: 600; } button.secondary { background: var(--accent2); } button.ghostBtn { background: var(--card); color: var(--text); border: 1px solid var(--line); } button:hover { filter: brightness(1.08); } /* Buttons brechen als Ganzes in die nächste Zeile um – ohne nowrap würde overflow-wrap:anywhere (body) ihre Beschriftung buchstabenweise senkrecht stapeln, sobald mehrere Buttons in einer schmalen Karte stehen. */ .row { display: flex; gap: 10px; flex-wrap: wrap; } .row button { flex: 1; white-space: nowrap; } /* Link-Buttons in einer .row: ohne das würde ihr width:100% die echten Buttons auf Minimalbreite quetschen. */ .row .linkbtn { width: auto; flex: 0 0 auto; align-self: center; padding: 9px 4px; white-space: nowrap; } .list { display: grid; gap: 10px; } .item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(24,34,54,.04); } .item .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .item .meta { color: var(--muted); font-size: 12px; } .goalGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; } .inlineGoal { display: grid; gap: 4px; font-size: 12px; color: var(--muted); } .inlineGoal input { width: 100%; padding: 8px 9px; } .chartGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 8px; } .chartCard { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #f9fbff; display: grid; gap: 5px; } .chartCard b { font-size: 12px; } .chartCard span { color: var(--muted); font-size: 12px; } .miniChart { width: 100%; height: 42px; overflow: visible; } .miniChart polyline { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .dnsList { display: grid; gap: 6px; margin-top: 10px; } .dnsList code { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 8px; color: var(--text); font-size: 12px; } .mailPreviewFrame { width: 100%; min-height: 460px; border: 1px solid var(--line); border-radius: 8px; background: #f5f7fb; } .mailTemplate { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: grid; gap: 8px; } .onboardingChecklist { border: 1px solid rgba(37,99,235,.22); background: #f8fbff; border-radius: 10px; padding: 12px; margin-bottom: 14px; display: grid; gap: 10px; } .checklistHead div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; } .checklistHead progress { width: 100%; height: 8px; accent-color: var(--accent); } /* Link-in-Bio-Verwaltung */ /* Browser-artige Tabs: eine Seite je Tab, „+" legt eine neue an. */ .bioTabs { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px; border-bottom: 1px solid var(--line); } .bioTab { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 8px 14px 9px; margin-bottom: -1px; background: var(--card2); color: var(--muted); font-weight: 600; font-size: 13px; border: 1px solid var(--line); border-radius: 10px 10px 0 0; } .bioTab:hover { filter: none; color: var(--text); } .bioTab.active { background: var(--card); color: var(--text); border-bottom-color: var(--card); } .bioTab .bioTabLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bioTabDot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex-shrink: 0; } .bioTabDot.live { background: var(--accent2); } .bioTabAdd { width: 36px; justify-content: center; padding: 8px 0 9px; font-size: 15px; } .bioTabAdd:disabled { opacity: .45; cursor: default; } .bioLinks { display: grid; gap: 10px; margin-bottom: 12px; } .bioLink { /* Die Eingaben bekommen eine eigene Zeile; Status und Aktionen sitzen darunter. So bleiben Titel und URL lesbar, statt zwischen sechs Spalten zusammengeschoben zu werden. */ display: grid; grid-template-columns: 46px minmax(180px, 1fr) minmax(80px, 1.1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); } .bioLink > input { width: 100%; min-width: 0; } .bioLink > .bioE { grid-column: 1; grid-row: 1; } .bioLink > .bioL { grid-column: 2; grid-row: 1; } .bioLink > .bioU { grid-column: 3 / 5; grid-row: 1; } .bioLink > .checkRow { grid-column: 1 / 3; grid-row: 2; } .bioLink > .bioClicks { grid-column: 3; grid-row: 2; } .bioLink > .bioBtns { grid-column: 4; grid-row: 2; justify-self: end; } .bioLink input[type="text"], .bioLink input:not([type]) { margin: 0; } .bioLink .bioE { padding: 9px 4px; text-align: center; } .bioLink .bioClicks { font-size: 12px; white-space: nowrap; } .bioBtns { display: flex; gap: 4px; } .bioBtns button { width: 30px; height: 30px; padding: 0; line-height: 1; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; } .bioBtns button:hover { color: var(--text); filter: none; background: transparent; } .bioBtns button:disabled { opacity: .35; cursor: default; color: var(--muted); } .bioBtns .bioDel:hover { color: var(--danger); border-color: var(--danger); } /* Zeitfenster eines Links (Drops): zweite Zeile unter dem Link. */ .bioSched { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding-top: 8px; border-top: 1px dashed var(--line); } .bioSched label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); } .bioSched input { margin: 0; padding: 7px 9px; font-size: 13px; } .bioSched .hint { flex-basis: 100%; margin: 0; } .bioBtns .bioSchedBtn.scheduled { color: var(--accent); border-color: var(--accent); } .bioBtns .bioStarBtn.on { color: #eab308; border-color: #eab308; } .bioBtns .bioAbBtn.on { color: var(--accent); border-color: var(--accent); } /* A/B-Test eines Links: Variante B + Statistik als zweite Zeile (wie bioSched). */ .bioAbRow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--line); } .bioAbRow .bioEB { width: 52px; } .bioAbRow .bioLB { flex: 1; min-width: 140px; } .bioAbRow .abStats { flex-basis: 100%; font-size: 12px; color: var(--muted); } /* Überschrift-Zeilen: nur Text + Sortierung, optisch als Trenner erkennbar. */ .bioLink.bioHeadingRow { grid-template-columns: 1fr auto; background: transparent; border-style: dashed; } .bioLink.bioHeadingRow .bioL { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; } /* YouTube-Thumbnail-Vorschau im Composer: 16:9, dezent gerahmt. */ .thumbPreview { display: block; width: 220px; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; } /* Bildfelder mit Upload-Knopf daneben (Cover/Profilbild). */ .bioImgRow { display: flex; gap: 8px; align-items: center; } /* Cover-Darstellung: Modus + Fokus-Regler, eingerückt unterm Cover-Feld. */ .bioCoverOpts { display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; } .bioCoverOpts label { display: grid; gap: 4px; font-size: 13px; } .bioCoverOpts input[type="range"] { margin: 0; width: 100%; accent-color: var(--accent); } .bioImgRow input { flex: 1; margin: 0; min-width: 0; } .bioImgRow button { flex-shrink: 0; white-space: nowrap; } /* Social-Profile: URL-Liste, Icons rendert die öffentliche Seite. */ .bioSocials { display: grid; gap: 8px; margin-bottom: 12px; } .bioSocial { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .bioSocial input { margin: 0; } .bioSocial .bioDel { width: 30px; height: 30px; padding: 0; line-height: 1; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; } .bioSocial .bioDel:hover { color: var(--danger); border-color: var(--danger); filter: none; background: transparent; } /* Seite löschen: bewusst zurückhaltend, aber klar als destruktiv erkennbar. */ .dangerBtn { margin-top: 10px; background: transparent; color: var(--danger); border: 1px solid var(--line); } .dangerBtn:hover { border-color: var(--danger); filter: none; background: transparent; } /* Live-Vorschau im Telefonrahmen. Das iframe rendert die echte öffentliche Seite in Handybreite und wird auf die Rahmenbreite herunterskaliert. */ .phoneFrame { width: 300px; max-width: 100%; height: 560px; margin: 6px auto 0; padding: 12px; border: 1px solid var(--line); border-radius: 32px; background: #0f172a; box-shadow: var(--shadow); position: relative; overflow: hidden; } .phoneFrame::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 16px; background: #0f172a; border-radius: 0 0 10px 10px; z-index: 2; } .phoneFrame iframe { width: 368px; height: 712px; border: 0; border-radius: 20px; background: var(--card); transform: scale(0.75); transform-origin: top left; } #bioAccent { padding: 4px; height: 38px; width: 64px; cursor: pointer; } .checkRow { display: flex; align-items: center; gap: 6px; } .checkRow > span { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 900px) { .bioLink { grid-template-columns: 46px 1fr auto; } .bioLink > .bioL { grid-column: 2 / -1; grid-row: 1; } .bioLink > .bioU { grid-column: 1 / -1; grid-row: 2; } .bioLink > .checkRow { grid-column: 1 / 3; grid-row: 3; } .bioLink > .bioClicks { grid-column: 1 / 3; grid-row: 4; } .bioLink > .bioBtns { grid-column: 3; grid-row: 3 / 5; } } @media (max-width: 520px) { .bioLink { grid-template-columns: 46px minmax(0, 1fr); } .bioLink > .checkRow { grid-column: 1 / -1; grid-row: 3; } .bioLink > .bioClicks { grid-column: 1 / -1; grid-row: 4; } .bioLink > .bioBtns { grid-column: 1 / -1; grid-row: 5; } } .checklistMeta { display: flex; align-items: center; gap: 8px; } .checklistDismiss { width: 26px; height: 26px; padding: 0; line-height: 1; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; } .checklistDismiss:hover { color: var(--text); filter: none; background: #f2f5fa; } .checklistItems { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } .checklistItems button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; text-align: left; padding: 10px; border-radius: 8px; background: var(--card); color: var(--text); } .checklistItems button small { grid-column: 2; color: var(--muted); font-size: 11px; } .checklistItems button.done { background: rgba(15,159,122,.08); border-color: rgba(15,159,122,.25); } .pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } .pill.platform { background: var(--card2); } .pill.okpill { color: var(--accent2); border-color: rgba(52,211,153,.55); } .pill.warnpill { color: var(--warn); border-color: rgba(251,191,36,.55); } .pill.badpill { color: var(--danger); border-color: rgba(239,68,68,.55); } .pill.nometrics { color: var(--muted); background: var(--card2); font-size: 10px; } /* KI-Herkunft eines Beitrags (Art. 50 KI-VO) – neutral, keine Warnfarbe. */ .pill.aipill { color: var(--accent); border-color: rgba(37,99,235,.55); background: rgba(37,99,235,.08); } .analyticsNote { color: var(--muted); font-size: 13px; line-height: 1.5; border-left: 3px solid var(--accent); } /* Adminbereich: Plattform-Apps & API-Schlüssel */ .cfgFields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 10px; } @media (max-width: 900px) { .cfgFields { grid-template-columns: 1fr; } } .cfgField span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .cfgField code, .cfgUri { overflow-wrap: anywhere; } .cfgField input { width: 100%; } .cfgActions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .cfgActions button { width: auto; } .cfgCheckResult { font-size: 12px; color: var(--muted); } /* Kopieren/Entfernen inline statt als eigene 100%-Breite-Zeile (.linkbtn-Basisstil) */ #adminConfig .linkbtn, #adminIntegrations .linkbtn { width: auto; display: inline; padding: 0 2px; } .status-published, .status-scheduled, .status-partial, .status-failed, .status-draft, .status-review { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } .status-published { color: var(--accent2); } .status-scheduled { color: var(--accent); } .status-partial { color: var(--warn); } .status-failed { color: var(--danger); } .status-draft { color: var(--muted); } .status-review { color: var(--warn); } .picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; } .picker .hint { grid-column: 1 / -1; } .picker label.channelChoice { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; background: var(--card); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; min-height: 58px; box-shadow: 0 6px 18px rgba(24,34,54,.04); transition: border-color .15s, box-shadow .15s, transform .15s; } .picker label.channelChoice:hover { border-color: rgba(37,99,235,.45); box-shadow: 0 10px 24px rgba(24,34,54,.08); } .picker label.channelChoice.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37,99,235,.12), 0 10px 24px rgba(24,34,54,.08); } .picker label.channelChoice input { position: absolute; opacity: 0; pointer-events: none; } .picker label.channelChoice span:not(.platformLogo) { display: grid; min-width: 0; gap: 1px; color: var(--text); } .picker label.channelChoice b { font-size: 13px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker label.channelChoice small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .platformLine { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } .platformLogo { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--pl) 12%, #fff); color: var(--pl); font-weight: 800; font-size: 10px; line-height: 1; border: 1px solid color-mix(in srgb, var(--pl) 28%, var(--line)); flex: 0 0 auto; } .platformLogo img { width: 17px; height: 17px; display: block; object-fit: contain; } .picker .platformLogo, .results .platformLogo, .previewLine .platformLogo { width: 20px; height: 20px; border-radius: 6px; font-size: 8px; margin-right: 4px; } .picker .platformLogo { width: 34px; height: 34px; border-radius: 10px; margin-right: 0; } .picker .platformLogo img { width: 21px; height: 21px; } .results .platformLogo img, .previewLine .platformLogo img { width: 13px; height: 13px; } .workflowPanel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 12px; margin-bottom: 12px; box-shadow: 0 8px 24px rgba(24,34,54,.04); } .sectionMini { display: grid; gap: 3px; } .sectionMini b { font-size: 16px; color: var(--text); } .contentTypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .contentTypes button { background: var(--card2); color: var(--text); border: 1px solid var(--line); min-height: 70px; display: grid; place-items: center; gap: 5px; padding: 10px; } .contentTypes button.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .contentTypes span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--card); color: var(--accent); font-weight: 800; } .contentTypes b { font-size: 12px; } .templateRow, .aiAssist { display: flex; flex-wrap: wrap; gap: 8px; } .aiAssist { margin-top: -4px; } .guidancePanel { display: grid; gap: 6px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; color: var(--muted); font-size: 12px; } .previewLine { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .previewLine span { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; } .guidancePanel .warn { margin: 0; color: var(--warn); } .filters { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .composerCreateLayout { width: 100%; } .postComposerGrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 22px; align-items: start; } .postComposerMain, .postComposerSide { display: grid; gap: 14px; min-width: 0; } .postComposerSide { border-left: 1px solid var(--line); padding-left: 22px; } .postComposerMain label, .postComposerSide label, .postComposerSide .bioImgRow { min-width: 0; max-width: 100%; } .postComposerSide > label > input, .postComposerSide > label > select, .postComposerSide > label > textarea { width: 100%; min-width: 0; max-width: 100%; } #postText { min-height: 190px; } .accountPickerMount { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; } .composerFieldLabel { padding: 0; color: var(--muted); font-size: 13px; } .postComposerActions { border-top: 1px solid var(--line); padding-top: 14px; } .postOverview { display: grid; gap: 12px; } .postOverviewHead h2 { margin: 0 0 4px; } .postOverviewHead .hint { margin: 0; } .postToolbar { display: grid; gap: 12px; } .postStatusFilters { display: flex; gap: 8px; flex-wrap: wrap; } .postControls { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; align-items: end; } .postControls label { margin: 0; } .postControls span { display: block; margin-bottom: 4px; } .postControls select { margin: 0; width: 100%; } .postActionHelp summary { width: fit-content; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; } .postActionHelpGrid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px 18px; margin-top: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card2); } .postActionHelpGrid div { display: grid; gap: 2px; min-width: 0; } .postActionHelpGrid b { color: var(--text); font-size: 12px; } .postActionHelpGrid span { color: var(--muted); font-size: 12px; } .postList .item .head b { min-width: 0; overflow-wrap: anywhere; } .postItemActions { margin-top: 10px; } .postLoadMore { justify-self: center; min-width: 180px; } .variantBox { margin-top: 8px; border-left: 3px solid var(--accent); padding: 8px 10px; background: #f8fbff; color: var(--text); font-size: 12px; } .variantBox div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 7px; margin-top: 4px; } .variantBox span { color: var(--accent); font-weight: 800; } @media (max-width: 1100px) { .postComposerGrid { grid-template-columns: 1fr; } .postComposerSide { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; } #postText { min-height: 150px; } } @media (max-width: 900px) { .postControls { grid-template-columns: 1fr; } .postOverviewHead { align-items: flex-start; } } @media (max-width: 640px) { .postActionHelpGrid { grid-template-columns: 1fr; } .postComposerActions button { flex: 1 1 100%; } } .chip { background: var(--card2); color: var(--muted); font-weight: 500; padding: 5px 12px; } .chip.active { background: var(--accent); color: white; } .iconbtn { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 4px 9px; font-size: 12px; } .iconbtn.danger { color: var(--danger); } .results { margin-top: 8px; display: grid; gap: 4px; font-size: 12px; } .results .r { display: flex; gap: 8px; align-items: center; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot.ok { background: var(--accent2); } .dot.err { background: var(--danger); } .dot.sim { background: var(--warn); } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; border: 1px solid var(--text); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: opacity .2s; pointer-events: none; } .toast.show { opacity: 1; } .hint { color: var(--muted); font-size: 12px; } .req { color: var(--danger); } .verifyBanner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: rgba(251,191,36,.12); border-bottom: 1px solid var(--warn); color: var(--warn); padding: 10px 16px; font-size: 13px; } .verifyBanner .iconbtn { color: var(--warn); border-color: var(--warn); } .verifyBanner .hint { display: block; color: rgba(183,121,31,.85); font-size: 12px; } .paymentBanner { background: rgba(37,99,235,.08); border-bottom-color: var(--accent); color: var(--accent); } .paymentBanner .iconbtn { color: var(--accent); border-color: var(--accent); } /* ============ Registrierungs-Wizard (Plan -> Konto -> Zahlung) ============ */ body.modalOpen { overflow: hidden; } .wizardOverlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(24,34,54,.45); backdrop-filter: blur(4px); padding: 18px; } .wizardModal { width: min(1280px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 26px; box-shadow: 0 30px 80px rgba(24,34,54,.25); } .wizardHead { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .wizardHead h3 { margin: 0; font-size: 20px; } .wizardClose { background: var(--card2); color: var(--muted); border: 1px solid var(--line); width: 34px; height: 34px; border-radius: 999px; font-size: 18px; line-height: 1; padding: 0; flex-shrink: 0; } .wizardSteps { display: flex; gap: 6px; margin: 14px 0 18px; flex-wrap: wrap; } .wizStep { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } .wizStep b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: var(--line); color: var(--muted); font-size: 11px; } .wizStep.active { color: var(--accent); border-color: var(--accent); background: rgba(37,99,235,.07); } .wizStep.active b { background: var(--accent); color: #fff; } .wizardModal .wizPlanGrid { margin-top: 4px; grid-template-columns: repeat(4, minmax(230px, 1fr)); } .wizardModal .planCard.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .wizCompare { margin-top: 14px; } .wizCompare summary { cursor: pointer; color: var(--muted); font-size: 13px; } .wizSummary { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; } .wizSummary .linkbtn { width: auto; padding: 0; font-size: 13px; } @media (max-width: 1100px) { .wizardModal .wizPlanGrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding: 2px 2px 12px; } .wizardModal .wizPlanGrid .planCard { flex: 0 0 min(290px, 82vw); scroll-snap-align: start; } } @media (max-width: 640px) { .wizardOverlay { padding: 0; } .wizardModal { max-height: 100vh; height: 100vh; border-radius: 0; border: none; } } .authRegisterBtn { width: 100%; margin-top: 10px; } .securityReminder { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: #effaf6; border-bottom: 1px solid rgba(15,159,122,.34); color: #0b5f4a; padding: 10px 16px; font-size: 13px; } .securityReminder div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .securityReminder button { padding: 7px 11px; font-size: 12px; } .muted { color: var(--muted); font-size: 12px; } .err { color: var(--danger); font-size: 13px; min-height: 18px; } .mediaPreview { display: flex; flex-wrap: wrap; gap: 8px; } .mediaPreview:empty { display: none; } .thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); display: block; } .thumbWrap { position: relative; display: inline-block; } .thumbDel { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: rgba(24,34,54,.82); color: #fff; border: 1px solid var(--line); font-size: 11px; line-height: 1; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(2px); } .thumbDel:hover { background: rgba(40,46,58,.9); } /* Auth */ .authWrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .authCard { width: 100%; max-width: 380px; position: relative; } .hero3d { position: absolute; inset: -28px -30px auto auto; width: 150px; height: 120px; perspective: 700px; pointer-events: none; z-index: -1; } .hero3d span { position: absolute; display: block; border: 1px solid rgba(37,99,235,.18); background: rgba(var(--glassRGB),.75); box-shadow: var(--shadow); border-radius: 10px; transform-style: preserve-3d; backdrop-filter: blur(8px); } .hero3d span:nth-child(1) { width: 118px; height: 72px; right: 8px; top: 8px; transform: rotateY(-28deg) rotateX(18deg) translateZ(26px); } .hero3d span:nth-child(2) { width: 92px; height: 56px; right: 42px; top: 42px; transform: rotateY(-24deg) rotateX(14deg) translateZ(10px); } .hero3d span:nth-child(3) { width: 62px; height: 62px; right: 0; top: 60px; transform: rotateY(-34deg) rotateX(24deg) translateZ(34px); } .authCard .brand.big { font-size: 26px; margin-bottom: 4px; } .tabs { display: flex; gap: 8px; margin: 16px 0 12px; } .authtab { background: var(--card2); color: var(--muted); flex: 1; } .authtab.active { background: var(--accent); color: #fff; } .linkbtn { background: transparent; border: none; color: var(--accent); font-size: 13px; padding: 10px 0 0; width: 100%; cursor: pointer; } .authOverlay { z-index: 70; } .authModalCard { position: relative; width: min(450px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 28px; box-shadow: 0 28px 70px rgba(16,35,66,.28); } .authModalBrand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .authModalBrand .brandMark { width: 36px; height: 36px; } .authModalBrand span { display: block; color: var(--muted); font-size: 13px; font-weight: 700; } .authModalBrand h2 { margin: 0; color: var(--text); font-size: 23px; letter-spacing: 0; text-transform: none; } .authFormCard { display: grid; gap: 12px; } /* Landing */ .landing { --landing-max: min(1480px, calc(100vw - 48px)); max-width: none; margin: 0 auto; padding: 0 0 60px; overflow: hidden; } .landingNav, .hero, .landingSection, .pricing, #promoSlot, .landingFoot { width: var(--landing-max); margin-left: auto; margin-right: auto; } .landingNav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .landingNavActions { display: flex; gap: 10px; align-items: center; } .navInstagram { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); transition: border-color .15s, transform .15s; } .navInstagram:hover { border-color: var(--accent); transform: translateY(-1px); } .navInstagram img { width: 20px; height: 20px; } .landingNavLinks { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 18px; } .landingNavLinks a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; padding: 7px 10px; border-radius: 999px; white-space: nowrap; } .landingNavLinks a:hover { color: var(--accent); background: rgba(37,99,235,.07); } .hero { position: relative; isolation: isolate; display: grid; justify-items: center; min-height: 612px; padding: 98px 36px 86px; overflow: hidden; text-align: center; border: 1px solid rgba(var(--lineRGB),.9); border-radius: 18px; background: #f5f8f9; } .hero::before { content: ""; position: absolute; z-index: -2; inset: -4%; background: url("/demo-media/workspace.jpg") center / cover no-repeat; filter: saturate(.55) contrast(.9); opacity: .5; animation: heroBackdropDrift 18s ease-in-out infinite alternate; will-change: transform; } /* Deckt das Foto ab, ohne es zu ersticken — die Werte tragen die Lesbarkeit der Headline und muessen zusammen mit .heroAurora beurteilt werden. */ .hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(249,251,252,.82), rgba(249,251,252,.62) 55%, rgba(240,247,246,.55)), linear-gradient(180deg, rgba(var(--glassRGB),.12), rgba(233,242,248,.35)); background-size: 135% 100%, 100% 100%; animation: heroLightSweep 14s ease-in-out infinite alternate; } /* Verbindungsnetz im Hero: die wandernden Striche entstehen durch eine stroke-dashoffset-Animation — dasselbe Vokabular wie .flowPath weiter unten auf der Seite. Der Versatz entspricht der Summe der stroke-dasharray (5+11), damit die Schleife nahtlos laeuft. */ .heroNet { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .netLines path { fill: none; stroke: rgba(37,99,235,.30); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 11; animation: netFlow 2.6s linear infinite; } .netLines path:nth-child(even) { stroke: rgba(15,159,122,.28); animation-duration: 3.4s; } .netLines path:nth-child(3n) { animation-duration: 4.2s; } .netNodes circle { fill: rgba(37,99,235,.34); } .netNodes circle:nth-child(even) { fill: rgba(15,159,122,.32); } /* Raster wird von home-anim.js befuellt und nur dort erzeugt, wo es eine Maus gibt. --s/--o setzt der Zeiger-Handler pro Kachel. */ .heroTiles { position: absolute; inset: 0; z-index: 0; display: grid; gap: 7px; padding: 12px; pointer-events: none; } .heroTiles i { display: block; border-radius: 5px; background: rgba(37,99,235,.10); transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(var(--s, .55)); opacity: var(--o, .42); transition: transform .3s cubic-bezier(.22,.9,.3,1), opacity .3s ease; will-change: transform; } .heroAurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .heroAurora i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); will-change: transform; } .heroAurora i:nth-child(1) { width: 46%; height: 70%; left: 2%; top: -14%; background: rgba(37,99,235,.30); animation: auroraDriftA 24s ease-in-out infinite alternate; } .heroAurora i:nth-child(2) { width: 40%; height: 62%; right: 4%; top: 12%; background: rgba(15,159,122,.26); animation: auroraDriftB 29s ease-in-out infinite alternate; } .heroAurora i:nth-child(3) { width: 34%; height: 50%; left: 38%; bottom: -18%; background: rgba(125,211,252,.28); animation: auroraDriftC 34s ease-in-out infinite alternate; } .heroText { position: relative; z-index: 1; display: grid; justify-items: center; } /* Hellt nur den Textbereich auf, waehrend die Raender Foto und .heroAurora zeigen. Traegt den Fliesstext auf WCAG AA (4.69) — ohne sie faellt er ueber dunklen Foto-Stellen auf 3.43. Nicht entfernen, ohne den Kontrast neu zu pruefen. */ .heroText::before { content: ""; position: absolute; z-index: -1; inset: -10% -8%; background: radial-gradient(ellipse at center, rgba(250,252,253,.92), rgba(250,252,253,.62) 52%, rgba(250,252,253,0) 76%); pointer-events: none; } .heroText h1 { font-size: 76px; line-height: .98; margin: 0 0 18px; max-width: 13ch; color: #111827; } .heroText p { color: var(--muted); font-size: 18px; max-width: 680px; } .grad { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: normal; word-break: keep-all; } .heroFeat { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: var(--text); } .heroFeat li { color: var(--text); padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(var(--glassRGB),.8); font-size: 13px; font-weight: 700; } .eyebrow { margin: 0 0 10px; color: var(--accent2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .heroActions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; } .heroActions button { min-width: 150px; } .aiLogoRail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; color: var(--muted); font-size: 12px; } .aiLogoRail b, .assistantGrid div { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 8px; box-shadow: 0 8px 24px rgba(24,34,54,.05); } .aiLogoRail b { padding: 6px 10px; font-size: 13px; } .landingSection { margin-top: 64px; padding-top: 8px; } .sectionHead { max-width: 860px; margin-bottom: 22px; } .sectionHead.centered { max-width: 820px; margin: 0 auto 20px; text-align: center; } .sectionHead h2, .landingSection h2 { margin: 0 0 10px; color: var(--text); font-size: clamp(24px, 3vw, 34px); line-height: 1.16; text-transform: none; letter-spacing: 0; } .sectionHead p, .landingSection p { color: var(--muted); font-size: 16px; margin: 0; } .whyPostOmnia { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr); gap: clamp(22px, 4vw, 56px); align-items: start; margin-top: 36px; padding: 30px; border: 1px solid rgba(var(--lineRGB),.9); border-radius: 18px; background: radial-gradient(circle at 12% 0%, rgba(15,159,122,.10), transparent 34%), linear-gradient(135deg, rgba(var(--glassRGB),.98), rgba(238,243,249,.76)); box-shadow: 0 18px 45px rgba(24,34,54,.06); } .whyPostOmnia::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("/demo-media/team.jpg") right center / 54% auto no-repeat; filter: saturate(.58); opacity: .16; } .whyPostOmnia::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(250,252,253,.98), rgba(250,252,253,.9) 54%, rgba(241,248,247,.68)); } .whyPostOmnia > * { position: relative; z-index: 1; } .whyIntro h2 { margin-bottom: 12px; } .whyIntro p:not(.eyebrow) { max-width: 52ch; } .whyGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .whyGrid article { min-height: 164px; display: grid; align-content: start; gap: 9px; background: rgba(var(--glassRGB),.78); border: 1px solid rgba(var(--lineRGB),.92); border-radius: 12px; padding: 16px; box-shadow: 0 10px 26px rgba(24,34,54,.045); } .whyGrid span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(15,159,122,.11); color: var(--accent2); font-size: 12px; font-weight: 900; border: 1px solid rgba(15,159,122,.22); } .whyGrid b { font-size: 16px; line-height: 1.25; color: var(--text); } .whyGrid p { font-size: 14px; line-height: 1.46; } .teamInviteSpotlight { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid rgba(15,159,122,.24); border-radius: 14px; background: linear-gradient(135deg, rgba(15,159,122,.10), rgba(var(--glassRGB),.92) 58%, rgba(22,110,155,.09)); } .teamInviteSpotlight div { display: grid; gap: 6px; max-width: 760px; } .teamInviteSpotlight span { color: var(--accent2); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .creativeLanding { position: relative; isolation: isolate; overflow: hidden; padding: 30px; border-radius: 18px; border: 1px solid rgba(37,99,235,.22); background: #18324d; box-shadow: 0 22px 60px rgba(24,34,54,.14); } .creativeLanding::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("/demo-media/launch.jpg") center / cover no-repeat; filter: saturate(.72); opacity: .5; } .creativeLanding::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(106deg, rgba(14,25,41,.94), rgba(23,55,87,.82) 56%, rgba(8,104,88,.74)); } .creativeLanding > * { position: relative; z-index: 1; } .creativeLanding .eyebrow, .creativeLanding h2, .creativeLanding p { color: #fff; } .creativeLanding .sectionHead p:not(.eyebrow) { opacity: .86; max-width: 70ch; } .creativeLandingGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; } .creativeLandingGrid article { border: 1px solid rgba(var(--glassRGB),.20); border-radius: 12px; padding: 16px; background: rgba(var(--glassRGB),.10); display: grid; gap: 8px; } .creativeLandingGrid b { color: #fff; font-size: 16px; } .creativeLandingGrid p { font-size: 14px; opacity: .82; } .growthLanding { position: relative; isolation: isolate; overflow: hidden; padding: 30px; border-radius: 18px; border: 1px solid rgba(15,159,122,.22); background: #f7fbf9; box-shadow: 0 18px 48px rgba(24,34,54,.10); } .growthLanding::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("/demo-media/analytics.jpg") right center / 52% auto no-repeat; filter: saturate(.58); opacity: .18; } .growthLanding::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(var(--glassRGB),.98), rgba(247,252,249,.92) 53%, rgba(238,247,252,.72)); } .growthLanding > * { position: relative; z-index: 1; } .growthLanding .sectionHead p:not(.eyebrow) { max-width: 74ch; } .growthLandingGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; } .growthLandingGrid article { border: 1px solid rgba(15,159,122,.20); border-radius: 12px; padding: 16px; background: rgba(var(--glassRGB),.76); display: grid; gap: 8px; } .growthLandingGrid b { color: var(--text); font-size: 16px; } .growthLandingGrid p { font-size: 14px; color: var(--muted); } @media (max-width: 760px) { .creativeLandingGrid, .growthLandingGrid { grid-template-columns: 1fr; } .creativeLanding, .growthLanding { padding: 22px; } } .teamInviteSpotlight b { color: var(--text); font-size: 18px; line-height: 1.25; } .teamInviteSpotlight p { font-size: 14px; line-height: 1.48; } .teamInviteSpotlight button { flex: 0 0 auto; } .productShowcase { margin-top: 44px; } .showcaseGrid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(270px, .58fr); gap: 20px; align-items: stretch; } .videoMock { position: relative; min-height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); } .mockTop { display: flex; gap: 7px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; } .mockTop span { width: 9px; height: 9px; border-radius: 50%; background: #dbe5f2; } .mockTop b { margin-left: auto; color: var(--text); font-size: 13px; } .mockBody { display: grid; grid-template-columns: 82px 1fr 116px; gap: 14px; padding: 16px; min-height: 360px; } .mockSidebar { display: grid; align-content: start; gap: 10px; border-right: 1px solid var(--line); padding-right: 14px; } .mockSidebar span { height: 34px; border-radius: 9px; background: var(--card2); } .mockSidebar span:first-child { background: var(--accent); } .mockComposer { display: grid; align-content: start; gap: 14px; min-width: 0; } .aiFlowStage { position: relative; min-height: 230px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(180deg, rgba(15,159,122,.06) 1px, transparent 1px), #f9fbff; background-size: 28px 28px; overflow: hidden; } .flowSvg { width: 100%; height: 100%; min-height: 230px; display: block; } .flowPath { fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: .78; } .aiPath { stroke: rgba(37,99,235,.55); } .pubPath { stroke: rgba(15,159,122,.58); } .sourceNode rect { fill: #fff; stroke: rgba(37,99,235,.22); filter: drop-shadow(0 8px 18px rgba(24,34,54,.08)); } .sourceNode text, .channelNode text, .hubNode text { font: 700 13px system-ui, -apple-system, Segoe UI, Roboto, sans-serif; fill: var(--text); text-anchor: middle; dominant-baseline: middle; } .channelNode image { x: -54px; y: -13px; width: 26px; height: 26px; preserveAspectRatio: xMidYMid meet; } .channelNode text { text-anchor: start; font-size: 12px; fill: #334155; } .hubNode circle { fill: #fff; stroke: rgba(15,159,122,.28); stroke-width: 1.5; filter: drop-shadow(0 18px 32px rgba(15,159,122,.18)); } .hubNode text { font-size: 13px; fill: #102342; } .flowPackets circle { filter: drop-shadow(0 0 8px rgba(15,159,122,.45)); } .aiPackets circle { fill: var(--accent); } .pubPackets circle { fill: var(--accent2); } .mockLines { display: grid; gap: 9px; } .mockLines i { height: 12px; border-radius: 999px; background: #e4ebf5; animation: pulseLine 2.2s ease-in-out infinite; } .mockLines i:nth-child(2) { width: 82%; animation-delay: .18s; } .mockLines i:nth-child(3) { width: 58%; animation-delay: .36s; } .mockChannels { display: flex; flex-wrap: wrap; gap: 8px; } .mockChannels img { width: 38px; height: 38px; object-fit: contain; padding: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(24,34,54,.06); } .mockStats { display: grid; align-content: start; gap: 10px; } .mockStats strong { display: grid; place-items: center; height: 54px; border-radius: 12px; background: #effaf6; color: var(--accent2); } .mockStats span { height: 58px; border-radius: 12px; background: linear-gradient(180deg, #f9fbff, #eef3f9); border: 1px solid var(--line); animation: floatCard 3s ease-in-out infinite; } .mockStats span:nth-child(3) { animation-delay: .3s; } .mockStats span:nth-child(4) { animation-delay: .6s; } .playBadge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; letter-spacing: 0; color: #fff; background: rgba(24,34,54,.82); border: 1px solid rgba(var(--glassRGB),.6); box-shadow: 0 16px 40px rgba(24,34,54,.2); animation: playBadgePulse 2.6s ease-in-out infinite; } .showcaseCards { display: grid; gap: 12px; } .showcaseCards article, .pricingStoryGrid article, .quoteGrid article { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: 0 10px 26px rgba(24,34,54,.05); } .showcaseCards article { display: grid; gap: 7px; } .showcaseCards span { color: var(--accent2); font-size: 12px; font-weight: 800; letter-spacing: .08em; } .showcaseCards b { font-size: 16px; } .showcaseCards p { font-size: 14px; } .imageWallSection { margin-top: 54px; } .imageWallGrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .65fr) minmax(230px, .65fr); gap: 16px; align-items: stretch; } .imageTile { margin: 0; min-height: 280px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: var(--shadow); display: grid; grid-template-rows: minmax(0, 1fr) auto; } .imageTileWide { grid-row: span 2; min-height: 500px; grid-template-rows: auto auto; } .imageTilePosts { grid-column: span 2; } .imageTile > img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; object-position: top left; display: block; background: #eef8f4; } .imageTileWide > img { height: 430px; min-height: 430px; object-fit: cover; object-position: top left; background: var(--card); } .imageTileLogo > img { object-fit: contain; padding: 42px; background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(15,159,122,.12)), #f9fbff; } .imageTilePhone > img { object-fit: contain; object-position: top center; padding: 12px; background: #111827; } .screenshotTile > img { border-bottom: 1px solid var(--line); } .imageTile figcaption { display: grid; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--line); background: rgba(var(--glassRGB),.95); } .imageTile figcaption b { color: var(--text); font-size: 14px; } .imageTile figcaption span { color: var(--muted); font-size: 13px; line-height: 1.45; } .freePostGrid { min-height: 320px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(15,159,122,.08)), #f8fafc; } .freePostGrid article { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--card); display: grid; grid-template-rows: minmax(0, 1fr) auto; box-shadow: 0 12px 28px rgba(24,34,54,.07); } .freePostGrid img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; } .freePostGrid span { padding: 11px 12px; color: var(--text); font-size: 13px; font-weight: 800; } .channelImageGrid { min-height: 230px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: center; padding: 24px; background: linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(180deg, rgba(15,159,122,.06) 1px, transparent 1px), #f9fbff; background-size: 28px 28px; } .channelImageGrid img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(24,34,54,.06); } .postPreviewImage { min-height: 230px; padding: 24px; display: grid; align-content: center; gap: 16px; background: linear-gradient(135deg, #f9fbff, #effaf6); } .postPreviewImage img { width: 74px; height: 74px; object-fit: contain; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 28px rgba(24,34,54,.08); } .postPreviewImage div { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(24,34,54,.07); } .postPreviewImage span { height: 12px; border-radius: 999px; background: #e3ebf5; } .postPreviewImage span:nth-child(2) { width: 78%; } .postPreviewImage span:nth-child(3) { width: 54%; background: linear-gradient(90deg, var(--accent), var(--accent2)); } .mediaReelSection { margin-top: 44px; overflow: visible; padding-top: 18px; padding-bottom: 18px; } .mediaReel { border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; padding: 26px 0; } .reelTrack { display: flex; align-items: stretch; gap: 14px; width: max-content; padding: 12px 18px; animation: reelScroll 52s linear infinite; } .reelTrack article { width: 206px; min-height: 162px; border: 1px solid var(--line); border-radius: 12px; background: #f9fbff; padding: 14px; display: grid; gap: 8px; align-content: start; overflow: visible; } .reelTrack img { width: 100%; height: 76px; object-fit: contain; border-radius: 10px; background: var(--card); border: 1px solid var(--line); padding: 14px; display: block; } .reelTrack b { font-size: 14px; } .reelTrack span { color: var(--muted); font-size: 12px; } .analyticsShowcase { margin-top: 54px; } .analyticsMock { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); gap: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); padding: 18px; } .analyticsChart { min-height: 280px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; padding: 18px; border-radius: 14px; background: #f9fbff; border: 1px solid var(--line); } .analyticsChart span { position: relative; height: var(--h); min-height: 54px; border-radius: 12px 12px 8px 8px; background: linear-gradient(180deg, var(--accent), var(--accent2)); animation: growBar 2.8s ease-in-out infinite alternate; } .analyticsChart span:nth-child(2) { animation-delay: .18s; } .analyticsChart span:nth-child(3) { animation-delay: .36s; } .analyticsChart span:nth-child(4) { animation-delay: .54s; } .analyticsChart span:nth-child(5) { animation-delay: .72s; } .analyticsChart b { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); color: var(--muted); font-size: 11px; white-space: nowrap; font-weight: 700; } .insightPanel { display: grid; gap: 12px; } .insightPanel div { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--card); display: grid; gap: 5px; } .insightPanel div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); animation: insightSweep 3s ease-in-out infinite; } .insightPanel strong { color: var(--text); font-size: 14px; } .insightPanel span { color: var(--muted); font-size: 13px; } .featureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .featureBlock { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); } .featureBlock h3 { margin: 12px 0 8px; font-size: 17px; } .featureBlock p { font-size: 14px; } .stepNo { color: var(--accent2); font-weight: 800; font-size: 12px; letter-spacing: .08em; } .agencyWorkflowGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .agencyMetricGrid > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--glassRGB),.7); } .agencyMetricGrid b { color: var(--text); font-size: 20px; } .agencyMetricGrid small { color: var(--muted); line-height: 1.35; } .leadRow { padding: 9px 0; border-bottom: 1px solid var(--line); line-height: 1.5; } .leadRow:last-child { border-bottom: 0; } /* Link-in-Bio-Showcase: Features links, animiertes Telefon-Mockup rechts. */ .bioShowcase { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center; } .bioFeatureGrid { grid-template-columns: repeat(2, 1fr); } .bioShowcaseCta { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .bioShowcaseCta span { color: var(--muted); font-size: 13px; } .bioExampleLink { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .bioExampleLink:hover { border-bottom-color: var(--accent); } .bioPhoneDemo { position: relative; justify-self: center; padding: 24px 70px; } .landingPhone { width: 264px; padding: 10px; border-radius: 38px; background: #0f172a; box-shadow: 0 34px 80px rgba(24,34,54,.28); } .landingPhoneScreen { border-radius: 30px; padding: 32px 16px 20px; display: grid; justify-items: center; gap: 9px; position: relative; overflow: hidden; background: radial-gradient(220px 130px at 12% -4%, rgba(37,99,235,.16), transparent 70%), radial-gradient(200px 120px at 96% -2%, rgba(15,159,122,.15), transparent 70%), #f5f7fb; } /* Mit Headerbild rückt der Inhalt nach unten; das Cover füllt die Oberkante. */ .landingPhoneScreen.hasCover { padding-top: 0; } .landingPhoneScreen.hasCover .demoAvatar, .landingPhoneScreen.hasCover .demoAvatarImg { margin-top: -34px; position: relative; z-index: 1; } .demoCover { width: calc(100% + 32px); margin: 0 -16px 4px; height: 84px; display: block; overflow: hidden; } .demoCover img { width: 100%; height: 100%; object-fit: cover; display: block; } .landingPhoneLink { display: block; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .landingPhoneLink:hover { transform: translateY(-4px); box-shadow: 0 42px 90px rgba(24,34,54,.34); } .landingPhoneLink b, .landingPhoneLink .demoBio, .landingPhoneLink .demoLink { color: var(--text); } .demoAvatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 24px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: 3px solid #fff; box-shadow: 0 10px 24px rgba(24,34,54,.18); } .demoAvatarImg { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 10px 24px rgba(24,34,54,.18); } .landingPhoneScreen b { font-size: 16px; color: var(--text); } .demoBio { color: var(--muted); font-size: 12px; margin-bottom: 4px; } .demoLink { width: 100%; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 10px; font-size: 13px; font-weight: 600; color: var(--text); box-shadow: 0 6px 16px rgba(24,34,54,.06); } .demoBadge { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); border: 1px solid var(--line); background: var(--card); padding: 4px 10px; border-radius: 999px; } .demoBadge .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); } .demoChip { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; font-size: 12px; color: var(--muted); box-shadow: var(--shadow); animation: demoFloat 5s ease-in-out infinite; } .demoChipClicks { top: 66px; left: 0; } .demoChipClicks b { color: var(--accent2); font-size: 15px; } .demoChipQr { bottom: 44px; right: 0; animation-delay: 2.5s; } .demoChipQr svg { width: 30px; height: 30px; color: var(--text); } /* QR bleibt in beiden Themes auf Weiß – sonst ist er nicht scannbar. */ .demoChipQr img { width: 46px; height: 46px; border-radius: 6px; background: #fff; } @keyframes demoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .demoChip { animation: none; } } @media (max-width: 1080px) { .bioShowcase { grid-template-columns: 1fr; } .bioPhoneDemo { padding: 20px 56px; } } @media (max-width: 640px) { .bioFeatureGrid { grid-template-columns: 1fr; } } .audienceSection { border-top: 1px solid var(--line); padding-top: 34px; } .audienceGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .audienceGrid article { position: relative; overflow: hidden; min-height: 188px; display: grid; align-content: start; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--card); box-shadow: 0 10px 26px rgba(24,34,54,.05); } .audienceGrid article::after { content: ""; position: absolute; inset: auto 16px 0 16px; height: 3px; border-radius: 999px 999px 0 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: .82; } .audienceIcon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #effaf6; color: var(--accent2); border: 1px solid rgba(15,159,122,.22); font-size: 12px; font-weight: 900; } .audienceGrid b { font-size: 16px; color: var(--text); } .audienceGrid p { font-size: 14px; } .splitSection { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: start; border-top: 1px solid var(--line); padding-top: 34px; } .splitSection.reverse { grid-template-columns: 1fr .9fr; } .processList { display: grid; gap: 10px; } .processList div { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--card); display: grid; gap: 4px; box-shadow: 0 8px 24px rgba(24,34,54,.04); } .processList b { color: var(--text); } .processList span { color: var(--muted); font-size: 14px; } .assistantGrid { grid-column: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .assistantGrid div { padding: 14px; display: grid; gap: 6px; } .assistantGrid span { color: var(--muted); font-size: 12px; } .assistantGrid b { color: var(--text); font-size: 15px; } .platformCloud { display: flex; flex-wrap: wrap; gap: 9px; } .platformCloud span, .trustFacts span { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 11px; color: var(--text); font-size: 13px; } .factsBand { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 20px; padding-bottom: 8px; } .factsRow { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .factItem { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 12px; color: var(--text); font-size: 13px; } .liveProof { margin: 0; font-weight: 700; font-size: 15px; color: var(--text); } .platformCloud span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; } .platformCloud img { width: 18px; height: 18px; object-fit: contain; } .quoteGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .quoteGrid article { display: grid; gap: 10px; } .quoteGrid p { font-size: 15px; color: var(--text); } .quoteGrid b { color: var(--muted); font-size: 13px; } .stars { color: #d97706; letter-spacing: 0; font-size: 13px; } .trustBand { border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--card); box-shadow: var(--shadow); } .trustFacts { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; max-width: 420px; } .pricing { margin-top: 56px; } .pricing h2 { text-align: center; font-size: 24px; color: var(--text); text-transform: none; letter-spacing: 0; } .pricing .planGrid { margin: 20px 0 12px; } .pricingStoryGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 20px; } .pricingStoryGrid article { display: grid; gap: 5px; } .pricingStoryGrid b { color: var(--text); font-size: 14px; } .pricingStoryGrid span { color: var(--muted); font-size: 13px; } .setupSection { border-top: 1px solid var(--line); padding-top: 34px; } .setupTimeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .setupTimeline::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 2px; background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(15,159,122,.38)); } .setupTimeline article { position: relative; display: grid; justify-items: center; align-content: start; gap: 9px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 14px; box-shadow: 0 10px 26px rgba(24,34,54,.05); } .setupTimeline span { z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 10px 24px rgba(37,99,235,.16); } .setupTimeline b { font-size: 15px; color: var(--text); } .setupTimeline p { font-size: 13px; } .faqSection { border-top: 1px solid var(--line); padding-top: 34px; } .faqGrid { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; } .faqGrid details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; box-shadow: 0 8px 24px rgba(24,34,54,.04); } .faqGrid summary { cursor: pointer; list-style: none; padding: 15px 28px 15px 0; color: var(--text); font-weight: 800; position: relative; } .faqGrid summary::-webkit-details-marker { display: none; } .faqGrid summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 20px; line-height: 1; font-weight: 700; } .faqGrid details[open] summary::after { content: "-"; } .faqGrid p { border-top: 1px solid var(--line); padding: 12px 0 16px; font-size: 14px; } .faqAssistant { max-width: 880px; margin: 18px auto 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; align-items: stretch; padding: 20px; border: 1px solid rgba(15,159,122,.22); border-radius: 12px; background: linear-gradient(135deg, rgba(15,159,122,.08), rgba(37,99,235,.06)), #fff; box-shadow: 0 14px 36px rgba(24,34,54,.06); } .faqAssistant h3 { margin: 2px 0 6px; font-size: 22px; color: var(--text); } .faqAssistant p { font-size: 14px; } .faqAssistantBox { display: grid; gap: 9px; align-content: start; } .faqAssistantBox label { font-size: 13px; font-weight: 800; color: var(--text); } .faqAskRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .faqAskRow input { min-width: 0; height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: var(--card); color: var(--text); font: inherit; } .faqAskRow input:focus { outline: 2px solid rgba(37,99,235,.16); border-color: rgba(37,99,235,.45); } .faqAssistantResult { min-height: 50px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(var(--glassRGB),.78); color: var(--muted); font-size: 14px; line-height: 1.5; } .faqAssistantResult strong { color: var(--text); } .faqAssistantActions { display: flex; flex-wrap: wrap; gap: 8px; } .finalCta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 28px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, rgba(24,34,54,.98), rgba(16,35,66,.96)), var(--text); box-shadow: 0 24px 60px rgba(24,34,54,.18); } .finalCta h2 { color: #fff; } .finalCta p { color: rgba(var(--glassRGB),.76); } .finalCta .eyebrow { color: #6ee7c8; } .finalCta button { min-width: 190px; background: var(--card); color: var(--text); border: 1px solid rgba(var(--glassRGB),.6); } @keyframes pulseLine { 0%, 100% { opacity: .55; transform: scaleX(.96); transform-origin: left; } 50% { opacity: 1; transform: scaleX(1); } } @keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes aiSourcePulse { 0%, 100% { box-shadow: 0 18px 45px rgba(37,99,235,.12); } 50% { box-shadow: 0 24px 60px rgba(37,99,235,.2); } } @keyframes postOmniaPulse { 0%, 100% { box-shadow: 0 18px 45px rgba(15,159,122,.14); transform: translate(-50%, -50%) scale(1); } 50% { box-shadow: 0 24px 60px rgba(15,159,122,.22); transform: translate(-50%, -50%) scale(1.04); } } @keyframes aiBridgeBounce { from { left: 0; opacity: .95; } to { left: calc(100% - 12px); opacity: .95; } } @keyframes aiBridgeBounceMobile { from { top: 0; opacity: .95; } to { top: calc(100% - 12px); opacity: .95; } } @keyframes packetFlow { from { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(var(--packet-distance)); opacity: 0; } } @keyframes playBadgePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } } @keyframes growBar { from { height: calc(var(--h) - 10%); } to { height: min(92%, calc(var(--h) + 10%)); } } @keyframes insightSweep { 0%, 100% { background: var(--accent); } 50% { background: var(--accent2); } } @keyframes reelScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Rechtsseiten */ .legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; line-height: 1.7; } .legal h1 { font-size: 30px; margin-bottom: 8px; } .legalBrand { margin-bottom: 18px; } .legal h2 { font-size: 17px; margin: 28px 0 8px; color: var(--text); text-transform: none; letter-spacing: 0; } .legal h3 { font-size: 15px; margin: 18px 0 6px; color: var(--text); } .formular { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px; margin: 8px 0; font-size: 14px; } .legal ul { padding-left: 20px; } .legal li { margin: 4px 0; } .legal a { color: var(--accent); } .backlink { display: inline-block; margin-bottom: 20px; color: var(--muted); } .note { background: rgba(251,191,36,.12); border: 1px solid var(--warn); color: var(--warn); padding: 10px 14px; border-radius: 8px; font-size: 13px; } #promoSlot { display: grid; gap: 12px; margin-top: 40px; } .promoBanner { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); } .promoImg { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .promoBody { display: grid; gap: 2px; } .promoLabel { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .promoText { color: var(--muted); font-size: 13px; } .landingFoot { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } .landingFoot a { color: var(--muted); text-decoration: none; } .landingFoot a:hover { color: var(--accent); } .landingFootCols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; } .landingFootCols h4 { margin: 0 0 12px; font-size: 13px; color: var(--text); overflow-wrap: normal; word-break: keep-all; } .landingFootCols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .landingFootSocial { display: flex; gap: 14px; margin-top: 28px; } .landingFootSocial img { width: 18px; height: 18px; opacity: .55; filter: grayscale(1); transition: opacity .15s, filter .15s; } .landingFootSocial a:hover img { opacity: 1; filter: none; } .landingFootBottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); } .appFoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; /* Sitzt unter der Hauptspalte: 200px Versatz fuer die linksbuendige Sidebar, das Prozent-Padding zentriert den Inhalt wie in main auf --main-max. */ margin-left: 200px; padding: 18px max(24px, calc((100% - 200px - var(--main-max)) / 2)) 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } .appFoot a { color: var(--muted); } .appFoot a:hover { color: var(--accent); } /* Layout: Sidebar + Main */ .topright { display: flex; align-items: center; gap: 12px; } /* Weiße Sidebar-Spalte + Trennlinie liegen auf dem Grid selbst, damit sie immer die volle Höhe füllen – die (kurze) Menüleiste darin kann so frei sticky sein. */ .layout { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - var(--topbar-h, 57px)); /* Volle Breite: die Sidebar klebt am linken Fensterrand. Zentriert wird nicht das Grid, sondern der Inhalt der Hauptspalte (siehe main). */ background: linear-gradient(to right, #fff 0, #fff 199px, var(--line) 199px, var(--line) 200px, transparent 200px); } .sidebar { display: flex; flex-direction: column; gap: 6px; padding: 16px; /* Menüleiste bleibt beim Scrollen unter der (sticky) Topbar stehen. Die echte Topbar-Höhe setzt app.js als --topbar-h (sie variiert mit Umbrüchen). */ position: sticky; top: var(--topbar-h, 57px); align-self: start; max-height: calc(100vh - var(--topbar-h, 57px)); overflow-y: auto; } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; background: none; } /* Horizontale Leiste auf Mobile: volle Breite, oben angeheftet unter der Topbar. */ .sidebar { flex-direction: row !important; overflow-x: auto; max-height: none; align-self: stretch; position: sticky; top: var(--topbar-h, 57px); z-index: 5; background: var(--card); border-bottom: 1px solid var(--line); } .appFoot { margin-left: 0; padding-left: 24px; } } .navbtn { background: transparent; color: var(--muted); text-align: left; font-weight: 500; } .navbtn.active { background: var(--card2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); } /* Gesperrte Navigationseinträge: reduzierte Darstellung + Schloss, bleiben aber anklickbar (öffnen die Vorschau). Der Tarif-Hinweis steht als kleiner Zusatz. */ .navbtn.locked { color: var(--muted); opacity: 0.72; } .navbtn.locked::after { content: "🔒"; font-size: 0.78em; margin-left: 6px; opacity: 0.75; filter: grayscale(0.3); } .navbtn.locked.active { opacity: 1; } .navPlanTag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 0.66em; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--card2); color: var(--muted); vertical-align: middle; } /* main fuellt seine Grid-Spalte; das seitliche Padding zentriert den Inhalt darin auf --main-max (Prozent-Padding bezieht sich auf die Spaltenbreite). */ main { padding: 24px max(24px, calc((100% - var(--main-max)) / 2)); min-width: 0; position: relative; } /* Deaktivierte Vorschau des Bezahlbereichs: klar sichtbar, aber nicht bedienbar. Der Inhalt bleibt gut lesbar (kein Weichzeichner), wird für Eingaben inert und für Screenreader ausgeblendet. */ .view.is-locked-preview { opacity: 0.97; pointer-events: none; user-select: none; } /* Zugängliche Upgrade-Karte über der Vorschau. */ .upgradeGate { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; pointer-events: none; } .upgradeGate[hidden] { display: none; } .upgradeGateCard { pointer-events: auto; max-width: 460px; width: 100%; margin-top: 6vh; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); padding: 28px 26px; text-align: center; } .upgradeGateCard .gateIcon { font-size: 2.1rem; line-height: 1; } .upgradeGateCard h3 { margin: 12px 0 8px; font-size: 1.28rem; } .upgradeGateCard p { color: var(--muted); margin: 0 0 18px; } .upgradeGateCard .gatePlan { display: inline-block; margin-bottom: 14px; padding: 3px 12px; border-radius: 999px; background: var(--accent-soft, var(--card2)); color: var(--accent); font-weight: 700; font-size: 0.85rem; } .upgradeGateCard .gateActions { display: flex; flex-direction: column; gap: 10px; } .upgradeGateCard .gateActions button { width: 100%; } @media (prefers-color-scheme: dark) { .upgradeGateCard { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Grid-Spalten dürfen unter ihre Inhaltsbreite schrumpfen – sonst zwingt ein fixes Element (z. B. der 300px-Telefonrahmen der Bio-Vorschau) die Spalte breiter als den Viewport und der untere Bereich läuft über. */ .grid2 > .col { min-width: 0; } @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } } /* Die Bio-Verwaltung braucht rechts mehr Platz fuer URL-Felder und Aktionen. Auf kleineren App-Breiten wird frueher auf eine breite Spalte gewechselt. */ #view-linkinbio > .grid2 { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); } @media (max-width: 1180px) { #view-linkinbio > .grid2 { grid-template-columns: 1fr; } } #teamSwitcher { max-width: 220px; } /* Upload-Fortschritt */ .progressWrap { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; position: relative; height: 26px; } .progressWrap .bar { background: var(--accent); height: 100%; width: 0; transition: width .2s; } .progressWrap span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--text); } /* Composer-Untertabs: Segment-Pillen, die die vielen Karten entzerren. */ .subTabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 18px; } .subTab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--card); color: var(--muted); border: 1px solid var(--line); font-weight: 600; font-size: 14px; } .subTab:hover { filter: none; color: var(--text); border-color: var(--accent); } .subTab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .subTab.active:hover { color: #fff; } .subTabCount { min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; background: var(--card2); color: var(--muted); font-size: 12px; } .subTab.active .subTabCount { background: rgba(var(--glassRGB),.22); color: #fff; } .subTabCount:empty { display: none; } /* Kalender */ .calHead { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; } .calHead h2 { margin: 0; text-transform: capitalize; color: var(--text); } /* Feste Titelbreite: sonst wandert der ›-Knopf je nach Monatsnamen hin und her ("Mai 2026" vs. "September 2026"). 15ch deckt den längsten Monatsnamen aller fünf Sprachen ab (z. B. spanisch "septiembre de 2026"). */ #calTitle { min-width: 15ch; text-align: center; } .calHead .ghostBtn { padding: 7px 14px; font-size: 13px; } .calStats { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .calStat { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--muted); } .calStat b { color: var(--text); } .calLegend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; color: var(--muted); font-size: 12px; } .calLegend > span { display: inline-flex; align-items: center; gap: 6px; } .calDot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; } .dotScheduled { background: var(--accent); } .dotPublished { background: var(--accent2); } .dotPartial { background: var(--warn); } .dotFailed { background: var(--danger); } .calDropHint { margin-left: auto; } /* Tages-Panel rechts neben dem Monat, sobald ein Tag ausgewählt ist. */ /* minmax(0, 1fr) statt 1fr: 1fr heißt "mindestens Inhaltsbreite" – lange, nicht umbrechende Post-Titel drückten das Raster sonst nach rechts raus. */ .calBody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .calBody.withPanel { grid-template-columns: minmax(0, 1fr) 320px; } .calDayPanel { position: sticky; top: calc(var(--topbar-h, 57px) + 16px); } .calDayPanel .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .calDayPanel .head b { text-transform: capitalize; } .calPanelPost { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--card2); display: grid; gap: 7px; } .calPanelPost p { margin: 0; font-size: 13px; } .calPanelMeta { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .calPanelActions { display: flex; gap: 8px; flex-wrap: wrap; } .calPanelActions button { padding: 6px 11px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; } #calPlanBtn { width: 100%; margin-top: 4px; white-space: nowrap; } @media (max-width: 1000px) { .calBody.withPanel { grid-template-columns: 1fr; } .calDayPanel { position: static; } } .calGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } /* iCal-Abo-Karte unterm Kalender. */ .calFeedCard { margin-top: 16px; } .calFeedCard .bioImgRow { margin: 8px 0; flex-wrap: wrap; } .calFeedCard input { font-size: 13px; color: var(--muted); } .calFeedCard .linkbtn { white-space: nowrap; } .calDow { text-align: center; color: var(--muted); font-size: 12px; padding: 4px 0; } .calCell { min-width: 0; overflow: hidden; min-height: 92px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; } .calCell.empty { background: transparent; border: none; cursor: default; } .calCell:hover:not(.empty) { border-color: var(--accent); } .calCell.weekend { background: #fafcff; } .calCell.today { border-color: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent2); } .calCell.today .calNum { color: var(--accent2); font-weight: 700; } .calCell.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37,99,235,.18); } .calCell.dropTarget { border-color: var(--accent); background: #eef4ff; } .calNum { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .calPost { font-size: 11px; padding: 2px 5px; border-radius: 5px; background: var(--card2); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--accent); } .calPost[draggable] { cursor: grab; } .calPost b { font-weight: 600; font-size: 10px; color: var(--muted); margin-right: 4px; } .calMore { font-size: 10px; color: var(--accent); font-weight: 600; padding: 1px 5px; } .calPost.status-published { border-left-color: var(--accent2); } .calPost.status-failed { border-left-color: var(--danger); } .calPost.status-partial { border-left-color: var(--warn); } .calPost.status-review { border-left-color: var(--warn); } .notifyBtn { position: relative; min-width: 38px; } .notifyBtn span { position: absolute; top: -7px; right: -7px; background: var(--danger); color: #fff; border-radius: 999px; font-size: 10px; min-width: 17px; height: 17px; display: grid; place-items: center; } .notificationPanel { position: fixed; top: 62px; right: 18px; z-index: 30; width: min(420px, calc(100vw - 28px)); max-height: 72vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 22px 60px rgba(24,34,54,.18); padding: 12px; } .notificationPanel .head, .card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .notificationHeadActions { display: flex; gap: 4px; } .notificationPanel .item + .item { margin-top: 8px; } .notificationPanel .aiApprovalItem { border-left: 3px solid var(--accent2); } .notificationPanel .aiApprovalItem .row { flex-wrap: wrap; } .compactList { gap: 6px; margin-top: 10px; } .opsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; } .opsGrid textarea { min-height: 76px; } .creativeStudio { border-color: rgba(37,99,235,.22); background: linear-gradient(180deg, #fff, #f8fbff); } .growthStudio { border-color: rgba(15,159,122,.24); background: linear-gradient(180deg, #fff, #f7fffb); } .creativeActions, .growthActions { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin-top: 10px; } .creativeActions button, .growthActions button { min-height: 38px; padding: 9px 10px; font-size: 12px; } .creativeActions .primaryAction, .growthActions .primaryAction { background: var(--accent2); } .creativeResult, .growthResult { margin-top: 12px; } .creativeResultInner, .growthResultInner { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--card); } .creativeResultInner img { width: 160px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); } .creativeResultInner ul, .growthResultInner ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; } .creativeResultInner p, .growthResultInner p { color: var(--muted); font-size: 13px; margin: 6px 0; } .growthResultInner { grid-template-columns: 1fr; } .growthResultInner pre { white-space: pre-wrap; word-break: break-word; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; max-height: 280px; overflow: auto; font-size: 12px; } @media (max-width: 640px) { .creativeResultInner, .growthResultInner { grid-template-columns: 1fr; } .creativeResultInner img { width: 100%; } } .templateMini { display: grid; gap: 6px; } .templateMini .row { flex-wrap: wrap; } .mediaLibraryGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-top: 10px; } .mediaTile { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--card2); display: grid; gap: 7px; } .mediaTile img, .mediaTile video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--card); } .mediaTile input { padding: 7px; font-size: 12px; } .reviewBox, .assistantBox { margin-top: 8px; border-left: 3px solid var(--warn); padding: 8px 10px; background: #fffaf0; color: var(--text); font-size: 12px; } .auditLine { display: grid; gap: 3px; } .auditLine small { color: var(--muted); } /* Analytics */ .statGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .statCard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; } .statNum { font-size: 26px; font-weight: 700; } .statLbl { color: var(--muted); font-size: 12px; margin-top: 4px; } .barRow { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: 13px; } .barLbl { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barTrack { background: var(--card2); border-radius: 999px; height: 10px; overflow: hidden; } .barFill { background: var(--accent); height: 100%; } .barFill.full { background: var(--danger); } .barVal { color: var(--muted); font-size: 12px; white-space: nowrap; } .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); } .tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); } .tbl td:first-child { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Plan-Karten */ .planGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .planCard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); } .pricingCard { min-height: 100%; padding: 22px; border-radius: 16px; } .planCard.current { border-color: var(--accent2); } .planName { font-size: 18px; font-weight: 700; } .planAudience { color: var(--muted); font-size: 13px; min-height: 20px; } .planPrice { color: var(--accent); font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .planPrice b { font-size: 28px; color: var(--text); } .planFeat { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 7px; color: var(--muted); font-size: 13px; flex: 1; } .planFeat li { display: flex; gap: 7px; align-items: flex-start; } .planFeat li span { color: var(--accent2); font-weight: 900; } .planCard button { width: 100%; } .planCard button:disabled { background: var(--card2); color: var(--muted); cursor: default; } .planCard.popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; overflow: hidden; } /* Hervorhebung des empfohlenen Tarifs nach einem Upgrade-CTA. */ .planCard.planHighlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); animation: planPulse 1.1s ease-in-out 2; } @keyframes planPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); } } .ribbon { position: absolute; top: 12px; right: 12px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } .trialLine { color: var(--accent2); font-size: 12px; font-weight: 600; } /* Pflichtfeld-Validierung im Kanal-Verbindungsformular. */ input.invalid, input[aria-invalid="true"] { border-color: var(--danger, #e11d48) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #e11d48) 25%, transparent); } .fieldErr { display: block; margin-top: 4px; color: var(--danger, #e11d48); font-size: 12px; font-weight: 600; } .fieldErr[hidden] { display: none; } .planPrice s { color: var(--muted); font-weight: 400; } .save { background: var(--accent2); color: #04231a; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } .trialBadge { background: rgba(52,211,153,.15); color: var(--accent2); border: 1px solid var(--accent2); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } .planControls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; } .landingPlanControls { justify-content: center; margin: 10px 0 20px; } .segmented { display: inline-flex; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .segmented button { background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; } .segmented button.active { background: var(--accent); color: #fff; } .couponRow { display: flex; gap: 8px; align-items: center; } .couponRow input { width: 150px; } .couponOk { color: var(--accent2); font-size: 12px; overflow-wrap: normal; word-break: keep-all; } .pricingCompare { margin-top: 24px; overflow-x: auto; } /* Agenturanfrage unter der Preistabelle: sichtbar, aber ruhiger als die Plan-Karten – sie ist die Alternative zum Selbstabschluss, nicht der Hauptweg. */ .enquiryCard { margin: 34px auto 0; max-width: 760px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; box-shadow: 0 12px 32px rgba(24,34,54,.06); } .enquiryCard h3 { margin: 0 0 6px; font-size: 20px; } .enquiryCard > p { margin: 0 0 18px; color: var(--muted); } .enquiryCard form { display: grid; gap: 12px; } .enquiryCard label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; } .enquiryCard input, .enquiryCard textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: inherit; width: 100%; } .enquiryRow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .7fr); gap: 12px; } .enquiryCard button { justify-self: start; } @media (max-width: 640px) { .enquiryRow { grid-template-columns: 1fr; } .enquiryCard { padding: 22px 18px; } } .compareTable { min-width: max(760px, calc(210px + var(--plan-columns) * 150px)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 12px 32px rgba(24,34,54,.06); } .compareRow { display: grid; grid-template-columns: minmax(210px, 1.35fr) repeat(var(--plan-columns), minmax(150px, 1fr)); border-top: 1px solid var(--line); background: var(--card); } .compareRow:first-child { border-top: 0; } .compareRow > * { padding: 12px 14px; font-size: 13px; border-left: 1px solid var(--line); } .compareRow > *:first-child { border-left: 0; color: var(--text); font-weight: 700; position: sticky; left: 0; z-index: 1; background: inherit; } .compareRow span:not(:first-child) { text-align: center; color: var(--muted); } .compareHead { background: #f9fbff; } .compareHead b { color: var(--text); text-align: center; } .compareHead b:first-child { text-align: left; } a { color: var(--accent); } .connectorCard input, .connectorCard textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; } .connectorCard textarea { resize: vertical; min-height: 150px; } code { overflow-wrap: anywhere; } .settingsLayout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; } .settingsTree { position: sticky; top: 82px; display: grid; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; } .settingsTab { background: transparent; color: var(--muted); border: 1px solid transparent; text-align: left; padding: 9px 10px; font-weight: 600; } .settingsTab.active { background: var(--card2); color: var(--text); border-color: var(--line); } .settingsContent { min-width: 0; } .summaryGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .summaryGrid div { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 3px; } .summaryGrid span { color: var(--muted); font-size: 12px; } .summaryGrid b { font-size: 16px; } .securitySettingsCard { gap: 16px; } .securityState { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .securityState b { color: var(--text); font-size: 16px; } .securityState p { margin: 4px 0 0; } /* Feedback-Dialog + Sternebewertung */ .modalOverlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(16, 35, 66, .45); backdrop-filter: blur(3px); padding: 16px; } .modalCard { position: relative; width: min(440px, 100%); background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 12px; box-shadow: 0 24px 60px rgba(16, 35, 66, .25); } .modalCard h3 { margin: 0; font-size: 19px; } .modalClose { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; } .modalClose:hover { color: var(--text); filter: none; background: #f2f5fa; } .starRow { display: flex; gap: 6px; justify-content: center; padding: 4px 0; } .starRow button { font-size: 30px; line-height: 1; padding: 4px 6px; background: transparent; border: none; color: #cdd7e4; cursor: pointer; transition: transform .08s ease, color .12s ease; } .starRow button:hover { transform: scale(1.15); filter: none; } .starRow button.active { color: #f59e0b; } .feedbackLater { width: 100%; } .feedbackReminder { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .28); } .twoFactorSetup { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f9fbff; } .twoFactorQr { display: grid; justify-content: center; padding: 8px; } .twoFactorQr svg { width: min(220px, 60vw); height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px; } .recoveryBox { border: 1px solid rgba(15,159,122,.32); background: rgba(15,159,122,.08); border-radius: 10px; padding: 12px; display: grid; gap: 8px; } .recoveryCodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .recoveryCodes code { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; text-align: center; } /* ============ Mobile-Optimierung ============ */ @media (max-width: 640px) { /* Obere Leiste: umbrechen statt überlaufen */ .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; } .topright { flex-wrap: wrap; gap: 8px; width: 100%; } #teamSwitcher { max-width: none; flex: 1 1 auto; } #userEmail { order: 3; flex-basis: 100%; font-size: 11px; } .brand { font-size: 16px; } .brand.big { font-size: 21px; } .brandMark { width: 28px; height: 28px; } .landingNav .brandMark { width: 34px; height: 34px; } /* Weniger Innenabstand, mehr Platz für Inhalt */ main { padding: 16px 14px; } .card { padding: 14px; } h2 { margin: 16px 0 8px; } /* Sidebar horizontal, sticky – bequem mit Daumen scrollbar */ .sidebar { position: sticky; top: var(--topbar-h, 57px); z-index: 5; gap: 4px; padding: 10px 12px; } .navbtn { white-space: nowrap; padding: 8px 12px; } /* Kalender: kompaktere Zellen, damit 7 Spalten aufs Handy passen */ .calGrid { gap: 3px; } .calCell { min-height: 58px; padding: 3px; border-radius: 6px; } .calNum { font-size: 10px; margin-bottom: 2px; } .calPost { font-size: 9px; padding: 1px 3px; margin-bottom: 2px; } .calHead { gap: 8px; flex-wrap: wrap; } .calHead h2 { font-size: 15px; } /* Tabellen horizontal scrollbar machen statt zu quetschen */ .tbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } /* Analytics-Balken: kürzeres Label-Feld */ .barRow { grid-template-columns: 92px 1fr auto; gap: 8px; font-size: 12px; } /* Hero/Landing kleiner */ .hero { min-height: 0; padding: 56px 18px 52px; } .heroText h1 { font-size: 42px; max-width: 12ch; } .heroText p { font-size: 15px; } .heroFeat { justify-content: flex-start; } .landing { --landing-max: calc(100vw - 28px); padding: 0 0 40px; } .landingNav { align-items: flex-start; gap: 10px; flex-wrap: wrap; } .landingNavActions { flex: 1 1 100%; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; } .featureGrid, .agencyWorkflowGrid, .audienceGrid, .imageWallGrid, .whyPostOmnia, .whyGrid, .showcaseGrid, .quoteGrid, .pricingStoryGrid, .setupTimeline, .splitSection, .splitSection.reverse, .finalCta, .faqAssistant, .trustBand, .settingsLayout { grid-template-columns: 1fr; } .teamInviteSpotlight { flex-direction: column; align-items: stretch; } .teamInviteSpotlight button { width: 100%; } .faqAskRow { grid-template-columns: 1fr; } .landingNavLinks { order: 3; flex: 0 0 100%; width: 100%; max-width: 100%; margin: 2px 0 0; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; } .imageTile { min-height: auto; } .imageTileWide { grid-row: auto; } .imageTilePosts { grid-column: auto; } .imageTile > img, .channelImageGrid, .postPreviewImage { min-height: 220px; } .imageTileWide > img { height: 300px; min-height: 300px; } .imageTileLogo > img { padding: 34px; } .freePostGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: auto; } .freePostGrid img { min-height: 170px; } .setupTimeline::before { left: 21px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(37,99,235,.25), rgba(15,159,122,.38)); } .setupTimeline article { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; } .setupTimeline span { grid-row: 1 / 3; } .setupTimeline p { margin-top: -4px; } .finalCta { padding: 22px; } .finalCta button { width: 100%; } .videoMock { min-height: auto; } .mockBody { grid-template-columns: 1fr; min-height: auto; } .mockSidebar { grid-template-columns: repeat(4, 1fr); border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; } .aiFlowStage { min-height: 300px; } .flowSvg { min-width: 0; } .mockStats { grid-template-columns: repeat(4, 1fr); } .mockStats strong, .mockStats span { height: 44px; } .playBadge { width: 50px; height: 50px; } .reelTrack { animation-duration: 38s; } .reelTrack article { width: 180px; } .analyticsMock { grid-template-columns: 1fr; } .analyticsChart { min-height: 230px; gap: 8px; padding: 14px 8px 42px; } .analyticsChart b { max-width: 52px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; } .assistantGrid { grid-column: auto; grid-template-columns: repeat(2, 1fr); } .trustFacts { justify-content: flex-start; } .authCard { max-width: none; } .settingsTree { position: static; grid-template-columns: repeat(2, 1fr); } .contentTypes { grid-template-columns: 1fr; } .hero3d { display: none; } /* Formular-Reihen brechen um (z. B. Rechnungsadresse Vor-/Nachname) */ .row { flex-wrap: wrap; } .humanRow { grid-template-columns: auto 1fr auto; } .humanBadge { grid-row: 1 / 3; } .humanQuestion { grid-column: 2 / -1; } .humanConfirm { grid-column: 1 / -1; justify-content: flex-start; } .couponRow input { width: 120px; } .authModalCard { max-height: calc(100vh - 24px); overflow-y: auto; padding: 22px 18px; } } /* ---- Scroll-Reveal: Sektionen faden beim Sichtbarwerden sanft ein -------- Nur aktiv, wenn JS die Klasse .anim-ready an setzt – ohne JS bleiben alle Inhalte sichtbar (kein Verstecken bei Script-Fehlern). */ .anim-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .anim-ready .reveal.in { opacity: 1; transform: none; } /* Schwebende Plattform-Chips (gestaffelt) – gibt dem Kanal-Bereich Leben. */ .platformCloud span { animation: chipFloat 4.5s ease-in-out infinite; } .platformCloud span:nth-child(3n) { animation-duration: 5.3s; animation-delay: -1.2s; } .platformCloud span:nth-child(3n+1) { animation-duration: 4.1s; animation-delay: -.6s; } .platformCloud span:nth-child(4n) { animation-delay: -2.1s; } @keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Schimmernder Verlauf im Hero-Akzenttext. */ .hero .grad { background-size: 220% 100%; animation: gradShimmer 6s ease-in-out infinite; } @keyframes gradShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes heroBackdropDrift { from { transform: scale(1) translate3d(-.6%, -.5%, 0); } to { transform: scale(1.055) translate3d(.8%, .6%, 0); } } @keyframes heroLightSweep { from { background-position: 0% 0%, 0% 0%; } to { background-position: 100% 0%, 0% 0%; } } @keyframes auroraDriftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18%, 12%, 0) scale(1.18); } } @keyframes auroraDriftB { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-14%, 16%, 0) scale(.92); } } @keyframes auroraDriftC { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(12%, -14%, 0) scale(1.2); } } @keyframes netFlow { to { stroke-dashoffset: -16; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .flowPackets { display: none; } .reelTrack { animation: none; transform: none; } /* Reveal-Inhalte sofort und vollständig zeigen (kein Ausblenden). */ .anim-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .platformCloud span, .hero .grad, .hero::before, .hero::after, .heroAurora i, .netLines path { animation: none !important; } } /* ---- Dark-Mode-Feinschliff ------------------------------------------------- Stellen, die im Hellmodus bewusst fixe helle Werte tragen (Foto-Overlay im Hero, weiße Sidebar-Spur, fixe Headline-Farbe) bekommen hier ihre dunklen Gegenstücke. Alles andere läuft über die Variablen in :root[data-theme]. */ :root[data-theme="dark"] .heroText h1 { color: var(--text); } :root[data-theme="dark"] .hero { background: #12151b; } :root[data-theme="dark"] .hero::after { background: linear-gradient(90deg, rgba(14,17,22,.90), rgba(14,17,22,.74) 55%, rgba(18,21,27,.66)), linear-gradient(180deg, rgba(14,17,22,.25), rgba(20,24,30,.45)); } :root[data-theme="dark"] .heroText::before { background: linear-gradient(135deg, rgba(24,28,35,.92), rgba(34,39,50,.72)); } :root[data-theme="dark"] .layout { background: linear-gradient(to right, var(--card) 0, var(--card) 199px, var(--line) 199px, var(--line) 200px, transparent 200px); } :root[data-theme="dark"] .topbar { background: rgba(14,17,22,.92); } /* Sidebar setzt sich als eigene Ebene (--card) vom Seitenhintergrund ab. */ :root[data-theme="dark"] .sidebar { background: var(--card); border-right: 1px solid var(--line); } /* Native „Choose Files"-Knopf & Datei-Inputs an das Theme angleichen. */ input[type="file"] { color: var(--muted); } input[type="file"]::file-selector-button { font: inherit; cursor: pointer; margin-right: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); color: var(--text); } input[type="file"]::file-selector-button:hover { border-color: var(--accent); } /* Primärbuttons im Dark Mode dezent abtönen (die volle Sättigung wirkt sonst grell). */ :root[data-theme="dark"] button:not(.secondary):not(.ghostBtn):not(.navbtn):not(.subTab):not(.themeToggle):not(.iconbtn) { filter: saturate(.92); } /* ---- Dark Mode: dekorative & Mockup-Flächen nachziehen --------------------- Viele Landing-/App-Elemente tragen fest kodierte helle Hex-Flächen, die die Variablen-Migration nicht erfassen konnte. Hier ihre dunklen Gegenstücke – Hellmodus bleibt unberührt. */ /* Landing: helle Foto-Overlays der „Warum/Growth"-Sektionen */ :root[data-theme="dark"] .whyPostOmnia::after { background: linear-gradient(90deg, rgba(14,17,22,.90), rgba(14,17,22,.72) 54%, rgba(19,26,25,.60)); } :root[data-theme="dark"] .growthLanding { background: #12181c; } :root[data-theme="dark"] .growthLanding::after { background: linear-gradient(90deg, rgba(14,17,22,.92), rgba(16,26,24,.80) 53%, rgba(16,24,30,.66)); } /* Landing: Mockup-Platzhalter, Vorschau-Kacheln, Reel, Analytics-Chart, Bild-Kacheln */ :root[data-theme="dark"] .mockLines i, :root[data-theme="dark"] .postPreviewImage span { background: var(--line); } :root[data-theme="dark"] .postPreviewImage span:nth-child(3) { background: linear-gradient(90deg, var(--accent), var(--accent2)); } :root[data-theme="dark"] .mockStats strong { background: rgba(28,189,168,.14); } :root[data-theme="dark"] .mockStats span, :root[data-theme="dark"] .postPreviewImage { background: linear-gradient(180deg, var(--card2), var(--card)); } :root[data-theme="dark"] .reelTrack article, :root[data-theme="dark"] .analyticsChart, :root[data-theme="dark"] .imageTile > img, :root[data-theme="dark"] .compareHead, :root[data-theme="dark"] .chartCard, :root[data-theme="dark"] .dnsList code, :root[data-theme="dark"] .mailPreviewFrame, :root[data-theme="dark"] .humanRow, :root[data-theme="dark"] .turnstileBox, :root[data-theme="dark"] .twoFactorSetup { background: var(--card2); } /* Telefon-Demo: dunkler Screen (Inhalte nutzen bereits Variablen -> lesbar) */ :root[data-theme="dark"] .landingPhoneScreen { background: radial-gradient(220px 130px at 12% -4%, rgba(75,139,245,.14), transparent 70%), radial-gradient(200px 120px at 96% -2%, rgba(28,189,168,.12), transparent 70%), var(--card2); } /* App: Composer-Studios, Onboarding, Review-Boxen, Kalenderzellen, Hover-Flächen */ :root[data-theme="dark"] .creativeStudio { background: linear-gradient(180deg, var(--card), #141b26); } :root[data-theme="dark"] .growthStudio { background: linear-gradient(180deg, var(--card), #12211c); } :root[data-theme="dark"] .onboardingChecklist { background: rgba(75,139,245,.10); } :root[data-theme="dark"] .reviewBox, :root[data-theme="dark"] .assistantBox { background: rgba(228,173,76,.10); } :root[data-theme="dark"] .variantBox { background: rgba(75,139,245,.10); } :root[data-theme="dark"] .securityReminder { background: rgba(28,189,168,.12); color: var(--accent2); } :root[data-theme="dark"] .calCell.weekend { background: rgba(255,255,255,.02); } :root[data-theme="dark"] .calCell.dropTarget { background: rgba(75,139,245,.15); } :root[data-theme="dark"] .checklistDismiss:hover, :root[data-theme="dark"] .modalClose:hover { background: var(--card2); } /* ---- Empfehlungsprogramm ---------------------------------------------------- */ #refLink { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .refShare { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .refShareBtn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--text); padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); transition: border-color .15s, transform .15s, color .15s; } .refShareBtn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } .refSteps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-size: 14px; } .refSteps li { padding-left: 4px; } /* ============ Landing: Signal Field ======================================= Offene Hero-Buehne statt Karten-in-Karten. Der dunkle Signalraum erzaehlt den Produktfluss (KI -> Freigabe -> Kanaele) und geht organisch in die hellen Inhaltsbereiche ueber. */ .landing .hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); gap: clamp(30px, 5vw, 86px); align-items: center; justify-items: stretch; width: 100%; min-height: 760px; padding: clamp(86px, 9vw, 138px) max(24px, calc((100% - 1480px) / 2)) 158px; overflow: hidden; text-align: left; border: 0; border-radius: 0; background: #071523; color: #fff; } .landing .hero::before { content: ""; position: absolute; z-index: -3; inset: -10%; opacity: 1; filter: none; background: radial-gradient(circle at 18% 28%, rgba(37,99,235,.42), transparent 30%), radial-gradient(circle at 77% 34%, rgba(15,159,122,.34), transparent 29%), radial-gradient(circle at 58% 92%, rgba(56,189,248,.20), transparent 31%), linear-gradient(125deg, #06101d 8%, #0b1c31 54%, #06251f 118%); animation: heroFieldDrift 18s ease-in-out infinite alternate; } .landing .hero::after { content: ""; position: absolute; z-index: 4; inset: auto -4% -1px; height: 116px; background: var(--bg); background-size: auto; animation: none; clip-path: polygon(0 64%, 14% 50%, 31% 58%, 48% 30%, 67% 49%, 84% 24%, 100% 40%, 100% 100%, 0 100%); pointer-events: none; } :root[data-theme="dark"] .landing .hero::after { background: var(--bg); } .landing .heroNet { z-index: -1; opacity: .24; } .landing .netLines path { stroke: rgba(96,165,250,.38); } .landing .netLines path:nth-child(even) { stroke: rgba(45,212,191,.34); } .landing .netNodes circle { fill: rgba(96,165,250,.52); } .landing .netNodes circle:nth-child(even) { fill: rgba(45,212,191,.46); } .landing .heroTiles { z-index: -1; opacity: .22; mask-image: linear-gradient(90deg, transparent, #000 38%, #000); } .landing .heroTiles i { background: rgba(96,165,250,.13); } .landing .heroAurora { z-index: -1; } .landing .heroAurora i:nth-child(1) { background: rgba(37,99,235,.23); } .landing .heroAurora i:nth-child(2) { background: rgba(15,159,122,.22); } .landing .heroAurora i:nth-child(3) { background: rgba(125,211,252,.18); } .landing .heroText { position: relative; z-index: 2; display: grid; justify-items: start; max-width: 720px; } .landing .heroText::before { display: none; } .landing .heroText h1 { font-size: clamp(58px, 5.3vw, 88px); line-height: .92; letter-spacing: -.055em; margin: 0 0 24px; max-width: 11.5ch; color: #f8fbff; } .landing .heroText p { color: rgba(226,232,240,.78); font-size: clamp(16px, 1.35vw, 19px); max-width: 650px; } .landing .hero .eyebrow { color: #5eead4; margin-bottom: 18px; } .landing .heroFeat { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; gap: 11px 22px; color: #fff; } .landing .heroFeat li { position: relative; color: rgba(241,245,249,.88); padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 700; } .landing .heroFeat li::before { display: none; } .landing .heroActions { justify-content: flex-start; margin-top: 30px; } .landing .heroActions button:first-child { background: linear-gradient(110deg, #2563eb, #0f9f7a); box-shadow: 0 14px 36px rgba(15,159,122,.28); } .landing .heroActions .ghostBtn { color: #f8fafc; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); } .landing .aiLogoRail { justify-content: flex-start; gap: 10px; margin-top: 24px; color: rgba(203,213,225,.60); } .landing .aiLogoRail b { padding: 0; color: rgba(248,250,252,.86); background: none; border: 0; box-shadow: none; } .landing .aiLogoRail b + b::before { content: "\00b7"; margin-right: 10px; color: rgba(148,163,184,.55); } /* Animierter Routing-Orbit rechts im Hero. */ .heroStage { position: relative; z-index: 2; width: 100%; min-height: 590px; max-width: 720px; justify-self: end; } .heroStageLines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .heroStageLines path { fill: none; stroke: rgba(125,211,252,.38); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 7 11; animation: heroRoute 4s linear infinite; } .heroStageLines path:nth-child(n+4) { stroke: rgba(45,212,191,.44); animation-direction: reverse; animation-duration: 3.4s; } .heroSignalRing { position: absolute; left: 50%; top: 49%; translate: -50% -50%; border: 1px solid rgba(94,234,212,.22); border-radius: 50%; pointer-events: none; } .heroSignalRingA { width: 300px; height: 300px; animation: heroRing 4.8s ease-out infinite; } .heroSignalRingB { width: 430px; height: 430px; animation: heroRing 4.8s 2.4s ease-out infinite; } .heroSource, .heroChannel, .heroHub, .heroDispatch { position: absolute; color: #f8fafc; backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); background: rgba(8,23,38,.72); box-shadow: 0 18px 48px rgba(0,0,0,.20); } .heroSource { display: flex; align-items: center; gap: 10px; min-width: 154px; padding: 10px 13px; border-radius: 15px; animation: heroNodeFloat 5.5s ease-in-out infinite; } .heroSource > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(96,165,250,.16); color: #bfdbfe; font-size: 11px; font-weight: 900; } .heroSource div { display: grid; gap: 1px; } .heroSource b { font-size: 13px; } .heroSource small { color: rgba(203,213,225,.62); font-size: 10px; } .heroSourceClaude { left: 2%; top: 8%; } .heroSourceChat { left: -2%; top: 44%; animation-delay: -1.8s; } .heroSourceCodex { left: 8%; bottom: 6%; animation-delay: -3.6s; } .heroHub { left: 50%; top: 49%; translate: -50% -50%; width: 174px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 5px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(37,99,235,.34), rgba(6,31,42,.90) 62%); border-color: rgba(94,234,212,.32); box-shadow: 0 0 0 14px rgba(45,212,191,.035), 0 26px 70px rgba(0,0,0,.34); } .heroHub span { color: #5eead4; font-size: 9px; letter-spacing: .15em; font-weight: 900; } .heroHub img { width: 52px; height: 52px; filter: drop-shadow(0 10px 22px rgba(45,212,191,.24)); } .heroHub b { font-size: 16px; } .heroHub small { color: rgba(203,213,225,.66); font-size: 10px; } .heroChannel { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; animation: heroNodeFloat 6.4s ease-in-out infinite; } .heroChannel img { width: 22px; height: 22px; object-fit: contain; } .heroChannel b { font-size: 11px; } .heroChannelInstagram { right: 8%; top: 5%; animation-delay: -1.1s; } .heroChannelLinkedin { right: -1%; top: 38%; animation-delay: -2.7s; } .heroChannelYoutube { right: 6%; bottom: 8%; animation-delay: -4.2s; } .heroDispatch { left: 50%; bottom: 4%; translate: -50% 0; min-width: 250px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 14px; } .heroDispatch i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 16px rgba(52,211,153,.9); animation: heroLivePulse 1.8s ease-in-out infinite; } .heroDispatch span { color: rgba(226,232,240,.72); font-size: 11px; } .heroDispatch b { font-size: 11px; color: #a7f3d0; } /* Fakten und Warum-Bereich als offene Fortsetzung statt weiterer Card-Stack. */ .landing .factsBand { width: var(--landing-max); margin-top: 0; padding: 16px 0 30px; align-items: stretch; background: transparent; } .landing .factsRow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .landing .factItem { display: flex; align-items: center; min-height: 44px; padding: 4px 24px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; } .landing .factItem:first-child { border-left: 0; padding-left: 0; } .landing .whyPostOmnia { position: relative; overflow: visible; display: grid; grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr); gap: clamp(34px, 6vw, 92px); margin-top: 38px; padding: 70px 0 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; } .landing .whyPostOmnia::before, .landing .whyPostOmnia::after { display: none; } .landing .whyIntro { position: sticky; top: 34px; } .landing .whyIntro h2 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.035em; max-width: 11ch; } .landing .whyGrid { gap: 0 28px; } .landing .whyGrid article { min-height: 0; padding: 20px 0 28px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; } .landing .whyGrid span { width: auto; height: auto; display: block; border: 0; border-radius: 0; background: transparent; color: var(--accent2); font-size: 11px; letter-spacing: .13em; } .landing .whyGrid b { font-size: 18px; } .landing .teamInviteSpotlight { padding: 28px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; } @keyframes heroRoute { to { stroke-dashoffset: -36; } } @keyframes heroRing { 0% { opacity: .6; scale: .72; } 100% { opacity: 0; scale: 1.2; } } @keyframes heroNodeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes heroLivePulse { 50% { opacity: .42; scale: .72; } } @keyframes heroFieldDrift { from { transform: translate3d(-1%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1%, 0) scale(1.04); } } @media (max-width: 1120px) { .landing .hero { grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr); gap: 22px; } .landing .heroText h1 { font-size: clamp(52px, 6.2vw, 70px); } .heroStage { min-height: 520px; } .heroSource { min-width: 136px; } } @media (max-width: 900px) { .landing .hero { grid-template-columns: 1fr; padding-top: 76px; padding-bottom: 138px; } .landing .heroText { max-width: 760px; } .landing .heroText h1 { max-width: 12ch; } .heroStage { width: min(720px, 100%); justify-self: center; min-height: 540px; margin-top: 10px; } .landing .factsRow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing .factItem:nth-child(3) { border-left: 0; } .landing .whyPostOmnia { grid-template-columns: 1fr; } .landing .whyIntro { position: static; } } @media (max-width: 640px) { .landing .hero { width: 100%; padding: 62px 18px 114px; gap: 24px; } .landing .heroText h1 { font-size: clamp(44px, 13vw, 60px); line-height: .94; max-width: 10.7ch; } .landing .heroText p { font-size: 15px; } .landing .heroFeat { grid-template-columns: 1fr; gap: 8px; } .landing .heroActions { display: grid; width: 100%; } .landing .heroActions button { width: 100%; } .landing .aiLogoRail { gap: 8px; } .landing .aiLogoRail b + b::before { margin-right: 8px; } .heroStage { min-height: 410px; margin: 4px -8px 0; width: calc(100% + 16px); } .heroStageLines { inset: 18px 0 0; height: calc(100% - 18px); } .heroHub { width: 132px; } .heroHub img { width: 40px; height: 40px; } .heroSource { min-width: 0; padding: 8px 9px; } .heroSource > span { width: 25px; height: 25px; } .heroSource small { display: none; } .heroSourceClaude { left: 0; top: 8%; } .heroSourceChat { left: 0; top: 42%; } .heroSourceCodex { left: 5%; bottom: 6%; } .heroChannel { padding: 7px 9px; } .heroChannel b { display: none; } .heroChannelInstagram { right: 5%; } .heroChannelLinkedin { right: 0; top: 39%; } .heroChannelYoutube { right: 5%; } .heroDispatch { min-width: 210px; bottom: 0; } .landing .factsRow { grid-template-columns: 1fr; } .landing .factItem, .landing .factItem:first-child { min-height: 38px; padding: 4px 0; border-left: 0; border-top: 1px solid var(--line); } .landing .factItem:first-child { border-top: 0; } .landing .whyPostOmnia { padding-top: 48px; gap: 28px; } .landing .whyIntro h2 { font-size: clamp(34px, 10vw, 48px); max-width: 12ch; } .landing .whyGrid { grid-template-columns: 1fr; } } /* ============ Landing: Light Signal Field ================================ Im Hellmodus bleibt die offene Hero-Buehne hell. Das vom Zeiger aktivierte Kachelraster liefert Bewegung und Tiefe, ohne die Lesbarkeit zu belasten. */ .landing .hero { --hero-pointer-x: 72%; --hero-pointer-y: 38%; } :root:not([data-theme="dark"]) .landing .hero { background: #f7faff; color: #0f172a; } :root:not([data-theme="dark"]) .landing .hero::before { background: radial-gradient(circle 430px at var(--hero-pointer-x) var(--hero-pointer-y), rgba(56,189,248,.20), transparent 64%), radial-gradient(circle at 16% 24%, rgba(37,99,235,.14), transparent 31%), radial-gradient(circle at 78% 38%, rgba(15,159,122,.13), transparent 30%), radial-gradient(circle at 58% 92%, rgba(125,211,252,.15), transparent 32%), linear-gradient(125deg, #fbfdff 8%, #f3f8ff 54%, #eefbf8 118%); } :root:not([data-theme="dark"]) .landing .heroNet { opacity: .34; } :root:not([data-theme="dark"]) .landing .netLines path { stroke: rgba(37,99,235,.34); } :root:not([data-theme="dark"]) .landing .netLines path:nth-child(even) { stroke: rgba(15,159,122,.32); } :root:not([data-theme="dark"]) .landing .netNodes circle { fill: rgba(37,99,235,.45); } :root:not([data-theme="dark"]) .landing .netNodes circle:nth-child(even) { fill: rgba(15,159,122,.43); } :root:not([data-theme="dark"]) .landing .heroTiles { opacity: .72; } :root:not([data-theme="dark"]) .landing .heroTiles i { border: 1px solid rgba(37,99,235,.09); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(96,165,250,.16)); box-shadow: 0 8px 22px rgba(37,99,235,.08); } :root:not([data-theme="dark"]) .landing .heroAurora i:nth-child(1) { background: rgba(37,99,235,.12); } :root:not([data-theme="dark"]) .landing .heroAurora i:nth-child(2) { background: rgba(15,159,122,.13); } :root:not([data-theme="dark"]) .landing .heroAurora i:nth-child(3) { background: rgba(125,211,252,.15); } :root:not([data-theme="dark"]) .landing .heroText h1 { color: #0f172a; } :root:not([data-theme="dark"]) .landing .heroText p { color: #526176; } :root:not([data-theme="dark"]) .landing .hero .eyebrow { color: #087f66; } :root:not([data-theme="dark"]) .landing .heroFeat { color: #0f172a; } :root:not([data-theme="dark"]) .landing .heroFeat li { color: #334155; } :root:not([data-theme="dark"]) .landing .heroActions .ghostBtn { color: #1e293b; background: rgba(255,255,255,.55); border-color: rgba(71,85,105,.22); } :root:not([data-theme="dark"]) .landing .aiLogoRail { color: #718096; } :root:not([data-theme="dark"]) .landing .aiLogoRail b { color: #334155; } :root:not([data-theme="dark"]) .landing .aiLogoRail b + b::before { color: #94a3b8; } :root:not([data-theme="dark"]) .heroStageLines path { stroke: rgba(37,99,235,.34); } :root:not([data-theme="dark"]) .heroStageLines path:nth-child(n+4) { stroke: rgba(15,159,122,.40); } :root:not([data-theme="dark"]) .heroSignalRing { border-color: rgba(15,159,122,.20); } :root:not([data-theme="dark"]) .heroSource, :root:not([data-theme="dark"]) .heroChannel, :root:not([data-theme="dark"]) .heroHub, :root:not([data-theme="dark"]) .heroDispatch { color: #172033; border-color: rgba(71,85,105,.15); background: rgba(255,255,255,.72); box-shadow: 0 18px 48px rgba(37,63,92,.13); } :root:not([data-theme="dark"]) .heroSource > span { background: rgba(37,99,235,.11); color: #1d4ed8; } :root:not([data-theme="dark"]) .heroSource small { color: #748195; } :root:not([data-theme="dark"]) .heroHub { background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.98), rgba(224,242,254,.90) 62%); border-color: rgba(15,159,122,.28); box-shadow: 0 0 0 14px rgba(15,159,122,.035), 0 26px 70px rgba(37,63,92,.18); } :root:not([data-theme="dark"]) .heroHub span { color: #087f66; } :root:not([data-theme="dark"]) .heroHub small { color: #66758a; } :root:not([data-theme="dark"]) .heroDispatch span { color: #64748b; } :root:not([data-theme="dark"]) .heroDispatch b { color: #087f66; } /* ============ Landing: Integrated Navigation ============================= Die Navigation sitzt als leichte Glasflaeche direkt ueber dem Signal-Feld und verwendet dieselben Blau-, Mint- und Weisswerte wie der Hero. */ .landing { overflow: clip; } .landing .landingNav { position: sticky; top: 0; z-index: 30; isolation: isolate; width: 100%; margin: 0; padding: 14px max(24px, calc((100% - 1480px) / 2)); border-bottom: 1px solid rgba(100,116,139,.14); background: rgba(247,250,255,.82); box-shadow: 0 12px 34px rgba(37,63,92,.055); backdrop-filter: blur(22px) saturate(1.25); } .landing .landingNav::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 76% 0, rgba(15,159,122,.10), transparent 28%), radial-gradient(circle at 20% 0, rgba(37,99,235,.09), transparent 30%); pointer-events: none; } .landingNav .brand.big { font-size: 22px; letter-spacing: -.025em; } .landingNav .brandMark { width: 36px; height: 36px; } .landingNavLinks { gap: 2px; } .landingNavLinks a { padding: 8px 11px; color: #526176; border: 1px solid transparent; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; } .landingNavLinks a:hover { color: #1d4ed8; border-color: rgba(37,99,235,.10); background: rgba(255,255,255,.62); transform: translateY(-1px); } .landingNavActions { gap: 8px; } .landingNav .navInstagram, .landingNav .themeToggle, .landingNav .langSelect { height: 38px; border-color: rgba(71,85,105,.16); border-radius: 11px; background: rgba(255,255,255,.64); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } .landingNav .langSelect { padding-inline: 10px 28px; color: #334155; } .landingNavActions > button { min-height: 38px; border-radius: 11px; } .landingNav #loginTop { color: #334155; border-color: transparent; background: transparent; } .landingNav #loginTop:hover { color: #1d4ed8; background: rgba(255,255,255,.58); } .landingNav #ctaTop { color: #fff; border-color: transparent; background: linear-gradient(110deg, #2563eb, #0f9f7a); box-shadow: 0 10px 24px rgba(15,159,122,.20); } .landingNav #ctaTop:hover { box-shadow: 0 13px 28px rgba(15,159,122,.27); } :root[data-theme="dark"] .landing .landingNav { border-bottom-color: rgba(148,163,184,.13); background: rgba(7,21,35,.82); box-shadow: 0 12px 34px rgba(0,0,0,.16); } :root[data-theme="dark"] .landing .landingNav::before { background: radial-gradient(circle at 76% 0, rgba(15,159,122,.13), transparent 28%), radial-gradient(circle at 20% 0, rgba(37,99,235,.12), transparent 30%); } :root[data-theme="dark"] .landingNavLinks a { color: rgba(226,232,240,.72); } :root[data-theme="dark"] .landingNavLinks a:hover { color: #bfdbfe; border-color: rgba(96,165,250,.16); background: rgba(255,255,255,.055); } :root[data-theme="dark"] .landingNav .navInstagram, :root[data-theme="dark"] .landingNav .themeToggle, :root[data-theme="dark"] .landingNav .langSelect { color: #e7e9ec; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } :root[data-theme="dark"] .landingNav #loginTop { color: #e2e8f0; } :root[data-theme="dark"] .landingNav #loginTop:hover { color: #fff; background: rgba(255,255,255,.055); } @media (max-width: 1100px) { .landing .landingNav { flex-wrap: wrap; row-gap: 7px; } .landingNavLinks { order: 3; flex: 1 0 100%; width: 100%; margin: 0; justify-content: flex-start; } } @media (max-width: 640px) { .landing .landingNav { position: relative; gap: 9px; padding: 12px 14px 10px; } .landingNav .brand.big { font-size: 20px; } .landingNav .brandMark { width: 32px; height: 32px; } .landingNavActions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .landingNavActions::-webkit-scrollbar, .landingNavLinks::-webkit-scrollbar { display: none; } .landingNavLinks { scrollbar-width: none; } } /* ============ Landing: Spatial Content System ============================ Unterhalb des Heroes entsteht eine zusammenhaengende Raumtiefe. Karten liegen auf unterschiedlichen Z-Ebenen und reagieren progressiv auf Maus und Scrollposition; ohne Support bleibt eine hochwertige Glasoptik. */ :root:not([data-theme="dark"]) .landing { background: radial-gradient(circle at 8% 22%, rgba(37,99,235,.075), transparent 22%), radial-gradient(circle at 92% 34%, rgba(15,159,122,.075), transparent 24%), radial-gradient(circle at 18% 68%, rgba(56,189,248,.065), transparent 24%), radial-gradient(circle at 84% 86%, rgba(37,99,235,.055), transparent 22%), linear-gradient(180deg, #f5f7fb, #fbfdff 28%, #f4f9ff 62%, #f7fbfa); } :root[data-theme="dark"] .landing { background: radial-gradient(circle at 8% 22%, rgba(75,139,245,.075), transparent 22%), radial-gradient(circle at 92% 34%, rgba(28,189,168,.07), transparent 24%), linear-gradient(180deg, #0e1116, #111720 56%, #0e1517); } .landing .landingSection:not(.factsBand):not(.whyPostOmnia), .landing .pricing { margin-top: clamp(86px, 8vw, 126px); } .landing .sectionHead { position: relative; z-index: 2; margin-bottom: clamp(28px, 4vw, 46px); } .landing .sectionHead h2 { max-width: 18ch; font-size: clamp(32px, 4vw, 50px); line-height: 1.02; letter-spacing: -.038em; } .landing .sectionHead.centered h2 { margin-inline: auto; } .landing .sectionHead > p:not(.eyebrow) { max-width: 67ch; line-height: 1.65; } .landing .sectionHead.centered > p:not(.eyebrow) { margin-inline: auto; } .landing .sectionHead .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #087f66; } .landing .sectionHead .eyebrow::before { content: ""; width: 24px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 10px rgba(15,159,122,.35); } /* Grosse Themenbloecke werden wieder offen; nur ihre Inhalte schweben. */ .landing .creativeLanding, .landing .growthLanding { overflow: visible; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .landing .creativeLanding::before, .landing .creativeLanding::after, .landing .growthLanding::before, .landing .growthLanding::after { display: none; } .landing .creativeLanding .eyebrow { color: #087f66; } .landing .creativeLanding h2, .landing .creativeLandingGrid b { color: var(--text); } .landing .creativeLanding p, .landing .creativeLandingGrid p { color: var(--muted); opacity: 1; } .creativeLandingGrid, .growthLandingGrid { gap: clamp(16px, 2vw, 24px); } /* Gemeinsame 3D-Matrix. Pointer-Werte kommen aus home-anim.js. */ .depthCard { --depth-mx: 50%; --depth-my: 50%; --depth-rest-y: 0px; --depth-glow: .16; position: relative; top: var(--depth-rest-y); isolation: isolate; transform: none; transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease; } .depthCard::before { display: none; } .depthCard:nth-child(3n + 2) { --depth-rest-y: -10px; } .depthCard:nth-child(3n) { --depth-rest-y: 8px; } .depthCard:hover { z-index: 7; transform: translateY(-4px); border-color: rgba(37,99,235,.24); box-shadow: var(--depth-shadow-x, 0) var(--depth-shadow-y, 34px) 78px rgba(37,63,92,.18), 0 10px 26px rgba(15,159,122,.08); } /* Helle Glasflaechen mit einer feinen inneren Kante statt flacher Boxen. */ :root:not([data-theme="dark"]) .landing :is( .whyGrid article, .teamInviteSpotlight, .creativeLandingGrid article, .growthLandingGrid article, .showcaseCards article, .featureBlock, .audienceGrid article, .processList > div, .assistantGrid > div, .quoteGrid article, .trustBand, .setupTimeline article, .pricingStoryGrid article, .planCard, .faqGrid details, .faqAssistant ) { border: 1px solid rgba(148,163,184,.23); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(247,250,255,.68)); box-shadow: 0 24px 58px rgba(37,63,92,.10), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(148,163,184,.08); } :root[data-theme="dark"] .landing :is( .whyGrid article, .teamInviteSpotlight, .creativeLandingGrid article, .growthLandingGrid article, .showcaseCards article, .featureBlock, .audienceGrid article, .processList > div, .assistantGrid > div, .quoteGrid article, .trustBand, .setupTimeline article, .pricingStoryGrid article, .planCard, .faqGrid details, .faqAssistant ) { border-color: rgba(148,163,184,.17); background: linear-gradient(145deg, rgba(34,39,50,.82), rgba(18,24,32,.68)); box-shadow: 0 26px 62px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035); } /* Grosse Produktflaechen liegen sichtbar eine Ebene tiefer. */ .landing .videoMock, .landing .imageTile, .landing .mediaReel, .landing .analyticsMock { border-radius: 22px; border-color: rgba(148,163,184,.22); box-shadow: 0 30px 74px rgba(37,63,92,.13); } :root:not([data-theme="dark"]) .landing .mediaReel, :root:not([data-theme="dark"]) .landing .analyticsMock { background: rgba(255,255,255,.72); } .landing .imageWallGrid { gap: clamp(18px, 2vw, 28px); perspective: 1400px; } .landing .imageTile { overflow: hidden; } .landing .imageTile figcaption { background: rgba(var(--glassRGB),.86); backdrop-filter: blur(14px); } .landing .showcaseGrid, .landing .featureGrid, .landing .audienceGrid, .landing .quoteGrid, .landing .setupTimeline, .landing .pricingStoryGrid, .landing .planGrid { perspective: 1400px; } /* Die bisher offenen Warum-Kacheln bekommen wieder Tiefe, ohne den Abschnitt selbst erneut in eine grosse Aussenkarte einzuschliessen. */ .landing .whyGrid { gap: clamp(18px, 2vw, 26px); } .landing .whyGrid article { min-height: 174px; padding: 22px; } .landing .whyGrid span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(15,159,122,.22); border-radius: 12px; background: rgba(15,159,122,.09); } .landing .whyGrid b { font-size: 18px; } .landing .teamInviteSpotlight { padding: 24px 26px; } .landing .featureGrid, .landing .audienceGrid, .landing .quoteGrid { gap: clamp(18px, 2vw, 26px); } .landing .featureBlock, .landing .audienceGrid article, .landing .showcaseCards article, .landing .quoteGrid article, .landing .pricingStoryGrid article { padding: 22px; } .landing .processList { gap: 16px; } .landing .processList > div { padding: 18px 20px; } .landing .assistantGrid { gap: 16px; } .landing .assistantGrid > div { padding: 18px; } .landing .setupTimeline { gap: 18px; } .landing .setupTimeline article { padding: 24px 16px; } .landing .faqGrid { gap: 14px; perspective: 1200px; } .landing .faqGrid details { padding-inline: 20px; } .landing .faqAssistant { border-radius: 22px; padding: 24px; } .landing .finalCta { overflow: hidden; padding: clamp(30px, 5vw, 56px); border: 1px solid rgba(125,211,252,.18); border-radius: 26px; background: radial-gradient(circle at 82% 0, rgba(15,159,122,.30), transparent 34%), radial-gradient(circle at 4% 100%, rgba(37,99,235,.28), transparent 36%), linear-gradient(135deg, #111d31, #0e2631 70%, #0a2e28); box-shadow: 0 34px 86px rgba(15,23,42,.26); } /* Scroll-getriebene Tiefe als Progressive Enhancement. */ @keyframes depthCardEnter { from { opacity: .58; } to { opacity: 1; } } @supports (animation-timeline: view()) { .depthCard { animation: depthCardEnter 1ms linear both; animation-timeline: view(block); animation-range: entry 4% cover 28%; } } @media (max-width: 900px) { .landing .sectionHead h2 { max-width: 21ch; } .depthCard:nth-child(n) { --depth-rest-y: 0px; } } @media (hover: none), (max-width: 640px) { .depthCard { transform: none; box-shadow: 0 20px 48px rgba(37,63,92,.10); } .depthCard::before { opacity: .10; } .landing .landingSection:not(.factsBand):not(.whyPostOmnia), .landing .pricing { margin-top: 76px; } .landing .sectionHead { margin-bottom: 24px; } .landing .sectionHead h2 { font-size: clamp(30px, 9vw, 42px); } } @media (prefers-reduced-motion: reduce) { .depthCard { animation: none !important; translate: none !important; transform: none !important; transition: border-color .2s ease, box-shadow .2s ease; } .depthCard::before { display: none; } } /* ---- Link-in-Bio-Marketingseite (/link-in-bio, /de/link-in-bio) ---------- Eigenstaendige Seite ausserhalb der SPA: sie laedt app.js nicht, nutzt aber dieselbe Landing-Huelle (.landing/.landingNav/.landingSection/.landingFoot). Hier stehen nur die Stuecke, die es dort noch nicht gibt. */ /* Das globale `main`-Padding (Zeile ~1320) zentriert die App-Ansichten. Hier besorgen das schon .landingSection/.landingNav – beides zusammen schoebe die Sektionen ueber den rechten Rand hinaus. */ .lbPage main { padding: 0; } /* Nicht die Sektion schmaler machen – .landingSection zentriert sie dann und der Hero staende gegenueber den uebrigen Ueberschriften eingerueckt. Stattdessen nur die Textbreite begrenzen, damit die Zeilen lesbar kurz bleiben. */ /* Hero als Zweispalter wie die Showcase-Karte der Startseite: Text links, Telefon-Vorschau der Beispielseite rechts. .bioShowcase bringt das Raster und klappt unter 1080px selbst auf eine Spalte um. */ .lbPage .lbHero { margin-top: 28px; } .lbPage .lbHeroText { min-width: 0; } .lbPage .lbHero h1 { margin: 0 0 14px; max-width: 780px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -.02em; } .lbPage .lbLead { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 62ch; } .lbPage .lbActions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; } .lbPage .lbCta { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: 10px; text-decoration: none; font-weight: 600; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 10px 24px rgba(15,159,122,.22); transition: transform .15s, box-shadow .15s; } .lbPage .lbCta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(15,159,122,.3); } .lbPage .lbCtaBig { padding: 15px 28px; font-size: 16px; } .lbPage .lbGhost { display: inline-flex; align-items: center; padding: 15px 22px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; transition: border-color .15s, transform .15s; } .lbPage .lbGhost:hover { border-color: var(--accent); transform: translateY(-1px); } .lbPage .lbFeatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 26px; } .lbPage .lbFeature { padding: 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 8px 24px rgba(24,34,54,.05); } .lbPage .lbFeature h3 { margin: 0 0 8px; font-size: 17px; color: var(--text); } .lbPage .lbFeature p { color: var(--muted); font-size: 15px; line-height: 1.55; } .lbPage .lbFaqs { display: grid; gap: 10px; margin-top: 24px; max-width: 860px; } .lbPage .lbFaq { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 4px 18px; } .lbPage .lbFaq summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; align-items: center; gap: 10px; } .lbPage .lbFaq summary::-webkit-details-marker { display: none; } .lbPage .lbFaq summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 20px; font-weight: 700; line-height: 1; } .lbPage .lbFaq[open] summary::after { content: "\2013"; } /* h3 in : Ueberschriftenstruktur fuer Suchmaschinen und Screenreader, optisch aber Teil der Klappzeile. */ .lbPage .lbFaq summary h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); } .lbPage .lbFaq p { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.6; } .lbPage .lbExampleLink { display: inline-block; margin-top: 16px; color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; } .lbPage .lbExampleLink:hover { border-bottom-color: var(--accent); } .lbPage .lbClosing { text-align: center; } .lbPage .lbClosing .lbLead { margin-inline: auto; } .lbPage .lbClosing .lbActions { justify-content: center; } .lbPage .landingNavLinks a { text-decoration: none; padding: 8px 12px; border-radius: 8px; } @media (max-width: 640px) { .lbPage .lbActions { flex-direction: column; align-items: stretch; } .lbPage .lbCta, .lbPage .lbGhost { width: 100%; } }