/* Öffentliche Seite /social-media-tool – Stile des Neuaufbaus vom 11.10.2026 (Entwurf: Sonstiges/Marketing/Landingpage-Motion).
   Erzeugt von tools/ins_produkt.py aus css/landing.css; Änderungen dort machen und neu erzeugen.
   Die Seite ist eigenständig (keine vuexy-lab.css); Farben und Schriften über Tokens, hell und dunkel. */
/* Immosearch – Social-Media-Landingpage (Hilfsserver-Entwurf, 11.10.2026)
   Farben kommen aus dem Logo (Tinte, Royal, Cyan) und dem Produkt (Markenblau, Grün „Veröffentlicht“).
   Regeln des Hauses: Etiketten eckig (4 px) mit 1-px-Rahmen, keine grauen Füllflächen. */

@font-face { font-family: "Public Sans"; src: url("/static/fonts/public-sans/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; src: url("/static/fonts/public-sans/public-sans-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --page: #ffffff;
    --tint: #f0f7ff;
    --paper: #ffffff;
    --text: #0b1730;
    --muted: #43587a;
    --line: #d2e2f5;
    --sky: #e7f2ff;
    --sky-2: #d3e8ff;
    --blue: #2e9ffc;
    --link: #0f6fd6;
    --royal: #356cff;
    --cyan: #22c7f8;
    --btn: #0f74dc;
    --btn-hover: #0b62c0;
    --btn-fg: #ffffff;
    --green: #1f9d57;
    --red: #c93838;
    --band: #0b1730;
    --band-fg: #ffffff;
    --band-muted: #b7c8e6;
    --band-line: rgba(255, 255, 255, 0.16);
    --bracket: #0b1730;
    /* Schatten (Aldin, 13.10.2026): kein Blau und kein Farbschleier – auf Weiß wirkte das wie ein Schimmer über der Seite.
       Nur die Schaustücke (Beispielkarten, Kalenderbild, Beispielwoche, Paketkarten, Inserat) heben sich mit einem feinen
       neutralen Schatten rundherum ab; Leisten, Tabellen und Knöpfe trennt ihr Rahmen. Der schwebende Cookie-Hinweis hat
       einen eigenen Schatten. */
    --shadow-show: 0 1px 3px rgba(11, 23, 48, 0.05), 0 8px 30px rgba(11, 23, 48, 0.12);
    --shadow-float: 0 12px 30px -18px rgba(11, 23, 48, 0.45);
    --dim: rgba(11, 23, 48, 0.2);
    --show-light: block;
    --show-dark: none;
    --x-filter: none;
    --crm-filter: none;
    /* Eine Schrift für alles (Aldin, 13.10.2026): Auch die Überschriften stehen in der Hausschrift. Der Name der Variable
       bleibt für alle Überschriften-Regeln. */
    --display: var(--body);
    --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page: #060d1c; --tint: #091327; --paper: #0d192f; --text: #eaf2ff; --muted: #a3b6d6; --line: #1d3052;
        --sky: #0f2344; --sky-2: #17325e; --link: #74bfff; --btn: #2e9ffc; --btn-hover: #5ab4ff; --btn-fg: #051022;
        --green: #48da89; --red: #ff8a8a; --band: #0d192f; --band-muted: #a3b6d6; --band-line: rgba(160, 190, 240, 0.16);
        --bracket: #ffffff; --shadow-show: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.45); --shadow-float: 0 12px 30px -18px rgba(0, 0, 0, 0.7);
        --dim: rgba(2, 6, 16, 0.5); --show-light: none; --show-dark: block; --x-filter: invert(1); --crm-filter: brightness(0) invert(1); color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --page: #060d1c; --tint: #091327; --paper: #0d192f; --text: #eaf2ff; --muted: #a3b6d6; --line: #1d3052;
    --sky: #0f2344; --sky-2: #17325e; --link: #74bfff; --btn: #2e9ffc; --btn-hover: #5ab4ff; --btn-fg: #051022;
    --green: #48da89; --red: #ff8a8a; --band: #0d192f; --band-muted: #a3b6d6; --band-line: rgba(160, 190, 240, 0.16);
    --bracket: #ffffff; --shadow-show: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.45); --shadow-float: 0 12px 30px -18px rgba(0, 0, 0, 0.7);
    --dim: rgba(2, 6, 16, 0.5); --show-light: none; --show-dark: block; --x-filter: invert(1); --crm-filter: brightness(0) invert(1); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 45%, transparent); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 70%, transparent); outline-offset: 3px; }
.only-light { display: var(--show-light); }
.only-dark { display: var(--show-dark); }
.x-icon { filter: var(--x-filter); }
.wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); }

/* Überschriften: Zeilen fahren aus einer Maske (nur wenn Motion läuft) */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.022em; text-wrap: balance; }
h2 { font-weight: 760; font-size: clamp(2rem, 1.1rem + 3.2vw, 3.5rem); line-height: 1.02; }
.line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.line > span { display: block; }
.js [data-lines] .line > span { transform: translateY(108%); }

/* Etiketten: eckig, 1-px-Rahmen */
.tag { --tag-pad-top: 3px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: var(--tag-pad-top) 8px 0; border-radius: 4px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); color: var(--muted); font: 600 0.8rem/1 var(--body); letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
/* Schrift im Schild optisch mittig (gemessen an Buchstaben ohne Unterlänge, je Zoomstufe in Chrome): der obere Abstand schiebt die Zeile nach unten, Symbole bleiben in der Mitte. */
@media (min-resolution: 1.2dppx) and (max-resolution: 1.3dppx) { .tag { --tag-pad-top: 2.4px; } }
@media (min-resolution: 1.4dppx) and (max-resolution: 1.6dppx) { .tag { --tag-pad-top: 2px; } }
@media (min-resolution: 1.9dppx) { .tag { --tag-pad-top: 2.25px; } }
.tag svg path[pathLength] { stroke-dasharray: 1; }
.tag svg { margin-top: calc(var(--tag-pad-top) * -1); width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tag--blue { color: var(--link); }
.tag--green { color: var(--green); }
.tag--time { color: var(--text); border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 12%, transparent); font-variant-numeric: tabular-nums; }
.tag--solid { color: var(--btn-fg); background: var(--btn); border-color: transparent; }
.tag--onink { color: var(--cyan); }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--im-vx-button-height, 40px); padding: 0 22px; border-radius: var(--im-vx-control-radius, 6px); border: 1.5px solid transparent; background: var(--btn); color: var(--btn-fg); font: 650 1rem/1.1 var(--body); text-decoration: none; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; will-change: transform; }
.btn:hover { background: var(--btn-hover); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 0.94rem; }
.btn--big { min-height: 48px; padding: 0 30px; font-size: 1.14rem; border-radius: var(--im-vx-control-radius, 6px); }
.btn--line { background: transparent; border-color: color-mix(in srgb, var(--btn) 60%, transparent); color: var(--link); box-shadow: none; }
.btn--line:hover { background: var(--sky); border-color: var(--btn); }
.btn--onink { background: var(--blue); color: #051022; }
.btn--onink:hover { background: #63b8ff; }

/* Fortschritt + Kopf */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--royal), var(--cyan)); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; --p: 0; background: color-mix(in srgb, var(--page) calc(var(--p) * 90%), transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) calc(var(--p) * 100%), transparent); backdrop-filter: blur(calc(var(--p) * 14px)); -webkit-backdrop-filter: blur(calc(var(--p) * 14px)); }
.top__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.top__logo { display: inline-flex; flex: none; }
.top__logo img { height: 32px; width: auto; max-width: none; }
.top__nav { display: flex; gap: 4px; margin-inline: auto; }
.top__nav a { padding: 8px 12px; border-radius: var(--im-vx-control-radius, 6px); color: var(--muted); font-weight: 550; font-size: 0.96rem; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; }
.top__nav a:hover { color: var(--text); background: var(--sky); }
.top__act { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.top__nav + .top__act { margin-left: 0; }
.top__login { color: var(--text); font-weight: 600; font-size: 0.96rem; text-decoration: none; }
.top__login:hover { color: var(--link); }
.theme { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.theme:hover { color: var(--link); }
.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Handy-Kopf (Entwurf 096 V4, 18.10.2026): wie die Portal-Kopfleiste – bis 900 px nur das Logo-Symbol,
   ab 1020 px abwärts wandern Sprungziele und „Anmelden“ ins Menü (☰). */
.top { --top-gutter: 16px; }
.top__logo-full, .top__logo-mark { display: contents; }
.top__logo-mark img { height: 34px; width: 34px; }
.top__logo-mark { display: none; }
.topmenu { display: none; }
.topmenu__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--im-vx-control-radius, 6px); background: var(--page); color: var(--text); }
.topmenu__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.topmenu__close, .topmenu.is-open .topmenu__open { display: none; }
.topmenu.is-open .topmenu__close { display: block; }
.topmenu__panel { position: absolute; top: calc(100% + 8px); right: var(--top-gutter); z-index: 80; display: grid; gap: 2px; width: min(340px, calc(100% - 2 * var(--top-gutter))); max-height: calc(100dvh - 72px - 8px - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); box-shadow: var(--vl-shadow-float, 0 12px 30px -18px rgba(11, 23, 48, 0.45)); }
.topmenu__panel[hidden] { display: none; }
.topmenu__panel a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: var(--im-vx-control-radius, 6px); color: var(--text); font-weight: 500; font-size: 1rem; text-decoration: none; }
.topmenu__panel a:hover { color: var(--link); background: var(--sky); }
.topmenu__panel svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topmenu__sep { display: block; height: 1px; margin: 6px 4px; background: var(--line); }
.topmenu__theme { display: grid; gap: 8px; padding: 6px 12px 8px; }
.topmenu__theme > span { color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.topmenu__theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--im-vx-control-radius, 6px); }
.topmenu__theme-options button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 44px; padding: 0 6px; border: 0; border-right: 1px solid var(--line); background: var(--page); color: var(--text); font: 500 0.9375rem/1 var(--body); }
.topmenu__theme-options button:last-child { border-right: 0; }
.topmenu__theme-options button[aria-checked="true"] { color: var(--link); background: var(--sky); }
.topmenu__theme-options svg { flex: 0 0 18px; width: 18px; height: 18px; }

/* Einstieg */
.hero { padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 84px); position: relative; }
.hero__text { container-type: inline-size; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.hero__title { font-weight: 800; font-size: clamp(2.1rem, 11.7cqi, 4.4rem); line-height: 0.98; letter-spacing: -0.032em; text-wrap: nowrap; }
.hero__lead { margin-top: clamp(20px, 2.4vw, 30px); max-width: 33em; color: var(--muted); font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.28rem); line-height: 1.55; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(24px, 3vw, 36px); }
.play { display: inline-flex; align-items: center; gap: 12px; padding: 4px 6px 4px 0; border: 0; background: none; text-align: left; font-weight: 650; line-height: 1.2; }
.play small { display: block; color: var(--muted); font-weight: 500; font-size: 0.86rem; }
.play__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--btn) 55%, transparent); background: var(--sky); transition: background-color 0.18s ease, border-color 0.18s ease; }
.play__icon svg { width: 18px; height: 18px; margin-left: 2px; fill: var(--btn); }
.play:hover .play__icon { background: var(--sky-2); border-color: var(--btn); }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font-weight: 550; font-size: 0.94rem; }
.ticks li { display: inline-flex; align-items: center; gap: 7px; }
.ticks svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hero__fit { margin-top: 14px; color: var(--muted); font-size: 0.95rem; }
.hero__stage { position: relative; margin: 18px; }
.film { position: relative; border-radius: var(--im-vx-radius, 8px); overflow: hidden; background: #0b1730 radial-gradient(60% 55% at 88% -5%, rgba(53, 108, 255, 0.38), transparent 70%); box-shadow: 0 0 0 1px var(--band-line); container-type: inline-size; }
.film__video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.film__video[data-film-open] { cursor: zoom-in; }
/* Leiste unter dem Bild: Ton, groß ansehen, anhalten. Sie liegt nicht im Bild, weil dort unten die Untertitel des Films stehen;
   beschriftet, weil Besucher nur anklicken, was sie sehen. */
.film__tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.film__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 17px; background: none; color: #fff; font-weight: 600; font-size: 0.82rem; line-height: 1; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; }
.film__toggle--text { padding: 0 13px 0 10px; }
.film__toggle[data-film-open] { margin-left: auto; }
.film__toggle:hover, .film__toggle:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.film__toggle svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.film__toggle .is-play { display: none; fill: currentColor; stroke: none; }
.film__toggle .is-on { display: none; }
.film__toggle[aria-pressed="true"] .is-play, .film__toggle[aria-pressed="true"] .is-on { display: block; }
.film__toggle[aria-pressed="true"] .is-pause, .film__toggle[aria-pressed="true"] .is-off { display: none; }
.film__toggle[data-film-sound][aria-pressed="true"] { border-color: transparent; background: var(--btn); color: var(--btn-fg); }
/* Schmale Bühne (Handy): „Groß ansehen“ nur als Symbol, damit die Leiste einzeilig bleibt. */
@container (max-width: 380px) {
    .film__toggle[data-film-open] { padding: 0; }
    .film__toggle[data-film-open] span { display: none; }
}
/* Mit Ton läuft an derselben Stelle der Film mit Sprecher – ganz zu sehen, auch wenn er ein anderes Format hat. */
.film.is-sound .film__video { object-fit: contain; }
.brackets { position: absolute; inset: -18px; pointer-events: none; }
.bk { position: absolute; width: clamp(44px, 6.4vw, 76px); height: clamp(44px, 6.4vw, 76px); overflow: visible; }
.bk path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.bk--tl { left: 0; top: 0; stroke: var(--bracket); }
.bk--tr { right: 0; top: 0; stroke: var(--royal); }
.bk--bl { left: 0; bottom: 0; stroke: var(--cyan); }
.bk--br { right: 0; bottom: 0; stroke: var(--bracket); }
.js .bk path { stroke-dashoffset: 1; }
.js [data-hero-in], .js [data-stage] .film { opacity: 0; }

/* Rein → raus */
.flow { padding-block: 6px clamp(56px, 7vw, 96px); }
.flow__line { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 40px); padding: 22px clamp(18px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); }
.flow__side { display: flex; align-items: center; gap: 18px; }
.flow__label { color: var(--muted); font-weight: 550; font-size: 0.95rem; white-space: nowrap; }
.flow__logos { display: flex; align-items: center; gap: 20px; }
.flow__crm { height: 22px; width: auto; filter: var(--crm-filter); }
.flow__open { font: 700 1.02rem/1 var(--display); letter-spacing: -0.01em; }
.flow__nets { display: flex; align-items: center; gap: 14px; }
.flow__nets li { display: grid; place-items: center; }
.flow__nets img { display: block; width: 28px; height: 28px; }
.flow__pipe { position: relative; height: 46px; }
.flow__track { position: absolute; inset: 50% 0 auto 0; height: 2px; margin-top: -1px; background: linear-gradient(90deg, color-mix(in srgb, var(--royal) 55%, transparent), color-mix(in srgb, var(--cyan) 65%, transparent)); opacity: 0.45; border-radius: 2px; }
.flow__hub { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: var(--im-vx-radius, 8px); border: 1px solid var(--line); background: var(--paper); }
.flow__hub img { width: 26px; height: 26px; }
.flow__dot { position: absolute; top: 50%; left: calc(var(--t, 0) * (50% - 30px)); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--royal); opacity: 0; }
.flow__dot--out { left: calc(50% + 30px + var(--t, 0) * (50% - 30px)); background: var(--cyan); }
.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(28px, 4vw, 44px); }
.fit__case { padding-top: 16px; border-top: 2px solid var(--line); }
.fit__case:first-child { border-top-color: var(--btn); }
.fit dt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 1.16rem/1.2 var(--display); letter-spacing: -0.012em; }
.fit dd { margin-top: 8px; color: var(--muted); font-size: 0.98rem; }
.fit dd a { color: var(--link); font-weight: 650; white-space: nowrap; text-underline-offset: 3px; }

/* Abschnitte */
.sec { padding-block: clamp(64px, 8vw, 118px); }
.sec--tint { background: var(--tint); }
.sec__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 68px); }
.sec__head p { max-width: 36em; color: var(--muted); font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.24rem); }
.sec__head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; }
.sec__foot { margin-top: clamp(28px, 4vw, 44px); max-width: 60em; color: var(--muted); font-size: 0.96rem; }
.sheet { border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); box-shadow: var(--shadow-show); }

/* Beispiele: CRM → Beitrag */
/* Beide Karten sind gleich hoch und bleiben es bei jedem Wechsel; die Auswahl sitzt in den Karten (links Immobilie, rechts Plattform, Tonfall, Logo). */
.lab { --lab-h: 690px; display: grid; grid-template-columns: minmax(0, 0.92fr) clamp(36px, 5vw, 72px) minmax(0, 1.08fr); align-items: stretch; }
.crm__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); font: 700 1.08rem/1.2 var(--display); }
.crm__head img { height: 17px; width: auto; filter: var(--crm-filter); }
.crm__row { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 22px 10px 19px; border-left: 3px solid transparent; border-bottom: 1px solid var(--line); outline-offset: -3px; cursor: default; transition: background-color 0.18s ease, border-left-color 0.18s ease; }
.crm__row dt { color: var(--muted); font-size: 0.92rem; }
.crm__row dd { font-weight: 620; font-size: 0.98rem; }
.crm__row.is-hot { background: var(--sky); border-left-color: var(--btn); }
.crm__hint { padding: 13px 22px; color: var(--muted); font-size: 0.88rem; }
.crm { display: flex; flex-direction: column; min-width: 0; }
.crm__rows { flex: 1 1 auto; display: grid; grid-auto-rows: minmax(min-content, 1fr); }
/* Die drei Immobilien als Liste im CRM: anklicken, und der Eintrag darunter füllt sich neu. */
.crm .crm__objects { display: grid; gap: 2px; padding: 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.crm__objects .crm__obj { height: auto; padding: 7px 10px; gap: 12px; justify-content: flex-start; text-align: left; white-space: normal; cursor: pointer; }
.crm__objects .crm__obj img { flex: none; width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.crm__objects .crm__obj span { display: grid; min-width: 0; line-height: 1.25; }
.crm__obj b { color: var(--text); font-weight: 680; font-size: 0.96rem; }
.crm__obj small { color: var(--muted); font-weight: 500; font-size: 0.84rem; }
.lab__arrow { position: relative; align-self: center; height: 24px; }
.lab__shaft { position: absolute; inset: 50% 6px auto 6px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--btn); transform-origin: 0 50%; }
.lab__tip { position: absolute; right: 2px; top: 0; width: 14px; height: 24px; overflow: visible; }
.lab__tip path { fill: none; stroke: var(--btn); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.js .lab__shaft { transform: scaleX(0); }
.js .lab__tip { opacity: 0; }
.pick { display: inline-flex; align-items: center; gap: 10px; }
.pick__label { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.no-hover { display: none; }
@media (hover: none) { .can-hover { display: none; } .no-hover { display: inline; } }

.seg { position: relative; display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--im-vx-control-radius, 6px); background: var(--paper); isolation: isolate; }
.seg__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 0; border-radius: var(--im-vx-control-radius, 6px); background: none; color: var(--muted); font-weight: 620; font-size: 0.92rem; white-space: nowrap; cursor: pointer; transition: color 0.18s ease; }
.seg__btn:hover { color: var(--text); }
.seg__btn img { width: 16px; height: 16px; }
.seg__btn.is-on { color: var(--text); }
.seg__ind { position: absolute; z-index: 0; top: 0; left: 0; border-radius: var(--im-vx-control-radius, 6px); border: 1px solid color-mix(in srgb, var(--btn) 42%, transparent); background: var(--sky); pointer-events: none; }
.seg--small .seg__btn { height: 30px; padding: 0 10px; font-size: 0.86rem; }
html:not(.js) .seg__btn.is-on { background: var(--sky); }

.post { max-width: 540px; margin-left: auto; border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); box-shadow: var(--shadow-show); overflow: hidden; }
.post__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.post__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--cyan)); color: #fff; font: 700 0.84rem/1 var(--body); letter-spacing: 0.02em; }
.post__who { display: grid; min-width: 0; line-height: 1.25; }
.post__who b { font-weight: 680; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post__meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.85rem; }
.post__meta img { width: 14px; height: 14px; }
.post__head .tag { margin-left: auto; }
.post__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky); }
.post__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__brand { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; min-height: 26px; padding: 6px 9px; border-radius: 4px; background: #fff; color: #0b1730; font: 700 0.66rem/1 var(--body); letter-spacing: 0.07em; box-shadow: 0 6px 16px -8px rgba(11, 23, 48, 0.6); }
.post__brand img { display: block; height: 17px; width: auto; }
.post__body { padding: 14px 16px 18px; }
.post__text { font-size: 1rem; line-height: 1.55; }
.post__text mark { padding: 1px 2px; margin: -1px -2px; border-radius: 3px; background: transparent; color: inherit; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.post__text mark.is-hot { background: color-mix(in srgb, var(--blue) 26%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 26%, transparent); }
.post__photo.is-hot::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--blue); pointer-events: none; }
.post__tags { margin-top: 8px; color: var(--link); font-weight: 600; font-size: 0.95rem; }
.post--mini { max-width: 430px; margin-left: 0; }
/* Beitrag im Beispiel: Plattform-Reiter oben, Foto füllt die Mitte, unten Tonfall und Logo. Pinterest zeigt den Hochformat-Pin in derselben Karte. */
.post--lab { display: flex; flex-direction: column; max-width: none; margin: 0; container-type: inline-size; }
.post--lab .post__nets { display: flex; gap: 2px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.post__nets .seg__btn { padding: 0 11px; }
.post__nets .seg__btn img { width: 18px; height: 18px; }
@container (max-width: 545px) { .post__nets .seg__btn:not(.is-on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .post__nets .seg__btn:not(.is-on) { padding: 0 12px; } }
.post--lab .post__photo { flex: 1 1 0; min-height: 0; aspect-ratio: auto; display: grid; place-items: center; }
.post__frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
.post__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post[data-net="pinterest"] .post__photo { padding: 12px; }
.post[data-net="pinterest"] .post__frame { width: auto; aspect-ratio: 2 / 3; border-radius: var(--im-vx-radius, 8px); }
.post__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--sky) 55%, transparent); }
.post__note { flex-basis: 100%; color: var(--muted); font-size: 0.84rem; }
@media (min-width: 901px) { .lab .crm, .post--lab { height: var(--lab-h); } }
.post__title { margin-bottom: 6px; font: 700 1.06rem/1.3 var(--display); letter-spacing: -0.012em; }

/* So läuft es */
.filmcard { position: relative; display: grid; width: 280px; padding: 0; border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); text-align: left; overflow: hidden; }
.filmcard img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b1730; }
.filmcard__play { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); }
.filmcard__play svg { width: 16px; height: 16px; margin-left: 2px; fill: #051022; }
.filmcard__label { padding: 11px 14px 12px; font-weight: 650; font-size: 0.95rem; line-height: 1.25; }
.filmcard__label small { display: block; color: var(--muted); font-weight: 500; font-size: 0.84rem; }
.steps { display: grid; }
.step { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 100px); align-items: start; min-height: min(62vh, 600px); padding-block: 20px; }
.step__text { position: sticky; top: 32vh; display: grid; gap: 14px; justify-items: start; padding-left: 26px; border-left: 2px solid var(--line); }
.step.is-now .step__text { border-left-color: var(--btn); }
.step__no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--link) 34%, transparent); background: var(--sky); color: var(--link); font: 750 1.05rem/1 var(--display); }
.step h3 { font-weight: 740; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.06; }
.step__text p { max-width: 30em; color: var(--muted); }
@media (min-width: 901px) { .js .step__text { opacity: 0.42; transition: opacity 0.45s ease, border-left-color 0.45s ease; } .js .step.is-now .step__text { opacity: 1; } }
.step__panel { position: sticky; top: 20vh; }
.still .step__text, .still .step__panel, .still .faq__head { position: static; }
.still .step { min-height: 0; padding-block: 28px; align-items: center; }
.setup { max-width: 520px; }
.setup__list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.setup__crm { height: 19px; width: auto; filter: var(--crm-filter); }
.setup__net { display: inline-flex; align-items: center; gap: 10px; font-weight: 620; }
.setup__net img { width: 22px; height: 22px; }
.setup__switch { display: flex; align-items: center; gap: 16px; padding: 22px; font: 720 1.3rem/1 var(--display); }
.switch { position: relative; display: inline-block; flex: none; width: 58px; height: 32px; border-radius: 16px; border: 1px solid var(--line); background: var(--sky-2); transition: background-color 0.25s ease, border-color 0.25s ease; }
.switch.is-on { background: var(--btn); border-color: var(--btn); }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(11, 23, 48, 0.35); }
.switch.is-on .switch__knob { transform: translateX(26px); }
.shot { max-width: 640px; border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); box-shadow: var(--shadow-show); overflow: hidden; }
.shot__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 38%, transparent); }
.shot__bar span { margin-left: 8px; }
.shot__pic { position: relative; overflow: hidden; }
.shot__pic img { display: block; width: 100%; }
.shot__mark { position: absolute; left: 0.5%; top: 33.6%; width: 24.6%; height: 50.2%; border: 3px solid var(--btn); border-radius: 8px; box-shadow: 0 0 0 2000px var(--dim); pointer-events: none; }
.shot__flag { position: absolute; left: 1.2%; top: calc(33.6% - 31px); }
.js .shot__mark, .js .shot__flag { opacity: 0; }
.live { display: grid; gap: 16px; justify-items: start; }
.live__next { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 550; font-size: 0.96rem; }
.live__next svg { width: 19px; height: 19px; fill: none; stroke: var(--link); stroke-width: 1.9; stroke-linecap: round; }
.tag--swap { color: var(--link); transition: color 0.3s ease; }
.tag--swap .tag__b { display: none; align-items: center; gap: 5px; }
.tag--swap.is-done { color: var(--green); }
.tag--swap.is-done .tag__a { display: none; }
.tag--swap.is-done .tag__b { display: inline-flex; }

/* Kontrolle */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.points { display: grid; gap: 26px; margin-top: clamp(28px, 4vw, 46px); }
.points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.points svg { width: 44px; height: 44px; padding: 10px; border-radius: var(--im-vx-radius, 8px); border: 1px solid color-mix(in srgb, var(--btn) 30%, transparent); background: var(--sky); fill: none; stroke: var(--link); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.points b { display: block; font: 700 1.14rem/1.25 var(--display); letter-spacing: -0.012em; }
.points p { margin-top: 4px; color: var(--muted); font-size: 0.98rem; }
.plan { max-width: 560px; margin-left: auto; }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 16px 20px; border-bottom: 1px solid var(--line); }
.plan__head b { font: 720 1.18rem/1.1 var(--display); }
.plan__auto { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border: 0; border-radius: 20px; background: none; font-weight: 620; font-size: 0.94rem; }
.plan__auto .switch { width: 46px; height: 26px; }
.plan__auto .switch__knob { width: 18px; height: 18px; }
.plan__auto .switch.is-on .switch__knob { transform: translateX(20px); }
.plan__list { display: grid; gap: 6px; padding: 10px; }
.plan__row { display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 76px; padding: 11px 12px; border: 1px solid transparent; border-radius: var(--im-vx-radius, 8px); background: var(--paper); }
.plan__thumb { display: block; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.plan__what { display: grid; min-width: 0; line-height: 1.3; }
.plan__what b { font-weight: 660; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan__what small { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.86rem; }
.plan__what small img { width: 14px; height: 14px; }
.plan__strike { height: 34px; padding: 0 12px; border-radius: var(--im-vx-control-radius, 6px); border: 1px solid var(--line); background: var(--paper); font-weight: 620; font-size: 0.88rem; transition: border-color 0.15s ease, color 0.15s ease; }
.plan__strike:hover { border-color: var(--red); color: var(--red); }
.plan__free { display: none; color: var(--muted); font-size: 0.92rem; }
.plan__row.is-struck { grid-template-columns: auto minmax(0, 1fr); min-height: 46px; border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); background: transparent; }
.plan__row.is-struck .plan__thumb, .plan__row.is-struck .plan__what, .plan__row.is-struck .plan__strike { display: none; }
.plan__row.is-struck .plan__free { display: block; }
.plan__row.is-struck .tag--time { text-decoration: line-through; color: var(--muted); }
.plan.is-off .plan__row:not(.is-struck) { opacity: 0.42; }
.plan__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; font-weight: 550; }
.plan__reset { padding: 4px 0; border: 0; background: none; color: var(--link); font-weight: 620; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; }
.split__hint { max-width: 560px; margin: 14px 0 0 auto; color: var(--muted); font-size: 0.9rem; }

/* Wie viel */
.amount { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.amount__big { margin-top: 26px; font: 800 clamp(5.5rem, 3rem + 9vw, 10rem)/0.84 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.amount__pre { display: block; min-height: 1.3em; margin-bottom: 6px; color: var(--muted); font: 650 1.1rem/1.3 var(--display); letter-spacing: -0.01em; }
.amount__unit { margin-top: 14px; font: 700 1.24rem/1.25 var(--display); letter-spacing: -0.012em; }
.amount__total { margin-top: 6px; color: var(--link); font-weight: 650; font-size: 0.98rem; }
/* Automatik und eigene Beiträge: je Paket ein Balken mit zwei Teilen, die sich mit der Menge der Automatik verschieben. Balkenbreite = Beiträge am Tag. */
.mix { display: grid; gap: 18px; margin-top: clamp(26px, 4vw, 44px); padding: clamp(18px, 2.6vw, 28px); border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); }
.mix[hidden] { display: none; }
.mix__head h3 { font: 720 clamp(1.14rem, 1.7vw, 1.36rem)/1.25 var(--display); letter-spacing: -0.014em; text-wrap: balance; }
.mix__head p { max-width: 74ch; margin-top: 6px; color: var(--muted); font-size: 0.98rem; }
.mix__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mix__pick > span { margin-right: 4px; color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.mix__pick button { height: var(--im-vx-button-height, 40px); padding: 0 15px; border: 1px solid var(--line); border-radius: var(--im-vx-control-radius, 6px); background: none; color: var(--text); font-weight: 600; font-size: 0.93rem; transition: border-color 0.15s ease, background-color 0.15s ease; }
.mix__pick button:hover { border-color: color-mix(in srgb, var(--btn) 55%, transparent); }
.mix__pick button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--btn) 60%, transparent); background: var(--sky); color: var(--link); }
.mix__legend { display: flex; gap: 16px; margin-left: auto; color: var(--muted); font-size: 0.86rem; }
.mix__legend li { display: inline-flex; align-items: center; gap: 7px; }
.mix__legend i { width: 14px; height: 14px; border-radius: 3px; }
.mix__auto { background: var(--btn); }
.mix__own { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--btn) 34%, transparent) 0 5px, color-mix(in srgb, var(--btn) 14%, transparent) 5px 10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn) 46%, transparent); }
.mix__rows { display: grid; gap: 10px; }
.mix__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--im-vx-control-radius, 6px); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.mix__row:hover { border-color: color-mix(in srgb, var(--btn) 45%, transparent); }
.mix__row.is-on { border-color: color-mix(in srgb, var(--btn) 60%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.mix__name { grid-row: span 2; font: 720 1.14rem/1.2 var(--display); letter-spacing: -0.012em; }
.mix__bar { display: flex; gap: 3px; height: 20px; width: var(--mix-size, 0%); min-width: 0; transition: width 0.7s var(--ease); }
.mix__bar span { height: 100%; min-width: 0; border-radius: 5px; flex: 0 0 var(--mix-part, 50%); transition: flex-basis 0.7s var(--ease); }
.mix__bar span.is-empty { flex-basis: 0; box-shadow: none; }
.mix__text { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.mix__text b { color: var(--text); font-weight: 700; }
.mix__all { margin-left: auto; }
.mix__nets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--muted); font-size: 0.95rem; }
.mix__nets ul { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mix__nets li { display: inline-flex; align-items: center; gap: 6px; }
.mix__nets img { width: 20px; height: 20px; }
.mix__nets b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .mix__bar, .mix__bar span { transition: none; } }
@media (max-width: 640px) {
    .mix__row { grid-template-columns: minmax(0, 1fr); }
    .mix__name { grid-row: auto; }
    .mix__legend { margin-left: 0; flex-basis: 100%; }
    .mix__all { margin-left: 0; }
}
.amount__own { margin-top: 4px; font-weight: 650; font-size: 0.98rem; }
.amount__note { margin-top: 10px; min-height: 4.8em; color: var(--muted); font-size: 0.98rem; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(5px, 1vw, 12px); padding: clamp(12px, 2vw, 22px); border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); box-shadow: var(--shadow-show); }
.week__day { display: grid; gap: 8px; align-content: start; }
.week__day > span { color: var(--muted); font-weight: 650; font-size: 0.86rem; text-align: center; }
.week__stack { display: grid; gap: clamp(4px, 0.7vw, 8px); }
.week__slot { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--blue) 45%, transparent); overflow: hidden; }
.week__slot.is-full { border-style: solid; border-color: transparent; }
.week__slot.is-ghost { visibility: hidden; }
.week__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.week__slot--many { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; border: 0; border-radius: 0; overflow: visible; }
.week__slot--many img { position: static; width: 100%; height: 100%; border-radius: 4px; }

/* Für Büros */
.band { padding-block: clamp(64px, 8vw, 116px); background: var(--band); color: var(--band-fg); border-block: 1px solid var(--band-line); }
.band__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 5vw, 60px); }
.band__cols > div { padding: 4px clamp(18px, 3vw, 40px) 4px; border-left: 1px solid var(--band-line); }
.band__cols > div:first-child { padding-left: 0; border-left: 0; }
.band__cols svg { width: 32px; height: 32px; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.band__cols h3 { margin-top: 16px; font-weight: 720; font-size: 1.36rem; line-height: 1.15; }
.band__cols p { margin-top: 8px; color: var(--band-muted); }

/* Preise */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 clamp(14px, 2vw, 24px); }
.plancard { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; align-content: start; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); box-shadow: var(--shadow-show); }
.plancard header { display: grid; gap: 4px; }
.plancard h3 { display: flex; align-items: center; gap: 10px; font-weight: 760; font-size: 1.7rem; line-height: 1.1; }
.plancard header p { color: var(--muted); }
.plancard__price { display: grid; gap: 6px; align-content: start; margin-top: 4px; }
.plancard__price b { font: 800 clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--display); letter-spacing: -0.03em; }
.plancard__price span { color: var(--text); font-weight: 600; line-height: 1.4; }
.plancard__price small { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.plancard__sub { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.plancard .btn { width: 100%; min-height: 48px; }
.plancard__list { display: grid; gap: 10px; padding-top: 16px; margin-top: 2px; border-top: 1px solid var(--line); font-size: 0.97rem; line-height: 1.45; }
.plancard__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.plancard__list li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.plancard--top { position: relative; border-color: transparent; background: #0b1730 radial-gradient(90% 60% at 100% 0%, rgba(53, 108, 255, 0.5), transparent 70%); color: #fff; box-shadow: 0 0 0 1px var(--band-line), var(--shadow-show); }
.plancard--top header p, .plancard--top .plancard__sub, .plancard--top .plancard__price small { color: #b7c8e6; }
.plancard--top .plancard__price span { color: #fff; }
.plancard--top .plancard__list { border-top-color: rgba(255, 255, 255, 0.16); }
.plancard--top .plancard__list li::before { background: #48da89; }

/* Fragen */
.faq { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 110px; display: grid; gap: 16px; }
.faq__head p { color: var(--muted); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item h3 { font: inherit; letter-spacing: 0; }
.faq__item button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 21px 2px; border: 0; background: none; text-align: left; font: 680 clamp(1.08rem, 1rem + 0.35vw, 1.26rem)/1.25 var(--display); letter-spacing: -0.012em; }
.faq__item button:hover { color: var(--link); }
.faq__item i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--btn) 45%, transparent); background: var(--sky); }
.faq__item i::before, .faq__item i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 1px; background: var(--link); transition: transform 0.3s var(--ease); }
.faq__item i::after { transform: rotate(90deg); }
.faq__item.is-open i::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__item:not(.is-open) .faq__a { height: 0; }
.faq__a p { max-width: 44em; padding: 0 44px 24px 2px; color: var(--muted); }

/* Abschluss */
.end { padding-block: clamp(72px, 9vw, 140px); background: #0b1730 radial-gradient(60% 80% at 50% 120%, rgba(53, 108, 255, 0.5), transparent 70%); color: #fff; }
.end__in { position: relative; display: grid; justify-items: center; gap: 22px; max-width: 1040px; padding-block: clamp(40px, 6vw, 76px); text-align: center; }
.end h2 { font-size: clamp(2.1rem, 1.1rem + 3.8vw, 4rem); }
.end p { max-width: 34em; color: #b7c8e6; font-size: clamp(1.04rem, 0.98rem + 0.35vw, 1.2rem); }
.end__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 10px; }
.end__login { color: #fff; font-weight: 620; }
.brackets--end { inset: 0 clamp(20px, 5vw, 44px); }
.brackets--end .bk--tl, .brackets--end .bk--br { stroke: #ffffff; }

/* Fuß, Andockleiste, Film */
.foot { padding-block: 30px; background: var(--page); border-top: 1px solid var(--line); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.foot img { height: 24px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a { color: var(--muted); font-size: 0.94rem; font-weight: 550; text-decoration: none; }
.foot a:hover { color: var(--link); }
.dock { position: fixed; inset: auto 0 0 0; z-index: 55; display: none; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--page) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(110%); }
.dock .btn { flex: 1; }
.dock span { color: var(--muted); font-size: 0.86rem; font-weight: 550; white-space: nowrap; }
.cinema { width: min(1120px, 94vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.cinema::backdrop { background: rgba(4, 9, 22, 0.82); backdrop-filter: blur(6px); }
.cinema__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--im-vx-radius, 8px); background: #0b1730; box-shadow: 0 50px 120px -30px #000; }
.cinema__close { position: absolute; right: 0; top: -44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; }
/* Beim Öffnen liegt der Fokus auf dem Fenster selbst: kein Rahmen am × ohne Tastatur. Mit Tastatur sitzt er rund um das ×. */
.cinema:focus, .cinema:focus-visible { outline: none; }
.cinema__close:focus-visible { outline: none; }
.cinema__close:focus-visible svg { outline: 2px solid #fff; outline-offset: 2px; }
.cinema__close svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(11, 23, 48, 0.6); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* Schmaler */
@media (max-width: 1020px) {
    .top__nav { display: none; }
    .top__act, .top__nav + .top__act { margin-left: auto; }
    .top__login, .top__act > .theme { display: none; }
    .topmenu { display: block; }
}
@media (max-width: 900px) {
    .top__in { gap: 10px; min-height: 64px; }
    .top__act { gap: 8px; }
    .top__logo-full img { display: none; }
    .top__logo-mark { display: contents; }
    .topmenu__panel { max-height: calc(100dvh - 64px - 8px - 16px); }
}
@media (max-width: 760px) {
    .topmenu__panel { left: var(--top-gutter); width: auto; }
}
@media (max-width: 900px) {
    .hero__grid, .split, .amount, .faq { grid-template-columns: minmax(0, 1fr); }
    .hero__stage { margin: 20px 14px 14px; }
    .flow__line { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 20px 16px; }
    .flow__side { flex-direction: column; gap: 10px; }
    .flow__pipe { width: min(260px, 80%); }
    .fit, .band__cols, .plans { grid-template-columns: minmax(0, 1fr); }
    .plans { grid-template-rows: none; gap: 16px; }
    .plancard { grid-row: auto; grid-template-rows: none; }
    .post { margin-left: 0; max-width: none; }
    .post--lab .post__photo { flex: none; aspect-ratio: 4 / 3; }
    .post[data-net="pinterest"] .post__photo { aspect-ratio: 1 / 1; }
    .post__nets .seg__btn { flex: 1 1 auto; justify-content: center; }
    .band__cols > div { padding: 22px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid var(--band-line); }
    .band__cols > div:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
    .lab { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .crm { margin-top: 0; }
    .lab__arrow { width: 56px; margin: 18px auto; transform: rotate(90deg); }
    .sec__head--row { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .filmcard { width: min(100%, 360px); }
    .step { grid-template-columns: minmax(0, 1fr); gap: 22px; min-height: 0; padding-block: 0 56px; }
    .step:last-child { padding-bottom: 0; }
    .step__text, .step__panel, .faq__head { position: static; }
    .plan, .split__hint { margin-left: 0; max-width: none; }
    .plancard--top { order: -1; }
    .amount__note { min-height: 0; }
    .dock { display: flex; }
    .foot { padding-bottom: 96px; }
}
@media (max-width: 520px) {
    .hero__cta .btn { width: 100%; }
    .seg__btn { padding: 0 10px; font-size: 0.86rem; }
    .post__head { flex-wrap: wrap; row-gap: 8px; }
    .post__head .tag { margin-left: 52px; }
    .post__who { flex: 1 0 calc(100% - 52px); }
    .plan__head { padding-inline: 14px; }
    .plan__head b { font-size: 1.04rem; white-space: nowrap; }
    .plan__auto { font-size: 0.86rem; white-space: nowrap; }
    .plan__what b { white-space: normal; font-size: 0.95rem; }
    .crm__row { grid-template-columns: 104px minmax(0, 1fr); padding-inline: 13px 16px; }
    .crm__head, .crm__hint { padding-inline: 16px; }
    .plan__list { padding: 6px; }
    .plan__row { grid-template-columns: auto 40px minmax(0, 1fr) auto; gap: 9px; padding: 10px 8px; }
    .plan__thumb { width: 40px; height: 40px; }
    .plan__strike { height: 32px; padding: 0 9px; font-size: 0.82rem; }
    .week { gap: 4px; padding: 10px 8px; }
    .week__day > span { font-size: 0.76rem; }
    .faq__a p { padding-right: 8px; }
    .setup__switch { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .progress { display: none; }
}

/* Produkt: Cookie-Hinweis des Portals (vuexy-cookie-consent.css). Er erwartet die Portal-Variablen (--vl-*); ohne vuexy-lab.css
   wären Hinweis und Einstellungen durchsichtig. Deshalb hier auf die Seitenfarben gelegt, hell und dunkel. */
.vuexy-lab__cookie-consent { --vl-primary: var(--btn); --vl-text: var(--text); --vl-muted: var(--muted); --vl-border: var(--line); --vl-surface: var(--paper); --vl-surface-soft: var(--sky); --vl-shadow-float: var(--shadow-float); --vl-font-size-sm: 0.8125rem; --vl-font-size-xs: 0.6875rem; color: var(--text); font-family: var(--body); line-height: 1.5; }
.vuexy-lab__cookie-consent h2, .vuexy-lab__cookie-consent h3 { font-family: var(--display); letter-spacing: -0.012em; }
.vuexy-lab__cookie-consent .vuexy-lab__button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--im-vx-button-height, 40px); padding: 0 16px; border-radius: var(--im-vx-control-radius, 6px); border: 1.5px solid color-mix(in srgb, var(--btn) 60%, transparent); background: transparent; color: var(--link); font: 650 0.95rem/1.1 var(--body); cursor: pointer; }
.vuexy-lab__cookie-consent .vuexy-lab__button--primary { background: var(--btn); border-color: var(--btn); color: var(--btn-fg); }
.vuexy-lab__cookie-consent .vuexy-lab__button:hover { border-color: var(--btn); }
.vuexy-lab__cookie-consent .vuexy-lab__button--primary:hover { background: var(--btn-hover); }
.foot nav button { padding: 0; border: 0; background: none; color: var(--muted); font: 550 0.94rem/1.6 var(--body); cursor: pointer; }
.foot nav button:hover { color: var(--link); }
/* Vorlagen: links die vier Modelle als Liste, rechts ein Beitragsbild, auf dem sich das gewählte Modell zeigt. */
.brand { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.brand .brand__list { display: grid; gap: 4px; padding: 8px; border-radius: var(--im-vx-radius, 8px); }
.brand__list .brand__opt { height: auto; padding: 14px 16px; justify-content: flex-start; text-align: left; white-space: normal; }
.brand__opt span { display: grid; gap: 3px; }
.brand__opt b { color: var(--text); font: 700 1.1rem/1.2 var(--display); letter-spacing: -0.012em; }
.brand__opt small { color: var(--muted); font-weight: 500; font-size: 0.92rem; line-height: 1.4; }
.brand__stage { position: relative; padding: 0 clamp(0px, 4vw, 56px) 34px 0; }
.brand__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--im-vx-radius, 8px); container-type: inline-size; }
.brand__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand__logo { position: absolute; right: 16px; bottom: 16px; padding: 9px 12px; border-radius: 4px; background: #fff; color: #0b1730; font: 700 0.74rem/1 var(--body); letter-spacing: 0.07em; box-shadow: 0 8px 20px -10px rgba(11, 23, 48, 0.7); }
/* Leiste und Namensschild sehen aus wie im Erklärfilm (weiß, dunkle Schrift, blaue Punkte) und wachsen mit dem Bild mit: Angaben in cqw. */
.brand__bar { position: absolute; inset: auto 2.9cqw 2.9cqw 2.9cqw; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4cqw 0; padding: 2.5cqw 2.6cqw; border-radius: max(4px, 0.6cqw); background: rgba(255, 255, 255, 0.95); color: #0b1730; font-weight: 700; font-size: max(11px, 3.1cqw); line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 22px -12px rgba(2, 8, 23, 0.55); }
.brand__bar span + span::before { content: "·"; margin: 0 0.55em; color: #1f74dc; }
.brand__name { position: absolute; inset: auto 4.5cqw 4.5cqw 4.5cqw; display: grid; gap: 0.6cqw; padding: 3.6cqw 5cqw; border-radius: max(4px, 1.2cqw); background: rgba(255, 255, 255, 0.95); color: #0b1730; line-height: 1.2; }
.brand__name b { font-weight: 700; font-size: max(13px, 7.6cqw); }
.brand__name small { color: #44546f; font-weight: 500; font-size: max(11px, 6.2cqw); }
.brand__extra { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--im-vx-radius, 8px); border: 4px solid var(--paper); background: var(--paper); container-type: inline-size; }
.brand__extra img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand__extra--own { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 16px; background: #0b1730 radial-gradient(90% 60% at 100% 0%, rgba(53, 108, 255, 0.55), transparent 70%); color: #fff; text-align: center; }
.brand__extra--own b { font: 800 clamp(1rem, 0.7rem + 1vw, 1.4rem)/1.1 var(--display); letter-spacing: 0.02em; }
.brand__extra--own span { font-weight: 600; font-size: 0.92rem; }
.brand__extra--own small { color: #b7c8e6; font-size: 0.8rem; }
.brand__cap { position: absolute; left: 0; bottom: 0; color: var(--muted); font-size: 0.92rem; }
[data-brand-part] { display: none; }
[data-model="logo"] [data-brand-part="logo"], [data-model="daten"] [data-brand-part="daten"], [data-model="portraet"] [data-brand-part="portraet"] { display: block; }
[data-model="daten"] [data-brand-part="daten"] { display: flex; }
[data-model="zusatz"] [data-brand-part="zusatz"] { display: grid; }
/* Publisher mit KI: die KI-Leiste des Publishers zum Ausprobieren. */
.ki { max-width: 560px; margin-left: auto; overflow: hidden; }
.ki__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ki__head b { display: inline-flex; align-items: center; gap: 8px; font: 700 1.08rem/1.2 var(--display); }
.ki__head span { color: var(--muted); font-size: 0.88rem; }
.ki svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ki__head svg { color: var(--link); }
.ki__text { min-height: 9.4em; padding: 18px 20px; font-size: 1.02rem; line-height: 1.6; }
.ki__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 20px 16px; }
.ki__styles { flex-wrap: wrap; }
.ki__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--sky) 55%, transparent); }
.ki__foot .btn { gap: 8px; }
.ki__hist { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.ki.is-busy [data-ki-go] { pointer-events: none; opacity: 0.75; }
.fit--soon { margin-top: 0; }
@media (max-width: 900px) {
    .brand { grid-template-columns: minmax(0, 1fr); }
    .brand__stage { padding-right: 0; padding-bottom: 46px; }
    .brand__extra { width: 52%; }
    .brand__cap { max-width: 44%; }
    .ki { margin-left: 0; max-width: none; }
}
/* Pakete im Vergleich: zehn Zeilen in Alltagssprache; am Handy steht die Frage über den drei Werten. */
.cmp { margin-top: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--im-vx-radius, 8px); background: var(--paper); overflow: clip; }
.cmp__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px clamp(16px, 2.4vw, 26px); border: 0; background: none; color: var(--text); font: 700 1.12rem/1.2 var(--display); letter-spacing: -0.012em; text-align: left; cursor: pointer; }
.cmp__toggle svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--link); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.cmp.is-open .cmp__toggle svg { transform: rotate(180deg); }
.cmp__toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 45%, transparent); outline-offset: -4px; border-radius: 8px; }
.cmp__toggle { transition: background-color 0.2s ease, color 0.2s ease; }
@media (hover: hover) {
    .cmp__toggle:hover { background: var(--sky); color: var(--link); }
    .cmp__toggle:hover svg { transform: translateY(3px); }
    .cmp.is-open .cmp__toggle:hover svg { transform: rotate(180deg) translateY(3px); }
    .cmp__table tbody tr { transition: background-color 0.15s ease; }
    .cmp__table tbody tr:hover { background: color-mix(in srgb, var(--sky) 60%, transparent); }
}
.cmp__panel { overflow: clip; border-top: 1px solid var(--line); }
.js .cmp:not(.is-open) .cmp__panel { display: none; }
.cmp__table { display: block; width: 100%; font-size: 0.97rem; }
.cmp__table thead, .cmp__table tbody { display: block; }
/* Die Paketnamen bleiben beim Scrollen unter der Kopfleiste stehen (overflow: clip statt hidden, sonst klebt nichts). */
.cmp__table thead { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 73px); z-index: 2; background: var(--paper); border-bottom: 1px solid var(--line); }
.cmp__table tbody tr:first-child { border-top: 0; }
.cmp__table tr { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
.cmp__table tbody tr { border-top: 1px solid var(--line); }
.cmp__table th, .cmp__table td { padding: 14px clamp(10px, 1.6vw, 20px); text-align: left; font-weight: 400; }
.cmp__table thead th { padding-block: 16px; text-align: center; font: 700 1.06rem/1.2 var(--display); letter-spacing: -0.012em; }
.cmp__table th[scope="row"] { padding-left: clamp(16px, 2.4vw, 26px); font-weight: 650; line-height: 1.35; }
.cmp__table small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 0.86rem; line-height: 1.4; }
.cmp__table td { display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center; font-variant-numeric: tabular-nums; }
.cmp__table td b { font-weight: 650; }
.cmp__table .is-top { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.cmp__table thead .is-top { background: color-mix(in srgb, var(--blue) 9%, var(--paper)); }
.cmp__yes { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, transparent); }
.cmp__yes svg { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cmp__no { display: block; width: 14px; height: 2px; margin: 11px 5px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.cmp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cmp__foot { padding: 16px clamp(16px, 2.4vw, 26px) 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
@media (max-width: 900px) {
    .cmp__table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cmp__table thead td { display: none; }
    .cmp__table th[scope="row"] { grid-column: 1 / -1; padding-bottom: 4px; }
    .cmp__table thead th, .cmp__table td { padding-inline: 6px; }
    .cmp__table td { padding-top: 6px; font-size: 0.92rem; }
}