:root {
    /* Brand primary — the dark violet that lights the upper-right corner of the estate-snapshot tile on
       My Objects, so every Radzen primary surface (the global Add FAB above all) picks up the accent of
       the one card that summarises the whole portfolio. #331f68 is that corner as it actually renders:
       .snapshot::before lays `rgba(124, 58, 237, 0.35)` (a radial highlight anchored at 90% -20%) over
       the --ow-ink card, and 35% violet composited on #0b1020 is #331f68. The scale is a straight
       lightness ramp of it — same hue (256°) and saturation, 16%→41% lightness — so the shades read as
       one violet rather than as five colours. The humanistic theme ships a red (#d64d42) primary scale,
       so *every* shade is overridden here, not only the base one: Radzen paints --rz-primary-dark on
       pressed and Shade.Dark primary surfaces, and leaving it out left those surfaces theme-red. */
    --rz-primary: #331f68;
    --rz-primary-darker: #1f133f;
    --rz-primary-dark: #281952;
    --rz-primary-lighter: #4f30a1;
    --rz-primary-light: #412886;

    /* Every primary shade above is a solid, dark violet, so every paired foreground has to be
       white. The humanistic theme ships each --rz-on-primary-* token as its own primary red (#d64d42),
       which reads correctly on the theme's pale 16%-alpha tints but not on our saturated fills. Radzen
       pairs them by convention — e.g. the selected select-bar item is
       `background: var(--rz-primary-lighter); color: var(--rz-on-primary-lighter)`, which left
       "Ausgabe"/"Einnahme" red on indigo — so the shades and their on-colours must be overridden together. */
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #ffffff;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;

    /* Secondary — the warm champagne gold of the interior language (--ow-champagne / --ow-champagne-deep)
       instead of the theme's blue (#3ba5fc). Unlike primary the two light shades stay genuinely light, so
       they keep a dark ink foreground: Radzen uses --rz-secondary-lighter as an opaque wash behind
       --rz-on-secondary-lighter text (tag chips, outlined/text button hover, the share-card tag badge
       painted on canvas by shareObject.js), which is why it is a solid pale gold rather than an alpha tint. */
    --rz-secondary: #a7864b;
    --rz-secondary-darker: #5d4826;
    --rz-secondary-dark: #7a5f34;
    --rz-secondary-lighter: #f4ebd9;
    --rz-secondary-light: #c9a96a;

    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #2f2410;
    --rz-on-secondary-lighter: #7a5f34;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;

    /* humanistic ships --rz-fab-border-radius: 0, which leaves every floating action button square —
       both the global Add FAB (.rz-fab reads the variable) and the OWNY assistant button, which is a
       plain RadzenButton that pulls the same variable in through its inline border-radius. */
    --rz-fab-border-radius: 1rem;
    --rz-fab-active-border-radius: 1rem;

    /* Height of the mobile bottom navigation bar (excluding the safe-area inset). Shared by the
       bar itself and by everything that must clear it: the cookie banner/FAB, the OWNY chat
       panel, the drop-up account menu and the RadzenBody bottom padding. */
    --own-bottom-nav-height: 64px;

    --oasis-sand: #f0f4ff;
    --oasis-palm: #4338ca;
    --oasis-water: #0ea5e9;
    --oasis-gold: #f59e0b;
    --rz-chat-message-user-background-color: var(--oasis-sand);
    --rz-chat-message-user-color: var(--rz-primary);
    --rz-layout-background-color: var(--oasis-sand);
}

/* Material Symbols icon box. Identical to the rule Google Fonts ships with the icon font, duplicated here
   because the Google stylesheet no longer blocks rendering (App.razor loads it asynchronously): without
   this an icon would render as its ligature word ("home", "search") in ordinary body text — wrapping and
   shifting the layout — until that stylesheet arrived. With it the glyph text sits in its final 24px box
   from the first paint and only the typeface swaps in. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* The global FABs (the Add FAB in MainLayout, plus any other primary floating action button) are
   RadzenFab with ButtonStyle.Primary, so they already inherit the violet from --rz-primary. The fill is
   pinned here as well because humanistic paints .rz-fab from its own --rz-fab-* variables on some
   surfaces, which would otherwise leave a FAB in the theme colour. Hover lifts to --rz-primary-light
   rather than following Radzen's default darkening, which is barely visible on a base this dark. The
   locked (Base) and cookie-consent (Secondary) FABs are deliberately untouched. */
.rz-fab.rz-primary,
.rz-speeddial-fab > .rz-button.rz-primary {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

.rz-fab.rz-primary:hover,
.rz-fab.rz-primary:focus,
.rz-speeddial-fab > .rz-button.rz-primary:hover {
    background-color: var(--rz-primary-light);
}

/* ── Buttons wear the house shape and the house neutral ─────────────────────────────────────
   Two corrections to the Radzen defaults, applied to every button in the app so a screen does not
   change character depending on which variant it happens to use:

   · Rounded, in the same pill the chips, badges and the landing-page CTAs already use. Radzen's
     4px corner is the one piece of the default theme that still reads as "framework".
   · The Light/Base filled variants ship a cold grey that belongs to no palette here. They become
     the cream the rest of the interior is built on, with the ink text and the champagne hairline
     that the other surfaces carry.

   Deliberately not touched: FABs and speed-dials (round already), select-bar segments (their shape
   is the segmentation), and anything inside .rz-datepicker/.rz-dropdown popups. */
.rz-button,
.rz-button.rz-shade-default {
    border-radius: 999px;
}

/* A square-cornered icon-only button is a circle at this radius, which is what it should be. */
.rz-button.rz-button-icon-only {
    border-radius: 50%;
}

.rz-button.rz-light,
.rz-button.rz-base,
.rz-button.rz-secondary.rz-variant-filled {
    background-color: var(--ow-cream, #f6f1e7);
    color: var(--ow-ink, #0b1020);
    border: 1px solid var(--ow-line, #e6e1d7);
}

    .rz-button.rz-light:hover,
    .rz-button.rz-base:hover,
    .rz-button.rz-secondary.rz-variant-filled:hover {
        background-color: var(--ow-cream-deep, #efe7d4);
        border-color: var(--ow-champagne, #c9a96a);
        color: var(--ow-ink, #0b1020);
    }

    .rz-button.rz-light:disabled,
    .rz-button.rz-base:disabled {
        background-color: var(--ow-cream, #f6f1e7);
        color: var(--own-fg-3, #9c9484);
        border-color: var(--ow-line, #e6e1d7);
    }

/* The form controls beside them follow the same corner, or a pill button next to a square input
   reads as two different design systems sharing a row. */
.rz-dropdown,
.rz-textbox,
.rz-textarea,
.rz-numeric,
.rz-datepicker,
.rz-form-field .rz-form-field-content {
    border-radius: 12px;
}

/* Radzen renders select-bar items as `.rz-selectbar > button.rz-button`, so the icons inside a selected
   item are addressed here; the label colour itself comes from the --rz-on-primary-lighter override above. */
.rz-selectbar .rz-button.rz-state-active,
.rz-selectbar .rz-button.rz-state-active .rz-button-text,
.rz-selectbar .rz-button.rz-state-active .rz-button-icon-left,
.rz-selectbar .rz-button.rz-state-active .rz-button-icon-right,
.rz-selectbar .rz-button.rz-state-active .rzi {
    color: var(--rz-on-primary-lighter, #ffffff);
}

/* Restore dark background variables when the software-dark theme is active.
   Radzen swaps the theme CSS file at runtime but cannot use a DOM attribute selector,
   so we rely on the ThemeService adding the .software-dark class to <html> via JS interop
   in MainLayout. As a safety net, --rz-body-background-color is no longer hard-coded in
   :root above so the theme CSS file's own :root declaration is respected automatically. */



body {
    background-color: var(--rz-body-background-color);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: var(--oasis-water);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.ownamic-logo-text {
    font-family: var(--own-wordmark-font);
    font-weight: var(--own-wordmark-weight);
    letter-spacing: var(--own-wordmark-track);
    font-size: 1.6rem;
    color: black;
    padding-top: 5px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

rz-dialog-mask {
    height: stretch;
}

/* Radzen's default dialog title comes from the theme's sans-serif stack, which
   clashes with the editorial serif every other section header on the site uses
   (see --ow-serif / .own-serif). Applies globally so it covers every dialog,
   not just this or that CssClass. */
.rz-dialog-title {
    font-family: var(--ow-serif, "Cormorant Garamond", "Source Serif 4", Georgia, serif);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* When .sticky-dialog is applied, pin the whole dialog overlay to the fixed
   viewport and center the dialog with flexbox.

   The real DOM (Radzen 10) is:
       .rz-dialog-wrapper  > .rz-dialog.sticky-dialog (the box)
                           > .rz-dialog-mask           (sibling, after the box)
   Radzen's default wrapper can stay anchored to the scrolled document (or to
   the .rz-body scroll container), which on mobile pushes the dialog off the
   top of the screen — and makes a dialog opened right after another one (e.g.
   the file-source picker after the document-type picker) appear at the top of
   the page. Forcing the wrapper to a fixed, scrollable flex container and
   centering the box with auto margins keeps every dialog on screen regardless
   of scroll position. */
.rz-dialog-wrapper:has(.sticky-dialog) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    overflow: auto !important;
    padding: 0.5rem !important;
}

/* Keep the dialog box itself in normal flow as the centered flex child (auto
   margins center on both axes and, unlike align-items:center, never clip the
   top when the content overflows). Cap its size to the viewport so tall
   dialogs scroll internally instead of overflowing the screen. The
   position/transform resets override Radzen's previous fixed-positioning. */
.rz-dialog.sticky-dialog,
.sticky-dialog.rz-dialog {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: auto !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: 90dvh !important;
    overflow: auto !important;
}

/* Keep the mask covering the full viewport behind the centered dialog. */
.rz-dialog-wrapper:has(.sticky-dialog) .rz-dialog-mask {
    position: fixed !important;
    inset: 0 !important;
}

/* The Add dialog is the one dialog that always starts from the FAB in the bottom corner — on a
   phone that is held in one hand, with the thumb already down there. Centering it moves the next
   tap to the middle of the screen and back, which is the part of the reach a single hand does not
   have. On small screens it therefore opens as a sheet against the bottom edge, so the FAB and the
   options it leads to stay in the same corner. Wide screens have no reach problem and keep the
   centered box.

   Must stay after the .sticky-dialog rules above: same specificity, later wins. */
@media (max-width: 768px) {
    .rz-dialog-wrapper:has(.add-item-dialog) {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .rz-dialog.add-item-dialog,
    .add-item-dialog.rz-dialog {
        /* Top margin auto pushes the box down the wrapper's cross axis; the sides go to 0 so the
           sheet spans the full width. */
        margin: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 88dvh !important;
        border-radius: 1rem 1rem 0 0 !important;
    }

    /* Leave the home indicator / gesture bar clear of the last option in the sheet. */
    .add-item-dialog .rz-dialog-content {
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
}

/* The global search dialog is opened from the "Suche" item in the mobile bottom navigation bar, so
   on a phone it opens where that tap landed: a sheet against the bottom edge, but lifted by the
   bar's own height so the bar (and the item that opened it) stays visible underneath instead of
   being covered by the sheet. The keyboard then pushes the field up from just above the bar rather
   than from the middle of the screen. Wide screens have no bottom bar and keep the centred box.

   Same DOM and the same overrides as `.sticky-dialog` above (Radzen 10 renders
   `.rz-dialog-wrapper > .rz-dialog.<CssClass>` with `.rz-dialog-mask` as a sibling).

   Must stay after the .sticky-dialog rules above: same specificity, later wins. */
@media (max-width: 768px) {
    .rz-dialog-wrapper:has(.global-search-dialog) {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: auto !important;
        padding: 0 0 calc(var(--own-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px)) 0 !important;
    }

    .rz-dialog-wrapper:has(.global-search-dialog) .rz-dialog-mask {
        position: fixed !important;
        inset: 0 !important;
    }

    .rz-dialog.global-search-dialog,
    .global-search-dialog.rz-dialog {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        /* Everything the bar and the safe area do not already take, less a strip that keeps the
           page (and the dialog's own top edge) in view. */
        max-height: calc(100dvh - var(--own-bottom-nav-height, 64px) - env(safe-area-inset-bottom, 0px) - 3rem) !important;
        overflow: auto !important;
        border-radius: 1rem 1rem 0 0 !important;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.account-form-wrapper {
    max-width: 500px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    height: calc(100vh - 100px);
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
}

.btn {
    font-size: var(--rz-text-subtitle1-font-size);
    margin-block: 5px;
}

.btn-primary {
    background-color: var(--rz-primary) !important;
    border: 0px hidden;
}

@media only screen and (max-width: 600px) {
    .rz-tabview-panel {
        padding: 0.25rem;
    }
}

/* ── Dark theme overrides ──────────────────────────────────────────────────
   Radzen switches themes by swapping the <link> href, it does not add a
   data-theme attribute or body class.  MainLayout.razor sets the
   .theme-dark class on <html> via JS interop whenever the active theme
   contains "dark", so we can target it here.
   ───────────────────────────────────────────────────────────────────────── */
html.theme-dark {
    /* The light-theme primary is a very dark violet, which all but disappears on the dark shell
       (#1e2a30). The dark theme therefore keeps the same violet hue but lifts the whole ramp until the
       fill separates from the background again, while every shade stays dark enough for the white
       --rz-on-primary-* foregrounds set above. */
    --rz-primary: #5c38bc;
    --rz-primary-darker: #402782;
    --rz-primary-dark: #4d2f9d;
    --rz-primary-lighter: #7a5ace;
    --rz-primary-light: #6b49c4;

    --oasis-sand: #1e2a30;
    --rz-body-background-color: #1e2a30;
    --rz-layout-background-color: #1e2a30;
    --rz-chat-message-user-background-color: #1e2a30;
    --rz-chat-message-user-color: #e2e8f0;
}

/* ── TagEditor chip control ──────────────────────────────────────────────── */
.tag-editor {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.tag-editor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 3px 8px 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--rz-secondary-lighter, #e8edf5);
    color: var(--rz-secondary-dark, #334155);
    border: 1px solid var(--rz-secondary-light, #cbd5e1);
    line-height: 1.4;
}

.tag-chip-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0 1px;
    cursor: pointer;
    color: inherit;
    opacity: .65;
    line-height: 1;
}

    .tag-chip-remove:hover {
        opacity: 1;
    }

.tag-editor-input-row {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* =========================================================================
   OWNAMIC — Premium Landing (logged-out home)
   Implemented from design bundle "Landing - Premium.html".
   All rules namespaced under .lp to avoid collisions with the app shell.
   The "Cormorant Garamond" display face is loaded via a <link> in each host
   head (App.razor / index.html); it falls back to Georgia if unavailable.
   ========================================================================= */

.hero-logo-text-span {
    font-family: var(--own-wordmark-font);
    font-weight: var(--own-wordmark-weight);
    font-size: clamp(2rem, 2.5vw, 3.5rem);
    color: #fff;
    letter-spacing: var(--own-wordmark-track);
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.15;
}

.ownamic-text-span {
    font-family: var(--own-wordmark-font);
    font-weight: var(--own-wordmark-weight);
    letter-spacing: var(--own-wordmark-track);
}

.lp {
  --ow-ink:        #0b1020;
  --ow-ink-2:      #141a33;
  --ow-cream:      #f6f1e7;
  --ow-cream-deep: #efe7d4;
  --ow-paper:      #ffffff;
  --ow-line:       #e6e1d7;
  --ow-champagne:  #c9a96a;
  --ow-champagne-deep: #a7864b;
  --ow-blush:      #f5e6d8;
  --ow-indigo:     #4338ca;
  --ow-violet:     #7c3aed;
  --ow-line-dark:  rgba(255,255,255,0.12);
  --ow-serif: "Cormorant Garamond", "Source Serif 4", Georgia, serif;
  /* Caveat is already linked in the hosts' <head> for the signature lines. */
  --ow-hand:  "Caveat", "Bradley Hand", cursive;

  /* One type scale for the whole landing page. Every section eyebrow, headline, lede, tile title
     and body copy reads from these, so a section cannot drift into its own sizes. */
  --ow-eyebrow-size:    0.72rem;
  --ow-h1-size:         clamp(2.3rem, 4.6vw, 3.6rem);
  --ow-h2-size:         clamp(1.9rem, 3.2vw, 2.8rem);
  --ow-lede-size:       1.05rem;
  --ow-tile-title-size: clamp(1.35rem, 2vw, 1.6rem);
  --ow-body-size:       0.95rem;

  --own-gradient-primary: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
  --own-primary:       #4338ca;
  --own-primary-light: #e8eaff;
  --own-success:       #22c55e;
  --own-fg-1:          #1e293b;
  --own-fg-2:          #475569;
  --own-fg-3:          #94a3b8;
  --own-font-sans:     "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --own-dur-fast: 150ms;
  --own-dur-base: 250ms;
  --own-ease: cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  background: var(--ow-paper);
  color: var(--own-fg-1);
  font-family: var(--own-font-sans);
  -webkit-font-smoothing: antialiased;
  /* Clips the decorative overflow of the hero/section glows without turning `.lp`
     into a scroll container — `overflow: hidden` would, and a scroll container here
     would break `position: sticky` on the section nav below (it would stick to `.lp`
     instead of the Radzen `.rz-body` scrollport). `hidden` stays as the fallback for
     engines that do not know `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

.lp .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased;
  vertical-align: middle; font-feature-settings: 'liga';
}

.lp .serif { font-family: var(--ow-serif); font-weight: 500; letter-spacing: -0.01em; }

/* One eyebrow for every section — the golden-middle look, with either a rule or a dot in front. */
.lp .lp-eyebrow,
.lp .lp-evo .evo-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--ow-eyebrow-size); text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 700; color: var(--ow-champagne-deep);
}
.lp .lp-eyebrow .line { width: 28px; height: 1px; background: currentColor; opacity: 0.5; }
.lp .lp-eyebrow .d,
.lp .lp-evo .evo-eyebrow .d { width: 6px; height: 6px; border-radius: 50%; background: var(--ow-champagne); box-shadow: 0 0 12px var(--ow-champagne); }

.lp .lp-shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.lp .lp-wordmark { height: 22px; width: auto; display: block; }

/* ── NAV ── */
.lp .lp-nav { position: absolute; inset: 0 0 auto 0; z-index: 20; padding: 24px 0; color: white; }
.lp .lp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.lp .lp-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Every brand bar carries the compass artwork itself. It replaced a `.lp-mark`
   gradient orb — 28px in the hero nav, 22px in the sticky bar — whose rules are gone
   with it; only the height is set per bar below, each a touch larger than the dot it
   replaced, because an outlined ring reads smaller than a solid disc of the same size.
   Which cut of the artwork goes where is decided in the markup, by how dark the bar
   underneath is: inverted over the hero navs, plain on the light sticky plate. */
.lp .lp-mark-logo {
  width: auto; object-fit: contain; display: block; flex-shrink: 0;
}
/* Same clamp the wordmark next to it is set in, so the two scale as one lockup
   instead of the mark staying a fixed size while OWNAMIC grows with the viewport. */
.lp .lp-nav-brand .lp-mark-logo { height: clamp(2rem, 2.5vw, 3.5rem); }
.lp .lp-nav-brand .lp-wordmark { height: 18px; }
.lp .lp-nav-links { display: flex; gap: 28px; font-size: 0.92rem; color: rgba(255,255,255,0.78); }
.lp .lp-nav-links a { color: inherit; text-decoration: none; transition: color var(--own-dur-fast); }
.lp .lp-nav-links a:hover { color: white; }
.lp .lp-nav-cta { display: flex; align-items: center; gap: 14px; }
.lp .lp-nav-cta .lp-signin { color: rgba(255,255,255,0.85); font-size: 0.92rem; text-decoration: none; }
.lp .lp-nav-cta .lp-signin:hover { color: white; }

/* ── STICKY SECTION NAV ──
   Desktop *and* mobile companion to the transparent hero nav above, which is left
   exactly as it was. This bar sits in the flow right below the hero, so it is out of
   sight until the visitor scrolls past the hero and then sticks to the top of the
   Radzen `.rz-body` scroll container. Deliberately built like the MyObjects jump bar
   (`.mo-tabs-nav`): tinted + blurred backdrop, a hairline bottom rule, a horizontally
   scrollable link row and a champagne underline on the section currently in view. */
.lp .lp-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ow-paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ow-line);
}
.lp .lp-sticky-nav-inner { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.lp .lp-sticky-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.lp .lp-sticky-brand .lp-mark-logo { height: 1.6rem; }
/* The shared brand span is sized for the dark hero; on the light bar it becomes a
   compact, ink-coloured wordmark. */
.lp .lp-sticky-brand .hero-logo-text-span {
  font-size: 1.05rem; line-height: 1; color: var(--ow-ink); margin: 0; letter-spacing: -0.015em;
}
.lp .lp-sticky-links-wrap {
  position: relative; display: flex; flex: 1; min-width: 0;
}
.lp .lp-sticky-links {
  display: flex; align-items: center; flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.lp .lp-sticky-links::-webkit-scrollbar { display: none; }
/* Trailing scroll hint: a champagne chevron over a blurred fade of the bar's own background,
   shown only while `.lp-sticky-links` still has hidden links to its right (see initEdgeFade in
   sectionTabs.js). Sits on the non-scrolling wrapper so it stays put while the links scroll
   underneath it. */
.lp .lp-sticky-fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  display: flex; align-items: center; justify-content: flex-end;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ow-paper) 88%, transparent) 60%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: var(--ow-champagne-deep);
  opacity: 0; pointer-events: none;
  transition: opacity var(--own-dur-fast);
}
.lp .lp-sticky-fade .material-symbols-outlined { font-size: 1.15rem; }
.lp .lp-sticky-links-wrap.can-scroll-right .lp-sticky-fade { opacity: 1; }
.lp .lp-sticky-links a {
  position: relative; white-space: nowrap; text-decoration: none;
  padding: 18px 4px; margin: 0 12px;
  font-size: 0.9rem; font-weight: 600; color: var(--own-fg-2);
  transition: color var(--own-dur-fast);
}
.lp .lp-sticky-links a:hover,
.lp .lp-sticky-links a.is-active { color: var(--ow-ink); }
.lp .lp-sticky-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--ow-champagne-deep); border-radius: 2px;
}
.lp .lp-sticky-cta { flex-shrink: 0; padding: 9px 18px; font-size: 0.88rem; }
/* Keeps a jumped-to section heading clear of the stuck bar (same job as the
   SectionScrollOffset used by the MyObjects jump bar). */
.lp .lp-section { scroll-margin-top: 64px; }

/* Focus pill in the sticky bar: shown only while a side is chosen, so the setting rides
   along the whole page instead of being lost the moment the switch scrolls out of sight.
   The body jumps back to the switch, the trailing × returns to "Das ganze Bild". */
.lp .lp-sticky-focus {
  display: inline-flex; align-items: stretch; flex-shrink: 0;
  border: 1px solid var(--ow-champagne); border-radius: 999px;
  background: var(--ow-cream); overflow: hidden;
}
.lp .lp-sticky-focus button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: none; background: transparent; font-family: inherit;
  font-size: 0.8rem; font-weight: 700; color: var(--ow-ink); white-space: nowrap;
  padding: 7px 12px; transition: background var(--own-dur-fast);
}
.lp .lp-sticky-focus button:hover { background: var(--ow-cream-deep); }
.lp .lp-sticky-focus .lp-sticky-focus-tag .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
.lp .lp-sticky-focus .lp-sticky-focus-reset {
  padding: 7px 10px; color: var(--own-fg-2);
  border-left: 1px solid color-mix(in srgb, var(--ow-champagne) 55%, transparent);
}
.lp .lp-sticky-focus .lp-sticky-focus-reset .material-symbols-outlined { font-size: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────
   PROMO BAR — the launch-campaign strip (PromoBanner.razor)
   Rendered by MainLayout as the first child of the Radzen body, above the page
   itself, for signed-out visitors on the public pages. It is NOT inside `.lp`, so
   it reads the palette straight off `:root` and carries its own box-sizing —
   there is no global border-box reset, and with the default content-box the
   36px min-height plus the vertical padding would have made a 48px band.
   Sticky rather than fixed: the scrollport is the Radzen `.rz-body`, the same one
   the section nav below sticks to, so `top: 0` parks it over the page while the
   footer and the cookie banner keep their own flow.
   ───────────────────────────────────────────────────────────────────────── */
.promo-bar {
  position: sticky; top: 0; z-index: 100;
  box-sizing: border-box;
  display: flex; justify-content: center; align-items: center;
  min-height: var(--ow-promo-bar-height);
  /* Asymmetric padding: the right side keeps the line clear of the cookie/consent
     affordances that can sit in the top-right corner of a fresh visit. */
  padding: 6px 44px 6px 16px;
  background: var(--ow-ink-2);
  border-bottom: 1px solid color-mix(in srgb, var(--ow-champagne) 35%, transparent);
  color: var(--ow-champagne);
  font-size: 13px; letter-spacing: 0.03em; line-height: 1.3;
  text-decoration: none; text-align: center;
}
/* The call to action inside the sentence — a shade lighter than the body of the
   line, underlined only on hover, so the bar reads as one sentence at rest and as
   a link the moment the pointer is on it. */
.promo-bar b { color: var(--ow-champagne-light); font-weight: 600; margin-left: 6px; white-space: nowrap; }
.promo-bar:hover b { text-decoration: underline; }
/* Keyboard users get the same affordance the pointer gets, plus a visible ring —
   the bar is the first tab stop on every public page. */
.promo-bar:focus-visible { outline: 2px solid var(--ow-champagne-light); outline-offset: -3px; }
.promo-bar:focus-visible b { text-decoration: underline; }

/* One sentence per viewport. The phone line is its own wording rather than a
   truncation of the desktop one, so neither version ever wraps into a third row.
   Its two halves — the offer, and the deadline carrying the arrow — are each
   unbreakable, so the row can only ever break between them: the arrow stays with
   the date it belongs to instead of being pushed onto a row of its own, which is
   what the single sentence did on a 412px phone. */
.promo-bar .promo-short { display: none; }
.promo-bar .promo-part { white-space: nowrap; }
@media (max-width: 640px) {
  .promo-bar .promo-long { display: none; }
  .promo-bar .promo-short { display: inline; }
  /* A shade tighter than the desktop line, and the right-hand clearance can shrink
     because the consent affordances are narrower here — together that is what buys
     the deadline and the arrow their place on the line down to the tablet sizes. */
  .promo-bar { padding-right: 24px; font-size: 12px; letter-spacing: 0.02em; }
  .promo-bar b { margin-left: 4px; }
}
/* Phone in portrait: the German sentence does not fit on one row at a legible size,
   so the two halves are stacked into two deliberate rows rather than left to the
   browser's line breaking, and the "·" that joined them on one row is dropped. The
   bar grows by exactly one line and says so in its height token further down this
   file, which is what the sticky section nav parks below. */
@media (max-width: 480px) {
  .promo-bar .promo-short {
    display: flex; flex-direction: column; align-items: center; line-height: 1.35;
  }
  .promo-bar .promo-sep { display: none; }
}

/* The landing page's own sticky section nav parks at the top of the same
   scrollport, so with the bar present it has to start below it instead of
   underneath it — and a section jumped to from that nav has to clear both.
   Scoped to "a `.lp` that follows the bar", which is exactly the signed-out
   public page: a signed-in page never renders the bar and keeps `top: 0`. */
.promo-bar ~ .lp .lp-sticky-nav { top: var(--ow-promo-bar-height); }
.promo-bar ~ .lp .lp-section { scroll-margin-top: calc(64px + var(--ow-promo-bar-height)); }

/* ─────────────────────────────────────────────────────────────────────────
   INTEREST SWITCH — "Wofür bist du hier?"
   A chip trio inside the evolution section, between the app comparison and the life
   cycle. Three states, and none of them is "off": "Das ganze Bild" (default) adds no
   root class and leaves the page exactly as it is, while the two sides turn on the
   emphasis layer below. The chosen chip wears the ink so the visitor can see at a
   glance that they set something, and the unchosen ones stay fully legible so taking
   it back is one click away.
   ───────────────────────────────────────────────────────────────────────── */
.lp .lp-interest {
  background: var(--ow-cream);
  border: 1px solid var(--ow-line);
  border-radius: 20px;
  padding: 22px 28px;
  margin: 48px 0 8px;
  scroll-margin-top: 76px;
}
/* `min-width: 0` on the rows: without it a chip row's intrinsic width would push the
   whole card — and with it the page — wider than the viewport on a phone. */
.lp .lp-interest-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; min-width: 0; }
.lp .lp-interest-inner > * { min-width: 0; max-width: 100%; }
.lp .lp-interest-q {
  font-size: var(--ow-eyebrow-size); text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 700; color: var(--ow-champagne-deep); flex-shrink: 0;
}
.lp .lp-interest-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lp .lp-interest-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
  padding: 9px 18px; border-radius: 999px;
  background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--own-fg-2);
  transition: background var(--own-dur-fast) var(--own-ease),
              border-color var(--own-dur-fast) var(--own-ease),
              color var(--own-dur-fast) var(--own-ease),
              box-shadow var(--own-dur-fast) var(--own-ease);
}
.lp .lp-interest-chip .material-symbols-outlined { font-size: 1.05rem; }
.lp .lp-interest-chip:hover { border-color: var(--ow-champagne); color: var(--ow-ink); }
.lp .lp-interest-chip.on {
  background: var(--ow-ink); border-color: var(--ow-ink); color: white;
  box-shadow: 0 6px 20px rgba(11,16,32,0.20);
}
.lp .lp-interest-chip.on .material-symbols-outlined { color: var(--ow-champagne); }
.lp .lp-interest-hint {
  font-size: 0.82rem; line-height: 1.45; color: var(--own-fg-2);
  max-width: 460px; margin-left: auto;
}
/* The life cycle right below the switch is the "Besitz & Sammlung" jump target. */
.lp .lp-flow { scroll-margin-top: 76px; }

/* ── EMPHASIS LAYER ──
   Driven by `lp-focus-own` / `lp-focus-fin` on `.lp`. Sections and cards carry
   `lp-aff-own` / `lp-aff-fin`; anything without one of those speaks to both sides and
   is never touched. The matching side is washed champagne, the other side is dimmed,
   pulled together and drops its chip rows — but stays on the page, keeps its links, and
   comes back to full strength on hover or keyboard focus. This is emphasis, not a filter. */
/* The tile selectors are repeated with the card class in front so this transition outranks
   the `transition: transform, box-shadow` that `.lp-uc` and `.nb` declare further down. */
.lp .lp-aff-own, .lp .lp-aff-fin,
.lp .lp-uc.lp-aff-own, .lp .lp-uc.lp-aff-fin,
.lp .nb.lp-aff-own, .lp .nb.lp-aff-fin {
  transition: opacity 320ms var(--own-ease), filter 320ms var(--own-ease),
              padding 320ms var(--own-ease), box-shadow 320ms var(--own-ease),
              transform var(--own-dur-base) var(--own-ease);
}

/* Relevant — a champagne wash off the top edge plus a hairline rule across it. Only
   `background-image` is set, so every section keeps the background colour it already had. */
.lp.lp-focus-own .lp-section.lp-aff-own,
.lp.lp-focus-fin .lp-section.lp-aff-fin {
  background-image: linear-gradient(180deg, rgba(201,169,106,0.16), rgba(201,169,106,0) 360px);
  box-shadow: inset 0 2px 0 0 var(--ow-champagne);
}
.lp.lp-focus-own .lp-uc.lp-aff-own,
.lp.lp-focus-fin .lp-uc.lp-aff-fin,
.lp.lp-focus-own .nb.lp-aff-own,
.lp.lp-focus-fin .nb.lp-aff-fin {
  border-color: var(--ow-champagne);
  box-shadow: 0 14px 40px rgba(201,169,106,0.22);
}

/* Stepped back — visible, just quieter. The `:not()` is what lets a section carry both
   affinities (shared spaces and the PDF export speak to either side): carrying the other
   side's class as well means it is never the one that steps back. */
.lp.lp-focus-own .lp-aff-fin:not(.lp-aff-own),
.lp.lp-focus-fin .lp-aff-own:not(.lp-aff-fin) { opacity: 0.45; filter: saturate(0.3); }
.lp.lp-focus-own .lp-aff-fin:not(.lp-aff-own):hover,
.lp.lp-focus-own .lp-aff-fin:not(.lp-aff-own):focus-within,
.lp.lp-focus-fin .lp-aff-own:not(.lp-aff-fin):hover,
.lp.lp-focus-fin .lp-aff-own:not(.lp-aff-fin):focus-within { opacity: 1; filter: none; }

/* Compact — the stepped-back sections give up most of their breathing room ... */
.lp.lp-focus-own .lp-section.lp-aff-fin:not(.lp-aff-own),
.lp.lp-focus-fin .lp-section.lp-aff-own:not(.lp-aff-fin) { padding: 48px 0; }
.lp.lp-focus-own .lp-section.lp-aff-fin:not(.lp-aff-own) .lp-section-head,
.lp.lp-focus-fin .lp-section.lp-aff-own:not(.lp-aff-fin) .lp-section-head { margin-bottom: 28px; }
.lp.lp-focus-own .lp-uc.lp-aff-fin:not(.lp-aff-own),
.lp.lp-focus-fin .lp-uc.lp-aff-own:not(.lp-aff-fin),
.lp.lp-focus-own .nb.lp-aff-fin:not(.lp-aff-own),
.lp.lp-focus-fin .nb.lp-aff-own:not(.lp-aff-fin) { padding: 20px 22px; min-height: 0; }

/* ... and drop their chip rows, which is where most of the fine detail sits. */
.lp.lp-focus-own .lp-aff-fin:not(.lp-aff-own) :is(.chips, .cc-uses, .cc-src, .cc-save, .sp-chips, .tl-attach,
                                                  .lp-con-chips, .lp-cap-flavors, .lp-cap-depth, .uc-meta, .nb-role, .nb-fine),
.lp.lp-focus-fin .lp-aff-own:not(.lp-aff-fin) :is(.chips, .cc-uses, .cc-src, .cc-save, .sp-chips, .tl-attach,
                                                  .lp-con-chips, .lp-cap-flavors, .lp-cap-depth, .uc-meta, .nb-role, .nb-fine) {
  display: none;
}

/* The use-case tiles the visitor came for move to the front of the grid. The loop tiles are
   already reordered in C# (see OrderedUseCases — the teaser only shows three, so the order has
   to be real, not just visual); the Döstädning feature card sits outside that loop, so it is
   the one that needs a CSS `order` to fall behind them. */
.lp.lp-focus-fin .lp-usecases-grid .lp-uc-feature.lp-aff-own:not(.lp-aff-fin) { order: 1; }

@media (prefers-reduced-motion: reduce) {
  .lp .lp-aff-own, .lp .lp-aff-fin,
  .lp .lp-uc.lp-aff-own, .lp .lp-uc.lp-aff-fin,
  .lp .nb.lp-aff-own, .lp .nb.lp-aff-fin { transition: none; }
}

/* ── OCCASION FOLDING ──
   On an occasion sub-view (?anlass=…) the use-case tiles and the "Zahlen aus dem Gesetz" cards
   are all on the page, but only the ones the occasion is about are open. Home.razor puts
   `lp-fold` on a card that is not about the occasion and `is-folded` while it is collapsed:
   folded, the card keeps its title line (kicker + heading, or category + figure), steps back in
   grey and opens on a click anywhere on it; open, it reads like any other card and only the
   chevron closes it again. Unlike the emphasis layer above this never touches a relevant card
   and never applies on the full view, where no occasion is active. */
.lp .lp-fold-body { display: contents; }
.lp .lp-uc.lp-fold, .lp .nb.lp-fold { align-self: start; }
.lp .lp-uc.is-folded, .lp .nb.is-folded {
  opacity: 0.55; filter: saturate(0.25);
  background: var(--ow-cream); min-height: 0; cursor: pointer;
}
.lp .lp-uc.is-folded { padding: 20px 22px 18px; }
.lp .nb.is-folded { padding: 20px 22px 18px; }
.lp .lp-uc.is-folded:hover, .lp .nb.is-folded:hover { opacity: 0.85; filter: saturate(0.6); }
.lp .is-folded .lp-fold-body { display: none; }
.lp .lp-uc.is-folded .uc-flourish { display: none; }
.lp .lp-uc.is-folded h3 { margin-bottom: 0; font-size: 1.15rem; }
.lp .lp-uc.is-folded .uc-kicker { margin-bottom: 10px; }
.lp .nb.is-folded .nb-cat { margin-bottom: 10px; }
.lp .nb.is-folded .nb-fig { font-size: 1.6rem; }
.lp .nb.is-folded .nb-fig .sub { margin-top: 4px; }
/* An open non-relevant card stays recognisable as a guest: a dashed hairline instead of the rule. */
.lp .lp-uc.lp-fold:not(.is-folded), .lp .nb.lp-fold:not(.is-folded) { border-style: dashed; }
/* The title line makes room for the chevron: the kicker and the category become full-width rows. */
.lp .lp-fold .uc-kicker { display: flex; }
.lp .lp-fold .nb-cat { display: flex; align-items: center; gap: 8px; }
.lp .lp-fold-btn {
  margin-left: auto; width: 26px; height: 26px; flex-shrink: 0; padding: 0;
  border-radius: 8px; border: 1px solid var(--ow-line); background: var(--ow-paper);
  color: var(--own-fg-3); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; letter-spacing: 0; text-transform: none;
}
.lp .lp-fold-btn:hover { color: var(--ow-ink); border-color: var(--ow-champagne); }
.lp .lp-fold-btn .material-symbols-outlined { font-size: 1.1rem; transition: transform var(--own-dur-base) var(--own-ease); }
.lp .lp-fold:not(.is-folded) .lp-fold-btn .material-symbols-outlined { transform: rotate(180deg); }
.lp .lp-uc.lp-uc-feature .lp-fold-btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }
.lp .lp-uc.lp-uc-feature .lp-fold-btn:hover { color: white; border-color: var(--ow-champagne); }
/* The Döstädning feature card sits outside the tile loop, so when it is not the occasion's it
   falls behind the tiles by `order` and gives up its double column while folded. */
.lp .lp-usecases-grid .lp-uc-feature.lp-fold { order: 1; }
.lp .lp-usecases-grid .lp-uc-feature.is-folded { grid-column: auto; }
@media (prefers-reduced-motion: reduce) {
  .lp .lp-fold-btn .material-symbols-outlined { transition: none; }
}

/* ── BUTTONS ── */
.lp .lp-btn {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 0.95rem; border-radius: 999px;
  padding: 12px 22px; text-decoration: none; white-space: nowrap;
  transition: transform var(--own-dur-base) var(--own-ease),
              box-shadow var(--own-dur-base) var(--own-ease),
              background var(--own-dur-base) var(--own-ease);
}
.lp .lp-btn .material-symbols-outlined { font-size: 1.05rem; }
.lp .lp-btn-primary { background: var(--own-gradient-primary); color: white; box-shadow: 0 4px 24px rgba(99,102,241,0.35); }
.lp .lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(99,102,241,0.55); }
/* A button whose form is not ready yet (e.g. the registration gate in js/register-form.js): it
   must not lift on hover or invite a click that goes nowhere. */
.lp .lp-btn:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; }
.lp .lp-btn:disabled:hover { transform: none; box-shadow: none; }
.lp .lp-btn-ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: white; }
.lp .lp-btn-ghost:hover { background: rgba(255,255,255,0.12); }
.lp .lp-btn-dark { background: var(--ow-ink); color: white; }
.lp .lp-btn-dark:hover { background: var(--ow-ink-2); transform: translateY(-2px); }
.lp .lp-btn-cream { background: var(--ow-paper); color: var(--ow-ink); border: 1px solid var(--ow-line); }
.lp .lp-btn-cream:hover { background: var(--ow-cream-deep); }
/* Text-only button: no background or border, used for the anchor links that carry a section
   flow forward (see .fn-cta in the pricing feature flow). */
.lp .lp-btn-text { background: transparent; border: none; color: rgba(255,255,255,0.82); box-shadow: none; }
.lp .lp-btn-text:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* PWA install promotion: hidden until pwaInstall.js marks the app installable
   by adding `pwa-installable` to <html> (see js/pwaInstall.js). */
.lp .lp-pwa-install { display: none; margin-top: 18px; }
html.pwa-installable .lp .lp-pwa-install { display: flex; }
/* When the install button sits inside the hero CTA row it should align with the other
   buttons rather than carry the standalone top margin. */
.lp .lp-hero-ctas .lp-pwa-install { margin-top: 0; }

/* ── PWA install walkthrough (iOS) ──────────────────────────────────────────────────────
   The sheet behind the install button on iPhone/iPad, where WebKit fires no install prompt
   and the only route onto the home screen is Safari's share menu. Rendered once per page by
   PwaInstallSheet.razor and opened by js/pwaInstall.js, so it lives outside every feature
   namespace and styles itself from the theme tokens directly. */
.pwa-install-sheet {
  border: 1px solid var(--ow-line, #e6e1d7);
  border-radius: 18px;
  padding: 0;
  max-width: 420px;
  width: calc(100% - 32px);
  background: var(--ow-paper, #fffdf8);
  color: var(--ow-ink, #0b1020);
  box-shadow: 0 24px 60px rgba(11,16,32,0.28);
}
.pwa-install-sheet::backdrop { background: rgba(11,16,32,0.52); }
.pwa-install-sheet__body { position: relative; padding: 26px 24px 22px; }
.pwa-install-sheet__close {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--ow-ink, #0b1020); cursor: pointer;
}
.pwa-install-sheet__close:hover { background: var(--ow-cream, #f6f1e7); }
.pwa-install-sheet__eyebrow {
  margin: 0 0 6px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ow-champagne-deep, #a8873f);
}
.pwa-install-sheet__title {
  margin: 0 0 10px; font-family: var(--ow-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.6rem; line-height: 1.2;
}
.pwa-install-sheet__lead { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.5; }
/* The numbering is carried by the icons and the counter below, so the list marker is dropped. */
.pwa-install-sheet__steps { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: pwa-step; }
.pwa-install-sheet__steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--ow-line, #e6e1d7); border-radius: 12px;
  background: var(--ow-cream, #f6f1e7);
  font-size: 0.93rem; line-height: 1.45;
}
.pwa-install-sheet__steps li .material-symbols-outlined {
  flex: 0 0 auto; color: var(--ow-champagne-deep, #a8873f); font-size: 22px;
}
.pwa-install-sheet__note { margin: 0 0 18px; font-size: 0.82rem; opacity: 0.7; line-height: 1.45; }
.pwa-install-sheet__ok {
  display: block; width: 100%; padding: 11px 16px;
  border: 1px solid var(--ow-line, #e6e1d7); border-radius: 999px;
  background: var(--ow-ink, #0b1020); color: #fff;
  font-size: 0.95rem; cursor: pointer;
}
.pwa-install-sheet__ok:hover { background: var(--ow-ink-2, #161d38); }

/* ── HERO ── */
.lp .lp-hero {
  position: relative; color: white; padding: 140px 0 96px;
  /* Clipped sideways, open downwards. The portfolio cards are absolutely positioned and would
     widen the page if they were let out, which is what the plain `overflow: hidden` here was for —
     but the occasion menu below opens past the hero's bottom edge on a desktop viewport, and
     `hidden` cut its last two entries off. `clip visible` keeps the horizontal containment and
     drops the vertical one; an engine that does not know `clip` ignores the second declaration and
     keeps the old behaviour. */
  overflow: hidden;
  overflow: clip visible;
  background:
    radial-gradient(1100px 600px at 75% -10%, rgba(124,58,237,0.28), transparent 60%),
    radial-gradient(900px 700px at 12% 90%, rgba(67,56,202,0.32), transparent 55%),
    linear-gradient(180deg, #07091a 0%, #0b1020 55%, #0b1020 100%);
}
.lp .lp-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.lp .lp-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; }
.lp .lp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(201, 169, 106, 0.10); border: 1px solid rgba(201, 169, 106, 0.35);
  color: var(--ow-champagne); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; padding: 8px 16px; border-radius: 999px; margin-bottom: 28px;
}
.lp .lp-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ow-champagne); box-shadow: 0 0 12px var(--ow-champagne); }
.lp .lp-hero h1 {
  font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 24px; color: white;
}
.lp .lp-hero h1 em { font-style: italic; color: var(--ow-champagne); font-weight: 400; }
.lp .lp-hero .lp-lede { font-size: 1.15rem; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 0 32px; font-weight: 400; }
.lp .lp-hero .lp-lede strong { color: #fff; font-weight: 700; }

/* Hero occasion menu ("Ich will …"). The six occasion pages phrased as the visitor would say them,
   between the lede and the primary CTA: whoever already knows what they came for skips straight to
   their page, everybody else reads on to the chooser section, which keeps the long form.

   This was a row of six pills. The six labels differ by a factor of three in length ("nichts mehr
   suchen" against "Haus, Finanzen und Kredit in einer Zahl sehen"), so the row wrapped into a
   ragged block that took the first look away from the H1 and changed shape at every width. One
   control does not: the label stays inline, "Ich will … [einen Anlass wählen]" reads as a sentence
   the visitor finishes, and the six entries get the room to carry their quoted line — the same one
   the chooser cards carry further down.

   Two grounds, as everywhere on the landing page: the closed control is a white wash on the dark
   hero, the open menu is the cream panel the chooser cards sit on, so the menu reads as the page's
   own surface arriving rather than as a browser widget. */
.lp .lp-hero-want {
  max-width: 640px; margin: 0 0 34px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.lp .lp-hero-want-label {
  font-family: var(--ow-serif); font-style: italic; font-size: 1.3rem; color: var(--ow-champagne);
}

/* Takes whatever the label leaves and drops to its own row when that is under ~340px, which is
   where the longest entry stops fitting on one line. Positions the menu. */
.lp .lp-hero-want-select { position: relative; flex: 1 1 340px; min-width: 0; max-width: 460px; }

.lp .lp-hero-want-trigger {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font: inherit; font-size: 1.02rem; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lp .lp-hero-want-trigger:hover { background: rgba(255,255,255,0.09); border-color: rgba(201,169,106,0.5); }
.lp .lp-hero-want-trigger:focus-visible { outline: none; border-color: var(--ow-champagne); box-shadow: 0 0 0 4px rgba(201,169,106,0.2); }
.lp .lp-hero-want-trigger .ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(201,169,106,0.14); border: 1px solid rgba(201,169,106,0.32); color: var(--ow-champagne);
}
.lp .lp-hero-want-trigger .ico .material-symbols-outlined { font-size: 21px; }
/* Always the placeholder wording, never a chosen occasion: choosing one leaves for that occasion's
   page, which renders its own hero instead of this one. So it is styled as the placeholder it is. */
.lp .lp-hero-want-trigger .lbl {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; color: rgba(255,255,255,0.62);
}
.lp .lp-hero-want-trigger .chev {
  flex: none; font-size: 22px; color: rgba(255,255,255,0.55);
  transition: transform .26s cubic-bezier(.22,1,.36,1);
}
.lp .lp-hero-want-select.open .lp-hero-want-trigger { background: rgba(255,255,255,0.09); border-color: var(--ow-champagne); }
.lp .lp-hero-want-select.open .lp-hero-want-trigger .chev { transform: rotate(180deg); }

/* Hidden with visibility, not display or a @if: the six entries are the hero's internal links to
   the occasion pages and have to stay in the markup for a crawler to follow. visibility:hidden also
   takes them out of the tab order while closed, so keyboard focus never lands in a menu nobody
   can see. */
.lp .lp-hero-want-menu {
  /* Above the full view's sticky chapter bar (z-index 30), which starts right where the open menu
     ends up on a desktop viewport — the hero cannot hold it, see .lp-hero. */
  position: absolute; z-index: 40; top: calc(100% + 10px); left: 0; right: 0;
  background: var(--ow-cream); color: var(--ow-ink);
  border: 1px solid rgba(11,16,32,0.10); border-radius: 18px;
  box-shadow: 0 34px 80px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.4) inset;
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.985); transform-origin: top center;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility .22s;
}
.lp .lp-hero-want-select.open .lp-hero-want-menu { opacity: 1; visibility: visible; transform: none; }
.lp .lp-hero-want-menu .menu-k {
  display: block; padding: 10px 14px 8px; font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700; color: var(--ow-champagne-deep);
}

.lp .lp-hero-want-opt {
  display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 13px;
  color: var(--ow-ink); text-decoration: none; transition: background .16s ease;
}
.lp .lp-hero-want-opt + .lp-hero-want-opt { margin-top: 2px; }
.lp .lp-hero-want-opt .oi {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ow-cream-deep); color: var(--ow-champagne-deep);
}
.lp .lp-hero-want-opt .oi .material-symbols-outlined { font-size: 19px; }
.lp .lp-hero-want-opt .ot { flex: 1; min-width: 0; }
.lp .lp-hero-want-opt .ot b { display: block; font-size: 0.99rem; font-weight: 600; line-height: 1.3; }
.lp .lp-hero-want-opt .ot small {
  display: block; font-family: var(--ow-serif); font-style: italic; font-size: 0.94rem;
  color: rgba(11,16,32,0.58); margin-top: 1px;
}
/* The design marks the picked entry with a check. Nothing is picked here — the entry is a link —
   so the same slot holds the arrow the chooser cards use, revealed on the entry under the pointer
   or the keyboard. */
.lp .lp-hero-want-opt .ok {
  flex: none; font-size: 19px; color: var(--ow-champagne-deep); opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.lp .lp-hero-want-opt:hover, .lp .lp-hero-want-opt:focus-visible { background: var(--ow-cream-deep); outline: none; }
.lp .lp-hero-want-opt:hover .ok, .lp .lp-hero-want-opt:focus-visible .ok { opacity: 1; transform: translateX(2px); }

.lp .lp-hero-want-menu .menu-foot { margin: 6px 4px 2px; padding-top: 8px; border-top: 1px solid rgba(11,16,32,0.10); }
.lp .lp-hero-want-all {
  display: flex; align-items: center; gap: 10px; padding: 10px 9px; border-radius: 12px;
  font-size: 0.9rem; font-weight: 600; color: rgba(11,16,32,0.72); text-decoration: none;
  transition: background .16s ease;
}
.lp .lp-hero-want-all:hover { background: var(--ow-cream-deep); }
.lp .lp-hero-want-all .material-symbols-outlined { font-size: 19px; color: var(--ow-champagne-deep); }

/* Catches the click that closes the menu: over the page — both navigation bars included, so the
   first click anywhere closes the menu and nothing else — and under the menu itself. */
.lp .lp-hero-want-backdrop { position: fixed; inset: 0; z-index: 35; background: transparent; }

/* Label above the control below the breakpoint: at a phone's width the two side by side leave the
   control about half a line wide, and the entries inside it are longer than that. */
@media (max-width: 720px) {
  .lp .lp-hero-want { flex-direction: column; align-items: stretch; gap: 10px; }
  .lp .lp-hero-want-select { flex: 1 1 auto; max-width: none; }
}

.lp .lp-hero-ctas { display: flex; gap: 14px; margin-bottom: 44px; flex-wrap: wrap; }
.lp .lp-hero-trust { display: flex; flex-wrap: wrap; gap: 22px 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.10); }
.lp .lp-hero-trust .lp-trust-pill { display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.78); font-weight: 500; }
.lp .lp-hero-trust .lp-trust-pill .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-champagne); }

/* Hero right */
.lp .lp-hero-right { position: relative; min-height: 540px; }
.lp .lp-portfolio-card {
  position: absolute; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 22px; padding: 22px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 14px;
}
.lp .lp-portfolio-main { top: -64px; left: 0; width: 86%; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); }
.lp .lp-portfolio-main .pf-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.55); font-weight: 600; }
.lp .lp-portfolio-main .pf-head .live { display: inline-flex; align-items: center; gap: 6px; color: var(--ow-champagne); }
.lp .lp-portfolio-main .pf-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ow-champagne); box-shadow: 0 0 10px var(--ow-champagne); animation: lpPulse 2s var(--own-ease) infinite; }
@keyframes lpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } }
.lp .lp-portfolio-main .pf-total { font-family: var(--ow-serif); font-size: 2.8rem; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: white; }
.lp .lp-portfolio-main .pf-total small { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.55); margin-left: 4px; }
.lp .lp-portfolio-main .pf-delta { font-size: 0.85rem; color: #4ade80; font-weight: 600; }
.lp .pf-rows { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.10); }
.lp .pf-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; font-size: 0.88rem; }
.lp .pf-row .ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp .pf-row .ico img { width: 30px; height: 30px; object-fit: contain; }
.lp .pf-row .lbl { color: rgba(255,255,255,0.9); font-weight: 500; }
.lp .pf-row .lbl small { display: block; color: rgba(255,255,255,0.45); font-weight: 400; font-size: 0.78rem; margin-top: 2px; }
.lp .pf-row .val { color: white; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp .pf-row.pf-debt { margin-top: 2px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.10); }
.lp .pf-row.pf-debt .ico { background: rgba(248,113,113,0.14); }
.lp .pf-row.pf-debt .ico .material-symbols-outlined { font-size: 20px; color: #f87171; }
.lp .pf-row.pf-debt .lbl, .lp .pf-row.pf-debt .val { color: #f87171; }
.lp .pf-row.pf-networth { margin-top: 2px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.10); }
.lp .pf-row.pf-networth .ico { background: rgba(74,222,128,0.14); }
.lp .pf-row.pf-networth .ico .material-symbols-outlined { font-size: 20px; color: #4ade80; }
.lp .pf-row.pf-networth .lbl, .lp .pf-row.pf-networth .val { color: #4ade80; font-weight: 700; }

/* ── Hero cashflow (income / expenses this month) ── */
.lp .pf-cashflow { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.10); }
.lp .pf-flow { display: flex; flex-direction: column; gap: 8px; }
.lp .pf-flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp .pf-flow-lbl { color: rgba(255,255,255,0.9); font-weight: 500; font-size: 0.88rem; }
.lp .pf-flow-lbl small { display: block; color: rgba(255,255,255,0.45); font-weight: 400; font-size: 0.74rem; margin-top: 2px; }
.lp .pf-flow-val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; white-space: nowrap; }
.lp .pf-flow-pos { color: #4ade80; }
.lp .pf-flow-neg { color: #f87171; }
.lp .pf-flow-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.lp .pf-cat { font-size: 0.72rem; font-weight: 500; line-height: 1; padding: 5px 9px; border-radius: 999px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.lp .pf-flow-in .pf-cat { color: #b7f3cf; background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.20); }
.lp .pf-flow-out .pf-cat { color: #f9c3c3; background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.20); }

.lp .lp-owny-intro {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-top: 40px;
    background: var(--ow-cream);
    color: var(--ow-ink);
    border-radius: 22px;
    padding: 18px 22px 18px 110px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.40);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
    .lp .lp-owny-intro .owny-avatar {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        width: 78px;
        height: 78px;
        border-radius: 50%;
        background: var(--own-gradient-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 32px rgba(67,56,202,0.5);
        overflow: hidden;
    }
.lp .lp-owny-intro .owny-avatar img { width: 88%; height: 88%; object-fit: contain; }
.lp .lp-owny-intro .o-name { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ow-champagne-deep); font-weight: 700; }
.lp .lp-owny-intro .o-name .badge { background: var(--ow-champagne); color: white; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; }
.lp .lp-owny-intro .o-msg { font-family: var(--ow-serif); font-size: 1.05rem; font-weight: 500; line-height: 1.3; color: var(--ow-ink); }

/* ── KICKER STRIP ── */
.lp .lp-kicker-strip { background: var(--ow-ink); color: rgba(255,255,255,0.55); padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.lp .lp-kicker-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.lp .lp-kicker-strip .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.4); font-weight: 600; }
.lp .lp-kicker-strip .badges { display: flex; gap: 32px; flex-wrap: wrap; }
.lp .lp-kicker-strip .badge { display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.78); font-weight: 500; }
.lp .lp-kicker-strip .badge .material-symbols-outlined { color: var(--ow-champagne); font-size: 1.1rem; }

/* ── SECTION SHELL ── */
.lp .lp-section { padding: 120px 0; position: relative; }
.lp .lp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 64px; flex-wrap: wrap; }
.lp .lp-section-head .lhs { max-width: 560px; }
.lp .lp-section-head h1,
.lp .lp-section-head h2 { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-h2-size); line-height: 1.1; letter-spacing: -0.02em; margin: 16px 0 0; color: var(--own-fg-1); }
.lp .lp-section-head h1 em,
.lp .lp-section-head h2 em { font-style: italic; color: var(--own-primary); font-weight: 500; }
.lp .lp-section-head .rhs { max-width: 380px; color: var(--own-fg-2); font-size: var(--ow-lede-size); line-height: 1.65; padding-bottom: 4px; }

/* ── OWNY KNOWS ── */
.lp .lp-owny-section { background: var(--ow-paper); position: relative; overflow: hidden; }
.lp .lp-owny-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 400px at 80% 10%, rgba(124,58,237,0.07), transparent 60%), radial-gradient(600px 400px at 10% 90%, rgba(201,169,106,0.08), transparent 60%); }
.lp .lp-owny-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; position: relative; }
/* The column stacks: the orb with the notes it throws off, then the chat still. Both blocks are
   centred and width-capped, so the floating bubbles stay next to the orb on every viewport instead
   of drifting to the edge of a full-width column. */
.lp .lp-owny-mascot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 8px 0; text-align: center; }
.lp .owny-stage { position: relative; width: 100%; max-width: 540px; min-height: clamp(260px, 28vw, 340px); display: flex; align-items: center; justify-content: center; }
.lp .lp-owny-mascot .orb { width: clamp(180px, 24vw, 260px); height: clamp(180px, 24vw, 260px); border-radius: 50%; background: var(--own-gradient-primary); box-shadow: 0 30px 80px rgba(67,56,202,0.35); display: flex; align-items: center; justify-content: center; position: relative; animation: lpOrbFloat 6s ease-in-out infinite; }
@keyframes lpOrbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.lp .lp-owny-mascot .orb img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.2)); }

/* The notes OWNY throws off, floating around the orb inside the stage. */
.lp .know-bubble { position: absolute; background: white; border: 1px solid var(--ow-line); border-radius: 16px; padding: 12px 14px; box-shadow: 0 12px 28px rgba(11, 16, 32, 0.10); font-size: 0.86rem; line-height: 1.35; color: var(--ow-ink); max-width: min(200px, 44%); text-align: left; animation: lpFloatBubble 5s ease-in-out infinite; }
.lp .know-bubble .bb-meta { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ow-champagne-deep); font-weight: 700; margin-bottom: 4px; }
.lp .know-bubble .bb-meta .material-symbols-outlined { font-size: 0.9rem; }
.lp .know-bubble .bb-body b { color: var(--own-primary); }
/* Anchored in the stage's four corners, where the round orb leaves the most room. */
.lp .know-bubble.bb-1 { top: 0;     left: 0;    animation-delay: 0s; }
.lp .know-bubble.bb-2 { top: 8%;    right: 0;   animation-delay: 1.2s; }
.lp .know-bubble.bb-3 { bottom: 8%; left: 0;    animation-delay: 2.4s; }
.lp .know-bubble.bb-4 { bottom: 0;  right: 0;   animation-delay: 3.6s; }
@keyframes lpFloatBubble { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

/* ── OWNY chat still ──────────────────────────────────────────────────────────
   A frozen frame of the signed-in assistant (Pages/AiAssistant/OwnyAiChat.razor + its
   panel chrome): dark header, message rows with avatars, composer at the bottom. The
   styles are re-declared here because the real chat's are CSS-isolated to its component. */
.lp .owny-chat-mock { width: 100%; max-width: 420px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(11,16,32,0.18); overflow: hidden; text-align: left; }
.lp .ocm-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ow-ink); color: #fff; }
.lp .ocm-head-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--own-gradient-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp .ocm-head-avatar img { width: 88%; height: 88%; object-fit: contain; }
.lp .ocm-head-copy { display: flex; flex-direction: column; min-width: 0; }
.lp .ocm-head-title { font-family: var(--ow-serif); font-weight: 500; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em; }
.lp .ocm-head-sub { font-size: 0.72rem; line-height: 1.3; color: var(--ow-champagne); }
.lp .ocm-head-state { margin-left: auto; display: flex; align-items: center; }
.lp .ocm-head-state .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--own-success); box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.lp .ocm-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; }
.lp .ocm-msg { display: flex; align-items: flex-start; gap: 10px; }
.lp .ocm-msg-user { flex-direction: row-reverse; }
.lp .ocm-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp .ocm-avatar-ai { background: var(--own-gradient-primary); box-shadow: 0 6px 16px rgba(67,56,202,0.25); }
.lp .ocm-avatar-ai img { width: 86%; height: 86%; object-fit: contain; }
.lp .ocm-avatar-user { background: var(--ow-ink); color: var(--ow-champagne); }
.lp .ocm-avatar-user .material-symbols-outlined { font-size: 1.15rem; }
.lp .ocm-bubble { max-width: calc(100% - 44px); padding: 10px 14px; font-size: 0.9rem; line-height: 1.55; }
.lp .ocm-msg-ai .ocm-bubble { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px 16px 16px 4px; color: var(--ow-ink); }
.lp .ocm-msg-user .ocm-bubble { background: var(--ow-ink); color: #fff; border-radius: 16px 16px 4px 16px; }
.lp .ocm-cursor { margin-left: 2px; color: var(--ow-champagne-deep); animation: lpOcmBlink 1s steps(2, start) infinite; }
@keyframes lpOcmBlink { to { visibility: hidden; } }
.lp .ocm-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ow-line); background: var(--ow-paper); }
.lp .ocm-field { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 14px; border: 1px solid var(--ow-line); background: var(--ow-cream); color: var(--own-fg-3); font-size: 0.9rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp .ocm-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; background: var(--ow-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lp .ocm-send .material-symbols-outlined { font-size: 1.2rem; }

/* Everything moving in this section is decoration — the orb's drift, the floating notes and the
   answer's typing caret all stand still when the visitor asks for less motion. */
@media (prefers-reduced-motion: reduce) {
    .lp .lp-owny-mascot .orb,
    .lp .know-bubble,
    .lp .ocm-cursor { animation: none; }
}
.lp .lp-owny-copy h2 em { font-style: italic; color: var(--own-primary); }
.lp .know-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp .know-list li { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 14px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }
.lp .know-list .k-ico { width: 36px; height: 36px; border-radius: 10px; background: white; border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; color: var(--own-primary); flex-shrink: 0; }
.lp .know-list .k-title { font-weight: 700; color: var(--ow-ink); margin: 0 0 2px; font-size: 0.98rem; }
.lp .know-list .k-sub { font-size: 0.86rem; color: var(--own-fg-2); line-height: 1.45; margin: 0; }
.lp .owny-note { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; }

/* ── TRY IT NOW ── */
.lp .lp-testscan { background: var(--ow-blush); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }
.lp .lp-testscan-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 72px; align-items: center; }
.lp .lp-testscan-h2 { font-size: var(--ow-h2-size); margin: 16px 0 0; line-height: 1.1; color: var(--own-fg-1); }
.lp .lp-testscan-copy h2 em { color: var(--own-primary); font-style: italic; }
.lp .lp-testscan-copy .lp-lede { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 22px 0 28px; }
.lp .lp-testscan-tips { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.lp .lp-testscan-tips .tip { display: flex; gap: 14px; align-items: flex-start; font-size: 0.95rem; color: var(--own-fg-1); line-height: 1.5; }
.lp .lp-testscan-tips .tip .material-symbols-outlined { color: var(--own-primary); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.lp .lp-testscan-note { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--ow-line); border-radius: 14px; padding: 14px 18px; font-size: 0.88rem; color: var(--own-fg-2); }
.lp .lp-testscan-note .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp .lp-testscan-note strong { color: var(--ow-ink); }

/* Blog cross-link ("Aus dem Blog"): the small card a landing section shows when a blog post
   explains at length what the section only demonstrates (LandingBlogNote). Same shell as the demo
   note above, but it is a link — hence the hover lift — with a kicker, the post's title and a
   read-more line stacked inside. Capped in width so it stays a note in a full-width section. */
.lp .lp-blog-note { margin-top: 18px; max-width: 720px; display: flex; gap: 12px; align-items: flex-start; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 14px; padding: 14px 18px; color: var(--own-fg-2); text-decoration: none; transition: transform var(--own-dur-base) var(--own-ease), box-shadow var(--own-dur-base) var(--own-ease), border-color var(--own-dur-base) var(--own-ease); }
.lp .lp-blog-note:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11,16,32,0.08); border-color: var(--ow-champagne); }
.lp .lp-blog-note > .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.lp .lp-blog-note-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp .lp-blog-note-kicker { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne-deep); }
.lp .lp-blog-note-title { font-family: var(--ow-serif); font-size: 1.02rem; line-height: 1.35; color: var(--ow-ink); text-wrap: pretty; }
.lp .lp-blog-note-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-blog-note-more .material-symbols-outlined { font-size: 1rem; transition: transform var(--own-dur-base) var(--own-ease); }
.lp .lp-blog-note:hover .lp-blog-note-more .material-symbols-outlined { transform: translateX(3px); }
/* The stance copy already spaces its children with a flex gap, so the note needs no margin of its own there. */
.lp .lp-stance-copy .lp-blog-note { margin-top: 0; }

/* ── USE CASES ── */
.lp .lp-usecases { background: var(--ow-paper); }
.lp .lp-usecases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp .lp-uc { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 18px; padding: 28px 28px 26px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 240px; transition: transform var(--own-dur-base) var(--own-ease), box-shadow var(--own-dur-base) var(--own-ease); }
.lp .lp-uc:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(11,16,32,0.10); }
.lp .lp-uc.lp-uc-feature { background: var(--ow-ink); color: white; border-color: var(--ow-champagne); grid-column: span 2; }
.lp .lp-uc.lp-uc-feature .uc-kicker { color: var(--ow-champagne); }
.lp .lp-uc.lp-uc-feature h3 { color: white; }
.lp .lp-uc.lp-uc-feature p { color: rgba(255,255,255,0.75); }
.lp .lp-uc.lp-uc-feature .uc-meta { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.65); }
.lp .lp-uc.lp-uc-feature .uc-meta strong { color: white; }
.lp .lp-uc .uc-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne-deep); margin-bottom: 14px; }
.lp .lp-uc .uc-kicker .material-symbols-outlined { font-size: 1rem; }
.lp .lp-uc h3 { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size); line-height: 1.15; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 10px; }
.lp .lp-uc h3 em { font-style: italic; color: var(--ow-champagne-deep); font-weight: 500; }
.lp .lp-uc.lp-uc-feature h3 em { color: var(--ow-champagne); }
.lp .lp-uc p { font-size: 0.94rem; line-height: 1.55; color: var(--own-fg-2); margin: 0; text-wrap: pretty; flex: 1; }
.lp .lp-uc .uc-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ow-line); display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--own-fg-2); }
.lp .lp-uc .uc-meta strong { color: var(--ow-ink); font-weight: 700; }
.lp .lp-uc.lp-uc-feature .uc-flourish { position: absolute; bottom: -40px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(201,169,106,0.25), transparent 65%); pointer-events: none; }
/* Reveals the use cases held back behind the three teaser tiles. */
.lp .lp-uc-more { display: flex; justify-content: center; margin-top: 24px; }

/* ── PRIVACY ── */
.lp .lp-privacy { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }
.lp .lp-privacy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 500px at 20% 20%, rgba(36, 92, 82, 0.20), transparent 60%); }
.lp .lp-privacy .lp-section-head h2 { color: white; }
.lp .lp-privacy .lp-section-head h2 em { color: var(--ow-champagne); font-style: italic; }
.lp .lp-privacy .lp-section-head .rhs { color: rgba(255,255,255,0.7); }
.lp .lp-privacy .lp-eyebrow { color: var(--ow-champagne); }
.lp .lp-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.lp .lp-pillar { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 28px; }
.lp .lp-pillar .p-glyph { width: 44px; height: 44px; border-radius: 50%; background: rgba(201, 169, 106, 0.12); border: 1px solid rgba(201, 169, 106, 0.35); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; color: var(--ow-champagne); }
.lp .lp-pillar h4 { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size); line-height: 1.2; margin: 0 0 12px; color: white; letter-spacing: -0.01em; }
.lp .lp-pillar p { font-size: 0.92rem; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0; }
.lp .lp-privacy-foot { margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 0.92rem; color: rgba(255,255,255,0.65); flex-wrap: wrap; }
.lp .lp-privacy-foot strong { font-family: var(--ow-serif); font-weight: 500; font-size: 1.15rem; color: white; display: block; margin-bottom: 4px; }

/* ── CONNECTIONS ── */
.lp .lp-connections { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }
.lp .lp-connections-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.lp .lp-connections-visual { background: white; border: 1px solid var(--ow-line); border-radius: 18px; padding: 22px; display: flex; align-items: center; justify-content: center; min-height: 400px; box-shadow: 0 18px 48px rgba(11, 16, 32, 0.08); }
.lp .lp-connections-visual > img { width: 100%; max-height: 380px; object-fit: contain; }

/* ── FLOATING NODE GRAPH (replaces the static dependency-graph PNG) ── */
.lp .cg-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: 14px; }
.lp .cg-wrap::-webkit-scrollbar { height: 6px; }
.lp .cg-wrap::-webkit-scrollbar-thumb { background: var(--ow-cream-deep); border-radius: 999px; }
.lp .cg-stage {
  --cg-line: rgba(67, 56, 202, 0.28);
  --cg-flow: rgba(201, 169, 106, 0.9);
  position: relative;
  container-type: inline-size;
  width: 100%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 58, 237, 0.06), transparent 60%),
    radial-gradient(90% 80% at 50% 100%, rgba(201, 169, 106, 0.08), transparent 60%);
  border-radius: 14px;
}
/* Broad horizontal tree keeps a floor width so cards never crush together on
   tablet; the compact vertical tree is phone-only and fluid. */
.lp .cg-wide { min-width: 460px; }
.lp .cg-narrow { display: none; }
@media (max-width: 560px) {
  .lp .cg-wide { display: none; }
  .lp .cg-narrow { display: block; }
}

/* connector layer sits behind the cards */
.lp .cg-edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.lp .cg-edge { fill: none; stroke: var(--cg-line); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lp .cg-edge-flow {
  fill: none; stroke: var(--cg-flow); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 3 170; opacity: 0.85;
  animation: cgFlow 3.6s linear infinite;
}
@keyframes cgFlow { to { stroke-dashoffset: -173; } }

/* node cards */
.lp .cg-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.lp .cg-node-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.9cqw;
  animation: cgFloat 7s ease-in-out infinite;
  transition: transform var(--own-dur-base) var(--own-ease);
  will-change: transform;
}
@keyframes cgFloat { 0%, 100% { transform: translateY(-0.7cqw); } 50% { transform: translateY(0.7cqw); } }

.lp .cg-thumb {
  display: block; width: 9.5cqw; aspect-ratio: 3 / 2; border-radius: 2.2cqw;
  overflow: hidden; background: var(--ow-cream);
  border: 1px solid var(--ow-line);
  box-shadow: 0 1.2cqw 2.4cqw rgba(11, 16, 32, 0.12);
}
.lp .cg-stage .cg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Labels stay narrower than the German compounds they carry ("Gebäudeversicherung",
   "Siebträgermaschine"), so those wrap at the soft hyphen the resource string
   provides instead of breaking a letter off the end. */
.lp .cg-label {
  font-size: 1.4cqw; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ow-ink); text-align: center; line-height: 1.15; max-width: 13.5cqw;
  overflow-wrap: break-word; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* A tagged card has to leave the room to its right to the tag. */
.lp .cg-has-qr .cg-label { max-width: 12.2cqw; }

.lp .cg-node-root .cg-thumb { width: 11.5cqw; border-radius: 2.6cqw; box-shadow: 0 1.6cqw 3.2cqw rgba(67, 56, 202, 0.22); border-color: rgba(67, 56, 202, 0.35); }
.lp .cg-node-root .cg-label { font-size: 2.1cqw; color: var(--own-primary); }

/* QR tag: the printed sticker, hanging off the object's card on a dotted leader.
   It is positioned out of flow so the node keeps the box the connectors are
   drawn against. */
.lp .cg-qr {
  position: absolute; top: 0; left: calc(50% + 6.7cqw); width: 5cqw;
  display: flex; flex-direction: column; align-items: center; gap: 0.5cqw;
  pointer-events: none;
}
.lp .cg-qr::before {
  content: ""; position: absolute; left: -1.2cqw; top: 2.1cqw; width: 1.2cqw;
  border-top: 1px dashed rgba(67, 56, 202, 0.45);
}
.lp .cg-qr-code {
  width: 4cqw; height: 4cqw; padding: 0.3cqw; background: white;
  border: 1px solid var(--ow-line); border-radius: 0.8cqw;
  box-shadow: 0 0.6cqw 1.4cqw rgba(11, 16, 32, 0.14);
}
.lp .cg-qr-code svg { display: block; width: 100%; height: 100%; }
/* The captions are wider than the code they sit under, so they overhang it
   evenly instead of widening the tag's anchor. */
.lp .cg-qr-cap, .lp .cg-qr-note {
  width: 6cqw; margin-inline: -0.5cqw; text-align: center; line-height: 1.2;
  overflow-wrap: break-word; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.lp .cg-qr-cap { font-size: 1cqw; font-weight: 700; color: var(--own-primary); }
.lp .cg-qr-note { font-size: 0.88cqw; font-weight: 500; color: var(--own-fg-2); }

/* Vertical mobile tree: larger cards/labels (only ~3 columns are used, so there
   is horizontal room) and the label sits beside–below without clipping. */
.lp .cg-narrow .cg-node-inner { gap: 1.4cqw; }
.lp .cg-narrow .cg-thumb { width: 22cqw; border-radius: 3.4cqw; box-shadow: 0 2cqw 4cqw rgba(11, 16, 32, 0.14); }
.lp .cg-narrow .cg-label { font-size: 3.2cqw; letter-spacing: 0.02em; max-width: 46cqw; }
.lp .cg-narrow .cg-has-qr .cg-label { max-width: 26.5cqw; }
.lp .cg-narrow .cg-qr { left: calc(50% + 16cqw); width: 11cqw; gap: 0.9cqw; }
.lp .cg-narrow .cg-qr::before { left: -2.2cqw; top: 4.5cqw; width: 2.2cqw; }
.lp .cg-narrow .cg-qr-code { width: 9cqw; height: 9cqw; padding: 0.7cqw; border-radius: 1.5cqw; }
.lp .cg-narrow .cg-qr-cap, .lp .cg-narrow .cg-qr-note { width: 16cqw; margin-inline: -2.5cqw; }
.lp .cg-narrow .cg-qr-cap { font-size: 2.4cqw; }
.lp .cg-narrow .cg-qr-note { font-size: 2cqw; }
.lp .cg-narrow.cg-node-root .cg-thumb,
.lp .cg-narrow .cg-node-root .cg-thumb { width: 26cqw; }
.lp .cg-narrow .cg-node-root .cg-label { font-size: 4cqw; }
.lp .cg-narrow .cg-node:hover .cg-node-inner { transform: translateY(-2cqw) scale(1.05); }
.lp .cg-narrow .cg-node-inner { animation-name: cgFloatNarrow; }
@keyframes cgFloatNarrow { 0%, 100% { transform: translateY(-1.1cqw); } 50% { transform: translateY(1.1cqw); } }

/* interaction: lift the hovered node, dim the float, and let it pop above siblings */
.lp .cg-node:hover { z-index: 5; }
.lp .cg-node:hover .cg-node-inner { animation-play-state: paused; transform: translateY(-1.4cqw) scale(1.06); }
.lp .cg-node:hover .cg-thumb { box-shadow: 0 2.4cqw 4cqw rgba(11, 16, 32, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .lp .cg-node-inner { animation: none; }
  .lp .cg-edge-flow { animation: none; opacity: 0; }
  .lp .cg-node:hover .cg-node-inner { transform: scale(1.05); }
}
.lp .lp-connections-copy h2 em { color: var(--own-primary); font-style: italic; }
.lp .lp-connections-copy .lp-lede { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 20px 0 28px; }
/* Borrows the `.ohist-points` list so the three "OWNY does the filing" lines read exactly like
   the point lists in the neighbouring sections; only the spacing around the chip row differs. */
.lp .lp-con-points { margin-bottom: 26px; }
.lp .lp-con-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.lp .con-chip { background: white; border: 1px solid var(--ow-line); border-radius: 999px; padding: 8px 14px; font-size: 0.86rem; color: var(--ow-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.lp .con-chip .material-symbols-outlined { font-size: 1rem; color: var(--own-primary); }

/* ── HAUSHALTSBUCH (Einnahmen & Ausgaben) ──
   Copy on the left, the real spending chart on the right. The card brings its own
   colour world (see SpendingBarChartComponent.razor.css) — the page only gives it
   the column and keeps it from squeezing below it. */
.lp .lp-hhb-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; }
.lp .lp-hhb-copy h2 em { color: var(--ow-champagne-deep); font-style: italic; }
.lp .lp-hhb-copy .lp-lede { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 20px 0 28px; }
.lp .lp-hhb-demo { min-width: 0; }

/* The three promises of the section, read as a list of hairline-separated rows. */
.lp .lp-hhb-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 0; }
.lp .lp-hhb-points li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--ow-line); }
.lp .lp-hhb-points li:first-child { border-top: none; padding-top: 0; }
.lp .lp-hhb-points .hp-ico { width: 38px; height: 38px; border-radius: 11px; background: white; border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; color: var(--ow-champagne-deep); flex-shrink: 0; }
.lp .lp-hhb-points .hp-ico .material-symbols-outlined { font-size: 1.15rem; }
.lp .lp-hhb-points .hp-title { font-weight: 700; color: var(--ow-ink); margin: 0 0 4px; font-size: 1rem; }
.lp .lp-hhb-points .hp-sub { font-size: 0.9rem; color: var(--own-fg-2); line-height: 1.55; margin: 0; }
@media (max-width: 1000px) {
  .lp .lp-hhb-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── GESAMTBILD ── */
.lp .lp-gesamtbild { background: var(--ow-paper); }
.lp .lp-gb-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.lp .lp-gb-copy .lp-lede { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 0 0 28px; }
.lp .lp-gb-demo { min-width: 0; }
@media (max-width: 1000px) {
  .lp .lp-gb-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── REPORTS ── */
.lp .lp-report { background: var(--ow-paper); }
.lp .lp-report-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.lp .lp-report-copy h2 em { color: var(--ow-champagne-deep); font-style: italic; }
.lp .lp-report-copy .lp-lede { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 20px 0 28px; }
.lp .lp-report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 28px 0 24px; padding: 28px 0; border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }
.lp .lp-report-stats .stat-num { font-family: var(--ow-serif); font-weight: 500; font-size: 2.2rem; letter-spacing: -0.02em; line-height: 1; color: var(--ow-ink); }
.lp .lp-report-stats .stat-lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--own-fg-3); margin-top: 8px; }
.lp .lp-report-disclaim { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 14px; padding: 14px 18px; margin-bottom: 24px; font-size: 0.84rem; line-height: 1.5; color: var(--own-fg-2); display: flex; gap: 12px; align-items: flex-start; }
.lp .lp-report-disclaim .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.lp .lp-legal-note { margin-top: 28px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 14px; padding: 14px 18px; font-size: 0.82rem; line-height: 1.5; color: var(--own-fg-2); display: flex; gap: 12px; align-items: flex-start; }
.lp .lp-legal-note .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.lp .lp-doc-mock { position: relative; background: var(--ow-cream); border-radius: 22px; padding: 36px; box-shadow: 0 30px 60px rgba(11, 16, 32, 0.10); border: 1px solid var(--ow-line); }
.lp .doc-page { background: white; border: 1px solid var(--ow-line); border-radius: 4px; padding: 28px 26px; box-shadow: 0 12px 32px rgba(11, 16, 32, 0.06); font-size: 0.84rem; color: var(--ow-ink); position: relative; transform: rotate(-1.2deg); }
.lp .doc-page .doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--ow-line); padding-bottom: 14px; margin-bottom: 16px; }
.lp .doc-page .doc-title { font-family: var(--ow-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.lp .doc-page .doc-sub { font-size: 0.74rem; color: var(--own-fg-2); margin-top: 4px; }
.lp .doc-page .doc-meta { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--own-fg-3); text-align: right; font-weight: 600; }
.lp .doc-row { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--ow-line); font-size: 0.86rem; }
.lp .doc-row strong { font-weight: 600; color: var(--ow-ink); }
.lp .doc-row .sub { display: block; font-size: 0.74rem; color: var(--own-fg-3); font-weight: 400; margin-top: 2px; }
.lp .doc-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.lp .doc-total { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 2px solid var(--ow-ink); font-family: var(--ow-serif); }
.lp .doc-total .lbl { font-size: 0.85rem; color: var(--own-fg-2); font-family: var(--own-font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.lp .doc-total .val { font-size: 1.5rem; font-weight: 500; }
.lp .doc-watermark { position: absolute; top: 28px; right: -16px; background: white; color: var(--ow-champagne-deep); font-family: var(--own-font-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--ow-champagne); transform: rotate(3deg); box-shadow: 0 6px 16px rgba(11, 16, 32, 0.06); }

/* ── PRICING ── */
.lp .lp-pricing { background: var(--ow-cream); border-top: 1px solid var(--ow-line); }
.lp .lp-pricing-toggle { display: inline-flex; background: white; border: 1px solid var(--ow-line); border-radius: 999px; padding: 4px; margin-top: 20px; }
.lp .lp-pricing-toggle button { background: transparent; border: none; padding: 8px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; cursor: pointer; color: var(--own-fg-2); font-family: inherit; }
.lp .lp-pricing-toggle button.on { background: var(--ow-ink); color: white; }
.lp .lp-pricing-toggle .save { display: inline-flex; align-items: center; white-space: nowrap; margin-left: 6px; padding: 2px 8px; background: rgba(201,169,106,0.20); color: var(--ow-champagne-deep); font-size: 0.7rem; border-radius: 999px; font-weight: 700; }

/* ── DISCOUNT CODE ROW (PricingComponent) ──
   The line above the tiers that says which code is applied and lets the visitor put
   another one in its place. It used to appear only for someone who had been given a
   code; since the pricing page applies the running launch campaign by itself for a
   signed-in visitor (see PromoCampaign), it is on screen for nearly everyone, and the
   raw input/buttons it shipped with were the one unstyled thing on the page.
   Badge and control sit on one wrapping row so the "use a different code" button can
   stand next to an applied badge, and the error can drop below both on a phone. */
.lp .pricing-discount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp .pricing-discount-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--ow-champagne) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ow-champagne) 55%, transparent);
  color: var(--ow-ink); font-size: 0.86rem; font-weight: 600;
}
.lp .pricing-discount-badge .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp .pricing-discount-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
  background: transparent; cursor: pointer; font-family: inherit; font-size: 0.8rem;
  color: var(--own-fg-2); transition: background var(--own-dur-fast), color var(--own-dur-fast);
}
.lp .pricing-discount-remove:hover { background: var(--ow-cream-deep); color: var(--ow-ink); }
/* The two text buttons of the row ("Have a discount code?" / "Use a different code" and
   "Apply"): quiet, underlined-on-hover, so neither competes with the tier CTAs below. */
.lp .pricing-discount-toggle,
.lp .pricing-discount-apply {
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--ow-champagne-deep); text-decoration: none;
}
.lp .pricing-discount-toggle:hover,
.lp .pricing-discount-apply:hover { text-decoration: underline; }
.lp .pricing-discount-input {
  min-width: 0; width: 11rem; padding: 8px 14px;
  border: 1px solid var(--ow-line); border-radius: 999px;
  background: var(--ow-paper); font-family: inherit; font-size: 0.86rem;
  color: var(--ow-ink); text-transform: uppercase; letter-spacing: 0.04em;
}
.lp .pricing-discount-input::placeholder { text-transform: none; letter-spacing: normal; color: var(--own-fg-3); }
.lp .pricing-discount-input:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 1px; }
/* Full-width so a refusal never squeezes the input out of the row on a phone. */
.lp .pricing-discount-error { flex-basis: 100%; font-size: 0.82rem; color: var(--own-danger); }

.lp .lp-tiers { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 20px; align-items: stretch; }
.lp .lp-tier { background: white; border: 1px solid var(--ow-line); border-radius: 18px; padding: 36px 28px; display: flex; flex-direction: column; position: relative; }
.lp .lp-tier.featured { background: var(--ow-ink); color: white; border: 1px solid var(--ow-champagne); box-shadow: 0 30px 80px rgba(11,16,32,0.25); transform: translateY(-12px); }
.lp .lp-tier.featured h3, .lp .lp-tier.featured .t-price-amount { color: white; }
.lp .lp-tier.featured .t-meta { color: rgba(255,255,255,0.65); }
.lp .lp-tier.featured .t-feat li { color: rgba(255,255,255,0.85); }
.lp .lp-tier.featured .t-feat li .material-symbols-outlined { color: var(--ow-champagne); }
.lp .lp-tier.featured .t-feat { border-color: rgba(255,255,255,0.10); }
.lp .lp-tier .t-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ow-champagne); color: white; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.lp .lp-tier h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 4px; color: var(--ow-ink); letter-spacing: -0.01em; }
.lp .lp-tier .t-for { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--ow-champagne-deep); margin-bottom: 20px; }
.lp .lp-tier.featured .t-for { color: var(--ow-champagne); }
.lp .lp-tier .t-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.lp .lp-tier .t-price-amount { font-family: var(--ow-serif); font-weight: 500; font-size: 2.4rem; line-height: 1; letter-spacing: -0.02em; color: var(--ow-ink); }
.lp .lp-tier .t-price-unit { font-size: 0.92rem; color: var(--own-fg-2); }
.lp .lp-tier.featured .t-price-unit { color: rgba(255,255,255,0.65); }
/* With a discount code applied the card shows both numbers: the struck list price on top, the price
   the coupon produces underneath. The struck line stays small and quiet so the payable figure keeps
   the weight of a price, but it stays legible — it is the reference the reduction is measured against. */
.lp .lp-tier .t-price-before { margin-bottom: 0; }
.lp .lp-tier .t-price-struck { font-family: var(--ow-serif); font-size: 1.25rem; font-weight: 500; line-height: 1; color: var(--own-fg-2); text-decoration-thickness: 1px; }
.lp .lp-tier.featured .t-price-struck { color: rgba(255,255,255,0.6); }
.lp .lp-tier .t-price-before .t-price-unit { font-size: 0.8rem; }
.lp .lp-tier .t-price-discounted { margin-bottom: 2px; }
.lp .lp-tier .t-price-discount-hint { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ow-champagne-deep); margin-bottom: 6px; }
.lp .lp-tier.featured .t-price-discount-hint { color: var(--ow-champagne); }
.lp .lp-tier .t-meta { font-size: 0.85rem; color: var(--own-fg-2); margin-bottom: 22px; }
.lp .lp-tier .t-feat { list-style: none; margin: 0 0 26px; padding: 22px 0 0; border-top: 1px solid var(--ow-line); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lp .lp-tier .t-feat li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; color: var(--own-fg-1); }
.lp .lp-tier .t-feat li .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-ink); flex-shrink: 0; margin-top: 1px; }
.lp .lp-tier .t-feat b { font-weight: 700; }

/* Credit quota block (<PricingCreditQuota />): what the month's credits actually buy, sitting
   directly above the CTA so the last thing read before the button is a concrete number. */
.lp .lp-tier .t-credits { margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--ow-line); }
.lp .lp-tier .t-credits-head { font-size: 0.98rem; line-height: 1.4; color: var(--own-fg-1); margin-bottom: 6px; }
.lp .lp-tier .t-credits-head strong { font-weight: 700; }
/* The monthly AI balance, set as the serif numeral the plan cards use elsewhere — it is the figure
   a buyer compares across tiers, so it gets the weight of a price rather than of a sentence. */
.lp .lp-tier .t-credits-points {
  font-family: var(--ow-serif); font-size: 2.1rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.02em; color: var(--ow-ink); margin-bottom: 8px;
}
.lp .lp-tier .t-credits-points small {
  font-family: var(--own-font-sans); font-size: 0.82rem; font-weight: 500;
  color: var(--own-fg-2); margin-left: 6px; letter-spacing: 0;
}
.lp .lp-tier.featured .t-credits-points { color: #fff; }
.lp .lp-tier.featured .t-credits-points small { color: rgba(255,255,255,0.72); }
.lp .lp-tier .t-credits-body { font-size: 0.88rem; line-height: 1.5; color: var(--own-fg-2); }
.lp .lp-tier .t-credits-note { font-size: 0.8rem; line-height: 1.5; color: var(--own-fg-3); margin-top: 6px; }
.lp .lp-tier.featured .t-credits { border-color: rgba(255,255,255,0.10); }
.lp .lp-tier.featured .t-credits-head { color: rgba(255,255,255,0.92); }
.lp .lp-tier.featured .t-credits-body { color: rgba(255,255,255,0.78); }
.lp .lp-tier.featured .t-credits-note { color: rgba(255,255,255,0.6); }

.lp .lp-tier .lp-btn { width: 100%; justify-content: center; }

/* PricingComponent.razor only: on desktop the monthly/yearly switch lives once in the section head.
   When the three cards stack (≤1024px) the head switch is far above the prices it changes, so each
   card carries its own copy (.lp-tier-toggle) above its price and the head one is hidden. */
.lp .lp-tier-toggle { display: none; }

/* The Start strip (Home.razor / PricingComponent.razor): the lean entry tier sits under the three
   cards rather than beside them — a fourth column would put the cheapest plan on the same footing as
   the three the page actually compares. A divider line with an eyebrow ("or start lean") separates it
   from the cards, then one wide card in three columns: name and lead, the two feature lines, and the
   price with its CTA. The pieces reuse the card vocabulary (.t-for, .t-feat, .t-price, .lp-btn) so a
   type or colour change on the cards carries over. */
.lp .lp-tier-start-divider {
  display: flex; align-items: center; gap: 16px; margin: 28px 0 20px;
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  color: var(--own-fg-2);
}
.lp .lp-tier-start-divider .line { flex: 1 1 auto; height: 1px; background: var(--ow-line); }
.lp .lp-tier.lp-tier-start {
  display: grid; grid-template-columns: 1.35fr 1.15fr 0.9fr; gap: 36px; align-items: center;
  padding: 28px 32px;
  /* A shade between the cards' white and the section's cream: read as part of the table, but a
     quieter surface than the three offers above it. */
  background: color-mix(in srgb, var(--ow-paper) 60%, var(--ow-cream));
}
.lp .lp-tier-start .tm-intro { display: flex; flex-direction: column; }
.lp .lp-tier-start .t-for { margin-bottom: 12px; }
.lp .lp-tier-start .tm-lead { font-size: 0.92rem; line-height: 1.5; color: var(--own-fg-1); }
.lp .lp-tier-start .tm-feats { padding-left: 36px; border-left: 1px solid var(--ow-line); }
.lp .lp-tier-start .tm-feats .t-feat { margin: 0; padding: 0; border-top: none; flex: none; }
.lp .lp-tier-start .tm-note { font-size: 0.82rem; line-height: 1.5; color: var(--own-fg-2); margin-top: 10px; padding-left: 30px; }
.lp .lp-tier-start .tm-buy { display: flex; flex-direction: column; align-items: stretch; }
.lp .lp-tier-start .tm-buy .t-price { margin-bottom: 2px; }
.lp .lp-tier-start .tm-alt { font-size: 0.82rem; color: var(--own-fg-2); margin-bottom: 16px; }
.lp .lp-tier-start .tm-buy .lp-btn { background: var(--ow-paper); }

/* The one line under the plan cards (Home.razor / PricingComponent.razor): a plan moves up or
   down and the data stays the user's either way. Centred and quiet on purpose — it is a footnote to
   all the cards, not one more thing to compare. */
.lp .lp-tiers-note {
  margin: 22px auto 0; max-width: 720px; text-align: center;
  font-size: 0.88rem; line-height: 1.6; color: var(--own-fg-2);
}

/* ── SHARED FEATURES MARQUEE SECTION ── */
.lp .lp-shared-features {
    margin-top: 36px;
    margin-bottom: 48px;
    position: relative;
    overflow: hidden;
}

.lp .lp-shared-features-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 20px;
}

.lp .lp-shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(184, 153, 91, 0.12);
    color: var(--ow-champagne-deep);
    border: 1px solid rgba(184, 153, 91, 0.25);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

.lp .lp-shared-features-head h2 {
    font-family: var(--ow-serif);
    font-size: var(--ow-h2-size);
    font-weight: 500;
    line-height: 1.1;
    color: var(--ow-ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.lp .lp-shared-features-head p {
    font-size: var(--ow-lede-size);
    color: var(--own-fg-2);
    margin: 0;
    line-height: 1.65;
}

/* Marquee track container with smooth left/right gradient mask */
.lp .marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

/* Each row is a horizontal scroll container: the user can swipe/drag through the tiles, and
   pricingMarquee.js drives the idle movement from scrollLeft so a tap only ever holds the row
   for as long as the finger is on it. The scrollbar itself stays hidden — the motion and the
   edge fade are the affordance. */
.lp .marquee-wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lp .marquee-wrapper::-webkit-scrollbar {
    display: none;
}

.lp .marquee-wrapper:focus-visible {
    outline: 2px solid var(--ow-champagne);
    outline-offset: 3px;
    border-radius: 14px;
}

.lp .marquee-track {
    display: flex;
    width: max-content;
    /* Never let the flex parent squeeze the track to its own width — the overflow is the point. */
    flex: 0 0 auto;
    will-change: transform;
}

.lp .marquee-group {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
    flex-shrink: 0;
}

/* Fallback path only (static render, or the module failed to load). Once the scroll-driven
   version has taken over, the container carries `.js-marquee` and the keyframes step aside —
   a transform on the track would otherwise fight the scroll offset. */
.lp .marquee-container:not(.js-marquee) .marquee-track.row-1 {
    animation: marquee-left 90s linear infinite;
}

.lp .marquee-container:not(.js-marquee) .marquee-track.row-2 {
    animation: marquee-left 100s linear infinite;
    animation-delay: -15s;
}

/* Hover-pause is for real pointers only. On a touchscreen the browser applies :hover on tap and
   keeps it there until the user taps elsewhere, which used to stop the rows for good. */
@media (hover: hover) and (pointer: fine) {
    .lp .marquee-container:not(.js-marquee):hover .marquee-track {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp .marquee-container .marquee-track {
        animation: none;
    }
}

@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.lp .feat-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: white;
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    padding: 16px 20px;
    min-width: 320px;
    max-width: 380px;
    box-shadow: 0 4px 16px rgba(11, 16, 32, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

/* Pointer-only: a touch device would otherwise leave the tapped tile lifted until the user
   taps somewhere else. */
@media (hover: hover) and (pointer: fine) {
    .lp .feat-box:hover {
        transform: translateY(-3px);
        border-color: var(--ow-champagne);
        box-shadow: 0 10px 24px rgba(11, 16, 32, 0.08);
    }
}

.lp .feat-box-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(184, 153, 91, 0.12);
    color: var(--ow-champagne-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lp .feat-box-icon .material-symbols-outlined {
    font-size: 1.25rem;
}

.lp .feat-box-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lp .feat-box-title {
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--ow-ink);
    line-height: 1.35;
}

.lp .feat-box-desc {
    font-size: 0.86rem;
    color: var(--own-fg-2);
    line-height: 1.45;
}

/* ── LIFECYCLE FLOW (<PricingFeatureFlow />) ──
   The second flavour of the shared-feature block: the same capabilities, but wired into one flow
   along the object's life cycle. The entry point is a full-width card in the dark of the comparison
   peak above it; the numbered steps follow in rows that run boustrophedon (left→right, then
   right→left), so the jump into the next row is a short round hairpin on the side the row ended on
   instead of a line racing back across the full width. Below the desktop breakpoint the whole thing
   becomes one vertical column and every connector is the same plain arrow pointing down. */
.lp .lp-flow { margin-top: 96px; }

.lp .lp-flow-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.lp .lp-flow-head h2 { font-family: var(--ow-serif); font-size: var(--ow-h2-size); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--ow-ink); margin: 16px 0 14px; text-wrap: balance; }
.lp .lp-flow-head h2 em { font-style: italic; color: var(--ow-champagne-deep); }
.lp .lp-flow-head p { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 0; text-wrap: pretty; }

/* Entry point — the premise, not a step: full width, dark, unnumbered. */
.lp .lp-flow .flow-entry {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    position: relative;
    overflow: hidden;
    background: var(--ow-ink);
    border: 1px solid var(--ow-champagne);
    border-radius: 20px;
    padding: 30px 34px 32px;
    box-shadow: 0 30px 70px rgba(11, 16, 32, 0.26);
}
.lp .lp-flow .flow-entry::before {
    content: "";
    position: absolute; top: -110px; right: -80px; width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(201, 169, 106, 0.32), transparent 66%);
    pointer-events: none;
}
.lp .lp-flow .flow-entry .fe-ico {
    width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0;
    background: var(--own-gradient-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(67, 56, 202, 0.5);
}
.lp .lp-flow .flow-entry .fe-ico .material-symbols-outlined { font-size: 1.6rem; }
.lp .lp-flow .flow-entry .fe-body { position: relative; z-index: 1; }
.lp .lp-flow .flow-entry .fe-kicker {
    display: block;
    font-size: var(--ow-eyebrow-size); font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ow-champagne); margin-bottom: 12px;
}
.lp .lp-flow .flow-entry h3 {
    font-family: var(--ow-serif); font-weight: 500;
    font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -0.015em;
    color: #fff; margin: 0 0 10px;
}
.lp .lp-flow .flow-entry p { font-size: var(--ow-body-size); line-height: 1.6; color: rgba(255, 255, 255, 0.76); margin: 0; max-width: 72ch; text-wrap: pretty; }
.lp .lp-flow .flow-entry .fn-chips li { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.82); }
.lp .lp-flow .flow-entry .fe-cta { margin-top: 22px; }

.lp .lp-flow .flow-rows { display: flex; flex-direction: column; }
.lp .lp-flow .flow-row { display: flex; align-items: stretch; gap: 10px; }
.lp .lp-flow .flow-row.rtl { flex-direction: row-reverse; }

/* Node */
.lp .lp-flow .flow-node {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    padding: 24px 26px 26px;
    box-shadow: 0 4px 16px rgba(11, 16, 32, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .lp .lp-flow .flow-node:hover {
        transform: translateY(-3px);
        border-color: var(--ow-champagne);
        box-shadow: 0 10px 24px rgba(11, 16, 32, 0.08);
    }
}

.lp .lp-flow .flow-node .fn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp .lp-flow .flow-node .fn-ico {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(184, 153, 91, 0.12);
    color: var(--ow-champagne-deep);
    display: flex; align-items: center; justify-content: center;
}
.lp .lp-flow .flow-node .fn-ico .material-symbols-outlined { font-size: 1.4rem; }
.lp .lp-flow .flow-node .fn-num { font-family: var(--ow-serif); font-size: 1.9rem; line-height: 1; font-weight: 500; color: var(--ow-ink); opacity: 0.2; }

/* Card titles carry the same weight as the tile headlines elsewhere on the page. */
.lp .lp-flow .flow-node h3 {
    font-family: var(--ow-serif); font-weight: 500;
    font-size: var(--ow-tile-title-size); line-height: 1.12; letter-spacing: -0.015em;
    color: var(--ow-ink); margin: 4px 0 0;
    text-wrap: balance;
}
.lp .lp-flow .flow-node p { font-size: var(--ow-body-size); line-height: 1.6; color: var(--own-fg-2); margin: 0; text-wrap: pretty; }
.lp .lp-flow .fn-chips { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp .lp-flow .fn-chips li {
    font-size: 0.74rem; font-weight: 600; line-height: 1.2;
    padding: 5px 11px; border-radius: 999px;
    background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--own-fg-2);
}
/* Whichever of chips/CTA ends up last in a node is pushed to the card's bottom edge, so cards of
   uneven copy length still line up their footers across a row. */
.lp .lp-flow .flow-node .fn-chips:last-child { margin-top: auto; }
.lp .lp-flow .flow-node .fn-cta {
    align-self: flex-start;
    margin-top: auto;
    padding: 9px 0 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--own-primary);
}
.lp .lp-flow .flow-node .fn-cta:hover { background: transparent; color: var(--own-primary); text-decoration: underline; }
.lp .lp-flow .flow-node .fn-cta .material-symbols-outlined { font-size: 0.95rem; }

/* The carousel nav belongs to the stacked layout only. Qualified with .lp-flow so it outranks the
   shared .lp .cap-nav rule it borrows its looks from, wherever that sits in this file. */
.lp .lp-flow .flow-nav { display: none; }

/* Straight connector from the entry point into the first row. It sits over the column the flow
   continues in — the first card — not over the middle of the row, so the eye is handed straight to
   step 01. The column geometry is the one the row-to-row turn uses (see .flow-turn below). */
.lp .lp-flow .flow-drop { display: flex; justify-content: flex-start; height: 46px; }

/* Arrow between two nodes of the same row; mirrored on the rows that run backwards. */
.lp .lp-flow .flow-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; color: var(--ow-champagne); }
.lp .lp-flow .flow-arrow .material-symbols-outlined { font-size: 1.4rem; }
.lp .lp-flow .flow-row.rtl .flow-arrow { transform: scaleX(-1); }

/* The jump into the next row. Because the rows run boustrophedon, a row always ends on the side the
   next row starts on — so the connector is a straight drop centred over that column rather than a
   hairpin racing across the page. The column is one node's share of the row: the full width less the
   two 28px arrows and the four 10px gaps between the row's five children, divided by three. */
.lp .lp-flow .flow-turn { display: flex; height: 58px; }
.lp .lp-flow .flow-turn.to-right { justify-content: flex-end; }
.lp .lp-flow .flow-turn.to-left { justify-content: flex-start; }
.lp .lp-flow .flow-turn .arc,
.lp .lp-flow .flow-drop .arc { position: relative; width: calc((100% - 96px) / 3); height: 100%; }
.lp .lp-flow .flow-turn .arc::before,
.lp .lp-flow .flow-drop .arc::before {
    content: "";
    position: absolute; top: 0; bottom: 20px; left: 50%;
    width: 2px; margin-left: -1px;
    background: var(--ow-champagne); opacity: 0.85;
}
.lp .lp-flow .flow-turn .tip,
.lp .lp-flow .flow-drop .tip {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    font-size: 1.4rem; line-height: 1; color: var(--ow-champagne);
}

/* Below the desktop breakpoint the ten cards would be ten screens of scrolling, so the flow becomes
   a carousel instead: one card at a time, moved by the arrows and dots of the capture section. The
   connectors step aside — with a single card on screen there is nothing left for them to connect. */
@media (max-width: 1199px) {
    .lp .lp-flow .flow-row,
    .lp .lp-flow .flow-row.rtl { flex-direction: column; gap: 0; }
    .lp .lp-flow .flow-node { flex: 0 0 auto; }

    .lp .lp-flow .flow-drop,
    .lp .lp-flow .flow-arrow,
    .lp .lp-flow .flow-turn { display: none; }

    /* Only the current slide is laid out. Coming back from `display: none` restarts the animation,
       so every step change fades its card in the way the capture carousel does. */
    .lp .lp-flow .slide:not(.on) { display: none; }
    .lp .lp-flow .slide.on { animation: capCcIn 0.45s var(--own-ease) both; }

    .lp .lp-flow .flow-nav { display: flex; justify-content: center; margin-top: 26px; }

    /* Vertical panning stays with the browser; the horizontal gesture is the carousel's. */
    .lp .lp-flow .flow-stage { touch-action: pan-y; }
}

@media (max-width: 700px) {
    .lp .lp-flow { margin-top: 64px; }
    .lp .lp-flow .flow-entry { flex-direction: column; gap: 16px; padding: 26px 22px 28px; }
    .lp .lp-flow .flow-node { padding: 22px 20px 24px; }
}

/* ── FAQ (embedded <FaqComponent />) ── */
/* The component brings its own editorial styling (see `.faq-section` further down), so the
   landing page only has to give it a background and let it fill the shell it sits in. */
.lp .lp-faq { background: var(--ow-paper); }
.lp .lp-faq .faq-section { padding: 0; }

/* ── BLOG (embedded <BlogList />, re-skinned to the editorial language) ── */
.lp .lp-blog { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }
.lp .lp-blog .blog-list-wrapper { max-width: none; margin: 0; padding: 0; }
.lp .lp-blog .blog-list-title { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-h2-size); line-height: 1.1; letter-spacing: -0.02em; color: var(--ow-ink); }
.lp .lp-blog .blog-list-subtitle { color: var(--own-fg-2); font-size: var(--ow-lede-size); line-height: 1.65; }
.lp .lp-blog .blog-category-chip { background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--ow-ink); font-family: inherit; }
.lp .lp-blog .blog-category-chip:hover { background: var(--ow-cream-deep); border-color: var(--ow-champagne); color: var(--ow-ink); }
.lp .lp-blog .blog-category-chip.active { background: var(--ow-ink); border-color: var(--ow-ink); color: white; }
.lp .lp-blog .blog-category-chip.chip-clear { border-color: var(--ow-champagne-deep); color: var(--ow-champagne-deep); }
.lp .lp-blog .blog-category-chip.chip-clear:hover { background: var(--ow-champagne-deep); color: white; }
.lp .lp-blog .blog-post-card { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; box-shadow: none; }
.lp .lp-blog .blog-post-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 16, 32, 0.08); border-color: var(--ow-champagne); }
.lp .lp-blog .blog-post-title { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ow-ink); }
.lp .lp-blog .blog-post-description { color: var(--own-fg-2); }
.lp .lp-blog .blog-post-date { color: var(--own-fg-3); }
.lp .lp-blog .blog-post-read-more { color: var(--ow-champagne-deep); }

/* ── CLOSING ── */
.lp .lp-closing { background: var(--ow-ink); color: white; text-align: center; padding: 120px 0; position: relative; overflow: hidden; }
.lp .lp-closing::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 500px at 50% 100%, rgba(124,58,237,0.25), transparent 60%), radial-gradient(700px 400px at 0% 0%, rgba(201,169,106,0.10), transparent 60%); }
.lp .lp-closing .lp-eyebrow { color: var(--ow-champagne); position: relative; z-index: 1; }
.lp .lp-closing h2 { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-h1-size); letter-spacing: -0.02em; line-height: 1.05; margin: 20px auto 24px; max-width: 900px; color: white; position: relative; z-index: 1; }
.lp .lp-closing h2 .wm { display: inline-block; vertical-align: -0.05em; height: 0.75em; width: auto; }
.lp .lp-closing p { font-size: 1.1rem; color: rgba(255,255,255,0.72); max-width: 620px; margin: 0 auto 36px; position: relative; z-index: 1; }
.lp .lp-closing-ctas { display: inline-flex; gap: 14px; position: relative; z-index: 1; flex-wrap: wrap; justify-content: center; }
.lp .lp-closing .micro { margin-top: 24px; font-size: 0.82rem; color: rgba(255,255,255,0.5); position: relative; z-index: 1; }

/* ── FOOTER ── */
.lp .lp-foot { background: var(--ow-ink-2); color: rgba(255,255,255,0.6); padding: 40px 0; font-size: 0.88rem; }
.lp .lp-foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lp .foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.lp .lp-foot a { color: inherit; text-decoration: none; }
.lp .lp-foot a:hover { color: white; }

/* ── SHARED SPACES (Gemeinsame Bereiche) ── */
.lp .lp-spaces { background: var(--ow-paper); }
.lp .lp-spaces-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 64px; align-items: center; }
.lp .lp-spaces-copy h2 em { color: var(--own-primary); font-style: italic; }
.lp .lp-spaces-copy .lp-lede { font-size: 1.1rem; line-height: 1.65; color: var(--own-fg-2); margin: 22px 0 32px; }
.lp .sp-points { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.lp .sp-points li { display: flex; gap: 14px; align-items: flex-start; font-size: 0.98rem; line-height: 1.55; color: var(--own-fg-2); }
.lp .sp-points li .material-symbols-outlined { color: var(--own-primary); font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.lp .sp-points li strong { color: var(--ow-ink); font-weight: 700; }

/* "Ein Zugang gehört zu einer Person" — the account constellation behind a shared space.
   A quiet inset card rather than another point in the list above: it answers a different
   question (how many logins does our household need) and it is the one place the free
   reading access for relatives is spelled out. */
.lp .sp-accounts { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 18px 20px; margin: 0 0 28px; }
.lp .sp-accounts-head { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--ow-champagne-deep); margin-bottom: 14px; }
.lp .sp-accounts-head .material-symbols-outlined { font-size: 1.1rem; }
.lp .sp-accounts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp .sp-accounts-list li { position: relative; padding-left: 18px; font-size: 0.9rem; line-height: 1.55; color: var(--own-fg-2); text-wrap: pretty; }
.lp .sp-accounts-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ow-champagne); }
.lp .sp-accounts-list li strong { color: var(--ow-ink); font-weight: 700; }

/* Demo card */
.lp .sp-card { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 18px 48px rgba(11, 16, 32, 0.08); }
.lp .sp-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--ow-line); }
.lp .sp-glyph { width: 48px; height: 48px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; color: var(--ow-champagne-deep); flex-shrink: 0; }
.lp .sp-name { font-family: var(--ow-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--ow-ink); }
.lp .sp-meta { font-size: 0.86rem; color: var(--own-fg-2); margin-top: 2px; }
.lp .sp-avatars { display: flex; align-items: center; }
.lp .sp-avatars .sp-avatar + .sp-avatar { margin-left: -10px; }
.lp .sp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--ow-ink); border: 2px solid var(--ow-cream); color: white; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; flex: none; }
.lp .sp-avatar-more { background: var(--ow-cream-deep); color: var(--ow-ink); }

.lp .sp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 16px 18px; }
.lp .sp-toggle-title { font-weight: 700; font-size: 0.98rem; color: var(--ow-ink); }
.lp .sp-toggle-sub { font-size: 0.86rem; line-height: 1.45; color: var(--own-fg-2); margin-top: 3px; }
.lp .sp-switch { flex-shrink: 0; width: 56px; height: 30px; border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-cream-deep); padding: 0; cursor: pointer; position: relative; transition: background var(--own-dur-base) var(--own-ease), border-color var(--own-dur-base) var(--own-ease); }
.lp .sp-switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: var(--ow-paper); box-shadow: 0 2px 6px rgba(11, 16, 32, 0.25); transition: transform var(--own-dur-base) var(--own-ease); }
.lp .sp-switch.on { background: var(--own-primary); border-color: var(--own-primary); }
.lp .sp-switch.on .knob { transform: translateX(26px); }

.lp .sp-items { display: flex; flex-direction: column; gap: 10px; }
.lp .sp-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 14px; padding: 12px 16px; }
.lp .sp-thumb { width: 42px; height: 42px; border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.lp .sp-thumb img { width: 32px; height: 32px; object-fit: contain; }
.lp .sp-item-name { font-weight: 700; font-size: 0.96rem; color: var(--ow-ink); }
.lp .sp-item-sub { font-size: 0.82rem; color: var(--own-fg-2); margin-top: 2px; }
.lp .sp-hidden { display: inline-flex; align-items: center; gap: 8px; color: var(--own-fg-3); }
.lp .sp-hidden .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne-deep); }
.lp .sp-mask { letter-spacing: 0.14em; font-size: 0.8rem; }
.lp .sp-value { font-weight: 700; font-size: 0.96rem; color: var(--ow-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.lp .sp-foot { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; line-height: 1.45; color: var(--own-fg-2); padding-top: 4px; }
.lp .sp-foot .material-symbols-outlined { font-size: 1.05rem; color: var(--own-primary); flex-shrink: 0; margin-top: 1px; }

/* Scenario cards */
.lp .lp-spaces-scenarios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.lp .sp-scenario { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; transition: transform var(--own-dur-base) var(--own-ease), box-shadow var(--own-dur-base) var(--own-ease); }
.lp .sp-scenario:first-child { background: var(--ow-cream); }
.lp .sp-scenario:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(11, 16, 32, 0.10); }
.lp .sp-scenario-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 20px; }
.lp .sp-scenario-eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne-deep); line-height: 1.35; }
.lp .sp-scenario .sp-avatar { border-color: var(--ow-paper); }
.lp .sp-scenario:first-child .sp-avatar { border-color: var(--ow-cream); }
.lp .sp-scenario h3 { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size); line-height: 1.15; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 12px; }
.lp .sp-scenario p { font-size: 0.95rem; line-height: 1.6; color: var(--own-fg-2); margin: 0 0 22px; text-wrap: pretty; flex: 1; }
.lp .sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp .sp-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 999px; padding: 8px 14px; font-size: 0.84rem; font-weight: 500; color: var(--ow-ink); }
.lp .sp-chip .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }

/* ── RESPONSIVE ── */
@media (max-width: 1180px) {
  .lp .lp-hero-inner { gap: 56px; }
  .lp .lp-pillars { gap: 28px; }
}
@media (max-width: 1024px) {
  .lp .lp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .lp .lp-hero-right { min-height: auto; max-width: 560px; margin: 0 auto; position: relative; }
  .lp .lp-portfolio-card { position: relative; width: 100%; }
  .lp .lp-portfolio-main { top: 0; }
    .lp .lp-owny-intro {
        max-width: none;
        margin-top: 32px;
    }
  .lp .lp-pillars { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .lp .lp-owny-grid { grid-template-columns: 1fr; gap: 56px; }
  .lp .lp-testscan-grid { grid-template-columns: 1fr; gap: 48px; }
  .lp .lp-connections-grid, .lp .lp-report-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Stacked, the graph loses the labels that make it readable at a glance, so the copy
     explains what OWNY does with the order before the picture of it shows up. The DOM keeps
     the visual first because that is the reading order the two-column desktop layout needs. */
  .lp .lp-connections-grid .lp-connections-visual { order: 2; }
  .lp .lp-connections-grid .lp-connections-copy { order: 1; }
  .lp .lp-spaces-grid { grid-template-columns: 1fr; gap: 48px; }
  .lp .lp-usecases-grid { grid-template-columns: repeat(2, 1fr); }
  .lp .lp-uc.lp-uc-feature { grid-column: span 2; }
  .lp .lp-tiers { grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin: 0 auto; }
  /* Stacked tiers keep the ascending Basic → Pro → Premium order; the featured card
     is not pulled to the top so the price ladder still reads in one direction. */
  .lp .lp-tier.featured { transform: none; }
  /* The Start strip stacks into the same single column as the cards: intro, features, price. */
  .lp .lp-tier-start-divider { max-width: 520px; margin-left: auto; margin-right: auto; }
  .lp .lp-tier.lp-tier-start { grid-template-columns: 1fr; gap: 20px; align-items: stretch; max-width: 520px; margin: 0 auto; padding: 28px; }
  .lp .lp-tier-start .tm-feats { padding-left: 0; border-left: none; padding-top: 18px; border-top: 1px solid var(--ow-line); }
  .lp .lp-tier-start .tm-buy { padding-top: 18px; border-top: 1px solid var(--ow-line); }
  /* Stacked cards: the interval switch moves from the head into every card (see .lp-tier-toggle). */
  .lp .lp-pricing-tier-toggles .lp-section-head .lp-pricing-toggle { display: none; }
  .lp .lp-tier-toggle { display: flex; width: 100%; margin: 0 0 16px; }
  /* Buttons share the card width; on a narrow phone the "2 months free" badge wraps under the
     yearly label instead of pushing the switch out of the card. */
  .lp .lp-tier-toggle button { flex: 1 1 auto; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; padding: 8px 10px; }
  .lp .lp-tier-toggle .save { margin-left: 0; }
  .lp .lp-section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* Stacked, the Gesamtbild head paragraph and the lede below it read as two paragraphs of
     one text — the 64px that separate the head from the grid on desktop open a hole between
     them on a phone. */
  .lp .lp-gesamtbild .lp-section-head { margin-bottom: 24px; }
}
@media (max-width: 720px) {
  .lp .lp-shell { padding: 0 20px; }
  /* The snapshot title and the "Beispiel" badge no longer share one row: with the wide
     letter-spacing the two ran into each other on a phone. Stacked, the badge sits under
     the date, left-aligned with it. */
  .lp .lp-portfolio-main .pf-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* The question, the chips and the reassurance stack. The chips wrap onto as many rows as
     they need instead of scrolling sideways: a scroll row pushed the third chip — the
     preselected "Das ganze Bild" — off screen, and its intrinsic width dragged the card and
     the hint out past the viewport with it. All three options have to be visible for the
     switch to read as a choice at all. */
  .lp .lp-interest { padding: 16px 18px; margin: 36px 0 4px; border-radius: 16px; }
  .lp .lp-interest-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .lp .lp-interest-chips { flex-wrap: wrap; gap: 8px; }
  .lp .lp-interest-chip { padding: 8px 14px; font-size: 0.85rem; }
  .lp .lp-interest-hint { margin-left: 0; max-width: none; font-size: 0.78rem; }
  /* Only the glyph and the × fit next to the section links — the full label is one tap away
     at the switch itself. */
  .lp .lp-sticky-focus .lp-sticky-focus-tag .txt { display: none; }
  .lp .lp-sticky-focus button { padding: 6px 9px; }
  .lp .lp-section { padding: 72px 0; }
  .lp .lp-hero { padding: 110px 0 64px; }
  .lp .lp-nav { padding: 20px 0; }
  .lp .lp-nav-links { display: none; }
  .lp .lp-nav-cta .lp-signin { display: none; }
  .lp .lp-nav-cta .lp-btn { padding: 10px 16px; font-size: 0.88rem; }
  /* Sign-in button + language selector no longer fit on one line next to the
     wordmark on narrow phones; wrap the selector onto its own row below the
     button instead of letting it push the button off screen. */
  .lp .lp-nav-cta { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .lp .lp-nav-cta .lp-btn { order: 1; }
  .lp .lp-nav-cta .lang-select { order: 2; flex-basis: 100%; display: flex; justify-content: flex-end; }
  /* The hero nav drops its links on small screens — the sticky bar is where mobile
     visitors get section navigation, so its row stays and only the wordmark goes. */
  .lp .lp-sticky-nav-inner { gap: 12px; min-height: 54px; }
  .lp .lp-sticky-brand .hero-logo-text-span { display: none; }
  .lp .lp-sticky-links a { margin: 0 8px; font-size: 0.84rem; padding: 16px 4px; }
  .lp .lp-sticky-cta { padding: 8px 14px; font-size: 0.82rem; }
  .lp .lp-section { scroll-margin-top: 54px; }
  .lp .lp-pillars { grid-template-columns: 1fr; }
  .lp .lp-report-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .lp .lp-report-stats .stat-num { font-size: 1.6rem; }
  .lp .lp-usecases-grid { grid-template-columns: 1fr; }
  .lp .lp-uc.lp-uc-feature { grid-column: auto; }
  .lp .lp-spaces-scenarios { grid-template-columns: 1fr; margin-top: 40px; }
  .lp .sp-card { padding: 18px; }
  .lp .sp-card-head, .lp .sp-scenario-head { gap: 12px; }
  .lp .sp-toggle { align-items: flex-start; }
  .lp .sp-scenario { padding: 22px; }
  .lp .know-list { grid-template-columns: 1fr; }
  /* Two notes are all a phone has room for next to the orb; the other two would sit on top of it. */
  .lp .know-bubble { display: none; }
  .lp .know-bubble.bb-1, .lp .know-bubble.bb-3 { display: block; max-width: min(170px, 50%); font-size: 0.8rem; padding: 10px 12px; }
  .lp .know-bubble.bb-1 { top: 0; left: 0; }
  .lp .know-bubble.bb-3 { bottom: 0; right: 0; left: auto; }
  .lp .owny-stage { min-height: 260px; }
  .lp .lp-doc-mock { padding: 24px; }
  .lp .lp-kicker-inner { justify-content: flex-start; gap: 20px; }
  .lp .lp-kicker-strip .badges { gap: 18px 22px; }
}
@media (max-width: 480px) {
  .lp .lp-hero-trust { gap: 14px 20px; }
  .lp .lp-hero h1 { font-size: 2.2rem; }
  .lp .lp-closing { padding: 80px 0; }
  .lp .lp-privacy-foot { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   OWNAMIC — Global design-system tokens
   Brought in from the Ownamic Design System handoff (My Objects redesign).
   Indigo→violet brand + warm-cream "Premium" interior + champagne accents.
   These are global so any surface can adopt the editorial language.
   ========================================================================= */
:root {
  /* brand */
  --own-bg:               #ffffff;
  --own-bg-wash:          #f0f4ff;
  --own-surface:          #ffffff;
  --own-surface-muted:    #f8fafc;
  --own-border:           #e2e8f0;
  --own-fg-1:             #1e293b;
  --own-fg-2:             #475569;
  --own-fg-3:             #94a3b8;

  --own-primary:          #4338ca;
  --own-primary-hover:    #3730a3;
  --own-violet:           #7c3aed;
  --own-lavender:         #c4b5fd;
  --own-accent:           #818cf8;
  --own-gradient-primary: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);

  --own-success:          #22c55e;
  --own-danger:           #ef4444;
  --own-warning:          #f59e0b;
  --own-info:             #0ea5e9;

  /* warm-cream "Premium" interior language */
  --ow-ink:               #0b1020;
  --ow-ink-2:             #141a33;
  --ow-cream:             #f6f1e7;
  --ow-cream-deep:        #efe7d4;
  --ow-paper:             #ffffff;
  --ow-line:              #e6e1d7;
  --ow-line-soft:         #eee9dd;
  --ow-champagne:         #c9a96a;
  --ow-champagne-deep:    #a7864b;
  /* The champagne lifted off a dark ground. --ow-champagne is calibrated to stay
     legible on cream and paper; on the near-black of the promo bar the same value
     reads as the body of the line, and the call to action inside it needs a shade
     that steps forward without becoming a second colour. */
  --ow-champagne-light:   #e6cf9c;
  --ow-blush:             #f5e6d8;
  --ow-sage:              #cfd9c8;

  /* Height of the public promo bar. Named because the landing page's sticky
     section nav has to start exactly below it (see .promo-bar in this file). */
  --ow-promo-bar-height:  36px;

  --ow-serif:             "Cormorant Garamond", "Source Serif 4", Georgia, serif;
  --own-font-sans:        "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
                          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* The wordmark. Wherever the app name OWNAMIC is set as the brand — the app header, the
     landing hero, the auth cards, the partner nav, the mail header — it is this one face, so
     the name never reads as two different marks on two screens. --ow-serif is the display
     face for headings and stays Cormorant; it is not the wordmark. The company name
     "Ownamic UG (haftungsbeschränkt)" is not the wordmark either and keeps body type. */
  --own-wordmark-font:    'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --own-wordmark-weight:  700;
  --own-wordmark-track:   -0.02em;

  /* motion */
  --own-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --own-dur-fast:         150ms;
  --own-dur-base:         250ms;
}

/* On a phone in portrait the promo bar carries its sentence on two rows (see
   .promo-bar above), so the height the sticky section nav parks below has to grow
   with it. It lives here rather than next to the bar because a :root declaration
   further down the file would otherwise win over one placed there. */
@media (max-width: 480px) {
  :root { --ow-promo-bar-height: 46px; }
}

/* Shared editorial helpers (global, opt-in via class) */
.own-serif  { font-family: var(--ow-serif); font-weight: 500; letter-spacing: -0.01em; }
.own-italic { font-style: italic; color: var(--ow-champagne-deep); }
.own-eyebrow-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 700; color: var(--ow-champagne-deep);
}
.own-eyebrow-line .line { width: 28px; height: 1px; background: currentColor; opacity: 0.5; }

/* =========================================================================
   FAQ — <FaqComponent />
   Global (not scoped to `.lp`) because the same component is embedded on the
   landing page and rendered on its own at /faq, and both have to look the same.
   The type scale variables only exist inside `.lp`, so every use here carries the
   landing page's value as its fallback.
   ========================================================================= */
.faq-section {
  padding: 96px 0;
  color: var(--ow-ink);
  font-family: var(--own-font-sans);
}
.faq-section .faq-shell { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.lp .faq-section .faq-shell { max-width: none; padding: 0; }

/* Section head — eyebrow + serif headline left, lede right, hairline underneath. */
.faq-section .faq-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  padding-bottom: 26px; margin-bottom: 34px;
  border-bottom: 1px solid var(--ow-line);
}
.faq-section .faq-head .lhs { min-width: 0; }
.faq-section .faq-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--ow-eyebrow-size, 0.72rem); text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 700; color: var(--ow-champagne-deep);
}
.faq-section .faq-eyebrow .line { width: 28px; height: 1px; background: currentColor; opacity: 0.5; }
.faq-section .faq-title {
  margin: 16px 0 0;
  font-family: var(--ow-serif); font-weight: 500;
  font-size: var(--ow-h2-size, clamp(1.9rem, 3.2vw, 2.8rem));
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ow-ink);
}
.faq-section .faq-head .rhs {
  flex: 0 1 340px; text-align: right;
  font-size: var(--ow-body-size, 0.95rem); line-height: 1.65; color: var(--own-fg-2);
}

/* One card per question. Closed cards are cream on a hairline; the open one turns paper
   white and grows a champagne rule down its left edge, so the answer being read is the
   one thing on the page carrying the accent. */
.faq-section .faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-section .faq-item {
  position: relative; overflow: hidden;
  background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 16px;
  transition: background var(--own-dur-base) var(--own-ease),
              border-color var(--own-dur-base) var(--own-ease),
              box-shadow var(--own-dur-base) var(--own-ease);
}
.faq-section .faq-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ow-champagne); transform: scaleY(0); transform-origin: top;
  transition: transform var(--own-dur-base) var(--own-ease);
}
.faq-section .faq-item:hover { border-color: var(--ow-champagne); }
.faq-section .faq-item.is-open {
  background: var(--ow-paper); border-color: var(--ow-champagne);
  box-shadow: 0 14px 40px rgba(201, 169, 106, 0.16);
}
.faq-section .faq-item.is-open::before { transform: scaleY(1); }

/* The question is an <h3> for the document outline; the button inside it carries the
   whole row so the entire card is one hit target. */
.faq-section .faq-q-wrap { margin: 0; font: inherit; }
.faq-section .faq-q {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 20px 22px; cursor: pointer; text-align: left;
  background: none; border: 0; font-family: inherit;
  font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--ow-ink);
}
.faq-section .faq-q:focus-visible { outline: 2px solid var(--ow-champagne-deep); outline-offset: -4px; border-radius: 16px; }
.faq-section .faq-q-text { flex: 1; min-width: 0; }
.faq-section .faq-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--ow-paper); border: 1px solid var(--ow-line);
  color: var(--ow-champagne-deep);
  transition: background var(--own-dur-base) var(--own-ease),
              border-color var(--own-dur-base) var(--own-ease),
              color var(--own-dur-base) var(--own-ease);
}
.faq-section .faq-ico .material-symbols-outlined { font-size: 1.2rem; }
.faq-section .faq-item.is-open .faq-ico {
  background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne);
}
.faq-section .faq-chevron {
  flex: 0 0 auto; display: inline-flex; color: var(--own-fg-3);
  transition: transform var(--own-dur-base) var(--own-ease), color var(--own-dur-base) var(--own-ease);
}
.faq-section .faq-item.is-open .faq-chevron { transform: rotate(180deg); color: var(--ow-champagne-deep); }

/* Closed answers collapse to nothing but stay in the DOM, so the open/close reads as a
   movement rather than a jump. `grid-template-rows` is what makes that animatable without
   knowing the answer's height up front. */
.faq-section .faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--own-dur-base) var(--own-ease);
}
.faq-section .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-section .faq-a-inner {
  overflow: hidden; min-height: 0;
  padding: 0 22px 0 76px;
  font-size: var(--ow-body-size, 0.95rem); line-height: 1.7; color: var(--own-fg-2);
  transition: padding var(--own-dur-base) var(--own-ease);
}
.faq-section .faq-item.is-open .faq-a-inner { padding-bottom: 22px; }
.faq-section .faq-a-inner strong { color: var(--ow-ink); font-weight: 600; }
.faq-section .faq-a-inner a {
  color: var(--ow-champagne-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ow-champagne-deep) 45%, transparent);
}
.faq-section .faq-a-inner a:hover { color: var(--ow-ink); text-decoration-color: currentColor; }

@media (max-width: 860px) {
  .faq-section { padding: 64px 0; }
  .faq-section .faq-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .faq-section .faq-head .rhs { flex: 0 0 auto; text-align: left; }
  .faq-section .faq-q { gap: 12px; padding: 17px 18px; font-size: 0.98rem; }
  .faq-section .faq-a-inner { padding: 0 18px; }
  .faq-section .faq-item.is-open .faq-a-inner { padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-section .faq-item,
  .faq-section .faq-item::before,
  .faq-section .faq-a,
  .faq-section .faq-a-inner,
  .faq-section .faq-chevron { transition: none; }
}

/* =========================================================================
   Global "Add object" FAB — give the Radzen speed-dial a pill + label.
   RadzenFabMenu's main button is icon-only; we surface a localized label
   via a CSS variable set on the .global-add-fab wrapper in MainLayout.
   Purely additive — if Radzen markup shifts, the label simply won't show.
   ========================================================================= */
.global-add-fab { position: relative; z-index: 1100; }
.global-add-fab .rz-speeddial-fab { z-index: 1100 !important; }
.global-add-fab .rz-speeddial-fab > .rz-button .rz-button-text,
.global-add-fab .rz-fab .rz-button-text { display: none; }
.global-add-fab .rz-speeddial-fab > .rz-button::after,
.global-add-fab > div > .rz-button::after {
  content: var(--add-object-label, "Add object");
  font-family: var(--own-font-sans);
  font-weight: 700;
  font-size: 0.94rem;
  white-space: nowrap;
  margin-left: 2px;
}
.global-add-fab .rz-speeddial-fab > .rz-button,
.global-add-fab > div > .rz-button {
  width: auto !important;
  min-width: 0;
  border-radius: 999px !important;
  padding: 0 22px 0 16px !important;
  gap: 8px;
}

/* ═══════════════ SIX WAYS TO CAPTURE (Carousel) ═══════════════ */
.lp .lp-capture { background: var(--ow-paper); }
.lp .lp-capture-stage { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; margin-top: 40px; }

/* The three flavours of the one detection flow (single image · multi-image mode · video). */
.lp .lp-cap-flavors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: -32px 0 8px; }
.lp .cap-flavor { display: flex; align-items: flex-start; gap: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 14px; padding: 14px 18px; }
.lp .cap-flavor > .material-symbols-outlined { font-size: 1.35rem; color: var(--ow-champagne-deep); flex-shrink: 0; }
.lp .cap-flavor .cf-txt { display: flex; flex-direction: column; gap: 2px; }
.lp .cap-flavor .cf-txt b { font-size: 0.9rem; font-weight: 700; color: var(--ow-ink); }
.lp .cap-flavor .cf-txt em { font-style: normal; font-size: 0.8rem; line-height: 1.45; color: var(--own-fg-2); }

@media (max-width: 860px) {
  .lp .lp-cap-flavors { grid-template-columns: 1fr; margin: -24px 0 8px; }
}

/* Phone with live viewfinder */
.lp .cap-phone-col { display: flex; flex-direction: column; align-items: center; gap: 28px; position: relative; }
.lp .cap-phone { width: 300px; background: var(--ow-ink); border-radius: 44px; padding: 14px; box-shadow: 0 40px 90px rgba(11,16,32,0.28); position: relative; }
.lp .cap-phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 104px; height: 26px; background: var(--ow-ink); border-radius: 18px; z-index: 3; }
.lp .cap-screen { border-radius: 30px; overflow: hidden; background: #06070f; position: relative; height: 580px; display: flex; flex-direction: column; }
.lp .cap-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 10px; font-size: 0.74rem; font-weight: 700; color: white; z-index: 4; }
.lp .cap-status .icons { display: inline-flex; gap: 5px; }
.lp .cap-status .material-symbols-outlined { font-size: 0.95rem; }
.lp .cap-vf-head { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px; color: white; z-index: 4; }
.lp .cap-vf-head .vf-ico { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: white; }
.lp .cap-vf-head .vf-ico .material-symbols-outlined { font-size: 1rem; }
.lp .cap-vf-head .vf-txt { line-height: 1.15; }
.lp .cap-vf-head .vf-kind { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--ow-champagne); }
.lp .cap-vf-head .vf-name { font-size: 0.9rem; font-weight: 700; }
.lp .cap-vf-head .vf-rec { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); }
.lp .cap-vf-head .vf-rec .dot { width: 7px; height: 7px; border-radius: 999px; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: capPulse 1.4s var(--own-ease) infinite; }
.lp .cap-scene { flex: 1; margin: 0 14px; border-radius: 20px; position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 12px), linear-gradient(160deg, #1a2140, #0c1020 70%); }
.lp .cap-scene .scene-tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.64rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); padding: 3px 8px; border-radius: 6px; }
.lp .cap-scene::before, .lp .cap-scene::after { content: ""; position: absolute; width: 26px; height: 26px; z-index: 2; border: 2px solid rgba(255,255,255,0.35); }
.lp .cap-scene::before { top: 14px; right: 14px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.lp .cap-scene::after { bottom: 14px; left: 14px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.lp .cap-scene .scan-sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(transparent 46%, rgba(124,58,237,0.45) 50%, transparent 54%); background-size: 100% 220%; animation: capScanLine 2.6s linear infinite; }
.lp .det { position: absolute; z-index: 3; border: 1.5px solid var(--ow-champagne); border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 6px 16px rgba(0,0,0,0.3); animation: capDetIn 0.4s var(--own-ease) both; background: rgba(201,169,106,0.06); }
.lp .det .det-lbl { position: absolute; top: -1px; left: -1px; transform: translateY(-100%); display: inline-flex; align-items: baseline; gap: 6px; background: var(--ow-champagne); color: #1a1206; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 5px 5px 5px 0; white-space: nowrap; line-height: 1.2; }
.lp .det .det-lbl .v { font-variant-numeric: tabular-nums; opacity: 0.85; }
.lp .det.alt { border-color: var(--own-accent, #818cf8); background: rgba(129,140,248,0.08); }
.lp .det.alt .det-lbl { background: var(--own-accent, #818cf8); color: #0a0e2a; border-radius: 5px 5px 5px 0; }
@keyframes capDetIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes capScanLine { 0% { background-position: 0 -60%; } 100% { background-position: 0 160%; } }
@keyframes capPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
.lp .cap-doc { position: absolute; inset: 20px; z-index: 3; background: white; border-radius: 12px; padding: 14px 15px; color: var(--ow-ink); box-shadow: 0 14px 30px rgba(0,0,0,0.35); animation: capDetIn 0.4s var(--own-ease) both; }
.lp .cap-doc .cd-top { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ow-line); }
.lp .cap-doc .cd-top .material-symbols-outlined { color: var(--own-primary); font-size: 1.1rem; }
.lp .cap-doc .cd-top b { font-size: 0.82rem; }
.lp .cap-doc .cd-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 0.72rem; }
.lp .cap-doc .cd-row + .cd-row { border-top: 1px dashed var(--ow-line); }
.lp .cap-doc .cd-row .k { color: var(--own-fg-2); }
.lp .cap-doc .cd-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.lp .cap-doc .cd-row .v em { font-style: normal; color: var(--own-primary); }
.lp .cap-vf-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px 16px; z-index: 4; }
.lp .cap-vf-foot .sum { flex: 1; color: white; line-height: 1.2; }
.lp .cap-vf-foot .sum .s-num { font-family: var(--ow-serif); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
.lp .cap-vf-foot .sum .s-lbl { font-size: 0.68rem; color: rgba(255,255,255,0.6); margin-top: 1px; }
.lp .cap-vf-foot .shutter { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 18px; border-radius: 999px; background: var(--own-gradient-primary); color: white; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.86rem; white-space: nowrap; box-shadow: 0 8px 20px rgba(67,56,202,0.4); animation: capFabPulse 2.4s ease-in-out infinite; }
.lp .cap-vf-foot .shutter .material-symbols-outlined { font-size: 1.15rem; }
.lp .cap-vf-foot .shutter:hover { transform: translateY(-2px); animation: none; }
@keyframes capFabPulse { 0%, 100% { box-shadow: 0 8px 20px rgba(67,56,202,0.4); } 50% { box-shadow: 0 10px 28px rgba(124,58,237,0.65); } }

/* Copy + carousel controls */
.lp .cap-copy { position: relative; }
.lp .cap-copy .cc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lp .cap-copy .cc-step { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--own-fg-3); font-variant-numeric: tabular-nums; }
.lp .cap-copy .cc-kind { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-champagne-deep); }
.lp .cap-copy h3 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ow-ink); margin: 0 0 14px; }
.lp .cap-copy h3 em { font-style: italic; color: var(--own-primary); }
.lp .cap-copy .cc-desc { font-size: 1.06rem; line-height: 1.6; color: var(--own-fg-2); margin: 0 0 20px; max-width: 30rem; text-wrap: pretty; }
.lp .cc-uses { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.lp .cc-use { display: inline-flex; align-items: center; gap: 6px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 999px; padding: 7px 13px; font-size: 0.82rem; color: var(--ow-ink); font-weight: 500; }
.lp .cc-use .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
/* Sources behind the estimate on this step — the grounding made visible. */
.lp .cc-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 20px; }
.lp .cs-h { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--own-fg-3); }
.lp .cs-h .material-symbols-outlined { font-size: 0.95rem; color: var(--ow-champagne-deep); }
.lp .cs-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* Dashed and unfilled, so the same chip reads on the paper of the carousel and on
   the cream of the depth card without a second variant. */
.lp .cs-chip { display: inline-flex; align-items: center; border: 1px dashed var(--ow-champagne-deep); border-radius: 999px; padding: 4px 11px; font-size: 0.74rem; font-weight: 600; color: var(--ow-ink); background: transparent; }
.lp .cc-save { display: flex; align-items: center; gap: 12px; background: var(--ow-ink); color: white; border-radius: 14px; padding: 16px 18px; margin-bottom: 28px; }
.lp .cc-save .material-symbols-outlined { font-size: 1.4rem; color: var(--ow-champagne); flex-shrink: 0; }
.lp .cc-save span { font-size: 0.92rem; line-height: 1.4; }
.lp .cc-save b { color: var(--ow-champagne); font-weight: 700; }
.lp .cap-copy .cc-anim { animation: capCcIn 0.45s var(--own-ease) both; }
@keyframes capCcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.lp .cap-nav { display: flex; align-items: center; gap: 18px; }
.lp .cap-nav .arrow { width: 46px; height: 46px; border-radius: 999px; flex-shrink: 0; border: 1px solid var(--ow-line); background: var(--ow-paper); color: var(--ow-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--own-dur-fast), transform var(--own-dur-fast); }
.lp .cap-nav .arrow:hover { background: var(--ow-cream); transform: translateY(-2px); }
.lp .cap-dots { display: flex; gap: 8px; align-items: center; }
.lp .cap-dots button { height: 8px; width: 8px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: #cbd5e1; transition: width var(--own-dur-base) var(--own-ease), background var(--own-dur-base); }
.lp .cap-dots button.on { width: 30px; background: var(--own-primary); }
/* Real-time market research and the multi-image mode — the two things that turn a
   recognised object into an estimate you can check and correct. */
.lp .lp-cap-depth { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px; }
.lp .cap-depth-card { display: flex; flex-direction: column; gap: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 18px; padding: 22px 24px; }
.lp .cap-depth-card .cd-head { display: flex; align-items: flex-start; gap: 12px; }
.lp .cap-depth-card .cd-head > .material-symbols-outlined { font-size: 1.5rem; color: var(--ow-champagne-deep); flex-shrink: 0; }
.lp .cap-depth-card .cd-head b { display: block; font-size: 1.02rem; font-weight: 700; color: var(--ow-ink); line-height: 1.3; }
.lp .cap-depth-card .cd-tag { display: inline-block; margin-top: 4px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--own-primary); }
.lp .cap-depth-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }
.lp .cap-depth-card p b { color: var(--ow-ink); font-weight: 700; }
.lp .cap-depth-card .cd-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lp .cap-depth-card .cd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp .cap-depth-card .cd-foot { margin-top: auto; padding-top: 4px; font-size: 0.8rem; line-height: 1.5; font-style: italic; color: var(--own-fg-3); }
@media (max-width: 860px) {
  .lp .lp-cap-depth { grid-template-columns: 1fr; margin-top: 32px; }
}
.lp .capture-note { margin-top: 32px; display: flex; gap: 12px; align-items: flex-start; font-size: 0.82rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .capture-note .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.lp .capture-note strong { color: var(--ow-ink); }

/* Quick-scan mode (original CaptureComponent) */
.lp .lp-capture-scan { margin-top: 32px; }
.lp .lp-cap-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-paper); color: var(--ow-ink); font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background var(--own-dur-fast); }
.lp .lp-cap-back:hover { background: var(--ow-cream); }
.lp .lp-capture-scan-demo { display: flex; justify-content: center; }

@media (max-width: 1024px) {
  .lp .lp-capture-stage { grid-template-columns: 1fr; gap: 48px; }
  .lp .cap-copy { order: 2; }
  .lp .cap-phone-col { order: 1; }
}
@media (max-width: 720px) {
  .lp .cap-phone { width: 270px; }
  .lp .cap-screen { height: 540px; }
  .lp .cc-save span { font-size: 0.86rem; }
}

/* ═══════════════ OBJECT HISTORY & TRANSFER ═══════════════ */
.lp .lp-ohist { background: var(--ow-paper); }
/* ── Sealed events (third-party signatures) ─────────────────────────────────
   Reuses the object-history grid and card so the section reads as part of the
   same story rather than a bolt-on. */
.lp .lp-seal-steps { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 20px; }
.lp .lp-seal-step { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--own-fg-2, #4a5163); }
.lp .lp-seal-step .material-symbols-outlined { font-size: 1.15rem; color: var(--own-primary); }

.lp .lp-seal-receipt {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 12px;
    background: rgba(201, 169, 106, 0.10);
    border: 1px solid rgba(201, 169, 106, 0.35);
}
.lp .lp-seal-receipt .material-symbols-outlined { font-size: 1.5rem; color: #a7864b; }
.lp .lp-seal-domain { font-weight: 700; font-size: 0.95rem; color: var(--own-fg-1, #0b1020); }
.lp .lp-seal-hash { font-family: 'Courier New', Courier, monospace; font-size: 0.8rem; color: var(--own-fg-3, #8a8271); }
.lp .lp-seal-note { margin-top: 12px; font-size: 0.78rem; line-height: 1.6; color: var(--own-fg-3, #8a8271); }

.lp .lp-ohist-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.lp .lp-ohist-copy h2 em { color: var(--own-primary); font-style: italic; }
.lp .lp-ohist-copy .lp-lede { font-size: 1.1rem; line-height: 1.65; color: var(--own-fg-2); margin: 20px 0 28px; }
.lp .ohist-points { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lp .ohist-points li { display: flex; gap: 14px; align-items: flex-start; }
.lp .ohist-points li .material-symbols-outlined { color: var(--own-primary); font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.lp .ohist-points b, .lp .ohist-points strong { color: var(--ow-ink); font-weight: 700; }
.lp .ohist-points span { font-size: 0.98rem; line-height: 1.5; color: var(--own-fg-1); }
.lp .ohist-card { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 22px; padding: 26px; box-shadow: 0 30px 60px rgba(11, 16, 32, 0.10); }
.lp .ohist-obj { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--ow-line); }
.lp .ohist-obj .thumb { width: 62px; height: 62px; border-radius: 14px; background: white; border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.lp .ohist-obj .thumb img { width: 82%; height: 82%; object-fit: contain; }
.lp .ohist-obj .oi-name { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; color: var(--ow-ink); letter-spacing: -0.01em; line-height: 1.1; }
.lp .ohist-obj .oi-sub { font-size: 0.82rem; color: var(--own-fg-2); margin-top: 3px; }
.lp .ohist-obj .oi-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--ow-line); border-radius: 999px; padding: 6px 12px; font-size: 0.72rem; font-weight: 700; color: var(--ow-champagne-deep); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.lp .ohist-obj .oi-badge .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--own-success); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.lp .timeline { margin: 22px 0 0; }
.lp .tl-item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 24px; }
.lp .tl-item:last-child { padding-bottom: 0; }
.lp .tl-node { position: relative; }
.lp .tl-dot { width: 40px; height: 40px; border-radius: 12px; background: white; border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; color: var(--own-primary); position: relative; z-index: 1; }
.lp .tl-dot .material-symbols-outlined { font-size: 1.15rem; }
.lp .tl-item:not(:last-child) .tl-node::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: -20px; width: 2px; background: var(--ow-line); }
.lp .tl-body .tl-date { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--own-fg-3); }
.lp .tl-body .tl-title { font-weight: 700; color: var(--ow-ink); margin: 3px 0 4px; font-size: 1rem; }
.lp .tl-body .tl-desc { font-size: 0.88rem; color: var(--own-fg-2); line-height: 1.45; }
.lp .tl-attach { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.lp .tl-chip { display: inline-flex; align-items: center; gap: 5px; background: white; border: 1px solid var(--ow-line); border-radius: 999px; padding: 4px 10px; font-size: 0.74rem; color: var(--ow-ink); font-weight: 500; }
.lp .tl-chip .material-symbols-outlined { font-size: 0.9rem; color: var(--ow-champagne-deep); }
.lp .tl-item.tl-transfer .tl-dot { background: var(--own-gradient-primary); color: white; border-color: transparent; box-shadow: 0 8px 20px rgba(67,56,202,0.35); }
.lp .tl-transfer-card { background: var(--ow-ink); color: white; border-radius: 16px; padding: 16px 18px; margin-top: 2px; }
.lp .tl-transfer-card .tc-flow { display: flex; align-items: center; gap: 12px; }
.lp .tc-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lp .tc-ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: white; }
.lp .tc-ava.me { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); }
.lp .tc-ava.them { background: var(--own-gradient-primary); }
.lp .tc-who .tc-lbl { font-size: 0.8rem; line-height: 1.2; }
.lp .tc-who .tc-lbl small { display: block; color: rgba(255,255,255,0.55); font-size: 0.7rem; margin-top: 1px; }
.lp .tc-arrow { color: var(--ow-champagne); display: flex; align-items: center; }
.lp .tl-transfer-card .tc-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.72); }
.lp .tl-transfer-card .tc-note .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne); }

/* ═══════════════ VALUE BY LAW (Belegbare Zahlen) ═══════════════ */
.lp .lp-nutzen { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }
.lp .lp-nutzen .lp-section-head h2 em { color: var(--own-primary); font-style: italic; }
.lp .nutzen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* The eleven cards are read in four groups — estate first, then everyday life and resale, then
   tax, then plans — so the group heading is a quiet ruled line rather than a second section head. */
.lp .nutzen-group + .nutzen-group { margin-top: 44px; }
.lp .ng-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.lp .ng-head .ng-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: var(--ow-paper); border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; color: var(--ow-champagne-deep); }
.lp .ng-head .ng-ico .material-symbols-outlined { font-size: 1rem; }
.lp .ng-head h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0; }
.lp .ng-head .ng-rule { flex: 1; height: 1px; background: var(--ow-line); }
.lp .nb { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 30px 28px 26px; display: flex; flex-direction: column; position: relative; transition: transform var(--own-dur-base) var(--own-ease), box-shadow var(--own-dur-base) var(--own-ease); }
.lp .nb:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(11,16,32,0.10); }
.lp .nb .nb-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--ow-champagne-deep); margin-bottom: 18px; }
.lp .nb .nb-fig { font-family: var(--ow-serif); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; color: var(--ow-ink); }
.lp .nb .nb-fig .sub { display: block; font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--own-fg-3); letter-spacing: 0.02em; margin-top: 8px; text-transform: none; }
.lp .nb .nb-law { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; margin: 16px 0 0; padding: 4px 10px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 8px; font-size: 0.72rem; font-weight: 600; color: var(--own-fg-2); }
.lp .nb .nb-law .material-symbols-outlined { font-size: 0.85rem; color: var(--ow-champagne-deep); }
/* The badge says what kind of evidence the number rests on. A paragraph is the strongest claim
   and keeps the champagne; a market analysis and an openly declared example are visibly quieter,
   so nobody reads a range or a worked example as if it were written in the law. */
.lp .nb .nb-law.nb-ev-law { border-color: var(--ow-champagne); }
.lp .nb .nb-law.nb-ev-stat .material-symbols-outlined,
.lp .nb .nb-law.nb-ev-study .material-symbols-outlined { color: var(--own-primary); }
.lp .nb .nb-law.nb-ev-market,
.lp .nb .nb-law.nb-ev-example { color: var(--own-fg-3); }
.lp .nb .nb-law.nb-ev-market .material-symbols-outlined,
.lp .nb .nb-law.nb-ev-example .material-symbols-outlined { color: var(--own-fg-3); }
/* "OWNAMIC holds the evidence ready" is only worth saying if the evidence is on the page. */
.lp .nb .nb-src { display: flex; gap: 7px; align-items: flex-start; margin: 14px 0 0; font-size: 0.73rem; line-height: 1.45; color: var(--own-fg-3); }
.lp .nb .nb-src .material-symbols-outlined { font-size: 0.85rem; flex-shrink: 0; margin-top: 1px; }
.lp .nb .nb-src b { font-weight: 700; color: var(--own-fg-2); }
.lp .nb .nb-fact { font-size: 0.92rem; line-height: 1.55; color: var(--own-fg-2); margin: 16px 0 0; text-wrap: pretty; flex: 1; }
.lp .nb .nb-role { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ow-line); display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; color: var(--ow-ink); }
.lp .nb .nb-role .r-ico { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: var(--ow-cream); border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; color: var(--own-primary); }
.lp .nb .nb-role .r-ico .material-symbols-outlined { font-size: 0.95rem; }
.lp .nb .nb-role b { font-weight: 700; }
.lp .nb .nb-fine { font-size: 0.74rem; color: var(--own-fg-3); line-height: 1.45; margin: 12px 0 0; }
/* Four small tiles, so they sit as a 2×2 block rather than a row of three with an orphan. */
.lp .nutzen-more { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp .nb-mini { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.lp .nb-mini .m-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: var(--ow-cream); border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; color: var(--own-primary); }
.lp .nb-mini .m-title { font-weight: 700; color: var(--ow-ink); font-size: 0.96rem; margin: 0 0 3px; }
.lp .nb-mini .m-sub { font-size: 0.85rem; color: var(--own-fg-2); line-height: 1.45; margin: 0; }
/* Folded shut: the card already names its source, this is the list for checking the whole
   section at once. `details` gives the disclosure for free — no script on the landing page. */
.lp .nutzen-sources { margin-top: 28px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 14px; padding: 14px 20px; }
.lp .nutzen-sources > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 0.86rem; font-weight: 700; color: var(--ow-ink); }
.lp .nutzen-sources > summary::-webkit-details-marker { display: none; }
.lp .nutzen-sources > summary .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne-deep); }
.lp .nutzen-sources > summary .ns-chev { margin-left: auto; font-size: 1.1rem; color: var(--own-fg-3); transition: transform var(--own-dur-base) var(--own-ease); }
.lp .nutzen-sources[open] > summary .ns-chev { transform: rotate(180deg); }
.lp .nutzen-sources ol { margin: 14px 0 4px; padding-left: 22px; display: grid; gap: 7px; }
.lp .nutzen-sources li { font-size: 0.78rem; line-height: 1.5; color: var(--own-fg-2); }
.lp .nutzen-legal { margin-top: 32px; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 14px; display: flex; gap: 14px; align-items: flex-start; font-size: 0.82rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .nutzen-legal .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.lp .nutzen-legal strong { color: var(--ow-ink); }

@media (max-width: 1024px) {
  .lp .lp-ohist-grid { grid-template-columns: 1fr; gap: 48px; }
  .lp .nutzen-grid, .lp .nutzen-more { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lp .nutzen-grid, .lp .nutzen-more { grid-template-columns: 1fr; }
  .lp .nb .nb-fig { font-size: 2.2rem; }
  .lp .tl-transfer-card .tc-flow { flex-wrap: wrap; gap: 10px; }
}

/* ─────────────── OWNY STUDIO (landing showcase) ─────────────── */
.lp .lp-studio { background: var(--ow-cream); }
.lp .lp-studio-card {
  position: relative;
  background: var(--ow-ink);
  border-radius: 30px;
  padding: 48px 40px 44px;
  color: #fff;
  overflow: hidden;
}
.lp .lp-studio-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(560px 360px at 88% -12%, rgba(124,58,237,0.34), transparent 60%),
    radial-gradient(460px 320px at -8% 116%, rgba(201,169,106,0.2), transparent 60%);
  pointer-events: none;
}
.lp .lp-studio-card > * { position: relative; }
.lp .lp-studio-head { max-width: 620px; margin-bottom: 32px; }
.lp .lp-studio-head .lp-eyebrow { color: var(--ow-champagne); }
.lp .lp-studio-h2 {
  font-weight: 500;
  font-size: var(--ow-h2-size);
  line-height: 1.1; letter-spacing: -0.02em; color: #fff;
  margin: 14px 0 12px;
}
.lp .lp-studio-h2 em { font-style: italic; color: var(--ow-champagne); }
.lp .lp-studio-lede { margin: 0; font-size: var(--ow-lede-size); line-height: 1.65; color: rgba(255,255,255,0.72); }
.lp .lp-studio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.lp .lp-studio-demo {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.lp .lp-studio-demo .sd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp .lp-studio-demo .sd-ttl { font-weight: 500; font-size: 1.1rem; color: #fff; }
.lp .lp-studio-demo .sd-nat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.lp .lp-studio-demo .sd-nat .material-symbols-outlined { font-size: 0.9rem; }
.lp .lp-studio-demo .sd-tl { display: flex; flex-direction: column; gap: 10px; }
.lp .lp-studio-demo .sd-m { display: flex; gap: 10px; align-items: flex-start; }
.lp .lp-studio-demo .sd-m .dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 4px; flex-shrink: 0; background: var(--ow-champagne); }
.lp .lp-studio-demo .sd-mt { font-size: 0.82rem; color: rgba(255,255,255,0.9); line-height: 1.35; }
.lp .lp-studio-demo .sd-mt span { display: block; font-size: 0.66rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.lp .lp-studio-demo .sd-chart .sd-cx { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.lp .lp-studio-demo .sd-chart .sd-cx .v { font-weight: 600; font-size: 1.4rem; }
.lp .lp-studio-demo .sd-chart .sd-cx .lab { font-size: 0.68rem; color: rgba(255,255,255,0.55); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lp .lp-studio-demo .sd-chart svg { width: 100%; height: auto; display: block; }
.lp .lp-studio-demo .sd-scene {
  position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(124,58,237,0.16) 0 14px, rgba(124,58,237,0.06) 14px 28px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
}
.lp .lp-studio-demo .sd-scene .sd-scene-icon { font-size: 2rem; color: #c4b5fd; }
.lp .lp-studio-demo .sd-scene .sd-ai {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 7px; border-radius: 999px;
  background: rgba(11,16,32,0.82); color: #fff; font-size: 0.64rem; font-weight: 700;
}
.lp .lp-studio-demo .sd-scene .sd-ai .material-symbols-outlined { font-size: 0.85rem; color: #c4b5fd; }
/* Chronik object label */
.lp .lp-studio-demo .sd-obj {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ow-champagne); text-transform: uppercase;
}
.lp .lp-studio-demo .sd-obj .material-symbols-outlined { font-size: 0.95rem; }
/* Perspective carousel — original photos, captions written by OWNY */
.lp .lp-studio-demo .sd-carousel { display: flex; flex-direction: column; gap: 10px; }
.lp .lp-studio-demo .sd-scene .sd-caption {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 11px;
  background: rgba(11,16,32,0.86); color: #fff; text-align: left;
}
.lp .lp-studio-demo .sd-scene .sd-caption > .material-symbols-outlined { font-size: 0.95rem; color: #c4b5fd; flex-shrink: 0; }
.lp .lp-studio-demo .sd-scene .sd-caption .c-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lp .lp-studio-demo .sd-scene .sd-caption b { font-size: 0.76rem; font-weight: 600; line-height: 1.25; }
.lp .lp-studio-demo .sd-scene .sd-caption em {
  font-style: normal; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.lp .lp-studio-demo .sd-scene.has-image {
  background: rgba(255,255,255,0.05); cursor: pointer; padding: 0;
}
.lp .lp-studio-demo .sd-scene .sd-scene-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp .lp-studio-demo .sd-scene .sd-ai.sd-orig { background: rgba(201,169,106,0.94); color: #0b1020; }
.lp .lp-studio-demo .sd-scene .sd-ai.sd-orig .material-symbols-outlined { color: #0b1020; }
.lp .lp-studio-demo .sd-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.lp .lp-studio-demo .sd-thumb {
  position: relative; flex: 0 0 auto; width: 58px; height: 58px;
  border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lp .lp-studio-demo .sd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp .lp-studio-demo .sd-thumb:hover { transform: translateY(-1px); }
.lp .lp-studio-demo .sd-thumb.on { border-color: var(--ow-champagne); box-shadow: 0 0 0 2px rgba(201,169,106,0.4); }
.lp .lp-studio-demo .sd-thumb-badge {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 999px; background: rgba(11,16,32,0.82); color: #fff;
  display: grid; place-items: center;
}
.lp .lp-studio-demo .sd-thumb-badge .material-symbols-outlined { font-size: 0.62rem; color: #c4b5fd; }
.lp .lp-studio-demo .sd-thumb-badge.orig { background: rgba(201,169,106,0.94); }
.lp .lp-studio-demo .sd-thumb-badge.orig .material-symbols-outlined { color: #0b1020; }
.lp .lp-studio-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); }
.lp .lp-studio-note { font-size: 0.94rem; color: rgba(255,255,255,0.6); font-style: italic; }
@media (max-width: 820px) {
  .lp .lp-studio-grid { grid-template-columns: 1fr; }
  .lp .lp-studio-card { padding: 34px 22px 30px; }
}

/* ─────────────── EVOLUTION SECTION (Die goldene Mitte) ───────────────
   Ported from the "Landing - Evolution" design. Namespaced under `.lp .lp-evo`.
   The OWNY icon uses <OwnyIconComponent> and the OWNAMIC wordmark is rendered
   as text via `.hero-logo-text-span` (the header brand font), so no image
   assets from the design are pulled in. */
.lp .lp-evo { overflow: hidden; }

/* Header */
.lp .lp-evo .evo-head { text-align: center; max-width: 840px; margin: 0 auto 84px; }
.lp .lp-evo .evo-eyebrow { margin-bottom: 22px; }
.lp .lp-evo .evo-head h2 { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-h1-size); line-height: 1.06; letter-spacing: -0.02em; color: var(--ow-ink); margin: 0 0 26px; text-wrap: balance; }
.lp .lp-evo .evo-head h2 em { font-style: italic; color: var(--ow-champagne-deep); }
.lp .lp-evo .evo-head p { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 0; text-wrap: pretty; }

/* Podium — OWNAMIC sits in the middle column, raised between the two prior ways */
.lp .lp-evo .stairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: end; margin-bottom: 70px; }
.lp .lp-evo .stair { position: relative; border-radius: 20px; padding: 34px 30px 32px; display: flex; flex-direction: column; min-height: 100%; }
.lp .lp-evo .stair-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.lp .lp-evo .stair-badge .glyph { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.lp .lp-evo .stair h3 { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 6px; }
.lp .lp-evo .stair .approach { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; margin: 0 0 18px; }
.lp .lp-evo .stair .lbl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 12px; }
.lp .lp-evo .stair .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.lp .lp-evo .stair .chips li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.92rem; line-height: 1.35; font-weight: 600; }
.lp .lp-evo .stair .chips li .material-symbols-outlined { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* The two prior ways — muted, flat, lower, one on each side of the peak */
.lp .lp-evo .stair.flat { background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 8px 24px rgba(11, 16, 32, 0.05); }
.lp .lp-evo .stair.flat .stair-badge { color: var(--own-fg-3); }
.lp .lp-evo .stair.flat .stair-badge .glyph { background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--own-fg-2); }
.lp .lp-evo .stair.flat h3 { color: var(--ow-ink); }
.lp .lp-evo .stair.flat .approach { color: var(--own-fg-3); }
.lp .lp-evo .stair.flat .lbl { color: #c0392b; opacity: 0.85; }
.lp .lp-evo .stair.flat .chips li { color: var(--own-fg-2); }
.lp .lp-evo .stair.flat .chips li .material-symbols-outlined { color: #c0392b; opacity: 0.7; }
.lp .lp-evo .stair.s1, .lp .lp-evo .stair.s2 { margin-bottom: 0; }

/* The golden middle — elevated, glowing, tallest */
.lp .lp-evo .stair.peak { background: var(--ow-ink); color: #fff; border: 1px solid var(--ow-champagne); box-shadow: 0 46px 100px rgba(11, 16, 32, 0.34); margin-bottom: 78px; overflow: hidden; }
.lp .lp-evo .stair.peak::before { content: ""; position: absolute; top: -90px; right: -70px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(201, 169, 106, 0.34), transparent 66%); pointer-events: none; }
.lp .lp-evo .stair.peak .stair-badge { color: var(--ow-champagne); }
.lp .lp-evo .stair.peak .stair-badge .glyph { background: var(--own-gradient-primary); border: 1px solid transparent; color: #fff; box-shadow: 0 8px 22px rgba(67, 56, 202, 0.5); overflow: hidden; }
.lp .lp-evo .stair.peak .stair-badge .glyph img { width: 86%; height: 86%; object-fit: contain; }
.lp .lp-evo .stair.peak h3 { color: #fff; }
/* OWNAMIC wordmark rendered as header brand text, sized to the h3 */
.lp .lp-evo .stair.peak h3 .hero-logo-text-span { font-size: inherit; line-height: inherit; margin: 0; vertical-align: baseline; letter-spacing: var(--own-wordmark-track); }
.lp .lp-evo .stair.peak .approach { color: var(--ow-champagne); }
.lp .lp-evo .stair.peak .lbl { color: var(--ow-champagne); }
.lp .lp-evo .stair.peak .chips li { color: #fff; }
.lp .lp-evo .stair.peak .chips li .material-symbols-outlined { color: var(--ow-champagne); }

/* connecting rail under the stairs */
.lp .lp-evo .stairs-rail { position: relative; height: 3px; background: linear-gradient(90deg, var(--ow-line), var(--ow-champagne) 50%, var(--ow-line)); border-radius: 3px; margin: 0 6px 70px; opacity: 0.7; }
.lp .lp-evo .stairs-rail .tick { position: absolute; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--ow-champagne); transform: translateX(-50%); }
.lp .lp-evo .stairs-rail .tick:nth-child(1) { left: 16.6%; background: var(--own-fg-3); }
.lp .lp-evo .stairs-rail .tick:nth-child(2) { left: 50%; box-shadow: 0 0 14px var(--ow-champagne); }
.lp .lp-evo .stairs-rail .tick:nth-child(3) { left: 83.3%; background: var(--own-fg-3); }

/* Proof points */
.lp .lp-evo .evo-proof { background: var(--ow-paper); border: 1px solid var(--ow-champagne); border-radius: 22px; padding: 40px 44px; box-shadow: 0 20px 50px rgba(201, 169, 106, 0.14); }
.lp .lp-evo .evo-proof-head { font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 30px; }
.lp .lp-evo .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.lp .lp-evo .proof { display: flex; flex-direction: column; gap: 14px; }
.lp .lp-evo .proof .p-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(201, 169, 106, 0.14); border: 1px solid rgba(201, 169, 106, 0.34); display: flex; align-items: center; justify-content: center; color: var(--ow-champagne-deep); font-size: 1.4rem; }
.lp .lp-evo .proof h4 { font-size: 1.02rem; font-weight: 700; color: var(--ow-ink); margin: 0; }
.lp .lp-evo .proof p { font-size: 0.92rem; line-height: 1.6; color: var(--own-fg-2); margin: 0; text-wrap: pretty; }

@media (max-width: 1024px) {
  .lp .lp-evo .stairs { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .lp .lp-evo .stair.s1, .lp .lp-evo .stair.s2, .lp .lp-evo .stair.peak { margin-bottom: 0; }
  .lp .lp-evo .proof-grid { grid-template-columns: 1fr; gap: 24px; }
  .lp .lp-evo .evo-proof { padding: 32px 28px; }
}

/* ── STANCE (Unsere Haltung) ──
   The conviction the trust chapter opens with, directly above the founder story: the
   pocket-watch movement as a round vignette on the left, the copy on the right, closed
   by a champagne-ruled takeaway line. Below 1024px it stacks with the image first,
   left-aligned like the rest of the copy. */
.lp .lp-stance .lp-stance-grid { display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: center; }
.lp .lp-stance-visual { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lp .lp-stance-img { width: min(300px, 70vw); aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; border: 1px solid var(--ow-line); box-shadow: 0 30px 70px rgba(11, 16, 32, 0.2); }
.lp .lp-stance-img-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; color: var(--own-fg-3); }
.lp .lp-stance-copy { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.lp .lp-stance-copy h2 { margin: 0; }
.lp .lp-stance-copy h2 em { font-style: italic; color: var(--ow-champagne-deep); font-weight: 400; }
.lp .lp-stance-copy p { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 0; text-wrap: pretty; }
.lp .lp-stance-note { border-left: 3px solid var(--ow-champagne); padding: 6px 0 6px 20px; font-size: var(--ow-lede-size); line-height: 1.6; color: var(--own-fg-1); text-wrap: pretty; }

@media (max-width: 1024px) {
  .lp .lp-stance .lp-stance-grid { grid-template-columns: 1fr; gap: 40px; }
  .lp .lp-stance-visual { align-items: flex-start; }
}

/* ── FOUNDER STORY SECTION ── */
.lp .lp-founder-story {
    background: transparent;
    padding: 80px 0;
}

.lp .founder-story-card {
    display: grid;
    grid-template-columns: 1.15fr 1px 0.85fr;
    background: radial-gradient(circle at 85% 20%, #171f37 0%, #0b1020 60%);
    border: 1.5px solid rgba(201, 169, 106, 0.35); /* champagne border */
    border-radius: 28px;
    padding: 64px;
    box-shadow: 0 40px 90px rgba(11, 16, 32, 0.35);
    position: relative;
    overflow: hidden;
    align-items: center;
}

/* Background blob overlay for additional glow */
.lp .founder-story-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 106, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.lp .founder-story-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
}

.lp .founder-story-left .fs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--ow-champagne);
}

.lp .founder-story-left .fs-eyebrow .line {
    width: 24px;
    height: 1px;
    background: var(--ow-champagne);
    opacity: 0.8;
}

.lp .founder-story-left h2 {
    font-family: var(--ow-serif), 'Libre Baskerville', Georgia, serif;
    font-weight: 500;
    font-size: var(--ow-h2-size);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: white;
    margin: 0;
}

.lp .founder-story-left h2 em {
    font-style: italic;
    color: var(--ow-champagne);
    font-weight: 400;
}

.lp .founder-story-left .fs-text {
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 10px;
    max-width: 580px;
}

.lp .founder-story-left .fs-action {
    margin-top: 10px;
}

.lp .founder-story-left .lp-btn.fs-btn {
    background: linear-gradient(135deg, #4b2bc4, #7f37e6);
    color: white !important;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(127, 55, 230, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp .founder-story-left .lp-btn.fs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(127, 55, 230, 0.45);
}

/* Gap and top margin are set for the portrait the line now opens with (`.fs-avatar` below);
   at the icon's 8px a 44px circle sat on top of the text. */
.lp .founder-story-left .fs-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 14px;
}

/* Author reference in the founder story: the round portrait of the person the section speaks in
   the voice of. It is the same picture the signed blog posts carry, so the two surfaces credit
   one recognisable person rather than two anonymous first-person texts. The champagne ring is what
   lifts a photograph off the near-black card — on this ground an unringed circle reads as a hole —
   and `object-fit: cover` keeps any crop of the source file filling the circle instead of being
   squashed into it. The meta line it sits in stays small and quiet; the portrait is the only thing
   in it that carries weight. */
.lp .founder-story-left .fs-meta .fs-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ow-champagne);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Divider line */
.lp .founder-story-divider {
    width: 1px;
    height: 80%;
    background: rgba(255, 255, 255, 0.12);
    align-self: center;
}

.lp .founder-story-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-left: 20px;
    z-index: 2;
}

.lp .founder-story-right .fs-img-container {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lp .founder-story-right .fs-img-container img {
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
}

.lp .founder-story-right blockquote {
    font-family: var(--ow-serif), 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.4;
    color: white;
    margin: 0;
    font-weight: 400;
}

.lp .founder-story-right cite {
    font-family: var(--ow-serif), 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ow-champagne);
    margin-top: -10px;
}

@media (max-width: 1024px) {
    .lp .founder-story-card {
        grid-template-columns: 1fr;
        padding: 40px;
        gap: 40px;
    }
    .lp .founder-story-divider {
        display: none;
    }
    .lp .founder-story-right {
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 40px;
    }
}

/* ── BLOG · BACK LINK ──
   The way out of /blog and of every article, top left above the title. Both are public
   pages a visitor can arrive at straight from a search result, so the app's own navigation
   may be the one thing they have never seen. Same shape and the same behaviour as the
   in-app `.own-canvas .oc-back`; it lives here rather than in either page's scoped CSS
   because BlogList and BlogPostPage share it. */
.blog-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--own-fg-2);
    text-decoration: none;
    transition: color var(--own-dur-fast) var(--own-ease);
}

.blog-back:hover,
.blog-back:focus-visible {
    color: var(--ow-ink);
    text-decoration: none;
}

/* Radzen icons rather than `material-symbols-outlined`: that font is only wired up
   under `.lp`, and the blog pages use Radzen icons throughout. */
.blog-back .rz-icon,
.blog-back .rzi,
.blog-back .material-symbols-outlined {
    font-size: 1.2rem;
}

/* ── BLOG · FEATURED FOUNDER STORY ──
   The founder's story pinned to the top right of /blog. It is the landing page's
   `.lp .founder-story-card` compressed into one column: same ink field, champagne
   rule and serif headline, same violet call-to-action, so a reader arriving from the
   start page recognises it. Lives here rather than in BlogList.razor.css because the
   ink-and-champagne language belongs to the theme, not to one component. Below 900px
   the header stacks and the card spans the full width. */
.blog-list-header-text { flex: 1 1 300px; min-width: 0; }

.blog-founder-card {
    flex: 0 0 330px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border-radius: 22px;
    text-decoration: none;
    background: radial-gradient(circle at 85% 15%, #171f37 0%, #0b1020 60%);
    border: 1.5px solid rgba(201, 169, 106, 0.35);
    box-shadow: 0 24px 60px rgba(11, 16, 32, 0.28);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* The same champagne glow the landing card carries in its top-right corner. */
.blog-founder-card::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 106, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.blog-founder-card:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(11, 16, 32, 0.38); }
.blog-founder-card > * { position: relative; z-index: 2; }

.blog-founder-card .bfc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--ow-champagne);
}

.blog-founder-card .bfc-eyebrow .line { width: 20px; height: 1px; background: var(--ow-champagne); opacity: 0.8; }

.blog-founder-card .bfc-title {
    font-family: var(--ow-serif), 'Libre Baskerville', Georgia, serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0;
}

.blog-founder-card .bfc-title em { font-style: italic; color: var(--ow-champagne); font-weight: 400; }

.blog-founder-card .bfc-img {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.blog-founder-card .bfc-img img { width: 100%; height: 132px; object-fit: cover; display: block; }

.blog-founder-card .bfc-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    text-wrap: pretty;
}

.blog-founder-card .bfc-cta {
    align-self: flex-start;
    background: linear-gradient(135deg, #4b2bc4, #7f37e6);
    color: #fff;
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 8px 24px rgba(127, 55, 230, 0.35);
    transition: box-shadow 0.2s ease;
}

.blog-founder-card:hover .bfc-cta { box-shadow: 0 12px 30px rgba(127, 55, 230, 0.45); }

.blog-founder-card .bfc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.blog-founder-card .bfc-meta .bfc-meta-icon { font-size: 1rem; width: 1rem; height: 1rem; color: var(--ow-champagne-deep); }

@media (max-width: 900px) {
    .blog-founder-card { flex: 1 1 100%; }
}

/* Desktop: the card leaves the header's right-hand column and becomes a row of its own,
   centered under the heading (the row itself is arranged in BlogList.razor.css). Full
   page width would stretch the single column into a tall band of empty ink, so the card
   also turns two-column here — the picture on the left, the story beside it. Grid rather
   than a row of flex children because the picture spans every text row and the markup
   has no wrapper around the text to flex against. The 901px floor is the exact
   complement of the block above: on mobile none of this applies and the card stays the
   single column it already is. */
@media (min-width: 901px) {
    /* A full-line basis: it fills the header's first flex line, which is what pushes the
       card onto the second one. */
    .blog-list-header-text { flex: 1 1 100%; }

    .blog-founder-card {
        flex: 0 1 760px;
        max-width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto auto;
        grid-template-areas:
            "img eyebrow"
            "img title"
            "img text"
            "img cta"
            "img meta";
        column-gap: 32px;
        row-gap: 14px;
        /* The text rows size to their content; only the picture stretches (below). The
           `1fr` on the text row takes up whatever the taller picture adds, which settles
           the call-to-action and the meta line against the bottom of the image. */
        align-items: start;
    }

    .blog-founder-card .bfc-eyebrow { grid-area: eyebrow; justify-self: start; }
    .blog-founder-card .bfc-title { grid-area: title; }
    .blog-founder-card .bfc-text { grid-area: text; }
    /* Grid items stretch across their column by default, which would pull the pill-shaped
       call-to-action the full width of the text column. */
    .blog-founder-card .bfc-cta { grid-area: cta; justify-self: start; }
    .blog-founder-card .bfc-meta { grid-area: meta; }

    /* Spans all five text rows, so the picture is sized by the column beside it instead of
       by the fixed 132px it carries when stacked. */
    .blog-founder-card .bfc-img {
        grid-area: img;
        align-self: stretch;
        position: relative;
        min-height: 280px;
    }

    /* Taken out of flow rather than given `height: 100%`: a percentage height resolves
       against the parent's own computed height, which a stretched grid item does not have.
       `overflow: hidden` on `.bfc-img` still clips it to the rounded corners. */
    .blog-founder-card .bfc-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

/* =========================================================================
   OWNAMIC — Account / auth pages (login, register, confirm-email code)
   Reuses the landing "ink & champagne" tokens (defined on .lp). The page is a
   centered cream card on an ink field, matching the transactional emails and
   the hero. Namespaced under .lp so it inherits the palette + button system.
   ========================================================================= */
.lp.lp-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 18px;
    background:
        radial-gradient(1200px 620px at 50% -12%, rgba(201, 169, 106, 0.18), transparent 62%),
        var(--ow-ink);
}

.lp .lp-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(11, 16, 32, 0.45);
    padding: 40px 38px 34px;
    position: relative;
}

.lp .lp-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.lp .lp-auth-wordmark {
    font-family: var(--own-wordmark-font);
    font-weight: var(--own-wordmark-weight);
    letter-spacing: var(--own-wordmark-track);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--ow-ink);
}

.lp .lp-auth-rule {
    width: 54px;
    height: 1px;
    background: var(--ow-champagne);
}

.lp .lp-auth-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
    margin-bottom: 6px;
}

.lp .lp-auth-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.85rem;
    line-height: 1.15;
    color: var(--ow-ink);
    text-align: center;
    margin: 0 0 6px;
}

.lp .lp-auth-sub {
    text-align: center;
    color: var(--own-fg-2);
    font-size: 0.94rem;
    line-height: 1.5;
    margin: 0 auto 22px;
    max-width: 34ch;
}

.lp .lp-auth-form .form-floating,
.lp .lp-auth-field {
    position: relative;
    margin-bottom: 15px;
}

.lp .lp-auth-field > label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--own-fg-2);
    margin-bottom: 6px;
}

.lp .lp-auth-card .form-control,
.lp .lp-auth-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-paper);
    color: var(--own-fg-1);
    font-family: inherit;
    transition: border-color var(--own-dur-fast) var(--own-ease),
                box-shadow var(--own-dur-fast) var(--own-ease);
}

.lp .lp-auth-card .form-control:focus,
.lp .lp-auth-input:focus {
    outline: none;
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.22);
}

.lp .lp-auth-card .form-floating > label {
    color: var(--own-fg-3);
}

/* Password field with a visibility toggle (PasswordInputWithToggle) — used by every password
   input in the app, both in the auth card and in the floating-label Manage forms. The reveal
   button sits inside the field, over the right edge of the input. */
.own-password-field {
    position: relative;
}

/* The button is absolutely positioned, so it centres on its containing block. That block must be
   this wrapper, which spans the input alone: the field also carries the auth-card label above the
   input and the validation message below it, and centring on that taller box put the eye ~13px too
   high. In the floating-label layout the wrapper carries .form-floating and holds the label too,
   which Bootstrap positions absolutely — no extra height, so the wrapper still matches the input. */
.own-password-control {
    position: relative;
}

.own-password-reveal {
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: none;
    border: none;
    color: var(--own-fg-3);
    cursor: pointer;
}

.own-password-reveal:hover {
    color: var(--ow-champagne-deep);
}

/* The floating label overlays the input across its full width, so lift the button above it. */
.own-password-control.form-floating > .own-password-reveal {
    z-index: 5;
}

/* Keep the typed password clear of the button (its 38px box plus the 6px inset). The second
   selector only adds specificity: the auth card sets a padding shorthand on every .form-control
   inside it, which would otherwise win over the first. */
.own-password-control > .form-control,
.lp .lp-auth-card .own-password-control > .form-control {
    padding-right: 44px;
}

/* Only the custom toggle may reveal the password — hide the browser-native eye (Edge/IE). */
.own-password-field input[type="password"]::-ms-reveal,
.own-password-field input[type="password"]::-ms-clear {
    display: none;
}

.lp .lp-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--own-fg-2);
    margin: 6px 0 16px;
    line-height: 1.45;
}

.lp .lp-auth-check input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--ow-champagne-deep);
    flex-shrink: 0;
}

.lp .lp-auth-check a {
    color: var(--ow-champagne-deep);
    font-weight: 600;
}

.lp .lp-auth-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 1rem;
    margin-top: 4px;
}

/* A submit button whose form is on its way to the server (js/submitOnce.js). It stops taking
   clicks and shows that the submission is running, so nobody clicks a second time and posts the
   form again with an antiforgery token the first POST has already invalidated.
   The state is aria-disabled plus pointer-events rather than the disabled property on purpose:
   antiforgeryCheck.js re-fires the validated submission with submitter.click(), and a disabled
   button would swallow that click. */
.own-submit-busy {
    pointer-events: none;
    opacity: 0.72;
    cursor: progress;
}

/* The auth buttons are flex containers with a gap, so the spinner lines up beside the label. */
.lp .lp-btn.own-submit-busy::after {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: own-submit-spin 0.7s linear infinite;
}

@keyframes own-submit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lp .lp-btn.own-submit-busy::after { animation: none; }
}

.lp .lp-auth-links {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: center;
    font-size: 0.9rem;
}

.lp .lp-auth-links a {
    color: var(--ow-champagne-deep);
    text-decoration: none;
    font-weight: 600;
}

.lp .lp-auth-links a:hover {
    text-decoration: underline;
}

.lp .lp-auth-sep {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--own-fg-3);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.lp .lp-auth-sep::before,
.lp .lp-auth-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ow-line);
}

/* External sign-in (Google) at the top of the login and registration cards: one button per
   provider, stacked. The Google button follows Google's own brand rules for a light button
   (white face, #dadce0 hairline, #3c4043 label) rather than the champagne palette — a
   recognisable Google button is the point, and those colours are Google's, not ours. */
.lp .lp-auth-external {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp .lp-btn-google {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    box-shadow: none;
}

.lp .lp-btn-google:hover {
    background: #f8f9fa;
    border-color: #c6c9cc;
    color: #3c4043;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(60, 64, 67, 0.12);
}

.lp .lp-btn-google svg {
    flex-shrink: 0;
}

/* Alerts / validation reuse bootstrap markup but get the card palette */
.lp .lp-auth-card .alert {
    border-radius: 12px;
    font-size: 0.9rem;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.lp .lp-auth-card .validation-message,
.lp .lp-auth-card .text-danger {
    font-size: 0.82rem;
}

/* ── 6-digit confirmation-code entry ── */
.lp .lp-code-input {
    width: 100%;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    letter-spacing: 0.65em;
    font-weight: 700;
    padding: 16px 10px 16px 24px;
    color: var(--ow-ink);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    background: var(--ow-paper);
}

.lp .lp-code-input:focus {
    outline: none;
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.22);
}

.lp .lp-auth-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--own-fg-3);
    margin-top: 14px;
}

.lp .lp-auth-resend {
    background: none;
    border: none;
    color: var(--ow-champagne-deep);
    font-weight: 700;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
}

.lp .lp-auth-resend:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 520px) {
    .lp .lp-auth-card {
        padding: 30px 22px 26px;
        border-radius: 18px;
    }

    .lp .lp-code-input {
        font-size: 1.6rem;
        letter-spacing: 0.5em;
    }
}

/* =========================================================================
   OWNAMIC — Shared Spaces ("Geteilte Bereiche")
   Editorial warm-cream language of My Objects / the landing page, applied to
   the four Shared Space surfaces: overview, create wizard, viewer, configure.
   Global (not isolated) so the create wizard — rendered outside the page tree
   by the Radzen dialog host — picks up the same language. Everything is
   scoped under .ss-canvas; nothing here applies without that ancestor.
   ========================================================================= */
.ss-canvas {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 8px 96px;
    min-width: 0;
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
}

/* ── Type ───────────────────────────────────────────────────────────────── */
.ss-canvas .ss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
}

.ss-canvas .ss-eyebrow .line {
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    flex: none;
}

.ss-canvas .ss-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 14px 0 12px;
    color: var(--ow-ink);
}

.ss-canvas .ss-title em {
    font-style: italic;
    color: var(--ow-champagne-deep);
    font-weight: 500;
}

.ss-canvas .ss-lead {
    margin: 0;
    max-width: 620px;
    color: var(--own-fg-2);
    font-size: 1.02rem;
    line-height: 1.6;
}

.ss-canvas .ss-page-head {
    padding: 26px 0 22px;
}

/* Title + OWNY Help & Explain affordance side by side (per the design's "Hilfe-Zeichen" spec):
   26 px round, quiet next to the page title, champagne on hover, ink-filled while the drawer is
   open. The drawer itself styles and positions itself (HelpExplainPanel.razor.css). */
.ss-canvas .ss-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ss-canvas .ss-help-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-cream);
    color: var(--ow-champagne-deep);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
    padding: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.ss-canvas .ss-help-btn .material-symbols-outlined {
    font-size: 15px;
}

.ss-canvas .ss-help-btn:hover {
    border-color: var(--ow-champagne);
    background: #fff7e9;
    transform: scale(1.08);
}

.ss-canvas .ss-help-btn.on {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-champagne);
}

/* Back link + context eyebrow above the page title (viewer/configure). */
.ss-canvas .ss-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.ss-canvas .ss-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--own-fg-2);
    cursor: pointer;
    transition: color var(--own-dur-fast) var(--own-ease);
}

.ss-canvas .ss-back:hover {
    color: var(--ow-ink);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ss-canvas .ss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ss-canvas .ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 13px 24px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: transform var(--own-dur-base) var(--own-ease),
                box-shadow var(--own-dur-base) var(--own-ease),
                background var(--own-dur-base) var(--own-ease),
                color var(--own-dur-base) var(--own-ease);
}

.ss-canvas .ss-btn:disabled,
.ss-canvas .ss-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ss-canvas .ss-btn .rz-icon,
.ss-canvas .ss-btn .rzi,
.ss-canvas .ss-btn .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.ss-canvas .ss-btn--ink {
    background: var(--ow-ink);
    color: #fff;
}

.ss-canvas .ss-btn--ink:not(:disabled):hover {
    background: var(--ow-ink-2);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(11, 16, 32, 0.22);
}

.ss-canvas .ss-btn--cream {
    background: var(--ow-paper);
    color: var(--ow-ink);
    border-color: var(--ow-line);
}

.ss-canvas .ss-btn--cream:not(:disabled):hover {
    background: var(--ow-cream-deep);
}

.ss-canvas .ss-btn--ghost {
    background: transparent;
    color: var(--ow-ink);
    padding-left: 14px;
    padding-right: 14px;
}

.ss-canvas .ss-btn--ghost:not(:disabled):hover {
    background: var(--ow-cream);
}

.ss-canvas .ss-btn--danger {
    background: #c0544e;
    color: #fff;
}

.ss-canvas .ss-btn--danger:not(:disabled):hover {
    background: #a94742;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(192, 84, 78, 0.28);
}

.ss-canvas .ss-btn--sm {
    padding: 9px 16px;
    font-size: 0.86rem;
}

/* Square icon-only control (item row tools, remove member). */
.ss-canvas .ss-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--own-fg-2);
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease),
                color var(--own-dur-fast) var(--own-ease),
                border-color var(--own-dur-fast) var(--own-ease);
}

.ss-canvas .ss-icon-btn:not(:disabled):hover {
    background: var(--ow-cream);
    color: var(--ow-ink);
}

.ss-canvas .ss-icon-btn--danger:not(:disabled):hover {
    border-color: #e3b7b3;
    background: #fdf4f3;
    color: #b34840;
}

.ss-canvas .ss-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.ss-canvas .ss-card {
    position: relative;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 22px;
    padding: 24px 26px;
    overflow: hidden;
}

/* Gold rail marking the spaces the member administers. */
.ss-canvas .ss-card--admin::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--ow-champagne);
}

.ss-canvas .ss-space-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.ss-canvas .ss-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ss-canvas .ss-space-name {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
    margin: 14px 0 8px;
}

.ss-canvas .ss-space-desc {
    margin: 0 0 16px;
    color: var(--own-fg-2);
    font-size: 0.98rem;
    line-height: 1.55;
}

.ss-canvas .ss-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.ss-canvas .ss-divider {
    border: none;
    border-top: 1px dashed var(--ow-cream-deep);
    margin: 16px 0;
}

/* ── Badges & chips ─────────────────────────────────────────────────────── */
.ss-canvas .ss-role {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.ss-canvas .ss-role--admin {
    background: var(--ow-ink);
    color: #fff;
}

.ss-canvas .ss-role--admin .rz-icon,
.ss-canvas .ss-role--admin .rzi {
    color: var(--ow-champagne);
}

.ss-canvas .ss-role--viewer {
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    color: var(--ow-ink);
}

.ss-canvas .ss-role--viewer .rz-icon,
.ss-canvas .ss-role--viewer .rzi {
    color: var(--ow-champagne-deep);
}

.ss-canvas .ss-role .rz-icon,
.ss-canvas .ss-role .rzi {
    font-size: 1rem;
}

.ss-canvas .ss-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ss-canvas .ss-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.92rem;
    color: var(--own-fg-2);
}

.ss-canvas .ss-chip b {
    color: var(--ow-ink);
    font-weight: 700;
}

.ss-canvas .ss-chip--gold {
    color: var(--ow-champagne-deep);
    font-weight: 600;
}

.ss-canvas .ss-chip--gold .rz-icon,
.ss-canvas .ss-chip--gold .rzi {
    font-size: 1.15rem;
}

.ss-canvas .ss-chip--muted {
    color: var(--own-fg-3);
}

.ss-canvas .ss-tag-ink {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-champagne);
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ── Avatars ────────────────────────────────────────────────────────────── */
.ss-canvas .ss-avatars {
    display: flex;
    align-items: center;
}

.ss-canvas .ss-avatars .ss-avatar + .ss-avatar {
    margin-left: -12px;
}

.ss-canvas .ss-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--ow-cream-deep);
    border: 2px solid var(--ow-paper);
    color: var(--ow-ink);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: none;
}

.ss-canvas .ss-avatar--ink {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: #fff;
}

.ss-canvas .ss-meta {
    color: var(--own-fg-2);
    font-size: 0.95rem;
}

.ss-canvas .ss-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
}

.ss-canvas .ss-lastactive {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--own-fg-2);
    font-size: 0.95rem;
}

.ss-canvas .ss-lastactive .rz-icon,
.ss-canvas .ss-lastactive .rzi {
    color: var(--ow-champagne-deep);
    font-size: 1.2rem;
}

/* ── Create-card (dashed call to action) & empty state ──────────────────── */
.ss-canvas .ss-create-card {
    border: 1px dashed var(--ow-champagne);
    border-radius: 22px;
    background: transparent;
    padding: 28px 26px 30px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    width: 100%;
    transition: background var(--own-dur-base) var(--own-ease);
}

.ss-canvas .ss-create-card:hover {
    background: rgba(201, 169, 106, 0.07);
}

.ss-canvas .ss-create-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-champagne);
    margin-bottom: 18px;
}

.ss-canvas .ss-create-icon .rz-icon,
.ss-canvas .ss-create-icon .rzi {
    font-size: 1.7rem;
}

.ss-canvas .ss-create-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
    margin: 0 0 8px;
}

.ss-canvas .ss-create-sub {
    margin: 0;
    color: var(--own-fg-2);
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 330px;
}

/* ── Footnote ───────────────────────────────────────────────────────────── */
.ss-canvas .ss-footnote {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 34px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--ow-line);
    color: var(--own-fg-2);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 760px;
}

.ss-canvas .ss-footnote .rz-icon,
.ss-canvas .ss-footnote .rzi {
    color: var(--ow-champagne-deep);
    font-size: 1.3rem;
    flex: none;
}

/* ── Sections (viewer & configure cards) ───────────────────────────────── */
.ss-canvas .ss-section {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 24px;
    padding: 26px 28px;
    margin-top: 20px;
}

.ss-canvas .ss-section-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
    margin: 0 0 6px;
}

.ss-canvas .ss-section-sub {
    margin: 0 0 18px;
    color: var(--own-fg-2);
    font-size: 0.97rem;
    line-height: 1.55;
}

.ss-canvas .ss-note-gold {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ow-champagne-deep);
    font-weight: 600;
    font-size: 0.97rem;
    margin-bottom: 16px;
}

.ss-canvas .ss-note-gold .rz-icon,
.ss-canvas .ss-note-gold .rzi {
    font-size: 1.25rem;
}

/* ── Form controls (Radzen inputs re-skinned) ──────────────────────────── */
.ss-canvas .ss-field {
    margin-bottom: 18px;
}

.ss-canvas .ss-field-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
    margin-bottom: 8px;
}

.ss-canvas .ss-input,
.ss-canvas .ss-input .rz-textbox,
.ss-canvas .ss-input .rz-textarea,
.ss-canvas .ss-input input,
.ss-canvas .ss-input textarea {
    width: 100%;
}

.ss-canvas .ss-input .rz-textbox,
.ss-canvas .ss-input .rz-textarea,
.ss-canvas .ss-input .rz-dropdown {
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    padding: 14px 18px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ow-ink);
    box-shadow: none;
    transition: border-color var(--own-dur-fast) var(--own-ease);
}

.ss-canvas .ss-input .rz-textarea {
    min-height: 110px;
    line-height: 1.5;
}

.ss-canvas .ss-input .rz-textbox:focus,
.ss-canvas .ss-input .rz-textarea:focus,
.ss-canvas .ss-input .rz-dropdown:focus,
.ss-canvas .ss-input .rz-state-focused {
    border-color: var(--ow-champagne);
    outline: none;
}

.ss-canvas .ss-input .rz-dropdown {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px 6px 18px;
    min-height: 54px;
}

.ss-canvas .ss-input .rz-dropdown .rz-dropdown-label {
    padding: 0;
    font-size: 1rem;
    color: var(--ow-ink);
}

.ss-canvas .ss-input .rz-dropdown .rz-dropdown-trigger {
    background: transparent;
    color: var(--own-fg-2);
}

.ss-canvas .ss-input--inline {
    display: inline-block;
    min-width: 200px;
}

/* Switch: ink track, champagne knob when on. */
.ss-canvas .ss-switch .rz-switch {
    width: 62px;
    height: 34px;
}

.ss-canvas .ss-switch .rz-switch .rz-switch-circle {
    background: var(--ow-paper);
}

.ss-canvas .ss-switch .rz-switch-checked .rz-switch-circle,
.ss-canvas .ss-switch .rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--ow-champagne);
}

/* Checkbox: champagne outline, ink glyph. */
.ss-canvas .ss-check .rz-chkbox-box {
    border-radius: 6px;
    border: 2px solid var(--own-fg-3);
    background: transparent;
    width: 26px;
    height: 26px;
}

.ss-canvas .ss-check .rz-chkbox-box.rz-state-active {
    border-color: var(--ow-champagne-deep);
    background: transparent;
    color: var(--ow-champagne-deep);
}

.ss-canvas .ss-check .rz-chkbox-box .rz-chkbox-icon {
    color: var(--ow-champagne-deep);
}

/* Highlighted toggle card (financial data). */
.ss-canvas .ss-toggle-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border: 1px solid var(--ow-champagne);
    border-radius: 18px;
    background: linear-gradient(155deg, #fffaf1 0%, #fdf7ec 100%);
    padding: 20px 22px;
}

.ss-canvas .ss-toggle-card .ss-toggle-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ow-ink);
    margin: 0 0 6px;
}

.ss-canvas .ss-toggle-card .ss-toggle-hint {
    margin: 0;
    color: var(--own-fg-2);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ── View options (configure) ──────────────────────────────────────────── */
.ss-canvas .ss-option {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid var(--ow-line);
    border-radius: 16px;
    background: var(--ow-paper);
    padding: 18px 20px;
    margin-bottom: 12px;
}

.ss-canvas .ss-option--on {
    border-color: var(--ow-champagne);
    background: linear-gradient(155deg, #fffaf1 0%, #fdf7ec 100%);
}

.ss-canvas .ss-option--locked {
    opacity: 0.85;
}

.ss-canvas .ss-option-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ow-ink);
}

.ss-canvas .ss-option-hint {
    margin: 6px 0 0;
    color: var(--own-fg-2);
    font-size: 0.95rem;
}

/* ── Member rows ───────────────────────────────────────────────────────── */
.ss-canvas .ss-member {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 0;
    border-top: 1px dashed var(--ow-cream-deep);
}

.ss-canvas .ss-member:first-of-type {
    border-top: none;
}

.ss-canvas .ss-member-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ow-ink);
}

.ss-canvas .ss-member-name .you {
    color: var(--own-fg-2);
    font-weight: 400;
}

.ss-canvas .ss-member-mail {
    color: var(--own-fg-2);
    font-size: 0.95rem;
    margin: 2px 0 10px;
    word-break: break-word;
}

.ss-canvas .ss-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 10px;
}

.ss-canvas .ss-status--ok {
    color: #2f7d4f;
}

.ss-canvas .ss-status--pending {
    color: var(--ow-champagne-deep);
}

.ss-canvas .ss-status--off {
    color: var(--own-fg-3);
}

/* Compact member pill used in the viewer. */
.ss-canvas .ss-member-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 8px 20px 8px 8px;
    margin-bottom: 10px;
    max-width: 100%;
}

.ss-canvas .ss-member-pill .ss-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.8rem;
}

.ss-canvas .ss-member-pill .name {
    font-weight: 700;
    color: var(--ow-ink);
}

.ss-canvas .ss-member-pill .role {
    color: var(--own-fg-2);
    font-size: 0.92rem;
}

/* ── Contributed items (configure) ─────────────────────────────────────── */
.ss-canvas .ss-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 0;
    border-top: 1px dashed var(--ow-cream-deep);
}

.ss-canvas .ss-item:first-of-type {
    border-top: none;
}

.ss-canvas .ss-thumb {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    border: 1px solid var(--ow-line);
    background: var(--ow-cream);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--own-fg-3);
}

.ss-canvas .ss-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-canvas .ss-item-name {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--ow-ink);
}

.ss-canvas .ss-item-meta {
    color: var(--own-fg-2);
    font-size: 0.95rem;
    margin: 2px 0 10px;
}

.ss-canvas .ss-item-tools {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* ── Danger zone ───────────────────────────────────────────────────────── */
.ss-canvas .ss-danger-card {
    background: linear-gradient(155deg, #fdf6f5 0%, #fbf1ef 100%);
    border: 1px solid #f0d9d6;
    border-radius: 24px;
    padding: 26px 28px;
    margin-top: 20px;
}

.ss-canvas .ss-danger-card .ss-section-title {
    color: var(--ow-ink);
}

/* ── Viewer: view switcher ─────────────────────────────────────────────── */
.ss-canvas .ss-viewswitch {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ss-canvas .ss-viewtab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
    padding: 13px 26px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease),
                color var(--own-dur-fast) var(--own-ease);
}

.ss-canvas .ss-viewtab:hover {
    background: var(--ow-cream);
}

.ss-canvas .ss-viewtab.is-active {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: #fff;
}

.ss-canvas .ss-viewtab .rz-icon,
.ss-canvas .ss-viewtab .rzi {
    font-size: 1.1rem;
    color: var(--ow-champagne);
}

.ss-canvas .ss-viewswitch-note {
    text-align: right;
    color: var(--own-fg-2);
    font-size: 0.95rem;
    margin: 14px 0 0;
}

/* The period picker of the expenses view sits above the gauges it moves. */
.ss-canvas .ss-period {
    margin-bottom: 16px;
}

.ss-canvas .ss-view-body {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ow-line);
}

/* Totals under the hierarchy. */
.ss-canvas .ss-totals {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ow-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ss-canvas .ss-total-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ow-ink);
}

.ss-canvas .ss-total-row .rz-icon,
.ss-canvas .ss-total-row .rzi {
    color: var(--ow-champagne-deep);
    font-size: 1.3rem;
}

/* ── Empty / not-found states ──────────────────────────────────────────── */
.ss-canvas .ss-empty {
    border: 1px dashed var(--ow-line);
    border-radius: 22px;
    padding: 34px 28px;
    text-align: center;
    color: var(--own-fg-2);
    background: var(--ow-paper);
}

.ss-canvas .ss-empty .rz-icon,
.ss-canvas .ss-empty .rzi {
    font-size: 2rem;
    color: var(--ow-champagne-deep);
    margin-bottom: 10px;
}

/* ── Pending invitations strip ─────────────────────────────────────────── */
.ss-canvas .ss-invite-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px dashed var(--ow-cream-deep);
}

.ss-canvas .ss-invite-row:first-of-type {
    border-top: none;
}

/* ── Create wizard (dialog) ────────────────────────────────────────────── */
.ss-dialog.ss-canvas {
    padding: 0;
    max-width: none;
}

.ss-canvas .ss-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ss-canvas .ss-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--own-fg-3);
    font-size: 0.86rem;
    font-weight: 600;
}

.ss-canvas .ss-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--own-fg-2);
    font-size: 0.85rem;
}

.ss-canvas .ss-step.is-active .num {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-champagne);
}

.ss-canvas .ss-step.is-active {
    color: var(--ow-ink);
}

.ss-canvas .ss-step.is-done .num {
    background: var(--ow-cream-deep);
    color: var(--ow-champagne-deep);
}

.ss-canvas .ss-step-line {
    flex: 1 1 18px;
    min-width: 12px;
    height: 1px;
    background: var(--ow-line);
}

.ss-canvas .ss-wizard-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
    margin: 0 0 6px;
}

.ss-canvas .ss-wizard-title em {
    font-style: italic;
    color: var(--ow-champagne-deep);
}

.ss-canvas .ss-wizard-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ow-line);
}

.ss-canvas .ss-picked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px dashed var(--ow-cream-deep);
}

.ss-canvas .ss-picked:first-of-type {
    border-top: none;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ss-canvas {
        padding: 0 4px 72px;
    }

    .ss-canvas .ss-card,
    .ss-canvas .ss-section,
    .ss-canvas .ss-danger-card {
        padding: 22px 20px;
        border-radius: 20px;
    }

    .ss-canvas .ss-space-grid {
        grid-template-columns: 1fr;
    }

    .ss-canvas .ss-btn {
        padding: 12px 20px;
        font-size: 0.92rem;
    }

    .ss-canvas .ss-viewswitch-note {
        text-align: left;
    }

    .ss-canvas .ss-wizard-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ss-canvas .ss-wizard-foot .ss-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ss-canvas .ss-actions .ss-btn {
        flex: 1 1 100%;
    }

    .ss-canvas .ss-card-foot .ss-btn {
        flex: 1 1 auto;
    }
}

/* ── Viewer hierarchy (SharedSpaceHierarchy.razor) ─────────────────────────
   A reading-first tree: each contributed root is its own bordered group, its
   descendants sit below it separated by hairlines. Deliberately not the
   dashboard's data-grid tree — a Shared Space is looked at, not worked in. */
.ss-canvas .ssh-group {
    border: 1px solid var(--ow-line);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--ow-paper);
}

.ss-canvas .ssh-node {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease);
}

.ss-canvas .ssh-node:hover {
    background: var(--ow-cream);
}

.ss-canvas .ssh-node + .ssh-node {
    border-top: 1px dashed var(--ow-cream-deep);
}

.ss-canvas .ssh-node--root {
    background: linear-gradient(155deg, #faf6ee 0%, #f5efe3 100%);
}

.ss-canvas .ssh-node--root:hover {
    background: var(--ow-cream-deep);
}

.ss-canvas .ssh-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: none;
    background: transparent;
    color: var(--own-fg-2);
    cursor: pointer;
    padding: 0;
    transition: transform var(--own-dur-fast) var(--own-ease);
}

.ss-canvas .ssh-chev.is-open {
    transform: rotate(180deg);
}

.ss-canvas .ssh-chev .rz-icon,
.ss-canvas .ssh-chev .rzi {
    font-size: 1.5rem;
}

/* Leaf rows get a hairline where the chevron would be. */
.ss-canvas .ssh-leafmark {
    width: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.ss-canvas .ssh-leafmark::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--ow-cream-deep);
}

.ss-canvas .ssh-thumb {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--own-fg-3);
}

.ss-canvas .ssh-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-canvas .ssh-body {
    min-width: 0;
    flex: 1 1 auto;
}

.ss-canvas .ssh-name {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.58rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ow-ink);
}

.ss-canvas .ssh-cat {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
    margin-top: 2px;
}

.ss-canvas .ssh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ss-canvas .ssh-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 1.05rem;
    color: var(--ow-ink);
    font-variant-numeric: tabular-nums;
}

.ss-canvas .ssh-chip .k {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--own-fg-2);
}

.ss-canvas .ssh-by {
    margin-top: 10px;
    color: var(--own-fg-2);
    font-size: 1.05rem;
}

.ss-canvas .ssh-empty {
    padding: 26px 20px;
    text-align: center;
    color: var(--own-fg-2);
}

@media (max-width: 480px) {
    .ss-canvas .ssh-node {
        padding: 16px 12px;
        gap: 10px;
    }

    .ss-canvas .ssh-name {
        font-size: 1.42rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KI-Guthaben — the credit surfaces (usage page, cost badges, notices)

   Scoped to `.kg` so the ink/cream/champagne language of the landing page can
   be reused inside the authenticated app without leaking into Radzen's own
   theming. The tokens are duplicated from `.lp` rather than hoisted to :root
   on purpose: `.lp` restyles half the element tree, and lifting its palette
   would repaint every Radzen surface with it.
   ══════════════════════════════════════════════════════════════════════════ */
.kg {
    --ow-ink: #0b1020;
    --ow-ink-2: #141a33;
    --ow-cream: #f6f1e7;
    --ow-cream-deep: #efe7d4;
    --ow-paper: #ffffff;
    --ow-line: #e6e1d7;
    --ow-line-soft: #eee9dd;
    --ow-champagne: #c9a96a;
    --ow-champagne-deep: #a7864b;
    --ow-serif: "Cormorant Garamond", "Source Serif 4", Georgia, serif;
    --own-fg-1: #1e293b;
    --own-fg-2: #475569;
    --own-fg-3: #94a3b8;
    --own-font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --own-gradient-primary: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
    --own-dur-fast: 150ms;
    --own-dur-base: 250ms;
    --own-ease: cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--own-font-sans);
    color: var(--own-fg-1);
}

.kg .numeric { font-variant-numeric: tabular-nums; }
.kg .kg-card { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 22px; }

.kg .kg-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .18em;
    font-weight: 700; color: var(--ow-champagne-deep);
}
.kg .kg-eyebrow .line { width: 28px; height: 1px; background: currentColor; opacity: .5; }

.kg .kg-section { margin-bottom: 40px; }
.kg .kg-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.kg .kg-section-head h2 {
    font-family: var(--ow-serif); font-weight: 500; font-size: 1.8rem;
    line-height: 1.1; letter-spacing: -.015em; margin: 8px 0 0; color: var(--ow-ink);
}
.kg .kg-section-head h2 em { font-style: italic; color: var(--ow-champagne-deep); font-weight: 500; }
.kg .kg-section-head p { margin: 6px 0 0; color: var(--own-fg-2); font-size: .94rem; max-width: 52ch; }
.kg .kg-cap { font-size: .72rem; color: var(--own-fg-3); letter-spacing: .04em; }

/* The advice line under the price list. Set as a tip rather than as fine print: it is the one line
   there the reader can act on, and it is what keeps the "search without a result" row from reading
   as a charge they have no say in. */
.kg .kg-cap-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 62ch;
    font-size: .78rem;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--own-fg-2);
}

.kg .kg-cap-tip .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne-deep); flex-shrink: 0; }

/* ── page head ─────────────────────────────────────────────────────────── */
.kg .kg-page-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.kg .kg-page-head > * { min-width: 0; }
.kg .kg-greeting .kg-eyebrow { margin-bottom: 14px; }
.kg .kg-greeting h1 {
    font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; color: var(--ow-ink);
}
.kg .kg-greeting h1 em { font-style: italic; color: var(--ow-champagne-deep); font-weight: 500; }
.kg .kg-greeting p { margin: 0; max-width: 50ch; color: var(--own-fg-2); font-size: 1.02rem; line-height: 1.6; }

/* ── C2 · balance (ink hero) ───────────────────────────────────────────── */
.kg .kg-balance {
    background: var(--ow-ink); color: #fff; border-radius: 22px;
    padding: 24px 28px 22px; position: relative; overflow: hidden;
    box-shadow: 0 24px 60px rgba(11,16,32,.18);
}
.kg .kg-balance::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px 280px at 92% -20%, rgba(124,58,237,.35), transparent 60%),
                radial-gradient(360px 240px at -10% 110%, rgba(201,169,106,.22), transparent 60%);
}
.kg .kg-balance > * { position: relative; }
.kg .bal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .18em;
    color: rgba(255,255,255,.55); font-weight: 600; margin-bottom: 16px;
}
.kg .bal-head > span { white-space: nowrap; flex-shrink: 0; }
.kg .bal-head .bal-plan { color: var(--ow-champagne); display: inline-flex; align-items: center; gap: 6px; }
.kg .bal-main { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; }
.kg .bal-ring { position: relative; width: 120px; height: 120px; }
.kg .bal-ring svg { display: block; transform: rotate(-90deg); }
.kg .bal-ring .rp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kg .bal-ring .rp b { font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.kg .bal-ring .rp span { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); margin-top: 4px; font-weight: 600; }
.kg .bal-total {
    font-family: var(--ow-serif); font-size: 3.1rem; line-height: 1; font-weight: 500;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kg .bal-total small {
    display: block; font-size: .88rem; font-weight: 400; color: rgba(255,255,255,.55);
    margin: 9px 0 0; font-family: var(--own-font-sans); letter-spacing: 0;
}
.kg .bal-sub { font-size: .88rem; color: rgba(255,255,255,.62); margin-top: 8px; line-height: 1.5; }
.kg .bal-sub b { color: #fff; font-weight: 600; }
.kg .bal-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 14px; display: flex; }
.kg .bal-bar i { display: block; height: 100%; transition: width 700ms var(--own-ease); }
.kg .bal-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
    font-size: .84rem; color: rgba(255,255,255,.6);
}
.kg .bal-foot .k { display: inline-flex; align-items: center; gap: 7px; }
.kg .bal-foot .rzi, .kg .bal-foot .rz-icon { font-size: 1rem; color: var(--ow-champagne); }
.kg .bal-foot b { color: #fff; font-weight: 600; }

/* ── C3/C6 · spend per feature ─────────────────────────────────────────── */
.kg .kg-bd { padding: 8px 10px 14px; }
.kg .bd-row {
    display: grid; grid-template-columns: 38px minmax(0,1.5fr) minmax(0,2fr) 96px 62px;
    align-items: center; gap: 18px; padding: 14px 18px; border-radius: 14px;
    transition: background var(--own-dur-fast);
}
.kg .bd-row:hover { background: var(--ow-cream); }
.kg .bd-row + .bd-row { border-top: 1px solid var(--ow-line-soft); border-radius: 0; }
.kg .bd-head { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--own-fg-3); font-weight: 700; padding: 16px 18px 8px; }
.kg .bd-head:hover { background: transparent; }
.kg .bd-head span:first-child { grid-column: 1 / 3; }
.kg .bd-ico {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--ow-champagne-deep);
}
.kg .bd-ico .rzi, .kg .bd-ico .rz-icon { font-size: 1.15rem; }
.kg .bd-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kg .bd-name .t { font-weight: 700; font-size: .96rem; color: var(--ow-ink); line-height: 1.25; }
.kg .bd-name .m { font-size: .79rem; color: var(--own-fg-2); margin-top: 2px; }
.kg .bd-bar { height: 8px; border-radius: 999px; background: var(--ow-cream-deep); overflow: hidden; }
.kg .bd-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c9a96a, #a7864b); transition: width 700ms var(--own-ease); }
.kg .bd-val { text-align: right; font-family: var(--ow-serif); font-weight: 600; font-size: 1.15rem; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.kg .bd-val small { display: block; font-family: var(--own-font-sans); font-size: .72rem; font-weight: 500; color: var(--own-fg-2); letter-spacing: .02em; margin-top: 1px; }
.kg .bd-share { text-align: right; font-size: .82rem; font-weight: 700; color: var(--own-fg-2); font-variant-numeric: tabular-nums; }
.kg .bd-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 18px 4px; margin: 6px 8px 0; border-top: 1px solid var(--ow-line-soft);
    font-size: .86rem; color: var(--own-fg-2);
}
.kg .bd-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.kg .bd-foot .bd-total b { font-family: var(--ow-serif); font-size: 1.5rem; color: var(--ow-ink); font-weight: 600; }
.kg .bd-total small { font-size: .78rem; color: var(--own-fg-2); margin-top: 3px; }
.kg .bd-empty { padding: 26px 18px; text-align: center; color: var(--own-fg-2); font-size: .9rem; }

/* ── C7 · notice rows ──────────────────────────────────────────────────── */
.kg .kg-notice {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: 16px; border: 1px solid var(--ow-line); background: var(--ow-paper);
}
.kg .kg-notice .n-ico {
    width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
    background: var(--ow-cream); color: var(--ow-champagne-deep); border: 1px solid var(--ow-line);
}
.kg .kg-notice > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kg .kg-notice .n-t { font-weight: 700; font-size: .94rem; color: var(--ow-ink); }
.kg .kg-notice .n-m { font-size: .84rem; color: var(--own-fg-2); margin-top: 2px; }
.kg .kg-notice.low { background: linear-gradient(120deg, #fffaf1, #f7edda); border-color: #e4d3ab; }
.kg .kg-notice.empty { background: var(--ow-ink); border-color: var(--ow-ink); color: #fff; }
.kg .kg-notice.empty .n-t { color: #fff; }
.kg .kg-notice.empty .n-m { color: rgba(255,255,255,.66); }
.kg .kg-notice.empty .n-ico { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--ow-champagne); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.kg .kg-btn {
    display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: .92rem; border-radius: 999px; padding: 11px 20px;
    transition: transform var(--own-dur-base) var(--own-ease), box-shadow var(--own-dur-base) var(--own-ease), background var(--own-dur-base);
}
.kg .kg-btn:disabled { opacity: .45; cursor: not-allowed; }
.kg .kg-btn-primary { background: var(--own-gradient-primary); color: #fff; box-shadow: 0 4px 24px rgba(67,56,202,.3); }
.kg .kg-btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(67,56,202,.45); }
.kg .kg-btn-ink { background: var(--ow-ink); color: #fff; }
.kg .kg-btn-ink:not(:disabled):hover { background: var(--ow-ink-2); }
.kg .kg-btn-cream { background: var(--ow-paper); color: var(--ow-ink); border: 1px solid var(--ow-line); }
.kg .kg-btn-cream:not(:disabled):hover { background: var(--ow-cream-deep); }

/* ── price list ────────────────────────────────────────────────────────── */
.kg .kg-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kg .kg-rate { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.kg .kg-rate .r-ico {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--ow-champagne-deep); margin-bottom: 4px;
}
.kg .kg-rate .r-name { font-family: var(--ow-serif); font-size: 1.25rem; font-weight: 500; color: var(--ow-ink); letter-spacing: -.01em; }
.kg .kg-rate .r-desc { font-size: .86rem; line-height: 1.5; color: var(--own-fg-2); }
.kg .kg-rate .r-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.kg .kg-rate .r-list li {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
    padding: 9px 0; border-top: 1px dashed var(--ow-line); font-size: .86rem; color: var(--own-fg-1);
}
.kg .kg-rate .r-list li em { font-style: normal; color: var(--own-fg-2); font-size: .78rem; display: block; margin-top: 1px; }

/* ── C8 · plan cards ───────────────────────────────────────────────────── */
.kg .kg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kg .kg-plan { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kg .kg-plan.current { border-color: var(--ow-champagne); box-shadow: 0 18px 40px rgba(11,16,32,.07); }
.kg .kg-plan .p-tag {
    position: absolute; top: 16px; right: 16px; font-size: .64rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
    background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--ow-champagne-deep);
}
.kg .kg-plan.current .p-tag { background: linear-gradient(135deg, #e9ddc1, #c9a96a); border-color: var(--ow-champagne-deep); color: var(--ow-ink); }
.kg .kg-plan .p-name { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: var(--own-fg-3); }
.kg .kg-plan .p-pts {
    font-family: var(--ow-serif); font-size: 2.5rem; font-weight: 500; line-height: 1;
    letter-spacing: -.02em; color: var(--ow-ink); font-variant-numeric: tabular-nums; margin-top: 4px;
}
.kg .kg-plan .p-pts small { font-size: .86rem; font-family: var(--own-font-sans); color: var(--own-fg-2); margin-left: 6px; font-weight: 500; }
.kg .kg-plan .p-eq { font-size: .84rem; color: var(--own-fg-2); line-height: 1.5; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--ow-line); }
.kg .kg-plan .p-eq b { color: var(--ow-ink); font-weight: 700; }
.kg .kg-plan .p-cta { margin-top: 14px; }

/* ── footnote ──────────────────────────────────────────────────────────── */
.kg .kg-footnote {
    border-top: 1px solid var(--ow-line); padding: 22px 0 10px; display: flex;
    justify-content: space-between; align-items: center; gap: 24px;
    font-size: .84rem; color: var(--own-fg-2); flex-wrap: wrap;
}
.kg .kg-footnote .trust { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kg .kg-footnote .trust span { display: inline-flex; align-items: center; gap: 6px; }
.kg .kg-footnote .trust .rzi, .kg .kg-footnote .trust .rz-icon { font-size: 1rem; color: var(--ow-champagne-deep); }

@media (max-width: 1120px) {
    .kg .kg-page-head { grid-template-columns: 1fr; gap: 28px; }
    .kg .kg-rates, .kg .kg-plans { grid-template-columns: 1fr; }
    .kg .bd-row { grid-template-columns: 38px minmax(0,1.4fr) minmax(0,1.6fr) 80px; }
    .kg .bd-row .bd-share, .kg .bd-head span:last-child { display: none; }
}
@media (max-width: 860px) {
    .kg .bd-row { grid-template-columns: 38px minmax(0,1fr) 80px; gap: 12px; }
    .kg .bd-row .bd-bar { display: none; }
    .kg .bal-main { grid-template-columns: 1fr; }
    .kg .bal-ring { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   C4 · Cost badge — global, not scoped to `.kg`

   This one rides along on buttons and headers all over the app (capture,
   chat, Studio, news, re-estimates), so it carries its own colours instead of
   inheriting the `.kg` palette. It is the one piece of the credit language a
   user meets *before* an action rather than on the balance page.
   ══════════════════════════════════════════════════════════════════════════ */
.own-cost-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px;
    border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.4;
    background: #f6f1e7; border: 1px solid #e6e1d7; color: #a7864b;
}
.own-cost-badge .rzi, .own-cost-badge .rz-icon, .own-cost-badge .material-symbols-outlined { font-size: .9rem; line-height: 1; }
.own-cost-badge--on-ink { background: rgba(201,169,106,.16); border-color: rgba(201,169,106,.4); color: #c9a96a; }
.own-cost-badge--gold { background: linear-gradient(135deg, #e9ddc1, #c9a96a); border-color: #a7864b; color: #0b1020; }
.own-cost-badge--warn { background: #fef3c7; border-color: #f6d98a; color: #8a5a12; }

/* The eyebrow above a pair of badges when a feature is billed per unit rather
   than per call — the capture screens, where "1 / object" would otherwise read
   as the price of the whole scan. */
.own-cost-unit {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 6px 0 2px;
}
.own-cost-unit-label {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
    font-weight: 700; color: #94a3b8;
}
.own-cost-unit-item { display: inline-flex; align-items: center; gap: 5px; }
.own-cost-unit-cap { font-size: .72rem; color: #475569; }

/* ═══════════════════════════════════════════════════════════════════════════
   DIGEST TILES — the paired cards on My Objects (scans, shared spaces, …)

   One anatomy, shared: an editorial head with a hand-over link, a short list of
   rows carrying a badge, a title, a meta line and one action, and a run of
   figures underneath. Global rather than scoped because more than one component
   is built on it — a tile only has to bring its own data, never its own looks.

   Layout is the row's business (see `.mo-tiles-row` in MyObjects.razor.css):
   the tile itself just fills whatever column it is handed.
   ══════════════════════════════════════════════════════════════════════════ */
.own-tile {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 22px;
    padding: 22px 24px 20px;
    color: var(--ow-ink);
    /* Rows ellipsize their text rather than pushing the tile — and with it the
       grid column — wider than the space it was given. */
    min-width: 0;
}

.own-tile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ow-line);
}

.own-tile-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    line-height: 1.1;
    margin: 0;
}

.own-tile-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--ow-champagne-deep);
}

.own-tile-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ow-champagne-deep);
    text-decoration: none;
    transition: gap var(--own-dur-base) var(--own-ease);
}

.own-tile-viewall:hover {
    gap: 10px;
    color: var(--ow-ink);
}

.own-tile-viewall .material-symbols-outlined { font-size: 1.1rem; }

/* ─────────────── ROWS ─────────────── */
/* Two rows deep, then scroll. The tiles stand side by side on one grid row, so a
   list that grew with its data would stretch every tile beside it to the height
   of the longest one — and the figures underneath, which are the point of the
   tile, would be pushed off the fold. Holding the list to two rows keeps the
   three tiles the same height whether the user has two scans or two hundred,
   and everything the page used to truncate away is still reachable, one scroll
   inside the tile. `--own-tile-rows-h` is two rows (46px badge + 2×14px padding
   + 1px rule) plus enough of the third to read as "there is more". */
.own-tile-rows {
    --own-tile-rows-h: 172px;
    display: flex;
    flex-direction: column;
    max-height: var(--own-tile-rows-h);
    overflow-y: auto;
    /* A tile that has reached its end must not hand the wheel to the page. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ow-line) transparent;
}

.own-tile-rows::-webkit-scrollbar { width: 6px; }
.own-tile-rows::-webkit-scrollbar-track { background: transparent; }

.own-tile-rows::-webkit-scrollbar-thumb {
    background: var(--ow-line);
    border-radius: 999px;
}

.own-tile-rows::-webkit-scrollbar-thumb:hover { background: var(--ow-champagne); }

/* Chevron under a list that has more than it shows. Purely a hint — the list is
   already scrollable — so it is hidden from the accessibility tree. */
.own-tile-scroll-hint {
    display: flex;
    justify-content: center;
    padding-top: 6px;
    color: var(--ow-champagne-deep);
    opacity: 0.65;
}

.own-tile-scroll-hint .material-symbols-outlined { font-size: 1.25rem; }

.own-tile-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ow-line);
    cursor: pointer;
    min-width: 0;
    transition: background var(--own-dur-base) var(--own-ease);
}

.own-tile-row:hover { background: var(--ow-cream); }

.own-tile-row:focus-visible {
    outline: 2px solid var(--ow-champagne);
    outline-offset: 2px;
    border-radius: 12px;
}

.own-tile-row--ghost { cursor: default; }

/* A group head inside a scrolling list — the account a run of rows belongs to, with the figure that
   run is about to change. Sticky so it is still readable once the rows below it have been scrolled
   past: in a queue of bookings, "which account is this?" is the one thing a row must never lose. */
.own-tile-row--group {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ow-paper);
    cursor: default;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ow-champagne);
}

.own-tile-row--group .own-tile-row-title {
    font-family: var(--ow-serif);
    font-size: 0.98rem;
}

/* A sentence under the figures, for what a card has to say about itself once — that its rows are
   proposals rather than facts, for instance. */
.own-tile-note {
    margin: 10px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--own-fg-2, #475569);
    opacity: 0.9;
}

/* The square in front of the row: a figure (how many objects a scan found) or an
   icon (what the user may do in a space). Gold-edged when it marks a standing. */
.own-tile-badge {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    color: var(--ow-champagne-deep);
    font-family: var(--ow-serif);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.own-tile-badge--gold { border-color: var(--ow-champagne); }

.own-tile-badge .material-symbols-outlined { font-size: 1.35rem; }

/* A badge carrying the area's picture rather than a figure or an icon. */
.own-tile-badge--image { padding: 0; overflow: hidden; }

.own-tile-badge--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The area's own accent, handed in per row as `--tile-accent`. */
.own-tile-badge--accent { border-color: var(--tile-accent, var(--ow-line)); }

.own-tile-row-tag {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--tile-accent, var(--ow-champagne-deep));
    margin-bottom: 2px;
}

/* ─────────────── LIVE WORK ───────────────
   A scan the AI is still working through. It used to be a dot on the sidebar
   toggle in the header, where it could say only "something is running"; here it
   sits on the tile that will hold the result, next to the scans it will join. */
.own-tile-working {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-champagne);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ow-ink);
}

.own-tile-working-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ow-champagne-deep);
    animation: own-tile-pulse 1.4s ease-in-out infinite;
}

.own-tile-working-bar {
    flex: 1;
    height: 3px;
    min-width: 40px;
    border-radius: 999px;
    background: var(--ow-cream-deep);
    overflow: hidden;
}

.own-tile-working-bar::after {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--ow-champagne);
    animation: own-tile-sweep 1.6s ease-in-out infinite;
}

@keyframes own-tile-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

@keyframes own-tile-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .own-tile-working-dot,
    .own-tile-working-bar::after { animation: none; }
}

.own-tile-row-body {
    flex: 1;
    min-width: 0;
}

.own-tile-row-title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.own-tile-row-meta {
    margin-top: 3px;
    font-size: 0.85rem;
    color: var(--own-fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────── ACTIONS ─────────────── */
.own-tile-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-cream);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 18px;
    cursor: pointer;
    transition: border-color var(--own-dur-base) var(--own-ease), background var(--own-dur-base) var(--own-ease);
}

.own-tile-action:hover {
    border-color: var(--ow-champagne);
    background: var(--ow-cream-deep);
}

/* A row still waiting on a decision wears the champagne edge, so what can be
   acted on reads apart from what is only there to be looked at. */
.own-tile-action--pending { border-color: var(--ow-champagne); }

.own-tile-action--ink {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: #fff;
}

.own-tile-action--ink:hover {
    background: var(--ow-ink-2);
    border-color: var(--ow-ink-2);
}

.own-tile-action .material-symbols-outlined { font-size: 1.1rem; }

/* ─────────────── FIGURES ─────────────── */
.own-tile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 18px 24px;
    padding-top: 18px;
}

.own-tile-stat-value {
    font-family: var(--ow-serif);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.own-tile-stat-label {
    margin-top: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--own-fg-3);
}

/* A figure that is waiting on the user rather than only reporting — the pending
   invitations. Gold, not red: it is an offer, not a problem. */
.own-tile-stat--attention .own-tile-stat-value { color: var(--ow-champagne-deep); }

/* ─────────────── EMPTY ─────────────── */
.own-tile-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 0 6px;
}

.own-tile-empty-icon {
    font-size: 2rem;
    color: var(--ow-champagne-deep);
}

.own-tile-empty-text {
    flex: 1;
    min-width: 180px;
}

.own-tile-empty-title {
    font-family: var(--ow-serif);
    font-size: 1.25rem;
    font-weight: 500;
}

.own-tile-empty-text p {
    margin: 2px 0 0;
    font-size: 0.88rem;
    color: var(--own-fg-3);
}

/* ─────────────── LOADING ─────────────── */
.own-tile-skeleton {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--ow-cream) 25%, var(--ow-cream-deep) 37%, var(--ow-cream) 63%);
    background-size: 400% 100%;
    animation: own-tile-shimmer 1.4s ease-in-out infinite;
}

.own-tile-badge.own-tile-skeleton { border-color: transparent; }
.own-tile-skeleton--title { width: 45%; height: 14px; }
.own-tile-skeleton--meta { width: 70%; height: 11px; margin-top: 8px; }

@keyframes own-tile-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .own-tile-skeleton { animation: none; }
}

@media (max-width: 640px) {
    .own-tile { padding: 18px 16px 16px; }
    .own-tile-stats { grid-template-columns: repeat(2, 1fr); }
    .own-tile-action { padding: 8px 14px; font-size: 0.84rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE MARKET — symbol picker, capture match card, attribution

   The premium interior language (ink / cream / champagne / Cormorant serif)
   applied to every surface the live-market integration added. Global rather
   than component-scoped because the picker is opened through DialogService and
   therefore renders outside the host component's CSS scope; the `.market-*`
   prefix keeps it from touching anything else.

   Reads the `--ow-*` tokens defined at `:root` above — no local redefinition,
   so a palette change lands here too.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The dialog shell: a sheet, not a Radzen panel ───────────────────────────
   Same DOM and the same overrides as `.sticky-dialog` above (Radzen 10 renders
   `.rz-dialog-wrapper > .rz-dialog.<CssClass>` with `.rz-dialog-mask` as a
   sibling): pin the wrapper to the viewport, keep the box a centered flex child.
   The sheet owns its own scrolling, so the box must NOT scroll — otherwise the
   foot's CTA scrolls away with the result list. */
.rz-dialog-wrapper:has(.market-sheet-dialog) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    overflow: auto !important;
    padding: 0.5rem !important;
}

.rz-dialog-wrapper:has(.market-sheet-dialog) .rz-dialog-mask {
    position: fixed !important;
    inset: 0 !important;
}

.rz-dialog.market-sheet-dialog,
.market-sheet-dialog.rz-dialog {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: auto !important;
    padding: 0 !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: 88dvh !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: var(--ow-paper);
    box-shadow: 0 18px 60px rgba(11, 16, 32, 0.28);
}

.market-sheet-dialog .rz-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 88dvh;
}

/* On a phone the panel becomes what it is drawn as: a sheet against the bottom
   edge, corners rounded on top only. Mirrors the Add dialog's treatment. */
@media (max-width: 768px) {
    .rz-dialog-wrapper:has(.market-sheet-dialog) {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .rz-dialog.market-sheet-dialog,
    .market-sheet-dialog.rz-dialog {
        margin: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

.market-sheet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 88dvh;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
}

.market-grabber {
    flex: none;
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: var(--ow-line);
    margin: 8px auto 0;
}

/* ── Head ────────────────────────────────────────────────────────────────── */
.market-sheet-head {
    flex: none;
    padding: 10px 20px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.market-sheet-headings { flex: 1; min-width: 0; }

.market-sheet-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
    margin-bottom: 5px;
}

.market-sheet-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.market-sheet-title {
    font-family: var(--ow-serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
}

.market-sheet-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--ow-champagne-deep);
}

.market-sheet-sub {
    font-size: 0.82rem;
    color: var(--own-fg-2);
    line-height: 1.4;
    margin-top: 5px;
}

.market-sheet-close {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    display: grid;
    place-items: center;
    color: var(--own-fg-2);
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease);
}

.market-sheet-close:hover { background: var(--ow-cream-deep); color: var(--ow-ink); }
.market-sheet-close .material-symbols-outlined { font-size: 1.1rem; }

/* OWNY Help & Explain affordance in the sheet head: same round chrome as the close button,
   champagne rather than grey (it offers something instead of ending something) and ink-filled
   while the drawer for the live-market link is open. */
.market-sheet-help {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    display: grid;
    place-items: center;
    color: var(--ow-champagne-deep);
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease), border-color var(--own-dur-fast) var(--own-ease);
}

.market-sheet-help:hover { background: var(--ow-cream-deep); border-color: var(--ow-champagne); }
.market-sheet-help.on { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }
.market-sheet-help .material-symbols-outlined { font-size: 1rem; }

/* ── Asset-class segments ────────────────────────────────────────────────── */
.market-seg {
    flex: none;
    margin: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
}

.market-seg-item {
    min-height: 42px;
    border: none;
    background: transparent;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--own-fg-2);
    cursor: pointer;
    padding: 0 6px;
    transition: background var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease);
}

.market-seg-item .material-symbols-outlined { font-size: 1.05rem; }
.market-seg-item:hover { color: var(--ow-ink); }
.market-seg-item.is-active { background: var(--ow-ink); color: #fff; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.market-search {
    flex: none;
    margin: 14px 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-champagne);
    border-radius: 999px;
    padding: 11px 14px;
    box-shadow: 0 0 0 4px rgba(201, 169, 106, 0.16);
}

.market-search-icon { font-size: 1.15rem; color: var(--own-fg-3); }

.market-search input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ow-ink);
    background: transparent;
}

.market-search input::placeholder { color: var(--own-fg-3); }

.market-search-clear {
    width: 22px;
    height: 22px;
    flex: none;
    border: none;
    border-radius: 50%;
    background: var(--ow-cream-deep);
    color: var(--own-fg-2);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.market-search-clear .material-symbols-outlined { font-size: 0.9rem; }

/* ── Results ─────────────────────────────────────────────────────────────── */
.market-results {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    padding: 6px 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
}

.market-list-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 2px 2px;
}

.market-list-count {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--own-fg-3);
}

.market-list-sort {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ow-champagne-deep);
    display: flex;
    align-items: center;
    gap: 3px;
}

.market-list-sort .material-symbols-outlined { font-size: 1rem; }

.market-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    background: var(--ow-paper);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    transition: border-color var(--own-dur-fast) var(--own-ease),
                box-shadow var(--own-dur-fast) var(--own-ease),
                background var(--own-dur-fast) var(--own-ease);
}

.market-row:hover { background: var(--ow-cream); border-color: var(--ow-champagne); }

.market-row.is-selected {
    border-color: var(--ow-ink);
    background: var(--ow-cream);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.28);
}

.market-row.is-muted {
    background: var(--ow-cream);
    border-style: dashed;
    border-color: var(--ow-line-soft);
}

.market-row-badge {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    background: var(--ow-cream-deep);
    color: var(--own-fg-2);
}

/* One tint per asset class — the same three the segments carry. */
.market-row-badge--crypto { background: var(--ow-blush); color: var(--ow-champagne-deep); }
.market-row-badge--security { background: var(--ow-ink); color: var(--ow-champagne); }
.market-row-badge--preciousmetal { background: var(--ow-sage); color: #3f5340; }

.market-row-main { flex: 1; min-width: 0; padding-right: 8px; }

.market-row-name {
    display: block;
    font-family: var(--ow-serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ow-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-row-meta {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 4px 6px;
    margin-top: 4px;
    /* Wraps rather than clips: the ISIN is the longest chip and the one the row was hardened to
       show, so on a narrow phone it has to move to a second line instead of disappearing. */
    flex-wrap: wrap;
}

.market-row-ticker {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--own-fg-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.market-chip {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--own-fg-2);
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
}

.market-chip--type {
    background: var(--ow-blush);
    border-color: rgba(201, 169, 106, 0.4);
    color: var(--ow-champagne-deep);
}

/* The currency decides whether this is the Frankfurt line or the US one, so it is set in the
   same tabular face as the price it belongs to rather than in the chip's default text face. */
.market-chip--currency {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The ISIN is the identifier that survives every venue, and the one a broker statement shows —
   so it is never truncated: half an ISIN cannot be checked against anything. */
.market-chip--isin {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Date of the price this row would be linked to. Quiet by default; loud once the listing has
   stopped producing closes, because that is the state a user must not scroll past. */
.market-row-asof {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--own-fg-3);
    font-variant-numeric: tabular-nums;
}

.market-row-asof .material-symbols-outlined { font-size: 0.85rem; }

.market-row-asof.is-dormant {
    color: var(--own-danger);
    font-weight: 600;
}

.market-row-right { flex: none; display: flex; align-items: center; gap: 8px; }

.market-row-price { text-align: right; line-height: 1.15; }

.market-row-price-value {
    display: block;
    font-family: var(--ow-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ow-ink);
    font-variant-numeric: tabular-nums;
}

.market-row-price-currency {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--own-fg-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-row-price-none { font-size: 0.7rem; color: var(--own-fg-3); }

.market-row-check {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--ow-line);
    color: transparent;
}

.market-row-check .material-symbols-outlined { font-size: 1rem; }

.market-row.is-selected .market-row-check {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: #fff;
}

/* ── Test-symbol disclosure ──────────────────────────────────────────────── */
.market-disclose {
    margin-top: 4px;
    border: 1px dashed var(--ow-line);
    border-radius: 14px;
    background: var(--ow-cream);
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--own-fg-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    text-align: left;
}

.market-disclose:hover { border-color: var(--ow-champagne); color: var(--ow-ink); }
.market-disclose .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne-deep); }

/* ── Recents & notes ─────────────────────────────────────────────────────── */
.market-recent-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--own-fg-3);
    padding: 14px 2px 0;
}

.market-recents { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; }

.market-recent {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ow-ink);
    cursor: pointer;
    min-height: 36px;
    white-space: nowrap;
}

.market-recent:hover { border-color: var(--ow-champagne); background: var(--ow-cream); }
.market-recent-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.market-note {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line-soft);
    color: var(--own-fg-2);
    font-size: 0.84rem;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.market-note .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.15rem; flex: none; }

/* Reserved for the one note that reports a wrong outcome rather than a missing one: a listing
   whose price stopped moving. Everything else in this sheet is informational and stays cream. */
.market-note--warn {
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--own-fg-1);
}

.market-note--warn .material-symbols-outlined { color: var(--own-danger); }

/* ── Foot: unit step, attribution, selection, CTA ────────────────────────── */
.market-sheet-foot {
    flex: none;
    /* Keeps the CTA clear of the phone's home indicator when the sheet is
       pinned to the bottom edge. */
    padding: 12px 20px max(20px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ow-line);
    background: var(--ow-paper);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.market-unit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.market-unit-label { font-size: 0.79rem; font-weight: 600; color: var(--own-fg-2); }

.market-unit-options {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
}

.market-unit-option {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--own-fg-2);
    cursor: pointer;
    min-height: 32px;
}

.market-unit-option.is-active { background: var(--ow-ink); color: #fff; }

.market-sheet-attribution { font-size: 0.72rem; }

.market-foot-selection {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.79rem;
    color: var(--own-fg-2);
    min-height: 20px;
}

.market-foot-selection b { color: var(--ow-ink); font-weight: 700; }
.market-foot-selection .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
.market-foot-selection-empty { color: var(--own-fg-3); }

.market-cta {
    min-height: 50px;
    border: none;
    border-radius: 999px;
    background: var(--ow-ink);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--own-dur-fast) var(--own-ease);
}

.market-cta:hover:not(:disabled) { background: var(--ow-ink-2); }
.market-cta .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-champagne); }

.market-cta:disabled {
    background: var(--ow-cream-deep);
    color: var(--own-fg-3);
    cursor: not-allowed;
}

.market-cta:disabled .material-symbols-outlined { color: var(--own-fg-3); }

/* ═══════════════ Capture review — the live-match confirmation card ════════ */
/* ── Identification feedback ───────────────────────────────────────────────────
   The question asked when a capture could not tell what an object is. Built on the
   market-match card's shapes on purpose: it is the same kind of question in the same place of
   the same list, and a second visual language for it would read as a second kind of problem.
   One difference is deliberate and load-bearing — no row here carries a figure. The owner is
   asked what the object is, not what it should be worth. */

.ident-card {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ow-line);
    border-left: 3px solid var(--ow-champagne);
    border-radius: 14px;
    background: var(--ow-cream);
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ident-question {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ow-serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ident-question .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne-deep); }

.ident-candidates { display: flex; flex-direction: column; gap: 6px; }

.ident-candidate {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-paper);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--own-dur-fast) var(--own-ease), background var(--own-dur-fast) var(--own-ease);
}

.ident-candidate:hover { border-color: var(--ow-champagne); background: var(--ow-cream); }

.ident-candidate-name {
    font-family: var(--ow-serif);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ow-ink);
}

.ident-candidate-series { font-size: 0.72rem; font-weight: 600; color: var(--own-fg-3); }

/* What would rule this candidate out — the reason the owner can settle a question the capture
   could not, so it is readable rather than hidden behind a tooltip. */
.ident-candidate-hint { font-size: 0.78rem; line-height: 1.4; color: var(--own-fg-2); }

.ident-context { display: flex; flex-direction: column; gap: 4px; }

.ident-context label { font-size: 0.78rem; font-weight: 600; color: var(--own-fg-2); }

.ident-context textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
}

.ident-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ident-submit,
.ident-unknown {
    padding: 8px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--own-dur-fast) var(--own-ease), background var(--own-dur-fast) var(--own-ease);
}

.ident-submit {
    border: 1px solid var(--ow-champagne);
    background: var(--ow-champagne);
    color: var(--ow-ink);
}

.ident-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.ident-unknown {
    border: 1px solid var(--ow-line);
    background: transparent;
    color: var(--own-fg-2);
}

.ident-unknown:hover { border-color: var(--ow-champagne); }

/* ── After the answer: the wait, and what it changed ───────────────────────────
   The answer used to vanish into a card that kept showing the name, the description and the
   figures of the object nobody had identified yet, and rewrote itself half a minute later without
   a word. These two states say both halves out loud, in the slot the question has just left, and
   are built on the question card's own shapes so the sequence reads as one exchange. */

.ident-research {
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--ow-line);
    border-left: 3px solid var(--ow-champagne);
    border-radius: 14px;
    background: var(--ow-cream);
    color: var(--own-fg-2);
    font-family: var(--own-font-sans);
    font-size: 0.85rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ident-research .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--ow-champagne-deep);
    flex-shrink: 0;
}

/* The wait has to look like a wait. Without motion the strip reads as a finished statement and
   the owner goes looking for the value it has not produced yet. */
.ident-research .ai-pulse-icon {
    display: inline-block;
    animation: ident-research-pulse 1.4s ease-in-out infinite;
}

@keyframes ident-research-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .ident-research .ai-pulse-icon { animation: none; }
}

.ident-research-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* "Search 1 of 2" — the wait stops being a spinner and becomes a process with a length. Set small
   and above the sentence so it reads as a position, not as the message itself. */
.ident-research-step {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ow-champagne-deep);
}

.ident-research.is-done { color: var(--ow-ink); }

.ident-research.is-done .material-symbols-outlined { color: var(--ow-champagne-deep); }

/* Both searches ran out of time. Not an error — the object kept the figures it already had — so it
   stays in the same card language and only loses the gold accent that means "something happened". */
.ident-research.is-failed {
    border-left-color: var(--own-fg-3);
    background: var(--ow-cream-deep);
}

.ident-research.is-failed .material-symbols-outlined { color: var(--own-fg-2); }

/* The one lever the owner has over both the answer and their own bill, so it sits with the failure
   rather than only in the price list. */
.ident-research-tip {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--own-fg-2);
}

.ident-research-retry {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 6px 12px;
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--own-dur-fast) var(--own-ease), background var(--own-dur-fast) var(--own-ease);
}

.ident-research-retry:hover { border-color: var(--ow-champagne); background: var(--ow-cream); }

.ident-research-retry .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }

/* The dialog stacks one card per open object. */
.ident-dialog { display: flex; flex-direction: column; gap: 14px; }

.ident-dialog-intro { font-size: 0.88rem; line-height: 1.5; color: var(--own-fg-2); }

.ident-dialog-object { display: flex; flex-direction: column; gap: 4px; }

.ident-dialog-object-name {
    font-family: var(--ow-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ow-ink);
}

.ident-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; }

.market-match-card {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ow-line);
    border-left: 3px solid var(--ow-champagne);
    border-radius: 14px;
    background: var(--ow-cream);
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.market-match-question {
    font-family: var(--ow-serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* OWNY Help & Explain on the live-market match card — 22 px round, beside the question on the
   cream candidate card. The ink-surface variants (confirmed-link strips) follow further down,
   next to .market-match-remove, because those cards flip the whole palette. */
.market-match-help {
    width: 22px;
    height: 22px;
    flex: none;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-champagne-deep);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease), border-color var(--own-dur-fast) var(--own-ease);
}

.market-match-help:hover { border-color: var(--ow-champagne); background: var(--ow-cream-deep); }
.market-match-help.on { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }
.market-match-help .material-symbols-outlined { font-size: 13px; }

.market-match-candidates { display: flex; flex-direction: column; gap: 6px; }

.market-match-candidate {
    display: flex;
    align-items: center;
    /* Wraps so the evidence line (currency, ISIN, price date) gets a row of its own. */
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-paper);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--own-dur-fast) var(--own-ease), background var(--own-dur-fast) var(--own-ease);
}

.market-match-candidate:hover { border-color: var(--ow-champagne); background: var(--ow-cream); }

.market-match-symbol {
    flex: none;
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--ow-blush);
    color: var(--ow-champagne-deep);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.market-match-name {
    flex: 1;
    min-width: 0;
    font-family: var(--ow-serif);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ow-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-match-exchange { font-family: var(--own-font-sans); font-size: 0.72rem; font-weight: 600; color: var(--own-fg-3); }

/* Currency, ISIN and the date of the price: the facts that decide whether this candidate is the
   paper the user holds. Ordered last so it wraps onto its own line below the price rather than
   squeezing the name — the button is a single flex row otherwise. */
.market-match-evidence {
    order: 2;
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.68rem;
    color: var(--own-fg-3);
    font-variant-numeric: tabular-nums;
}

.market-match-fact.is-dormant { color: var(--own-danger); font-weight: 700; }

.market-match-quote {
    flex: none;
    font-family: var(--ow-serif);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ow-ink);
    font-variant-numeric: tabular-nums;
}

.market-match-accept {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ow-champagne-deep);
}

.market-match-explainer { font-size: 0.78rem; line-height: 1.45; color: var(--own-fg-2); }

/* Listings quoted in a currency other than the user's — folded away on the match card, the same
   dashed disclosure the picker sheet uses for its test symbols, sized for the smaller card. */
.market-match-disclose {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px dashed var(--ow-line);
    border-radius: 999px;
    background: var(--ow-paper);
    color: var(--own-fg-2);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    min-height: 32px;
    padding: 0 13px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease);
}

.market-match-disclose:hover { border-color: var(--ow-champagne); color: var(--ow-ink); }
.market-match-disclose .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }

/* Confirmed: a quiet ink strip, because the decision is already made. */
.market-match-card--linked {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    border-left-color: var(--ow-champagne);
    color: #fff;
}

.market-match-badge { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 600; }

.market-match-live-value {
    flex: none;
    font-family: var(--ow-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ow-champagne);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════ Attribution line ════════════════════════════════════════ */
.market-attribution {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--own-fg-3);
}

.market-attribution-source { font-weight: 600; }
.market-attribution-delayed { cursor: help; color: var(--ow-champagne-deep); }

/* An outage has to be visible; it must not read like ordinary small print. */
.market-attribution--stale { color: var(--ow-champagne-deep); }
.market-attribution--stale .market-attribution-stale-hint { font-weight: 700; }

/* On the ink value card the line inherits the card's own muted white instead. */
.obj-value-card .market-attribution { color: rgba(255, 255, 255, 0.6); }
.obj-value-card .market-attribution--stale { color: var(--ow-champagne); }

/* ═══════════════ Manual wizard — the catalog entry point ═════════════════ */
.manual-catalog-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px dashed var(--ow-champagne);
    border-radius: 14px;
    background: var(--ow-cream);
    color: var(--ow-ink);
}

.manual-catalog-offer-text { min-width: 0; }
.manual-catalog-offer b { font-family: var(--ow-serif); font-size: 1.02rem; font-weight: 600; }
.manual-catalog-offer-hint { font-size: 0.82rem; line-height: 1.4; color: var(--own-fg-2); margin-top: 2px; }

.manual-catalog-offer-action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: var(--ow-ink);
    color: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease);
}

.manual-catalog-offer-action:hover { background: var(--ow-ink-2); }
.manual-catalog-offer-action .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne); }

/* OWNY Help & Explain beside the catalog entry point — 22 px round, sits inline after the
   offer's title (and after the linked badge, so the affordance survives the pick). Ink-filled
   while the drawer for the live-market link is open. */
.manual-catalog-help {
    width: 22px;
    height: 22px;
    flex: none;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-champagne-deep);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease), border-color var(--own-dur-fast) var(--own-ease);
}

.manual-catalog-help:hover { border-color: var(--ow-champagne); background: var(--ow-cream-deep); }
.manual-catalog-help.on { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }
.manual-catalog-help .material-symbols-outlined { font-size: 13px; }

.manual-catalog-linked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--ow-ink);
    border-left: 3px solid var(--ow-champagne);
    border-radius: 14px;
    background: var(--ow-ink);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
}

.manual-catalog-linked-text { flex: 1; min-width: 0; }
.manual-catalog-linked > .material-symbols-outlined { color: var(--ow-champagne); font-size: 1.1rem; flex: none; }

/* The quiet dismiss affordance shared by both confirmed-link strips (capture
   review and manual wizard) — an ink-safe circle rather than a Radzen button,
   which would drop a light-themed control onto a dark card. */
.market-match-remove {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease);
}

.market-match-remove:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.market-match-remove .material-symbols-outlined { font-size: 0.95rem; }

/* Same circle, ink-safe: on the two confirmed-link strips the help affordance has to read
   against the ink card, so it borrows the dismiss button's translucent-white chrome and
   inverts (champagne fill) while the drawer is open. */
.market-match-card--linked .market-match-help,
.manual-catalog-linked .manual-catalog-help {
    width: 26px;
    height: 26px;
    margin-left: 0;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ow-champagne);
}

.market-match-card--linked .market-match-help:hover,
.manual-catalog-linked .manual-catalog-help:hover { background: rgba(255, 255, 255, 0.18); }

.market-match-card--linked .market-match-help.on,
.manual-catalog-linked .manual-catalog-help.on {
    background: var(--ow-champagne);
    border-color: var(--ow-champagne);
    color: var(--ow-ink);
}

.market-match-card--linked .market-match-help .material-symbols-outlined,
.manual-catalog-linked .manual-catalog-help .material-symbols-outlined { font-size: 0.95rem; }

/* "No, keep estimate" — a decision, but the quieter of the two on the card. */
.market-match-reject {
    align-self: flex-start;
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    background: var(--ow-paper);
    color: var(--own-fg-2);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    min-height: 34px;
    padding: 0 14px;
    cursor: pointer;
    transition: border-color var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease);
}

.market-match-reject:hover { border-color: var(--ow-champagne); color: var(--ow-ink); }

/* ═══════════════ Object details — market chart range chips & trend ═══════ */
/* A segmented pill in the same ink/cream language as the picker's class switch,
   rather than four Radzen buttons whose primary indigo is the one brand colour
   this page deliberately does not use. */
.obj-market-range-chips {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    margin-bottom: 10px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    flex-wrap: wrap;
}

.obj-market-range-chip {
    border: none;
    background: transparent;
    border-radius: 999px;
    min-height: 30px;
    padding: 0 14px;
    font-family: var(--own-font-sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--own-fg-2);
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease), color var(--own-dur-fast) var(--own-ease);
}

.obj-market-range-chip:hover { color: var(--ow-ink); }
.obj-market-range-chip.is-active { background: var(--ow-ink); color: #fff; }

/* The 24 h delta next to the live figure. Sits on the ink value card, so the
   two directions are picked to stay legible against it. */
.obj-market-trend-up,
.obj-market-trend-down {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.obj-market-trend-up { color: #7dd8a5; }
.obj-market-trend-down { color: #e89aa4; }

/* The linked listing has stopped producing closes. Sits on the same ink value card, so the
   warning colour is the light one that survives that background — and it is deliberately louder
   than the attribution line above it: a stale refresh catches up by itself, a delisted paper
   never does. */
.obj-market-dormant {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(232, 154, 164, 0.14);
    border: 1px solid rgba(232, 154, 164, 0.42);
    color: #f0b8c0;
    font-size: 0.78rem;
    line-height: 1.4;
    text-wrap: pretty;
}

/* ═══════════════════════ LANDING · MARKTANBINDUNG ═══════════════════════
   The live-market section under the Gesamtbild. Scoped to .lp like the rest of the landing
   styles, so the short `mkt-` prefix cannot reach into the app itself. The stage is a
   before/after card: the estimate on one side, the calculation with a named source on the
   other, and between them the evidence row the user actually checks. */

.lp .lp-mkt { background: var(--ow-cream); border-top: 1px solid var(--ow-line); }

.lp .mkt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 44px; }
.lp .mkt-step { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 22px 24px 24px; }
.lp .mkt-step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lp .mkt-step-n { font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 600; color: var(--ow-champagne-deep); line-height: 1; }
.lp .mkt-step-who { margin-left: auto; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--own-fg-3); border: 1px solid var(--ow-line); border-radius: 999px; padding: 5px 10px; }

/* Step 02 is the one the user performs, so it is the one in ink: the section's whole claim is
   that the machine proposes and the person decides. */
.lp .mkt-step.mine { background: var(--ow-ink); border-color: var(--ow-ink); }
.lp .mkt-step.mine .mkt-step-n { color: var(--ow-champagne); }
.lp .mkt-step.mine .mkt-step-who { color: var(--ow-champagne); border-color: rgba(201,169,106,0.45); }
.lp .mkt-step h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 10px; color: var(--ow-ink); }
.lp .mkt-step.mine h3 { color: var(--ow-cream); }
.lp .mkt-step p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }
.lp .mkt-step.mine p { color: rgba(246,241,231,0.78); }

/* Stage */
.lp .mkt-stage { margin-bottom: 48px; }
.lp .mkt-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.lp .mkt-tab { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--own-fg-2); background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: all 160ms ease; }
.lp .mkt-tab .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne-deep); }
.lp .mkt-tab:hover { border-color: var(--ow-champagne); }
.lp .mkt-tab.on { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-cream); }
.lp .mkt-tab.on .material-symbols-outlined { color: var(--ow-champagne); }
.lp .mkt-ba { margin-left: auto; display: flex; gap: 4px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 999px; padding: 4px; }
.lp .mkt-ba button { font: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--own-fg-3); background: none; border: none; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.lp .mkt-ba button.on { background: var(--ow-cream-deep); color: var(--ow-ink); }

.lp .mkt-card { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 22px; padding: 26px 28px 24px; box-shadow: 0 26px 60px -34px rgba(11,16,32,0.28); }
.lp .mkt-obj { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--ow-line); }
.lp .mkt-obj-glyph { width: 52px; height: 52px; border-radius: 14px; background: var(--ow-cream); border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp .mkt-obj-glyph .material-symbols-outlined { font-size: 1.5rem; color: var(--ow-champagne-deep); }
.lp .mkt-obj-text { min-width: 0; }
.lp .mkt-obj-name { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--ow-ink); }
.lp .mkt-obj-meta { font-size: 0.82rem; color: var(--own-fg-2); margin-top: 4px; }
.lp .mkt-state { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--own-fg-3); background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 999px; padding: 7px 12px; }
.lp .mkt-state .material-symbols-outlined { font-size: 0.95rem; }
.lp .mkt-state.on { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }

.lp .mkt-before, .lp .mkt-after { animation: mktIn 320ms cubic-bezier(0.2,0.7,0.3,1) both; }
@keyframes mktIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp .mkt-before, .lp .mkt-after { animation: none; } }

.lp .mkt-val { min-width: 0; }
.lp .mkt-val-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--own-fg-3); }
.lp .mkt-val-v { font-family: var(--ow-serif); font-size: 2.1rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--ow-ink); margin-top: 8px; }
.lp .mkt-val-v small { font-family: var(--own-font-sans); font-size: 0.82rem; font-weight: 400; color: var(--own-fg-3); margin-left: 8px; letter-spacing: 0; }
/* The estimate is deliberately the quieter number: it is the state the section is about leaving. */
.lp .mkt-val-est { color: var(--own-fg-2); }
.lp .mkt-val-note { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--own-fg-3); margin-top: 8px; }
.lp .mkt-val-note .material-symbols-outlined { font-size: 0.95rem; }
.lp .mkt-src { font-family: ui-monospace, Menlo, monospace; font-size: 0.72rem; color: var(--ow-champagne-deep); }
.lp .mkt-before .mkt-val { padding: 20px 0 22px; }

.lp .mkt-sugg { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 18px; padding: 20px 22px 22px; }
.lp .mkt-sugg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp .mkt-sugg-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ow-ink); background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 999px; padding: 7px 12px; }
.lp .mkt-sugg-tag .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
.lp .mkt-sugg-sub { font-size: 0.8rem; color: var(--own-fg-3); }
.lp .mkt-sugg-lede { font-size: 0.95rem; line-height: 1.55; color: var(--own-fg-1); margin: 14px 0; text-wrap: pretty; }
.lp .mkt-sugg-rows { margin: 0 0 18px; display: flex; flex-direction: column; gap: 1px; background: var(--ow-line); border: 1px solid var(--ow-line); border-radius: 12px; overflow: hidden; }
.lp .mkt-sugg-row { display: flex; align-items: baseline; gap: 16px; background: var(--ow-paper); padding: 11px 14px; }
.lp .mkt-sugg-row dt { font-size: 0.8rem; color: var(--own-fg-3); width: 132px; flex-shrink: 0; }
.lp .mkt-sugg-row dd { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--ow-ink); min-width: 0; }
.lp .mkt-sugg-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.lp .mkt-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.92rem; font-weight: 600; border-radius: 999px; padding: 12px 20px; cursor: pointer; transition: all 160ms ease; }
.lp .mkt-btn .material-symbols-outlined { font-size: 1.1rem; }
.lp .mkt-btn-ink { background: var(--ow-ink); border: 1px solid var(--ow-ink); color: var(--ow-cream); }
.lp .mkt-btn-ink:hover { background: var(--ow-ink-2); }
.lp .mkt-btn-ghost { background: transparent; border: 1px solid var(--ow-line); color: var(--own-fg-2); }
.lp .mkt-btn-ghost:hover { border-color: var(--ow-champagne); color: var(--ow-ink); }

.lp .mkt-search { margin-top: 16px; border: 1px dashed var(--ow-line); border-radius: 16px; padding: 16px 18px 18px; background: var(--ow-paper); animation: mktIn 260ms ease both; }
.lp .mkt-search-field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ow-line); border-radius: 999px; padding: 10px 16px; background: var(--ow-cream); }
.lp .mkt-search-field .material-symbols-outlined { font-size: 1.05rem; color: var(--own-fg-3); }
.lp .mkt-search-q { font-family: ui-monospace, Menlo, monospace; font-size: 0.9rem; color: var(--ow-ink); }
.lp .mkt-search-hint { margin-left: auto; font-size: 0.74rem; color: var(--own-fg-3); }
.lp .mkt-search-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lp .mkt-search-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--ow-line); border-radius: 12px; padding: 11px 14px; }
.lp .mkt-search-row .p { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; font-weight: 600; color: var(--ow-ink); }
/* Venue, currency and the date of the last price — the line that lets a dead listing be spotted
   before it is connected. Small, but never hidden. */
.lp .mkt-search-row .p small { font-size: 0.74rem; font-weight: 400; color: var(--own-fg-3); }
.lp .mkt-search-row .c { margin-left: auto; font-family: var(--ow-serif); font-size: 1.1rem; font-weight: 600; color: var(--ow-ink); }
.lp .mkt-search-row .a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ow-champagne-deep); }
.lp .mkt-search-row .a .material-symbols-outlined { font-size: 1rem; }
.lp .mkt-search-row.stale { border-style: dashed; opacity: 0.82; }
.lp .mkt-search-row .a.warn { color: var(--own-warning, #b45309); }
.lp .mkt-search-note { font-size: 0.82rem; line-height: 1.5; color: var(--own-fg-2); margin: 12px 0 0; text-wrap: pretty; }

.lp .mkt-after-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px 0 24px; }
.lp .mkt-val-right { text-align: right; }
.lp .mkt-val-right .mkt-val-note { justify-content: flex-end; }

.lp .mkt-chart { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 18px; padding: 18px 20px 8px; }
.lp .mkt-chart-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.lp .mkt-chart-k { font-size: 0.86rem; font-weight: 700; color: var(--ow-ink); display: flex; flex-direction: column; gap: 3px; }
.lp .mkt-chart-k small { font-size: 0.76rem; font-weight: 400; color: var(--own-fg-3); }
.lp .mkt-chart-ranges { margin-left: auto; display: flex; gap: 4px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 999px; padding: 4px; }
.lp .mkt-chart-ranges button { font: inherit; font-size: 0.76rem; font-weight: 700; color: var(--own-fg-3); background: none; border: none; border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.lp .mkt-chart-ranges button.on { background: var(--ow-ink); color: var(--ow-champagne); }
.lp .mkt-curve { display: block; width: 100%; height: 96px; }
.lp .mkt-curve-line { fill: none; stroke: var(--ow-ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lp .mkt-curve-area { fill: rgba(201,169,106,0.14); stroke: none; }
.lp .mkt-curve-dot { fill: var(--ow-champagne-deep); }

.lp .mkt-after-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding-top: 18px; }
.lp .mkt-cad { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: var(--ow-ink); background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 999px; padding: 7px 13px; }
.lp .mkt-cad .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
.lp .mkt-cad-note { font-size: 0.82rem; color: var(--own-fg-2); }
.lp .mkt-undo { margin-left: auto; padding: 9px 16px; font-size: 0.85rem; }

/* Sources */
.lp .mkt-sources-head .k { display: block; font-family: var(--ow-serif); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.015em; color: var(--ow-ink); }
.lp .mkt-sources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.lp .mkt-source { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 22px 24px 24px; }
.lp .mkt-source-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lp .mkt-source-glyph { width: 42px; height: 42px; border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); display: flex; align-items: center; justify-content: center; }
.lp .mkt-source-glyph .material-symbols-outlined { font-size: 1.3rem; color: var(--ow-champagne-deep); }
.lp .mkt-source-cls { margin-left: auto; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--own-fg-3); }
/* Provider names stay in mono: they are identifiers the reader may want to look up, not prose. */
.lp .mkt-source h4 { font-family: ui-monospace, Menlo, monospace; font-size: 1.02rem; font-weight: 600; color: var(--ow-ink); margin: 0 0 10px; letter-spacing: -0.01em; }
.lp .mkt-source-cad { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--ow-ink); }
.lp .mkt-source-cad .material-symbols-outlined { font-size: 0.95rem; color: var(--ow-champagne-deep); }
.lp .mkt-source-detail { font-size: 0.9rem; line-height: 1.55; color: var(--own-fg-2); margin: 8px 0 14px; text-wrap: pretty; }
.lp .mkt-source-ex { font-size: 0.84rem; color: var(--own-fg-3); margin: 0; padding-top: 12px; border-top: 1px solid var(--ow-line); }

.lp .mkt-legal { display: flex; gap: 14px; align-items: flex-start; margin-top: 36px; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; font-size: 0.88rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }
.lp .mkt-legal .material-symbols-outlined { font-size: 1.2rem; color: var(--ow-champagne-deep); flex-shrink: 0; margin-top: 1px; }
.lp .mkt-legal strong { color: var(--ow-ink); font-weight: 700; }

.lp .mkt-tab, .lp .mkt-undo, .lp .mkt-ba button { white-space: nowrap; }

@media (max-width: 1000px) {
  .lp .mkt-steps { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .lp .mkt-sources-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lp .mkt-card { padding: 20px 18px; border-radius: 18px; }
  .lp .mkt-tabs { gap: 6px; }
  .lp .mkt-tab { font-size: 0.84rem; padding: 8px 13px; }
  .lp .mkt-ba { margin-left: 0; width: 100%; }
  .lp .mkt-ba button { flex: 1; }
  .lp .mkt-obj { gap: 12px; }
  .lp .mkt-obj-glyph { width: 44px; height: 44px; }
  .lp .mkt-obj-name { font-size: 1.2rem; }
  .lp .mkt-state { font-size: 0.64rem; padding: 6px 10px; }
  .lp .mkt-val-v { font-size: 1.7rem; }
  .lp .mkt-after-top { grid-template-columns: 1fr; gap: 18px; }
  .lp .mkt-val-right { text-align: left; }
  .lp .mkt-val-right .mkt-val-note { justify-content: flex-start; }
  .lp .mkt-sugg { padding: 16px 16px 18px; }
  .lp .mkt-sugg-row { flex-direction: column; gap: 3px; }
  .lp .mkt-sugg-row dt { width: auto; }
  .lp .mkt-sugg-cta .mkt-btn { width: 100%; justify-content: center; }
  .lp .mkt-search-row { flex-wrap: wrap; gap: 8px 12px; }
  .lp .mkt-search-row .c { margin-left: auto; }
  .lp .mkt-undo { margin-left: 0; }
  .lp .mkt-legal { padding: 16px 18px; }
}


/* =========================================================================
   OWNAMIC — Partner program landing pages
   ("/partner/program" plus the four segment pages). Implemented from the
   design bundles in docs/TemporaryPartnerbereichDesigns.

   Every one of these pages carries `lp pp` on its root element: `.lp` supplies
   the landing design system defined above (tokens, .lp-shell, .lp-btn*,
   .lp-nav*, .lp-section, .lp-section-head, .lp-eyebrow, the icon font), `.pp`
   namespaces what the partner bundles add on top. The bundles' own unprefixed
   primitives (.shell/.btn/.nav/.section/.eyebrow) were renamed onto the `lp-`
   classes rather than duplicated, so the two page families cannot drift apart.
   ========================================================================= */

/* The bundles use `.section.tight` for the narrower "Abgrenzung" band; the
   base block above only carries the 120px section rhythm. */
.pp .lp-section.tight { padding: 88px 0; }

/* The bundles ship the wordmark as an <img>. These pages set it in type instead,
   reusing the home page's `.hero-logo-text-span` (nav) and `.ownamic-text-span`
   (inline in a lede), both defined at the top of this file.

   The one addition: in an "Abgrenzung" comparison the app name is a column key opposite a
   localized one ("Was Sie tun"). It takes the wordmark face like every other reading of the
   name, but keeps the key's size and uppercase tracking — otherwise the two keys of the pair
   stop reading as a pair. */
.pp .sc-k .ownamic-text-span { font-size: inherit; letter-spacing: inherit; }

/* Cross-links between the partner pages. The bundles carry them inside a page
   footer, but MainLayout renders the site footer once for every page, so they
   sit in a slim bar above it instead of duplicating it. */
.pp .pp-crosslinks-bar { background: var(--ow-ink); border-top: 1px solid rgba(255,255,255,0.09); padding: 26px 0; }
.pp .pp-crosslinks-inner { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.pp .pp-crosslinks-inner .k { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.42); }
.pp .pp-crosslinks { display: flex; gap: 12px 26px; flex-wrap: wrap; }
.pp .pp-crosslinks a { display: inline-flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.78); transition: color 160ms ease; }
.pp .pp-crosslinks a:hover { color: #fff; }
.pp .pp-crosslinks a .swatch { width: 4px; height: 16px; border-radius: 2px; flex-shrink: 0; }

/* =========================================================================
   OWNAMIC — Partnerbereich (Übersicht)
   Erbt Farbwelt und Typografie aus landing/styles.css.
   Signatur: die vier Gewerke als farbcodierte Zugänge — jedes Segment trägt
   den Akzent seiner eigenen Seite, damit die Zuordnung sofort sitzt.
   ========================================================================= */

.pp {
  --ph-advisor: #a7864b;   /* Finanzberatung — Champagner */
  --ph-organiz: #7c3aed;   /* Ordnungscoaching — Lavendel/Violett */
  --ph-estate:  #5b21b6;   /* Nachlasserfassung — Siegelviolett */
  --ph-auction: #b08d4f;   /* Auktion & Restaurierung — Messing */
  --ph-clear:   #4338ca;   /* Haushaltsauflösung & Umzug — Indigo */
  --ph-retail:  #6d28d9;   /* Fachhandel — Violett */
  --ph-rule:      #e6e1d7;
  --ph-rule-fine: #efebe2;
  --ph-wash:      #f8f6f1;
}

.pp a { color: var(--ow-champagne-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pp a:hover { color: var(--ow-ink); }

.pp a.lp-btn,
.pp a.seg,
.pp .ph-cta-jump a,
.pp .lp-nav a,
.pp .pp-crosslinks-bar a { text-decoration: none; }

.pp :focus-visible { outline: 2px solid var(--ow-champagne-deep); outline-offset: 3px; border-radius: 4px; }

/* FocusOnNavigate (Routes.razor, Selector="h1") setzt nach jeder Navigation den Fokus auf die
   Seitenüberschrift; Blazor gibt ihr dafür tabindex="-1". Ohne diese Regel rahmt der Fokusring
   darüber den Hero-Titel jeder Partnerseite champagnerfarben ein, sobald die Seite geladen ist.
   Die Überschrift ist kein Bedienelement — der Ring entfällt für sie (wie global schon bei
   `h1:focus`) und bleibt für alles Fokussierbare erhalten. Die Regel greift auf allen .pp-Seiten,
   auch dort, wo der Segmentblock `.pp :focus-visible` mit eigener Akzentfarbe wiederholt. */
.pp h1:focus,
.pp h1:focus-visible { outline: none; }

.pp .ph-num { font-family: var(--ow-serif); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ow-champagne-deep); }

/* ─────────────────────── NAV ─────────────────────── */

.pp .ph-nav { padding: 22px 0; }

.pp .ph-nav .lp-nav-links a { color: rgba(255,255,255,0.72); }

.pp .ph-nav .lp-nav-links a:hover { color: white; }

.pp .ph-nav .lp-nav-cta .lp-btn { white-space: nowrap; flex-shrink: 0; }

.pp .ph-nav-tag { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne); border: 1px solid rgba(201,169,106,0.45); border-radius: 999px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

/* ─────────────────────── HERO ─────────────────────── */

.pp .ph-hero { position: relative; overflow: hidden; color: white; background: radial-gradient(900px 520px at 78% -8%, rgba(124,58,237,0.22), transparent 62%), radial-gradient(760px 560px at 6% 98%, rgba(201,169,106,0.12), transparent 58%), linear-gradient(180deg, #07091a 0%, #0b1020 60%, #0b1020 100%); }

.pp .ph-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px); background-size: 76px 76px; mask-image: radial-gradient(ellipse at 56% 32%, black 24%, transparent 74%); pointer-events: none; }

.pp .ph-hero-inner { position: relative; padding-top: 150px; padding-bottom: 84px; }

.pp .ph-hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; background: rgba(201,169,106,0.10); border: 1px solid rgba(201,169,106,0.36); color: var(--ow-champagne); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 999px; margin-bottom: 28px; }

.pp .ph-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ow-champagne); box-shadow: 0 0 11px var(--ow-champagne); }

.pp .ph-hero-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: end; }

.pp .ph-hero h1 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.04; letter-spacing: -0.02em; color: white; margin: 0 0 20px; text-wrap: balance; }

.pp .ph-hero h1 em { font-style: italic; color: var(--ow-champagne); }

.pp .ph-hero .ph-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.18rem; line-height: 1.4; color: rgba(255,255,255,0.62); margin: 0; padding-left: 16px; border-left: 1px solid rgba(201,169,106,0.5); text-wrap: pretty; }

.pp .ph-hero .ph-lede { font-size: 1.06rem; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0 0 26px; text-wrap: pretty; }


.pp .ph-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kennzahlenband des Programms */
.pp .ph-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); }

.pp .ph-fact { padding: 0 32px; border-left: 1px solid rgba(255,255,255,0.12); }

.pp .ph-fact:first-child { border-left: 0; padding-left: 0; }

.pp .ph-fact:last-child { padding-right: 0; }

.pp .ph-fact .f-v { font-family: var(--ow-serif); font-weight: 500; font-size: 2.1rem; line-height: 1; letter-spacing: -0.02em; color: var(--ow-champagne); font-variant-numeric: tabular-nums; }

.pp .ph-fact .f-k { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.5); margin-top: 12px; }

.pp .ph-fact .f-d { font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.7); margin-top: 8px; text-wrap: pretty; }

/* ─────────────────────── SIGNATUR: DIE ZUGÄNGE ─────────────────────── */

.pp .ph-segs { background: var(--ow-paper); }

.pp .ph-seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pp .seg { display: flex; flex-direction: column; background: var(--ow-paper); border: 1px solid var(--ph-rule); border-radius: 4px; padding: 0; overflow: hidden; color: inherit; transition: transform 180ms var(--own-ease, ease), box-shadow 180ms var(--own-ease, ease), border-color 180ms ease; }

.pp .seg:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -34px rgba(11,16,32,0.42); border-color: var(--seg-accent); }

.pp .seg .s-bar { height: 4px; background: var(--seg-accent); }

.pp .seg .s-body { padding: 30px 32px 26px; display: flex; flex-direction: column; flex: 1; }

.pp .seg .s-k { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 0.64rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700; color: var(--seg-accent); border: 1px solid var(--seg-accent); border-radius: 3px; padding: 5px 10px; }

.pp .seg .s-k .material-symbols-outlined { font-size: 0.95rem; }

.pp .seg h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.72rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--ow-ink); margin: 18px 0 10px; text-wrap: balance; }

.pp .seg .s-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.04rem; line-height: 1.42; color: var(--own-fg-2); margin: 0 0 16px; text-wrap: pretty; }

.pp .seg .s-p { margin: 0 0 20px; font-size: 0.94rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .seg .s-list { list-style: none; margin: 0 0 22px; padding: 20px 0 0; border-top: 1px solid var(--ph-rule-fine); display: flex; flex-direction: column; gap: 10px; }

.pp .seg .s-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .seg .s-list li .material-symbols-outlined { font-size: 1.02rem; color: var(--seg-accent); flex-shrink: 0; margin-top: 1px; }

.pp .seg .s-go { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--ph-rule-fine); display: inline-flex; align-items: center; gap: 9px; font-size: 0.92rem; font-weight: 700; color: var(--seg-accent); }

.pp .seg .s-go .material-symbols-outlined { font-size: 1.05rem; transition: transform 180ms ease; }

.pp .seg:hover .s-go .material-symbols-outlined { transform: translateX(4px); }

/* Das kennzeichnende Motiv je Segment — Miniatur, kein Screenshot */
/* With an odd number of trades the last card would sit alone beside a gap, so
   it runs the full width instead and lays its checklist out in two columns. */
.pp .ph-seg-grid .seg:last-child:nth-child(odd) { grid-column: 1 / -1; }

.pp .ph-seg-grid .seg:last-child:nth-child(odd) .s-thesis,
.pp .ph-seg-grid .seg:last-child:nth-child(odd) .s-p { max-width: 46em; }

.pp .ph-seg-grid .seg:last-child:nth-child(odd) .s-list { flex-direction: row; flex-wrap: wrap; gap: 10px 32px; }

.pp .ph-seg-grid .seg:last-child:nth-child(odd) .s-list li { flex: 1 1 18em; }

.pp .seg-motif { margin: 0 0 20px; padding: 16px 18px; background: var(--ph-wash); border: 1px solid var(--ph-rule-fine); border-radius: 3px; }

.pp .seg-motif .m-k { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 12px; }

/* Spannen — Finanzberatung */
.pp .mo-range { display: flex; align-items: baseline; gap: 8px; }

.pp .mo-range .v { font-family: var(--ow-serif); font-size: 1.34rem; font-weight: 500; letter-spacing: -0.015em; color: var(--ow-ink); font-variant-numeric: tabular-nums; }

.pp .mo-range .v .to { color: var(--own-fg-3); margin: 0 2px; }

.pp .mo-range .u { font-size: 0.76rem; font-weight: 600; color: var(--own-fg-3); }

.pp .mo-bar { height: 6px; border-radius: 999px; background: var(--ow-cream-deep); margin-top: 11px; position: relative; overflow: hidden; }

.pp .mo-bar > i { position: absolute; top: 0; bottom: 0; left: 16%; right: 26%; border-radius: 999px; background: var(--seg-accent); opacity: 0.75; }

/* Vier Sammlungen — Ordnungscoaching */
.pp .mo-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.pp .mo-quad div { border-radius: 3px; padding: 9px 8px 8px; text-align: center; }

.pp .mo-quad div span { display: block; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }

.pp .mo-quad div b { display: block; font-family: var(--ow-serif); font-size: 1.02rem; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }

.pp .mo-quad .q1 { background: #ede9fe; color: #5b21b6; }

.pp .mo-quad .q2 { background: #ddd6fe; color: #5b21b6; }

.pp .mo-quad .q3 { background: #c4b5fd; color: #3c1a78; }

.pp .mo-quad .q4 { background: #a78bfa; color: #2e1065; }

/* Belegstufen — Nachlasserfassung */
.pp .mo-stamps { display: flex; flex-direction: column; gap: 9px; }

.pp .mo-stamp { display: flex; align-items: center; gap: 9px; }

.pp .mo-stamp .segs { display: inline-flex; gap: 3px; }

.pp .mo-stamp .segs i { width: 8px; height: 8px; border: 1px solid var(--seg-accent); border-radius: 1px; }

.pp .mo-stamp .segs i.on { background: var(--seg-accent); }

.pp .mo-stamp .l { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--own-fg-2); }

/* Kette — Auktion & Restaurierung */
.pp .mo-chain { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }

.pp .mo-chain::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--seg-accent); opacity: 0.6; }

.pp .mo-chain li { position: relative; padding: 0 0 11px; display: flex; align-items: baseline; gap: 10px; }

.pp .mo-chain li:last-child { padding-bottom: 0; }

.pp .mo-chain li::before { content: ""; position: absolute; left: -19px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--seg-accent); background: var(--ph-wash); box-sizing: border-box; }

.pp .mo-chain li.on::before { background: var(--seg-accent); }

.pp .mo-chain .y { font-family: var(--ow-serif); font-size: 0.9rem; font-weight: 600; color: var(--seg-accent); font-variant-numeric: tabular-nums; }

.pp .mo-chain .t { font-size: 0.82rem; color: var(--own-fg-2); }

/* Übergabeprotokoll — Haushaltsauflösung & Umzug */
.pp .mo-protocol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.pp .mo-protocol div { border: 1px solid var(--ph-rule-fine); border-radius: 3px; padding: 10px 8px 9px; text-align: center; background: var(--ow-paper); }

.pp .mo-protocol div b { display: block; font-family: var(--ow-serif); font-size: 1.12rem; font-weight: 600; color: var(--seg-accent); font-variant-numeric: tabular-nums; }

.pp .mo-protocol div span { display: block; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-top: 4px; }

/* Fachhandel: der Objektcode als geprägte Platte — dieselbe Anmutung wie die
   `.fh-plate` auf der Segmentseite, nur auf Miniaturgröße gebracht. */

.pp .mo-code { display: flex; align-items: center; gap: 12px; }

.pp .mo-code .plate { position: relative; width: 42px; height: 42px; flex-shrink: 0; border-radius: 8px; background: var(--ow-paper); border: 1px solid var(--ph-rule-fine); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85); overflow: hidden; }

.pp .mo-code .plate i { position: absolute; inset: 6px; background-image: radial-gradient(circle at 1.4px 1.4px, var(--seg-accent) 1.2px, transparent 1.3px); background-size: 7px 7px; opacity: 0.55; }

.pp .mo-code b { display: block; font-family: var(--fh-mono-font); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; color: var(--seg-accent); }

.pp .mo-code span { display: block; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-top: 5px; }

/* ─────────────────────── GEMEINSAME GRUNDLAGE ─────────────────────── */

.pp .ph-common { background: var(--ph-wash); border-top: 1px solid var(--ph-rule); border-bottom: 1px solid var(--ph-rule); }

.pp .ph-sec-head { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: end; padding-bottom: 24px; margin-bottom: 44px; border-bottom: 1px solid var(--ph-rule); }

.pp .ph-sec-head h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; text-wrap: balance; }

.pp .ph-sec-head h2 em { font-style: italic; color: var(--ow-champagne-deep); }

.pp .ph-sec-head .rhs { font-size: 1.02rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .ph-trust .ph-sec-head { border-bottom-color: rgba(255,255,255,0.14); }

.pp .ph-trust .ph-sec-head h2 { color: white; }

.pp .ph-trust .ph-sec-head h2 em { color: var(--ow-champagne); }

.pp .ph-trust .ph-sec-head .rhs { color: rgba(255,255,255,0.7); }

.pp .ph-trust .ph-num { color: var(--ow-champagne); }

.pp .ph-common-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ph-rule); }

.pp .ph-com { padding: 28px 26px 26px; border-left: 1px solid var(--ph-rule-fine); border-bottom: 1px solid var(--ph-rule); }

.pp .ph-com:first-child { border-left: 0; padding-left: 0; }

.pp .ph-com:last-child { padding-right: 0; }

.pp .ph-com .c-ico { width: 42px; height: 42px; border-radius: 3px; border: 1px solid var(--ph-rule); background: var(--ow-paper); display: grid; place-items: center; color: var(--ow-champagne-deep); margin-bottom: 18px; }

.pp .ph-com .c-ico .material-symbols-outlined { font-size: 1.2rem; }

.pp .ph-com h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.26rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 10px; }

.pp .ph-com p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

/* ─────────────────────── PARTNERMODELLE ─────────────────────── */

.pp .ph-models { background: var(--ow-paper); }

.pp .ph-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.pp .ph-model { background: var(--ph-wash); border: 1px solid var(--ph-rule); border-radius: 4px; padding: 34px 34px 30px; display: flex; flex-direction: column; }

.pp .ph-model-k { font-family: var(--ow-serif); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ow-champagne-deep); }

.pp .ph-model h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.68rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 12px 0; }

.pp .ph-model > p { margin: 0 0 22px; font-size: 0.96rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .ph-benefit { display: flex; align-items: baseline; gap: 14px; padding: 18px 20px; border: 1px solid var(--ow-champagne); border-radius: 4px; background: rgba(201,169,106,0.09); margin-bottom: 22px; }

.pp .ph-benefit .fig { font-family: var(--ow-serif); font-weight: 500; font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; color: var(--ow-champagne-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp .ph-benefit .fig .pre { font-family: var(--own-font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 7px; color: var(--ow-champagne-deep); }

.pp .ph-benefit .txt { font-size: 0.89rem; line-height: 1.52; color: var(--own-fg-2); text-wrap: pretty; }

.pp .ph-benefit .txt b { color: var(--ow-ink); font-weight: 700; }

.pp .ph-model dl { margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--ph-rule); display: flex; flex-direction: column; gap: 14px; flex: 1; }

.pp .ph-model dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 4px; }

.pp .ph-model dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .ph-model .lp-btn { width: 100%; justify-content: center; border-radius: 4px; }

.pp .ph-models-fine { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ph-wash); border: 1px solid var(--ph-rule); border-radius: 4px; font-size: 0.83rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .ph-models-fine .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne-deep); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── VERTRAUEN ─────────────────────── */

.pp .ph-trust { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .ph-trust::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 480px at 18% 16%, rgba(124,58,237,0.18), transparent 62%); pointer-events: none; }

.pp .ph-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }

.pp .ph-pillar { padding: 0 26px; border-left: 1px solid rgba(255,255,255,0.13); }

.pp .ph-pillar:first-child { border-left: 0; padding-left: 0; }

.pp .ph-pillar:last-child { padding-right: 0; }

.pp .ph-pillar .pi { width: 42px; height: 42px; border-radius: 3px; border: 1px solid rgba(201,169,106,0.42); background: rgba(201,169,106,0.10); display: grid; place-items: center; color: var(--ow-champagne); margin-bottom: 20px; }

.pp .ph-pillar h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.26rem; line-height: 1.2; letter-spacing: -0.01em; color: white; margin: 0 0 11px; }

.pp .ph-pillar p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.66); text-wrap: pretty; }

.pp .ph-axiom { margin-top: 52px; padding: 28px 32px; border: 1px solid rgba(201,169,106,0.44); border-radius: 4px; background: rgba(201,169,106,0.08); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.pp .ph-axiom .material-symbols-outlined { font-size: 1.6rem; color: var(--ow-champagne); }

.pp .ph-axiom .ax-t { font-family: var(--ow-serif); font-size: 1.46rem; font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; color: white; flex: 1; min-width: 16em; text-wrap: balance; }

.pp .ph-axiom .ax-d { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 30em; text-wrap: pretty; }

/* ─────────────────────── ABGRENZUNG ─────────────────────── */

.pp .ph-limits { background: var(--ph-wash); border-top: 1px solid var(--ph-rule); }

.pp .ph-limits-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; border: 1px solid var(--ph-rule); border-radius: 4px; padding: 40px 44px; background: var(--ow-paper); }

.pp .ph-limits-card h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.62rem, 2.5vw, 2.05rem); line-height: 1.14; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; }

.pp .ph-limits-card h2 em { font-style: italic; color: var(--ow-champagne-deep); }

.pp .ph-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

.pp .ph-split-col { padding: 0 26px; border-left: 1px solid var(--ph-rule); }

.pp .ph-split-col:first-child { border-left: 0; padding-left: 0; }

.pp .ph-split-col:last-child { padding-right: 0; }

.pp .ph-split-col .sc-k { font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne-deep); margin-bottom: 16px; }

.pp .ph-split-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.pp .ph-split-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.52; color: var(--own-fg-1); }

.pp .ph-split-col li .material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; color: var(--ow-champagne-deep); }

.pp .ph-limits-fine { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ph-rule); font-size: 0.81rem; line-height: 1.65; color: var(--own-fg-3); text-wrap: pretty; }

/* ─────────────────────── CTA ─────────────────────── */

.pp .ph-cta { background: var(--ow-ink); color: white; position: relative; overflow: hidden; padding: 100px 0; }

.pp .ph-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(860px 460px at 50% 110%, rgba(124,58,237,0.24), transparent 62%), radial-gradient(600px 380px at 5% 0%, rgba(201,169,106,0.10), transparent 60%); pointer-events: none; }

.pp .ph-cta-inner { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center; }

.pp .ph-cta h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.95rem, 3.6vw, 2.95rem); line-height: 1.1; letter-spacing: -0.02em; color: white; margin: 18px 0; text-wrap: balance; }

.pp .ph-cta h2 em { font-style: italic; color: var(--ow-champagne); }

.pp .ph-cta p { font-size: 1.04rem; line-height: 1.68; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .ph-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pp .ph-cta .lp-btn-ghost { border-radius: 4px; }

.pp .ph-cta .micro { margin-top: 22px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.pp .ph-cta-aside { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 44px; }

.pp .ph-cta-aside .a-k { font-size: 0.66rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne); margin-bottom: 18px; }

.pp .ph-cta-jump { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.pp .ph-cta-jump a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.13); font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.86); transition: color 160ms ease, padding-left 160ms ease; }

.pp .ph-cta-jump li:last-child a { border-bottom: 1px solid rgba(255,255,255,0.13); }

.pp .ph-cta-jump a:hover { color: white; padding-left: 6px; }

.pp .ph-cta-jump a .swatch { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }

.pp .ph-cta-jump a .material-symbols-outlined { margin-left: auto; font-size: 1.05rem; color: rgba(255,255,255,0.5); }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 1100px) {
  .pp .ph-nav .lp-nav-links,
  .pp .ph-nav-tag { display: none; }
  .pp .ph-hero-inner { padding-top: 128px; padding-bottom: 68px; }
  .pp .ph-hero-top { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .pp .ph-facts { grid-template-columns: 1fr; row-gap: 26px; }
  .pp .ph-fact { border-left: 0; padding: 0; }
  .pp .ph-fact:not(:first-child) { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); }
  .pp .ph-sec-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .pp .ph-common-grid { grid-template-columns: repeat(2, 1fr); }
  .pp .ph-com:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .ph-com:last-child { padding-right: 26px; }
  .pp .ph-pillars { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .pp .ph-pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .ph-limits-card { grid-template-columns: 1fr; gap: 30px; padding: 34px 32px; }
  .pp .ph-cta-inner { grid-template-columns: 1fr; gap: 38px; }
  .pp .ph-cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 32px; }
}

@media (max-width: 860px) {
  .pp .ph-seg-grid { grid-template-columns: 1fr; }
  .pp .ph-models-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pp .ph-common-grid { grid-template-columns: 1fr; }
  .pp .ph-com { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .pp .ph-pillars { grid-template-columns: 1fr; }
  .pp .ph-pillar { border-left: 0; padding: 0; }
  .pp .ph-split { grid-template-columns: 1fr; row-gap: 26px; }
  .pp .ph-split-col { border-left: 0; padding: 0; }
  .pp .ph-split-col:last-child { padding-top: 26px; border-top: 1px solid var(--ph-rule); }
  .pp .ph-limits-card { padding: 26px 22px; }
  .pp .ph-model { padding: 26px 24px 24px; }
  .pp .seg .s-body { padding: 24px 22px 22px; }
  .pp .ph-cta { padding: 74px 0; }
  .pp .ph-axiom { padding: 22px; gap: 14px; }
  .pp .mo-quad { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pp .seg,
  .pp .seg .s-go .material-symbols-outlined,
  .pp .ph-cta-jump a { transition: none !important; }
  .pp .seg:hover { transform: none; }
}

/* =========================================================================
   OWNAMIC — Partner-Landingpage: Finanzberater:innen & Finanzcoaches
   Erbt Farbwelt, Typografie und Bausteine aus landing/styles.css.
   Signatur-Element: die Gesamtbild-Komposition (Spannen statt Punktwerte).
   ========================================================================= */

.pp a { color: var(--own-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pp a:hover { color: var(--ow-champagne-deep); }

.pp a.lp-btn,
.pp a.pa-link-plain,
.pp .lp-nav a,
.pp .pp-crosslinks-bar a { text-decoration: none; }

.pp :focus-visible { outline: 2px solid var(--ow-champagne-deep); outline-offset: 3px; border-radius: 4px; }

.pp .pa-sie { font-variant-numeric: tabular-nums; }

/* ─────────────────────── NAV (helle Partner-Variante) ─────────────────────── */

.pp .pa-nav { padding: 22px 0; }

.pp .pa-nav .lp-nav-links a { color: rgba(255,255,255,0.72); }

.pp .pa-nav .lp-nav-links a:hover { color: white; }

.pp .pa-nav .lp-nav-cta .lp-btn { white-space: nowrap; flex-shrink: 0; }

.pp .pa-nav-tag { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne); border: 1px solid rgba(201,169,106,0.42); border-radius: 999px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

/* ─────────────────────── HERO ─────────────────────── */

.pp .pa-hero { position: relative; overflow: hidden; color: white; background: radial-gradient(1000px 560px at 78% -12%, rgba(124,58,237,0.26), transparent 60%), radial-gradient(860px 640px at 8% 96%, rgba(67,56,202,0.30), transparent 55%), linear-gradient(180deg, #07091a 0%, #0b1020 55%, #0b1020 100%); }

.pp .pa-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse at 60% 30%, black 25%, transparent 74%); pointer-events: none; }

.pp .pa-hero-inner { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 72px; align-items: center; padding-top: 148px; padding-bottom: 96px; }

.pp .pa-hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; background: rgba(201,169,106,0.10); border: 1px solid rgba(201,169,106,0.34); color: var(--ow-champagne); font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 999px; margin-bottom: 26px; }

.pp .pa-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ow-champagne); box-shadow: 0 0 11px var(--ow-champagne); }

.pp .pa-hero h1 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.05; letter-spacing: -0.02em; color: white; margin: 0 0 22px; text-wrap: balance; }

.pp .pa-hero h1 em { font-style: italic; color: var(--ow-champagne); font-weight: 400; }

.pp .pa-hero .pa-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.12rem; color: rgba(255,255,255,0.62); margin: 0 0 18px; }

.pp .pa-hero .pa-lede { font-size: 1.1rem; line-height: 1.66; color: rgba(255,255,255,0.78); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }


.pp .pa-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; }

.pp .pa-hero-trust { display: flex; flex-wrap: wrap; gap: 16px 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.10); }

.pp .pa-hero-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .pa-hero-trust .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne); }

/* ─────────────────────── SIGNATUR: GESAMTBILD-KOMPOSITION ─────────────────────── */

.pp .gb { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 24px; padding: 24px 24px 20px; color: var(--ow-ink); box-shadow: 0 40px 90px rgba(0,0,0,0.45); }

.pp .gb-head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--ow-line); }

.pp .gb-head .gb-k { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne-deep); }

.pp .gb-head .gb-n { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.01em; margin-top: 5px; }

.pp .gb-head .gb-who { margin-left: auto; text-align: right; flex-shrink: 0; }

.pp .gb-head .gb-who .gb-role { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--own-fg-2); background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }

.pp .gb-head .gb-who .gb-role .material-symbols-outlined { font-size: 0.95rem; color: var(--own-primary); }

.pp .gb-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); gap: 8px; margin: 18px 0 0; }

.pp .gb-tile { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 14px; padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 4px; min-height: 96px; }

.pp .gb-tile.t-realestate { grid-column: 1 / 5; grid-row: 1 / 3; }

.pp .gb-tile.t-finance { grid-column: 5 / 7; grid-row: 1 / 4; }

.pp .gb-tile.t-collect { grid-column: 1 / 3; grid-row: 3; }

.pp .gb-tile.t-goods { grid-column: 3 / 5; grid-row: 3; }

.pp .gb-tile .gb-cat { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .gb-tile .gb-cnt { font-size: 0.78rem; color: var(--own-fg-3); }

.pp .gb-tile .gb-range { font-family: var(--ow-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.015em; color: var(--ow-ink); margin-top: auto; font-variant-numeric: tabular-nums; }

.pp .gb-tile.t-realestate .gb-range { font-size: 2.3rem; }

.pp .gb-tile .gb-range .to { color: var(--own-fg-3); font-weight: 400; margin: 0 3px; }

.pp .gb-tile .gb-range .unit { font-family: var(--own-font-sans); font-size: 0.78rem; font-weight: 600; color: var(--own-fg-3); margin-left: 6px; letter-spacing: 0; }

/* Spannen-Balken: die Spanne wird auch visuell eine Spanne, kein Punkt */
.pp .gb-span { height: 6px; border-radius: 999px; background: var(--ow-cream-deep); position: relative; overflow: hidden; margin-top: 10px; }

.pp .gb-span > i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(201,169,106,0.45), var(--ow-champagne)); }

/* Belegschema — vier Stufen, wiederkehrende Kennzeichnung */
.pp .gb-pips { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; }

.pp .gb-pips .pip { width: 13px; height: 4px; border-radius: 999px; background: var(--ow-cream-deep); }

.pp .gb-pips .pip.on { background: var(--ow-champagne-deep); }

.pp .gb-pips .lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--own-fg-3); margin-left: 5px; }

/* Finanzwerte-Kachel: verschlossen bis zum Opt-in */
.pp .gb-tile.t-finance { justify-content: flex-start; }

.pp .gb-tile.locked { background: repeating-linear-gradient(135deg, var(--ow-cream) 0 6px, var(--ow-paper) 6px 13px); border-style: dashed; }

.pp .gb-lock { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: auto; }

.pp .gb-lock .material-symbols-outlined { font-size: 1.25rem; color: var(--own-fg-3); }

.pp .gb-lock .mask { font-family: var(--ow-serif); font-size: 1.5rem; color: var(--own-fg-3); letter-spacing: 0.08em; }

.pp .gb-lock .why { font-size: 0.78rem; line-height: 1.45; color: var(--own-fg-2); text-wrap: pretty; }

.pp .gb-tile.t-finance.open { background: var(--ow-ink); border-color: var(--ow-ink); }

.pp .gb-tile.t-finance.open .gb-cat { color: var(--ow-champagne); }

.pp .gb-tile.t-finance.open .gb-cnt { color: rgba(246,241,231,0.6); }

.pp .gb-tile.t-finance.open .gb-range { color: white; }

.pp .gb-tile.t-finance.open .gb-range .to { color: rgba(246,241,231,0.5); }

.pp .gb-tile.t-finance.open .gb-range .unit { color: rgba(246,241,231,0.6); }

.pp .gb-tile.t-finance.open .gb-span { background: rgba(255,255,255,0.12); }

.pp .gb-tile.t-finance.open .gb-pips .pip { background: rgba(255,255,255,0.16); }

.pp .gb-tile.t-finance.open .gb-pips .pip.on { background: var(--ow-champagne); }

.pp .gb-tile.t-finance.open .gb-pips .lbl { color: var(--ow-champagne); }

.pp .gb-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ow-line); font-size: 0.8rem; line-height: 1.45; color: var(--own-fg-2); text-wrap: pretty; }

.pp .gb-foot .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne-deep); flex-shrink: 0; }

.pp .gb-foot strong { color: var(--ow-ink); font-weight: 700; }

/* Kompakte Finanzwerte-Kachel im Opt-in-Panel */
.pp .pa-optin .gb-tile { grid-column: auto; grid-row: auto; margin-top: 14px; min-height: 0; }

.pp .pa-optin .gb-tile .gb-range { margin-top: 12px; }

.pp .pa-optin .gb-lock { margin-top: 12px; }

/* ─────────────────────── STRIP ─────────────────────── */

.pp .pa-strip { background: var(--ow-ink); border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; }

.pp .pa-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.pp .pa-strip .l { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.4); }

.pp .pa-strip .items { display: flex; gap: 28px; flex-wrap: wrap; }

.pp .pa-strip .items span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .pa-strip .items .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne); }

/* ─────────────────────── PROBLEM ─────────────────────── */

.pp .pa-problem { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }

.pp .pa-prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.pp .pa-prob { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 28px 28px 26px; display: flex; flex-direction: column; }

.pp .pa-prob .p-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); display: grid; place-items: center; color: var(--own-fg-2); margin-bottom: 20px; }

.pp .pa-prob .p-ico .material-symbols-outlined { font-size: 1.3rem; }

.pp .pa-prob h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 12px; }

.pp .pa-prob p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; flex: 1; }

.pp .pa-prob .p-quote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ow-line); font-family: var(--ow-serif); font-style: italic; font-size: 1.02rem; line-height: 1.4; color: var(--ow-ink); }

.pp .pa-prob-foot { margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; font-size: 0.9rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-prob-foot .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-champagne-deep); flex-shrink: 0; margin-top: 1px; }

.pp .pa-prob-foot strong { color: var(--ow-ink); }

/* ─────────────────────── LÖSUNG ─────────────────────── */

.pp .pa-sol { background: var(--ow-paper); }

.pp .pa-sol-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 64px; align-items: start; }

.pp .pa-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.pp .pa-feat > li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--ow-line); }

.pp .pa-feat > li:first-child { border-top: 0; padding-top: 0; }

.pp .pa-feat .f-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); display: grid; place-items: center; color: var(--own-primary); }

.pp .pa-feat .f-ico .material-symbols-outlined { font-size: 1.25rem; }

.pp .pa-feat h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ow-ink); margin: 2px 0 8px; }

.pp .pa-feat p { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-feat .f-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--ow-ink); }

.pp .pa-feat .f-note .material-symbols-outlined { font-size: 0.95rem; color: var(--ow-champagne-deep); }

/* Opt-in-Panel: das Vertrauens-Argument, sichtbar inszeniert */
.pp .pa-optin { position: sticky; top: 32px; background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 24px; padding: 26px 26px 22px; box-shadow: 0 30px 70px -40px rgba(11,16,32,0.35); }

.pp .pa-optin-k { display: flex; align-items: center; gap: 10px; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ow-champagne-deep); }

.pp .pa-optin-k .material-symbols-outlined { font-size: 1rem; }

.pp .pa-optin h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 12px 0 8px; }

.pp .pa-optin > p { margin: 0 0 20px; font-size: 0.94rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-switch-row { display: flex; align-items: center; gap: 18px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 16px 18px; }

.pp .pa-switch-row .sr-t { font-size: 0.96rem; font-weight: 700; color: var(--ow-ink); }

.pp .pa-switch-row .sr-d { font-size: 0.83rem; line-height: 1.45; color: var(--own-fg-2); margin-top: 3px; }

.pp .pa-switch { margin-left: auto; flex-shrink: 0; width: 54px; height: 30px; border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-cream-deep); position: relative; cursor: pointer; padding: 0; transition: background 200ms ease, border-color 200ms ease; }

.pp .pa-switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: white; box-shadow: 0 2px 6px rgba(11,16,32,0.24); transition: transform 200ms ease; }

.pp .pa-switch.on { background: var(--ow-champagne); border-color: var(--ow-champagne-deep); }

.pp .pa-switch.on .knob { transform: translateX(24px); }

.pp .pa-optin-state { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding: 15px 17px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 0.88rem; line-height: 1.55; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-optin-state .material-symbols-outlined { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; color: var(--own-fg-3); }

.pp .pa-optin-state.on { background: var(--ow-ink); border-color: var(--ow-ink); color: rgba(246,241,231,0.82); }

.pp .pa-optin-state.on .material-symbols-outlined { color: var(--ow-champagne); }

.pp .pa-optin-state strong { color: var(--ow-ink); font-weight: 700; }

.pp .pa-optin-state.on strong { color: white; }

.pp .pa-optin-rule { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 0.8rem; line-height: 1.5; color: var(--own-fg-3); text-wrap: pretty; }

.pp .pa-optin-rule .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); flex-shrink: 0; }

/* ─────────────────────── BELEGSCHEMA / SPANNEN ─────────────────────── */

.pp .pa-evid { background: var(--ow-blush); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }

.pp .pa-evid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }

.pp .pa-ev { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 22px 22px 20px; }

.pp .pa-ev .ev-pips { display: flex; gap: 4px; margin-bottom: 16px; }

.pp .pa-ev .ev-pips i { width: 20px; height: 5px; border-radius: 999px; background: var(--ow-cream-deep); }

.pp .pa-ev .ev-pips i.on { background: var(--ow-champagne-deep); }

.pp .pa-ev h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.28rem; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 8px; }

.pp .pa-ev p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-ev .ev-ex { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ow-line); font-size: 0.8rem; color: var(--own-fg-3); }

.pp .pa-evid-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 20px; padding: 28px 30px; }

.pp .pa-evid-row .er-copy h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 10px; }

.pp .pa-evid-row .er-copy p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-cmp { display: flex; flex-direction: column; gap: 12px; }

.pp .pa-cmp-item { border: 1px solid var(--ow-line); border-radius: 14px; padding: 14px 16px; }

.pp .pa-cmp-item .k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .pa-cmp-item .v { font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; margin-top: 6px; font-variant-numeric: tabular-nums; }

.pp .pa-cmp-item .n { font-size: 0.78rem; color: var(--own-fg-3); margin-top: 5px; }

.pp .pa-cmp-item.bad { background: var(--ow-cream); }

.pp .pa-cmp-item.bad .v { color: var(--own-fg-3); text-decoration: line-through; text-decoration-thickness: 1px; }

.pp .pa-cmp-item.good { background: var(--ow-ink); border-color: var(--ow-ink); }

.pp .pa-cmp-item.good .k { color: var(--ow-champagne); }

.pp .pa-cmp-item.good .v { color: white; }

.pp .pa-cmp-item.good .v .to { color: rgba(246,241,231,0.5); font-weight: 400; margin: 0 4px; }

.pp .pa-cmp-item.good .n { color: rgba(246,241,231,0.6); }

/* ─────────────────────── VERTRAUEN & KONTROLLE ─────────────────────── */

.pp .pa-trust { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .pa-trust::before { content: ""; position: absolute; inset: 0; background: radial-gradient(820px 500px at 18% 18%, rgba(124,58,237,0.20), transparent 60%); pointer-events: none; }

.pp .pa-trust .lp-section-head h2 { color: white; }

.pp .pa-trust .lp-section-head h2 em { color: var(--ow-champagne); font-style: italic; }

.pp .pa-trust .lp-section-head .rhs { color: rgba(255,255,255,0.7); }

.pp .pa-trust .lp-eyebrow { color: var(--ow-champagne); }

.pp .pa-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }

.pp .pa-pillar { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 26px; }

.pp .pa-pillar .pi { width: 44px; height: 44px; border-radius: 50%; background: rgba(201,169,106,0.12); border: 1px solid rgba(201,169,106,0.34); display: grid; place-items: center; color: var(--ow-champagne); margin-bottom: 20px; }

.pp .pa-pillar h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.32rem; line-height: 1.2; letter-spacing: -0.01em; color: white; margin: 0 0 11px; }

.pp .pa-pillar p { margin: 0; font-size: 0.91rem; line-height: 1.58; color: rgba(255,255,255,0.66); text-wrap: pretty; }

.pp .pa-axiom { margin-top: 52px; padding: 28px 32px; border: 1px solid rgba(201,169,106,0.42); border-radius: 20px; background: rgba(201,169,106,0.07); position: relative; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.pp .pa-axiom .material-symbols-outlined { font-size: 1.6rem; color: var(--ow-champagne); }

.pp .pa-axiom .ax-t { font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: white; flex: 1; min-width: 16em; text-wrap: balance; }

.pp .pa-axiom .ax-d { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 30em; text-wrap: pretty; }

/* ─────────────────────── ABGRENZUNG ─────────────────────── */

.pp .pa-limits { background: var(--ow-paper); }

.pp .pa-limits-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; border: 1px solid var(--ow-line); border-radius: 22px; padding: 40px 44px; background: var(--ow-cream); }

.pp .pa-limits-card h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; }

.pp .pa-limits-card h2 em { font-style: italic; color: var(--ow-champagne-deep); }

.pp .pa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pp .pa-split-col { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 22px 24px; }

.pp .pa-split-col .sc-k { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 14px; }

.pp .pa-split-col.mine { background: var(--ow-ink); border-color: var(--ow-ink); }

.pp .pa-split-col.mine .sc-k { color: var(--ow-champagne); }

.pp .pa-split-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }

.pp .pa-split-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .pa-split-col.mine li { color: rgba(246,241,231,0.86); }

.pp .pa-split-col li .material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; color: var(--ow-champagne-deep); }

.pp .pa-split-col.mine li .material-symbols-outlined { color: var(--ow-champagne); }

.pp .pa-limits-fine { margin-top: 20px; font-size: 0.8rem; line-height: 1.6; color: var(--own-fg-3); text-wrap: pretty; }

/* ─────────────────────── PARTNERMODELLE ─────────────────────── */

.pp .pa-models { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }

.pp .pa-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.pp .pa-model { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 20px; padding: 34px 34px 30px; display: flex; flex-direction: column; }

.pp .pa-model-k { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .pa-model h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.75rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--ow-ink); margin: 10px 0 12px; }

.pp .pa-model > p { margin: 0 0 22px; font-size: 0.96rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-benefit { display: flex; align-items: baseline; gap: 12px; padding: 18px 20px; border: 1px solid var(--ow-champagne); border-radius: 16px; background: rgba(201,169,106,0.09); margin-bottom: 22px; }

.pp .pa-benefit .fig { font-family: var(--ow-serif); font-weight: 600; font-size: 2.3rem; line-height: 1; letter-spacing: -0.02em; color: var(--ow-champagne-deep); font-variant-numeric: tabular-nums; }

.pp .pa-benefit .fig .pre { font-family: var(--own-font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--ow-champagne-deep); }

.pp .pa-benefit .txt { font-size: 0.9rem; line-height: 1.5; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-benefit .txt b { color: var(--ow-ink); font-weight: 700; }

.pp .pa-model dl { margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--ow-line); display: flex; flex-direction: column; gap: 14px; flex: 1; }

.pp .pa-model dt { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 4px; }

.pp .pa-model dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .pa-model .lp-btn { width: 100%; justify-content: center; }

.pp .pa-models-fine { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; font-size: 0.84rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .pa-models-fine .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne-deep); flex-shrink: 0; margin-top: 1px; }

.pp .pa-models-fine a { color: var(--ow-champagne-deep); }

/* ─────────────────────── CTA ─────────────────────── */

.pp .pa-cta { background: var(--ow-ink); color: white; position: relative; overflow: hidden; padding: 104px 0; }

.pp .pa-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 50% 108%, rgba(124,58,237,0.24), transparent 60%), radial-gradient(700px 400px at 4% 0%, rgba(201,169,106,0.10), transparent 60%); pointer-events: none; }

.pp .pa-cta-inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }

.pp .pa-cta h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.02em; color: white; margin: 18px 0 18px; text-wrap: balance; }

.pp .pa-cta h2 em { font-style: italic; color: var(--ow-champagne); }

.pp .pa-cta .lp-eyebrow { color: var(--ow-champagne); }

.pp .pa-cta p { font-size: 1.06rem; line-height: 1.65; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .pa-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pp .pa-cta .micro { margin-top: 22px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.pp .pa-cta-aside { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 44px; }

.pp .pa-cta-aside .q { font-family: var(--ow-serif); font-style: italic; font-weight: 500; font-size: 1.45rem; line-height: 1.32; letter-spacing: -0.01em; color: white; margin: 0; text-wrap: pretty; }

.pp .pa-cta-aside .hand { display: block; margin-top: 16px; }

.pp .pa-cta-agenda { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 12px; }

.pp .pa-cta-agenda li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.72); }

.pp .pa-cta-agenda li .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 1100px) {
  .pp .pa-nav .lp-nav-links,
  .pp .pa-nav-tag { display: none; }
  .pp .pa-hero-inner { grid-template-columns: 1fr; gap: 48px; padding-top: 128px; padding-bottom: 76px; }
  .pp .pa-sol-grid { grid-template-columns: 1fr; gap: 44px; }
  .pp .pa-optin { position: static; }
  .pp .pa-evid-grid { grid-template-columns: repeat(2, 1fr); }
  .pp .pa-pillars { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
  .pp .pa-limits-card { grid-template-columns: 1fr; gap: 32px; padding: 34px 32px; }
  .pp .pa-cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .pp .pa-cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 32px; }
}

@media (max-width: 860px) {
  .pp .pa-prob-grid { grid-template-columns: 1fr; }
  .pp .pa-models-grid { grid-template-columns: 1fr; }
  .pp .pa-evid-row { grid-template-columns: 1fr; gap: 26px; padding: 24px 24px; }
}

@media (max-width: 720px) {
  .pp .pa-nav .lp-nav-links { display: none; }
  .pp .pa-nav-tag { display: none; }
  .pp .gb-mosaic { grid-template-columns: repeat(2, 1fr); }
  .pp .gb-tile.t-realestate,
  .pp .gb-tile.t-finance,
  .pp .gb-tile.t-collect,
  .pp .gb-tile.t-goods { grid-column: auto; grid-row: auto; }
  .pp .gb-tile.t-realestate { grid-column: 1 / 3; }
  .pp .gb-tile.t-finance { grid-column: 1 / 3; }
  .pp .gb-tile.t-realestate .gb-range { font-size: 1.8rem; }
  .pp .pa-evid-grid { grid-template-columns: 1fr; }
  .pp .pa-pillars { grid-template-columns: 1fr; }
  .pp .pa-split { grid-template-columns: 1fr; }
  .pp .pa-limits-card { padding: 26px 22px; }
  .pp .pa-model { padding: 26px 24px 24px; }
  .pp .pa-cta { padding: 76px 0; }
  .pp .pa-axiom { padding: 22px 22px; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp .pa-switch,
  .pp .pa-switch .knob,
  .pp .gb-tile { transition: none !important; }
}

/* =========================================================================
   OWNAMIC — Partner-Landingpage: Ordnungscoaches
   Erbt Farbwelt und Typografie aus landing/styles.css.
   Signatur: die Vier-Felder-Logik in Lavendel/Violett-Abstufungen —
   Ordnungsprinzip für die Sammlungen UND für die Seitenstruktur.
   ========================================================================= */

.pp {
  --oc-keep:    #ede9fe;   /* Behalten  — hellste Fläche */
  --oc-keep-k:  #5b21b6;
  --oc-sell:    #ddd6fe;   /* Verkaufen */
  --oc-sell-k:  #5b21b6;
  --oc-give:    #c4b5fd;   /* Spenden */
  --oc-give-k:  #3c1a78;
  --oc-drop:    #a78bfa;   /* Entsorgen — tiefste Fläche */
  --oc-drop-k:  #2e1065;
  --oc-lav-line: #d9d0f7;
  --oc-lav-wash: #f6f3ff;
}

.pp a { color: var(--ow-violet); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pp a:hover { color: var(--oc-keep-k); }

.pp a.lp-btn,
.pp .lp-nav a,
.pp .pp-crosslinks-bar a { text-decoration: none; }

.pp :focus-visible { outline: 2px solid var(--ow-violet); outline-offset: 3px; border-radius: 4px; }

/* ─────────────────────── NAV ─────────────────────── */

.pp .oc-nav { padding: 22px 0; }

.pp .oc-nav .lp-nav-links a { color: rgba(255,255,255,0.72); }

.pp .oc-nav .lp-nav-links a:hover { color: white; }

.pp .oc-nav .lp-nav-cta .lp-btn { white-space: nowrap; flex-shrink: 0; }

.pp .oc-nav-tag { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--oc-give); border: 1px solid rgba(167,139,250,0.45); border-radius: 999px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

/* ─────────────────────── HERO ─────────────────────── */

.pp .oc-hero { position: relative; overflow: hidden; color: white; background: radial-gradient(940px 540px at 74% -10%, rgba(124,58,237,0.32), transparent 62%), radial-gradient(820px 620px at 6% 100%, rgba(67,56,202,0.26), transparent 58%), linear-gradient(180deg, #0a0a1e 0%, #0b1020 60%, #0b1020 100%); }

.pp .oc-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at 58% 34%, black 22%, transparent 72%); pointer-events: none; }

.pp .oc-hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; padding-top: 148px; padding-bottom: 96px; }

.pp .oc-hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.38); color: var(--oc-give); font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 999px; margin-bottom: 26px; }

.pp .oc-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--oc-give); box-shadow: 0 0 11px var(--oc-give); }

.pp .oc-hero h1 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2.2rem, 4.3vw, 3.7rem); line-height: 1.06; letter-spacing: -0.02em; color: white; margin: 0 0 20px; text-wrap: balance; }

.pp .oc-hero h1 em { font-style: italic; color: var(--oc-give); font-weight: 400; }

.pp .oc-hero .oc-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.14rem; color: rgba(255,255,255,0.6); margin: 0 0 18px; }

.pp .oc-hero .oc-lede { font-size: 1.08rem; line-height: 1.68; color: rgba(255,255,255,0.78); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }


.pp .oc-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; }

.pp .oc-hero-trust { display: flex; flex-wrap: wrap; gap: 16px 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.10); }

.pp .oc-hero-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .oc-hero-trust .material-symbols-outlined { font-size: 1.1rem; color: var(--oc-give); }

.pp .oc-btn-violet { background: var(--ow-violet); color: white; border: 1px solid var(--ow-violet); }

.pp .oc-btn-violet:hover { background: #6d28d9; border-color: #6d28d9; transform: translateY(-2px); }

/* ───────────── SIGNATUR: VIER FELDER ───────────── */

.pp .q4 { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 24px; padding: 22px; color: var(--ow-ink); box-shadow: 0 40px 90px rgba(0,0,0,0.45); }

.pp .q4-head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--ow-line); }

.pp .q4-head .q4-k { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ow-violet); }

.pp .q4-head .q4-n { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.01em; margin-top: 5px; }

.pp .q4-head .q4-role { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--own-fg-2); background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }

.pp .q4-head .q4-role .material-symbols-outlined { font-size: 0.95rem; color: var(--ow-violet); }

/* Das Raster: drei gleich große, ruhige Flächen */
.pp .q4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Three fields, not four (Behalten · Verkaufen oder Verschenken · Entsorgen): the keep field
   takes the first row on its own so the two letting-go fields stay a pair below it. */
.pp .q4-grid > .q4-cell:first-child { grid-column: 1 / -1; }

.pp .q4-cell { border-radius: 16px; padding: 18px 18px 16px; min-height: 132px; display: flex; flex-direction: column; border: 1px solid transparent; }

.pp .q4-cell.keep { background: var(--oc-keep); border-color: #dcd3fb; color: var(--oc-keep-k); }

.pp .q4-cell.sell { background: var(--oc-sell); border-color: #cec4fa; color: var(--oc-sell-k); }

.pp .q4-cell.drop { background: var(--oc-drop); border-color: #9878f7; color: var(--oc-drop-k); }

.pp .q4-cell .c-top { display: flex; align-items: center; gap: 9px; }

.pp .q4-cell .c-top .material-symbols-outlined { font-size: 1.15rem; }

.pp .q4-cell .c-name { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

.pp .q4-cell .c-count { font-family: var(--ow-serif); font-weight: 500; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; margin-top: auto; font-variant-numeric: tabular-nums; }

.pp .q4-cell .c-count small { font-family: var(--own-font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; margin-left: 7px; opacity: 0.72; }

.pp .q4-cell .c-bar { height: 5px; border-radius: 999px; background: rgba(46,16,101,0.13); margin-top: 12px; overflow: hidden; }

.pp .q4-cell .c-bar > i { display: block; height: 100%; border-radius: 999px; background: currentColor; opacity: 0.55; transition: width 500ms var(--own-ease, ease); }

.pp .q4-cell .c-note { font-size: 0.76rem; line-height: 1.4; margin-top: 9px; opacity: 0.82; }

.pp .q4-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ow-line); font-size: 0.8rem; line-height: 1.45; color: var(--own-fg-2); text-wrap: pretty; }

.pp .q4-foot .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-violet); flex-shrink: 0; }

.pp .q4-foot strong { color: var(--ow-ink); font-weight: 700; }

/* Verschlossene fünfte Fläche: Finanzwerte — nie sichtbar für den Coach */
.pp .q4-sealed { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--oc-lav-line); background: repeating-linear-gradient(135deg, var(--oc-lav-wash) 0 7px, var(--ow-paper) 7px 15px); }

.pp .q4-sealed .material-symbols-outlined { font-size: 1.2rem; color: var(--own-fg-3); flex-shrink: 0; }

.pp .q4-sealed .s-t { font-size: 0.84rem; font-weight: 700; color: var(--ow-ink); }

.pp .q4-sealed .s-d { font-size: 0.78rem; line-height: 1.4; color: var(--own-fg-2); margin-top: 2px; text-wrap: pretty; }

/* ─────────────────────── STRIP ─────────────────────── */

.pp .oc-strip { background: var(--ow-ink); border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; }

.pp .oc-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.pp .oc-strip .l { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.4); }

.pp .oc-strip .items { display: flex; gap: 28px; flex-wrap: wrap; }

.pp .oc-strip .items span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .oc-strip .items .material-symbols-outlined { font-size: 1.05rem; color: var(--oc-give); }

/* ─────────────────────── PROBLEM (vier Felder als Struktur) ─────────────────────── */

.pp .oc-problem { background: var(--oc-lav-wash); border-top: 1px solid var(--oc-lav-line); border-bottom: 1px solid var(--oc-lav-line); }

.pp .oc-prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.pp .oc-prob { background: var(--ow-paper); border: 1px solid var(--oc-lav-line); border-radius: 18px; padding: 28px 30px 26px; display: flex; flex-direction: column; }

.pp .oc-prob .p-n { font-family: var(--ow-serif); font-size: 1.1rem; font-weight: 600; color: var(--ow-violet); letter-spacing: 0.04em; margin-bottom: 14px; }

.pp .oc-prob h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.42rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 12px; }

.pp .oc-prob p { margin: 0; font-size: 0.95rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; flex: 1; }

.pp .oc-prob .p-quote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ow-line); font-family: var(--ow-serif); font-style: italic; font-size: 1.02rem; line-height: 1.4; color: var(--ow-ink); }

.pp .oc-prob-foot { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--oc-lav-line); border-radius: 16px; font-size: 0.9rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .oc-prob-foot .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-violet); flex-shrink: 0; margin-top: 1px; }

.pp .oc-prob-foot strong { color: var(--ow-ink); }

/* ─────────────────────── ABLAUF / LÖSUNG ─────────────────────── */

.pp .oc-flow { background: var(--ow-paper); }

.pp .oc-flow-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: start; }

.pp .oc-steps { list-style: none; margin: 0; padding: 0; }

.pp .oc-steps > li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--ow-line); }

.pp .oc-steps > li:first-child { border-top: 0; padding-top: 0; }

.pp .oc-steps .s-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--oc-lav-wash); border: 1px solid var(--oc-lav-line); display: grid; place-items: center; color: var(--ow-violet); }

.pp .oc-steps .s-ico .material-symbols-outlined { font-size: 1.25rem; }

.pp .oc-steps h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.34rem; line-height: 1.16; letter-spacing: -0.01em; color: var(--ow-ink); margin: 2px 0 8px; }

.pp .oc-steps p { margin: 0; font-size: 0.96rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .oc-steps .s-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 12px; background: var(--oc-lav-wash); border: 1px solid var(--oc-lav-line); border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--ow-ink); }

.pp .oc-steps .s-note .material-symbols-outlined { font-size: 0.95rem; color: var(--ow-violet); }

/* Fortschritts-Panel: das Sortieren live */
.pp .oc-live { position: sticky; top: 32px; background: var(--oc-lav-wash); border: 1px solid var(--oc-lav-line); border-radius: 24px; padding: 24px; }

.pp .oc-live-k { display: flex; align-items: center; gap: 10px; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ow-violet); }

.pp .oc-live-k .material-symbols-outlined { font-size: 1rem; }

.pp .oc-live h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.55rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 12px 0 8px; }

.pp .oc-live > p { margin: 0 0 18px; font-size: 0.93rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .oc-obj { display: flex; align-items: center; gap: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 14px 16px; }

.pp .oc-obj .o-ph { width: 42px; height: 42px; border-radius: 10px; background: var(--ow-cream); border: 1px solid var(--ow-line); display: grid; place-items: center; color: var(--own-fg-3); flex-shrink: 0; }

.pp .oc-obj .o-t { font-size: 0.95rem; font-weight: 700; color: var(--ow-ink); }

.pp .oc-obj .o-d { font-size: 0.8rem; color: var(--own-fg-3); margin-top: 2px; }

.pp .oc-obj .o-stamp { margin-left: auto; flex-shrink: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ow-cream); color: var(--own-fg-3); white-space: nowrap; }

.pp .oc-obj .o-stamp.set { background: var(--oc-give); color: var(--oc-give-k); }

/* One button per field — "Verkaufen oder Verschenken" does not fit a half-width button. */
.pp .oc-choose { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }

.pp .oc-choose button { font: inherit; cursor: pointer; text-align: left; border-radius: 13px; padding: 12px 14px; border: 1px solid transparent; display: flex; align-items: center; gap: 9px; font-size: 0.86rem; font-weight: 700; transition: transform 140ms ease, box-shadow 140ms ease; }

.pp .oc-choose button .material-symbols-outlined { font-size: 1.05rem; }

.pp .oc-choose button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(46,16,101,0.4); }

.pp .oc-choose button.keep { background: var(--oc-keep); border-color: #dcd3fb; color: var(--oc-keep-k); }

.pp .oc-choose button.sell { background: var(--oc-sell); border-color: #cec4fa; color: var(--oc-sell-k); }

.pp .oc-choose button.drop { background: var(--oc-drop); border-color: #9878f7; color: var(--oc-drop-k); }

.pp .oc-choose button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ow-ink); }

.pp .oc-live-state { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding: 15px 17px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 0.88rem; line-height: 1.55; color: var(--own-fg-2); text-wrap: pretty; }

.pp .oc-live-state .material-symbols-outlined { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; color: var(--own-fg-3); }

.pp .oc-live-state.done { background: var(--ow-ink); border-color: var(--ow-ink); color: rgba(246,241,231,0.82); }

.pp .oc-live-state.done .material-symbols-outlined { color: var(--oc-give); }

.pp .oc-live-state strong { color: var(--ow-ink); font-weight: 700; }

.pp .oc-live-state.done strong { color: white; }

.pp .oc-live-rule { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 0.8rem; line-height: 1.5; color: var(--own-fg-3); text-wrap: pretty; }

.pp .oc-live-rule .material-symbols-outlined { font-size: 1rem; color: var(--ow-violet); flex-shrink: 0; }

.pp .oc-live-mini { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--oc-lav-line); }

.pp .oc-live-mini .m-k { font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 12px; }

.pp .oc-live-mini .q4-grid { gap: 8px; }

.pp .oc-live-mini .q4-cell { min-height: 0; padding: 13px 14px 12px; }

.pp .oc-live-mini .q4-cell .c-count { font-size: 1.6rem; margin-top: 10px; }

.pp .oc-live-mini .q4-cell .c-count small { font-size: 0.68rem; }

.pp .oc-live-mini .q4-cell .c-bar { margin-top: 9px; }

/* ─────────────────────── VERTRAUENSVERSPRECHEN ─────────────────────── */

.pp .oc-trust { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .oc-trust::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 480px at 16% 16%, rgba(124,58,237,0.24), transparent 60%); pointer-events: none; }

.pp .oc-trust .lp-section-head h2 { color: white; }

.pp .oc-trust .lp-section-head h2 em { color: var(--oc-give); font-style: italic; }

.pp .oc-trust .lp-section-head .rhs { color: rgba(255,255,255,0.7); }

.pp .oc-trust .lp-eyebrow { color: var(--oc-give); }

.pp .oc-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }

.pp .oc-pillar { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 26px; }

.pp .oc-pillar .pi { width: 44px; height: 44px; border-radius: 50%; background: rgba(167,139,250,0.14); border: 1px solid rgba(167,139,250,0.36); display: grid; place-items: center; color: var(--oc-give); margin-bottom: 20px; }

.pp .oc-pillar h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; color: white; margin: 0 0 11px; }

.pp .oc-pillar p { margin: 0; font-size: 0.91rem; line-height: 1.58; color: rgba(255,255,255,0.66); text-wrap: pretty; }

.pp .oc-axiom { margin-top: 52px; padding: 28px 32px; border: 1px solid rgba(167,139,250,0.44); border-radius: 20px; background: rgba(124,58,237,0.12); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.pp .oc-axiom .material-symbols-outlined { font-size: 1.6rem; color: var(--oc-give); }

.pp .oc-axiom .ax-t { font-family: var(--ow-serif); font-size: 1.48rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: white; flex: 1; min-width: 16em; text-wrap: balance; }

.pp .oc-axiom .ax-d { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 30em; text-wrap: pretty; }

/* ─────────────────────── COACH-NUTZEN ─────────────────────── */

.pp .oc-value { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }

.pp .oc-value-lead { font-family: var(--ow-serif); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ow-ink); margin: 0 0 30px; max-width: 26em; text-wrap: balance; }

.pp .oc-value-lead em { font-style: italic; color: var(--ow-violet); }

.pp .oc-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.pp .oc-val { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 26px 28px 24px; }

.pp .oc-val .v-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--oc-lav-wash); border: 1px solid var(--oc-lav-line); display: grid; place-items: center; color: var(--ow-violet); margin-bottom: 18px; }

.pp .oc-val h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 10px; }

.pp .oc-val p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

/* ─────────────────────── ABGRENZUNG ─────────────────────── */

.pp .oc-limits { background: var(--ow-paper); }

.pp .oc-limits-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; border: 1px solid var(--oc-lav-line); border-radius: 22px; padding: 40px 44px; background: var(--oc-lav-wash); }

.pp .oc-limits-card h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; }

.pp .oc-limits-card h2 em { font-style: italic; color: var(--ow-violet); }

.pp .oc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pp .oc-split-col { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 22px 24px; }

.pp .oc-split-col .sc-k { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 14px; }

.pp .oc-split-col.mine { background: var(--ow-ink); border-color: var(--ow-ink); }

.pp .oc-split-col.mine .sc-k { color: var(--oc-give); }

.pp .oc-split-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }

.pp .oc-split-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .oc-split-col.mine li { color: rgba(246,241,231,0.86); }

.pp .oc-split-col li .material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; color: var(--ow-violet); }

.pp .oc-split-col.mine li .material-symbols-outlined { color: var(--oc-give); }

.pp .oc-limits-fine { margin-top: 20px; font-size: 0.8rem; line-height: 1.6; color: var(--own-fg-3); text-wrap: pretty; }

/* ─────────────────────── PARTNERMODELLE ─────────────────────── */

.pp .oc-models { background: var(--oc-lav-wash); border-top: 1px solid var(--oc-lav-line); border-bottom: 1px solid var(--oc-lav-line); }

.pp .oc-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.pp .oc-model { background: var(--ow-paper); border: 1px solid var(--oc-lav-line); border-radius: 20px; padding: 34px 34px 30px; display: flex; flex-direction: column; }

.pp .oc-model-k { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .oc-model h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.72rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--ow-ink); margin: 10px 0 12px; }

.pp .oc-model > p { margin: 0 0 22px; font-size: 0.96rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .oc-benefit { display: flex; align-items: baseline; gap: 12px; padding: 18px 20px; border: 1px solid var(--oc-give); border-radius: 16px; background: rgba(167,139,250,0.14); margin-bottom: 22px; }

.pp .oc-benefit .fig { font-family: var(--ow-serif); font-weight: 600; font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; color: var(--ow-violet); font-variant-numeric: tabular-nums; }

.pp .oc-benefit .fig .pre { font-family: var(--own-font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--ow-violet); }

.pp .oc-benefit .txt { font-size: 0.9rem; line-height: 1.5; color: var(--own-fg-2); text-wrap: pretty; }

.pp .oc-benefit .txt b { color: var(--ow-ink); font-weight: 700; }

.pp .oc-model dl { margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--ow-line); display: flex; flex-direction: column; gap: 14px; flex: 1; }

.pp .oc-model dt { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 4px; }

.pp .oc-model dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .oc-model .lp-btn { width: 100%; justify-content: center; }

.pp .oc-models-fine { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--oc-lav-line); border-radius: 16px; font-size: 0.84rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .oc-models-fine .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-violet); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── CTA ─────────────────────── */

.pp .oc-cta { background: var(--ow-ink); color: white; position: relative; overflow: hidden; padding: 104px 0; }

.pp .oc-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(880px 480px at 50% 110%, rgba(124,58,237,0.28), transparent 60%); pointer-events: none; }

.pp .oc-cta-inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }

.pp .oc-cta h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.07; letter-spacing: -0.02em; color: white; margin: 18px 0; text-wrap: balance; }

.pp .oc-cta h2 em { font-style: italic; color: var(--oc-give); }

.pp .oc-cta .lp-eyebrow { color: var(--oc-give); }

.pp .oc-cta p { font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .oc-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pp .oc-cta .micro { margin-top: 22px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.pp .oc-cta-aside { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 44px; }

.pp .oc-cta-aside .q { font-family: var(--ow-serif); font-style: italic; font-weight: 500; font-size: 1.42rem; line-height: 1.34; letter-spacing: -0.01em; color: white; margin: 0; text-wrap: pretty; }

.pp .oc-cta-aside .hand { display: block; margin-top: 16px; color: var(--oc-give); }

.pp .oc-cta-agenda { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 12px; }

.pp .oc-cta-agenda li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.72); }

.pp .oc-cta-agenda li .material-symbols-outlined { font-size: 1.05rem; color: var(--oc-give); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 1100px) {
  .pp .oc-nav .lp-nav-links,
  .pp .oc-nav-tag { display: none; }
  .pp .oc-hero-inner { grid-template-columns: 1fr; gap: 48px; padding-top: 128px; padding-bottom: 76px; }
  .pp .oc-flow-grid { grid-template-columns: 1fr; gap: 44px; }
  .pp .oc-live { position: static; }
  .pp .oc-pillars { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
  .pp .oc-limits-card { grid-template-columns: 1fr; gap: 32px; padding: 34px 32px; }
  .pp .oc-cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .pp .oc-cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 32px; }
}

@media (max-width: 860px) {
  .pp .oc-value-grid { grid-template-columns: 1fr; }
  .pp .oc-models-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pp .oc-prob-grid { grid-template-columns: 1fr; }
  .pp .oc-pillars { grid-template-columns: 1fr; }
  .pp .oc-split { grid-template-columns: 1fr; }
  .pp .oc-live-mini .q4-grid { grid-template-columns: 1fr 1fr; }
  .pp .oc-limits-card { padding: 26px 22px; }
  .pp .oc-model { padding: 26px 24px 24px; }
  .pp .oc-cta { padding: 76px 0; }
  .pp .oc-axiom { padding: 22px; gap: 14px; }
  .pp .q4-cell .c-count { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pp .q4-cell .c-bar > i,
  .pp .oc-choose button { transition: none !important; }
}

/* =========================================================================
   OWNAMIC — Partner-Landingpage: Nachlasspfleger:innen & Notariate
   Erbt Farbwelt und Typografie aus landing/styles.css.
   Anmutung zwischen Urkunde und Interface: Haarlinien, Abschnittsziffern,
   Siegelmotiv im violetten Brandton.
   Signatur: das Vier-Stufen-Belegschema als wiederkehrender Stempel.
   ========================================================================= */

.pp {
  --nl-seal:      #5b21b6;
  --nl-seal-soft: #7c3aed;
  --nl-wash:      #faf8f4;   /* Aktenpapier */
  --nl-rule:      #ded8cc;   /* Haarlinie */
  --nl-rule-fine: #ebe6db;
}

.pp a { color: var(--nl-seal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pp a:hover { color: var(--nl-seal-soft); }

.pp a.lp-btn,
.pp .lp-nav a,
.pp .pp-crosslinks-bar a { text-decoration: none; }

.pp :focus-visible { outline: 2px solid var(--nl-seal); outline-offset: 3px; border-radius: 3px; }

/* Dokumentenhafte Abschnittsziffer — trägt echte Bedeutung: Erfassungsschritte */
.pp .nl-num { font-family: var(--ow-serif); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-seal); }

/* ─────────────────────── BELEGSTEMPEL (Signatur) ─────────────────────── */

.pp .stamp { display: inline-flex; align-items: center; gap: 7px; }

.pp .stamp .segs { display: inline-flex; gap: 3px; }

.pp .stamp .segs i { width: 9px; height: 9px; border: 1px solid var(--nl-seal); border-radius: 2px; background: transparent; }

.pp .stamp .segs i.on { background: var(--nl-seal); }

.pp .stamp .lbl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--own-fg-2); white-space: nowrap; }

.pp .stamp.on-dark .segs i { border-color: var(--ow-champagne); }

.pp .stamp.on-dark .segs i.on { background: var(--ow-champagne); }

.pp .stamp.on-dark .lbl { color: rgba(255,255,255,0.72); }

/* ─────────────────────── NAV ─────────────────────── */

.pp .nl-nav { padding: 22px 0; }

.pp .nl-nav .lp-nav-links a { color: rgba(255,255,255,0.72); }

.pp .nl-nav .lp-nav-links a:hover { color: white; }

.pp .nl-nav .lp-nav-cta .lp-btn { white-space: nowrap; flex-shrink: 0; }

.pp .nl-nav-tag { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.24); border-radius: 3px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

/* ─────────────────────── HERO ─────────────────────── */

.pp .nl-hero { position: relative; overflow: hidden; color: white; background: linear-gradient(180deg, #090d1c 0%, #0b1020 100%); }

.pp .nl-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 100% 34px; pointer-events: none; }

.pp .nl-hero::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.05); pointer-events: none; }

.pp .nl-hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 148px; padding-bottom: 96px; }

.pp .nl-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(124,58,237,0.5); background: rgba(124,58,237,0.10); color: #c4b5fd; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 3px; margin-bottom: 28px; }

.pp .nl-hero h1 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(2.2rem, 4.3vw, 3.7rem); line-height: 1.08; letter-spacing: -0.015em; color: white; margin: 0 0 22px; text-wrap: balance; }

.pp .nl-hero h1 em { font-style: italic; color: #c4b5fd; }

.pp .nl-hero .nl-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.16rem; color: rgba(255,255,255,0.6); margin: 0 0 20px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.18); }

.pp .nl-hero .nl-lede { font-size: 1.06rem; line-height: 1.7; color: rgba(255,255,255,0.76); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }


.pp .nl-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }

.pp .nl-btn-seal { background: var(--nl-seal); color: white; border: 1px solid var(--nl-seal); border-radius: 4px; }

.pp .nl-btn-seal:hover { background: var(--nl-seal-soft); border-color: var(--nl-seal-soft); transform: translateY(-2px); }

.pp .nl-hero .lp-btn-ghost { border-radius: 4px; }

.pp .nl-hero-trust { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.10); }

.pp .nl-hero-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .nl-hero-trust .material-symbols-outlined { font-size: 1.1rem; color: #c4b5fd; }

/* ─────────────────────── VERZEICHNIS-BLATT ─────────────────────── */

.pp .vz { background: var(--nl-wash); border: 1px solid var(--nl-rule); border-radius: 4px; color: var(--ow-ink); box-shadow: 0 40px 90px rgba(0,0,0,0.45); overflow: hidden; }

.pp .vz-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--nl-rule); }

.pp .vz-head .vz-k { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--nl-seal); }

.pp .vz-head .vz-t { font-family: var(--ow-serif); font-weight: 500; font-size: 1.42rem; line-height: 1.12; letter-spacing: -0.01em; margin-top: 6px; }

.pp .vz-head .vz-sub { font-size: 0.78rem; color: var(--own-fg-3); margin-top: 4px; }

.pp .vz-head .vz-role { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--own-fg-2); background: var(--ow-paper); border: 1px solid var(--nl-rule); border-radius: 3px; padding: 6px 10px; white-space: nowrap; }

.pp .vz-head .vz-role .material-symbols-outlined { font-size: 0.95rem; color: var(--nl-seal); }

.pp .vz-cols { display: grid; grid-template-columns: 34px 1fr 128px; gap: 14px; padding: 11px 24px; border-bottom: 1px solid var(--nl-rule); background: var(--ow-paper); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .vz-row { display: grid; grid-template-columns: 34px 1fr 128px; gap: 14px; padding: 13px 24px; border-bottom: 1px solid var(--nl-rule-fine); align-items: center; }

.pp .vz-row:last-of-type { border-bottom: 1px solid var(--nl-rule); }

.pp .vz-row .r-n { font-family: var(--ow-serif); font-size: 0.95rem; font-weight: 600; color: var(--own-fg-3); font-variant-numeric: tabular-nums; }

.pp .vz-row .r-t { font-size: 0.92rem; font-weight: 600; color: var(--ow-ink); }

.pp .vz-row .r-d { font-size: 0.76rem; color: var(--own-fg-3); margin-top: 2px; }

.pp .vz-row .r-v { text-align: right; }

.pp .vz-row .r-v .val { font-family: var(--ow-serif); font-size: 1.02rem; font-weight: 500; color: var(--ow-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp .vz-row .r-v .val .to { color: var(--own-fg-3); margin: 0 2px; }

.pp .vz-row .r-v .stamp { margin-top: 5px; justify-content: flex-end; }

.pp .vz-row .r-v .stamp .lbl { font-size: 0.6rem; }

.pp .vz-foot { display: flex; align-items: center; gap: 14px; padding: 16px 24px; background: var(--ow-paper); flex-wrap: wrap; }

.pp .vz-foot .vz-sum { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .vz-foot .vz-sum b { display: block; font-family: var(--ow-serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--ow-ink); margin-top: 5px; font-variant-numeric: tabular-nums; }

.pp .vz-seal { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 11px; }

.pp .vz-seal .ring { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--nl-seal); display: grid; place-items: center; color: var(--nl-seal); position: relative; }

.pp .vz-seal .ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(91,33,182,0.4); }

.pp .vz-seal .ring .material-symbols-outlined { font-size: 1.2rem; }

.pp .vz-seal .s-t { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nl-seal); }

.pp .vz-seal .s-d { font-size: 0.74rem; color: var(--own-fg-3); margin-top: 3px; }

/* ─────────────────────── STRIP ─────────────────────── */

.pp .nl-strip { background: var(--ow-ink); border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; }

.pp .nl-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.pp .nl-strip .l { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.4); }

.pp .nl-strip .items { display: flex; gap: 28px; flex-wrap: wrap; }

.pp .nl-strip .items span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .nl-strip .items .material-symbols-outlined { font-size: 1.05rem; color: #c4b5fd; }

/* ─────────────────────── ABSCHNITTSKOPF (dokumentenhaft) ─────────────────────── */

.pp .nl-sec-head { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: end; padding-bottom: 24px; margin-bottom: 44px; border-bottom: 1px solid var(--nl-rule); }

.pp .nl-sec-head h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; text-wrap: balance; }

.pp .nl-sec-head h2 em { font-style: italic; color: var(--nl-seal); }

.pp .nl-sec-head .rhs { font-size: 1.02rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-trust .nl-sec-head { border-bottom-color: rgba(255,255,255,0.14); }

.pp .nl-trust .nl-sec-head h2 { color: white; }

.pp .nl-trust .nl-sec-head h2 em { color: #c4b5fd; }

.pp .nl-trust .nl-sec-head .rhs { color: rgba(255,255,255,0.7); }

.pp .nl-trust .nl-num { color: #c4b5fd; }

/* ─────────────────────── PROBLEM ─────────────────────── */

.pp .nl-problem { background: var(--nl-wash); border-top: 1px solid var(--nl-rule); border-bottom: 1px solid var(--nl-rule); }

.pp .nl-prob-list { border-top: 1px solid var(--nl-rule); }

.pp .nl-prob { display: grid; grid-template-columns: 68px 1fr 340px; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--nl-rule); align-items: start; }

.pp .nl-prob .p-n { font-family: var(--ow-serif); font-size: 1.1rem; font-weight: 600; color: var(--nl-seal); letter-spacing: 0.12em; padding-top: 4px; }

.pp .nl-prob h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.42rem; line-height: 1.16; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 10px; }

.pp .nl-prob p { margin: 0; font-size: 0.96rem; line-height: 1.64; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-prob .p-cost { border-left: 1px solid var(--nl-rule); padding-left: 26px; }

.pp .nl-prob .p-cost .c-k { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 8px; }

.pp .nl-prob .p-cost .c-v { font-family: var(--ow-serif); font-style: italic; font-size: 1.04rem; line-height: 1.4; color: var(--ow-ink); text-wrap: pretty; }

.pp .nl-prob-foot { margin-top: 30px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--nl-rule); border-radius: 4px; font-size: 0.9rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-prob-foot .material-symbols-outlined { font-size: 1.15rem; color: var(--nl-seal); flex-shrink: 0; margin-top: 1px; }

.pp .nl-prob-foot strong { color: var(--ow-ink); }

/* ─────────────────────── ERFASSUNGSSCHRITTE ─────────────────────── */

.pp .nl-steps-sec { background: var(--ow-paper); }

.pp .nl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--nl-rule); border-bottom: 1px solid var(--nl-rule); }

.pp .nl-step { padding: 30px 24px 28px; border-left: 1px solid var(--nl-rule-fine); display: flex; flex-direction: column; }

.pp .nl-step:first-child { border-left: 0; padding-left: 0; }

.pp .nl-step:last-child { padding-right: 0; }

.pp .nl-step .st-n { font-family: var(--ow-serif); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.2em; color: var(--nl-seal); margin-bottom: 18px; }

.pp .nl-step .st-ico { width: 40px; height: 40px; border-radius: 3px; border: 1px solid var(--nl-rule); background: var(--nl-wash); display: grid; place-items: center; color: var(--nl-seal); margin-bottom: 18px; }

.pp .nl-step .st-ico .material-symbols-outlined { font-size: 1.2rem; }

.pp .nl-step h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.22rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 9px; }

.pp .nl-step p { margin: 0; font-size: 0.9rem; line-height: 1.58; color: var(--own-fg-2); text-wrap: pretty; }

/* ─────────────────────── BELEGSCHEMA (Signatur-Abschnitt) ─────────────────────── */

.pp .nl-evid { background: var(--nl-wash); border-top: 1px solid var(--nl-rule); border-bottom: 1px solid var(--nl-rule); }

.pp .nl-ev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--nl-rule); }

.pp .nl-ev { padding: 28px 24px 26px; border-left: 1px solid var(--nl-rule-fine); border-bottom: 1px solid var(--nl-rule); }

.pp .nl-ev:first-child { border-left: 0; padding-left: 0; }

.pp .nl-ev:last-child { padding-right: 0; }

.pp .nl-ev .ev-stamp { margin-bottom: 18px; }

.pp .nl-ev h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.26rem; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 9px; }

.pp .nl-ev p { margin: 0; font-size: 0.89rem; line-height: 1.58; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-ev .ev-ex { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nl-rule-fine); font-size: 0.79rem; line-height: 1.45; color: var(--own-fg-3); font-style: italic; }

.pp .nl-ev-note { margin-top: 34px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; background: var(--ow-paper); border: 1px solid var(--nl-rule); border-radius: 4px; padding: 30px 32px; }

.pp .nl-ev-note h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.48rem; line-height: 1.16; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 10px; }

.pp .nl-ev-note p { margin: 0; font-size: 0.95rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-cmp { display: flex; flex-direction: column; gap: 10px; }

.pp .nl-cmp-item { border: 1px solid var(--nl-rule); border-radius: 4px; padding: 14px 16px; }

.pp .nl-cmp-item .k { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .nl-cmp-item .v { font-family: var(--ow-serif); font-size: 1.42rem; font-weight: 500; letter-spacing: -0.015em; margin-top: 6px; font-variant-numeric: tabular-nums; }

.pp .nl-cmp-item .n { font-size: 0.77rem; line-height: 1.45; color: var(--own-fg-3); margin-top: 5px; }

.pp .nl-cmp-item.bad { background: var(--nl-wash); }

.pp .nl-cmp-item.bad .v { color: var(--own-fg-3); text-decoration: line-through; text-decoration-thickness: 1px; }

.pp .nl-cmp-item.good { background: var(--ow-ink); border-color: var(--ow-ink); }

.pp .nl-cmp-item.good .k { color: #c4b5fd; }

.pp .nl-cmp-item.good .v { color: white; }

.pp .nl-cmp-item.good .v .to { color: rgba(246,241,231,0.5); margin: 0 3px; }

.pp .nl-cmp-item.good .n { color: rgba(246,241,231,0.6); }

/* ─────────────────────── OBJEKTHISTORIE / SES ─────────────────────── */

.pp .nl-hist { background: var(--ow-paper); }

.pp .nl-hist-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; }

.pp .nl-hist-copy h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 14px 0 12px; }

.pp .nl-hist-copy > p { margin: 0 0 22px; font-size: 1rem; line-height: 1.66; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-hist-copy ul { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--nl-rule); display: flex; flex-direction: column; gap: 13px; }

.pp .nl-hist-copy li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.94rem; line-height: 1.52; color: var(--own-fg-1); }

.pp .nl-hist-copy li .material-symbols-outlined { font-size: 1.05rem; color: var(--nl-seal); flex-shrink: 0; margin-top: 1px; }

/* Zeitleiste als Aktenspalte */
.pp .nl-tl { background: var(--nl-wash); border: 1px solid var(--nl-rule); border-radius: 4px; padding: 24px 26px 22px; }

.pp .nl-tl-k { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--nl-seal); margin-bottom: 4px; }

.pp .nl-tl-t { font-family: var(--ow-serif); font-weight: 500; font-size: 1.24rem; letter-spacing: -0.01em; color: var(--ow-ink); margin-bottom: 20px; }

.pp .nl-tl-list { list-style: none; margin: 0; padding: 0; position: relative; }

.pp .nl-tl-list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--nl-rule); }

.pp .nl-tl-list li { position: relative; padding: 0 0 22px 30px; }

.pp .nl-tl-list li:last-child { padding-bottom: 0; }

.pp .nl-tl-list li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ow-paper); border: 1px solid var(--nl-seal); }

.pp .nl-tl-list li.sig::before { background: var(--nl-seal); }

.pp .nl-tl-list .t-d { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); font-variant-numeric: tabular-nums; }

.pp .nl-tl-list .t-t { font-size: 0.94rem; font-weight: 600; color: var(--ow-ink); margin-top: 4px; }

.pp .nl-tl-list .t-m { font-size: 0.82rem; line-height: 1.5; color: var(--own-fg-2); margin-top: 3px; text-wrap: pretty; }

.pp .nl-tl-list .t-ses { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border: 1px solid var(--nl-seal); border-radius: 3px; background: rgba(91,33,182,0.06); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nl-seal); }

.pp .nl-tl-list .t-ses .material-symbols-outlined { font-size: 0.95rem; }

.pp .nl-tl-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nl-rule); font-size: 0.79rem; line-height: 1.55; color: var(--own-fg-3); text-wrap: pretty; }

/* ─────────────────────── FREIGABE / VERTRAUEN ─────────────────────── */

.pp .nl-trust { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .nl-trust::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 100% 34px; pointer-events: none; }

.pp .nl-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }

.pp .nl-pillar { padding: 0 26px; border-left: 1px solid rgba(255,255,255,0.13); }

.pp .nl-pillar:first-child { border-left: 0; padding-left: 0; }

.pp .nl-pillar:last-child { padding-right: 0; }

.pp .nl-pillar .pi { width: 42px; height: 42px; border-radius: 3px; border: 1px solid rgba(196,181,253,0.4); background: rgba(124,58,237,0.12); display: grid; place-items: center; color: #c4b5fd; margin-bottom: 20px; }

.pp .nl-pillar h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.28rem; line-height: 1.2; letter-spacing: -0.01em; color: white; margin: 0 0 11px; }

.pp .nl-pillar p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.66); text-wrap: pretty; }

.pp .nl-axiom { margin-top: 52px; padding: 28px 32px; border: 1px solid rgba(196,181,253,0.4); border-radius: 4px; background: rgba(124,58,237,0.10); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; position: relative; }

.pp .nl-axiom .material-symbols-outlined { font-size: 1.6rem; color: #c4b5fd; }

.pp .nl-axiom .ax-t { font-family: var(--ow-serif); font-size: 1.46rem; font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; color: white; flex: 1; min-width: 16em; text-wrap: balance; }

.pp .nl-axiom .ax-d { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 30em; text-wrap: pretty; }

/* ─────────────────────── ABGRENZUNG ─────────────────────── */

.pp .nl-limits { background: var(--nl-wash); border-top: 1px solid var(--nl-rule); border-bottom: 1px solid var(--nl-rule); }

.pp .nl-limits-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; border: 1px solid var(--nl-rule); border-radius: 4px; padding: 40px 44px; background: var(--ow-paper); }

.pp .nl-limits-card h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.65rem, 2.5vw, 2.1rem); line-height: 1.14; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; }

.pp .nl-limits-card h2 em { font-style: italic; color: var(--nl-seal); }

.pp .nl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

.pp .nl-split-col { padding: 0 26px; border-left: 1px solid var(--nl-rule); }

.pp .nl-split-col:first-child { border-left: 0; padding-left: 0; }

.pp .nl-split-col:last-child { padding-right: 0; }

.pp .nl-split-col .sc-k { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--nl-seal); margin-bottom: 16px; }

.pp .nl-split-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.pp .nl-split-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; line-height: 1.52; color: var(--own-fg-1); }

.pp .nl-split-col li .material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; color: var(--nl-seal); }

.pp .nl-limits-fine { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--nl-rule); font-size: 0.81rem; line-height: 1.65; color: var(--own-fg-3); text-wrap: pretty; }

/* ─────────────────────── PARTNERMODELLE ─────────────────────── */

.pp .nl-models { background: var(--ow-paper); }

.pp .nl-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.pp .nl-model { background: var(--nl-wash); border: 1px solid var(--nl-rule); border-radius: 4px; padding: 34px 34px 30px; display: flex; flex-direction: column; }

.pp .nl-model-k { font-family: var(--ow-serif); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-seal); }

.pp .nl-model h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.68rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 12px 0 12px; }

.pp .nl-model > p { margin: 0 0 22px; font-size: 0.96rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-benefit { display: flex; align-items: baseline; gap: 14px; padding: 18px 20px; border: 1px solid var(--nl-seal); border-radius: 4px; background: rgba(91,33,182,0.05); margin-bottom: 22px; }

.pp .nl-benefit .fig { font-family: var(--ow-serif); font-weight: 500; font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; color: var(--nl-seal); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp .nl-benefit .fig .pre { font-family: var(--own-font-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 7px; color: var(--nl-seal); }

.pp .nl-benefit .txt { font-size: 0.89rem; line-height: 1.52; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-benefit .txt b { color: var(--ow-ink); font-weight: 700; }

.pp .nl-model dl { margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--nl-rule); display: flex; flex-direction: column; gap: 14px; flex: 1; }

.pp .nl-model dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 4px; }

.pp .nl-model dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .nl-model .lp-btn { width: 100%; justify-content: center; border-radius: 4px; }

.pp .nl-models-fine { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--nl-wash); border: 1px solid var(--nl-rule); border-radius: 4px; font-size: 0.83rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .nl-models-fine .material-symbols-outlined { font-size: 1.1rem; color: var(--nl-seal); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── CTA ─────────────────────── */

.pp .nl-cta { background: var(--ow-ink); color: white; position: relative; overflow: hidden; padding: 100px 0; }

.pp .nl-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 100% 34px; pointer-events: none; }

.pp .nl-cta-inner { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center; }

.pp .nl-cta h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.95rem, 3.6vw, 2.95rem); line-height: 1.1; letter-spacing: -0.02em; color: white; margin: 18px 0; text-wrap: balance; }

.pp .nl-cta h2 em { font-style: italic; color: #c4b5fd; }

.pp .nl-cta p { font-size: 1.04rem; line-height: 1.68; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .nl-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pp .nl-cta .lp-btn-ghost { border-radius: 4px; }

.pp .nl-cta .micro { margin-top: 22px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.pp .nl-cta-aside { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 44px; }

.pp .nl-cta-aside .q { font-family: var(--ow-serif); font-style: italic; font-weight: 500; font-size: 1.4rem; line-height: 1.36; letter-spacing: -0.01em; color: white; margin: 0; text-wrap: pretty; }

.pp .nl-cta-aside .src { display: block; margin-top: 14px; font-family: var(--own-font-sans); font-style: normal; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #c4b5fd; }

.pp .nl-cta-agenda { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 12px; }

.pp .nl-cta-agenda li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.72); }

.pp .nl-cta-agenda li .material-symbols-outlined { font-size: 1.05rem; color: #c4b5fd; flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 1100px) {
  .pp .nl-nav .lp-nav-links,
  .pp .nl-nav-tag { display: none; }
  .pp .nl-hero-inner { grid-template-columns: 1fr; gap: 46px; padding-top: 128px; padding-bottom: 76px; }
  .pp .nl-hero::after { display: none; }
  .pp .nl-sec-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .pp .nl-steps { grid-template-columns: repeat(2, 1fr); }
  .pp .nl-step { border-left: 1px solid var(--nl-rule-fine); border-bottom: 1px solid var(--nl-rule-fine); padding: 26px 22px; }
  .pp .nl-step:first-child,
  .pp .nl-step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .nl-step:last-child { padding-right: 22px; }
  .pp .nl-ev-grid { grid-template-columns: repeat(2, 1fr); }
  .pp .nl-ev:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .nl-ev:last-child { padding-right: 24px; }
  .pp .nl-hist-grid { grid-template-columns: 1fr; gap: 40px; }
  .pp .nl-pillars { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .pp .nl-pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .nl-limits-card { grid-template-columns: 1fr; gap: 30px; padding: 34px 32px; }
  .pp .nl-cta-inner { grid-template-columns: 1fr; gap: 38px; }
  .pp .nl-cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 32px; }
}

@media (max-width: 860px) {
  .pp .nl-prob { grid-template-columns: 48px 1fr; gap: 20px; }
  .pp .nl-prob .p-cost { grid-column: 2; border-left: 0; padding-left: 0; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--nl-rule-fine); }
  .pp .nl-ev-note { grid-template-columns: 1fr; gap: 24px; padding: 26px 24px; }
  .pp .nl-models-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pp .nl-steps,
  .pp .nl-ev-grid { grid-template-columns: 1fr; }
  .pp .nl-step,
  .pp .nl-ev { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .pp .nl-pillars { grid-template-columns: 1fr; }
  .pp .nl-pillar { border-left: 0; padding: 0; }
  .pp .nl-split { grid-template-columns: 1fr; row-gap: 26px; }
  .pp .nl-split-col { border-left: 0; padding: 0; }
  .pp .nl-split-col:last-child { padding-top: 26px; border-top: 1px solid var(--nl-rule); }
  .pp .nl-limits-card { padding: 26px 22px; }
  .pp .nl-model { padding: 26px 24px 24px; }
  .pp .nl-cta { padding: 74px 0; }
  .pp .nl-axiom { padding: 22px; gap: 14px; }
  .pp .vz-cols,
  .pp .vz-row { grid-template-columns: 26px 1fr 108px; gap: 10px; padding-left: 18px; padding-right: 18px; }
  .pp .vz-head,
  .pp .vz-foot { padding-left: 18px; padding-right: 18px; }
}

/* =========================================================================
   OWNAMIC — Partner-Landingpage: Auktionshäuser, Restaurator:innen, Uhrmacher
   Erbt Farbwelt und Typografie aus landing/styles.css.
   Material: Papier, Messing, Werkstatt — übersetzt in die violette Brandwelt.
   Signatur: die Objektbiografie als vertikal erzählte Zeitlinie.
   ========================================================================= */

.pp {
  --au-brass:      #b08d4f;   /* Messing, matt — nicht Gold */
  --au-brass-deep: #8a6c39;
  --au-violet:     #5b21b6;
  --au-violet-lt:  #c4b5fd;
  --au-paper:      #f8f6f1;   /* Werkstattpapier */
  --au-rule:       #ded7c9;
  --au-rule-fine:  #ece7db;
}

.pp a { color: var(--au-violet); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pp a:hover { color: var(--au-brass-deep); }

.pp a.lp-btn,
.pp .lp-nav a,
.pp .pp-crosslinks-bar a { text-decoration: none; }

.pp :focus-visible { outline: 2px solid var(--au-brass); outline-offset: 3px; border-radius: 3px; }

.pp .au-num { font-family: var(--ow-serif); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--au-brass-deep); }

/* Belegstempel — vier Stufen, wiederkehrend */
.pp .au-stamp { display: inline-flex; align-items: center; gap: 7px; }

.pp .au-stamp .segs { display: inline-flex; gap: 3px; }

.pp .au-stamp .segs i { width: 9px; height: 9px; border: 1px solid var(--au-brass-deep); border-radius: 1px; }

.pp .au-stamp .segs i.on { background: var(--au-brass-deep); }

.pp .au-stamp .lbl { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--own-fg-2); white-space: nowrap; }

.pp .au-stamp.dark .segs i { border-color: var(--au-brass); }

.pp .au-stamp.dark .segs i.on { background: var(--au-brass); }

.pp .au-stamp.dark .lbl { color: rgba(255,255,255,0.7); }

/* ─────────────────────── NAV ─────────────────────── */

.pp .au-nav { padding: 22px 0; }

.pp .au-nav .lp-nav-links a { color: rgba(255,255,255,0.72); }

.pp .au-nav .lp-nav-links a:hover { color: white; }

.pp .au-nav .lp-nav-cta .lp-btn { white-space: nowrap; flex-shrink: 0; }

.pp .au-nav-tag { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--au-brass); border: 1px solid rgba(176,141,79,0.5); border-radius: 3px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

/* ─────────────────────── HERO ─────────────────────── */

.pp .au-hero { position: relative; overflow: hidden; color: white; background: linear-gradient(180deg, #0a0a18 0%, #0b1020 72%, #0b1020 100%); }

.pp .au-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 520px at 82% 8%, rgba(124,58,237,0.20), transparent 62%), radial-gradient(620px 420px at 4% 92%, rgba(176,141,79,0.12), transparent 60%); pointer-events: none; }

.pp .au-hero-inner { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 64px; align-items: start; padding-top: 148px; padding-bottom: 96px; }

.pp .au-hero-copy { padding-top: 12px; }

.pp .au-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(176,141,79,0.48); background: rgba(176,141,79,0.10); color: var(--au-brass); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 3px; margin-bottom: 28px; }

.pp .au-hero h1 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.06; letter-spacing: -0.015em; color: white; margin: 0 0 22px; text-wrap: balance; }

.pp .au-hero h1 em { font-style: italic; color: var(--au-brass); }

.pp .au-hero .au-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.16rem; line-height: 1.4; color: rgba(255,255,255,0.62); margin: 0 0 20px; padding-left: 16px; border-left: 1px solid rgba(176,141,79,0.5); text-wrap: pretty; }

.pp .au-hero .au-lede { font-size: 1.06rem; line-height: 1.7; color: rgba(255,255,255,0.76); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }


.pp .au-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }

.pp .au-btn-brass { background: var(--au-brass); color: #17130a; border: 1px solid var(--au-brass); border-radius: 3px; font-weight: 700; }

.pp .au-btn-brass:hover { background: #c39c58; border-color: #c39c58; transform: translateY(-2px); }

.pp .au-hero .lp-btn-ghost,
.pp .au-cta .lp-btn-ghost { border-radius: 3px; }

.pp .au-hero-trust { display: flex; flex-direction: column; gap: 13px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.10); }

.pp .au-hero-trust span { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,0.74); }

.pp .au-hero-trust .material-symbols-outlined { font-size: 1.1rem; color: var(--au-brass); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── SIGNATUR: OBJEKTBIOGRAFIE ─────────────────────── */

.pp .bio { background: var(--au-paper); border: 1px solid var(--au-rule); border-radius: 3px; color: var(--ow-ink); box-shadow: 0 40px 90px rgba(0,0,0,0.5); overflow: hidden; }

.pp .bio-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--au-rule); display: flex; align-items: flex-start; gap: 16px; }

.pp .bio-head .b-k { font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--au-brass-deep); }

.pp .bio-head .b-t { font-family: var(--ow-serif); font-weight: 500; font-size: 1.44rem; line-height: 1.12; letter-spacing: -0.01em; margin-top: 6px; }

.pp .bio-head .b-d { font-size: 0.78rem; color: var(--own-fg-3); margin-top: 4px; }

.pp .bio-head .b-role { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--own-fg-2); background: var(--ow-paper); border: 1px solid var(--au-rule); border-radius: 3px; padding: 6px 10px; white-space: nowrap; }

.pp .bio-head .b-role .material-symbols-outlined { font-size: 0.95rem; color: var(--au-violet); }

/* Die Kette: eine Messinglinie, an der die Stationen hängen */
.pp .bio-chain { list-style: none; margin: 0; padding: 22px 26px 8px; position: relative; }

.pp .bio-chain::before { content: ""; position: absolute; left: 36px; top: 30px; bottom: 26px; width: 1px; background: linear-gradient(180deg, var(--au-brass) 0%, rgba(176,141,79,0.35) 100%); }

.pp .bio-st { position: relative; padding: 0 0 24px 40px; }

.pp .bio-st:last-child { padding-bottom: 8px; }

.pp .bio-st::before { content: ""; position: absolute; left: 5px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--au-brass); background: var(--au-paper); box-sizing: border-box; }

.pp .bio-st.signed::before { background: var(--au-brass); box-shadow: 0 0 0 3px rgba(176,141,79,0.18); }

.pp .bio-st .st-y { font-family: var(--ow-serif); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; color: var(--au-brass-deep); font-variant-numeric: tabular-nums; }

.pp .bio-st .st-t { font-size: 0.95rem; font-weight: 700; color: var(--ow-ink); margin-top: 3px; }

.pp .bio-st .st-m { font-size: 0.83rem; line-height: 1.52; color: var(--own-fg-2); margin-top: 4px; text-wrap: pretty; }

.pp .bio-st .st-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }

.pp .bio-st .st-ses { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--au-violet); border-radius: 3px; background: rgba(91,33,182,0.06); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--au-violet); white-space: nowrap; }

.pp .bio-st .st-ses .material-symbols-outlined { font-size: 0.9rem; }

.pp .bio-st .st-ses.qr { border-color: var(--au-brass-deep); background: rgba(176,141,79,0.10); color: var(--au-brass-deep); }

.pp .bio-st .st-by { font-size: 0.76rem; color: var(--own-fg-3); }

.pp .bio-foot { display: flex; align-items: center; gap: 16px; padding: 16px 26px; border-top: 1px solid var(--au-rule); background: var(--ow-paper); flex-wrap: wrap; }

.pp .bio-foot .f-k { font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .bio-foot .f-v { font-family: var(--ow-serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ow-ink); margin-top: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp .bio-foot .f-v .to { color: var(--own-fg-3); margin: 0 2px; }

.pp .bio-foot .f-r { margin-left: auto; text-align: right; }

.pp .bio-foot .f-r .au-stamp { justify-content: flex-end; }

.pp .bio-foot .f-n { font-size: 0.74rem; color: var(--own-fg-3); margin-top: 5px; }

/* ─────────────────────── STRIP ─────────────────────── */

.pp .au-strip { background: var(--ow-ink); border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; }

.pp .au-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.pp .au-strip .l { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.4); }

.pp .au-strip .items { display: flex; gap: 28px; flex-wrap: wrap; }

.pp .au-strip .items span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .au-strip .items .material-symbols-outlined { font-size: 1.05rem; color: var(--au-brass); }

/* ─────────────────────── ABSCHNITTSKOPF ─────────────────────── */

.pp .au-sec-head { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: end; padding-bottom: 24px; margin-bottom: 44px; border-bottom: 1px solid var(--au-rule); }

.pp .au-sec-head h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; text-wrap: balance; }

.pp .au-sec-head h2 em { font-style: italic; color: var(--au-brass-deep); }

.pp .au-sec-head .rhs { font-size: 1.02rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-trust .au-sec-head,
.pp .au-dual .au-sec-head { border-bottom-color: rgba(255,255,255,0.14); }

.pp .au-trust .au-sec-head h2,
.pp .au-dual .au-sec-head h2 { color: white; }

.pp .au-trust .au-sec-head h2 em,
.pp .au-dual .au-sec-head h2 em { color: var(--au-brass); }

.pp .au-trust .au-sec-head .rhs,
.pp .au-dual .au-sec-head .rhs { color: rgba(255,255,255,0.7); }

.pp .au-trust .au-num,
.pp .au-dual .au-num { color: var(--au-brass); }

/* ─────────────────────── PROBLEM ─────────────────────── */

.pp .au-problem { background: var(--au-paper); border-top: 1px solid var(--au-rule); border-bottom: 1px solid var(--au-rule); }

.pp .au-prob-list { border-top: 1px solid var(--au-rule); }

.pp .au-prob { display: grid; grid-template-columns: 62px 1fr 320px; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--au-rule); align-items: start; }

.pp .au-prob .p-n { font-family: var(--ow-serif); font-size: 1.08rem; font-weight: 600; color: var(--au-brass-deep); letter-spacing: 0.12em; padding-top: 4px; }

.pp .au-prob h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.16; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 10px; }

.pp .au-prob p { margin: 0; font-size: 0.96rem; line-height: 1.64; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-prob .p-cost { border-left: 1px solid var(--au-rule); padding-left: 26px; }

.pp .au-prob .p-cost .c-k { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 8px; }

.pp .au-prob .p-cost .c-v { font-family: var(--ow-serif); font-style: italic; font-size: 1.02rem; line-height: 1.4; color: var(--ow-ink); text-wrap: pretty; }

.pp .au-prob-foot { margin-top: 30px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--au-rule); border-radius: 3px; font-size: 0.9rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-prob-foot .material-symbols-outlined { font-size: 1.15rem; color: var(--au-brass-deep); flex-shrink: 0; margin-top: 1px; }

.pp .au-prob-foot strong { color: var(--ow-ink); }

/* ─────────────────────── LEISTUNGEN ─────────────────────── */

.pp .au-feats { background: var(--ow-paper); }

.pp .au-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--au-rule); }

.pp .au-feat { padding: 30px 28px 28px; border-left: 1px solid var(--au-rule-fine); border-bottom: 1px solid var(--au-rule); }

.pp .au-feat:nth-child(3n+1) { border-left: 0; padding-left: 0; }

.pp .au-feat:nth-child(3n) { padding-right: 0; }

.pp .au-feat .f-ico { width: 42px; height: 42px; border-radius: 3px; border: 1px solid var(--au-rule); background: var(--au-paper); display: grid; place-items: center; color: var(--au-brass-deep); margin-bottom: 18px; }

.pp .au-feat .f-ico .material-symbols-outlined { font-size: 1.2rem; }

.pp .au-feat h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 10px; }

.pp .au-feat p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-feat .f-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 11px; border: 1px solid var(--au-rule); border-radius: 3px; background: var(--au-paper); font-size: 0.78rem; font-weight: 600; color: var(--ow-ink); }

.pp .au-feat .f-note .material-symbols-outlined { font-size: 0.95rem; color: var(--au-violet); }

/* QR-Signatur vor Ort — eigener Block */
.pp .au-qr { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--au-paper); border: 1px solid var(--au-rule); border-radius: 3px; padding: 32px 34px; }

.pp .au-qr h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.16; letter-spacing: -0.015em; color: var(--ow-ink); margin: 12px 0 10px; }

.pp .au-qr p { margin: 0; font-size: 0.96rem; line-height: 1.64; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-qr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.pp .au-qr-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }

.pp .au-qr-steps .q-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--au-brass); display: grid; place-items: center; font-family: var(--ow-serif); font-size: 0.92rem; font-weight: 600; color: var(--au-brass-deep); }

.pp .au-qr-steps .q-t { font-size: 0.94rem; font-weight: 700; color: var(--ow-ink); }

.pp .au-qr-steps .q-d { font-size: 0.85rem; line-height: 1.5; color: var(--own-fg-2); margin-top: 3px; text-wrap: pretty; }

/* ─────────────────────── ZWEI GEWERKE ─────────────────────── */

.pp .au-dual { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .au-dual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 460px at 20% 10%, rgba(124,58,237,0.18), transparent 62%), radial-gradient(600px 400px at 88% 90%, rgba(176,141,79,0.10), transparent 60%); pointer-events: none; }

.pp .au-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; }

.pp .au-dual-col { padding: 0 36px; border-left: 1px solid rgba(255,255,255,0.13); }

.pp .au-dual-col:first-child { border-left: 0; padding-left: 0; }

.pp .au-dual-col:last-child { padding-right: 0; }

.pp .au-dual-col .d-k { display: inline-flex; align-items: center; gap: 9px; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--au-brass); border: 1px solid rgba(176,141,79,0.45); border-radius: 3px; padding: 6px 11px; margin-bottom: 20px; }

.pp .au-dual-col h3 { font-family: var(--ow-serif); font-weight: 400; font-size: 1.72rem; line-height: 1.14; letter-spacing: -0.015em; color: white; margin: 0 0 14px; text-wrap: balance; }

.pp .au-dual-col h3 em { font-style: italic; color: var(--au-brass); }

.pp .au-dual-col > p { margin: 0 0 22px; font-size: 0.98rem; line-height: 1.66; color: rgba(255,255,255,0.72); text-wrap: pretty; }

.pp .au-dual-col ul { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.13); display: flex; flex-direction: column; gap: 13px; }

.pp .au-dual-col li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; line-height: 1.55; color: rgba(255,255,255,0.78); }

.pp .au-dual-col li .material-symbols-outlined { font-size: 1.05rem; color: var(--au-brass); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── BELEGSCHEMA ─────────────────────── */

.pp .au-evid { background: var(--au-paper); border-top: 1px solid var(--au-rule); border-bottom: 1px solid var(--au-rule); }

.pp .au-ev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--au-rule); }

.pp .au-ev { padding: 28px 24px 26px; border-left: 1px solid var(--au-rule-fine); border-bottom: 1px solid var(--au-rule); }

.pp .au-ev:first-child { border-left: 0; padding-left: 0; }

.pp .au-ev:last-child { padding-right: 0; }

.pp .au-ev .ev-s { margin-bottom: 18px; }

.pp .au-ev h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.24rem; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 9px; }

.pp .au-ev p { margin: 0; font-size: 0.88rem; line-height: 1.58; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-ev .ev-ex { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--au-rule-fine); font-size: 0.78rem; line-height: 1.45; color: var(--own-fg-3); font-style: italic; }

.pp .au-ev-foot { margin-top: 30px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--au-rule); border-radius: 3px; font-size: 0.88rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-ev-foot .material-symbols-outlined { font-size: 1.15rem; color: var(--au-brass-deep); flex-shrink: 0; margin-top: 1px; }

.pp .au-ev-foot strong { color: var(--ow-ink); }

/* ─────────────────────── FREIGABE / VERTRAUEN ─────────────────────── */

.pp .au-trust { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .au-trust::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 100% 36px; pointer-events: none; }

.pp .au-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }

.pp .au-pillar { padding: 0 26px; border-left: 1px solid rgba(255,255,255,0.13); }

.pp .au-pillar:first-child { border-left: 0; padding-left: 0; }

.pp .au-pillar:last-child { padding-right: 0; }

.pp .au-pillar .pi { width: 42px; height: 42px; border-radius: 3px; border: 1px solid rgba(176,141,79,0.45); background: rgba(176,141,79,0.10); display: grid; place-items: center; color: var(--au-brass); margin-bottom: 20px; }

.pp .au-pillar h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.26rem; line-height: 1.2; letter-spacing: -0.01em; color: white; margin: 0 0 11px; }

.pp .au-pillar p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.66); text-wrap: pretty; }

.pp .au-axiom { margin-top: 52px; padding: 28px 32px; border: 1px solid rgba(176,141,79,0.45); border-radius: 3px; background: rgba(176,141,79,0.08); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.pp .au-axiom .material-symbols-outlined { font-size: 1.6rem; color: var(--au-brass); }

.pp .au-axiom .ax-t { font-family: var(--ow-serif); font-size: 1.44rem; font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; color: white; flex: 1; min-width: 16em; text-wrap: balance; }

.pp .au-axiom .ax-d { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 30em; text-wrap: pretty; }

/* ─────────────────────── ABGRENZUNG ─────────────────────── */

.pp .au-limits { background: var(--ow-paper); }

.pp .au-limits-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; border: 1px solid var(--au-rule); border-radius: 3px; padding: 40px 44px; background: var(--au-paper); }

.pp .au-limits-card h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.62rem, 2.5vw, 2.05rem); line-height: 1.14; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; }

.pp .au-limits-card h2 em { font-style: italic; color: var(--au-brass-deep); }

.pp .au-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

.pp .au-split-col { padding: 0 26px; border-left: 1px solid var(--au-rule); }

.pp .au-split-col:first-child { border-left: 0; padding-left: 0; }

.pp .au-split-col:last-child { padding-right: 0; }

.pp .au-split-col .sc-k { font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--au-brass-deep); margin-bottom: 16px; }

.pp .au-split-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.pp .au-split-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.52; color: var(--own-fg-1); }

.pp .au-split-col li .material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; color: var(--au-brass-deep); }

.pp .au-limits-fine { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--au-rule); font-size: 0.81rem; line-height: 1.65; color: var(--own-fg-3); text-wrap: pretty; }

/* ─────────────────────── PARTNERMODELLE ─────────────────────── */

.pp .au-models { background: var(--au-paper); border-top: 1px solid var(--au-rule); border-bottom: 1px solid var(--au-rule); }

.pp .au-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.pp .au-model { background: var(--ow-paper); border: 1px solid var(--au-rule); border-radius: 3px; padding: 34px 34px 30px; display: flex; flex-direction: column; }

.pp .au-model-k { font-family: var(--ow-serif); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--au-brass-deep); }

.pp .au-model h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.66rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 12px 0; }

.pp .au-model > p { margin: 0 0 22px; font-size: 0.96rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-benefit { display: flex; align-items: baseline; gap: 14px; padding: 18px 20px; border: 1px solid var(--au-brass); border-radius: 3px; background: rgba(176,141,79,0.09); margin-bottom: 22px; }

.pp .au-benefit .fig { font-family: var(--ow-serif); font-weight: 500; font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; color: var(--au-brass-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp .au-benefit .fig .pre { font-family: var(--own-font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 7px; color: var(--au-brass-deep); }

.pp .au-benefit .txt { font-size: 0.89rem; line-height: 1.52; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-benefit .txt b { color: var(--ow-ink); font-weight: 700; }

.pp .au-model dl { margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--au-rule); display: flex; flex-direction: column; gap: 14px; flex: 1; }

.pp .au-model dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 4px; }

.pp .au-model dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .au-model .lp-btn { width: 100%; justify-content: center; border-radius: 3px; }

.pp .au-models-fine { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-paper); border: 1px solid var(--au-rule); border-radius: 3px; font-size: 0.83rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .au-models-fine .material-symbols-outlined { font-size: 1.1rem; color: var(--au-brass-deep); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── CTA ─────────────────────── */

.pp .au-cta { background: var(--ow-ink); color: white; position: relative; overflow: hidden; padding: 100px 0; }

.pp .au-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(780px 440px at 50% 110%, rgba(124,58,237,0.22), transparent 62%), radial-gradient(560px 360px at 6% 0%, rgba(176,141,79,0.10), transparent 60%); pointer-events: none; }

.pp .au-cta-inner { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center; }

.pp .au-cta h2 { font-family: var(--ow-serif); font-weight: 400; font-size: clamp(1.95rem, 3.6vw, 2.95rem); line-height: 1.1; letter-spacing: -0.02em; color: white; margin: 18px 0; text-wrap: balance; }

.pp .au-cta h2 em { font-style: italic; color: var(--au-brass); }

.pp .au-cta p { font-size: 1.04rem; line-height: 1.68; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .au-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pp .au-cta .micro { margin-top: 22px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.pp .au-cta-aside { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 44px; }

.pp .au-cta-aside .q { font-family: var(--ow-serif); font-style: italic; font-weight: 500; font-size: 1.4rem; line-height: 1.36; letter-spacing: -0.01em; color: white; margin: 0; text-wrap: pretty; }

.pp .au-cta-aside .src { display: block; margin-top: 14px; font-family: var(--own-font-sans); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--au-brass); }

.pp .au-cta-agenda { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 12px; }

.pp .au-cta-agenda li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.72); }

.pp .au-cta-agenda li .material-symbols-outlined { font-size: 1.05rem; color: var(--au-brass); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 1100px) {
  .pp .au-nav .lp-nav-links,
  .pp .au-nav-tag { display: none; }
  .pp .au-hero-inner { grid-template-columns: 1fr; gap: 46px; padding-top: 128px; padding-bottom: 76px; }
  .pp .au-hero-copy { padding-top: 0; }
  .pp .au-sec-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .pp .au-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .pp .au-feat:nth-child(3n+1) { border-left: 1px solid var(--au-rule-fine); padding-left: 28px; }
  .pp .au-feat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .au-feat:nth-child(3n) { padding-right: 28px; }
  .pp .au-feat:nth-child(even) { padding-right: 0; }
  .pp .au-qr { grid-template-columns: 1fr; gap: 28px; }
  .pp .au-dual-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .pp .au-dual-col { border-left: 0; padding: 0; }
  .pp .au-dual-col:last-child { padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.13); }
  .pp .au-ev-grid { grid-template-columns: repeat(2, 1fr); }
  .pp .au-ev:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .au-ev:last-child { padding-right: 24px; }
  .pp .au-pillars { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .pp .au-pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pp .au-limits-card { grid-template-columns: 1fr; gap: 30px; padding: 34px 32px; }
  .pp .au-cta-inner { grid-template-columns: 1fr; gap: 38px; }
  .pp .au-cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 32px; }
}

@media (max-width: 860px) {
  .pp .au-prob { grid-template-columns: 46px 1fr; gap: 20px; }
  .pp .au-prob .p-cost { grid-column: 2; border-left: 0; padding-left: 0; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--au-rule-fine); }
  .pp .au-models-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pp .au-feat-grid,
  .pp .au-ev-grid { grid-template-columns: 1fr; }
  .pp .au-feat,
  .pp .au-ev { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .pp .au-pillars { grid-template-columns: 1fr; }
  .pp .au-pillar { border-left: 0; padding: 0; }
  .pp .au-split { grid-template-columns: 1fr; row-gap: 26px; }
  .pp .au-split-col { border-left: 0; padding: 0; }
  .pp .au-split-col:last-child { padding-top: 26px; border-top: 1px solid var(--au-rule); }
  .pp .au-limits-card { padding: 26px 22px; }
  .pp .au-model { padding: 26px 24px 24px; }
  .pp .au-cta { padding: 74px 0; }
  .pp .au-axiom { padding: 22px; gap: 14px; }
  .pp .bio-head,
  .pp .bio-foot { padding-left: 20px; padding-right: 20px; }
  .pp .bio-chain { padding-left: 20px; padding-right: 20px; }
  .pp .bio-chain::before { left: 30px; }
}

/* =========================================================================
   OWNAMIC — Partner-Landingpage: Haushaltsauflösung, Entrümpelung & Umzug
   Erbt Farbwelt und Typografie aus dem Landing-Block oben.
   Signatur: das Übergabeprotokoll — Zeilennummern, Zeitstempel, Prüfsumme,
   Signaturfelder. Nüchtern, protokollarisch, in Violett übersetzt.

   Wie bei den anderen Partnerseiten sind die unpräfixierten Primitive des
   Design-Bundles (.shell/.btn/.nav/.section/.eyebrow) auf die `lp-`-Klassen
   umgeschrieben statt dupliziert; `.mono` heißt hier `.hz-mono`.
   Der Abschnitt `.hz-move` ("Für Umzugsunternehmen") steht nicht im Bundle —
   er trägt dieselbe Bildsprache wie `.hz-priv`, nur nummeriert.
   ========================================================================= */

.pp {
  --hz-violet:      #7c3aed;
  --hz-violet-deep: #5b21b6;
  --hz-lilac:       #a78bfa;
  --hz-wash:        #f7f4ff;
  --hz-line:        #ded5f7;
  --hz-mono-font:   ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  /* Caveat is already linked in the hosts' <head> for the signature lines. */
  --hz-hand:        "Caveat", "Bradley Hand", cursive;
}

.pp .hz-mono { font-family: var(--hz-mono-font); }

/* The shared section head is champagne by default; every band of this page
   carries the violet accent instead. */
.pp .hz-problem .lp-eyebrow,
.pp .hz-flow .lp-eyebrow,
.pp .hz-move .lp-eyebrow,
.pp .hz-privacy .lp-eyebrow,
.pp .hz-models .lp-eyebrow,
.pp .hz-limits .lp-eyebrow { color: var(--hz-violet); }

.pp .hz-problem .lp-section-head h2 em,
.pp .hz-flow .lp-section-head h2 em,
.pp .hz-move .lp-section-head h2 em,
.pp .hz-privacy .lp-section-head h2 em,
.pp .hz-models .lp-section-head h2 em { font-style: italic; color: var(--hz-violet); }

.pp .hz-btn-violet { background: var(--hz-violet); color: white; border: 1px solid var(--hz-violet); }

.pp .hz-btn-violet:hover { background: #6d28d9; border-color: #6d28d9; transform: translateY(-2px); }

/* ─────────────────────── NAV ─────────────────────── */

.pp .hz-nav { padding: 22px 0; }

.pp .hz-nav .lp-nav-links a { color: rgba(255,255,255,0.72); }

.pp .hz-nav .lp-nav-links a:hover { color: white; }

.pp .hz-nav .lp-nav-cta .lp-btn { white-space: nowrap; flex-shrink: 0; }

.pp .hz-nav-tag { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--hz-lilac); border: 1px solid rgba(167,139,250,0.45); border-radius: 999px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

/* ─────────────────────── HERO ─────────────────────── */

.pp .hz-hero { position: relative; overflow: hidden; color: white; background: radial-gradient(920px 540px at 76% -12%, rgba(124,58,237,0.30), transparent 62%), radial-gradient(820px 620px at 4% 100%, rgba(67,56,202,0.24), transparent 58%), linear-gradient(180deg, #0a0a1e 0%, #0b1020 60%, #0b1020 100%); }

.pp .hz-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 34px); mask-image: radial-gradient(ellipse at 62% 40%, black 25%, transparent 74%); pointer-events: none; }

.pp .hz-hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1.02fr; gap: 64px; align-items: center; padding-top: 148px; padding-bottom: 96px; }

.pp .hz-hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.38); color: var(--hz-lilac); font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 999px; margin-bottom: 26px; }

.pp .hz-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--hz-lilac); box-shadow: 0 0 11px var(--hz-lilac); }

.pp .hz-hero h1 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; color: white; margin: 0 0 20px; text-wrap: balance; }

.pp .hz-hero h1 em { font-style: italic; color: var(--hz-lilac); font-weight: 400; }

.pp .hz-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.16rem; line-height: 1.4; color: rgba(255,255,255,0.62); margin: 0 0 18px; max-width: 26em; }

.pp .hz-lede { font-size: 1.06rem; line-height: 1.68; color: rgba(255,255,255,0.78); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .hz-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; }

.pp .hz-hero-trust { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.10); }

.pp .hz-hero-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .hz-hero-trust .material-symbols-outlined { font-size: 1.1rem; color: var(--hz-lilac); }

.pp .hz-hero-doc { position: relative; }

.pp .hz-hero-caption { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-family: var(--ow-serif); font-style: italic; font-size: 1.08rem; line-height: 1.4; color: rgba(255,255,255,0.72); }

.pp .hz-hero-caption .material-symbols-outlined { font-size: 1.1rem; color: var(--hz-lilac); flex-shrink: 0; margin-top: 3px; }

/* ───────────── SIGNATUR: DAS ÜBERGABEPROTOKOLL ───────────── */

.pp .hz-doc { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 22px 24px; color: var(--ow-ink); box-shadow: 0 40px 90px rgba(0,0,0,0.45); }

.pp .hz-flow-doc .hz-doc { box-shadow: 0 24px 60px rgba(11,16,32,0.10); }

.pp .hz-doc .d-head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--ow-ink); }

.pp .hz-doc .d-k { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--hz-violet); }

.pp .hz-doc .d-n { font-family: var(--ow-serif); font-weight: 500; font-size: 1.34rem; line-height: 1.1; letter-spacing: -0.01em; margin-top: 5px; }

.pp .hz-doc .d-state { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--own-fg-2); background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }

.pp .hz-doc .d-state .material-symbols-outlined { font-size: 0.95rem; color: var(--own-fg-3); }

.pp .hz-doc .d-state.on { background: var(--hz-wash); border-color: var(--hz-line); color: var(--hz-violet-deep); }

.pp .hz-doc .d-state.on .material-symbols-outlined { color: var(--hz-violet); }

.pp .hz-doc .d-rows { font-family: var(--hz-mono-font); font-size: 0.74rem; }

.pp .hz-doc .d-rowhead,
.pp .hz-doc .d-row { display: grid; grid-template-columns: 34px 1fr 84px 96px; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--ow-line); }

.pp .hz-doc .d-rowhead { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--own-fg-3); }

.pp .hz-doc .d-rowhead .num { text-align: right; }

.pp .hz-doc .d-row .r-n { color: var(--own-fg-3); font-variant-numeric: tabular-nums; }

.pp .hz-doc .d-row .r-t { font-family: var(--own-font-sans); font-size: 0.9rem; font-weight: 600; color: var(--ow-ink); }

.pp .hz-doc .d-row .r-c { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--hz-violet-deep); }

.pp .hz-doc .d-row .r-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--own-fg-1); }

.pp .hz-doc .d-row .r-v small { display: block; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--own-fg-3); margin-top: 2px; }

.pp .hz-doc .d-row .r-v em { font-style: normal; color: var(--own-fg-3); }

.pp .hz-doc .d-row.fresh { animation: hzRowIn 420ms var(--own-ease, ease) both; }

@keyframes hzRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pp .hz-doc .d-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.pp .hz-doc .d-tally span { display: inline-flex; align-items: baseline; gap: 6px; background: var(--hz-wash); border: 1px solid var(--hz-line); border-radius: 8px; padding: 7px 11px; font-size: 0.72rem; font-weight: 600; color: var(--hz-violet-deep); }

.pp .hz-doc .d-tally b { font-family: var(--ow-serif); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.pp .hz-doc .d-tally .t-sum { margin-left: auto; background: var(--ow-ink); border-color: var(--ow-ink); color: white; }

.pp .hz-doc .d-seal { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--hz-line); }

.pp .hz-doc .s-file { display: flex; gap: 12px; align-items: center; background: var(--hz-wash); border: 1px solid var(--hz-line); border-radius: 12px; padding: 12px 14px; }

.pp .hz-doc .s-file .material-symbols-outlined { font-size: 1.3rem; color: var(--hz-violet); flex-shrink: 0; }

.pp .hz-doc .s-file .f-t { font-size: 0.86rem; font-weight: 700; color: var(--ow-ink); word-break: break-word; }

.pp .hz-doc .s-file .f-d { font-size: 0.68rem; color: var(--own-fg-2); margin-top: 3px; letter-spacing: 0.01em; }

.pp .hz-doc .s-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

.pp .hz-doc .sig { border-top: 1px solid var(--ow-ink); padding-top: 8px; }

.pp .hz-doc .sig-line { display: block; font-family: var(--hz-hand); font-size: 1.5rem; line-height: 1; color: var(--hz-violet-deep); margin-bottom: 8px; }

.pp .hz-doc .sig-k { display: block; font-size: 0.72rem; font-weight: 700; color: var(--ow-ink); }

.pp .hz-doc .sig-m { display: block; font-size: 0.64rem; color: var(--own-fg-3); margin-top: 3px; }

.pp .hz-doc .d-rest { padding-top: 4px; }

.pp .hz-doc .rest-k { font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin: 16px 0 10px; }

.pp .hz-doc .rest-list { margin: 0; display: flex; flex-direction: column; }

.pp .hz-doc .rest-list > div { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ow-line); }

.pp .hz-doc .rest-list dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); min-width: 12em; }

.pp .hz-doc .rest-list dd { margin: 0 0 0 auto; font-size: 0.9rem; font-weight: 600; color: var(--ow-ink); text-align: right; }

.pp .hz-doc .rest-list dd.hz-mono { font-size: 0.8rem; letter-spacing: 0.02em; }

.pp .hz-doc .rest-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 0.8rem; line-height: 1.5; color: var(--own-fg-2); text-wrap: pretty; }

.pp .hz-doc .rest-note .material-symbols-outlined { font-size: 1.05rem; color: var(--hz-violet); flex-shrink: 0; }

.pp .hz-doc.is-rest { background: var(--hz-wash); }

/* ─────────────────────── STRIP ─────────────────────── */

.pp .hz-strip { background: var(--ow-ink); border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; }

.pp .hz-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.pp .hz-strip .l { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.4); }

.pp .hz-strip .items { display: flex; gap: 28px; flex-wrap: wrap; }

.pp .hz-strip .items span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.76); }

.pp .hz-strip .items .material-symbols-outlined { font-size: 1.05rem; color: var(--hz-lilac); }

/* ─────────────────────── AUSGANGSLAGE ─────────────────────── */

.pp .hz-problem { background: var(--hz-wash); border-top: 1px solid var(--hz-line); border-bottom: 1px solid var(--hz-line); }

.pp .hz-prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.pp .hz-prob { background: var(--ow-paper); border: 1px solid var(--hz-line); border-radius: 16px; padding: 28px 30px 26px; display: flex; flex-direction: column; }

.pp .hz-prob .p-n { font-family: var(--hz-mono-font); font-size: 0.8rem; font-weight: 600; color: var(--hz-violet); letter-spacing: 0.1em; margin-bottom: 14px; }

.pp .hz-prob h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.42rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 12px; text-wrap: pretty; }

.pp .hz-prob p { margin: 0; font-size: 0.95rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; flex: 1; }

.pp .hz-prob .p-quote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ow-line); font-family: var(--ow-serif); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--ow-ink); }

/* ─────────────────────── ABLAUF ─────────────────────── */

.pp .hz-flow { background: var(--ow-paper); }

.pp .hz-rail { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }

.pp .hz-rail li { border-left: 1px solid var(--ow-line); }

.pp .hz-rail li:first-child { border-left: 0; }

.pp .hz-rail button { width: 100%; font: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; transition: background 160ms ease, color 160ms ease; position: relative; }

.pp .hz-rail .r-num { font-family: var(--hz-mono-font); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--own-fg-3); }

.pp .hz-rail .r-k { display: inline-flex; align-items: center; gap: 9px; font-size: 0.98rem; font-weight: 600; color: var(--own-fg-2); }

.pp .hz-rail .r-k .material-symbols-outlined { font-size: 1.15rem; color: var(--own-fg-3); }

.pp .hz-rail li:hover button { background: var(--hz-wash); }

.pp .hz-rail li.done .r-k { color: var(--ow-ink); }

.pp .hz-rail li.done .r-k .material-symbols-outlined,
.pp .hz-rail li.done .r-num { color: var(--hz-lilac); }

.pp .hz-rail li.on button { background: var(--ow-ink); }

.pp .hz-rail li.on .r-num { color: var(--hz-lilac); }

.pp .hz-rail li.on .r-k { color: white; }

.pp .hz-rail li.on .r-k .material-symbols-outlined { color: var(--hz-lilac); }

.pp .hz-flow-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: start; }

.pp .hz-flow-copy .fc-num { font-family: var(--hz-mono-font); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hz-violet); }

.pp .hz-flow-copy h3 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ow-ink); margin: 10px 0 14px; text-wrap: balance; }

.pp .hz-flow-copy > p { margin: 0; font-size: 1.02rem; line-height: 1.68; color: var(--own-fg-2); text-wrap: pretty; }

.pp .hz-flow-copy .fc-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; background: var(--hz-wash); border: 1px solid var(--hz-line); border-radius: 12px; font-size: 0.88rem; line-height: 1.55; color: var(--own-fg-1); text-wrap: pretty; }

.pp .hz-flow-copy .fc-note .material-symbols-outlined { font-size: 1.05rem; color: var(--hz-violet); flex-shrink: 0; margin-top: 1px; }

.pp .hz-seal-aside { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 18px 20px; background: var(--ow-ink); border-radius: 14px; }

.pp .hz-seal-aside .material-symbols-outlined { font-size: 1.15rem; color: var(--hz-lilac); flex-shrink: 0; margin-top: 2px; }

.pp .hz-seal-aside p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.8); text-wrap: pretty; }

.pp .hz-flow-doc { position: sticky; top: 32px; }

/* ─────────────────────── KERNNUTZEN ─────────────────────── */

.pp .hz-shield { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .hz-shield::before { content: ""; position: absolute; inset: 0; background: radial-gradient(880px 520px at 14% 10%, rgba(124,58,237,0.26), transparent 62%); pointer-events: none; }

.pp .hz-shield .lp-shell { position: relative; }

.pp .hz-shield .lp-eyebrow { color: var(--hz-lilac); }

.pp .hz-shield-main { max-width: 60rem; }

.pp .hz-shield h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; color: white; margin: 18px 0 28px; text-wrap: balance; }

.pp .hz-shield h2 em { font-style: italic; color: var(--hz-lilac); }

.pp .hz-shield-body { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }

.pp .hz-shield-body p { margin: 0; font-size: 1.02rem; line-height: 1.72; color: rgba(255,255,255,0.76); text-wrap: pretty; }

.pp .hz-shield-second { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 24px; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.12); align-items: center; }

.pp .hz-shield .ss-card { display: grid; grid-template-columns: 44px 1fr; gap: 18px; }

.pp .hz-shield .ss-ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(167,139,250,0.14); border: 1px solid rgba(167,139,250,0.36); display: grid; place-items: center; color: var(--hz-lilac); }

.pp .hz-shield .ss-card h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.42rem; line-height: 1.18; letter-spacing: -0.01em; color: white; margin: 0; text-wrap: balance; }

.pp .hz-shield .ss-card p { grid-column: 2; margin: 0; font-size: 0.94rem; line-height: 1.62; color: rgba(255,255,255,0.68); text-wrap: pretty; }

.pp .hz-shield .ss-quote { margin: 0; padding-left: 28px; border-left: 2px solid var(--hz-lilac); font-family: var(--ow-serif); font-style: italic; font-size: 1.28rem; line-height: 1.36; color: white; text-wrap: pretty; }

/* ─────────────────────── FÜR UMZUGSUNTERNEHMEN ───────────────────────
   Nicht im Design-Bundle: dieselben vier Schritte, für den Umzug erzählt.
   Nummeriert wie die Ausgangslage, gerastert wie die Datenschutzkarten. */

.pp .hz-move { background: var(--ow-paper); border-top: 1px solid var(--ow-line); }

.pp .hz-move-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.pp .hz-move-step { background: var(--hz-wash); border: 1px solid var(--hz-line); border-radius: 16px; padding: 26px 26px 24px; }

.pp .hz-move-step .m-n { font-family: var(--hz-mono-font); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; color: var(--hz-violet); }

.pp .hz-move-step .m-ico { display: grid; place-items: center; width: 42px; height: 42px; margin: 14px 0 16px; border-radius: 11px; background: var(--ow-paper); border: 1px solid var(--hz-line); color: var(--hz-violet); }

.pp .hz-move-step h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.24rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 10px; text-wrap: pretty; }

.pp .hz-move-step p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .hz-move-note { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--ow-ink); border-radius: 14px; font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.8); text-wrap: pretty; }

.pp .hz-move-note .material-symbols-outlined { font-size: 1.1rem; color: var(--hz-lilac); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── DATENSCHUTZ ─────────────────────── */

.pp .hz-privacy { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }

.pp .hz-priv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.pp .hz-priv { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 26px 26px 24px; }

.pp .hz-priv .pi { width: 42px; height: 42px; border-radius: 11px; background: var(--hz-wash); border: 1px solid var(--hz-line); display: grid; place-items: center; color: var(--hz-violet); margin-bottom: 18px; }

.pp .hz-priv h4 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.24rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 10px; text-wrap: pretty; }

.pp .hz-priv p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

/* ─────────────────────── PARTNERMODELLE ─────────────────────── */

.pp .hz-models { background: var(--ow-paper); }

.pp .hz-models-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 20px; align-items: stretch; }

.pp .hz-model { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 20px; padding: 34px 34px 30px; display: flex; flex-direction: column; }

.pp .hz-model.primary { background: var(--hz-wash); border-color: var(--hz-lilac); box-shadow: 0 24px 60px rgba(124,58,237,0.10); }

.pp .hz-model-k { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); }

.pp .hz-model.primary .hz-model-k { color: var(--hz-violet); }

.pp .hz-model h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.72rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--ow-ink); margin: 10px 0 12px; }

.pp .hz-model > p { margin: 0 0 22px; font-size: 0.96rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .hz-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

.pp .hz-tier { background: var(--ow-paper); border: 1px solid var(--hz-line); border-radius: 12px; padding: 13px 14px; }

.pp .hz-tier .t-n { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--hz-violet); }

.pp .hz-tier .t-d { display: block; font-size: 0.78rem; line-height: 1.4; color: var(--own-fg-2); margin-top: 6px; text-wrap: pretty; }

.pp .hz-benefit { display: flex; align-items: baseline; gap: 14px; padding: 18px 20px; border: 1px solid var(--hz-line); border-radius: 14px; background: var(--ow-paper); margin-bottom: 22px; flex-wrap: wrap; }

.pp .hz-benefit .fig { font-family: var(--ow-serif); font-weight: 600; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; color: var(--hz-violet); }

.pp .hz-benefit .fig .pre { font-family: var(--own-font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 7px; color: var(--hz-violet); }

.pp .hz-benefit .txt { flex: 1; min-width: 12em; font-size: 0.9rem; line-height: 1.5; color: var(--own-fg-2); text-wrap: pretty; }

.pp .hz-benefit .txt b { color: var(--ow-ink); font-weight: 700; }

.pp .hz-model dl { margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--ow-line); display: flex; flex-direction: column; gap: 14px; flex: 1; }

.pp .hz-model dt { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 4px; }

.pp .hz-model dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .hz-model .lp-btn { width: 100%; justify-content: center; }

.pp .hz-model-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.pp .hz-model-alt { display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 600; color: var(--hz-violet-deep); text-decoration: none; }

.pp .hz-model-alt:hover { text-decoration: underline; text-underline-offset: 3px; }

.pp .hz-model-alt .material-symbols-outlined { font-size: 1.05rem; }

.pp .hz-models-fine { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; background: var(--hz-wash); border: 1px solid var(--hz-line); border-radius: 14px; font-size: 0.84rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .hz-models-fine .material-symbols-outlined { font-size: 1.1rem; color: var(--hz-violet); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── ABGRENZUNG ─────────────────────── */

.pp .hz-limits { background: var(--hz-wash); border-top: 1px solid var(--hz-line); }

.pp .hz-limits-card { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; }

.pp .hz-limits-card h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; text-wrap: balance; }

.pp .hz-limits-card h2 em { font-style: italic; color: var(--hz-violet); }

.pp .hz-limits-lede { margin: 16px 0 0; font-size: 0.96rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .hz-limits-list { list-style: none; margin: 0; padding: 0; }

.pp .hz-limits-list li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--hz-line); }

.pp .hz-limits-list li:first-child { border-top: 0; padding-top: 0; }

.pp .hz-limits-list .l-n { font-family: var(--hz-mono-font); font-size: 0.76rem; letter-spacing: 0.1em; color: var(--hz-violet); padding-top: 3px; }

.pp .hz-limits-list h4 { font-size: 0.98rem; font-weight: 700; color: var(--ow-ink); margin: 0 0 7px; }

.pp .hz-limits-list p { margin: 0; font-size: 0.92rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

/* ─────────────────────── CTA ─────────────────────── */

.pp .hz-cta { background: var(--ow-ink); color: white; position: relative; overflow: hidden; padding: 104px 0; }

.pp .hz-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(880px 480px at 50% 110%, rgba(124,58,237,0.28), transparent 60%); pointer-events: none; }

.pp .hz-cta-inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }

.pp .hz-cta h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.07; letter-spacing: -0.02em; color: white; margin: 18px 0; text-wrap: balance; }

.pp .hz-cta h2 em { font-style: italic; color: var(--hz-lilac); }

.pp .hz-cta .lp-eyebrow { color: var(--hz-lilac); }

.pp .hz-cta p { font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .hz-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pp .hz-cta .micro { margin-top: 22px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.pp .hz-cta-aside { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 44px; }

.pp .hz-cta-aside .q { font-family: var(--ow-serif); font-style: italic; font-weight: 500; font-size: 1.38rem; line-height: 1.34; letter-spacing: -0.01em; color: white; margin: 0; text-wrap: pretty; }

.pp .hz-cta-aside .hand { display: block; margin-top: 16px; font-family: var(--hz-hand); font-size: 1.25rem; color: var(--hz-lilac); }

.pp .hz-cta-agenda { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 12px; }

.pp .hz-cta-agenda li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.72); }

.pp .hz-cta-agenda li .material-symbols-outlined { font-size: 1.05rem; color: var(--hz-lilac); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 1180px) {
  .pp .hz-nav .lp-nav-links,
  .pp .hz-nav-tag { display: none; }
  .pp .hz-hero-inner { grid-template-columns: 1fr; gap: 48px; padding-top: 128px; padding-bottom: 76px; }
  /* Once stacked, both rows share one track, so the widest of them — the record
     sheet — would otherwise set the width for the copy above it as well. */
  .pp .hz-hero-inner > *,
  .pp .hz-flow-grid > * { min-width: 0; }
  .pp .hz-flow-grid { grid-template-columns: 1fr; gap: 44px; }
  .pp .hz-flow-doc { position: static; }
  .pp .hz-move-grid { grid-template-columns: 1fr 1fr; }
  .pp .hz-priv-grid { grid-template-columns: 1fr 1fr; }
  .pp .hz-limits-card { grid-template-columns: 1fr; gap: 32px; }
  .pp .hz-cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .pp .hz-cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 32px; }
}

@media (max-width: 900px) {
  .pp .hz-rail { grid-template-columns: 1fr 1fr; }
  .pp .hz-rail li:nth-child(3) { border-left: 0; }
  .pp .hz-rail li:nth-child(n+3) { border-top: 1px solid var(--ow-line); }
  .pp .hz-shield-body { grid-template-columns: 1fr; gap: 20px; }
  .pp .hz-shield-second { grid-template-columns: 1fr; gap: 30px; }
  .pp .hz-models-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pp .hz-prob-grid { grid-template-columns: 1fr; }
  .pp .hz-move-grid { grid-template-columns: 1fr; }
  /* Two step labels no longer fit side by side on a phone. */
  .pp .hz-rail { grid-template-columns: 1fr; }
  .pp .hz-rail li { border-left: 0; border-top: 1px solid var(--ow-line); }
  .pp .hz-rail li:first-child { border-top: 0; }
  .pp .hz-rail button { flex-direction: row; align-items: baseline; gap: 14px; padding: 14px 4px; }
  .pp .hz-priv-grid { grid-template-columns: 1fr; }
  .pp .hz-doc { padding: 18px 16px; }
  .pp .hz-doc .d-head { flex-wrap: wrap; }
  .pp .hz-doc .d-state { margin-left: 0; }
  .pp .hz-doc .d-rowhead,
  .pp .hz-doc .d-row { grid-template-columns: 28px 1fr 78px; }
  .pp .hz-doc .d-rowhead span:last-child,
  .pp .hz-doc .d-row .r-v { display: none; }
  .pp .hz-doc .s-sigs { grid-template-columns: 1fr; }
  .pp .hz-doc .rest-list > div { flex-direction: column; gap: 3px; align-items: flex-start; }
  .pp .hz-doc .rest-list dd { margin-left: 0; text-align: left; }
  .pp .hz-model { padding: 26px 24px 24px; }
  .pp .hz-tiers { grid-template-columns: 1fr; }
  .pp .hz-cta { padding: 76px 0; }
  .pp .hz-shield .ss-card { grid-template-columns: 1fr; }
  .pp .hz-shield .ss-ico { grid-row: auto; }
  .pp .hz-shield .ss-card p { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pp .hz-doc .d-row.fresh { animation: none; }
  .pp .hz-rail button { transition: none !important; }
}

/* =========================================================================
   OWNAMIC — Partner-Landingpage: Fachhändler
   Erbt Farbwelt und Typografie aus dem Landing-Block oben.
   Signatur: die Objektbiografie — Werkstattbuch-Anmutung, nach unten offen,
   mit dem Objektcode als geprägter Platte statt als scannbarem QR.

   Wie bei den anderen Partnerseiten sind die unpräfixierten Primitive des
   Design-Bundles (.shell/.btn/.nav/.section/.eyebrow) auf die `lp-`-Klassen
   umgeschrieben statt dupliziert. Die Biografie-Innenklassen des Bundles
   (.bio-*, .e-*, .o-*, .mo-*) sind unverändert übernommen, hängen hier aber
   an `.pp`, damit sie nicht in den Rest der App streuen.
   ========================================================================= */

.pp {
  --fh-violet: #6d28d9;
  --fh-deep:   #4c1d95;
  --fh-lilac:  #b4a0fb;
  --fh-wash:   #f6f3ff;
  --fh-line:   #ddd4f6;
  --fh-mono-font: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  /* Caveat is already linked in the hosts' <head> for the signature lines. */
  --fh-hand:   "Caveat", "Bradley Hand", cursive;
}

.pp .lp-btn.fh-btn-violet { background: var(--fh-violet); color: white; border: 1px solid var(--fh-violet); }

.pp .lp-btn.fh-btn-violet:hover { background: var(--fh-deep); border-color: var(--fh-deep); transform: translateY(-2px); }

/* The shared section head is champagne by default; every band of this page
   carries the violet accent instead. */
.pp .fh-problem .lp-eyebrow,
.pp .fh-flow .lp-eyebrow,
.pp .fh-code .lp-eyebrow,
.pp .fh-benefit .lp-eyebrow,
.pp .fh-models .lp-eyebrow,
.pp .fh-limits .lp-eyebrow { color: var(--fh-violet); }

.pp .fh-problem .lp-section-head h2 em,
.pp .fh-flow .lp-section-head h2 em,
.pp .fh-code .lp-section-head h2 em,
.pp .fh-benefit .lp-section-head h2 em,
.pp .fh-models .lp-section-head h2 em { color: var(--fh-violet); }

/* ─────────────────────── NAV ─────────────────────── */

.pp .fh-nav { padding: 22px 0; }

.pp .fh-nav .lp-nav-links a { color: rgba(255,255,255,0.72); }

.pp .fh-nav .lp-nav-links a:hover { color: white; }

.pp .fh-nav .lp-nav-cta .lp-btn { white-space: nowrap; flex-shrink: 0; }

.pp .fh-nav-tag { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--fh-lilac); border: 1px solid rgba(180,160,251,0.45); border-radius: 999px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

/* ─────────────────────── HERO ─────────────────────── */

.pp .fh-hero { position: relative; overflow: hidden; color: white; background: radial-gradient(900px 520px at 78% -10%, rgba(109,40,217,0.32), transparent 62%), radial-gradient(760px 600px at 2% 96%, rgba(76,29,149,0.26), transparent 58%), linear-gradient(180deg, #0a0a1c 0%, #0b1020 62%, #0b1020 100%); }

.pp .fh-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 46px); mask-image: radial-gradient(ellipse at 58% 42%, black 22%, transparent 76%); pointer-events: none; }

.pp .fh-hero-inner { position: relative; display: grid; grid-template-columns: 1fr 0.94fr; gap: 60px; align-items: start; padding-top: 146px; padding-bottom: 84px; }

.pp .fh-hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; background: rgba(180,160,251,0.12); border: 1px solid rgba(180,160,251,0.36); color: var(--fh-lilac); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 999px; margin-bottom: 26px; }

.pp .fh-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fh-lilac); box-shadow: 0 0 11px var(--fh-lilac); }

.pp .fh-hero h1 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2.2rem, 4.3vw, 3.7rem); line-height: 1.05; letter-spacing: -0.02em; color: white; margin: 0 0 20px; text-wrap: balance; }

.pp .fh-hero h1 em { font-style: italic; color: var(--fh-lilac); font-weight: 400; }

.pp .fh-thesis { font-family: var(--ow-serif); font-style: italic; font-size: 1.18rem; line-height: 1.42; color: rgba(255,255,255,0.66); margin: 0 0 24px; max-width: 27em; text-wrap: pretty; }

.pp .fh-relief { display: flex; gap: 13px; align-items: flex-start; padding: 18px 20px; border: 1px solid rgba(180,160,251,0.3); border-left: 3px solid var(--fh-lilac); border-radius: 4px 14px 14px 4px; background: rgba(180,160,251,0.08); margin-bottom: 24px; }

.pp .fh-relief .material-symbols-outlined { font-size: 1.2rem; color: var(--fh-lilac); flex-shrink: 0; margin-top: 2px; }

.pp .fh-relief p { margin: 0; font-size: 0.96rem; line-height: 1.6; color: rgba(255,255,255,0.84); text-wrap: pretty; }

.pp .fh-relief b { color: white; font-weight: 700; }

/* The wordmark opens the sentence, so it has to sit on the running text's
   baseline rather than on the lockup's own larger one. */
.pp .fh-relief .ownamic-text-span { font-size: inherit; line-height: inherit; color: white; }

.pp .fh-lede { font-size: 1.04rem; line-height: 1.68; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 30px; text-wrap: pretty; }

.pp .fh-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.pp .fh-hero-trust { display: flex; flex-wrap: wrap; gap: 13px 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.10); }

.pp .fh-hero-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.74); }

.pp .fh-hero-trust .material-symbols-outlined { font-size: 1.1rem; color: var(--fh-lilac); }

/* Branchen-Umschalter */

.pp .fh-switch { position: relative; border-top: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.22); }

.pp .fh-switch-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }

.pp .fh-switch .s-l { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.42); }

.pp .fh-switch .s-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.pp .fh-switch button { font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; color: rgba(255,255,255,0.7); background: transparent; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 8px 16px; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }

.pp .fh-switch button:hover { color: white; border-color: rgba(180,160,251,0.5); }

.pp .fh-switch button.on { background: var(--fh-lilac); border-color: var(--fh-lilac); color: #17102e; }

/* `.pp`'s champagne focus ring all but vanishes against the switch's near-black
   band, and the switch is the one control on the page. */
.pp .fh-switch button:focus-visible { outline-color: var(--fh-lilac); }

/* ───────────── SIGNATUR: OBJEKTBIOGRAFIE ───────────── */

.pp .fh-bio { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 18px; padding: 22px 24px 20px; color: var(--ow-ink); box-shadow: 0 40px 90px rgba(0,0,0,0.42); }

.pp .fh-flow-bio .fh-bio { box-shadow: 0 24px 60px rgba(11,16,32,0.10); }

.pp .fh-bio .bio-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--ow-ink); }

.pp .fh-bio .bio-k { font-family: var(--ow-serif); font-weight: 500; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }

.pp .fh-bio .bio-own { display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--fh-deep); background: var(--fh-wash); border: 1px solid var(--fh-line); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }

.pp .fh-bio .bio-own .material-symbols-outlined { font-size: 0.9rem; }

.pp .fh-bio .bio-list { list-style: none; margin: 0; padding: 0; }

.pp .fh-bio .bio-list li { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 18px 0; }

.pp .fh-bio .bio-list li::before { content: ""; position: absolute; left: 12px; top: 0; bottom: -1px; width: 1px; background: var(--fh-line); }

.pp .fh-bio .bio-list li:first-child::before { top: 18px; }

.pp .fh-bio .e-node { position: relative; z-index: 1; width: 11px; height: 11px; margin: 6px 0 0 7px; border-radius: 50%; background: var(--ow-paper); border: 2px solid var(--fh-line); }

.pp .fh-bio .bio-list li.mine .e-node { background: var(--fh-violet); border-color: var(--fh-violet); box-shadow: 0 0 0 4px var(--fh-wash); }

/* The entry body shares the row with the 26px rail, so it has to be allowed to
   shrink — otherwise a long title widens the whole card past its column. */
.pp .fh-bio .e-body { min-width: 0; }

.pp .fh-bio .e-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

.pp .fh-bio .e-y { font-family: var(--fh-mono-font); font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--own-fg-3); }

.pp .fh-bio .e-k { font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; color: var(--fh-violet); }

.pp .fh-bio .e-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: white; background: var(--fh-violet); border-radius: 999px; padding: 4px 9px; }

.pp .fh-bio .e-badge .material-symbols-outlined { font-size: 0.85rem; }

.pp .fh-bio .e-t { font-size: 0.98rem; font-weight: 700; color: var(--ow-ink); line-height: 1.3; text-wrap: pretty; }

.pp .fh-bio .e-d { margin: 5px 0 0; font-size: 0.87rem; line-height: 1.55; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-bio .e-scan { display: flex; gap: 8px; align-items: center; margin-top: 9px; padding: 8px 11px; border-radius: 9px; background: var(--fh-wash); border: 1px solid var(--fh-line); font-size: 0.76rem; line-height: 1.4; font-weight: 600; color: var(--fh-deep); }

.pp .fh-bio .e-scan .material-symbols-outlined { font-size: 1rem; color: var(--fh-violet); flex-shrink: 0; }

.pp .fh-bio .e-claim { display: flex; gap: 8px; align-items: center; margin-top: 9px; padding: 8px 11px; border: 1px dashed var(--fh-line); border-radius: 9px; font-size: 0.76rem; line-height: 1.4; color: var(--own-fg-2); background: var(--ow-cream); }

.pp .fh-bio .e-claim .material-symbols-outlined { font-size: 1rem; color: var(--fh-violet); flex-shrink: 0; }

.pp .fh-bio .e-by { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--ow-line); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.pp .fh-bio .e-by .hand { font-family: var(--fh-hand); font-size: 1.4rem; line-height: 1; color: var(--fh-deep); }

.pp .fh-bio .e-by .firm { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--own-fg-3); }

/* Nach unten offen: die Biografie endet nicht, sie hört nur hier auf. */

.pp .fh-bio .bio-open { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--fh-line); }

.pp .fh-bio .open-row { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: center; padding: 7px 0; }

.pp .fh-bio .o-node { width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; border: 1px dashed var(--own-fg-3); }

.pp .fh-bio .o-t { font-size: 0.84rem; font-weight: 600; color: var(--own-fg-3); }

.pp .fh-bio .open-note { margin-top: 10px; padding-left: 40px; font-family: var(--ow-serif); font-style: italic; font-size: 0.98rem; line-height: 1.4; color: var(--fh-deep); }

/* Objektcode als Motiv: geprägte Platte, kein technisches Artefakt */

.pp .fh-plate { position: relative; width: 92px; flex-shrink: 0; aspect-ratio: 1; border-radius: 16px; background: linear-gradient(150deg, #efeafc 0%, #ded4f8 52%, #cfc2f2 100%); border: 1px solid var(--fh-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 3px rgba(76,29,149,0.16), 0 1px 2px rgba(76,29,149,0.10); display: grid; place-items: center; overflow: hidden; }

.pp .fh-plate .pl-grid { position: absolute; inset: 13px 13px 30px; background-image: radial-gradient(circle at 1.6px 1.6px, rgba(76,29,149,0.34) 1.4px, transparent 1.5px); background-size: 9px 9px; opacity: 0.72; mix-blend-mode: multiply; }

.pp .fh-plate .pl-code { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; white-space: nowrap; font-family: var(--fh-mono-font); font-size: 0.5rem; line-height: 1; letter-spacing: 0.02em; color: var(--fh-deep); opacity: 0.75; }

.pp .fh-plate.small { width: 118px; border-radius: 18px; }

.pp .fh-plate.small .pl-grid { inset: 16px 16px 34px; }

.pp .fh-plate.small .pl-code { font-size: 0.6rem; bottom: 12px; }

.pp .fh-bio .bio-anchor { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px dashed var(--fh-line); }

.pp .fh-bio .bio-anchor .an-k { display: block; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--fh-violet); margin-bottom: 6px; }

.pp .fh-bio .bio-anchor .an-t { display: block; font-family: var(--ow-serif); font-size: 1.02rem; line-height: 1.35; color: var(--ow-ink); text-wrap: pretty; }

/* ─────────────────────── PROBLEM ─────────────────────── */

.pp .fh-problem { background: var(--fh-wash); border-bottom: 1px solid var(--fh-line); }

.pp .fh-prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.pp .fh-prob-grid.three { grid-template-columns: repeat(3, 1fr); }

.pp .fh-prob { background: var(--ow-paper); border: 1px solid var(--fh-line); border-radius: 16px; padding: 26px 28px 24px; }

.pp .fh-prob .p-n { font-family: var(--fh-mono-font); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--fh-violet); }

.pp .fh-prob h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.34rem; line-height: 1.16; letter-spacing: -0.015em; color: var(--ow-ink); margin: 12px 0 10px; text-wrap: pretty; }

.pp .fh-prob p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

/* Nur die Mineralien-Variante: der eigene Eintragstyp für die Herkunftserzählung. */

.pp .fh-extra { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; margin-top: 20px; padding: 32px 34px; background: var(--ow-ink); border-radius: 20px; }

.pp .fh-extra .x-k { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--fh-lilac); }

.pp .fh-extra h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.62rem; line-height: 1.14; letter-spacing: -0.015em; color: white; margin: 12px 0 0; text-wrap: balance; }

.pp .fh-extra p { margin: 0; font-size: 0.98rem; line-height: 1.68; color: rgba(255,255,255,0.76); text-wrap: pretty; }

.pp .fh-extra .x-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); color: var(--fh-lilac); font-size: 0.92rem; }

.pp .fh-extra .x-note .material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }

/* ─────────────────────── ABLAUF ─────────────────────── */

.pp .fh-flow { background: var(--ow-paper); }

.pp .fh-flow-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: start; }

.pp .fh-steps { list-style: none; margin: 0; padding: 0; }

.pp .fh-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--ow-line); }

.pp .fh-steps li:first-child { border-top: 0; padding-top: 0; }

.pp .fh-steps .s-n { font-family: var(--fh-mono-font); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--own-fg-3); padding-top: 4px; }

.pp .fh-steps h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.32rem; line-height: 1.18; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 8px; text-wrap: pretty; }

.pp .fh-steps p { margin: 0; font-size: 0.95rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

/* Schritt vier trägt das Argument der Seite und ist deshalb schwerer gesetzt. */

.pp .fh-steps li.heavy { background: var(--fh-wash); border: 1px solid var(--fh-line); border-radius: 18px; padding: 26px 28px; margin-top: 12px; }

.pp .fh-steps li.heavy .s-n { color: var(--fh-violet); }

.pp .fh-steps li.heavy h3 { font-size: 1.5rem; }

.pp .fh-steps li.heavy p { color: var(--own-fg-1); }

.pp .fh-steps .s-why { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fh-line); font-size: 0.9rem; line-height: 1.5; font-weight: 600; color: var(--fh-deep); text-wrap: pretty; }

.pp .fh-steps .s-why .material-symbols-outlined { font-size: 1.05rem; color: var(--fh-violet); flex-shrink: 0; margin-top: 1px; }

.pp .fh-flow-bio { position: sticky; top: 32px; }

/* ─────────────────────── OBJEKTCODE ─────────────────────── */

.pp .fh-code { background: var(--ow-cream); border-top: 1px solid var(--ow-line); }

.pp .fh-code-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.pp .fh-fact { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 24px 24px 22px; }

.pp .fh-fact .f-i { width: 40px; height: 40px; border-radius: 11px; background: var(--fh-wash); border: 1px solid var(--fh-line); display: grid; place-items: center; color: var(--fh-violet); margin-bottom: 16px; }

.pp .fh-fact h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.22rem; line-height: 1.16; letter-spacing: -0.01em; color: var(--ow-ink); margin: 0 0 9px; text-wrap: pretty; }

.pp .fh-fact p { margin: 0; font-size: 0.88rem; line-height: 1.58; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-mount { display: grid; grid-template-columns: 158px 1fr; gap: 32px; align-items: center; margin-top: 20px; padding: 30px 34px; background: var(--ow-paper); border: 1px solid var(--fh-line); border-radius: 20px; }

.pp .fh-mount .mo-plate { display: grid; place-items: center; }

.pp .fh-mount .mo-k { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--fh-violet); margin-bottom: 14px; }

.pp .fh-mount .mo-forms { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }

.pp .fh-mount .mo-forms li { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 600; color: var(--ow-ink); background: var(--fh-wash); border: 1px solid var(--fh-line); border-radius: 999px; padding: 8px 14px; }

.pp .fh-mount .mo-forms .material-symbols-outlined { font-size: 1rem; color: var(--fh-violet); }

.pp .fh-mount .mo-rare,
.pp .fh-mount .mo-ex,
.pp .fh-mount .mo-calm { margin: 0; font-size: 0.9rem; line-height: 1.58; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-mount .mo-ex,
.pp .fh-mount .mo-calm { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; }

.pp .fh-mount .mo-ex .material-symbols-outlined,
.pp .fh-mount .mo-calm .material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }

.pp .fh-mount .mo-ex { color: var(--own-fg-1); }

.pp .fh-mount .mo-ex .material-symbols-outlined { color: var(--own-fg-3); }

.pp .fh-mount .mo-calm { padding-top: 12px; border-top: 1px solid var(--ow-line); color: var(--fh-deep); font-weight: 600; }

.pp .fh-mount .mo-calm .material-symbols-outlined { color: var(--fh-violet); }

.pp .fh-code-limit { display: flex; gap: 13px; align-items: flex-start; margin: 20px 0 0; padding: 20px 24px; background: var(--fh-wash); border: 1px solid var(--fh-line); border-radius: 14px; font-size: 0.86rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-code-limit .material-symbols-outlined { font-size: 1.1rem; color: var(--fh-violet); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── NUTZEN ─────────────────────── */

.pp .fh-benefit { background: var(--ow-cream); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }

.pp .fh-ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.pp .fh-ben { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 28px 28px 26px; }

.pp .fh-ben .b-i { width: 44px; height: 44px; border-radius: 12px; background: var(--fh-wash); border: 1px solid var(--fh-line); display: grid; place-items: center; color: var(--fh-violet); margin-bottom: 18px; }

.pp .fh-ben h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.36rem; line-height: 1.16; letter-spacing: -0.015em; color: var(--ow-ink); margin: 0 0 10px; text-wrap: pretty; }

.pp .fh-ben p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

/* ─────────────────────── KONTROLLE ─────────────────────── */

.pp .fh-control { background: var(--ow-ink); color: white; position: relative; overflow: hidden; }

.pp .fh-control::before { content: ""; position: absolute; inset: 0; background: radial-gradient(820px 480px at 12% 8%, rgba(109,40,217,0.28), transparent 62%); pointer-events: none; }

.pp .fh-control .lp-shell { position: relative; }

.pp .fh-control .lp-eyebrow { color: var(--fh-lilac); }

.pp .fh-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

.pp .fh-control h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; color: white; margin: 18px 0 22px; text-wrap: balance; }

.pp .fh-control h2 em { font-style: italic; color: var(--fh-lilac); }

.pp .fh-control-lede { margin: 0; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,0.74); text-wrap: pretty; }

.pp .fh-control-foot { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.86rem; font-weight: 600; color: var(--fh-lilac); }

.pp .fh-perm { list-style: none; margin: 0; padding: 0; }

.pp .fh-perm li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.12); }

.pp .fh-perm li:first-child { border-top: 0; padding-top: 0; }

.pp .fh-perm .material-symbols-outlined { font-size: 1.25rem; }

.pp .fh-perm li.yes .material-symbols-outlined { color: #6ee7b7; }

.pp .fh-perm li.no .material-symbols-outlined { color: rgba(255,255,255,0.35); }

.pp .fh-perm .p-t { display: block; font-size: 1rem; font-weight: 700; color: white; }

.pp .fh-perm li.no .p-t { color: rgba(255,255,255,0.6); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.28); }

.pp .fh-perm .p-d { display: block; margin-top: 5px; font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.62); text-wrap: pretty; }

/* ─────────────────────── MODELLE ─────────────────────── */

.pp .fh-models { background: var(--ow-paper); }

.pp .fh-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pp .fh-model { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 20px; padding: 34px 34px 30px; display: flex; flex-direction: column; }

.pp .fh-model .m-k { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--fh-violet); }

.pp .fh-model h3 { font-family: var(--ow-serif); font-weight: 500; font-size: 1.66rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--ow-ink); margin: 10px 0 12px; text-wrap: balance; }

.pp .fh-model > p { margin: 0 0 20px; font-size: 0.96rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-fig { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 18px 20px; background: var(--fh-wash); border: 1px solid var(--fh-line); border-radius: 14px; margin-bottom: 20px; }

.pp .fh-fig .f-v { font-family: var(--ow-serif); font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--fh-violet); }

.pp .fh-fig .f-v .pre { display: block; font-family: var(--own-font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; }

.pp .fh-fig .f-t { flex: 1; min-width: 12em; font-size: 0.9rem; line-height: 1.5; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-fig .f-t b { color: var(--ow-ink); font-weight: 700; }

.pp .fh-model dl { margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--ow-line); display: flex; flex-direction: column; gap: 13px; flex: 1; }

.pp .fh-model dt { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--own-fg-3); margin-bottom: 4px; }

.pp .fh-model dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--own-fg-1); }

.pp .fh-model .lp-btn { width: 100%; justify-content: center; }

.pp .fh-models-fine { margin-top: 22px; display: flex; gap: 13px; align-items: flex-start; padding: 20px 24px; background: var(--fh-wash); border: 1px solid var(--fh-line); border-radius: 14px; font-size: 0.84rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-models-fine .material-symbols-outlined { font-size: 1.1rem; color: var(--fh-violet); flex-shrink: 0; margin-top: 1px; }

/* The only link in the page's body copy; it takes the page's accent, as the
   bundle's global link colour does, rather than `.pp`'s champagne default. */
.pp .fh-models-fine a { color: var(--fh-violet); }

.pp .fh-models-fine a:hover { color: var(--fh-deep); }

/* ─────────────────────── ABGRENZUNG ─────────────────────── */

.pp .fh-limits { background: var(--fh-wash); border-top: 1px solid var(--fh-line); }

.pp .fh-limits-card { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; }

.pp .fh-limits-card h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ow-ink); margin: 14px 0 0; text-wrap: balance; }

.pp .fh-limits-card h2 em { font-style: italic; color: var(--fh-violet); }

.pp .fh-limits-lede { margin: 16px 0 0; font-size: 0.96rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

.pp .fh-limits-list { list-style: none; margin: 0; padding: 0; }

.pp .fh-limits-list li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--fh-line); }

.pp .fh-limits-list li:first-child { border-top: 0; padding-top: 0; }

.pp .fh-limits-list .l-n { font-family: var(--fh-mono-font); font-size: 0.76rem; letter-spacing: 0.1em; color: var(--fh-violet); padding-top: 3px; }

.pp .fh-limits-list h4 { font-size: 0.98rem; font-weight: 700; color: var(--ow-ink); margin: 0 0 7px; }

.pp .fh-limits-list p { margin: 0; font-size: 0.92rem; line-height: 1.62; color: var(--own-fg-2); text-wrap: pretty; }

/* ─────────────────────── CTA ─────────────────────── */

.pp .fh-cta { background: var(--ow-ink); color: white; position: relative; overflow: hidden; padding: 100px 0; }

.pp .fh-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(860px 460px at 50% 112%, rgba(109,40,217,0.3), transparent 60%); pointer-events: none; }

.pp .fh-cta-inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }

.pp .fh-cta .lp-eyebrow { color: var(--fh-lilac); }

.pp .fh-cta h2 { font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.07; letter-spacing: -0.02em; color: white; margin: 18px 0; text-wrap: balance; }

.pp .fh-cta h2 em { font-style: italic; color: var(--fh-lilac); }

.pp .fh-cta p { font-size: 1.04rem; line-height: 1.65; color: rgba(255,255,255,0.74); max-width: 34em; margin: 0 0 28px; text-wrap: pretty; }

.pp .fh-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pp .fh-cta .micro { margin-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.pp .fh-cta-aside { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 44px; }

.pp .fh-cta-aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.pp .fh-cta-aside li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.74); }

.pp .fh-cta-aside .material-symbols-outlined { font-size: 1.08rem; color: var(--fh-lilac); flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 1180px) {
  .pp .fh-nav .lp-nav-links,
  .pp .fh-nav-tag { display: none; }
  .pp .fh-hero-inner { grid-template-columns: 1fr; gap: 46px; padding-top: 126px; padding-bottom: 72px; }
  /* Once stacked, both rows share one track, so the widest of them — the
     biography card — would otherwise set the width for the copy above it. */
  .pp .fh-hero-inner > *,
  .pp .fh-flow-grid > * { min-width: 0; }
  .pp .fh-flow-grid { grid-template-columns: 1fr; gap: 44px; }
  .pp .fh-flow-bio { position: static; }
  .pp .fh-prob-grid.three { grid-template-columns: 1fr 1fr; }
  .pp .fh-ben-grid { grid-template-columns: 1fr; }
  .pp .fh-code-grid { grid-template-columns: 1fr 1fr; }
  .pp .fh-control-grid { grid-template-columns: 1fr; gap: 36px; }
  .pp .fh-extra { grid-template-columns: 1fr; gap: 22px; }
  .pp .fh-limits-card { grid-template-columns: 1fr; gap: 32px; }
  .pp .fh-cta-inner { grid-template-columns: 1fr; gap: 38px; }
  .pp .fh-cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 30px; }
}

@media (max-width: 860px) {
  .pp .fh-models-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pp .fh-prob-grid,
  .pp .fh-prob-grid.three { grid-template-columns: 1fr; }
  .pp .fh-bio { padding: 18px 16px; }
  .pp .fh-extra { padding: 26px 22px; }
  .pp .fh-steps li.heavy { padding: 22px 20px; }
  .pp .fh-model { padding: 26px 24px 24px; }
  /* `.lp-btn` is nowrap and the card's button is full width, so the card's
     min-content is the button's label — wider than a phone's single column,
     which pushed the whole grid past the shell. Same remedy as the nav CTA. */
  .pp .fh-models-grid > * { min-width: 0; }
  .pp .fh-model .lp-btn { white-space: normal; line-height: 1.25; }
  .pp .fh-code-grid { grid-template-columns: 1fr; }
  .pp .fh-mount { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .pp .fh-bio .bio-anchor { gap: 14px; }
  .pp .fh-cta { padding: 74px 0; }
  .pp .fh-bio .open-note { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pp .fh-switch button,
  .pp .lp-btn.fh-btn-violet { transition: none !important; }
  .pp .lp-btn.fh-btn-violet:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER NAV — the CTA stays inside the shell

   The partner nav carries more than the home page's: the wordmark with a
   "Partner" pill, the section links, the language selector and a call to
   action whose label is a sentence ("Gesprächstermin vereinbaren"), not a
   word. Every page pins that button to `white-space: nowrap; flex-shrink: 0`,
   and `.lp-nav-inner` is a nowrap flex row, so when the row runs out of width
   the surplus does not wrap — it hangs off the right edge, where each hero's
   `overflow: hidden` cuts it off. The button was unreachable in two bands: on
   a laptop window between 1100px (where the links are hidden) and roughly the
   1240px shell, and on a phone, where wordmark plus a ~200px unbreakable
   button is already wider than the viewport.

   The row may therefore wrap. Nothing changes while everything fits; once it
   does not, the call to action moves onto a line of its own instead of past
   the edge. On a phone it also gives up `nowrap`, so the label breaks over two
   lines rather than forcing the row to wrap at all.
   ═══════════════════════════════════════════════════════════════════════════ */

.pp .lp-nav-inner { flex-wrap: wrap; row-gap: 10px; }

/* A flex item does not shrink below its content unless told to, which is what
   kept the link row at its full width while the button was pushed out. */
.pp .lp-nav-links { min-width: 0; flex-wrap: wrap; row-gap: 6px; }

/* The shared wordmark grows with the viewport (clamp to 3.5rem), which the home
   nav can afford — no pill, one-word button. Here brand + pill + links + selector
   + sentence-length button never fit beside a 2.5vw lockup, so the CTA wrapped on
   every desktop width. A fixed lockup keeps the partner nav on one line wherever
   the links are shown; the ≤720px rules below take it down another step. */
.pp .lp-nav-brand .lp-mark-logo { height: 2rem; }
.pp .lp-nav-brand .hero-logo-text-span { font-size: 1.6rem; margin: 0; line-height: 1.15; }

/* If the row still runs out (a laptop window just above the 1100px link cut),
   the wrapped selector-plus-button line belongs under the right edge it came
   from — `space-between` alone would park a lone item flush left, under the
   logo and on top of the hero's eyebrow. */
.pp .lp-nav-cta { margin-left: auto; }

@media (max-width: 720px) {
  .pp .lp-nav-inner { gap: 12px; }
  /* Same class names as the per-page rules these override — a media query
     adds no specificity, so the selectors have to match them to win on order. */
  .pp .ph-nav .lp-nav-cta .lp-btn,
  .pp .pa-nav .lp-nav-cta .lp-btn,
  .pp .oc-nav .lp-nav-cta .lp-btn,
  .pp .nl-nav .lp-nav-cta .lp-btn,
  .pp .au-nav .lp-nav-cta .lp-btn,
  .pp .hz-nav .lp-nav-cta .lp-btn,
  .pp .fh-nav .lp-nav-cta .lp-btn {
    white-space: normal;
    flex-shrink: 1;
    min-width: 0;
    text-align: center;
    line-height: 1.25;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
}

/* ── The nav has to stay as tall as the hero reserves for it ──
   Every partner nav is `position: absolute` over its hero, and every hero pays
   for it with a fixed `padding-top` on its inner grid (126–128px on a phone).
   The nav's height is therefore not free: whatever it costs beyond that padding
   lands on top of the hero's eyebrow.

   On a phone it cost far more. The shared wordmark's clamp bottoms out at 2rem
   with 10px of margin above and below, so "OWNAMIC" alone is ~200px wide and
   ~57px tall — on a 390px screen that is the whole first row, which pushed the
   call to action onto a second and (via the home nav's `flex-basis: 100%` on
   the language selector) the selector onto a third. Three rows measured ~185px
   against the 126px the hero had reserved, and the selector came to rest on the
   eyebrow, which is what the Fachhandel page showed.

   Two measures fix it and both are needed. The lockup is set at the size the
   sticky bar already uses for it on a light plate, which frees the row; and the
   selector goes back beside the button instead of below it, so the nav is two
   short rows — brand, then selector plus button — well inside the padding. */
@media (max-width: 720px) {
  .pp .lp-nav { padding: 16px 0; }
  .pp .lp-nav-brand .lp-mark-logo { height: 1.75rem; }
  .pp .lp-nav-brand .hero-logo-text-span { font-size: 1.35rem; margin: 0; line-height: 1.15; }
  /* Beats `.lp .lp-nav-cta .lang-select` on order — same specificity, later. */
  .pp .lp-nav-cta { flex-wrap: nowrap; }
  .pp .lp-nav-cta .lang-select { order: 0; flex-basis: auto; }
}

/* Narrow enough and the two do not fit side by side either: the brand keeps the
   first row, the selector and the button take a second, and the button's label
   breaks over two or three lines as the screen narrows — 105 to 125px of nav
   against the 126–128px the heroes reserve. That is not clearance, it is a
   coincidence, so the heroes reserve more from here down. The breakpoint sits
   above the width where the row actually breaks (~515px with the German label,
   the longer of the two) so a longer translation moves the break without moving
   it past this rule. */
@media (max-width: 560px) {
  .pp .ph-hero-inner,
  .pp .pa-hero-inner,
  .pp .oc-hero-inner,
  .pp .nl-hero-inner,
  .pp .au-hero-inner,
  .pp .hz-hero-inner,
  .pp .fh-hero-inner { padding-top: 140px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP HEADER — one centre line

   The header row carries the brand on the left and the status chips on the
   right (on mobile: the AI-credit badge and the plan badge). Each side used to
   settle where its own box happened to fall: the Radzen columns are only as
   tall as their content, so the shorter right-hand stack sat against the top
   edge of the row while the wordmark — pushed down by the top paddings the
   header has carried since the desktop-only days — sat well below it, leaving
   the two badges visibly high of the OWNAMIC lockup.

   Both columns now stretch to the row's height and centre their contents in
   it, and the ad-hoc top paddings are dropped, so the toggle, the wordmark and
   the badges are all measured from the same centre line rather than from three
   different ones.
   ═══════════════════════════════════════════════════════════════════════════ */

#guida-header .own-header-row {
    align-items: stretch;
}

#guida-header .own-header-col {
    display: flex;
    align-items: center;
}

#guida-header .own-header-brand,
#guida-header .own-header-actions {
    width: 100%;
    /* Fill the stretched column so the stack's own AlignItems="Center" has the
       full row height to centre against instead of just its own content box. */
    min-height: 100%;
}

/* The wordmark carries a top padding of its own for the places it is set on a
   line of its own (the home page hero, the account pages); inside the header it
   would only tilt the brand below the line the toggle and the chips sit on. The
   matching nudges on the toggle and its anchor are gone from the markup. */
#guida-header .own-header-brand .ownamic-logo-text {
    padding-top: 0;
}

#guida-header .own-header-brand a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Account pages and the file selector carry no sidebar toggle ahead of the brand, and the toggle
   is what gives the lockup its breathing room on every other page — without it the compass mark
   sits flush against the edge of the viewport. */
#guida-header .own-header-brand .own-brand-link--standalone {
    padding-inline-start: 0.75rem;
}

/* The compass mark ahead of the wordmark. It is tied to the wordmark's own size
   rather than given a fixed pixel height, so the two step down together through
   the phone breakpoints below and the lockup keeps its proportions. `flex-shrink`
   is off because the brand is the part of the header that gives way when the row
   runs out of room — the wordmark is allowed to be clipped there, the mark is not
   allowed to be squashed. */
#guida-header .own-header-brand .ownamic-logo-mark {
    height: 2rem;
    width: auto;
    flex-shrink: 0;
    display: block;
}

/* ───────────────────────────────────────────────────────────────────────────
   Which action set the header carries is decided by CSS, not by the media-query
   component.

   `RadzenMediaQuery` can only report once JS interop is up, so during the
   prerender and the first interactive render the layout does not yet know how
   wide the viewport is. It used to fall back to the desktop set, which is why a
   phone showed the search box and the account menu for a beat before they were
   replaced by the status chips. The layout now emits *both* sets while the width
   is unknown and these rules — which the browser resolves at the first paint —
   show exactly one. As soon as the media query reports, the loser stops being
   rendered at all, so it costs nothing beyond that first pass.
   ─────────────────────────────────────────────────────────────────────────── */
#guida-header .own-header-actions__desktop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

#guida-header .own-header-actions__mobile {
    display: none;
    align-items: center;
    min-width: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Phones: one line, not two.

   The wordmark at its full 1.6rem plus the two status chips at their standalone
   sizes measured wider than a 390 px viewport, so the Radzen row wrapped and the
   brand and the chips each ended up on a line of their own — a header two rows
   deep before the page had said anything. Everything on the line is set a size
   down and the row is told to shrink rather than wrap.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #guida-header .own-header-actions__desktop {
        display: none;
    }

    #guida-header .own-header-actions__mobile {
        display: flex;
        /* Without this the plan badge — the last thing in the cluster — sits flush against the
           screen's right edge; the hamburger toggle on the opposite side carries its own button
           padding, so this is the only side that needs it spelled out. */
        padding-right: 0.75rem;
    }

    #guida-header .own-header-row {
        flex-wrap: nowrap;
    }

    /* The brand gives way first: the chips carry live figures and read badly when
       squeezed, the wordmark only gets narrower. */
    #guida-header .own-header-col {
        flex: 0 1 auto;
        min-width: 0;
    }

    #guida-header .own-header-col:first-child {
        flex: 1 1 auto;
    }

    #guida-header .own-header-brand,
    #guida-header .own-header-actions {
        min-width: 0;
    }

    /* On a viewport too narrow even for these sizes the wordmark is cut off rather
       than allowed to run under the chips. */
    #guida-header .own-header-brand {
        overflow: hidden;
    }

    /* Only the size steps down here — the tracking stays the wordmark's own
       (--own-wordmark-track), so the narrow header carries the same mark as every
       other screen, just smaller. */
    #guida-header .own-header-brand .ownamic-logo-text {
        font-size: 1.3rem;
    }

    #guida-header .own-header-brand .ownamic-logo-mark {
        height: 1.65rem;
    }
}

/* Narrow phones (iPhone SE / Galaxy S-mini class) — one more step down so the
   wordmark still reads whole next to the chips. */
@media (max-width: 360px) {
    #guida-header .own-header-brand .ownamic-logo-text {
        font-size: 1rem;
    }

    #guida-header .own-header-brand .ownamic-logo-mark {
        height: 1.3rem;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Desktop-only floating action buttons (Add + OWNY).

   Same story as the header action sets above: the layout decides who renders
   the Add FAB and the OWNY FAB from `isMobile`, which `RadzenMediaQuery` can
   only report once JS interop is up — so during the prerender and the first
   interactive render `isMobile` is still its default `false` and a phone
   painted both desktop FABs for a beat before the layout dropped them in
   favour of the bottom navigation bar. These rules resolve at the first paint,
   so the FABs never show on a phone at all; once the media query reports, the
   markup is gone and the rules have nothing left to hide.

   The `!important` is there because Radzen's own FAB rules set `display` on
   the same element, and the class cannot outrank them on specificity alone.
   The mobile stand-ins in the bottom navigation bar reuse the FABs' ids
   (#guida-fab-main, #guida-ai-assistant) as tour anchors, which is why this
   hides by class and not by id.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .own-desktop-fab {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Verlaufsliste — shared tokens for OwnHistorySummary / OwnHistoryList.

   Both components carry the class .own-history, and both need the same palette
   and the same money colours, so the tokens live here rather than twice in the
   two scoped stylesheets. Everything else about their layout stays scoped.

   The greens and reds are the vitrine's own muted pair; the Radzen success and
   danger tones are too neon next to the cream palette. The tints have no token
   of their own in the design system yet and are stated as literals.

   These rules are global rather than scoped (.razor.css) on purpose: callers
   supply card details and editable figures as RenderFragments, and those need
   the same ohs- and ohl- classes as the components' own markup.
   ───────────────────────────────────────────────────────────────────────────── */
.own-history {
    --oh-ink: var(--ow-ink, #0b1020);
    --oh-paper: var(--ow-paper, #fff);
    --oh-line: var(--ow-line, #e6e1d7);
    --oh-line-soft: #eee9dd;
    --oh-line-softer: #f2ede2;
    --oh-line-dashed: #ece5d6;
    --oh-tint: #fdfbf6;
    --oh-tint-warm: #fdf8ee;
    --oh-champagne: var(--ow-champagne, #c9a96a);
    --oh-champagne-deep: var(--ow-champagne-deep, #a7864b);
    --oh-fg-2: #6f6a5e;
    --oh-fg-3: #8d8778;
    --oh-fg-4: #a39a88;
    --oh-on-ink: #b8b2a4;
    --oh-on-ink-figure: #e9dcc0;
    --oh-badge-bg: #fdf8ee;
    --oh-badge-fg: #8a6a34;
    --oh-badge-border: #e3d6bb;
    --oh-gain: #4d7c53;
    --oh-loss: #9e4b3c;
    --oh-serif: var(--ow-serif, "Cormorant Garamond", Georgia, serif);
    color: var(--oh-ink);
}

.own-history .is-positive { color: var(--oh-gain); }
.own-history .is-negative { color: var(--oh-loss); }
.own-history .is-muted { color: var(--oh-fg-3); }

/* ── The opening card ─────────────────────────────────────────────────────── */
.own-history-summary {
    background: var(--oh-paper);
    border: 1px solid var(--oh-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(11, 16, 32, 0.04);
    overflow: hidden;
}

.ohs-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ohs-top.is-single {
    grid-template-columns: 1fr;
}

.ohs-cell {
    padding: 16px 14px 15px 16px;
    min-width: 0;
}

/* The right cell sits on a warmer ground so the pair reads as a comparison, not a list. */
.ohs-cell.is-secondary {
    padding: 16px 16px 15px 15px;
    border-left: 1px solid var(--oh-line-soft);
    background: var(--oh-tint);
}

.ohs-cell-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oh-fg-3);
}

.ohs-cell-value {
    font-family: var(--oh-serif);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.05;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    /* A figure broken across two lines stops being one figure; five-digit amounts get a
       smaller size on narrow columns instead (below). */
    white-space: nowrap;
}

.ohs-cell-sub {
    font-size: 0.78rem;
    color: var(--oh-fg-2);
    margin-top: 3px;
}

.ohs-lines {
    border-top: 1px solid var(--oh-line-soft);
    padding: 4px 16px 6px;
}

.ohs-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--oh-line-softer);
}

.ohs-line:last-child {
    border-bottom: none;
}

.ohs-line-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ohs-line-sub {
    font-size: 0.82rem;
    color: var(--oh-fg-2);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.ohs-line-value {
    font-family: var(--oh-serif);
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The closing bar: one figure, on ink, in champagne — the card's last word. */
.ohs-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--oh-ink);
    color: #fff;
}

.ohs-footer .ohs-line-sub {
    color: var(--oh-on-ink);
}

.ohs-footer-value {
    font-family: var(--oh-serif);
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--oh-on-ink-figure);
    white-space: nowrap;
}

/* On a phone the column is half of ~430px; a four-digit amount needs the smaller step. */
@media (max-width: 560px) {
    .ohs-cell-value {
        font-size: 1.7rem;
    }
}

/* Below this the pair no longer fits side by side without breaking the figures. */
@media (max-width: 380px) {
    .ohs-top {
        grid-template-columns: 1fr;
    }

    .ohs-cell.is-secondary {
        border-left: none;
        border-top: 1px solid var(--oh-line-soft);
    }
}

/* ── The list itself ──────────────────────────────────────────────────────── */
.ohl-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 24px 0 10px;
}

.ohl-head-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--oh-champagne-deep);
}

.ohl-sort {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.76rem;
    color: var(--oh-fg-3);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #ded5c0;
}

.ohl-sort.is-static {
    cursor: default;
}

.ohl-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    border: 1px dashed #ddd4bf;
    border-radius: 14px;
    background: var(--oh-tint-warm);
    color: var(--oh-fg-2);
    font-size: 0.86rem;
}

.ohl-empty .material-symbols-outlined {
    font-size: 18px;
    color: var(--oh-champagne);
    flex-shrink: 0;
}

.ohl-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A chronology that grows with its data pushes everything under it off the fold —
   on the object page three of those stack under one another (Kauf & Verkauf, the
   valuations, the activity protocol), so each is held to a window of a few cards
   and scrolls inside it, exactly the way the My Objects tiles hold their rows
   (see `.own-tile-rows`). Nothing is cut: every record is one scroll away.
   `--ohl-visible` is how many cards the window shows and `--ohl-card-h` how tall
   one of them stands; both come from the component, which the caller sets per
   surface because a card carrying an amount is taller than a bare log entry. The
   14px on top of the n cards and their gaps leaves a sliver of the next card
   showing, so the window reads as "there is more" before anyone scrolls it. */
.ohl-cards--scroll {
    --ohl-visible: 3;
    --ohl-card-h: 9.75rem;
    max-height: calc(var(--ohl-visible) * (var(--ohl-card-h) + 10px) + 14px);
    overflow-y: auto;
    /* A list that has reached its end must not hand the wheel to the page. */
    overscroll-behavior: contain;
    /* Room for the scrollbar so it never sits on the cards' rounded border. */
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--oh-line) transparent;
}

/* Flex children shrink along the main axis by default, so inside a capped column
   the cards would squeeze themselves into the window instead of scrolling out of it. */
.ohl-cards--scroll > .ohl-card { flex-shrink: 0; }

.ohl-cards--scroll::-webkit-scrollbar { width: 6px; }
.ohl-cards--scroll::-webkit-scrollbar-track { background: transparent; }

.ohl-cards--scroll::-webkit-scrollbar-thumb {
    background: var(--oh-line);
    border-radius: 999px;
}

.ohl-cards--scroll::-webkit-scrollbar-thumb:hover { background: var(--oh-champagne); }

/* Chevron under a window that holds more than it shows. Purely a hint — the cards
   are already scrollable — so it is hidden from the accessibility tree. */
.ohl-scroll-hint {
    display: flex;
    justify-content: center;
    padding-top: 6px;
    color: var(--oh-champagne-deep);
    opacity: 0.65;
}

.ohl-scroll-hint .material-symbols-outlined { font-size: 1.25rem; }

.ohl-card {
    background: var(--oh-paper);
    border: 1px solid var(--oh-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 16, 32, 0.03);
    padding: 14px 15px 13px;
}

.ohl-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ohl-card-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--oh-fg-2);
    font-variant-numeric: tabular-nums;
}

.ohl-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--oh-badge-bg);
    color: var(--oh-badge-fg);
    border: 1px solid var(--oh-badge-border);
}

.ohl-badge .ohl-badge-icon {
    font-size: 15px;
    color: var(--oh-champagne-deep);
}

/* The two solid fills mark a direction — everything else is the neutral outline. */
.ohl-badge.is-ink {
    background: var(--oh-ink);
    color: #f6f1e7;
    border-color: var(--oh-ink);
}

.ohl-badge.is-ink .ohl-badge-icon { color: inherit; }

.ohl-badge.is-champagne {
    background: var(--oh-champagne);
    color: #2c2413;
    border-color: #bb9857;
}

.ohl-badge.is-champagne .ohl-badge-icon { color: inherit; }

.ohl-card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.ohl-card-lead { min-width: 0; }

.ohl-headline {
    font-family: var(--oh-serif);
    overflow-wrap: anywhere;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* The activity protocol is the one chronology whose headline is a sentence rather
   than a figure — "Datei hochgeladen: rechnung.pdf" instead of "1.240 EUR". At the
   serif figure size that sentence shouts over the money surfaces it sits under, so
   on the log it steps down to half the size and reads as the note it is. */
.own-history-list.ohl-log .ohl-headline {
    font-size: 0.75rem;
    line-height: 1.35;
}

.ohl-sub {
    font-size: 0.83rem;
    color: var(--oh-fg-2);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.ohl-card-money {
    text-align: right;
    min-width: 0;
}

.ohl-amount {
    font-family: var(--oh-serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ohl-amount-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oh-fg-4);
    margin-top: 2px;
}

.ohl-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed var(--oh-line-dashed);
}

.ohl-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--oh-fg-2);
    font-variant-numeric: tabular-nums;
}

.ohl-meta-icon {
    font-size: 16px;
    color: var(--oh-champagne);
    flex-shrink: 0;
}

.ohl-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

/* The card's action buttons: a square for an icon, a pill when the action needs a word.
   Both come from OwnHistoryAction, so every history in the application shows the same shape. */
.ohl-icon-btn,
.ohl-text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--oh-line);
    border-radius: 9px;
    background: var(--oh-tint);
    color: var(--oh-fg-2);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.ohl-icon-btn {
    width: 30px;
    min-width: 30px;
}

.ohl-text-btn {
    padding: 0 11px 0 9px;
    border-radius: 999px;
}

.ohl-icon-btn .material-symbols-outlined,
.ohl-text-btn .material-symbols-outlined {
    font-size: 16px;
}

.ohl-icon-btn:hover:not(:disabled),
.ohl-text-btn:hover:not(:disabled) {
    border-color: var(--oh-champagne);
    color: var(--oh-ink);
    background: var(--oh-tint-warm);
}

.ohl-icon-btn:disabled,
.ohl-text-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.ohl-detail {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--oh-line-dashed);
    font-size: 0.86rem;
    color: var(--oh-fg-2);
}

/* A description keeps the line breaks its author typed. */
.ohl-detail-text {
    white-space: pre-wrap;
}

.ohl-detail > * + * {
    margin-top: 8px;
}

/* Attachments and other small links under a card (see EventFileChips). */
.ohl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ohl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    padding: 4px 10px;
    border: 1px solid var(--oh-line);
    border-radius: 999px;
    background: var(--oh-tint);
    font-size: 0.8rem;
}

.ohl-chip a {
    color: var(--oh-fg-2);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ohl-chip a:hover {
    color: var(--oh-champagne-deep);
}

/* Closes the list the way a statement closes: one rule, one sum. */
.ohl-total {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    border-top: 2px solid var(--oh-ink);
    background: var(--oh-tint);
    border-radius: 0 0 16px 16px;
}

.ohl-total-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ohl-total-sub {
    font-size: 0.79rem;
    color: var(--oh-fg-2);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ohl-total-value {
    font-family: var(--oh-serif);
    font-size: 1.65rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Server-paged histories (audit log, licences) get a pager rather than an endless list. */
.ohl-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.ohl-pager-label {
    font-size: 0.78rem;
    color: var(--oh-fg-2);
    font-variant-numeric: tabular-nums;
}

.ohl-icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.ohl-note {
    display: flex;
    gap: 9px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed #ddd4bf;
    border-radius: 14px;
    background: var(--oh-tint-warm);
    font-size: 0.82rem;
    color: var(--oh-fg-2);
    line-height: 1.45;
}

.ohl-note-icon {
    font-size: 18px;
    color: var(--oh-champagne-deep);
    flex-shrink: 0;
}

/* Only on the narrowest phones does the money column stop paying for itself. */
@media (max-width: 340px) {
    .ohl-card-body {
        grid-template-columns: 1fr;
    }

    .ohl-card-money {
        text-align: left;
    }
}

/* =========================================================================
   OWNAMIC — Editorial canvas (.own-canvas)
   The warm-cream "golden creme" language of My Objects / Shared Spaces /
   the landing page, packaged for *signed-in, in-app* surfaces that are not
   Shared Spaces: the partner portal and the account pages that live inside
   the app shell (the audit log). It is the same palette and the same
   editorial rhythm as .ss-canvas — eyebrow, serif headline, lead, then
   paper cards on a hairline — but named for the language rather than for
   one feature, so any surface may adopt it.

   Global (not isolated) so Radzen controls rendered outside the page tree —
   dialogs, dropdown popups — pick the language up too. Everything is scoped
   under .own-canvas; nothing here applies without that ancestor.
   ========================================================================= */
.own-canvas {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 8px 96px;
    min-width: 0;
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
}

.own-canvas--narrow { max-width: 720px; }
.own-canvas--medium { max-width: 900px; }
.own-canvas--reading { max-width: 820px; }

/* ── Page head ──────────────────────────────────────────────────────────── */
.own-canvas .oc-head {
    padding: 26px 0 22px;
}

.own-canvas .oc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
}

.own-canvas .oc-eyebrow .line {
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    flex: none;
}

.own-canvas .oc-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 14px 0 12px;
    color: var(--ow-ink);
}

.own-canvas .oc-title em {
    font-style: italic;
    color: var(--ow-champagne-deep);
    font-weight: 500;
}

.own-canvas .oc-lead {
    margin: 0;
    max-width: 640px;
    color: var(--own-fg-2);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Back link above the page title. The partner pages and the standalone
   account pages hide the sidebar on a phone, so this is the way out. */
.own-canvas .oc-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--own-fg-2);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--own-dur-fast) var(--own-ease);
}

.own-canvas .oc-back:hover,
.own-canvas .oc-back:focus-visible {
    color: var(--ow-ink);
    text-decoration: none;
}

.own-canvas .oc-back .rz-icon,
.own-canvas .oc-back .rzi,
.own-canvas .oc-back .material-symbols-outlined {
    font-size: 1.2rem;
}

/* ── Sub-navigation (partner portal tabs) ───────────────────────────────── */
.own-canvas .oc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    margin: 0 0 22px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}

.own-canvas .oc-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--own-fg-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--own-dur-fast) var(--own-ease),
                color var(--own-dur-fast) var(--own-ease);
}

.own-canvas .oc-nav-link:hover {
    background: var(--ow-cream-deep);
    color: var(--ow-ink);
    text-decoration: none;
}

.own-canvas .oc-nav-link.is-active {
    background: var(--ow-ink);
    color: #fff;
}

.own-canvas .oc-nav-link.is-active .rz-icon,
.own-canvas .oc-nav-link.is-active .rzi,
.own-canvas .oc-nav-link.is-active .material-symbols-outlined {
    color: var(--ow-champagne);
}

.own-canvas .oc-nav-link .rz-icon,
.own-canvas .oc-nav-link .rzi,
.own-canvas .oc-nav-link .material-symbols-outlined {
    font-size: 1.1rem;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.own-canvas .oc-card {
    position: relative;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 22px;
    padding: 24px 26px;
    margin-bottom: 18px;
}

/* Gold rail on the card that carries the decisive action of the page. */
.own-canvas .oc-card--gold::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--ow-champagne);
    border-radius: 22px 0 0 22px;
}

.own-canvas .oc-card--cream {
    background: var(--ow-cream);
}

.own-canvas .oc-card:last-child { margin-bottom: 0; }

.own-canvas .oc-section-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
    margin: 0 0 6px;
}

.own-canvas .oc-section-sub {
    margin: 0 0 18px;
    color: var(--own-fg-2);
    font-size: 0.95rem;
    line-height: 1.55;
}

.own-canvas .oc-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
    margin-bottom: 8px;
}

.own-canvas .oc-muted {
    color: var(--own-fg-2);
    font-size: 0.92rem;
    line-height: 1.55;
}

.own-canvas .oc-hint {
    color: var(--own-fg-3);
    font-size: 0.84rem;
    line-height: 1.5;
    margin-top: 6px;
}

.own-canvas .oc-error {
    color: #b34840;
    font-size: 0.9rem;
    margin-top: 10px;
}

.own-canvas .oc-success {
    color: #4c7a4a;
    font-size: 0.9rem;
    margin-top: 10px;
}

.own-canvas .oc-divider {
    border: none;
    border-top: 1px dashed var(--ow-cream-deep);
    margin: 20px 0;
}

/* ── Stat tiles ─────────────────────────────────────────────────────────── */
.own-canvas .oc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.own-canvas .oc-stat {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    padding: 18px 20px;
}

.own-canvas .oc-stat-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--own-fg-3);
    margin-bottom: 8px;
}

.own-canvas .oc-stat-value {
    font-family: var(--ow-serif);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ow-ink);
}

.own-canvas .oc-stat--gold .oc-stat-value {
    color: var(--ow-champagne-deep);
}

/* ── The promotion / redemption code, set as a plate ────────────────────── */
.own-canvas .oc-code-plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    padding: 18px 22px;
    text-align: center;
}

.own-canvas .oc-code-plate .oc-label { margin-bottom: 0; }

.own-canvas .oc-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--ow-ink);
    word-break: break-all;
}

.own-canvas .oc-link-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.86rem;
    color: var(--own-fg-2);
    word-break: break-all;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.own-canvas .oc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.own-canvas .oc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 13px 24px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: transform var(--own-dur-base) var(--own-ease),
                box-shadow var(--own-dur-base) var(--own-ease),
                background var(--own-dur-base) var(--own-ease),
                color var(--own-dur-base) var(--own-ease);
}

.own-canvas .oc-btn:disabled,
.own-canvas .oc-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.own-canvas .oc-btn .rz-icon,
.own-canvas .oc-btn .rzi,
.own-canvas .oc-btn .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.own-canvas .oc-btn--ink {
    background: var(--ow-ink);
    color: #fff;
}

.own-canvas .oc-btn--ink:not(:disabled):hover {
    background: var(--ow-ink-2);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(11, 16, 32, 0.22);
    color: #fff;
}

.own-canvas .oc-btn--cream {
    background: var(--ow-paper);
    color: var(--ow-ink);
    border-color: var(--ow-line);
}

.own-canvas .oc-btn--cream:not(:disabled):hover {
    background: var(--ow-cream-deep);
    color: var(--ow-ink);
}

.own-canvas .oc-btn--ghost {
    background: transparent;
    color: var(--ow-ink);
    padding-left: 14px;
    padding-right: 14px;
}

.own-canvas .oc-btn--ghost:not(:disabled):hover {
    background: var(--ow-cream);
}

.own-canvas .oc-btn--danger {
    background: #c0544e;
    color: #fff;
}

.own-canvas .oc-btn--danger:not(:disabled):hover {
    background: #a94742;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(192, 84, 78, 0.28);
    color: #fff;
}

.own-canvas .oc-btn--sm {
    padding: 9px 16px;
    font-size: 0.86rem;
}

/* A button that is busy: the label stays, a champagne ring spins beside it. */
.own-canvas .oc-btn.is-busy {
    pointer-events: none;
    opacity: 0.72;
    cursor: progress;
}

.own-canvas .oc-btn.is-busy::after {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: own-submit-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .own-canvas .oc-btn.is-busy::after { animation: none; }
}

/* ── Chips & badges ─────────────────────────────────────────────────────── */
.own-canvas .oc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.own-canvas .oc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--own-fg-2);
}

.own-canvas .oc-chip b {
    color: var(--ow-ink);
    font-weight: 700;
}

.own-canvas .oc-chip--gold {
    color: var(--ow-champagne-deep);
    font-weight: 600;
}

.own-canvas .oc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-champagne);
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ── Notices (status, validation, legal) ────────────────────────────────── */
.own-canvas .oc-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--ow-line);
    border-left-width: 4px;
    border-radius: 14px;
    background: var(--ow-cream);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--own-fg-2);
}

.own-canvas .oc-notice strong { color: var(--ow-ink); }
.own-canvas .oc-notice p:last-child { margin-bottom: 0; }

.own-canvas .oc-notice .material-symbols-outlined,
.own-canvas .oc-notice .rz-icon,
.own-canvas .oc-notice .rzi {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.own-canvas .oc-notice--info    { border-left-color: var(--ow-champagne); }
.own-canvas .oc-notice--success { border-left-color: #7fa87c; background: #f4f8f2; }
.own-canvas .oc-notice--warning { border-left-color: #d9a441; background: #fdf7ea; }
.own-canvas .oc-notice--danger  { border-left-color: #c0544e; background: #fdf4f3; }

.own-canvas .oc-notice--info .material-symbols-outlined    { color: var(--ow-champagne-deep); }
.own-canvas .oc-notice--success .material-symbols-outlined { color: #4c7a4a; }
.own-canvas .oc-notice--warning .material-symbols-outlined { color: #a97b1f; }
.own-canvas .oc-notice--danger .material-symbols-outlined  { color: #b34840; }

/* ── Forms: Radzen controls in the editorial language ───────────────────── */
.own-canvas .oc-field {
    margin-bottom: 16px;
}

.own-canvas .oc-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.own-canvas .oc-input,
.own-canvas .oc-input .rz-textbox,
.own-canvas .oc-input .rz-textarea,
.own-canvas .oc-input .rz-dropdown,
.own-canvas .oc-input .rz-numeric,
.own-canvas .oc-input input,
.own-canvas .oc-input textarea {
    width: 100%;
}

.own-canvas .oc-input .rz-textbox,
.own-canvas .oc-input .rz-textarea,
.own-canvas .oc-input .rz-dropdown,
.own-canvas .oc-input .rz-numeric {
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ow-ink);
    box-shadow: none;
    transition: border-color var(--own-dur-fast) var(--own-ease);
}

.own-canvas .oc-input .rz-textarea {
    min-height: 110px;
    line-height: 1.5;
}

.own-canvas .oc-input .rz-textbox:focus,
.own-canvas .oc-input .rz-textarea:focus,
.own-canvas .oc-input .rz-dropdown:focus,
.own-canvas .oc-input .rz-state-focused {
    border-color: var(--ow-champagne);
    outline: none;
}

.own-canvas .oc-input .rz-dropdown {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 4px 16px;
    min-height: 50px;
}

.own-canvas .oc-input .rz-dropdown .rz-dropdown-label {
    padding: 0;
    font-size: 1rem;
    color: var(--ow-ink);
}

.own-canvas .oc-input .rz-dropdown .rz-dropdown-trigger {
    background: transparent;
    color: var(--own-fg-2);
}

.own-canvas .oc-input .rz-numeric {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px 4px 16px;
    min-height: 50px;
}

.own-canvas .oc-input .rz-numeric input {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--ow-ink);
}

.own-canvas .oc-input--inline {
    display: inline-block;
    width: auto;
    min-width: 120px;
}

/* Checkbox rows: champagne tick, generous hit area, label beside it. */
.own-canvas .oc-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--own-fg-2);
}

.own-canvas .oc-check .rz-chkbox-box {
    border-radius: 6px;
    border: 2px solid var(--own-fg-3);
    background: transparent;
    width: 24px;
    height: 24px;
}

.own-canvas .oc-check .rz-chkbox-box.rz-state-active {
    border-color: var(--ow-champagne-deep);
    background: transparent;
    color: var(--ow-champagne-deep);
}

.own-canvas .oc-check .rz-chkbox-box .rz-chkbox-icon {
    color: var(--ow-champagne-deep);
}

.own-canvas .oc-check a {
    color: var(--ow-champagne-deep);
    font-weight: 600;
}

/* ── Reading surfaces: legal documents, definition lists, checklists ────── */
.own-canvas .oc-article {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 22px;
    padding: 34px 38px;
    color: var(--own-fg-1);
    font-size: 1rem;
    line-height: 1.7;
}

.own-canvas .oc-article h1,
.own-canvas .oc-article h2,
.own-canvas .oc-article h3 {
    font-family: var(--ow-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
    margin: 28px 0 12px;
}

.own-canvas .oc-article h1 { font-size: 2.1rem; margin-top: 0; }
.own-canvas .oc-article h2 { font-size: 1.55rem; }
.own-canvas .oc-article h3 { font-size: 1.2rem; }
.own-canvas .oc-article p { margin: 0 0 14px; }
.own-canvas .oc-article ul,
.own-canvas .oc-article ol { margin: 0 0 14px 1.2em; }
.own-canvas .oc-article li { margin-bottom: 6px; }
.own-canvas .oc-article a { color: var(--ow-champagne-deep); font-weight: 600; }

.own-canvas .oc-fingerprint {
    margin-top: 22px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--own-fg-3);
    word-break: break-all;
}

.own-canvas .oc-deflist {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 8px 18px;
    margin: 0 0 18px;
}

.own-canvas .oc-deflist dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--own-fg-3);
    align-self: center;
}

.own-canvas .oc-deflist dd {
    margin: 0;
    color: var(--ow-ink);
    align-self: center;
}

.own-canvas .oc-checklist {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.own-canvas .oc-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--ow-cream-deep);
    color: var(--own-fg-2);
}

.own-canvas .oc-checklist li:last-child { border-bottom: none; }
.own-canvas .oc-checklist .is-covered { color: var(--ow-ink); }
.own-canvas .oc-checklist .is-covered .material-symbols-outlined { color: var(--ow-champagne-deep); }
.own-canvas .oc-checklist .material-symbols-outlined { color: var(--own-fg-3); }

/* ── Tables (audit log) ─────────────────────────────────────────────────── */
.own-canvas .oc-table-wrap {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 22px;
    overflow-x: auto;
}

.own-canvas .oc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.own-canvas .oc-table th {
    text-align: left;
    padding: 14px 18px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--own-fg-3);
    background: var(--ow-cream);
    border-bottom: 1px solid var(--ow-line);
    white-space: nowrap;
}

.own-canvas .oc-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ow-line-soft, #eee9dd);
    color: var(--own-fg-2);
    vertical-align: top;
}

.own-canvas .oc-table tbody tr:last-child td { border-bottom: none; }
.own-canvas .oc-table tbody tr:hover td { background: var(--ow-cream); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.own-canvas .oc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 24px;
    background: var(--ow-cream);
    border: 1px dashed var(--ow-cream-deep);
    border-radius: 22px;
    color: var(--own-fg-3);
    text-align: center;
}

.own-canvas .oc-empty .material-symbols-outlined {
    font-size: 2rem;
    color: var(--ow-champagne-deep);
}

/* ── Loading ────────────────────────────────────────────────────────────── */
.own-canvas .oc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 0;
}

@media only screen and (max-width: 640px) {
    .own-canvas .oc-card {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .own-canvas .oc-article {
        padding: 24px 20px;
    }

    .own-canvas .oc-nav {
        border-radius: 18px;
        width: 100%;
    }

    .own-canvas .oc-deflist {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .own-canvas .oc-deflist dd { margin-bottom: 10px; }
}

/* ── Help page (/help) ──────────────────────────────────────────────────
   FAQ, article teasers, the OWNY workflow teaser and the support request
   form on one canvas. Everything below is scoped to .own-canvas; the pieces
   are named generally (.oc-section-head, .oc-teaser) so another canvas page
   may pick them up. ──────────────────────────────────────────────────── */

/* The FAQ block is styled once for the landing page and /faq, where it is a
   full-width section with its own shell. Inside the canvas it is one section
   among others, so the outer spacing and the shell width come from the canvas
   and its headline steps down to the section-title size. */
.own-canvas .faq-section { padding: 0; }
.own-canvas .faq-section .faq-shell { max-width: none; padding: 0; }
.own-canvas .faq-section .faq-title { font-size: 1.6rem; margin-top: 10px; }
.own-canvas .faq-section .faq-head { padding-bottom: 18px; margin-bottom: 22px; }

/* Section head: serif title and its one-line explanation on the left, a
   "see all →" link on the right; wraps under the title on narrow screens. */
.own-canvas .oc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 18px;
}

.own-canvas .oc-section-head .oc-section-sub { margin-bottom: 0; }

.own-canvas .oc-section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ow-champagne-deep);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.own-canvas .oc-section-more:hover,
.own-canvas .oc-section-more:focus-visible { text-decoration: underline; }

.own-canvas .oc-section-more .material-symbols-outlined { font-size: 1.1rem; }

/* Teaser cards (blog posts): paper on a hairline, the whole card is the link. */
.own-canvas .oc-teaser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.own-canvas .oc-teaser {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    padding: 20px 22px;
    color: inherit;
    text-decoration: none;
    transition: transform var(--own-dur-base) var(--own-ease),
                box-shadow var(--own-dur-base) var(--own-ease),
                border-color var(--own-dur-base) var(--own-ease);
}

.own-canvas .oc-teaser:hover,
.own-canvas .oc-teaser:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(11, 16, 32, 0.08);
    border-color: var(--ow-champagne);
}

.own-canvas .oc-teaser-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--own-fg-3);
}

.own-canvas .oc-teaser-meta .material-symbols-outlined { font-size: 0.95rem; }

.own-canvas .oc-teaser-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ow-ink);
}

.own-canvas .oc-teaser-desc {
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--own-fg-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.own-canvas .oc-teaser-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ow-champagne-deep);
}

.own-canvas .oc-teaser-more .material-symbols-outlined { font-size: 1rem; }

/* A notice that carries an action (the signed-out "Sign in" button under the
   support section): the button sits on its own row under the text. */
.own-canvas .oc-notice .oc-notice-actions { margin-top: 10px; }
.own-canvas .oc-notice p { margin: 0; }

/* The workflow teaser reuses the Radzen cards of /assistance; give them the
   canvas' corner and hairline instead of the elevated app-shell look. */
.own-canvas .oc-help .assistance-card-elevated,
.own-canvas.oc-help .assistance-card-elevated {
    border-color: var(--ow-line) !important;
}

/* =========================================================================
   OWNAMIC — Account / auth pages, part two
   The card language above (.lp-auth-page / .lp-auth-card) covers a login
   form: one column, one field, one button. The rest of the account area —
   two-factor sign-in, the authenticator setup with its QR code, recovery
   codes, passkey management, the destructive confirmations — needs a few
   more pieces in the same language. They live here rather than in the block
   above so the original login/register card stays readable.
   ========================================================================= */

/* A card that has to carry more than a form: setup steps, a QR code, a list
   of passkeys, a table of recovery codes. */
.lp .lp-auth-card--wide { max-width: 640px; }

/* Back link, top-left inside the card. Every standalone account page is a
   dead end otherwise: the layout hides the sidebar and the bottom navigation
   bar on /account/*, so on a phone the browser chrome was the only way out. */
.lp .lp-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--own-fg-2);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--own-dur-fast) var(--own-ease);
}

.lp .lp-auth-back:hover,
.lp .lp-auth-back:focus-visible {
    color: var(--ow-champagne-deep);
    text-decoration: none;
}

.lp .lp-auth-back .material-symbols-outlined { font-size: 1.15rem; }

/* Body copy inside the card that is not the sub-headline — the explanatory
   paragraph above a destructive confirmation, for instance. */
.lp .lp-auth-text {
    color: var(--own-fg-2);
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.lp .lp-auth-text a,
.lp .lp-auth-note a {
    color: var(--ow-champagne-deep);
    font-weight: 600;
}

/* Notices in the card palette. Bootstrap's .alert markup keeps working (the
   card restyles it above); .lp-auth-note is the native form. */
.lp .lp-auth-note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border: 1px solid var(--ow-line);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--ow-paper);
    padding: 13px 16px;
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--own-fg-2);
    text-align: left;
}

.lp .lp-auth-note strong { color: var(--ow-ink); }
.lp .lp-auth-note p { margin: 0 0 8px; }
.lp .lp-auth-note p:last-child { margin-bottom: 0; }

.lp .lp-auth-note .material-symbols-outlined {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.lp .lp-auth-note--info    { border-left-color: var(--ow-champagne); }
.lp .lp-auth-note--info .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp .lp-auth-note--success { border-left-color: #7fa87c; background: #f4f8f2; }
.lp .lp-auth-note--success .material-symbols-outlined { color: #4c7a4a; }
.lp .lp-auth-note--warning { border-left-color: #d9a441; background: #fdf7ea; }
.lp .lp-auth-note--warning .material-symbols-outlined { color: #a97b1f; }
.lp .lp-auth-note--danger  { border-left-color: #c0544e; background: #fdf4f3; }
.lp .lp-auth-note--danger .material-symbols-outlined { color: #b34840; }

/* Destructive submit (disable 2FA, reset the authenticator key, delete the
   account). The primary gradient must not be the button that ends things. */
.lp .lp-btn-danger {
    background: #c0544e;
    color: #fff;
    box-shadow: 0 4px 24px rgba(192, 84, 78, 0.28);
}

.lp .lp-btn-danger:hover {
    background: #a94742;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(192, 84, 78, 0.4);
}

/* A row of secondary actions under the main button. */
.lp .lp-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.lp .lp-auth-actions .lp-btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* ── Authenticator setup: numbered steps, QR code, shared key ───────────── */
.lp .lp-auth-steps {
    counter-reset: lp-auth-step;
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    text-align: left;
}

.lp .lp-auth-steps > li {
    counter-increment: lp-auth-step;
    position: relative;
    padding: 0 0 20px 42px;
    color: var(--own-fg-2);
    font-size: 0.94rem;
    line-height: 1.6;
}

.lp .lp-auth-steps > li::before {
    content: counter(lp-auth-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-champagne);
    font-family: var(--ow-serif);
    font-size: 0.95rem;
    font-weight: 700;
}

/* The rail that ties the steps together, stopping at the last one. */
.lp .lp-auth-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 32px;
    bottom: 6px;
    width: 1px;
    background: var(--ow-line);
}

.lp .lp-auth-step-title {
    display: block;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--ow-ink);
    margin-bottom: 6px;
}

.lp .lp-auth-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 260px;
    margin: 14px 0;
    padding: 14px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 16px;
}

.lp .lp-auth-qr svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* The shared secret, typed by hand when the camera will not cooperate. */
.lp .lp-auth-key {
    display: block;
    margin: 10px 0 4px;
    padding: 12px 14px;
    background: var(--ow-paper);
    border: 1px dashed var(--ow-cream-deep);
    border-radius: 12px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ow-ink);
    word-break: break-all;
}

/* ── Recovery codes ─────────────────────────────────────────────────────── */
.lp .lp-auth-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin: 0 0 18px;
    padding: 16px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
}

.lp .lp-auth-codes code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ow-ink);
    text-align: center;
}

/* ── Item lists (passkeys, linked external logins) ──────────────────────── */
.lp .lp-auth-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
}

.lp .lp-auth-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    margin-bottom: 9px;
}

.lp .lp-auth-list-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.lp .lp-auth-list-main .material-symbols-outlined {
    font-size: 1.4rem;
    color: var(--ow-champagne-deep);
    flex-shrink: 0;
}

.lp .lp-auth-list-name {
    display: block;
    font-weight: 600;
    color: var(--ow-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp .lp-auth-list-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--own-fg-3);
}

/* Small inline control at the right of a list row. */
.lp .lp-auth-mini {
    flex-shrink: 0;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-cream);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--own-fg-2);
    cursor: pointer;
    transition: background var(--own-dur-fast) var(--own-ease),
                color var(--own-dur-fast) var(--own-ease),
                border-color var(--own-dur-fast) var(--own-ease);
}

.lp .lp-auth-mini:hover {
    background: #fdf4f3;
    border-color: #e3b7b3;
    color: #b34840;
}

/* ── Checkbox row inside a form (delete confirmation) ───────────────────── */
.lp .lp-auth-card .form-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 6px 0 16px;
    padding: 0;
    text-align: left;
}

.lp .lp-auth-card .form-check-input {
    margin: 3px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--ow-champagne-deep);
    flex-shrink: 0;
}

.lp .lp-auth-card .form-check-label {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--own-fg-2);
}

/* ── Status / empty text ────────────────────────────────────────────────── */
.lp .lp-auth-empty {
    padding: 26px 18px;
    background: var(--ow-paper);
    border: 1px dashed var(--ow-cream-deep);
    border-radius: 14px;
    color: var(--own-fg-3);
    font-size: 0.92rem;
    text-align: center;
    margin-bottom: 18px;
}

@media only screen and (max-width: 520px) {
    .lp .lp-auth-steps > li { padding-left: 36px; }
    .lp .lp-auth-list > li { flex-wrap: wrap; }
}

/* ── Editorial canvas: refinements ──────────────────────────────────────────
   Kept apart from the block above so the base language stays readable: what
   follows are the adjustments the Radzen controls and the checkbox rows need
   once they sit on the cream surface. */

/* RadzenNumeric renders a .rz-spinner wrapper around its input rather than a
   .rz-numeric box, so the field styling has to reach both. */
.own-canvas .oc-input .rz-spinner {
    display: inline-flex;
    align-items: center;
    width: 100%;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    padding: 4px 6px 4px 16px;
    min-height: 50px;
    box-shadow: none;
}

.own-canvas .oc-input .rz-spinner .rz-spinner-input {
    background: transparent;
    border: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ow-ink);
    width: 100%;
}

.own-canvas .oc-input .rz-spinner.rz-state-focused,
.own-canvas .oc-input .rz-spinner:focus-within {
    border-color: var(--ow-champagne);
}

/* The checkbox row pairs a RadzenCheckBox with a RadzenLabel (or a label plus
   a link), so the label needs the row's type rather than Radzen's. */
.own-canvas .oc-check .rz-label,
.own-canvas .oc-check label {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--own-fg-2);
    cursor: pointer;
}

.own-canvas .oc-check .oc-hint {
    display: block;
    margin-top: 4px;
}

/* A read-only text area (the share message) should read as a quoted note, not
   as an editable field waiting for input. */
.own-canvas .oc-input .rz-textarea[readonly] {
    background: var(--ow-paper);
    color: var(--own-fg-2);
}

/* ── Auth card: refinements ───────────────────────────────────────────────── */

/* The hint line under a form carries the "no authenticator?" and "didn't get a
   code?" links, so its anchors need the card's link colour. */
.lp .lp-auth-hint a {
    color: var(--ow-champagne-deep);
    font-weight: 600;
    text-decoration: none;
}

.lp .lp-auth-hint a:hover { text-decoration: underline; }

/* An eyebrow used as a section heading inside a card (the passkey and external
   login lists) is an <h2>, which carries browser margins an inline span does not. */
.lp h2.lp-auth-eyebrow {
    margin: 22px 0 10px;
    text-align: left;
}

/* The delete-account confirmation puts a validation message under the checkbox row, so the row has
   to wrap and give that message a line of its own rather than a third column. */
.lp .lp-auth-card .form-check {
    flex-wrap: wrap;
}

.lp .lp-auth-card .form-check .validation-message {
    flex-basis: 100%;
    font-size: 0.82rem;
}

/* ── Editorial canvas: setup steps, keys, QR codes, code lists ──────────────
   The same pieces the auth card carries for the web 2FA setup, in the in-app
   language: the mobile app's authenticator screens are ordinary app pages on
   the cream canvas, not the ink-field auth card. */
.own-canvas .oc-steps {
    counter-reset: oc-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.own-canvas .oc-steps > li {
    counter-increment: oc-step;
    position: relative;
    padding: 0 0 22px 44px;
    color: var(--own-fg-2);
    font-size: 0.96rem;
    line-height: 1.6;
}

.own-canvas .oc-steps > li:last-child { padding-bottom: 0; }

.own-canvas .oc-steps > li::before {
    content: counter(oc-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-champagne);
    font-family: var(--ow-serif);
    font-size: 1rem;
    font-weight: 700;
}

/* The rail that ties the steps together, stopping at the last one. */
.own-canvas .oc-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 34px;
    bottom: 6px;
    width: 1px;
    background: var(--ow-line);
}

.own-canvas .oc-step-title {
    display: block;
    color: var(--ow-ink);
    font-weight: 600;
    margin-bottom: 8px;
}

/* The shared secret, typed by hand when the camera will not cooperate. */
.own-canvas .oc-key {
    display: block;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--ow-paper);
    border: 1px dashed var(--ow-cream-deep);
    border-radius: 12px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ow-ink);
    word-break: break-all;
}

.own-canvas .oc-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 260px;
    margin: 0 0 12px;
    padding: 14px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 16px;
}

.own-canvas .oc-qr svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Recovery codes: a grid, because ten of them get copied down in one go. */
.own-canvas .oc-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin: 0 0 18px;
    padding: 16px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
}

.own-canvas .oc-codes code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ow-ink);
    text-align: center;
}

/* The six-digit code box, shared with the auth card's .lp-code-input. */
.own-canvas .oc-code-input {
    width: 100%;
    max-width: 320px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    letter-spacing: 0.5em;
    font-weight: 700;
    padding: 16px 10px 16px 24px;
    color: var(--ow-ink);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    background: var(--ow-paper);
}

.own-canvas .oc-code-input:focus {
    outline: none;
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.22);
}

@media only screen and (max-width: 520px) {
    .own-canvas .oc-steps > li { padding-left: 38px; }
    .own-canvas .oc-code-input { font-size: 1.6rem; letter-spacing: 0.4em; }
}

/* ── Editorial canvas: settings rows, choice tiles, plan card ───────────────
   What the configuration, messages and billing pages need on top of the base
   language: a labelled row that carries one control, a grid of pickable
   tiles, and the plan card of the billing page. */

/* One setting: what it does on the left, the control that changes it on the
   right. Same shape for a switch, a dropdown or a number. */
.own-canvas .oc-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    margin-bottom: 10px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
}

.own-canvas .oc-setting__text {
    flex: 1;
    min-width: 0;
}

.own-canvas .oc-setting__control {
    flex: none;
}

.own-canvas .oc-setting-title {
    display: block;
    font-weight: 600;
    color: var(--ow-ink);
    margin-bottom: 4px;
}

.own-canvas .oc-setting-desc {
    display: block;
    color: var(--own-fg-2);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* The credit cost of a feature, under its description. */
.own-canvas .oc-setting-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--own-fg-3);
}

.own-canvas .oc-setting-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.own-canvas .oc-setting-meta .rzi,
.own-canvas .oc-setting-meta .rz-icon {
    font-size: 0.9rem;
}

/* A section of the page: heading, one line of explanation, then its rows. */
.own-canvas .oc-section {
    margin-bottom: 34px;
}

.own-canvas .oc-section:last-child { margin-bottom: 0; }

/* Switch: ink track, champagne knob when on — the Shared Spaces treatment. */
.own-canvas .oc-switch .rz-switch {
    width: 58px;
    height: 32px;
}

.own-canvas .oc-switch .rz-switch .rz-switch-circle {
    background: var(--ow-paper);
}

.own-canvas .oc-switch .rz-switch-checked .rz-switch-circle,
.own-canvas .oc-switch .rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--ow-champagne);
}

/* A gold-tinted reassurance note — used where a setting needs a promise
   beside it rather than a warning. */
.own-canvas .oc-note-gold {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--ow-champagne);
    border-radius: 14px;
    background: linear-gradient(155deg, #fffaf1 0%, #fdf7ec 100%);
    color: var(--own-fg-2);
    font-size: 0.9rem;
    line-height: 1.55;
}

.own-canvas .oc-note-gold strong { color: var(--ow-ink); margin-right: 4px; }

.own-canvas .oc-note-gold .rzi,
.own-canvas .oc-note-gold .rz-icon,
.own-canvas .oc-note-gold .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--ow-champagne-deep);
    flex-shrink: 0;
}

/* Pickable tiles (the OWNY portraits). The chosen one gets the gold ring, so
   the selection reads without relying on the fill alone. */
.own-canvas .oc-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 12px;
}

.own-canvas .oc-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    cursor: pointer;
    text-align: center;
    font-size: 0.82rem;
    color: var(--own-fg-2);
    transition: border-color var(--own-dur-fast) var(--own-ease),
                background var(--own-dur-fast) var(--own-ease),
                transform var(--own-dur-base) var(--own-ease);
}

.own-canvas .oc-choice:hover {
    background: var(--ow-cream);
    transform: translateY(-2px);
}

.own-canvas .oc-choice.is-selected {
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.22);
    color: var(--ow-ink);
    font-weight: 600;
}

.own-canvas .oc-choice img {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
}

/* ── Billing: the plan card ─────────────────────────────────────────────── */
.own-canvas .oc-plan {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 18px 0;
}

.own-canvas .oc-plan-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    flex: none;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    color: var(--ow-champagne-deep);
}

/* Premium is the ink plate with the gold glyph — the same pairing the badges
   and the partner rail use for "the highest of the three". */
.own-canvas .oc-plan-mark--premium {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-champagne);
}

.own-canvas .oc-plan-name {
    display: block;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ow-ink);
}

.own-canvas .oc-plan-price {
    display: block;
    color: var(--own-fg-2);
    font-size: 0.95rem;
    margin-top: 2px;
}

/* Status pill on the plan card. Neutral by default; the three states that
   need to be read at a glance get their own tint. */
.own-canvas .oc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    color: var(--own-fg-2);
}

.own-canvas .oc-status--active  { background: #f4f8f2; border-color: #cfe0cb; color: #4c7a4a; }
.own-canvas .oc-status--warning { background: #fdf7ea; border-color: #ecd9ae; color: #a97b1f; }
.own-canvas .oc-status--danger  { background: #fdf4f3; border-color: #e3b7b3; color: #b34840; }
.own-canvas .oc-status--info    { background: var(--ow-cream); border-color: var(--ow-champagne); color: var(--ow-champagne-deep); }

/* The end of the page, where the contract can be ended. Separated by a rule
   rather than by red: the button is the only red thing here. */
.own-canvas .oc-danger-zone {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--ow-line);
}

.own-canvas .oc-danger-zone .oc-section-title {
    color: #b34840;
}

/* Breadcrumb above a page head. */
.own-canvas .oc-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.84rem;
    color: var(--own-fg-3);
}

.own-canvas .oc-crumb a {
    color: var(--own-fg-2);
    font-weight: 600;
    text-decoration: none;
}

.own-canvas .oc-crumb a:hover { color: var(--ow-ink); }

/* A card that is one message: the sentence, then when it was decided. */
.own-canvas .oc-message {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 10px;
}

.own-canvas .oc-message-when {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--own-fg-3);
}

@media only screen and (max-width: 640px) {
    .own-canvas .oc-setting {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
    }

    .own-canvas .oc-plan { gap: 14px; }
    .own-canvas .oc-plan-name { font-size: 1.45rem; }
}

/* A card whose title shares its line with a status pill or a control. */
.own-canvas .oc-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.own-canvas .oc-card-head .oc-section-title { margin-bottom: 0; }

/* The choice tiles are real buttons, so they need the browser's button
   styling taken off before the tile styling above lands. */
.own-canvas .oc-choice {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.own-canvas .oc-choice:focus-visible {
    outline: none;
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.35);
}

/* A settings row's control column must not collapse a dropdown to nothing. */
.own-canvas .oc-setting__control.oc-input--inline {
    min-width: 160px;
}

/* ─────────────── SCHEDULED REVALUATIONS CARD ───────────────
   Moved out of RevaluationJobsCard.razor, which carried it as an inline <style> block — a plain
   <style> in a component is global anyway, and the house rule keeps such rules here where they can
   be found. Note `.eyebrow` / `.line`: they were global through that block and several other cards
   (news, OWNY hub, the object picker) have been leaning on them ever since, so they stay global and
   unchanged rather than being scoped to the card that happened to declare them.
   The run feed itself now uses the shared `.own-tile-rows` scroller instead of a pager. */
.revaluation-card {
    border: 1px solid var(--ow-line, #e6e1d7);
    border-radius: 22px;
    padding: 1.6rem 2rem;
    background: var(--rz-base-background-color, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--ow-champagne-deep, #a7864b);
    margin-bottom: 0.5rem;
}

.eyebrow .line {
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.revaluation-header-left {
    flex: 1;
    min-width: 280px;
}

.revaluation-header-right {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}

.revaluation-title {
    font-family: var(--ow-serif, serif);
    font-weight: 500;
    font-size: 1.85rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: var(--ow-ink, #0b1020);
}

.revaluation-title em {
    font-style: italic;
    color: var(--ow-champagne-deep, #a7864b);
    font-weight: 500;
}

.revaluation-desc {
    margin: 0;
    color: var(--own-fg-2, #475569);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 480px;
}

.revaluation-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: color-mix(in srgb, var(--ow-champagne, #c9a96a) 15%, var(--ow-cream, #f6f1e7));
    border: 1px solid color-mix(in srgb, var(--ow-champagne, #c9a96a) 30%, transparent);
    color: var(--ow-champagne-deep, #a7864b);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.revaluation-credit-badge .material-symbols-outlined {
    font-size: 1rem;
    color: var(--ow-champagne-deep, #a7864b);
}

.revaluation-schedule-btn {
    background-color: var(--ow-ink, #0b1020) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.revaluation-schedule-btn:hover:not(:disabled) {
    background-color: var(--ow-ink-2, #141a33) !important;
}

.revaluation-schedule-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.revaluation-divider {
    border-top: 1px dashed var(--ow-line, #e6e1d7);
    margin: 1.5rem 0 1.25rem;
}

.revaluation-empty-state {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--own-fg-2, #475569);
    font-size: 0.9rem;
}

.revaluation-empty-state .material-symbols-outlined {
    font-size: 1.15rem;
    color: var(--ow-champagne-deep, #a7864b);
}

.revaluation-run-name {
    cursor: pointer;
    font-weight: 600;
    flex: 1 1 160px;
    min-width: 120px;
    word-break: break-word;
    color: var(--ow-ink, #0b1020);
    transition: color 0.15s;
}

.revaluation-run-name:hover {
    color: var(--ow-champagne-deep, #a7864b);
    text-decoration: underline;
}

.revaluation-run-date {
    color: var(--own-fg-2, #475569);
    font-size: 0.8rem;
}

.revaluation-run-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.revaluation-delta-up { color: var(--rz-success, #16a34a); }
.revaluation-delta-down { color: var(--rz-danger, #dc2626); }
.revaluation-delta-flat { color: var(--rz-text-secondary-color); }

.revaluation-delta-percent { font-weight: 400; }

.revaluation-run-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rz-warning-darker, #b45309);
    font-size: 0.85rem;
}

.revaluation-schedules-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .revaluation-card {
        padding: 1.25rem 1.1rem 1.5rem;
    }

    .revaluation-header-right {
        width: 100%;
        justify-content: flex-start;
    }

    .revaluation-credit-badge {
        white-space: normal;
        max-width: 100%;
    }

    .revaluation-schedule-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   READ-ONLY AREA NOTICE — `ReadOnlyAreaNotice.razor`

   The strip a lapsed trial / ended subscription sees at the top of the areas it
   can still reach (My Areas, My Scans, Shared Spaces). Those pages keep their
   content and lose their write controls, so this says once what the locks
   further down mean.

   Global rather than scoped because the notice is dropped into three different
   namespaces (`.my-areas`, `.ms-canvas`, `.ss-canvas`) and must read the same
   in all of them. Calm, not alarming: the account has lost the ability to
   change these pages, not the right to read them — same warm cream language as
   the banners it sits above.
   ══════════════════════════════════════════════════════════════════════════ */
.roa-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 18px;
    border: 1px solid var(--ow-line);
    background: linear-gradient(100deg, var(--ow-cream) 0%, var(--ow-blush) 100%);
}

.roa-glyph {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--own-gradient-primary);
}

.roa-glyph .material-symbols-outlined {
    font-size: 1.3rem;
}

.roa-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 260px;
    min-width: 0;
}

.roa-text strong {
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ow-ink);
}

.roa-text span {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--own-fg-2);
}

@media (max-width: 640px) {
    .roa-notice {
        padding: 14px 16px;
        gap: 12px;
    }
}

/* ─────────────────────── LOCKED WRITE AFFORDANCE ───────────────────────
   The lock that stands in for a button a read-only account may not press —
   the same read as the locked Add FAB in MainLayout, at the size a card gives
   it. Clicking it goes to /pricing?expired=1, which is the only thing that
   changes the state it is reporting. */
.own-locked-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 0;
    width: 38px;
    height: 30px;
    border-radius: 999px;
    border: 1px dashed var(--ow-line);
    background: var(--ow-cream-deep);
    color: var(--own-fg-2);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--own-dur-base) var(--own-ease),
                color var(--own-dur-base) var(--own-ease);
}

.own-locked-action:hover {
    border-color: var(--ow-champagne);
    color: var(--ow-ink);
}

.own-locked-action:focus-visible {
    outline: 2px solid var(--ow-champagne);
    outline-offset: 3px;
}

.own-locked-action .material-symbols-outlined {
    font-size: 1.05rem;
}

/* The inline "locked" label some cards show where an "Open" / "Add" link used
   to be: text plus a lock, no chrome, so the row keeps its shape. */
.own-locked-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--own-fg-2);
    cursor: pointer;
}

.own-locked-inline:hover {
    color: var(--ow-ink);
}

.own-locked-inline .material-symbols-outlined {
    font-size: 1.05rem;
}

/* ── Upgrade confirmation dialog (§ 312j BGB) ────────────────────────────────
   Rendered inside a Radzen dialog; reuses the own-canvas button language but
   neutralises the canvas page paddings (same trick as .ss-dialog). The rows
   list is the legally required price/term summary right above the button. */
.upg-dialog.own-canvas {
    padding: 0;
    max-width: none;
}

.upg-dialog .upg-rows {
    margin: 0 0 14px;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    padding: 6px 16px;
    background: var(--ow-paper);
}

.upg-dialog .upg-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ow-line);
    font-size: 0.92rem;
}

.upg-dialog .upg-row:last-child { border-bottom: none; }

.upg-dialog .upg-row dt {
    color: var(--own-fg-3, #6b6455);
    font-weight: 600;
    white-space: nowrap;
}

.upg-dialog .upg-row dd {
    margin: 0;
    color: var(--ow-ink);
    font-weight: 600;
    text-align: right;
}

/* The regular price, struck, in front of the one a running discount leaves. Same idea as the
   pricing card's .t-price-struck: quieter and lighter than the price that actually applies. */
.upg-dialog .upg-price-struck {
    color: var(--own-fg-3, #6b6455);
    font-weight: 500;
    text-decoration-thickness: 1px;
    margin-right: 6px;
}

.upg-dialog .upg-discount-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.5;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.upg-dialog .upg-discount-note .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--ow-champagne-deep);
    flex-shrink: 0;
}

.upg-dialog .upg-cancel-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.88rem;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.upg-dialog .upg-cancel-note .material-symbols-outlined { font-size: 1.1rem; }

.upg-dialog .upg-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 10px 0;
    cursor: pointer;
}

.upg-dialog .upg-consent input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
}

.upg-dialog .upg-note {
    font-size: 0.82rem;
    color: var(--own-fg-3, #6b6455);
    margin: 6px 0 0;
}

.upg-dialog .upg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Objekte auswählen — the one object-selection dialog (EnhancedObjectLinkDialog)

   Children, parent objects, collection and shared-space contributions and bulk
   revaluation all open this one dialog, so its language is the app's own:
   ink / cream / champagne / serif, a paper card with a cream filter bar, rows
   that read like a list rather than a data grid.

   Global rather than a .razor.css isolation file for the same reason as the
   market sheet below it: the rules have to reach the Radzen dialog shell that
   wraps the component, which an isolated stylesheet cannot address.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The Radzen shell steps aside ────────────────────────────────────────────
   Same DOM and the same overrides as `.sticky-dialog`: pin the wrapper to the
   viewport, keep the box a centered flex child. The card owns its own scrolling,
   so the box must NOT scroll — otherwise the footer's CTA scrolls away with the
   list. */
.rz-dialog-wrapper:has(.link-objects-dialog) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    overflow: auto !important;
    padding: 0.5rem !important;
}

.rz-dialog-wrapper:has(.link-objects-dialog) .rz-dialog-mask {
    position: fixed !important;
    inset: 0 !important;
}

.rz-dialog.link-objects-dialog,
.link-objects-dialog.rz-dialog {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: auto !important;
    padding: 0 !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: 92dvh !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    box-shadow: 0 40px 90px -30px rgba(11, 16, 32, 0.35), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
}

.link-objects-dialog .rz-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 92dvh;
}

/* ── The card ───────────────────────────────────────────────────────────────*/
.eol-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 92dvh;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
}

.eol-shell *,
.eol-shell *::before,
.eol-shell *::after { box-sizing: border-box; }

/* ── Head ───────────────────────────────────────────────────────────────────*/
.eol-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 26px 20px;
    background: linear-gradient(180deg, #fffdf9, #faf6ee);
    border-bottom: 1px solid var(--ow-line);
}

.eol-head-text { flex: 1; min-width: 0; }

.eol-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ow-champagne-deep);
    font-weight: 600;
    margin-bottom: 6px;
}

.eol-eyebrow .material-symbols-outlined { font-size: 1rem; }

.eol-title {
    font-family: var(--ow-serif);
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    color: var(--ow-ink);
}

.eol-sub {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #6c6656;
    max-width: 52ch;
    text-wrap: pretty;
}

.eol-icon-btn {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: #6c6656;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--own-dur-fast, 150ms) var(--own-ease, ease),
                color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                border-color var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-icon-btn:hover:not(:disabled) {
    background: var(--ow-cream);
    color: var(--ow-ink);
    border-color: var(--ow-cream-deep);
}

.eol-icon-btn:disabled { opacity: 0.4; cursor: default; }
.eol-icon-btn .material-symbols-outlined { font-size: 1.25rem; }

/* ── Error strip ────────────────────────────────────────────────────────────*/
.eol-alert {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 26px;
    background: #fdf1f1;
    border-bottom: 1px solid #f3d7d7;
    color: #8c2f2f;
    font-size: 0.87rem;
}

.eol-alert .material-symbols-outlined { font-size: 1.15rem; flex: none; }
.eol-alert-text { flex: 1; min-width: 0; }

.eol-alert-x {
    flex: none;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 2px;
    display: grid;
    place-items: center;
    opacity: 0.7;
}

.eol-alert-x:hover { opacity: 1; }
.eol-alert-x .material-symbols-outlined { font-size: 1rem; }

/* ── Filter bar ─────────────────────────────────────────────────────────────*/
.eol-filters {
    flex: none;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 18px 26px;
    background: var(--ow-cream);
    border-bottom: 1px solid var(--ow-line);
    position: relative;
    z-index: 5;
}

.eol-fld { position: relative; display: block; min-width: 0; }

/* The label rides the field's top border, so a long German label still reads at
   a narrow column width instead of being clipped by the input. */
.eol-fld-label {
    position: absolute;
    top: -7px;
    left: 11px;
    z-index: 1;
    padding: 0 6px;
    background: var(--ow-cream);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8371;
    font-weight: 600;
    white-space: nowrap;
    max-width: calc(100% - 22px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.eol-input {
    width: 100%;
    appearance: none;
    font: inherit;
    font-size: 0.92rem;
    color: var(--ow-ink);
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    padding: 11px 13px;
    transition: border-color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                box-shadow var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-input::placeholder { color: #a9a293; }

.eol-input:focus {
    outline: none;
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.18);
}

/* Type picker: a button that opens a menu, so each option can carry its type
   icon — a native <select> cannot. */
.eol-selbtn {
    width: 100%;
    font: inherit;
    font-size: 0.92rem;
    color: var(--ow-ink);
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    padding: 11px 34px 11px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    transition: border-color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                box-shadow var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-selbtn:hover { border-color: var(--ow-cream-deep); }

.eol-selbtn-open {
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.18);
}

.eol-selbtn-open .eol-chev { transform: translateY(-50%) rotate(180deg); }

.eol-sel-glyph {
    font-size: 1.1rem;
    color: var(--ow-champagne-deep);
    flex: none;
}

.eol-sel-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eol-chev {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ow-champagne-deep);
    font-size: 1.15rem;
    pointer-events: none;
}

/* Catches the click that dismisses the menu without a JS outside-click listener. */
.eol-selveil {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.eol-selmenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    box-shadow: 0 24px 50px -18px rgba(11, 16, 32, 0.35);
    padding: 6px;
    max-height: 290px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.eol-selopt {
    font: inherit;
    font-size: 0.9rem;
    color: #3f3a2c;
    background: none;
    border: 0;
    border-radius: 9px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    text-align: left;
    transition: background var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-selopt:hover { background: var(--ow-cream); }

.eol-selopt-on {
    background: var(--ow-cream);
    color: var(--ow-ink);
    font-weight: 600;
}

.eol-tick {
    margin-left: auto;
    font-size: 1rem;
    color: var(--ow-champagne);
    opacity: 0;
    flex: none;
}

.eol-selopt-on .eol-tick { opacity: 1; }

/* The shared OwnDatePicker keeps its behaviour (dialog picker, clear button) and
   only borrows this bar's field skin. */
.eol-filters .eol-date.rz-datepicker {
    width: 100%;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                box-shadow var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-filters .eol-date.rz-datepicker:focus-within {
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.18);
}

.eol-filters .eol-date .rz-inputtext {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    color: var(--ow-ink);
    padding: 11px 12px;
    box-shadow: none;
}

.eol-filters .eol-date .rz-datepicker-trigger {
    background: transparent;
    border: 0;
    color: var(--ow-champagne-deep);
    box-shadow: none;
}

/* ── Toolbar ────────────────────────────────────────────────────────────────*/
.eol-toolbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 26px;
    border-bottom: 1px solid var(--ow-line-soft);
    background: var(--ow-paper);
}

.eol-chk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ow-ink);
    user-select: none;
}

.eol-chk:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 3px; border-radius: 6px; }

.eol-hint-inline { font-size: 0.9rem; color: #8a8371; }

.eol-box {
    position: relative;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    border: 1.5px solid #cfc8b8;
    background: var(--ow-paper);
    display: grid;
    place-items: center;
    transition: background var(--own-dur-fast, 150ms) var(--own-ease, ease),
                border-color var(--own-dur-fast, 150ms) var(--own-ease, ease);
    flex: none;
}

.eol-box .material-symbols-outlined {
    font-size: 0.95rem;
    color: var(--ow-paper);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity var(--own-dur-fast, 150ms) var(--own-ease, ease),
                transform var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-chk:hover .eol-box,
.eol-row-item:hover .eol-box { border-color: var(--ow-champagne); }

.eol-box-on { background: var(--ow-ink); border-color: var(--ow-ink); }

.eol-box-on .material-symbols-outlined {
    opacity: 1;
    transform: scale(1);
    color: var(--ow-champagne);
}

.eol-box-some { background: var(--ow-ink); border-color: var(--ow-ink); }

.eol-box-some::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 1.5px;
    background: var(--ow-champagne);
}

.eol-tb-spacer { flex: 1; }

.eol-tb-count {
    font-size: 0.82rem;
    color: #8a8371;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.eol-tb-count b {
    font-family: var(--ow-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ow-ink);
    margin-right: 3px;
}

/* A text action, used for "clear selection" and "reset filters". */
.eol-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.82rem;
    color: var(--ow-champagne-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.eol-linkbtn:hover { color: var(--ow-ink); }

/* ── Table ──────────────────────────────────────────────────────────────────*/
.eol-tbl {
    overflow: auto;
    flex: 1;
    min-height: 240px;
}

.eol-row {
    display: grid;
    grid-template-columns: 52px 60px minmax(0, 1fr) 190px 120px;
    align-items: center;
    padding: 0 26px;
    border-bottom: 1px solid var(--ow-line-soft);
}

.eol-row-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ow-cream);
    border-bottom: 1px solid var(--ow-line);
    padding-top: 9px;
    padding-bottom: 9px;
}

.eol-row-head div {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8a8371;
    font-weight: 700;
}

.eol-row-item {
    min-height: 48px;
    cursor: pointer;
    position: relative;
    transition: background var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-row-item:hover { background: #fdfbf6; }
.eol-row-item:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: -2px; }

.eol-row-on { background: linear-gradient(90deg, rgba(201, 169, 106, 0.14), rgba(201, 169, 106, 0.05)); }

.eol-row-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ow-champagne);
}

/* ── Pick mode ──────────────────────────────────────────────────────────────
   PickOnClick turns the dialog into a plain picker: the row is the button and a
   click chooses the object outright. The leftmost cell swaps the checkbox for a
   Select button that names the gesture, so the column needs the room a label
   takes. The button is decorative in the tab order (tabindex="-1" in the markup)
   — the row already carries focus and Enter/Space — so it never steals a stop
   from keyboard users. */
.eol-tbl-pick .eol-row { grid-template-columns: 116px 60px minmax(0, 1fr) 190px 120px; }

.eol-pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #57513f;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 5px 12px 5px 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--own-dur-fast, 150ms) var(--own-ease, ease),
                border-color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                color var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-pick-btn .material-symbols-outlined { font-size: 0.95rem; color: var(--ow-champagne-deep); }

.eol-row-item:hover .eol-pick-btn,
.eol-pick-btn:hover {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: #fff;
}

.eol-row-item:hover .eol-pick-btn .material-symbols-outlined,
.eol-pick-btn:hover .material-symbols-outlined { color: var(--ow-champagne); }

.eol-thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    display: grid;
    place-items: center;
    color: var(--ow-champagne-deep);
    overflow: hidden;
}

.eol-thumb .material-symbols-outlined { font-size: 1.15rem; }

.eol-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eol-nm { min-width: 0; padding-right: 16px; }

.eol-nm-n {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ow-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eol-ty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.86rem;
    color: #57513f;
}

.eol-ty .material-symbols-outlined { font-size: 1.05rem; color: var(--ow-champagne-deep); flex: none; }

.eol-ty-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eol-dt {
    font-size: 0.85rem;
    color: #7d7664;
    font-variant-numeric: tabular-nums;
}

.eol-empty {
    padding: 56px 26px;
    text-align: center;
    color: #8a8371;
    font-size: 0.9rem;
}

.eol-empty .material-symbols-outlined {
    font-size: 2rem;
    color: var(--ow-champagne);
    display: block;
    margin: 0 auto 10px;
}

/* ── Pager ──────────────────────────────────────────────────────────────────*/
.eol-pager {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 26px;
    border-top: 1px solid var(--ow-line-soft);
    background: var(--ow-paper);
}

.eol-pg {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: none;
    font: inherit;
    font-size: 0.87rem;
    color: #57513f;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--own-dur-fast, 150ms) var(--own-ease, ease),
                color var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.eol-pg:hover:not(:disabled) { background: var(--ow-cream); color: var(--ow-ink); }
.eol-pg-on { background: var(--ow-ink); color: #fff; font-weight: 600; }
.eol-pg-on:hover { background: var(--ow-ink-2); color: #fff; }
.eol-pg:disabled { opacity: 0.3; cursor: default; }
.eol-pg .material-symbols-outlined { font-size: 1.1rem; }

.eol-pg-gap { color: #a9a293; padding: 0 2px; }

.eol-pg-lead { margin-right: auto; font-size: 0.8rem; color: #9a9382; white-space: nowrap; }
.eol-pg-range { margin-left: auto; font-size: 0.8rem; color: #9a9382; letter-spacing: 0.02em; white-space: nowrap; }

/* ── Footer ─────────────────────────────────────────────────────────────────*/
.eol-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
    background: linear-gradient(180deg, #faf6ee, #f3ecdf);
    border-top: 1px solid var(--ow-line);
}

.eol-foot-hint {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    color: #7d7664;
    text-wrap: pretty;
}

.eol-btn {
    font: inherit;
    font-size: 0.92rem;
    border-radius: 12px;
    padding: 12px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--own-dur-base, 250ms) var(--own-ease, ease),
                color var(--own-dur-base, 250ms) var(--own-ease, ease),
                transform var(--own-dur-base, 250ms) var(--own-ease, ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.eol-btn-ghost { background: none; border-color: var(--ow-line); color: #57513f; }
.eol-btn-ghost:hover:not(:disabled) { background: var(--ow-paper); color: var(--ow-ink); }

.eol-btn-primary {
    background: var(--ow-ink);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(11, 16, 32, 0.7);
}

.eol-btn-primary .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne); }
.eol-btn-primary:hover:not(:disabled) { background: var(--ow-ink-2); transform: translateY(-1px); }

.eol-btn-primary:disabled {
    background: #dcd6c8;
    color: #8a8371;
    box-shadow: none;
    cursor: default;
}

.eol-btn-primary:disabled .material-symbols-outlined { color: #a9a293; }

/* ── Narrow ─────────────────────────────────────────────────────────────────
   Two filter columns, and the creation date — the least load-bearing column —
   gives up its space so the name keeps a readable width. */
@media (max-width: 820px) {
    .eol-filters { grid-template-columns: 1fr 1fr; }

    .eol-row {
        grid-template-columns: 44px 52px minmax(0, 1fr) 110px;
        padding: 0 16px;
    }

    /* No room for the word on a narrow screen; the check glyph and the clickable row
       carry the gesture on their own. The column keeps the checkbox column's width so the
       object name is no narrower here than in any other mode. */
    .eol-tbl-pick .eol-row { grid-template-columns: 44px 52px minmax(0, 1fr) 110px; }
    .eol-pick-btn { padding: 5px 8px; }
    .eol-pick-label { display: none; }

    .eol-row > .eol-dt { display: none; }

    .eol-head { padding: 18px 16px 14px; }
    .eol-title { font-size: 1.7rem; }
    .eol-toolbar, .eol-pager, .eol-foot { padding-left: 16px; padding-right: 16px; }
    .eol-pg-lead, .eol-pg-range { display: none; }
    .eol-foot { flex-wrap: wrap; }
    .eol-foot-hint { flex-basis: 100%; }
}

/* On a phone the card becomes a sheet against the bottom edge, like every other
   full-height dialog in the app. */
@media (max-width: 768px) {
    .rz-dialog-wrapper:has(.link-objects-dialog) {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .rz-dialog.link-objects-dialog,
    .link-objects-dialog.rz-dialog {
        margin: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
    }
}

.eol-empty-text { margin-right: 5px; }

/* =========================================================================
   OWNAMIC — Export centre tree (.ow-export-tree)
   The hierarchy on /exports, where a user picks what an archive covers.
   It is a checklist that nests, so it reuses .oc-checklist for the frame and
   only adds the row rhythm and the indent guide the nesting needs.
   Scoped under .own-canvas like the rest of the editorial language.
   ========================================================================= */
.own-canvas .ow-export-tree {
    max-height: 420px;
    overflow-y: auto;
}

.own-canvas .ow-export-tree-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

/* A nested row carries its own children, so the guide line has to sit on the
   row rather than on a wrapper — there is none. */
.own-canvas .ow-export-tree-row .ow-export-tree-row {
    border-left: 1px solid var(--ow-line);
    margin-left: 6px;
    width: 100%;
}

/* Chevron toggle: every parent starts collapsed, so this is how its contents
   are reached. Mirrors the My Objects tree — a rotating chevron, and an
   invisible one on leaves so the names still line up. */
.own-canvas .ow-export-tree-chev {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--own-fg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.own-canvas .ow-export-tree-chev:hover {
    background: var(--ow-cream-deep);
}

.own-canvas .ow-export-tree-chev .material-symbols-outlined {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.own-canvas .ow-export-tree-chev.open .material-symbols-outlined {
    transform: rotate(90deg);
}

.own-canvas .ow-export-tree-chev.placeholder {
    color: transparent;
    background: transparent;
    pointer-events: none;
}

.own-canvas .ow-export-tree-name {
    font-weight: 600;
    color: var(--ow-ink);
}

.own-canvas .ow-export-tree .oc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

/* =========================================================================
   OWNAMIC — Legal pages (.oc-legal-page / .own-canvas .oc-legal-*)
   Privacy policy, Terms & Conditions and the Imprint. They used to be bare
   Bootstrap containers — a white page, browser-default headings and an
   unstyled Radzen table of contents — while every other surface speaks the
   warm-cream "golden creme" language of the landing page.

   These rules dress the three documents in that same language and nothing
   more: the editorial masthead (eyebrow → serif headline → lead → meta
   chips), a cream page ground the paper cards float on, and a champagne
   accent doing the section marking. They build on the .own-canvas /.oc-*
   editorial kit above rather than repeating it, so a token changed there
   changes here too.
   ========================================================================= */

/* Full-bleed ground behind the canvas. The cream fades into paper roughly
   where the document body begins, so the masthead sits on warm ground and
   the long read sits on white. */
.oc-legal-page {
    padding: 0 16px;
    background:
        radial-gradient(72% 46% at 80% -8%, rgba(201, 169, 106, 0.16) 0%, rgba(201, 169, 106, 0) 62%),
        linear-gradient(180deg, var(--ow-cream) 0%, var(--ow-cream) 200px, var(--ow-paper) 640px);
}

.own-canvas--legal {
    max-width: 1220px;
}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.own-canvas .oc-legal-head {
    padding: 44px 0 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--ow-line);
}

/* .oc-back is inline-flex and the eyebrow that follows it is too, so the two
   would share a line and read as one broken sentence ("Back to OWNAMIC —
   LEGAL"). The back link gets a line of its own. */
.own-canvas .oc-legal-head .oc-back {
    display: flex;
    width: fit-content;
}

.own-canvas .oc-legal-head .oc-lead {
    max-width: 62ch;
}

.own-canvas .oc-legal-meta {
    margin-top: 22px;
}

.own-canvas .oc-legal-meta .oc-chip {
    background: var(--ow-paper);
}

.own-canvas .oc-legal-meta .oc-chip .material-symbols-outlined,
.own-canvas .oc-legal-meta .oc-chip .rz-icon,
.own-canvas .oc-legal-meta .oc-chip .rzi {
    font-size: 1.05rem;
    color: var(--ow-champagne-deep);
}

/* ── Document + table of contents ───────────────────────────────────────── */
.own-canvas .oc-legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 28px;
    align-items: start;
}

.own-canvas .oc-legal-aside {
    position: sticky;
    top: 88px;
    min-width: 0;
}

.own-canvas .oc-toc {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 20px;
    padding: 18px 14px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    box-shadow: 0 24px 60px -46px rgba(11, 16, 32, 0.45);
}

.own-canvas .oc-toc .oc-label {
    margin: 0 0 10px 12px;
}

/* Radzen brings its own frame for the TOC; strip it so only the card above
   is visible, then style the list by element so the rules survive whatever
   class names the component version happens to emit. */
.own-canvas .oc-toc .rz-toc {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.own-canvas .oc-toc ul,
.own-canvas .oc-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.own-canvas .oc-toc li {
    margin: 0;
}

.own-canvas .oc-toc a {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--own-fg-2);
    text-decoration: none;
    transition: background var(--own-dur-fast) var(--own-ease),
                color var(--own-dur-fast) var(--own-ease),
                box-shadow var(--own-dur-fast) var(--own-ease);
}

.own-canvas .oc-toc a:hover,
.own-canvas .oc-toc a:focus-visible {
    background: var(--ow-cream);
    color: var(--ow-ink);
    text-decoration: none;
}

/* The entry for the section currently in view. Radzen has spelled the state
   differently across versions, so every spelling it has used is covered —
   an unmatched selector costs nothing. */
.own-canvas .oc-toc a.rz-toc-link-selected,
.own-canvas .oc-toc a.rz-state-selected,
.own-canvas .oc-toc a.rz-state-active,
.own-canvas .oc-toc a[aria-current] {
    background: var(--ow-cream);
    color: var(--ow-ink);
    box-shadow: inset 3px 0 0 var(--ow-champagne);
}

/* ── The document itself ────────────────────────────────────────────────── */
.own-canvas .oc-legal-body {
    padding: 38px 44px;
    box-shadow: 0 30px 70px -55px rgba(11, 16, 32, 0.5);
}

/* Each numbered chapter is separated by a hairline rather than by white
   space alone, which is what made the old pages read as one undivided wall
   of text. `scroll-margin-top` keeps a TOC jump clear of the fixed header. */
.own-canvas .oc-legal-body > section {
    scroll-margin-top: 96px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px dashed var(--ow-cream-deep);
}

.own-canvas .oc-legal-body > section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.own-canvas .oc-legal-body h2 {
    position: relative;
    margin: 0 0 16px;
    padding-top: 16px;
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
}

.own-canvas .oc-legal-body h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 2px;
    background: var(--ow-champagne);
}

.own-canvas .oc-legal-body h3 {
    margin: 28px 0 10px;
    font-size: 1.28rem;
}

/* The recurring "Data categories / Legal basis / Recipients / Storage"
   labels of the privacy policy. They are headings, not prose, so they read
   as the champagne eyebrow the rest of the design system uses for labels. */
.own-canvas .oc-legal-body h4 {
    margin: 20px 0 6px;
    font-family: var(--own-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ow-champagne-deep);
}

.own-canvas .oc-legal-body p {
    margin: 0 0 14px;
    color: var(--own-fg-1);
}

.own-canvas .oc-legal-body > section > p:last-child,
.own-canvas .oc-legal-body ul:last-child {
    margin-bottom: 0;
}

.own-canvas .oc-legal-body ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.own-canvas .oc-legal-body ul > li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 20px;
}

.own-canvas .oc-legal-body ul > li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ow-champagne);
}

.own-canvas .oc-legal-body ol {
    margin: 0 0 16px 1.2em;
}

.own-canvas .oc-legal-body hr {
    border: none;
    border-top: 1px dashed var(--ow-cream-deep);
    margin: 28px 0;
}

/* Postal addresses — the controller in the privacy policy, the withdrawal
   recipient in the T&C — as a cream plate on a gold rail, so the reader can
   find the address to write to without re-reading the paragraph above it. */
.own-canvas .oc-address {
    margin: 0 0 16px;
    padding: 16px 20px;
    border: 1px solid var(--ow-line);
    border-left: 3px solid var(--ow-champagne);
    border-radius: 14px;
    background: var(--ow-cream);
    font-style: normal;
    line-height: 1.7;
    color: var(--own-fg-1);
}

/* The blanks of the statutory model withdrawal form. */
.own-canvas .oc-form-line {
    margin: 0 0 10px;
    padding: 12px 4px 14px;
    border-bottom: 1px dashed var(--ow-champagne);
    color: var(--own-fg-2);
    font-size: 0.92rem;
}

/* ── Imprint: fact cards ────────────────────────────────────────────────── */
/* Two columns, not `auto-fit`: the four § 5 DDG facts then form a tidy 2 x 2
   block instead of a row of three plus an orphan. The cards stretch to the
   height of their row (no `align-items: start`), so the pair in each row lines
   up along both edges. */
.own-canvas .oc-legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.own-canvas .oc-legal-grid .oc-card {
    margin-bottom: 0;
}

.own-canvas .oc-legal-card-title {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.own-canvas .oc-legal-fact {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ow-ink);
}

.own-canvas .oc-legal-fact + .oc-legal-fact {
    margin-top: 8px;
}

.own-canvas .oc-legal-fact a {
    color: var(--ow-champagne-deep);
    font-weight: 600;
}

.own-canvas .oc-legal-grid .oc-address {
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .own-canvas .oc-legal-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 991px) {
    .own-canvas .oc-legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The sticky rail has nowhere to stick on a phone and the jump links are
       reachable by scrolling anyway, so the document keeps the full width. */
    .own-canvas .oc-legal-aside {
        display: none;
    }
}

@media only screen and (max-width: 640px) {
    .oc-legal-page {
        padding: 0 10px;
    }

    .own-canvas .oc-legal-head {
        padding: 30px 0 24px;
        margin-bottom: 24px;
    }

    .own-canvas .oc-legal-body {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .own-canvas .oc-legal-body h2 {
        font-size: 1.4rem;
    }

    .own-canvas .oc-address {
        padding: 14px 16px;
    }
}

/* =========================================================================
   Event dialog — <EventDialog /> (add / edit an event on an object)
   Lives here rather than in a <style> block in the component so the golden-creme
   tokens are read from one place; the dialog is opened from the object detail
   page, the OWNY hub and the trade flow, and has to look the same in all three.

   The first step is the event-type picker, implemented from the design bundle
   "Event Type Picker": one scrolling list, a sticky heading per group, and a row
   per type that carries a disc icon, the name and one sentence saying what the
   type records. The two-tap group→type drill-down it replaced never showed that
   sentence, so the difference between "Wartung" and "Modernisiert" had to be
   guessed at.
   ========================================================================= */

/* Step indicator: one dot per wizard step, filled up to the current one. */
.event-wizard-steps {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}
.event-wizard-step-dot {
    width: 28px;
    height: 6px;
    border-radius: 3px;
    background: var(--ow-line, #e6e1d7);
    transition: background var(--own-dur-base, 250ms) var(--own-ease, ease);
}
.event-wizard-step-dot.is-active { background: var(--ow-champagne-deep, #a7864b); }
.event-wizard-step-dot.is-done { background: var(--ow-champagne, #c9a96a); }

/* ── Step 1: the event type picker ─────────────────────────────────────────── */

.ev-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ev-picker-lead {
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--own-fg-2, #475569);
}

/* The list scrolls inside the dialog so the Cancel button below it never walks off
   screen on a phone; the wrapper exists to hold the fade, which must not scroll. */
.ev-picker-scroll {
    position: relative;
    min-height: 0;
}
.ev-picker-list {
    max-height: min(52vh, 460px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--ow-line, #e6e1d7) transparent;
}
/* Tells the reader there is more below without adding a scrollbar to the design. */
.ev-picker-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--ow-paper, #fff));
    pointer-events: none;
}

/* Sticky group heading. The gradient background lets the rows slide under it
   without a hard edge; 78% opaque paper is enough to keep the caps legible. */
.ev-picker-group {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.5rem 0.5rem;
    background: linear-gradient(180deg, var(--ow-paper, #fff) 78%, rgba(255, 255, 255, 0));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ow-champagne-deep, #a7864b);
}
.ev-picker-group .rzi,
.ev-picker-group .rz-icon {
    font-size: 1.05rem;
    color: var(--ow-champagne, #c9a96a);
}

/* One row per event type, and the same shape for the OWNY scan shortcut above. */
.ev-picker-row,
.ev-picker-scan {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 64px;
    margin: 0 0 0.5rem;
    padding: 0.75rem;
    text-align: left;
    font: inherit;
    color: var(--ow-ink, #0b1020);
    background: var(--ow-paper, #fff);
    border: 1px solid var(--ow-line, #e6e1d7);
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                background var(--own-dur-fast, 150ms) var(--own-ease, ease),
                box-shadow var(--own-dur-fast, 150ms) var(--own-ease, ease);
}
/* Own the surface and the text colour in every interactive state: the Radzen theme
   styles bare <button> elements on hover/focus and would otherwise wash a saturated
   primary over the row and take the label with it. */
.ev-picker-row:hover,
.ev-picker-row:focus,
.ev-picker-row:focus-visible,
.ev-picker-row:active,
.ev-picker-scan:hover,
.ev-picker-scan:focus,
.ev-picker-scan:focus-visible,
.ev-picker-scan:active {
    color: var(--ow-ink, #0b1020);
}
.ev-picker-row:hover,
.ev-picker-scan:hover:not(:disabled) {
    border-color: rgba(167, 134, 75, 0.38);
    background: rgba(201, 169, 106, 0.10);
}
.ev-picker-row:active,
.ev-picker-scan:active:not(:disabled) {
    background: rgba(201, 169, 106, 0.16);
}
.ev-picker-row:focus-visible {
    outline: 2px solid var(--ow-champagne-deep, #a7864b);
    outline-offset: -2px;
}
.ev-picker-scan:focus-visible {
    outline: 2px solid var(--ow-champagne-deep, #a7864b);
    outline-offset: 2px;
}
/* The type already chosen — set apart by an inset rule rather than a fill, so the
   description under it stays as readable as every other row's. */
.ev-picker-row.is-selected {
    border-color: var(--ow-champagne-deep, #a7864b);
    background: rgba(201, 169, 106, 0.10);
    box-shadow: inset 0 0 0 1px var(--ow-champagne-deep, #a7864b);
}

.ev-picker-disc {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(201, 169, 106, 0.14);
    color: var(--ow-champagne-deep, #a7864b);
}
.ev-picker-disc .rzi,
.ev-picker-disc .rz-icon { font-size: 1.45rem; }

.ev-picker-tx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ev-picker-name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--ow-ink, #0b1020);
}
.ev-picker-desc {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--own-fg-2, #475569);
    text-wrap: pretty;
}

.ev-picker-go {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: var(--own-fg-3, #94a3b8);
    transition: color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                transform var(--own-dur-fast, 150ms) var(--own-ease, ease);
}
.ev-picker-row:hover .ev-picker-go,
.ev-picker-scan:hover:not(:disabled) .ev-picker-go {
    color: var(--ow-champagne-deep, #a7864b);
    transform: translateX(2px);
}
.ev-picker-row.is-selected .ev-picker-go { color: var(--ow-champagne-deep, #a7864b); }

/* The OWNY shortcut sits above the list and outside it: ink instead of paper, so it
   reads as the way past the list rather than as its first entry. */
.ev-picker-scan {
    margin-bottom: 0.25rem;
    color: var(--ow-cream, #f6f1e7);
    background: linear-gradient(135deg, var(--ow-ink, #0b1020) 0%, var(--ow-ink-2, #141a33) 100%);
    border-color: var(--ow-ink-2, #141a33);
    box-shadow: 0 10px 24px rgba(11, 16, 32, 0.18);
}
.ev-picker-scan:hover:not(:disabled),
.ev-picker-scan:focus:not(:disabled),
.ev-picker-scan:focus-visible:not(:disabled),
.ev-picker-scan:active:not(:disabled) {
    color: var(--ow-cream, #f6f1e7);
    background: linear-gradient(135deg, var(--ow-ink-2, #141a33) 0%, var(--ow-ink, #0b1020) 100%);
    border-color: var(--ow-champagne-deep, #a7864b);
}
.ev-picker-scan:disabled { opacity: 0.75; cursor: default; }
.ev-picker-scan .ev-picker-disc {
    background: rgba(201, 169, 106, 0.22);
    color: var(--ow-champagne, #c9a96a);
}
.ev-picker-scan .ev-picker-name { color: var(--ow-cream, #f6f1e7); }
.ev-picker-scan .ev-picker-desc { color: rgba(246, 241, 231, 0.72); }
.ev-picker-scan .ev-picker-go { color: var(--ow-champagne, #c9a96a); }

/* Runs in place of the disc's icon while the picked photo or PDF is being read. */
.ev-picker-spinner {
    width: 1.35rem;
    height: 1.35rem;
    border: 2.5px solid rgba(201, 169, 106, 0.35);
    border-top-color: var(--ow-champagne, #c9a96a);
    border-radius: 50%;
    animation: ev-picker-spin 0.7s linear infinite;
}
@keyframes ev-picker-spin { to { transform: rotate(360deg); } }

/* ── Step 2: the details form ──────────────────────────────────────────────── */

/* Names the type the form is filling in, with the way back to the picker. */
.event-wizard-type-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: rgba(201, 169, 106, 0.12);
    color: var(--ow-ink, #0b1020);
    font-weight: 600;
}
.event-wizard-type-chip > span { flex: 1; }
.event-wizard-type-chip .rzi,
.event-wizard-type-chip .rz-icon { color: var(--ow-champagne-deep, #a7864b); }

/* Certificate of authenticity: the methods an assessor ticks off. */
.event-coa-methods {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.event-coa-method {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* ── Step 3: attachments and the signature offer ───────────────────────────── */

.event-attachment-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ow-line, #e6e1d7);
    border-radius: 8px;
    max-width: 220px;
}
.event-attachment-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sets the signature offer apart from the upload actions above it without
   competing with the primary "Done" action below. */
.event-ses-card {
    border-radius: 12px;
    background: var(--ow-cream, #f6f1e7);
}

@media only screen and (max-width: 640px) {
    /* On a phone the dialog is nearly full height, so the list may use more of it. */
    .ev-picker-list { max-height: min(60vh, 520px); }
    .ev-picker-row,
    .ev-picker-scan { gap: 0.7rem; padding: 0.7rem; }
    .ev-picker-disc { width: 40px; height: 40px; }
    .ev-picker-disc .rzi,
    .ev-picker-disc .rz-icon { font-size: 1.3rem; }
}

/* ═══════════════════════ LANDING — ANLASS-EINSTIEG (Was führt dich her?) ═══════════════════════
   Chooser on the start view, the occasion hero of the sub-views, the four-bucket Entrümpeln
   section and the related-occasions strip. Ported 1:1 from the occasion design; prefix ax-. */

/* ── Chooser (start view, cream) ── */
.lp .ax-choose { background: var(--ow-cream); padding: 84px 0 72px; border-bottom: 1px solid var(--ow-line); }
.lp .ax-choose .lp-section-head { margin-bottom: 36px; }
.lp .ax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp .ax-card { display: flex; flex-direction: column; gap: 12px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 20px; padding: 24px; text-decoration: none; color: var(--ow-ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; text-align: left; font: inherit; }
.lp .ax-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(11,16,32,.10); border-color: var(--ow-champagne); }
.lp .ax-card .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ow-blush); color: var(--ow-champagne-deep); }
.lp .ax-card .ico .material-symbols-outlined { font-size: 24px; }
.lp .ax-card h3 { margin: 0; font-family: var(--ow-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.lp .ax-card .tag { font-family: var(--ow-hand); font-size: 1.18rem; color: var(--ow-champagne-deep); line-height: 1.25; }
.lp .ax-card .go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ow-ink); }
.lp .ax-card .go .material-symbols-outlined { font-size: 18px; transition: transform .18s ease; }
.lp .ax-card:hover .go .material-symbols-outlined { transform: translateX(3px); }
/* The chooser rows are anchors (each one is the entrance to a real page), so both of them cancel
   the underline and inherit the type the button versions used to get from `font: inherit`. */
.lp .ax-all { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ow-ink); color: #fff; border-radius: 20px; padding: 20px 24px; border: none; width: 100%; cursor: pointer; font: inherit; text-align: left; text-decoration: none; }
.lp .ax-all .l { display: flex; align-items: center; gap: 14px; }
.lp .ax-all .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--ow-champagne); }
.lp .ax-all h3 { margin: 0; font-family: var(--ow-serif); font-size: 1.2rem; font-weight: 600; color: #fff; }
.lp .ax-all p { margin: 2px 0 0; font-size: .85rem; color: rgba(255,255,255,.65); }
.lp .ax-all .material-symbols-outlined.arrow { color: var(--ow-champagne); }
.lp .ax-all:hover { background: var(--ow-ink-2); }

/* ── Anlass hero (dark, like the main hero) ── */
.lp .ax-hero { background: var(--ow-ink); color: #fff; padding: 120px 0 64px; }
.lp .ax-hero .crumb { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: rgba(255,255,255,.6); text-decoration: none; margin-bottom: 22px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.lp .ax-hero .crumb:hover { color: var(--ow-champagne); }
.lp .ax-hero .crumb .material-symbols-outlined { font-size: 17px; }
.lp .ax-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.lp .ax-hero .who { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ow-champagne); margin-bottom: 16px; }
.lp .ax-hero .who .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(201,169,106,.14); }
.lp .ax-hero .who .ico .material-symbols-outlined { font-size: 19px; }
.lp .ax-hero h1 { color: #fff; font-family: var(--ow-serif); font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.08; font-weight: 600; margin: 0 0 18px; letter-spacing: -.01em; }
.lp .ax-hero h1 em { font-style: italic; color: var(--ow-champagne); }
.lp .ax-hero .tagline { font-family: var(--ow-hand); font-size: 1.35rem; color: rgba(255,255,255,.55); margin: 0 0 10px; }
.lp .ax-hero .lede { font-size: 1.06rem; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 34rem; margin: 0 0 26px; }
.lp .ax-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp .ax-takes { display: grid; gap: 12px; }
.lp .ax-take { display: grid; grid-template-columns: auto 1fr; gap: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--ow-line-dark); border-radius: 16px; padding: 16px 18px; }
.lp .ax-take .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(201,169,106,.14); color: var(--ow-champagne); }
.lp .ax-take .ico .material-symbols-outlined { font-size: 21px; }
.lp .ax-take b { display: block; font-size: .95rem; margin-bottom: 3px; }
.lp .ax-take p { margin: 0; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.62); }
.lp .ax-steps { border-top: 1px solid var(--ow-line-dark); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.lp .ax-steps .k { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.lp .ax-step { display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; color: rgba(255,255,255,.82); }
.lp .ax-step .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ow-champagne); color: var(--ow-ink); font-size: .78rem; font-weight: 700; }

/* ── Vier Felder (Entrümpeln) ── */
.lp .ax-q4 { background: var(--ow-paper); padding: 84px 0; border-top: 1px solid var(--ow-line); }
.lp .ax-q4-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; margin-top: 36px; }
.lp .ax-q4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Three fields, not four: the keep field takes the first row on its own, the two letting-go
   fields share the second — the same split as the partner page's .q4-grid. */
.lp .ax-q4-grid > .ax-q4-cell:first-child { grid-column: 1 / -1; }
.lp .ax-q4-cell { background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 18px; padding: 20px; transition: border-color .2s ease, box-shadow .2s ease; }
.lp .ax-q4-cell.chosen { border-color: var(--ow-champagne); box-shadow: 0 12px 32px rgba(201,169,106,.22); }
.lp .ax-q4-cell .c-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lp .ax-q4-cell .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ow-blush); color: var(--ow-champagne-deep); }
.lp .ax-q4-cell .ico .material-symbols-outlined { font-size: 20px; }
.lp .ax-q4-cell.sell .ico { background: rgba(201,169,106,.2); color: var(--ow-champagne-deep); }
.lp .ax-q4-cell .name { font-family: var(--ow-serif); font-size: 1.15rem; font-weight: 600; }
.lp .ax-q4-cell .c-count { font-family: var(--ow-serif); font-size: 2rem; font-weight: 600; line-height: 1; }
.lp .ax-q4-cell .c-count small { font-size: .8rem; font-weight: 400; color: rgba(11,16,32,.5); margin-left: 8px; font-family: var(--ow-serif); }
.lp .ax-q4-cell .c-stats { display: flex; flex-direction: column; gap: 5px; margin: 14px 0 10px; }
.lp .ax-q4-cell .s { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: rgba(11,16,32,.6); }
.lp .ax-q4-cell .s .material-symbols-outlined { font-size: 16px; color: rgba(11,16,32,.4); }
.lp .ax-q4-cell .s.sum.has { color: var(--ow-champagne-deep); font-weight: 600; }
.lp .ax-q4-cell .s.sum.has .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp .ax-q4-cell .c-note { font-size: .78rem; color: rgba(11,16,32,.45); border-top: 1px dashed var(--ow-line); padding-top: 10px; }
.lp .ax-q4-try { background: var(--ow-ink); color: #fff; border-radius: 20px; padding: 26px; }
.lp .ax-q4-try .k { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ow-champagne); margin-bottom: 14px; }
.lp .ax-q4-try .k .material-symbols-outlined { font-size: 17px; }
.lp .ax-q4-try h3 { margin: 0 0 8px; font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 600; color: #fff; }
.lp .ax-q4-try p { margin: 0 0 18px; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.65); }
/* One button per field — "Verkaufen oder Verschenken" does not fit a half-width button. */
.lp .ax-q4-choose { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.lp .ax-q4-choose .ch { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--ow-line-dark); background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); font: inherit; font-size: .88rem; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.lp .ax-q4-choose .ch .material-symbols-outlined { font-size: 18px; }
.lp .ax-q4-choose .ch:hover { border-color: var(--ow-champagne); }
.lp .ax-q4-choose .ch.on { background: var(--ow-champagne); border-color: var(--ow-champagne); color: var(--ow-ink); font-weight: 600; }
.lp .ax-q4-total { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--ow-line-dark); padding-top: 16px; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.75); }
.lp .ax-q4-total .material-symbols-outlined { color: var(--ow-champagne); font-size: 22px; flex: none; }
.lp .ax-q4-total b { color: var(--ow-champagne); }
@media (max-width: 960px) { .lp .ax-q4-inner { grid-template-columns: 1fr; } }

/* ── Related occasions ── */
.lp .ax-related { background: var(--ow-cream-deep); padding: 56px 0; border-top: 1px solid var(--ow-line); }
.lp .ax-related .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.lp .ax-rel { display: flex; align-items: center; gap: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; padding: 16px 18px; color: var(--ow-ink); cursor: pointer; font: inherit; text-align: left; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.lp .ax-rel:hover { border-color: var(--ow-champagne); transform: translateY(-2px); }
.lp .ax-rel .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ow-blush); color: var(--ow-champagne-deep); flex: none; }
.lp .ax-rel b { display: block; font-size: .95rem; }
.lp .ax-rel small { color: rgba(11,16,32,.55); font-size: .8rem; }
.lp .ax-rel .material-symbols-outlined.arrow { margin-left: auto; font-size: 18px; color: var(--ow-champagne-deep); }

/* Nav: six occasion links need room — hide them below, the CTA stays visible */
.lp .lp-nav-links a { white-space: nowrap; }
@media (max-width: 1240px) { .lp .lp-nav-links a.ax-nav-link { display: none; } }
@media (max-width: 960px) { .lp .ax-grid { grid-template-columns: 1fr 1fr; } .lp .ax-hero-inner { grid-template-columns: 1fr; } .lp .ax-related .rel-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .lp .ax-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════ LANDING — EINBLICKE (in-app screenshots) ═══════════════════════
   The band directly under the hero, holding nine real screens of the app in a horizontal rail.
   Dark because the screenshots are bright objects and want a passe-partout, and because the hero
   above and the trust strip below it are: the three read as one ledge the page rests on. The rail
   is a scroll-snap
   list, so it is swiped on a phone and keyboard-scrolled anywhere; the two arrows next to the
   headline are a desktop convenience einblickeRail.js switches on (they are `hidden` until then).
   Prefix lp-einb-. */
.lp .lp-einblicke { background: var(--ow-ink); color: #fff; overflow: hidden; }
.lp .lp-einblicke .lp-section-head { margin-bottom: 40px; align-items: flex-end; }
.lp .lp-einblicke .lp-eyebrow { color: var(--ow-champagne); }
.lp .lp-einblicke .lp-section-head h2 { color: #fff; }
/* Champagne, not the indigo a headline `em` gets on a light section — the accent of every dark
   band on this page (hero, occasion hero, closing). On its own line, so the headline reads as the
   two sentences it is instead of wrapping wherever the German happens to run out of width. */
.lp .lp-einblicke .lp-section-head h2 em { display: block; color: var(--ow-champagne); }
.lp .lp-einblicke .lede { margin: 18px 0 0; max-width: 38rem; font-size: var(--ow-lede-size); line-height: 1.65; color: rgba(255,255,255,.72); }

.lp .lp-einb-controls { display: flex; align-items: center; gap: 12px; }
.lp .lp-einb-controls[hidden] { display: none; }
.lp .lp-einb-controls button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--ow-line-dark); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.lp .lp-einb-controls button:hover:not(:disabled) { border-color: var(--ow-champagne); background: rgba(201,169,106,.10); }
.lp .lp-einb-controls button:disabled { opacity: .35; cursor: default; }
.lp .lp-einb-controls .material-symbols-outlined { font-size: 22px; }

/* The rail breaks out of .lp-shell and carries the shell's gutter as its own padding, so the
   cards start on the shell's left edge and the last one still clears the right one.
   scroll-padding repeats it, otherwise a snapped card would sit flush against the viewport. */
.lp .lp-einb-rail { display: flex; gap: clamp(16px, 2.4vw, 28px); margin: 0; padding: 4px max(32px, calc((100vw - 1240px) / 2 + 32px)) 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(32px, calc((100vw - 1240px) / 2 + 32px)); overscroll-behavior-x: contain; scrollbar-width: none; }
.lp .lp-einb-rail::-webkit-scrollbar { display: none; }
.lp .lp-einb-rail:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 6px; border-radius: 12px; }

.lp .lp-einb-card { flex: 0 0 clamp(232px, 68vw, 300px); scroll-snap-align: start; }
.lp .lp-einb-card figure { margin: 0; }
/* The screenshots are 720×1280, and the ratio is spelled out as well so the dark plate is
   already the right height before the image itself has loaded. */
.lp .lp-einb-card img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 26px; border: 1px solid var(--ow-line-dark); background: var(--ow-ink-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.lp .lp-einb-card figcaption { margin-top: 18px; font-family: var(--ow-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.2; color: #fff; }
.lp .lp-einb-card figcaption em { display: block; font-style: italic; color: var(--ow-champagne); }

/* The rail runs off the right edge of the window, and on a wide screen the cut can land exactly
   between two cards — which reads as "that was all". The band fades into the section's own
   background instead, and einblickeRail.js takes the fade away once the last card is reached
   (it also carries the class, so a page without JS keeps the honest "there is more" state). */
.lp .lp-einblicke::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(40px, 7vw, 110px); background: linear-gradient(90deg, transparent, var(--ow-ink)); pointer-events: none; opacity: 1; transition: opacity .25s ease; }
.lp .lp-einblicke.lp-einb-at-end::after { opacity: 0; }

.lp .lp-einb-note { display: flex; align-items: center; gap: 8px; margin: 28px 0 0; font-size: .85rem; color: rgba(255,255,255,.55); }
.lp .lp-einb-note .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne); }

@media (max-width: 720px) {
  /* Swiping is the gesture here, and the arrows would take the width the headline needs. */
  .lp .lp-einb-controls { display: none !important; }
  .lp .lp-einb-rail { padding-inline: 20px; scroll-padding-inline: 20px; }
  .lp .lp-einb-card figcaption { font-size: 1.25rem; }
}

/* =========================================================================
   OWNER FACTS — "additional information", asked one fact at a time
   The input the capture wizard introduced (a chip strip that opens labelled
   rows instead of one blank paragraph), lifted into <OwnerFactsInput> so every
   AI surface can ask the same way. The wizard paints its own copy from its
   scoped stylesheet; this block is the shared one and reads the interior
   palette straight from :root, so a re-estimate dialog and a capture step look
   like the same question asked twice.
   ========================================================================= */
.ow-facts {
    display: block;
}

/* A small-caps rule that names the group and then gets out of the way. */
.ow-facts .ow-facts-label {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    color: var(--ow-champagne-deep);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.ow-facts .ow-facts-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ow-line);
}

/* "optional" travels with the heading rather than after it, so the group reads
   as an offer at a glance instead of as another thing to fill in. */
.ow-facts .ow-facts-label .optional {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    color: var(--own-fg-3);
    order: 1;
}

.ow-facts .ow-facts-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ow-facts .ow-fact-row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    padding: 9px 10px 9px 11px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ow-facts .ow-fact-row:focus-within {
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, .18);
}

.ow-facts .ow-fact-row .f-ico {
    display: grid;
    place-items: center;
    color: var(--ow-champagne-deep);
    flex: 0 0 20px;
}

.ow-facts .ow-fact-row .f-ico .material-symbols-outlined {
    font-size: 19px;
}

/* Fixed label column so the values line up down the list. German runs long, so
   it wraps to two lines rather than pushing the input off the row. */
.ow-facts .ow-fact-row .f-lbl {
    flex: 0 0 96px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: #6b7280;
    line-height: 1.2;
}

.ow-facts .ow-fact-row .f-in {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: .94rem;
    font-weight: 600;
    color: var(--ow-ink);
    background: transparent;
    border: 0;
    outline: none;
    padding: 2px 0;
}

.ow-facts .ow-fact-row .f-in::placeholder {
    color: var(--own-fg-3);
    font-weight: 500;
}

.ow-facts .ow-fact-row .f-rm {
    background: transparent;
    border: 0;
    padding: 2px;
    color: var(--own-fg-3);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.ow-facts .ow-fact-row .f-rm .material-symbols-outlined {
    font-size: 16px;
}

.ow-facts .ow-fact-row .f-rm:hover {
    color: var(--ow-champagne-deep);
}

.ow-facts .ow-facts-adds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Dashed, because each one is a blank waiting to be filled rather than a choice
   already made. */
.ow-facts .ow-fact-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed var(--ow-line-soft);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.ow-facts .ow-fact-add:hover {
    border-color: var(--ow-champagne);
    color: var(--ow-champagne-deep);
}

.ow-facts .ow-fact-add .material-symbols-outlined {
    font-size: 16px;
    color: var(--ow-champagne-deep);
}

/* OWNY says the one thing worth saying about the rows, and says it once. */
.ow-facts .ow-facts-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--own-fg-2);
}

.ow-facts .ow-facts-tip b {
    color: var(--ow-ink);
    font-weight: 600;
}

/* ── Static-SSR chrome (MainLayout.IsStatic: the blog pages for a signed-in user) ─────────────
   The sidebar drawer, header menu and bottom bar rebuilt from things a browser operates without a
   Blazor circuit: a checkbox + label drive the drawer and the menus, links are links. The look is
   the interactive chrome's — the sidebar rules in MainLayout.razor.css (dark gradient, rounded
   items, gold section label, gradient on the selected item), HeaderDropDownMenu's dropdown and
   MobileBottomNav's items — so a signed-in user who opens an article is still in the same app. */
.own-static-nav-state,
.own-static-menu__state { display: none; }

/* Header toggle: the same 40px hamburger box RadzenSidebarToggle draws. */
.own-static-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 8px; border-radius: 8px;
    color: var(--ow-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.own-static-nav-toggle:hover { background: var(--ow-cream); }

/* ── The drawer ── */
.own-static-nav {
    position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 85vw;
    display: flex; flex-direction: column; padding: 0 0 1rem; overflow-y: auto; z-index: 1200;
    background: linear-gradient(135deg, #090a15 0%, #150f24 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%); transition: transform 0.2s ease;
}
.own-static-nav-state:checked ~ .own-static-nav { transform: none; }

.own-static-nav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1199;
    background: rgba(11, 16, 32, 0.45); cursor: pointer;
}
.own-static-nav-state:checked ~ .own-static-nav-backdrop { display: block; }

/* Brand row with the close button: the drawer slides over the header and its toggle, so the way
   back has to be inside it. */
.own-static-nav__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.85rem 0.75rem 0.85rem 1.25rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.own-static-nav__brand {
    display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; text-decoration: none;
}
.own-static-nav__brand .ownamic-logo-text { color: #ffffff; font-size: 1.25rem; padding-top: 0; }
.own-static-nav__brand-mark { width: 28px; height: 28px; flex: 0 0 auto; }
.own-static-nav__close {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease-in-out; -webkit-tap-highlight-color: transparent;
}
.own-static-nav__close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); }

/* Items: the `.rz-sidebar .rz-navigation-item-link` rules, one for one. */
.own-static-nav__item {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 4px 12px; padding: 10px 16px; border-radius: 8px;
    color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 500;
    border: 1px solid transparent; transition: all 0.25s ease-in-out;
}
.own-static-nav__item .material-symbols-outlined {
    flex: 0 0 auto; color: rgba(255, 255, 255, 0.7); transition: color 0.25s ease-in-out;
}
.own-static-nav__item:hover,
.own-static-nav__item:focus-visible {
    color: #ffffff; text-decoration: none;
    background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}
.own-static-nav__item:hover .material-symbols-outlined,
.own-static-nav__item--active .material-symbols-outlined { color: #ffffff; }
.own-static-nav__item--active,
.own-static-nav__item--active:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    border-color: transparent; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

/* Section label: `.sidebar-section-label` (gold, with its short rule). */
.own-static-nav__section {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 1.5rem 1.25rem 0.5rem; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: #c9a96a;
    pointer-events: none; user-select: none;
}
.own-static-nav__section::before {
    content: ""; display: inline-block; width: 14px; height: 1px; background-color: #c9a96a;
}

/* ── The account / "Menu" menu (HeaderDropDownMenu Static) ── */
.own-static-menu { position: relative; display: inline-flex; align-items: center; }

/* Header trigger: the plain account icon the interactive header shows. */
.own-static-menu__trigger {
    display: inline-flex; align-items: center; justify-content: center; margin: 0;
    color: var(--rz-text-body1-color, var(--ow-ink)); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Bottom-bar trigger: icon over label, filling its fifth of the bar like the other items
   (MobileBottomNav `.mobile-bottom-nav__item`). */
.own-static-menu--bottomnav { width: 100%; height: 100%; }
.own-static-menu--bottomnav .own-static-menu__trigger {
    flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: 6px 2px;
    color: var(--own-fg-2, #5a5f6e); font-family: var(--own-font-sans, sans-serif);
}

.own-static-menu__backdrop { display: none; position: fixed; inset: 0; z-index: 1299; cursor: default; }
.own-static-menu__state:checked ~ .own-static-menu__backdrop { display: block; }

/* The panel is fixed, as the interactive dropdown is: .rz-layout clips its overflow and would cut
   off an absolutely positioned panel. Header variant hangs under the header at the right edge. */
.own-static-menu__panel {
    display: none; position: fixed; z-index: 1300;
    top: var(--rz-header-min-height, 4rem); right: 0.5rem; left: auto; bottom: auto;
    width: 270px; max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - var(--rz-header-min-height, 4rem) - 1rem); overflow-y: auto;
    padding: 0.5rem 0; background: var(--ow-paper); border: 1px solid var(--ow-line);
    border-radius: 12px; box-shadow: 0 18px 40px rgba(11, 16, 32, 0.12);
}
.own-static-menu__state:checked ~ .own-static-menu__panel { display: block; }

/* Bottom-bar variant opens upward, sitting just above the bar. */
.own-static-menu--bottomnav .own-static-menu__panel {
    top: auto;
    bottom: calc(var(--own-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 0.5rem);
    max-height: calc(100dvh - var(--own-bottom-nav-height, 64px) - env(safe-area-inset-bottom, 0px) - 1rem);
}

.own-static-menu__section { padding: 0.5rem 1rem 0.25rem; }
.own-static-menu__label { display: block; font-size: 0.8rem; color: var(--rz-text-secondary-color, #6b7280); margin-bottom: 0.25rem; }
.own-static-menu__item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.55rem 1rem; color: var(--ow-ink); text-decoration: none;
    background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.own-static-menu__item:hover { background: var(--ow-cream); color: var(--ow-ink); text-decoration: none; }
.own-static-menu__logout { margin: 0; }

/* The static bottom bar is always in the markup (the viewport is unknown without JS); on phones
   the body and the cookie button have to clear it, which the interactive layout does through
   BodyStyle / CookieFabStyle once the media query has reported. */
@media (max-width: 768px) {
    .main-layout-container.is-static .rz-body {
        padding-bottom: calc(var(--own-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }

    .own-cookie-fab--static {
        --rz-fab-inset-block-end: calc(var(--own-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }
}