:root {
    /* Brand primary — the ink of the golden-creme brand (--ow-ink-2), so every Radzen primary surface
       (the global Add FAB above all) reads as the same ink as .oc-btn and the dark hero cards. It was a
       dark violet until the colour homogenisation (docs/farbhomogenisierung-konzept.md §8). The scale is
       a straight lightness ramp at the ink's hue (229°), 8%→27% lightness, so the shades read as one ink.
       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: #141a33;
    --rz-primary-darker: #0b1020;
    --rz-primary-dark: #10152a;
    --rz-primary-lighter: #2b3560;
    --rz-primary-light: #1f2748;

    /* Every primary shade above is a solid, dark ink, 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 the dark fill — 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;

    /* The app shell: cream, not the former blue wash (docs/farbhomogenisierung-konzept.md §8). */
    --oasis-sand: var(--ow-cream);
    --oasis-palm: var(--ow-ink);
    --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 ink 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 "+" menu (AddMenuDialog): a narrow card of bordered rows (see .own-add-menu below) that the
   "+" of the bottom bar and the desktop FAB open, and "Etwas hinzufügen" on an object's page. On a phone it
   opens where the thumb already is: centred just above the bar's raised "+", so the next tap stays
   in the same corner of the reach. From the desktop FAB it opens beside the FAB, bottom right;
   from an object's page on a wide screen it is a centred box.

   Same DOM as `.sticky-dialog` above (Radzen 10 renders `.rz-dialog-wrapper > .rz-dialog.<CssClass>`
   with `.rz-dialog-mask` as a sibling). */
.rz-dialog-wrapper:has(.add-menu-dialog) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    padding: 1rem !important;
}

.rz-dialog-wrapper:has(.add-menu-dialog) .rz-dialog-mask {
    position: fixed !important;
    inset: 0 !important;
    background: color-mix(in srgb, var(--ow-ink) 14%, transparent) !important;
}

.rz-dialog.add-menu-dialog,
.add-menu-dialog.rz-dialog {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: auto !important;
    border-radius: 22px !important;
    border: 1px solid var(--ow-line) !important;
    background: var(--ow-paper) !important;
    box-shadow: 0 14px 40px rgba(11, 16, 32, 0.18) !important;
}

.add-menu-dialog .rz-dialog-content {
    padding: 0 !important;
}

/* Desktop FAB: bottom right, clear of the FAB itself. */
.rz-dialog-wrapper:has(.add-menu-dialog--fab) {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 1rem 2rem 6.5rem 1rem !important;
}

@media (max-width: 768px) {
    /* Phone: above the bottom bar and the "+" that rises 22px out of it. */
    .rz-dialog-wrapper:has(.add-menu-dialog) {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 1rem 1rem calc(var(--own-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 2.75rem) !important;
    }

    .rz-dialog.add-menu-dialog,
    .add-menu-dialog.rz-dialog {
        max-height: calc(100dvh - var(--own-bottom-nav-height, 64px) - env(safe-area-inset-bottom, 0px) - 4rem) !important;
    }
}

/* The menu's content, drawn like the "Erfasse deine Dinge" sheet of the start guide's mock-up
   (.sgv-import .im-sheet / .im-opt): a serif heading, then every way in as its own bordered row —
   a cream tile with the icon in champagne, a serif label, and on the two leading rows a badge and
   a champagne border. Collection and template sit indented beneath "Manuell", smaller. */
.own-add-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 14px 14px;
    color: var(--ow-ink);
    font-family: var(--own-font-sans, sans-serif);
}

.own-add-menu__title {
    padding: 0 4px 4px;
    font-family: var(--ow-serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
}

/* "Zu diesem Objekt" — file and event, below the capture's rows on an object's page. */
.own-add-menu__sec {
    margin-top: 8px;
    padding: 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ow-champagne-deep);
}

.own-add-menu__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 8px 12px 8px 9px;
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--own-dur-fast, 150ms) var(--own-ease, ease),
                border-color var(--own-dur-fast, 150ms) var(--own-ease, ease),
                box-shadow var(--own-dur-fast, 150ms) var(--own-ease, ease);
}

.own-add-menu__row--lead {
    border-color: var(--ow-champagne);
}

.own-add-menu__row:hover,
.own-add-menu__row:focus-visible {
    background: color-mix(in srgb, var(--ow-champagne) 6%, var(--ow-paper));
    border-color: var(--ow-champagne);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-champagne) 22%, transparent);
    outline: none;
}

.own-add-menu__tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--ow-champagne) 14%, var(--ow-paper)), var(--ow-cream-deep));
    color: var(--ow-champagne-deep);
}

.own-add-menu__tile .material-symbols-outlined {
    font-size: 21px;
    line-height: 1;
}

.own-add-menu__label {
    flex: 1;
    min-width: 0;
    font-family: var(--ow-serif);
    font-size: 1.16rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.own-add-menu__badge {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--ow-champagne);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ow-champagne) 10%, var(--ow-paper));
    color: var(--ow-gold-ink);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Collection and template: the manual entry's own variants, indented beneath "Manuell" along a
   hairline that ties them to it. */
.own-add-menu__subs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: -2px 0 0 26px;
    padding-left: 12px;
    border-left: 1px solid var(--ow-line);
}

.own-add-menu__row--sub {
    min-height: 44px;
    padding: 5px 12px 5px 7px;
    gap: 10px;
    border-radius: 12px;
}

.own-add-menu__row--sub .own-add-menu__tile {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.own-add-menu__row--sub .own-add-menu__tile .material-symbols-outlined {
    font-size: 18px;
}

.own-add-menu__row--sub .own-add-menu__label {
    font-size: 1.04rem;
}

/* Quick entry inside the "+" menu: picking "Schnellerfassung" swaps the rows for its form in the
   same window (AddMenuDialog), which widens for it. A sticky head — back to the rows, title, close —
   stays in reach while the form scrolls inside the box. */
.rz-dialog.add-menu-dialog:has(.own-add-quick),
.add-menu-dialog.rz-dialog:has(.own-add-quick) {
    width: min(calc(100vw - 2rem), 460px) !important;
    border-radius: 24px !important;
}

.own-add-quick {
    display: flex;
    flex-direction: column;
    color: var(--ow-ink);
    font-family: var(--own-font-sans, sans-serif);
}

.own-add-quick__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px;
    background: var(--ow-paper);
    border-bottom: 1px solid var(--ow-line);
}

.own-add-quick__head-text {
    flex: 1;
    min-width: 0;
}

.own-add-quick__title {
    font-family: var(--ow-serif);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.15;
}

.own-add-quick__sub {
    margin-top: 2px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--own-fg-2, #5a5f6e);
}

.own-add-quick__icon-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.own-add-quick__icon-btn:hover,
.own-add-quick__icon-btn:focus-visible {
    background: var(--ow-cream);
    outline: none;
}

.own-add-quick__icon-btn .material-symbols-outlined {
    font-size: 22px;
}

.own-add-quick__body {
    padding: 14px 18px 18px;
}

.own-add-quick__loading {
    display: flex;
    justify-content: center;
    padding: 36px 0;
}

/* The quick-entry panel brings its own card; under the menu's head it needs none. */
.own-add-quick .rz-card.hqa-embedded {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* "Neue Sammlung" (AddCollectionDialog): a slim card in the OWNAMIC language — tile and serif title
   in its own head, a name with suggestions, "Teil von", description and tags only on request, and
   ink/ghost buttons. The body is an .own-canvas so .oc-input / .oc-label / .oc-btn apply; the
   page-level padding of the canvas is taken back here. */
.rz-dialog.own-coll-dialog,
.own-coll-dialog.rz-dialog {
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: auto !important;
    border-radius: 24px !important;
    border: 1px solid var(--ow-line) !important;
    background: var(--ow-paper) !important;
    box-shadow: 0 14px 40px rgba(11, 16, 32, 0.18) !important;
}

.own-coll-dialog .rz-dialog-content {
    padding: 0 !important;
}

.own-canvas.own-coll-dlg {
    max-width: none;
    padding: 0;
}

.own-coll-dlg__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px 6px 22px;
}

.own-coll-dlg__head-text {
    flex: 1;
    min-width: 0;
}

.own-coll-dlg__tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--ow-champagne) 14%, var(--ow-paper)), var(--ow-cream-deep));
    color: var(--ow-champagne-deep);
}

.own-coll-dlg__tile .material-symbols-outlined {
    font-size: 24px;
}

.own-coll-dlg__tile--done {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ow-ink);
    color: var(--ow-champagne);
}

.own-coll-dlg__tile--done .material-symbols-outlined {
    font-size: 30px;
}

.own-coll-dlg__title {
    margin: 0;
    font-family: var(--ow-serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ow-ink);
}

.own-coll-dlg__sub {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--own-fg-2, #5a5f6e);
}

.own-coll-dlg__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -4px -2px 0 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--own-fg-2, #5a5f6e);
    cursor: pointer;
}

.own-coll-dlg__close:hover,
.own-coll-dlg__close:focus-visible {
    background: var(--ow-cream);
    color: var(--ow-ink);
    outline: none;
}

.own-coll-dlg__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 22px 4px;
}

.own-coll-dlg__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.own-coll-dlg__field > label.oc-input {
    display: block;
}

.own-canvas.own-coll-dlg .oc-input .rz-textbox,
.own-canvas.own-coll-dlg .oc-input .rz-textarea {
    box-sizing: border-box;
    max-width: 100%;
}

.own-canvas.own-coll-dlg .oc-input .rz-textarea {
    min-height: 84px;
}

.own-coll-dlg__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: -4px;
    padding: 6px 10px 6px 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ow-gold-ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.own-coll-dlg__more:hover,
.own-coll-dlg__more:focus-visible {
    background: var(--ow-cream);
    outline: none;
}

.own-coll-dlg__more .material-symbols-outlined {
    font-size: 20px;
}

.own-coll-dlg__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 18px 18px 22px;
}

.own-canvas.own-coll-dlg .own-coll-dlg__foot .oc-btn {
    padding-top: 11px;
    padding-bottom: 11px;
}

.own-coll-dlg__foot .rz-progressbar-circular {
    width: 18px !important;
    height: 18px !important;
}

.own-coll-dlg__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 24px 8px;
    text-align: center;
}

.own-coll-dlg__next {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 0;
}

.own-coll-dlg__row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ow-line);
    border-radius: 16px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--own-dur-fast, 120ms) var(--own-ease, ease),
                border-color var(--own-dur-fast, 120ms) var(--own-ease, ease);
}

.own-coll-dlg__row:hover,
.own-coll-dlg__row:focus-visible {
    background: var(--ow-cream);
    border-color: var(--ow-champagne);
    outline: none;
}

.own-coll-dlg__row-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--ow-cream);
    color: var(--ow-gold-ink);
}

.own-coll-dlg__row-label {
    flex: 1;
    min-width: 0;
}

.own-coll-dlg__row-chev {
    color: var(--own-fg-2, #5a5f6e);
}

@media (max-width: 480px) {
    .own-canvas.own-coll-dlg .own-coll-dlg__foot .oc-btn--ink {
        flex: 1;
    }
}

/* 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 ink, which all but disappears on the dark shell
       (#1e2a30). The dark theme therefore keeps the same ink 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: #3a4575;
    --rz-primary-darker: #2b3560;
    --rz-primary-dark: #323c6a;
    --rz-primary-lighter: #56639a;
    --rz-primary-light: #465285;

    --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;
  /* Former indigo/violet of brand v1, folded into the golden-creme brand
     (docs/farbhomogenisierung-konzept.md §8). Kept as names so older rules keep resolving. */
  --ow-indigo:     var(--ow-ink-2);
  --ow-violet:     var(--ow-gold-ink);
  --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, var(--ow-ink-2) 0%, var(--ow-ink) 100%);
  --own-primary:       var(--ow-ink);
  --own-primary-light: var(--ow-cream);
  --own-success:       #1f5b35;
  --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; }
/* The sign-in in the landing and tool navs: a quiet link, never a filled button, and the
   registration beside it as the nav's main button — champagne over the dark hero, ink over the
   light one (docs/login-weiche-design.md, 2). */
.lp .lp-nav-cta .lp-signin {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px;
  border-radius: 999px; font-size: 0.95rem; font-weight: 600; white-space: nowrap;
  color: rgba(255,255,255,0.88); text-decoration: none;
  transition: background var(--own-dur-fast), color var(--own-dur-fast);
}
.lp .lp-nav-cta .lp-signin .material-symbols-outlined { font-size: 1.1rem; }
.lp .lp-nav-cta .lp-signin:hover { color: white; background: rgba(255,255,255,0.06); }
.lp .lp-nav-start { background: var(--ow-champagne); color: var(--ow-ink); font-weight: 700; }
.lp .lp-nav-start:hover { background: var(--ow-champagne-light); transform: translateY(-2px); }
.lp .lp-nav-cta .lp-signin:focus-visible,
.lp .lp-nav-start:focus-visible { outline: 3px solid var(--ow-champagne-light); outline-offset: 2px; }

/* ── 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)); }

/* ─────────────────────────────────────────────────────────────────────────
   MUNICH SHOW BADGE — the trade-fair offer under the hero (MunichShowBadge.razor)
   One horizontal band between the hero and the first section of the Sammler page
   and the retail partner page, for visitors who came through a business card.
   Ink like the promo bar, with a champagne hairline above and below so it reads as
   its own strip under an ink hero; the code sits in a dashed champagne chip, the
   way a voucher prints it. The whole band is the link; the arrow moves on hover.
   ───────────────────────────────────────────────────────────────────────── */
.msb {
  box-sizing: border-box;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  width: 100%;
  padding: 16px 16px;
  background: var(--ow-ink-2);
  border-top: 1px solid color-mix(in srgb, var(--ow-champagne) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ow-champagne) 35%, transparent);
  color: var(--ow-champagne);
  font-size: 16px; letter-spacing: 0.02em; line-height: 1.45;
  text-decoration: none; text-align: center;
}
.msb .msb-icon { font-size: 22px; color: var(--ow-champagne-light); flex: none; }
.msb .msb-code {
  display: inline-block;
  margin: 0 2px; padding: 1px 8px;
  border: 1px dashed var(--ow-champagne-light); border-radius: 6px;
  color: var(--ow-champagne-light); font-weight: 600; letter-spacing: 0.08em;
  white-space: nowrap;
}
.msb .msb-go { font-size: 20px; color: var(--ow-champagne-light); flex: none; transition: transform .2s ease; }
.msb:hover .msb-txt { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ow-champagne) 50%, transparent); text-underline-offset: 4px; }
.msb:hover .msb-go { transform: translateX(4px); }
.msb:focus-visible { outline: 2px solid var(--ow-champagne-light); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .msb .msb-go { transition: none; } }
@media (max-width: 640px) {
  .msb { justify-content: flex-start; gap: 10px; padding: 14px 16px; font-size: 14px; text-align: left; }
  .msb .msb-icon { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   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;
}

/* ── 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; }
}

/* ── IM DETAIL (<LandingDetail />) ──
   The complex features an edition page folds behind its simplified pictures of the whole process
   (LandingView.Folded): one row each with the feature's name, one line about it and "see the
   details"; adjacent rows read as one list, and the full section opens in place under its row.
   .lp-more-lead is the line between the life cycle and the first row. */
.lp .lp-more-lead { padding: 0 0 16px; }
.lp .lp-more-lead p { margin: 10px 0 0; max-width: 640px; font-size: var(--ow-lede-size); line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-more { display: block; padding: 6px 0; background: var(--ow-paper); }
.lp .lp-more:not(.lp-more + .lp-more) { padding-top: 28px; }
.lp .lp-more:has(+ :not(.lp-more)),
.lp .lp-more:last-child { padding-bottom: 28px; }
.lp .lp-more > summary { display: block; list-style: none; cursor: pointer; }
.lp .lp-more > summary::-webkit-details-marker { display: none; }
.lp .lp-more > summary::marker { content: ""; }
.lp .lp-more-sum .lp-shell { display: block; }
.lp .lp-more-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 18px 22px; border: 1px solid var(--ow-line); border-radius: 18px; background: var(--ow-cream);
  transition: border-color 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-more-sum:hover .lp-more-row { border-color: var(--ow-champagne); box-shadow: 0 10px 28px rgba(11, 16, 32, 0.08); }
.lp .lp-more-sum:focus-visible { outline: none; }
.lp .lp-more-sum:focus-visible .lp-more-row { outline: 2px solid var(--ow-champagne-deep); outline-offset: 2px; }
.lp .lp-more-ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--ow-champagne-deep);
}
.lp .lp-more-ico .material-symbols-outlined { font-size: 1.4rem; }
.lp .lp-more-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp .lp-more-title { font-family: var(--ow-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--ow-ink); }
.lp .lp-more-teaser { font-size: 0.92rem; line-height: 1.5; color: var(--own-fg-2); }
.lp .lp-more-act { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ow-ink); white-space: nowrap; }
.lp .lp-more-chev { font-size: 1.3rem; color: var(--ow-champagne-deep); transition: transform var(--own-dur-base) var(--own-ease); }
.lp .lp-more-close { display: none; }
.lp .lp-more[open] .lp-more-open { display: none; }
.lp .lp-more[open] .lp-more-close { display: inline; }
.lp .lp-more[open] .lp-more-chev { transform: rotate(180deg); }
.lp .lp-more[open] .lp-more-row { background: var(--ow-paper); border-color: var(--ow-champagne); }
.lp .lp-more[open] > .lp-section { padding-top: 64px; }
@media (max-width: 720px) {
  .lp .lp-more-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; }
  .lp .lp-more-ico { width: 40px; height: 40px; border-radius: 12px; }
  .lp .lp-more-ico .material-symbols-outlined { font-size: 1.2rem; }
  .lp .lp-more-title { font-size: 1.12rem; }
  .lp .lp-more-teaser { font-size: 0.85rem; }
  /* The chevron alone says it on a phone. */
  .lp .lp-more .lp-more-act > span:not(.lp-more-chev) { display: none; }
  .lp .lp-more[open] > .lp-section { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp .lp-more-chev { 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(11, 16, 32,0.35); }
.lp .lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(11, 16, 32,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(201, 169, 106,0.28), transparent 60%),
    radial-gradient(900px 700px at 12% 90%, rgba(11, 16, 32,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; }
/* The classic hero lost its right column (the Vermögensübersicht) and runs in one. */
.lp .lp-hero-inner.lp-hero-inner--single { grid-template-columns: minmax(0, 760px); }
.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; }

/* ── EDITION HERO (Home.razor, UseEditionHero: start and full view once the editions are live) ──
   A light cream hero: eyebrow and the serif headline "Ein Ort für alles, / was zu dir gehört." — the
   promise, with the scan button right under it — the question "Was trifft auf dich zu?" with the four
   editions as radio cards, the trust links — and beside it the live preview (.lp-hs below), which
   plays one short film per edition and takes the cards along. The choice feeds the sticky start bar
   (.lp-start-bar) at the foot of the page and the registration link in it.

   Each card wears its edition's undertone (.ed-{key} sets --ow-ed-accent / -soft) on its icon chip
   and, once picked, on its tint; the picked radio and the time line at its foot are brand.

   Desktop (≥ 1100px): copy, question and pills in the left column, the preview as the right one.
   Narrower, everything stacks in the order a phone reads it — headline, question, preview, then the
   trust links — so the choice and what it does sit within the first screen. Phones
   (≤ 600px) show the four editions as one row of chips, named short. */
.lp .lp-hero.lp-hero--editions {
  /* The warm greys and the card paper of the hero, named once. */
  --he-card: color-mix(in srgb, var(--ow-paper) 80%, var(--ow-cream));
  --he-hair: color-mix(in srgb, var(--ow-ink) 10%, transparent);
  --he-text: #2c2a25;
  --he-text-2: #3d3a33;
  --he-mute: #5a554b;
  color: var(--ow-ink);
  padding: 112px 0 36px;
  background: var(--ow-cream);
}
.lp .lp-hero.lp-hero--editions::before { content: none; }
.lp .lp-hero-ed {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "pick" "stage" "trust" "note";
  max-width: 704px;
}
.lp .lp-hero-ed-head { grid-area: head; }
.lp .lp-hero-ed .lp-ed-pick { grid-area: pick; }
/* The stage's height is fixed so the card does not jump while the film cycles through the editions.
   The scene body takes what is left after the top bar, the "Mehr über … erfahren" button and the
   footer — so a taller button must add to this height, or the scenes' closing line (.hs-ov-p) runs
   into it. The pill button (.hs-more .lp-btn) is about 33px taller than the text link it replaced
   (51px when its label wraps to two lines on a phone); each height below carries that plus room. */
.lp .lp-hero-ed-stage { grid-area: stage; height: 678px; margin-top: 16px; }
.lp .lp-hero-ed-trust { grid-area: trust; }
.lp .lp-hero-ed .lp-ed-pick-note { grid-area: note; }

.lp .lp-hero-ed .lp-hero-ed-eyebrow {
  gap: 14px; font-size: 11px; letter-spacing: 0.22em; color: var(--ow-gold-ink);
}
.lp .lp-hero-ed .lp-hero-ed-eyebrow .line { width: 40px; opacity: 1; }
.lp .lp-hero--editions h1.lp-hero-h1-editions {
  font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2.6rem, 6vw, 66px);
  line-height: 1.03; letter-spacing: -0.005em; margin: 22px 0 0; color: var(--ow-ink);
}
.lp .lp-hero--editions h1.lp-hero-h1-editions em { font-style: italic; font-weight: 500; color: var(--ow-champagne-deep); }

/* The choice — four compact radio cards. */
.lp .lp-ed-pick {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.lp .lp-ed-pick-label {
  /* Floated, the legend leaves the fieldset border and becomes an ordinary first grid row. */
  float: left; grid-column: 1 / -1; width: 100%; padding: 0; margin: 26px 0 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ow-ink);
}
.lp .lp-ed-choice {
  position: relative; overflow: hidden; cursor: pointer;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 13px;
  height: 58px; padding: 0 16px 0 10px; border-radius: 14px;
  background: var(--he-card); border: 1px solid var(--he-hair);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lp .lp-ed-choice:hover { border-color: var(--ow-ed-accent-line); }
/* The native radio stays in the document for keyboard and assistive technology, just unseen. */
.lp .lp-ed-choice input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.lp .lp-ed-choice .ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent);
}
.lp .lp-ed-choice .ico .material-symbols-outlined { font-size: 21px; }
.lp .lp-ed-choice .nm { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lp .lp-ed-choice .nm b {
  font-family: var(--ow-serif); font-size: 21px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--ow-ink);
}
.lp .lp-ed-choice .nm .who {
  font-size: 13px; color: var(--he-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The short name of the phone chips; the cards name the edition in full. */
.lp .lp-ed-choice .chip-l { display: none; }
.lp .lp-ed-choice .radio {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ow-ink) 28%, transparent);
}
.lp .lp-ed-choice:has(input:checked) {
  border-color: var(--ow-champagne);
  background: color-mix(in srgb, var(--ow-ed-accent-soft) 60%, var(--he-card));
}
/* The chosen radio is brand ink, not the edition tone: a filled mark is always brand. */
.lp .lp-ed-choice:has(input:checked) .radio { background: var(--ow-ink); border-color: var(--ow-ink); }
.lp .lp-ed-choice:has(input:checked) .radio::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--he-card);
}
.lp .lp-ed-choice:has(input:focus-visible) { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
/* The time line along the picked card's foot: how much of its film is left before the preview
   moves on to the next edition. Shown only while the preview cycles by itself (heroStage.js). */
.lp .lp-ed-choice .pg {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; opacity: 0;
  background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne));
}
.lp .lp-ed-choice:has(input:checked) .pg.on { opacity: 1; }

/* The trust pills: the prices and the data-security page in a word each (`Short`, as in the
   landing heroes' trust row), and the PWA install. */
.lp .lp-hero-ed-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.lp .lp-hero-ed-trust a.ow-trust-link,
.lp .lp-hero-ed-trust .lp-hs-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; margin: 0; padding: 0 14px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ow-ink) 14%, transparent);
  background: var(--he-card); color: var(--ow-ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.lp .lp-hero-ed-trust a.ow-trust-link:hover,
.lp .lp-hero-ed-trust .lp-hs-pill:hover { border-color: var(--ow-champagne); background: var(--he-card); color: var(--ow-ink); }
.lp .lp-hero-ed-trust a.ow-trust-link:focus-visible,
.lp .lp-hero-ed-trust .lp-hs-pill:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
.lp .lp-hero-ed-trust .material-symbols-outlined { font-size: 17px; color: var(--he-mute); }
.lp .lp-hero-ed-trust .ow-trust-link .go { display: none; }
.lp .lp-hero-ed-trust .lp-pwa-install { margin: 0; }

.lp .lp-hero-ed .lp-ed-pick-note { margin: 18px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--he-mute); }

@media (min-width: 1100px) {
  .lp .lp-hero.lp-hero--editions { padding: 116px 0 32px; }
  .lp .lp-hero-ed {
    max-width: 1164px;
    grid-template-columns: minmax(0, 510px) 508px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "head stage" "pick stage" "trust stage" ". stage";
    justify-content: space-between; column-gap: 40px; align-items: start;
  }
  .lp .lp-hero-ed-stage { height: 714px; margin-top: -2px; }
  .lp .lp-hero-ed .lp-ed-pick-note { display: none; }
}

@media (max-width: 600px) {
  .lp .lp-hero.lp-hero--editions { padding: 84px 0 28px; }
  .lp .lp-hero-ed .lp-hero-ed-eyebrow { gap: 10px; font-size: 10.5px; }
  .lp .lp-hero-ed .lp-hero-ed-eyebrow .line { width: 26px; }
  .lp .lp-hero--editions h1.lp-hero-h1-editions { font-size: 37px; line-height: 1.06; margin-top: 10px; }
  .lp .lp-ed-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .lp .lp-ed-pick-label { margin: 16px 0 2px; font-size: 11px; }
  /* A chip: the edition's icon over its short name. */
  .lp .lp-ed-choice {
    grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 3px;
    height: 56px; padding: 0 2px; border-radius: 12px;
    font-size: 12.5px; font-weight: 600; color: var(--he-text-2);
  }
  .lp .lp-ed-choice .ico { width: auto; height: auto; background: none; }
  .lp .lp-ed-choice .ico .material-symbols-outlined { font-size: 20px; }
  .lp .lp-ed-choice .nm,
  .lp .lp-ed-choice .radio { display: none; }
  .lp .lp-ed-choice .chip-l {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lp .lp-ed-choice:has(input:checked) { color: var(--ow-ink); }
  .lp .lp-hero-ed-stage { height: 500px; margin-top: 10px; }
  .lp .lp-hero-ed-trust { margin-top: 16px; }
  .lp .lp-hero-ed-trust a.ow-trust-link,
  .lp .lp-hero-ed-trust .lp-hs-pill { height: 44px; }
}

/* ── LIVE PREVIEW (HeroStage.razor, heroStage.js) ──
   The card beside the edition choice: header (live dot, the edition, pause), the three steps with
   their time lines, the scene, and OWNY's promise in the footer. A scene is two layers: the capture
   (camera frame, recognition frames, the suggestion sheet sliding up under it) and the overview
   (counters, the list the new entry lands in, the payoff line). heroStage.js only sets the scene
   classes (.c-frame → .c-aim → .c-snap → .c-scan → .c-det → .c-odone → .c-tap → .c-ok → .c-ov →
   .c-room → .c-landed → .c-pay) on the card on a timeline; every movement is a transition here.

   The edition's undertone colours text, icons and the cream tint of the new entry only; every
   filled mark — time lines, meter, the confirmed button, the "Neu" badge — is brand. */
.lp-hs {
  --hs-small: 236px;
  --hs-card: color-mix(in srgb, var(--ow-paper) 80%, var(--ow-cream));
  --hs-hair: color-mix(in srgb, var(--ow-ink) 10%, transparent);
  --hs-mute: #5a554b;
  --hs-mute-2: #6b665b;
  --hs-faint: #8a857a;
  --hs-gold: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne));
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--hs-card); border: 1px solid var(--hs-hair); border-radius: 22px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ow-ink) 4%, transparent), 0 30px 70px -30px rgba(70, 52, 20, 0.28);
  overflow: hidden; font-family: var(--own-font-sans); color: var(--ow-ink);
}
.lp-hs .material-symbols-outlined {
  display: inline-block; width: 1em; overflow: hidden; font-size: 1.15em; line-height: 1; vertical-align: -0.15em;
}
.lp-hs .hs-scenes { display: none; }
.lp-hs .hs-top { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 12px 14px 0 18px; }
.lp-hs .hs-live {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-mute);
}
.lp-hs .hs-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ow-champagne-deep);
  animation: lpHsPulse 2.2s ease-in-out infinite;
}
.lp-hs .hs-live b {
  font-family: var(--ow-serif); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ow-ink);
}
.lp-hs .hs-pause {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ow-ink) 12%, transparent); background: var(--ow-paper);
  color: var(--ow-ink); cursor: pointer;
}
.lp-hs .hs-pause:hover { border-color: var(--ow-champagne); }
.lp-hs .hs-pause:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
.lp-hs .hs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 18px 14px; }
.lp-hs .hs-step { display: grid; gap: 7px; font-size: 12.5px; color: var(--hs-faint); transition: color 0.3s; }
.lp-hs .hs-step > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-hs .hs-step b { font-weight: 700; margin-right: 5px; }
.lp-hs .hs-step em { font-style: normal; }
.lp-hs .hs-step.on { color: var(--ow-ink); }
.lp-hs .hs-track { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ow-ink) 8%, transparent); overflow: hidden; }
.lp-hs .hs-track i { display: block; height: 100%; width: 0; background: var(--hs-gold); }
.lp-hs .hs-body { position: relative; flex: 1; margin: 0 14px; transition: opacity 0.26s ease; }
.lp-hs .hs-body.swap { opacity: 0; }
.lp-hs .hs-foot {
  display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 12px 18px 14px;
  border-top: 1px solid color-mix(in srgb, var(--ow-ink) 7%, transparent);
  font-size: 12.5px; line-height: 1.4; color: var(--hs-mute);
}
.lp-hs .hs-foot img { flex: none; width: 20px; height: 20px; }
.lp-hs .hs-foot .short { display: none; }
.lp-hs .hs-foot a { margin-left: auto; font-weight: 600; white-space: nowrap; color: var(--ow-gold-ink); text-decoration: none; }
.lp-hs .hs-foot a:hover { color: var(--ow-ink); }
.lp-hs.paused *, .lp-hs.paused *::before, .lp-hs.paused *::after { animation-play-state: paused !important; }
/* "Mehr über OWNAMIC Finanzen erfahren →" — the edition page of the scene on show, bottom left
   above the footer: a champagne pill button (.lp-btn) with ink text rather than a text link. The
   long edition names may wrap on a narrow card instead of running out of it. */
.lp-hs .hs-more { margin-top: 14px; padding: 0 18px; }
.lp-hs .hs-more a {
  background: var(--ow-champagne); color: var(--ow-ink);
  font-size: 1rem; line-height: 1.3; white-space: normal;
}
.lp-hs .hs-more a:hover { background: var(--ow-champagne-deep); color: var(--ow-ink); transform: translateY(-2px); }
.lp-hs .hs-more a:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 3px; }
.lp-hs .hs-more + .hs-foot { margin-top: 14px; }

/* The picture: covers its frame (a size container), or with .ct lies centred over a blurred copy of
   itself. The recognition frames are its children, so they stay on the object whatever the crop. */
.lp-hs .hs-mw {
  --W: max(100cqw, 100cqh * var(--ar));
  position: absolute; width: var(--W); aspect-ratio: var(--ar);
  left: calc((100cqw - var(--W)) * var(--ax, 0.5));
  top: calc((100cqh - var(--W) / var(--ar)) * var(--ay, 0.5));
  font-size: calc(var(--W) * 0.021);
}
.lp-hs .hs-mw.ct { --W: min(100cqw, 100cqh * var(--ar)); }
.lp-hs .hs-mw > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-hs .hs-bd {
  position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover;
  filter: blur(22px) brightness(0.92) saturate(0.9);
}
/* The market receipt of the Finanzen scene, set in type on a table. */
.lp-hs .hs-tbl { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, #ddd2bd, #b8a98e); }
.lp-hs .hs-rc {
  position: absolute; left: 30%; top: 9%; width: 40%; padding: 1.2em 1.1em;
  background: #fffefa; color: #2b2a26;
  font-family: "Courier Prime", ui-monospace, Menlo, monospace; font-size: 1em; line-height: 1.45;
  transform: rotate(-2.5deg); box-shadow: 0 0.7em 1.8em rgba(40, 30, 10, 0.22);
}
.lp-hs .hs-rc b { display: block; text-align: center; font-weight: 700; letter-spacing: 0.06em; }
.lp-hs .hs-rc small { display: block; text-align: center; font-size: 0.9em; color: var(--hs-mute-2); }
.lp-hs .hs-rc hr { height: 0; margin: 0.45em 0; border: 0; border-top: 1px dashed #b9b2a3; background: none; color: inherit; opacity: 1; }
.lp-hs .hs-rc p {
  position: relative; display: flex; justify-content: space-between; gap: 0.6em; margin: 0; border-radius: 0.2em;
  transition: box-shadow 0.3s, background 0.3s;
}
.lp-hs .hs-rc .hs-sum { font-weight: 700; }
/* The positions OWNY recognises: each line lights up in turn (its transition-delay is set inline),
   under one tag that counts them. */
.lp-hs .hs-rc .hs-items { position: relative; display: flex; flex-direction: column; gap: 0.18em; }
.lp-hs .hs-rc .hs-items em {
  position: absolute; right: -0.4em; top: -2.5em; padding: 5px 8px; border-radius: 999px;
  font: 600 11px/1 var(--own-font-sans); font-style: normal; white-space: nowrap;
  background: var(--ow-ink); color: var(--ow-paper); opacity: 0; transition: opacity 0.3s;
}
.lp-hs.c-det .hs-rc .hs-items p { box-shadow: 0 0 0 0.14em var(--ow-champagne); background: var(--ow-ed-accent-soft); }
.lp-hs.c-det .hs-rc .hs-items em { opacity: 1; }
/* The sub type OWNY reads off each recognised position (Obst, Gemüse, Käse …), hanging right of
   the receipt like a recognition label; it comes in just after its line lights up. */
.lp-hs .hs-rc .hs-items .hs-st {
  position: absolute; left: calc(100% + 1.2em); top: 50%; transform: translate(-0.4em, -50%);
  padding: 0.22em 0.55em; border-radius: 999px; white-space: nowrap;
  font: 600 0.9em/1 var(--own-font-sans); font-style: normal;
  background: var(--ow-paper); color: var(--ow-ink); box-shadow: 0 0 0 1px var(--ow-champagne), 0 0.3em 0.8em rgba(40, 30, 10, 0.18);
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
}
.lp-hs.c-det .hs-rc .hs-items .hs-st { opacity: 1; transform: translate(0, -50%); }
.lp-hs .hs-det {
  position: absolute; border: 2px solid rgba(255, 255, 255, 0.96); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); opacity: 0; transform: scale(1.05);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-hs .hs-det em {
  position: absolute; left: 5px; top: 5px; padding: 5px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--ow-paper); color: var(--ow-ink); font: 600 11px/1 var(--own-font-sans); font-style: normal;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
.lp-hs .hs-det.b em { top: auto; bottom: 5px; }
.lp-hs.c-det .hs-det { opacity: 1; transform: none; }
/* „Bild KI-generiert" on a generated photo (AI Act, docs/ai-act-genai-flagging-plan.md). */
.lp-hs .hs-ai {
  position: absolute; z-index: 2; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.6em 0.75em; border-radius: 0.35em;
  background: color-mix(in srgb, var(--ow-ink) 84%, transparent); color: rgba(255, 255, 255, 0.92);
  font: 700 1em/1 var(--own-font-sans); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
}
.lp-hs .hs-ai .material-symbols-outlined { font-size: 1.15em; }
.lp-hs .hs-ph .hs-ai { font-size: max(1em, 9px); }

/* Capture: the camera frame, then the suggestion sheet. */
.lp-hs .hs-cap { position: absolute; inset: 0; transition: opacity 0.35s ease, transform 0.35s ease; }
.lp-hs.c-ov .hs-cap { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.lp-hs .hs-ph {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: 16px; overflow: hidden;
  background: #d9cfbd; container-type: size; transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-hs.c-scan .hs-ph { height: var(--hs-small); }
.lp-hs .hs-vf { position: absolute; inset: 17%; opacity: 0; transition: inset 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; }
.lp-hs.c-frame .hs-vf { opacity: 1; }
.lp-hs.c-aim .hs-vf { inset: 7%; }
.lp-hs.c-scan .hs-vf { opacity: 0; }
.lp-hs .hs-vf i { position: absolute; width: 24px; height: 24px; border: 3px solid #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.lp-hs .hs-vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.lp-hs .hs-vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.lp-hs .hs-vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.lp-hs .hs-vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.lp-hs .hs-hint {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ow-ink) 62%, transparent); color: #fff;
  font-size: 12.5px; font-weight: 600; transition: opacity 0.3s;
}
.lp-hs.c-scan .hs-hint { opacity: 0; }
.lp-hs .hs-shut {
  position: absolute; left: 50%; bottom: 18px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%;
  border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: opacity 0.3s;
}
.lp-hs .hs-shut i { width: 44px; height: 44px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.lp-hs.c-snap .hs-shut i { transform: scale(0.84); }
.lp-hs.c-scan .hs-shut { opacity: 0; }
.lp-hs .hs-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.lp-hs.c-snap .hs-flash { animation: lpHsFlash 0.5s ease-out; }
.lp-hs .hs-scan {
  position: absolute; left: 0; right: 0; height: 42%; top: -44%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.6) 97%, #fff);
}
.lp-hs.c-scan .hs-scan { animation: lpHsScan 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both; }

.lp-hs .hs-sh {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - var(--hs-small) - 12px);
  display: flex; flex-direction: column; gap: 8px; padding: 13px 16px 14px;
  background: var(--ow-paper); border: 1px solid color-mix(in srgb, var(--ow-ink) 8%, transparent); border-radius: 16px;
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--ow-ink) 20%, transparent);
  opacity: 0; transform: translateY(40px); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.lp-hs.c-scan .hs-sh { opacity: 1; transform: none; }
.lp-hs .hs-sh-o { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 13px; color: var(--hs-mute); }
.lp-hs .hs-sh-o img { width: 22px; height: 22px; animation: lpHsSpin 2.6s linear infinite; }
.lp-hs .hs-sh-o .t2 { display: none; color: var(--ow-ink); font-weight: 600; }
.lp-hs.c-odone .hs-sh-o .t1 { display: none; }
.lp-hs.c-odone .hs-sh-o .t2 { display: inline; }
.lp-hs.c-odone .hs-sh-o img { animation: none; }
.lp-hs .hs-sh-t { font-family: var(--ow-serif); font-size: 24px; font-weight: 600; line-height: 1.05; }
.lp-hs .hs-sh-s { margin-top: 3px; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-hs .hs-fr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: 25px;
  border-top: 1px dashed color-mix(in srgb, var(--ow-ink) 12%, transparent); font-size: 13.5px;
}
.lp-hs .hs-fr .k { color: var(--hs-mute-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-hs .hs-fr .v { position: relative; min-width: 90px; text-align: right; font-weight: 600; }
.lp-hs .hs-fr .sk {
  position: absolute; right: 0; top: 50%; width: 86px; height: 9px; margin-top: -4.5px; border-radius: 5px;
  background: linear-gradient(90deg, #eee6d6, #f8f3ea, #eee6d6); background-size: 200% 100%;
  animation: lpHsShim 1.1s linear infinite; transition: opacity 0.2s;
}
.lp-hs .hs-fr .tx { display: inline-flex; align-items: center; gap: 5px; opacity: 0; transform: translateX(4px); transition: opacity 0.3s, transform 0.3s; }
.lp-hs .hs-fr.on .sk { opacity: 0; }
.lp-hs .hs-fr.on .tx { opacity: 1; transform: none; }
/* Written in by hand — the owner's own word, not OWNY's. */
.lp-hs .hs-fr .tx.hand {
  font-family: var(--ow-hand); font-size: 22px; font-weight: 500; line-height: 1; color: var(--ow-ed-accent);
  clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 0.8s ease, opacity 0.1s;
}
.lp-hs .hs-fr.on .tx.hand { clip-path: inset(0 0 0 0); }
.lp-hs .hs-fr .live {
  padding: 1px 6px; border: 1px solid var(--ow-ed-accent-line); border-radius: 999px;
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ow-ed-accent);
}
.lp-hs .hs-fr .tx .material-symbols-outlined { color: var(--ow-ed-accent); }
.lp-hs .hs-sh-b {
  position: relative; overflow: hidden; flex: none; margin-top: auto; height: 38px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--ow-ink); color: var(--ow-cream); font-size: 14px; font-weight: 700;
  transition: background 0.3s, color 0.3s;
}
.lp-hs .hs-sh-b .l2 { display: none; align-items: center; gap: 6px; }
/* Taken over: the button turns champagne, the brand's "done". */
.lp-hs.c-ok .hs-sh-b { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-hs.c-ok .hs-sh-b .l1 { display: none; }
.lp-hs.c-ok .hs-sh-b .l2 { display: inline-flex; }
.lp-hs .hs-tap {
  position: absolute; left: 64%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4); border: 2px solid rgba(255, 255, 255, 0.92);
  opacity: 0; transform: scale(1.5); pointer-events: none;
}
.lp-hs.c-tap .hs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-hs.c-ok .hs-tap { opacity: 0; transform: scale(2); transition: opacity 0.45s, transform 0.45s; }

/* Overview: the counters, the list the new entry lands in, the payoff. */
.lp-hs .hs-ov {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4px 4px 0;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease 0.1s;
}
.lp-hs.c-ov .hs-ov { opacity: 1; }
.lp-hs .hs-ov-k {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-ed-accent);
}
.lp-hs .hs-ov-n { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.lp-hs .hs-ov-big {
  font-family: var(--ow-serif); font-size: 56px; font-weight: 600; line-height: 0.9; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-hs .hs-ov-big small { margin-left: 8px; font-family: var(--own-font-sans); font-size: 14px; font-weight: 600; color: var(--hs-mute); }
.lp-hs .hs-ov-side { text-align: right; white-space: nowrap; }
.lp-hs .hs-ov-side span { display: block; font-size: 12px; color: var(--hs-mute-2); }
.lp-hs .hs-ov-side b { font-family: var(--ow-serif); font-size: 25px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.lp-hs .hs-ov-m { margin-top: 18px; }
.lp-hs .hs-ov-m .lb { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 12.5px; color: var(--hs-mute); }
.lp-hs .hs-ov-m .lb b { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ow-ed-accent); }
.lp-hs .hs-ov-m .tr { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 7%, transparent); overflow: hidden; }
.lp-hs .hs-ov-m .tr i { display: block; height: 100%; border-radius: 3px; background: var(--hs-gold); }
.lp-hs .hs-ov-l { position: relative; margin-top: 18px; }
.lp-hs .hs-row {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  height: 60px; padding: 0 10px; border-radius: 12px; border-top: 1px solid color-mix(in srgb, var(--ow-ink) 7%, transparent);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
}
.lp-hs .hs-row.old { transform: translateY(-60px); }
.lp-hs.c-room .hs-row.old { transform: none; }
.lp-hs .hs-row.new { border-top-color: transparent; }
.lp-hs.c-room .hs-row.new { background: var(--ow-ed-accent-soft); }
.lp-hs .hs-row .th {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  background: var(--ow-cream-deep); color: var(--ow-ed-accent); container-type: size;
}
.lp-hs .hs-row .th > img.f { width: 100%; height: 100%; object-fit: cover; }
.lp-hs .hs-row .th > img.p { width: 88%; object-fit: contain; }
.lp-hs .hs-row .th .material-symbols-outlined { font-size: 22px; }
.lp-hs .hs-row.new .th { opacity: 0; }
.lp-hs.c-landed .hs-row.new .th { opacity: 1; }
.lp-hs .hs-row .txt { min-width: 0; }
.lp-hs .hs-row .tt { display: flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.lp-hs .hs-row .tt span { overflow: hidden; text-overflow: ellipsis; }
.lp-hs .hs-row .ts { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-hs .hs-row .tv { font-family: var(--ow-serif); font-size: 19px; font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums; }
.lp-hs .hs-row .tv.hand { font-family: var(--ow-hand); font-size: 23px; font-weight: 500; color: var(--ow-ed-accent); }
.lp-hs .hs-row .nw {
  flex: none; padding: 2px 7px; border-radius: 999px; background: var(--ow-champagne); color: var(--ow-ink);
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.lp-hs .hs-row.new .txt,
.lp-hs .hs-row.new .tv { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s ease 0.45s, transform 0.4s ease 0.45s; }
.lp-hs.c-room .hs-row.new .txt,
.lp-hs.c-room .hs-row.new .tv { opacity: 1; transform: none; }
.lp-hs .hs-ov-p {
  margin-top: auto; padding: 0 4px 2px;
  font-family: var(--ow-serif); font-style: italic; font-size: 27px; font-weight: 500; line-height: 1.15;
  opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease, transform 0.6s ease;
}
.lp-hs .hs-ov-p em { color: var(--ow-gold-ink); }
.lp-hs.c-pay .hs-ov-p { opacity: 1; transform: none; }
.lp-hs .hs-fly {
  position: absolute; z-index: 6; overflow: hidden; container-type: size;
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--ow-ink) 35%, transparent);
}

/* Phones: a shorter card. The step names give way to three short time lines beside the pause
   button, the footer keeps OWNY's first sentence. */
@media (max-width: 600px) {
  .lp-hs { --hs-small: 128px; border-radius: 20px; }
  .lp-hs .hs-top { height: 48px; padding: 4px 2px 0 14px; }
  .lp-hs .hs-live { gap: 7px; font-size: 11px; }
  .lp-hs .hs-live b { font-size: 17px; }
  .lp-hs .hs-live span { display: none; }
  .lp-hs .hs-pause { width: 44px; height: 44px; border: 0; background: none; }
  .lp-hs .hs-steps { position: absolute; top: 26px; right: 50px; width: 84px; padding: 0; gap: 4px; }
  .lp-hs .hs-step { gap: 0; }
  .lp-hs .hs-step > span { display: none; }
  .lp-hs .hs-body { margin: 4px 10px 0; }
  .lp-hs .hs-more { margin-top: 10px; padding: 0 14px; }
  .lp-hs .hs-more a { padding: 11px 18px; font-size: 0.95rem; }
  .lp-hs .hs-foot { margin-top: 10px; padding: 9px 14px 11px; font-size: 12px; }
  .lp-hs .hs-more + .hs-foot { margin-top: 10px; }
  .lp-hs .hs-foot .long { display: none; }
  .lp-hs .hs-foot .short { display: inline; }
  .lp-hs .hs-ph { border-radius: 14px; }
  .lp-hs .hs-vf i { width: 18px; height: 18px; }
  .lp-hs .hs-hint { left: 10px; top: 10px; padding: 5px 10px; font-size: 12px; }
  .lp-hs .hs-shut { width: 48px; height: 48px; margin-left: -24px; bottom: 12px; }
  .lp-hs .hs-shut i { width: 36px; height: 36px; }
  .lp-hs .hs-det em,
  .lp-hs .hs-rc .hs-items em { padding: 4px 7px; font-size: 10.5px; }
  .lp-hs .hs-sh { gap: 5px; padding: 9px 12px 10px; border-radius: 14px; height: calc(100% - var(--hs-small) - 8px); }
  .lp-hs .hs-sh-o { height: 20px; font-size: 12px; }
  .lp-hs .hs-sh-o img { width: 20px; height: 20px; }
  .lp-hs .hs-sh-t { font-size: 19px; }
  .lp-hs .hs-sh-s { display: none; }
  .lp-hs .hs-fr { height: 21px; font-size: 12.5px; }
  .lp-hs .hs-fr .tx.hand { font-size: 19px; }
  .lp-hs .hs-sh-b { height: 32px; font-size: 13px; }
  .lp-hs .hs-ov-k { font-size: 11px; }
  .lp-hs .hs-ov-n { margin-top: 8px; }
  .lp-hs .hs-ov-big { font-size: 40px; }
  .lp-hs .hs-ov-big small { margin-left: 6px; font-size: 12.5px; }
  .lp-hs .hs-ov-side span { font-size: 11.5px; }
  .lp-hs .hs-ov-side b { font-size: 19px; }
  .lp-hs .hs-ov-m { margin-top: 12px; }
  .lp-hs .hs-ov-m .lb { margin-bottom: 5px; font-size: 12px; }
  .lp-hs .hs-ov-m .tr { height: 5px; }
  .lp-hs .hs-ov-l { margin-top: 10px; }
  .lp-hs .hs-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; height: 46px; padding: 0 6px; border-radius: 10px; }
  .lp-hs .hs-row.old { transform: translateY(-46px); }
  .lp-hs.c-room .hs-row.old { transform: none; }
  .lp-hs .hs-row .th { width: 34px; height: 34px; border-radius: 8px; }
  .lp-hs .hs-row .th .material-symbols-outlined { font-size: 18px; }
  .lp-hs .hs-row .tt { font-size: 13.5px; }
  .lp-hs .hs-row .ts { font-size: 12px; }
  .lp-hs .hs-row .tv { font-size: 16px; }
  .lp-hs .hs-row .tv.hand { font-size: 19px; }
  .lp-hs .hs-row .nw { padding: 2px 6px; font-size: 9.5px; }
  .lp-hs .hs-ov-p { font-size: 21px; }
}
/* The script shows every scene in its final state under reduced motion; the endless loops stop too. */
@media (prefers-reduced-motion: reduce) {
  .lp-hs *, .lp-hs *::before, .lp-hs *::after { animation: none !important; transition: none !important; }
}
@keyframes lpHsPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ow-champagne-deep) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ow-champagne-deep) 0%, transparent); }
}
@keyframes lpHsFlash { 0% { opacity: 0; } 18% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes lpHsScan { 0% { top: -44%; } 100% { top: 104%; } }
@keyframes lpHsSpin { to { transform: rotate(360deg); } }
@keyframes lpHsShim { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* The hero nav over the light edition hero: ink instead of white, the original (plain) mark. The
   language selector's own scoped rule paints its trigger white, so this one is a notch more
   specific. */
.lp .lp-nav.lp-nav--light { color: var(--ow-ink); }
.lp .lp-nav.lp-nav--light .hero-logo-text-span { color: var(--ow-ink); }
.lp .lp-nav.lp-nav--light .lp-nav-links { color: var(--own-fg-2); }
.lp .lp-nav.lp-nav--light .lp-nav-links a:hover { color: var(--ow-ink); }
.lp .lp-nav.lp-nav--light .lang-select .lang-select-trigger { color: var(--own-fg-2); }
.lp .lp-nav.lp-nav--light .lang-select .lang-select-trigger:hover { color: var(--ow-ink); }
.lp .lp-nav.lp-nav--light .lp-nav-cta .lp-btn-primary { background: transparent; color: var(--ow-ink); box-shadow: none; padding-left: 8px; padding-right: 8px; font-weight: 700; }
.lp .lp-nav.lp-nav--light .lp-nav-cta .lp-btn-primary:hover { background: rgba(11, 16, 32, 0.05); transform: none; }
.lp .lp-nav.lp-nav--light .lp-nav-cta .lp-signin { color: var(--ow-ink); }
.lp .lp-nav.lp-nav--light .lp-nav-cta .lp-signin:hover { background: color-mix(in srgb, var(--ow-ink) 5%, transparent); }
.lp .lp-nav.lp-nav--light .lp-nav-start { background: var(--ow-ink); color: white; }
.lp .lp-nav.lp-nav--light .lp-nav-start:hover { background: var(--ow-ink-2); }
.lp .lp-nav.lp-nav--light .lp-nav-cta .lp-signin:focus-visible,
.lp .lp-nav.lp-nav--light .lp-nav-start:focus-visible { outline-color: var(--ow-gold-ink); }
/* On a phone the light nav stays one row — brand left, "Anmelden" and the language right — instead
   of the dark hero's two, as the edition design lays it out. A notch more specific than
   `.lp .lp-nav-cta .lang-select` in the general 720 px block. */
@media (max-width: 720px) {
  .lp .lp-nav.lp-nav--light .lp-nav-brand .lp-mark-logo { height: 1.9rem; }
  .lp .lp-nav.lp-nav--light .lp-nav-brand .hero-logo-text-span { font-size: 1.5rem; margin: 0; }
  .lp .lp-nav.lp-nav--light .lp-nav-cta { flex-wrap: nowrap; gap: 8px; }
  .lp .lp-nav.lp-nav--light .lp-nav-cta .lp-btn { order: 0; }
  .lp .lp-nav.lp-nav--light .lp-nav-cta .lang-select { order: 1; flex-basis: auto; }
}

/* ── START BAR ── The registration, sticky at the foot of the screen for the whole page (last
   child of .lp, see Home.razor). A cream plate with the dark button and one fine-print line under
   it; the safe-area inset keeps it clear of a phone's home indicator. The button names the edition
   picked in the hero — in full on a wide screen, by its short chip name on a phone (.ed-l / .ed-s)
   — and catches a sheen of champagne once per round of the hero's live preview (.nudge, set by
   heroStage.js). On a phone the plate fades in from the page instead of cutting it off. */
.lp .lp-start-bar {
  position: sticky; bottom: 0; z-index: 40;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: var(--ow-cream);
  border-top: 1px solid color-mix(in srgb, var(--ow-ink) 8%, transparent);
}
/* A sticky element's `bottom: 0` is measured from the scrollport's padding edge, not its border
   box. MainLayout gives .rz-body a bottom padding on phones (60px signed out, the bottom-nav
   clearance on a static render), which left the bar floating that far above the screen edge with
   page content showing underneath it. The page that carries the bar needs no such padding: the
   bar itself is the bottom chrome. Specificity (0,4,0) + !important beats both the inline
   BodyStyle and the `.main-layout-container.is-static .rz-body` rule further down. */
.rz-layout .rz-body:has(.lp .lp-start-bar) { padding-bottom: 0 !important; }
.lp .lp-start-bar-inner {
  max-width: 600px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
}
.lp .lp-start-bar-btn {
  position: relative; overflow: hidden;
  justify-content: center; gap: 10px; width: 100%; min-height: 52px;
  border-radius: 12px; font-size: 17px; font-weight: 700;
}
.lp .lp-start-bar-btn:hover { transform: none; background: var(--ow-ink-2); }
.lp .lp-start-bar-btn .material-symbols-outlined { font-size: 20px; transition: transform 0.2s; }
.lp .lp-start-bar-btn:hover .arw { transform: translateX(3px); }
.lp .lp-start-bar-btn .ed-s { display: none; }
.lp .lp-start-bar-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--ow-champagne-light) 38%, transparent), transparent);
}
.lp .lp-start-bar-btn.nudge::after { animation: lpStartSheen 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.lp .lp-start-bar-btn.nudge .arw { animation: lpStartArrow 1.1s ease-in-out; }
.lp .lp-start-bar-fine { text-align: center; font-size: 13px; color: #4a463e; }
/* What follows the trial (TrialAfterLine): the second fine-print line, a touch smaller. */
.lp .lp-start-bar-after { margin-top: -5px; font-size: 12px; line-height: 1.35; }
@media (max-width: 600px) {
  .lp .lp-start-bar {
    padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ow-cream) 0%, transparent), var(--ow-cream) 26%);
  }
  .lp .lp-start-bar-inner { gap: 8px; }
  .lp .lp-start-bar-btn { min-height: 54px; border-radius: 14px; }
  .lp .lp-start-bar-btn .ed-l { display: none; }
  .lp .lp-start-bar-btn .ed-s { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .lp .lp-start-bar-btn.nudge::after,
  .lp .lp-start-bar-btn.nudge .arw { animation: none; }
}
@keyframes lpStartSheen { 0% { left: -45%; } 100% { left: 110%; } }
@keyframes lpStartArrow {
  0%, 100% { transform: none; } 30% { transform: translateX(5px); } 55% { transform: none; } 75% { transform: translateX(3px); }
}

/* 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); }

@keyframes lpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } }

.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%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 32px rgba(11, 16, 32,0.5);
        overflow: hidden;
    }
/* No backing disc: the icon fills the avatar edge to edge, so no violet ring shows around it. */
.lp .lp-owny-intro .owny-avatar img { width: 100%; height: 100%; object-fit: contain; }
/* The animated persona is a wrapper span, not an <img>: give it an explicit size so it stays centred. */
.lp .lp-owny-intro .owny-avatar > .owny-live { --owny-icon-size: 100%; width: 100%; height: 100%; flex: 0 0 auto; margin: auto; }
.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); }

/* OWNY's promise (Home.razor): no AI training on the data, and OWNY can be switched off entirely.
   Under the hero's speech bubble behind a hairline, and as a quiet note in the OWNY section of the
   full view and the edition and occasion pages. The switch after the sentence is decoration: it rocks
   between on (sparkle, champagne) and off (OWNY asleep, grey) — the real one is in the settings. */
.lp .lp-owny-privacy {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: 0.84rem; line-height: 1.5; color: var(--own-fg-2);
}
.lp .lp-owny-privacy .txt { flex: 1 1 auto; min-width: 0; }
.lp .lp-owny-intro .lp-owny-privacy { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ow-line); }
/* With the note the bubble grows downwards: OWNY stays beside what he says, not centred on the card. */
.lp .lp-owny-intro:has(.lp-owny-privacy) .owny-avatar { top: 16px; transform: none; }
/* On a phone the column beside the avatar is too narrow for a paragraph: the note runs under
   the avatar across the whole bubble instead (110px avatar gutter minus the 22px right padding). */
@media (max-width: 720px) {
  .lp .lp-owny-intro .lp-owny-privacy { margin-left: -88px; }
}
.lp .lp-owny-privacy--section {
  margin-top: 24px; padding: 14px 18px; max-width: 620px;
  background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 14px;
}
.lp .lp-owny-switch {
  position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px;
  background: var(--ow-champagne); box-shadow: inset 0 1px 3px rgba(11, 16, 32, 0.18);
  animation: lpOwnySwitchTrack 7s var(--own-ease, ease-in-out) infinite;
}
.lp .lp-owny-switch .knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 5px rgba(11, 16, 32, 0.25);
  transform: translateX(20px); transform-origin: center;
  animation: lpOwnySwitchKnob 7s var(--own-ease, ease-in-out) infinite;
}
.lp .lp-owny-switch .knob .material-symbols-outlined {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.lp .lp-owny-switch .knob .on { color: var(--ow-champagne-deep); animation: lpOwnySwitchOn 7s ease-in-out infinite; }
.lp .lp-owny-switch .knob .off { color: var(--own-fg-2); opacity: 0; animation: lpOwnySwitchOff 7s ease-in-out infinite; }
@keyframes lpOwnySwitchTrack {
  0%, 40%, 100% { background: var(--ow-champagne); }
  50%, 90% { background: var(--ow-line); }
}
/* A little squash on the way across, so the knob reads as nudged rather than teleported. */
@keyframes lpOwnySwitchKnob {
  0%, 40%, 100% { transform: translateX(20px); }
  45% { transform: translateX(10px) scaleX(1.25); }
  50%, 90% { transform: translateX(0); }
  95% { transform: translateX(10px) scaleX(1.25); }
}
@keyframes lpOwnySwitchOn { 0%, 40%, 100% { opacity: 1; } 47%, 93% { opacity: 0; } }
@keyframes lpOwnySwitchOff { 0%, 43%, 97%, 100% { opacity: 0; } 50%, 90% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lp .lp-owny-switch, .lp .lp-owny-switch .knob,
  .lp .lp-owny-switch .knob .on, .lp .lp-owny-switch .knob .off { animation: none; }
}

/* ── 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(201, 169, 106,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(11, 16, 32,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(11, 16, 32,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; } }
/* The object OWNY's answer is about, as the real chat links it: a small card under the text. */
.lp .ocm-ref { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 10px; padding: 6px 10px; border: 1px solid var(--ow-line); border-radius: 10px; background: var(--ow-cream); color: var(--own-fg-2); font-size: 0.8rem; line-height: 1.3; }
.lp .ocm-ref .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
/* A view's own scene (OwnySceneCatalog) wears its edition's undertone where text and hairlines
   allow it: the notes' labels and their left edge, the item icons on a soft ground, the object card
   under the answer. Nothing is filled with the accent. */
.lp .lp-owny--scene .know-bubble { border-left: 3px solid var(--ow-ed-accent-line); }
.lp .lp-owny--scene .know-bubble .bb-meta,
.lp .lp-owny--scene .ocm-ref .material-symbols-outlined { color: var(--ow-ed-accent); }
.lp .lp-owny--scene .know-list .k-ico { color: var(--ow-ed-accent); background: var(--ow-ed-accent-soft); border-color: var(--ow-ed-accent-line); }
.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; }
/* The Sammler page keeps two tiles (IsCollectorView in Home.razor); they share the row. */
.lp .lp-usecases-grid.lp-usecases-grid--pair { grid-template-columns: repeat(2, 1fr); }
.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(11, 16, 32, 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(201, 169, 106, 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(11, 16, 32, 0.22); border-color: rgba(11, 16, 32, 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(11, 16, 32, 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 .pricing-discount-scope { flex-basis: 100%; font-size: 0.8rem; color: var(--own-fg-3, #6b6455); }

.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 card (Home.razor / PricingComponent.razor): the entry tier sits ABOVE the three cards,
   full width (docs/editionen-umbau-plan.md, chapter 9) — it carries the full feature list, the cards
   below read "everything in Start" onwards. One wide card in three rows rather than three columns, so
   it stays low: name and lead, the features flowing across the width, and the price with its CTA in
   one line; on a phone the same rows in the cards' single column, where it comes first. 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-tier-start-divider is no longer rendered; it leaves with the go-live cleanup.) */
.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: minmax(0, 1fr); gap: 18px; align-items: stretch;
  padding: 28px 32px; margin-bottom: 24px;
  /* 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-top: 18px; border-top: 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; padding-top: 18px; border-top: 1px solid var(--ow-line); }
.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); }
/* Desktop: each row uses the width instead of stacking — the name beside its lead, the features
   in three columns, and price, alternative price and button on one line with the button at the end. */
@media (min-width: 1025px) {
  .lp .lp-tier-start .tm-intro {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 36px; align-items: center;
  }
  .lp .lp-tier-start .tm-intro h3 { grid-column: 1; }
  .lp .lp-tier-start .tm-intro .t-for { grid-column: 1; margin-bottom: 0; }
  .lp .lp-tier-start .tm-intro .tm-lead {
    grid-column: 2; grid-row: 1 / span 2; max-width: 720px;
    padding-left: 36px; border-left: 1px solid var(--ow-line);
  }
  .lp .lp-tier-start .tm-feats .t-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 28px; }
  .lp .lp-tier-start .tm-buy { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
  .lp .lp-tier-start .tm-buy .t-price,
  .lp .lp-tier-start .tm-buy .t-price-discount-hint,
  .lp .lp-tier-start .tm-alt { margin-bottom: 0; }
  .lp .lp-tier-start .tm-buy .lp-btn { width: auto; margin-left: auto; padding-left: 28px; padding-right: 28px; }
}

/* 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);
}

/* ── COMPACT PRICING (edition pages, Home.razor CompactPricing) ──
   Start and Basic side by side, stacked from 760px down, and under them the way on to Pro and
   Premium on the pricing page — a dashed cream band, so it reads as a door, not as a third plan.
   The cards are the ordinary tier cards; .t-alt names the other billing interval's price. */
.lp .lp-tiers.lp-tiers--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 940px; margin: 0 auto; }
.lp .lp-tier .t-alt { font-size: 0.82rem; color: var(--own-fg-2); margin: 0 0 10px; }
.lp .lp-tiers-more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
  max-width: 940px; margin: 32px auto 0; padding: 20px 24px; text-align: center;
  border: 1px dashed var(--ow-champagne); border-radius: 18px; background: var(--ow-cream);
}
.lp .lp-tiers-more-q { font-size: 0.98rem; font-weight: 600; color: var(--ow-ink); }
/* Where the "Pro & Premium" button lands on /pricing: clear of the promo bar. */
.lp #pricing-advanced { scroll-margin-top: calc(var(--ow-promo-bar-height) + 40px); }
@media (max-width: 760px) {
  .lp .lp-tiers.lp-tiers--duo { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 16px; }
  .lp .lp-tiers-more { flex-direction: column; padding: 18px; }
  .lp .lp-tiers-more .lp-btn { white-space: normal; text-align: center; justify-content: center; }
}

/* ── RECOMMENDED PLAN (scenario views, Home.razor RecommendedTier) ──
   A scenario view (docs/scenario-subviews-plan.md) shows the one plan its scenario needs: the tier's
   ordinary card, featured, as wide as one card of the compact pair, with the scenario's reason as a
   sentence (.t-why) where the tier's audience label would be. The dashed band under it narrows to the
   card and leads on to every tier on the pricing page. */
.lp .lp-tiers.lp-tiers--one { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
.lp .lp-tiers--one .lp-tier .t-why { font-size: 0.95rem; line-height: 1.55; margin: 0 0 18px; color: var(--own-fg-2); }
.lp .lp-tiers--one .lp-tier.featured .t-why,
.lp .lp-tiers--one .lp-tier.featured .t-alt { color: rgba(255, 255, 255, 0.72); }
.lp .lp-tiers--one + .lp-tiers-more { max-width: 520px; }
/* The tag names the scenario ("Empfohlen für den Umzug"): one line, also where the centred pill
   would otherwise shrink to the half card right of its anchor. */
.lp .lp-tiers--one .lp-tier .t-tag { white-space: nowrap; }
/* The card's one button is the page's last start button: champagne on the ink card, as in the hero. */
.lp .lp-tiers--one .lp-tier.featured .lp-btn-primary { background: var(--ow-champagne); color: var(--ow-ink); box-shadow: none; font-weight: 700; }
.lp .lp-tiers--one .lp-tier.featured .lp-btn-primary:hover { background: var(--ow-champagne-light); box-shadow: none; }

/* ── 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;
}

/* ── SCROLL STORIES (<LifeCycleStory />, <GoldenMiddleStory />) ──
   A panel that pins while its track scrolls past (js/scrollStory.js). The track (.lp-story) holds
   the panel (.story-pin, sticky) and a spacer after it (.story-run); the spacer's height is the
   distance the visitor scrolls while the panel stays pinned, one --story-step per step. The script
   writes the step back (data-step on the track, is-now / is-past on every [data-at], is-on on every
   [data-from], --story-p for the progress rule) and everything that moves is styled below. The
   panel pins around the middle of the screen (--story-half is about half its height), below the
   promo bar when there is one. Without the script the first step stands; under
   prefers-reduced-motion the story is laid out in its final state without the spacer. Nothing
   between .lp and the track may set overflow other than clip: a scroll container there would
   swallow the sticky panel. */
.lp .lp-story {
  --story-step: 32vh;
  --story-half: 280px;
  --story-top: max(24px, calc(50vh - var(--story-half)));
  position: relative;
}
.promo-bar ~ .lp .lp-story { --story-top: max(calc(var(--ow-promo-bar-height) + 20px), calc(50vh - var(--story-half))); }
.lp .lp-story .story-pin { position: sticky; top: var(--story-top); z-index: 1; }
.lp .lp-story .story-run { height: calc(var(--story-steps, 3) * var(--story-step)); }
.lp .lp-story .story-bar { height: 3px; margin-top: 28px; border-radius: 3px; background: var(--ow-line); overflow: hidden; }
.lp .lp-story .story-bar span {
  display: block; width: 100%; height: 100%; background: var(--ow-champagne);
  transform-origin: left center; transform: scaleX(var(--story-p, 0));
}

/* Step by step on a phone (<StoryNav />, js/storyNav.js): two buttons under the animation, one step
   back and one on — the same as a sideways swipe across it. Used by the start guide and the golden
   middle (here, through scrollStory.js) and by the Schatzfund (.wz-sz-nav, from its own 860px
   down). They show from 900px down and never under prefers-reduced-motion, where every step
   stands anyway; until the script runs (.is-live) they keep their place but stay invisible, so
   nothing moves when they come. While they show, the panel hands sideways swipes to the script and
   keeps vertical scrolling and zoom (touch-action). Paper pills with a hairline, so they never
   compete with a form's ink button; the one with nowhere to go is greyed out but stays focusable
   (aria-disabled). */
.lp .story-nav { display: none; align-items: center; justify-content: space-between; gap: 12px; }
.lp .story-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 112px; min-height: 44px; padding: 0 18px 0 10px;
  border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-paper); color: var(--ow-ink);
  font: 600 0.95rem/1.2 var(--own-font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--own-dur-base) var(--own-ease), opacity var(--own-dur-base) var(--own-ease);
}
.lp .story-go[data-go="1"] { padding: 0 10px 0 18px; }
.lp .story-go .material-symbols-outlined { font-size: 1.35rem; color: var(--ow-champagne-deep); }
.lp .story-go:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }
.lp .story-go[aria-disabled="true"] { opacity: 0.4; cursor: default; }
/* Only where there is a pointer that hovers: a phone keeps :hover on the button after a tap. */
@media (hover: hover) {
  .lp .story-go:not([aria-disabled="true"]):hover { border-color: var(--ow-champagne); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .lp .lp-story .story-nav { display: flex; visibility: hidden; }
  .lp .lp-story.is-live .story-nav { visibility: visible; }
  .lp .lp-story.is-live .story-pin:has(.story-nav) { touch-action: pan-y pinch-zoom; }
}

/* ── LIFE CYCLE (<LifeCycleStory />) ──
   One object's life as a scroll story. Left, the six steps: one dot each, the current one in ink
   with its line of text, the passed ones in champagne. Right, the object card: its rows are laid
   out from the first frame as dashed placeholders, so the card never changes height, and each step
   fades its row in. At the hand-over the card leans towards its next owner. Below 900px the dots
   run as one row over the card's text and only the current step's text stands; the card leads. */
.lp .lp-life { padding-bottom: 64px; }
.lp .lp-life .life-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.lp .lp-life .life-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-life .life-head h2 em { font-style: italic; color: var(--ow-champagne-deep); }
.lp .lp-life .life-head p { font-size: var(--ow-lede-size); line-height: 1.65; color: var(--own-fg-2); margin: 0; text-wrap: pretty; }

.lp .lp-life .life-track { --story-steps: 6; --story-half: 270px; }
.lp .lp-life .life-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }

.lp .lp-life .life-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lp .lp-life .life-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 7px 0; }
/* The rule from one dot to the next; champagne once the step is passed. */
.lp .lp-life .life-step::before {
  content: ""; position: absolute; left: 21px; top: 51px; bottom: -7px; width: 2px;
  background: var(--ow-line); transition: background var(--own-dur-base) var(--own-ease);
}
.lp .lp-life .life-step:last-child::before { display: none; }
.lp .lp-life .life-step.is-past::before { background: var(--ow-champagne); }
.lp .lp-life .ls-dot {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--own-fg-3);
  transition: background 350ms var(--own-ease), border-color 350ms var(--own-ease), color 350ms var(--own-ease),
              box-shadow 350ms var(--own-ease), transform 350ms var(--own-ease);
}
.lp .lp-life .ls-dot .material-symbols-outlined { font-size: 1.25rem; }
.lp .lp-life .life-step.is-past .ls-dot { background: var(--ow-cream); border-color: var(--ow-champagne); color: var(--ow-champagne-deep); }
.lp .lp-life .life-step.is-now .ls-dot {
  background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne);
  box-shadow: 0 10px 26px rgba(11, 16, 32, 0.25); transform: scale(1.06);
}
.lp .lp-life .ls-text { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
.lp .lp-life .ls-num { display: none; }
.lp .lp-life .ls-title {
  font-family: var(--ow-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--own-fg-3); transition: color 350ms var(--own-ease);
}
.lp .lp-life .life-step.is-past .ls-title { color: var(--own-fg-2); }
.lp .lp-life .life-step.is-now .ls-title { color: var(--ow-ink); }
.lp .lp-life .ls-desc {
  font-size: var(--ow-body-size); line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 450ms var(--own-ease), opacity 350ms var(--own-ease), margin 450ms var(--own-ease);
}
.lp .lp-life .life-step.is-now .ls-desc { max-height: 7em; opacity: 1; margin-top: 6px; }

/* The object card */
.lp .lp-life .life-stage { display: flex; justify-content: center; }
.lp .lp-life .lc-card {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px;
  background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 22px; padding: 22px;
  box-shadow: 0 30px 70px rgba(11, 16, 32, 0.12);
  transition: transform 700ms var(--own-ease), box-shadow 700ms var(--own-ease);
}
.lp .lp-life .life-track[data-step="5"] .lc-card { transform: translateX(10px) rotate(1.2deg); box-shadow: 0 36px 80px rgba(11, 16, 32, 0.16); }
.lp .lp-life .lc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.lp .lp-life .lc-thumb {
  position: relative; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 16px;
  display: grid; place-items: center; background: var(--ow-cream); color: var(--ow-champagne-deep); overflow: hidden;
}
.lp .lp-life .lc-thumb > .material-symbols-outlined { font-size: 2.3rem; }
/* The Sammler page's example piece by its photo (the coin, the vanadinite on black). */
.lp .lp-life .lc-thumb--photo { background: var(--ow-ink); }
.lp .lp-life .lc-thumb--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The viewfinder of the first step: corners and a scan line, gone once the object is recognised. */
.lp .lp-life .lc-scan {
  position: absolute; left: 9px; right: 9px; top: 10px; height: 2px; border-radius: 2px;
  background: var(--ow-champagne); box-shadow: 0 0 10px var(--ow-champagne); opacity: 0;
  transition: opacity 300ms var(--own-ease);
}
.lp .lp-life .lc-scan.is-now { opacity: 1; animation: lpLifeScan 1.6s ease-in-out infinite alternate; }
.lp .lp-life .lc-corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ow-ink); opacity: 0; transition: opacity 300ms var(--own-ease); }
.lp .lp-life .lc-scan.is-now ~ .lc-corner { opacity: 1; }
.lp .lp-life .lc-corner.tl { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.lp .lp-life .lc-corner.tr { top: 6px; right: 6px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.lp .lp-life .lc-corner.bl { bottom: 6px; left: 6px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.lp .lp-life .lc-corner.br { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
@keyframes lpLifeScan { from { transform: translateY(0); } to { transform: translateY(48px); } }
.lp .lp-life .lc-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lp .lp-life .lc-name b { font-family: var(--ow-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--ow-ink); }
.lp .lp-life .lc-name small { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; color: var(--ow-champagne-deep); }
.lp .lp-life .lc-name small .material-symbols-outlined { font-size: 0.95rem; }

.lp .lp-life .lc-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border-radius: 14px; }
.lp .lp-life .lc-row::before {
  content: ""; position: absolute; inset: 0; border: 1px dashed var(--ow-line); border-radius: inherit;
  pointer-events: none; transition: opacity 400ms var(--own-ease);
}
.lp .lp-life .lc-row > * { opacity: 0; transform: translateY(8px); transition: opacity 450ms var(--own-ease), transform 450ms var(--own-ease); }
.lp .lp-life .lc-row.is-on::before { opacity: 0; }
.lp .lp-life .lc-row.is-on > * { opacity: 1; transform: none; }
.lp .lp-life .lc-row.is-on > *:nth-child(2) { transition-delay: 80ms; }
.lp .lp-life .lc-row.is-on > *:nth-child(3) { transition-delay: 160ms; }
.lp .lp-life .lc-row.is-on > *:nth-child(4) { transition-delay: 240ms; }
.lp .lp-life .lc-chip,
.lp .lp-life .lc-doc {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--ow-ink);
}
.lp .lp-life .lc-doc { border-radius: 10px; background: var(--ow-paper); }
.lp .lp-life .lc-chip .material-symbols-outlined,
.lp .lp-life .lc-doc .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
.lp .lp-life .lc-hist { flex-direction: column; align-items: stretch; gap: 6px; }
.lp .lp-life .lc-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.86rem; color: var(--own-fg-1); }
.lp .lp-life .lc-ev .y { font-weight: 700; color: var(--ow-champagne-deep); font-variant-numeric: tabular-nums; }
.lp .lp-life .lc-seal {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ow-cream-deep); color: var(--ow-ink);
}
.lp .lp-life .lc-seal .material-symbols-outlined { font-size: 0.95rem; color: var(--ow-champagne-deep); }
.lp .lp-life .lc-now { justify-content: space-between; }
.lp .lp-life .lc-val { display: flex; flex-direction: column; gap: 3px; }
.lp .lp-life .lc-val b { font-family: var(--ow-serif); font-weight: 500; font-size: 1.45rem; line-height: 1; color: var(--ow-ink); }
.lp .lp-life .lc-val small { font-size: 0.72rem; color: var(--own-fg-2); }
.lp .lp-life .lc-spark { width: 96px; height: 32px; }
.lp .lp-life .lc-spark path { fill: none; stroke: var(--ow-champagne); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lp .lp-life .lc-remind { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--own-fg-1); }
.lp .lp-life .lc-remind .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep); }
.lp .lp-life .lc-hand { gap: 10px; flex-wrap: nowrap; }
.lp .lp-life .lc-ava { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; }
.lp .lp-life .lc-ava.me { background: var(--ow-cream-deep); color: var(--ow-ink); }
.lp .lp-life .lc-ava.them { background: var(--ow-ink); color: var(--ow-champagne); }
.lp .lp-life .lc-arrow { font-size: 1.1rem; color: var(--ow-champagne-deep); }
.lp .lp-life .lc-hand-txt { display: flex; flex-direction: column; min-width: 0; font-size: 0.78rem; line-height: 1.3; color: var(--own-fg-2); }
.lp .lp-life .lc-hand-txt b { font-size: 0.9rem; color: var(--ow-ink); }

@media (max-width: 900px) {
  .lp .lp-life { padding-bottom: 40px; }
  .lp .lp-life .life-track { --story-step: 40vh; --story-top: 12px; }
  .promo-bar ~ .lp .lp-life .life-track { --story-top: calc(var(--ow-promo-bar-height) + 10px); }
  .lp .lp-life .life-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp .lp-life .life-stage { order: -1; }
  /* The steps as one row of dots, and under it the current step's text alone. */
  .lp .lp-life .life-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 12px; }
  .lp .lp-life .life-steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 17px; height: 2px; background: var(--ow-line); }
  .lp .lp-life .life-step { display: contents; }
  .lp .lp-life .life-step::before { display: none; }
  .lp .lp-life .ls-dot { grid-row: 1; justify-self: center; position: relative; z-index: 1; width: 36px; height: 36px; }
  .lp .lp-life .ls-dot .material-symbols-outlined { font-size: 1.05rem; }
  .lp .lp-life .ls-text { grid-row: 2; grid-column: 1 / -1; min-height: 0; justify-content: flex-start; opacity: 0; transition: opacity 350ms var(--own-ease); }
  .lp .lp-life .life-step.is-now .ls-text { opacity: 1; }
  .lp .lp-life .ls-num { display: block; margin-bottom: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; color: var(--ow-champagne-deep); }
  .lp .lp-life .ls-title { font-size: 1.3rem; }
  .lp .lp-life .ls-desc { max-height: none; opacity: 1; margin-top: 4px; }
  .lp .lp-life .lc-card { padding: 14px; gap: 6px; }
  .lp .lp-life .life-track[data-step="5"] .lc-card { transform: rotate(0.8deg); }
  .lp .lp-life .lc-thumb { width: 56px; height: 56px; border-radius: 14px; }
  .lp .lp-life .lc-thumb > .material-symbols-outlined { font-size: 1.9rem; }
  .lp .lp-life .lc-name b { font-size: 1.12rem; }
  .lp .lp-life .lc-row { min-height: 40px; padding: 6px 8px; }
  .lp .lp-life .lc-chip, .lp .lp-life .lc-doc { padding: 6px 9px; font-size: 0.76rem; }
  .lp .lp-life .story-bar { margin-top: 18px; }
  @keyframes lpLifeScan { from { transform: translateY(0); } to { transform: translateY(34px); } }
}

/* Reduced motion: no pinning, no spacer, every step with its text and the card complete. */
@media (prefers-reduced-motion: reduce) {
  .lp .lp-story .story-run,
  .lp .lp-story .story-bar { display: none; }
  .lp .lp-story .story-pin { position: static; }
  .lp .lp-story *,
  .lp .lp-story *::before { transition: none !important; animation: none !important; }
  .lp .lp-life .life-step .ls-title { color: var(--ow-ink); }
  .lp .lp-life .life-step .ls-desc { max-height: none; opacity: 1; margin-top: 6px; }
  .lp .lp-life .lc-row::before { opacity: 0; }
  .lp .lp-life .lc-row > * { opacity: 1; transform: none; }
  .lp .lp-life .lc-card { transform: none !important; }
  .lp .lp-life .lc-scan, .lp .lp-life .lc-corner { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .lp .lp-life .life-steps { display: flex; flex-direction: column; gap: 10px; }
  .lp .lp-life .life-steps::before { display: none; }
  .lp .lp-life .life-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  .lp .lp-life .ls-dot { grid-row: auto; }
  .lp .lp-life .ls-text { grid-row: auto; grid-column: auto; opacity: 1; }
  .lp .lp-life .ls-num { display: none; }
}

/* ── SCENARIO LINKS („Liegt ein spezifischer Anlass vor?“, <ScenarioLinks />) ──
   A slim band on the start page right above the start guide: the scenario views for a visitor who
   comes with one occasion, one link each — icon, name and whom the page is for — to the page in the
   visitor's language. Wide screens: the question on the left, the six links in two rows of three beside it.
   Narrower: the question over chips with the name alone, which wrap onto as many rows as they need
   rather than scroll sideways, so every occasion stays in sight (see .lp-interest-chips). */
.lp .lp-scn { padding: 26px 0; background: var(--ow-paper); border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line); }
.lp .lp-scn-inner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.lp .lp-scn-title {
  margin: 0; font-family: var(--ow-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ow-ink); text-wrap: balance;
}
.lp .lp-scn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp .lp-scn-list li { display: flex; min-width: 0; }
/* Top-aligned, so the five names stand on one line whatever their "who" line wraps to. */
.lp .lp-scn-link {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--ow-line); background: var(--ow-cream); color: var(--ow-ink); text-decoration: none;
  transition: border-color var(--own-dur-base) var(--own-ease), transform var(--own-dur-base) var(--own-ease);
}
.lp .lp-scn-link:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }
.lp .lp-scn-link .ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--ow-paper); color: var(--ow-champagne-deep);
}
.lp .lp-scn-link .ico .material-symbols-outlined { font-size: 19px; }
.lp .lp-scn-link .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp .lp-scn-link b { font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.lp .lp-scn-link small { font-size: 0.76rem; line-height: 1.3; color: var(--own-fg-2); }
@media (hover: hover) {
  .lp .lp-scn-link:hover { border-color: var(--ow-champagne); transform: translateY(-1px); }
}
@media (max-width: 1100px) {
  .lp .lp-scn { padding: 22px 0; }
  .lp .lp-scn-inner { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp .lp-scn-title { font-size: 1.25rem; }
  .lp .lp-scn-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .lp .lp-scn-link { width: auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; }
  .lp .lp-scn-link .ico { width: 30px; height: 30px; border-radius: 50%; }
  .lp .lp-scn-link .ico .material-symbols-outlined { font-size: 17px; }
  .lp .lp-scn-link small { display: none; }
}

/* ── START GUIDE (<StartGuide />, js/startGuide.js) ──
   „Wie starten? In wenigen Schritten zum gesamten Bild.“ — the first section under the hero of every
   landing page: the steps of the page's edition from the registration to the whole picture, as a
   scroll story (the life cycle's pinned panel, js/scrollStory.js). On top the rail: a station per
   step on a golden thread that fills with the scroll (--story-p) — reached in champagne, the current
   one in ink with a halo, the open ones paper with a hairline — and the phases under their stations.
   Under it the current step: its text on the left, its scene on the right (below 900px the scene
   over the text). All steps stand in one grid cell and only the current one shows; the form and the
   replay button of a hidden step are out of the tab order. The track's last stretch (.is-end, set by
   the script) shows step 1 again: „Jetzt mit Schritt 1 starten“ with the same form. Under
   prefers-reduced-motion the guide reads as a list, every step with its finished scene. The palette
   is the brand's; the edition's undertone only in text and cream grounds. */
.lp .lp-sg {
  --sg-card: color-mix(in srgb, var(--ow-paper) 80%, var(--ow-cream));
  --sg-hair: color-mix(in srgb, var(--ow-ink) 10%, transparent);
  --sg-mute: #5a554b;
  --sg-faint: #8a857a;
  --sg-gap: 64px;
  background: var(--ow-cream); padding: 96px 0 80px;
}
.lp .lp-sg .sg-head { margin-bottom: 40px; }
.lp .lp-sg .sg-head .rhs b { color: var(--ow-ink); font-weight: 600; }

/* The start and full views: the edition to tell, picked by the visitor (StartGuide Choices). */
.lp .lp-sg .sg-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 36px; }
.lp .lp-sg .sg-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px 8px 14px;
  border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-paper); color: var(--ow-ink);
  font: 600 0.95rem/1.2 var(--own-font-sans); cursor: pointer;
  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);
}
.lp .lp-sg .sg-chip .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-ed-accent); }
.lp .lp-sg .sg-chip:hover { border-color: var(--ow-champagne); }
.lp .lp-sg .sg-chip.is-on { background: var(--ow-ink); border-color: var(--ow-ink); color: #fff; }
.lp .lp-sg .sg-chip.is-on .material-symbols-outlined { color: var(--ow-champagne); }
.lp .lp-sg .sg-chip:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }

.lp .lp-sg .sg-track { --story-step: 42vh; --story-half: 280px; }

/* The rail */
.lp .lp-sg .sg-rail { position: relative; display: grid; grid-template-columns: repeat(var(--sg-n), minmax(0, 1fr)); row-gap: 10px; margin: 0 0 36px; }
.lp .lp-sg .sg-line {
  position: absolute; top: 17px; left: calc(50% / var(--sg-n)); right: calc(50% / var(--sg-n)); height: 2px;
  border-radius: 2px; background: color-mix(in srgb, var(--ow-ink) 10%, transparent);
}
/* Station k lights up as the track enters step k; the thread reaches it at the same moment and
   stays full through the closing stretch. */
.lp .lp-sg .sg-line i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne));
  transform-origin: left center;
  transform: scaleX(min(1, calc(var(--story-p, 0) * (var(--sg-n) + 1) / (var(--sg-n) - 1))));
}
.lp .lp-sg .sg-st {
  grid-row: 1; position: relative; z-index: 1; justify-self: center; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--ow-paper); border: 1.5px solid var(--ow-line);
  color: var(--own-fg-2); font-size: 0.9rem; font-weight: 700;
  transition: background 350ms var(--own-ease), border-color 350ms var(--own-ease), color 350ms var(--own-ease), box-shadow 350ms var(--own-ease);
}
.lp .lp-sg .sg-st.is-past { background: var(--ow-champagne); border-color: var(--ow-champagne); color: var(--ow-ink); }
.lp .lp-sg .sg-st.is-now,
.lp .lp-sg .sg-track.is-end .sg-st[data-at="0"] {
  background: var(--ow-ink); border-color: var(--ow-ink); color: #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ow-champagne) 30%, transparent);
}
.lp .lp-sg .sg-ph {
  grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 6px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ow-champagne) 45%, transparent);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-gold-ink); text-align: center;
}
.lp .lp-sg .sg-ph small { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--sg-faint); }

/* The steps: every step in one cell, the scenes laid over an empty cell of their size. */
.lp .lp-sg .sg-steps {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sg-gap);
  align-items: start; margin: 0; padding: 0; list-style: none;
}
.lp .lp-sg .sg-steps::after { content: ""; grid-area: 1 / 2; aspect-ratio: 16 / 10; }
/* The step buttons (StoryNav, see SCROLL STORIES) are a phone's only: their row is further down. */
.lp .lp-sg .sg-nav { display: none; }
.lp .lp-sg .sg-step { grid-area: 1 / 1; align-self: center; min-width: 0; opacity: 0; pointer-events: none; transition: opacity 350ms var(--own-ease); }
.lp .lp-sg .sg-step.is-now,
.lp .lp-sg .sg-track.is-end .sg-step[data-at="0"] { opacity: 1; pointer-events: auto; }
.lp .lp-sg .sg-text { transform: translateY(10px); transition: transform 450ms var(--own-ease); }
.lp .lp-sg .sg-step.is-now .sg-text,
.lp .lp-sg .sg-track.is-end .sg-step[data-at="0"] .sg-text { transform: none; }
.lp .lp-sg .sg-step .sg-form,
.lp .lp-sg .sg-step .sg-replay { visibility: hidden; transition: visibility 0s linear 350ms; }
.lp .lp-sg .sg-step.is-now .sg-form,
.lp .lp-sg .sg-step.is-now .sg-replay,
.lp .lp-sg .sg-track.is-end .sg-step[data-at="0"] .sg-form,
.lp .lp-sg .sg-track.is-end .sg-step[data-at="0"] .sg-replay { visibility: visible; transition: none; }

.lp .lp-sg .sg-k {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-ed-accent);
}
.lp .lp-sg .sg-k-again,
.lp .lp-sg .sg-t-again { display: none; }
.lp .lp-sg .sg-track.is-end .sg-k-step,
.lp .lp-sg .sg-track.is-end .sg-t-main { display: none; }
.lp .lp-sg .sg-track.is-end .sg-k-again,
.lp .lp-sg .sg-track.is-end .sg-t-again { display: inline; }
.lp .lp-sg .sg-t {
  margin: 0; font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.1; letter-spacing: -0.01em; color: var(--ow-ink); text-wrap: balance;
}
.lp .lp-sg .sg-d { margin: 12px 0 0; max-width: 46ch; font-size: 1.02rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }
.lp .lp-sg .sg-d b { color: var(--ow-ink); font-weight: 600; }
.lp .lp-sg .sg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; }
/* The click path in the app's own words: ＋ › Daten importieren (CSV/PDF) — SgPath.razor, also on
   the app's tile and series (.sg-app). */
:is(.lp .lp-sg, .sg-app) .sg-path {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 12px 5px 6px;
  border-radius: 999px; background: var(--ow-paper); border: 1px solid var(--ow-line);
  font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--ow-ink);
}
:is(.lp .lp-sg, .sg-app) .sg-path .p { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ow-ink); color: #fff; }
:is(.lp .lp-sg, .sg-app) .sg-path .p .material-symbols-outlined { font-size: 16px; }
:is(.lp .lp-sg, .sg-app) .sg-path .sep { color: var(--ow-champagne-deep); font-size: 1rem; line-height: 1; }
:is(.lp .lp-sg, .sg-app) .sg-path .o { display: inline-flex; align-items: center; gap: 4px; }
:is(.lp .lp-sg, .sg-app) .sg-path .o .material-symbols-outlined { font-size: 16px; color: var(--ow-champagne-deep); }
:is(.lp .lp-sg, .sg-app) .sg-path .or { color: var(--sg-mute); font-weight: 500; }
:is(.lp .lp-sg, .sg-app) .sg-owny { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--ow-gold-ink); }
:is(.lp .lp-sg, .sg-app) .sg-owny img { width: 20px; height: 20px; border-radius: 50%; }
.lp .lp-sg .sg-form { margin-top: 20px; max-width: 460px; }

/* The scene card, over the empty cell: top right, the right column's width. */
.lp .lp-sg .sg-scene {
  position: absolute; top: 0; right: 0; width: calc((100% - var(--sg-gap)) * 7 / 12); aspect-ratio: 16 / 10;
  overflow: hidden; container-type: inline-size; border-radius: 22px;
  background: var(--sg-card); border: 1px solid var(--sg-hair);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ow-ink) 4%, transparent), 0 24px 56px -30px rgba(70, 52, 20, 0.32);
  transform: scale(0.97); transition: transform 500ms var(--own-ease);
}
.lp .lp-sg .sg-step.is-now .sg-scene,
.lp .lp-sg .sg-track.is-end .sg-step[data-at="0"] .sg-scene { transform: none; }
.lp .lp-sg .sg-replay {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ow-ink) 12%, transparent);
  background: color-mix(in srgb, var(--ow-paper) 88%, transparent); color: var(--ow-ink);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: pointer; opacity: 0; transition: opacity 250ms var(--own-ease);
}
.lp .lp-sg .sg-scene:hover .sg-replay,
.lp .lp-sg .sg-scene.is-played .sg-replay,
.lp .lp-sg .sg-replay:focus-visible { opacity: 1; }
.lp .lp-sg .sg-replay:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }
.lp .lp-sg .sg-replay .material-symbols-outlined { font-size: 18px; }

@media (max-width: 1100px) {
  .lp .lp-sg { --sg-gap: 40px; }
}

/* Phone and tablet: the scene over the text, the rail without its phases, and between the two the
   step buttons (StoryNav), the one row that stays put from step to step. The scene shrinks on a
   short screen so the pinned frame stays inside it, buttons and start bar included. */
@media (max-width: 900px) {
  .lp .lp-sg { padding: 64px 0 48px; }
  .lp .lp-sg .sg-head { margin-bottom: 24px; }
  .lp .lp-sg .sg-pick { margin: -4px 0 24px; }
  .lp .lp-sg .sg-track { --story-step: 46vh; --story-top: 12px; }
  .promo-bar ~ .lp .lp-sg .sg-track { --story-top: calc(var(--ow-promo-bar-height) + 10px); }
  .lp .lp-sg .sg-rail { margin-bottom: 16px; row-gap: 0; }
  .lp .lp-sg .sg-ph { display: none; }
  .lp .lp-sg .sg-st { width: 30px; height: 30px; font-size: 0.8rem; }
  .lp .lp-sg .sg-line { top: 14px; }
  .lp .lp-sg .sg-steps { --sg-scene-w: min(100%, calc((100vh - 500px) * 1.6)); grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .lp .lp-sg .sg-steps::after { grid-area: 1 / 1; justify-self: center; width: max(168px, var(--sg-scene-w)); }
  .lp .lp-sg .sg-step { grid-area: 2 / 1; align-self: start; }
  .lp .lp-sg .sg-scene { left: 0; right: 0; width: max(168px, var(--sg-scene-w)); margin: 0 auto; border-radius: 18px; }
  .lp .lp-sg .sg-replay { right: 6px; bottom: 6px; width: 28px; height: 28px; }
  .lp .lp-sg .sg-replay .material-symbols-outlined { font-size: 16px; }
  .lp .lp-sg .sg-text { transform: none; }
  .lp .lp-sg .sg-k { margin-bottom: 6px; font-size: 0.68rem; }
  .lp .lp-sg .sg-t { font-size: 1.45rem; }
  .lp .lp-sg .sg-d { margin-top: 6px; font-size: 0.95rem; line-height: 1.55; }
  .lp .lp-sg .sg-meta { margin-top: 10px; }
  .lp .lp-sg .sg-path { font-size: 0.76rem; }
  .lp .lp-sg .sg-form { margin-top: 12px; }
}
@supports (height: 100svh) {
  @media (max-width: 900px) {
    .lp .lp-sg .sg-steps { --sg-scene-w: min(100%, calc((100svh - 500px) * 1.6)); }
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .lp .lp-sg .sg-nav { display: block; grid-area: 2 / 1; }
  .lp .lp-sg .sg-step { grid-area: 3 / 1; }
}

/* Reduced motion: no pinning, every step with its text and its finished scene, as a list. */
@media (prefers-reduced-motion: reduce) {
  .lp .lp-sg .sg-rail,
  .lp .lp-sg .sg-steps::after,
  .lp .lp-sg .sg-replay { display: none; }
  .lp .lp-sg .sg-steps { display: flex; flex-direction: column; gap: 56px; }
  .lp .lp-sg .sg-step {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sg-gap); align-items: center;
    opacity: 1; pointer-events: auto;
  }
  .lp .lp-sg .sg-step .sg-form { visibility: visible; }
  .lp .lp-sg .sg-text { transform: none; }
  .lp .lp-sg .sg-scene { position: relative; top: auto; right: auto; left: auto; width: auto; margin: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .lp .lp-sg .sg-steps { gap: 40px; }
  .lp .lp-sg .sg-step { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .lp .lp-sg .sg-scene { grid-row: 1; }
}

/* ── Start guide scenes (StartGuideScene.razor and its SgScene… components) ──
   One small picture per step, drawn on a logical 400 × 250 and scaled with its card: every size
   inside is in container units (1 logical px = 0.25cqw), so the scene scales as one picture. The
   same scenes play on the landing page (.lp) and in the app's series (.sg-app, StartGuideSeries).
   Rendered in the final state; js/startGuide.js sets the earlier ones. Filled marks are ink or
   champagne; the edition's undertone only in text and soft grounds; money going out in the signal
   red, coming in in the evidence green. Pictures of somebody else's screen (an online banking, a
   broker app) are drawn in plain greys mixed from ink and say „Beispiel“. */
:is(.lp, .sg-app) .sgv {
  position: absolute; inset: 0; overflow: hidden;
  font-family: var(--own-font-sans); font-size: 3.25cqw; line-height: 1.35; color: var(--ow-ink); text-align: left;
  --sg-faint: #8a857a; --sg-mute: #5a554b; --sg-hair: color-mix(in srgb, var(--ow-ink) 10%, transparent);
}
:is(.lp, .sg-app) .sgv * { box-sizing: border-box; }
:is(.lp, .sg-app) .sgv b { font-weight: 700; }
:is(.lp, .sg-app) .sgv p { margin: 0; }
:is(.lp, .sg-app) .sgv .material-symbols-outlined { font-size: 1.15em; line-height: 1; vertical-align: -0.16em; }
:is(.lp, .sg-app) .sgv-k { font-size: 2.25cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-gold-ink); line-height: 1.3; }
:is(.lp, .sg-app) .sgv-k.ed { color: var(--ow-ed-accent); }
:is(.lp, .sg-app) .sgv-k .material-symbols-outlined { margin-right: 1cqw; letter-spacing: normal; }
:is(.lp, .sg-app) .sgv-k.faint { color: var(--sg-faint); }
:is(.lp, .sg-app) .sgv-chip {
  display: inline-flex; align-items: center; gap: 1cqw; padding: 0.75cqw 2cqw; border-radius: 999px;
  font-size: 2.5cqw; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
:is(.lp, .sg-app) .sgv-chip.gold { background: color-mix(in srgb, var(--ow-champagne) 12%, var(--ow-paper)); color: var(--ow-gold-ink); border: 1px solid var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-chip.ink { background: var(--ow-ink); color: #fff; }
:is(.lp, .sg-app) .sgv-chip.ink .material-symbols-outlined { color: var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-chip.soft { background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); }
:is(.lp, .sg-app) .sgv-chip.line { background: var(--ow-paper); color: var(--own-fg-2); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-plus {
  display: grid; place-items: center; width: 9.5cqw; height: 9.5cqw; border-radius: 50%; background: var(--ow-ink); color: #fff;
  box-shadow: 0 1.5cqw 4cqw rgba(11, 16, 32, 0.35), 0 0 0 1cqw var(--ow-paper);
}
:is(.lp, .sg-app) .sgv-plus .material-symbols-outlined { font-size: 6cqw; vertical-align: 0; }
:is(.lp, .sg-app) .sgv-bar { display: block; height: 1.5cqw; border-radius: 0.75cqw; background: color-mix(in srgb, var(--ow-ink) 8%, transparent); overflow: hidden; }
:is(.lp, .sg-app) .sgv-bar i { display: block; height: 100%; border-radius: 0.75cqw; background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne)); }
:is(.lp, .sg-app) .sgv-file {
  display: inline-flex; align-items: center; gap: 1.5cqw; padding: 1.5cqw 2.5cqw 1.5cqw 1.75cqw; border-radius: 2.25cqw; max-width: 100%;
  background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 1.5cqw 3.5cqw rgba(11, 16, 32, 0.1);
  font-size: 2.75cqw; font-weight: 600; white-space: nowrap;
}
:is(.lp, .sg-app) .sgv-file .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv .ext {
  flex: none; display: grid; place-items: center; width: 5.5cqw; height: 6.5cqw; border-radius: 1cqw;
  background: var(--ow-cream-deep); color: var(--ow-gold-ink); font-size: 1.875cqw; font-weight: 800; letter-spacing: 0.02em;
}
:is(.lp, .sg-app) .sgv .ext.pdf { background: var(--ow-blush); color: var(--ow-negative); }
:is(.lp, .sg-app) .sgv-scan {
  position: absolute; left: 0; right: 0; top: 100%; height: 0.75cqw; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ow-champagne), var(--ow-champagne-light), var(--ow-champagne), transparent);
  box-shadow: 0 0 3.5cqw 1cqw rgba(201, 169, 106, 0.55);
}
:is(.lp, .sg-app) .sgv-flash { position: absolute; inset: 0; background: var(--ow-paper); opacity: 0; pointer-events: none; }
:is(.lp, .sg-app) .sgv-det { position: absolute; border: 0.5cqw solid rgba(255, 255, 255, 0.96); border-radius: 2cqw; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 1cqw rgba(201, 169, 106, 0.35); }
:is(.lp, .sg-app) .sgv-tap {
  position: absolute; z-index: 20; width: 7.5cqw; height: 7.5cqw; margin: -3.75cqw 0 0 -3.75cqw; border-radius: 50%;
  background: rgba(11, 16, 32, 0.18); border: 0.5cqw solid #fff; box-shadow: 0 0.5cqw 2cqw rgba(11, 16, 32, 0.3);
  pointer-events: none; opacity: 0; visibility: hidden;
}
:is(.lp, .sg-app) .sgv-rip {
  position: absolute; z-index: 19; width: 7.5cqw; height: 7.5cqw; margin: -3.75cqw 0 0 -3.75cqw; border-radius: 50%;
  border: 0.5cqw solid var(--ow-champagne); pointer-events: none; opacity: 0; visibility: hidden;
}
:is(.lp, .sg-app) .sgv-neg { color: var(--ow-negative); font-weight: 700; font-variant-numeric: tabular-nums; }
:is(.lp, .sg-app) .sgv-pos { color: var(--ow-ev-documented); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The app in miniature (SgMini): white header with the compass and the edition pill, cream page. */
:is(.lp, .sg-app) .sgv-mini { position: absolute; left: 3cqw; top: 3cqw; width: 94cqw; height: 56.5cqw; border-radius: 3.5cqw; background: var(--ow-cream); overflow: hidden; box-shadow: 0 0 0 1px var(--sg-hair); }
:is(.lp, .sg-app) .sgv-mini-hd {
  position: absolute; left: 0; top: 0; width: 100%; height: 7.5cqw; display: flex; align-items: center; gap: 1.75cqw; padding: 0 2.5cqw;
  background: var(--ow-paper); border-bottom: 1px solid var(--ow-line);
}
:is(.lp, .sg-app) .sgv-mini-hd img { width: 4.25cqw; height: 4cqw; object-fit: contain; }
:is(.lp, .sg-app) .sgv-mini-ed { padding: 1cqw 2cqw; border-radius: 999px; background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); font-size: 2.375cqw; font-weight: 700; line-height: 1; }
:is(.lp, .sg-app) .sgv-mini-body { position: absolute; left: 0; top: 7.5cqw; width: 100%; height: 49cqw; }

/* Trial — fourteen days, the last one ends by itself. */
:is(.lp, .sg-app) .sgv-trial .tr-hd { position: absolute; left: 6cqw; top: 5cqw; width: 90cqw; }
:is(.lp, .sg-app) .sgv-trial .tr-title { display: block; margin-top: 1cqw; font-family: var(--ow-serif); font-size: 6.5cqw; font-weight: 500; line-height: 1.1; }
:is(.lp, .sg-app) .sgv-trial .tr-today { position: absolute; left: 6.5cqw; top: 21cqw; font-size: 2.25cqw; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-faint); line-height: 1; }
:is(.lp, .sg-app) .sgv-trial .tr-days { position: absolute; left: 6.5cqw; top: 24.5cqw; display: flex; gap: 0.75cqw; }
:is(.lp, .sg-app) .sgv-trial .tr-day {
  position: relative; display: grid; place-items: center; width: 5.5cqw; height: 10cqw; border-radius: 1.75cqw;
  border: 1px solid var(--ow-line); background: var(--ow-paper); font-size: 2.5cqw; font-weight: 700; overflow: hidden;
}
:is(.lp, .sg-app) .sgv-trial .tr-day i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ow-champagne-light), var(--ow-champagne)); transform-origin: 0 50%; }
:is(.lp, .sg-app) .sgv-trial .tr-day b { position: relative; }
:is(.lp, .sg-app) .sgv-trial .tr-day:last-child { box-shadow: 0 0 0 0.75cqw rgba(11, 16, 32, 0.85); }
:is(.lp, .sg-app) .sgv-trial .tr-end { position: absolute; right: 6.5cqw; top: 37cqw; display: flex; align-items: center; gap: 1.5cqw; font-size: 2.75cqw; font-weight: 700; line-height: 1.2; }
:is(.lp, .sg-app) .sgv-trial .tr-end .ic { display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--ow-ink); color: #fff; }
:is(.lp, .sg-app) .sgv-trial .tr-chips { position: absolute; left: 6cqw; top: 49cqw; width: 90cqw; display: flex; flex-wrap: wrap; gap: 2cqw; }

/* Bank export — an online banking of no bank in particular, in greys mixed from ink. */
:is(.lp, .sg-app) .sgv-bank {
  --bk-ink: color-mix(in srgb, var(--ow-ink) 82%, var(--ow-paper));
  --bk-mute: color-mix(in srgb, var(--ow-ink) 52%, var(--ow-paper));
  --bk-line: color-mix(in srgb, var(--ow-ink) 15%, var(--ow-paper));
  --bk-soft: color-mix(in srgb, var(--ow-ink) 7%, var(--ow-paper));
  --bk-row: color-mix(in srgb, var(--ow-ink) 5%, var(--ow-paper));
}
:is(.lp, .sg-app) .sgv-bank .bk-win {
  position: absolute; left: 3cqw; top: 3cqw; width: 67cqw; height: 56.5cqw; border-radius: 3cqw; overflow: hidden;
  background: var(--ow-paper); box-shadow: 0 0 0 1px var(--bk-line), 0 2.5cqw 6.5cqw rgba(30, 35, 45, 0.14);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--bk-ink);
}
:is(.lp, .sg-app) .sgv-bank .bk-bar { display: flex; align-items: center; gap: 1.5cqw; height: 6.5cqw; padding: 0 2.5cqw; background: var(--bk-soft); border-bottom: 1px solid var(--bk-line); font-size: 2.5cqw; font-weight: 600; color: var(--bk-mute); }
:is(.lp, .sg-app) .sgv-bank .bk-ex { margin-left: auto; font-weight: 400; }
:is(.lp, .sg-app) .sgv-bank .bk-body { padding: 2.25cqw 3cqw 0; }
:is(.lp, .sg-app) .sgv-bank .bk-head { display: flex; align-items: baseline; justify-content: space-between; }
:is(.lp, .sg-app) .sgv-bank .bk-head b { font-size: 3.25cqw; }
:is(.lp, .sg-app) .sgv-bank .bk-head span { font-size: 2.375cqw; color: var(--bk-mute); }
:is(.lp, .sg-app) .sgv-bank .bk-per {
  position: relative; display: inline-flex; align-items: center; gap: 1cqw; margin-top: 1.5cqw; padding: 0.75cqw 2cqw; border-radius: 1.5cqw;
  border: 1px solid var(--bk-line); background: var(--bk-row); font-size: 2.375cqw; font-weight: 600;
}
:is(.lp, .sg-app) .sgv-bank .bk-pv { position: relative; display: inline-block; min-width: 11.5cqw; }
:is(.lp, .sg-app) .sgv-bank .bk-pv .p30 { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-bank .bk-pv .p4 { white-space: nowrap; }
:is(.lp, .sg-app) .sgv-bank .bk-rows { margin-top: 1.5cqw; }
:is(.lp, .sg-app) .sgv-bank .bk-r { display: grid; grid-template-columns: 10cqw minmax(0, 1fr) auto; gap: 1.5cqw; padding: 1.25cqw 0; border-bottom: 1px solid var(--bk-row); font-size: 2.5cqw; }
:is(.lp, .sg-app) .sgv-bank .bk-r .d { color: var(--bk-mute); white-space: nowrap; }
:is(.lp, .sg-app) .sgv-bank .bk-r b { font-variant-numeric: tabular-nums; }
:is(.lp, .sg-app) .sgv-bank .bk-r b.pos { color: var(--ow-ev-documented); }
:is(.lp, .sg-app) .sgv-bank .bk-exp { position: absolute; right: 3cqw; bottom: 2.5cqw; display: inline-flex; align-items: center; gap: 1.25cqw; padding: 1.5cqw 2.75cqw; border-radius: 1.75cqw; background: var(--bk-ink); color: #fff; font-size: 2.5cqw; font-weight: 700; }
:is(.lp, .sg-app) .sgv-bank .bk-menu {
  position: absolute; right: 3cqw; bottom: 10cqw; width: 25cqw; display: flex; flex-direction: column; border-radius: 2cqw; overflow: hidden;
  background: var(--ow-paper); box-shadow: 0 0 0 1px var(--bk-line), 0 2cqw 5cqw rgba(30, 35, 45, 0.18); font-size: 2.5cqw; font-weight: 600;
  opacity: 0; visibility: hidden;
}
:is(.lp, .sg-app) .sgv-bank .bk-menu span { padding: 1.75cqw 2.5cqw; }
:is(.lp, .sg-app) .sgv-bank .bk-menu .m-csv { border-bottom: 1px solid var(--bk-row); }
:is(.lp, .sg-app) .sgv-bank .bk-dl { position: absolute; left: 73cqw; top: 4cqw; display: flex; align-items: center; gap: 1cqw; font-size: 2.125cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-faint); }
:is(.lp, .sg-app) .sgv-bank .bk-f {
  position: absolute; left: 73cqw; width: 24.5cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75cqw; padding: 1.5cqw 2cqw; border-radius: 2.25cqw;
  background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 1.5cqw 3.5cqw rgba(11, 16, 32, 0.1); font-size: 2.375cqw; font-weight: 600;
}
:is(.lp, .sg-app) .sgv-bank .bk-f .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-bank .bk-f1 { top: 9cqw; }
:is(.lp, .sg-app) .sgv-bank .bk-f2 { top: 26cqw; }
:is(.lp, .sg-app) .sgv-bank .bk-ph { position: absolute; left: 73cqw; top: 44cqw; width: 24.5cqw; display: flex; align-items: center; gap: 1.5cqw; font-size: 2.5cqw; font-weight: 600; line-height: 1.25; color: var(--sg-mute); }
:is(.lp, .sg-app) .sgv-bank .bk-ph .ic { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: var(--ow-ink); color: #fff; }

/* Import — ＋, the sheet, the file, the four stages, the findings. */
:is(.lp, .sg-app) .sgv-import .im-home,
:is(.lp, .sg-app) .sgv-import .im-imp,
:is(.lp, .sg-app) .sgv-import .im-find { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--ow-cream); }
:is(.lp, .sg-app) .sgv-import .im-home { gap: 2cqw; padding: 3.5cqw 4cqw; }
:is(.lp, .sg-app) .sgv-import .im-title { font-family: var(--ow-serif); font-size: 4.5cqw; font-weight: 500; }
:is(.lp, .sg-app) .sgv-import .im-empty { padding: 3cqw; border-radius: 2.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.75cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-import .im-sheet {
  position: absolute; left: 0; top: 10cqw; width: 100%; height: 39cqw; display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.25cqw 3cqw;
  background: var(--ow-paper); border-radius: 3.5cqw 3.5cqw 0 0; box-shadow: 0 -2cqw 6cqw rgba(11, 16, 32, 0.14); visibility: hidden;
}
:is(.lp, .sg-app) .sgv-import .im-grab { align-self: center; width: 8.5cqw; height: 1cqw; border-radius: 0.5cqw; background: var(--ow-line); }
:is(.lp, .sg-app) .sgv-import .im-sheet-t { font-family: var(--ow-serif); font-size: 3.25cqw; font-weight: 500; }
:is(.lp, .sg-app) .sgv-import .im-opt { display: flex; align-items: center; gap: 2cqw; padding: 1.25cqw 2cqw; border-radius: 2.5cqw; border: 1px solid var(--ow-line); background: var(--ow-paper); }
:is(.lp, .sg-app) .sgv-import .im-opt.o-cam,
:is(.lp, .sg-app) .sgv-import .im-opt.o-imp { border-color: var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-import .im-opt .ic { display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 1.75cqw; background: linear-gradient(160deg, color-mix(in srgb, var(--ow-champagne) 14%, var(--ow-paper)), var(--ow-cream-deep)); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-import .im-opt .nm { flex: 1; min-width: 0; font-family: var(--ow-serif); font-size: 3.125cqw; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-import .im-opt .bd {
  padding: 0.5cqw 1.25cqw; border-radius: 999px; border: 1px solid var(--ow-champagne); color: var(--ow-gold-ink);
  background: color-mix(in srgb, var(--ow-champagne) 10%, var(--ow-paper)); font-size: 1.625cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
:is(.lp, .sg-app) .sgv-import .im-imp { padding: 2.75cqw 4cqw; visibility: hidden; }
:is(.lp, .sg-app) .sgv-import .im-k { display: flex; justify-content: space-between; gap: 2cqw; }
:is(.lp, .sg-app) .sgv-import .im-h { margin-top: 0.5cqw; font-family: var(--ow-serif); font-size: 4cqw; font-weight: 500; }
:is(.lp, .sg-app) .sgv-import .im-h em,
:is(.lp, .sg-app) .sgv-import .im-ft em { font-style: italic; color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-import .im-file { margin-top: 2.25cqw; display: flex; align-items: center; gap: 2cqw; padding: 2cqw 2.5cqw; border-radius: 2.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-import .im-file b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-import .im-file span:last-child { color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-import .im-ready { margin-top: 1.75cqw; display: flex; align-items: center; gap: 1.5cqw; font-size: 2.625cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-import .im-trail { margin-top: 2.25cqw; display: flex; gap: 1.25cqw; }
:is(.lp, .sg-app) .sgv-import .im-ch { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.75cqw; padding: 1.25cqw 0; border-radius: 999px; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.25cqw; font-weight: 700; }
:is(.lp, .sg-app) .sgv-import .im-ch .ck { display: grid; place-items: center; width: 3.25cqw; height: 3.25cqw; border-radius: 50%; background: var(--ow-champagne); color: var(--ow-ink); }
:is(.lp, .sg-app) .sgv-import .im-ch .ck .material-symbols-outlined { font-size: 2.5cqw; vertical-align: 0; }
:is(.lp, .sg-app) .sgv-import .im-go { position: absolute; right: 4cqw; bottom: 2.5cqw; display: inline-flex; align-items: center; gap: 1.25cqw; padding: 1.5cqw 3cqw; border-radius: 999px; background: var(--ow-ink); color: #fff; font-size: 2.5cqw; font-weight: 700; }
:is(.lp, .sg-app) .sgv-import .im-find { padding: 2.5cqw 3.5cqw; }
:is(.lp, .sg-app) .sgv-import .im-fh { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; }
:is(.lp, .sg-app) .sgv-import .im-ft { font-family: var(--ow-serif); font-size: 4cqw; font-weight: 500; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-import .im-list { margin-top: 1.5cqw; padding: 0 2.5cqw; display: flex; flex-direction: column; border-radius: 2.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-import .im-fr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2cqw; align-items: center; padding: 1.25cqw 0; border-bottom: 1px solid var(--ow-line-soft); font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-import .im-fr:last-child { border-bottom: 0; }
:is(.lp, .sg-app) .sgv-import .im-fr b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-import .im-fr .sgv-chip { font-size: 2.125cqw; padding: 0.5cqw 1.5cqw; }
:is(.lp, .sg-app) .sgv-import .im-fr > span:last-child { font-size: 2.625cqw; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-import .im-plus { position: absolute; left: 80.5cqw; top: 35.5cqw; visibility: hidden; }

/* Accounts — a photo of the account overview, the accounts, the loan by hand, the net worth. */
:is(.lp, .sg-app) .sgv-accounts .ac-shot {
  position: absolute; left: 3.5cqw; top: 3cqw; width: 32cqw; height: 42.5cqw; display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.5cqw 2.25cqw;
  border-radius: 3.5cqw; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 90%, var(--ow-paper)); color: var(--ow-cream);
  transform: rotate(-3deg); box-shadow: 0 2.5cqw 6cqw rgba(11, 16, 32, 0.3); font-family: system-ui, -apple-system, Arial, sans-serif;
}
:is(.lp, .sg-app) .sgv-accounts .ac-sh-t { font-size: 2cqw; opacity: 0.65; }
:is(.lp, .sg-app) .sgv-accounts .ac-b { display: flex; flex-direction: column; gap: 0.25cqw; padding: 1.75cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--ow-ink) 78%, var(--ow-paper)); }
:is(.lp, .sg-app) .sgv-accounts .ac-b span { font-size: 1.875cqw; opacity: 0.7; }
:is(.lp, .sg-app) .sgv-accounts .ac-b b { font-size: 3cqw; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-accounts .ac-b.b3 { opacity: 0.55; }
:is(.lp, .sg-app) .sgv-accounts .ac-b.b3 b { font-size: 2.5cqw; font-weight: 400; }
:is(.lp, .sg-app) .sgv-accounts .ac-list { position: absolute; left: 39cqw; top: 2cqw; width: 52.5cqw; display: flex; flex-direction: column; gap: 1.25cqw; }
:is(.lp, .sg-app) .sgv-accounts .ac-a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5cqw 1.5cqw; padding: 1.5cqw 2cqw;
  border-radius: 2.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.75cqw;
}
:is(.lp, .sg-app) .sgv-accounts .ac-a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-accounts .ac-a .v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-accounts .ac-a > .material-symbols-outlined { color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-accounts .ac-a small { grid-column: 2 / 4; font-size: 2.125cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-accounts .ac-net { display: flex; flex-direction: column; margin-top: 0.5cqw; padding: 2cqw 2.5cqw; border-radius: 3cqw; background: var(--ow-ink); color: #fff; }
:is(.lp, .sg-app) .sgv-accounts .ac-net .sgv-k { color: var(--ow-champagne-light); }
:is(.lp, .sg-app) .sgv-accounts .ac-nv { font-family: var(--ow-serif); font-size: 5.5cqw; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Depot — a broker screenshot, the holdings, „Live-Kurs verbinden?“, the savings plan. */
:is(.lp, .sg-app) .sgv-depot .dp-shot {
  position: absolute; left: 3.5cqw; top: 3cqw; width: 29.5cqw; height: 42.5cqw; display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.25cqw 2cqw;
  border-radius: 3.5cqw; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 5%, var(--ow-paper)); color: color-mix(in srgb, var(--ow-ink) 88%, var(--ow-paper));
  transform: rotate(2.5deg); box-shadow: 0 2.5cqw 6cqw rgba(11, 16, 32, 0.22); font-family: system-ui, -apple-system, Arial, sans-serif;
}
:is(.lp, .sg-app) .sgv-depot .dp-sh-t { font-size: 2cqw; color: color-mix(in srgb, var(--ow-ink) 50%, var(--ow-paper)); }
:is(.lp, .sg-app) .sgv-depot .dp-sp { display: flex; flex-direction: column; padding: 1.5cqw; border-radius: 1.75cqw; background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 10%, var(--ow-paper)); }
:is(.lp, .sg-app) .sgv-depot .dp-sp b { font-size: 1.875cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-depot .dp-sp > span { display: flex; justify-content: space-between; gap: 1cqw; font-size: 1.75cqw; color: color-mix(in srgb, var(--ow-ink) 50%, var(--ow-paper)); white-space: nowrap; }
:is(.lp, .sg-app) .sgv-depot .dp-list { position: absolute; left: 36.5cqw; top: 2cqw; width: 55.5cqw; display: flex; flex-direction: column; gap: 1.25cqw; }
:is(.lp, .sg-app) .sgv-depot .dp-p { display: flex; flex-direction: column; gap: 0.75cqw; min-width: 0; padding: 1.25cqw 2cqw; border-radius: 2.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.625cqw; }
:is(.lp, .sg-app) .sgv-depot .dp-r1 { display: flex; align-items: center; gap: 1.5cqw; min-width: 0; }
:is(.lp, .sg-app) .sgv-depot .dp-r1 b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-depot .dp-r1 .v { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
:is(.lp, .sg-app) .sgv-depot .dp-r1 .material-symbols-outlined { color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-depot .dp-r2 { display: flex; align-items: center; gap: 1.5cqw; }
:is(.lp, .sg-app) .sgv-depot .dp-r2 .sgv-chip,
:is(.lp, .sg-app) .sgv-depot .dp-r3 .sgv-chip { font-size: 1.875cqw; padding: 0.5cqw 1.5cqw; }
:is(.lp, .sg-app) .sgv-depot .dp-spk { flex: none; width: 13.5cqw; height: 3cqw; }
:is(.lp, .sg-app) .sgv-depot .dp-spk path { fill: none; stroke: var(--ow-champagne-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 0; }
:is(.lp, .sg-app) .sgv-depot .dp-ask {
  position: absolute; left: 5.5cqw; top: 11cqw; width: 45.5cqw; display: flex; flex-direction: column; gap: 1cqw; padding: 2cqw 2.5cqw;
  border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-champagne); box-shadow: 0 2.5cqw 6.5cqw rgba(11, 16, 32, 0.2);
  font-size: 2.625cqw; visibility: hidden;
}
:is(.lp, .sg-app) .sgv-depot .dp-inst { padding: 1cqw 1.5cqw; border-radius: 1.75cqw; border: 1px solid var(--ow-line); font-size: 2.125cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-depot .dp-inst b { color: var(--ow-ink); }
:is(.lp, .sg-app) .sgv-depot .dp-btns { display: flex; flex-wrap: wrap; gap: 1.25cqw; margin-top: 0.5cqw; }
:is(.lp, .sg-app) .sgv-depot .dp-btns .ok { padding: 1cqw 2.25cqw; border-radius: 999px; background: var(--ow-ink); color: #fff; font-size: 2.25cqw; font-weight: 700; }
:is(.lp, .sg-app) .sgv-depot .dp-btns .no { padding: 1cqw 2cqw; border-radius: 999px; border: 1px solid var(--ow-line); font-size: 2cqw; color: var(--own-fg-2); white-space: nowrap; }

/* Assets — the flat, the car, the sideboard; their ranges and their sum. */
:is(.lp, .sg-app) .sgv-assets .as-it { position: absolute; top: 4.5cqw; width: 28cqw; }
:is(.lp, .sg-app) .sgv-assets .it0 { left: 4cqw; }
:is(.lp, .sg-app) .sgv-assets .it1 { left: 36cqw; }
:is(.lp, .sg-app) .sgv-assets .it2 { left: 68cqw; }
:is(.lp, .sg-app) .sgv-assets .as-ph { position: relative; display: grid; place-items: center; height: 24cqw; border-radius: 3cqw; overflow: hidden; box-shadow: 0 1.5cqw 4cqw rgba(11, 16, 32, 0.12); }
:is(.lp, .sg-app) .sgv-assets .it0 .as-ph { background: var(--ow-sage); }
:is(.lp, .sg-app) .sgv-assets .it1 .as-ph { background: color-mix(in srgb, var(--ow-ink) 12%, var(--ow-paper)); }
:is(.lp, .sg-app) .sgv-assets .it2 .as-ph { background: var(--ow-cream-deep); }
:is(.lp, .sg-app) .sgv-assets .as-ph > .material-symbols-outlined { font-size: 13cqw; color: rgba(11, 16, 32, 0.55); }
:is(.lp, .sg-app) .sgv-assets .as-ph .sgv-det { left: 10%; top: 12%; right: 10%; bottom: 12%; }
:is(.lp, .sg-app) .sgv-assets .as-lbl { display: flex; flex-direction: column; margin-top: 1.5cqw; }
:is(.lp, .sg-app) .sgv-assets .as-lbl b { font-size: 2.75cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-assets .as-rng { font-family: var(--ow-serif); font-size: 3.75cqw; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.lp, .sg-app) .sgv-assets .as-foot { position: absolute; left: 4cqw; top: 46.5cqw; width: 92cqw; height: 12cqw; display: flex; align-items: center; gap: 2.5cqw; padding: 2cqw 3cqw; border-radius: 3cqw; background: var(--ow-ink); color: #fff; }
:is(.lp, .sg-app) .sgv-assets .as-foot > .material-symbols-outlined { color: var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-assets .as-ft { flex: 1; display: flex; flex-direction: column; min-width: 0; }
:is(.lp, .sg-app) .sgv-assets .as-ft .sgv-k { color: var(--ow-champagne-light); }
:is(.lp, .sg-app) .sgv-assets .as-ft small { font-size: 2.5cqw; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-assets .as-sum { font-family: var(--ow-serif); font-size: 5.5cqw; white-space: nowrap; }

/* Receipts — the week, the series on Saturday, the book; the invoice as a PDF. */
:is(.lp, .sg-app) .sgv-receipts .rc-k { position: absolute; left: 4cqw; top: 4cqw; }
:is(.lp, .sg-app) .sgv-receipts .rc-week { position: absolute; left: 4cqw; top: 8.5cqw; width: 50cqw; height: 27.5cqw; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1cqw; }
:is(.lp, .sg-app) .sgv-receipts .rc-d { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75cqw; padding-top: 1.25cqw; border-radius: 2cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-receipts .rc-d.sat { background: var(--ow-ed-accent-soft); box-shadow: 0 0 0 0.5cqw rgba(11, 16, 32, 0.9); }
:is(.lp, .sg-app) .sgv-receipts .rc-d .nm { font-size: 2.125cqw; font-weight: 700; line-height: 1; color: var(--sg-faint); }
:is(.lp, .sg-app) .sgv-receipts .rc-d.sat .nm { color: var(--ow-ink); }
:is(.lp, .sg-app) .sgv-receipts .rc-bon { width: 4.5cqw; height: 5.5cqw; border-radius: 0.5cqw; background: #fffefa; box-shadow: 0 0.5cqw 1.25cqw rgba(40, 30, 10, 0.2); transform: rotate(-4deg); }
:is(.lp, .sg-app) .sgv-receipts .rc-bon + .rc-bon { margin-top: -3.5cqw; transform: rotate(6deg); }
:is(.lp, .sg-app) .sgv-receipts .rc-scan { position: absolute; left: 56.5cqw; top: 4cqw; width: 40cqw; height: 32cqw; border-radius: 3cqw; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 86%, var(--ow-paper)); }
:is(.lp, .sg-app) .sgv-receipts .rc-rc {
  position: absolute; left: 3cqw; top: 1.5cqw; width: 28cqw; padding: 1.75cqw 2cqw; background: #fffefa; color: #2b2a26;
  font-family: "Courier Prime", ui-monospace, Menlo, monospace; font-size: 1.75cqw; line-height: 1.4;
  transform: rotate(-2deg); box-shadow: 0 2cqw 4.5cqw rgba(40, 30, 10, 0.22);
}
:is(.lp, .sg-app) .sgv-receipts .rc-rc > b { display: block; text-align: center; letter-spacing: 0.06em; }
:is(.lp, .sg-app) .sgv-receipts .rc-rc hr { height: 0; margin: 0.75cqw 0; border: 0; border-top: 1px dashed #b9b2a3; background: none; opacity: 1; }
:is(.lp, .sg-app) .sgv-receipts .rc-rc p { display: flex; justify-content: space-between; gap: 1cqw; border-radius: 0.5cqw; }
:is(.lp, .sg-app) .sgv-receipts .rc-rc p span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-receipts .rc-tag { position: absolute; right: 1.75cqw; bottom: 1.75cqw; padding: 1cqw 1.75cqw; border-radius: 999px; background: var(--ow-ink); color: #fff; font-size: 2.125cqw; font-weight: 600; line-height: 1; }
:is(.lp, .sg-app) .sgv-receipts .rc-book { position: absolute; left: 4cqw; top: 39cqw; width: 59cqw; height: 20cqw; display: flex; flex-direction: column; gap: 1.5cqw; padding: 2cqw 2.5cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-receipts .rc-bh { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5cqw; }
:is(.lp, .sg-app) .sgv-receipts .rc-bh b { font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-receipts .rc-bh span { font-size: 2.25cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-receipts .rc-bk { display: flex; justify-content: space-between; gap: 1.5cqw; font-size: 2.625cqw; }
:is(.lp, .sg-app) .sgv-receipts .rc-bb { width: 72%; }
/* The sub types read off the receipt's positions, as small chips under the booking. */
:is(.lp, .sg-app) .sgv-receipts .rc-sub { display: flex; gap: 0.75cqw; overflow: hidden; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-receipts .rc-sub span { flex-shrink: 0; padding: 0.5cqw 1.1cqw; border-radius: 999px; background: var(--ow-ed-accent-soft); color: var(--ow-ink); font-size: 1.9cqw; font-weight: 600; line-height: 1.1; }
:is(.lp, .sg-app) .sgv-receipts .rc-pdf { position: absolute; left: 66cqw; top: 39cqw; width: 30.5cqw; height: 20cqw; display: flex; flex-direction: column; gap: 2cqw; padding: 2cqw 2.5cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-receipts .rc-pf { align-self: flex-start; padding: 1.25cqw 1.75cqw; font-size: 2.25cqw; box-shadow: none; }
:is(.lp, .sg-app) .sgv-receipts .rc-pl { display: flex; justify-content: space-between; gap: 1cqw; font-size: 2.375cqw; }

/* Plan — budgets per object type, the big picture, „Elternzeit“. */
:is(.lp, .sg-app) .sgv-plan .pl-hh { position: absolute; left: 3.5cqw; top: 3.5cqw; width: 40cqw; height: 55.5cqw; display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.25cqw 2.5cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-plan .pl-t { font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-row { display: flex; justify-content: space-between; gap: 1cqw; font-size: 2.5cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-hh > .sgv-k { margin-top: 0.5cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-bg { display: flex; flex-direction: column; gap: 0.75cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-bl { display: flex; justify-content: space-between; gap: 1cqw; font-size: 2.375cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-near { display: flex; align-items: center; gap: 0.75cqw; font-size: 2.125cqw; font-weight: 700; color: var(--ow-gold-ink); }
:is(.lp, .sg-app) .sgv-plan .pl-gb { position: absolute; left: 46.5cqw; top: 3.5cqw; width: 50cqw; height: 55.5cqw; display: flex; flex-direction: column; padding: 2.25cqw 2.5cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-plan .pl-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-gh b { font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-gh span { font-size: 2.125cqw; color: var(--own-fg-2); text-align: right; }
:is(.lp, .sg-app) .sgv-plan .pl-ch { display: block; width: 100%; height: 22.5cqw; margin-top: 1.5cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-ch .ax { stroke: var(--ow-line); }
:is(.lp, .sg-app) .sgv-plan .pl-ch .cor { fill: rgba(201, 169, 106, 0.16); }
:is(.lp, .sg-app) .sgv-plan .pl-ch .base { fill: none; stroke: var(--own-fg-3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
:is(.lp, .sg-app) .sgv-plan .pl-ch .scn { fill: none; stroke: var(--ow-ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
:is(.lp, .sg-app) .sgv-plan .pl-ch .dot { fill: var(--ow-ink); }
:is(.lp, .sg-app) .sgv-plan .pl-ax { display: flex; justify-content: space-between; font-size: 2cqw; color: var(--sg-faint); }
:is(.lp, .sg-app) .sgv-plan .pl-banner { display: flex; flex-direction: column; margin-top: 1.5cqw; padding: 1.25cqw 1.75cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--ow-champagne) 10%, var(--ow-paper)); border: 1px solid var(--ow-champagne); font-size: 2.25cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-banner span { color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-plan .pl-tpl { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.5cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-tpl .sgv-chip { font-size: 2cqw; padding: 0.5cqw 1.75cqw; }
:is(.lp, .sg-app) .sgv-plan .pl-t0 { position: relative; display: inline-flex; }
:is(.lp, .sg-app) .sgv-plan .pl-t0on { position: absolute; inset: 0; }

/* Budgets with their warning (SgSceneBudgets, the Haushaltsbuch campaign's film): the month's budgets
   per type on a paper card, the booked purchase at the foot, OWNAMIC's notice dropping in on top. */
:is(.lp, .sg-app) .sgv-budgets .bu-hd { position: absolute; left: 6cqw; right: 6cqw; top: 4.5cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
:is(.lp, .sg-app) .sgv-budgets .bu-hd .sgv-chip { font-size: 2.25cqw; padding: 0.6cqw 1.9cqw; }
:is(.lp, .sg-app) .sgv-budgets .bu-list {
  position: absolute; left: 4cqw; right: 4cqw; top: 11.5cqw; display: flex; flex-direction: column; gap: 2.5cqw;
  padding: 2.5cqw 3cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line);
}
:is(.lp, .sg-app) .sgv-budgets .bu-row { display: flex; flex-direction: column; gap: 1cqw; }
:is(.lp, .sg-app) .sgv-budgets .bu-l { display: flex; justify-content: space-between; align-items: center; gap: 1.5cqw; font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-budgets .bu-n { display: inline-flex; align-items: center; gap: 1.5cqw; }
:is(.lp, .sg-app) .sgv-budgets .bu-l b { font-variant-numeric: tabular-nums; }
:is(.lp, .sg-app) .sgv-budgets .bu-near {
  display: inline-flex; align-items: center; gap: 0.6cqw; padding: 0.3cqw 1.4cqw; border-radius: 999px;
  font-size: 2.1cqw; font-weight: 700; color: var(--ow-gold-ink);
  background: color-mix(in srgb, var(--ow-champagne) 12%, var(--ow-paper)); border: 1px solid var(--ow-champagne);
}
:is(.lp, .sg-app) .sgv-budgets .bu-new {
  position: absolute; left: 4cqw; right: 4cqw; bottom: 3.5cqw; display: flex; align-items: center; gap: 2cqw;
  padding: 1.5cqw 2.5cqw; border-radius: 2.5cqw; background: var(--ow-cream); border: 1px solid var(--ow-line); font-size: 2.6cqw;
}
:is(.lp, .sg-app) .sgv-budgets .bu-new .ic { display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 1.75cqw; background: var(--ow-paper); color: var(--ow-ink); }
:is(.lp, .sg-app) .sgv-budgets .bu-new .tt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
:is(.lp, .sg-app) .sgv-budgets .bu-new small { font-size: 2.1cqw; color: var(--sg-mute); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-budgets .bu-alert {
  position: absolute; left: 14cqw; right: 4cqw; top: 2.5cqw; z-index: 2; display: flex; align-items: center; gap: 2cqw;
  padding: 1.6cqw 2.5cqw; border-radius: 2.75cqw; background: var(--ow-ink); color: #fff;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 0, 0, 0.45);
}
:is(.lp, .sg-app) .sgv-budgets .bu-alert .ic { display: grid; place-items: center; flex: none; width: 6.5cqw; height: 6.5cqw; border-radius: 50%; background: var(--ow-champagne); color: var(--ow-ink); }
:is(.lp, .sg-app) .sgv-budgets .bu-alert .tx { display: flex; flex-direction: column; min-width: 0; font-size: 2.6cqw; }
:is(.lp, .sg-app) .sgv-budgets .bu-alert small { font-size: 2.2cqw; color: color-mix(in srgb, #fff 72%, transparent); }

/* Structure — a collection, the rooms of „Zuhause“, or house › room › shelf › box. */
:is(.lp, .sg-app) .sgv-structure .st-k { position: absolute; left: 4cqw; top: 3cqw; right: 4cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
:is(.lp, .sg-app) .sgv-structure .st-chip { font-size: 2.125cqw; }
:is(.lp, .sg-app) .sgv-structure .st-node { position: absolute; display: flex; align-items: center; gap: 2cqw; font-size: 2.875cqw; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-structure .st-node .ic { flex: none; display: grid; place-items: center; width: 6.5cqw; height: 6.5cqw; border-radius: 2cqw; background: var(--ow-cream); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-structure .st-root { left: 4cqw; top: 9cqw; }
:is(.lp, .sg-app) .sgv-structure .st-root .ic { width: 8cqw; height: 8cqw; background: var(--ow-ink); color: var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-structure .st-root b { font-family: var(--ow-serif); font-size: 4.25cqw; font-weight: 500; }
:is(.lp, .sg-app) .sgv-structure .st-c { left: calc(4cqw + var(--lvl) * 7cqw); padding: 1cqw 2.5cqw 1cqw 1cqw; border-radius: 2.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-structure .st-c1 { top: 20cqw; }
:is(.lp, .sg-app) .sgv-structure .st-c2 { top: 29.5cqw; }
:is(.lp, .sg-app) .sgv-structure .st-c3 { top: 39cqw; }
:is(.lp, .sg-app) .sgv-structure .st-ln {
  position: absolute; left: -3cqw; top: -4.5cqw; width: 2.75cqw; height: calc(50% + 4.5cqw);
  border-left: 1.5px solid var(--ow-champagne); border-bottom: 1.5px solid var(--ow-champagne); border-bottom-left-radius: 1.5cqw;
}
:is(.lp, .sg-app) .sgv-structure.is-nested .st-ln { left: -2.5cqw; top: -1.5cqw; height: calc(50% + 1.5cqw); }

/* Capture — a photo, a photo series or a room video; what OWNY found. */
:is(.lp, .sg-app) .sgv-capture .cp-phone { position: absolute; left: 5.5cqw; top: 3.5cqw; width: 32cqw; height: 55.5cqw; padding: 1.25cqw; border-radius: 5.5cqw; background: var(--ow-ink); box-shadow: 0 3cqw 7cqw rgba(11, 16, 32, 0.25); }
:is(.lp, .sg-app) .sgv-capture .cp-screen { position: relative; width: 100%; height: 100%; border-radius: 4.25cqw; overflow: hidden; background: linear-gradient(180deg, var(--ow-cream) 0 58%, var(--ow-cream-deep) 58% 100%); }
:is(.lp, .sg-app) .sgv-capture .cp-room { position: absolute; inset: 0; }
:is(.lp, .sg-app) .sgv-capture .cp-o { position: absolute; display: grid; place-items: center; color: color-mix(in srgb, var(--ow-ink) 55%, transparent); }
:is(.lp, .sg-app) .sgv-capture .cp-o > .material-symbols-outlined { font-size: 9.5cqw; }
:is(.lp, .sg-app) .sgv-capture .cp-o .sgv-det { inset: -0.75cqw; }
:is(.lp, .sg-app) .sgv-capture .o0 { left: 1.5cqw; top: 26cqw; width: 12.5cqw; height: 11.5cqw; }
:is(.lp, .sg-app) .sgv-capture .o1 { left: 14.5cqw; top: 6.5cqw; width: 12.5cqw; height: 12.5cqw; }
:is(.lp, .sg-app) .sgv-capture .o2 { left: 16cqw; top: 31cqw; width: 12cqw; height: 11.5cqw; }
:is(.lp, .sg-app) .sgv-capture .cp-rec { position: absolute; left: 2cqw; top: 2cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 0.75cqw 1.5cqw; border-radius: 999px; background: rgba(11, 16, 32, 0.75); color: #fff; font-size: 2cqw; font-weight: 700; letter-spacing: 0.06em; }
:is(.lp, .sg-app) .sgv-capture .cp-rec i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--ow-negative-on-ink); }
:is(.lp, .sg-app) .sgv-capture .cp-shut { position: absolute; left: calc(50% - 3.75cqw); bottom: 2.5cqw; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; border: 0.75cqw solid var(--ow-paper); background: rgba(255, 255, 255, 0.4); box-shadow: 0 0.5cqw 2cqw rgba(11, 16, 32, 0.25); }
:is(.lp, .sg-app) .sgv-capture .cp-list { position: absolute; left: 41.5cqw; top: 6cqw; width: 53.5cqw; display: flex; flex-direction: column; gap: 1.75cqw; }
:is(.lp, .sg-app) .sgv-capture .cp-h { display: flex; align-items: center; justify-content: space-between; gap: 1.5cqw; margin-bottom: 0.5cqw; }
:is(.lp, .sg-app) .sgv-capture .cp-h .sgv-chip { font-size: 2.125cqw; }
:is(.lp, .sg-app) .sgv-capture .cp-r { display: flex; align-items: center; gap: 2cqw; padding: 1.75cqw 2.25cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.875cqw; }
:is(.lp, .sg-app) .sgv-capture .cp-r .ic { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: var(--ow-cream); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-capture .cp-r b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-capture .cp-r .sgv-chip { font-size: 2cqw; padding: 0.5cqw 1.5cqw; }

/* Confirm — the findings on their cards, one deleted, one renamed, saved. */
:is(.lp, .sg-app) .sgv-confirm .cf-h { position: absolute; left: 3.5cqw; top: 2.5cqw; right: 3.5cqw; display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; }
:is(.lp, .sg-app) .sgv-confirm .cf-t { font-family: var(--ow-serif); font-size: 4cqw; font-weight: 500; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-confirm .cf-t em { font-style: italic; color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-confirm .cf-h .sgv-chip { font-size: 2.125cqw; }
:is(.lp, .sg-app) .sgv-confirm .cf-grid { position: absolute; left: 3.5cqw; top: 10cqw; right: 3.5cqw; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75cqw; }
:is(.lp, .sg-app) .sgv-confirm .cf-c { display: flex; align-items: center; gap: 1.75cqw; min-width: 0; padding: 1.75cqw 2cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-confirm .cf-c .ic { flex: none; display: grid; place-items: center; width: 6.5cqw; height: 6.5cqw; border-radius: 2cqw; background: var(--ow-cream); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-confirm .cf-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-confirm .cf-acts { flex: none; display: flex; gap: 1cqw; color: var(--own-fg-3); }
:is(.lp, .sg-app) .sgv-confirm .cf-acts .material-symbols-outlined { font-size: 3.25cqw; vertical-align: 0; }
:is(.lp, .sg-app) .sgv-confirm .cf-c.c3 { visibility: hidden; }
:is(.lp, .sg-app) .sgv-confirm .cf-btn { position: absolute; right: 3.5cqw; bottom: 3cqw; padding: 1.75cqw 3.5cqw; border-radius: 999px; background: var(--ow-ink); color: #fff; font-size: 2.625cqw; font-weight: 700; visibility: hidden; }
:is(.lp, .sg-app) .sgv-confirm .cf-saved { position: absolute; left: 3.5cqw; bottom: 3.5cqw; display: inline-flex; align-items: center; gap: 1.25cqw; font-size: 2.75cqw; font-weight: 700; color: var(--ow-ev-documented); }

/* Detail — the shots fly from the camera to their places; the serial number is read. */
:is(.lp, .sg-app) .sgv-detail .dt-obj { position: absolute; left: 4cqw; top: 4cqw; width: 62.5cqw; display: flex; align-items: center; gap: 2.5cqw; padding: 2.5cqw; border-radius: 3.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-detail .dt-ph { flex: none; display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 3cqw; background: var(--ow-cream-deep); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-detail .dt-ph .material-symbols-outlined { font-size: 8cqw; }
:is(.lp, .sg-app) .sgv-detail .dt-nm { display: flex; flex-direction: column; gap: 0.75cqw; min-width: 0; }
:is(.lp, .sg-app) .sgv-detail .dt-nm b { font-family: var(--ow-serif); font-size: 4cqw; font-weight: 500; line-height: 1.15; }
:is(.lp, .sg-app) .sgv-detail .dt-cam { position: absolute; left: 76cqw; top: 5cqw; display: grid; place-items: center; width: 16cqw; height: 16cqw; border-radius: 50%; overflow: hidden; background: var(--ow-ink); color: #fff; }
:is(.lp, .sg-app) .sgv-detail .dt-cam > .material-symbols-outlined { font-size: 7cqw; }
:is(.lp, .sg-app) .sgv-detail .dt-shots { position: absolute; left: 4cqw; top: 26cqw; width: 92cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5cqw; }
:is(.lp, .sg-app) .sgv-detail .dt-s { display: flex; flex-direction: column; align-items: center; gap: 1.25cqw; min-width: 0; font-size: 2.5cqw; font-weight: 600; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-detail .dt-th { display: grid; place-items: center; width: 100%; height: 16cqw; border-radius: 2.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 1.5cqw 3.5cqw rgba(11, 16, 32, 0.08); color: var(--ow-ink); }
:is(.lp, .sg-app) .sgv-detail .dt-th .material-symbols-outlined { font-size: 7cqw; }
:is(.lp, .sg-app) .sgv-detail .dt-serial { position: absolute; left: 4cqw; top: 51.5cqw; display: flex; align-items: center; gap: 2cqw; font-size: 3cqw; }
:is(.lp, .sg-app) .sgv-detail .dt-sn { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; }

/* Evidence — papers fly in and file themselves; read; on record. */
:is(.lp, .sg-app) .sgv-evidence .ev-obj {
  position: absolute; left: 17.5cqw; top: 5.5cqw; width: 65cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqw; padding: 3.5cqw 3.5cqw 3cqw;
  border-radius: 4cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 3.5cqw 7.5cqw rgba(11, 16, 32, 0.1);
}
:is(.lp, .sg-app) .sgv-evidence .ev-ph { display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 3cqw; background: var(--ow-cream-deep); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-evidence .ev-ph .material-symbols-outlined { font-size: 7.5cqw; }
:is(.lp, .sg-app) .sgv-evidence .ev-nm { font-family: var(--ow-serif); font-size: 4cqw; font-weight: 500; text-align: center; }
:is(.lp, .sg-app) .sgv-evidence .ev-docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5cqw; }
:is(.lp, .sg-app) .sgv-evidence .ev-doc { display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2cqw; border-radius: 2cqw; background: var(--ow-cream); border: 1px solid var(--ow-line); font-size: 2.375cqw; font-weight: 600; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-evidence .ev-doc .material-symbols-outlined { color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-evidence .ev-read { display: flex; align-items: center; gap: 1.5cqw; font-size: 2.5cqw; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-evidence .ev-read .sgv-chip { font-size: 2cqw; padding: 0.5cqw 1.5cqw; }
:is(.lp, .sg-app) .sgv-evidence .ev-badge { display: inline-flex; align-items: center; gap: 1cqw; font-size: 2.5cqw; font-weight: 700; color: var(--ow-ev-documented); }
:is(.lp, .sg-app) .sgv-evidence .ev-fly {
  position: absolute; top: 37.5cqw; display: grid; place-items: center; width: 10cqw; height: 12.5cqw; border-radius: 1.5cqw;
  background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 2cqw 4.5cqw rgba(11, 16, 32, 0.16); color: var(--ow-champagne-deep);
  opacity: 0; visibility: hidden;
}
:is(.lp, .sg-app) .sgv-evidence .ev-fly .material-symbols-outlined { font-size: 5.5cqw; }
:is(.lp, .sg-app) .sgv-evidence .ev-fly.f0 { left: 3.5cqw; }
:is(.lp, .sg-app) .sgv-evidence .ev-fly.f1 { left: 86.5cqw; }

/* Values — comparable offers, a range, silver on its daily price. */
:is(.lp, .sg-app) .sgv-values .vl-obj { position: absolute; left: 4cqw; top: 4cqw; width: 92cqw; display: flex; align-items: center; gap: 2.5cqw; padding: 2.5cqw 3cqw; border-radius: 3.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-values .vl-ph { flex: none; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 2.5cqw; background: var(--ow-cream-deep); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-values .vl-ph .material-symbols-outlined { font-size: 6.5cqw; }
:is(.lp, .sg-app) .sgv-values .vl-nm { flex: 1; display: flex; flex-direction: column; min-width: 0; }
:is(.lp, .sg-app) .sgv-values .vl-nm b { font-size: 3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-values .vl-nm small { font-size: 2.125cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-values .vl-rng { font-family: var(--ow-serif); font-size: 5.5cqw; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.lp, .sg-app) .sgv-values .vl-offers { position: absolute; left: 4cqw; top: 22cqw; width: 55cqw; display: flex; flex-direction: column; gap: 0.5cqw; padding: 2.25cqw 2.5cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-values .vl-of { display: flex; align-items: center; gap: 1.5cqw; padding: 1.25cqw 0; border-top: 1px solid var(--ow-line-soft); font-size: 2.625cqw; }
:is(.lp, .sg-app) .sgv-values .vl-offers .sgv-k + .vl-of { border-top: 0; }
:is(.lp, .sg-app) .sgv-values .vl-of .material-symbols-outlined { color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-values .vl-of .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-values .vl-of b { white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.lp, .sg-app) .sgv-values .vl-metal { position: absolute; left: 62cqw; top: 22cqw; width: 34cqw; display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.5cqw; border-radius: 3cqw; background: var(--ow-ink); color: #fff; font-size: 2.5cqw; }
:is(.lp, .sg-app) .sgv-values .vl-metal > .material-symbols-outlined { color: var(--ow-champagne); font-size: 4.5cqw; }
:is(.lp, .sg-app) .sgv-values .vl-spk { width: 100%; height: 6cqw; }
:is(.lp, .sg-app) .sgv-values .vl-spk path { fill: none; stroke: var(--ow-champagne); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 0; }

/* Deadlines — three dates marked in the month, listed, the reminder rings. */
:is(.lp, .sg-app) .sgv-deadlines .dl-cal { position: absolute; left: 4cqw; top: 4cqw; width: 42.5cqw; display: flex; flex-direction: column; gap: 2cqw; padding: 2.5cqw; border-radius: 3.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-deadlines .dl-hd { display: flex; align-items: center; gap: 1.25cqw; font-size: 2.5cqw; font-weight: 700; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-deadlines .dl-hd .material-symbols-outlined { color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-deadlines .dl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1cqw; }
:is(.lp, .sg-app) .sgv-deadlines .dl-grid i { aspect-ratio: 1; border-radius: 1cqw; background: var(--ow-cream); }
:is(.lp, .sg-app) .sgv-deadlines .dl-grid i.out { background: transparent; }
:is(.lp, .sg-app) .sgv-deadlines .dl-grid i.on { background: var(--ow-ink); box-shadow: 0 0 0 0.5cqw color-mix(in srgb, var(--ow-champagne) 50%, transparent); }
:is(.lp, .sg-app) .sgv-deadlines .dl-list { position: absolute; left: 50cqw; top: 4cqw; width: 46cqw; display: flex; flex-direction: column; gap: 1.75cqw; }
:is(.lp, .sg-app) .sgv-deadlines .dl-e { display: flex; align-items: center; gap: 2cqw; padding: 1.75cqw 2.25cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-deadlines .dl-e .ic { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: var(--ow-cream); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-deadlines .dl-e .tx { display: flex; flex-direction: column; min-width: 0; }
:is(.lp, .sg-app) .sgv-deadlines .dl-e b { font-size: 2.625cqw; line-height: 1.25; }
:is(.lp, .sg-app) .sgv-deadlines .dl-e small { font-size: 2.25cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-deadlines .dl-bell { align-self: flex-start; font-size: 2.25cqw; }

/* Share — the parts ticked off, the PDF built page by page, a view without values. */
:is(.lp, .sg-app) .sgv-share .sh-list { position: absolute; left: 4cqw; top: 5.5cqw; width: 43cqw; display: flex; flex-direction: column; gap: 1cqw; padding: 2.5cqw; border-radius: 3.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-share .sh-r { display: flex; align-items: center; gap: 1.75cqw; padding: 1.25cqw 0.5cqw; font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-share .sh-r > .material-symbols-outlined:first-child { color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-share .sh-r .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-share .sh-r .ck { color: var(--ow-ev-documented); }
:is(.lp, .sg-app) .sgv-share .sh-doc { position: absolute; left: 57cqw; top: 4.5cqw; width: 27.5cqw; height: 35cqw; }
:is(.lp, .sg-app) .sgv-share .sh-pg { position: absolute; inset: 0; border-radius: 1.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 2cqw 4.5cqw rgba(11, 16, 32, 0.12); }
:is(.lp, .sg-app) .sgv-share .sh-pg.p1 { transform: translate(2cqw, 1.5cqw) rotate(3deg); }
:is(.lp, .sg-app) .sgv-share .sh-pg.p2 { transform: translate(4cqw, 3cqw) rotate(6deg); }
:is(.lp, .sg-app) .sgv-share .sh-pg.p0 { display: flex; flex-direction: column; gap: 1.75cqw; padding: 3cqw 2.5cqw; }
:is(.lp, .sg-app) .sgv-share .sh-pdf { align-self: flex-start; padding: 0.75cqw 1.5cqw; border-radius: 1cqw; background: var(--ow-blush); color: var(--ow-negative); font-size: 2cqw; font-weight: 800; }
:is(.lp, .sg-app) .sgv-share .sh-pg.p0 i { display: block; height: 1.5cqw; border-radius: 0.75cqw; background: var(--ow-line-soft); }
:is(.lp, .sg-app) .sgv-share .sh-pg.p0 i:nth-child(3) { width: 80%; }
:is(.lp, .sg-app) .sgv-share .sh-pg.p0 i:nth-child(4) { width: 92%; }
:is(.lp, .sg-app) .sgv-share .sh-pg.p0 i:nth-child(5) { width: 60%; }
:is(.lp, .sg-app) .sgv-share .sh-file { position: absolute; left: 53cqw; top: 44cqw; width: 43cqw; display: flex; flex-direction: column; gap: 1cqw; }
:is(.lp, .sg-app) .sgv-share .sh-file small { font-size: 2.25cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-share .sh-link { position: absolute; left: 4cqw; top: 49cqw; font-size: 2.375cqw; }

/* Invite — a shared space, two people join, what they see. */
:is(.lp, .sg-app) .sgv-invite .iv-space {
  position: absolute; left: 12.5cqw; top: 7.5cqw; width: 75cqw; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 4cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 3.5cqw 7.5cqw rgba(11, 16, 32, 0.1);
}
:is(.lp, .sg-app) .sgv-invite .iv-hd { display: flex; align-items: center; gap: 2cqw; padding: 2.5cqw 3.5cqw; background: var(--ow-ink); color: #fff; font-size: 3cqw; }
:is(.lp, .sg-app) .sgv-invite .iv-hd b { flex: 1; min-width: 0; font-family: var(--ow-serif); font-size: 4cqw; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-invite .iv-hd .material-symbols-outlined { color: var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-invite .iv-members { display: flex; justify-content: space-around; gap: 2cqw; padding: 3.5cqw 3cqw 2cqw; }
:is(.lp, .sg-app) .sgv-invite .iv-m { display: flex; flex-direction: column; align-items: center; gap: 1cqw; min-width: 0; font-size: 2.75cqw; font-weight: 600; }
:is(.lp, .sg-app) .sgv-invite .iv-m .av { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--ow-cream-deep); color: var(--ow-ink); font-size: 3.75cqw; font-weight: 800; }
:is(.lp, .sg-app) .sgv-invite .iv-m.me .av { background: var(--ow-ink); color: var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-invite .iv-m .nm { display: flex; flex-direction: column; align-items: center; }
:is(.lp, .sg-app) .sgv-invite .iv-m small { font-size: 2.125cqw; font-weight: 600; color: var(--ow-ev-documented); }
:is(.lp, .sg-app) .sgv-invite .iv-note { display: flex; align-items: center; justify-content: center; gap: 1.25cqw; margin: 1cqw 3cqw 3cqw; padding: 1.5cqw 2.5cqw; border-radius: 999px; background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); font-size: 2.5cqw; font-weight: 600; }
:is(.lp, .sg-app) .sgv-invite .iv-mail { position: absolute; left: 46.5cqw; top: 31cqw; display: grid; place-items: center; width: 7.5cqw; height: 7.5cqw; border-radius: 2cqw; background: var(--ow-champagne); color: var(--ow-ink); opacity: 0; visibility: hidden; }

/* Sort — each thing decided in turn; the piles count. */
:is(.lp, .sg-app) .sgv-sort .so-items { position: absolute; left: 4cqw; top: 4cqw; width: 92cqw; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75cqw; }
:is(.lp, .sg-app) .sgv-sort .so-it { display: flex; align-items: center; gap: 1.75cqw; min-width: 0; padding: 1.5cqw 2cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 2.75cqw; }
:is(.lp, .sg-app) .sgv-sort .so-it .ic { flex: none; display: grid; place-items: center; width: 6.5cqw; height: 6.5cqw; border-radius: 2cqw; background: var(--ow-cream); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-sort .so-it b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lp, .sg-app) .sgv-sort .so-tag { flex: none; display: grid; place-items: center; width: 5.5cqw; height: 5.5cqw; border-radius: 50%; background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); }
:is(.lp, .sg-app) .sgv-sort .so-tag .material-symbols-outlined { font-size: 3.25cqw; vertical-align: 0; }
:is(.lp, .sg-app) .sgv-sort .so-bins { position: absolute; left: 4cqw; top: 29cqw; width: 92cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
:is(.lp, .sg-app) .sgv-sort .so-bin {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75cqw; padding: 2.5cqw 1.5cqw 2cqw; border-radius: 3.5cqw;
  border: 1.5px dashed color-mix(in srgb, var(--ow-champagne) 70%, transparent); background: color-mix(in srgb, var(--ow-paper) 60%, transparent);
  font-size: 2.5cqw; font-weight: 700; text-align: center;
}
:is(.lp, .sg-app) .sgv-sort .so-bin > .material-symbols-outlined { font-size: 5cqw; color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-sort .so-bin .nm { line-height: 1.2; }
:is(.lp, .sg-app) .sgv-sort .so-n { font-size: 4.5cqw; font-weight: 700; line-height: 1; color: var(--ow-ink); font-variant-numeric: tabular-nums; }

/* Story — who it is meant for, and the story written down. */
:is(.lp, .sg-app) .sgv-story .sy-obj { position: absolute; left: 4cqw; top: 5.5cqw; width: 37.5cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqw; padding: 3.5cqw 2.5cqw 3cqw; border-radius: 4cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); text-align: center; }
:is(.lp, .sg-app) .sgv-story .sy-ph { display: grid; place-items: center; width: 17.5cqw; height: 17.5cqw; border-radius: 3.5cqw; background: var(--ow-cream-deep); color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-story .sy-ph .material-symbols-outlined { font-size: 9.5cqw; }
:is(.lp, .sg-app) .sgv-story .sy-nm { font-family: var(--ow-serif); font-size: 3.75cqw; font-weight: 500; line-height: 1.15; }
:is(.lp, .sg-app) .sgv-story .sy-for { font-size: 2.25cqw; }
:is(.lp, .sg-app) .sgv-story .sy-note {
  position: absolute; left: 45cqw; top: 8.5cqw; width: 51cqw; display: flex; flex-direction: column; gap: 2cqw; padding: 3cqw 3.5cqw;
  border-radius: 4cqw 4cqw 4cqw 1cqw; background: var(--ow-paper); border: 1px solid var(--ow-champagne); box-shadow: 0 3cqw 6.5cqw rgba(11, 16, 32, 0.1);
}
:is(.lp, .sg-app) .sgv-story .sy-text { min-height: 3.9em; font-family: var(--ow-serif); font-size: 3.75cqw; font-style: italic; line-height: 1.3; }
:is(.lp, .sg-app) .sgv-story .sy-voice { display: inline-flex; align-items: center; gap: 1.25cqw; font-size: 2.375cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-story .sy-voice .material-symbols-outlined { color: var(--ow-champagne-deep); }

/* Handover — the piece passes on, the date is kept. */
:is(.lp, .sg-app) .sgv-handover .ho-people { position: absolute; left: 7.5cqw; top: 4.5cqw; width: 85cqw; display: flex; align-items: center; justify-content: space-between; }
:is(.lp, .sg-app) .sgv-handover .ho-p { display: flex; flex-direction: column; align-items: center; gap: 1cqw; font-size: 2.75cqw; font-weight: 600; }
:is(.lp, .sg-app) .sgv-handover .ho-p .av { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--ow-cream-deep); color: var(--ow-ink); font-size: 4cqw; font-weight: 800; }
:is(.lp, .sg-app) .sgv-handover .ho-p.me .av { background: var(--ow-ink); color: var(--ow-champagne); }
:is(.lp, .sg-app) .sgv-handover .ho-arrow { position: relative; flex: 1; height: 0.5cqw; margin: 0 3.5cqw 4.5cqw; }
:is(.lp, .sg-app) .sgv-handover .ho-arrow i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne)); transform-origin: left center; }
:is(.lp, .sg-app) .sgv-handover .ho-arrow .material-symbols-outlined { position: absolute; right: -1.5cqw; top: -2cqw; font-size: 4cqw; color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-handover .ho-obj { position: absolute; left: 59cqw; top: 21.5cqw; display: flex; align-items: center; gap: 1.75cqw; padding: 1.75cqw 2.5cqw; border-radius: 3cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 2.5cqw 5.5cqw rgba(11, 16, 32, 0.12); font-size: 2.75cqw; white-space: nowrap; }
:is(.lp, .sg-app) .sgv-handover .ho-obj .material-symbols-outlined { color: var(--ow-champagne-deep); }
:is(.lp, .sg-app) .sgv-handover .ho-ev { position: absolute; left: 7.5cqw; top: 35cqw; width: 85cqw; display: flex; align-items: center; gap: 2.5cqw; padding: 2.5cqw 3cqw; border-radius: 3.5cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); }
:is(.lp, .sg-app) .sgv-handover .ho-ev > .material-symbols-outlined:first-child { display: grid; place-items: center; width: 7.5cqw; height: 7.5cqw; border-radius: 2cqw; background: var(--ow-cream); color: var(--ow-champagne-deep); vertical-align: 0; }
:is(.lp, .sg-app) .sgv-handover .ho-ev .tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
:is(.lp, .sg-app) .sgv-handover .ho-ev b { font-size: 2.875cqw; }
:is(.lp, .sg-app) .sgv-handover .ho-ev small { font-size: 2.375cqw; color: var(--own-fg-2); }
:is(.lp, .sg-app) .sgv-handover .ho-ev .ok { color: var(--ow-ev-documented); }
:is(.lp, .sg-app) .sgv-handover .ho-note { position: absolute; left: 7.5cqw; top: 51cqw; width: 85cqw; font-size: 2.375cqw; font-style: italic; color: var(--own-fg-2); text-align: center; }

/* ── 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(201, 169, 106,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; }
/* What follows the trial (TrialAfterLine), right under its line. */
.lp .lp-closing span.micro { display: block; margin-top: 6px; }

/* ── 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-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 { gap: 20px; max-width: 520px; margin: 0 auto 24px; padding: 28px; }
  /* 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 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; }
  /* A phone keeps one quiet "Einloggen"; the registration is the sticky start bar at the foot. */
  .lp .lp-nav-cta .lp-signin { padding: 0 6px; }
  .lp .lp-nav-cta .lp-nav-start { display: none; }
  .lp .lp-nav-cta .lp-btn { padding: 10px 16px; font-size: 0.88rem; }
  /* One row on a phone, over the dark hero as over the light one (.lp-nav--light): the lockup
     set smaller, "Anmelden" and the language beside each other on the right. The selector used
     to wrap onto a row of its own below the button, which cost the hero a full row of height. */
  .lp .lp-nav-inner { gap: 12px; }
  .lp .lp-nav-brand .lp-mark-logo { height: 1.9rem; }
  .lp .lp-nav-brand .hero-logo-text-span { font-size: 1.5rem; margin: 0; }
  .lp .lp-nav-cta { flex-wrap: nowrap; gap: 8px; }
  .lp .lp-nav-cta .lp-btn { order: 0; padding: 9px 14px; }
  .lp .lp-nav-cta .lang-select { order: 1; flex: none; }
  /* The nav is one row now, so the take-card and live-preview heroes start higher. */
  .lp .ax-hero { padding-top: 96px; }
  /* 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-usecases-grid.lp-usecases-grid--pair { 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; }
}

/* The narrowest phones: the selector keeps only its flag (the menu still names both languages)
   and the lockup shrinks a notch more, so the single nav row still fits beside "Anmelden" — over
   the dark hero and the light one alike. The partner-programme pages (.pp) keep their own,
   two-row arrangement for this width. */
@media (max-width: 400px) {
  .lp:not(.pp) .lp-nav .lang-select-code { display: none; }
  .lp:not(.pp) .lp-nav .lp-nav-brand .lp-mark-logo,
  .lp:not(.pp) .lp-nav.lp-nav--light .lp-nav-brand .lp-mark-logo { height: 1.7rem; }
  .lp:not(.pp) .lp-nav .lp-nav-brand .hero-logo-text-span,
  .lp:not(.pp) .lp-nav.lp-nav--light .lp-nav-brand .hero-logo-text-span { font-size: 1.32rem; }
}
@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).
   Warm-cream "Premium" interior + champagne accents (the former indigo→violet brand v1 is
   folded into it, docs/farbhomogenisierung-konzept.md §8).
   These are global so any surface can adopt the editorial language.
   ========================================================================= */
:root {
  /* brand */
  --own-bg:               #ffffff;
  --own-bg-wash:          var(--ow-cream);
  --own-surface:          #ffffff;
  --own-surface-muted:    #f8fafc;
  --own-border:           #e2e8f0;
  --own-fg-1:             #1e293b;
  --own-fg-2:             #475569;
  --own-fg-3:             #94a3b8;

  /* Brand v1 (indigo/violet) folded into the golden-creme brand
     (docs/farbhomogenisierung-konzept.md §8). The names stay so the rules that read them keep
     working; new rules use the --ow-* tokens directly. */
  --own-primary:          var(--ow-ink);
  --own-primary-hover:    var(--ow-ink-2);
  --own-violet:           var(--ow-gold-ink);
  --own-lavender:         var(--ow-champagne-light);
  --own-accent:           var(--ow-champagne);
  --own-gradient-primary: linear-gradient(135deg, var(--ow-ink-2) 0%, var(--ow-ink) 100%);

  /* Signals — muted to sit beside the brand: success is the "belegt" green, danger the debt red. */
  --own-success:          var(--ow-ev-documented);
  --own-danger:           var(--ow-negative);
  --own-warning:          var(--ow-champagne-deep);
  --own-info:             var(--ow-ed-finanzen);

  /* 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;

  /* Gold as a text colour. --ow-champagne-deep reaches only 3.4:1 on paper, too little for
     small type; this is the gold that eyebrows, links and figures are set in (6.6:1). */
  --ow-gold-ink:          #72592c;

  /* OWNAMIC editions — one undertone per edition (docs/farbhomogenisierung-konzept.md §4).
     Same lightness and low chroma for all four, only the hue differs: the edition is a hint,
     the brand stays gold. Only text and cream grounds wear them — never a filled surface.
     Each deep tone keeps 4.5:1 on --ow-paper, --ow-cream and its own -soft ground. */
  --ow-ed-sammler:        var(--ow-gold-ink);
  --ow-ed-sammler-soft:   #f5ede0;
  --ow-ed-finanzen:       #585c72;
  --ow-ed-finanzen-soft:  #efeeec;
  --ow-ed-vorsorge:       #4c6550;
  --ow-ed-vorsorge-soft:  #edefe5;
  --ow-ed-bestand:        #7b533c;
  --ow-ed-bestand-soft:   #f7ece2;

  /* The four evidence stages (belegt · recherchiert · geschätzt · angenommen), from sure to
     unsure — the distribution bar on Belege & Nachweise and the Sammler start page. */
  --ow-ev-documented:     #1f5b35;
  --ow-ev-researched:     #4f7a5c;
  --ow-ev-estimated:      #a7864b;
  --ow-ev-assumed:        #c9bfa9;

  /* Money going out — a debt, an expense. Deep enough for text on paper, and a light
     counterpart for the ink card. */
  --ow-negative:          #9b2c1f;
  --ow-negative-on-ink:   #ffb4a8;

  /* 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(201, 169, 106,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, var(--ow-champagne)); background: rgba(129,140,248,0.08); }
.lp .det.alt .det-lbl { background: var(--own-accent, var(--ow-champagne)); 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(11, 16, 32,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(11, 16, 32,0.4); } 50% { box-shadow: 0 10px 28px rgba(201, 169, 106,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; }
/* The Sammler page's example piece fills its frame (its photo, not an icon). */
.lp .ohist-obj .thumb.thumb--photo { background: var(--ow-ink); }
.lp .ohist-obj .thumb.thumb--photo img { width: 100%; height: 100%; object-fit: cover; }
.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(11, 16, 32,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(201, 169, 106,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(201, 169, 106,0.16) 0 14px, rgba(201, 169, 106,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: var(--ow-champagne-light); }
.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: var(--ow-champagne-light); }
/* 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: var(--ow-champagne-light); 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: var(--ow-champagne-light); }
.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) ───────────────
   The head of the "Landing - Evolution" design, then the comparison as a scroll story
   (<GoldenMiddleStory />, see SCROLL STORIES): a scale from "by hand" to "automatic" whose knob
   swings to the one end, then the other, and settles in the middle. The card of the way the knob
   points at stands in front, the others step back; the golden middle, OWNAMIC, rises last between
   the two, which lean in towards it. Below 900px the three cards share one place and only the
   current one shows. The OWNY icon is <OwnyIconComponent> and the OWNAMIC wordmark is text
   (`.hero-logo-text-span`), so no image assets from the design are pulled in. */

/* Header */
.lp .lp-evo .evo-head { text-align: center; max-width: 840px; margin: 0 auto 56px; }
.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; }
/* Finanzen: the fact that bears the headline out — the Bundesbank's share of physical assets — as one
   large figure with its sentence and source, centred under the lede. */
.lp .lp-evo .evo-head .evo-fact { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; max-width: 620px; margin: 28px auto 0; padding: 16px 22px; border: 1px solid var(--ow-line); border-radius: 16px; background: var(--ow-paper); text-align: left; }
.lp .lp-evo .evo-head .evo-fact b { grid-row: span 2; font-family: var(--ow-serif); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--ow-gold-ink); font-variant-numeric: lining-nums; }
.lp .lp-evo .evo-head .evo-fact span { font-size: 1rem; line-height: 1.45; color: var(--ow-ink); }
.lp .lp-evo .evo-head .evo-fact small { font-size: 0.78rem; line-height: 1.4; color: var(--own-fg-2); }

.lp .lp-gm { --story-steps: 3; --story-half: 200px; }

/* The scale */
.lp .lp-gm .gm-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; max-width: 820px; margin: 0 auto 52px; }
.lp .lp-gm .gm-end {
  font-size: var(--ow-eyebrow-size); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: var(--own-fg-3); transition: color 350ms var(--own-ease);
}
.lp .lp-gm .gm-end.is-now { color: var(--ow-ink); }
.lp .lp-gm .gm-rail { position: relative; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ow-line), var(--ow-champagne) 50%, var(--ow-line)); }
.lp .lp-gm .gm-tick { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ow-champagne); transform: translate(-50%, -50%); }
.lp .lp-gm .gm-knob {
  position: absolute; top: 50%; left: 13px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ow-ink); border: 4px solid var(--ow-paper); box-shadow: 0 6px 18px rgba(11, 16, 32, 0.28);
  transform: translate(-50%, -50%);
  transition: left 800ms cubic-bezier(0.34, 1.4, 0.64, 1), background 450ms var(--own-ease), box-shadow 450ms var(--own-ease);
}
.lp .lp-gm[data-step="1"] .gm-knob { left: calc(100% - 13px); }
.lp .lp-gm[data-step="2"] .gm-knob { left: 50%; background: var(--ow-champagne); box-shadow: 0 0 0 8px rgba(201, 169, 106, 0.18), 0 0 26px rgba(201, 169, 106, 0.85); }
.lp .lp-gm .gm-mid {
  position: absolute; left: 50%; top: 20px; transform: translate(-50%, 6px); white-space: nowrap;
  font-size: var(--ow-eyebrow-size); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-champagne-deep);
  opacity: 0; transition: opacity 450ms var(--own-ease), transform 450ms var(--own-ease);
}
.lp .lp-gm .gm-mid.is-now { opacity: 1; transform: translate(-50%, 0); }

/* The three ways */
.lp .lp-gm .gm-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.lp .lp-gm .gm-card {
  position: relative; display: flex; flex-direction: column; border-radius: 20px; padding: 30px 28px;
  transition: opacity 500ms var(--own-ease), transform 600ms var(--own-ease), filter 500ms var(--own-ease), box-shadow 500ms var(--own-ease);
}
.lp .lp-gm .gm-badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.lp .lp-gm .gm-badge .glyph { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.lp .lp-gm .gm-card 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-gm .approach { font-size: 0.9rem; font-weight: 600; margin: 0 0 16px; }
.lp .lp-gm .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lp .lp-gm .chips li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.92rem; line-height: 1.35; font-weight: 600; }
.lp .lp-gm .chips li .material-symbols-outlined { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

.lp .lp-gm .gm-card.flat { background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 8px 24px rgba(11, 16, 32, 0.05); }
.lp .lp-gm .gm-card.flat .gm-badge { color: var(--own-fg-3); }
.lp .lp-gm .gm-card.flat .gm-badge .glyph { background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--own-fg-2); }
.lp .lp-gm .gm-card.flat h3 { color: var(--ow-ink); }
.lp .lp-gm .gm-card.flat .approach { color: var(--own-fg-3); }
.lp .lp-gm .gm-card.flat .chips li { color: var(--own-fg-2); }
.lp .lp-gm .gm-card.flat .chips li .material-symbols-outlined { color: var(--ow-negative); }

.lp .lp-gm .gm-card.peak { background: var(--ow-ink); color: #fff; border: 1px solid var(--ow-champagne); box-shadow: 0 46px 100px rgba(11, 16, 32, 0.34); overflow: hidden; }
.lp .lp-gm .gm-card.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-gm .gm-card.peak .gm-badge { color: var(--ow-champagne); }
.lp .lp-gm .gm-card.peak .gm-badge .glyph { background: var(--own-gradient-primary); color: #fff; box-shadow: 0 8px 22px rgba(11, 16, 32, 0.5); overflow: hidden; }
.lp .lp-gm .gm-card.peak .gm-badge .glyph img { width: 86%; height: 86%; object-fit: contain; }
.lp .lp-gm .gm-card.peak h3 { color: #fff; }
/* OWNAMIC wordmark rendered as header brand text, sized to the h3 */
.lp .lp-gm .gm-card.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-gm .gm-card.peak .approach { color: var(--ow-champagne); }
.lp .lp-gm .gm-card.peak .chips li { color: #fff; }
.lp .lp-gm .gm-card.peak .chips li .material-symbols-outlined { color: var(--ow-champagne); }

/* The steps: the way the knob points at stands in front, the other one steps back; the golden
   middle waits below until its turn, then rises between the two, which lean in towards it. */
.lp .lp-gm .gm-card.flat { opacity: 0.4; transform: scale(0.96); filter: saturate(0.4); }
.lp .lp-gm .gm-card.flat.is-now { opacity: 1; transform: none; filter: none; box-shadow: 0 24px 60px rgba(11, 16, 32, 0.14); }
.lp .lp-gm .gm-card.peak { opacity: 0; transform: translateY(36px) scale(0.94); }
.lp .lp-gm .gm-card.peak.is-now { opacity: 1; transform: translateY(-8px) scale(1.02); }
.lp .lp-gm[data-step="2"] .gm-manual { transform: translateX(14px) scale(0.94); }
.lp .lp-gm[data-step="2"] .gm-auto { transform: translateX(-14px) scale(0.94); }

@media (max-width: 900px) {
  .lp .lp-evo .evo-head { margin-bottom: 36px; }
  /* The scale, one card and the step buttons under it (StoryNav) are short enough to pin in the
     middle of a phone screen. */
  .lp .lp-gm { --story-step: 42vh; --story-top: max(12px, calc(50vh - 262px)); }
  .promo-bar ~ .lp .lp-gm { --story-top: max(calc(var(--ow-promo-bar-height) + 10px), calc(50vh - 262px)); }
  .lp .lp-gm .story-nav { margin-top: 20px; }
  .lp .lp-gm .gm-scale { gap: 10px; margin-bottom: 44px; }
  .lp .lp-gm .gm-end { font-size: 0.64rem; letter-spacing: 0.12em; }
  /* One card at a time, all three in one place. */
  .lp .lp-gm .gm-cards { grid-template-columns: minmax(0, 1fr); }
  .lp .lp-gm .gm-card { grid-area: 1 / 1; padding: 24px 22px; }
  .lp .lp-gm .gm-card.flat:not(.is-now) { opacity: 0; transform: translateY(16px) scale(0.97); pointer-events: none; }
}
/* A short phone (an SE with its browser bars out): the panel closes up, so the step buttons under
   the card stay clear of the start bar and the cookie button riding above it. */
@media (max-width: 900px) and (max-height: 700px) {
  .lp .lp-gm .gm-scale { margin-bottom: 36px; }
  .lp .lp-gm .gm-card { padding: 18px 20px; }
  .lp .lp-gm .gm-badge { margin-bottom: 10px; }
  .lp .lp-gm .approach { margin-bottom: 10px; }
  .lp .lp-gm .chips { gap: 6px; }
  .lp .lp-gm .story-nav { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp .lp-gm .gm-card,
  .lp .lp-gm .gm-card.flat,
  .lp .lp-gm .gm-card.peak { opacity: 1 !important; transform: none !important; filter: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .lp .lp-gm .gm-card { grid-area: auto; }
  .lp .lp-gm .gm-cards { gap: 16px; }
}

/* ── 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, var(--ow-gold-ink), var(--ow-gold-ink));
    color: white !important;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(201, 169, 106, 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(201, 169, 106, 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 text link back to /blog at the foot of an article and on its not-found state. The
   back button at the top of /blog and of every article is the shared `.ow-page-head
   .ow-back` square. */
.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 ROW ──
   The top of /blog: the founder's story and the latest article side by side (one column below
   901px), then the edition tiles. The founder's card is the landing page's
   `.lp .founder-story-card` compressed into one column: same ink field, champagne rule and serif
   headline, 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. */
.blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 901px) {
    .blog-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.blog-founder-card {
    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, var(--ow-gold-ink), var(--ow-gold-ink));
    color: #fff;
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 8px 24px rgba(201, 169, 106, 0.35);
    transition: box-shadow 0.2s ease;
}

.blog-founder-card:hover .bfc-cta { box-shadow: 0 12px 30px rgba(201, 169, 106, 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); }

/* Beside the taller latest card the founder's picture takes up the height the row gives it, so the
   ink card has no empty band at its foot. Out of flow for the same reason as in a grid cell: a
   percentage height needs a parent with a height of its own. */
.blog-featured .blog-founder-card .bfc-img { flex: 1 1 auto; position: relative; min-height: 132px; }
.blog-featured .blog-founder-card .bfc-img img { position: absolute; inset: 0; height: 100%; }

/* The latest article beside the founder's story: a paper card, its picture on top, the eyebrow
   in gold ink, the title in the serif of the founder's card. */
.blog-latest-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ow-ink);
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    box-shadow: 0 18px 44px rgba(11, 16, 32, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-latest-card:hover { transform: translateY(-3px); box-shadow: 0 24px 56px rgba(11, 16, 32, 0.16); }

.blog-latest-card .blc-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ow-cream);
    border-bottom: 1px solid var(--ow-line);
}

.blog-latest-card .blc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.blog-latest-card .blc-media.is-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ow-cream) 0%, var(--ow-cream-deep) 100%);
}

.blog-latest-card .blc-media .blc-mark { width: 30%; max-width: 92px; height: auto; object-fit: contain; }

.blog-latest-card .blc-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 26px 26px; }

.blog-latest-card .blc-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-gold-ink);
}

.blog-latest-card .blc-eyebrow .line { width: 20px; height: 1px; background: var(--ow-gold-ink); opacity: 0.8; }
.blog-latest-card .blc-meta { font-size: 0.8rem; color: var(--own-fg-2); }

.blog-latest-card .blc-title {
    margin: 0;
    font-family: var(--ow-serif), 'Libre Baskerville', Georgia, serif;
    font-weight: 500;
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.blog-latest-card .blc-text { margin: 0; flex: 1; font-size: 0.92rem; line-height: 1.55; color: var(--own-fg-2); }
.blog-latest-card .blc-cta { font-size: 0.88rem; font-weight: 700; color: var(--ow-gold-ink); }

/* ── BLOG · EDITION TILES ──
   One tile per edition under the featured row, each leading to /blog/edition/{key} (BlogEditions).
   The `.ed-{key}` scope on the tile gives its undertone, for the icon and its soft ground only;
   the tile itself stays paper. */
.blog-editions-title {
    margin: 0 0 1rem;
    font-family: var(--ow-serif), 'Libre Baskerville', Georgia, serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--ow-ink);
}

.blog-edition-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 560px) {
    .blog-edition-tiles { grid-template-columns: minmax(0, 1fr); }
}

.blog-edition-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon name"
        "icon tag"
        "icon count";
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    padding: 20px 22px;
    border-radius: 18px;
    text-decoration: none;
    color: var(--ow-ink);
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.blog-edition-tile:hover {
    transform: translateY(-2px);
    border-color: var(--ow-champagne);
    box-shadow: 0 12px 30px rgba(11, 16, 32, 0.10);
}

.blog-edition-tile .bet-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ow-ed-accent-soft);
    color: var(--ow-ed-accent);
}

.blog-edition-tile .bet-icon .rzi { font-size: 1.5rem; }
.blog-edition-tile .bet-name { grid-area: name; font-family: var(--ow-serif), Georgia, serif; font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.blog-edition-tile .bet-tag { grid-area: tag; font-size: 0.92rem; line-height: 1.45; color: var(--own-fg-2); }
.blog-edition-tile .bet-count { grid-area: count; margin-top: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ow-gold-ink); }

/* The other editions at the foot of an edition page, and the way back to the overview. */
.blog-edition-others {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ow-line);
}

.blog-edition-others .beo-label { margin-right: 4px; font-size: 0.85rem; font-weight: 700; color: var(--own-fg-2); }

.blog-edition-others .beo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.blog-edition-others .beo-chip .rzi { font-size: 1.05rem; color: var(--ow-ed-accent); }
.blog-edition-others .beo-chip:hover { border-color: var(--ow-champagne); }
.blog-edition-others .beo-all { background: transparent; }

/* =========================================================================
   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;
}

/* What the visitor starts with and its first step, under the registration's title
   (RegisterKontext): the step the landing page's button named. */
.lp .lp-auth-context {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 8px 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-cream);
    color: var(--ow-ink);
    font-size: 0.92rem;
    line-height: 1.45;
}
.lp .lp-auth-context .material-symbols-outlined { color: var(--ow-gold-ink); font-size: 20px; margin-top: 1px; }
.lp .lp-auth-context b { font-weight: 600; }
.lp .lp-auth-context-sep { margin: 0 6px; color: var(--ow-gold-ink); }

.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;
    }
}

/* ── Readable, reachable auth forms (docs/kompakt-registrierung-plan.md, 7) ──
   The registration path is used by many people over 50: typed text at 18px (which also stops iOS
   from zooming into a field), buttons at least 48px tall, a focus ring that is visible on cream,
   and hints/errors in the body colour rather than a pale grey. Applies to every account page. */
.lp .lp-auth-card .form-control,
.lp .lp-auth-input {
    font-size: 1.125rem;
    min-height: 48px;
}

.lp .lp-auth-field > label {
    font-size: 1rem;
    color: var(--own-fg-1);
}

.lp .lp-auth-btn {
    min-height: 48px;
    font-size: 1.125rem;
}

.lp .lp-auth-card .form-control:focus-visible,
.lp .lp-auth-input:focus-visible,
.lp .lp-auth-btn:focus-visible,
.lp .lp-auth-card a:focus-visible,
.own-password-reveal:focus-visible {
    outline: 3px solid var(--ow-gold-ink);
    outline-offset: 2px;
}

.lp .lp-auth-card .validation-message,
.lp .lp-auth-card .text-danger {
    font-size: 1rem;
    line-height: 1.45;
    margin-top: 6px;
}

/* A rule shown before anything is typed (the password length) and the captcha status lines. */
.lp .lp-auth-field-hint {
    font-size: 1rem;
    line-height: 1.45;
    color: var(--own-fg-2);
    margin: 0 0 8px;
}

.lp .lp-auth-field-hint--alert {
    color: var(--own-fg-1);
    font-weight: 600;
}

/* "Mit der Registrierung gelten unsere AGB und Datenschutzhinweise." — the notice that replaced the
   terms checkbox, directly under the button it applies to. */
.lp .lp-auth-legal {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--own-fg-2);
    text-align: center;
    margin: 14px 0 0;
}

.lp .lp-auth-legal a {
    color: var(--ow-gold-ink);
    font-weight: 600;
}

/* Without the wordmark the card opens with the eyebrow; the compact advantages follow the login door. */
.lp .lp-auth-card--register .lp-auth-benefits--compact { margin: 18px 0 0; }

/* =========================================================================
   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);
}

/* ── 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: outlined line-coloured track when off, champagne track when on. */
.ss-canvas .ss-switch .rz-switch {
    width: 62px;
    height: 34px;
}

/* Radzen draws the track on .rz-switch-circle and the knob on its ::before.
   Off: a line-coloured track with an outline so it stays visible on white
   cards, and a paper knob. On: a champagne track with a paper knob. */
.ss-canvas .ss-switch .rz-switch .rz-switch-circle {
    background: var(--ow-line);
    box-shadow: inset 0 0 0 1px var(--own-fg-3);
    border-radius: 999px;
}

.ss-canvas .ss-switch .rz-switch .rz-switch-circle::before {
    background: var(--ow-paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.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);
    box-shadow: none;
}

.ss-canvas .ss-switch .rz-switch.rz-state-disabled .rz-switch-circle {
    opacity: 0.5;
}

/* 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;
}

/* The wizard's last screen: "Gemeinsamen Bereich / <Name> / erstellt." on three lines, then the
   three ways on — into the space, its settings, its invitations. */
.ss-canvas .ss-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0 4px;
}

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

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

.ss-canvas .ss-done-title > span,
.ss-canvas .ss-done-title > em {
    display: block;
}

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

.ss-canvas .ss-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* ── 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%;
    }

    .ss-canvas .ss-done-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@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--status {
    /* The shared status (verliehen, verkauft, …): a champagne rim marks it apart from the figures. */
    border-color: var(--ow-champagne);
}

.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);
}

/* The hierarchy's tools, the same pair the Bestandsliste carries (Inventory.razor.css .tool-pill /
   .inv-search): expand/collapse everything, and a search field that takes the rest of the row and a
   full row on phones. */
.ss-canvas .ssh-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ss-canvas .ssh-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ow-ink);
    cursor: pointer;
}

.ss-canvas .ssh-tool-pill i {
    font-size: 1rem;
    color: var(--own-fg-2);
}

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

.ss-canvas .ssh-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 0;
    max-width: 420px;
}

.ss-canvas .ssh-search .ssh-search-icon {
    position: absolute;
    left: 14px;
    font-size: 1.1rem;
    color: var(--own-fg-2);
    pointer-events: none;
}

.ss-canvas .ssh-search .ssh-search-input {
    width: 100%;
    min-height: 40px;
    padding: 8px 40px;
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 0.95rem;
    box-shadow: none;
}

.ss-canvas .ssh-search .ssh-search-input:focus {
    border-color: var(--ow-champagne);
    outline: none;
}

.ss-canvas .ssh-search-clear {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--own-fg-2);
    cursor: pointer;
}

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

.ss-canvas .ssh-search-clear i {
    font-size: 1.05rem;
}

@media (max-width: 600px) {
    .ss-canvas .ssh-search {
        flex-basis: 100%;
        max-width: none;
    }
}

@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, var(--ow-ink-2) 0%, var(--ow-ink) 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(201, 169, 106,.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(11, 16, 32,.3); }
.kg .kg-btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(11, 16, 32,.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(auto-fit, minmax(200px, 1fr)); gap: 16px; } /* four plans since Start is listed */
.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;
}

/* An area has no colour of its own (docs/farbhomogenisierung-konzept.md §6): the badge edge and the
   row tag wear the brand gold. */
.own-tile-badge--accent { border-color: 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(--ow-gold-ink);
    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; }

/* A coin's own logo (CoinMarketCap, proxied — MarketAssetIcon / MarketAssetLogoService). Logos are
   round and bring their own colours, so they sit on paper rather than on a class tint. */
.market-asset-logo {
    display: inline-block;
    flex: none;
    object-fit: contain;
    border-radius: 50%;
}
.market-row-badge--logo {
    background: var(--ow-paper);
    border: 1px solid var(--ow-line-soft);
}
.market-row-badge--logo img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
/* The match card and the object's live-value card: a small logo before the symbol / eyebrow. */
.market-match-logo { width: 22px; height: 22px; font-size: 22px; color: var(--ow-champagne-deep); }
.obj-value-card-eyebrow.has-logo { display: flex; align-items: center; gap: 8px; }
.obj-value-card-logo {
    width: 22px;
    height: 22px;
    background: var(--ow-paper);
    padding: 1px;
}

.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: var(--ow-gold-ink);   /* Ordnungscoaching — Gold (Schrift) */
  --ph-estate:  var(--ow-gold-ink);   /* Nachlasserfassung — Gold (Schrift) */
  --ph-auction: #b08d4f;   /* Auktion & Restaurierung — Messing */
  --ph-clear:   var(--ow-ink);   /* Haushaltsauflösung & Umzug — Tinte */
  --ph-retail:  var(--ow-gold-ink);   /* Fachhandel — Gold (Schrift) */
  --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 ─────────────────────── */

/* Kennzahlenband des Programms */

/* ─────────────────────── 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: var(--ow-cream); color: var(--ow-gold-ink); }

.pp .mo-quad .q2 { background: var(--ow-champagne-light); color: var(--ow-gold-ink); }

.pp .mo-quad .q3 { background: var(--ow-champagne-light); color: var(--ow-ink-2); }

.pp .mo-quad .q4 { background: var(--ow-champagne); color: var(--ow-ink-2); }

/* 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(201, 169, 106,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(201, 169, 106,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-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 ─────────────────────── */

/* ─────────────────────── SIGNATUR: GESAMTBILD-KOMPOSITION ─────────────────────── */

.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); }

/* 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(201, 169, 106,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(201, 169, 106,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-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-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:    var(--ow-cream);   /* Behalten  — hellste Fläche */
  --oc-keep-k:  var(--ow-gold-ink);
  --oc-sell:    var(--ow-champagne-light);   /* Verkaufen */
  --oc-sell-k:  var(--ow-gold-ink);
  --oc-give:    var(--ow-champagne-light);   /* Spenden */
  --oc-give-k:  var(--ow-ink-2);
  --oc-drop:    var(--ow-champagne);   /* Entsorgen — tiefste Fläche */
  --oc-drop-k:  var(--ow-ink-2);
  --oc-lav-line: var(--ow-champagne-light);
  --oc-lav-wash: var(--ow-cream);
}

.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(201, 169, 106,0.45); border-radius: 999px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

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

.pp .oc-btn-violet { background: var(--ow-violet); color: white; border: 1px solid var(--ow-violet); }

.pp .oc-btn-violet:hover { background: var(--ow-gold-ink); border-color: var(--ow-gold-ink); transform: translateY(-2px); }

/* ───────────── SIGNATUR: VIER FELDER ───────────── */

/* 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: var(--ow-champagne-light); color: var(--oc-keep-k); }

.pp .q4-cell.sell { background: var(--oc-sell); border-color: var(--ow-champagne-light); color: var(--oc-sell-k); }

.pp .q4-cell.drop { background: var(--oc-drop); border-color: var(--ow-champagne); 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(20, 26, 51,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; }

/* Verschlossene fünfte Fläche: Finanzwerte — nie sichtbar für den Coach */

/* ─────────────────────── 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(20, 26, 51,0.4); }

.pp .oc-choose button.keep { background: var(--oc-keep); border-color: var(--ow-champagne-light); color: var(--oc-keep-k); }

.pp .oc-choose button.sell { background: var(--oc-sell); border-color: var(--ow-champagne-light); color: var(--oc-sell-k); }

.pp .oc-choose button.drop { background: var(--oc-drop); border-color: var(--ow-champagne); 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(201, 169, 106,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(201, 169, 106,0.14); border: 1px solid rgba(201, 169, 106,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(201, 169, 106,0.44); border-radius: 20px; background: rgba(201, 169, 106,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(201, 169, 106,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(201, 169, 106,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-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:      var(--ow-gold-ink);
  --nl-seal-soft: var(--ow-gold-ink);
  --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(201, 169, 106,0.5); background: rgba(201, 169, 106,0.10); color: var(--ow-champagne-light); 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: var(--ow-champagne-light); }

.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: var(--ow-champagne-light); }

/* ─────────────────────── 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(201, 169, 106,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: var(--ow-champagne-light); }

/* ─────────────────────── 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: var(--ow-champagne-light); }

.pp .nl-trust .nl-sec-head .rhs { color: rgba(255,255,255,0.7); }

.pp .nl-trust .nl-num { color: var(--ow-champagne-light); }

/* ─────────────────────── 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: var(--ow-champagne-light); }

.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(201, 169, 106,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(230, 207, 156,0.4); background: rgba(201, 169, 106,0.12); display: grid; place-items: center; color: var(--ow-champagne-light); 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(230, 207, 156,0.4); border-radius: 4px; background: rgba(201, 169, 106,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: var(--ow-champagne-light); }

.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(201, 169, 106,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: var(--ow-champagne-light); }

.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: var(--ow-champagne-light); }

.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: var(--ow-champagne-light); 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:     var(--ow-gold-ink);
  --au-violet-lt:  var(--ow-champagne-light);
  --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-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-cta .lp-btn-ghost { border-radius: 3px; }

/* ─────────────────────── SIGNATUR: OBJEKTBIOGRAFIE ─────────────────────── */

.pp .bio-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--au-rule); display: flex; align-items: flex-start; gap: 16px; }

/* Die Kette: eine Messinglinie, an der die Stationen hängen */

/* ─────────────────────── 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(201, 169, 106,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(201, 169, 106,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-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 { padding-left: 20px; padding-right: 20px; }

}

/* =========================================================================
   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:      var(--ow-gold-ink);
  --hz-violet-deep: var(--ow-gold-ink);
  --hz-lilac:       var(--ow-champagne);
  --hz-wash:        var(--ow-cream);
  --hz-line:        var(--ow-champagne-light);
  --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: var(--ow-gold-ink); border-color: var(--ow-gold-ink); 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(201, 169, 106,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(201, 169, 106,0.30), transparent 62%), radial-gradient(820px 620px at 4% 100%, rgba(11, 16, 32,0.24), transparent 58%), linear-gradient(180deg, var(--ow-ink) 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(201, 169, 106,0.12); border: 1px solid rgba(201, 169, 106,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(201, 169, 106,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(201, 169, 106,0.14); border: 1px solid rgba(201, 169, 106,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(201, 169, 106,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(201, 169, 106,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: var(--ow-gold-ink);
  --fh-deep:   var(--ow-ink);
  --fh-lilac:  var(--ow-champagne-light);
  --fh-wash:   var(--ow-cream);
  --fh-line:   var(--ow-champagne-light);
  --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(230, 207, 156,0.45); border-radius: 999px; padding: 5px 11px; margin-left: 4px; white-space: nowrap; }

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

/* 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. */

/* Branchen-Umschalter */

/* Under the partner hero (PartnerHero), on its own: a band a shade darker than the hero's ink. */
.pp .fh-switch { position: relative; border-top: 1px solid rgba(255,255,255,0.10); background: color-mix(in srgb, var(--ow-ink) 82%, #000); }

.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(230, 207, 156,0.5); }

.pp .fh-switch button.on { background: var(--fh-lilac); border-color: var(--fh-lilac); color: var(--ow-ink); }

/* `.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); }

/* Film */

/* The trade short between the hero and the switch: still on the hero's ink, the copy beside a 9:16
   frame whose poster is the film's title frame. The play button sits over it until it is pressed
   (partnerFilm.js adds .is-playing); from then on the native controls run the film. */
.pp .fh-film { background: var(--ow-ink); color: #fff; padding: 32px 0 96px; }

.pp .fh-film-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; }

.pp .fh-film-copy { max-width: 520px; }

.pp .fh-film .lp-eyebrow { color: var(--fh-lilac); }

.pp .fh-film 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: #fff; }

.pp .fh-film h2 em { color: var(--fh-lilac); }

.pp .fh-film-copy > p { margin: 20px 0 0; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.72); }

.pp .fh-film-copy > p.fh-film-note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; color: rgba(255,255,255,0.5); }

.pp .fh-film-note .material-symbols-outlined { font-size: 18px; line-height: 1.4; }

.pp .fh-film-frame { position: relative; width: min(78vw, 340px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 26px; border: 1px solid var(--ow-line-dark); background: #000; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }

.pp .fh-film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

.pp .fh-film-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--fh-lilac); color: var(--ow-ink); box-shadow: 0 12px 30px rgba(0,0,0,0.45); transition: transform 150ms ease, background 150ms ease; }

.pp .fh-film-play .material-symbols-outlined { font-size: 44px; margin-left: 4px; }

.pp .fh-film-play:hover { transform: scale(1.06); background: #fff; }

.pp .fh-film-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.pp .fh-film-frame.is-playing .fh-film-play { display: none; }

@media (max-width: 960px) {
  .pp .fh-film { padding: 24px 0 64px; }
  .pp .fh-film-inner { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .pp .fh-film-copy { max-width: none; justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .pp .fh-film-play { transition: none; }
  .pp .fh-film-play:hover { transform: none; }
}

/* ───────────── AUSSTELLUNGS-EFFEKT ─────────────
   Under the film, still on the hero's ink like a show hall after dark: the vanadinite in a lit
   display case with its code card, the customer's phone that scans the card, and the history that
   opens on it (RetailShowcase.razor, animated by js/retailShowcase.js). Composed by default — the
   script sets the earlier states, so without it the scene simply stands finished. The scene sizes
   itself from its own width (container units) and the phone's screen from the phone's, so case,
   card and phone keep their proportions from a phone to a desktop. */

.pp .fh-show { background: var(--ow-ink); color: #fff; padding: 88px 0 104px; border-top: 1px solid var(--ow-line-dark); }

.pp .fh-show-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "head scene" "body scene" "places places" "parts parts"; column-gap: 64px; row-gap: 0; }

.pp .fh-show-head { grid-area: head; align-self: end; }

.pp .fh-show-body { grid-area: body; align-self: start; }

.pp .fh-show .lp-eyebrow { color: var(--fh-lilac); }

.pp .fh-show 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: #fff; }

.pp .fh-show h2 em { color: var(--fh-lilac); }

.pp .fh-show-lede { margin: 20px 0 0; font-size: var(--ow-lede-size); line-height: 1.6; color: rgba(255,255,255,0.72); }

.pp .fh-show-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; }

.pp .fh-show-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 10px; border-left: 2px solid transparent; transition: background 300ms ease, opacity 300ms ease, border-color 300ms ease; }

.pp .fh-show-step .s-n { font-family: var(--fh-mono-font); font-size: 0.8rem; color: var(--fh-lilac); padding-top: 3px; }

.pp .fh-show-step .s-tx { display: grid; gap: 3px; }

.pp .fh-show-step b { font-size: 1rem; font-weight: 600; color: #fff; }

.pp .fh-show-step .s-tx > span { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.62); }

/* While the scene plays, the step on stage is lit and the ones still to come wait in the dark. */
.pp .fh-show.is-animated .fh-show-step { opacity: 0.45; }

.pp .fh-show.is-animated .fh-show-step.is-done { opacity: 0.8; }

.pp .fh-show.is-animated .fh-show-step.is-active { opacity: 1; background: rgba(255,255,255,0.06); border-left-color: var(--ow-champagne); }

.pp .fh-show-payoff { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; padding: 16px 18px; border: 1px solid rgba(230, 207, 156,0.28); border-radius: 12px; font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.82); }

.pp .fh-show-payoff .material-symbols-outlined { color: var(--fh-lilac); font-size: 22px; }

.pp .fh-show-replay { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.78); background: transparent; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }

.pp .fh-show-replay:hover { color: #fff; border-color: rgba(230, 207, 156,0.6); }

.pp .fh-show-replay:focus-visible { outline-color: var(--fh-lilac); }

.pp .fh-show-replay[hidden] { display: none; }

.pp .fh-show-replay .material-symbols-outlined { font-size: 18px; }

/* The scene */
.pp .fh-show-scene { grid-area: scene; align-self: center; position: relative; width: 100%; max-width: 640px; justify-self: center; aspect-ratio: 10 / 9; container-type: inline-size; }

.pp .fh-show-scene .sc-example { position: absolute; left: 0; top: 0; z-index: 7; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 4px 10px; }

/* The display case: dark inside, lit from above; the photo's black ground melts into it. */
.pp .sc-case { position: absolute; left: 0; top: 9%; width: 60%; height: 78%; overflow: hidden; border-radius: 6px 6px 3px 3px; border: 1px solid rgba(255,255,255,0.16); background: radial-gradient(120% 75% at 50% 0%, var(--ow-ink-2) 0%, color-mix(in srgb, var(--ow-ink) 70%, #000) 72%); box-shadow: inset 0 0 0 5px rgba(255,255,255,0.03), 0 40px 80px -40px rgba(0,0,0,0.9); }

.pp .sc-case .sc-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 0%, rgba(230, 207, 156,0.36), transparent 70%), linear-gradient(to bottom, rgba(230, 207, 156,0.16), transparent 20%); }

.pp .sc-case .sc-specimen { position: absolute; left: 5%; top: 17%; width: 90%; height: auto; mix-blend-mode: lighten; }

.pp .sc-case .sc-plinth { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(to bottom, var(--ow-ink-2), color-mix(in srgb, var(--ow-ink) 80%, #000)); border-top: 1px solid rgba(230, 207, 156,0.35); }

/* The glass: one skewed reflection, moved as a whole by the script, skewed by its pseudo-element. */
.pp .sc-case .sc-glare { position: absolute; top: -10%; bottom: -10%; left: 10%; width: 26%; z-index: 3; pointer-events: none; }

.pp .sc-case .sc-glare::before { content: ""; position: absolute; inset: 0; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.11) 50%, transparent); }

.pp .sc-case .sc-label { position: absolute; left: 6%; bottom: 4.5%; z-index: 2; display: grid; gap: 1px; padding: 1cqw 1.8cqw; background: var(--ow-cream); color: var(--ow-ink); border-radius: 2px; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.6); }

.pp .sc-case .sc-label b { font-family: var(--ow-serif); font-weight: 600; font-size: clamp(11px, 2.4cqw, 15px); line-height: 1.1; }

.pp .sc-case .sc-label small { font-size: clamp(8px, 1.5cqw, 10.5px); color: var(--ow-gold-ink); letter-spacing: 0.04em; }

/* The code card beside the specimen: a QR glyph, not a scannable code (see the component). */
.pp .sc-case .sc-card { position: absolute; right: 5%; bottom: 4%; z-index: 2; display: flex; align-items: center; gap: 1.1cqw; padding: 1cqw 1.4cqw 1cqw 1cqw; background: var(--ow-paper); color: var(--ow-ink); border-radius: 4px; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.7); }

.pp .sc-case .sc-card > .material-symbols-outlined { font-size: clamp(24px, 6cqw, 40px); line-height: 1; }

.pp .sc-case .sc-card .c-tx { display: grid; gap: 1px; }

.pp .sc-case .sc-card b { font-family: var(--fh-mono-font); font-size: clamp(8px, 1.6cqw, 11px); letter-spacing: 0.06em; }

.pp .sc-case .sc-card small { font-size: clamp(7.5px, 1.35cqw, 9.5px); color: var(--ow-gold-ink); }

.pp .sc-case .sc-ping { position: absolute; inset: -3px; border-radius: 6px; border: 2px solid var(--ow-champagne); opacity: 0; pointer-events: none; }

/* The customer's phone, and the history on its screen in em of the phone's width. */
.pp .sc-phone { position: absolute; right: 1%; top: 0; z-index: 5; width: 39%; aspect-ratio: 9 / 19; padding: 1.1cqw; border-radius: 6cqw; background: color-mix(in srgb, var(--ow-ink) 60%, #000); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.9); container-type: inline-size; }

.pp .sc-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12cqw; background: var(--ow-cream); color: var(--ow-ink); font-size: 4.8cqw; line-height: 1.3; }

.pp .sc-screen::before { content: ""; position: absolute; top: 0.7em; left: 50%; width: 28%; height: 1.1em; transform: translateX(-50%); border-radius: 999px; background: color-mix(in srgb, var(--ow-ink) 85%, #000); z-index: 3; }

.pp .sc-hist { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.65em; padding: 2.4em 0.9em 0.9em; }

.pp .sc-hist .h-head { display: grid; gap: 0.1em; }

.pp .sc-hist .h-k { font-size: 0.62em; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ow-gold-ink); }

.pp .sc-hist .h-t { font-family: var(--ow-serif); font-size: 1.45em; font-weight: 600; line-height: 1.05; }

.pp .sc-hist .h-s { font-size: 0.72em; color: color-mix(in srgb, var(--ow-ink) 60%, transparent); }

.pp .sc-hist .h-hero { flex: 0 0 auto; aspect-ratio: 16 / 9; border-radius: 0.6em; overflow: hidden; background: var(--ow-ink); }

.pp .sc-hist .h-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pp .sc-hist .h-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; }

.pp .sc-hist .m-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 0.45em; background: var(--ow-cream-deep); display: grid; place-items: center; }

.pp .sc-hist .m-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pp .sc-hist .m-tile small { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3em 0.4em; font-size: 0.56em; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); }

.pp .sc-hist .m-tile .m-play { position: relative; width: 1.5em; height: 1.5em; margin-bottom: 0.5em; display: grid; place-items: center; border-radius: 50%; font-size: 1.3em; color: #fff; background: rgba(0,0,0,0.5); }

.pp .sc-hist .m-doc > .material-symbols-outlined { margin-bottom: 0.6em; font-size: 1.8em; color: var(--ow-gold-ink); }

.pp .sc-hist .m-doc small { color: var(--ow-ink); background: none; }

.pp .sc-hist .h-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em; }

.pp .sc-hist .h-entry { position: relative; display: grid; grid-template-columns: 1.9em minmax(0, 1fr); gap: 0.5em; align-items: start; padding: 0.5em 0.55em; border-radius: 0.5em; background: var(--ow-paper); border: 1px solid var(--ow-line); }

.pp .sc-hist .e-i { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: var(--ow-cream-deep); color: var(--ow-gold-ink); }

.pp .sc-hist .e-i .material-symbols-outlined { font-size: 1.15em; }

.pp .sc-hist .e-tx { display: grid; gap: 0.05em; min-width: 0; }

.pp .sc-hist .e-k { font-size: 0.56em; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--ow-gold-ink); }

.pp .sc-hist .e-tx b { font-size: 0.78em; line-height: 1.2; }

.pp .sc-hist .e-tx small { font-size: 0.62em; line-height: 1.3; color: color-mix(in srgb, var(--ow-ink) 62%, transparent); }

/* The dealer's signed entry: the quality mark the scene ends on. */
.pp .sc-hist .h-sign { border-color: var(--ow-champagne); background: color-mix(in srgb, var(--ow-champagne) 10%, var(--ow-paper)); }

.pp .sc-hist .h-sign .e-i { background: var(--ow-ink); color: var(--ow-champagne-light); }

.pp .sc-hist .e-hand { font-family: var(--fh-hand); font-size: 1.35em; line-height: 1; margin-top: 0.1em; color: var(--ow-ink); }

.pp .sc-hist .e-badge { position: absolute; right: 0.5em; top: 0.5em; display: inline-flex; align-items: center; gap: 0.2em; padding: 0.25em 0.55em; border-radius: 999px; font-size: 0.54em; font-weight: 700; background: var(--ow-ink); color: var(--ow-champagne-light); }

.pp .sc-hist .e-badge .material-symbols-outlined { font-size: 1.3em; }

/* The camera, over the history while the code is read; the script shows and hides it. */
.pp .sc-cam { position: absolute; inset: 0; z-index: 2; visibility: hidden; opacity: 0; background: radial-gradient(80% 60% at 50% 45%, color-mix(in srgb, var(--ow-ink-2) 80%, #000), color-mix(in srgb, var(--ow-ink) 70%, #000)); }

.pp .sc-cam .cam-card { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; display: grid; justify-items: center; gap: 0.3em; padding: 0.8em 1em; border-radius: 0.4em; background: var(--ow-paper); color: var(--ow-ink); }

.pp .sc-cam .cam-card .material-symbols-outlined { font-size: 4.6em; line-height: 1; }

.pp .sc-cam .cam-card b { font-family: var(--fh-mono-font); font-size: 0.8em; letter-spacing: 0.06em; }

.pp .sc-cam .cam-g { position: absolute; width: 14%; aspect-ratio: 1; border: 0.22em solid var(--ow-champagne-light); }

.pp .sc-cam .g-tl { left: 16%; top: 30%; border-right: 0; border-bottom: 0; border-top-left-radius: 0.6em; }

.pp .sc-cam .g-tr { right: 16%; top: 30%; border-left: 0; border-bottom: 0; border-top-right-radius: 0.6em; }

.pp .sc-cam .g-bl { left: 16%; bottom: 30%; border-right: 0; border-top: 0; border-bottom-left-radius: 0.6em; }

.pp .sc-cam .g-br { right: 16%; bottom: 30%; border-left: 0; border-top: 0; border-bottom-right-radius: 0.6em; }

.pp .sc-cam .cam-scan { position: absolute; left: 14%; right: 14%; top: 28%; height: 2px; opacity: 0; background: var(--ow-champagne-light); box-shadow: 0 0 12px 2px rgba(230, 207, 156,0.7); }

.pp .sc-cam .cam-found { position: absolute; left: 0; right: 0; bottom: 14%; margin: auto; width: fit-content; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.45em 0.9em; border-radius: 999px; font-size: 0.76em; font-weight: 700; background: var(--ow-champagne); color: var(--ow-ink); }

.pp .sc-cam .cam-found .material-symbols-outlined { font-size: 1.3em; }

/* What the customer takes from it, at the foot of the case. */
.pp .sc-done { position: absolute; left: 3%; bottom: 0; z-index: 6; max-width: 56%; display: flex; align-items: center; gap: 0.7em; padding: 0.8em 1.05em; border-radius: 12px; font-size: clamp(11px, 2cqw, 13.5px); background: var(--ow-champagne); color: var(--ow-ink); box-shadow: 0 16px 34px -14px rgba(0,0,0,0.8); }

.pp .sc-done > .material-symbols-outlined { font-size: 1.7em; }

.pp .sc-done .d-tx { display: grid; gap: 0.1em; }

.pp .sc-done b { font-size: 1.05em; }

.pp .sc-done small { font-size: 0.88em; line-height: 1.35; }

/* One code for every place: the shop, a show stand, an online listing — a row under scene and
   steps, each with a small scene of its own (decoration, aria-hidden) and the same code card in it. */
.pp .fh-show-places { grid-area: places; margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--ow-line-dark); }

.pp .fh-show-places .pl-head { display: flex; gap: 12px 40px; align-items: baseline; flex-wrap: wrap; margin-bottom: 28px; }

.pp .fh-show-places .pl-k { margin: 0; font-family: var(--ow-serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; color: #fff; }

.pp .fh-show-places .pl-head p { margin: 0; max-width: 620px; font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.68); }

.pp .pl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.pp .pl-tile { display: flex; flex-direction: column; padding: 14px 14px 20px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.03); }

.pp .pl-tile h4 { display: flex; align-items: center; gap: 8px; margin: 18px 4px 0; font-size: 1.05rem; font-weight: 600; color: #fff; }

.pp .pl-tile h4 .material-symbols-outlined { font-size: 20px; color: var(--fh-lilac); }

.pp .pl-tile p { margin: 8px 4px 0; font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.64); }

.pp .pl-mini { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; container-type: inline-size; }

/* The code card, the same in all three. */
.pp .pl-mini .pl-code { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2.4cqw 1.6cqw 1.6cqw; border-radius: 1.4cqw; background: var(--ow-paper); color: var(--ow-ink); box-shadow: 0 1.6cqw 3.6cqw -1.6cqw rgba(0,0,0,0.6); }

.pp .pl-mini .pl-code .material-symbols-outlined { font-size: 9cqw; line-height: 1; }

.pp .pl-mini .pl-code b { font-family: var(--fh-mono-font); font-size: 3.4cqw; letter-spacing: 0.04em; }

.pp .pl-mini .pl-ping { position: absolute; inset: -0.6cqw; border-radius: 2cqw; border: 2px solid var(--ow-champagne); opacity: 0; pointer-events: none; }

/* A small dark case holding the specimen; its photo's black ground melts into it. */
.pp .pl-mini .pl-box { position: absolute; z-index: 2; overflow: hidden; border-radius: 1cqw; background: var(--ow-ink); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,0.7); }

.pp .pl-mini .pl-box img { position: absolute; left: 4%; top: 12%; width: 92%; mix-blend-mode: lighten; }

/* The shop: a cream wall, a shelf, the case on it, the card leaning beside. */
.pp .pl-shop { background: linear-gradient(to bottom, var(--ow-cream), var(--ow-cream-deep)); }

.pp .pl-shop .pl-shelf { position: absolute; left: 0; right: 0; top: 72%; height: 5%; background: var(--ow-champagne-deep); box-shadow: 0 1.4cqw 2.4cqw -1cqw rgba(0,0,0,0.45); }

.pp .pl-shop .pl-box { left: 12%; top: 22%; width: 44%; height: 50%; }

.pp .pl-shop .pl-code { right: 10%; bottom: 28%; }

/* The show: the stand's striped awning, the hall dark around it, a table with the case and card. */
.pp .pl-fair { background: radial-gradient(90% 80% at 50% 10%, var(--ow-ink-2), color-mix(in srgb, var(--ow-ink) 75%, #000)); }

.pp .pl-fair .pl-awning { position: absolute; left: 6%; right: 6%; top: 0; height: 17%; border-radius: 0 0 2cqw 2cqw; background: repeating-linear-gradient(90deg, var(--ow-champagne) 0 8%, var(--ow-cream) 8% 16%); }

.pp .pl-fair .pl-table { position: absolute; left: 6%; right: 6%; bottom: 0; height: 26%; background: linear-gradient(to bottom, var(--ow-cream-deep), var(--ow-cream)); border-top: 1px solid rgba(255,255,255,0.5); }

.pp .pl-fair .pl-box { left: 14%; top: 30%; width: 40%; height: 46%; }

.pp .pl-fair .pl-code { right: 12%; bottom: 26%; }

/* The listing: a browser window with the ad, its history link, and the code card over its corner. */
.pp .pl-online { background: linear-gradient(135deg, var(--ow-cream-deep), var(--ow-cream)); }

.pp .pl-online .pl-browser { position: absolute; left: 7%; right: 7%; top: 9%; bottom: 9%; overflow: hidden; border-radius: 2cqw; background: var(--ow-paper); border: 1px solid var(--ow-line); box-shadow: 0 2cqw 5cqw -2.4cqw rgba(0,0,0,0.4); }

.pp .pl-online .pl-bar { display: flex; gap: 1.2cqw; padding: 1.8cqw 2.4cqw; border-bottom: 1px solid var(--ow-line); background: var(--ow-cream); }

.pp .pl-online .pl-bar i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--ow-line); }

.pp .pl-online .pl-ad { display: flex; gap: 3cqw; padding: 3cqw; }

.pp .pl-online .pl-ad img { width: 32%; aspect-ratio: 1; object-fit: cover; border-radius: 1.4cqw; }

.pp .pl-online .pl-ad-tx { display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; flex: 1; color: var(--ow-ink); }

.pp .pl-online .pl-ad-tx b { font-family: var(--ow-serif); font-size: 4.4cqw; font-weight: 600; line-height: 1.1; }

.pp .pl-online .pl-line { display: block; height: 1.6cqw; border-radius: 1cqw; background: var(--ow-line); }

.pp .pl-online .pl-line.short { width: 60%; }

.pp .pl-online .pl-link { display: inline-flex; align-items: center; gap: 0.8cqw; align-self: flex-start; max-width: 100%; overflow: hidden; white-space: nowrap; padding: 0.8cqw 1.8cqw; border-radius: 999px; font-size: 2.7cqw; font-weight: 600; background: color-mix(in srgb, var(--ow-champagne) 18%, var(--ow-paper)); color: var(--ow-gold-ink); }

.pp .pl-online .pl-link .material-symbols-outlined { font-size: 3.6cqw; }

.pp .pl-online .pl-code { right: 4%; bottom: 5%; }

/* Jewellery: one code on the ring's case, and each component of the ring with a history of its own
   (the shared history with its contained objects). The ring in its open case with a numbered dot on
   each component, the customer's phone with the ring's history and its components under it, the
   copy beside. Composed by default like the scene above; js/retailShowcase.js animates it on a
   timeline of its own. Sizes come from the scene's width (container units), the phone's text from
   the phone's. */
.pp .fh-show-parts { grid-area: parts; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--ow-line-dark); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "scene head" "scene copy"; column-gap: 64px; }

.pp .fh-show-parts .pt-head-copy { grid-area: head; align-self: end; }

.pp .fh-show-parts .pt-copy { grid-area: copy; align-self: start; }

.pp .fh-show-parts .pt-k { margin: 0; font-family: var(--ow-serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; line-height: 1.2; color: #fff; }

.pp .fh-show-parts .pt-lede { margin: 14px 0 0; font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.68); }

.pp .pt-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }

.pp .pt-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-radius: 10px; border-left: 2px solid transparent; transition: background 300ms ease, opacity 300ms ease, border-color 300ms ease; }

.pp .pt-step .s-n { font-family: var(--fh-mono-font); font-size: 0.8rem; color: var(--fh-lilac); padding-top: 3px; }

.pp .pt-step .s-tx { display: grid; gap: 3px; }

.pp .pt-step b { font-size: 1rem; font-weight: 600; color: #fff; }

.pp .pt-step .s-tx > span { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.62); }

/* While the ring's timeline plays, its steps light up like the scene's above. */
.pp .fh-show-parts.is-animated .pt-step { opacity: 0.45; }

.pp .fh-show-parts.is-animated .pt-step.is-done { opacity: 0.8; }

.pp .fh-show-parts.is-animated .pt-step.is-active { opacity: 1; background: rgba(255,255,255,0.06); border-left-color: var(--ow-champagne); }

.pp .fh-show-parts .pt-scene { grid-area: scene; align-self: center; position: relative; width: 100%; max-width: 640px; justify-self: center; aspect-ratio: 10 / 8; container-type: inline-size; }

.pp .pt-scene .pt-example { position: absolute; left: 0; top: 0; z-index: 7; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 4px 10px; }

/* The open case: an ink frame, a champagne rim, the photo's pale ground as its lining. */
.pp .pt-case { position: absolute; left: 0; top: 7%; width: 63%; padding: 2.2cqw; border-radius: 2.4cqw; background: linear-gradient(160deg, var(--ow-ink-2), color-mix(in srgb, var(--ow-ink) 80%, #000)); border: 1px solid rgba(230, 207, 156,0.4); box-shadow: 0 4cqw 8cqw -4cqw rgba(0,0,0,0.8); }

.pp .pt-case .pt-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1.2cqw; background: var(--ow-cream); }

.pp .pt-case .pt-ring { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A numbered dot on each component; the same number marks the component on the phone. */
.pp .pt-case .pt-dot { position: absolute; z-index: 2; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; display: grid; place-items: center; border-radius: 50%; font-family: var(--fh-mono-font); font-size: clamp(9px, 2.2cqw, 13px); font-weight: 700; background: var(--ow-ink); color: var(--ow-champagne-light); border: 2px solid var(--ow-champagne-light); box-shadow: 0 0.8cqw 1.6cqw rgba(0,0,0,0.45); }

.pp .pt-case .pt-dot-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ow-champagne); opacity: 0; pointer-events: none; }

.pp .pt-case .pt-label { display: grid; gap: 1px; margin-top: 1.6cqw; padding: 0 0.4cqw; }

.pp .pt-case .pt-label b { font-family: var(--ow-serif); font-weight: 600; font-size: clamp(12px, 2.6cqw, 17px); line-height: 1.15; color: #fff; }

.pp .pt-case .pt-label small { font-size: clamp(9px, 1.7cqw, 11.5px); color: var(--ow-champagne-light); letter-spacing: 0.04em; }

/* The code card in front of the case, as in the scene above (a QR glyph, not a scannable code). */
.pp .pt-case .pt-card { position: absolute; right: 2.2cqw; bottom: -2.4cqw; z-index: 3; display: flex; align-items: center; gap: 1.1cqw; padding: 1cqw 1.4cqw 1cqw 1cqw; background: var(--ow-paper); color: var(--ow-ink); border-radius: 4px; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.7); }

.pp .pt-case .pt-card > .material-symbols-outlined { font-size: clamp(24px, 6cqw, 40px); line-height: 1; }

.pp .pt-case .pt-card .c-tx { display: grid; gap: 1px; }

.pp .pt-case .pt-card b { font-family: var(--fh-mono-font); font-size: clamp(8px, 1.6cqw, 11px); letter-spacing: 0.06em; }

.pp .pt-case .pt-card small { font-size: clamp(7.5px, 1.35cqw, 9.5px); color: var(--ow-gold-ink); }

.pp .pt-case .pt-ping { position: absolute; inset: -3px; border-radius: 6px; border: 2px solid var(--ow-champagne); opacity: 0; pointer-events: none; }

/* The phone: the ring's history, then its components; text in em of the phone's width. */
.pp .pt-phone { position: absolute; right: 0; top: 0; z-index: 5; width: 37%; aspect-ratio: 9 / 19; padding: 1.1cqw; border-radius: 6cqw; background: color-mix(in srgb, var(--ow-ink) 60%, #000); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.85); container-type: inline-size; }

.pp .pt-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12cqw; background: var(--ow-cream); color: var(--ow-ink); font-size: 6cqw; line-height: 1.3; display: flex; flex-direction: column; gap: 0.55em; padding: 2.4em 0.85em 0.85em; box-sizing: border-box; }

.pp .pt-screen::before { content: ""; position: absolute; top: 0.7em; left: 50%; width: 28%; height: 1.1em; transform: translateX(-50%); border-radius: 999px; background: color-mix(in srgb, var(--ow-ink) 85%, #000); }

.pp .pt-head { display: grid; gap: 0.1em; }

.pp .pt-head .p-k { font-size: 0.62em; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ow-gold-ink); }

.pp .pt-head .p-t { font-family: var(--ow-serif); font-size: 1.3em; font-weight: 600; line-height: 1.05; }

.pp .pt-head .p-s { font-size: 0.7em; color: color-mix(in srgb, var(--ow-ink) 60%, transparent); }

/* The ring's own entry: the atelier's signature. */
.pp .pt-entry { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: 0.5em; align-items: start; padding: 0.5em 0.55em; border-radius: 0.5em; border: 1px solid var(--ow-champagne); background: color-mix(in srgb, var(--ow-champagne) 10%, var(--ow-paper)); }

.pp .pt-entry .e-i { width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: var(--ow-ink); color: var(--ow-champagne-light); }

.pp .pt-entry .e-i .material-symbols-outlined { font-size: 1.1em; }

.pp .pt-entry .e-tx { display: grid; gap: 0.05em; min-width: 0; }

.pp .pt-entry .e-k { font-size: 0.56em; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--ow-gold-ink); }

.pp .pt-entry b { font-size: 0.76em; line-height: 1.2; }

.pp .pt-entry small { font-size: 0.6em; line-height: 1.3; color: color-mix(in srgb, var(--ow-ink) 62%, transparent); }

.pp .pt-screen .pt-title { margin-top: 0.2em; font-family: var(--ow-serif); font-size: 0.95em; font-weight: 600; }

.pp .pt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em; }

/* One component: its close-up with the dot's number, its name, and the entry of its own history. */
.pp .pt-part { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 0.55em; align-items: start; padding: 0.45em 0.5em; border-radius: 0.5em; background: var(--ow-paper); border: 1px solid var(--ow-line); }

.pp .pt-part .p-img { position: relative; width: 3em; height: 3em; }

.pp .pt-part .p-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.45em; }

.pp .pt-part .p-n { position: absolute; right: -0.35em; top: -0.35em; width: 1.25em; height: 1.25em; display: grid; place-items: center; border-radius: 50%; font-family: var(--fh-mono-font); font-size: 0.62em; font-weight: 700; background: var(--ow-ink); color: var(--ow-champagne-light); }

.pp .pt-part .p-tx { display: grid; gap: 0.05em; min-width: 0; }

.pp .pt-part b { font-size: 0.78em; line-height: 1.15; }

.pp .pt-part small { font-size: 0.6em; color: color-mix(in srgb, var(--ow-ink) 62%, transparent); }

.pp .pt-part .p-ev { display: flex; gap: 0.3em; align-items: flex-start; margin-top: 0.2em; padding-top: 0.25em; border-top: 1px dashed var(--ow-line); font-size: 0.58em; line-height: 1.3; }

.pp .pt-part .p-ev .material-symbols-outlined { font-size: 1.3em; line-height: 1; color: var(--ow-gold-ink); }

.pp .pt-part .p-ev em { font-style: normal; font-weight: 700; color: var(--ow-gold-ink); }

.pp .pt-part .p-files { display: flex; gap: 0.3em; margin-top: 0.3em; }

.pp .pt-part .p-file { display: inline-flex; align-items: center; gap: 0.25em; height: 2em; border-radius: 0.35em; overflow: hidden; background: var(--ow-cream-deep); font-size: 0.56em; font-weight: 600; }

.pp .pt-part .p-file img { width: 2em; height: 2em; object-fit: cover; }

.pp .pt-part .p-pdf { padding: 0 0.5em 0 0.35em; }

.pp .pt-part .p-pdf .material-symbols-outlined { font-size: 1.4em; color: var(--ow-gold-ink); }

/* The part being shown, and its dot on the ring, while the timeline plays. */
.pp .pt-part.is-on { border-color: var(--ow-champagne); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ow-champagne) 55%, transparent); }

.pp .pt-case .pt-dot.is-on { background: var(--ow-champagne); color: var(--ow-ink); }

@media (max-width: 960px) {
  .pp .fh-show { padding: 64px 0 80px; }
  .pp .fh-show-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scene" "body" "places" "parts"; row-gap: 40px; }
  .pp .fh-show-places { margin-top: 16px; padding-top: 40px; }
  .pp .pl-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .pp .fh-show-scene { max-width: 560px; }
  .pp .fh-show-parts { margin-top: 16px; padding-top: 40px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scene" "copy"; row-gap: 32px; }
  .pp .fh-show-parts .pt-scene { max-width: 560px; }
}

@media (max-width: 600px) {
  /* Narrow: the case a little wider, the phone larger, so the screen stays readable. The label
     gives way — the phone names the specimen — and the code card takes its place on the left,
     where the phone does not cover it. */
  .pp .fh-show-scene { aspect-ratio: 4 / 5; }
  .pp .sc-case { top: 8%; width: 64%; height: 62%; }
  .pp .sc-case .sc-label { display: none; }
  .pp .sc-case .sc-card { right: auto; left: 6%; }
  .pp .sc-phone { width: 50%; top: 14%; }
  .pp .sc-done { max-width: 46%; }
  .pp .fh-show-step { padding: 10px 8px; }
  /* The ring's scene: the case on top, the phone lower and larger beside it. */
  .pp .fh-show-parts .pt-scene { aspect-ratio: 4 / 5; }
  .pp .pt-case { width: 66%; top: 4%; }
  .pp .pt-case .pt-label { display: none; }
  .pp .pt-case .pt-card { right: auto; left: 2.2cqw; }
  .pp .pt-phone { width: 48%; top: 18%; }
  .pp .pt-step { padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp .fh-show-step,
  .pp .pt-step,
  .pp .fh-show-replay { transition: none; }
}

/* ───────────── 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, var(--ow-cream) 0%, var(--ow-champagne-light) 52%, var(--ow-champagne-light) 100%); border: 1px solid var(--fh-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 3px rgba(20, 26, 51,0.16), 0 1px 2px rgba(20, 26, 51,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(20, 26, 51,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(201, 169, 106,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(201, 169, 106,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; }

  /* 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-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 .nl-hero-inner,
  .pp .hz-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,
.ohl-chip-open {
    color: var(--oh-fg-2);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A chip that opens the file preview (image, PDF, MP4 video) reads like the link it replaces. */
.ohl-chip-open {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ohl-chip a:hover,
.ohl-chip-open: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;
}

/* ── 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 button + eyebrow + title, the shared `.ow-page-head` row under the brand.
   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. The head reads left-aligned like every other
   page, so the eyebrow, the title and the sub-headline under it drop the card's
   centring. */
.lp .lp-auth-card .ow-page-head {
    margin-bottom: 10px;
}

.lp .lp-auth-card .ow-page-head .lp-auth-eyebrow,
.lp .lp-auth-card .ow-page-head .lp-auth-title,
.lp .lp-auth-card .ow-page-head + .lp-auth-sub {
    text-align: left;
}

/* 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; }

/* ── Login-Weiche (docs/login-weiche-design.md) ──────────────────────────────
   The way to the other auth page: one slim door under the form (AuthDoor.razor) — "Schon ein Konto?
   Einloggen" on the registration, "Neu hier? Registrieren" on the login. It replaced the two-door
   switch at the top of both cards, which took the first screen on a phone (October 2026). */
.lp .lp-auth-door {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 44px;
    margin: 14px 0 0;
    padding: 8px 14px;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    text-decoration: none;
    font-size: 0.95rem;
}
.lp .lp-auth-door:hover { border-color: var(--ow-champagne); color: var(--ow-ink); }
.lp .lp-auth-door:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }
.lp .lp-auth-door-cap { color: var(--own-fg-2); }
.lp .lp-auth-door-lbl { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.lp .lp-auth-door-lbl .material-symbols-outlined { font-size: 1.05rem; }
/* The trial line under the login page's door, for a visitor from a public page. */
.lp .lp-auth-door-hint {
    margin: 6px 0 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ow-gold-ink);
}
.lp .lp-auth-title--solo { margin-bottom: 22px; }
/* In the back-button head (AuthBackButton) the title's own margin is reset; the head keeps the gap. */
.lp .lp-auth-card .ow-page-head:has(.lp-auth-title--solo) { margin-bottom: 22px; }

/* A failed password sign-in with the way to the registration (Login.razor). */
.lp .lp-auth-note--rescue {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 11px;
    font-size: 1rem;
    color: var(--own-fg-1);
}
.lp .lp-auth-note--rescue p { margin: 0 0 6px; }
.lp .lp-auth-note-form,
.lp .lp-auth-note--rescue .lp-auth-note-foot { grid-column: 1 / -1; margin: 0; }
.lp .lp-auth-note-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    margin-top: 4px;
    background: transparent;
    border: 1.5px solid var(--ow-ink);
    color: var(--ow-ink);
    font-size: 1.0625rem;
    font-weight: 700;
}
.lp .lp-auth-note-btn:hover { background: var(--ow-cream); }
.lp .lp-auth-note-btn:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }
.lp .lp-auth-note--rescue .lp-auth-note-foot { text-align: center; font-size: 0.95rem; color: var(--own-fg-2); }
.lp .lp-auth-note--rescue .lp-auth-note-foot a { color: var(--ow-gold-ink); }

/* A passkey this device has used before: offered first on the login card. */
.lp .lp-auth-passkey {
    background: var(--ow-paper);
    border: 1px solid color-mix(in srgb, var(--ow-champagne) 60%, var(--ow-line));
    border-radius: 14px;
    padding: 14px 16px 12px;
    text-align: center;
}
.lp .lp-auth-passkey > p:first-child { margin: 0 0 10px; font-size: 1rem; line-height: 1.4; color: var(--own-fg-1); }
.lp .lp-auth-passkey > p:first-child .material-symbols-outlined { color: var(--ow-champagne-deep); vertical-align: -4px; margin-right: 6px; }
.lp .lp-auth-passkey .lp-auth-hint { margin: 6px 0 0; }
.lp .lp-auth-passkey + .lp-auth-sep { margin-top: 18px; }

/* Registration with the visitor's context: the edition's advantages beside the card from 960px on,
   a compact box inside the card below that (RegisterBenefits.razor). */
.lp.lp-auth-page:has(.lp-auth-split) { align-items: flex-start; }
.lp .lp-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 64px;
    width: 100%;
    max-width: 1060px;
    align-items: start;
}
.lp .lp-auth-split > .lp-auth-card { justify-self: end; }
.lp .lp-auth-benefits--panel { color: var(--ow-paper); padding-top: 30px; }
.lp .lp-auth-benefits-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ow-champagne);
}
.lp .lp-auth-benefits-eyebrow .material-symbols-outlined { font-size: 1.15rem; }
.lp .lp-auth-benefits-title {
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 2.9rem;
    line-height: 1.04;
    margin: 12px 0 8px;
    color: var(--ow-paper);
}
.lp .lp-auth-benefits-tag { font-size: 1.15rem; line-height: 1.45; color: rgba(255, 255, 255, 0.78); margin: 0 0 30px; }
.lp .lp-auth-benefits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.lp .lp-auth-benefits--panel li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.lp .lp-auth-benefits-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--ow-champagne) 14%, transparent);
    color: var(--ow-champagne);
}
.lp .lp-auth-benefits-ico .material-symbols-outlined { font-size: 1.3rem; }
.lp .lp-auth-benefits--panel b { display: block; font-size: 1.08rem; color: var(--ow-paper); margin-bottom: 2px; }
.lp .lp-auth-benefits-text { font-size: 0.97rem; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.lp .lp-auth-benefits-foot {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--ow-line-dark);
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--ow-champagne-light);
}
.lp .lp-auth-benefits-foot > span { display: inline-flex; align-items: center; gap: 8px; }
.lp .lp-auth-benefits-foot .material-symbols-outlined { font-size: 1.05rem; }
/* What follows the trial (TrialAfterLine): the price and the monthly notice. */
.lp .lp-auth-benefits-foot > .lp-auth-benefits-after { align-items: flex-start; font-size: 0.88rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.lp .lp-auth-benefits-foot > .lp-auth-benefits-after .material-symbols-outlined { margin-top: 1px; }
.lp .lp-auth-benefits--compact {
    display: none;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    padding: 14px 16px 12px;
    margin: 6px 0 22px;
    text-align: left;
}
.lp .lp-auth-benefits-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ow-ink);
}
.lp .lp-auth-benefits-head .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.2rem; }
.lp .lp-auth-benefits--compact .lp-auth-benefits-list { gap: 6px; }
.lp .lp-auth-benefits--compact li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 1rem; line-height: 1.35; color: var(--own-fg-1); }
.lp .lp-auth-benefits--compact li .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 1.1rem; margin-top: 1px; }
.lp .lp-auth-benefits-trial {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--ow-line);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ow-gold-ink);
}
.lp .lp-auth-benefits--compact .lp-auth-benefits-after { margin: 3px 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--own-fg-2); }
@media (max-width: 960px) {
    .lp .lp-auth-split { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
    .lp .lp-auth-split > .lp-auth-card { justify-self: stretch; }
    .lp .lp-auth-benefits--panel { display: none; }
    .lp .lp-auth-benefits--compact { display: block; }
}

/* 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);
}

/* "This device" on the device list (/account/manage/sessions): a small champagne tag after the name. */
.lp .lp-auth-list-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-cream);
    color: var(--ow-gold-ink);
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

/* 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;
}
/* A section a deep link jumps to (tabindex="-1", e.g. the export centre's "new export" on the
   Sammlungsakte link) takes focus only to be scrolled to — it is not a control, so no focus ring. */
.own-canvas .oc-section[tabindex="-1"]:focus { outline: none; }

.own-canvas .oc-section:last-child { margin-bottom: 0; }

/* Switch: outlined line-coloured track when off, champagne track when on — the Shared Spaces treatment. */
.own-canvas .oc-switch .rz-switch {
    width: 58px;
    height: 32px;
}

/* Radzen draws the track on .rz-switch-circle and the knob on its ::before.
   Off: a line-coloured track with an outline so it stays visible on white
   cards, and a paper knob. On: a champagne track with a paper knob. */
.own-canvas .oc-switch .rz-switch .rz-switch-circle {
    background: var(--ow-line);
    box-shadow: inset 0 0 0 1px var(--own-fg-3);
    border-radius: 999px;
}

.own-canvas .oc-switch .rz-switch .rz-switch-circle::before {
    background: var(--ow-paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.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);
    box-shadow: none;
}

.own-canvas .oc-switch .rz-switch.rz-state-disabled .rz-switch-circle {
    opacity: 0.5;
}

/* 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); }

/* ── Read-only mode ─────────────────────────────────────────────────────────
   ReadOnly lists objects without selecting anything (the Haushaltsbuch's
   sub-type breakdown). It borrows the pick-mode column for a Details link, the
   name becomes a real link too, and with amounts the date column carries what
   each object contributed. */
a.eol-pick-btn { text-decoration: none; }

.eol-nm-link {
    display: block;
    text-decoration: none;
}

.eol-nm-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.eol-dt.eol-amt {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ow-ink);
}

.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; }

    /* With amounts the figure is the point of the list: it keeps its column on a phone and
       the type, which every row of a sub-type list shares anyway, gives way instead. */
    .eol-tbl-amounts .eol-row > .eol-dt { display: block; }
    .eol-tbl-amounts .eol-row > .eol-ty { 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 — Export of a picked list (.ow-selection-export)
   The export centre's "new export" for the objects another page already
   shows — the tag analysis hands in the items of its table. It sits inside
   that page's own surface, so .own-canvas--embedded drops the page width and
   the bottom padding the canvas carries as a page; everything else is the
   export centre's vocabulary (.oc-setting, .oc-field, .oc-stat, .oc-btn).
   ========================================================================= */
.own-canvas.own-canvas--embedded {
    max-width: none;
    margin: 0 0 1rem;
    padding: 0;
}

.own-canvas .ow-selection-export-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.own-canvas .ow-selection-export-head > div {
    flex: 1 1 260px;
    min-width: 0;
}

.own-canvas .ow-selection-export-title {
    margin: 0 0 4px;
    font-family: var(--ow-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--ow-ink);
}

.own-canvas .ow-selection-export-head .oc-setting-desc {
    margin: 0;
}

/* The notices and the options open below the head and need air from it. */
.own-canvas .ow-selection-export-head ~ .oc-notice,
.own-canvas .ow-selection-export-body {
    margin-top: 16px;
}

/* =========================================================================
   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);
}

.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); } }

/* ── The event dialog's quick path: one question per screen ────────────────────
   Kauf/Verkauf asks for the price, then the date; every other simple event for the
   date only. Modelled on the manual capture's amount step (AddObjects .mnl-*): the
   serif question, the big amount with its currency, example chips, the „vorbelegt"
   badge. A value that is already decided — the quantity, the date — reads as text
   with a small pen, and only the pen turns it into a field. */
.ev-quick { display: flex; flex-direction: column; gap: 0.75rem; }
.ev-quick-q {
    font-family: var(--ow-serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: var(--ow-ink, #0b1020);
}
.ev-quick-lbl {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-weight: 700;
    color: var(--own-fg-2, #475569);
}
.ev-quick-preset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .6rem;
    letter-spacing: .1em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(201, 169, 106, .16);
    color: var(--ow-gold-ink, #72592c);
    border: 1px solid rgba(201, 169, 106, .4);
}
.ev-quick-preset .material-symbols-outlined { font-size: .8rem; }
.ev-quick-amt {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    background: var(--ow-paper, #ffffff);
    border: 1px solid var(--ow-line, #e6e1d7);
    border-radius: 16px;
    padding: 18px 14px 8px;
    cursor: text;
    transition: border-color .15s ease;
}
.ev-quick-amt:focus-within { border-color: var(--ow-champagne-deep, #a7864b); }
.ev-quick-amt input {
    font-family: var(--ow-serif);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--ow-ink, #0b1020);
    background: transparent;
    border: 0;
    outline: none;
    text-align: right;
    width: 170px;
    padding: 0;
}
.ev-quick-amt .cur {
    font-family: var(--ow-serif);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--own-fg-2, #475569);
}
.ev-quick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-quick-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ow-paper, #ffffff);
    border: 1px solid var(--ow-line, #e6e1d7);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ow-ink, #0b1020);
    cursor: pointer;
}
.ev-quick-chip:hover { border-color: var(--ow-champagne-deep, #a7864b); }
.ev-quick-chip.ghost { border-style: dashed; background: transparent; color: var(--own-fg-2, #475569); }
.ev-quick-sub { margin: 0; font-size: .85rem; color: var(--own-fg-2, #475569); }
.ev-quick-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .95rem;
    color: var(--ow-ink, #0b1020);
}
.ev-quick-line--big { font-family: var(--ow-serif); font-size: 1.35rem; font-weight: 600; }
.ev-quick-pen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ow-gold-ink, #72592c);
    cursor: pointer;
}
.ev-quick-pen:hover,
.ev-quick-pen:focus-visible { background: rgba(201, 169, 106, .16); }
.ev-quick-pen .material-symbols-outlined { font-size: 1.05rem; }

/* The attachment dialog's own upload step (AttachmentDialog in upload mode): the native input is
   kept off-screen and opened through the <label> dressed as the ink OWNY row, so the picker opens
   from the user's own tap on iOS Safari. */
.att-dialog-input {
    position: fixed;
    top: -100px;
    left: -100px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.att-dialog-pick { cursor: pointer; -webkit-user-select: none; user-select: none; }
.att-dialog-pick.is-busy { pointer-events: none; opacity: 0.8; cursor: default; }

/* ── 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); }
/* The "change" action on the chip. Radzen's Light text variant paints its label in a pale base
   grey, which vanished against the cream chip; it wears the ink here like every Light button. */
.event-wizard-type-chip .rz-button.rz-light.rz-variant-text {
    flex: 0 0 auto;
    background-color: var(--ow-cream, #f6f1e7);
    color: var(--ow-ink, #0b1020);
    border: 1px solid var(--ow-line, #e6e1d7);
    font-weight: 600;
}
.event-wizard-type-chip .rz-button.rz-light.rz-variant-text:not(:disabled):hover {
    background-color: var(--ow-cream-deep, #efe7d4);
    border-color: var(--ow-champagne, #c9a96a);
    color: var(--ow-ink, #0b1020);
}
.event-wizard-type-chip .rz-button.rz-light.rz-variant-text:disabled {
    color: var(--own-fg-3, #9c9484);
}

/* 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);
}
.event-ses-card .rz-form-field { background: var(--ow-paper, #fff); }
/* "Selbst bestätigen" / "Von einem Dritten bestätigen lassen" — the two ways inside the card. */
.event-ses-subhead {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ow-ink, #0b1020);
    margin-bottom: -0.25rem;
}
.event-ses-subhead--split {
    border-top: 1px solid var(--ow-line, #e0dccf);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}
/* "The signer sees the event and 1 file" — one quiet line under the request button. */
.event-ses-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--own-fg-2, #475569);
}
.event-ses-meta > .material-symbols-outlined { font-size: 1rem; color: var(--ow-champagne-deep, #a7864b); }

/* One-line label above the attachment actions; replaces the explanatory paragraph. */
.event-step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ow-ink, #0b1020);
    margin-bottom: -0.25rem;
}

/* ── Dialog notes ──────────────────────────────────────────────────────────────
   Status, warning and receipt lines inside dialogs and event rows. Radzen's flat
   alerts set tinted text on a saturated green or orange ground, which was hard to
   read in the cream dialogs; a note keeps ink text on a pale ground and carries the
   signal in its left edge and icon only. Title first, one short line of detail. */
.ow-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--ow-line, #e6e1d7);
    border-left-width: 4px;
    border-left-color: var(--ow-champagne, #c9a96a);
    border-radius: 12px;
    background: var(--ow-cream, #f6f1e7);
    color: var(--ow-ink, #0b1020);
    font-size: 0.9rem;
    line-height: 1.45;
}
.ow-note > .material-symbols-outlined {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--ow-champagne-deep, #a7864b);
}
.ow-note-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ow-note-title { font-weight: 600; overflow-wrap: anywhere; }
.ow-note-text { color: var(--own-fg-2, #475569); font-size: 0.85rem; }
.ow-note--success { border-left-color: #7fa87c; background: #f4f8f2; }
.ow-note--success > .material-symbols-outlined { color: var(--ow-ev-documented, #1f5b35); }
.ow-note--warning { border-left-color: #d9a441; background: #fdf7ea; }
.ow-note--warning > .material-symbols-outlined { color: #a97b1f; }
.ow-note--danger { border-left-color: #c0544e; background: #fdf4f3; }
.ow-note--danger > .material-symbols-outlined { color: var(--ow-negative, #9b2c1f); }
.ow-note-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 6px; }

/* Fine print folded away under a quiet one-line toggle: "So funktioniert's", the proof's hash. */
.ow-more { font-size: 0.82rem; color: var(--own-fg-2, #475569); }
.ow-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--ow-ink, #0b1020);
}
.ow-more > summary::-webkit-details-marker { display: none; }
.ow-more > summary::after {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    font-size: 1.1rem;
    line-height: 1;
    transition: transform .15s ease;
}
.ow-more[open] > summary::after { transform: rotate(180deg); }
.ow-more > p { margin: 6px 0 0; line-height: 1.5; }
.ow-more-code {
    display: block;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--ow-paper, #fff);
    border: 1px solid var(--ow-line, #e6e1d7);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--ow-ink, #0b1020);
}

/* Transfer dialog: the form, then the footer with Close and the primary action. */
.transfer-dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.transfer-dialog-link { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.transfer-dialog-link > .rz-textbox { flex: 1 1 220px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

@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) ── */
/* Slim: the headline, one line of lede and the buttons — the page's sections tell the rest. */
.lp .ax-hero { background: var(--ow-ink); color: #fff; padding: 104px 0 40px; }
/* The founder's greeting above the start page's headline (Home.razor HeroFounder): a small round
   portrait with a champagne ring, the welcome line and "Gründer" under it — quiet, so the headline stays
   the first read. White on the dark classic hero, ink on the cream edition hero. */
.lp .ax-founder { display: flex; align-items: center; gap: 12px; max-width: 36rem; margin-bottom: 22px; }
.lp .ax-founder-img {
  flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--ow-champagne); background: rgba(255,255,255,.08);
}
.lp .ax-founder-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp .ax-founder-hi { font-size: .88rem; line-height: 1.35; color: rgba(255,255,255,.78); }
.lp .ax-founder-role {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ow-champagne);
}
.lp .lp-hero--editions .ax-founder-hi { color: var(--he-text-2); }
.lp .lp-hero--editions .ax-founder-role { color: var(--ow-gold-ink); }
@media (max-width: 600px) {
  .lp .ax-founder { gap: 10px; margin-bottom: 16px; }
  .lp .ax-founder-img { width: 36px; height: 36px; }
  .lp .ax-founder-hi { font-size: .82rem; }
}
/* The anlass hero, "neu geordnet" (design "Hero neu geordnet", October 2026): little to read on
   arrival and one thing to do. The copy column at up to 560px — whom the page is for, the question
   with OWNAMIC's promise in gold, one sentence, the one button, the registration as a quiet link,
   the trust links — and the live preview at 500px, the space between them free. */
.lp .ax-hero-inner {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 500px);
  justify-content: space-between; column-gap: 48px; align-items: start;
}
.lp .ax-hero .who {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--ow-champagne);
}
.lp .ax-hero .who .ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(201,169,106,.14); }
.lp .ax-hero .who .ico .material-symbols-outlined { font-size: 18px; }
.lp .ax-hero h1 {
  margin: 18px 0 0; color: #fff; font-family: var(--ow-serif); font-size: clamp(2.5rem, 4.1vw, 3.625rem); font-weight: 600;
  line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; hyphens: manual;
}
/* The promise: its own line, in gold, the italic a touch lighter than the question. */
.lp .ax-hero h1 em { display: block; font-style: italic; font-weight: 500; color: var(--ow-champagne); }
.lp .ax-hero .lede { margin: 20px 0 0; max-width: 500px; font-size: 1.125rem; line-height: 1.55; color: rgba(255,255,255,.8); text-wrap: pretty; }

/* ── 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; } }

/* The swipe in the try panel (VierFelderComponent): until the visitor picks a field, the example
   object is swiped into each pile in turn — left keeps, up sells or gives away, right discards, as
   the app sorts on a phone (DeclutterSwipe) — and the field it lands in lights up with a „+1“.
   One round is 9 s; each of the three cards (and its field) plays in its own third, offset by its
   delay. A pick (.tried) stops the round and leaves the chosen pile's card tilted, with its stamp.
   The panel clips the cards as they fly off. */
.lp .ax-q4-try { overflow: hidden; }
.lp .ax-q4-swipe {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: center; gap: 8px 12px; margin: 0 0 10px;
}
.lp .ax-q4-swipe .hint { display: inline-flex; align-items: center; gap: 3px; font-size: .76rem; line-height: 1.25; color: rgba(255,255,255,.72); }
.lp .ax-q4-swipe .hint .material-symbols-outlined { flex: none; font-size: 17px; color: var(--ow-champagne); }
.lp .ax-q4-swipe .h-sell { grid-column: 2; grid-row: 1; justify-self: center; }
.lp .ax-q4-swipe .h-keep { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.lp .ax-q4-swipe .h-drop { grid-column: 3; grid-row: 2; justify-self: start; }
.lp .ax-q4-swipe .deck { grid-column: 2; grid-row: 2; position: relative; width: 150px; height: 168px; }
/* The next card of the pile, waiting behind the one that is swiped. */
.lp .ax-q4-swipe .deck::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); transform: translate(6px, 6px) rotate(2deg);
}
.lp .ax-q4-swipe .sw-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 12px; border-radius: 16px; background: var(--ow-paper); color: var(--ow-ink); text-align: center;
  box-shadow: 0 18px 36px rgba(0,0,0,.35); opacity: 0;
  animation: 9s ease-in-out infinite both;
}
.lp .ax-q4-swipe .sw-card .ph { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 12px; background: var(--ow-cream-deep); }
.lp .ax-q4-swipe .sw-card .ph .material-symbols-outlined { font-size: 38px; color: var(--ow-gold-ink); }
.lp .ax-q4-swipe .sw-card b { font-family: var(--ow-serif); font-size: .98rem; font-weight: 600; line-height: 1.2; }
.lp .ax-q4-swipe .stamp {
  position: absolute; top: 12px; padding: 2px 7px; border: 2px solid currentColor; border-radius: 7px; background: var(--ow-paper);
  font-size: .64rem; font-weight: 800; letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; opacity: 0;
  animation: axQ4Stamp 9s linear infinite both;
}
.lp .ax-q4-swipe .keep .stamp { right: 8px; color: var(--ow-ink); transform: rotate(10deg); }
.lp .ax-q4-swipe .drop .stamp { left: 8px; color: var(--ow-negative); transform: rotate(-10deg); }
.lp .ax-q4-swipe .sell .stamp { top: 30px; left: 50%; width: max-content; max-width: 88%; color: var(--ow-gold-ink); text-align: center; transform: translateX(-50%) rotate(-4deg); }
.lp .ax-q4-swipe .finger {
  position: absolute; left: 50%; top: 40%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border: 2px solid var(--ow-champagne-deep);
  opacity: 0; animation: axQ4Finger 9s ease-out infinite both;
}
.lp .ax-q4-swipe .sw-card.keep { animation-name: axQ4SwipeLeft; }
.lp .ax-q4-swipe .sw-card.sell { animation-name: axQ4SwipeUp; animation-delay: 3s; }
.lp .ax-q4-swipe .sw-card.drop { animation-name: axQ4SwipeRight; animation-delay: 6s; }
.lp .ax-q4-swipe .sw-card.sell .stamp, .lp .ax-q4-swipe .sw-card.sell .finger { animation-delay: 3s; }
.lp .ax-q4-swipe .sw-card.drop .stamp, .lp .ax-q4-swipe .sw-card.drop .finger { animation-delay: 6s; }
.lp .ax-q4-try .ax-q4-swipe-note { margin: 0 0 18px; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.55); text-align: center; }

/* The field the card lands in, in the same third of the round. */
.lp .ax-q4-cell { position: relative; animation: axQ4Land 9s ease-out infinite both; }
.lp .ax-q4-cell.sell { animation-delay: 3s; }
.lp .ax-q4-cell.drop { animation-delay: 6s; }
.lp .ax-q4-cell .c-plus { display: inline-block; margin-left: 8px; font-family: inherit; font-size: .95rem; color: var(--ow-champagne-deep); opacity: 0; animation: axQ4Plus 9s ease-out infinite both; }
.lp .ax-q4-cell.sell .c-plus { animation-delay: 3s; }
.lp .ax-q4-cell.drop .c-plus { animation-delay: 6s; }

/* Picked: the round stops; the chosen pile's card stays, tilted towards its pile, with its stamp. */
.lp .ax-q4-inner.tried .ax-q4-cell { animation: none; }
.lp .ax-q4-inner.tried .c-plus { animation: none; opacity: 0; }
.lp .ax-q4-swipe.tried .sw-card, .lp .ax-q4-swipe.tried .stamp, .lp .ax-q4-swipe.tried .finger { animation: none; opacity: 0; }
.lp .ax-q4-swipe.to-keep .sw-card.keep { opacity: 1; transform: translateX(-18px) rotate(-6deg); }
.lp .ax-q4-swipe.to-sell .sw-card.sell { opacity: 1; transform: translateY(-5px) rotate(-1deg); }
.lp .ax-q4-swipe.to-drop .sw-card.drop { opacity: 1; transform: translateX(18px) rotate(6deg); }
.lp .ax-q4-swipe.to-keep .keep .stamp, .lp .ax-q4-swipe.to-sell .sell .stamp, .lp .ax-q4-swipe.to-drop .drop .stamp { opacity: 1; }
.lp .ax-q4-swipe.tried .sw-card { transition: opacity .25s ease, transform .3s ease; }

@keyframes axQ4SwipeLeft {
  0% { opacity: 0; transform: scale(.9); }
  4%, 11% { opacity: 1; transform: none; }
  20% { opacity: 1; transform: translateX(-44px) rotate(-7deg); }
  27%, 100% { opacity: 0; transform: translateX(-210px) rotate(-18deg); }
}
@keyframes axQ4SwipeUp {
  0% { opacity: 0; transform: scale(.9); }
  4%, 11% { opacity: 1; transform: none; }
  20% { opacity: 1; transform: translateY(-34px); }
  27%, 100% { opacity: 0; transform: translateY(-190px); }
}
@keyframes axQ4SwipeRight {
  0% { opacity: 0; transform: scale(.9); }
  4%, 11% { opacity: 1; transform: none; }
  20% { opacity: 1; transform: translateX(44px) rotate(7deg); }
  27%, 100% { opacity: 0; transform: translateX(210px) rotate(18deg); }
}
@keyframes axQ4Stamp {
  0%, 12% { opacity: 0; }
  19%, 25% { opacity: 1; }
  27%, 100% { opacity: 0; }
}
@keyframes axQ4Finger {
  0%, 6% { opacity: 0; transform: scale(1.4); }
  9%, 19% { opacity: 1; transform: scale(1); }
  23%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes axQ4Land {
  0%, 24% { border-color: var(--ow-line); box-shadow: none; }
  27% { border-color: var(--ow-champagne); box-shadow: 0 12px 32px rgba(201,169,106,.28); }
  38%, 100% { border-color: var(--ow-line); box-shadow: none; }
}
@keyframes axQ4Plus {
  0%, 24% { opacity: 0; transform: translateY(6px); }
  27% { opacity: 1; transform: none; }
  35%, 100% { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 480px) {
  .lp .ax-q4-swipe { gap: 6px 8px; }
  .lp .ax-q4-swipe .deck { width: 128px; height: 150px; }
  .lp .ax-q4-swipe .sw-card .ph { width: 64px; height: 64px; }
  .lp .ax-q4-swipe .hint { font-size: .7rem; }
}

/* Without motion: one card, still, between the three directions; no field lights up. */
@media (prefers-reduced-motion: reduce) {
  .lp .ax-q4-cell, .lp .ax-q4-cell .c-plus, .lp .ax-q4-swipe .stamp, .lp .ax-q4-swipe .finger,
  .lp .ax-q4-swipe .sw-card.keep, .lp .ax-q4-swipe .sw-card.sell, .lp .ax-q4-swipe .sw-card.drop { animation: none; }
  .lp .ax-q4-swipe:not(.tried) .sw-card.sell { opacity: 1; transform: none; }
}

/* ── 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: the editions (occasions while the editions are off) as one dropdown. A row of their links
   beside "Einloggen" and "Kostenlos starten" needs 1291px measured with the real fonts, more than the
   1240px shell gives it (docs/login-weiche-design.md, 2.3). Native <details>; langSelect.js closes it
   on a click outside or Escape. The panel is paper with ink over the dark and the light hero alike. */
.lp .lp-nav-links a { white-space: nowrap; }
.lp .lp-nav-links { align-items: center; }
.lp .lp-nav-menu { position: relative; }
.lp .lp-nav-menu-trigger {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  color: inherit; white-space: nowrap; user-select: none; transition: color var(--own-dur-fast);
}
.lp .lp-nav-menu-trigger::-webkit-details-marker { display: none; }
.lp .lp-nav-menu-trigger:hover { color: white; }
.lp .lp-nav.lp-nav--light .lp-nav-menu-trigger:hover { color: var(--ow-ink); }
.lp .lp-nav-menu-trigger:focus-visible { outline: 3px solid var(--ow-champagne-light); outline-offset: 3px; border-radius: 4px; }
.lp .lp-nav.lp-nav--light .lp-nav-menu-trigger:focus-visible { outline-color: var(--ow-gold-ink); }
.lp .lp-nav-menu-caret { font-size: 1.15rem; transition: transform var(--own-dur-fast); }
.lp .lp-nav-menu[open] .lp-nav-menu-caret { transform: rotate(180deg); }
.lp .lp-nav-menu-list {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 40;
  width: 340px; margin: 0; padding: 6px; list-style: none;
  background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 16, 32, 0.28);
}
.lp .lp-nav-menu-item {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center;
  padding: 9px 10px; border-radius: 10px; text-decoration: none; white-space: normal;
  color: var(--ow-ink); transition: background var(--own-dur-fast);
}
/* A notch more specific than `.lp .lp-nav-links a` (no wrap, inherited white): the taglines wrap
   inside the panel and the items keep ink on the paper panel over the dark hero too. */
.lp .lp-nav-links a.lp-nav-menu-item { white-space: normal; color: var(--ow-ink); }
.lp .lp-nav-menu-item:hover,
.lp .lp-nav-links a.lp-nav-menu-item:hover { background: var(--ow-cream); color: var(--ow-ink); }
.lp .lp-nav-menu-item:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: -3px; }
.lp .lp-nav-menu-item.is-active { background: var(--ow-cream-deep); }
.lp .lp-nav-menu-ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ow-cream-deep); color: var(--ow-champagne-deep);
}
.lp .lp-nav-menu-item.is-active .lp-nav-menu-ico { background: var(--ow-ink); color: var(--ow-champagne); }
.lp .lp-nav-menu-ico .material-symbols-outlined { font-size: 1.2rem; }
.lp .lp-nav-menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lp .lp-nav-menu-name { font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--ow-ink); }
.lp .lp-nav-menu-tag { font-size: 0.84rem; line-height: 1.35; color: var(--own-fg-2); }
/* Up to 900px the brand, the menu, "Preise", the sign-in and the start button do not fit one row
   (measured in German: 97px short at 721px, 17px at 861px): the menu steps back there, as on phones. */
@media (max-width: 900px) { .lp .lp-nav-links { 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; } }

/* ── VIEW SWITCH ("Mein Zuhause | Elternhaus") ──
   Under the crumb of an edition page with a second view. Real links to the two URLs, drawn as a
   segment control on the ink hero: the current view is the champagne segment (aria-current),
   every segment a 44px touch target. */
.lp .ax-switch { display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 26px; border: 1px solid var(--ow-line-dark); border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.lp .ax-switch-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.lp .ax-switch-opt .material-symbols-outlined { font-size: 19px; }
.lp .ax-switch-opt:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.lp .ax-switch-opt:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
.lp .ax-switch-opt.is-active { background: var(--ow-champagne); color: var(--ow-ink); }
/* The Sammler page's example switch over its film ("Beispiel: Münze | Mineralstufe", CollectorExamples):
   the film's column gains a row above the card — a kicker and two options in the view switch's pill
   language, a size smaller. The chosen piece is champagne; the page re-tells itself with it. */
.lp .ax-stage-col { display: flex; flex-direction: column; min-width: 0; }
.lp .ax-piece { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; }
.lp .ax-piece-k { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-champagne); }
.lp .ax-piece-opts { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--ow-line-dark); border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.lp .ax-piece-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.lp .ax-piece-opt .material-symbols-outlined { font-size: 18px; }
.lp .ax-piece-opt:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.lp .ax-piece-opt:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
.lp .ax-piece-opt.is-active { background: var(--ow-champagne); color: var(--ow-ink); }
@media (max-width: 600px) {
  .lp .ax-piece-opts { flex: 1 1 100%; }
  .lp .ax-piece-opt { flex: 1 1 0; min-height: 44px; padding: 0 10px; }
}
/* The Sammler short under the Sammler page's hero (Home.razor, ShowsSammlerShort), as the trade short
   under the retail partner page's (.pp .fh-film): still on the hero's ink, the copy beside a 9:16 frame
   whose poster is the film's title frame. The play button sits over it until it is pressed
   (partnerFilm.js adds .is-playing); from then on the native controls run the film. */
.lp .lp-samfilm { background: var(--ow-ink); color: #fff; padding: 32px 0 96px; }
.lp .lp-samfilm-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; }
.lp .lp-samfilm-copy { max-width: 520px; }
.lp .lp-samfilm .lp-eyebrow { color: var(--ow-champagne); }
.lp .lp-samfilm h2 { margin: 16px 0 0; font-family: var(--ow-serif); font-size: var(--ow-h2-size); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.lp .lp-samfilm h2 em { color: var(--ow-champagne); }
.lp .lp-samfilm-copy > p { margin: 20px 0 0; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.lp .lp-samfilm-copy > p.lp-samfilm-note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; color: rgba(255, 255, 255, 0.5); }
.lp .lp-samfilm-note .material-symbols-outlined { font-size: 18px; line-height: 1.4; }
.lp .lp-samfilm-frame { position: relative; width: min(78vw, 340px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 26px; border: 1px solid var(--ow-line-dark); background: #000; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.lp .lp-samfilm-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.lp .lp-samfilm-play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--ow-champagne); color: var(--ow-ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); transition: transform 150ms ease, background 150ms ease;
}
.lp .lp-samfilm-play .material-symbols-outlined { font-size: 44px; margin-left: 4px; }
.lp .lp-samfilm-play:hover { transform: scale(1.06); background: #fff; }
.lp .lp-samfilm-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.lp .lp-samfilm-frame.is-playing .lp-samfilm-play { display: none; }
@media (max-width: 960px) {
  .lp .lp-samfilm { padding: 24px 0 64px; }
  .lp .lp-samfilm-inner { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .lp .lp-samfilm-copy { max-width: none; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .lp .lp-samfilm-play { transition: none; }
  .lp .lp-samfilm-play:hover { transform: none; }
}
@media (max-width: 600px) {
  .lp .ax-switch { width: 100%; }
  .lp .ax-switch-opt { flex: 1 1 0; padding: 0 12px; }
}

/* What a view needs before any step (HeroLede), in place of the sentence under the headline: a lead
   line and quiet cards — a champagne hairline on ink, no signal colour, nothing that shouts.
   Nachlass: the disclaimer deadline with its link down to the Fristen-Rechner. Sammlung geerbt:
   catalogue vs. sale price, the three marks of a valuable piece, and the relief ("Verkauf nichts,
   bevor …"). */
.lp .ax-hero .ax-pre { max-width: 34rem; margin: 20px 0 0; }
.lp .ax-hero .ax-pre-lead { margin: 0 0 12px; color: rgba(255, 255, 255, 0.86); font-size: 1.06rem; line-height: 1.55; }
/* Collapsed by default (<details>): the summary is one row — icon, "Erbe annehmen oder ausschlagen:
   6 Wochen nach § 1944 BGB", and the round expander button that turns when the card opens. */
.lp .ax-hero .ax-pre-card {
  border: 1px solid color-mix(in srgb, var(--ow-champagne) 55%, transparent);
  border-radius: 16px; background: rgba(255, 255, 255, 0.04);
}
.lp .ax-hero .ax-pre-card > summary {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; gap: 12px; align-items: center;
  padding: 12px 14px 12px 18px; list-style: none; cursor: pointer;
}
.lp .ax-hero .ax-pre-card > summary::-webkit-details-marker { display: none; }
.lp .ax-hero .ax-pre-card > summary:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; border-radius: 16px; }
.lp .ax-hero .ax-pre-ico { color: var(--ow-champagne); font-size: 24px; }
.lp .ax-hero .ax-pre-sum { min-width: 0; color: #fff; font-size: 1.06rem; line-height: 1.35; }
.lp .ax-hero .ax-pre-sum b { font-weight: 600; }
.lp .ax-hero .ax-pre-term { color: var(--ow-champagne); font-weight: 600; white-space: nowrap; }
.lp .ax-hero .ax-pre-toggle {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ow-champagne) 55%, transparent); color: var(--ow-champagne);
  transition: background .2s ease, transform .2s ease;
}
.lp .ax-hero .ax-pre-toggle .material-symbols-outlined { font-size: 20px; }
.lp .ax-hero .ax-pre-card > summary:hover .ax-pre-toggle { background: rgba(255, 255, 255, 0.08); }
.lp .ax-hero .ax-pre-card[open] .ax-pre-toggle { transform: rotate(180deg); }
.lp .ax-hero .ax-pre-copy { padding: 0 18px 16px 54px; }
.lp .ax-hero .ax-pre-copy p { margin: 0 0 10px; color: rgba(255, 255, 255, 0.78); font-size: .95rem; line-height: 1.55; }
.lp .ax-hero .ax-pre-copy p b { color: #fff; font-weight: 600; }
.lp .ax-hero .ax-pre-copy p:last-child { margin-bottom: 0; }
.lp .ax-hero .ax-pre-card + .ax-pre-card { margin-top: 10px; }
.lp .ax-hero .ax-pre-marks { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 8px; color: rgba(255, 255, 255, 0.78); font-size: .95rem; line-height: 1.55; }
.lp .ax-hero .ax-pre-marks li::marker { color: var(--ow-champagne); font-weight: 700; }
.lp .ax-hero .ax-pre-marks b { color: #fff; font-weight: 600; }
.lp .ax-hero .ax-pre-relief { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 1.02rem; line-height: 1.5; }
.lp .ax-hero .ax-pre-relief .material-symbols-outlined { color: var(--ow-champagne); font-size: 22px; margin-top: 1px; }
.lp .ax-hero .ax-pre-relief b { color: #fff; font-weight: 600; }
.lp .ax-hero .ax-pre-copy a {
  color: #fff; font-size: .95rem; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--ow-champagne); text-underline-offset: 3px;
}
.lp .ax-hero .ax-pre-copy a .material-symbols-outlined { margin-left: 4px; font-size: 18px; vertical-align: -4px; color: var(--ow-champagne); }
.lp .ax-hero .ax-pre-copy a:hover { color: var(--ow-champagne); }
.lp .ax-hero--readable .ax-pre-lead,
.lp .ax-hero--readable .ax-pre-sum { font-size: 1.125rem; }

/* Sammlung geerbt: the honest answer in one sentence, then three chips — catalogue vs. sale price,
   three marks, nothing to rush — that open in place. A closed chip is a pill; an open one takes the
   row's full width and shows its text, the other chips wrap around it. */
.lp .ax-hero .ax-pre--chips { max-width: 38rem; }
.lp .ax-hero .ax-pre-answer { margin: 0 0 14px; color: rgba(255, 255, 255, 0.9); font-size: 1.12rem; line-height: 1.5; }
.lp .ax-hero .ax-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp .ax-hero .ax-chip {
  flex: 0 0 auto; max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--ow-champagne) 45%, transparent);
  border-radius: 999px; background: rgba(255, 255, 255, 0.04);
}
.lp .ax-hero .ax-chip > summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; cursor: pointer; list-style: none;
  color: #fff; font-size: 0.92rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.lp .ax-hero .ax-chip > summary::-webkit-details-marker { display: none; }
.lp .ax-hero .ax-chip > summary:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; border-radius: 999px; }
.lp .ax-hero .ax-chip > summary .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne); }
.lp .ax-hero .ax-chip .ax-chip-toggle { font-size: 18px; transition: transform var(--own-dur-base) var(--own-ease); }
.lp .ax-hero .ax-chip[open] { flex-basis: 100%; border-radius: 16px; background: rgba(255, 255, 255, 0.06); }
.lp .ax-hero .ax-chip[open] .ax-chip-toggle { transform: rotate(180deg); }
.lp .ax-hero .ax-chip-copy { padding: 0 16px 14px; }
.lp .ax-hero .ax-chip-copy p { margin: 0 0 8px; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; line-height: 1.55; }
.lp .ax-hero .ax-chip-copy p:last-child { margin-bottom: 0; }
.lp .ax-hero .ax-chip-copy p b { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .lp .ax-hero .ax-chip .ax-chip-toggle { transition: none; }
}
.lp .ax-hero--readable .ax-pre-copy p,
.lp .ax-hero--readable .ax-pre-copy a { font-size: 1rem; }

/* Ordnung & Vorsorge reads larger: readers over 65 are its audience. The sentence at 19px, the
   small print and the trust links lifted to 15px and a brighter white on the ink. */
.lp .ax-hero--readable .lede { font-size: 1.1875rem; }
.lp .ax-hero--readable .ax-start .ps-start-fine,
.lp .ax-hero--readable .ax-alt-fine,
.lp .ax-hero--readable .ow-trust-link,
.lp .ax-hero--readable .cs-d { font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); }

/* "Lass dir helfen" — under the hero of every edition page, before the registration. */
.lp .lp-help { background: var(--ow-paper); padding: 40px 0 8px; }
.lp .lp-help-card { display: flex; gap: 18px; align-items: flex-start; max-width: 880px; padding: 24px 28px; border: 1px solid var(--ow-line); border-radius: 18px; background: var(--ow-cream); }
.lp .lp-help-ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: white; border: 1px solid var(--ow-line); color: var(--ow-champagne-deep); }
.lp .lp-help-title { margin: 0 0 8px; font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-help-card p { margin: 0 0 6px; font-size: 1.06rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-help-card p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .lp .lp-help-card { flex-direction: column; gap: 12px; padding: 20px; }
}

/* The Schadensfall view's sample theft list (Home.razor, under the Reports fold): a folded row that
   opens the full table — item, identifying details, bought, price, evidence — with how OWNAMIC fills
   it from the visitor's photos. Wide tables scroll inside their card on a phone. */
.lp .lp-muster-sec { background: var(--ow-paper); padding-top: 0; }
.lp .lp-muster { border: 1px solid var(--ow-line); border-radius: 18px; background: var(--ow-cream); }
.lp .lp-muster summary { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ow-ink); }
.lp .lp-muster summary::-webkit-details-marker { display: none; }
.lp .lp-muster summary .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp .lp-muster .lp-muster-chev { margin-left: auto; transition: transform var(--own-dur-fast) var(--own-ease); }
.lp .lp-muster[open] .lp-muster-chev { transform: rotate(180deg); }
.lp .lp-muster-lede { margin: 0 22px 14px; color: var(--own-fg-2); }
.lp .lp-muster-scroll { margin: 0 22px; overflow-x: auto; border: 1px solid var(--ow-line); border-radius: 14px; background: var(--ow-paper); }
.lp .lp-muster-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; color: var(--own-fg-1); }
.lp .lp-muster-table caption { caption-side: top; text-align: left; padding: 14px 16px 6px; font-family: var(--ow-serif); font-size: 1.15rem; color: var(--ow-ink); }
.lp .lp-muster-table th,
.lp .lp-muster-table td { padding: 10px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--ow-line); }
.lp .lp-muster-table thead th { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--own-fg-2); }
.lp .lp-muster-table tbody th { font-weight: 600; color: var(--ow-ink); }
.lp .lp-muster-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp .lp-muster-table tfoot th,
.lp .lp-muster-table tfoot td { font-weight: 700; color: var(--ow-ink); }
.lp .lp-muster-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 18px 22px 0; }
.lp .lp-muster-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0; max-width: 620px; color: var(--own-fg-1); }
.lp .lp-muster-hint .material-symbols-outlined { color: var(--ow-gold-ink); }
.lp .lp-muster-fine { margin: 14px 22px 20px; font-size: 0.8rem; color: var(--own-fg-2); }
/* The Nachlass view's sample estate inventory (NachlassMuster), right under the deadlines on the
   same paper ground (whose bottom padding is the gap): the template download stands outside the
   sample, and the table's assets and liabilities are headed by a group row. */
.lp .lp-nl-muster-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.lp .lp-nl-muster-actions .lp-btn .material-symbols-outlined { font-size: 20px; }
.lp .lp-nl-muster-format { font-size: 0.85rem; color: var(--own-fg-2); }
.lp .lp-muster-table .lp-muster-group th {
  padding-top: 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ow-gold-ink); background: var(--ow-cream);
}

/* The Fristen-Rechner of the Nachlass view (NachlassFristenRechner): the day the heir learned of it
   on the left, the three deadlines on the right, earliest first — each with its last day, the days
   left, what it asks and its paragraph. A deadline within a week is marked gold, a past one fades. */
.lp .lp-fristen { background: var(--ow-paper); }
.lp .lp-fristen-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.lp .lp-fristen-form { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--ow-line); border-radius: 18px; background: var(--ow-cream); }
.lp .lp-fristen-field { display: flex; flex-direction: column; gap: 6px; }
.lp .lp-fristen-label { font-size: 0.92rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-fristen-hint { font-size: 0.82rem; line-height: 1.45; color: var(--own-fg-2); }
.lp .lp-fristen-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; color: var(--own-fg-1); cursor: pointer; }
.lp .lp-fristen-check input { margin-top: 3px; accent-color: var(--ow-ink); }
.lp .lp-fristen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp .lp-frist { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 18px 20px; border: 1px solid var(--ow-line); border-radius: 16px; background: var(--ow-paper); }
.lp .lp-frist-date { display: flex; flex-direction: column; gap: 4px; }
.lp .lp-frist-day { font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.lp .lp-frist-left { font-size: 0.82rem; font-weight: 700; color: var(--own-fg-2); }
.lp .lp-frist.is-near { border-color: var(--ow-champagne); }
.lp .lp-frist.is-near .lp-frist-left { color: var(--ow-gold-ink); }
.lp .lp-frist.is-past { opacity: 0.6; }
.lp .lp-frist-weekend { font-size: 0.78rem; line-height: 1.4; color: var(--ow-gold-ink); }
/* The tenancy without a day of its own (§ 564 BGB): dashed, the date column only says so. */
.lp .lp-frist.is-undated { border-style: dashed; background: transparent; }
.lp .lp-frist-copy { display: flex; flex-direction: column; gap: 4px; color: var(--own-fg-2); font-size: 0.95rem; line-height: 1.5; }
.lp .lp-frist-copy strong { color: var(--ow-ink); font-size: 1.05rem; }
.lp .lp-frist-law { font-size: 0.8rem; font-weight: 600; color: var(--ow-gold-ink); }
.lp .lp-fristen-note { margin: 22px 0 0; max-width: 880px; font-size: 0.85rem; line-height: 1.55; color: var(--own-fg-2); }
@media (max-width: 760px) {
  .lp .lp-fristen-grid { grid-template-columns: minmax(0, 1fr); }
  .lp .lp-frist { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* The Fristen-Rechner as the Nachlass hero's action (NachlassFristenRechner Kompakt, October 2026): a
   cream card on the ink hero — the question, one date, then the last day to disclaim with the days
   left, the way into the overview and the way down to all deadlines. */
.lp .ax-hero .ax-start--frist { margin-top: 26px; max-width: 500px; }
.lp .ax-frist {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 18px;
  background: color-mix(in srgb, var(--ow-paper) 80%, var(--ow-cream)); color: var(--ow-ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.lp .ax-frist-form { display: flex; flex-direction: column; gap: 10px; }
.lp .ax-frist-field { display: flex; flex-direction: column; gap: 6px; }
.lp .ax-frist-label { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--ow-ink); }
.lp .ax-frist-check { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; line-height: 1.4; color: var(--own-fg-2); cursor: pointer; }
.lp .ax-frist-check input { accent-color: var(--ow-ink); }
.lp .ax-frist-hint { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--own-fg-2); }
.lp .ax-frist-help { font-size: 0.82rem; line-height: 1.4; color: var(--own-fg-2); }
.lp .ax-frist-hint.is-error { color: var(--ow-negative); }
.lp .ax-frist-result {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 2px 14px;
  padding: 12px 14px; border-radius: 12px; background: white; border: 1px solid var(--ow-line);
}
.lp .ax-frist-result .k { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-gold-ink); }
.lp .ax-frist-result b { font-family: var(--ow-serif); font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums; }
.lp .ax-frist-result .left { font-size: 0.9rem; font-weight: 700; color: var(--own-fg-2); }
.lp .ax-frist-result.is-near { border-color: var(--ow-champagne); }
.lp .ax-frist-result.is-near .left { color: var(--ow-gold-ink); }
.lp .ax-frist-result .left.is-today { padding: 2px 8px; border-radius: 999px; background: var(--ow-champagne); color: var(--ow-ink); }
/* Under the date: a weekend end, then what happens afterwards — small, across the whole box. */
.lp .ax-frist-weekend, .lp .ax-frist-then, .lp .ax-frist-past { grid-column: 1 / -1; margin: 6px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--own-fg-2); }
.lp .ax-frist-weekend { color: var(--ow-gold-ink); font-weight: 600; }
.lp .ax-frist-past { margin-top: 4px; font-size: 0.92rem; color: var(--ow-ink); }
.lp .ax-frist-keep { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--own-fg-2); }
.lp .ax-frist-keep .material-symbols-outlined { flex: none; margin-top: 1px; font-size: 17px; color: var(--ow-gold-ink); }
.lp .ax-frist-law { margin: -2px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--own-fg-2); }
/* Ink on the cream card (the hero's champagne would vanish into it), the icon in champagne. */
.lp .ax-hero .ax-frist .ax-cta {
  justify-content: center; min-height: 48px; padding: 11px 22px; border-radius: 999px; font-size: 15.5px; font-weight: 700;
  background: var(--ow-ink); color: #fff;
}
.lp .ax-hero .ax-frist .ax-cta:hover { background: var(--ow-ink-2); }
.lp .ax-hero .ax-frist .ax-cta .material-symbols-outlined { font-size: 20px; color: var(--ow-champagne); }
.lp .ax-frist-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 0.9rem; font-weight: 600; color: var(--ow-gold-ink); text-decoration: none; }
.lp .ax-frist-more .material-symbols-outlined { font-size: 17px; }
.lp .ax-frist-more:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .lp .ax-hero .ax-start--frist { margin-top: 20px; max-width: none; }
  .lp .ax-frist { padding: 16px; }
  .lp .ax-frist-result b { font-size: 1.6rem; }
}

/* "Gemeinsam anpacken" — the Elternhaus view's two ways of working together, the three piles and
   the documentation notice, open. */
.lp .lp-together { background: var(--ow-paper); }
.lp .lp-together-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lp .lp-together-card { padding: 26px 28px; border: 1px solid var(--ow-line); border-radius: 18px; background: var(--ow-cream); }
.lp .lp-together-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: white; border: 1px solid var(--ow-line); color: var(--ow-ed-accent, var(--ow-champagne-deep)); }
.lp .lp-together-card h3 { margin: 0 0 8px; font-family: var(--ow-serif); font-size: 1.35rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-together-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-together-trust { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px !important; font-size: 0.92rem !important; color: var(--ow-ink) !important; }
.lp .lp-together-trust .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); margin-top: 2px; }
.lp .lp-together-decide { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 24px; }
.lp .lp-together-decide-k { margin-right: 6px; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--own-fg-2); }
.lp .lp-together-pile { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ow-line); border-radius: 999px; background: white; font-size: 0.95rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-together-pile .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); }
@media (max-width: 760px) {
  .lp .lp-together-grid { grid-template-columns: 1fr; }
}

/* The one button (HeroStart): the free scan in champagne — or the registration where the scan is
   not offered — with "Ein Foto, kostenlos und ohne Registrierung" under it. It catches a sheen once
   per round of the preview (.nudge, set by chapterStage.js), as the phone's start bar does. */
.lp .ax-hero .ax-start { margin-top: 32px; }
.lp .ax-hero .ax-start .ps-start { gap: 10px; }
.lp .ax-hero .ax-start .lp-btn {
  position: relative; overflow: hidden; min-height: 48px; padding: 11px 24px;
  border-radius: 999px; font-size: 15.5px; font-weight: 700; line-height: 1.25;
}
.lp .ax-hero .ax-start .lp-btn .material-symbols-outlined { font-size: 20px; }
.lp .ax-hero .ax-start .ps-start-fine { margin-left: 6px; font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.lp .ax-hero .ax-cta { background: var(--ow-champagne); color: var(--ow-ink); box-shadow: none; }
.lp .ax-hero .ax-cta:hover { background: var(--ow-champagne-light); box-shadow: none; }
.lp .ax-hero .ax-start .lp-btn::after,
.lp .lp-start-bar--stage .lp-start-bar-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
.lp .ax-hero .ax-start .lp-btn.nudge::after,
.lp .lp-start-bar--stage .lp-start-bar-btn.nudge::after { animation: lpStartSheen 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.lp .ax-hero .ax-start .lp-btn.nudge .material-symbols-outlined,
.lp .lp-start-bar--stage .lp-start-bar-btn.nudge .material-symbols-outlined { animation: lpCsSpark 1.1s ease-in-out; }

/* Under the button (HeroAlt): the registration as a quiet link — "oder gleich den ganzen Raum
   filmen →" — and the trial with what follows it in one line. */
.lp .ax-hero .ax-alt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 22px; padding-left: 6px; }
.lp .ax-hero .ax-alt-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #fff; text-decoration: none;
}
.lp .ax-hero .ax-alt-link .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne); transition: transform 0.15s ease; }
.lp .ax-hero .ax-alt-link:hover { color: var(--ow-champagne); }
.lp .ax-hero .ax-alt-link:hover .material-symbols-outlined { transform: translateX(3px); }
.lp .ax-hero .ax-alt-link:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 3px; border-radius: 4px; }
.lp .ax-hero .ax-alt-fine { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }

/* The trust links under a hairline (HeroTrust): the page's first doubt, data protection, the prices
   — short words in one row on a desktop, a list of rows with chevrons on a phone. */
.lp .ax-hero .ax-trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.lp .ax-hero .ow-trust-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, 0.82); text-decoration: none;
}
.lp .ax-hero .ow-trust-link .material-symbols-outlined { flex: none; font-size: 18px; color: var(--ow-champagne); }
.lp .ax-hero .ow-trust-link .go { display: none; }
.lp .ax-hero a.ow-trust-link:hover { color: #fff; }
.lp .ax-hero a.ow-trust-link:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 3px; border-radius: 4px; }

/* The partner pages' hero (PartnerHero.razor) is this hero too; their nav carries five section links,
   the language and the talk button, and wraps to a second row, so the hero starts lower. */
.lp .ax-hero.pp-hero { padding-top: 140px; }
@media (max-width: 600px) { .lp .ax-hero.pp-hero { padding-top: 116px; } }

/* A page without a film lists its steps beside the copy, in the steps' own look (.lp-cs below). */
.lp .ax-hero .ax-steplist { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.lp .ax-hero .ax-steplist li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04);
}
.lp .ax-hero .ax-steplist .nr {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ow-champagne); color: var(--ow-ink); font: 700 13.5px/1 var(--own-font-sans);
}
.lp .ax-hero .ax-steplist .tx b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.lp .ax-hero .ax-steplist .tx span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.62); text-wrap: pretty; }

/* The phone's start bar of a stage page: the hero's button, sticky at the foot once the hero's own
   has scrolled away. Ink plate, champagne button. Hidden where the hero keeps its button in reach. */
.lp .lp-start-bar.lp-start-bar--stage {
  display: none; border-top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ow-ink) 0%, transparent), var(--ow-ink) 28%);
}
.lp .lp-start-bar--stage .lp-start-bar-btn { position: relative; overflow: hidden; background: var(--ow-champagne); color: var(--ow-ink); box-shadow: none; }
.lp .lp-start-bar--stage .lp-start-bar-btn:hover { background: var(--ow-champagne-light); }
.lp .lp-start-bar--stage .lp-start-bar-fine { color: rgba(255, 255, 255, 0.66); }

@media (max-width: 960px) {
  /* One column in the order a phone reads it: the copy dissolves (display: contents), and the
     preview with its steps takes its place between the button and the registration link. */
  .lp .ax-hero-inner { display: flex; flex-direction: column; align-items: stretch; }
  .lp .ax-hero .ax-copy { display: contents; }
  .lp .ax-hero .ax-who { order: 1; }
  .lp .ax-hero .ax-h1 { order: 2; }
  .lp .ax-hero .ax-lede,
  .lp .ax-hero .ax-pre { order: 3; max-width: none; }
  .lp .ax-hero .ax-start { order: 4; }
  .lp .ax-hero-inner > .lp-cs,
  .lp .ax-hero-inner > .ax-stage-col,
  .lp .ax-hero-inner > .ax-steplist { order: 5; width: 100%; max-width: 560px; margin-top: 28px; }
  .lp .ax-hero .ax-alt { order: 6; }
  .lp .ax-hero .ax-trust { order: 7; }
}
@media (max-width: 600px) {
  .lp .ax-hero { padding-bottom: 36px; }
  .lp .ax-hero .who { font-size: 11px; letter-spacing: .15em; }
  .lp .ax-hero .who .ico { width: 30px; height: 30px; }
  .lp .ax-hero .who .ico .material-symbols-outlined { font-size: 17px; }
  /* A long German word ("Briefmarkensammlung:") breaks rather than running past the edge. */
  .lp .ax-hero h1 { margin-top: 16px; font-size: 2.5rem; line-height: 1.06; hyphens: auto; overflow-wrap: break-word; }
  .lp .ax-hero .lede { margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; }
  .lp .ax-hero .ax-pre { margin-top: 14px; }
  .lp .ax-hero .ax-start { margin-top: 22px; }
  .lp .ax-hero .ax-start .ps-start { align-items: stretch; gap: 9px; }
  .lp .ax-hero .ax-start .lp-btn { width: 100%; justify-content: center; text-align: center; min-height: 54px; padding: 10px 20px; font-size: 16px; }
  .lp .ax-hero .ax-start .lp-btn .material-symbols-outlined { flex: none; font-size: 21px; }
  .lp .ax-hero .ax-start .ps-start-fine { margin-left: 0; text-align: center; }
  .lp .ax-hero .ax-alt { align-items: center; margin-top: 26px; padding-left: 0; text-align: center; }
  .lp .ax-hero .ax-alt-link { min-height: 44px; }
  .lp .ax-hero .ax-alt-fine { font-size: 13px; text-wrap: balance; }
  .lp .ax-hero .ax-trust { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 24px; padding-top: 8px; }
  .lp .ax-hero .ax-trust li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .lp .ax-hero .ow-trust-link { display: flex; gap: 12px; min-height: 48px; font-size: 14.5px; color: rgba(255, 255, 255, 0.86); }
  .lp .ax-hero .ow-trust-link .material-symbols-outlined { font-size: 20px; }
  .lp .ax-hero .ow-trust-link .go { display: inline-block; margin-left: auto; font-size: 18px; color: rgba(255, 255, 255, 0.4); }
  .lp .ax-hero .ax-steplist li { padding: 12px 12px; gap: 12px; }
  /* The deadline keeps its line on a phone: it is the one thing the Nachlass page must not hide.
     The Geerbt chips sit a little tighter, three to a row where they fit. */
  .lp .ax-hero .ax-pre-card > summary { grid-template-columns: 20px minmax(0, 1fr) 32px; gap: 10px; padding: 10px 10px 10px 14px; }
  .lp .ax-hero .ax-pre-ico { font-size: 20px; }
  .lp .ax-hero .ax-pre-sum { font-size: 1rem; }
  .lp .ax-hero .ax-pre-copy { padding: 0 14px 14px 44px; }
  .lp .ax-hero .ax-pre-copy p { font-size: .95rem; }
  .lp .ax-hero .ax-pre-answer { font-size: 1.02rem; margin-bottom: 12px; }
  .lp .ax-hero .ax-chips { gap: 6px; }
  .lp .ax-hero .ax-chip > summary { gap: 4px; padding: 6px 9px 6px 8px; font-size: 0.86rem; }
  .lp .ax-hero .ax-chip > summary .material-symbols-outlined { font-size: 16px; }
  .lp .lp-start-bar.lp-start-bar--stage { display: block; }
}
/* The start bars stay away while the hero's own button is on screen (data-bar-away, set by
   bottomBarClearance.js): they slide out at the foot and come back once it has scrolled away. */
.lp .lp-start-bar { transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s; }
.lp .lp-start-bar[data-bar-away] {
  transform: translateY(calc(100% + 16px)); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .lp .ax-hero .ax-start .lp-btn.nudge::after,
  .lp .ax-hero .ax-start .lp-btn.nudge .material-symbols-outlined,
  .lp .lp-start-bar--stage .lp-start-bar-btn.nudge::after,
  .lp .lp-start-bar--stage .lp-start-bar-btn.nudge .material-symbols-outlined { animation: none; }
  .lp .lp-start-bar,
  .lp .lp-start-bar[data-bar-away] { transition: none; }
}
@keyframes lpCsSpark { 0%, 100% { transform: none; } 35% { transform: rotate(-12deg) scale(1.12); } 70% { transform: none; } }

/* ── LIVE PREVIEW (.lp-cs): the card and the steps under it ── Design "Hero neu geordnet": the card's
   head says "● Live-Vorschau" and counts the step the film is at ("Schritt 1 / 3", chapterStage.js),
   the pause button beside it; under the card the page's steps as a list — number, title, one
   sentence. The step the film is at is lit (champagne number, a warm tint, white title) and runs a
   faint line along its foot with the chapter; a click jumps to it. */
.lp-cs { display: flex; flex-direction: column; min-width: 0; }
/* The scenes' long and short labels (.cs-l / .cs-s): the long ones, the short ones on a phone. */
.lp-cs .cs-s { display: none; }
.lp-cs .lp-sx { height: 460px; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.lp-cs .hs-live { gap: 7px; font-size: 10.5px; letter-spacing: 0.16em; color: var(--ow-gold-ink); }
.lp-cs .hs-live i { background: var(--ow-champagne); }
.lp-cs .hs-count { margin: 0 12px 0 auto; font-size: 12.5px; white-space: nowrap; color: var(--hs-mute-2); font-variant-numeric: tabular-nums; }
.lp-cs .cs-tabs { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.lp-cs .cs-tab {
  position: relative; overflow: hidden; cursor: pointer; margin: 0; width: 100%;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px 14px; border: 0; border-radius: 14px; background: transparent; text-align: left;
  font: inherit; color: inherit; transition: background 0.2s;
}
.lp-cs .cs-tab:hover { background: rgba(255, 255, 255, 0.04); }
.lp-cs .cs-tab:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
.lp-cs .cs-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--ow-champagne) 55%, transparent); color: var(--ow-champagne);
  font: 700 13.5px/1 var(--own-font-sans); transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lp-cs .cs-tab .nm { min-width: 0; }
.lp-cs .cs-t { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, 0.86); }
.lp-cs .cs-d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); text-wrap: pretty; }
.lp-cs .cs-tab[aria-selected="true"] { background: color-mix(in srgb, var(--ow-champagne) 10%, transparent); }
.lp-cs .cs-tab[aria-selected="true"] .cs-num { background: var(--ow-champagne); border-color: var(--ow-champagne); color: var(--ow-ink); }
.lp-cs .cs-tab[aria-selected="true"] .cs-t { color: #fff; }
.lp-cs .cs-tab .pg { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: color-mix(in srgb, var(--ow-champagne) 55%, transparent); opacity: 0; }
.lp-cs .cs-tab[aria-selected="true"] .pg { opacity: 1; }

/* ── LIVE PREVIEW: THE CARD (.lp-sx) ── The start page's preview card (.lp-hs: header, pause,
   body, paused state) carrying chapters instead of scenes: four layers on top of each other
   (.sx-c1–3 and the closing .sx-end), one shown per chapter class (cs-k1–3, cs-pay). The cue
   classes chapterStage.js sets step each layer through its film; .on-r lines rise into place.
   The edition's undertone (--ow-ed-accent, from .ed-{key} on .lp-cs) colours text, icons and the
   cream grounds; every filled mark — switch, badge, bar, confirmed button — is ink or champagne. */
.lp-sx .hs-body { margin: 0 14px 14px; }
.lp-sx .sx-l { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.lp-sx.cs-k1 .sx-c1, .lp-sx.cs-k2 .sx-c2, .lp-sx.cs-k3 .sx-c3, .lp-sx.cs-k4 .sx-c4, .lp-sx.cs-pay .sx-end { opacity: 1; transform: none; }
.lp-sx.cs-pay .sx-c3, .lp-sx.cs-pay .sx-c4 { opacity: 0; }
.lp-sx .e-l span:nth-child(4) { transition-delay: 0.36s; }

/* Haushaltsbuch campaign (ChapterStageHaushaltsbuch): four chapters, each a scene of the Finanzen
   start guide in the guide's own 16 : 10 card (.hb-fr is its size container, so the scene scales as
   it does there). A chapter with two scenes keeps both in one spot (.hb-st) and passes from the
   first to the second on its cue (cs-hb1b, cs-hb4b). The scenes are played by js/startGuide.js. */
.lp-sx .sx-l.hb-l { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 0; }
.lp-sx .hb-st { position: relative; width: min(100%, 620px); aspect-ratio: 16 / 10; margin: 0 auto; }
.lp-sx .hb-fr {
  position: absolute; inset: 0; overflow: hidden; container-type: inline-size; border-radius: 16px;
  background: color-mix(in srgb, var(--ow-paper) 80%, var(--ow-cream)); border: 1px solid var(--hs-hair);
  transition: opacity 0.35s ease;
}
.lp-sx .hb-fr.hb-b { opacity: 0; }
.lp-sx.cs-hb1b .sx-c1 .hb-a, .lp-sx.cs-hb4b .sx-c4 .hb-a { opacity: 0; }
.lp-sx.cs-hb1b .sx-c1 .hb-b, .lp-sx.cs-hb4b .sx-c4 .hb-b { opacity: 1; }
@media (max-width: 600px) {
  .lp-sx .hb-fr { border-radius: 12px; }
}
.lp-sx .on-r { opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; }
.lp-sx .ov-k {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-ed-accent);
}
/* OWNY at work: the mark spins while it looks, the line turns into what it found. */
.lp-sx .m-o { display: flex; align-items: center; gap: 8px; height: 22px; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--hs-mute); }
.lp-sx .m-o img { flex: none; width: 22px; height: 22px; animation: lpHsSpin 2.6s linear infinite; }
.lp-sx .m-o .t2 { display: none; color: var(--ow-ink); font-weight: 600; }
.lp-sx.cs-mv .m-o .t1, .lp-sx.cs-bo .m-o .t1 { display: none; }
.lp-sx.cs-mv .m-o .t2, .lp-sx.cs-bo .m-o .t2 { display: inline; }
.lp-sx.cs-mv .m-o img, .lp-sx.cs-bo .m-o img { animation: none; }
/* A finger on the screen: appears, presses, fades. */
.lp-sx .cs-tap {
  position: absolute; left: 64%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4); border: 2px solid rgba(255, 255, 255, 0.92);
  opacity: 0; transform: scale(1.5); pointer-events: none;
}
/* A photo that fills its frame (the frame is a size container, see .hs-mw). */
.lp-sx .cs-ph { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; background: #d9cfbd; container-type: size; }

/* Closing card */
.lp-sx .sx-end { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: var(--hs-card); }
.lp-sx .e-k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-ed-accent); }
.lp-sx .e-h { margin-top: 10px; font-family: var(--ow-serif); font-size: 34px; font-weight: 500; line-height: 1.08; text-wrap: balance; }
.lp-sx .e-h em { color: var(--ow-gold-ink); }
.lp-sx .e-l { display: grid; gap: 10px; margin-top: 20px; }
.lp-sx .e-l span { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.lp-sx .e-l .material-symbols-outlined {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ow-champagne); color: var(--ow-ink); font-size: 15px; vertical-align: 0;
}
.lp-sx .e-l span:nth-child(2) { transition-delay: 0.12s; }
.lp-sx .e-l span:nth-child(3) { transition-delay: 0.24s; }
.lp-sx.cs-pay .e-l span { opacity: 1; transform: none; }
.lp-sx .e-c { margin-top: 22px; font-size: 13.5px; color: var(--hs-mute); }
.lp-sx .e-c b { color: var(--ow-ink); }

/* The registration form over the card once the film has played (ChapterStage EndContent,
   chapterStage.js sets .cs-ended). The closing card shows faintly through a cream veil; the slim form
   keeps its own colours (ink "Weiter", Google's white button). Until then it is invisible and inert.
   Anywhere on the veil but the form plays the film again, hence the pointer. */
.lp-sx .cs-end {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: 24px 28px; cursor: pointer;
  background: color-mix(in srgb, var(--hs-card) 90%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  visibility: hidden; opacity: 0; transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.lp-sx.cs-ended .cs-end { visibility: visible; opacity: 1; transition: opacity 0.4s ease; }
.lp-sx .cs-end-in { width: 100%; max-width: 440px; }
.lp-sx .cs-end-h { margin: 0; font-family: var(--ow-serif); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--ow-ink); text-wrap: balance; }
.lp-sx .cs-end-sub { margin: 8px 0 18px; font-size: 13.5px; line-height: 1.4; color: var(--hs-mute); }
.lp-sx .cs-end .kr { max-width: none; cursor: auto; }
.lp-sx .cs-end .kr .kr-input { background: #fff; }
/* The way down to the start guide („Wie starten?“), whose step 1 carries the registration form. */
.lp-sx .cs-end .cs-end-jump { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.lp-sx .cs-end .cs-end-jump .material-symbols-outlined { font-size: 18px; }
.lp-sx .cs-replay {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0 -10px; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 13.5px/1 var(--own-font-sans); color: var(--hs-mute);
}
.lp-sx .cs-replay:hover { color: var(--ow-ink); }
.lp-sx .cs-replay:focus-visible { outline: 2px solid var(--ow-gold-ink); outline-offset: 2px; }
@media (max-width: 600px) {
  /* 360px of card: the form's two 48px rows, the legal line and the button still fit. */
  .lp-sx .cs-end { padding: 14px 16px; }
  .lp-sx .cs-end-h { font-size: 23px; }
  .lp-sx .cs-end-sub { margin: 4px 0 12px; font-size: 12.5px; }
  .lp-sx .cs-end .kr .kr-btn { padding: 10px 16px; }
  .lp-sx .cs-replay { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-sx .cs-end, .lp-sx.cs-ended .cs-end { transition: none; }
}

/* Sammlung 1 · Provenienz & Zustand: the coin turns, the series grows, the provenance fills in. */
.lp-sx .sx-c1 { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-content: start; padding-top: 2px; }
.lp-sx .p-left { grid-row: 1 / 3; }
.lp-sx .p-pv { grid-column: 2; }
.lp-sx .p-ph { position: relative; width: 200px; height: 200px; border-radius: 14px; overflow: hidden; background: #2a7de0; perspective: 900px; }
.lp-sx .p-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-sx .p-ph img.b { transform: rotateY(180deg); }
.lp-sx.cs-p2 .p-ph img.f { transform: rotateY(-180deg); }
.lp-sx.cs-p2 .p-ph img.b { transform: none; }
.lp-sx .p-lb {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--ow-ink) 66%, transparent); color: #fff; font-size: 12px; font-weight: 600;
}
.lp-sx .p-lb .b, .lp-sx.cs-p2 .p-lb .f { display: none; }
.lp-sx.cs-p2 .p-lb .b { display: inline; }
.lp-sx .p-th { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.lp-sx .p-t { display: grid; gap: 5px; font-size: 11.5px; color: var(--hs-mute-2); text-align: center; transition: opacity 0.35s, transform 0.35s; }
.lp-sx .p-t i { display: block; height: 56px; border-radius: 9px; overflow: hidden; background: var(--ow-cream-deep); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.3s; }
.lp-sx .p-t i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-sx .p-t:nth-child(1) i { outline-color: var(--ow-champagne); }
.lp-sx.cs-p2 .p-t:nth-child(1) i { outline-color: transparent; }
.lp-sx.cs-p2 .p-t:nth-child(2) i { outline-color: var(--ow-champagne); }
.lp-sx .p-t:nth-child(2), .lp-sx .p-t.add { opacity: 0; transform: scale(0.92); }
.lp-sx.cs-p2 .p-t:nth-child(2), .lp-sx.cs-p3 .p-t.add { opacity: 1; transform: none; }
.lp-sx .p-t.add i { display: grid; place-items: center; background: none; border: 1.5px dashed color-mix(in srgb, var(--ow-ink) 25%, transparent); color: var(--hs-faint); font-size: 20px; }
.lp-sx .p-tt { font-family: var(--ow-serif); font-size: 25px; font-weight: 600; line-height: 1.05; }
.lp-sx .p-sub { margin-top: 4px; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .p-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-sx .p-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: var(--ow-ed-accent-soft); color: #3d3a33; font-size: 12px; font-weight: 600;
}
.lp-sx .p-chip .material-symbols-outlined { color: var(--ow-ed-accent); font-size: 15px; }
.lp-sx .p-chip + .p-chip { transition-delay: 0.15s; }
.lp-sx.cs-pz .p-chip { opacity: 1; transform: none; }
.lp-sx .p-hl { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-ed-accent); }
.lp-sx .p-tl { position: relative; margin-top: 6px; padding-left: 18px; }
.lp-sx .p-tl::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 14px; width: 1.5px; background: color-mix(in srgb, var(--ow-ink) 12%, transparent); }
.lp-sx .p-e { position: relative; padding: 5px 0 6px; }
.lp-sx .p-e::before {
  content: ""; position: absolute; left: -18px; top: 10px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--hs-card); border: 1.5px solid color-mix(in srgb, var(--ow-ink) 32%, transparent);
}
.lp-sx .p-e.now::before { background: var(--ow-champagne-deep); border-color: var(--ow-champagne-deep); }
.lp-sx .p-e b { display: block; font-size: 13.5px; font-weight: 600; }
.lp-sx .p-e span { display: block; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx.cs-ph1 .p-e:nth-child(1), .lp-sx.cs-ph2 .p-e:nth-child(2), .lp-sx.cs-ph3 .p-e:nth-child(3) { opacity: 1; transform: none; }

/* Sammlung 2 · Marktbeobachtung: offers as dots, the band of the plausible ones, the span. */
.lp-sx .sx-c2 { display: flex; flex-direction: column; }
.lp-sx .m-hd { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.lp-sx .m-hd > div { min-width: 0; }
.lp-sx .m-hd img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lp-sx .m-k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-ed-accent); }
.lp-sx .m-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--ow-serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.lp-sx .m-ch { position: relative; height: 112px; margin-top: 14px; border-bottom: 1px solid color-mix(in srgb, var(--ow-ink) 16%, transparent); }
.lp-sx .m-bd {
  position: absolute; top: 0; bottom: 0; left: 32%; width: 32%;
  background: var(--ow-ed-accent-soft); border-left: 1.5px dashed var(--ow-champagne-deep); border-right: 1.5px dashed var(--ow-champagne-deep);
  opacity: 0; transform: scaleX(0.25); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-sx.cs-mbd .m-bd { opacity: 1; transform: none; }
.lp-sx .m-d { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ow-ink); opacity: 0; transform: scale(0.3); transition: opacity 0.25s ease, transform 0.3s ease; }
.lp-sx.cs-md .m-d { opacity: 1; transform: none; }
.lp-sx.cs-mbd .m-d.out { opacity: 0.22; transition-delay: 0s; }
.lp-sx.cs-mbd .m-d:not(.out) { background: var(--ow-champagne-deep); transition-delay: 0s; }
.lp-sx .m-ax { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: var(--hs-faint); }
.lp-sx .m-n { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.lp-sx .m-big { font-family: var(--ow-serif); font-size: 48px; font-weight: 600; line-height: 0.9; white-space: nowrap; font-variant-numeric: lining-nums; }
.lp-sx .m-cap { font-size: 12.5px; line-height: 1.35; color: var(--hs-mute-2); text-align: right; }
.lp-sx .m-cap b { color: var(--ow-ink); }
.lp-sx.cs-mv .m-n { opacity: 1; transform: none; }
.lp-sx .m-s { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: auto; padding: 11px 14px; border-radius: 12px; background: var(--ow-ed-accent-soft); }
.lp-sx .m-s span { font-size: 12.5px; color: var(--hs-mute); }
.lp-sx .m-s span b { display: block; font-size: 14px; color: var(--ow-ink); }
.lp-sx .m-s strong { font-family: var(--ow-serif); font-size: 22px; font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx.cs-ms .m-s { opacity: 1; transform: none; }

/* Sammlung 3 · Zeigen ohne Preisgabe: values off, invitation copied, what the guest sees. */
.lp-sx .sx-c3 { display: flex; flex-direction: column; }
.lp-sx .s-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-sx .s-hd b { white-space: nowrap; font-family: var(--ow-serif); font-size: 23px; font-weight: 600; }
.lp-sx .s-who { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ow-ed-accent-soft); font-size: 12px; font-weight: 600; }
.lp-sx .s-who .material-symbols-outlined { color: var(--ow-ed-accent); font-size: 15px; }
.lp-sx .s-tg { display: grid; margin-top: 8px; }
.lp-sx .s-r { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; border-top: 1px dashed color-mix(in srgb, var(--ow-ink) 12%, transparent); font-size: 13.5px; }
.lp-sx .s-r small { display: block; max-height: 0; opacity: 0; font-size: 12px; color: var(--hs-mute-2); transition: opacity 0.3s, max-height 0.3s; }
.lp-sx.cs-st .s-r small { max-height: 20px; opacity: 1; }
.lp-sx.cs-st .s-r.v { height: 46px; }
/* A switch that is on is ink, as everywhere in the app; off it is a light track. */
.lp-sx .s-sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--ow-ink); transition: background 0.3s; }
.lp-sx .s-sw::after { content: ""; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-sx.cs-st .s-r.v .s-sw { background: color-mix(in srgb, var(--ow-ink) 20%, transparent); }
.lp-sx.cs-st .s-r.v .s-sw::after { left: 3px; }
.lp-sx .s-r .cs-tap { left: auto; right: -6px; top: 50%; margin-top: -17px; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-st0 .s-r.v .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-st .s-r.v .cs-tap { opacity: 0; transform: scale(2); transition: opacity 0.45s, transform 0.45s; }
.lp-sx .s-lk { display: flex; align-items: center; gap: 8px; height: 36px; margin-top: 8px; padding: 0 6px 0 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ow-ink) 12%, transparent); font-size: 13px; }
.lp-sx .s-lk .material-symbols-outlined { color: var(--ow-ed-accent); }
.lp-sx .s-lk code { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12.5px/1 var(--own-font-sans); color: var(--ow-ink); background: none; padding: 0; }
.lp-sx .s-lk em { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 7px; background: var(--ow-champagne); color: var(--ow-ink); font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; }
.lp-sx .s-lk em .material-symbols-outlined { color: inherit; }
.lp-sx.cs-sl .s-lk { opacity: 1; transform: none; }
.lp-sx .s-pl { margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-mute); }
.lp-sx .s-gr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.lp-sx .s-ti { display: grid; gap: 3px; }
.lp-sx .s-ti i { display: block; height: 74px; border-radius: 9px; overflow: hidden; background: var(--ow-cream-deep); }
.lp-sx .s-ti i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-sx .s-ti b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; }
.lp-sx .s-ti span { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--hs-mute-2); }
.lp-sx .s-ti span .material-symbols-outlined { font-size: 13px; }
.lp-sx .s-ti:nth-child(2) { transition-delay: 0.12s; }
.lp-sx .s-ti:nth-child(3) { transition-delay: 0.24s; }
.lp-sx.cs-sv .s-ti, .lp-sx.cs-sv .s-pl { opacity: 1; transform: none; }
.lp-sx .s-rv { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ow-gold-ink); }
.lp-sx.cs-sr .s-rv { opacity: 1; transform: none; }

/* Sammlung, mineral example (ChapterStageMineral): the Sammlung layers 1 and 2 with a vanadinite on
   black. Its photo does not turn like a coin, it passes from the whole piece to its crystals. */
.lp-sx .p-ph.p-ph--dark { background: #0d0c0c; }
.lp-sx .p-ph--fade img { transition: opacity 0.8s ease; }
.lp-sx .p-ph--fade img.b { transform: none; opacity: 0; }
.lp-sx.cs-p2 .p-ph--fade img.f { transform: none; opacity: 0; }
.lp-sx.cs-p2 .p-ph--fade img.b { opacity: 1; }
/* Mineral 3 · Nach Fundland ordnen: the question in the chat, OWNY reading the localities, the
   collection counted by country (the vanadinite's Morocco lit), the Moroccan pieces gathered. */
.lp-sx .mx-c3 { gap: 0; }
.lp-sx .mx-ask {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; max-width: 92%;
  padding: 8px 13px; border-radius: 14px 14px 4px 14px; background: var(--ow-ink); color: #fff; font-size: 13.5px; font-weight: 500;
}
.lp-sx .mx-ask .material-symbols-outlined { font-size: 16px; color: var(--ow-champagne); }
.lp-sx.cs-o1 .mx-ask { opacity: 1; transform: none; }
.lp-sx .mx-c3 .mx-think { margin-top: 10px; opacity: 0; transition: opacity 0.3s ease; }
.lp-sx.cs-o2 .mx-c3 .mx-think { opacity: 1; }
.lp-sx .mx-c3 .mx-think .t1 { display: inline; }
.lp-sx .mx-c3 .mx-think .t2 { display: none; }
.lp-sx .mx-c3 .mx-think img { animation: lpHsSpin 2.6s linear infinite; }
.lp-sx.cs-o3 .mx-c3 .mx-think .t1 { display: none; }
.lp-sx.cs-o3 .mx-c3 .mx-think .t2 { display: inline; }
.lp-sx.cs-o3 .mx-c3 .mx-think img { animation: none; }
.lp-sx .mx-list { display: grid; gap: 2px; margin-top: 8px; }
.lp-sx .mx-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; align-items: center; gap: 10px;
  height: 27px; padding: 0 10px; border-radius: 8px; font-size: 13px; transition: opacity 0.35s ease, transform 0.35s ease, background 0.3s ease;
}
.lp-sx .mx-row .mx-c { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-sx .mx-row b { text-align: right; font-variant-numeric: tabular-nums; }
.lp-sx .mx-bar { display: block; height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 8%, transparent); }
.lp-sx .mx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ow-champagne); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-sx.cs-o3 .mx-row { opacity: 1; transform: none; }
.lp-sx.cs-o3 .mx-bar i { transform: none; }
.lp-sx .mx-row:nth-child(2), .lp-sx .mx-row:nth-child(2) .mx-bar i { transition-delay: 0.08s; }
.lp-sx .mx-row:nth-child(3), .lp-sx .mx-row:nth-child(3) .mx-bar i { transition-delay: 0.16s; }
.lp-sx .mx-row:nth-child(4), .lp-sx .mx-row:nth-child(4) .mx-bar i { transition-delay: 0.24s; }
.lp-sx .mx-row:nth-child(5), .lp-sx .mx-row:nth-child(5) .mx-bar i { transition-delay: 0.32s; }
.lp-sx.cs-o4 .mx-row.mx-own { background: var(--ow-ed-accent-soft); font-weight: 700; transition-delay: 0s; }
.lp-sx.cs-o4 .mx-row.mx-own b { color: var(--ow-gold-ink); }
.lp-sx .mx-col { margin-top: 12px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--ow-ink) 14%, transparent); }
.lp-sx.cs-o5 .mx-col { opacity: 1; transform: none; }
.lp-sx .mx-col-hd { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lp-sx .mx-col-hd > .material-symbols-outlined { flex: none; font-size: 19px; color: var(--ow-ed-accent); }
.lp-sx .mx-col-hd b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--ow-serif); font-size: 19px; font-weight: 600; }
.lp-sx .mx-col-by {
  display: inline-flex; flex: none; align-items: center; gap: 5px; margin-left: auto; height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--ow-ed-accent-soft); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.lp-sx .mx-col-by img { width: 15px; height: 15px; }
@media (max-width: 600px) {
  .lp-sx .mx-ask { padding: 6px 10px; font-size: 12.5px; }
  .lp-sx .mx-c3 .mx-think { margin-top: 6px; }
  .lp-sx .mx-list { gap: 0; margin-top: 4px; }
  .lp-sx .mx-row { grid-template-columns: minmax(0, 1fr) 64px 24px; gap: 8px; height: 22px; padding: 0 8px; font-size: 12px; }
  .lp-sx .mx-row:nth-child(5) { display: none; }
  .lp-sx .mx-col { margin-top: 6px; padding-top: 6px; }
  .lp-sx .mx-col-hd b { font-size: 16px; }
  .lp-sx .mx-col-by { height: 22px; padding: 0 7px; font-size: 10.5px; }
}

/* A film waiting for the visitor (chapterStage.js, poster): its first scene is put in place standing,
   without the movement, which plays once the visitor has scrolled to the card. */
.lp-sx.cs-still, .lp-sx.cs-still * { transition: none !important; animation: none !important; }

/* Finanzen 1 · Haushaltsbuch: a cash purchase lands in its budget. */
.lp-sx .sx-l.fx-c1 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
/* The Gesamtbild is the Finanzen film's first layer (FIN-03): none of .sx-c1's grid spacing. */
.lp-sx .sx-l.gx { gap: 0; padding-top: 0; }
/* Finanzen 1 · the receipt scan before the book: the start page's market receipt (.hs-rc) in the
   camera frame, with its viewfinder, shutter, flash and scan sweep (.lp-hs, step by step on the
   cs-r1–r4 cues instead of c-frame … c-det); at cs-r5 the frame fades and leaves the book. */
.lp-sx .fx-cam { position: absolute; inset: 0; z-index: 2; transition: opacity 0.4s ease, transform 0.4s ease; }
.lp-sx.cs-r5 .fx-cam { opacity: 0; transform: scale(0.97); }
.lp-sx.cs-r1 .fx-cam .hs-vf { opacity: 1; inset: 7%; }
.lp-sx.cs-r2 .fx-cam .hs-shut i { transform: scale(0.84); }
.lp-sx.cs-r2 .fx-cam .hs-flash { animation: lpHsFlash 0.5s ease-out; }
.lp-sx.cs-r3 .fx-cam .hs-vf, .lp-sx.cs-r3 .fx-cam .hs-hint, .lp-sx.cs-r3 .fx-cam .hs-shut { opacity: 0; }
.lp-sx.cs-r3 .fx-cam .hs-scan { animation: lpHsScan 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; }
.lp-sx.cs-r4 .fx-cam .hs-rc .hs-items p { box-shadow: 0 0 0 0.14em var(--ow-champagne); background: var(--ow-ed-accent-soft); }
.lp-sx.cs-r4 .fx-cam .hs-rc .hs-items em { opacity: 1; }
.lp-sx.cs-r4 .fx-cam .hs-rc .hs-items .hs-st { opacity: 1; transform: translate(0, -50%); }
.lp-sx .fx-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-sx .fx-live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lp-sx .fx-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ow-champagne-deep); animation: lpHsPulse 1.6s ease-in-out infinite; }
.lp-sx.cs-h3 .fx-live { opacity: 1; transform: none; }
.lp-sx .fx-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.lp-sx .fx-lb { font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .fx-free { font-family: var(--ow-serif); font-size: 46px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .fx-io { display: grid; gap: 3px; text-align: right; font-size: 12.5px; color: var(--hs-mute-2); white-space: nowrap; }
.lp-sx .fx-io b { color: var(--ow-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-sx.cs-h1 .fx-io { opacity: 1; transform: none; }
.lp-sx .fx-new {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  height: 0; margin-top: 0; padding: 0 12px; border-radius: 12px; overflow: hidden; opacity: 0;
  background: var(--ow-ed-accent-soft); transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin 0.5s, opacity 0.4s;
}
.lp-sx.cs-h2 .fx-new { height: 58px; margin-top: 14px; opacity: 1; }
.lp-sx .fx-new .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ow-paper); color: var(--ow-ed-accent); font-size: 19px; }
.lp-sx .fx-new .tt { min-width: 0; }
.lp-sx .fx-new .tt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; font-weight: 600; }
.lp-sx .fx-new .tt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .fx-new .v { font-family: var(--ow-serif); font-size: 20px; font-weight: 600; white-space: nowrap; }
.lp-sx .fx-bl { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-mute); }
.lp-sx .fx-bs { display: grid; gap: 10px; margin-top: 8px; }
.lp-sx .fx-b .lb { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; white-space: nowrap; font-size: 13px; color: var(--hs-mute); }
.lp-sx .fx-b .lb b { color: var(--ow-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-sx .fx-b .tr { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 7%, transparent); overflow: hidden; }
.lp-sx .fx-b .tr i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 30%, transparent); }
.lp-sx .fx-b.hot .tr i { background: var(--hs-gold); }

/* Finanzen 2 · Gesamtbild: the product's chart in miniature, by class, then the net line in its
   corridor. Chart colours are the product's (ChapterStageCatalog.Chart). */
.lp-sx .gx { display: flex; flex-direction: column; }
.lp-sx .gx-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; }
.lp-sx .gx-k { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lp-sx .gx-k .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 17px; }
.lp-sx .gx-pills { display: flex; gap: 4px; }
.lp-sx .gx-pills > * { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ow-ink) 14%, transparent); font-size: 11.5px; font-weight: 600; color: #3d3a33; white-space: nowrap; }
.lp-sx .gx-pills b { background: var(--ow-ink); border-color: var(--ow-ink); color: #fff; }
/* The Gesamtbild one piece at a time (cues g1–g4): three panels on one spot under the header — the
   data basis, the chart (by class, then net), the net-worth tiles. Each comes in as the one before
   fades out, so the card never shows all of it at once. */
.lp-sx .gx-st { display: grid; flex: 1; min-height: 0; margin-top: 12px; }
.lp-sx .gx-p { grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.lp-sx .gx-p1, .lp-sx .gx-p3 { align-self: center; }
.lp-sx.cs-g1 .gx-p1, .lp-sx.cs-g2 .gx-p2, .lp-sx.cs-g4 .gx-p3 { opacity: 1; transform: none; }
.lp-sx.cs-g2 .gx-p1, .lp-sx.cs-g4 .gx-p2 { opacity: 0; transform: translateY(-8px); }
/* The data basis (cs-g1): one entry after another (--i), one per row so no figure is cut off, each a
   small card whose check pops once it stands. Then (cs-gm) the entries draw together into the middle
   of the list (--dy: the way from their row to the middle between the third and the fourth, in
   their own height and the gap) and shrink into the Gesamtbild badge (.gx-hub), which comes up where
   they meet and opens into the chart with cs-g2. */
.lp-sx .gx-data { --rg: 8px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rg); }
.lp-sx .gx-d {
  --dy: calc((2.5 - var(--i)) * (100% + var(--rg)));
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 9px; overflow: hidden; white-space: nowrap; font-size: 13.5px;
  border: 1px solid color-mix(in srgb, var(--ow-ink) 9%, transparent); border-radius: 10px; background: var(--ow-paper);
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.45s ease calc(var(--i) * 0.34s), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.34s);
}
.lp-sx .gx-d .material-symbols-outlined {
  color: var(--ow-ev-documented); font-size: 18px; transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1) calc(var(--i) * 0.34s + 0.25s);
}
.lp-sx .gx-d em { font-style: normal; color: var(--hs-mute); }
.lp-sx .gx-d b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-sx.cs-g1 .gx-d { opacity: 1; transform: none; }
.lp-sx.cs-g1 .gx-d .material-symbols-outlined { transform: none; }
.lp-sx.cs-gm .gx-d {
  opacity: 0; transform: translateY(var(--dy)) scale(0.3);
  transition: transform 0.8s cubic-bezier(0.55, 0, 0.35, 1) calc(var(--i) * 0.07s), opacity 0.4s ease calc(var(--i) * 0.07s + 0.4s);
}
.lp-sx .gx-hub {
  position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px 0 12px;
  border-radius: 999px; background: var(--ow-ink); color: #fff; white-space: nowrap; font-size: 14px; font-weight: 700;
  opacity: 0; transform: translate(-50%, -50%) scale(0.4); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.lp-sx .gx-hub .material-symbols-outlined { color: var(--ow-champagne); font-size: 20px; }
.lp-sx.cs-gm .gx-hub { opacity: 1; transform: translate(-50%, -50%); transition-delay: 0.65s; animation: lpGxHub 1.2s ease-out 0.95s; }
.lp-sx.cs-g2 .gx-hub { opacity: 0; transform: translate(-50%, -50%) scale(1.7); transition: opacity 0.45s ease, transform 0.5s ease; animation: none; }
@keyframes lpGxHub {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ow-champagne) 60%, transparent); }
  100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--ow-champagne) 0%, transparent); }
}
.lp-sx .gx-gr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--hs-mute); opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s; }
.lp-sx .gx-gr > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-sx .gx-gr b { font-family: var(--ow-serif); font-size: 21px; font-weight: 600; color: var(--ow-ink); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
/* The growth figure belongs to the net chart: it comes in with it. */
.lp-sx.cs-g3 .gx-gr { opacity: 1; transform: none; }
.lp-sx .gx-ch { position: relative; margin-top: 8px; }
.lp-sx .gx-ttl { position: relative; display: block; height: 14px; margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lp-sx .gx-ttl span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity 0.4s; }
.lp-sx .gx-ttl .b, .lp-sx.cs-g3 .gx-ttl .a { opacity: 0; }
.lp-sx.cs-g3 .gx-ttl .b { opacity: 1; }
.lp-sx .gx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-sx .gx-gl { stroke: color-mix(in srgb, var(--ow-ink) 7%, transparent); }
.lp-sx .gx-base { stroke: color-mix(in srgb, var(--ow-ink) 18%, transparent); }
.lp-sx .gx-yl { font: 9px var(--own-font-sans); fill: var(--hs-faint); }
.lp-sx .gx-tl { font: 700 8.5px var(--own-font-sans); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ow-ink); }
.lp-sx .gx-el { font: 700 11px var(--own-font-sans); fill: var(--ow-ink); }
/* The chart's labels lie on top of lines, arrows and the band: a halo in the card's colour keeps them legible. */
.lp-sx .gx-hl { paint-order: stroke; stroke: var(--hs-card); stroke-width: 3.5px; stroke-linejoin: round; }
.lp-sx .gx-band { fill: rgba(13, 148, 136, 0.14); stroke: rgba(13, 148, 136, 0.45); stroke-dasharray: 2 2; stroke-width: 0.8; }
.lp-sx .gx-dot { fill: var(--ow-ink); }
.lp-sx .gx-debt { fill: none; stroke: var(--ow-ink); stroke-width: 1.4; stroke-dasharray: 5 4; }
/* By class (cs-g2): the grid comes up, the stack rises from the baseline as its classes fade in one
   above the other (--i), the remaining debt draws itself from left to right, and the surplus arrows
   grow out of the debt line one after another once the stack stands. */
.lp-sx .gx-grid { opacity: 0; transition: opacity 0.5s ease; }
.lp-sx.cs-g2 .gx-grid { opacity: 1; }
.lp-sx .gx-stack { transform: scaleY(0); transform-box: view-box; transform-origin: 0 100%; transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
.lp-sx.cs-g2 .gx-stack { transform: none; }
.lp-sx .gx-a { opacity: 0; transition: opacity 0.55s ease calc(0.1s + var(--i) * 0.12s); }
.lp-sx.cs-g2 .gx-a { opacity: 1; }
.lp-sx .gx-dbt { clip-path: inset(-20px 100% -20px -10px); transition: clip-path 1.3s cubic-bezier(0.4, 0, 0.2, 1) 0.25s; }
.lp-sx.cs-g2 .gx-dbt { clip-path: inset(-20px -10px -20px -10px); }
.lp-sx .gx-ar {
  opacity: 0; transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity 0.2s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.lp-sx .gx-cat .gx-ar { transition-delay: calc(1.1s + var(--i) * 0.15s); }
.lp-sx.cs-g2 .gx-cat .gx-ar { opacity: 1; transform: none; }
/* Net (cs-g3): the classes give way, the net line draws itself with its corridor sweeping in under
   it, each arrow grows as the line reaches it (--x), and the line's end lands — the dot pops, a
   champagne ring goes out from it once, and the figure comes up above it. */
.lp-sx .gx-cat, .lp-sx .gx-net { transition: opacity 0.5s ease; }
.lp-sx .gx-net { opacity: 0; }
.lp-sx.cs-g3 .gx-cat { opacity: 0; }
.lp-sx.cs-g3 .gx-net { opacity: 1; }
.lp-sx .gx-band { clip-path: inset(-4px 100% -4px 0); transition: clip-path 1.7s cubic-bezier(0.45, 0.05, 0.35, 1) 0.15s; }
.lp-sx.cs-g3 .gx-band { clip-path: inset(-4px -4px -4px 0); }
.lp-sx .gx-nl {
  fill: none; stroke: var(--ow-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s cubic-bezier(0.45, 0.05, 0.35, 1) 0.15s;
}
.lp-sx.cs-g3 .gx-nl { stroke-dashoffset: 0; }
.lp-sx .gx-net .gx-ar { transition-delay: calc(0.2s + var(--x) * 1.45s); }
.lp-sx.cs-g3 .gx-net .gx-ar { opacity: 1; transform: none; }
.lp-sx .gx-end { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.64, 1) 1.8s; }
.lp-sx.cs-g3 .gx-end { transform: none; }
.lp-sx .gx-ring { fill: none; stroke: var(--ow-champagne-deep); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-sx.cs-g3 .gx-ring { animation: lpGxRing 1.1s ease-out 1.9s both; }
@keyframes lpGxRing { 0% { opacity: 0; transform: none; } 10% { opacity: 0.9; } 100% { opacity: 0; transform: scale(3.6); } }
.lp-sx .gx-lbs text { opacity: 0; transition: opacity 0.4s ease 0.2s; }
.lp-sx .gx-lbs .gx-el { transform: translateY(4px); transition: opacity 0.4s ease 1.9s, transform 0.4s ease 1.9s; }
.lp-sx.cs-g3 .gx-lbs text { opacity: 1; transform: none; }
.lp-sx .gx-ax { position: relative; height: 14px; margin-top: 3px; font-size: 10px; color: var(--hs-faint); }
.lp-sx .gx-ax span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lp-sx .gx-ax span:first-child { left: 0; transform: none; }
.lp-sx .gx-ax span:last-child { transform: translateX(-100%); }
.lp-sx .gx-leg { position: relative; height: 32px; margin-top: 6px; }
.lp-sx .gx-leg > div { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px 12px; font-size: 11px; color: #3d3a33; transition: opacity 0.4s; }
.lp-sx .gx-leg span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lp-sx .gx-leg i { width: 9px; height: 9px; border-radius: 2px; }
.lp-sx .gx-leg i.ln { width: 16px; height: 2px; border-radius: 0; background: var(--ow-ink); }
.lp-sx .gx-leg i.ds { background: repeating-linear-gradient(90deg, var(--ow-ink) 0 4px, transparent 4px 7px); }
.lp-sx .gx-leg i.bd { background: rgba(13, 148, 136, 0.3); border: 1px solid rgba(13, 148, 136, 0.7); }
.lp-sx .gx-leg i.sp { background: #2f9e44; }
.lp-sx .gx-leg .b, .lp-sx.cs-g3 .gx-leg .a { opacity: 0; }
.lp-sx.cs-g3 .gx-leg .b { opacity: 1; }
/* The tiles stand alone at the end, so they read large: one above the other. */
.lp-sx .gx-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lp-sx .gx-tiles > div { padding: 16px 18px; border-radius: 14px; background: var(--ow-ed-accent-soft); }
.lp-sx .gx-tiles span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lp-sx .gx-tiles b { display: block; margin-top: 4px; font-family: var(--ow-serif); font-size: 32px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.lp-sx .gx-tiles small { display: block; margin-top: 2px; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx.cs-g4 .gx-tiles { opacity: 1; transform: none; }
/* Under the first Gesamtbild, once it stands: how long it takes to get one's own (the manual way's
   „Etwa 3 Minuten"). Rises a beat after the tiles. */
.lp-sx .gx-time {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 12px; padding: 5px 12px 5px 9px;
  border-radius: 999px; background: var(--ow-ink); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.lp-sx .gx-time .material-symbols-outlined { color: var(--ow-champagne); font-size: 17px; }
.lp-sx.cs-g4 .gx-time { opacity: 1; transform: none; transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  /* Without the film the chapter rests at its end: it shows the net chart, the heart of it, not the tiles. */
  .lp-sx.cs-g4 .gx-p2 { opacity: 1; transform: none; }
  .lp-sx.cs-g4 .gx-p3 { opacity: 0; }
}

/* Finanzen 2 · Wie lange es reicht: the scenario template „Einkommen fällt weg“ switches on (sc1),
   the income is struck to zero (sc2), the savings run down (sc3), how long they last comes up large
   (sc4), and what is still there afterwards under it (sc5). Ink and champagne only; the struck income
   in the signal red. */
.lp-sx .sx-l.fx-sc { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .fx-sc-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--ow-ink) 7%, transparent); }
.lp-sx .fx-sc-hd b { font-family: var(--ow-serif); font-size: 22px; font-weight: 600; line-height: 1.15; }
.lp-sx .fx-sc-hd small { flex-basis: 100%; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .fx-sc-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.4s, color 0.4s; }
.lp-sx .fx-sc-tag .material-symbols-outlined { font-size: 14px; }
.lp-sx.cs-sc1 .fx-sc-tag { background: var(--ow-ink); color: var(--ow-champagne); }
/* Finanzen chapter 2, „Neue Heizung“ (the short „Neue Heizung durchrechnen“): the loan it needs, the
   line with the marker „nächstes Frühjahr“ (cs-sc1), the drop with the way it was going turning into
   the dashed „bisher“ (cs-sc2), „Hier wird es eng“ on the lowest point (cs-sc3), „Kurs anpassen?“
   (cs-sc4), and „Einkommen fällt weg“ as one line under it (cs-sc5). The shapes are FinanzenKurs'. */
.lp-sx .fx-hz-loan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0 2px; font-size: 12.5px; color: var(--hs-mute); }
.lp-sx .fx-hz-loan .chip { padding: 2px 8px; border: 1px solid var(--ow-champagne); border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ow-gold-ink); }
.lp-sx.cs-sc1 .fx-hz-loan.on-r { opacity: 1; transform: none; }
/* The chart takes the room the card leaves, so the afterword always fits: the drawing stretches to it
   (preserveAspectRatio="none", strokes kept even) and the labels over it follow in percent. */
.lp-sx .fx-hz-ch { position: relative; flex: 1 1 auto; min-height: 64px; margin: 34px 0 0; }
.lp-sx .fx-hz-ch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-sx .fx-hz-ch svg path, .lp-sx .fx-hz-ch svg line { vector-effect: non-scaling-stroke; }
.lp-sx .fx-hz-ch .tight { stroke: var(--ow-negative); stroke-width: 2; stroke-dasharray: 7 7; opacity: 0; transition: opacity 0.4s; }
.lp-sx .fx-hz-ch .bd { fill: var(--ow-cream-deep); opacity: 0; transition: opacity 0.6s 0.5s; }
.lp-sx .fx-hz-ch .way { fill: none; stroke: var(--ow-ink); stroke-width: 3.5; stroke-linecap: round; transition: stroke 0.5s, stroke-width 0.5s, opacity 0.5s; }
.lp-sx .fx-hz-ch .ln { fill: none; stroke: var(--ow-ink); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease-out; }
.lp-sx .fx-hz-ch .mk, .lp-sx .fx-hz-ch .was-l, .lp-sx .fx-hz-ch .lo, .lp-sx .fx-hz-ch .adj { opacity: 0; transition: opacity 0.4s, transform 0.4s; }
/* The marker: a dashed rule down the chart and an ink disc with the heating on top, its date beside. */
.lp-sx .fx-hz-ch .mk { position: absolute; top: -30px; bottom: 0; width: 0; transform: translateY(-4px); }
.lp-sx .fx-hz-ch .mk::before { content: ""; position: absolute; top: 16px; bottom: 0; left: 0; border-left: 1.5px dashed var(--ow-champagne-deep); }
.lp-sx .fx-hz-ch .mk-ic { position: absolute; top: 0; left: -15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ow-ink); color: var(--ow-champagne); box-shadow: 0 0 0 3px var(--ow-paper); }
.lp-sx .fx-hz-ch .mk-ic .material-symbols-outlined { font-size: 16px; }
.lp-sx .fx-hz-ch .mk-l { position: absolute; top: 5px; left: 22px; padding: 2px 9px; border-radius: 999px; background: var(--ow-ink); color: var(--ow-champagne-light); font-size: 11px; white-space: nowrap; }
.lp-sx .fx-hz-ch .was-l { position: absolute; right: 0; transform: translateY(-150%); font-size: 11px; color: var(--ow-gold-ink); }
.lp-sx .fx-hz-ch .lo { position: absolute; width: 0; height: 0; }
.lp-sx .fx-hz-ch .lo i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border: 2px solid var(--ow-negative); border-radius: 50%; background: var(--ow-paper); }
.lp-sx .fx-hz-ch .lo-l { position: absolute; left: 12px; top: 7px; font-size: 12px; font-weight: 700; color: var(--ow-negative); white-space: nowrap; }
.lp-sx .fx-hz-ch .adj { position: absolute; right: 0; bottom: -4px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--ow-ink); color: white; font-size: 11.5px; white-space: nowrap; transform: translateY(4px); }
.lp-sx .fx-hz-ch .adj .material-symbols-outlined { font-size: 14px; color: var(--ow-champagne); }
.lp-sx.cs-sc1 .fx-hz-ch .mk { opacity: 1; transform: none; }
.lp-sx.cs-sc2 .fx-hz-ch .way { stroke: var(--ow-champagne-deep); stroke-width: 2; stroke-dasharray: 6 7; }
.lp-sx.cs-sc2 .fx-hz-ch .ln { stroke-dashoffset: 0; }
.lp-sx.cs-sc2 .fx-hz-ch .bd, .lp-sx.cs-sc2 .fx-hz-ch .was-l { opacity: 1; }
.lp-sx.cs-sc3 .fx-hz-ch .tight { opacity: 0.6; }
.lp-sx.cs-sc3 .fx-hz-ch .lo { opacity: 1; }
.lp-sx.cs-sc4 .fx-hz-ch .adj { opacity: 1; transform: none; }
.lp-sx .fx-hz-ax { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--hs-mute-2); }
.lp-sx .fx-hz-also { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ow-ed-accent-soft); font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity 0.45s, transform 0.45s; }
.lp-sx .fx-hz-also .material-symbols-outlined { font-size: 19px; color: var(--ow-ed-accent); }
.lp-sx .fx-hz-also b { font-weight: 700; white-space: nowrap; }
.lp-sx .fx-hz-also small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--hs-mute-2); }
.lp-sx.cs-sc5 .fx-hz-also { opacity: 1; transform: none; }

/* Hausrat & Bestand 1 · Aufnahme: six ways in, the room scan picked, the camera along the wall. */
.lp-sx.cs-a3 .hs-det { opacity: 1; transform: none; }
.lp-sx .hx-pick { position: absolute; inset: 0; transition: opacity 0.35s ease, transform 0.35s ease; }
.lp-sx.cs-a2 .hx-pick { opacity: 0; transform: scale(0.97); }
.lp-sx .hx-q { margin: 4px 0 14px; font-family: var(--ow-serif); font-size: 24px; font-weight: 600; }
.lp-sx .hx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-sx .hx-mt { position: relative; display: grid; justify-items: start; gap: 8px; padding: 14px; border-radius: 14px; background: var(--ow-paper); border: 1px solid color-mix(in srgb, var(--ow-ink) 10%, transparent); font-size: 14px; font-weight: 600; transition: border-color 0.25s, background 0.25s; }
.lp-sx .hx-mt > .material-symbols-outlined { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); font-size: 21px; vertical-align: 0; }
.lp-sx .hx-mt .cs-tap { left: 70%; top: 46%; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-a0 .hx-mt.scan .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-a1 .hx-mt.scan .cs-tap { opacity: 0; transform: scale(2); transition: opacity 0.4s, transform 0.4s; }
.lp-sx.cs-a1 .hx-mt.scan { border-color: var(--ow-ed-accent-line); background: var(--ow-ed-accent-soft); }
.lp-sx .hx-cam { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.4s ease, transform 0.5s ease; }
.lp-sx.cs-a2 .hx-cam { opacity: 1; transform: none; }
.lp-sx .hx-cam .hs-mw { transform: translateX(5%) scale(1.06); transition: transform 3.6s linear; }
.lp-sx.cs-a2p .hx-cam .hs-mw { transform: translateX(-5%) scale(1.06); }
.lp-sx .hx-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--ow-ink) 62%, transparent); color: #fff; font-size: 12.5px; font-weight: 600; transition: opacity 0.3s;
}
.lp-sx.cs-a4 .hx-hint { opacity: 0; }
.lp-sx .hx-rec { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--ow-ink) 66%, transparent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; transition: opacity 0.3s; }
/* The recording dot is the camera's red — a signal, not a colour of the page. */
.lp-sx .hx-rec i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: lpCsRec 1.4s ease-in-out infinite; }
.lp-sx .hx-rec b { letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lp-sx.cs-a4 .hx-rec { opacity: 0; }
.lp-sx .hx-ok { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ow-champagne); color: var(--ow-ink); font-size: 12.5px; font-weight: 700; opacity: 0; transform: translateY(-4px); transition: opacity 0.35s, transform 0.35s; }
.lp-sx.cs-a4 .hx-ok { opacity: 1; transform: none; }

/* Hausrat & Bestand 2 · OWNY füllt die Lücken: field by field, the manufacturer stays open. */
.lp-sx .hx-hd { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 12px; }
.lp-sx .hx-th { position: relative; height: 84px; border-radius: 12px; overflow: hidden; }
.lp-sx .hx-th .cs-ph { border-radius: 12px; }
.lp-sx .hx-tt { font-family: var(--ow-serif); font-size: 25px; font-weight: 600; line-height: 1.05; }
.lp-sx .hx-sb { margin-top: 4px; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .hx-fl { margin-top: 12px; }
.lp-sx .hx-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: 31px; border-top: 1px dashed color-mix(in srgb, var(--ow-ink) 12%, transparent); font-size: 13.5px; }
.lp-sx .hx-f .k { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hs-mute-2); }
.lp-sx .hx-f .v { position: relative; min-width: 120px; text-align: right; font-weight: 600; }
.lp-sx .hx-f .sk {
  position: absolute; right: 0; top: 50%; width: 96px; height: 9px; margin-top: -4.5px; border-radius: 5px;
  background: linear-gradient(90deg, #eee6d6, #f8f3ea, #eee6d6); background-size: 200% 100%;
  animation: lpHsShim 1.1s linear infinite; transition: opacity 0.2s;
}
.lp-sx .hx-f .tx { display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateX(4px); transition: opacity 0.3s, transform 0.3s; }
.lp-sx .hx-f.open .tx { color: var(--hs-faint); font-weight: 500; font-style: italic; }
.lp-sx .hx-f.open em { padding: 1px 7px; border: 1px dashed color-mix(in srgb, var(--ow-ink) 30%, transparent); border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hs-mute-2); }
.lp-sx.cs-b1 .b-1 .sk, .lp-sx.cs-b2 .b-2 .sk, .lp-sx.cs-b3 .b-3 .sk, .lp-sx.cs-b4 .b-4 .sk, .lp-sx.cs-b5 .b-5 .sk { opacity: 0; }
.lp-sx.cs-b1 .b-1 .tx, .lp-sx.cs-b2 .b-2 .tx, .lp-sx.cs-b3 .b-3 .tx, .lp-sx.cs-b4 .b-4 .tx, .lp-sx.cs-b5 .b-5 .tx { opacity: 1; transform: none; }
.lp-sx .hx-btn {
  position: relative; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center;
  height: 38px; margin-top: 14px; border-radius: 10px; white-space: nowrap;
  background: var(--ow-ink); color: var(--ow-cream); font-size: 14px; font-weight: 700; transition: background 0.3s, color 0.3s;
}
.lp-sx .hx-btn .l2 { display: none; align-items: center; gap: 6px; }
/* Confirmed: the button turns champagne, the brand's "done" (as on the start page's preview). */
.lp-sx.cs-bk .hx-btn { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx.cs-bk .hx-btn .l1 { display: none; }
.lp-sx.cs-bk .hx-btn .l2 { display: inline-flex; }
.lp-sx.cs-bt .hx-btn .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-bk .hx-btn .cs-tap { opacity: 0; transform: scale(2); transition: opacity 0.45s, transform 0.45s; }

/* Hausrat & Bestand 3 · Fortschritt: the house counts up, the living room is done, the basement next. */
.lp-sx .hx-n { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.lp-sx .hx-big { font-family: var(--ow-serif); font-size: 56px; font-weight: 600; line-height: 0.9; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .hx-big small { margin-left: 8px; font-family: var(--own-font-sans); font-size: 14px; font-weight: 600; color: var(--hs-mute); }
.lp-sx .hx-sub { text-align: right; white-space: nowrap; }
.lp-sx .hx-sub b { display: block; font-family: var(--ow-serif); font-size: 24px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .hx-sub > span { font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .hx-meter { height: 6px; margin-top: 14px; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 7%, transparent); overflow: hidden; }
.lp-sx .hx-meter i { display: block; height: 100%; border-radius: 3px; background: var(--hs-gold); }
.lp-sx .hx-rms { margin-top: 16px; }
.lp-sx .hx-rm { display: grid; grid-template-columns: 36px minmax(0, 1fr) 92px 86px; gap: 12px; align-items: center; height: 58px; padding: 0 10px; border-radius: 12px; border: 1px solid transparent; border-top-color: color-mix(in srgb, var(--ow-ink) 7%, transparent); transition: background 0.5s, border-color 0.5s; }
.lp-sx .hx-rm .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 19px; }
.lp-sx .hx-rm .tt { min-width: 0; }
.lp-sx .hx-rm .tt b { display: block; font-size: 14.5px; font-weight: 600; }
.lp-sx .hx-rm .tt small { font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .hx-rm .pr { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 8%, transparent); overflow: hidden; }
.lp-sx .hx-rm .pr i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 35%, transparent); transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-sx .hx-rm .st { position: relative; text-align: right; font-size: 13px; font-weight: 600; color: var(--hs-mute); white-space: nowrap; }
.lp-sx .hx-rm.new .pr i { background: var(--hs-gold); }
.lp-sx.cs-c1 .hx-rm.new { background: var(--ow-ed-accent-soft); border-top-color: transparent; }
.lp-sx.cs-c1 .hx-rm.new .pr i { width: 100% !important; }
.lp-sx .hx-rm .dn { position: absolute; right: 0; top: 50%; display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: -12px; padding: 0 9px; border-radius: 999px; background: var(--ow-champagne); color: var(--ow-ink); font-size: 12px; opacity: 0; transform: scale(0.9); transition: opacity 0.3s, transform 0.3s; }
.lp-sx .hx-rm .pc { transition: opacity 0.3s; }
.lp-sx.cs-c1 .hx-rm .pc { opacity: 0; }
.lp-sx.cs-c2 .hx-rm .dn { opacity: 1; transform: none; }
.lp-sx .hx-rm .nx { display: inline-flex; align-items: center; gap: 3px; color: var(--hs-faint); transition: color 0.3s; }
.lp-sx.cs-c3 .hx-rm.next { border: 1px dashed var(--ow-ed-accent-line); }
.lp-sx.cs-c3 .hx-rm.next .nx { color: var(--ow-ed-accent); }

/* Phones: the same film in a 360px card — smaller type, tighter rows, short labels (.cs-s). */
@media (max-width: 600px) {
  .lp-cs .cs-l { display: none; }
  .lp-cs .cs-s { display: revert; }
  .lp-cs .lp-sx { height: 360px; }
  .lp-cs .cs-tabs { margin-top: 14px; }
  .lp-cs .cs-tab { gap: 12px; min-height: 44px; padding: 11px 12px; }
  /* The card's head keeps its words on a phone: "Live-Vorschau" and the step counter. */
  .lp-cs .hs-live span { display: inline; }

  .lp-sx .hs-body { margin: 2px 10px 10px; }
  .lp-sx .m-o { height: 20px; font-size: 12px; }
  .lp-sx .m-o img { width: 20px; height: 20px; }
  .lp-sx .e-h { font-size: 26px; }
  .lp-sx .e-l { gap: 8px; margin-top: 14px; }
  .lp-sx .e-l span { font-size: 13.5px; }
  .lp-sx .e-c { margin-top: 14px; font-size: 12.5px; }
  .lp-sx .ov-k { font-size: 11px; }
  .lp-sx .cs-ph { border-radius: 14px; }

  .lp-sx .sx-c1 { grid-template-columns: 118px minmax(0, 1fr); gap: 12px; }
  .lp-sx .p-left { grid-row: auto; }
  .lp-sx .p-ph { width: 118px; height: 118px; border-radius: 12px; }
  .lp-sx .p-lb { left: 6px; bottom: 6px; padding: 3px 7px; font-size: 10.5px; }
  .lp-sx .p-th { gap: 5px; margin-top: 7px; }
  .lp-sx .p-t { gap: 3px; font-size: 10.5px; }
  .lp-sx .p-t i { height: 34px; border-radius: 7px; }
  .lp-sx .p-t span { display: none; }
  .lp-sx .p-tt { font-size: 20px; }
  .lp-sx .p-sub { font-size: 12px; }
  .lp-sx .p-chips { flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 8px; }
  .lp-sx .p-chip { height: 24px; padding: 0 8px; font-size: 11.5px; }
  .lp-sx .p-pv { grid-column: 1 / -1; margin-top: -4px; }
  .lp-sx .p-hl { margin-top: 0; }
  .lp-sx .p-tl { margin-top: 2px; }
  .lp-sx .p-tl::before { top: 10px; bottom: 10px; }
  .lp-sx .p-e { display: flex; gap: 8px; align-items: baseline; padding: 3px 0 4px; }
  .lp-sx .p-e::before { top: 8px; }
  .lp-sx .p-e b { flex: none; font-size: 13px; }
  .lp-sx .p-e span { font-size: 12px; }

  .lp-sx .m-hd { gap: 10px; margin-top: 8px; }
  .lp-sx .m-hd img { width: 34px; height: 34px; }
  .lp-sx .m-t { font-size: 18px; }
  .lp-sx .m-ch { height: 70px; margin-top: 10px; }
  .lp-sx .m-d { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .lp-sx .m-n { margin-top: 8px; }
  .lp-sx .m-big { font-size: 34px; }
  .lp-sx .m-cap { font-size: 11.5px; }
  .lp-sx .m-s { padding: 8px 12px; border-radius: 10px; }
  .lp-sx .m-s span { font-size: 11.5px; }
  .lp-sx .m-s span b { font-size: 13px; }
  .lp-sx .m-s strong { font-size: 18px; }

  .lp-sx .s-hd b { font-size: 19px; }
  .lp-sx .s-who { height: 24px; font-size: 11.5px; }
  .lp-sx .s-tg { margin-top: 4px; }
  .lp-sx .s-r { height: 32px; font-size: 12.5px; }
  .lp-sx.cs-st .s-r.v { height: 40px; }
  .lp-sx .s-r small { font-size: 11.5px; }
  .lp-sx .s-lk { height: 32px; margin-top: 6px; }
  .lp-sx .s-lk code { font-size: 12px; }
  .lp-sx .s-lk em { height: 24px; padding: 0 7px; font-size: 11.5px; }
  .lp-sx .s-pl { margin-top: 9px; font-size: 10.5px; }
  .lp-sx .s-gr { gap: 7px; margin-top: 6px; }
  .lp-sx .s-ti i { height: 46px; border-radius: 7px; }
  .lp-sx .s-ti b { font-size: 12px; }
  .lp-sx .s-ti span { font-size: 11px; }
  .lp-sx .s-rv { display: none; }

  .lp-sx .fx-live { height: 22px; padding: 0 8px; font-size: 11px; }
  .lp-sx .fx-top { margin-top: 8px; }
  .lp-sx .fx-free { font-size: 34px; }
  .lp-sx .fx-lb, .lp-sx .fx-io { font-size: 11.5px; }
  .lp-sx.cs-h2 .fx-new { height: 46px; margin-top: 10px; }
  .lp-sx .fx-new { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; padding: 0 8px; border-radius: 10px; }
  .lp-sx .fx-new .ic { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }
  .lp-sx .fx-new .tt b { font-size: 13px; }
  .lp-sx .fx-new .tt small { font-size: 11.5px; }
  .lp-sx .fx-new .v { font-size: 17px; }
  .lp-sx .fx-bl { margin-top: 10px; font-size: 10.5px; }
  .lp-sx .fx-bs { gap: 7px; margin-top: 6px; }
  .lp-sx .fx-b .lb { margin-bottom: 4px; font-size: 12px; }
  .lp-sx .fx-b .tr { height: 5px; }
  .lp-sx .fx-sc-hd { padding-bottom: 8px; }
  .lp-sx .fx-sc-hd b { font-size: 18px; }
  .lp-sx .fx-hz-loan { padding-top: 8px; font-size: 11.5px; }
  .lp-sx .fx-hz-ch { margin-top: 30px; min-height: 56px; }
  .lp-sx .fx-hz-ch .lo-l, .lp-sx .fx-hz-ch .adj { font-size: 10.5px; }
  .lp-sx .fx-hz-also { margin-top: 8px; padding: 8px 10px; font-size: 12px; }
  .lp-sx .fx-hz-also small { font-size: 10.5px; }

  .lp-sx .gx-hd { height: 24px; }
  .lp-sx .gx-k { gap: 5px; font-size: 10px; }
  .lp-sx .gx-pills > * { height: 22px; padding: 0 7px; font-size: 11px; }
  .lp-sx .gx-st { margin-top: 8px; }
  .lp-sx .gx-data { --rg: 5px; }
  .lp-sx .gx-d { gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 9px; font-size: 12.5px; }
  .lp-sx .gx-d .material-symbols-outlined { font-size: 15px; }
  .lp-sx .gx-hub { height: 34px; padding: 0 14px 0 10px; font-size: 13px; }
  .lp-sx .gx-gr { font-size: 11.5px; }
  .lp-sx .gx-gr b { font-size: 17px; }
  .lp-sx .gx-ch { margin-top: 4px; }
  .lp-sx .gx-ttl { height: 12px; margin-bottom: 2px; font-size: 9.5px; }
  .lp-sx .gx-ax { height: 12px; font-size: 9.5px; }
  .lp-sx .gx-tiles { gap: 8px; }
  .lp-sx .gx-tiles > div { padding: 10px 14px; border-radius: 12px; }
  .lp-sx .gx-tiles span { font-size: 10px; }
  .lp-sx .gx-tiles b { font-size: 24px; }
  .lp-sx .gx-time { margin-top: 8px; padding: 4px 10px 4px 8px; font-size: 11.5px; }
  .lp-sx .gx-time .material-symbols-outlined { font-size: 15px; }

  .lp-sx .hx-q { margin: 2px 0 10px; font-size: 19px; }
  .lp-sx .hx-grid { gap: 7px; }
  .lp-sx .hx-mt { gap: 6px; padding: 10px; border-radius: 12px; font-size: 12.5px; }
  .lp-sx .hx-mt > .material-symbols-outlined { width: 32px; height: 32px; font-size: 18px; }
  .lp-sx .hx-rec { right: 8px; top: 8px; height: 26px; font-size: 11px; }
  .lp-sx .hx-ok { right: 8px; top: 8px; height: 26px; padding: 0 10px; font-size: 11.5px; }
  .lp-sx .hx-hint { bottom: 8px; padding: 5px 10px; font-size: 12px; }
  .lp-sx .hs-det em { padding: 4px 7px; font-size: 10.5px; }
  .lp-sx .hx-hd { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; margin-top: 8px; }
  .lp-sx .hx-th { height: 58px; border-radius: 10px; }
  .lp-sx .hx-tt { font-size: 20px; }
  .lp-sx .hx-sb { font-size: 12px; }
  .lp-sx .hx-fl { margin-top: 6px; }
  .lp-sx .hx-f { height: 25px; font-size: 12.5px; }
  .lp-sx .hx-f .v { min-width: 100px; }
  .lp-sx .hx-btn { height: 32px; margin-top: 8px; font-size: 13px; }
  .lp-sx .hx-n { margin-top: 6px; }
  .lp-sx .hx-big { font-size: 40px; }
  .lp-sx .hx-big small { margin-left: 6px; font-size: 12.5px; }
  .lp-sx .hx-sub b { font-size: 19px; }
  .lp-sx .hx-sub > span { font-size: 11.5px; }
  .lp-sx .hx-meter { height: 5px; margin-top: 10px; }
  .lp-sx .hx-rms { margin-top: 8px; }
  .lp-sx .hx-rm { grid-template-columns: 30px minmax(0, 1fr) 54px 70px; gap: 8px; height: 46px; padding: 0 6px; border-radius: 10px; }
  .lp-sx .hx-rm .ic { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }
  .lp-sx .hx-rm .tt b { font-size: 13.5px; }
  .lp-sx .hx-rm .tt small { font-size: 11.5px; }
  .lp-sx .hx-rm .st { font-size: 12px; }
  .lp-sx .hx-rm .dn { height: 22px; margin-top: -11px; padding: 0 7px; font-size: 11px; }
}
@keyframes lpCsRec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(229, 72, 77, 0); }
}

/* Ordnung & Vorsorge (ChapterStageVorsorge): the page's three steps, moved by cues with the prefix vs.
   1 · Einfach erfassen: one photo of the sideboard — the shutter flashes, OWNY frames what stands on
   it (the start page's Bestand frames), names the count, and the things join the room as chips; up to
   40 on one picture. Sorting can wait for the evening. */
.lp-sx .sx-c1.vs-c1, .lp-sx .vs-c2, .lp-sx .vs-c3 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .vs-hd, .lp-sx .vs-fh { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; }
.lp-sx .vs-max {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--ow-champagne); font-size: 12px; font-weight: 700; color: var(--ow-gold-ink);
}
.lp-sx .vs-cam { position: relative; flex: none; height: 232px; margin-top: 10px; }
.lp-sx .vs-cam .hs-mw { transform: scale(1.05); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lp-sx.cs-vs1 .vs-cam .hs-mw { transform: none; }
.lp-sx .vs-flash { position: absolute; inset: 0; z-index: 1; border-radius: 16px; background: #fff; opacity: 0; pointer-events: none; }
.lp-sx.cs-vs1 .vs-flash { animation: lpVsFlash 0.6s ease-out; }
.lp-sx.cs-vs2 .vs-cam .hs-det { opacity: 1; transform: none; }
.lp-sx.cs-vs3 .vs-cam .cs-found { opacity: 1; transform: none; }
.lp-sx .vs-got { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-sx .vs-got > span {
  display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; white-space: nowrap;
  background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 10%, transparent); font-size: 12.5px; font-weight: 600;
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s calc(var(--d) * 0.1s), transform 0.3s calc(var(--d) * 0.1s);
}
.lp-sx .vs-got .material-symbols-outlined { font-size: 15px; color: var(--ow-ed-accent); }
.lp-sx.cs-vs4 .vs-got > span { opacity: 1; transform: none; }
.lp-sx .vs-later {
  display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 12px; border-radius: 12px;
  background: var(--ow-ed-accent-soft); font-size: 13.5px; font-weight: 600;
  opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .vs-later .material-symbols-outlined { font-size: 18px; color: var(--ow-ed-accent); }
.lp-sx.cs-vs5 .vs-later { opacity: 1; transform: none; }

/* Ordnung & Vorsorge 2 · Bequem abends am Smartphone sortieren: the phone on the sofa, one card at a
   time, swiped as the app sorts (DeclutterModel.SwipeRole) — the finger lands, drags the card under its
   pile's stamp, lets go: up to „Verkaufen oder Verschenken“, right to „Entsorgen“, left to „Behalten“.
   The room's count and bar follow; the rest waits for tomorrow. The stamps wear the sorting film's
   colours (.lw-card). */
.lp-sx .vs-eve { display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; font-size: 13px; font-weight: 600; color: var(--hs-mute); }
.lp-sx .vs-eve .material-symbols-outlined { font-size: 17px; color: var(--ow-ed-accent); }
.lp-sx .vs-phone {
  position: relative; overflow: hidden; display: flex; flex-direction: column; width: 270px; max-width: 100%; margin: 8px auto 0; padding: 20px 14px 12px;
  border: 6px solid var(--ow-ink); border-radius: 30px; background: var(--ow-paper);
  box-shadow: 0 16px 34px rgba(11, 16, 32, 0.18);
}
/* The evening comes, and the phone is picked up (vs6). */
.lp-sx .vs-eve, .lp-sx .vs-phone { opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lp-sx.cs-vs6 .vs-eve, .lp-sx.cs-vs6 .vs-phone { opacity: 1; transform: none; }
.lp-sx .vs-phone::before { content: ""; position: absolute; left: 50%; top: 6px; width: 54px; height: 6px; margin-left: -27px; border-radius: 3px; background: var(--ow-ink); }
.lp-sx .vs-ph-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lp-sx .vs-ph-hd > b { font-family: var(--ow-serif); font-size: 18px; font-weight: 600; }
.lp-sx .vs-n { white-space: nowrap; font-size: 11.5px; color: var(--hs-mute-2); }
.lp-sx .vs-n > span { display: none; }
.lp-sx .vs-n .d0 { display: inline; }
.lp-sx .vs-bar { height: 5px; margin-top: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 7%, transparent); overflow: hidden; }
.lp-sx .vs-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--hs-gold); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-sx .vs-stack { position: relative; height: 164px; margin: 14px 16px 0; }
.lp-sx .vs-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px;
  border-radius: 16px; background: var(--ow-paper); text-align: center;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent), 0 12px 26px rgba(70, 52, 20, 0.16);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
}
.lp-sx .vs-card .ph { display: block; width: 78px; height: 78px; border-radius: 12px; background-color: var(--ow-cream-deep); background-repeat: no-repeat; }
.lp-sx .vs-card b { font-family: var(--ow-serif); font-size: 17px; font-weight: 600; line-height: 1.15; }
/* The cards wait behind each other, each a little further down; the next one comes forward. */
.lp-sx .vs-card.k-2 { transform: translate(5px, 5px) rotate(1.5deg); }
.lp-sx .vs-card.k-3 { transform: translate(9px, 9px) rotate(2.5deg); }
.lp-sx .vs-card.k-4 { transform: translate(12px, 12px) rotate(3.5deg); }
.lp-sx .vs-card .stamp {
  position: absolute; top: 10px; padding: 2px 7px; border: 2px solid currentColor; border-radius: 7px; background: var(--ow-paper);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.25; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s;
}
.lp-sx .vs-card.keep .stamp { right: 8px; color: var(--ow-ink); transform: rotate(10deg); }
.lp-sx .vs-card.dispose .stamp { left: 8px; color: var(--ow-negative); transform: rotate(-10deg); }
.lp-sx .vs-card.give .stamp { top: 14px; left: 50%; width: max-content; max-width: 88%; white-space: normal; text-align: center; color: var(--ow-gold-ink); transform: translateX(-50%) rotate(-4deg); }
.lp-sx .vs-card .cs-tap { left: 50%; top: 42%; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-vs7 .vs-card.k-1 .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-vs8 .vs-card.k-1 { transform: translateY(-24px) rotate(-1deg); }
.lp-sx.cs-vs8 .vs-card.k-1 .stamp { opacity: 1; }
.lp-sx.cs-vs9 .vs-card.k-1 { opacity: 0; transform: translateY(-200px); }
.lp-sx.cs-vs9 .vs-card.k-2 { transform: none; }
.lp-sx.cs-vs9 .vs-card.k-3 { transform: translate(5px, 5px) rotate(1.5deg); }
.lp-sx.cs-vs9 .vs-card.k-4 { transform: translate(9px, 9px) rotate(2.5deg); }
.lp-sx.cs-vs9 .vs-n .d0 { display: none; }
.lp-sx.cs-vs9 .vs-n .d1 { display: inline; }
.lp-sx.cs-vs9 .vs-bar i { width: 20%; }
.lp-sx.cs-vs10 .vs-card.k-2 .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-vs11 .vs-card.k-2 { transform: translateX(40px) rotate(7deg); }
.lp-sx.cs-vs11 .vs-card.k-2 .stamp { opacity: 1; }
.lp-sx.cs-vs12 .vs-card.k-2 { opacity: 0; transform: translateX(240px) rotate(18deg); }
.lp-sx.cs-vs12 .vs-card.k-3 { transform: none; }
.lp-sx.cs-vs12 .vs-card.k-4 { transform: translate(5px, 5px) rotate(1.5deg); }
.lp-sx.cs-vs12 .vs-n .d1 { display: none; }
.lp-sx.cs-vs12 .vs-n .d2 { display: inline; }
.lp-sx.cs-vs12 .vs-bar i { width: 40%; }
.lp-sx.cs-vs13 .vs-card.k-3 .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-vs14 .vs-card.k-3 { transform: translateX(-40px) rotate(-7deg); }
.lp-sx.cs-vs14 .vs-card.k-3 .stamp { opacity: 1; }
.lp-sx.cs-vs15 .vs-card.k-3 { opacity: 0; transform: translateX(-240px) rotate(-18deg); }
.lp-sx.cs-vs15 .vs-card.k-4 { transform: none; }
.lp-sx.cs-vs15 .vs-n .d2 { display: none; }
.lp-sx.cs-vs15 .vs-n .d3 { display: inline; }
.lp-sx.cs-vs15 .vs-bar i { width: 60%; }
.lp-sx .vs-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: start; margin-top: 14px; font-size: 11px; line-height: 1.2; color: var(--hs-mute); }
.lp-sx .vs-legend > span { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; border-radius: 8px; transition: color 0.3s; }
.lp-sx .vs-legend .material-symbols-outlined { font-size: 16px; color: var(--ow-champagne-deep); }
.lp-sx .vs-legend .h-left { order: 1; }
.lp-sx .vs-legend .h-up { order: 2; }
.lp-sx .vs-legend .h-right { order: 3; flex-direction: column-reverse; }
.lp-sx.cs-vs8:not(.cs-vs9) .vs-legend .h-up, .lp-sx.cs-vs11:not(.cs-vs12) .vs-legend .h-right, .lp-sx.cs-vs14:not(.cs-vs15) .vs-legend .h-left { color: var(--ow-ink); font-weight: 700; }
.lp-sx .vs-enough {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; font-size: 13px; font-weight: 600; color: var(--hs-mute);
  opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .vs-enough .material-symbols-outlined {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ow-champagne); color: var(--ow-ink); font-size: 13px;
}
.lp-sx.cs-vs16 .vs-enough { opacity: 1; transform: none; }

/* Ordnung & Vorsorge 3 · Fortschritt dokumentieren: the folder keeps what became of each thing — row
   by row its outcome comes in (the event types' labels; „Gedacht für“ in ink, the owner's own word);
   the count runs on and the tally by outcome stands under the rows. */
.lp-sx .vs-cnt { white-space: nowrap; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .vs-cnt b { font-family: var(--ow-serif); font-size: 20px; font-weight: 600; color: var(--ow-ink); font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .vs-tr { height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 7%, transparent); overflow: hidden; }
.lp-sx .vs-tr i { display: block; height: 100%; border-radius: 3px; background: var(--hs-gold); }
.lp-sx .vs-rows { display: grid; gap: 6px; margin-top: 12px; }
.lp-sx .vs-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 52px; padding: 0 10px 0 6px;
  border-radius: 12px; background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent);
  transition: background 0.3s, box-shadow 0.3s;
}
.lp-sx .vs-row .th { position: relative; display: block; width: 40px; height: 40px; }
.lp-sx .vs-row .th .cr, .lp-sx .vs-row .th img { display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background-color: var(--ow-cream-deep); background-repeat: no-repeat; }
.lp-sx .vs-row .th img.p { object-fit: contain; }
/* The generated pocket watch says so on its thumbnail too. */
.lp-sx .vs-ai {
  position: absolute; right: -3px; bottom: -3px; padding: 1px 3px; border-radius: 4px;
  background: color-mix(in srgb, var(--ow-ink) 84%, transparent); color: #fff;
  font: 700 8px/1.1 var(--own-font-sans); font-style: normal; letter-spacing: 0.04em;
}
/* The AI mark stays (AI Act, Art. 50) but stops being the first thing the eye lands on. */
.lp .ax-hero--readable .lp-sx .vs-ai { opacity: 0.8; }
.lp-sx .vs-row .tt { min-width: 0; }
.lp-sx .vs-row .tt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.lp-sx .vs-row .tt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .vs-row .st {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--ow-champagne); font-size: 12px; font-weight: 700;
  opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
.lp-sx .vs-row .st .material-symbols-outlined { font-size: 15px; color: var(--ow-ed-accent); }
.lp-sx .vs-row .st.for { border-color: var(--ow-ink); background: var(--ow-ink); color: #fff; }
.lp-sx .vs-row .st.for .material-symbols-outlined { color: var(--ow-champagne); }
.lp-sx.cs-vs17 .vs-row.r-1 .st, .lp-sx.cs-vs18 .vs-row.r-2 .st, .lp-sx.cs-vs19 .vs-row.r-3 .st, .lp-sx.cs-vs20 .vs-row.r-4 .st { opacity: 1; transform: none; }
.lp-sx.cs-vs17:not(.cs-vs18) .vs-row.r-1, .lp-sx.cs-vs18:not(.cs-vs19) .vs-row.r-2,
.lp-sx.cs-vs19:not(.cs-vs20) .vs-row.r-3, .lp-sx.cs-vs20:not(.cs-vs21) .vs-row.r-4 { background: var(--ow-ed-accent-soft); box-shadow: 0 0 0 1.5px var(--ow-champagne); }
.lp-sx .vs-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: auto; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; }
.lp-sx .vs-tally > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 6px; padding: 7px 10px; border-radius: 10px; background: var(--ow-ed-accent-soft); }
.lp-sx .vs-tally .material-symbols-outlined { font-size: 15px; color: var(--ow-ed-accent); }
.lp-sx .vs-tally b { justify-self: end; font-family: var(--ow-serif); font-size: 18px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .vs-tally small { grid-column: 1 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; color: var(--hs-mute); }
.lp-sx.cs-vs21 .vs-tally { opacity: 1; transform: none; }
.lp-sx .sx-end .e-c small { display: block; margin-top: 6px; font-size: 12px; color: var(--hs-mute-2); }
@keyframes lpVsFlash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lp-sx.cs-vs1 .vs-flash { animation: none; }
}

@media (max-width: 600px) {
  .lp-sx .vs-hd, .lp-sx .vs-fh { height: 22px; }
  .lp-sx .vs-max { height: 22px; padding: 0 8px; font-size: 11px; }
  .lp-sx .vs-cam { height: 130px; margin-top: 8px; }
  .lp-sx .vs-flash { border-radius: 12px; }
  /* On the small photo the frames speak without their labels: the chips under it name the things. */
  .lp-sx .vs-cam .hs-det em, .lp-sx .vs-cam .cs-where { display: none; }
  .lp-sx .vs-got { gap: 4px; margin-top: 8px; }
  .lp-sx .vs-got > span { height: 24px; padding: 0 8px 0 4px; font-size: 11.5px; }
  .lp-sx .vs-later { padding: 7px 10px; font-size: 12.5px; }
  .lp-sx .vs-eve { height: 18px; font-size: 11.5px; }
  .lp-sx .vs-phone { width: 236px; margin-top: 6px; padding: 16px 10px 8px; border-width: 5px; border-radius: 26px; }
  .lp-sx .vs-phone::before { top: 4px; height: 5px; }
  .lp-sx .vs-ph-hd > b { font-size: 15px; }
  .lp-sx .vs-n { font-size: 10.5px; }
  .lp-sx .vs-stack { height: 118px; margin: 10px 14px 0; }
  .lp-sx .vs-card { gap: 5px; padding: 8px; border-radius: 14px; }
  .lp-sx .vs-card .ph { width: 54px; height: 54px; border-radius: 10px; }
  .lp-sx .vs-card b { font-size: 14px; }
  .lp-sx .vs-card .stamp { top: 6px; font-size: 9px; }
  .lp-sx .vs-card.give .stamp { top: 8px; }
  .lp-sx .vs-legend { gap: 4px; margin-top: 10px; font-size: 10px; }
  .lp-sx .vs-legend .material-symbols-outlined { font-size: 14px; }
  .lp-sx .vs-enough { font-size: 11.5px; }
  .lp-sx .vs-cnt { font-size: 11.5px; }
  .lp-sx .vs-cnt b { font-size: 17px; }
  .lp-sx .vs-tr { height: 5px; margin-top: 6px; }
  .lp-sx .vs-rows { gap: 4px; margin-top: 8px; }
  .lp-sx .vs-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; height: 42px; padding: 0 8px 0 5px; border-radius: 10px; }
  .lp-sx .vs-row .th, .lp-sx .vs-row .th .cr, .lp-sx .vs-row .th img { width: 32px; height: 32px; border-radius: 8px; }
  .lp-sx .vs-row .tt b { font-size: 13px; }
  .lp-sx .vs-row .tt small { font-size: 11px; }
  .lp-sx .vs-row .st { height: 22px; padding: 0 8px 0 5px; font-size: 11px; }
  .lp-sx .vs-row .st .material-symbols-outlined { font-size: 13px; }
  .lp-sx .vs-tally { gap: 4px; }
  .lp-sx .vs-tally > span { padding: 5px 7px; }
  .lp-sx .vs-tally b { font-size: 15px; }
  .lp-sx .vs-tally small { font-size: 10px; }
}

/* ── LIVE PREVIEW: THE SCENARIO FILMS ── The films of the scenario views (docs/scenario-subviews-plan.md):
   Nachlass (.nx-), Betreuung (.bt-), Schadensfall (.sf-), Auswandern (.aw-), Zeug loswerden (.lw-) and
   Sammlung geerbt (.gb-),
   each in ChapterStage{Infix}.razor and moved by cues with its own prefix. First the pieces they share —
   the camera's badges, the shared space with its people, the PDF and the "done" line — which each
   film shows with its own cues; then one block per film, the phone rules at its end. */
.lp-sx .cs-where, .lp-sx .cs-rec, .lp-sx .cs-found {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 700;
}
.lp-sx .cs-where { left: 10px; bottom: 10px; background: color-mix(in srgb, var(--ow-ink) 62%, transparent); color: #fff; font-weight: 600; }
.lp-sx .cs-where .material-symbols-outlined, .lp-sx .cs-found .material-symbols-outlined { font-size: 15px; }
.lp-sx .cs-rec {
  right: 10px; top: 10px; gap: 7px; background: color-mix(in srgb, var(--ow-ink) 66%, transparent); color: #fff;
  letter-spacing: 0.08em; opacity: 0; transition: opacity 0.3s;
}
/* The recording dot is the camera's red — a signal, not a colour of the page (as in the Bestand film). */
.lp-sx .cs-rec i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: lpCsRec 1.4s ease-in-out infinite; }
.lp-sx .cs-rec b { letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lp-sx .cs-found {
  right: 10px; top: 10px; background: var(--ow-champagne); color: var(--ow-ink);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .cs-sp { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.lp-sx .cs-sp .ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); font-size: 19px;
}
.lp-sx .cs-sp .tt { min-width: 0; }
.lp-sx .cs-sp b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--ow-serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.lp-sx .cs-sp small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .cs-ppl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-sx .cs-pp {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 4px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ow-ink) 12%, transparent); background: var(--ow-paper); font-size: 13px;
  opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .cs-pp.own { opacity: 1; transform: none; }
.lp-sx .cs-pp.p-3 { transition-delay: 0.15s; }
.lp-sx .cs-pp .av {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 12px; font-weight: 700;
}
.lp-sx .cs-pp.own .av { background: var(--ow-ink); color: var(--ow-champagne); }
.lp-sx .cs-pp b { font-weight: 600; }
.lp-sx .cs-pp small { font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .cs-pdf {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 14px 9px 10px; border-radius: 12px; background: var(--ow-ed-accent-soft);
  opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s;
}
.lp-sx .cs-pdf .ext {
  display: grid; place-items: center; height: 40px; border-radius: 6px; background: var(--ow-ink); color: #fff;
  font: 800 10px/1 var(--own-font-sans); letter-spacing: 0.08em;
}
.lp-sx .cs-pdf .tt { min-width: 0; }
.lp-sx .cs-pdf b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.lp-sx .cs-pdf small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .cs-pdf > .material-symbols-outlined { color: var(--ow-ed-accent); }
.lp-sx .cs-ok {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 10px;
  background: var(--ow-ed-accent-soft); font-size: 13px; font-weight: 600; line-height: 1.3;
  opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s;
}
.lp-sx .cs-ok .material-symbols-outlined { flex: none; color: var(--ow-ed-accent); font-size: 17px; }
@keyframes lpCsBump { 50% { transform: scale(1.05); } }

/* Nachlass 1 · Stichtag kennen (October 2026, the hero's Fristen-Rechner): the day the heir learned of
   the inheritance, then the deadline to accept or disclaim (standing out, with its days left) and the
   tax office's, and the reminder to only record until the decision. */
.lp-sx .sx-c1.nx-c0 { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-top: 0; }
.lp-sx .nx-know, .lp-sx .nx-due, .lp-sx .nx-hold { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease, border-color 0.35s ease; }
.lp-sx.cs-nx13 .nx-know, .lp-sx.cs-nx14 .nx-due.d1, .lp-sx.cs-nx15 .nx-due.d2,
.lp-sx.cs-nx16 .nx-hold { opacity: 1; transform: none; }
/* The kicker with its chip: an example, under German law. */
.lp-sx .nx-due-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-sx .nx-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ow-ink) 14%, transparent); font-size: 11px; font-weight: 600; color: var(--hs-mute);
}
.lp-sx .nx-know { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent); }
.lp-sx .nx-know .ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 17px; }
.lp-sx .nx-know .tt b, .lp-sx .nx-due .tt b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.lp-sx .nx-know .tt small, .lp-sx .nx-due .tt small { display: block; font-size: 12px; line-height: 1.35; color: var(--hs-mute-2); }
.lp-sx .nx-due {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ow-ink) 9%, transparent);
}
.lp-sx .nx-due .dd b { display: block; font-family: var(--ow-serif); font-size: 21px; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums; }
.lp-sx .nx-due .dd small { display: block; font-size: 11.5px; color: var(--hs-mute-2); }
.lp-sx .nx-due.hit { background: var(--ow-ed-accent-soft); border-color: var(--ow-champagne); }
.lp-sx .nx-due.hit .dd small { color: var(--ow-gold-ink); font-weight: 700; }
.lp-sx .nx-hold { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-size: 13px; line-height: 1.4; color: var(--hs-mute); }
.lp-sx .nx-hold .material-symbols-outlined { flex: none; font-size: 18px; color: var(--ow-gold-ink); }

/* Nachlass 2 · Werte und Schulden erfassen: the Berger flat's living room on video (the start page's
   Bestand photo and its frames), the room done, the flat's count on, accounts and loans next. */
.lp-sx .nx-c1, .lp-sx .nx-c3 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .nx-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; }
.lp-sx .nx-cnt { white-space: nowrap; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .nx-cnt b { font-family: var(--ow-serif); font-size: 20px; font-weight: 600; color: var(--ow-ink); font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .nx-cam { position: relative; flex: none; height: 200px; margin-top: 10px; }
.lp-sx .nx-cam .hs-mw { transform: translateX(4%) scale(1.08); transition: transform 3.4s linear; }
.lp-sx.cs-nx2 .nx-cam .hs-mw { transform: translateX(-4%) scale(1.08); }
.lp-sx.cs-nx1 .nx-cam .cs-rec { opacity: 1; }
.lp-sx.cs-nx3 .nx-cam .hs-det { opacity: 1; transform: none; }
.lp-sx.cs-nx4 .nx-cam .cs-rec { opacity: 0; }
.lp-sx.cs-nx4 .nx-cam .cs-found { opacity: 1; transform: none; }
.lp-sx .nx-rms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lp-sx .nx-rm {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; gap: 10px; align-items: center; height: 54px; padding: 0 10px 0 8px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ow-ink) 8%, transparent); transition: background 0.4s, border-color 0.4s;
}
.lp-sx .nx-rm .ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 15px; }
.lp-sx .nx-rm .tt { min-width: 0; }
.lp-sx .nx-rm .tt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; }
.lp-sx .nx-rm .tt small { position: relative; display: block; height: 16px; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .nx-rm .st { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.lp-sx .nx-rm.done .st { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx .nx-rm.now { background: var(--ow-ed-accent-soft); border-color: transparent; }
.lp-sx .nx-rm.now .st { color: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ow-ink) 22%, transparent); }
.lp-sx .nx-rm.now small span { transition: opacity 0.3s; }
.lp-sx .nx-rm.now small .b { position: absolute; left: 0; top: 0; opacity: 0; }
.lp-sx .nx-rm.next .st { color: var(--hs-faint); }
.lp-sx.cs-nx5 .nx-rm.now .st { background: var(--ow-champagne); color: var(--ow-ink); box-shadow: none; }
.lp-sx.cs-nx5 .nx-rm.now small .a { opacity: 0; }
.lp-sx.cs-nx5 .nx-rm.now small .b { opacity: 1; }
.lp-sx.cs-nx5 .nx-rm.next { border: 1px dashed var(--ow-ed-accent-line); }
.lp-sx.cs-nx5 .nx-rm.next .st { color: var(--ow-ed-accent); }

/* Nachlass 3 · Gemeinsam entscheiden: the co-heirs join the shared space, read the same list and
   change nothing; the list leaves as a PDF. */
.lp-sx.cs-nx10 .nx-c3 .cs-pp { opacity: 1; transform: none; }
.lp-sx .nx-sl { margin-top: 12px; padding: 10px 14px 6px; border-radius: 14px; background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent); }
.lp-sx .nx-slh { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-mute); }
.lp-sx .nx-slh b { letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--ow-ink); }
.lp-sx .nx-sr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 34px; border-top: 1px dashed color-mix(in srgb, var(--ow-ink) 12%, transparent); font-size: 13.5px; }
.lp-sx .nx-slh + .nx-sr { margin-top: 6px; }
.lp-sx .nx-sr > .material-symbols-outlined { color: var(--ow-ed-accent); font-size: 16px; }
.lp-sx .nx-sr b { font-weight: 600; }
.lp-sx .nx-sr span:last-child { font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .nx-lock {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px -8px 2px; padding: 7px 12px; border-radius: 10px;
  background: var(--ow-ink); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .nx-lock .material-symbols-outlined { color: var(--ow-champagne); font-size: 14px; }
.lp-sx.cs-nx11 .nx-lock { opacity: 1; transform: none; }
.lp-sx .nx-c3 .cs-pdf { margin-top: 12px; }
.lp-sx.cs-nx12 .nx-c3 .cs-pdf { opacity: 1; transform: none; }

/* Sammlung geerbt 1 · Alben filmen: the coin album on video (the S01 capture's five coins), the
   coins framed slot by slot, then ticked off below piece by piece while the header counts them and
   adds up their spans. */
.lp-sx .sx-c1.gb-c1, .lp-sx .gb-c2, .lp-sx .gb-c3 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .gb-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; }
.lp-sx .gb-cnt { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .gb-cnt b { font-family: var(--ow-serif); font-size: 20px; font-weight: 600; color: var(--ow-ink); font-variant-numeric: lining-nums tabular-nums; }
/* The pieces' spans added up, beside the count once the album is filmed. */
.lp-sx .gb-cnt .gb-sum { padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--ow-ink) 14%, transparent); opacity: 0; transition: opacity 0.35s; }
.lp-sx.cs-gb4 .gb-cnt .gb-sum { opacity: 1; }
@media (max-width: 380px) {
  .lp-sx .gb-hd .ov-k .material-symbols-outlined { display: none; }
}
.lp-sx .gb-cam { position: relative; flex: none; height: 200px; margin-top: 10px; }
.lp-sx .gb-page {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
  gap: 12px; padding: 34px 18px 42px; border-radius: 14px; background: var(--ow-ink); container-type: size;
  transform: translateX(3%) scale(1.04); transition: transform 3.4s linear;
}
.lp-sx.cs-gb2 .gb-page { transform: translateX(-3%) scale(1.04); }
/* One coin slot of the album page: a round well with the coin, framed when OWNY sees it. The well
   is as wide as its column or as tall as the page (100cqh, its content height), whichever is less,
   so the round wells never run into each other however flat the camera frame gets. The coin is the
   photo's cut-out, turned as it lies and drawn in a little so no table shows at the rim. */
.lp-sx .gb-slot {
  width: min(100%, 100cqh); aspect-ratio: 1; place-self: center; overflow: hidden; border-radius: 50%;
  background: color-mix(in srgb, var(--ow-paper) 10%, transparent);
  box-shadow: 0 0 0 2px transparent, 0 3px 8px rgba(0, 0, 0, 0.45); transition: box-shadow 0.3s calc(var(--d) * 0.12s);
}
.lp-sx .gb-slot img { display: block; width: 100%; height: 100%; object-fit: cover; transform: rotate(var(--r, 0deg)) scale(1.1); }
.lp-sx.cs-gb1 .gb-cam .cs-rec { opacity: 1; }
.lp-sx.cs-gb3 .gb-slot { box-shadow: 0 0 0 2px var(--ow-champagne), 0 3px 8px rgba(0, 0, 0, 0.45); }
.lp-sx.cs-gb4 .gb-cam .cs-rec { opacity: 0; }
.lp-sx.cs-gb4 .gb-cam .cs-found { opacity: 1; transform: none; }
.lp-sx .gb-albs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
/* One piece of the album below the camera: the coin, its name and span, ticked off once found. */
.lp-sx .gb-alb {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; gap: 10px; align-items: center; height: 54px; padding: 0 10px 0 8px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ow-ink) 8%, transparent);
}
.lp-sx .gb-alb .ic { width: 32px; height: 32px; overflow: hidden; border-radius: 50%; }
.lp-sx .gb-alb .ic img, .lp-sx .gb-th img, .lp-sx .gb-sr img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.1); }
.lp-sx .gb-alb .tt { min-width: 0; }
.lp-sx .gb-alb .tt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; }
.lp-sx .gb-alb .tt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .gb-alb .st {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ow-ink) 22%, transparent);
  transition: background 0.3s calc(var(--d) * 0.15s), color 0.3s calc(var(--d) * 0.15s), box-shadow 0.3s calc(var(--d) * 0.15s);
}
.lp-sx.cs-gb4 .gb-alb .st { background: var(--ow-champagne); color: var(--ow-ink); box-shadow: none; }

/* Sammlung geerbt 2 · OWNY markiert, was auffällt: the rarity row by row (the product's labels), one
   coin stands out — its reference span, the advice to show it to the trade, the flag before a sale. */
.lp-sx.cs-gb7 .gb-o .t1 { display: none; }
.lp-sx.cs-gb7 .gb-o .t2 { display: inline; }
.lp-sx.cs-gb7 .gb-o img { animation: none; }
.lp-sx .gb-list { display: grid; gap: 6px; margin-top: 10px; }
.lp-sx .gb-it {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 50px; padding: 0 10px 0 5px;
  border-radius: 12px; border: 1px solid transparent; border-top-color: color-mix(in srgb, var(--ow-ink) 7%, transparent);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, opacity 0.4s;
}
.lp-sx .gb-th { position: relative; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; }
.lp-sx .gb-it .tt { min-width: 0; }
.lp-sx .gb-it .tt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.lp-sx .gb-it .tt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .gb-rar { position: relative; min-width: 96px; height: 24px; text-align: right; }
.lp-sx .gb-rar .sk {
  position: absolute; right: 0; top: 50%; width: 80px; height: 9px; margin-top: -4.5px; border-radius: 5px;
  background: linear-gradient(90deg, #eee6d6, #f8f3ea, #eee6d6); background-size: 200% 100%;
  animation: lpHsShim 1.1s linear infinite; transition: opacity 0.2s calc(var(--d) * 0.28s);
}
.lp-sx .gb-rar .tx {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ow-ink) 14%, transparent); font-size: 12px; font-weight: 600; color: var(--hs-mute);
  opacity: 0; transform: translateX(4px); transition: opacity 0.3s calc(var(--d) * 0.28s), transform 0.3s calc(var(--d) * 0.28s);
}
.lp-sx .gb-it.hit .gb-rar .tx { border-color: var(--ow-champagne); background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx.cs-gb6 .gb-rar .sk { opacity: 0; }
.lp-sx.cs-gb6 .gb-rar .tx { opacity: 1; transform: none; }
.lp-sx.cs-gb7 .gb-it.hit { background: var(--ow-ed-accent-soft); border-color: var(--ow-champagne); box-shadow: 0 8px 20px rgba(70, 52, 20, 0.12); }
.lp-sx.cs-gb7 .gb-it:not(.hit) { opacity: 0.5; }
.lp-sx .gb-det {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; margin-top: 10px; padding: 12px 14px;
  border-radius: 12px; border: 1px dashed var(--ow-ed-accent-line); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s;
}
.lp-sx.cs-gb8 .gb-det { opacity: 1; transform: none; }
.lp-sx .gb-dl small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ow-ed-accent); }
.lp-sx .gb-dl b { display: block; font-family: var(--ow-serif); font-size: 22px; font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums; }
.lp-sx .gb-tip { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--hs-mute); }
.lp-sx .gb-tip .material-symbols-outlined { flex: none; color: var(--ow-champagne-deep); font-size: 16px; }
.lp-sx .gb-flag {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 8px;
  border-radius: 8px; border: 2px solid var(--ow-gold-ink); color: var(--ow-gold-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0; transform: rotate(-3deg) scale(1.15); transition: opacity 0.25s, transform 0.25s;
}
.lp-sx.cs-gb9 .gb-flag { opacity: 1; transform: rotate(-3deg); }

/* Sammlung geerbt 3 · Eine Akte für alle: the co-heirs join the shared space, see the same pieces
   and change nothing; the collection file leaves as a PDF. */
.lp-sx.cs-gb10 .gb-c3 .cs-pp { opacity: 1; transform: none; }
.lp-sx .gb-sl { margin-top: 12px; padding: 10px 14px 6px; border-radius: 14px; background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent); }
.lp-sx .gb-slh { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-mute); }
.lp-sx .gb-slh b { letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--ow-ink); }
.lp-sx .gb-sr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 34px; border-top: 1px dashed color-mix(in srgb, var(--ow-ink) 12%, transparent); font-size: 13.5px; }
.lp-sx .gb-slh + .gb-sr { margin-top: 6px; }
.lp-sx .gb-sr > img { width: 22px; height: 22px; }
.lp-sx .gb-sr b { font-weight: 600; }
.lp-sx .gb-sr span:last-child { font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .gb-lock {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px -8px 2px; padding: 7px 12px; border-radius: 10px;
  background: var(--ow-ink); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .gb-lock .material-symbols-outlined { color: var(--ow-champagne); font-size: 14px; }
.lp-sx.cs-gb11 .gb-lock { opacity: 1; transform: none; }
.lp-sx .gb-c3 .cs-pdf { margin-top: 12px; }
.lp-sx.cs-gb12 .gb-c3 .cs-pdf { opacity: 1; transform: none; }

/* Sammlungswert (ChapterStageSammlungswert, the design "Hero neu geordnet"): one coin photo and one
   collection. 1 · the camera's four guides close in on the coin and the shutter falls; 2 · OWNY's
   frame draws round the coin, "Erkannt" comes up and the piece is named with its range; 3 · the album
   and the coins come in as rows, the collection's span counts up, "Teilen oder vererben". */
.lp-sx .sw-c1, .lp-sx .sw-c2 { display: flex; flex-direction: column; gap: 12px; }
.lp-sx .sw-shot { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 14px; background: #1b2140; }
.lp-sx .sw-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The camera's guides: four white corners that close in on the coin. */
.lp-sx .sw-g {
  position: absolute; width: 28px; height: 28px; border: 0 solid #fff; opacity: 0.5;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}
.lp-sx .sw-g.g-tl { left: 18px; top: 18px; border-left-width: 3px; border-top-width: 3px; transform: translate(-10px, -10px); }
.lp-sx .sw-g.g-tr { right: 18px; top: 18px; border-right-width: 3px; border-top-width: 3px; transform: translate(10px, -10px); }
.lp-sx .sw-g.g-bl { left: 18px; bottom: 18px; border-left-width: 3px; border-bottom-width: 3px; transform: translate(-10px, 10px); }
.lp-sx .sw-g.g-br { right: 18px; bottom: 18px; border-right-width: 3px; border-bottom-width: 3px; transform: translate(10px, 10px); }
.lp-sx.cs-sw1 .sw-g { transform: none; opacity: 1; }
.lp-sx .sw-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  background: rgba(11, 16, 32, 0.78); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(6px);
}
.lp-sx .sw-chip .material-symbols-outlined { font-size: 16px; }
.lp-sx .sw-chip.sw-gold { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx .sw-aim { left: 50%; bottom: 16px; transform: translateX(-50%); }
/* The shutter: one white flash over the photo. */
.lp-sx .sw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.lp-sx.cs-sw2 .sw-flash { animation: lpSwFlash 0.55s ease-out; }
@keyframes lpSwFlash { 0% { opacity: 0; } 18% { opacity: 0.85; } 100% { opacity: 0; } }
/* OWNY's frame round the coin, the rest of the photo dimmed. */
.lp-sx .sw-frame {
  position: absolute; left: 22%; top: 8%; width: 56%; height: 84%; border: 2px solid var(--ow-champagne); border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(11, 16, 32, 0.35); opacity: 0; transform: scale(1.18);
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lp-sx.cs-sw3 .sw-frame { opacity: 1; transform: none; }
.lp-sx .sw-found { right: 12px; top: 12px; opacity: 0; transform: scale(0.85); transition: opacity 0.3s ease, transform 0.3s ease; }
.lp-sx.cs-sw4 .sw-found { opacity: 1; transform: none; }
/* A row of the card: icon tile, name over its line, the range on the right. */
.lp-sx .sw-row { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ow-ink) 10%, transparent); }
.lp-sx .sw-c1 .sw-row, .lp-sx .sw-c2 .sw-row { padding-bottom: 0; border-bottom: 0; }
.lp-sx .sw-row .ri {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ow-cream-deep); color: var(--ow-gold-ink);
}
.lp-sx .sw-row .ri .material-symbols-outlined { font-size: 20px; }
.lp-sx .sw-row .tt { min-width: 0; }
.lp-sx .sw-row .tt b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ow-ink); }
.lp-sx .sw-row .tt small { display: block; font-size: 13px; line-height: 1.35; color: var(--hs-mute-2); }
.lp-sx .sw-row .v { margin-left: auto; font-family: var(--ow-serif); font-size: 22px; font-weight: 600; white-space: nowrap; color: var(--ow-ink); font-variant-numeric: lining-nums; }
.lp-sx .sw-name { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.lp-sx.cs-sw5 .sw-name { opacity: 1; transform: none; }
/* Chapter 3: the collection — rows rise in one by one, the span and the way to share it follow. */
.lp-sx .sw-c3 { display: flex; flex-direction: column; justify-content: center; }
.lp-sx .sw-r1, .lp-sx .sw-r2, .lp-sx .sw-sum, .lp-sx .sw-dark { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.lp-sx.cs-sw6 .sw-r1, .lp-sx.cs-sw7 .sw-r2, .lp-sx.cs-sw8 .sw-sum, .lp-sx.cs-sw9 .sw-dark { opacity: 1; transform: none; }
.lp-sx .sw-r2 { border-bottom: 0; }
.lp-sx .sw-sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px;
  padding: 14px 16px; border-radius: 12px; background: var(--ow-ink); color: #fff;
}
.lp-sx .sw-sum span { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.lp-sx .sw-sum b { font-family: var(--ow-serif); font-size: 28px; font-weight: 600; white-space: nowrap; color: var(--ow-champagne); font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .sw-dark {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 12px;
  border-radius: 12px; background: var(--ow-ink); color: #fff; font-size: 14.5px; font-weight: 700;
}
.lp-sx .sw-dark .material-symbols-outlined { font-size: 19px; color: var(--ow-champagne); }
@media (max-width: 600px) {
  .lp-sx .sw-c1, .lp-sx .sw-c2 { gap: 10px; }
  .lp-sx .sw-g { width: 24px; height: 24px; }
  .lp-sx .sw-g.g-tl, .lp-sx .sw-g.g-bl { left: 14px; }
  .lp-sx .sw-g.g-tr, .lp-sx .sw-g.g-br { right: 14px; }
  .lp-sx .sw-g.g-tl, .lp-sx .sw-g.g-tr { top: 14px; }
  .lp-sx .sw-g.g-bl, .lp-sx .sw-g.g-br { bottom: 14px; }
  .lp-sx .sw-aim { bottom: 12px; }
  .lp-sx .sw-row { gap: 12px; padding: 10px 0; }
  .lp-sx .sw-row .tt b { font-size: 14px; }
  .lp-sx .sw-row .tt small { font-size: 12px; }
  .lp-sx .sw-row .v { font-size: 20px; }
  .lp-sx .sw-sum { margin-top: 8px; padding: 12px 14px; }
  .lp-sx .sw-sum b { font-size: 24px; }
  .lp-sx .sw-dark { height: 42px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-sx .sw-g, .lp-sx .sw-frame, .lp-sx .sw-found, .lp-sx .sw-name,
  .lp-sx .sw-r1, .lp-sx .sw-r2, .lp-sx .sw-sum, .lp-sx .sw-dark { transition: none; }
  .lp-sx.cs-sw2 .sw-flash { animation: none; }
}

/* ── Partner films (ChapterStagePp*.razor, PartnerHero.razor) ── The partner pages' three-step films
   share one vocabulary, so five films need no styles of their own: a cue p{n} (ChapterStageCatalog
   .PartnerFilms) brings in what carries .pf-in.i{n}, lets the flash .f{n} fall, presses the button
   .t{n}, turns on the switch .s{n} and swipes away the card .w{n}. Ink and champagne for every filled
   mark, the edition's undertone for the kickers only (docs/farbhomogenisierung-konzept.md). */
.lp-sx .pf-c { display: flex; flex-direction: column; gap: 10px; font-variant-numeric: lining-nums; }
.lp-sx .pf-mid { justify-content: center; }
.lp-sx .pf-in { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.lp-sx.cs-p1 .pf-in.i1,
.lp-sx.cs-p2 .pf-in.i2,
.lp-sx.cs-p3 .pf-in.i3,
.lp-sx.cs-p4 .pf-in.i4,
.lp-sx.cs-p5 .pf-in.i5,
.lp-sx.cs-p6 .pf-in.i6,
.lp-sx.cs-p7 .pf-in.i7,
.lp-sx.cs-p8 .pf-in.i8,
.lp-sx.cs-p9 .pf-in.i9,
.lp-sx.cs-p10 .pf-in.i10,
.lp-sx.cs-p11 .pf-in.i11,
.lp-sx.cs-p12 .pf-in.i12,
.lp-sx.cs-p13 .pf-in.i13,
.lp-sx.cs-p14 .pf-in.i14,
.lp-sx.cs-p15 .pf-in.i15,
.lp-sx.cs-p16 .pf-in.i16 { opacity: 1; transform: none; }
.lp-sx .pf-k {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-ed-accent);
}
.lp-sx .pf-k .material-symbols-outlined { font-size: 16px; }
/* A photo with the camera's guides, the shutter, OWNY's frames or the code scanner's beam. */
.lp-sx .pf-shot { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 14px; background: #1b2140; }
.lp-sx .pf-shot--short { flex: 0 0 150px; }
.lp-sx .pf-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-sx .pf-g {
  position: absolute; width: 26px; height: 26px; border: 0 solid #fff; opacity: 0.5;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}
.lp-sx .pf-g.g-tl { left: 16px; top: 16px; border-left-width: 3px; border-top-width: 3px; transform: translate(-10px, -10px); }
.lp-sx .pf-g.g-tr { right: 16px; top: 16px; border-right-width: 3px; border-top-width: 3px; transform: translate(10px, -10px); }
.lp-sx .pf-g.g-bl { left: 16px; bottom: 16px; border-left-width: 3px; border-bottom-width: 3px; transform: translate(-10px, 10px); }
.lp-sx .pf-g.g-br { right: 16px; bottom: 16px; border-right-width: 3px; border-bottom-width: 3px; transform: translate(10px, 10px); }
.lp-sx.cs-p1 .pf-g { transform: none; opacity: 1; }
.lp-sx .pf-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  background: rgba(11, 16, 32, 0.78); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(6px);
}
.lp-sx .pf-chip .material-symbols-outlined { font-size: 16px; }
.lp-sx .pf-chip.pf-gold { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx .pf-aim { left: 50%; bottom: 14px; transform: translateX(-50%); }
.lp-sx .pf-found { right: 12px; top: 12px; }
.lp-sx .pf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.lp-sx.cs-p1 .pf-flash.f1,
.lp-sx.cs-p2 .pf-flash.f2,
.lp-sx.cs-p3 .pf-flash.f3,
.lp-sx.cs-p4 .pf-flash.f4,
.lp-sx.cs-p5 .pf-flash.f5,
.lp-sx.cs-p6 .pf-flash.f6,
.lp-sx.cs-p7 .pf-flash.f7,
.lp-sx.cs-p8 .pf-flash.f8,
.lp-sx.cs-p9 .pf-flash.f9,
.lp-sx.cs-p10 .pf-flash.f10,
.lp-sx.cs-p11 .pf-flash.f11,
.lp-sx.cs-p12 .pf-flash.f12,
.lp-sx.cs-p13 .pf-flash.f13,
.lp-sx.cs-p14 .pf-flash.f14,
.lp-sx.cs-p15 .pf-flash.f15,
.lp-sx.cs-p16 .pf-flash.f16 { animation: lpSwFlash 0.55s ease-out; }
/* OWNY's frames round what it found on the photo. */
.lp-sx .pf-box { position: absolute; border: 2px solid var(--ow-champagne); border-radius: 8px; box-shadow: 0 0 0 1px rgba(11, 16, 32, 0.25); }
.lp-sx .pf-box.b1 { left: 14%; top: 18%; width: 18%; height: 30%; }
.lp-sx .pf-box.b2 { left: 42%; top: 22%; width: 16%; height: 24%; transition-delay: 0.15s; }
.lp-sx .pf-box.b3 { left: 66%; top: 14%; width: 20%; height: 34%; transition-delay: 0.3s; }
/* The code scanner: a champagne beam running over the photo. */
.lp-sx .pf-scan {
  position: absolute; left: 10%; right: 10%; top: 12%; height: 2px; border-radius: 2px;
  background: var(--ow-champagne); box-shadow: 0 0 12px 2px rgba(201, 169, 106, 0.7);
  animation: lpPfScan 1.8s ease-in-out infinite alternate;
}
@keyframes lpPfScan { from { top: 12%; } to { top: 86%; } }
/* A row: icon tile, name over its line, a value on the right. */
.lp-sx .pf-list { display: flex; flex-direction: column; }
.lp-sx .pf-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hs-hair); }
.lp-sx .pf-list .pf-row:last-child, .lp-sx .pf-c > .pf-row, .lp-sx .pf-mail .pf-row { border-bottom: 0; }
.lp-sx .pf-row .ri, .lp-sx .pf-party .ri, .lp-sx .pf-card .ri, .lp-sx .pf-mail-h .ri {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ow-cream-deep); color: var(--ow-gold-ink);
}
.lp-sx .pf-row .ri .material-symbols-outlined, .lp-sx .pf-party .ri .material-symbols-outlined,
.lp-sx .pf-card .ri .material-symbols-outlined, .lp-sx .pf-mail-h .ri .material-symbols-outlined { font-size: 19px; }
.lp-sx .pf-c .tt { min-width: 0; }
.lp-sx .pf-c .tt b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--ow-ink); }
.lp-sx .pf-c .tt small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--hs-mute-2); }
.lp-sx .pf-row .v { margin-left: auto; font-family: var(--ow-serif); font-size: 21px; font-weight: 600; white-space: nowrap; color: var(--ow-ink); }
/* A small seal at the end of a row: the dealer who confirms with the business's e-mail address. */
.lp-sx .pf-tag {
  flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 9px; border-radius: 999px;
  background: var(--ow-ink); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.lp-sx .pf-tag .material-symbols-outlined { font-size: 14px; color: var(--ow-champagne); }
/* The object the entry is about, small. */
.lp-sx .pf-obj { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--hs-hair); }
.lp-sx .pf-obj img { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
/* A field being typed into, with its caret. */
.lp-sx .pf-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1.5px solid var(--ow-champagne); }
.lp-sx .pf-field .lb { flex: 0 0 100%; font-size: 11.5px; font-weight: 600; color: var(--hs-mute-2); }
.lp-sx .pf-field b { min-height: 1.3em; font-size: 15px; font-weight: 600; color: var(--ow-ink); white-space: nowrap; overflow: hidden; }
.lp-sx .pf-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--ow-ink); align-self: center; animation: lpPfCaret 1s steps(1) infinite; }
@keyframes lpPfCaret { 50% { opacity: 0; } }
/* The button the film presses: ink, then champagne with a check. */
.lp-sx .pf-btn {
  position: relative; display: grid; place-items: center; height: 44px; border-radius: 12px;
  background: var(--ow-ink); color: #fff; font-size: 14.5px; font-weight: 700; transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease;
}
.lp-sx .pf-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.25s ease; }
.lp-sx .pf-btn .material-symbols-outlined { font-size: 19px; color: var(--ow-champagne); }
.lp-sx .pf-btn .b { opacity: 0; }
.lp-sx.cs-p1 .pf-btn.t1,
.lp-sx.cs-p2 .pf-btn.t2,
.lp-sx.cs-p3 .pf-btn.t3,
.lp-sx.cs-p4 .pf-btn.t4,
.lp-sx.cs-p5 .pf-btn.t5,
.lp-sx.cs-p6 .pf-btn.t6,
.lp-sx.cs-p7 .pf-btn.t7,
.lp-sx.cs-p8 .pf-btn.t8,
.lp-sx.cs-p9 .pf-btn.t9,
.lp-sx.cs-p10 .pf-btn.t10,
.lp-sx.cs-p11 .pf-btn.t11,
.lp-sx.cs-p12 .pf-btn.t12,
.lp-sx.cs-p13 .pf-btn.t13,
.lp-sx.cs-p14 .pf-btn.t14,
.lp-sx.cs-p15 .pf-btn.t15,
.lp-sx.cs-p16 .pf-btn.t16 { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx.cs-p1 .pf-btn.t1 .a,
.lp-sx.cs-p2 .pf-btn.t2 .a,
.lp-sx.cs-p3 .pf-btn.t3 .a,
.lp-sx.cs-p4 .pf-btn.t4 .a,
.lp-sx.cs-p5 .pf-btn.t5 .a,
.lp-sx.cs-p6 .pf-btn.t6 .a,
.lp-sx.cs-p7 .pf-btn.t7 .a,
.lp-sx.cs-p8 .pf-btn.t8 .a,
.lp-sx.cs-p9 .pf-btn.t9 .a,
.lp-sx.cs-p10 .pf-btn.t10 .a,
.lp-sx.cs-p11 .pf-btn.t11 .a,
.lp-sx.cs-p12 .pf-btn.t12 .a,
.lp-sx.cs-p13 .pf-btn.t13 .a,
.lp-sx.cs-p14 .pf-btn.t14 .a,
.lp-sx.cs-p15 .pf-btn.t15 .a,
.lp-sx.cs-p16 .pf-btn.t16 .a { opacity: 0; }
.lp-sx.cs-p1 .pf-btn.t1 .b,
.lp-sx.cs-p2 .pf-btn.t2 .b,
.lp-sx.cs-p3 .pf-btn.t3 .b,
.lp-sx.cs-p4 .pf-btn.t4 .b,
.lp-sx.cs-p5 .pf-btn.t5 .b,
.lp-sx.cs-p6 .pf-btn.t6 .b,
.lp-sx.cs-p7 .pf-btn.t7 .b,
.lp-sx.cs-p8 .pf-btn.t8 .b,
.lp-sx.cs-p9 .pf-btn.t9 .b,
.lp-sx.cs-p10 .pf-btn.t10 .b,
.lp-sx.cs-p11 .pf-btn.t11 .b,
.lp-sx.cs-p12 .pf-btn.t12 .b,
.lp-sx.cs-p13 .pf-btn.t13 .b,
.lp-sx.cs-p14 .pf-btn.t14 .b,
.lp-sx.cs-p15 .pf-btn.t15 .b,
.lp-sx.cs-p16 .pf-btn.t16 .b { opacity: 1; }
.lp-sx.cs-p1 .pf-btn.t1 .material-symbols-outlined,
.lp-sx.cs-p2 .pf-btn.t2 .material-symbols-outlined,
.lp-sx.cs-p3 .pf-btn.t3 .material-symbols-outlined,
.lp-sx.cs-p4 .pf-btn.t4 .material-symbols-outlined,
.lp-sx.cs-p5 .pf-btn.t5 .material-symbols-outlined,
.lp-sx.cs-p6 .pf-btn.t6 .material-symbols-outlined,
.lp-sx.cs-p7 .pf-btn.t7 .material-symbols-outlined,
.lp-sx.cs-p8 .pf-btn.t8 .material-symbols-outlined,
.lp-sx.cs-p9 .pf-btn.t9 .material-symbols-outlined,
.lp-sx.cs-p10 .pf-btn.t10 .material-symbols-outlined,
.lp-sx.cs-p11 .pf-btn.t11 .material-symbols-outlined,
.lp-sx.cs-p12 .pf-btn.t12 .material-symbols-outlined,
.lp-sx.cs-p13 .pf-btn.t13 .material-symbols-outlined,
.lp-sx.cs-p14 .pf-btn.t14 .material-symbols-outlined,
.lp-sx.cs-p15 .pf-btn.t15 .material-symbols-outlined,
.lp-sx.cs-p16 .pf-btn.t16 .material-symbols-outlined { color: var(--ow-ink); }
/* What a step achieved: a cream plate with a gold seal. */
.lp-sx .pf-badge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ow-cream-deep); }
.lp-sx .pf-badge > .material-symbols-outlined { flex: none; font-size: 26px; color: var(--ow-gold-ink); }
.lp-sx .pf-note { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--hs-mute); }
.lp-sx .pf-note .material-symbols-outlined { flex: none; font-size: 17px; color: var(--ow-gold-ink); }
/* The hand-over: the shop, the code passing, the customer. */
.lp-sx .pf-xfer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 6px; }
.lp-sx .pf-party { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--hs-hair); }
.lp-sx .pf-party .ri { margin-bottom: 4px; }
.lp-sx .pf-party b { font-size: 13.5px; line-height: 1.2; color: var(--ow-ink); }
.lp-sx .pf-party small { font-size: 11.5px; line-height: 1.3; color: var(--hs-mute-2); }
.lp-sx .pf-pass { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-sx .pf-plate { padding: 5px 9px; border-radius: 8px; background: var(--ow-ink); color: var(--ow-champagne); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; white-space: nowrap; }
.lp-sx .pf-arrow { position: relative; display: block; width: 0; height: 2px; background: var(--ow-champagne); transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.lp-sx .pf-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--ow-champagne); border-right: 0; }
.lp-sx.cs-p9 .pf-arrow { width: 80%; }
/* What goes to the customer with the object (Fachhandel, chapter 3): the files attached to it and the
   dealer's signature, as chips — the signature in ink, the files on paper. */
.lp-sx .pf-carry { display: flex; flex-direction: column; gap: 6px; }
.lp-sx .pf-carry .lb { font-size: 12px; font-weight: 600; color: var(--hs-mute-2); }
.lp-sx .pf-carry-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-sx .pf-carry-chips > span {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--hs-hair); background: var(--ow-paper); font-size: 12.5px; font-weight: 600; color: var(--ow-ink); white-space: nowrap;
}
.lp-sx .pf-carry-chips > span .material-symbols-outlined { font-size: 15px; color: var(--ow-gold-ink); }
.lp-sx .pf-carry-chips > span.on { background: var(--ow-ink); border-color: var(--ow-ink); color: #fff; }
.lp-sx .pf-carry-chips > span.on .material-symbols-outlined { color: var(--ow-champagne); }
/* A specimen photographed on black (the vanadinite): the frame keeps the photo's own ground. */
.lp-sx .pf-shot.pf-shot--dark { background: #0d0c0c; }
@media (max-width: 600px) {
  .lp-sx .pf-carry .lb { font-size: 11px; }
  .lp-sx .pf-carry-chips { gap: 5px; }
  .lp-sx .pf-carry-chips > span { padding: 4px 8px; font-size: 11.5px; }
}
/* An invitation as it leaves. */
.lp-sx .pf-mail { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--hs-hair); }
.lp-sx .pf-mail-h { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hs-hair); }
.lp-sx .pf-mail p { margin: 10px 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--hs-mute); }
/* A switch the film turns on. */
.lp-sx .pf-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ow-paper); border: 1px solid var(--hs-hair); }
.lp-sx .pf-toggle > .material-symbols-outlined { flex: none; font-size: 21px; color: var(--ow-gold-ink); }
.lp-sx .pf-sw { position: relative; flex: none; width: 40px; height: 24px; margin-left: auto; border-radius: 999px; background: color-mix(in srgb, var(--ow-ink) 16%, transparent); transition: background 0.3s ease; }
.lp-sx .pf-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 16, 32, 0.25); transition: transform 0.3s ease; }
.lp-sx.cs-p1 .pf-toggle.s1 .pf-sw,
.lp-sx.cs-p2 .pf-toggle.s2 .pf-sw,
.lp-sx.cs-p3 .pf-toggle.s3 .pf-sw,
.lp-sx.cs-p4 .pf-toggle.s4 .pf-sw,
.lp-sx.cs-p5 .pf-toggle.s5 .pf-sw,
.lp-sx.cs-p6 .pf-toggle.s6 .pf-sw,
.lp-sx.cs-p7 .pf-toggle.s7 .pf-sw,
.lp-sx.cs-p8 .pf-toggle.s8 .pf-sw,
.lp-sx.cs-p9 .pf-toggle.s9 .pf-sw,
.lp-sx.cs-p10 .pf-toggle.s10 .pf-sw,
.lp-sx.cs-p11 .pf-toggle.s11 .pf-sw,
.lp-sx.cs-p12 .pf-toggle.s12 .pf-sw,
.lp-sx.cs-p13 .pf-toggle.s13 .pf-sw,
.lp-sx.cs-p14 .pf-toggle.s14 .pf-sw,
.lp-sx.cs-p15 .pf-toggle.s15 .pf-sw,
.lp-sx.cs-p16 .pf-toggle.s16 .pf-sw { background: var(--ow-champagne); }
.lp-sx.cs-p1 .pf-toggle.s1 .pf-sw::after,
.lp-sx.cs-p2 .pf-toggle.s2 .pf-sw::after,
.lp-sx.cs-p3 .pf-toggle.s3 .pf-sw::after,
.lp-sx.cs-p4 .pf-toggle.s4 .pf-sw::after,
.lp-sx.cs-p5 .pf-toggle.s5 .pf-sw::after,
.lp-sx.cs-p6 .pf-toggle.s6 .pf-sw::after,
.lp-sx.cs-p7 .pf-toggle.s7 .pf-sw::after,
.lp-sx.cs-p8 .pf-toggle.s8 .pf-sw::after,
.lp-sx.cs-p9 .pf-toggle.s9 .pf-sw::after,
.lp-sx.cs-p10 .pf-toggle.s10 .pf-sw::after,
.lp-sx.cs-p11 .pf-toggle.s11 .pf-sw::after,
.lp-sx.cs-p12 .pf-toggle.s12 .pf-sw::after,
.lp-sx.cs-p13 .pf-toggle.s13 .pf-sw::after,
.lp-sx.cs-p14 .pf-toggle.s14 .pf-sw::after,
.lp-sx.cs-p15 .pf-toggle.s15 .pf-sw::after,
.lp-sx.cs-p16 .pf-toggle.s16 .pf-sw::after { transform: translateX(16px); }
/* The whole picture in four tiles, and a sum on ink. */
.lp-sx .pf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-sx .pf-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--ow-paper); border: 1px solid var(--hs-hair); }
.lp-sx .pf-tile .material-symbols-outlined { font-size: 19px; color: var(--ow-gold-ink); }
.lp-sx .pf-tile small { margin-top: 4px; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .pf-tile b { font-family: var(--ow-serif); font-size: 18px; font-weight: 600; white-space: nowrap; color: var(--ow-ink); font-variant-numeric: lining-nums; }
.lp-sx .pf-sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-radius: 12px; background: var(--ow-ink); color: #fff;
}
.lp-sx .pf-sum > span { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.lp-sx .pf-sum b { font-family: var(--ow-serif); font-size: 24px; font-weight: 600; white-space: nowrap; color: var(--ow-champagne); font-variant-numeric: lining-nums tabular-nums; }
/* The deck the coach's client swipes, and the three piles under it. */
.lp-sx .pf-deck { position: relative; height: 66px; }
/* Under the cards: what is left once all three are swiped. */
.lp-sx .pf-deck-done {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--ow-ink) 18%, transparent); font-size: 13.5px; font-weight: 600; color: var(--hs-mute);
}
.lp-sx .pf-deck-done .material-symbols-outlined { font-size: 19px; color: var(--ow-gold-ink); }
.lp-sx .pf-card {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--hs-hair); box-shadow: 0 10px 24px -14px rgba(11, 16, 32, 0.4);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}
.lp-sx .pf-card.l { --fly: translateX(-125%) rotate(-12deg); }
.lp-sx .pf-card.u { --fly: translateY(-150%) rotate(-3deg); }
.lp-sx .pf-card.r { --fly: translateX(125%) rotate(12deg); }
.lp-sx.cs-p1 .pf-card.w1,
.lp-sx.cs-p2 .pf-card.w2,
.lp-sx.cs-p3 .pf-card.w3,
.lp-sx.cs-p4 .pf-card.w4,
.lp-sx.cs-p5 .pf-card.w5,
.lp-sx.cs-p6 .pf-card.w6,
.lp-sx.cs-p7 .pf-card.w7,
.lp-sx.cs-p8 .pf-card.w8,
.lp-sx.cs-p9 .pf-card.w9,
.lp-sx.cs-p10 .pf-card.w10,
.lp-sx.cs-p11 .pf-card.w11,
.lp-sx.cs-p12 .pf-card.w12,
.lp-sx.cs-p13 .pf-card.w13,
.lp-sx.cs-p14 .pf-card.w14,
.lp-sx.cs-p15 .pf-card.w15,
.lp-sx.cs-p16 .pf-card.w16 { transform: var(--fly); opacity: 0; }
.lp-sx .pf-piles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lp-sx .pf-pile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 12px; background: var(--ow-paper); border: 1px dashed color-mix(in srgb, var(--ow-ink) 18%, transparent); text-align: center; }
.lp-sx .pf-pile .material-symbols-outlined { font-size: 20px; color: var(--ow-gold-ink); }
.lp-sx .pf-pile .nm { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ow-ink); }
.lp-sx .pf-plus { position: absolute; top: -9px; right: -4px; padding: 2px 7px; border-radius: 999px; background: var(--ow-champagne); color: var(--ow-ink); font-size: 11.5px; font-weight: 700; }
/* The coach's board: a pile per row, its count and its share. */
.lp-sx .pf-board { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--hs-hair); }
.lp-sx .pf-bar { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; }
.lp-sx .pf-bar .material-symbols-outlined { font-size: 19px; color: var(--ow-gold-ink); }
.lp-sx .pf-bar .nm { font-size: 13px; font-weight: 600; color: var(--ow-ink); }
.lp-sx .pf-bar b { font-family: var(--ow-serif); font-size: 19px; font-weight: 600; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.lp-sx .pf-bar .tr { grid-column: 2 / -1; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 8%, transparent); }
.lp-sx .pf-bar .tr i { display: block; height: 100%; border-radius: 3px; background: var(--ow-champagne); }
/* An object's biography: year, what happened, who wrote it down; a signed entry carries the seal. */
.lp-sx .pf-chain { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 8px; border-left: 2px solid color-mix(in srgb, var(--ow-champagne) 55%, transparent); }
.lp-sx .pf-chain li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.lp-sx .pf-chain li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--hs-card); border: 2px solid var(--ow-champagne); }
.lp-sx .pf-chain li.signed { padding: 8px 10px; margin-left: -10px; border-radius: 12px; background: var(--ow-cream-deep); }
.lp-sx .pf-chain li.signed::before { left: -10px; background: var(--ow-champagne); }
.lp-sx .pf-chain .y { font-family: var(--ow-serif); font-size: 16px; font-weight: 600; color: var(--ow-gold-ink); }
.lp-sx .pf-chain .sg { font-size: 21px; color: var(--ow-gold-ink); }
.lp-sx .pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-sx .pf-tags span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hs-hair); background: var(--ow-paper); font-size: 12.5px; font-weight: 600; color: var(--hs-mute); }
.lp-sx .pf-tags span.on { background: var(--ow-ink); border-color: var(--ow-ink); color: #fff; }
.lp-sx .pf-thumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .pf-thumbs img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
/* The QR the hand-over is confirmed with, and the beam reading it. */
.lp-sx .pf-qr { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--hs-hair); }
.lp-sx .pf-qr-code {
  position: relative; flex: none; display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden;
  border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--hs-hair);
}
.lp-sx .pf-qr-code .material-symbols-outlined { width: auto; font-size: 64px; color: var(--ow-ink); }
.lp-sx .pf-qr-beam { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ow-champagne); box-shadow: 0 0 10px 2px rgba(201, 169, 106, 0.8); animation: lpPfScan 1.2s ease-in-out infinite alternate; }
/* The two partner models side by side; the chosen one in champagne. */
.lp-sx .pf-models { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-sx .pf-model { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: var(--ow-paper); border: 1.5px solid var(--hs-hair); }
.lp-sx .pf-model.on { border-color: var(--ow-champagne); background: #fff; }
.lp-sx .pf-model b { font-family: var(--ow-serif); font-size: 30px; font-weight: 600; line-height: 1.05; color: var(--ow-ink); }
.lp-sx .pf-model span { font-size: 13.5px; font-weight: 700; color: var(--ow-ink); }
.lp-sx .pf-model small { font-size: 12px; line-height: 1.35; color: var(--hs-mute-2); }
@media (max-width: 600px) {
  .lp-sx .pf-c { gap: 8px; }
  .lp-sx .pf-k { font-size: 10.5px; }
  .lp-sx .pf-shot--short { flex-basis: 104px; }
  .lp-sx .pf-g { width: 22px; height: 22px; }
  .lp-sx .pf-row { gap: 10px; padding: 6px 0; }
  .lp-sx .pf-row .ri, .lp-sx .pf-party .ri, .lp-sx .pf-card .ri, .lp-sx .pf-mail-h .ri { width: 30px; height: 30px; }
  .lp-sx .pf-c .tt b { font-size: 13.5px; }
  .lp-sx .pf-c .tt small { font-size: 11.5px; }
  .lp-sx .pf-list .tt small, .lp-sx .pf-toggle .tt small { display: none; }
  .lp-sx .pf-row .v { font-size: 18px; }
  .lp-sx .pf-tag { padding: 3px 7px; font-size: 10.5px; }
  .lp-sx .pf-obj { padding: 8px; }
  .lp-sx .pf-obj img { width: 40px; height: 40px; }
  .lp-sx .pf-field { padding: 8px 12px; }
  .lp-sx .pf-field b { font-size: 13.5px; }
  .lp-sx .pf-btn { height: 40px; font-size: 13.5px; }
  .lp-sx .pf-badge { gap: 10px; padding: 9px 12px; }
  .lp-sx .pf-badge > .material-symbols-outlined { font-size: 22px; }
  .lp-sx .pf-note { font-size: 12px; }
  .lp-sx .pf-party { padding: 9px 4px; }
  .lp-sx .pf-party b { font-size: 12px; }
  .lp-sx .pf-party small { display: none; }
  .lp-sx .pf-plate { padding: 4px 6px; font-size: 10.5px; }
  .lp-sx .pf-mail { padding: 10px 12px; }
  .lp-sx .pf-mail p { display: none; }
  .lp-sx .pf-mail-h { padding-bottom: 8px; }
  .lp-sx .pf-toggle { padding: 7px 10px; }
  .lp-sx .pf-tile { padding: 8px 10px; }
  .lp-sx .pf-tile small { margin-top: 0; font-size: 11px; }
  .lp-sx .pf-tile b { font-size: 15px; }
  .lp-sx .pf-sum { padding: 10px 14px; }
  .lp-sx .pf-sum b { font-size: 20px; }
  .lp-sx .pf-deck { height: 56px; }
  .lp-sx .pf-pile { padding: 9px 4px 8px; }
  .lp-sx .pf-pile .nm { font-size: 11px; }
  .lp-sx .pf-board { gap: 7px; padding: 10px 12px; }
  .lp-sx .pf-bar b { font-size: 16px; }
  .lp-sx .pf-chain { gap: 5px; }
  .lp-sx .pf-chain .y { font-size: 14px; }
  .lp-sx .pf-chain li { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .lp-sx .pf-chain .tt small { display: none; }
  .lp-sx .pf-thumbs img { width: 36px; height: 36px; }
  .lp-sx .pf-qr { padding: 9px; }
  .lp-sx .pf-qr-code { width: 60px; height: 60px; }
  .lp-sx .pf-qr-code .material-symbols-outlined { font-size: 50px; }
  .lp-sx .pf-deck-done { font-size: 12.5px; }
  .lp-sx .pf-model { padding: 10px; }
  .lp-sx .pf-model b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-sx .pf-in, .lp-sx .pf-g, .lp-sx .pf-card, .lp-sx .pf-arrow, .lp-sx .pf-btn, .lp-sx .pf-sw, .lp-sx .pf-sw::after { transition: none; }
  .lp-sx .pf-flash, .lp-sx .pf-scan, .lp-sx .pf-qr-beam, .lp-sx .pf-caret { animation: none; }
}

/* Betreuung 1 · Konten aus dem Foto: the bank's asset overview on the table — aim, shutter, scan, the
   accounts recognised (as the Finanzen film scans its receipt) — then the ward's collection with the
   three accounts, and the guardian confirms. */
.lp-sx .sx-c1.bt-c1, .lp-sx .bt-c2, .lp-sx .bt-c3 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .bt-cam { position: absolute; inset: 0; z-index: 2; transition: opacity 0.4s ease, transform 0.4s ease; }
.lp-sx.cs-bt5 .bt-cam { opacity: 0; transform: scale(0.97); }
.lp-sx .bt-tbl { background: radial-gradient(ellipse at 50% 38%, #ddd2bd, #b8a98e); }
.lp-sx .bt-doc {
  position: absolute; left: 50%; top: 47%; width: min(76%, 330px); padding: 16px 18px 14px; transform: translate(-50%, -50%) rotate(-2deg);
  background: #fffefa; color: #2b2a26; box-shadow: 0 12px 28px rgba(40, 30, 10, 0.22);
  font-family: "Courier Prime", ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.5;
}
.lp-sx .bt-doc > b { display: block; text-align: center; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-sx .bt-doc > small { display: block; text-align: center; font-size: 11px; color: var(--hs-mute-2); }
.lp-sx .bt-doc hr { height: 0; margin: 8px 0; border: 0; border-top: 1px dashed #b9b2a3; background: none; color: inherit; opacity: 1; }
.lp-sx .bt-doc p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 1px 3px; border-radius: 3px; transition: box-shadow 0.3s, background 0.3s; }
.lp-sx .bt-doc .sum { font-weight: 700; }
.lp-sx .bt-rows { display: grid; gap: 3px; }
.lp-sx .bt-doc > em {
  position: absolute; left: 50%; top: -12px; padding: 6px 10px; border-radius: 999px; white-space: nowrap; transform: translate(-50%, -100%);
  background: var(--ow-ink); color: var(--ow-paper); font: 600 11.5px/1 var(--own-font-sans); font-style: normal; opacity: 0; transition: opacity 0.3s;
}
.lp-sx.cs-bt1 .bt-cam .hs-vf { opacity: 1; inset: 7%; }
.lp-sx.cs-bt2 .bt-cam .hs-shut i { transform: scale(0.84); }
.lp-sx.cs-bt2 .bt-cam .hs-flash { animation: lpHsFlash 0.5s ease-out; }
.lp-sx.cs-bt3 .bt-cam .hs-vf, .lp-sx.cs-bt3 .bt-cam .hs-hint, .lp-sx.cs-bt3 .bt-cam .hs-shut { opacity: 0; }
.lp-sx.cs-bt3 .bt-cam .hs-scan { animation: lpHsScan 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; }
.lp-sx.cs-bt4 .bt-rows p { box-shadow: 0 0 0 2px var(--ow-champagne); background: var(--ow-ed-accent-soft); }
.lp-sx.cs-bt4 .bt-doc > em { opacity: 1; }
.lp-sx .bt-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; }
.lp-sx .bt-asof { white-space: nowrap; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .bt-tot { margin-top: 10px; }
.lp-sx .bt-tot small { display: block; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .bt-tot b { display: block; font-family: var(--ow-serif); font-size: 42px; font-weight: 600; line-height: 1.05; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .bt-accs, .lp-sx .bt-vals { display: grid; gap: 4px; margin-top: 10px; }
/* An account row; chapter 3's valuables (.bt-val) and the household line (.bt-hh) share its look. */
.lp-sx .bt-acc, .lp-sx .bt-val, .lp-sx .bt-hh {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 54px; padding: 0 10px;
  border-top: 1px solid color-mix(in srgb, var(--ow-ink) 7%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s calc(var(--d, 0) * 0.18s + 0.1s), transform 0.35s calc(var(--d, 0) * 0.18s + 0.1s);
}
.lp-sx .bt-acc .ic, .lp-sx .bt-val .ic, .lp-sx .bt-hh .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 17px; }
.lp-sx .bt-acc .tt, .lp-sx .bt-val .tt, .lp-sx .bt-hh .tt { min-width: 0; }
.lp-sx .bt-acc .tt b, .lp-sx .bt-val .tt b, .lp-sx .bt-hh .tt b { display: block; font-size: 14.5px; font-weight: 600; }
.lp-sx .bt-acc .tt small, .lp-sx .bt-val .tt small, .lp-sx .bt-hh .tt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .bt-acc .v, .lp-sx .bt-val .v { font-family: var(--ow-serif); font-size: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx.cs-bt5 .bt-acc { opacity: 1; transform: none; }
.lp-sx .bt-btn {
  position: relative; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; height: 40px; margin-top: auto;
  border-radius: 10px; white-space: nowrap; background: var(--ow-ink); color: var(--ow-cream); font-size: 14px; font-weight: 700; transition: background 0.3s, color 0.3s;
}
.lp-sx .bt-btn .l2 { display: none; align-items: center; gap: 6px; }
.lp-sx .bt-btn .cs-tap { left: 50%; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-bt6 .bt-btn .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-bt7 .bt-btn { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx.cs-bt7 .bt-btn .l1 { display: none; }
.lp-sx.cs-bt7 .bt-btn .l2 { display: inline-flex; }
.lp-sx.cs-bt7 .bt-btn .cs-tap { opacity: 0; transform: scale(2); transition: opacity 0.45s, transform 0.45s; }

/* Betreuung 2 · Einnahmen und Ausgaben mit Beleg: amount and rhythm read from each paper, line by
   line, and the paper attached. Income in the signal green the Finanzen film rises in; costs in ink. */
.lp-sx.cs-bt11 .bt-o .t1 { display: none; }
.lp-sx.cs-bt11 .bt-o .t2 { display: inline; }
.lp-sx.cs-bt11 .bt-o img { animation: none; }
.lp-sx .bt-fk { margin-top: 14px; }
.lp-sx .bt-fl { display: grid; gap: 6px; margin-top: 8px; }
.lp-sx .bt-r {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 5px;
  align-items: center; padding: 8px 10px; border-radius: 12px; border-top: 1px solid color-mix(in srgb, var(--ow-ink) 7%, transparent); transition: background 0.4s;
}
.lp-sx .bt-r .ic { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 17px; }
.lp-sx .bt-r .tt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-sx .bt-r .tt b { font-size: 14.5px; font-weight: 600; }
.lp-sx .bt-r .tt small { margin-left: 6px; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .bt-r .v { position: relative; min-width: 104px; text-align: right; font-family: var(--ow-serif); font-size: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .bt-r .v.in { color: var(--ow-ev-documented); }
.lp-sx .bt-r .v .sk {
  position: absolute; right: 0; top: 50%; width: 90px; height: 9px; margin-top: -4.5px; border-radius: 5px;
  background: linear-gradient(90deg, #eee6d6, #f8f3ea, #eee6d6); background-size: 200% 100%; animation: lpHsShim 1.1s linear infinite; transition: opacity 0.2s;
}
.lp-sx .bt-r .v .tx { opacity: 0; transition: opacity 0.3s; }
.lp-sx .bt-r .doc {
  grid-column: 2 / 4; justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 6px; border-radius: 999px;
  background: var(--ow-paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ow-ink) 12%, transparent); font-size: 11.5px; font-weight: 600; color: var(--hs-mute);
  opacity: 0; transform: scale(0.9); transform-origin: left center; transition: opacity 0.3s 0.15s, transform 0.3s 0.15s;
}
.lp-sx .bt-r .doc .material-symbols-outlined { font-size: 13px; color: var(--ow-ed-accent); }
.lp-sx.cs-bt8 .r-1, .lp-sx.cs-bt9 .r-2, .lp-sx.cs-bt10 .r-3 { background: var(--ow-ed-accent-soft); }
.lp-sx.cs-bt8 .r-1 .sk, .lp-sx.cs-bt9 .r-2 .sk, .lp-sx.cs-bt10 .r-3 .sk { opacity: 0; }
.lp-sx.cs-bt8 .r-1 .tx, .lp-sx.cs-bt9 .r-2 .tx, .lp-sx.cs-bt10 .r-3 .tx { opacity: 1; }
.lp-sx.cs-bt8 .r-1 .doc, .lp-sx.cs-bt9 .r-2 .doc, .lp-sx.cs-bt10 .r-3 .doc { opacity: 1; transform: none; }
.lp-sx.cs-bt9 .r-1, .lp-sx.cs-bt10 .r-2, .lp-sx.cs-bt11 .r-3 { background: transparent; }
.lp-sx .bt-ok { margin-top: auto; }
.lp-sx.cs-bt11 .bt-ok { opacity: 1; transform: none; }

/* Betreuung 3 · Wertsachen einzeln, Hausrat pauschal: the ring, the watch and the coin collection,
   each with photo and reference value (bt12); the ordinary household contents as one lump-sum line
   with a dashed edge, as the courts' forms ask for it (bt13); the statement as a PDF for the
   reference date, which the guardian checks, signs and files (bt14). No family space here: the
   page speaks to the guardian alone. */
.lp-sx.cs-bt12 .bt-val { opacity: 1; transform: none; }
.lp-sx .bt-hh { margin-top: 6px; border: 1px dashed color-mix(in srgb, var(--ow-ink) 20%, transparent); border-radius: 12px; }
.lp-sx .bt-hh .ic { background: var(--ow-paper); color: var(--hs-mute); }
.lp-sx .bt-hh .tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: var(--ow-cream-deep); color: var(--hs-mute); font-size: 12px; font-weight: 700;
}
.lp-sx.cs-bt13 .bt-hh { opacity: 1; transform: none; }
/* The guardian's line stands over the PDF, both at the foot of the chapter. */
.lp-sx .bt-c3 .cs-pdf { margin-top: 8px; }
.lp-sx.cs-bt14 .bt-c3 .cs-pdf { opacity: 1; transform: none; }
.lp-sx .bt-sign {
  display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--hs-mute);
  opacity: 0; transition: opacity 0.35s 0.4s;
}
.lp-sx .bt-sign .material-symbols-outlined { font-size: 16px; color: var(--ow-ed-accent); }
.lp-sx.cs-bt14 .bt-sign { opacity: 1; }

/* Schadensfall 1 · Aus Fotos, die du schon hast: the photos already on the phone, the birthday picked
   and opened, OWNY's frames on what is gone, the things on the list. The picture is drawn — icons on a
   warm wall under a light chain — so nothing in it is generated; frame and icons keep its aspect
   ratio and scale with its width (cqw), so the frames stay on the things. */
.lp-sx .sx-c1.sf-c1, .lp-sx .sf-c2, .lp-sx .sf-c3 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .sf-rl { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ow-ed-accent); }
.lp-sx .sf-rl .material-symbols-outlined { font-size: 15px; }
.lp-sx .sf-roll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.lp-sx .sf-t { position: relative; display: grid; gap: 4px; min-width: 0; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; }
.lp-sx .sf-t.t-2 { transition-delay: 0.08s; }
.lp-sx .sf-t.t-3 { transition-delay: 0.16s; }
.lp-sx .sf-t.t-4 { transition-delay: 0.24s; }
.lp-sx .sf-t i {
  display: grid; place-items: center; height: 46px; border-radius: 9px; font-size: 20px; color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, #e3cfa8, #c4a06a); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.3s;
}
.lp-sx .sf-t.t-2 i { background: linear-gradient(135deg, #d2d9d5, #9daea8); }
.lp-sx .sf-t.t-3 i { background: linear-gradient(135deg, #e5dccd, #bfae94); }
.lp-sx .sf-t.t-4 i { background: linear-gradient(135deg, #d5d8c0, #a3a97f); }
.lp-sx .sf-t small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 11px; color: var(--hs-mute-2); }
.lp-sx.cs-sf1 .sf-t { opacity: 1; transform: none; }
.lp-sx .sf-t .cs-tap { left: 50%; top: 23px; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-sf2 .sf-t.t-1 .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-sf3 .sf-t.t-1 .cs-tap { opacity: 0; transform: scale(2); transition: opacity 0.45s, transform 0.45s; }
.lp-sx.cs-sf3 .sf-t.t-1 i { outline-color: var(--ow-champagne); }
.lp-sx .sf-ph {
  position: relative; flex: none; aspect-ratio: 2.15; margin-top: 10px; border-radius: 16px; overflow: hidden; container-type: inline-size;
  opacity: 0; transform: scale(0.96); transform-origin: 12% 0; transition: opacity 0.4s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-sx.cs-sf3 .sf-ph { opacity: 1; transform: none; }
.lp-sx .sf-scene { position: absolute; inset: 0; background: linear-gradient(180deg, #f1e6d2 0%, #e8d9bf 68%, #cdb894 68%, #c2aa83 100%); }
.lp-sx .sf-gar {
  position: absolute; left: 3%; right: 3%; top: 4%; height: 7%;
  border-top: 1px solid rgba(93, 75, 55, 0.35); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(circle, #d4ab5f 2.6px, transparent 3.2px) 0 2px / 22px 100% repeat-x;
}
.lp-sx .sf-o, .lp-sx .aw-o { position: absolute; line-height: 1; color: #5d4b37; font-size: calc(var(--s) * 1cqw); }
.lp-sx .sf-o .material-symbols-outlined, .lp-sx .aw-o .material-symbols-outlined { width: auto; font-size: 1em; vertical-align: 0; }
.lp-sx.cs-sf4 .sf-ph .hs-det { opacity: 1; transform: none; }
.lp-sx.cs-sf5 .sf-ph .cs-found { opacity: 1; transform: none; }
.lp-sx .sf-add { margin-top: 10px; }
.lp-sx.cs-sf6 .sf-add { opacity: 1; transform: none; }

/* Schadensfall 2 · Belege und Seriennummern: the e-bike's invoice read line by line — price, date,
   frame number — each line lighting as its field fills; the invoice stays attached; the laptop's
   serial number from its rating plate. */
.lp-sx .sf-hd { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.lp-sx .sf-hd .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 23px; }
.lp-sx .sf-hd .tt { min-width: 0; }
.lp-sx .sf-hd b { display: block; font-family: var(--ow-serif); font-size: 25px; font-weight: 600; line-height: 1.05; }
.lp-sx .sf-hd small { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .sf-io { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 16px; align-items: start; margin-top: 14px; }
.lp-sx .sf-fl { display: grid; gap: 2px; }
.lp-sx .sf-f { display: grid; gap: 2px; padding: 6px 10px; border-radius: 10px; transition: background 0.4s; }
.lp-sx .sf-f .k { font-size: 11.5px; color: var(--hs-mute-2); }
.lp-sx .sf-f .v { position: relative; height: 22px; font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-sx .sf-f .sk {
  position: absolute; left: 0; top: 50%; width: 110px; height: 9px; margin-top: -4.5px; border-radius: 5px;
  background: linear-gradient(90deg, #eee6d6, #f8f3ea, #eee6d6); background-size: 200% 100%; animation: lpHsShim 1.1s linear infinite; transition: opacity 0.2s;
}
.lp-sx .sf-f .tx { display: inline-block; opacity: 0; transform: translateX(-4px); transition: opacity 0.3s, transform 0.3s; }
.lp-sx.cs-sf8 .f-1, .lp-sx.cs-sf9 .f-2, .lp-sx.cs-sf10 .f-3 { background: var(--ow-ed-accent-soft); }
.lp-sx.cs-sf8 .f-1 .sk, .lp-sx.cs-sf9 .f-2 .sk, .lp-sx.cs-sf10 .f-3 .sk { opacity: 0; }
.lp-sx.cs-sf8 .f-1 .tx, .lp-sx.cs-sf9 .f-2 .tx, .lp-sx.cs-sf10 .f-3 .tx { opacity: 1; transform: none; }
.lp-sx.cs-sf9 .f-1, .lp-sx.cs-sf10 .f-2, .lp-sx.cs-sf11 .f-3 { background: transparent; }
.lp-sx .sf-att {
  justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 26px; margin: 6px 0 0 6px; padding: 0 10px 0 7px;
  border-radius: 999px; background: var(--ow-champagne); color: var(--ow-ink); font-size: 12px; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: scale(0.9); transform-origin: left center; transition: opacity 0.3s, transform 0.3s;
}
.lp-sx .sf-att .material-symbols-outlined { font-size: 14px; }
.lp-sx.cs-sf11 .sf-att { opacity: 1; transform: none; }
.lp-sx .sf-rc {
  padding: 12px 12px 10px; background: #fffefa; color: #2b2a26; box-shadow: 0 10px 24px rgba(40, 30, 10, 0.18);
  font-family: "Courier Prime", ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.45;
  opacity: 0; transform: translateX(30px) rotate(4deg); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-sx.cs-sf7 .sf-rc { opacity: 1; transform: rotate(2deg); }
.lp-sx.cs-sf11 .sf-rc { opacity: 0; transform: translate(-40px, 20px) scale(0.6); }
.lp-sx .sf-rc > b { display: block; text-align: center; letter-spacing: 0.05em; text-transform: uppercase; }
.lp-sx .sf-rc > small { display: block; text-align: center; font-size: 10.5px; color: var(--hs-mute-2); border-radius: 3px; transition: box-shadow 0.3s, background 0.3s; }
.lp-sx .sf-rc hr { height: 0; margin: 6px 0; border: 0; border-top: 1px dashed #b9b2a3; background: none; color: inherit; opacity: 1; }
.lp-sx .sf-rc p { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 1px 2px; border-radius: 3px; transition: box-shadow 0.3s, background 0.3s; }
.lp-sx .sf-rc .sum { font-weight: 700; }
.lp-sx.cs-sf8 .sf-rc .l-1, .lp-sx.cs-sf9 .sf-rc .l-2, .lp-sx.cs-sf10 .sf-rc .l-3 { box-shadow: 0 0 0 2px var(--ow-champagne); background: var(--ow-ed-accent-soft); }
.lp-sx .sf-sn {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: auto; padding: 8px 10px;
  border-radius: 12px; border: 1px dashed var(--ow-ed-accent-line); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s;
}
.lp-sx .sf-sn .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 17px; }
.lp-sx .sf-sn .tt { min-width: 0; }
.lp-sx .sf-sn .tt b { display: block; font-size: 14px; font-weight: 600; }
.lp-sx .sf-sn .tt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .sf-sn .ok { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--ow-champagne); color: var(--ow-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.lp-sx .sf-sn .ok .material-symbols-outlined { font-size: 13px; }
.lp-sx.cs-sf12 .sf-sn { opacity: 1; transform: none; }

/* Schadensfall 3 · Eine Liste als PDF: the view's own document builds row by row, the purchase prices
   add up, and it goes to the home insurer and the police. */
.lp-sx .sf-pdf { padding: 14px 16px 10px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent), 0 14px 30px rgba(70, 52, 20, 0.14); }
.lp-sx .sf-ph3 { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--ow-ink) 10%, transparent); }
.lp-sx .sf-ph3 .ext { display: grid; place-items: center; height: 36px; border-radius: 5px; background: var(--ow-ink); color: #fff; font: 800 9px/1 var(--own-font-sans); letter-spacing: 0.08em; }
.lp-sx .sf-ph3 .tt { min-width: 0; }
.lp-sx .sf-ph3 b { display: block; font-family: var(--ow-serif); font-size: 19px; font-weight: 600; line-height: 1.1; }
.lp-sx .sf-ph3 small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--hs-mute-2); }
.lp-sx .sf-lr {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 36px;
  border-bottom: 1px dashed color-mix(in srgb, var(--ow-ink) 10%, transparent); font-size: 13px;
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s calc(var(--d) * 0.12s), transform 0.3s calc(var(--d) * 0.12s);
}
.lp-sx .sf-lr > .material-symbols-outlined { color: var(--ow-ed-accent); font-size: 15px; }
.lp-sx .sf-lr .tt { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.lp-sx .sf-lr .tt b { flex: none; font-weight: 600; }
.lp-sx .sf-lr .tt small { overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--hs-mute-2); }
.lp-sx .sf-lr .v { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-sx.cs-sf13 .sf-lr { opacity: 1; transform: none; }
.lp-sx .sf-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 8px; font-size: 12.5px; color: var(--hs-mute); }
.lp-sx .sf-sum b { font-family: var(--ow-serif); font-size: 24px; font-weight: 600; color: var(--ow-ink); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .sf-send { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lp-sx .sf-send span {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px; white-space: nowrap;
  background: var(--ow-ink); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .sf-send span + span { transition-delay: 0.15s; }
.lp-sx .sf-send .material-symbols-outlined { color: var(--ow-champagne); font-size: 15px; }
.lp-sx.cs-sf14 .sf-send span { opacity: 1; transform: none; }

/* Auswandern 1 · Zimmer für Zimmer: the kitchen on video — drawn: icons on tiles and a worktop, the
   camera pans — framed; the room done, the move's count on. Like the birthday picture of Schadensfall
   the frame keeps its aspect ratio and the icons scale with its width. */
.lp-sx .sx-c1.aw-c1, .lp-sx .aw-c2, .lp-sx .aw-c3 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .aw-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; }
.lp-sx .aw-cnt, .lp-sx .aw-today { white-space: nowrap; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .aw-cnt b { font-family: var(--ow-serif); font-size: 20px; font-weight: 600; color: var(--ow-ink); font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .aw-cam { position: relative; flex: none; aspect-ratio: 2.15; margin-top: 10px; border-radius: 16px; overflow: hidden; container-type: inline-size; background: #efe7da; }
.lp-sx .aw-room { position: absolute; inset: 0; transform: translateX(2.5%) scale(1.06); transition: transform 3.4s linear; }
.lp-sx.cs-aw2 .aw-room { transform: translateX(-2.5%) scale(1.06); }
.lp-sx .aw-tiles {
  position: absolute; inset: 0 0 32% 0; background-color: #f1eadf;
  background-image: linear-gradient(rgba(93, 75, 55, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 75, 55, 0.08) 1px, transparent 1px);
  background-size: 4.6cqw 4.6cqw;
}
.lp-sx .aw-top { position: absolute; left: 0; right: 0; top: 68%; bottom: 0; background: linear-gradient(180deg, #c9b79a, #b29c7a); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35); }
.lp-sx.cs-aw1 .aw-cam .cs-rec { opacity: 1; }
.lp-sx.cs-aw3 .aw-cam .hs-det { opacity: 1; transform: none; }
.lp-sx.cs-aw4 .aw-cam .cs-rec { opacity: 0; }
.lp-sx.cs-aw4 .aw-cam .cs-found { opacity: 1; transform: none; }
.lp-sx .aw-rms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-sx .aw-rm {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px 0 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ow-ink) 12%, transparent); background: var(--ow-paper); font-size: 13px; font-weight: 600;
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.lp-sx .aw-rm > .material-symbols-outlined { color: var(--ow-ed-accent); font-size: 15px; }
.lp-sx .aw-rm .ck { display: none; }
.lp-sx .aw-rm.now { border-color: var(--ow-champagne); background: var(--ow-ed-accent-soft); }
.lp-sx.cs-aw5 .aw-rm.now { background: var(--ow-ink); border-color: var(--ow-ink); color: #fff; }
.lp-sx.cs-aw5 .aw-rm.now > .material-symbols-outlined { color: var(--ow-champagne); }
.lp-sx.cs-aw5 .aw-rm.now .ck { display: inline-block; }

/* Auswandern 2 · Kaufdatum am Gegenstand: the things by purchase date, the line six months back drawn
   between them, what came later marked. Dates only — whether anything enters free is for customs. */
.lp-sx .aw-its { display: grid; margin-top: 10px; }
.lp-sx .aw-it {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; height: 42px; padding: 0 8px 0 4px;
  border-radius: 10px; border-top: 1px solid color-mix(in srgb, var(--ow-ink) 7%, transparent);
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s calc(var(--d) * 0.1s), transform 0.3s calc(var(--d) * 0.1s), background 0.4s;
}
.lp-sx .aw-it .ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 15px; }
.lp-sx .aw-it b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.lp-sx .aw-it .dt { font-size: 13px; font-weight: 600; color: var(--hs-mute); font-variant-numeric: tabular-nums; }
.lp-sx .aw-it .ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--ow-ink) 7%, transparent); color: var(--hs-mute-2); font-size: 11px; }
.lp-sx .aw-it .fl {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ow-ink) 14%, transparent); font-size: 11.5px; font-weight: 700; color: var(--hs-mute);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.lp-sx .aw-it .fl .material-symbols-outlined { font-size: 13px; }
.lp-sx.cs-aw6 .aw-it { opacity: 1; transform: none; }
.lp-sx .aw-cut { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; }
.lp-sx .aw-cut::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--ow-champagne-deep);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-sx .aw-cut span {
  position: relative; padding: 2px 10px; border-radius: 999px; background: var(--hs-card); white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ow-gold-ink); opacity: 0; transition: opacity 0.3s 0.3s;
}
.lp-sx.cs-aw7 .aw-cut::before { transform: none; }
.lp-sx.cs-aw7 .aw-cut span { opacity: 1; }
.lp-sx.cs-aw8 .aw-it.new { background: var(--ow-ed-accent-soft); }
.lp-sx.cs-aw8 .aw-it.new .fl { background: var(--ow-champagne); border-color: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx .aw-sum { margin-top: auto; }
.lp-sx.cs-aw9 .aw-sum { opacity: 1; transform: none; }

/* Auswandern 3 · Kiste für Kiste: the espresso machine flies into box 1, which takes it in; the move as
   a whole; the PDF for the customs form. */
.lp-sx .aw-fly {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px; white-space: nowrap;
  background: var(--ow-paper); box-shadow: 0 8px 18px rgba(70, 52, 20, 0.16), 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent);
  font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.6s cubic-bezier(0.5, 0, 0.3, 1);
}
.lp-sx .aw-fly .material-symbols-outlined { color: var(--ow-ed-accent); font-size: 16px; }
.lp-sx.cs-aw10 .aw-fly { opacity: 1; transform: none; }
.lp-sx.cs-aw11 .aw-fly { opacity: 0; transform: translate(-105%, 96px) scale(0.4); }
.lp-sx .aw-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.lp-sx .aw-box {
  display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 14px 8px 12px; border-radius: 14px; text-align: center;
  background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s calc(var(--d) * 0.1s), transform 0.35s calc(var(--d) * 0.1s), box-shadow 0.3s;
}
.lp-sx .aw-box .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 21px; }
.lp-sx .aw-box > b { margin-top: 4px; font-family: var(--ow-serif); font-size: 18px; font-weight: 600; font-variant-numeric: lining-nums; }
.lp-sx .aw-box small { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .aw-box small .material-symbols-outlined { font-size: 13px; }
.lp-sx .aw-box .n { font-size: 12px; color: var(--hs-mute); }
.lp-sx .aw-box .n b { font-size: 15px; font-weight: 700; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.lp-sx.cs-aw10 .aw-box { opacity: 1; transform: none; }
.lp-sx.cs-aw11 .aw-box.b-1 { box-shadow: 0 0 0 2px var(--ow-champagne); animation: lpCsBump 0.5s ease 0.45s; }
.lp-sx .aw-tot { margin-top: 14px; text-align: center; font-size: 13px; font-weight: 600; color: var(--hs-mute); opacity: 0; transition: opacity 0.4s; }
.lp-sx.cs-aw12 .aw-tot { opacity: 1; }
.lp-sx .aw-c3 .cs-pdf { margin-top: auto; }
.lp-sx.cs-aw13 .aw-c3 .cs-pdf { opacity: 1; transform: none; }

/* Zeug loswerden 1 · Der vollste Raum zuerst: the sorting's chooser (Declutter.razor) — the
   collections with the most things first; the cellar, just filmed, holds the most and joins at the top;
   a tap picks it. */
.lp-sx .sx-c1.lw-c1, .lp-sx .lw-c2, .lp-sx .lw-c3 { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.lp-sx .lw-q { font-family: var(--ow-serif); font-size: 23px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
.lp-sx .lw-done { margin-top: 4px; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .lw-cols { display: flex; flex-direction: column; margin-top: 4px; }
.lp-sx .lw-col {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; height: 52px;
  margin-top: 8px; padding: 0 10px 0 9px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ow-ink) 10%, transparent); background: var(--ow-paper);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s, height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.45s, border-width 0.45s, background 0.3s, border-color 0.3s, color 0.3s;
}
.lp-sx .lw-col.c-3 { transition-delay: 0.08s; }
.lp-sx .lw-col.c-4 { transition-delay: 0.16s; }
.lp-sx .lw-col .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 16px; }
/* The room's photo fills its tile; the cream ground shows until it has loaded. */
.lp-sx .lw-col .ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-sx .lw-col b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; font-weight: 600; }
.lp-sx .lw-col .n { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--hs-mute); }
.lp-sx .lw-col .go { color: var(--hs-faint); font-size: 16px; }
.lp-sx .lw-col.new { height: 0; margin-top: 0; border-width: 0; overflow: hidden; }
.lp-sx.cs-lw1 .lw-col { opacity: 1; transform: none; }
.lp-sx.cs-lw1 .lw-col.new { opacity: 0; }
.lp-sx.cs-lw3 .lw-col.new { height: 52px; margin-top: 8px; border-width: 1px; opacity: 1; border-color: var(--ow-champagne); background: var(--ow-ed-accent-soft); }
.lp-sx .lw-col .cs-tap { left: 80%; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-lw4 .lw-col.new .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-lw5 .lw-col.new .cs-tap { opacity: 0; transform: scale(2); transition: opacity 0.45s, transform 0.45s; }
.lp-sx.cs-lw5 .lw-col.new { background: var(--ow-ink); border-color: var(--ow-ink); color: #fff; }
.lp-sx.cs-lw5 .lw-col.new .n { color: rgba(255, 255, 255, 0.75); }
.lp-sx.cs-lw5 .lw-col.new .go { color: var(--ow-champagne); }
.lp-sx .lw-toast {
  position: absolute; left: 50%; bottom: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 14px 8px 10px; border-radius: 999px;
  white-space: nowrap; background: var(--ow-ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 24px rgba(11, 16, 32, 0.22);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.35s, transform 0.35s;
}
.lp-sx .lw-toast img { flex: none; width: 20px; height: 20px; }
.lp-sx.cs-lw2 .lw-toast { opacity: 1; transform: translate(-50%, 0); }
.lp-sx.cs-lw4 .lw-toast { opacity: 0; }

/* Zeug loswerden 2 · Wischen statt grübeln: one card at a time, swiped as the phone sorts
   (DeclutterModel.SwipeRole) — the finger lands, drags the card under its pile's stamp, lets go: up to
   „Verkaufen oder Verschenken“, right to „Entsorgen“, left to „Behalten“. The stamps wear the colours
   of the try-out deck on the page (.ax-q4-swipe); the piles count, the room's share follows. */
.lp-sx .lw-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lp-sx .lw-hd > b { font-family: var(--ow-serif); font-size: 24px; font-weight: 600; }
.lp-sx .lw-n, .lp-sx .lw-all { white-space: nowrap; font-size: 12.5px; color: var(--hs-mute-2); }
.lp-sx .lw-n > span { display: none; }
.lp-sx .lw-n .d0 { display: inline; }
.lp-sx .lw-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ow-ink) 7%, transparent); overflow: hidden; }
.lp-sx .lw-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--hs-gold); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-sx .lw-deck { display: grid; grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 6px 10px; margin-top: 10px; }
.lp-sx .lw-h { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1.2; color: var(--hs-mute); }
.lp-sx .lw-h .material-symbols-outlined { flex: none; font-size: 15px; color: var(--ow-champagne-deep); }
.lp-sx .lw-h.h-up { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
.lp-sx .lw-h.h-left { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.lp-sx .lw-h.h-right { grid-column: 3; grid-row: 2; justify-self: start; }
.lp-sx .lw-stack { grid-column: 2; grid-row: 2; position: relative; height: 170px; }
.lp-sx .lw-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px;
  border-radius: 16px; background: var(--ow-paper); text-align: center;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 8%, transparent), 0 12px 26px rgba(70, 52, 20, 0.16);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
}
.lp-sx .lw-card .ph { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: var(--ow-cream-deep); color: var(--ow-gold-ink); font-size: 28px; }
.lp-sx .lw-card b { font-family: var(--ow-serif); font-size: 17px; font-weight: 600; line-height: 1.15; }
.lp-sx .lw-card small { font-size: 11.5px; color: var(--hs-mute-2); }
/* The cards wait behind each other, each a little further down; the next one comes forward. */
.lp-sx .lw-card.k-2 { transform: translate(5px, 5px) rotate(1.5deg); }
.lp-sx .lw-card.k-3 { transform: translate(9px, 9px) rotate(2.5deg); }
.lp-sx .lw-card.k-4 { transform: translate(12px, 12px) rotate(3.5deg); }
.lp-sx .lw-card .stamp {
  position: absolute; top: 10px; padding: 2px 7px; border: 2px solid currentColor; border-radius: 7px; background: var(--ow-paper);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.25; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s;
}
.lp-sx .lw-card.keep .stamp { right: 8px; color: var(--ow-ink); transform: rotate(10deg); }
.lp-sx .lw-card.dispose .stamp { left: 8px; color: var(--ow-negative); transform: rotate(-10deg); }
.lp-sx .lw-card.give .stamp { top: 22px; left: 50%; width: max-content; max-width: 88%; white-space: normal; text-align: center; color: var(--ow-gold-ink); transform: translateX(-50%) rotate(-4deg); }
.lp-sx .lw-card .cs-tap { left: 50%; top: 40%; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-lw6 .lw-card.k-1 .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-lw7 .lw-card.k-1 { transform: translateY(-26px) rotate(-1deg); }
.lp-sx.cs-lw7 .lw-card.k-1 .stamp { opacity: 1; }
.lp-sx.cs-lw8 .lw-card.k-1 { opacity: 0; transform: translateY(-190px); }
.lp-sx.cs-lw8 .lw-card.k-2 { transform: none; }
.lp-sx.cs-lw8 .lw-card.k-3 { transform: translate(5px, 5px) rotate(1.5deg); }
.lp-sx.cs-lw8 .lw-card.k-4 { transform: translate(9px, 9px) rotate(2.5deg); }
.lp-sx.cs-lw8 .lw-n .d0 { display: none; }
.lp-sx.cs-lw8 .lw-n .d1 { display: inline; }
.lp-sx.cs-lw8 .lw-c2 .lw-bar i { width: 2.63%; }
.lp-sx.cs-lw9 .lw-card.k-2 .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-lw10 .lw-card.k-2 { transform: translateX(42px) rotate(7deg); }
.lp-sx.cs-lw10 .lw-card.k-2 .stamp { opacity: 1; }
.lp-sx.cs-lw11 .lw-card.k-2 { opacity: 0; transform: translateX(240px) rotate(18deg); }
.lp-sx.cs-lw11 .lw-card.k-3 { transform: none; }
.lp-sx.cs-lw11 .lw-card.k-4 { transform: translate(5px, 5px) rotate(1.5deg); }
.lp-sx.cs-lw11 .lw-n .d1 { display: none; }
.lp-sx.cs-lw11 .lw-n .d2 { display: inline; }
.lp-sx.cs-lw11 .lw-c2 .lw-bar i { width: 5.26%; }
.lp-sx.cs-lw12 .lw-card.k-3 .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-lw13 .lw-card.k-3 { transform: translateX(-42px) rotate(-7deg); }
.lp-sx.cs-lw13 .lw-card.k-3 .stamp { opacity: 1; }
.lp-sx.cs-lw14 .lw-card.k-3 { opacity: 0; transform: translateX(-240px) rotate(-18deg); }
.lp-sx.cs-lw14 .lw-card.k-4 { transform: none; }
.lp-sx.cs-lw14 .lw-n .d2 { display: none; }
.lp-sx.cs-lw14 .lw-n .d3 { display: inline; }
.lp-sx.cs-lw14 .lw-c2 .lw-bar i { width: 7.89%; }
.lp-sx .lw-later {
  align-self: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--hs-mute);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ow-ink) 25%, transparent); text-underline-offset: 3px;
}
.lp-sx .lw-piles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.lp-sx .lw-piles > span {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 6px; padding: 6px 10px; border-radius: 10px;
  background: var(--ow-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ow-ink) 10%, transparent); transition: background 0.3s, box-shadow 0.3s;
}
.lp-sx .lw-piles .material-symbols-outlined { color: var(--ow-ed-accent); font-size: 14px; }
.lp-sx .lw-piles b { justify-self: end; font-family: var(--ow-serif); font-size: 18px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .lw-piles .nm { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--hs-mute); }
.lp-sx.cs-lw8 .lw-piles .p-give, .lp-sx.cs-lw11 .lw-piles .p-dispose, .lp-sx.cs-lw14 .lw-piles .p-keep { background: var(--ow-ed-accent-soft); box-shadow: 0 0 0 1.5px var(--ow-champagne); }

/* Zeug loswerden 3 · Weg ist weg – mit Haken: the rest of the cellar decided, the collection finished
   and its ✓ in the chooser; each pile with what comes next (DeclutterPiles); the letting-go balance,
   which counts only what has left — so far the one sale. */
.lp-sx .lw-all b { font-family: var(--ow-serif); font-size: 18px; font-weight: 600; color: var(--ow-ink); font-variant-numeric: lining-nums tabular-nums; }
.lp-sx .lw-fin {
  position: relative; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 12px;
  border-radius: 10px; white-space: nowrap; background: var(--ow-ink); color: var(--ow-cream); font-size: 14px; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s, background 0.3s, color 0.3s;
}
.lp-sx.cs-lw15 .lw-fin { opacity: 1; transform: none; }
.lp-sx .lw-fin .l2 { display: none; align-items: center; gap: 6px; }
.lp-sx .lw-fin .l2 em { margin-left: 8px; font-size: 12.5px; font-style: normal; font-weight: 600; opacity: 0.7; }
.lp-sx .lw-fin .cs-tap { left: 50%; background: color-mix(in srgb, var(--ow-champagne) 30%, transparent); border-color: var(--ow-champagne-deep); }
.lp-sx.cs-lw16 .lw-fin .cs-tap { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.25s; }
.lp-sx.cs-lw17 .lw-fin { background: var(--ow-champagne); color: var(--ow-ink); }
.lp-sx.cs-lw17 .lw-fin .l1 { display: none; }
.lp-sx.cs-lw17 .lw-fin .l2 { display: inline-flex; }
.lp-sx.cs-lw17 .lw-fin .cs-tap { opacity: 0; transform: scale(2); transition: opacity 0.45s, transform 0.45s; }
.lp-sx .lw-pls { display: grid; gap: 4px; margin-top: 12px; }
.lp-sx .lw-pl {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 6px 10px 6px 6px;
  border-top: 1px solid color-mix(in srgb, var(--ow-ink) 7%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s calc(var(--d) * 0.15s), transform 0.35s calc(var(--d) * 0.15s);
}
.lp-sx .lw-pl .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ow-cream-deep); color: var(--ow-ed-accent); font-size: 16px; }
.lp-sx .lw-pl .tt { min-width: 0; }
.lp-sx .lw-pl .tt b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.lp-sx .lw-pl .tt small { font-size: 12px; color: var(--hs-mute-2); }
.lp-sx .lw-pl .nx { max-width: 210px; text-align: right; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ow-ed-accent); }
.lp-sx.cs-lw18 .lw-pl { opacity: 1; transform: none; }
.lp-sx .lw-bal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-top: auto; padding: 10px 14px; border-radius: 12px;
  background: var(--ow-ed-accent-soft); font-size: 12.5px; color: var(--hs-mute); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s;
}
.lp-sx .lw-bal .k { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ow-ed-accent); }
.lp-sx .lw-bal b { margin-left: 4px; font-family: var(--ow-serif); font-size: 18px; font-weight: 600; color: var(--ow-ink); font-variant-numeric: lining-nums; }
.lp-sx.cs-lw19 .lw-bal { opacity: 1; transform: none; }

/* Phones: the scenario films in a 360px card — smaller type, tighter rows, a narrower deck. */
@media (max-width: 600px) {
  .lp-sx .cs-where, .lp-sx .cs-rec, .lp-sx .cs-found { height: 24px; padding: 0 9px; font-size: 11px; }
  .lp-sx .cs-where { left: 8px; bottom: 8px; }
  .lp-sx .cs-rec, .lp-sx .cs-found { right: 8px; top: 8px; }
  .lp-sx .cs-sp { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .lp-sx .cs-sp .ic { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .lp-sx .cs-sp b { font-size: 18px; }
  .lp-sx .cs-sp small { font-size: 11.5px; }
  .lp-sx .cs-ppl { gap: 5px; margin-top: 8px; }
  .lp-sx .cs-pp { height: 30px; padding: 0 9px 0 3px; font-size: 12px; }
  .lp-sx .cs-pp .av { width: 24px; height: 24px; }
  .lp-sx .cs-pp small { display: none; }
  .lp-sx .cs-pdf { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px 7px 8px; }
  .lp-sx .cs-pdf .ext { height: 34px; font-size: 9px; }
  .lp-sx .cs-pdf b { font-size: 13px; }
  .lp-sx .cs-pdf small { font-size: 11.5px; }
  .lp-sx .cs-ok { min-height: 32px; padding: 5px 10px; font-size: 12px; }

  .lp-sx .nx-hd, .lp-sx .bt-hd, .lp-sx .aw-hd { height: 22px; }
  .lp-sx .nx-cnt b, .lp-sx .aw-cnt b { font-size: 17px; }
  .lp-sx .nx-cnt, .lp-sx .aw-cnt, .lp-sx .aw-today { font-size: 11.5px; }
  .lp-sx .nx-cam { height: 126px; margin-top: 8px; }
  .lp-sx .nx-rms { gap: 6px; margin-top: 8px; }
  .lp-sx .nx-rm { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 7px; height: 46px; padding: 0 7px 0 6px; border-radius: 10px; }
  .lp-sx .nx-rm .ic { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
  .lp-sx .nx-rm .tt b { font-size: 12.5px; }
  .lp-sx .nx-rm .tt small { height: 14px; font-size: 11px; }
  .lp-sx .nx-rm .st { width: 20px; height: 20px; font-size: 10px; }
  .lp-sx .sx-c1.nx-c0 { gap: 6px; }
  .lp-sx .nx-know { gap: 10px; padding: 8px 10px; }
  .lp-sx .nx-know .ic { width: 28px; height: 28px; font-size: 14px; }
  .lp-sx .nx-know .tt b, .lp-sx .nx-due .tt b { font-size: 12.5px; }
  .lp-sx .nx-know .tt small, .lp-sx .nx-due .tt small { font-size: 11px; }
  .lp-sx .nx-due { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 7px 10px; }
  .lp-sx .nx-due .dd b { font-size: 17px; }
  .lp-sx .nx-due .dd small { font-size: 10.5px; }
  .lp-sx .nx-hold { font-size: 11.5px; }
  .lp-sx .nx-chip { height: 20px; padding: 0 7px; font-size: 10px; }
  .lp-sx .nx-sl { margin-top: 10px; padding: 8px 12px 4px; }
  .lp-sx .nx-sr { height: 28px; font-size: 12.5px; }
  .lp-sx .nx-lock { padding: 5px 10px; font-size: 11.5px; }
  .lp-sx .nx-c3 .cs-pdf { margin-top: 8px; }

  .lp-sx .gb-hd { height: 22px; }
  .lp-sx .gb-cnt b { font-size: 17px; }
  .lp-sx .gb-cnt { gap: 7px; font-size: 11.5px; }
  .lp-sx .gb-cnt .gb-sum { padding-left: 7px; font-size: 15px; }
  /* Count and span take the right of the header; the collection's name keeps one line. */
  .lp-sx .gb-hd .ov-k { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lp-sx .gb-cam { height: 126px; margin-top: 8px; }
  .lp-sx .gb-page { gap: 8px; padding: 30px 10px 36px; }
  .lp-sx .gb-albs { gap: 6px; margin-top: 8px; }
  .lp-sx .gb-alb { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 7px; height: 46px; padding: 0 7px 0 6px; border-radius: 10px; }
  .lp-sx .gb-alb .ic { width: 26px; height: 26px; }
  .lp-sx .gb-alb .tt b { font-size: 12.5px; }
  .lp-sx .gb-alb .tt small { font-size: 11px; }
  .lp-sx .gb-alb .st { width: 20px; height: 20px; font-size: 10px; }
  .lp-sx .gb-list { gap: 4px; margin-top: 6px; }
  .lp-sx .gb-it { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; height: 42px; }
  .lp-sx .gb-it.it-4 { display: none; }
  .lp-sx .gb-th { width: 34px; height: 34px; }
  .lp-sx .gb-it .tt b { font-size: 13px; }
  .lp-sx .gb-it .tt small { font-size: 11.5px; }
  .lp-sx .gb-rar { min-width: 0; }
  .lp-sx .gb-rar .sk { width: 56px; }
  .lp-sx .gb-rar .tx { height: 22px; padding: 0 7px; font-size: 11px; }
  .lp-sx .gb-det { gap: 6px 12px; margin-top: 8px; padding: 9px 11px; }
  .lp-sx .gb-dl small { font-size: 10px; }
  .lp-sx .gb-dl b { font-size: 18px; }
  .lp-sx .gb-tip { font-size: 12px; }
  .lp-sx .gb-flag { height: 24px; font-size: 10.5px; }
  .lp-sx .gb-sl { margin-top: 10px; padding: 8px 12px 4px; }
  .lp-sx .gb-sr { height: 28px; font-size: 12.5px; }
  .lp-sx .gb-lock { padding: 5px 10px; font-size: 11.5px; }
  .lp-sx .gb-c3 .cs-pdf { margin-top: 8px; }

  .lp-sx .bt-doc { width: 84%; padding: 10px 12px 9px; font-size: 10px; line-height: 1.45; }
  .lp-sx .bt-doc > small { font-size: 9.5px; }
  .lp-sx .bt-doc hr { margin: 5px 0; }
  .lp-sx .bt-tot { margin-top: 6px; }
  .lp-sx .bt-tot small { font-size: 11.5px; }
  .lp-sx .bt-tot b { font-size: 32px; }
  .lp-sx .bt-accs, .lp-sx .bt-vals { gap: 2px; margin-top: 6px; }
  .lp-sx .bt-acc, .lp-sx .bt-val, .lp-sx .bt-hh, .lp-sx .bt-r { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; padding: 0 6px; }
  .lp-sx .bt-acc, .lp-sx .bt-val, .lp-sx .bt-hh { height: 46px; }
  .lp-sx .bt-acc .ic, .lp-sx .bt-val .ic, .lp-sx .bt-hh .ic, .lp-sx .bt-r .ic { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
  .lp-sx .bt-acc .tt b, .lp-sx .bt-val .tt b, .lp-sx .bt-hh .tt b, .lp-sx .bt-r .tt b { font-size: 13px; }
  .lp-sx .bt-acc .tt small, .lp-sx .bt-val .tt small, .lp-sx .bt-hh .tt small { font-size: 11px; }
  .lp-sx .bt-acc .v, .lp-sx .bt-val .v, .lp-sx .bt-r .v { font-size: 15px; }
  .lp-sx .bt-hh .tag { height: 22px; padding: 0 8px; font-size: 11px; }
  .lp-sx .bt-sign { font-size: 11.5px; }
  .lp-sx .bt-btn { height: 34px; font-size: 13px; }
  .lp-sx .bt-fk { margin-top: 10px; }
  .lp-sx .bt-fl { gap: 4px; margin-top: 6px; }
  .lp-sx .bt-r { row-gap: 3px; padding: 6px; }
  .lp-sx .bt-r .tt small { display: none; }
  .lp-sx .bt-r .v { min-width: 84px; }
  .lp-sx .bt-r .v .sk { width: 70px; }
  .lp-sx .bt-r .doc { height: 20px; font-size: 10.5px; }

  .lp-sx .sf-rl { font-size: 10px; }
  .lp-sx .sf-roll { gap: 6px; margin-top: 4px; }
  .lp-sx .sf-t { gap: 3px; }
  .lp-sx .sf-t i { height: 34px; border-radius: 7px; font-size: 16px; }
  .lp-sx .sf-t small { font-size: 10px; }
  .lp-sx .sf-t .cs-tap { top: 17px; }
  .lp-sx .sf-ph { margin-top: 8px; border-radius: 14px; }
  .lp-sx .sf-add { margin-top: 8px; }
  .lp-sx .sf-hd { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .lp-sx .sf-hd .ic { width: 40px; height: 40px; border-radius: 10px; font-size: 19px; }
  .lp-sx .sf-hd b { font-size: 20px; }
  .lp-sx .sf-hd small { font-size: 11.5px; }
  .lp-sx .sf-io { grid-template-columns: minmax(0, 1fr) 124px; gap: 10px; margin-top: 8px; }
  .lp-sx .sf-f { padding: 4px 8px; }
  .lp-sx .sf-f .k { font-size: 10.5px; }
  .lp-sx .sf-f .v { height: 20px; font-size: 13.5px; }
  .lp-sx .sf-f .sk { width: 80px; }
  .lp-sx .sf-att { height: 24px; font-size: 11px; }
  .lp-sx .sf-rc { padding: 8px 8px 7px; font-size: 9px; line-height: 1.4; }
  .lp-sx .sf-rc > small { font-size: 8.5px; }
  .lp-sx .sf-rc hr { margin: 4px 0; }
  .lp-sx .sf-sn { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; padding: 6px 8px; }
  .lp-sx .sf-sn .ic { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
  .lp-sx .sf-sn .tt b { font-size: 13px; }
  .lp-sx .sf-sn .tt small { font-size: 11px; }
  .lp-sx .sf-pdf { padding: 10px 12px 7px; }
  .lp-sx .sf-ph3 { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding-bottom: 6px; }
  .lp-sx .sf-ph3 .ext { height: 30px; font-size: 8px; }
  .lp-sx .sf-ph3 b { font-size: 16px; }
  .lp-sx .sf-ph3 small { font-size: 10.5px; }
  .lp-sx .sf-lr { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; height: 29px; font-size: 12.5px; }
  .lp-sx .sf-lr .tt small { display: none; }
  .lp-sx .sf-sum { padding-top: 6px; font-size: 11.5px; }
  .lp-sx .sf-sum b { font-size: 20px; }
  .lp-sx .sf-send { gap: 6px; margin-top: 8px; }
  .lp-sx .sf-send span { height: 28px; padding: 0 10px 0 8px; font-size: 11.5px; }

  .lp-sx .aw-cam { margin-top: 8px; border-radius: 14px; }
  .lp-sx .aw-rms { gap: 5px; margin-top: 8px; }
  .lp-sx .aw-rm { height: 28px; padding: 0 9px 0 7px; font-size: 12px; }
  .lp-sx .aw-its { margin-top: 6px; }
  .lp-sx .aw-it { grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; height: 36px; }
  .lp-sx .aw-it .ic { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
  .lp-sx .aw-it b { font-size: 13px; }
  .lp-sx .aw-it .dt { font-size: 12px; }
  .lp-sx .aw-it .fl { height: 22px; padding: 0 6px; }
  .lp-sx .aw-cut { height: 26px; }
  .lp-sx .aw-cut span { font-size: 9.5px; }
  .lp-sx .aw-fly { height: 30px; font-size: 12px; }
  .lp-sx.cs-aw11 .aw-fly { transform: translate(-95%, 76px) scale(0.4); }
  .lp-sx .aw-boxes { gap: 6px; margin-top: 10px; }
  .lp-sx .aw-box { gap: 2px; padding: 10px 4px 9px; border-radius: 12px; }
  .lp-sx .aw-box .ic { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
  .lp-sx .aw-box > b { margin-top: 2px; font-size: 15px; }
  .lp-sx .aw-box small, .lp-sx .aw-box .n { font-size: 11px; }
  .lp-sx .aw-box .n b { font-size: 13.5px; }
  .lp-sx .aw-tot { margin-top: 10px; font-size: 12px; }

  .lp-sx .lw-q { font-size: 18.5px; }
  .lp-sx .lw-done { font-size: 11.5px; }
  .lp-sx .lw-col { grid-template-columns: 30px minmax(0, 1fr) auto 14px; gap: 8px; height: 44px; margin-top: 6px; padding: 0 8px 0 7px; border-radius: 10px; }
  .lp-sx.cs-lw3 .lw-col.new { height: 44px; margin-top: 6px; }
  .lp-sx .lw-col .ic { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
  .lp-sx .lw-col b { font-size: 13.5px; }
  .lp-sx .lw-col .n { font-size: 11.5px; }
  .lp-sx .lw-toast { padding: 6px 12px 6px 8px; font-size: 12px; }
  .lp-sx .lw-hd > b { font-size: 20px; }
  .lp-sx .lw-n, .lp-sx .lw-all { font-size: 11.5px; }
  .lp-sx .lw-bar { margin-top: 6px; }
  .lp-sx .lw-deck { grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr); gap: 4px 8px; margin-top: 8px; }
  .lp-sx .lw-h { font-size: 11px; }
  .lp-sx .lw-stack { height: 130px; }
  .lp-sx .lw-card { gap: 4px; padding: 8px; border-radius: 14px; }
  .lp-sx .lw-card .ph { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
  .lp-sx .lw-card b { font-size: 14px; }
  .lp-sx .lw-card small { font-size: 10.5px; }
  .lp-sx .lw-card .stamp { font-size: 9px; }
  .lp-sx .lw-card.give .stamp { top: 14px; }
  .lp-sx .lw-later { margin-top: 6px; font-size: 11.5px; }
  .lp-sx .lw-piles { gap: 4px; }
  .lp-sx .lw-piles > span { padding: 4px 7px; }
  .lp-sx .lw-piles b { font-size: 15px; }
  .lp-sx .lw-piles .nm { font-size: 10px; }
  .lp-sx .lw-fin { height: 34px; margin-top: 8px; font-size: 13px; }
  .lp-sx .lw-fin .l2 em { display: none; }
  .lp-sx .lw-pls { gap: 2px; margin-top: 8px; }
  .lp-sx .lw-pl { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; min-height: 46px; padding: 4px 6px 4px 4px; }
  .lp-sx .lw-pl .ic { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
  .lp-sx .lw-pl .tt b { font-size: 12.5px; }
  .lp-sx .lw-pl .tt small { font-size: 11px; }
  .lp-sx .lw-pl .nx { max-width: 136px; font-size: 11px; }
  .lp-sx .lw-bal { padding: 7px 12px; font-size: 11.5px; }
  .lp-sx .lw-bal .k { display: none; }
  .lp-sx .lw-bal b { font-size: 16px; }
}

/* ═══════════════════════ LANDING — TEASER (film) ═══════════════════════
   The brand film between the hero and the Einblicke band, as a two-click embed: Home.razor shows
   our own 16:9 thumbnail with a play button, and only the press on it swaps in the YouTube player.
   Ink, like the band it leads into (Einblicke follows on the start and full views), so the two
   read as one dark ledge — which is also why it has no bottom padding of its own there: the
   Einblicke band's top padding is the space between them. The frame keeps its 16:9 box through
   the swap, so pressing play does not move the page. Prefix lp-teaser-. */
.lp .lp-teaser { background: var(--ow-ink); color: #fff; padding-top: clamp(56px, 7vw, 96px); padding-bottom: 0; }
.lp .lp-teaser .lp-eyebrow { color: var(--ow-champagne); margin-bottom: 24px; }
/* A view without the Einblicke band (the Ordnung & Vorsorge page) closes the ledge itself. */
.lp .lp-teaser.lp-teaser-solo { padding-bottom: clamp(56px, 7vw, 96px); }
/* A film that tells a story (Ordnung & Vorsorge): a line that asks the visitor in above it, and the
   note that its heroine is made up under it. */
.lp .lp-teaser-intro { max-width: 1080px; margin: -8px auto 24px; font-family: var(--ow-serif); font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 500; line-height: 1.2; color: #fff; }
.lp .lp-teaser-fiction { max-width: 1080px; margin: 16px auto 0; font-size: 1rem; font-style: italic; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }

.lp .lp-teaser-frame { position: relative; max-width: 1080px; aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--ow-line-dark); background: var(--ow-ink-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.85); }
.lp .lp-teaser-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lp .lp-teaser-poster { position: absolute; inset: 0; display: block; cursor: pointer; }
.lp .lp-teaser-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.lp .lp-teaser-poster:hover img { transform: scale(1.015); filter: brightness(.9); }
.lp .lp-teaser-poster:focus-visible { outline: 3px solid var(--ow-champagne); outline-offset: -3px; }

/* The play button: a champagne disc with an ink triangle, centred on the frame, and a soft ring
   that breathes outward on hover so it reads as the thing to press. */
.lp .lp-teaser-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--ow-champagne); color: var(--ow-ink); box-shadow: 0 0 0 0 rgba(201,169,106,.45), 0 18px 40px -12px rgba(0,0,0,.7); transform: translate(-50%, -50%); transition: transform .25s ease, box-shadow .4s ease; }
.lp .lp-teaser-play .material-symbols-outlined { font-size: clamp(34px, 4.4vw, 50px); margin-left: 4px; font-variation-settings: 'FILL' 1; }
.lp .lp-teaser-poster:hover .lp-teaser-play,
.lp .lp-teaser-poster:focus-visible .lp-teaser-play { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 14px rgba(201,169,106,.18), 0 18px 40px -12px rgba(0,0,0,.7); }

/* What the press sends to Google, said before it is pressed. */
.lp .lp-teaser-note { display: flex; align-items: flex-start; gap: 8px; max-width: 1080px; margin: 18px auto 0; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.55); }
.lp .lp-teaser-note .material-symbols-outlined { flex: none; font-size: 18px; color: var(--ow-champagne); }
.lp .lp-teaser-note a { color: var(--ow-champagne); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lp .lp-teaser-poster img, .lp .lp-teaser-play { transition: none; }
  .lp .lp-teaser-poster:hover img { transform: none; }
}

@media (max-width: 640px) {
  .lp .lp-teaser-frame { border-radius: 16px; }
}

/* The same frame in the capture section of the occasion and edition pages, in place of the demo.
   That section is paper, not ink, so the note under the frame takes the paper's text colours. */
.lp .lp-cap-film { margin-top: clamp(28px, 4vw, 48px); }
.lp .lp-cap-film .lp-teaser-frame { box-shadow: 0 40px 80px -40px rgba(11,16,32,.45); }
.lp .lp-cap-film .lp-teaser-note { color: var(--own-fg-2); }
.lp .lp-cap-film .lp-teaser-note .material-symbols-outlined,
.lp .lp-cap-film .lp-teaser-note a { color: var(--ow-champagne-deep); }

/* ═══════════════════════ LANDING — EINBLICKE (demo film) ═══════════════════════
   The band directly under the hero, playing one recording of the running app — tutorial S13,
   a stamp album page digitised — in two cuts: the Desktop recording (16:9) on wide screens, the
   Phone recording (390×844) from the app's own phone breakpoint down. Home.razor picks the cut
   with <source media>; the frame here takes the matching shape and poster at the same
   breakpoint, so the plate is the right size and shows the right first frame before the video has
   loaded. Dark because the film is a bright object and wants 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.
   Prefix lp-einb-. */
.lp .lp-einblicke { background: var(--ow-ink); color: #fff; overflow: hidden; }
.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); }

/* Copy above, the film below it at the width of the shell: the desktop cut is a 16:9 screen and
   wants the room. */
.lp .lp-einb-layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.lp .lp-einb-copy { margin-bottom: 0; }
.lp .lp-einb-film { margin: 0; display: grid; justify-items: center; row-gap: 24px; }

/* The plate the video sits on. Its ratio is the cut's, and its background the cut's poster, so
   nothing jumps when the first frame arrives. */
.lp .lp-einb-frame { width: 100%; max-width: 1120px; aspect-ratio: 1600 / 900; overflow: hidden; border-radius: 18px; border: 1px solid var(--ow-line-dark); background: var(--ow-ink-2) url("video/einblicke/stamp-collection-desktop.poster.jpg") center / cover no-repeat; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.lp .lp-einb-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }

.lp .lp-einb-current { width: 100%; max-width: 1120px; }
.lp .lp-einb-caption { margin: 0; padding-top: 24px; border-top: 1px solid var(--ow-line-dark); font-family: var(--ow-serif); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 500; line-height: 1.15; color: #fff; }
.lp .lp-einb-caption em { display: block; font-style: italic; color: var(--ow-champagne); }

.lp .lp-einb-note { display: flex; align-items: center; gap: 8px; margin: 20px 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); }
/* The install offer under the lede — shown only while pwaInstall.js marks the browser as able
   to install (see .lp-pwa-install), so an installed app never sees it. */
.lp .lp-einb-install { margin-top: 28px; }

@media (max-width: 768px) {
  /* The phone cut: a portrait screen, centred like the phone it was recorded on. 768px is the
     breakpoint the <source media> in Home.razor switches at — keep the two in step. */
  .lp .lp-einb-layout { row-gap: 32px; }
  .lp .lp-einb-frame { width: min(78vw, 320px); aspect-ratio: 390 / 844; border-radius: 26px; background-image: url("video/einblicke/stamp-collection-phone.poster.jpg"); }
  .lp .lp-einb-caption { font-size: 1.5rem; }
}

/* The same band under the Finanzen page's hero (and its Haushaltsbuch campaign), playing tutorial
   S14 — a till slip read into the household book. Only the posters differ; the breakpoint is the
   one above. */
.lp .lp-einb--receipt .lp-einb-frame { background-image: url("video/einblicke/receipt-household-book-desktop.poster.jpg"); }
@media (max-width: 768px) {
  .lp .lp-einb--receipt .lp-einb-frame { background-image: url("video/einblicke/receipt-household-book-phone.poster.jpg"); }
}

/* The Sammlungswert campaign's films (Home.SammlungFilme, /de/sammlung?fokus=sammlungswert): the
   stamp album (S13) and the coins (S01) in their phone cut, side by side from 769px, one under the
   other below; under them the trial scan and the registration again. Same ink band as above. */
.lp .lp-swf-films { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 48px; margin-top: 40px; }
.lp .lp-swf-film { margin: 0; display: grid; justify-items: center; row-gap: 18px; }
.lp .lp-swf-frame { width: 100%; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 26px; border: 1px solid var(--ow-line-dark); background: var(--ow-ink-2) center / cover no-repeat; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.lp .lp-swf-frame--stamp-highlights { background-image: url("video/einblicke/stamp-highlights-phone.poster.jpg"); }
.lp .lp-swf-frame--coin-highlights { background-image: url("video/einblicke/coin-highlights-phone.poster.jpg"); }
.lp .lp-swf-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.lp .lp-swf-caption { margin: 0; font-family: var(--ow-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.2; text-align: center; color: #fff; }
.lp .lp-swf-caption em { display: block; margin-top: 4px; font-size: 1rem; font-style: italic; color: var(--ow-champagne); }
.lp .lp-swf .lp-einb-note { justify-content: center; margin-top: 32px; }
.lp .lp-swf-ctas { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px; margin-top: 28px; }
@media (max-width: 768px) {
  .lp .lp-swf-films { grid-template-columns: minmax(0, 280px); gap: 36px; margin-top: 32px; }
}

/* =========================================================================
   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;
}

/* OWNY's face on that line, sized like every other tip avatar (.aiqc-tip-avatar,
   .newspanel-avatar, .hx-orb). Both shapes the icon can take need a size of their
   own: the animated persona renders a wrapper span that falls back to 100 % of the
   row without --owny-icon-size, and the static persona renders a bare <img> that
   falls back to the PNG's own 512 px. Either way an unsized icon filled the whole
   re-estimate dialog. */
.ow-facts .ow-facts-tip > .owny-live,
.ow-facts .ow-facts-tip > img {
    --owny-icon-size: 22px;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 1px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Sidebar edition entry (EditionSidebarGroup) ─────────────────────────────────────────────
   One item named after the edition; its › turns down when the edition's pages open below it.
   Those pages look like the top level (no tinted box, same size and padding as the items above),
   only set in a little so they read as belonging to the edition. The layouts' scoped sidebar rules
   style every other submenu; these win through the extra `.own-edition-nav`. */
.rz-sidebar .rz-panel-menu .own-edition-nav > .rz-navigation-item-wrapper .rz-navigation-item-icon-children.rz-state-collapsed {
    transform: rotate(-90deg) !important;
}
.rz-sidebar .rz-panel-menu .own-edition-nav > .rz-navigation-item-wrapper .rz-navigation-item-icon-children.rz-state-expanded {
    transform: rotate(0deg) !important;
}
.rz-sidebar .rz-panel-menu .own-edition-nav .rz-navigation-menu {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rz-sidebar .rz-panel-menu .own-edition-nav .rz-navigation-menu .rz-navigation-item {
    font-size: inherit !important;
}
.rz-sidebar .rz-panel-menu .own-edition-nav .rz-navigation-menu .rz-navigation-item-wrapper {
    margin: 0 !important;
    background: transparent !important;
}
.rz-sidebar .rz-panel-menu .own-edition-nav .rz-navigation-menu .rz-navigation-item-link {
    font-size: inherit !important;
    margin: 4px 12px 4px 28px !important;
    padding: 10px 16px !important;
}
.rz-sidebar .rz-panel-menu .own-edition-nav .rz-navigation-menu .rz-navigation-item-icon {
    width: var(--rz-panel-menu-icon-width) !important;
    height: var(--rz-panel-menu-icon-height) !important;
    font-size: var(--rz-panel-menu-icon-font-size) !important;
    margin-inline: var(--rz-panel-menu-icon-margin-inline) !important;
}

/* ── 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%, var(--ow-ink) 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(201, 169, 106, 0.12); border-color: rgba(201, 169, 106, 0.4);
    box-shadow: 0 4px 12px rgba(201, 169, 106, 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, var(--ow-ink-2) 0%, var(--ow-gold-ink) 100%);
    border-color: transparent; box-shadow: 0 4px 16px rgba(201, 169, 106, 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;
    }
}

/* The cookie button and a page's own bottom bar ([data-bottom-bar], e.g. the landing page's sticky
   start bar). Left where the layout puts it, the button sat on the bar's full-width button and its
   fine print; there is no free corner to tuck it into on a phone, as the fine print spans nearly the
   whole width. So it rides just above the bar, on every page that has one. The bar's height comes
   from bottomBarClearance.js (it includes the bar's safe-area padding); the fallback is the start
   bar's one-line height until the script has measured. Defined after the static-page rule above so
   it wins over it as well as over the layout's inline CookieFabStyle. */
body:has([data-bottom-bar]) .own-cookie-fab {
    --rz-fab-inset-block-end: calc(var(--own-bottom-bar-height, calc(110px + env(safe-area-inset-bottom, 0px))) + 0.75rem) !important;
}

/* On a phone the button is a quiet utility floating over the page: smaller and toned down until
   it is touched or focused. Scaled from its outer corner so the inset stays where the rules above
   put it. */
@media (max-width: 768px) {
    .own-cookie-fab {
        transform: scale(0.8);
        transform-origin: left bottom;
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }

    .own-cookie-fab:hover,
    .own-cookie-fab:focus-visible {
        opacity: 1;
    }

    /* Above a page's own bottom bar the button floats over the page's text, which starts at the left
       edge — numbers, icons, the first word of each line. In the right corner it covers the least of
       it. Overrides the layout's inline CookieFabStyle. */
    body:has([data-bottom-bar]) .own-cookie-fab {
        inset-inline-start: auto !important;
        inset-inline-end: 12px !important;
        transform-origin: right bottom;
    }
}

/* =========================================================================
   OWNAMIC — Sidebar on phones (MainLayout, web and app)
   On a phone the sidebar slides over the page; it must never take a grid
   column and squeeze the page into what is left beside it. The layout used to
   decide that from `isMobile`, which RadzenMediaQuery can only report over JS
   interop: until it has — or when it never does, after a dropped or resumed
   circuit — the sidebar got its desktop style and pushed the page aside. The
   viewport is known to CSS at the first paint, so the overlay is decided here,
   with the same breakpoint as the layout's media query.
   ========================================================================= */
@media (max-width: 768px) {
    .main-layout-container .rz-layout {
        position: relative;
    }

    /* Out of the grid: the auto column collapses and the body keeps the full width.
       Radzen's own `.rz-layout .rz-sidebar { position: static }` is what put it in. */
    .main-layout-container .rz-layout > .rz-sidebar {
        position: absolute;
        z-index: 200;
        max-width: calc(100vw - 3rem);
    }
}

/* Tap outside the open sidebar to close it. Rendered whenever the sidebar is open;
   only a phone gets it, since a desktop sidebar sits beside the page, not over it. */
.own-sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .own-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100;
        background: transparent;
    }
}

/* =========================================================================
   OWNAMIC — PDF import drop area (.ow-import-file)
   The card on /exports that takes an exported OWNAMIC PDF back. A label that
   wraps the (invisible) file input, so the whole dashed area is the click
   target and the keyboard still reaches the input. Same editorial language as
   the export tree next to it; scoped under .own-canvas.
   ========================================================================= */
.own-canvas .ow-import-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px dashed var(--ow-line);
    border-radius: 14px;
    background: var(--ow-cream);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.own-canvas .ow-import-file:hover,
.own-canvas .ow-import-file:focus-within {
    border-color: var(--ow-champagne);
    background: var(--ow-paper);
}

.own-canvas .ow-import-file.is-busy {
    cursor: progress;
    opacity: 0.8;
}

/* The input itself stays in the DOM (the picker needs it) but out of sight. */
.own-canvas .ow-import-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.own-canvas .ow-import-file > .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 2rem;
    color: var(--ow-ink);
}

.own-canvas .ow-import-file-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.own-canvas .ow-import-file-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   OWNAMIC EDITIONS — accent scope
   .ed-{key} sets the accent of the current edition; surfaces read --ow-ed-accent and
   --ow-ed-accent-soft only, never an edition token directly. The default (no class) is
   the Bestand & Dokumentation edition, which is also the default edition.
   ========================================================================= */
:root,
.ed-bestand  { --ow-ed-accent: var(--ow-ed-bestand);  --ow-ed-accent-soft: var(--ow-ed-bestand-soft); }
.ed-sammler  { --ow-ed-accent: var(--ow-ed-sammler);  --ow-ed-accent-soft: var(--ow-ed-sammler-soft); }
.ed-finanzen { --ow-ed-accent: var(--ow-ed-finanzen); --ow-ed-accent-soft: var(--ow-ed-finanzen-soft); }
.ed-vorsorge { --ow-ed-accent: var(--ow-ed-vorsorge); --ow-ed-accent-soft: var(--ow-ed-vorsorge-soft); }
/* An edition-tinted edge: the undertone mixed into the hairline, never the full tone. Declared
   in every scope (not once on :root) so it resolves against that scope's --ow-ed-accent. */
:root, .ed-bestand, .ed-sammler, .ed-finanzen, .ed-vorsorge {
    --ow-ed-accent-line: color-mix(in srgb, var(--ow-ed-accent) 35%, var(--ow-line));
}

/* =========================================================================
   EDITION DETAIL PAGES — .own-canvas.ed-page
   The pages the edition start pages link to with "Details" (Vermögensübersicht, Verträge & Abos,
   Kalender & Fristen, Belege & Nachweise, Gesamtbild, Einnahmen & Ausgaben, …). They are ordinary
   .own-canvas pages; the edition only tints the eyebrow and the few accents below.
   ========================================================================= */
.own-canvas.ed-page .oc-eyebrow,
.own-canvas.ed-page .oc-section-more {
    color: var(--ow-ed-accent);
}

/* More air at the sides than a plain .own-canvas (8 px): the edition pages are card-heavy and read
   cramped against the screen edge. Same steps as the edition start page (.ed-home). */
.own-canvas.ed-page {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 1024px) {
    .own-canvas.ed-page {
        padding-left: 32px;
        padding-right: 32px;
    }
}

.own-canvas.ed-page .oc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* Filter chips as buttons (Verträge by type, Fristen by kind). */
.own-canvas .ed-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.own-canvas .ed-filter .oc-chip {
    min-height: 44px;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.own-canvas .ed-filter .oc-chip[aria-pressed="true"] {
    background: var(--ow-ed-accent-soft);
    border-color: var(--ow-ed-accent-line);
    color: var(--ow-ink);
    font-weight: 700;
}

/* The one dark card of a page — net worth on the wealth overview. */
.own-canvas .ed-hero-card {
    background: var(--ow-ink);
    color: var(--ow-paper);
    border: none;
}

.own-canvas .ed-hero-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ow-champagne-light);
}

.own-canvas .ed-hero-value {
    margin: 6px 0 14px;
    font-family: var(--ow-serif);
    font-size: clamp(2.2rem, 5vw, 2.9rem);
    font-weight: 500;
    line-height: 1;
}

.own-canvas .ed-hero-lines {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.own-canvas .ed-hero-lines > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.own-canvas .ed-hero-lines dt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    color: var(--ow-line-soft);
}

.own-canvas .ed-hero-lines dd {
    margin: 0;
    font-weight: 700;
}

.own-canvas .ed-hero-card .is-negative {
    color: var(--ow-negative-on-ink);
}

.own-canvas .ed-hero-notice {
    color: var(--ow-champagne-light);
}

/* Shares of a whole: label · bar · amount. */
.own-canvas .ed-share-list,
.own-canvas .ed-row-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.own-canvas .ed-share-list li {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ow-line-soft);
}

.own-canvas .ed-share-list li:last-child,
.own-canvas .ed-row-list li:last-child a {
    border-bottom: none;
}

.own-canvas .ed-share-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--ow-cream-deep);
    overflow: hidden;
}

.own-canvas .ed-share-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne));
}

.own-canvas .ed-share-value {
    font-weight: 700;
    white-space: nowrap;
}

/* Rows that open something: title · value · chevron. */
.own-canvas .ed-row-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ow-line-soft);
    color: var(--ow-ink);
    text-decoration: none;
}

.own-canvas .ed-row-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.own-canvas .ed-row-value {
    font-weight: 700;
    white-space: nowrap;
}

.own-canvas .ed-row-list .is-negative {
    color: var(--ow-negative);
}

/* The four evidence stages as one bar (belegt · recherchiert · geschätzt · angenommen). */
.own-canvas .ed-evidence-bar {
    display: flex;
    height: 10px;
    margin-top: 18px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--ow-cream-deep);
}

.own-canvas .ed-evidence-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--own-fg-2);
}

.own-canvas .ed-evidence-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.own-canvas .ed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ed-ev-documented { background: var(--ow-ev-documented); }
.ed-ev-researched { background: var(--ow-ev-researched); }
.ed-ev-estimated  { background: var(--ow-ev-estimated); }
.ed-ev-assumed    { background: var(--ow-ev-assumed); }

.own-canvas .ed-deadline-group {
    margin-top: 18px;
}

.own-canvas .ed-disclaimer {
    margin-top: 8px;
    font-size: 0.85rem;
}

/* Marktdaten (/markets): one row per financial or digital holding. On a phone the row is two
   lines — icon · name and source · value and change · chevron, then the trend sparkline across the
   width below — so the name keeps its room; from 720 px the sparkline steps into the first line.
   The sparkline is champagne like every chart line; only a loss is spoken in the signal colour. */
.own-canvas .ed-market-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.own-canvas .ed-market-list li {
    border-bottom: 1px solid var(--ow-line-soft);
}

.own-canvas .ed-market-list li:last-child {
    border-bottom: none;
}

.own-canvas .ed-market-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.own-canvas .ed-market-list a {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 20px;
    grid-template-areas:
        "icon name figures chevron"
        ".    spark spark  .";
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    padding: 10px 0;
    color: var(--ow-ink);
    text-decoration: none;
}

.own-canvas .ed-market-icon {
    grid-area: icon;
    color: var(--ow-ed-accent);
}

.own-canvas img.ed-market-icon {
    width: 24px;
    height: 24px;
}

.own-canvas .ed-market-chevron {
    grid-area: chevron;
    font-size: 20px;
    color: var(--own-fg-2);
}

.own-canvas .ed-market-name {
    grid-area: name;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.own-canvas .ed-market-name .ed-row-title,
.own-canvas .ed-market-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.own-canvas .ed-market-sub,
.own-canvas .ed-market-change {
    font-size: 0.8rem;
    color: var(--own-fg-2);
    white-space: nowrap;
}

.own-canvas .ed-market-change.is-negative {
    color: var(--ow-negative);
}

.own-canvas .ed-market-spark {
    grid-area: spark;
    display: block;
    height: 24px;
    margin-top: 6px;
}

.own-canvas .ed-market-spark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.own-canvas .ed-market-spark-line {
    fill: none;
    stroke: var(--ow-champagne-deep);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.own-canvas .ed-market-spark-area {
    fill: var(--ow-champagne);
    opacity: 0.18;
}

.own-canvas .ed-market-figures {
    grid-area: figures;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

@media (min-width: 720px) {
    .own-canvas .ed-market-list a {
        grid-template-columns: 24px minmax(0, 1fr) 112px minmax(9.5rem, auto) 20px;
        grid-template-areas: "icon name spark figures chevron";
    }

    .own-canvas .ed-market-spark {
        height: 32px;
        margin-top: 0;
    }
}

/* "Zukauf / Verkauf": the 44 px button beside a row that opens the purchase/sale dialog. */
.own-canvas .ed-market-adjust {
    flex: 0 0 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    cursor: pointer;
}

.own-canvas .ed-market-adjust:hover {
    background: var(--ow-ed-accent-soft);
    border-color: var(--ow-ed-accent-line);
}

/* Under the name column (icon 24 px + gap 12 px). */
.own-canvas .ed-market-attribution {
    margin: -4px 0 10px 36px;
}

/* =========================================================================
   EDITION START PAGE — .ed-home (docs/editionen-umbau-plan.md, chapters 1–2)
   One anatomy for four editions: Z1 greeting · Z2 figures · Z3 one next step · Z4 main list ·
   Z5 supplement · Z6 "Mehr", and ZS "Mein Bestand" under the greeting and the figures. Phone
   first; from 1024 px the greeting and the figures sit side by side, list and supplement below.
   ========================================================================= */
.ed-home {
    max-width: 1280px;
    margin: 0 auto;
    /* 16 px a side on a phone (4 px before put the cards flush against the screen edge). */
    padding: 20px 16px 32px;
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
}

/* Lazy zones: the placeholder a zone holds until its data arrived — on the first visit and right
   after an edition switch. Cream on paper, pulsing like the evidence bar's loading state. */
.ed-home .ed-skeleton {
    display: block;
    border-radius: 10px;
    background: var(--ow-cream-deep);
    animation: ed-pulse 1.4s ease-in-out infinite;
}

.ed-home .ed-skeleton-zone {
    display: grid;
    gap: 10px;
}

.ed-home .ed-skeleton--line { width: 60%; height: 0.9em; margin-top: 10px; }
.ed-home .ed-skeleton--card { height: 132px; border-radius: 18px; }
.ed-home .ed-skeleton--strip { height: 76px; border-radius: 18px; }
.ed-home .ed-skeleton--title { width: 40%; height: 1.6rem; }
.ed-home .ed-skeleton--row { height: 52px; }

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

.ed-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "z1" "z2" "zs" "z3" "z4" "z5" "zg" "z6";
    gap: 18px;
}

.ed-z1 { grid-area: z1; }
.ed-z2 { grid-area: z2; }
.ed-zs { grid-area: zs; }
.ed-z3 { grid-area: z3; display: grid; gap: 8px; }
.ed-z4 { grid-area: z4; }
.ed-z5 { grid-area: z5; display: grid; gap: 18px; align-content: start; }
.ed-zg { grid-area: zg; }
.ed-z6 { grid-area: z6; }

@media (min-width: 1024px) {
    .ed-home { padding: 32px 32px 48px; }

    /* The start guide's tile sits left of "Mehr"; hidden, "Mehr" moves up under the supplement
       again and the main list spans both rows. */
    .ed-home-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas:
            "z1 z2"
            "zs zs"
            "z3 z3"
            "z4 z5"
            "zg z6";
        gap: 24px 32px;
        align-items: start;
    }

    .ed-home-grid--no-guide {
        grid-template-areas:
            "z1 z2"
            "zs zs"
            "z3 z3"
            "z4 z5"
            "z4 z6";
    }
}

.ed-home .ed-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ow-ed-accent);
}

.ed-greeting {
    margin: 6px 0 0;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    line-height: 1.12;
}

.ed-greeting em {
    color: var(--ow-ed-accent);
}

.ed-home .ed-h2 {
    margin: 0;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.6rem;
}

.ed-home .ed-h3 {
    font-weight: 700;
    font-size: 1.05rem;
}

.ed-home .ed-muted,
.ed-home .ed-row-sub {
    font-size: 0.9rem;
    color: var(--own-fg-2);
}

/* Cards: paper by default, accent-soft for the next step, ink for money. */
.ed-home .ed-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    color: var(--ow-ink);
    text-decoration: none;
}

.ed-home a.ed-card:hover,
.ed-home a.ed-card:focus-visible {
    border-color: var(--ow-ed-accent-line);
}

.ed-home .ed-card--accent {
    background: var(--ow-ed-accent-soft);
    border-color: transparent;
}

.ed-home .ed-card--ink {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-paper);
}

.ed-home .ed-card--ink .ed-eyebrow {
    color: var(--ow-champagne-light);
}

.ed-home .ed-card-head,
.ed-home .ed-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.ed-home .ed-list-head {
    margin-bottom: 10px;
}

.ed-home .ed-card-link,
.ed-home .ed-list-head a {
    align-self: flex-start;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ow-ed-accent);
    text-decoration: none;
}

/* „Zum Gesamtbild →" / „Zum Haushaltsbuch →": a card's way on, named after where it leads. */
.ed-home .ed-card-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ed-home .ed-card-go .material-symbols-outlined {
    font-size: 1.05rem;
    transition: transform var(--own-dur-base) var(--own-ease);
}

.ed-home a.ed-card:hover .ed-card-go .material-symbols-outlined,
.ed-home a.ed-card:focus-visible .ed-card-go .material-symbols-outlined {
    transform: translateX(3px);
}

/* ZS "Mein Bestand": the objects added since yesterday, in 7 days, a month, a year — one serif
   figure in the edition's undertone, its histogram in champagne (a filled bar wears the brand), the
   period as chips. Head and chips share a row from a tablet on; the figure, the bars and „Zum
   Bestand →" are one link into the Bestandsliste. */
.ed-home .ed-stock {
    gap: 14px;
    background:
        radial-gradient(120% 140% at 100% 0%, var(--ow-ed-accent-soft) 0%, transparent 55%),
        var(--ow-paper);
}

.ed-home .ed-stock-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.ed-home .ed-stock-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ed-home .ed-stock-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ow-ed-accent-soft);
    color: var(--ow-ed-accent);
}

.ed-home .ed-stock-icon .material-symbols-outlined { font-size: 1.2rem; }

.ed-home .ed-stock-title {
    margin: 0;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.35rem;
}

.ed-home .ed-stock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ed-home .ed-stock-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--own-dur-base) var(--own-ease), background var(--own-dur-base) var(--own-ease);
}

/* On a phone the four chips share the row under the title, each as wide as its word. */
@media (max-width: 767.98px) {
    .ed-home .ed-stock-chips { width: 100%; gap: 4px; }
    .ed-home .ed-stock-chip { flex: 1 1 auto; justify-content: center; padding: 0 8px; font-size: 0.8rem; }
}

.ed-home .ed-stock-chip:hover { border-color: var(--ow-ed-accent-line); }

.ed-home .ed-stock-chip:focus-visible {
    outline: 2px solid var(--ow-ed-accent);
    outline-offset: 2px;
}

.ed-home .ed-stock-chip.is-on {
    background: var(--ow-ed-accent-soft);
    border-color: var(--ow-ed-accent-line);
    color: var(--ow-ed-accent);
}

.ed-home .ed-stock-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    color: var(--ow-ink);
    text-decoration: none;
}

.ed-home .ed-stock-figure {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ed-home .ed-stock-number {
    flex: none;
    font-family: var(--ow-serif);
    font-size: clamp(2.4rem, 6vw, 3rem);
    font-weight: 500;
    line-height: 1;
    color: var(--ow-ed-accent);
    font-variant-numeric: tabular-nums;
}

.ed-home .ed-stock-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ed-home .ed-stock-what {
    font-weight: 700;
    font-size: 1rem;
}

.ed-home .ed-stock-chart {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ed-home .ed-stock-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: 100%;
    align-items: end;
    gap: 3px;
    height: 56px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--ow-line);
}

.ed-home .ed-stock-bar {
    display: block;
    max-width: 28px;
    width: 100%;
    justify-self: center;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, var(--ow-champagne), var(--ow-champagne-deep));
    transition: height var(--own-dur-base) var(--own-ease);
}

.ed-home .ed-stock-bar.is-empty {
    height: 3px;
    background: var(--ow-cream-deep);
}

.ed-home .ed-stock-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--own-fg-2);
}

.ed-home .ed-stock-go { align-self: center; }

.ed-home .ed-stock-main:hover .ed-card-go .material-symbols-outlined,
.ed-home .ed-stock-main:focus-visible .ed-card-go .material-symbols-outlined {
    transform: translateX(3px);
}

.ed-home .ed-stock-main:focus-visible {
    outline: 2px solid var(--ow-ed-accent);
    outline-offset: 4px;
    border-radius: 12px;
}

@media (min-width: 768px) {
    .ed-home .ed-stock-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
        align-items: center;
        gap: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ed-home .ed-stock-chip,
    .ed-home .ed-stock-bar { transition: none; }
}

/* Finanzen, Z3: Kompass und Steuer — the Gesamtbild in brief beside the month's household book,
   stacked on a phone, side by side from a tablet on. */
.ed-home .ed-fin-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

@media (min-width: 768px) {
    .ed-home .ed-fin-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ed-home .ed-gb-card .pl-svg { margin: -4px 0 -2px; }
.ed-home .ed-gb-card .ed-hero-line { align-items: baseline; }
.ed-home .ed-gb-card .ed-hero-line > span:first-child { font-size: 0.88rem; color: var(--own-fg-2); }
.ed-home .ed-gb-growth { flex: none; font-family: var(--ow-serif); font-size: 1.2rem; font-weight: 600; }

/* The compass card with too little for a Gesamtbild: no whole-card link, one prominent
   „Gesamtbild aufsetzen" into the Finanzen onboarding, „Zum Gesamtbild →" as a link of its own. */
.ed-home .ed-gb-card--setup { background: var(--ow-ed-accent-soft); border-color: transparent; }
.ed-home .ed-gb-card--setup .ed-card-go:hover .material-symbols-outlined,
.ed-home .ed-gb-card--setup .ed-card-go:focus-visible .material-symbols-outlined { transform: translateX(3px); }
.ed-home .ed-gb-setup { align-self: flex-start; gap: 8px; margin-top: auto; }
.ed-home .ed-gb-setup .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-champagne); }

@media (prefers-reduced-motion: reduce) {
    .ed-home .ed-card-go .material-symbols-outlined { transition: none; }
}

.ed-home .ed-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ed-home .ed-figures > * {
    display: flex;
    flex-direction: column;
}

.ed-home .ed-figures--split {
    grid-template-columns: minmax(0, 1fr) auto;
}

.ed-home .ed-figure {
    font-family: var(--ow-serif);
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.1;
}

.ed-home .ed-figure-label {
    font-size: 0.85rem;
    color: var(--own-fg-2);
}

.ed-home .ed-hero-number {
    font-family: var(--ow-serif);
    font-size: clamp(2.3rem, 6vw, 2.8rem);
    font-weight: 500;
    line-height: 1;
}

.ed-home .ed-hero-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
}

.ed-home .ed-card--ink .ed-hero-line {
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--ow-line-soft);
}

.ed-home .ed-card--ink .ed-hero-line span:last-child {
    color: var(--ow-paper);
    font-weight: 700;
}

.ed-home .is-negative { color: var(--ow-negative); font-weight: 700; }
.ed-home .ed-card--ink .is-negative { color: var(--ow-negative-on-ink) !important; }
.ed-home .is-positive { color: var(--ow-ev-documented); font-weight: 700; }

.ed-home .ed-progress {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--ow-ed-accent-soft);
    overflow: hidden;
}

.ed-home .ed-progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne));
}

/* The evidence bar of the Sammler edition — same stages as Belege & Nachweise. */
.ed-home .ed-evidence-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--ow-cream-deep);
}

.ed-home .ed-evidence-bar.is-loading {
    animation: ed-pulse 1.4s ease-in-out infinite;
}

@keyframes ed-pulse {
    50% { opacity: 0.5; }
}

.ed-home .ed-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--own-fg-2);
}

.ed-home .ed-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ed-home .ed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Z3 — exactly one action. */
.ed-home .ed-next {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.ed-home .ed-next-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ed-home .ed-next-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.ed-home .ed-pill-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: var(--ow-ink);
    color: var(--ow-paper);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
}

.ed-home .ed-pill-btn:hover,
.ed-home .ed-pill-btn:focus-visible {
    background: var(--ow-ink-2);
}

.ed-home .ed-inline-step {
    font-weight: 600;
    color: var(--ow-ed-accent);
    text-decoration: none;
}

.ed-home .ed-deadlines .ed-deadline-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
}

/* Z4 — lists and the room grid. */
.ed-home .ed-rows {
    margin: 0;
    padding: 0 16px;
    list-style: none;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 16px;
}

.ed-home .ed-rows:empty {
    display: none;
}

.ed-home .ed-rows a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title value" "sub value";
    column-gap: 12px;
    align-items: center;
    min-height: 56px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ow-line-soft);
    color: var(--ow-ink);
    text-decoration: none;
}

.ed-home .ed-rows li:last-child a {
    border-bottom: none;
}

.ed-home .ed-row-title {
    grid-area: title;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ed-home .ed-rows .ed-row-sub { grid-area: sub; }
.ed-home .ed-rows .ed-row-value,
.ed-home .ed-rows .ed-chev { grid-area: value; }

/* Z4 of Vorsorge & Ordnung — the first five things kept, each with its photo; the story in serif
   italics, a thing without one invites to write it. */
.ed-home .ed-keepsakes-lead {
    margin: 0 0 12px;
}

.ed-home .ed-keepsakes a {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "thumb title value" "thumb sub value";
    min-height: 72px;
}

.ed-home .ed-keepsake-thumb {
    grid-area: thumb;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ow-ed-accent-soft);
    color: var(--ow-ed-accent);
    line-height: 0;
}

.ed-home .ed-keepsake-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
}

.ed-home .ed-keepsakes .ed-row-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ed-home .ed-keepsake-story {
    font-family: var(--ow-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ow-ink);
}

.ed-home .ed-keepsake-cta {
    grid-area: value;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ow-ed-accent);
    white-space: nowrap;
}

.ed-home .ed-keepsakes a:hover .ed-row-title,
.ed-home .ed-keepsakes a:focus-visible .ed-row-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* On a phone the invitation moves under the text, so the name keeps the row's width. */
@media (max-width: 599px) {
    .ed-home .ed-keepsakes a {
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas: "thumb title" "thumb sub" "thumb value";
    }

    .ed-home .ed-keepsakes .ed-chev { display: none; }

    .ed-home .ed-keepsake-cta {
        justify-self: start;
        margin-top: 2px;
    }
}

.ed-home .ed-room-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 700px) {
    .ed-home .ed-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ed-home .ed-room {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 64px;
    padding: 14px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 16px;
    color: var(--ow-ink);
    text-decoration: none;
}

.ed-home .ed-room:hover,
.ed-home .ed-room:focus-visible {
    border-color: var(--ow-ed-accent-line);
}

/* Vorsorge & Ordnung — the three Döstädning collections. */
.ed-home .ed-piles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ed-home .ed-pile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 14px;
    background: var(--ow-cream);
    color: var(--ow-ink);
    text-decoration: none;
}

.ed-home .ed-pile .material-symbols-outlined {
    color: var(--ow-ed-accent);
}

.ed-home .ed-pile-count {
    font-family: var(--ow-serif);
    font-size: 1.7rem;
    line-height: 1;
}

.ed-home .ed-pile-label {
    font-weight: 700;
    font-size: 0.85rem;
}

.ed-home .ed-pile-sub {
    font-size: 0.8rem;
    color: var(--own-fg-2);
}

.ed-home .ed-figure-line {
    font-size: 0.95rem;
}

/* Z5 — chips, tiles, the action row. */
.ed-home .ed-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ed-home .ed-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
}

.ed-home .ed-chip.is-done {
    background: var(--ow-ed-accent-soft);
    border-color: transparent;
}

.ed-home .ed-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ed-home .ed-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
    text-decoration: none;
}

.ed-home .ed-tile--accent {
    background: var(--ow-ed-accent-soft);
    border-color: transparent;
}

.ed-home .ed-tile-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.ed-home .ed-action-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Quick add, above "Mehr": capture an object (ink hero), start a collection, record an event or
   add a file. The edition shows in the undertone of the icon grounds and the tile edge only —
   text and cream grounds, never a filled surface; the hero stays ink with a champagne disc. */
.ed-home .ed-quick {
    display: grid;
    gap: 12px;
}

.ed-home .ed-quick-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--ow-ink);
    color: var(--ow-paper);
    text-decoration: none;
}
.ed-home .ed-quick-hero:hover,
.ed-home .ed-quick-hero:focus-visible {
    background: var(--ow-ink-2, var(--ow-ink));
    color: var(--ow-paper);
}

.ed-home .ed-quick-plus {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ow-champagne-deep);
    color: var(--ow-paper);
}
.ed-home .ed-quick-plus .material-symbols-outlined { font-size: 2rem; }

.ed-home .ed-quick-tx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ed-home .ed-quick-title {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.25;
}

.ed-home .ed-quick-sub {
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--own-fg-2);
}
.ed-home .ed-quick-hero .ed-quick-sub {
    color: color-mix(in srgb, var(--ow-paper) 72%, transparent);
}

.ed-home .ed-quick-go {
    flex: 0 0 auto;
    color: var(--ow-champagne);
}

.ed-home .ed-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* A tile is one big button (.ed-quick-main stretches over it through ::after); the discs of the
   event/file tile sit above that layer as buttons of their own. */
.ed-home .ed-quick-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--ow-ed-accent-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
}
.ed-home .ed-quick-tile:hover,
.ed-home .ed-quick-tile:focus-within {
    border-color: var(--ow-ed-accent);
}

.ed-home .ed-quick-discs {
    display: flex;
    gap: 8px;
}

.ed-home .ed-quick-disc {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ow-ed-accent-soft);
    color: var(--ow-ed-accent);
    font: inherit;
}
.ed-home .ed-quick-disc .material-symbols-outlined { font-size: 1.6rem; }
.ed-home button.ed-quick-disc { cursor: pointer; }
.ed-home button.ed-quick-disc:hover,
.ed-home button.ed-quick-disc:focus-visible {
    box-shadow: inset 0 0 0 1.5px var(--ow-ed-accent);
    outline: none;
}

.ed-home .ed-quick-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ed-home .ed-quick-main::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.ed-home .ed-quick-main:focus-visible { outline: none; }
.ed-home .ed-quick-tile:has(.ed-quick-main:focus-visible) {
    outline: 2px solid var(--ow-ed-accent);
    outline-offset: 2px;
}
.ed-home .ed-quick-main:disabled,
.ed-home .ed-quick-disc:disabled { cursor: default; opacity: 0.6; }

/* Z6 — "Mehr": quiet rows into everything else. */
.ed-home .ed-more {
    display: grid;
    gap: 4px;
}

.ed-home .ed-more .ed-h2 {
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.ed-home .ed-more-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--ow-line-soft);
    color: var(--ow-ink);
    text-decoration: none;
}

.ed-home .ed-more-row > .material-symbols-outlined:first-child {
    color: var(--ow-ed-accent);
}

.ed-home .ed-more-title {
    flex: 1 1 auto;
    font-weight: 600;
}

.ed-home .ed-more-figure {
    font-size: 0.88rem;
    color: var(--own-fg-2);
}

.ed-home .ed-chev {
    color: var(--own-fg-3);
}

/* =========================================================================
   START GUIDE IN THE APP — "Wie starten?" (docs/wie-starten-guide-design.md, chapter 6)
   The landing page's start guide with the user's progress: the tile (StartGuideTile, zone ZG of the
   edition start page), its row in "Mehr" once hidden, and the series (StartGuideSeries, a dialog
   with the scenes of the landing page — whose rules read .sg-app as well as .lp). A paper card with
   a champagne edge; the dots on a golden thread, done in champagne, the next one in ink; the
   edition's undertone only in text and soft grounds.
   ========================================================================= */
.sg-app {
    --sg-mute: #5a554b;
    --sg-faint: #8a857a;
    --sg-hair: color-mix(in srgb, var(--ow-ink) 10%, transparent);
    --sg-card: color-mix(in srgb, var(--ow-paper) 80%, var(--ow-cream));
}

.sg-app .sg-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The progress: a dot per step on a thread drawn as far as the steps are done in a row. */
.sg-app .sg-dots {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--sg-n), minmax(0, 1fr));
    align-items: center;
    padding: 4px 0;
}

.sg-app .sg-dots-line {
    position: absolute;
    top: 50%;
    left: calc(50% / var(--sg-n));
    right: calc(50% / var(--sg-n));
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ow-ink) 10%, transparent);
}

.sg-app .sg-dots-line i {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne));
    transform-origin: left center;
    transform: scaleX(var(--sg-fill, 0));
    animation: sg-thread-in 700ms var(--own-ease) both;
}

@keyframes sg-thread-in {
    from { transform: scaleX(0); }
}

.sg-app .sg-dot {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ow-paper);
    border: 1.5px solid var(--ow-line);
    color: var(--own-fg-2);
    font-size: 0.74rem;
    font-weight: 700;
}

.sg-app .sg-dot.is-done {
    background: var(--ow-champagne);
    border-color: var(--ow-champagne);
    color: var(--ow-ink);
}

.sg-app .sg-dot.is-done .material-symbols-outlined { font-size: 16px; }

.sg-app .sg-dot.is-next {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-paper);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ow-champagne) 30%, transparent);
}

.sg-app .sg-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--own-fg-2);
    cursor: pointer;
}

.sg-app .sg-x:hover { border-color: var(--ow-champagne); color: var(--ow-ink); }
.sg-app .sg-x:focus-visible { outline: 2px solid var(--ow-gold-ink); outline-offset: 2px; }

.sg-app .sg-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--ow-ed-accent);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.sg-app .sg-link:hover { text-decoration: underline; }
.sg-app .sg-link:focus-visible { outline: 2px solid var(--ow-gold-ink); outline-offset: 2px; border-radius: 4px; }

.sg-app .sg-aioff {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ow-cream-deep);
    color: var(--own-fg-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sg-app .sg-aioff .material-symbols-outlined { font-size: 14px; }

/* The tile */
.ed-home .sg-tile {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-ed-accent-line);
    overflow: hidden;
}

.ed-home .sg-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne));
}

.ed-home .sg-tile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ed-home .sg-tile .ed-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ed-home .sg-tile .ed-eyebrow .material-symbols-outlined { font-size: 1.15rem; }

.ed-home .sg-tile-title {
    margin: 6px 0 0;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.ed-home .sg-tile-title em { color: var(--ow-ed-accent); }

.ed-home .sg-dots-sk .ed-skeleton { height: 26px; border-radius: 13px; }
.ed-home .sg-meta-sk { display: inline-block; width: 140px; height: 14px; }

.ed-home .sg-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--own-fg-2);
}

.ed-home .sg-tile-meta b { color: var(--ow-ink); }

.ed-home .sg-tile-line {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--own-fg-2);
}

.ed-home .sg-next {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--ow-ed-accent-soft);
}

.ed-home .sg-next-n {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ow-ink);
    color: var(--ow-paper);
    font-size: 0.82rem;
    font-weight: 700;
}

.ed-home .sg-next-t {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 3px 0 0;
    font-weight: 700;
    line-height: 1.3;
}

.ed-home .sg-next-path { margin: 0; }

.ed-home .sg-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.ed-home .sg-actions .ed-pill-btn {
    gap: 8px;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.ed-home .sg-actions .ed-pill-btn .material-symbols-outlined { color: var(--ow-champagne); }

/* The hidden tile's row in "Mehr": a button dressed as the rows around it. */
.ed-home .ed-more-row--guide {
    width: 100%;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--ow-line-soft);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ed-home .ed-more-row--guide:focus-visible { outline: 2px solid var(--ow-ed-accent); outline-offset: 2px; }

/* The series: the Radzen shell steps aside (same overrides as .link-objects-dialog), the card owns
   its scrolling. A phone gets the whole screen. */
.rz-dialog-wrapper:has(.start-guide-dialog) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    overflow: auto !important;
    padding: 0.5rem !important;
}

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

.rz-dialog.start-guide-dialog,
.start-guide-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: 22px !important;
    background: var(--ow-cream);
    box-shadow: 0 40px 90px -30px rgba(11, 16, 32, 0.35);
}

.start-guide-dialog .rz-dialog-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 92dvh;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .rz-dialog-wrapper:has(.start-guide-dialog) { padding: 0 !important; }

    .rz-dialog.start-guide-dialog,
    .start-guide-dialog.rz-dialog {
        width: 100% !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .start-guide-dialog .rz-dialog-content,
    .start-guide-dialog .sgd { max-height: 100dvh; height: 100%; }
}

.sgd {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 92dvh;
    background: var(--ow-cream);
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
    text-align: left;
}

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

.sgd-hd {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: start;
    padding: 22px 26px 16px;
    background: var(--ow-paper);
    border-bottom: 1px solid var(--ow-line);
}

.sgd-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ow-ed-accent);
}

.sgd-title {
    margin: 4px 0 0;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.sgd-title em { color: var(--ow-ed-accent); }

.sgd-hd .sg-dots { grid-column: 1 / -1; max-width: 560px; }

.sgd-meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--own-fg-2);
}

.sgd-meta b { color: var(--ow-ink); }

.sgd-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 26px 40px;
}

.sgd-phase-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 26px 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ow-gold-ink);
}

.sgd-phase-h .dot {
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ow-champagne);
}

.sgd-phase-h small {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--sg-faint);
}

.sgd-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sgd-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 22px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--ow-line-soft);
}

.sgd-step:not(.is-open) { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; }

.sgd-st {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ow-paper);
    border: 1.5px solid var(--ow-line);
    color: var(--own-fg-2);
    font-size: 0.9rem;
    font-weight: 700;
}

.sgd-step.is-done .sgd-st { background: var(--ow-champagne); border-color: var(--ow-champagne); color: var(--ow-ink); }
.sgd-step.is-done .sgd-st .material-symbols-outlined { font-size: 20px; }

.sgd-step.is-next .sgd-st {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-paper);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ow-champagne) 30%, transparent);
}

.sgd-k {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 6px 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ow-ed-accent);
}

.sgd-k .sg-owny { letter-spacing: normal; text-transform: none; }

.sgd-t {
    margin: 0;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ow-ink);
}

.sgd-step.is-done:not(.is-open) .sgd-t { font-size: 1.2rem; color: var(--own-fg-2); }

.sgd-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-paper);
    font-family: var(--own-font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: 0.35em;
}

.sgd-d {
    margin: 8px 0 0;
    max-width: 52ch;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--own-fg-2);
}

.sgd-d b { color: var(--ow-ink); font-weight: 600; }

.sgd-path-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 12px 0 0;
}

.sgd-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 6px 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--own-success);
}

.sgd-done > .material-symbols-outlined { font-size: 18px; }

.sgd-undo {
    padding: 0;
    border: 0;
    background: none;
    color: var(--own-fg-2);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.sgd-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 16px;
}

.sgd-show,
.sgd-tick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 22px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ow-ink);
    cursor: pointer;
}

.sgd-show {
    padding: 0 16px 0 7px;
    border: 1px solid var(--ow-champagne);
    background: color-mix(in srgb, var(--ow-champagne) 10%, var(--ow-paper));
}

.sgd-show .pl {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ow-ink);
    color: var(--ow-champagne);
}

.sgd-show .pl .material-symbols-outlined { font-size: 20px; }

.sgd-tick {
    padding: 0 16px 0 12px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
}

.sgd-tick .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); }

.sgd-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    color: var(--ow-ed-accent);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.sgd-go:hover { text-decoration: underline; }

.sgd-show:focus-visible,
.sgd-tick:focus-visible,
.sgd-go:focus-visible,
.sgd-undo:focus-visible { outline: 2px solid var(--ow-gold-ink); outline-offset: 2px; }

.sgd-show:disabled,
.sgd-tick:disabled,
.sgd-undo:disabled { opacity: 0.6; cursor: default; }

/* The scene card: the landing page's picture, 16 : 10, scaled as one image (container units). */
.sgd-scene {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    container-type: inline-size;
    border-radius: 18px;
    background: var(--sg-card);
    border: 1px solid var(--sg-hair);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ow-ink) 4%, transparent), 0 20px 46px -28px rgba(70, 52, 20, 0.3);
}

.sgd-replay {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ow-ink) 12%, transparent);
    background: color-mix(in srgb, var(--ow-paper) 88%, transparent);
    color: var(--ow-ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity 250ms var(--own-ease);
}

.sgd-scene:hover .sgd-replay,
.sgd-scene.is-played .sgd-replay,
.sgd-replay:focus-visible { opacity: 1; }

.sgd-replay:focus-visible { outline: 2px solid var(--ow-gold-ink); outline-offset: 2px; }
.sgd-replay .material-symbols-outlined { font-size: 18px; }

.sgd-foot { margin: 24px 0 0; text-align: center; }

@media (max-width: 760px) {
    .sgd-hd { padding: 16px 16px 12px; }
    .sgd-title { font-size: 1.45rem; }
    .sgd-body { padding: 0 16px 32px; }
    .sgd-step,
    .sgd-step:not(.is-open) { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
    .sgd-st { width: 30px; height: 30px; font-size: 0.8rem; }
    .sgd-t { font-size: 1.3rem; }
    .sgd-scene { grid-column: 2; margin-top: 14px; border-radius: 14px; }
    .sgd-replay { right: 6px; bottom: 6px; width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-app .sg-dots-line i { animation: none; }
    .sgd-replay { display: none; }
}

/* =========================================================================
   START GUIDE DEMOS — „So geht’s“ (SgDemo, js/startGuideDemo.js; docs/wie-starten-guide-design.md, ch. 7)
   A step done in the app, on a replica of the real screens: a stage of a fixed logical size — the desk
   1000 × 680 with a cursor, the phone 360 × 720 with a finger — scaled as one picture to the player.
   Every screen inside is absolutely placed and rendered final; the script hides, types and counts.
   Somebody else's screens (an online banking, a broker app, the system's file dialog) are drawn in
   greys mixed from ink and the system font; OWNAMIC's own in the brand. Filled marks are ink or
   champagne; the edition's undertone only in text and soft grounds.
   ========================================================================= */
.dm-player {
    --sg-faint: #8a857a;
    --sg-hair: color-mix(in srgb, var(--ow-ink) 10%, transparent);
    --sg-card: color-mix(in srgb, var(--ow-paper) 80%, var(--ow-cream));
    display: grid;
    gap: 12px;
    justify-items: center;
}

.dm-box {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--ow-cream);
    box-shadow: 0 0 0 1px var(--sg-hair), 0 20px 50px -24px rgba(11, 16, 32, 0.35);
}

.dm-box:has(.dm-stage.ph) {
    border-radius: 28px;
    box-shadow: 0 0 0 6px var(--ow-ink), 0 20px 50px -24px rgba(11, 16, 32, 0.45);
    margin: 6px;
}

.dm-poster {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--ow-cream) 30%, transparent);
    cursor: pointer;
}

.dm-poster > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 12px;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-paper);
    font: 700 1rem/1.2 var(--own-font-sans);
    box-shadow: 0 10px 30px rgba(11, 16, 32, 0.35);
}

.dm-poster i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ow-champagne);
    color: var(--ow-ink);
    font-style: normal;
}

.dm-poster:focus-visible > span { outline: 3px solid var(--ow-champagne); outline-offset: 3px; }

/* Until the script drives the stage (.is-on, js/startGuideDemo.js) the poster stays away and the
   closing card stands in the last screen: its buttons are the way on when the script never comes. */
.dm-player:not(.is-on) .dm-poster { display: none; }
.dm-player:not(.is-on) .dm-stage .d-end { visibility: visible; opacity: 1; }
.dm-player:not(.is-on) .dm-pp { visibility: hidden; }

.dm-bar {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--ow-line);
    border-radius: 16px;
    background: var(--ow-paper);
}

.dm-pp {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ow-ink) 12%, transparent);
    background: var(--ow-paper);
    color: var(--ow-ink);
    cursor: pointer;
}

.dm-pp .material-symbols-outlined { font-size: 22px; }

.dm-chs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}

.dm-ch {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: 600 0.8rem/1.25 var(--own-font-sans);
    color: var(--sg-faint);
}

.dm-ch .lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-ch .lb b { margin-right: 4px; font-weight: 700; }
.dm-ch.on { color: var(--ow-ink); }
.dm-ch .tr { height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 8%, transparent); }
.dm-ch .tr i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne)); }

.dm-pp:focus-visible,
.dm-ch:focus-visible { outline: 2px solid var(--ow-gold-ink); outline-offset: 3px; border-radius: 6px; }

.dm-cap {
    width: 100%;
    min-height: 2.6em;
    margin: 0;
    text-align: center;
    font: 600 1rem/1.4 var(--own-font-sans);
    color: var(--ow-ink);
}

.dm-cap small { display: block; font-weight: 400; font-size: 0.88rem; color: var(--own-fg-2); }

@media (max-width: 640px) {
    .dm-ch .lb { display: none; }
    .dm-chs { gap: 6px; }
}

/* ── The stage ── */
.dm-stage {
    --dm-g0: color-mix(in srgb, var(--ow-ink) 4%, #fff);
    --dm-g1: color-mix(in srgb, var(--ow-ink) 7%, #fff);
    --dm-g2: color-mix(in srgb, var(--ow-ink) 12%, #fff);
    --dm-g3: color-mix(in srgb, var(--ow-ink) 22%, #fff);
    --dm-g5: color-mix(in srgb, var(--ow-ink) 45%, #fff);
    --dm-g7: color-mix(in srgb, var(--ow-ink) 70%, #fff);
    --dm-g9: color-mix(in srgb, var(--ow-ink) 88%, #fff);
    --dm-sys: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    width: 1000px;
    height: 680px;
    overflow: hidden;
    transform-origin: 0 0;
    background: var(--ow-cream);
    color: var(--ow-ink);
    font: 15px/1.4 var(--own-font-sans);
    text-align: left;
}

.dm-stage.ph { width: 360px; height: 720px; }
.dm-stage *, .dm-stage *::before, .dm-stage *::after { box-sizing: border-box; }
.dm-stage p { margin: 0; }
.dm-stage .material-symbols-outlined { font-size: 1.2em; line-height: 1; vertical-align: -0.2em; }
.dm-stage .tab { font-variant-numeric: tabular-nums; }
.dm-stage .neg { color: var(--ow-negative); }
.dm-stage .pos { color: var(--own-success); }
.dm-stage.ph .dm-desk-only { display: none !important; }
.dm-stage.desk .dm-ph-only { display: none !important; }

/* App header, content area, ＋ and the phone's bottom bar */
.dm-stage .d-hd { position: absolute; left: 0; right: 0; top: 0; z-index: 8; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: var(--ow-paper); border-bottom: 1px solid var(--ow-line); }
.dm-stage .d-hd .burger { font-size: 26px; color: var(--own-fg-1); }
.dm-stage .d-hd .logo { display: block; width: 34px; height: 33px; }
.dm-stage .d-hd .wm { font-family: var(--own-wordmark-font, var(--ow-serif)); font-weight: 700; letter-spacing: -0.02em; font-size: 17px; }
.dm-stage .d-hd .edp { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px 7px 14px; border-radius: 999px; background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); font-weight: 700; font-size: 15px; }
.dm-stage .d-hd .rt { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dm-stage .d-hd .srch { display: inline-flex; align-items: center; gap: 8px; width: 210px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ow-line); color: var(--own-fg-3); font-size: 14px; white-space: nowrap; overflow: hidden; }
.dm-stage .d-hd .crd { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid var(--ow-champagne); background: color-mix(in srgb, var(--ow-champagne) 8%, var(--ow-paper)); font-size: 12px; font-weight: 700; color: var(--ow-gold-ink); }
.dm-stage .d-hd .crd .mtr { display: grid; justify-items: center; gap: 2px; }
.dm-stage .d-hd .crd i { display: block; width: 30px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ow-champagne-deep) 80%, var(--ow-line) 80%); }
.dm-stage .d-hd .acc { font-size: 30px; color: var(--own-fg-2); }
.dm-stage.ph .d-hd { height: 52px; padding: 0 12px; gap: 9px; }
.dm-stage.ph .d-hd .wm, .dm-stage.ph .d-hd .srch, .dm-stage.ph .d-hd .acc { display: none; }
.dm-stage.ph .d-hd .edp { font-size: 14px; padding: 6px 10px 6px 12px; }
.dm-stage .d-ct { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; overflow: hidden; background: var(--ow-cream); }
.dm-stage.ph .d-ct { top: 52px; bottom: 64px; }
.dm-stage .scr { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; background: var(--ow-cream); }
.dm-stage .scr.end { visibility: visible; opacity: 1; }
.dm-stage .scr-in { position: relative; }
.dm-stage .d-fab, .dm-stage .d-owny { position: absolute; bottom: 24px; z-index: 7; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ow-ink); color: var(--ow-paper); box-shadow: 0 8px 20px rgba(11, 16, 32, 0.3); }
.dm-stage .d-fab { right: 24px; }
.dm-stage .d-fab .material-symbols-outlined { font-size: 28px; vertical-align: 0; }
.dm-stage .d-owny { right: 92px; }
.dm-stage .d-owny img { width: 34px; height: 34px; border-radius: 50%; }
.dm-stage.ph .d-fab, .dm-stage.ph .d-owny { display: none; }
.dm-stage .d-bnav { display: none; }
.dm-stage.ph .d-bnav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: 64px; display: flex; background: var(--ow-paper); border-top: 1px solid var(--ow-line); box-shadow: 0 -6px 24px rgba(11, 16, 32, 0.1); }
.dm-stage .d-bnav > span { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--own-fg-2); }
.dm-stage .d-bnav > span .material-symbols-outlined { font-size: 24px; vertical-align: 0; }
.dm-stage .d-bnav > span.on { color: var(--ow-ink-2); }
.dm-stage .d-bnav img { width: 24px; height: 24px; border-radius: 50%; }
.dm-stage .d-bnav .add { position: relative; }
.dm-stage .d-bnav .add b { position: absolute; top: -22px; left: 50%; margin-left: -28px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ow-ink-2); color: var(--ow-paper); box-shadow: 0 8px 20px rgba(20, 26, 51, 0.45), 0 0 0 6px var(--ow-paper); }
.dm-stage .d-bnav .add b .material-symbols-outlined { font-size: 28px; }
.dm-stage .d-ov { position: absolute; inset: 0; z-index: 10; background: rgba(11, 16, 32, 0.45); visibility: hidden; opacity: 0; }
.dm-stage.nochrome .d-hd, .dm-stage.nochrome .d-fab, .dm-stage.nochrome .d-owny, .dm-stage.nochrome .d-bnav { display: none !important; }
.dm-stage.nochrome .d-ct, .dm-stage.nochrome.ph .d-ct { top: 0; bottom: 0; }

/* Dialogs: centred on the desk, a sheet from the bottom on the phone */
.dm-stage .d-dlg { position: absolute; z-index: 11; visibility: hidden; opacity: 0; overflow: hidden; background: var(--ow-paper); color: var(--ow-ink); box-shadow: 0 24px 60px rgba(11, 16, 32, 0.3); }
.dm-stage.desk .d-dlg { left: calc(50% - 280px); top: 40px; width: 560px; padding: 20px 22px; border-radius: 18px; }
.dm-stage.desk .d-dlg.wide { left: calc(50% - 330px); width: 660px; }
.dm-stage.ph .d-dlg { left: 0; right: 0; bottom: 0; padding: 10px 14px 16px; border-radius: 22px 22px 0 0; }
.dm-stage.ph .d-dlg::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--ow-line); }
.dm-stage .dl-h { font-family: var(--ow-serif); font-weight: 500; font-size: 24px; line-height: 1.15; }
.dm-stage .dl-h em { color: var(--ow-champagne-deep); }
.dm-stage .dl-l { margin-top: 4px; font-size: 13.5px; color: var(--own-fg-2); }
.dm-stage .dl-ft { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
.dm-stage .dl-ft .cnt { margin-right: auto; font-size: 12.5px; }

/* Buttons, bubbles, chips, fields */
.dm-stage .d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: var(--ow-ink); color: var(--ow-paper); font: 700 15px/1 var(--own-font-sans); white-space: nowrap; }
.dm-stage .d-btn .material-symbols-outlined { color: var(--ow-champagne); font-size: 20px; vertical-align: 0; }
.dm-stage .d-btn.ghost { background: var(--ow-paper); color: var(--ow-ink); border: 1px solid var(--ow-line); }
.dm-stage .d-btn.ghost .material-symbols-outlined { color: var(--ow-ink); }
.dm-stage .d-btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.dm-stage .d-bub { display: flex; align-items: flex-start; gap: 10px; }
.dm-stage .d-bub img { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.dm-stage .d-bub span { padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: var(--ow-cream-deep); font-size: 13.5px; line-height: 1.4; }
.dm-stage .d-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dm-stage .d-pill.line { background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--own-fg-2); }
.dm-stage .d-pill.gold { background: color-mix(in srgb, var(--ow-champagne) 12%, var(--ow-paper)); border: 1px solid var(--ow-champagne); color: var(--ow-gold-ink); }
.dm-stage .d-pill.ink { background: var(--ow-ink); color: var(--ow-paper); }
.dm-stage .d-pill.soft { background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); }
.dm-stage .d-pill .material-symbols-outlined { font-size: 15px; vertical-align: 0; }
.dm-stage .d-card { background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 16px; }
.dm-stage .d-k { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-gold-ink); }
.dm-stage .d-mu { color: var(--own-fg-2); }
.dm-stage .d-field { display: grid; gap: 4px; }
.dm-stage .d-field label { font-size: 12px; font-weight: 700; color: var(--own-fg-2); }
.dm-stage .d-inp { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--dm-g3); background: var(--ow-paper); font-size: 15px; font-weight: 600; }
.dm-stage .d-inp .ph { color: var(--own-fg-3); font-weight: 400; }
.dm-stage .d-inp .v:not(:empty) + .ph { display: none; }
.dm-stage .d-inp .u { margin-left: auto; padding-left: 8px; color: var(--own-fg-2); font-weight: 600; white-space: nowrap; }
.dm-stage .d-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ow-cream-deep); }
.dm-stage .d-seg > span { position: relative; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--own-fg-2); }
.dm-stage .d-seg > span.on, .dm-stage .d-seg .on2 { background: var(--ow-paper); color: var(--ow-ink); box-shadow: 0 1px 3px rgba(11, 16, 32, 0.15); }
.dm-stage .d-seg .on2 { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px; }
.dm-stage .d-radio { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.dm-stage .d-radio i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dm-g3); background: var(--ow-paper); }
.dm-stage .d-radio i b { position: absolute; inset: 3px; border-radius: 50%; background: var(--ow-champagne-deep); }
.dm-stage .d-radio i b.off { visibility: hidden; opacity: 0; }
.dm-stage .d-check { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--dm-g3); background: var(--ow-paper); }
.dm-stage .d-check b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 3px; background: var(--ow-ink); color: var(--ow-paper); font-size: 13px; }
.dm-stage .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dm-stage .chips .d-k { margin-right: 4px; }
.dm-stage .chips .d-pill { position: relative; }
.dm-stage .chips .d-pill .on { position: absolute; inset: -1px; }

/* The AddObjects flow page (.fp): rail, eyebrow row, serif title with accent, lede, body, action bar */
.dm-stage .fp { position: absolute; inset: 0; }
.dm-stage .fp-in { width: 720px; margin: 0 auto; padding-top: 18px; }
.dm-stage.ph .fp-in { width: auto; padding: 14px 14px 0; }
.dm-stage .fp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.dm-stage .fp-rail i { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ow-ink) 10%, transparent); }
.dm-stage .fp-rail i.on { background: var(--ow-ink); }
.dm-stage .fp-k { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-gold-ink); }
.dm-stage .fp-k .r { color: var(--sg-faint); letter-spacing: 0.1em; white-space: nowrap; }
.dm-stage .fp-k .r b { color: var(--ow-gold-ink); }
.dm-stage .fp-h { margin-top: 8px; font-family: var(--ow-serif); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }
.dm-stage.ph .fp-h { font-size: 26px; }
.dm-stage .fp-h em { color: var(--ow-champagne-deep); }
.dm-stage .fp-l { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--own-fg-2); }
.dm-stage .fp-b { display: grid; gap: 10px; margin-top: 14px; }
.dm-stage .fp-bar { position: absolute; left: calc(50% - 360px); bottom: 0; z-index: 2; width: 720px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--ow-paper) 94%, transparent); border: 1px solid var(--ow-line); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(11, 16, 32, 0.06); }
.dm-stage.ph .fp-bar { left: 0; right: 0; width: auto; padding: 10px 12px; border-radius: 0; }
.dm-stage.ph .fp-bar .d-btn { height: 42px; padding: 0 16px; font-size: 14px; }
.dm-stage .fp-b .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dm-stage .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* The ＋ dialog's rows (AddItemDialog) */
.dm-stage .aid-list { display: grid; gap: 7px; margin-top: 10px; }
.dm-stage .aid { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.dm-stage .aid.hl { border-color: var(--ow-champagne); background: linear-gradient(155deg, color-mix(in srgb, var(--ow-champagne) 5%, var(--ow-paper)) 0%, var(--ow-paper) 60%); }
.dm-stage .aid .gl { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(160deg, color-mix(in srgb, var(--ow-champagne) 14%, var(--ow-paper)), var(--ow-cream-deep)); border: 1px solid var(--ow-champagne); color: var(--ow-champagne-deep); }
.dm-stage .aid .gl .material-symbols-outlined { font-size: 24px; vertical-align: 0; }
.dm-stage .aid.pl .gl { background: linear-gradient(160deg, var(--ow-paper), var(--ow-cream-deep)); border-color: var(--ow-line); }
.dm-stage .aid .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dm-stage .aid .tt { font-family: var(--ow-serif); font-weight: 500; font-size: 18px; line-height: 1.15; }
.dm-stage .aid .ds { font-size: 12.5px; color: var(--own-fg-2); }
.dm-stage .aid .bd { align-self: flex-start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ow-champagne); background: color-mix(in srgb, var(--ow-champagne) 12%, var(--ow-paper)); color: var(--ow-gold-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.dm-stage .aid .ar { color: var(--ow-champagne-deep); }
.dm-stage.ph .aid { gap: 10px; padding: 9px 10px; }
.dm-stage.ph .aid .tt { font-size: 16.5px; }
.dm-stage.ph .aid .ds { font-size: 12px; }
.dm-stage .aid-div { height: 1px; margin: 2px 4px; background: var(--ow-line); }

/* The manual entry's groups (Typ) */
.dm-stage .mt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.dm-stage .mt .gl { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ow-cream-deep); color: var(--ow-champagne-deep); }
.dm-stage .mt .gl .material-symbols-outlined { font-size: 26px; vertical-align: 0; }
.dm-stage .mt .tx { flex: 1; min-width: 0; display: grid; }
.dm-stage .mt .tt { font-weight: 700; font-size: 16px; }
.dm-stage .mt .ds { font-size: 13.5px; color: var(--own-fg-2); }
.dm-stage .mt.sm { padding: 9px 12px; }
.dm-stage .mt.sm .gl { width: 40px; height: 40px; }
.dm-stage.ph .mt { gap: 12px; padding: 10px 12px; }
.dm-stage.ph .mt .gl { width: 42px; height: 42px; }

/* The analysis: the picture with OWNY's scan line, the four stages, what was found */
.dm-stage .cap-photo { position: relative; height: 150px; overflow: hidden; border-radius: 18px; background: color-mix(in srgb, var(--ow-ink) 82%, #000); }
.dm-stage .cap-photo .scan { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; height: 3px; background: linear-gradient(90deg, transparent, var(--ow-champagne), transparent); box-shadow: 0 0 14px var(--ow-champagne); }
.dm-stage .scanpill { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(11, 16, 32, 0.82); border: 1px solid color-mix(in srgb, var(--ow-champagne-light) 45%, transparent); color: var(--ow-champagne-light); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.dm-stage .trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dm-stage.ph .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-stage .trail .tr { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-paper); font-weight: 700; font-size: 13px; }
.dm-stage .trail .ic { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ow-champagne); color: var(--ow-paper); }
.dm-stage .trail .ic .material-symbols-outlined { font-size: 17px; vertical-align: 0; }
.dm-stage .trail .st { margin-left: auto; color: var(--own-success); }
.dm-stage .trail .st .material-symbols-outlined { font-size: 16px; vertical-align: 0; }
.dm-stage .trail .spin { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--ow-champagne); border-top-color: transparent; visibility: hidden; opacity: 0; }
.dm-stage .found { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 13.5px; }
.dm-stage .found .ok { color: var(--own-success); font-size: 17px; }

/* Findings: result cards */
.dm-stage .rc-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dm-stage .cards { display: grid; gap: 8px; }
.dm-stage .rcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.dm-stage .rcard .th { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ow-cream-deep); color: var(--ow-gold-ink); }
.dm-stage .rcard .th .material-symbols-outlined { font-size: 24px; vertical-align: 0; }
.dm-stage .rcard .nm { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .rcard .vl { font-family: var(--ow-serif); font-weight: 600; font-size: 18px; text-align: right; white-space: nowrap; }
.dm-stage .rcard .vl small { font-family: var(--own-font-sans); font-size: 11.5px; font-weight: 600; font-style: italic; color: var(--own-fg-2); }
.dm-stage .rcard .ty { font-size: 12.5px; color: var(--own-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .rcard .cf { font-size: 11px; color: var(--sg-faint); text-align: right; white-space: nowrap; }
.dm-stage .rcard .mx { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; margin-top: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--ow-champagne); background: color-mix(in srgb, var(--ow-champagne) 4%, var(--ow-paper)); }
.dm-stage.ph .rcard .mx { grid-template-columns: minmax(0, 1fr); }
.dm-stage .rcard .mx .q { grid-column: 1 / -1; font-weight: 700; font-size: 13.5px; }
.dm-stage .rcard .mx .cand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 8px; align-items: center; min-width: 0; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.dm-stage .rcard .mx .logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ow-ink); color: var(--ow-paper); font-size: 9.5px; font-weight: 800; }
.dm-stage .rcard .mx .cn { display: grid; min-width: 0; }
.dm-stage .rcard .mx .cn b, .dm-stage .rcard .mx .cn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .rcard .mx .cn b { font-size: 12.5px; }
.dm-stage .rcard .mx .cn span { font-size: 10.5px; color: var(--own-fg-2); }
.dm-stage .rcard .mx .px { font-weight: 700; font-size: 12.5px; text-align: right; white-space: nowrap; }
.dm-stage .rcard .mx .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-stage .rcard .mx .lk { position: absolute; inset: 6px 10px; display: grid; align-content: center; gap: 2px; background: color-mix(in srgb, var(--ow-champagne) 4%, var(--ow-paper)); }
.dm-stage .rcard .mx .linked { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.dm-stage .rcard .mx .linked .material-symbols-outlined { color: var(--ow-champagne-deep); }
.dm-stage .rcard .mx .ex { font-size: 11.5px; color: var(--own-fg-2); }

/* Placement, review, saved */
.dm-stage .fund { padding: 12px 14px; border-radius: 16px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.dm-stage .fund .fh { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.dm-stage .fund .fh .material-symbols-outlined { color: var(--ow-champagne-deep); }
.dm-stage .fund .fh .opt { margin-left: auto; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-faint); }
.dm-stage .fund .note { margin-top: 4px; font-size: 12.5px; color: var(--own-fg-2); }
.dm-stage .fund .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dm-stage .sumcard { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 14px; }
.dm-stage .sumcard .ln { display: flex; justify-content: space-between; gap: 10px; }
.dm-stage .ack { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ow-champagne) 14%, var(--ow-paper)); font-size: 13px; line-height: 1.4; }
.dm-stage .saved { display: grid; justify-items: center; gap: 10px; padding: 40px 16px 0; text-align: center; }
.dm-stage .saved .big { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ow-champagne); color: var(--ow-ink); }
.dm-stage .saved .big .material-symbols-outlined { font-size: 40px; vertical-align: 0; }
.dm-stage .saved h3 { margin: 0; font-family: var(--ow-serif); font-weight: 500; font-size: 34px; }
.dm-stage .saved p { max-width: 420px; color: var(--own-fg-2); font-size: 15px; }
.dm-stage .saved p.sm { font-size: 13px; }
.dm-stage .saved .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* The list import's file panel */
.dm-stage .imp-b { position: relative; }
.dm-stage .up { display: grid; justify-items: center; gap: 8px; padding: 20px 16px; border-radius: 18px; background: var(--ow-paper); border: 1px solid var(--ow-line); text-align: center; }
.dm-stage .up .rg { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--ow-champagne); color: var(--ow-champagne-deep); }
.dm-stage .up .rg .material-symbols-outlined { font-size: 28px; vertical-align: 0; }
.dm-stage .up h4 { margin: 0; font-size: 16px; }
.dm-stage .up p { max-width: 440px; font-size: 13px; color: var(--own-fg-2); }
.dm-stage .up small { font-size: 11.5px; color: var(--sg-faint); }
.dm-stage .picked { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 8px; }
.dm-stage .frow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 14px; }
.dm-stage .frow b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .frow > .material-symbols-outlined:first-child { color: var(--ow-champagne-deep); }
.dm-stage .frow .x { color: var(--ow-negative); }
.dm-stage .frow .sz { color: var(--own-fg-2); font-size: 12.5px; }
.dm-stage.ph .frow .d-pill { display: none; }
.dm-stage .ready { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--ow-ed-accent-soft); font-size: 13.5px; font-weight: 600; }
.dm-stage .ready .material-symbols-outlined { color: var(--ow-champagne-deep); }
.dm-stage .credit { display: grid; gap: 4px; font-size: 12px; color: var(--own-fg-2); }
.dm-stage .credit .bar { display: block; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 8%, transparent); }
.dm-stage .credit .bar i { display: block; width: 12%; height: 100%; background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne)); }

/* The system's file dialog — not OWNAMIC */
.dm-stage .sysp { position: absolute; z-index: 12; visibility: hidden; opacity: 0; background: var(--dm-g0); color: var(--dm-g9); border: 1px solid var(--dm-g3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); font-family: var(--dm-sys); }
.dm-stage.desk .sysp { left: calc(50% - 230px); top: 70px; width: 460px; border-radius: 10px; }
.dm-stage.ph .sysp { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; }
.dm-stage .sysp .bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--dm-g2); font-size: 13px; font-weight: 600; }
.dm-stage .sysp .bar.end { justify-content: flex-end; border-bottom: 0; border-top: 1px solid var(--dm-g2); }
.dm-stage .sysp .open { padding: 6px 12px; border-radius: 7px; border: 1px solid var(--dm-g3); background: #fff; }
.dm-stage .sysp .it { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--dm-g1); font-size: 13.5px; }
.dm-stage .sysp .it .material-symbols-outlined { color: var(--dm-g5); }
.dm-stage .sysp .it small { margin-left: auto; color: var(--dm-g5); font-size: 11.5px; }

/* The camera ＋ opens (DmCamera, the capture's ErfStage): no method to choose, the photos collect in
   its tray until „Erkennen“, every other way in is under „Ohne Foto erfassen“. On the phone it covers
   the app's header and bottom bar; on the desk it is the content area — the stage, and the review
   beside it, over the ＋ and OWNY buttons. Its dark is ink deepened toward black, its whites are the
   paper's. Of a label .vs only the variant of the moment takes its place (the script, api.swap). */
.dm-stage .cam {
    --cam-bg: color-mix(in srgb, var(--ow-ink) 45%, #000);
    --cam-fill: color-mix(in srgb, var(--ow-paper) 12%, transparent);
    --cam-mute: color-mix(in srgb, var(--ow-paper) 74%, transparent);
    --cam-faint: color-mix(in srgb, var(--ow-paper) 60%, transparent);
    position: absolute;
    inset: 0;
    z-index: 9;
    visibility: hidden;
    opacity: 0;
}
.dm-stage.desk .cam { top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 16px 20px 18px; background: var(--ow-cream); }
.dm-stage .cam .stg { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--cam-bg); color: var(--ow-paper); }
.dm-stage.desk .cam .stg { border-radius: 22px; }
.dm-stage .cam .top { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; }
.dm-stage .cam .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cam-fill); }
.dm-stage .cam .ic .material-symbols-outlined { font-size: 21px; vertical-align: 0; }
.dm-stage .cam .pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--cam-fill); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.dm-stage .cam .pill > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ow-champagne); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ow-champagne) 25%, transparent); }
.dm-stage .cam .pill > .material-symbols-outlined { font-size: 17px; vertical-align: 0; }
.dm-stage .cam .vf { position: relative; flex: 1; min-height: 0; overflow: hidden; background: color-mix(in srgb, var(--ow-ink) 25%, #000); }
.dm-stage .cam .views, .dm-stage .cam .vw, .dm-stage .cam .last { position: absolute; inset: 0; }
.dm-stage .cam .vw.idle { background: radial-gradient(110% 80% at 50% 40%, color-mix(in srgb, var(--ow-champagne) 22%, var(--ow-ink-2)) 0%, var(--cam-bg) 72%); }
.dm-stage .cam .drop { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: radial-gradient(120% 90% at 50% 30%, var(--ow-ink-2) 0%, var(--cam-bg) 70%); }
.dm-stage .cam .drop .rg { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--ow-champagne) 70%, transparent); color: var(--ow-champagne); }
.dm-stage .cam .drop .rg .material-symbols-outlined { font-size: 30px; vertical-align: 0; }
.dm-stage .cam .drop b { font-family: var(--ow-serif); font-size: 26px; font-weight: 600; line-height: 1.1; }
.dm-stage .cam .drop b em { font-weight: 500; color: var(--ow-champagne); }
.dm-stage .cam .drop .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dm-stage .cam .cbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ow-paper) 18%, transparent); background: color-mix(in srgb, var(--ow-paper) 10%, transparent); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.dm-stage .cam .cbtn .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne); vertical-align: 0; }
.dm-stage .cam .cbtn.gold { border-color: var(--ow-champagne); background: var(--ow-champagne); color: var(--ow-ink); }
.dm-stage .cam .cbtn.gold .material-symbols-outlined { color: var(--ow-ink); }
.dm-stage .cam .hint { position: absolute; left: 16px; right: 16px; bottom: 14px; text-align: center; font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 8px color-mix(in srgb, #000 70%, transparent); }
.dm-stage .cam .fl { position: absolute; inset: 0; background: var(--ow-paper); opacity: 0; pointer-events: none; }
.dm-stage .cam .bot { flex: none; position: relative; padding-bottom: 46px; }
.dm-stage .cam .tray { height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; }
.dm-stage .cam .tip { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--cam-faint); white-space: nowrap; }
.dm-stage .cam .tip .tx { display: flex; align-items: center; gap: 4px; }
.dm-stage .cam .tip .material-symbols-outlined { font-size: 16px; vertical-align: 0; }
.dm-stage .cam .chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--ow-line-dark); background: var(--cam-fill); color: var(--ow-paper); font-weight: 600; }
.dm-stage .cam .chip .material-symbols-outlined { color: var(--ow-champagne); }
.dm-stage .cam .th { position: relative; flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 11px; border: 2px solid color-mix(in srgb, var(--ow-paper) 85%, transparent); }
.dm-stage .cam .modes { display: flex; justify-content: center; gap: 4px; height: 26px; margin: -2px 0 4px; }
.dm-stage .cam .modes span { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cam-faint); }
.dm-stage .cam .modes .on { color: var(--ow-champagne); background: var(--cam-fill); }
.dm-stage .cam .ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 0 18px; }
.dm-stage .cam .side, .dm-stage .cam .shc { height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--cam-mute); white-space: nowrap; }
.dm-stage .cam .side { justify-self: center; padding-top: 10px; }
.dm-stage .cam .side .gl, .dm-stage .cam .side .rg { display: grid; place-items: center; width: 50px; height: 50px; background: var(--cam-fill); color: var(--ow-paper); }
.dm-stage .cam .side .gl { border-radius: 15px; border: 2px solid color-mix(in srgb, var(--ow-paper) 80%, transparent); }
.dm-stage .cam .side .rg { border-radius: 50%; }
.dm-stage .cam .side .material-symbols-outlined { font-size: 24px; vertical-align: 0; }
.dm-stage .cam .shut { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--ow-paper); }
.dm-stage .cam .shut i { width: 58px; height: 58px; border-radius: 50%; background: var(--ow-paper); }
.dm-stage .cam .alt { position: absolute; left: 0; right: 0; bottom: 6px; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--cam-faint); white-space: nowrap; }
.dm-stage .cam .alt .material-symbols-outlined { font-size: 18px; vertical-align: 0; }
/* A photo in small: its motif drawn on 200 × 200 and scaled down to the box, so it still reads. */
.dm-stage .cam .pc { position: absolute; left: 0; top: 0; width: 200px; height: 200px; transform-origin: 0 0; }
.dm-stage .cam .th .pc { transform: scale(0.19); }
.dm-stage .cam .sq .pc { transform: scale(0.15); }
.dm-stage .cam .si .pc { transform: scale(0.2); }
/* The phone's peek over the controls: the newest photos, „Erkennen“, then what OWNY is doing. */
.dm-stage .cam .peek { position: absolute; left: 10px; right: 10px; bottom: 234px; z-index: 3; padding: 6px 12px 10px 14px; border-radius: 20px; background: var(--ow-paper); color: var(--ow-ink); box-shadow: 0 16px 40px color-mix(in srgb, #000 45%, transparent); }
.dm-stage .cam .grab { display: block; width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--ow-line); }
.dm-stage .cam .pr { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.dm-stage .cam .stk { display: flex; flex: none; padding-left: 9px; }
.dm-stage .cam .sq { position: relative; width: 34px; height: 34px; margin-left: -9px; overflow: hidden; border-radius: 9px; border: 2px solid var(--ow-paper); }
.dm-stage .cam .pt { flex: 1; min-width: 0; display: grid; }
.dm-stage .cam .pt b { font-family: var(--ow-serif); font-size: 20px; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .cam .pt .sub { font-size: 12.5px; color: var(--own-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .cam .kd { color: var(--ow-gold-ink); font-weight: 700; }
.dm-stage .cam .act { flex: none; }
.dm-stage .cam .spin { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ow-ink) 18%, transparent); border-top-color: var(--ow-ink); }
.dm-stage .cam .dest { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ow-line); font-size: 12.5px; color: var(--own-fg-2); white-space: nowrap; }
.dm-stage .cam .dest .dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .cam .dest b { color: var(--ow-ink); font-weight: 600; }
.dm-stage .cam .dest .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); vertical-align: 0; }
.dm-stage .cam .dest .ch { margin-left: auto; color: var(--own-fg-3); }
.dm-stage .cam .prog { display: block; height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: var(--ow-line); }
.dm-stage .cam .prog i { display: block; width: 35%; height: 100%; border-radius: 2px; background: var(--ow-champagne); }
/* The desk's review beside the stage: empty, then the photos, the kind left to OWNY, „Erkennen“. */
.dm-stage .cam .rv { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--ow-line); background: var(--sg-card); color: var(--ow-ink); }
.dm-stage .cam .rh { display: grid; gap: 2px; padding: 18px 18px 4px; }
.dm-stage .cam .ek { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-champagne-deep); }
.dm-stage .cam .ti { margin-top: 2px; font-family: var(--ow-serif); font-size: 28px; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.dm-stage .cam .ti em { font-weight: 500; color: var(--ow-champagne-deep); }
.dm-stage .cam .sb { margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--own-fg-2); }
.dm-stage .cam .sb .kd { display: inline-flex; align-items: center; gap: 5px; }
.dm-stage .cam .sb .kd .material-symbols-outlined { font-size: 16px; color: var(--ow-champagne-deep); vertical-align: 0; }
.dm-stage .cam .rb { padding: 0 18px; }
.dm-stage .cam .lbl { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-champagne-deep); white-space: nowrap; }
.dm-stage .cam .lbl::after { content: ""; flex: 1; height: 1px; background: var(--ow-line); }
.dm-stage .cam .lbl span { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sg-faint); }
.dm-stage .cam .shots { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-stage .cam .shot { flex: none; display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 6px 12px 6px 6px; border-radius: 14px; border: 1px dashed var(--ow-champagne); background: var(--ow-paper); }
.dm-stage .cam .shot.add { border-color: var(--ow-line); background: transparent; }
.dm-stage .cam .si { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; color: var(--ow-champagne-deep); }
.dm-stage .cam .st { display: grid; }
.dm-stage .cam .st b { font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.dm-stage .cam .st small { font-size: 11px; color: var(--own-fg-2); white-space: nowrap; }
.dm-stage .cam .kind { display: grid; justify-items: start; gap: 7px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.dm-stage .cam .kind .k { font-size: 12px; font-weight: 700; color: var(--own-fg-2); }
.dm-stage .cam .kind .d-seg > span { padding: 5px 10px; font-size: 12px; }
.dm-stage .cam .kind p { display: flex; gap: 6px; font-size: 11.5px; line-height: 1.35; color: var(--own-fg-2); }
.dm-stage .cam .kind p .material-symbols-outlined { flex: none; font-size: 15px; color: var(--ow-champagne-deep); }
.dm-stage .cam .rf { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 14px; background: linear-gradient(180deg, transparent, var(--sg-card) 32%); }
.dm-stage .cam .rf .v1 { display: grid; gap: 8px; }
.dm-stage .cam .rf .d-btn { width: 100%; }
.dm-stage .cam .rf .none { display: block; padding-bottom: 8px; text-align: center; font-size: 12.5px; color: var(--sg-faint); }
.dm-stage .cam .hl { display: flex; justify-content: center; gap: 12px; font-size: 11.5px; color: var(--sg-faint); white-space: nowrap; }
.dm-stage .cam .hl > span { display: inline-flex; align-items: center; gap: 3px; }
.dm-stage .cam .hl .material-symbols-outlined { font-size: 14px; vertical-align: 0; }
.dm-stage .cam .d-btn .spin { width: 17px; height: 17px; border-color: color-mix(in srgb, var(--ow-paper) 30%, transparent); border-top-color: var(--ow-paper); }

/* The pictures */
.dm-stage .dm-pic { position: absolute; inset: 0; display: grid; place-items: center; }
.dm-stage .pic-acc { background: color-mix(in srgb, var(--ow-ink) 88%, #fff); }
.dm-stage .pic-acc .win { width: 62%; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ow-ink) 94%, #000); color: var(--dm-g1); font-family: var(--dm-sys); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.dm-stage .pic-acc .lb { font-size: 9.5px; opacity: 0.7; }
.dm-stage .pic-acc .ac { margin-top: 7px; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--ow-ink) 80%, #fff); }
.dm-stage .pic-acc .ac b { font-size: 16px; }
.dm-stage .pic-brk { background: var(--dm-g1); }
.dm-stage .pic-brk .win { width: 66%; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--dm-g9); font-family: var(--dm-sys); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.dm-stage .pic-brk .hd { display: flex; justify-content: space-between; font-size: 10px; color: var(--dm-g5); }
.dm-stage .pic-brk .ps { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 6px 7px; border-radius: 7px; background: var(--dm-g0); font-size: 11px; }
.dm-stage .pic-brk .ps span { display: grid; }
.dm-stage .pic-brk .ps small { font-size: 8.5px; color: var(--dm-g5); }
.dm-stage .pic-rcp { display: block; background: radial-gradient(ellipse at 50% 38%, var(--ow-cream-deep), color-mix(in srgb, var(--ow-champagne) 45%, var(--ow-cream-deep))); }
.dm-stage .pic-rcp .rcp { position: absolute; top: 9%; width: 29%; padding: 6px 7px; background: #fffdf8; color: var(--dm-g9); font: 7px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; box-shadow: 0 6px 16px rgba(70, 52, 20, 0.25); }
.dm-stage .pic-rcp .r0 { left: 5%; transform: rotate(-4deg); }
.dm-stage .pic-rcp .r1 { left: 36%; transform: rotate(3deg); }
.dm-stage .pic-rcp .r2 { left: 67%; transform: rotate(-2deg); }
.dm-stage .pic-rcp .sh { display: block; text-align: center; text-transform: uppercase; }
.dm-stage .pic-rcp hr { margin: 3px 0; border: 0; border-top: 1px dashed var(--dm-g3); }
.dm-stage .pic-rcp p { display: flex; justify-content: space-between; gap: 4px; }
.dm-stage .pic-rcp.one .rcp { top: 7%; left: 17%; width: 66%; padding: 12px 14px; font-size: 12px; transform: rotate(-1.5deg); }
.dm-stage .pic-rcp.one hr { margin: 6px 0; }
.dm-stage .pic-inv { background: var(--dm-g1); }
.dm-stage .pic-inv .doc { width: 44%; padding: 10px; border-radius: 4px; background: #fff; color: var(--dm-g9); font: 8px/1.4 var(--dm-sys); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }
.dm-stage .pic-inv .doc b:first-child { font-size: 10px; }
.dm-stage .pic-inv .ln { display: flex; justify-content: space-between; margin-top: 6px; }
.dm-stage .pic-car { background: linear-gradient(160deg, color-mix(in srgb, var(--ow-ink) 14%, #fff), color-mix(in srgb, var(--ow-ink) 32%, #fff)); }
.dm-stage .pic-car.v1 { background: linear-gradient(160deg, var(--dm-g1), var(--dm-g3)); }
.dm-stage .pic-car.v2 { background: linear-gradient(160deg, var(--ow-cream-deep), color-mix(in srgb, var(--ow-champagne) 35%, var(--ow-cream-deep))); }
.dm-stage .pic-car .material-symbols-outlined { font-size: 96px; color: rgba(11, 16, 32, 0.55); }

/* The Finanzen start page inside a stage */
.dm-stage .hm { padding: 22px 32px 0; }
.dm-stage.ph .hm { padding: 16px 14px 0; }
.dm-stage .hm .top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.dm-stage.ph .hm .top { grid-template-columns: 1fr; gap: 14px; }
.dm-stage .hm .dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--ow-ed-accent); }
.dm-stage .hm .gr { margin-top: 4px; font-family: var(--ow-serif); font-weight: 500; font-size: 34px; line-height: 1.12; }
.dm-stage.ph .hm .gr { font-size: 28px; }
.dm-stage .hm .gr em { color: var(--ow-ed-accent); }
.dm-stage .hm .nw { display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--ow-ink); color: var(--ow-paper); }
.dm-stage .hm .nw .d-k { color: var(--ow-champagne-light); }
.dm-stage .hm .nw .big { font-family: var(--ow-serif); font-size: 32px; line-height: 1.05; }
.dm-stage .hm .nw .ln { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13.5px; }
.dm-stage .hm .nw .neg { color: var(--ow-negative-on-ink); }
.dm-stage .hm .nw .em { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.dm-stage .hm .hb { display: grid; gap: 6px; margin-top: 18px; padding: 14px 18px; border-radius: 18px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.dm-stage .hm .hb .hd { display: flex; justify-content: space-between; align-items: baseline; }
.dm-stage .hm .hb .hd b { font-size: 16px; }
.dm-stage .hm .hb .hd span { font-weight: 700; font-size: 14px; color: var(--ow-ed-accent); }
.dm-stage .hm .hb .ln { display: flex; justify-content: space-between; font-size: 14.5px; }
.dm-stage .hm .hb .bar { height: 8px; border-radius: 4px; overflow: hidden; background: var(--ow-line-soft); }
.dm-stage .hm .hb .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne)); }
.dm-stage .hm .hb .sub { font-size: 13px; color: var(--own-fg-2); }
.dm-stage .hm .nx { margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--ow-ed-accent); }
.dm-stage .hm .bot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; margin-top: 18px; }
.dm-stage.ph .hm .bot { grid-template-columns: 1fr; gap: 16px; }
.dm-stage .hm .h2 { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ow-serif); font-weight: 500; font-size: 24px; }
.dm-stage .hm .h2.sm { font-size: 20px; }
.dm-stage .hm .h2 small { font-family: var(--own-font-sans); font-size: 14px; font-weight: 700; color: var(--ow-ed-accent); }
.dm-stage .hm .rows { margin-top: 8px; padding: 0 14px; border-radius: 16px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.dm-stage .hm .rows > div { display: flex; justify-content: space-between; align-items: center; min-height: 50px; border-bottom: 1px solid var(--ow-line-soft); font-size: 14px; }
.dm-stage .hm .rows > div:last-child { border-bottom: 0; }
.dm-stage .hm .rows .muted { color: var(--own-fg-2); }
.dm-stage .hm .more { display: grid; }
.dm-stage .hm .more .mr { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--ow-line-soft); font-weight: 600; font-size: 14.5px; }
.dm-stage .hm .more .mr > .material-symbols-outlined:first-child { color: var(--ow-ed-accent); font-size: 21px; }
.dm-stage .hm .more .mr .ch { margin-left: auto; color: var(--own-fg-3); }

/* An app page (own-canvas / ed-page) inside a stage */
.dm-stage .pg { padding: 22px 32px 0; }
.dm-stage.ph .pg { padding: 16px 14px 0; }
.dm-stage .pg .ek { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ow-ed-accent); }
.dm-stage .pg .ti { margin-top: 4px; font-family: var(--ow-serif); font-weight: 500; font-size: 32px; line-height: 1.12; }
.dm-stage.ph .pg .ti { font-size: 26px; }
.dm-stage .pg .le { margin-top: 4px; font-size: 14px; color: var(--own-fg-2); }
.dm-stage .nwc { display: grid; gap: 6px; max-width: 520px; margin-top: 12px; padding: 16px 18px; border-radius: 18px; background: var(--ow-ink); color: var(--ow-paper); }
.dm-stage .nwc .d-k { color: var(--ow-champagne-light); }
.dm-stage .nwc .v { font-family: var(--ow-serif); font-size: 34px; line-height: 1.05; }
.dm-stage .nwc .ln { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; }
.dm-stage .nwc .neg { color: var(--ow-negative-on-ink); }
.dm-stage .wls { display: grid; gap: 8px; max-width: 520px; margin-top: 12px; }
.dm-stage .wl { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.dm-stage .mort { display: grid; gap: 8px; padding: 10px 12px; }
.dm-stage .mort > b { font-size: 13.5px; }
.dm-stage .calc { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--ow-line-soft); font-size: 13.5px; }

/* Einnahmen & Ausgaben */
.dm-stage .xp { margin-top: 12px; padding: 10px 14px; }
.dm-stage .xh { display: flex; justify-content: space-between; align-items: center; }
.dm-stage .xh > span { display: grid; }
.dm-stage .xh b { font-size: 17px; }
.dm-stage .xrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ow-line-soft); font-size: 14px; }
.dm-stage .xrow:last-child { border-bottom: 0; }
.dm-stage .xrow .fx { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--ow-cream-deep); color: var(--own-fg-2); font-size: 10px; font-weight: 700; }
.dm-stage .xrow .bar { grid-column: 1 / -1; height: 7px; border-radius: 4px; overflow: hidden; background: var(--ow-line-soft); }
.dm-stage .xrow .bar i { display: block; width: 92%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ow-champagne-deep), var(--ow-champagne)); }
.dm-stage .xrow .pc { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; color: var(--own-fg-2); }
.dm-stage .xrow .pc b { color: var(--ow-gold-ink); }

/* Marktdaten */
.dm-stage .stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 14px; }
.dm-stage .stats > span { display: grid; }
.dm-stage .stats b { font-size: 20px; }
.dm-stage .stats b.big { font-family: var(--ow-serif); font-size: 26px; }
.dm-stage .mkt { margin-top: 12px; padding: 4px 14px; }
.dm-stage .mkt > .d-k { padding-top: 8px; }
.dm-stage .mrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ow-line-soft); }
.dm-stage .mrow:last-child { border-bottom: 0; }
.dm-stage .mrow .ic { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ow-cream-deep); color: var(--ow-gold-ink); }
.dm-stage .mrow b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stage .mrow .src { font-size: 12px; color: var(--own-fg-2); white-space: nowrap; }
.dm-stage .mrow .val { font-weight: 700; font-size: 14.5px; text-align: right; }
.dm-stage .mrow .tr { font-size: 12px; font-weight: 600; text-align: right; color: var(--own-success); }
.dm-stage .mrow .sw { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ow-line); color: var(--ow-ink); }
.dm-stage .mrow .pl { grid-column: 2 / 4; font-size: 12px; font-weight: 700; color: var(--ow-gold-ink); }
.dm-stage .trade { display: grid; gap: 9px; margin-top: 10px; }
.dm-stage .trade > .d-seg { justify-self: start; }

/* Budgets and the Gesamtbild */
.dm-stage .bud-b { position: relative; min-height: 268px; margin-top: 10px; }
.dm-stage .bg-list { display: grid; gap: 6px; }
.dm-stage .bg-list .aid { padding: 8px 10px; }
.dm-stage .bg-list .gl { width: 36px; height: 36px; }
.dm-stage .bg-list .tt { font-size: 15px; }
.dm-stage .ty-list { position: absolute; inset: 0; display: grid; gap: 6px; align-content: start; background: var(--ow-paper); }
.dm-stage .ty-list > .d-pill { justify-self: start; }
.dm-stage .ty-list .aid { padding: 8px 12px; }
.dm-stage .ty-list .tt { font-size: 15px; }
.dm-stage .bfields { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.dm-stage .gbw { margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.dm-stage .gbw .hz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--own-fg-2); }
.dm-stage .gbw .hz .d-seg > span { padding: 4px 10px; font-size: 12px; }
.dm-stage .gbw .chart { display: block; width: 100%; height: 190px; margin-top: 8px; }
.dm-stage .gbw .chart .ax { stroke: var(--ow-line); }
.dm-stage .gbw .chart [class^="ar"] { opacity: 0.75; }
.dm-stage .gbw .chart .sq { fill: none; stroke: color-mix(in srgb, var(--ow-ink) 40%, #fff); stroke-width: 3; stroke-dasharray: 700; stroke-dashoffset: 0; }
.dm-stage .gbw .chart .sc { fill: none; stroke: var(--ow-ink); stroke-width: 3.5; stroke-dasharray: 700; stroke-dashoffset: 0; }
.dm-stage .gbw .axl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--sg-faint); }
.dm-stage .scnbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.dm-stage .scnbar .dd { display: inline-flex; align-items: center; gap: 6px; min-width: 170px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ow-line); background: var(--ow-paper); font-size: 13px; color: var(--own-fg-2); }
.dm-stage .scnbar .plusb { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ow-ink); color: var(--ow-paper); }
.dm-stage .scnban { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ow-champagne) 12%, var(--ow-paper)); border: 1px solid var(--ow-champagne); font-size: 13px; }
.dm-stage .scnban > .material-symbols-outlined { color: var(--ow-champagne-deep); }
.dm-stage .scnban .dl { margin-left: auto; display: grid; text-align: right; }
.dm-stage .scnban .dl .d-mu { font-size: 12px; }
.dm-stage .scnban .dl b { font-size: 16px; }
.dm-stage .tabs { display: flex; gap: 6px; margin-top: 10px; }
.dm-stage .tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.dm-stage.ph .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-stage .tpl { position: relative; display: grid; gap: 3px; align-content: start; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.dm-stage .tpl b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.dm-stage .tpl b .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 18px; }
.dm-stage .tpl > span:not(.tsel) { font-size: 11.5px; line-height: 1.35; color: var(--own-fg-2); }
.dm-stage .tpl .tsel { position: absolute; inset: -1px; border-radius: 12px; box-shadow: 0 0 0 2px var(--ow-champagne); background: color-mix(in srgb, var(--ow-champagne) 6%, transparent); }

/* An online banking — not OWNAMIC */
.dm-stage .bk { position: absolute; inset: 0; background: var(--dm-g0); color: var(--dm-g9); font-family: var(--dm-sys); }
.dm-stage .bk .top { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; background: #fff; border-bottom: 1px solid var(--dm-g2); font-weight: 700; }
.dm-stage .bk .top .material-symbols-outlined { color: var(--dm-g7); }
.dm-stage .bk .top .ex { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--dm-g5); }
.dm-stage .bk .nav { display: flex; gap: 6px; padding: 10px 18px; }
.dm-stage .bk .nav span { padding: 7px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--dm-g7); }
.dm-stage .bk .nav span.on { background: var(--dm-g2); color: var(--dm-g9); }
.dm-stage .bk .pan { margin: 0 18px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--dm-g2); }
.dm-stage .bk .pan.rel { position: relative; }
.dm-stage .bk .pt { font-weight: 700; }
.dm-stage .bk .tb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dm-stage .bk .per { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--dm-g3); background: var(--dm-g0); font-size: 13px; font-weight: 600; }
.dm-stage .bk .pv { position: relative; display: inline-block; min-width: 130px; }
.dm-stage .bk .p30 { position: absolute; left: 0; white-space: nowrap; }
.dm-stage .bk .p4 { white-space: nowrap; }
.dm-stage .bk .rows { margin-top: 8px; }
.dm-stage .bk .rw { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--dm-g1); font-size: 13.5px; }
.dm-stage .bk .rw.two { grid-template-columns: 1fr auto; }
.dm-stage .bk .rw .d { color: var(--dm-g5); }
.dm-stage .bk .rw b { font-variant-numeric: tabular-nums; }
.dm-stage .bk .dl { display: inline-flex; align-items: center; gap: 4px; color: var(--dm-g7); font-weight: 600; }
.dm-stage .bk .exb { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: var(--dm-g7); color: #fff; font-size: 13px; font-weight: 700; }
.dm-stage .bk .free { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; }
.dm-stage .bk .menu { position: absolute; z-index: 3; top: 48px; width: 180px; border-radius: 10px; background: #fff; border: 1px solid var(--dm-g2); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); font-size: 13.5px; font-weight: 600; visibility: hidden; opacity: 0; }
.dm-stage .bk .m-per { left: 14px; }
.dm-stage .bk .m-exp { right: 14px; }
.dm-stage .bk .menu div { padding: 10px 12px; border-bottom: 1px solid var(--dm-g1); }
.dm-stage .bk .toast { position: absolute; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--dm-g9); color: #fff; font-size: 13px; white-space: nowrap; transform: translateX(-50%); visibility: hidden; opacity: 0; }
.dm-stage.ph .bk .top .ex { display: none; }
.dm-stage.ph .bk .rw { grid-template-columns: 54px 1fr auto; }

/* The closing card („Jetzt du“) and the pointer */
.dm-stage .d-end { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--sg-card) 96%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); visibility: hidden; opacity: 0; }
.dm-stage .d-end .in { display: grid; gap: 10px; width: 100%; max-width: 480px; }
.dm-stage .d-end .d-k { color: var(--ow-ed-accent); }
.dm-stage .d-end h3 { margin: 0; font-family: var(--ow-serif); font-weight: 500; font-size: 40px; line-height: 1.05; text-wrap: balance; }
.dm-stage .d-end h3 em { color: var(--ow-gold-ink); }
.dm-stage .d-end p { font-size: 15px; color: var(--own-fg-2); }
.dm-stage .d-end .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.dm-stage .d-end .d-btn { cursor: pointer; }
.dm-stage .d-end .d-btn:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 3px; }
.dm-stage .d-end .cost { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--own-fg-2); }
.dm-stage .d-end .cost .material-symbols-outlined { color: var(--ow-champagne-deep); font-size: 17px; }
.dm-stage.ph .d-end h3 { font-size: 32px; }
.dm-stage .d-cur { position: absolute; z-index: 30; left: 860px; top: 470px; width: 26px; height: 26px; margin: -3px 0 0 -4px; pointer-events: none; transform-origin: 4px 3px; fill: var(--ow-ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(11, 16, 32, 0.35)); visibility: hidden; opacity: 0; }
.dm-stage.ph .d-cur { display: none; }
.dm-stage .d-tap { position: absolute; z-index: 30; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(11, 16, 32, 0.2); border: 2.5px solid #fff; box-shadow: 0 2px 10px rgba(11, 16, 32, 0.35); pointer-events: none; visibility: hidden; opacity: 0; }
.dm-stage .d-rip { position: absolute; z-index: 29; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2.5px solid var(--ow-champagne); pointer-events: none; visibility: hidden; opacity: 0; }

/* The demo inside the series: a layer over the steps, its own head and its own scrolling */
.sgd { position: relative; }
.sgd-demo { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--ow-cream); }
.sgd-demo-hd { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ow-paper); border-bottom: 1px solid var(--ow-line); }
.sgd-demo-hd .sg-link { color: var(--ow-ink); }
.sgd-demo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.95rem; }
.sgd-demo-hd .sg-x { margin-left: auto; }
.sgd-demo-b { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px 18px 16px; }

@media (max-width: 760px) {
    .sgd-demo-b { padding: 10px 10px 12px; }
    .sgd-demo-hd .lbl { display: none; }
}

/* Z3 of Vorsorge & Ordnung — the next undecided thing with its three decisions. */
.ed-home .ed-sort {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ed-home .ed-sort-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 2px;
}

.ed-home .ed-sort-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ed-home .ed-sort-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--ow-cream-deep);
}

.ed-home .ed-sort-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* The current value of the thing, under its photo (the latest valuation's range with its evidence
   chip), and the icons of the three piles on the decision buttons. */
.ed-home .ed-sort-value {
    --vit-border: var(--ow-line);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--ow-ink);
}

.ed-home .ed-sort-value-amount {
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.ed-home .ed-sort-buttons .ed-pill-btn {
    gap: 8px;
}

.ed-home .ed-sort-buttons .ed-pill-btn .material-symbols-outlined {
    font-size: 1.15rem;
}

/* The collection's progress beside the eyebrow — only on a wide screen; the phone card says
   „noch 7 offen“ already. */
.ed-home .ed-sort-progress {
    display: none;
}

/* Z3 of Vorsorge & Ordnung on a wide screen: the thing as a photo card on a little stack of the
   things still to come on the left, its value underneath; its name, year and „Gedacht für“ in the
   middle; the three piles as tiles on the right. The swipe wrappers, the head and the text block
   have no box of their own here (display: contents), so their pieces sit in this grid directly —
   the markup the phone swipes stays the same. */
@media (min-width: 1024px) {
    .ed-home .ed-sort {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(250px, 320px);
        grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas:
            "eye   eye   prog"
            "media name  btns"
            "media sub   btns"
            "media intd  btns"
            "value later btns";
        column-gap: 32px;
        row-gap: 8px;
        padding: 24px 28px;
    }

    .ed-home .ed-sort > .ed-eyebrow { grid-area: eye; align-self: center; }

    .ed-home .ed-sort-progress {
        grid-area: prog;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.85rem;
        color: var(--own-fg-2);
        white-space: nowrap;
    }

    .ed-home .ed-sort-progress .ed-progress {
        flex: 1;
        min-width: 60px;
        height: 6px;
        background: var(--ow-paper);
    }

    .ed-home .ed-sort .ed-sort-head,
    .ed-home .ed-sort .ed-sort-text {
        display: contents;
    }

    .ed-home .ed-sort button.ed-sort-open {
        grid-area: media;
        align-self: start;
        margin: 6px 14px 14px 0;
        border-radius: 16px;
    }

    .ed-home .ed-sort .ed-sort-media--empty {
        display: block;
    }

    /* The photo as a card: a paper frame and a soft shadow. */
    .ed-home .ed-sort .ed-sort-thumb {
        width: 176px;
        height: 176px;
        border: 5px solid var(--ow-paper);
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(11, 16, 32, 0.12);
    }

    .ed-home .ed-sort .ed-sort-thumb--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ow-ed-accent);
        font-size: 3.5rem;
    }

    /* More than one thing left: two cards peek out behind it. */
    .ed-home .ed-sort--stack .ed-sort-thumb {
        box-shadow:
            7px 7px 0 -1px var(--ow-paper),
            7px 7px 0 0 var(--ow-line),
            14px 14px 0 -2px var(--ow-paper),
            14px 14px 0 -1px var(--ow-line),
            0 10px 24px rgba(11, 16, 32, 0.12);
    }

    .ed-home .ed-sort .ed-sort-text > .ed-next-title {
        grid-area: name;
        align-self: end;
        margin-top: 6px;
        font-family: var(--ow-serif);
        font-weight: 500;
        font-size: 1.85rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .ed-home .ed-sort .ed-sort-text > .ed-row-sub { grid-area: sub; }

    .ed-home .ed-sort .ed-sort-value {
        grid-area: value;
        align-self: center;
        max-width: 190px;
    }

    .ed-home .ed-sort .ed-intended {
        grid-area: intd;
        align-self: start;
        margin-top: 14px;
    }

    .ed-home .ed-sort > .ed-sort-defer {
        grid-area: later;
        align-self: center;
    }

    /* The three piles as tiles, one under the other: paper with the pile's icon on a disc, ink on hover. */
    .ed-home .ed-sort .ed-sort-buttons {
        grid-area: btns;
        align-self: center;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0;
    }

    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn {
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        padding: 8px 18px 8px 10px;
        border: 1px solid var(--ow-line);
        border-radius: 16px;
        background: var(--ow-paper);
        color: var(--ow-ink);
        font-size: 0.95rem;
        text-align: left;
        transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    }

    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn .material-symbols-outlined {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--ow-ed-accent-soft);
        color: var(--ow-ed-accent);
        font-size: 1.25rem;
        transition: background-color 0.15s, color 0.15s;
    }

    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn:not(:disabled):hover,
    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn:focus-visible {
        border-color: var(--ow-ink);
        background: var(--ow-ink);
        color: var(--ow-paper);
        transform: translateX(2px);
    }

    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn:not(:disabled):hover .material-symbols-outlined,
    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn:focus-visible .material-symbols-outlined {
        background: var(--ow-champagne);
        color: var(--ow-ink);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn { transition: none; }
    .ed-home .ed-sort .ed-sort-buttons .ed-pill-btn:not(:disabled):hover { transform: none; }
}

/* „Gedacht für“ on both sorting cards (start page and /declutter). */
.ed-intended {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
}

.ed-intended-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--own-fg-2);
}

.ed-intended-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ed-intended-field > :first-child {
    flex: 1;
    min-width: 0;
}

.ed-intended-saved {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--own-fg-2);
}

.ed-intended-saved .material-symbols-outlined {
    font-size: 1.1rem;
}

.own-canvas .ed-sort-card .ed-intended {
    margin: 0 0 16px;
}

.ed-home button.ed-pill-btn {
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.ed-home button.ed-pill-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* =========================================================================
   VORSORGE & ORDNUNG — /declutter, /declutter/piles, /keepsakes
   One thing at a time on the sorting card; the piles as lists with their next action.
   ========================================================================= */
.own-canvas .ed-sort-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
}

.own-canvas .ed-sort-photo {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--ow-cream-deep);
}

.own-canvas .ed-sort-photo--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--ow-ed-accent);
}

.own-canvas .ed-sort-name {
    display: block;
    font-family: var(--ow-serif);
    font-size: 1.5rem;
    color: var(--ow-ink);
    text-decoration: none;
}

.own-canvas .ed-sort-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.own-canvas .ed-sort-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 76px;
    padding: 12px 8px;
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
}

.own-canvas .ed-sort-btn .material-symbols-outlined {
    color: var(--ow-ed-accent);
}

.own-canvas .ed-sort-btn:hover,
.own-canvas .ed-sort-btn:focus-visible {
    border-color: var(--ow-ed-accent-line);
    background: var(--ow-ed-accent-soft);
}

.own-canvas .ed-sort-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.own-canvas .ed-sort-later {
    margin-top: 10px;
    width: 100%;
}

.own-canvas .ed-pile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.own-canvas .ed-pile-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ow-line-soft);
}

.own-canvas .ed-pile-list li:last-child {
    border-bottom: none;
}

.own-canvas .ed-pile-main {
    flex: 1 1 auto;
    min-width: 0;
}

.own-canvas .ed-pile-main > a {
    color: var(--ow-ink);
    text-decoration: none;
}

.own-canvas .ed-pile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.own-canvas .ed-pile-undo {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 22px;
    background: transparent;
    color: var(--own-fg-3);
    cursor: pointer;
}

.own-canvas .ed-pile-undo:hover,
.own-canvas .ed-pile-undo:focus-visible {
    background: var(--ow-cream-deep);
    color: var(--ow-ink);
}

.own-canvas .ed-pile-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.own-canvas .ed-keepsake .oc-label {
    display: block;
    margin: 14px 0 6px;
}

@media (max-width: 480px) {
    .own-canvas .ed-sort-actions {
        grid-template-columns: 1fr;
    }

    .own-canvas .ed-sort-btn {
        flex-direction: row;
        justify-content: center;
        min-height: 52px;
    }
}

/* Swiping on the sorting cards of Ordnung & Vorsorge (DeclutterSwipe.razor, js/declutterSwipe.js),
   on /declutter and on the edition's start page. On a phone the thing is a card that is swiped:
   left keeps, up sells or gives away, right discards; „Mit Tasten entscheiden“ (.is-buttons) brings
   the buttons back. Everywhere else the wrappers have no box of their own, so the card's layout is
   exactly what it was. The media query is the one the script checks before a drag starts. */
.ed-swipe,
.ed-swipe-card,
.ed-swipe-buttons {
    display: contents;
}

.ed-swipe-stamp,
.ed-swipe-hint,
.ed-swipe-toggle,
.ed-swipe-gesture,
.ed-sort-thumb--empty {
    display: none;
}

/* The photo of the thing on both sorting cards, with the gesture over it (DeclutterSwipeGesture).
   Not a link but a quiet button that opens the thing, so a swipe that starts on the picture does
   not follow it (the script swallows the click after a drag). The name is plain text. On the
   start page a thing without a photo has a placeholder only on the swipe card; elsewhere the
   empty button takes no room. */
button.ed-sort-open {
    appearance: none;
    display: block;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 0;
    cursor: pointer;
}

button.ed-sort-open > img {
    display: block;
}

.ed-sort-media--empty {
    display: none;
}

button.ed-sort-open:focus-visible {
    outline: 2px solid var(--ow-champagne);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 768px) and (pointer: coarse) {
    .ed-swipe-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        align-self: center;
        width: fit-content;
        margin: 8px auto 0;
        padding: 6px 12px;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--own-fg-2, var(--ow-ink));
        font: inherit;
        font-size: 0.85rem;
        cursor: pointer;
    }

    .ed-swipe-toggle .material-symbols-outlined {
        font-size: 1.1rem;
        color: var(--ow-ed-accent);
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-buttons {
        display: none;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card {
        display: block;
        position: relative;
        margin: 14px 0 10px;
        padding: 14px;
        border: 1px solid var(--ow-line);
        border-radius: 18px;
        background: var(--ow-paper);
        box-shadow: 0 10px 28px rgba(11, 16, 32, 0.10);
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        will-change: transform;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card.is-dragging {
        box-shadow: 0 16px 36px rgba(11, 16, 32, 0.16);
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card.is-entering {
        animation: ed-swipe-in 220ms ease-out;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card img {
        -webkit-user-drag: none;
        pointer-events: none;
    }

    /* The thing stands upright on the card: its name centred on top, the photo in the middle,
       the year and what is left below. The text block gives up its box so the name can move
       above the photo (order) without touching the markup the buttons layout uses. */
    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-item,
    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-head {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin: 0;
        text-align: center;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-text {
        display: contents;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-name,
    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-next-title {
        order: -1;
        display: block;
        width: 100%;
        margin-bottom: 8px;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-photo,
    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-thumb {
        width: min(100%, 260px);
        height: auto;
        aspect-ratio: 1;
        margin: 0 auto 10px;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-photo--empty {
        font-size: 3.5rem;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-media,
    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-media--empty {
        display: block;
        position: relative;
        width: min(100%, 260px);
        margin: 0 auto 10px;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-media .ed-sort-photo,
    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-media .ed-sort-thumb {
        display: block;
        width: 100%;
        margin: 0;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-media .ed-sort-photo--empty,
    .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-media .ed-sort-thumb--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: var(--ow-cream-deep);
        color: var(--ow-ed-accent);
        font-size: 3.5rem;
    }

    /* Over the photo, always while the card is swiped by default: a translucent fingertip slides
       left, up and right in turn (6 s), and the arrow of that pile lights up. It steps aside while
       a finger is on the card. */
    .ed-swipe:not(.is-buttons) .ed-swipe-gesture {
        display: block;
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: 12px;
        pointer-events: none;
        opacity: 0.75;
        transition: opacity 0.2s;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-card.is-dragging .ed-swipe-gesture,
    .ed-swipe:not(.is-buttons) .ed-swipe-card.is-flying .ed-swipe-gesture {
        opacity: 0;
    }

    .ed-swipe-gesture-dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 38px;
        height: 38px;
        margin: -19px 0 0 -19px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.42);
        box-shadow: 0 2px 10px rgba(11, 16, 32, 0.2);
        opacity: 0;
        animation: edSwipeGesture 6s ease-in-out infinite;
    }

    .ed-swipe .ed-swipe-gesture-arrow {
        position: absolute;
        top: 50%;
        font-size: 34px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 0 1px 6px rgba(11, 16, 32, 0.4);
        opacity: 0.25;
        animation: 6s ease-in-out infinite;
    }

    .ed-swipe .ed-swipe-gesture-arrow.is-left {
        left: 2px;
        transform: translateY(-50%);
        animation-name: edSwipeArrowLeft;
    }

    .ed-swipe .ed-swipe-gesture-arrow.is-up {
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        animation-name: edSwipeArrowUp;
    }

    .ed-swipe .ed-swipe-gesture-arrow.is-right {
        right: 2px;
        transform: translateY(-50%);
        animation-name: edSwipeArrowRight;
    }

    /* The stamp of the pile the card is heading for, fading in with the distance (--swipe-*). */
    .ed-swipe:not(.is-buttons) .ed-swipe-stamp {
        display: block;
        position: absolute;
        top: 38%;
        z-index: 1;
        max-width: 60%;
        padding: 4px 10px;
        border: 2px solid currentColor;
        border-radius: 8px;
        background: var(--ow-paper);
        font-weight: 800;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        pointer-events: none;
        opacity: 0;
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-stamp--keep {
        right: 18px;
        color: var(--ow-ink);
        transform: rotate(10deg);
        opacity: var(--swipe-keep, 0);
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-stamp--dispose {
        left: 18px;
        color: var(--ow-negative);
        transform: rotate(-10deg);
        opacity: var(--swipe-dispose, 0);
    }

    .ed-swipe:not(.is-buttons) .ed-swipe-stamp--give {
        top: auto;
        bottom: 18px;
        left: 50%;
        color: var(--ow-gold-ink);
        text-align: center;
        transform: translateX(-50%);
        opacity: var(--swipe-give, 0);
    }

    /* ← Behalten · ↑ Verkaufen oder Verschenken · Entsorgen → */
    .ed-swipe:not(.is-buttons) .ed-swipe-hint {
        display: grid;
        grid-template-columns: 1fr 1.3fr 1fr;
        align-items: start;
        gap: 6px;
        margin: 0 0 14px;
        font-size: 0.8rem;
        line-height: 1.25;
        color: var(--ow-ink);
    }

    .ed-swipe-hint > span {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .ed-swipe-hint .material-symbols-outlined {
        flex-shrink: 0;
        font-size: 1.1rem;
        color: var(--ow-ed-accent);
    }

    .ed-swipe-hint .ed-swipe-hint-give {
        flex-direction: column;
        text-align: center;
    }

    .ed-swipe-hint .ed-swipe-hint-dispose {
        justify-content: flex-end;
        text-align: right;
    }
}

@keyframes ed-swipe-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes edSwipeGesture {
    0%, 100% { opacity: 0; transform: none; }
    5% { opacity: 1; transform: none; }
    22% { opacity: 0; transform: translateX(-70px); }
    33.3% { opacity: 0; transform: none; }
    38% { opacity: 1; transform: none; }
    55% { opacity: 0; transform: translateY(-70px); }
    66.6% { opacity: 0; transform: none; }
    71% { opacity: 1; transform: none; }
    88% { opacity: 0; transform: translateX(70px); }
}

@keyframes edSwipeArrowLeft {
    0%, 4%, 30%, 100% { opacity: 0.25; }
    12%, 22% { opacity: 0.95; }
}

@keyframes edSwipeArrowUp {
    0%, 37%, 63%, 100% { opacity: 0.25; }
    45%, 55% { opacity: 0.95; }
}

@keyframes edSwipeArrowRight {
    0%, 70%, 96%, 100% { opacity: 0.25; }
    78%, 88% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-swipe .ed-swipe-card.is-entering {
        animation: none;
    }

    /* Without motion: the three arrows stand still over the photo, no fingertip. */
    .ed-swipe .ed-swipe-gesture-dot {
        display: none;
    }

    .ed-swipe .ed-swipe-gesture-arrow {
        animation: none;
        opacity: 0.6;
    }
}

/* =========================================================================
   EDITION PILL — the edition switch next to the logo in the app header
   ========================================================================= */
.ed-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    margin-left: 10px;
}

.ed-switch-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 36px;
    padding: 0 8px 0 14px;
    border: none;
    border-radius: 18px;
    background: var(--ow-ed-accent-soft);
    color: var(--ow-ed-accent);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ed-switch-pill:focus-visible {
    outline: 2px solid var(--ow-champagne);
    outline-offset: 2px;
}

.ed-switch-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

/* Fixed, not absolute: the header row clips its brand column on phones. */
.ed-switch-menu {
    position: fixed;
    top: 60px;
    left: 12px;
    z-index: 1100;
    display: grid;
    gap: 4px;
    width: min(360px, calc(100vw - 24px));
    padding: 8px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(11, 16, 32, 0.16);
}

/* One-time hint under the pill for existing users: "Neu: Editionen …" (plan §7.2). Fixed like the
   menu, because the header row clips on phones. */
.ed-switch-intro {
    position: fixed;
    top: 60px;
    left: 12px;
    z-index: 1090;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: min(340px, calc(100vw - 24px));
    padding: 12px 14px;
    background: var(--ow-ink);
    color: var(--ow-paper);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(11, 16, 32, 0.2);
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: normal;
}

.ed-switch-intro-btn {
    min-height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 18px;
    /* Sits on the ink intro bubble: the brand champagne, not the edition tone. */
    background: var(--ow-champagne);
    color: var(--ow-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ed-switch-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--ow-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ed-switch-option:hover,
.ed-switch-option:focus-visible,
.ed-switch-option.is-current {
    background: var(--ow-ed-accent-soft);
}

.ed-switch-icon,
.ed-switch-check {
    color: var(--ow-ed-accent);
}

.ed-switch-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.ed-switch-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.ed-switch-tag {
    font-size: 0.82rem;
    color: var(--own-fg-2);
}

/* Phones: the pill carries the brand next to the mark, the wordmark steps aside. */
@media (max-width: 480px) {
    .own-header-brand:has(.ed-switch) .ownamic-logo-text {
        display: none;
    }

    .ed-switch {
        margin-left: 6px;
    }
}

/* ═══════════════════════ WERKZEUGE — tool landing pages (Pages/Werkzeuge) ═══════════════════════
   One small page per tool (docs/werkzeug-landingpages-plan.md, 3.3): the light edition hero with its
   nav, the tool itself, then steps, the bridge to the next tools, trust, FAQ and the compliance line.
   `.wz` sits next to `.lp` and `.ed-{key}` on the page root, so the landing tokens, the landing
   buttons and the edition undertone all resolve here. Filled surfaces are ink or champagne only. */
.lp.wz { background: var(--ow-paper); }
.lp.wz .wz-hero { padding-bottom: 48px; }
/* The tool hero is the light edition hero, but its lede is the plain `.lp-hero .lp-lede`, whose
   white-on-dark colour vanished on the cream ground. It reads in the hero's own dark text. */
.lp.wz .wz-hero .lp-lede { margin-bottom: 20px; color: var(--he-text); }
.lp.wz .wz-hero .lp-lede strong { color: var(--ow-ink); }
.lp.wz .wz-trust-line {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none;
  font-size: 0.9rem; color: var(--own-fg-2);
}
.lp.wz .wz-trust-line li { display: inline-flex; align-items: center; gap: 8px; }
.lp.wz .wz-trust-line .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-ed-accent, var(--ow-champagne-deep)); }

.lp.wz .wz-h2 {
  font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-h2-size);
  line-height: 1.1; letter-spacing: -0.01em; margin: 10px 0 24px; color: var(--ow-ink);
}
.lp.wz .wz-h3 {
  font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size);
  margin: 36px 0 14px; color: var(--ow-ink);
}
.lp.wz .wz-sec { padding: 64px 0; border-top: 1px solid var(--ow-line); }
.lp.wz .wz-tool { padding: 8px 0 64px; background: var(--ow-cream); }

/* ── The calculator form (and the other tool forms): Radzen fields in the .oc-input language ── */
.lp.wz .wz-form {
  background: var(--ow-paper); border: 1px solid var(--ow-line); border-radius: 22px;
  padding: 28px; box-shadow: 0 1px 2px rgba(11, 16, 32, 0.04);
}
.lp.wz .wz-optional { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--own-fg-3); margin-left: 4px; }
.lp.wz .wz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lp.wz .wz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp.wz .wz-label { font-size: 0.9rem; font-weight: 600; color: var(--own-fg-1); }
.lp.wz .wz-hint { font-size: 0.8rem; line-height: 1.4; color: var(--own-fg-2); }
/* The calculator's fields share three rows — caption, input, hint — so the inputs of one row stand
   on one line even when one caption wraps to two lines and its neighbour's does not. */
@supports (grid-template-rows: subgrid) {
  .lp.wz .wz-rechner .wz-grid > .wz-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
}
.lp.wz .oc-input,
.lp.wz .oc-input .rz-numeric,
.lp.wz .oc-input .own-datepicker-input { width: 100%; }
.lp.wz .oc-input .rz-numeric,
.lp.wz .oc-input .rz-datepicker {
  background: var(--ow-cream); border: 1px solid var(--ow-line); border-radius: 14px;
  font-family: inherit; font-size: 1rem; color: var(--ow-ink); box-shadow: none;
}
.lp.wz .oc-input .rz-numeric .rz-numeric-input,
.lp.wz .oc-input .rz-datepicker .rz-inputtext { background: transparent; border: 0; padding: 12px 16px; font-size: 1rem; color: var(--ow-ink); }
.lp.wz .oc-input .rz-numeric:focus-within,
.lp.wz .oc-input .rz-datepicker:focus-within { border-color: var(--ow-champagne); }

.lp.wz .wz-errors {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 16px;
  border: 1px solid var(--ow-negative); border-radius: 14px; background: var(--ow-paper); color: var(--ow-negative);
}
.lp.wz .wz-errors ul { margin: 0; padding-left: 18px; }
.lp.wz .wz-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* "Materialwert berechnen" under the material-value form: the value shows on the click, so a
   visitor's one free calculation is the entries they chose (WerkzeugFreigabe). */
.lp.wz .wz-materialwert-actions { margin-top: 20px; }
.lp.wz .wz-materialwert-actions .lp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* The registration a second calculation shows instead of its result without an account
   (WerkzeugSperre): the compact form, then the way back to the entries. */
.lp.wz .wz-sperre { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
.lp.wz .wz-sperre .kr { align-self: stretch; }

/* ── The calculator as a dialog (RentenRechnerWidget): one question per step with a progress bar,
   its own fields, "≈" in every amount field (rough figures are enough), back / skip / next. ── */
.lp.wz .wz-step { max-width: 760px; margin: 0 auto; }
.lp.wz .wz-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.lp.wz .wz-step-count { flex: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ow-gold-ink); }
.lp.wz .wz-step-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--ow-line); overflow: hidden; }
.lp.wz .wz-step-bar > span {
  display: block; height: 100%; width: var(--wz-step-p, 0%); border-radius: 4px; background: var(--ow-champagne);
  transition: width var(--own-dur-base) var(--own-ease);
}
.lp.wz .wz-step-question {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 8px; outline: none;
  font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.2; color: var(--ow-ink);
}
.lp.wz .wz-step-question .material-symbols-outlined {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--ow-ink); color: var(--ow-champagne); font-size: 22px;
}
.lp.wz .wz-step-question .wz-optional { font-family: var(--own-font-sans); font-size: 0.85rem; }
.lp.wz .wz-step-lead { margin: 0 0 22px; color: var(--own-fg-2); max-width: 620px; }
/* The amount fields read as estimates: a quiet "≈" in front of every number. */
.lp.wz .oc-input.wz-approx { position: relative; display: block; }
.lp.wz .oc-input.wz-approx::before {
  content: "≈"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--ow-gold-ink); font-weight: 600; pointer-events: none;
}
.lp.wz .oc-input.wz-approx .rz-numeric .rz-numeric-input { padding-left: 32px; }
.lp.wz .wz-schaetz-hint { display: flex; gap: 8px; align-items: baseline; margin: 18px 0 0; font-size: 0.85rem; color: var(--own-fg-2); }
.lp.wz .wz-schaetz-hint > span { color: var(--ow-gold-ink); font-weight: 700; }
.lp.wz .wz-step-actions { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ow-line); }
.lp.wz .wz-step-actions .lp-btn-primary { margin-left: auto; }
.lp.wz .wz-step-back,
.lp.wz .wz-step-skip {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--own-fg-2);
}
.lp.wz .wz-step-back:hover,
.lp.wz .wz-step-skip:hover { color: var(--ow-ink); }
.lp.wz .wz-step-back .material-symbols-outlined { font-size: 1.1rem; }
.lp.wz .wz-step-skip { text-decoration: underline; text-underline-offset: 3px; }
/* The Gesamtbild taking shape beside the dialog (RentenRechnerVorschau): greyed, a preview, from the
   first figure on. Beside the dialog from 1000px, under it below that. The chips say which parts
   are in the line; the full, coloured Gesamtbild comes with the result. */
.lp.wz .wz-dialog-row { display: grid; gap: 20px; }
@media (min-width: 1000px) {
  .lp.wz .wz-dialog-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  .lp.wz .wz-dialog-row .wz-step { max-width: none; margin: 0; }
  .lp.wz .wz-dialog-row .wz-entsteht { position: sticky; top: 96px; }
}
.lp.wz .wz-dialog-row .wz-entsteht { max-width: 760px; width: 100%; margin: 0 auto; }
.lp.wz .wz-entsteht {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 22px;
  background: var(--ow-paper); border: 1px dashed var(--ow-line); color: var(--own-fg-2);
}
.lp.wz .wz-vorschau-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp.wz .wz-vorschau-titel { font-family: var(--ow-serif); font-size: 1.15rem; color: var(--own-fg-2); }
.lp.wz .wz-vorschau-badge {
  flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ow-line);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--own-fg-3);
}
.lp.wz .wz-vorschau-svg { display: block; width: 100%; height: auto; }
.lp.wz .wz-vs-frame { fill: var(--ow-cream); stroke: var(--ow-line); stroke-width: 1; }
.lp.wz .wz-vs-grid { stroke: var(--ow-line); stroke-width: 1; }
.lp.wz .wz-vs-zero { stroke: var(--own-fg-3); stroke-width: 1; stroke-dasharray: 4 4; }
.lp.wz .wz-vs-area { fill: var(--own-fg-3); fill-opacity: 0.12; transition: d var(--own-dur-base) var(--own-ease); }
.lp.wz .wz-vs-line {
  fill: none; stroke: var(--own-fg-3); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  transition: d var(--own-dur-base) var(--own-ease);
}
.lp.wz .wz-vs-mark { stroke: var(--own-fg-3); stroke-width: 1; stroke-dasharray: 2 4; }
.lp.wz .wz-vs-axis { font-size: 11px; fill: var(--own-fg-3); }
.lp.wz .wz-vs-mark-label { font-size: 11px; font-weight: 600; fill: var(--own-fg-2); }
.lp.wz .wz-vorschau-teile { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.lp.wz .wz-vs-teil { position: relative; display: inline-flex; align-items: center; gap: 5px; color: var(--own-fg-3); }
.lp.wz .wz-vs-teil .material-symbols-outlined { font-size: 1.05rem; }
.lp.wz .wz-vs-teil.is-drin { color: var(--ow-ink); font-weight: 600; }
.lp.wz .wz-vs-teil.is-drin .material-symbols-outlined { color: var(--ow-gold-ink); }
.lp.wz .wz-vs-teil.is-ohne { text-decoration: line-through; text-decoration-color: var(--ow-line); }
.lp.wz .wz-vorschau-hint { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--own-fg-2); }
/* The fixed assumptions (2 % income growth, 2 % inflation) under the preview's hint, with the note that
   they are adjustable after registration. */
.lp.wz .wz-vorschau-annahmen {
  display: flex; align-items: flex-start; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--ow-line);
  font-size: 0.8rem; line-height: 1.45; color: var(--own-fg-3);
}
.lp.wz .wz-vorschau-annahmen .material-symbols-outlined { font-size: 1rem; color: var(--ow-gold-ink); }
.lp.wz .wz-vorschau-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lp.wz .wz-entsteht.is-empty .wz-vs-frame { fill: var(--ow-paper); }
@media (prefers-reduced-motion: reduce) {
  .lp.wz .wz-vs-area,
  .lp.wz .wz-vs-line { transition: none; }
}

.lp.wz .wz-result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lp.wz .wz-dialog .wz-result { margin-top: 0; }
.lp.wz .wz-result .wz-h2:focus { outline: none; }

/* ── Result: headline tiles, the read-only Gesamtbild, then "Willst du es genau wissen?" ── */
.lp.wz .wz-result { margin-top: 40px; }
.lp.wz .wz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.lp.wz .wz-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px;
  background: var(--ow-paper); border: 1px solid var(--ow-line);
}
.lp.wz .wz-tile--primary { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-paper); }
.lp.wz .wz-tile-label { font-size: 0.85rem; color: var(--own-fg-2); }
.lp.wz .wz-tile--primary .wz-tile-label,
.lp.wz .wz-tile--primary .wz-tile-sub { color: var(--ow-cream-deep); }
.lp.wz .wz-tile-value { font-family: var(--ow-serif); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.1; }
.lp.wz .wz-tile--primary .wz-tile-value { color: var(--ow-champagne); }
.lp.wz .wz-tile-sub { font-size: 0.85rem; color: var(--own-fg-2); }
.lp.wz .wz-assumption { font-size: 0.85rem; color: var(--own-fg-2); margin: 14px 0 0; max-width: 760px; }
.lp.wz .wz-gesamtbild { margin-top: 36px; }
/* With a loan: the product's repayment chart (MortgageRestschuldChart) under the Gesamtbild, and
   the note on what an account adds (partial loans, special repayments, several salaries). */
.lp.wz .wz-tilgung { margin-top: 28px; }
.lp.wz .wz-mehr {
  display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; padding: 14px 18px; max-width: 760px;
  border-radius: 14px; background: var(--ow-cream); color: var(--own-fg-1); font-size: 0.92rem; line-height: 1.5;
}
.lp.wz .wz-mehr .material-symbols-outlined { flex: none; font-size: 1.2rem; color: var(--ow-gold-ink); }
.lp.wz .wz-gesamtbild-lead { color: var(--own-fg-2); margin: 0 0 16px; max-width: 760px; }
.lp.wz .wz-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: 36px; padding: 28px 32px; border-radius: 22px; background: var(--ow-ink); color: var(--ow-paper);
}
.lp.wz .wz-cta-title { font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size); margin: 0 0 6px; color: var(--ow-champagne); }
.lp.wz .wz-cta-copy p { margin: 0; max-width: 560px; color: var(--ow-cream); }
.lp.wz .wz-cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lp.wz .wz-cta .lp-btn-primary { background: var(--ow-champagne); color: var(--ow-ink); box-shadow: none; }
.lp.wz .wz-cta-note { font-size: 0.8rem; color: var(--ow-cream-deep); }

/* ── Steps, bridge cards, next tools, trust, FAQ ── */
.lp.wz .wz-step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.lp.wz .wz-step { display: flex; flex-direction: column; gap: 6px; color: var(--own-fg-2); }
.lp.wz .wz-step strong { color: var(--ow-ink); font-size: 1.05rem; }
.lp.wz .wz-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ow-ink); color: var(--ow-champagne); font-weight: 700;
}
:is(.lp.wz, .lp .wz-band) .wz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
:is(.lp.wz, .lp .wz-band) .wz-card {
  display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px;
  background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--own-fg-2); text-decoration: none;
}
:is(.lp.wz, .lp .wz-band) .wz-card strong { color: var(--ow-ink); font-size: 1.05rem; }
:is(.lp.wz, .lp .wz-band) .wz-card-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--ow-ed-accent-soft, var(--ow-cream)); color: var(--ow-ed-accent, var(--ow-champagne-deep));
}
:is(.lp.wz, .lp .wz-band) .wz-card--link { transition: border-color var(--own-dur-fast) var(--own-ease), box-shadow var(--own-dur-fast) var(--own-ease); }
:is(.lp.wz, .lp .wz-band) .wz-card--link:hover { border-color: var(--ow-champagne); box-shadow: 0 6px 24px rgba(11, 16, 32, 0.08); }
/* Whether the tool runs without an account — said on every card, since the photo recognition does not. */
:is(.lp.wz, .lp .wz-band) .wz-card-access { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-cream); color: var(--own-fg-2); font-size: 0.82rem; font-weight: 600; }
:is(.lp.wz, .lp .wz-band) .wz-card-access .material-symbols-outlined { font-size: 16px; color: var(--ow-champagne-deep); }
:is(.lp.wz, .lp .wz-band) .wz-card-access.is-account { color: var(--ow-ink); border-color: var(--ow-champagne); }
:is(.lp.wz, .lp .wz-band) .wz-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--ow-gold-ink); }
.lp.wz .wz-trust { background: var(--ow-cream); }
/* ── The tools band on the start and edition pages (WerkzeugBand) ──
   The hub's cards under a head with "Alle Werkzeuge" on the right; sits in the landing page's own
   `.lp` flow, so the card rules above are shared with `.lp .wz-band`. */
.lp .wz-band { padding: 56px 0; background: var(--ow-paper); border-top: 1px solid var(--ow-line); }
.lp .wz-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 24px; }
.lp .wz-band-title {
  font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-h2-size);
  line-height: 1.1; letter-spacing: -0.01em; margin: 10px 0 8px; color: var(--ow-ink);
}
.lp .wz-band-title em { font-style: italic; color: var(--ow-gold-ink); }
.lp .wz-band-lede { margin: 0; max-width: 56ch; color: var(--own-fg-2); }
.lp .wz-band-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ow-gold-ink); text-decoration: none; white-space: nowrap; }
.lp .wz-band-all:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .lp .wz-band { padding: 40px 0; }
}

/* ── The blog box of a tool (WerkzeugBlogKasten, embed `werkzeug-{key}`) ──
   Sits inside an article, outside `.lp`, so it names its own button rather than borrowing
   `.lp-btn`: icon, eyebrow, the tool's name and teaser, and one ink button to the tool page. */
.wz-kasten {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 22px;
  margin: 32px 0; padding: 22px 24px; border-radius: 18px;
  background: var(--ow-cream); border: 1px solid var(--ow-line);
}
.wz-kasten-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--ow-paper); color: var(--ow-champagne-deep); font-size: 1.5rem;
}
.wz-kasten-copy { min-width: 0; }
.wz-kasten-eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ow-gold-ink); }
.wz-kasten-title { display: block; margin: 4px 0 4px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.3rem; color: var(--ow-ink); }
.wz-kasten-copy p { margin: 0; color: var(--own-fg-2); }
.wz-kasten-action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wz-kasten-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  background: var(--ow-ink); color: var(--ow-champagne); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.wz-kasten-btn:hover { background: var(--ow-ink-2); }
.wz-kasten-btn .material-symbols-outlined { font-size: 1.05rem; }
.wz-kasten-note { font-size: 0.8rem; color: var(--own-fg-3, var(--own-fg-2)); }
@media (max-width: 640px) {
  .wz-kasten { grid-template-columns: auto 1fr; padding: 18px; }
  .wz-kasten-action { grid-column: 1 / -1; }
}

/* ── Sorting to try in a blog post (AusmistenBlogEmbed, data-embed="ausmisten") ──
   The card of Ordnung & Vorsorge's start page inside an article: five jackets of the Döstädning
   tutorial, one at a time. On a phone the thing is swiped (DeclutterSwipe, the .ed-swipe block
   above gives the card its swipe layout); elsewhere the photo stands beside the name and the three
   buttons decide. The piles count below; at the end the five things with their pile. On the blog,
   outside any .lp or .ed-home ancestor, so it names its own classes. The .ed-vorsorge scope on the
   box gives the undertone (text and soft grounds only). */
.blog-ausmisten {
  box-sizing: border-box; max-width: 640px; margin: 36px auto; padding: 24px 26px 18px; border-radius: 22px;
  background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--ow-ink);
}
.blog-ausmisten .ba-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ow-gold-ink);
}
.blog-ausmisten .ba-eyebrow .material-symbols-outlined { font-size: 1.1rem; }
.blog-ausmisten .ba-title { display: block; margin: 6px 0 4px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.blog-ausmisten .ba-head .ba-lede { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--own-fg-2); }
.blog-ausmisten .ba-progress { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; font-size: 0.85rem; font-weight: 600; color: var(--own-fg-2); }
.blog-ausmisten .ba-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--ow-cream-deep); overflow: hidden; }
.blog-ausmisten .ba-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ow-champagne); transition: width 0.25s ease; }
.blog-ausmisten .ba-card { margin-top: 12px; }
/* Wide screens and the buttons: the photo beside name, room and line, the buttons under them. */
.blog-ausmisten .ed-sort-head { display: flex; align-items: center; gap: 18px; min-width: 0; }
.blog-ausmisten .ed-sort-media { position: relative; flex-shrink: 0; display: block; line-height: 0; }
.blog-ausmisten .ed-sort-media .ed-sort-thumb {
  display: block; width: 150px; height: 200px; max-width: none; margin: 0; border: 0; border-radius: 14px; box-shadow: none;
  object-fit: cover; background: var(--ow-cream-deep);
}
.blog-ausmisten .ed-sort-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blog-ausmisten .ed-next-title { font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.blog-ausmisten .ed-row-sub { font-size: 0.85rem; color: var(--own-fg-2); }
.blog-ausmisten .ba-note { margin-top: 6px; font-size: 0.95rem; font-style: italic; color: var(--ow-ed-accent); }
.blog-ausmisten .ba-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.blog-ausmisten .ba-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px;
  background: var(--ow-ink); color: var(--ow-paper); font: inherit; font-size: 0.92rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.blog-ausmisten .ba-btn:hover, .blog-ausmisten .ba-btn:focus-visible { background: var(--ow-ink-2); }
.blog-ausmisten .ba-btn:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }
.blog-ausmisten .ba-btn .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-champagne); }
.blog-ausmisten .ba-btn--quiet { background: transparent; color: var(--ow-ink); border: 1px solid var(--ow-line); }
.blog-ausmisten .ba-btn--quiet:hover, .blog-ausmisten .ba-btn--quiet:focus-visible { background: var(--ow-paper); }
.blog-ausmisten .ba-btn--quiet .material-symbols-outlined { color: var(--ow-ed-accent); }
/* The three piles and what lies on each. */
.blog-ausmisten .ba-piles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.blog-ausmisten .ba-pile {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 10px 12px;
  border-radius: 14px; background: var(--ow-paper); border: 1px solid var(--ow-line);
}
.blog-ausmisten .ba-pile .material-symbols-outlined { grid-row: span 2; font-size: 1.3rem; color: var(--ow-ed-accent); }
.blog-ausmisten .ba-pile b { font-size: 1.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.blog-ausmisten .ba-pile-name { font-size: 0.75rem; line-height: 1.25; color: var(--own-fg-2); }
.blog-ausmisten .ba-fine { margin-top: 12px; font-size: 0.8rem; color: var(--own-fg-2); }
/* All decided: the five with their pile, the film's choice, again or with one's own things. */
.blog-ausmisten .ba-done { margin-top: 18px; }
.blog-ausmisten .ba-done-title { display: flex; align-items: center; gap: 8px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.3rem; }
.blog-ausmisten .ba-done-title .material-symbols-outlined { color: var(--ow-ed-accent); }
.blog-ausmisten .ba-done .ba-done-list { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.blog-ausmisten .ba-done-list .ba-done-item { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.blog-ausmisten .ba-done-item .ba-done-photo { flex: none; width: 36px; height: 48px; margin: 0; border: 0; border-radius: 8px; box-shadow: none; object-fit: cover; }
.blog-ausmisten .ba-done-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.95rem; }
.blog-ausmisten .ba-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--ow-ed-accent-soft); font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.blog-ausmisten .ba-chip .material-symbols-outlined { font-size: 1rem; color: var(--ow-ed-accent); }
.blog-ausmisten .ba-chip--dispose { background: var(--ow-paper); border: 1px solid var(--ow-line); }
.blog-ausmisten .ba-done-video { margin-top: 14px; font-size: 0.95rem; line-height: 1.55; color: var(--own-fg-2); }
.blog-ausmisten .ba-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 640px) {
  .blog-ausmisten { padding: 18px 16px 14px; border-radius: 18px; }
  .blog-ausmisten .ba-chip { white-space: normal; }
}
/* On a phone the jacket stands upright on the swiped card, in its own 3:4 rather than a square. */
@media (max-width: 768px) and (pointer: coarse) {
  .blog-ausmisten .ed-swipe:not(.is-buttons) .ed-swipe-card .ed-sort-media .ed-sort-thumb { height: auto; aspect-ratio: 3 / 4; }
  .blog-ausmisten .ed-swipe:not(.is-buttons) .ed-swipe-card .ba-note { margin-top: 2px; }
}

/* ── The short at the end of a blog post (ShortBlogEmbed, data-embed="ausmisten-short") ──
   The 9:16 frame of Ordnung & Vorsorge's short as a two-click embed: our thumbnail with the
   champagne play button, whose press swaps in the YouTube player; the consent line underneath. The
   thumbnail's selector carries three classes to outrank the article's ::deep img rule. */
.blog-short { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 32px auto; }
.blog-short-frame {
  position: relative; width: min(100%, 340px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 26px;
  background: var(--ow-ink); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ow-ink) 55%, transparent);
}
.blog-short-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.blog-short-poster { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.blog-short .blog-short-poster .blog-short-img {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: cover;
}
.blog-short-play {
  position: absolute; left: 50%; top: 10%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 22px 12px 16px; border-radius: 999px;
  background: var(--ow-champagne); color: var(--ow-ink); font-size: 1rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ow-ink) 65%, transparent);
  transition: background 0.18s ease, transform 0.18s ease;
}
.blog-short-play .material-symbols-outlined { font-size: 28px; }
.blog-short-poster:hover .blog-short-play { background: var(--ow-champagne-light); transform: translate(-50%, -50%) scale(1.04); }
.blog-short-poster:focus-visible { outline: 3px solid var(--ow-champagne); outline-offset: -3px; border-radius: inherit; }
.blog-short-consent { display: flex; gap: 8px; align-items: flex-start; max-width: 340px; margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--own-fg-2); }
.blog-short-consent .material-symbols-outlined { flex: none; font-size: 17px; color: var(--ow-champagne-deep); }
.blog-short-consent a { color: var(--ow-gold-ink); font-weight: 600; }
/* ── A tutorial film inside a blog post (BlogFilmEmbed, data-embed="film-finanzen-einrichtung") ──
   The two cuts of the landing films: a 16:9 plate for the Desktop recording, a phone-shaped one from
   768px down — the breakpoint of the <source media> in BlogFilmEmbed, keep the two in step. The
   plate's background is the cut's poster (the <video> carries a transparent one), so nothing jumps
   when the first frame arrives. */
.blog-film { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 32px auto; }
.blog-film-frame {
  width: 100%; aspect-ratio: 1600 / 900; overflow: hidden; border-radius: 18px; border: 1px solid var(--ow-line);
  background: var(--ow-ink) url("video/blog/finanzen-einrichtung-desktop.poster.jpg") center / cover no-repeat;
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ow-ink) 55%, transparent);
}
.blog-film-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.blog-film-caption { width: 100%; }
.blog-film-caption p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--own-fg-2); }
.blog-film .blog-film-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 0.8rem; line-height: 1.45; }
.blog-film-note .material-symbols-outlined { flex: none; font-size: 17px; color: var(--ow-champagne-deep); }
@media (max-width: 768px) {
  .blog-film-frame {
    width: min(78vw, 320px); aspect-ratio: 390 / 844; border-radius: 26px;
    background-image: url("video/blog/finanzen-einrichtung-phone.poster.jpg");
  }
  .blog-film-caption { max-width: 340px; }
}
/* The English article's cut opens with an English title card, so it gets its own posters. */
.blog-film--en .blog-film-frame { background-image: url("video/blog/finanzen-einrichtung-desktop-en.poster.jpg"); }
@media (max-width: 768px) {
  .blog-film--en .blog-film-frame { background-image: url("video/blog/finanzen-einrichtung-phone-en.poster.jpg"); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-short-play, .blog-short-poster:hover .blog-short-play { transition: none; transform: translate(-50%, -50%); }
  .blog-ausmisten .ba-bar i { transition: none; }
}

/* ── Compact registration (KompaktRegistrierung, docs/kompakt-registrierung-plan.md) ──
   Sits inside blog articles, under tool results and between landing-page sections — on the blog
   outside any .lp ancestor, which is why it names its own classes and buttons instead of reusing
   .lp-btn. Readability first (the audience is often 50+): 18px text in the field and buttons, 48px
   tall targets, a label above the field, a 3px focus ring in gold ink, body-colour hints. Filled
   surfaces are ink (primary) or the white Google button (Google's own brand rules). */
.kr {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 40px auto;
    padding: 28px 28px 24px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 20px;
    color: var(--own-fg-1);
    font-family: var(--own-font-sans);
    text-align: left;
}

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

.kr .kr-title {
    font-family: var(--ow-serif);
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ow-ink);
    margin: 0 0 6px;
}

.kr .kr-sub {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--own-fg-1);
    margin: 0 0 18px;
}

/* The optional second line (Aufruf) that leads into the form. */
.kr .kr-sub:has(+ .kr-aufruf) { margin-bottom: 8px; }
.kr .kr-aufruf { font-weight: 600; color: var(--ow-ink); }

.kr .kr-form { margin: 0; }

.kr .kr-label {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--own-fg-1);
    margin: 0 0 6px;
}

.kr .kr-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.kr .kr-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1.125rem;
    color: var(--own-fg-1);
    background: var(--ow-paper);
    border: 1px solid var(--own-fg-2);
    border-radius: 12px;
}

.kr .kr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.kr .kr-btn--primary {
    background: var(--ow-ink);
    color: var(--ow-paper);
}

.kr .kr-btn--primary:hover { background: var(--ow-ink-2, var(--ow-ink)); color: var(--ow-paper); }

/* Google's light button: white face, #dadce0 hairline, #3c4043 label — their colours, not ours. */
.kr .kr-btn--google {
    width: 100%;
    background: #fff;
    color: #3c4043;
    border-color: #dadce0;
}

.kr .kr-btn--google:hover { background: #f8f9fa; border-color: #c6c9cc; }

.kr .kr-input:focus-visible,
.kr .kr-btn:focus-visible,
.kr a:focus-visible {
    outline: 3px solid var(--ow-gold-ink);
    outline-offset: 2px;
}

.kr .kr-sep {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    font-size: 1rem;
    color: var(--own-fg-2);
}

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

.kr .kr-note {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--own-fg-2);
    margin: 10px 0 0;
}

.kr .kr-legal {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--own-fg-2);
    margin: 16px 0 0;
}

.kr .kr-legal a {
    color: var(--ow-gold-ink);
    font-weight: 600;
    text-decoration: underline;
}

/* On the landing pages the box gets a band of its own between two sections (Home.razor, .lp-kr). */
.lp .lp-kr { padding: 16px 0 8px; }
.lp .lp-kr .kr { margin: 24px auto; }
.lp .lp-kr--end { padding-bottom: 32px; }

/* Inside an article the box keeps the reading column's width and the article's rhythm. */
.blog-post-content .kr { margin: 36px 0; }

/* The article's own rules (BlogPostPage.razor.css: h2 1.4rem with a 2rem top margin, p with 1rem
   margins, line-height 1.75) reach into the box with a higher specificity than the rules above;
   restate the box's typography there so it looks the same in an article as anywhere else. */
.blog-post-content .kr h2.kr-title { font-size: 1.75rem; line-height: 1.2; margin: 0 0 6px; font-weight: 600; }
.blog-post-content .kr p.kr-sub { margin: 0 0 18px; }
.blog-post-content .kr p.kr-note { margin: 10px 0 0; }
.blog-post-content .kr p.kr-legal { margin: 16px 0 0; }
.blog-post-content .kr { line-height: 1.5; }

/* Phones (375px and up): one column, full-width buttons, nothing to zoom or scroll sideways. */
@media (max-width: 560px) {
    .kr { padding: 22px 16px 18px; border-radius: 16px; }
    .kr .kr-title { font-size: 1.5rem; }
    .blog-post-content .kr h2.kr-title { font-size: 1.5rem; }
    .kr .kr-row { flex-direction: column; }
    .kr .kr-btn { width: 100%; white-space: normal; }
}

/* The slim form (KompaktRegistrierung Schmal="true") for a hero that already says what it is about:
   no box, no heading, the label read out but not shown, "Weiter" beside the field even on a phone and
   Google right under it — two 48px rows. Used over the hero's film at its end (.cs-end). */
.kr.kr--schmal { max-width: 460px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.kr.kr--schmal .kr-label--hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kr.kr--schmal .kr-row { flex-direction: row; gap: 8px; }
.kr.kr--schmal .kr-input { min-height: 48px; padding: 10px 14px; }
.kr.kr--schmal .kr-btn { min-height: 48px; padding: 10px 20px; }
.kr.kr--schmal .kr-btn--primary { width: auto; flex: 0 0 auto; white-space: nowrap; }
.kr.kr--schmal .kr-btn--google { margin-top: 8px; }
.kr.kr--schmal .kr-legal { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.4; }

.lp.wz .wz-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.lp.wz .wz-trust-item { display: flex; gap: 12px; align-items: flex-start; color: var(--own-fg-1); }
.lp.wz .wz-trust-item .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp.wz .wz-faq-item { border-bottom: 1px solid var(--ow-line); padding: 16px 0; }
.lp.wz .wz-faq-item summary { cursor: pointer; font-weight: 600; color: var(--ow-ink); }
.lp.wz .wz-faq-item p { margin: 10px 0 0; color: var(--own-fg-2); max-width: 760px; }
.lp.wz .wz-compliance { margin: 28px 0 0; font-size: 0.8rem; color: var(--own-fg-3); max-width: 760px; }

/* ── Schatzfund (SchatzfundWidget, schatzfundAnimation.js): how the photo recognition works, as a
   scene played while scrolling — phone, scan, hallmark, result card, collection. Rendered in its
   final, composed state; `.is-animated` (set by the script, never with reduced motion) makes the
   track four screens tall and holds the stage with position: sticky while the timeline scrubs.
   Sizes inside the scene are in container units, so it scales as one picture. ── */
.lp.wz .wz-sz-track { position: relative; }
.lp.wz .wz-sz.is-animated .wz-sz-track { height: calc(var(--wz-sz-vh, 100vh) * 4); }
/* One screen more for the last scene, the registration (not signed in only). */
.lp.wz .wz-sz.is-animated:has(.wz-sz-end) .wz-sz-track { height: calc(var(--wz-sz-vh, 100vh) * 5); }
.lp.wz .wz-sz-stage {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center;
  padding: 24px 0 8px;
}
.lp.wz .wz-sz.is-animated .wz-sz-stage {
  position: sticky; top: var(--wz-sz-top, 0px); height: calc(var(--wz-sz-vh, 100vh) - var(--wz-sz-top, 0px)); padding: 24px 0;
}
/* The promo bar is sticky too: the stage parks under it rather than behind it, one bar shorter
   (schatzfundAnimation.js starts the scrub where the stage begins to stick). */
.promo-bar ~ .lp.wz .wz-sz { --wz-sz-top: var(--ow-promo-bar-height); }

.lp.wz .wz-sz-steps { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.lp.wz .wz-sz-step { display: flex; gap: 16px; align-items: flex-start; transition: opacity var(--own-dur-base) var(--own-ease); }
.lp.wz .wz-sz-step-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 999px; border: 1px solid var(--ow-champagne); color: var(--ow-gold-ink); font-weight: 600; font-size: 0.9rem;
  transition: background var(--own-dur-base) var(--own-ease), color var(--own-dur-base) var(--own-ease);
}
.lp.wz .wz-sz-step-text { display: flex; flex-direction: column; gap: 4px; color: var(--own-fg-2); line-height: 1.5; }
.lp.wz .wz-sz-step-text strong { font-family: var(--ow-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; color: var(--ow-ink); }
.lp.wz .wz-sz.is-animated .wz-sz-step { opacity: 0.35; }
.lp.wz .wz-sz.is-animated .wz-sz-step.is-active { opacity: 1; }
.lp.wz .wz-sz.is-animated .wz-sz-step.is-active .wz-sz-step-n { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }
.lp.wz .wz-sz-progress { display: none; height: 2px; margin-top: 28px; background: var(--ow-line); border-radius: 2px; overflow: hidden; }
.lp.wz .wz-sz.is-animated .wz-sz-progress { display: block; }
.lp.wz .wz-sz-progress-bar { display: block; height: 100%; background: var(--ow-champagne); transform: scaleX(1); transform-origin: left center; }

.lp.wz .wz-sz-scene {
  position: relative; justify-self: center; width: min(100%, 560px); aspect-ratio: 1 / 1;
  container-type: inline-size;
}
.lp.wz .wz-sz.is-animated .wz-sz-scene { width: min(100%, 560px, calc(var(--wz-sz-vh, 100vh) - var(--wz-sz-top, 0px) - 64px)); }
.lp.wz .wz-sz-scene .material-symbols-outlined { font-size: inherit; line-height: 1; }
.lp.wz .wz-sz-example {
  position: absolute; right: 0; bottom: 0; z-index: 5; padding: 0.6cqw 1.8cqw; border-radius: 999px;
  border: 1px solid var(--ow-line); background: var(--ow-paper); color: var(--own-fg-3); font-size: 2cqw; letter-spacing: 0.04em;
}

/* The phone and its screen */
.lp.wz .wz-sz-phone {
  position: absolute; left: 3%; top: 2%; width: 46%; height: 92%; padding: 1.6cqw; border-radius: 7cqw;
  background: var(--ow-ink); box-shadow: 0 4cqw 10cqw rgba(11, 16, 32, 0.22);
}
.lp.wz .wz-sz-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 5.6cqw; background: var(--ow-cream); }
.lp.wz .wz-sz-photo,
.lp.wz .wz-sz-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp.wz .wz-sz-wall { fill: var(--ow-cream); }
.lp.wz .wz-sz-table { fill: var(--ow-cream-deep); }
.lp.wz .wz-sz-shadow { fill: var(--ow-ink); opacity: 0.12; }
.lp.wz .wz-sz-s1 { stop-color: var(--own-fg-3); }
.lp.wz .wz-sz-s2 { stop-color: var(--ow-paper); }
.lp.wz .wz-sz-s3 { stop-color: var(--ow-line); }
.lp.wz .wz-sz-metal { fill: url(#wz-sz-silver); stroke: var(--own-fg-3); stroke-width: 0.8; }
.lp.wz .wz-sz-metal-line { stroke: url(#wz-sz-silver); }
.lp.wz .wz-sz-glint { stroke: var(--ow-paper); opacity: 0.9; }
.lp.wz .wz-sz-mark { fill: none; stroke: var(--ow-gold-ink); stroke-width: 1.2; }
.lp.wz .wz-sz-box { fill: none; stroke: var(--ow-champagne); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 0; }
.lp.wz .wz-sz-dots circle { fill: var(--ow-champagne); stroke: var(--ow-paper); stroke-width: 0.8; }

.lp.wz .wz-sz-corner { position: absolute; width: 12%; height: 8%; border: 0 solid var(--ow-champagne); }
.lp.wz .wz-sz-corner--tl { left: 5%; top: 19%; border-width: 0.7cqw 0 0 0.7cqw; border-top-left-radius: 1.6cqw; }
.lp.wz .wz-sz-corner--tr { right: 5%; top: 19%; border-width: 0.7cqw 0.7cqw 0 0; border-top-right-radius: 1.6cqw; }
.lp.wz .wz-sz-corner--bl { left: 5%; bottom: 25%; border-width: 0 0 0.7cqw 0.7cqw; border-bottom-left-radius: 1.6cqw; }
.lp.wz .wz-sz-corner--br { right: 5%; bottom: 25%; border-width: 0 0.7cqw 0.7cqw 0; border-bottom-right-radius: 1.6cqw; }
.lp.wz .wz-sz-scanline {
  position: absolute; left: 0; right: 0; top: 100%; height: 16%; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(201, 169, 106, 0.45));
  border-bottom: 0.4cqw solid var(--ow-champagne);
}
.lp.wz .wz-sz-flash { position: absolute; inset: 0; background: var(--ow-paper); opacity: 0; pointer-events: none; }
.lp.wz .wz-sz-shutter {
  position: absolute; left: calc(50% - 4.5cqw); bottom: 4%; width: 9cqw; height: 9cqw; border-radius: 999px;
  border: 0.8cqw solid var(--ow-paper); background: rgba(255, 255, 255, 0.35); box-shadow: 0 0.6cqw 2cqw rgba(11, 16, 32, 0.25);
}

/* The hallmark under the loupe, and what OWNY names */
.lp.wz .wz-sz-loupe { position: absolute; left: 54%; top: 24%; width: 40%; display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.lp.wz .wz-sz-loupe svg {
  width: 100%; aspect-ratio: 1; border-radius: 999px; border: 0.8cqw solid var(--ow-champagne);
  box-shadow: 0 1.4cqw 3.6cqw rgba(11, 16, 32, 0.25);
}
.lp.wz .wz-sz-loupe-bg { fill: var(--ow-paper); }
.lp.wz .wz-sz-loupe-mark { fill: var(--ow-gold-ink); }
.lp.wz .wz-sz-loupe-text { font-family: var(--ow-serif); font-weight: 600; font-size: 24px; fill: var(--ow-ink); }
.lp.wz .wz-sz-loupe-label,
.lp.wz .wz-sz-chip {
  padding: 0.7cqw 1.8cqw; border-radius: 999px; background: var(--ow-ink); color: var(--ow-champagne);
  font-size: 2.2cqw; font-weight: 600; white-space: nowrap;
}
.lp.wz .wz-sz-chip { position: absolute; left: 6%; }
.lp.wz .wz-sz-chip--1 { top: 5%; }
.lp.wz .wz-sz-chip--2 { top: 10.5%; }
.lp.wz .wz-sz-chip--3 { top: 5%; left: auto; right: 6%; }

/* The result card */
.lp.wz .wz-sz-result {
  position: absolute; left: 38%; top: 46%; width: 58%; display: flex; flex-direction: column; gap: 0.8cqw;
  padding: 3.4cqw 3.8cqw; border-radius: 3.4cqw; background: var(--ow-paper); border: 1px solid var(--ow-line);
  box-shadow: 0 3cqw 8cqw rgba(11, 16, 32, 0.18);
}
.lp.wz .wz-sz-result-eyebrow {
  display: inline-flex; align-items: center; gap: 1cqw; font-size: 2cqw; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ow-gold-ink);
}
.lp.wz .wz-sz-result-eyebrow .material-symbols-outlined { font-size: 2.8cqw; }
.lp.wz .wz-sz-result-name { font-family: var(--ow-serif); font-weight: 500; font-size: 4.4cqw; line-height: 1.15; color: var(--ow-ink); }
.lp.wz .wz-sz-result-maker { font-size: 2.4cqw; color: var(--own-fg-2); }
.lp.wz .wz-sz-result-label { margin-top: 1.4cqw; font-size: 1.9cqw; color: var(--own-fg-3); }
.lp.wz .wz-sz-result-value { font-family: var(--ow-serif); font-weight: 500; font-size: 6cqw; line-height: 1.05; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.lp.wz .wz-sz-result-badge {
  align-self: flex-start; margin-top: 0.8cqw; padding: 0.6cqw 1.6cqw; border-radius: 999px;
  background: var(--ow-cream); color: var(--ow-gold-ink); font-size: 1.9cqw;
}

/* The collection */
.lp.wz .wz-sz-folder {
  position: absolute; left: 54%; top: 3%; width: 42%; display: flex; flex-direction: column; gap: 0.6cqw;
  padding: 2.6cqw; border-radius: 3.4cqw; background: var(--ow-ink); color: var(--ow-cream);
  box-shadow: 0 3cqw 8cqw rgba(11, 16, 32, 0.2);
}
.lp.wz .wz-sz-folder-title { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 0.6cqw; font-family: var(--ow-serif); font-size: 3cqw; color: var(--ow-champagne); }
.lp.wz .wz-sz-folder-title .material-symbols-outlined { font-size: 3.4cqw; }
.lp.wz .wz-sz-row { display: flex; align-items: center; gap: 1.6cqw; padding: 1cqw; border-radius: 1.6cqw; font-size: 2.2cqw; }
.lp.wz .wz-sz-row + .wz-sz-row { border-top: 1px solid rgba(246, 241, 231, 0.12); }
.lp.wz .wz-sz-row--neu { background: var(--ow-ink-2); }
.lp.wz .wz-sz-row-text { display: flex; flex-direction: column; gap: 0.3cqw; min-width: 0; }
.lp.wz .wz-sz-row-text small { font-size: 1.8cqw; color: var(--ow-champagne); }
.lp.wz .wz-sz-thumb {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 5.4cqw; height: 5.4cqw;
  border-radius: 1.2cqw; background: var(--ow-ink-2); color: var(--ow-champagne); font-size: 3cqw;
}
.lp.wz .wz-sz-thumb--foto,
.lp.wz .wz-sz-ghost { background: linear-gradient(135deg, var(--ow-paper), var(--own-fg-3)); }
.lp.wz .wz-sz-ghost {
  position: absolute; left: 0; top: 0; width: 5.4cqw; height: 5.4cqw; margin: -2.7cqw 0 0 -2.7cqw;
  border-radius: 1.2cqw; opacity: 0; pointer-events: none; z-index: 4; box-shadow: 0 1cqw 3cqw rgba(11, 16, 32, 0.3);
}

/* The registration, the animation's last scene: composed (no script, reduced motion) it follows the
   scene across both columns; animated, it lies over the whole stage on a cream veil through which
   the finished scene shows faintly, and the timeline fades it in (autoAlpha, so it is hidden and
   inert until then). */
.lp.wz .wz-sz-end { grid-column: 1 / -1; }
.lp.wz .wz-sz-end .kr { margin: 16px auto 0; }
.lp.wz .wz-sz.is-animated .wz-sz-end {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  padding: 24px 0; overflow-y: auto;
  background: color-mix(in srgb, var(--ow-cream) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lp.wz .wz-sz.is-animated .wz-sz-end .kr { margin: auto; background: var(--ow-paper); box-shadow: 0 24px 60px rgba(11, 16, 32, 0.14); }

.lp.wz .wz-sz-cta { margin-top: 40px; }

/* The tutorial clip under the animation (German page only): copy on the left like the steps above
   it, the phone recording on the right in a phone-shaped ink frame at its own portrait proportion.
   `aspect-ratio` reserves the box before the clip's metadata arrives. */
.lp.wz .wz-sz-video {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 56px; align-items: center;
  margin-top: 48px;
}
.lp.wz .wz-sz-video-lead { margin: 0; color: var(--own-fg-2); line-height: 1.6; max-width: 460px; }
.lp.wz .wz-sz-video-frame { margin: 0; justify-self: center; width: min(100%, 320px); }
.lp.wz .wz-sz-video-frame video {
  display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: contain;
  border: 8px solid var(--ow-ink); border-radius: 30px; background: var(--ow-ink);
  box-shadow: 0 24px 60px rgba(11, 16, 32, 0.18);
}
.lp.wz .wz-sz-video-frame figcaption {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px;
  font-size: 0.85rem; color: var(--own-fg-2);
}
.lp.wz .wz-sz-video-frame figcaption .material-symbols-outlined { font-size: 1rem; color: var(--ow-gold-ink); }

@media (max-width: 860px) {
  .lp.wz .wz-sz-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp.wz .wz-sz-end { order: 3; }
  .lp.wz .wz-sz-copy { order: 2; }
  /* The registration over the finished scene is a scroll container of its own: without the same
     touch-action the browser would keep a sideways swipe on it, and there would be no way back. */
  .lp.wz .wz-sz.is-animated .wz-sz-stage,
  .lp.wz .wz-sz.is-animated .wz-sz-end { touch-action: pan-y pinch-zoom; }
  /* From the top, not centred: the scene stays exactly where the page drew it before the
     script took over (both stages start with the same 24px), instead of sliding down by half the
     free height the moment the animation starts. Pinned, it stands under the promo bar. */
  .lp.wz .wz-sz.is-animated .wz-sz-stage { align-content: start; }
  /* Only the current step's text, all of them in one place: the block keeps the height of the
     longest, so the scene and the step buttons under it (StoryNav, see SCROLL STORIES) stay put
     from step to step. */
  .lp.wz .wz-sz.is-animated .wz-sz-steps { display: grid; }
  .lp.wz .wz-sz.is-animated .wz-sz-step { grid-area: 1 / 1; }
  .lp.wz .wz-sz.is-animated .wz-sz-step:not(.is-active) { opacity: 0; visibility: hidden; }
  .lp.wz .wz-sz.is-animated .wz-sz-nav { display: flex; order: 1; }
  .lp.wz .wz-sz.is-animated .wz-sz-scene { width: min(100%, 560px, calc(var(--wz-sz-vh, 100vh) - var(--wz-sz-top, 0px) - 290px)); }
  .lp.wz .wz-sz-step-text strong { font-size: 1.25rem; }
  .lp.wz .wz-sz-video { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .lp.wz .wz-sz-video-frame { width: min(100%, 300px); }
}

.lp.wz .wz-field--manual { margin-top: 16px; max-width: 360px; }

/* ── Shortcuts of the material-value calculator (MaterialwertVorlagen): a row of chips per group —
   the Deutsche Mark's silver coins, solid and plated cutlery — and the piece count under them. The
   chosen chip is filled ink, the others sit on cream like the fields. */
.lp.wz .wz-vorlagen { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ow-line); }
.lp.wz .wz-vorlagen-gruppe { display: flex; flex-direction: column; gap: 8px; }
.lp.wz .wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp.wz .wz-chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ow-line); background: var(--ow-cream);
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ow-ink); cursor: pointer;
  transition: border-color var(--own-dur-fast) var(--own-ease);
}
.lp.wz .wz-chip:hover { border-color: var(--ow-champagne); }
.lp.wz .wz-chip.is-active { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }
.lp.wz .wz-field--anzahl { max-width: 360px; }
/* Plated cutlery: the honest line under the result stands out from the formula above it. */
.lp.wz .wz-assumption--plated { padding: 12px 16px; border-radius: 14px; background: var(--ow-cream); color: var(--own-fg-1); }

/* ── A tool's guide (WerkzeugDef.GuideIcons): what to look at before the tool answers —
   the coins in the drawer on "Was ist das wert?", the hallmark on the cutlery page. */
.lp.wz .wz-guide-lede { margin: -8px 0 24px; max-width: 760px; color: var(--own-fg-2); }

/* ── "Objekte speichern" (WerkzeugSpeichern): a signed-in visitor's preview under the result —
   one row per object with its icon, name, kind and figure, a note, and the confirmation. */
.lp.wz .wz-speichern {
  margin-top: 16px; padding: 22px 24px; border-radius: 20px;
  background: var(--ow-paper); border: 1px solid var(--ow-champagne);
}
.lp.wz .wz-speichern-title { font-family: var(--ow-serif); font-weight: 500; font-size: 1.4rem; color: var(--ow-ink); margin: 0 0 12px; }
.lp.wz .wz-vorschau { list-style: none; margin: 0; padding: 0; }
.lp.wz .wz-vorschau-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--ow-line);
}
.lp.wz .wz-vorschau-row:first-child { border-top: 0; }
.lp.wz .wz-vorschau-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--ow-cream); color: var(--ow-champagne-deep); font-size: 1.2rem;
}
.lp.wz .wz-vorschau-text { display: flex; flex-direction: column; min-width: 0; }
.lp.wz .wz-vorschau-text strong { color: var(--ow-ink); overflow: hidden; text-overflow: ellipsis; }
.lp.wz .wz-vorschau-text span { font-size: 0.82rem; color: var(--own-fg-2); }
.lp.wz .wz-vorschau-wert { font-weight: 600; color: var(--ow-ink); white-space: nowrap; }
.lp.wz .wz-speichern-hint { font-size: 0.85rem; color: var(--own-fg-2); margin: 12px 0 0; }
.lp.wz .wz-speichern .wz-errors { margin-top: 12px; }
.lp.wz .wz-speichern-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.lp.wz .wz-speichern-cancel {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ow-gold-ink); cursor: pointer;
}
.lp.wz .wz-speichern-cancel:hover { text-decoration: underline; }
.lp.wz button.lp-btn[disabled] { opacity: 0.6; cursor: progress; }
@media (max-width: 640px) {
  .lp.wz .wz-vorschau-row { grid-template-columns: auto 1fr; }
  .lp.wz .wz-vorschau-wert { grid-column: 2; }
}

/* ── The Sammlungsakte (SammlungsakteWidget): eight tickable building blocks, the sample file and
   the result lists. A ticked card takes the champagne edge, never a filled surface. */
.lp.wz .wz-akte-title { margin-top: 0; }
.lp.wz .wz-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 16px 0 22px; }
.lp.wz .wz-check {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--ow-paper); border: 1px solid var(--ow-line); cursor: pointer;
  transition: border-color var(--own-dur-fast) var(--own-ease);
}
.lp.wz .wz-check:hover { border-color: var(--ow-champagne); }
.lp.wz .wz-check.is-on { border-color: var(--ow-champagne-deep); box-shadow: inset 0 0 0 1px var(--ow-champagne); }
.lp.wz .wz-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ow-ink); flex: none; }
.lp.wz .wz-check-text { display: flex; flex-direction: column; gap: 2px; }
.lp.wz .wz-check-text strong { color: var(--ow-ink); }
.lp.wz .wz-check-text span { font-size: 0.85rem; line-height: 1.4; color: var(--own-fg-2); }
.lp.wz .wz-muster {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 18px;
  margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--ow-cream); border: 1px solid var(--ow-line);
}
.lp.wz .wz-muster strong { color: var(--ow-ink); }
.lp.wz .wz-muster p { margin: 4px 0 0; font-size: 0.9rem; color: var(--own-fg-2); }
.lp.wz .wz-muster-ico { font-size: 2rem; color: var(--ow-champagne-deep); }
.lp.wz .wz-muster-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ow-gold-ink); text-decoration: none; white-space: nowrap; }
.lp.wz .wz-muster-link:hover { text-decoration: underline; }
.lp.wz .wz-akte-list-title { font-size: 1rem; font-weight: 700; color: var(--ow-ink); margin: 22px 0 8px; }
.lp.wz .wz-akte-list { margin: 0; padding-left: 20px; color: var(--own-fg-2); }
.lp.wz .wz-akte-list li { margin: 6px 0; line-height: 1.45; }
.lp.wz .wz-akte-list strong { color: var(--ow-ink); margin-right: 6px; }
@media (max-width: 640px) {
  .lp.wz .wz-muster { grid-template-columns: auto 1fr; }
  .lp.wz .wz-muster-link { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .lp.wz .wz-form { padding: 20px 16px; }
  .lp.wz .wz-sec { padding: 44px 0; }
  .lp.wz .wz-cta { padding: 22px 18px; }
  .lp.wz .lp-shell { padding: 0 16px; }
}

/* ── PAGE HEAD · BACK BUTTON ────────────────────────────────────────────────
   The one back button every OWNAMIC page wears, modelled on "Mit OWNY einräumen"
   (/objects/sort): a 40px bordered square on the left, the eyebrow and the serif
   title stacked beside it and centred against it. The button carries only the
   arrow; its label goes into aria-label. Each namespace keeps styling its own
   eyebrow and title — this block only sets the button and the orientation, which is
   why it sits at the end of the file: it has to win over the namespaced margins. */
.ow-page-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ow-page-head > .ow-page-head-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.ow-page-head > .ow-page-head-text > * {
    margin: 0;
}

/* The lead and whatever else a head carries runs full width under the row. */
.own-canvas .oc-head > .ow-page-head,
.ss-canvas .ss-page-head > .ow-page-head {
    margin-bottom: 14px;
}

.ow-page-head .ow-back {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--own-dur-fast) var(--own-ease),
                box-shadow var(--own-dur-fast) var(--own-ease);
}

.ow-page-head .ow-back:hover:not(:disabled),
.ow-page-head .ow-back:focus-visible {
    border-color: var(--ow-champagne);
    color: var(--ow-ink);
    text-decoration: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-champagne) 22%, transparent);
}

.ow-page-head .ow-back:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ow-page-head .ow-back .material-symbols-outlined,
.ow-page-head .ow-back .rzi,
.ow-page-head .ow-back .rz-icon {
    font-size: 20px;
}

/* Pages a visitor opens on their own, without the sidebar and without the landing navigation
   (PageBackButton): /pricing and /faq keep their section head, the square beside it. The section
   heads space eyebrow and title wider than the shared row's 6px. */
.lp .lp-section-head .ow-page-head > .ow-page-head-text,
.faq-section .faq-head .ow-page-head > .ow-page-head-text {
    gap: 14px;
}

/* The cards with the OWNAMIC wordmark on top (the account cards, a signing link, a finder link): the
   square sits in the card's top-left corner, level with the centred wordmark (its line box is 28px high,
   the square 40px), so the card's head stays as it is. The shared history has no wordmark; its square
   sits in the bar above the page (.lp-history-topbar). */
.lp .lp-auth-card > .lp-card-back { position: absolute; top: 34px; left: 22px; }

@media only screen and (max-width: 520px) {
    .lp .lp-auth-card > .lp-card-back { top: 24px; left: 14px; }
}

/* ===========================================================================
   AI switched off ("Ohne OWNY", docs/ai-off-switch-plan.md §5)
   The golden OWNAMIC mark stands in for the OWNY avatar, "OWNY" labels are struck through, and the
   notice says what still works. Brand tokens only; grey comes from opacity/filter, never a colour.
   =========================================================================== */

/* The avatar's own box keeps its size and roundness; the logo sits inside it on paper. */
img.owny-avatar--off {
    object-fit: contain;
    background: var(--ow-paper);
    padding: 12%;
    box-sizing: border-box;
    animation: none;
}

.owny-name--off {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: currentColor;
}

.ai-off-notice {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    padding: 18px 20px;
    margin: 0 0 18px;
    color: var(--ow-ink);
}

.ai-off-notice--sheet {
    border: 0;
    margin: 0;
    padding: 6px 4px;
}

.ai-off-notice-mark {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 auto;
}

.ai-off-notice-body { min-width: 0; flex: 1; }

.ai-off-notice-badge {
    display: inline-block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ow-gold-ink);
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 2px 9px;
}

.ai-off-notice-title {
    font-family: var(--ow-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 8px 0 6px;
    color: var(--ow-ink);
}

.ai-off-notice-lead {
    font-size: .9rem;
    line-height: 1.55;
    margin: 0 0 12px;
    color: var(--ow-ink-2);
}

.ai-off-notice-works-lbl {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ow-champagne-deep);
    margin-bottom: 6px;
}

.ai-off-notice-works ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
}

.ai-off-notice-works li > a,
.ai-off-notice-works li > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ow-ink);
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    padding: 4px 10px;
    text-decoration: none;
}

.ai-off-notice-works li > a:hover { border-color: var(--ow-champagne); }

.ai-off-notice-works .material-symbols-outlined {
    font-size: 16px;
    color: var(--ow-champagne-deep);
}

.ai-off-notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ai-off-notice-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 8px 16px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
    cursor: pointer;
    text-decoration: none;
}

.ai-off-notice-btn .material-symbols-outlined { font-size: 18px; }

.ai-off-notice-btn--primary {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-paper);
}

.ai-off-notice-btn--primary .material-symbols-outlined { color: var(--ow-champagne); }

.ai-off-notice-dismiss {
    margin-left: auto;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .8rem;
    color: var(--ow-gold-ink);
    text-decoration: underline;
    cursor: pointer;
}

/* One line on a subpage that contains a greyed AI surface. */
.ai-off-notice--compact {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 14px;
    font-size: .84rem;
}

.ai-off-notice-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.ai-off-notice-line { flex: 1 1 220px; min-width: 0; color: var(--ow-ink-2); }

.ai-off-notice-link {
    color: var(--ow-gold-ink);
    text-decoration: underline;
    font-weight: 600;
}

@media (max-width: 560px) {
    .ai-off-notice { flex-direction: column; gap: 10px; padding: 16px; }
    .ai-off-notice--compact { flex-direction: row; }
    .ai-off-notice-dismiss { margin-left: 0; }
}

/* A settings row or block that only means something with AI on: greyed and inert, value kept. */
.ai-off-dim {
    opacity: .45;
    filter: saturate(0);
    pointer-events: none;
    user-select: none;
}

/* A link to an AI destination while AI is off: visibly stepped back, still followable (its page says why). */
.ai-off-dim-soft {
    opacity: .5;
    filter: saturate(0);
}

/* An earlier AI estimate while AI is off: kept and still counted, shown greyed until replaced by the
   owner's own value (docs/ai-off-switch-plan.md §9). */
.ai-value--off {
    opacity: .55;
    filter: saturate(0);
}

/* =========================================================================
   Data security — the hero link <SecurityFaqLink /> and the page /security
   (Pages/DataSecurity.razor). The link sits in every landing hero, which come
   in two grounds: ink (classic start page, occasions/editions, partner
   programme) and cream (edition start page, tools — `a.ow-sec-link--light`). Selectors carry the `a` so they
   outrank `.pp a` (partner pages underline every link). It reads as a
   quiet trust pill, not as a third button: the heroes already carry their
   call to action. The tool heroes put a second pill of the same make in
   front of it — "Zu den Preisen" (PricingHeroLink) — and `.wz-hero-links`
   lays the two out in one row where they fit and one under the other where
   they do not. The occasion and edition heroes carry both as short trust
   links instead (`Short`, `.ow-trust-link`, with the anlass hero's styles).
   ========================================================================= */
a.ow-sec-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 7px 14px 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
a.ow-sec-link .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne); }
a.ow-sec-link .arrow { font-size: 1rem; transition: transform 150ms ease; }
a.ow-sec-link:hover,
a.ow-sec-link:focus-visible {
    color: var(--ow-paper);
    border-color: var(--ow-champagne);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}
a.ow-sec-link:hover .arrow,
a.ow-sec-link:focus-visible .arrow { transform: translateX(3px); }
a.ow-sec-link:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
.lp .wz-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.lp .wz-hero-links a.ow-sec-link { margin-top: 0; }

a.ow-sec-link--light {
    border-color: var(--ow-line);
    background: var(--ow-paper);
    color: var(--ow-ink);
}
a.ow-sec-link--light .material-symbols-outlined { color: var(--ow-champagne-deep); }
a.ow-sec-link--light:hover,
a.ow-sec-link--light:focus-visible {
    color: var(--ow-ink);
    border-color: var(--ow-champagne);
    background: var(--ow-cream);
}

/* Inside the classic hero's trust row the link is one more entry of that row, so it drops the
   extra top margin the stacked placements need. */
.lp .lp-hero-trust a.ow-sec-link { margin-top: 0; }
/* Each hero places the link as its own row; this keeps it from stretching in flex/grid parents. */
.wz-hero a.ow-sec-link,
.ax-hero a.ow-sec-link,
.pp a.ow-sec-link { align-self: flex-start; }

@media (max-width: 560px) {
    a.ow-sec-link { font-size: 0.82rem; }
}

/* The page: the legal shell of /privacy, with the question accordion between the masthead and
   the detail sections, and a small head of its own above the details. */
.own-canvas .oc-security-faq { margin-bottom: 44px; }
.own-canvas .oc-security-details-head {
    margin: 0 0 22px;
}
.own-canvas .oc-security-details-head h2 {
    margin: 10px 0 0;
    font-family: var(--ow-serif);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--ow-ink);
}

/* „So rechnet das Gesamtbild“ (GesamtbildRechnung.razor): the legal shell of /security with the
   Gesamtbild's formulas as code blocks, the object-type table, and one way into the product at the end. */
.own-canvas .oc-gbcalc-formula {
    display: block;
    margin: 6px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.own-canvas .oc-gbcalc-scroll { overflow-x: auto; margin: 8px 0 0; border: 1px solid var(--ow-line); border-radius: 12px; }
.own-canvas .oc-gbcalc-types { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.own-canvas .oc-gbcalc-types th,
.own-canvas .oc-gbcalc-types td { padding: 8px 10px; border-top: 1px solid var(--ow-line); text-align: left; vertical-align: top; }
.own-canvas .oc-gbcalc-types thead th { border-top: 0; background: var(--ow-cream); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ow-gold-ink); }
.own-canvas .oc-gbcalc-types tbody th { font-weight: 600; }
.own-canvas .oc-gbcalc-types small { display: block; margin-top: 2px; font-weight: 400; color: color-mix(in srgb, var(--ow-ink) 60%, transparent); }
.own-canvas .oc-gbcalc-types .gap-note { color: var(--ow-negative); }
.own-canvas .oc-gbcalc-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 32px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
}
.own-canvas .oc-gbcalc-cta p { margin: 0; flex: 1 1 280px; }

/* ── Budgets dialog (SpendingLimitDialog) ───────────────────────────────────
   Two steps instead of one long table: the object-type groups of the Add-Objects picker first,
   then the types of the opened group. A type row opens its editor in place (amount, period,
   hide), so a single budget is set without an edit mode. Group and type rows share one row
   language with the manual Add-Objects picker (.mnl-row): icon tile, name, one-line description. */
.sld {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ow-ink);
    font-family: var(--own-font-sans);
}

.sld-lede {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--own-fg-2);
}

.sld-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 12px;
    transition: border-color .15s ease;
}
.sld-search:focus-within { border-color: var(--ow-champagne); }
.sld-search .material-symbols-outlined { font-size: 20px; color: var(--ow-champagne-deep); }
.sld-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font: inherit;
    font-size: .92rem;
    color: var(--ow-ink);
    outline: none;
}

/* The list scrolls, the search and the footer stay put. */
.sld-body {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    margin: 0 -4px;
    padding: 2px 4px;
}

.sld-list { display: flex; flex-direction: column; gap: 8px; }

.sld-empty {
    margin: 12px 0;
    text-align: center;
    font-size: .88rem;
    color: var(--own-fg-3);
}

.sld-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--ow-paper);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    padding: 10px 12px;
    font: inherit;
    color: var(--ow-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sld-row:hover,
.sld-row:focus-visible { border-color: var(--ow-champagne); outline: none; }

.sld-tile {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--ow-cream);
    color: var(--ow-champagne-deep);
    border: 1px solid var(--ow-line);
}
.sld-tile .material-symbols-outlined { font-size: 22px; }
.sld-tile.sm { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.sld-tile.sm .material-symbols-outlined { font-size: 19px; }

.sld-txt { flex: 1; min-width: 0; }
.sld-nm {
    display: block;
    font-weight: 600;
    font-size: .94rem;
    line-height: 1.25;
}
.sld-ds {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--own-fg-2);
}

.sld-chips { display: flex; gap: 6px; flex-shrink: 0; }
.sld-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--ow-line);
    background: var(--ow-cream);
    font-size: .74rem;
    font-weight: 600;
    color: var(--own-fg-2);
    white-space: nowrap;
}
.sld-chip .material-symbols-outlined { font-size: 14px; }
.sld-chip.set {
    background: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-champagne-light);
}

.sld-chev { font-size: 20px; color: var(--own-fg-3); flex-shrink: 0; transition: transform .15s ease; }

.sld-amount {
    flex-shrink: 0;
    font-size: .85rem;
    color: var(--own-fg-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sld-amount.set { color: var(--ow-gold-ink); font-weight: 600; }

.sld-hidden { font-size: 18px; color: var(--own-fg-3); flex-shrink: 0; }

/* A type row and its editor travel as one block. */
.sld-item.open { border-radius: 14px; box-shadow: 0 8px 22px rgba(11, 16, 32, .06); }
.sld-item.open .sld-row {
    border-color: var(--ow-champagne);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--ow-cream);
}
.sld-item.open .sld-chev-down { transform: rotate(180deg); color: var(--ow-champagne-deep); }

.sld-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 12px;
    background: var(--ow-paper);
    border: 1px solid var(--ow-champagne);
    border-top: 0;
    border-radius: 0 0 14px 14px;
}

.sld-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.sld-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sld-lbl {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--own-fg-3);
}
.sld-field .rz-numeric {
    background: var(--ow-cream);
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    box-shadow: none;
}
.sld-field .rz-numeric.rz-state-focused,
.sld-field .rz-numeric:focus-within { border-color: var(--ow-champagne); }

.sld-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.sld-check { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--own-fg-2); }
.sld-check .rz-label { cursor: pointer; }

.sld-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 4px 6px;
    border-radius: 8px;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ow-negative);
    cursor: pointer;
}
.sld-clear:hover,
.sld-clear:focus-visible { background: var(--ow-cream); outline: none; }
.sld-clear .material-symbols-outlined { font-size: 17px; }

/* Breadcrumb of the second step: back to all groups / the opened group. */
.sld-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .88rem;
}
.sld-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--ow-line);
    background: var(--ow-paper);
    border-radius: 999px;
    padding: 4px 12px 4px 8px;
    font: inherit;
    font-size: .82rem;
    color: var(--ow-ink);
    cursor: pointer;
}
.sld-back:hover,
.sld-back:focus-visible { border-color: var(--ow-champagne); outline: none; }
.sld-back .material-symbols-outlined { font-size: 17px; }
.sld-crumb-sep { color: var(--own-fg-3); }
.sld-crumb-cur { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sld-crumb-cur .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); }

.sld-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ow-line);
}
.sld-count { margin-right: auto; font-size: .82rem; color: var(--own-fg-2); }

@media (max-width: 560px) {
    .sld-ds { display: none; }
    .sld-row { gap: 10px; padding: 9px 10px; }
    .sld-fields { grid-template-columns: 1fr; }
    .sld-count { flex-basis: 100%; }
    .sld-footer { flex-wrap: wrap; }
}

/* =========================================================================
   OWNAMIC — Visitor question (BesucherfrageKarte, docs/besucherfrage-youtube-plan.md)
   A small paper card that asks a YouTube campaign visitor, after about 30 seconds on a public
   page, what is holding them back. It must read as a passing question, not as a pop-up: docked
   to a corner, no backdrop, no focus grab, closable with ×. Targets follow the landing pages'
   rule for readers over 50 (48px tall, 16px+ text — which also keeps iOS from zooming into the
   field). On a phone it spans the width and rides above a page's own bottom bar
   ([data-bottom-bar], the measure the cookie button uses). When the cookie banner is still open
   at the bottom, the card docks at the top instead (.lp-frage--oben), so the two never overlap.
   ========================================================================= */
.lp-frage {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    width: min(380px, calc(100vw - 32px));
    padding: 18px 18px 14px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    border: 1px solid var(--ow-line);
    border-top: 3px solid var(--ow-champagne);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(11, 16, 32, 0.18);
    animation: lp-frage-in 0.35s ease-out;
}
@keyframes lp-frage-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
/* Docked at the top while the cookie banner holds the bottom edge; slides in from above. */
.lp-frage--oben {
    top: 20px;
    bottom: auto;
    animation-name: lp-frage-in-oben;
}
@keyframes lp-frage-in-oben {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-frage { animation: none; }
}
.lp-frage-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--own-fg-2, var(--ow-ink));
    cursor: pointer;
}
.lp-frage-close:hover,
.lp-frage-close:focus-visible { background: var(--ow-cream); outline: none; }
.lp-frage-close .material-symbols-outlined { font-size: 22px; }
.lp-frage-titel {
    margin: 0 40px 12px 0;
    font-family: var(--ow-serif);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
}
.lp-frage--danke .lp-frage-titel { margin: 0; }
.lp-frage-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-frage-chip {
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    background: var(--ow-cream);
    color: var(--ow-ink);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.lp-frage-chip:hover,
.lp-frage-chip:focus-visible { border-color: var(--ow-champagne); background: var(--ow-paper); outline: none; }
.lp-frage-frei {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.lp-frage-input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font: inherit;
    font-size: 1rem;
}
.lp-frage-input:focus { border-color: var(--ow-champagne); outline: none; }
.lp-frage-senden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex: 0 0 48px;
    border: 0;
    border-radius: 10px;
    background: var(--ow-ink);
    color: var(--ow-paper);
    cursor: pointer;
}
.lp-frage-senden:hover,
.lp-frage-senden:focus-visible { background: var(--ow-ink-2); outline: none; }
.lp-frage-senden .material-symbols-outlined { font-size: 22px; }
.lp-frage-hinweis {
    margin: 8px 0 0;
    font-size: .82rem;
    color: var(--own-fg-2, var(--ow-ink));
}
@media (max-width: 768px) {
    .lp-frage {
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
    }
    body:has([data-bottom-bar]) .lp-frage {
        bottom: calc(var(--own-bottom-bar-height, calc(110px + env(safe-area-inset-bottom, 0px))) + 12px);
    }
    .lp-frage.lp-frage--oben,
    body:has([data-bottom-bar]) .lp-frage.lp-frage--oben {
        top: calc(12px + env(safe-area-inset-top, 0px));
        bottom: auto;
        max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px));
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Foto-Erfassung — the AddObjects workflow (/objects/add), namespace .erf
   "Fotografieren. Ergänzen. Erkennen." The camera opens first; photos and what the owner knows
   collect in a tray until "Erkennen" is tapped; findings are checked and sorted in one review
   sheet; everything else (picker, editor, consent, photo, methods, success) is a bottom sheet.
   Phones get the full-bleed camera stage (body.erf-open lifts it out of the app shell); from
   769px the stage and the review sheet sit side by side and the bottom sheets become dialogs.
   Colours come from the brand tokens; the few warm greys of the camera surfaces are named once
   here and nowhere else.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.erf {
    --erf-ink: var(--ow-ink);
    --erf-ink2: var(--ow-ink-2);
    --erf-cream: var(--ow-cream);
    --erf-cream2: var(--ow-cream-deep);
    --erf-paper: var(--ow-paper);
    --erf-line: var(--ow-line);
    --erf-line2: #d9d2c4;
    --erf-gold: var(--ow-champagne);
    --erf-gold2: var(--ow-champagne-deep);
    --erf-gold-ink: var(--ow-gold-ink);
    --erf-blush: var(--ow-blush);
    --erf-muted: #6b6455;
    --erf-faint: #9c9484;
    --erf-red: var(--ow-negative);
    --erf-amber: #8f6410;
    --erf-amberbg: #fbf0d9;
    --erf-green: var(--ow-ev-documented);
    --erf-greenbg: #e5f2ea;
    --erf-cam: #05070c;
    --erf-ease: cubic-bezier(.4, 0, .2, 1);
    --erf-safe-top: env(safe-area-inset-top, 0px);
    --erf-safe-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--own-font-sans);
    color: var(--erf-ink);
    -webkit-tap-highlight-color: transparent;
}
.erf *, .erf *::before, .erf *::after { box-sizing: border-box; }
.erf button { font-family: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
.erf button:disabled { cursor: default; }
.erf :focus-visible { outline: 2px solid var(--erf-gold); outline-offset: 2px; }
.erf .material-symbols-outlined { font-size: 22px; line-height: 1; vertical-align: middle; }
.erf .material-symbols-outlined.is-filled { font-variation-settings: "FILL" 1, "wght" 400; }
.erf img { -webkit-user-drag: none; }

@keyframes erf-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes erf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes erf-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes erf-spin { to { transform: rotate(360deg); } }
@keyframes erf-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,169,106,.7); } 100% { box-shadow: 0 0 0 10px rgba(201,169,106,0); } }
@keyframes erf-shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes erf-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes erf-blink { 50% { opacity: .2; } }
@keyframes erf-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes erf-nudge { 0%, 100% { transform: none; } 30%, 62% { transform: translateX(-64px); } }
@keyframes erf-frflash { 0%, 40% { background: var(--erf-amberbg); } 100% { background: transparent; } }
@keyframes erf-slide-l { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes erf-slide-r { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes erf-scan { 0% { top: 0; } 100% { top: 100%; } }

/* ── Type ─────────────────────────────────────────────────────────────────────────────────────── */
.erf-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--erf-gold2); }
.erf-title { font-family: var(--ow-serif); font-weight: 600; font-size: 30px; line-height: 1.04; margin: 3px 0 4px; letter-spacing: -.01em; color: var(--erf-ink); }
.erf-title em { font-style: italic; font-weight: 500; color: var(--erf-gold2); }
.erf-sub { font-size: 13.5px; color: var(--erf-muted); line-height: 1.4; }
.erf-sub b { color: var(--erf-ink); }
.erf-muted { color: var(--erf-muted); }
.erf-faint { color: var(--erf-faint); }

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────────── */
.erf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 22px; border-radius: 999px;
    font-weight: 600; font-size: 16px; line-height: 1.15; border: 1px solid transparent; white-space: nowrap;
    color: var(--erf-ink); background: var(--erf-paper);
    transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
    text-decoration: none;
}
.erf-btn .material-symbols-outlined { font-size: 20px; }
.erf-btn--p { background: var(--erf-ink); color: #fff; box-shadow: 0 10px 24px rgba(11,16,32,.22); }
.erf-btn--p .material-symbols-outlined { color: var(--erf-gold); }
.erf-btn--p:hover:not(:disabled) { background: var(--erf-ink2); }
.erf-btn--g { background: var(--erf-paper); border-color: var(--erf-line); }
.erf-btn--g:hover:not(:disabled) { border-color: var(--erf-gold); }
.erf-btn--gold { background: var(--erf-gold); color: var(--erf-ink); }
.erf-btn--danger { background: var(--erf-paper); border-color: var(--erf-line); color: var(--erf-red); }
.erf-btn--s { min-height: 40px; padding: 0 16px; font-size: 14px; }
.erf-btn--s .material-symbols-outlined { font-size: 18px; }
.erf-btn--b { width: 100%; }
.erf-btn--wrap { white-space: normal; text-align: center; }
.erf-btn .sm { font-weight: 500; font-size: 13px; color: #c9cbe0; }
.erf-btn:disabled { opacity: .5; box-shadow: none; }
.erf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: erf-spin .8s linear infinite; flex: none; display: inline-block; }
.erf-spin--dk { border-color: rgba(11,16,32,.18); border-top-color: var(--erf-ink); }
.erf-lnk { border: 0; background: transparent; color: var(--erf-red); font-weight: 600; font-size: 14px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px auto 0; padding: 0 12px; }
.erf-lnk .material-symbols-outlined { font-size: 18px; }
.erf-lnk--gold { color: var(--erf-gold2); }
.erf-split-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: -4px 0 6px; background: transparent; border: 0; color: var(--erf-gold2); font-weight: 600; font-size: 14px; }
.erf-split-link .material-symbols-outlined { font-size: 18px; }
.erf-info-btn { border: 0; background: transparent; padding: 0; color: var(--erf-faint); display: inline-grid; place-items: center; width: 28px; height: 28px; }
.erf-info-btn .material-symbols-outlined { font-size: 17px; }

/* ── Chips, segmented, badges ─────────────────────────────────────────────────────────────────── */
.erf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.erf-chips--sm { gap: 6px; }
.erf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--erf-paper); border: 1px solid var(--erf-line); font-size: 14px; font-weight: 600; color: var(--erf-ink); white-space: nowrap; }
.erf-chip .material-symbols-outlined { font-size: 17px; color: var(--erf-gold2); }
.erf-chip.is-on { background: var(--erf-ink); border-color: var(--erf-ink); color: #fff; }
.erf-chip.is-on .material-symbols-outlined { color: var(--erf-gold); }
.erf-chip--dash { border-style: dashed; background: transparent; color: var(--erf-muted); }
.erf-chip--rec { background: var(--erf-gold); border-color: var(--erf-gold); color: var(--erf-ink); }
.erf-chip--rec .material-symbols-outlined { color: var(--erf-ink); }
.erf-chip--sm, .erf-chips--sm .erf-chip { min-height: 36px; padding: 0 12px; font-size: 13px; }
.erf-chip .x { margin-right: -6px; display: inline-grid; place-items: center; }
.erf-seg { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 0; }
.erf-seg button { min-height: 36px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--erf-line); background: var(--erf-paper); font-size: 13px; font-weight: 600; color: var(--erf-muted); }
.erf-seg button.is-on { background: var(--erf-ink); border-color: var(--erf-ink); color: #fff; }
.erf-conf { display: inline-flex; align-items: center; gap: 3px; font-family: var(--own-font-sans); font-size: 11px; font-weight: 700; color: var(--erf-green); background: var(--erf-greenbg); border-radius: 999px; padding: 1px 7px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.erf-conf .material-symbols-outlined { font-size: 12px; }
.erf-conf--warn { color: var(--erf-amber); background: var(--erf-amberbg); }
.erf-unsure { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--erf-amber); background: var(--erf-amberbg); border-radius: 999px; padding: 1px 8px 1px 6px; margin-top: 4px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.erf-unsure .material-symbols-outlined { font-size: 13px; }
.erf-inf { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--erf-gold-ink); background: #fbf6ea; border-radius: 999px; padding: 1px 8px 1px 6px; margin-top: 4px; margin-right: 4px; white-space: nowrap; }
.erf-inf .material-symbols-outlined { font-size: 13px; }
.erf-inf--red { color: var(--erf-red); background: #fbecea; }
.erf-nb { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--erf-gold-ink); background: rgba(201,169,106,.16); border: 1px solid rgba(201,169,106,.45); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.erf-ai-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--erf-gold2); white-space: nowrap; }
.erf-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--erf-cream); color: var(--erf-gold2); border: 1px solid var(--erf-line); flex: none; }
.erf-tile--ink { background: var(--erf-ink); color: var(--erf-gold); border-color: var(--erf-ink); }
.erf-tile .material-symbols-outlined { font-size: 21px; }

/* ── Section label, fields card ───────────────────────────────────────────────────────────────── */
.erf-sec-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--erf-gold2); display: flex; align-items: center; gap: 10px; margin: 20px 2px 10px; }
.erf-sec-lbl::after { content: ""; flex: 1; height: 1px; background: var(--erf-line2); }
.erf-sec-lbl span { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--erf-faint); font-size: 12px; }
.erf-sec-lbl .right { letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--erf-muted); font-size: 12px; order: 3; }
.erf-fields { background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 18px; overflow: hidden; }
.erf-fields + .erf-fields { margin-top: 12px; }
/* Review expander: facts, purchase date and tags before saving — folded by default */
.erf-xp { margin-top: 14px; background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 18px; }
.erf-xp-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 14px; background: transparent; border: 0; color: var(--erf-ink); font-weight: 600; font-size: 15px; text-align: left; }
.erf-xp-head > .material-symbols-outlined:first-child { font-size: 20px; color: var(--erf-gold2); }
.erf-xp-t { flex: 1; min-width: 0; }
.erf-xp-chev { font-size: 22px; color: var(--erf-muted); transition: transform .2s var(--erf-ease); }
.erf-xp.is-open .erf-xp-chev { transform: rotate(180deg); }
.erf-xp-body { padding: 0 12px 12px; border-top: 1px solid var(--erf-line); }
.erf-fr { display: flex; align-items: center; gap: 12px; padding: 6px 14px; min-height: 56px; border-top: 1px solid var(--erf-line); }
.erf-fr:first-child { border-top: 0; }
.erf-fr--top { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.erf-fr--top > .erf-fr-k { padding-top: 10px; }
.erf-fr--stack { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 12px; padding-bottom: 12px; }
.erf-fr--flash { animation: erf-frflash 1.4s var(--erf-ease); }
.erf-fr-k { width: 96px; flex: none; font-size: 13px; color: var(--erf-muted); line-height: 1.3; }
.erf-fr--stack > .erf-fr-k { width: auto; }
.erf-fr-v { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.erf-fr-v > .erf-ai-tag { margin-left: auto; flex: none; }
.erf-fr input:not([type=checkbox]):not([type=radio]):not([type=range]),
.erf-fr select,
.erf-fr textarea { width: 100%; min-width: 0; border: 0; outline: 0; font: inherit; font-weight: 600; font-size: 15px; color: var(--erf-ink); background: transparent; padding: 6px 0; }
.erf-fr textarea { font-weight: 500; padding: 8px 0; resize: none; line-height: 1.4; }
.erf-fr input::placeholder, .erf-fr textarea::placeholder { color: var(--erf-faint); font-weight: 500; }
.erf-fr .erf-unit { font-weight: 600; color: var(--erf-muted); }
.erf-fr .rz-dropdown, .erf-fr .rz-numeric, .erf-fr .rz-textbox, .erf-fr .rz-datepicker { flex: 1; min-width: 0; }
.erf-fr-hint { font-size: 12.5px; color: var(--erf-muted); line-height: 1.4; font-weight: 500; }
.erf-step { display: flex; align-items: center; gap: 6px; }
.erf-step button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--erf-line); background: var(--erf-cream); display: grid; place-items: center; color: var(--erf-ink); padding: 0; }
.erf-step b { min-width: 22px; text-align: center; }
.erf-dest-btn { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; font-size: 15px; color: var(--erf-ink); text-align: left; min-height: 44px; width: 100%; min-width: 0; }
.erf-dest-btn > .material-symbols-outlined:first-child { color: var(--erf-gold2); font-size: 19px; }
.erf-dest-btn .chev { margin-left: auto; color: var(--erf-faint); }
.erf-dest-btn .erf-ai-tag { margin-left: auto; }
.erf-dest-btn .erf-ai-tag + .chev { margin-left: 4px; }
.erf-dv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.erf-auto { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--erf-muted); line-height: 1.45; margin-top: 14px; padding: 0 2px; }
.erf-auto > .material-symbols-outlined { font-size: 16px; color: var(--erf-gold2); flex: none; margin-top: 1px; }
.erf-info-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ── OWNY suggestion card ─────────────────────────────────────────────────────────────────────── */
.erf-sug { display: flex; gap: 11px; align-items: flex-start; background: linear-gradient(180deg, #fffaf0, var(--erf-paper)); border: 1px solid var(--erf-gold); border-radius: 18px; padding: 12px; margin: 4px 0 12px; animation: erf-rise .3s both; }
.erf-sug--stale { border-style: dashed; background: #fffaf0; }
.erf-sug--warn { border-color: var(--erf-amber); background: linear-gradient(180deg, var(--erf-amberbg), var(--erf-paper)); }
.erf-sug--danger { border-color: var(--erf-red); background: linear-gradient(180deg, #fbecea, var(--erf-paper)); }
.erf-sug--plain { border-color: var(--erf-line); background: var(--erf-paper); }
.erf-sug-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; }
.erf-sug-av img { width: 32px; height: 32px; border-radius: 50%; display: block; }
.erf-sug-av .material-symbols-outlined { color: var(--erf-gold2); }
.erf-sug-tx { flex: 1; min-width: 0; font-size: 14px; line-height: 1.42; color: var(--erf-muted); }
.erf-sug-tx b, .erf-sug-tx strong { color: var(--erf-ink); font-weight: 600; }
.erf-sug-tx ul { margin: 6px 0 0; padding-left: 18px; }
.erf-sug-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.erf-sug-x { border: 0; background: transparent; color: var(--erf-faint); width: 36px; height: 36px; display: grid; place-items: center; margin: -8px -8px 0 0; flex: none; padding: 0; }
.erf-sug .mini { display: block; font-size: 12px; color: var(--erf-faint); margin-top: 8px; }

/* ── Destination groups and object rows ───────────────────────────────────────────────────────── */
.erf-grp { background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 20px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; animation: erf-rise .3s both; }
.erf-grp.is-over { border-color: var(--erf-gold); box-shadow: 0 0 0 2px var(--erf-gold) inset; }
.erf-grp-h { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--erf-line); text-align: left; color: var(--erf-ink); min-height: 70px; }
.erf-grp-h .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.erf-grp-h .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--erf-gold2); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.erf-grp-h .nm { font-family: var(--ow-serif); font-size: 21px; font-weight: 600; line-height: 1.12; margin-top: 1px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.erf-grp-h .why { font-size: 12.5px; color: var(--erf-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.erf-grp-h .chev { color: var(--erf-faint); flex: none; }
.erf-grp-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--erf-line); background: transparent; color: var(--erf-gold2); font-weight: 600; font-size: 14px; }
.erf-obj { position: relative; border-top: 1px solid var(--erf-line); overflow: hidden; touch-action: pan-y; }
.erf-grp-h + .erf-obj { border-top: 0; }
.erf-obj.is-new { animation: erf-rise .32s both; }
.erf-obj.is-gone { max-height: 0 !important; opacity: 0; transition: max-height .25s var(--erf-ease), opacity .2s; }
.erf-obj-bg { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 22px; font-weight: 700; font-size: 13.5px; color: #fff; gap: 6px; }
.erf-obj-bg.mv { background: var(--erf-gold2); justify-content: flex-start; }
.erf-obj-bg.rm { background: var(--erf-red); justify-content: flex-end; }
.erf-obj-bg .material-symbols-outlined { font-size: 20px; transition: transform .15s; }
.erf-obj-bg.go .material-symbols-outlined { transform: scale(1.25); }
.erf-obj-fg { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; background: var(--erf-paper); min-height: 74px; transition: transform .28s var(--erf-ease), opacity .2s; width: 100%; border: 0; text-align: left; color: var(--erf-ink); font: inherit; }
.erf-obj-fg.is-dragging { transition: none; }
.erf-obj.is-lifted .erf-obj-fg { opacity: .3; }
.erf-obj.is-lifted .erf-obj-bg { display: none; }
.erf-obj.is-nudge .erf-obj-fg { animation: erf-nudge 1.5s var(--erf-ease) .5s; }
.erf-obj.is-selected .erf-obj-fg { background: #fffaf0; }
.erf-obj.is-dim .erf-obj-fg { opacity: .55; }
.erf-thw { position: relative; flex: none; display: block; line-height: 0; }
.erf-obj-th { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; border: 1px solid var(--erf-line); pointer-events: none; background: var(--erf-cream); display: grid; place-items: center; color: var(--erf-gold2); }
.erf-obj-tx { flex: 1; min-width: 0; }
.erf-obj-nm { font-weight: 600; font-size: 15.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erf-obj-ds { font-size: 12.5px; color: var(--erf-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erf-obj-val { font-weight: 700; font-size: 14.5px; white-space: nowrap; text-align: right; flex: none; }
.erf-obj-val small { display: block; font-weight: 500; font-size: 11px; color: var(--erf-faint); }
.erf-qty { font-size: 11px; font-weight: 700; background: var(--erf-cream); border-radius: 6px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px; }
.erf-shots-n { position: absolute; right: -6px; bottom: -6px; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px 0 4px; border-radius: 10px; background: var(--erf-ink); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; border: 2px solid var(--erf-paper); }
.erf-shots-n .material-symbols-outlined { font-size: 12px; color: var(--erf-gold); }
.erf-obj--sk .erf-obj-th { background: linear-gradient(90deg, var(--erf-cream) 0%, #fdfbf6 50%, var(--erf-cream) 100%); background-size: 200% 100%; animation: erf-shim 1.1s linear infinite; }
.erf-obj--sk .bar { height: 11px; border-radius: 6px; background: var(--erf-cream); margin: 4px 0; }

/* ── Picker rows, search ──────────────────────────────────────────────────────────────────────── */
.erf-search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 14px; background: var(--erf-paper); border: 1px solid var(--erf-line); margin: 8px 0 2px; }
.erf-search:focus-within { border-color: var(--erf-gold); box-shadow: 0 0 0 3px rgba(201,169,106,.18); }
.erf-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; background: transparent; color: var(--erf-ink); }
.erf-search .material-symbols-outlined { color: var(--erf-faint); }
.erf-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; min-height: 62px; background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 16px; margin-bottom: 8px; color: var(--erf-ink); transition: border-color .15s; font: inherit; }
.erf-pick:hover:not(:disabled) { border-color: var(--erf-gold); }
.erf-pick.is-on { border-color: var(--erf-gold); box-shadow: 0 0 0 1px var(--erf-gold) inset; background: linear-gradient(180deg, #fffaf0, var(--erf-paper)); }
.erf-pick:disabled, .erf-pick.is-locked { opacity: .55; }
.erf-pick-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.erf-pick-nm { font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.erf-pick-ds { font-size: 12.5px; color: var(--erf-muted); margin-top: 2px; line-height: 1.35; }
.erf-pick-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--erf-faint); margin-top: 4px; }
.erf-pick-tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--erf-line2); display: grid; place-items: center; color: transparent; flex: none; }
.erf-pick.is-on .erf-pick-tick { background: var(--erf-gold); border-color: var(--erf-gold); color: #fff; }
.erf-pick-tick .material-symbols-outlined { font-size: 16px; }
.erf-pick > .material-symbols-outlined { color: var(--erf-faint); }
.erf-pick--dash { border-style: dashed; background: transparent; }
.erf-pick-side { flex: none; display: flex; align-items: center; gap: 4px; }
.erf-new-in { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 600; font-size: 15.5px; color: var(--erf-ink); padding: 0; }

/* ── Bottom sheets (dialogs from 769px) ───────────────────────────────────────────────────────── */
.erf-scrim { position: fixed; inset: 0; background: rgba(11,16,32,.45); z-index: 994; animation: erf-fade .2s both; }
.erf-bs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 995; background: var(--erf-cream); border-radius: 26px 26px 0 0; max-height: 92%; max-height: 92dvh; display: flex; flex-direction: column; animation: erf-up .3s var(--erf-ease) backwards; transition: transform .3s var(--erf-ease); box-shadow: 0 -10px 40px rgba(0,0,0,.25); color: var(--erf-ink); }
.erf-bs.is-drag { transition: none; }
.erf-bs--tall { height: 92%; height: 92dvh; }
.erf-bs-head { padding: 8px 18px 4px; touch-action: none; flex: none; position: relative; }
.erf-bs-close { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--erf-faint); display: grid; place-items: center; padding: 0; }
.erf-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--erf-line2); margin: 0 auto 9px; }
.erf-bs-title { font-family: var(--ow-serif); font-size: 26px; font-weight: 600; line-height: 1.1; margin: 4px 0 3px; letter-spacing: -.01em; padding-right: 36px; }
.erf-bs-title em { font-style: italic; font-weight: 500; color: var(--erf-gold2); }
.erf-bs-sub { font-size: 13.5px; color: var(--erf-muted); line-height: 1.4; }
.erf-bs-body { overflow-y: auto; padding: 8px 16px 30px; overscroll-behavior: contain; flex: 1; min-height: 0; }
.erf-bs-foot { flex: none; padding: 12px 16px calc(16px + var(--erf-safe-bottom)); border-top: 1px solid var(--erf-line); background: var(--erf-cream); display: flex; gap: 8px; flex-wrap: wrap; }
.erf-bs-foot > .erf-btn { flex: 1; }
.erf-bs--editor .erf-bs-body { padding-top: 4px; }

/* ── Stage: the camera (phones: full-bleed above the app shell) ───────────────────────────────── */
body.erf-open { overflow: hidden; }
body.erf-open .rz-body { transform: none; overflow: hidden; }
body.erf-open .mobile-bottom-nav,
body.erf-open .ai-assistant-container,
body.erf-open .own-desktop-fab,
body.erf-open .rz-notification { z-index: 1; }
body.erf-open .mobile-bottom-nav,
body.erf-open .ai-assistant-container,
body.erf-open .own-cookie-fab { display: none !important; }
.erf-page { position: relative; }
.erf-stage { position: fixed; inset: 0; z-index: 990; background: var(--erf-cam); color: #fff; overflow: hidden; display: flex; flex-direction: column; animation: erf-fade .25s both; }
.erf-cam-top { flex: none; height: calc(56px + var(--erf-safe-top)); padding: var(--erf-safe-top) 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 6; }
.erf-cam-top-side { display: flex; gap: 8px; align-items: center; min-width: 44px; }
.erf-c-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 0; color: #fff; padding: 0; flex: none; }
.erf-c-ic.is-on { color: var(--erf-gold); }
.erf-c-ic:disabled { opacity: .35; }
.erf-live { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; max-width: 62vw; min-width: 0; }
.erf-live > i { width: 8px; height: 8px; border-radius: 50%; background: var(--erf-gold); animation: erf-pulse 1.6s ease-out infinite; flex: none; }
.erf-live .lt { overflow: hidden; text-overflow: ellipsis; }
.erf-live.is-rec > i { background: var(--erf-red); animation: erf-blink 1s steps(1) infinite; }
.erf-live.is-det { color: var(--erf-gold); }
.erf-live .material-symbols-outlined { font-size: 17px; }
.erf-vf { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; background: #000; }
.erf-vf video, .erf-vf .erf-vf-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.erf-vf .erf-vf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.erf-vf-hint { position: absolute; left: 16px; right: 16px; bottom: 16px; text-align: center; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); pointer-events: none; transition: opacity .3s; }
.erf-vf-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: #fff; background: rgba(5,7,12,.72); z-index: 3; }
.erf-vf-state .material-symbols-outlined.big { font-size: 46px; color: var(--erf-gold); }
.erf-vf-state p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.86); max-width: 22rem; }
.erf-vf-state small { color: rgba(255,255,255,.62); font-size: 12.5px; }
.erf-vf-state .erf-btn--g { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.erf-vf-state .erf-btn--g .material-symbols-outlined { color: var(--erf-gold); }
.erf-vf-progress { width: min(240px, 70%); height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.erf-vf-progress i { display: block; height: 100%; background: var(--erf-gold); transition: width .3s var(--erf-ease); }
.erf-vf-progress.is-indet i { width: 40%; animation: erf-indet 1.2s ease-in-out infinite; }
@keyframes erf-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.erf-drop-zone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #fff; background: radial-gradient(120% 90% at 50% 30%, #141a33 0%, var(--erf-cam) 70%); }
.erf-drop-zone.is-over { box-shadow: inset 0 0 0 3px var(--erf-gold); }
.erf-drop-zone .ring { width: 84px; height: 84px; border-radius: 50%; border: 1.5px dashed rgba(201,169,106,.7); display: grid; place-items: center; color: var(--erf-gold); }
.erf-drop-zone .ring .material-symbols-outlined { font-size: 36px; }
.erf-drop-zone h3 { margin: 0; font-family: var(--ow-serif); font-size: 26px; font-weight: 600; color: #fff; line-height: 1.1; }
.erf-drop-zone h3 em { font-style: italic; font-weight: 500; color: var(--erf-gold); }
.erf-drop-zone p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5; max-width: 26rem; }
.erf-drop-zone .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.erf-drop-zone .erf-btn--g { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.erf-drop-zone .erf-btn--g .material-symbols-outlined { color: var(--erf-gold); }
.erf-drop-zone .erf-btn--gold .material-symbols-outlined { color: var(--erf-ink); }
.erf-rec-frame { position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--erf-gold); pointer-events: none; z-index: 2; animation: erf-fade .2s both; }
.erf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; animation: erf-flash .34s ease-out; }
.erf-scanline { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--erf-gold), transparent); box-shadow: 0 0 18px var(--erf-gold); animation: erf-scan 2.2s ease-in-out infinite alternate; z-index: 2; }
.erf-cam-bot { flex: none; position: relative; padding-bottom: calc(52px + var(--erf-safe-bottom)); }
.erf-tray { height: 62px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.erf-tray::-webkit-scrollbar { display: none; }
.erf-tray-th { position: relative; width: 42px; height: 42px; flex: none; animation: erf-rise .3s both; border: 0; padding: 0; background: transparent; }
.erf-tray-th img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; border: 2px solid rgba(255,255,255,.85); display: block; }
.erf-tray-th .n { position: absolute; right: -7px; top: -7px; min-width: 21px; height: 21px; border-radius: 11px; background: var(--erf-gold); color: var(--erf-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--erf-cam); }
.erf-tray-th .sp { position: absolute; inset: 0; border-radius: 11px; background: rgba(5,7,12,.55); display: grid; place-items: center; }
.erf-tray-th .sp i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: erf-spin .8s linear infinite; }
.erf-tray-th .k { position: absolute; left: -7px; bottom: -7px; width: 21px; height: 21px; border-radius: 50%; background: var(--erf-ink); border: 2px solid var(--erf-cam); display: grid; place-items: center; color: var(--erf-gold); }
.erf-tray-th .k .material-symbols-outlined { font-size: 13px; }
.erf-tray-th .ib { position: absolute; right: -7px; top: -7px; width: 21px; height: 21px; border-radius: 50%; background: var(--erf-paper); color: var(--erf-gold2); border: 2px solid var(--erf-cam); display: grid; place-items: center; }
.erf-tray-th .ib .material-symbols-outlined { font-size: 13px; }
.erf-tray-th.is-warn img { border-color: var(--erf-gold); border-style: dashed; }
.erf-tray-th.is-serie img { box-shadow: 4px -4px 0 -1px rgba(255,255,255,.45), 8px -8px 0 -2px rgba(255,255,255,.22); }
.erf-tray-th.is-rec img { border-color: var(--erf-gold); }
.erf-tray-th--file { width: auto; min-width: 42px; height: 42px; border-radius: 11px; border: 2px solid rgba(255,255,255,.85); color: #fff; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12.5px; font-weight: 600; max-width: 220px; }
.erf-tray-th--file .material-symbols-outlined { color: var(--erf-gold); font-size: 20px; }
.erf-tray-th--file span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erf-tray-hint { font-size: 12.5px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 4px; }
.erf-tray-hint .material-symbols-outlined { font-size: 17px; }
.erf-ctrls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 0 22px; }
.erf-side { height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0 0; font-size: 11.5px; font-weight: 600; line-height: 16px; color: rgba(255,255,255,.75); background: transparent; border: 0; touch-action: none; justify-self: center; min-width: 76px; text-align: center; }
.erf-side:disabled { opacity: .35; }
.erf-side-ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.13); color: #fff; transition: transform .2s var(--erf-ease), background .2s; }
.erf-side-gal { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; border: 2px solid rgba(255,255,255,.8); display: grid; place-items: center; background: rgba(255,255,255,.13); }
.erf-side-gal .material-symbols-outlined { color: #fff; }
.erf-side.is-rec .erf-side-ring { background: var(--erf-gold); color: var(--erf-ink); transform: scale(1.18); }
.erf-sh-col { height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.erf-sh-lbl { font-size: 11.5px; font-weight: 600; line-height: 16px; color: rgba(255,255,255,.75); white-space: nowrap; }
.erf-shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: transparent; display: grid; place-items: center; padding: 0; touch-action: none; transition: border-color .2s; }
.erf-shutter > i { display: block; width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: all .2s var(--erf-ease); }
.erf-shutter:active:not(:disabled) > i { transform: scale(.86); }
.erf-shutter.is-rec { border-color: var(--erf-gold); }
.erf-shutter.is-rec > i { width: 28px; height: 28px; border-radius: 8px; background: var(--erf-red); transform: none; }
.erf-shutter.is-det { border-color: var(--erf-gold); }
.erf-shutter.is-det > i { background: var(--erf-gold); }
.erf-shutter:disabled { opacity: .4; }
.erf-cam-alt { position: absolute; left: 50%; bottom: calc(6px + var(--erf-safe-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 600; white-space: nowrap; }
.erf-cam-alt:hover { color: #fff; }
.erf-cam-alt .material-symbols-outlined { font-size: 18px; }
/* Foto-Erfassung · photos or the room scan: the camera's mode labels above the shutter row. They
   step back (keeping their room, so nothing jumps) while a series or a clip is being recorded. */
.erf-modes { display: flex; justify-content: center; align-items: center; gap: 4px; height: 30px; margin: -6px 0 6px; }
.erf-modes.is-hidden { visibility: hidden; }
.erf-modes button { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.erf-modes button.is-on { color: var(--erf-gold); background: rgba(255,255,255,.1); }
.erf-modes button:disabled { opacity: .45; }
.erf-modes button .material-symbols-outlined { font-size: 14px; }
/* The room scan's record button: a red core that turns into a square while recording, and a gold
   ring that fills up over the longest clip (its duration is set on the circle). */
.erf-shutter--video { position: relative; }
.erf-shutter--video > i { width: 58px; height: 58px; background: var(--erf-red); }
.erf-shutter--video.is-rec { border-color: rgba(255,255,255,.35); }
.erf-shutter--video.is-rec > i { width: 28px; height: 28px; border-radius: 8px; background: var(--erf-red); }
.erf-rec-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.erf-rec-ring circle { fill: none; stroke: var(--erf-gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 232.5; stroke-dashoffset: 232.5; animation: erf-rec-ring 30s linear forwards; }
@keyframes erf-rec-ring { to { stroke-dashoffset: 0; } }
/* While a clip is being recorded the viewfinder is framed in the signal colour, like the REC dot. */
.erf-rec-frame--video { box-shadow: inset 0 0 0 3px var(--erf-red); }
/* The mode row adds 30px to the bottom area: what floats above it (the peek card, the dictation
   bubble) moves up by as much, so the tray stays reachable. */
.erf-stage--modes .erf-peek { bottom: calc(252px + var(--erf-safe-bottom)); }
.erf-stage--modes .erf-voice { bottom: calc(276px + var(--erf-safe-bottom)); }
/* The tray's two-line hint of the room scan: what to do, and what it costs. */
.erf-tray-hint--2 { flex-direction: column; gap: 2px; text-align: center; }
.erf-tray-hint--2 > span { display: flex; align-items: center; gap: 4px; }
.erf-tray-hint--2 small { font-size: 11.5px; color: rgba(255,255,255,.5); }
.erf-voice { position: absolute; left: 12px; right: 12px; bottom: calc(246px + var(--erf-safe-bottom)); z-index: 14; background: rgba(11,16,32,.92); border: 1px solid rgba(201,169,106,.55); border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; animation: erf-rise .2s both; color: #fff; }
.erf-voice .erf-sug-av { width: 34px; height: 34px; }
.erf-voice .vt { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.erf-voice .vt small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--erf-gold); margin-bottom: 2px; }
.erf-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.erf-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--erf-gold); animation: erf-wave .9s ease-in-out infinite; transform-origin: center; }
.erf-wave i:nth-child(2) { animation-delay: -.2s; } .erf-wave i:nth-child(3) { animation-delay: -.45s; } .erf-wave i:nth-child(4) { animation-delay: -.1s; } .erf-wave i:nth-child(5) { animation-delay: -.6s; }

/* ── Peek: the card that floats above the camera controls ─────────────────────────────────────── */
.erf-peek { position: absolute; left: 10px; right: 10px; bottom: calc(222px + var(--erf-safe-bottom)); z-index: 12; background: var(--erf-paper); color: var(--erf-ink); border-radius: 22px; padding: 7px 12px 11px 14px; box-shadow: 0 18px 44px rgba(0,0,0,.4); touch-action: none; animation: erf-rise .3s var(--erf-ease) backwards; transition: transform .3s var(--erf-ease); }
.erf-peek.is-ready { border: 1px solid var(--erf-gold); }
.erf-peek.is-drag { transition: none; }
.erf-pk-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.erf-stack { display: flex; flex: none; padding-left: 10px; }
.erf-stack img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -10px; animation: erf-rise .3s both; }
.erf-stack--sq img { border-radius: 10px; }
.erf-pk-t { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; color: inherit; }
.erf-pk-t b { display: block; font-family: var(--ow-serif); font-size: 21px; font-weight: 600; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erf-pk-t span { display: block; font-size: 13px; color: var(--erf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erf-pk-dest { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 9px 0 0; border: 0; border-top: 1px solid var(--erf-line); font-size: 13.5px; color: var(--erf-muted); min-height: 34px; width: 100%; background: transparent; text-align: left; }
.erf-pk-dest .material-symbols-outlined { font-size: 18px; color: var(--erf-gold2); }
.erf-pk-dest b { color: var(--erf-ink); font-weight: 600; }
.erf-pk-dest .pd-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erf-pk-dest .chev { margin-left: auto; color: var(--erf-faint); }
.erf-pk-prog { height: 3px; border-radius: 2px; background: var(--erf-line); overflow: hidden; margin-top: 10px; }
.erf-pk-prog i { display: block; height: 100%; background: var(--erf-gold); transition: width .3s var(--erf-ease); }
.erf-pk-prog.is-indet i { width: 35%; animation: erf-indet 1.3s ease-in-out infinite; }
/* The newest thought of the extraction under the peek's bar, one line. */
.erf-pk-think { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-style: italic; color: var(--erf-muted); min-width: 0; }
.erf-pk-think .material-symbols-outlined { font-size: 15px; font-style: normal; color: var(--erf-gold2); flex: none; }
.erf-pk-think span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── Recognition view: from "Erkennen" until "Weitere erfassen" the camera is off and the stage
   shows the photos OWNY reads, every find framed — the free scan's view (.ps-scan) in the app ── */
.erf-vf--rec { touch-action: auto; }
.erf-rec-photos { position: absolute; inset: 0; }
.erf-rec-slide { position: relative; height: 100%; }
/* One photo fills the stage. */
.erf-rec-photos > .erf-rec-slide:only-child { position: absolute; inset: 0; }
/* Several on the desktop: a grid, all in view while the frames come in — two columns, three from
   five photos; an odd last photo takes the rest of its row. */
.erf-rec-photos.is-grid { display: grid; grid-template-columns: repeat(var(--erf-cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4px; padding: 4px; }
.erf-rec-photos.is-grid > .erf-rec-slide { height: auto; min-height: 0; border-radius: 12px; overflow: hidden; }
.erf-rec-photos.is-grid > .erf-rec-slide:last-child:nth-child(odd) { grid-column: span 2; }
/* Several on a phone (and a room scan's many frames): a strip to swipe, one photo at a time. */
.erf-rec-photos.is-strip { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.erf-rec-photos.is-strip::-webkit-scrollbar { display: none; }
.erf-rec-photos.is-strip .erf-rec-slide { flex: 0 0 100%; scroll-snap-align: center; }
/* Which photo (or frame) this is. */
.erf-rec-n { position: absolute; top: 10px; left: 12px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: rgba(5,7,12,.55); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
/* The strip's dots, at the top (the peek covers the bottom): one per photo, gold where it has
   finds, the one in view drawn long (data-on, set by addObjectsCapture.js). */
.erf-rec-dots { position: absolute; top: 12px; left: 0; right: 0; z-index: 4; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.erf-rec-dots i { pointer-events: auto; cursor: pointer; width: 7px; height: 7px; padding: 6px 0; box-sizing: content-box; background: rgba(255,255,255,.45); background-clip: content-box; border-radius: 4px; transition: width .2s var(--erf-ease), background-color .2s; }
.erf-rec-dots i.has-finds { background-color: var(--erf-gold); }
.erf-rec-dots i[data-on] { width: 18px; background-color: #fff; }
.erf-rec-dots i.has-finds[data-on] { background-color: var(--erf-gold); }
/* A room scan after its recognition: its frames with the finds, or its clip — the switch between them. */
.erf-rec-switch { position: absolute; top: 10px; right: 12px; z-index: 5; }
.erf-rec-switch.erf-chip--dark { background: rgba(5,7,12,.6); }
/* Under the photos: the tray, then one action — stop while OWNY reads, "Weitere erfassen" after. */
.erf-rec-ctrls { display: flex; justify-content: center; padding: 2px 22px 6px; }
.erf-rec-ctrls .erf-btn { min-width: min(280px, 100%); }
.erf-btn--glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.erf-btn--glass .material-symbols-outlined { color: var(--erf-gold); }
.erf-btn--glass:hover:not(:disabled) { background: rgba(255,255,255,.16); }
/* The peek floats above that shorter bottom (tray 62 + action 60 + the way to other methods 52). */
.erf-stage--rec .erf-peek { bottom: calc(182px + var(--erf-safe-bottom)); }
/* Phones while OWNY reads: under the tray a light card follows its steps, in the place of the
   controls, the peek and the review sheet. Its height is fixed, so the photo does not jump while
   the thoughts and finds come in. */
.erf-cam-bot--rec.is-card { padding-bottom: 0; }
.erf-rec-card { flex: none; height: 46dvh; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px calc(22px + var(--erf-safe-bottom)); border-radius: 22px 22px 0 0; background: var(--erf-paper); color: var(--erf-ink); animation: erf-up .3s var(--erf-ease) both; }
.erf-rec-card .erf-title { font-size: 28px; }
.erf-rec-card .erf-pk-prog { margin: 10px 0 14px; }
.erf-rec-card .erf-found-list { max-height: none; }
.erf-rec-acts { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.erf-rec-acts .erf-lnk { margin: 0; }
.erf-rec-alt { margin: 4px 0 0; color: var(--erf-muted); }
/* The recognition's trail (AddObjects.StageTrail) on the capture's surfaces: rows as in the free
   scan (.ps-phase). Its scoped rules read the --aiqc-* tokens, which the capture gives it here. */
.erf .aiqc-phases { --aiqc-paper: var(--erf-paper); --aiqc-line: var(--erf-line); --aiqc-ink-4: var(--erf-faint); --aiqc-r-tile: 12px; }
.erf .aiqc-phase .ring { border-color: var(--erf-line2); }
.erf .aiqc-phase.is-running { color: var(--erf-ink); border-color: var(--erf-gold); box-shadow: 0 0 0 3px rgba(201,169,106,.18); }
.erf .aiqc-phase.is-running .ring { border-color: var(--erf-gold); color: var(--erf-gold2); }
.erf .aiqc-phase.is-running .ring .material-symbols-outlined { animation: erf-spin 1s linear infinite; }
.erf .aiqc-phase.is-done { color: var(--erf-ink); }
.erf .aiqc-phase.is-done .ring { background: var(--erf-ink); border-color: var(--erf-ink); color: var(--erf-gold); }
/* On the phone's card the trail is compact, so the finds come into view as a list right under it. */
.erf .erf-rec-card .aiqc-phases { gap: 4px; }
.erf .erf-rec-card .aiqc-phase { padding: 6px 12px; }
/* Beside the recognition view's photo the finds carry the numbers of their frames. */
.erf-found-list--n { counter-reset: erf-find; }
.erf-found-list--n li { counter-increment: erf-find; gap: 10px; }
.erf-found-list--n li::before {
  content: counter(erf-find); flex: none; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--erf-gold); color: var(--erf-ink); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.erf-found-list--n.is-live li::before { background: var(--erf-cream2); }

/* ── Review sheet ─────────────────────────────────────────────────────────────────────────────── */
.erf-rv { position: fixed; left: 0; right: 0; top: calc(50px + var(--erf-safe-top)); bottom: 0; z-index: 991; background: var(--erf-cream); color: var(--erf-ink); border-radius: 26px 26px 0 0; display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.35); transition: transform .34s var(--erf-ease); transform: translateY(105%); }
.erf-rv.is-open { transform: none; }
.erf-rv.is-drag { transition: none; }
.erf-rv-head { padding: 8px 16px 8px 18px; touch-action: none; flex: none; }
.erf-rv-top { display: flex; align-items: flex-start; gap: 10px; }
.erf-rv-top .tx { flex: 1; min-width: 0; }
.erf-rv-sub { font-size: 13.5px; color: var(--erf-muted); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.erf-rv-sub b { color: var(--erf-ink); }
.erf-add-photo { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--erf-paper); border: 1px solid var(--erf-line); font-weight: 600; font-size: 14px; color: var(--erf-ink); flex: none; margin-top: 4px; }
.erf-add-photo .material-symbols-outlined { font-size: 19px; color: var(--erf-gold2); }
.erf-rv-scroll { flex: 1; overflow-y: auto; padding: 4px 14px 170px; overscroll-behavior: contain; }
.erf-rv-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px calc(18px + var(--erf-safe-bottom)); background: linear-gradient(180deg, rgba(246,241,231,0), var(--erf-cream) 32%); z-index: 5; }
.erf-rv-foot .erf-btn + .erf-btn { margin-top: 8px; }
.erf-rv-foot-row { display: flex; gap: 8px; }
/* While OWNY recognises: stop it to add photos, or discard it — two quiet links side by side. */
.erf-rv-foot-acts { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.erf-rv-foot-acts .erf-lnk { margin: 2px 0 0; min-height: 40px; }
.erf-rv-foot-row > .erf-btn { flex: 1; }
.erf-rv-foot-row > .erf-btn--g { flex: 0 0 auto; }
.erf-hint-line { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12px; color: var(--erf-faint); margin-top: 9px; flex-wrap: wrap; text-align: center; }
.erf-hint-line span { display: inline-flex; align-items: center; gap: 3px; }
.erf-hint-line .material-symbols-outlined { font-size: 15px; }
.erf-disc { font-size: 12px; color: var(--erf-faint); text-align: center; margin-top: 8px; }

/* Shot chips in the review sheet */
.erf-shots { display: flex; gap: 8px; overflow-x: auto; margin: 2px -14px 12px; padding: 4px 14px; scrollbar-width: none; }
.erf-shots::-webkit-scrollbar { display: none; }
.erf-shot { display: flex; align-items: center; gap: 10px; flex: none; min-height: 60px; padding: 7px 14px 7px 8px; border-radius: 16px; background: var(--erf-paper); border: 1px solid var(--erf-line); text-align: left; color: var(--erf-ink); animation: erf-rise .25s both; }
.erf-shot:hover { border-color: var(--erf-gold); }
.erf-shot.is-ready { border-color: var(--erf-gold); border-style: dashed; }
.erf-shot.is-warn b { color: var(--erf-amber); }
.erf-shot--add { border-style: dashed; color: var(--erf-gold2); background: transparent; }
.erf-sh-img { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.erf-sh-img img { position: absolute; inset: 0; width: 44px; height: 44px; border-radius: 11px; object-fit: cover; border: 1.5px solid var(--erf-paper); }
.erf-sh-img .material-symbols-outlined { color: var(--erf-gold2); }
.erf-sh-tx { display: flex; flex-direction: column; min-width: 0; }
.erf-sh-tx b { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.erf-sh-tx small { font-size: 12px; color: var(--erf-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Progress while OWNY recognises */
.erf-prog-card { background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 20px; padding: 14px; margin-bottom: 12px; animation: erf-rise .3s both; }
.erf-prog-media { position: relative; border-radius: 14px; overflow: hidden; height: 180px; background: var(--erf-cream); margin-bottom: 12px; }
.erf-prog-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.erf-trail { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.erf-trail-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--erf-faint); }
.erf-trail-row .dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--erf-line2); display: grid; place-items: center; flex: none; }
.erf-trail-row .dot .material-symbols-outlined { font-size: 15px; }
.erf-trail-row.is-done { color: var(--erf-ink); }
.erf-trail-row.is-done .dot { background: var(--erf-gold); border-color: var(--erf-gold); color: #fff; }
.erf-trail-row.is-run { color: var(--erf-ink); font-weight: 600; }
.erf-trail-row.is-run .dot { border-color: var(--erf-gold); border-top-color: transparent; animation: erf-spin .9s linear infinite; }
/* "OWNY denkt nach": the model's own thought summary during the extraction, newest line first and
   strongest; the lines before it fade below, so the panel reads as a train of thought rather than
   one sentence replacing itself. A tag names the part of the step (second look, identification
   check) and, in a photo series, the photo. */
.erf-think { background: var(--erf-cream); border-radius: 12px; padding: 8px 10px 9px; margin-top: 8px; }
.erf-think-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--erf-gold2); margin-bottom: 4px; }
.erf-think-h .material-symbols-outlined { font-size: 16px; animation: erf-think-pulse 1.6s ease-in-out infinite; }
.erf-think-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.erf-think-ln { font-size: 13px; line-height: 1.45; color: var(--erf-muted); font-style: italic; transition: opacity .3s var(--erf-ease), color .3s var(--erf-ease); }
.erf-think-ln--0 { color: var(--erf-ink); animation: erf-rise .3s both; }
.erf-think-ln--1 { opacity: .78; }
.erf-think-ln--2 { opacity: .56; }
.erf-think-ln--3 { opacity: .38; }
.erf-think-tag { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--erf-gold2); border: 1px solid var(--erf-line2); border-radius: 999px; padding: 0 6px; margin-right: 6px; vertical-align: 1px; }
@keyframes erf-think-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.erf-found-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 140px; overflow-y: auto; }
.erf-found-list li { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 3px 0; animation: erf-rise .3s both; }
.erf-found-list li .material-symbols-outlined { font-size: 16px; color: var(--erf-green); }
/* While the extraction still writes the list: found, not yet confirmed. */
.erf-found-list.is-live li .material-symbols-outlined { color: var(--erf-gold2); }

/* Boxes used inside sheets */
.erf-how { display: flex; gap: 10px; align-items: flex-start; background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: var(--erf-muted); }
.erf-how b { display: block; color: var(--erf-ink); font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.erf-how > .material-symbols-outlined { color: var(--erf-gold2); font-size: 20px; flex: none; margin-top: 1px; }
.erf-how ul { margin: 6px 0 0; padding-left: 18px; }
.erf-how + .erf-how { margin-top: 10px; }
.erf-tech { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.6; color: var(--erf-gold-ink); background: #fbf6ea; border: 1px dashed var(--erf-gold); border-radius: 12px; padding: 8px 12px; margin-top: 10px; }
.erf-used { background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 16px; padding: 10px 14px; margin-top: 12px; }
.erf-u-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--erf-gold2); margin-bottom: 4px; }
.erf-u-h .material-symbols-outlined { font-size: 16px; }
.erf-u { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; line-height: 1.35; color: var(--erf-muted); padding: 5px 0; border-top: 1px solid var(--erf-line); }
.erf-u-h + .erf-u { border-top: 0; }
.erf-u b { color: var(--erf-ink); font-weight: 700; font-size: 13px; white-space: nowrap; }
.erf-u b.pos { color: var(--erf-green); }
.erf-u b.neg { color: var(--erf-red); }

/* Photo sheet */
.erf-shot-imgs { display: flex; gap: 8px; overflow-x: auto; margin: 8px -16px 12px; padding: 0 16px; scrollbar-width: none; }
.erf-shot-imgs img { height: 210px; max-width: 80%; aspect-ratio: 3 / 4; border-radius: 16px; object-fit: cover; flex: none; border: 1px solid var(--erf-line); background: var(--erf-paper); }
/* Foto-Erfassung · the original photos with what OWNY found framed on them (ErfPhotoMarks). Each
   frame is the recognition's bounding box in percent of the photo, numbered as the findings are
   listed; the photo is never cropped (no object-fit), or the frames would no longer sit on the
   objects. In the sheet the photos flow in a strip; on the stage one fills the viewfinder while OWNY
   reads it. */
.erf-marks { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.erf-marks-fr { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--erf-line); background: var(--erf-cam); }
.erf-marks-fr > img { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; }
.erf-marks figcaption { font-size: 12px; line-height: 1.3; color: var(--erf-faint); }
.erf-mark { position: absolute; display: block; margin: 0; padding: 0; border: 2px solid var(--erf-gold); border-radius: 6px; background: rgba(201,169,106,.14); box-shadow: 0 0 0 1px rgba(5,7,12,.45); color: var(--erf-ink); font: inherit; line-height: 1; transition: opacity .2s, border-color .2s, background .2s; }
button.erf-mark { cursor: pointer; }
button.erf-mark:hover, button.erf-mark:focus-visible { background: rgba(201,169,106,.32); border-color: #fff; outline: none; }
.erf-mark.is-on { z-index: 2; border-width: 3px; border-color: #fff; background: rgba(201,169,106,.22); }
.erf-mark.is-dim { opacity: .5; border-style: dashed; }
.erf-mark-n { position: absolute; left: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px 0 8px 0; background: var(--erf-gold); color: var(--erf-ink); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
.erf-mark.is-on .erf-mark-n { background: #fff; }
.erf-marks.is-live .erf-mark { animation: erf-mark-in .35s var(--erf-ease) both; }
@keyframes erf-mark-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.erf-marks-strip { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 8px; padding: 2px 16px 4px; scrollbar-width: none; }
.erf-marks-strip::-webkit-scrollbar { display: none; }
.erf-marks-strip .erf-marks-fr > img { max-height: 220px; max-width: min(78vw, 360px); }
.erf-marks-strip > .erf-marks:only-child { margin: 0 auto; }
.erf-marks--fill { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; }
.erf-marks--fill .erf-marks-fr { border: 0; border-radius: 0; background: transparent; }
.erf-marks--fill .erf-marks-fr > img { max-width: 100cqw; max-height: 100cqh; opacity: .72; }
.erf-shot-imgs .erf-marks { margin: 0 auto; }
.erf-shot-imgs .erf-marks-fr > img { width: auto; height: auto; max-width: 100%; max-height: 300px; aspect-ratio: auto; object-fit: fill; border: 0; border-radius: 0; }
.erf-marks--editor { margin: 12px auto 2px; }
.erf-marks--editor .erf-marks-fr > img { max-height: 220px; }
/* The finding's number on its row, the same badge as on the photo. */
.erf-mark-n--row { left: -6px; top: -6px; min-width: 22px; height: 22px; line-height: 18px; border-radius: 8px; border: 2px solid var(--erf-paper); }
/* Peek · the stacked photos open the editor before the recognition; the badge says so. */
.erf-stack--edit { position: relative; border: 0; background: transparent; padding: 0 0 0 10px; cursor: pointer; }
.erf-stack--edit .ed { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--erf-ink); border: 2px solid var(--erf-paper); display: grid; place-items: center; color: var(--erf-gold); }
.erf-stack--edit .ed .material-symbols-outlined { font-size: 12px; }
/* Scan overview (/scans/overview): a stored scan's photos with its findings framed, outside the
   capture page — the strip runs within the section instead of bleeding into a sheet's padding. */
.erf-scan-marks .erf-marks-strip { margin: 0; padding: 2px 0 4px; }
.erf-scan-marks .erf-marks-strip .erf-marks-fr > img { max-height: 340px; max-width: min(86vw, 520px); }
.scan-mark-n { position: absolute; left: 6px; top: 6px; z-index: 1; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 8px; background: var(--ow-champagne); color: var(--ow-ink); font-size: 11.5px; font-weight: 800; line-height: 22px; text-align: center; }
.erf-ph-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -2px 0 12px; }
.erf-ph-ed { font-size: 12px; color: var(--erf-faint); margin-left: auto; text-align: right; max-width: 160px; line-height: 1.3; }
.erf-sh-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.erf-sh-acts:empty { display: none; }
.erf-sh-acts .erf-btn { flex: 1; }

/* Editor sheet */
.erf-ed-media { display: flex; gap: 14px; align-items: center; touch-action: pan-y; padding-top: 4px; }
.erf-imgw { position: relative; flex: none; display: block; }
.erf-imgw > img, .erf-imgw > .ph { width: 92px; height: 92px; border-radius: 20px; object-fit: cover; flex: none; border: 1px solid var(--erf-line); pointer-events: none; background: var(--erf-paper); display: grid; place-items: center; color: var(--erf-gold2); }
.erf-det-btn { position: absolute; right: -8px; bottom: -8px; width: 44px; height: 44px; border-radius: 50%; background: var(--erf-ink); color: var(--erf-gold); border: 3px solid var(--erf-cream); display: grid; place-items: center; padding: 0; box-shadow: 0 6px 14px rgba(11,16,32,.25); }
.erf-det-btn .material-symbols-outlined { font-size: 20px; }
.erf-ed-media .tx { flex: 1; min-width: 0; }
.erf-ed-name { width: 100%; font-family: var(--ow-serif); font-size: 24px; font-weight: 600; line-height: 1.12; border: 0; border-bottom: 1.5px dashed var(--erf-line2); background: transparent; outline: 0; color: var(--erf-ink); padding: 2px 0 4px; resize: none; }
.erf-ed-name:focus { border-bottom-color: var(--erf-gold); }
.erf-ed-meta { font-size: 13px; color: var(--erf-muted); margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.erf-dots { display: flex; gap: 5px; justify-content: center; margin: 12px 0 0; flex-wrap: wrap; }
.erf-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--erf-line2); transition: all .2s; }
.erf-dots i.is-on { background: var(--erf-ink); width: 18px; }
.erf-ed-slide { animation: erf-slide-l .25s var(--erf-ease) both; }
.erf-ed-slide.is-back { animation-name: erf-slide-r; }
.erf-ed-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
.erf-ed-sec .erf-eyebrow { display: flex; flex-direction: column; gap: 2px; }
.erf-ed-sec .erf-eyebrow span { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--erf-faint); }
.erf-ed-acts { display: flex; gap: 8px; margin-top: 14px; }
.erf-ed-acts .erf-btn { flex: 1; }

/* Consent sheet */
.erf-cs-owny { width: 44px; height: 44px; border-radius: 50%; display: block; margin-bottom: 6px; }
.erf-cs-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 18px; }
.erf-cs-it { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--erf-muted); }
.erf-cs-it .erf-tile { width: 36px; height: 36px; border-radius: 11px; }
.erf-cs-it .erf-tile .material-symbols-outlined { font-size: 19px; }
.erf-cs-it b { color: var(--erf-ink); font-weight: 600; display: block; font-size: 15px; }
.erf-cs-it a { color: var(--erf-gold-ink); text-decoration: underline; text-underline-offset: 2px; }
.erf-cs-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--erf-ink); background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.erf-cs-check input { width: 20px; height: 20px; accent-color: var(--erf-ink); flex: none; margin-top: 1px; }
.erf-cs-foot { font-size: 12.5px; color: var(--erf-faint); text-align: center; margin-top: 12px; }

/* Full-screen photo editor */
.erf-pe { position: fixed; inset: 0; z-index: 997; background: var(--erf-cam); color: #fff; display: flex; flex-direction: column; animation: erf-fade .2s both; -webkit-user-select: none; user-select: none; }
.erf-pe-top { height: calc(56px + var(--erf-safe-top)); padding: var(--erf-safe-top) 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.erf-pe-tb { min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: #fff; font-weight: 600; font-size: 15px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.erf-pe-tb--go { background: var(--erf-gold); color: var(--erf-ink); padding: 0 18px; }
.erf-pe-tb:disabled { opacity: .45; }
.erf-pe-ttl { text-align: center; line-height: 1.2; min-width: 0; }
.erf-pe-ttl b { display: block; font-size: 15px; }
.erf-pe-ttl span { font-size: 12px; color: rgba(255,255,255,.62); white-space: nowrap; }
.erf-pe-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 34px 12px 8px; }
.erf-pe-pill { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 600; white-space: nowrap; z-index: 3; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.erf-pe-pill .material-symbols-outlined { color: var(--erf-gold); font-size: 16px; }
.erf-pe-canvas { width: min(100%, 100%); max-width: min(100%, 58dvh); height: auto; aspect-ratio: 1 / 1; touch-action: none; border-radius: 4px; background: #000; display: block; }
.erf-pe-ctl { flex: none; min-height: 112px; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; justify-content: flex-start; }
.erf-pe-row { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.erf-pe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.1); border: 0; color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; }
.erf-pe-btn--ic { width: 48px; height: 48px; padding: 0; flex: none; }
.erf-pe-btn:disabled { opacity: .4; }
.erf-pe-btn .material-symbols-outlined { font-size: 20px; }
.erf-pe-note { font-size: 12.5px; color: rgba(255,255,255,.66); text-align: center; line-height: 1.45; display: flex; align-items: center; justify-content: center; gap: 6px; }
.erf-pe-note .material-symbols-outlined { color: var(--erf-gold); font-size: 16px; }
.erf-pe-sl { display: grid; grid-template-columns: 84px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.78); max-width: 520px; width: 100%; margin: 0 auto; }
.erf-pe-sl input { accent-color: var(--erf-gold); width: 100%; height: 28px; }
.erf-pe-sl b { text-align: right; font-size: 12.5px; color: #fff; }
.erf-pe-tabs { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 6px 8px calc(16px + var(--erf-safe-bottom)); border-top: 1px solid rgba(255,255,255,.08); }
.erf-pe-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border: 0; background: transparent; color: rgba(255,255,255,.6); font-size: 11.5px; font-weight: 600; border-radius: 14px; }
.erf-pe-tab.is-on { color: var(--erf-gold); background: rgba(201,169,106,.13); }

/* Toast */
.erf-toast { position: fixed; left: 12px; right: 12px; z-index: 998; display: flex; align-items: center; gap: 10px; background: var(--erf-ink); color: #fff; border-radius: 16px; padding: 10px 6px 10px 14px; font-size: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.3); animation: erf-rise .25s both; border: 1px solid rgba(201,169,106,.3); max-width: 520px; margin: 0 auto; }
.erf-toast--top { top: calc(52px + var(--erf-safe-top)); }
.erf-toast--bottom { bottom: calc(104px + var(--erf-safe-bottom)); }
.erf-toast > .material-symbols-outlined { color: var(--erf-gold); font-size: 21px; font-variation-settings: "FILL" 1; }
.erf-toast .tx { flex: 1; min-width: 0; line-height: 1.35; padding: 4px 0; }
.erf-toast .tx b { font-weight: 600; }
.erf-toast button { border: 0; background: transparent; color: var(--erf-gold); font-weight: 700; font-size: 14px; min-height: 40px; padding: 0 10px; flex: none; }

/* Drag & drop dock */
.erf-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 993; background: var(--erf-ink); color: #fff; border-radius: 24px 24px 0 0; padding: 14px 12px calc(28px + var(--erf-safe-bottom)); animation: erf-up .22s var(--erf-ease) both; box-shadow: 0 -12px 30px rgba(0,0,0,.25); }
.erf-dock-lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--erf-gold); margin: 0 4px 10px; }
.erf-dock-row { display: flex; gap: 8px; flex-wrap: wrap; }
.erf-drop { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 10px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.16); font-size: 14px; font-weight: 600; color: #fff; transition: all .15s; }
.erf-drop .material-symbols-outlined { font-size: 19px; color: var(--erf-gold); }
.erf-drop.is-cur { opacity: .5; }
.erf-drop--nw { border-style: dashed; }
.erf-drop.is-over { background: var(--erf-gold); border-color: var(--erf-gold); color: var(--erf-ink); transform: scale(1.05); }
.erf-drop.is-over .material-symbols-outlined { color: var(--erf-ink); }
.erf-ghost { position: fixed; z-index: 999; width: 290px; pointer-events: none; display: flex; align-items: center; gap: 10px; background: var(--erf-paper); color: var(--erf-ink); border-radius: 16px; padding: 8px 14px 8px 8px; box-shadow: 0 20px 44px rgba(11,16,32,.38); transform: translate(-50%, -125%) rotate(-2deg); }
.erf-ghost img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.erf-ghost b { font-weight: 600; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Success ("Gespeichert.") */
.erf-done-ring { width: 72px; height: 72px; border-radius: 50%; background: var(--erf-ink); color: var(--erf-gold); display: grid; place-items: center; margin: 6px 0 10px; box-shadow: 0 10px 24px rgba(11,16,32,.22); }
.erf-done-ring .material-symbols-outlined { font-size: 36px; }

/* Saved: the ring and the sentence, then only two ways on as a line of text — the saved objects
   (a read-only list in the object-link dialog) or another capture */
.erf-done { max-width: 860px; margin: 0 auto; padding: 8px 16px calc(28px + var(--erf-safe-bottom)); color: var(--erf-ink); }
.erf-done-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 8px 16px; }
.erf-done-head .erf-sub { max-width: 520px; }
.erf-done-head .erf-fr-hint { margin-top: 6px; }
.erf-done-head .erf-fr-hint a { color: var(--ow-gold-ink); text-decoration: underline; }
.erf-done > .erf-sug { margin-bottom: 12px; }
.erf-done-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin: 18px 0 0; text-align: center; }
.erf-done-links-or { font-size: 14px; color: var(--erf-faint); }
.erf-done-link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 2px; min-height: 44px; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--ow-gold-ink); cursor: pointer; }
.erf-done-link .material-symbols-outlined { font-size: 18px; transition: transform .15s; }
.erf-done-link:hover { text-decoration: underline; }
.erf-done-link:hover .material-symbols-outlined { transform: translateX(2px); }
.erf-done-link:focus-visible { outline: 2px solid var(--erf-gold); outline-offset: 2px; border-radius: 6px; }
.erf-chip:disabled { opacity: .55; }

/* The manual entry keeps its one-question-per-screen flow (.mnl); it only needs the page gutter */
.erf-manual { max-width: 760px; margin: 0 auto; padding: 8px 16px calc(24px + var(--erf-safe-bottom)); }

/* Non-camera full surfaces (manual entry, saved screen) inside the page */
.erf-surface { background: var(--erf-cream); border-radius: 26px; min-height: calc(100dvh - 140px); display: flex; flex-direction: column; position: relative; max-width: 760px; margin: 0 auto; }
.erf-surface-head { padding: 14px 18px 6px; display: flex; gap: 10px; align-items: flex-start; }
.erf-surface-head .tx { flex: 1; min-width: 0; }
.erf-surface-body { padding: 4px 16px 24px; flex: 1; }
.erf-back { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--erf-line); background: var(--erf-paper); display: grid; place-items: center; color: var(--erf-ink); padding: 0; flex: none; }

/* What the owner knows (facts) and how OWNY should recognise (settings): field rows with a remove ×,
   the offered rows as dashed chips underneath */
.erf-fr-k > .material-symbols-outlined { font-size: 16px; color: var(--erf-gold2); vertical-align: -3px; margin-right: 4px; }
.erf-fr-k--row { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--erf-ink); }
.erf-fr-k--row > .erf-fr-x { margin-left: auto; }
.erf-fr-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--erf-faint); display: grid; place-items: center; padding: 0; }
.erf-fr-x:hover { background: var(--erf-line); color: var(--erf-ink); }
.erf-fr-x .material-symbols-outlined { font-size: 18px; }
.erf-settings .erf-fr-v { font-weight: 500; }
.erf-settings .erf-fr-hint .material-symbols-outlined { vertical-align: -3px; }

/* OWNY's deep-link guidance over the phone viewfinder */
.erf-stage-guide { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 4; }
.erf-stage-guide .erf-sug { margin: 0; box-shadow: 0 14px 30px rgba(0,0,0,.3); }

/* A chip on the dark camera ground (paste next to the empty tray) */
.erf-chip--dark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; }
/* Rarity: the rarer the finding, the stronger the champagne ring around its picture. Value never
   earns a glow — a large figure must not look more binding than a small one. */
.erf-obj.erf-glow-bronze .erf-obj-th { box-shadow: 0 0 0 2px rgba(201,169,106,.35); }
.erf-obj.erf-glow-silver .erf-obj-th { box-shadow: 0 0 0 2px rgba(201,169,106,.55); }
.erf-obj.erf-glow-gold .erf-obj-th { box-shadow: 0 0 0 2px var(--ow-champagne), 0 4px 14px rgba(201,169,106,.35); }
.erf-obj.erf-glow-legendary .erf-obj-th { box-shadow: 0 0 0 3px var(--ow-champagne), 0 6px 20px rgba(201,169,106,.5); animation: erf-legend 2.8s ease-in-out infinite; }
@keyframes erf-legend { 50% { box-shadow: 0 0 0 4px var(--ow-champagne), 0 8px 28px rgba(201,169,106,.7); } }
/* A finding whose identification OWNY is still researching is provisional */
.erf-obj.is-researching .erf-obj-fg { opacity: .6; }
/* The balance is used up */
.erf-used.is-empty .erf-pk-prog i { background: var(--ow-negative); }
.erf-used.is-empty .erf-u-h { color: var(--ow-negative); }

/* The peek's cost line before a paid recognition */
.erf-pk-cost { font-size: 12px; color: var(--erf-muted); padding: 2px 2px 0; }
.erf-pk-cost * { font-size: inherit; }

/* The status pill sits in the camera's top bar inside the step indicator group */
.erf-progress { display: flex; justify-content: center; min-width: 0; flex: 0 1 auto; }

/* The close button sits in the head's top right corner; the first lines keep clear of it */
.erf-bs-head > .erf-eyebrow, .erf-bs-head > .erf-bs-title { padding-right: 44px; }
/* Picker: the kind of a new destination under its name; OWNY thinking on the suggestion row */
.erf-pick-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.erf-pick-type .rz-dropdown { min-height: 36px; border-radius: 10px; border-color: var(--erf-line); background: var(--erf-paper); }
.erf-pick.is-loading { cursor: progress; }
.erf-pick > .erf-btn { flex: none; }
/* Notes under a picked money account; amber when the pick needs a second look */
.erf-fund .erf-fields + [role="radiogroup"] { margin-top: 10px; }
.erf-fund .erf-fr-hint { display: flex; gap: 6px; align-items: flex-start; margin: 8px 4px 0; }
.erf-fr-hint.is-warn { color: var(--ow-gold-ink); }
.erf-fr-hint .material-symbols-outlined { font-size: 16px; }
/* Editor: every particular of a finding, the former detail fields, inside the sheet */
.erf-ed-details { margin-top: 10px; }
.erf-ed-details .aiqc-editfields { background: var(--erf-paper); border: 1px solid var(--erf-line); border-radius: 18px; padding: 4px 14px; }

/* ── From 769px: stage and review side by side, sheets become dialogs ─────────────────────────── */
@media (min-width: 769px) {
    .erf-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 18px; align-items: stretch; height: calc(100vh - 150px); min-height: 640px; max-width: 1240px; margin: 0 auto; }
    .erf-page.is-solo { display: block; height: auto; min-height: 0; }
    .erf-stage { position: relative; inset: auto; z-index: auto; border-radius: 26px; min-height: 0; height: 100%; }
    .erf-cam-top { height: 64px; padding-top: 0; }
    .erf-cam-bot { padding-bottom: 56px; }
    .erf-peek { display: none; }
    .erf-voice { bottom: 200px; }
    .erf-stage--modes .erf-voice { bottom: 230px; }
    .erf-rv { position: relative; inset: auto; transform: none; border-radius: 26px; box-shadow: none; border: 1px solid var(--erf-line); height: 100%; min-height: 0; }
    .erf-rv-head .erf-grab, .erf-rv .erf-add-photo--phone { display: none; }
    .erf-rv-foot { border-radius: 0 0 26px 26px; }
    .erf-bs { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100vw - 48px)); max-height: min(86vh, 860px); transform: translate(-50%, -50%); border-radius: 26px; animation: erf-fade .2s both; box-shadow: 0 24px 60px rgba(11,16,32,.35); }
    .erf-bs--wide { width: min(720px, calc(100vw - 48px)); }
    .erf-bs--tall { height: min(86vh, 860px); }
    .erf-bs .erf-grab { display: none; }
    .erf-bs-head { padding-top: 18px; }
    .erf-pe { inset: 24px; border-radius: 26px; }
    .erf-toast { left: auto; right: 24px; width: 420px; }
    .erf-toast--top { top: 84px; }
    .erf-toast--bottom { bottom: 24px; }
    .erf-dock { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, calc(100vw - 48px)); border-radius: 24px; bottom: 24px; animation: erf-fade .2s both; }
    .erf-surface { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .erf *, .erf *::before, .erf *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    /* A ring that would fill at once says nothing; the pill counts the seconds instead. */
    .erf .erf-rec-ring { display: none; }
}

/* =========================================================================
   OBJECT DETAILS — "MEHR" AND THE DETAIL DIALOGS
   The object page keeps summaries (value, Saldo, event costs) and opens the chronologies behind them
   as dialogs. The rows that open them are the edition start page's "Mehr" rows (.ed-more-row):
   icon, label, figure, chevron, a hairline between them. The dialog body re-uses the page's own
   .obj-vitrine variables, so the moved lists look exactly as they did on the page.
   ========================================================================= */
.obj-more {
    display: grid;
    gap: 4px;
}

.obj-more-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 6px 4px;
    border: 0;
    border-bottom: 1px solid var(--ow-line-soft);
    background: none;
    color: var(--ow-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.obj-more-row > .material-symbols-outlined:first-child { color: var(--ow-gold-ink); }
.obj-more-row:hover .obj-more-title { text-decoration: underline; text-underline-offset: 3px; }
.obj-more-row:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }

/* Directly under a summary the row reads as its "all entries" link. */
.obj-section > .obj-more-row,
.ohs + .obj-more-row { margin-top: 8px; }

.obj-more-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.obj-more-figure {
    font-size: 0.88rem;
    color: var(--own-fg-2);
    font-variant-numeric: tabular-nums;
}

.obj-more-chev { color: var(--own-fg-3); }

/* The dialog: the page's background stays behind, the body is paper. */
.obj-sheet.obj-vitrine {
    background: transparent;
    min-width: 0;
}

.obj-sheet-actions,
.obj-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.obj-sheet-actions { justify-content: flex-start; }

.rz-dialog.obj-sheet-dialog,
.obj-sheet-dialog.rz-dialog {
    background: var(--ow-paper);
    border-radius: 18px !important;
}

@media (max-width: 640px) {
    .rz-dialog-wrapper:has(.obj-sheet-dialog) { padding: 0 !important; }

    .rz-dialog.obj-sheet-dialog,
    .obj-sheet-dialog.rz-dialog {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        min-height: 100dvh;
        border-radius: 0 !important;
    }
}

/* =========================================================================
   OBJECT DETAILS — SUB-PAGES
   The areas "Mehr" opens as pages of their own (/objects/details/{id}/{section}): events, voice
   notes, OWNY's analysis, news, shared spaces, the original scan, the remaining details. The shared
   back-button head, then the area's sections on the page's cream ground, one readable column.
   ========================================================================= */
.obj-subpage {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 24px 60px;
}

.obj-subpage-head { margin-bottom: 24px; }

.obj-subpage-title {
    font-family: var(--ow-serif);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ow-ink);
}

/* A section whose title the page head already says keeps only its actions, right-aligned. */
.obj-section-head.is-actions-only { justify-content: flex-end; align-items: center; }
.obj-section-head.is-actions-only:empty { display: none; }

@media (max-width: 900px) {
    .obj-subpage { padding: 16px 16px 48px; }
    .obj-subpage-title { font-size: 1.5rem; }
}

/* =========================================================================
   OBJECT DETAILS — CHRONIK (ObjectChronik)
   The object's documented history as a timeline, oldest first: an ink rail with one node per entry,
   the date as an eyebrow, the source as a chip, "belegt" in the evidence green. It stood in the
   OWNY Studio before; it now opens the Chronik section of the object page.
   ========================================================================= */
.obj-chronik-honesty {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    margin-bottom: 18px;
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    background: var(--ow-cream-deep);
    color: var(--ow-ink);
    font-size: 0.82rem;
    line-height: 1.4;
}

.obj-chronik-honesty .rz-icon,
.obj-chronik-honesty .rzi { font-size: 1.2rem; flex-shrink: 0; }
.obj-chronik-honesty-lead { display: block; font-weight: 700; }
.obj-chronik-honesty small { color: var(--own-fg-2); }

.obj-chronik-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
    text-align: center;
    color: var(--own-fg-2);
    font-size: 0.9rem;
}

.obj-chronik-empty .rz-icon,
.obj-chronik-empty .rzi { font-size: 2rem; color: var(--ow-champagne); }

.obj-chronik {
    position: relative;
    padding-left: 30px;
}

.obj-chronik::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(to bottom, var(--ow-ink), var(--ow-line) 92%);
}

.obj-chronik-entry { position: relative; padding-bottom: 20px; }
.obj-chronik-entry:last-child { padding-bottom: 0; }

.obj-chronik-node {
    position: absolute;
    left: -30px;
    top: 2px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 3px solid var(--ow-cream);
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-paper);
}

.obj-chronik-node .rz-icon,
.obj-chronik-node .rzi { font-size: 0.72rem; }

.obj-chronik-date {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--own-fg-3);
}

.obj-chronik-title {
    margin: 2px 0 3px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ow-ink);
}

.obj-chronik-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--own-fg-2);
}

.obj-chronik-src {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.obj-chronik-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font-size: 0.72rem;
    font-weight: 600;
}

.obj-chronik-chip .rz-icon,
.obj-chronik-chip .rzi { font-size: 0.9rem; }

.obj-chronik-chip.obj-chronik-signed {
    border-color: color-mix(in srgb, var(--ow-ev-documented) 40%, transparent);
    background: color-mix(in srgb, var(--ow-ev-documented) 10%, transparent);
    color: var(--ow-ev-documented);
}

.obj-chronik-prov {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ow-ev-documented);
}

.obj-chronik-prov::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ow-ev-documented);
}

.obj-chronik-signed-line {
    margin-top: 6px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    color: var(--ow-ev-documented);
}

/* =========================================================================
   LISTING DRAFT DIALOG — "Inserat erstellen" (ListingDraftDialog)
   Choose data and photos, edit OWNY's draft, take the PDF and the photos away. An .own-canvas inside
   a dialog, without the page's padding (same as .upg-dialog).
   ========================================================================= */
.ld-dialog.own-canvas {
    padding: 0;
    max-width: none;
}

.ld-dialog .ld-lead { margin: 0 0 16px; font-size: 0.98rem; }
.ld-dialog .ld-block { margin-bottom: 18px; }
.ld-dialog .ld-block .oc-eyebrow { margin-bottom: 8px; }
.ld-dialog .ld-gap { margin-top: 12px; }
.ld-dialog .ld-muted { color: var(--own-fg-2); margin: 6px 0 0; }
.ld-dialog .ld-small { font-size: 0.82rem; }

.ld-dialog .ld-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 640px) {
    .ld-dialog .ld-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* The data choices: label above the value the owner would publish with it. */
.ld-dialog .ld-field { margin-bottom: 8px; cursor: pointer; }
.ld-dialog .ld-field-text { display: grid; gap: 1px; min-width: 0; }
.ld-dialog .ld-field-text strong { color: var(--ow-ink); font-weight: 600; }
.ld-dialog .ld-field-preview {
    font-size: 0.84rem;
    color: var(--own-fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Photos: a tap toggles, the number is the marketplace order (1 = cover). */
.ld-dialog .ld-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.ld-dialog .ld-photo {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--ow-line);
    border-radius: 12px;
    background: var(--ow-cream);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, border-color 0.15s;
}

.ld-dialog .ld-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ld-dialog .ld-photo.is-on { border-color: var(--ow-champagne); opacity: 1; }
.ld-dialog .ld-photo:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }

.ld-dialog .ld-photo-pos {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--ow-ink);
    color: var(--ow-cream);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.ld-dialog .ld-photo-ai {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--ow-ink);
    color: var(--ow-cream);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ld-dialog .ld-photo--download { opacity: 1; display: block; }
.ld-dialog .ld-photo-dl {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(11, 16, 32, 0.18);
}
.ld-dialog .ld-photo-dl .material-symbols-outlined { font-size: 18px; }

.ld-dialog .ld-price { display: flex; align-items: center; gap: 8px; }
.ld-dialog .ld-currency { color: var(--own-fg-2); font-weight: 600; }

.ld-dialog .ld-preview {
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    display: flex;
}

.ld-dialog .ld-error { border-left-color: var(--ow-negative); }
.ld-dialog .ld-error .material-symbols-outlined { color: var(--ow-negative); }

.ld-dialog .ld-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.ld-dialog .ld-actions--start { justify-content: flex-start; margin: 0 0 18px; }

/* A generated picture chosen for a listing: told, not blocked. */
.ld-dialog .ld-warning { margin: 10px 0 0; border-left-color: var(--ow-champagne-deep); }
.ld-dialog .ld-warning .material-symbols-outlined { color: var(--ow-gold-ink); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Probescan — the free trial scan of the landing and tool pages (docs/probescan-landingpages.md),
   namespace .ps. One photo without an account: the button that opens it (ProbescanStart), and the
   dialog that runs it (ProbescanDialog) — the app's own capture surfaces (.erf: top bar, viewfinder,
   shutter, drop zone, framed photo) cut down to one photo, then a light card with the trail, the
   result and the slim registration. Phones get the full screen; from 769px it is a dialog.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── The button: the page's first call to action ─────────────────────────────────────────────── */
.ps-start { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.lp .ps-start-btn {
  background: var(--ow-champagne); color: var(--ow-ink); font-weight: 700; box-shadow: none;
  white-space: normal; text-align: left; line-height: 1.25; gap: 10px;
}
.lp .ps-start-btn:hover { background: var(--ow-champagne-light); transform: translateY(-2px); }
.lp .ps-start-btn .material-symbols-outlined { font-size: 1.2rem; }
.ps-start-fine { margin-left: 4px; font-size: 0.8rem; line-height: 1.35; color: rgba(255, 255, 255, 0.66); }
/* On a cream card (the tool pages): an ink button, the fine line in the body's grey. */
.lp .ps-start--karte .ps-start-btn { background: var(--ow-ink); color: #fff; }
.lp .ps-start--karte .ps-start-btn:hover { background: var(--ow-ink-2); }
.lp .ps-start--karte .ps-start-btn .material-symbols-outlined { color: var(--ow-champagne); }
.ps-start--karte .ps-start-fine { color: var(--own-fg-2); }
/* The phone's start bar: the whole width, its own fine line under it. */
.ps-start--leiste { align-items: stretch; width: 100%; }
.lp .ps-start--leiste .ps-start-btn { justify-content: center; text-align: center; }
.ps-start--leiste .ps-start-fine { text-align: center; margin-left: 0; }

.lp .lp-hero-ctas .ps-start { margin-bottom: 4px; }
/* Beside the scan's button and its fine line the registration keeps its own height, level with the button. */
.lp .lp-hero-ctas:has(> .ps-start) { align-items: flex-start; }
/* Clear of the headline above it, in the hero's own rhythm (the lede below keeps 22px). */
.lp .lp-hero-ed-scan { margin: 24px 0 0; }

/* The tool pages: the scan as a card above the tool's own explanation. */
.lp .ps-tool {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  margin: 0 0 32px; padding: 22px 24px; border-radius: 20px; background: var(--ow-cream); border: 1px solid var(--ow-line);
}
.lp .ps-tool-t { margin: 0 0 4px; font-family: var(--ow-serif); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--ow-ink); }
.lp .ps-tool-d { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--own-fg-2); max-width: 36rem; }
@media (max-width: 720px) {
  .lp .ps-tool { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .lp .ps-tool .ps-start-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ── The dialog ──────────────────────────────────────────────────────────────────────────────── */
body.ps-open { overflow: hidden; }
/* The consent banner docks where the phone's shutter and the dialog's registration sit. The visitor
   opened the scan, so the banner waits until the dialog closes and is back unanswered afterwards. */
body.ps-open .cookie-banner { display: none !important; }
.ps-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.ps-backdrop { position: absolute; inset: 0; background: rgba(5, 7, 12, 0.66); animation: erf-fade .2s both; }
.ps-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column; overflow: hidden;
  width: min(1040px, calc(100vw - 48px)); height: min(740px, calc(100dvh - 48px));
  border-radius: 22px; background: var(--erf-cam); color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: erf-rise .25s both;
}
.ps-panel--pruefen, .ps-panel--datei, .ps-panel--senden { width: min(720px, calc(100vw - 48px)); height: min(560px, calc(100dvh - 48px)); }
.ps-panel--genutzt, .ps-panel--verbindung, .ps-panel--nichts, .ps-panel--fehler, .ps-panel--ausgelastet, .ps-panel--aus, .ps-panel--zuoft {
  width: min(560px, calc(100vw - 48px)); height: auto; max-height: calc(100dvh - 48px); background: var(--erf-paper); color: var(--erf-ink);
}
@media (max-width: 768px) {
  .ps-overlay .ps-panel, .ps-overlay .ps-panel[class*="ps-panel--"] { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
}

/* Camera, upload and the short waits: the app's dark capture stage. */
.ps-stage { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--erf-cam); }
.ps-stage .erf-vf { touch-action: auto; }
.ps-cam-bot { padding: 6px 0 calc(14px + var(--erf-safe-bottom)); }
.ps-file { position: relative; overflow: hidden; cursor: pointer; }
.ps-file input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.ps-file:focus-within { outline: 2px solid var(--erf-gold); outline-offset: 2px; }
.ps-privacy { margin: 10px auto 0; padding: 0 22px; max-width: 30rem; text-align: center; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.58); }
.ps-privacy a { color: var(--erf-gold); text-decoration: underline; }
.erf-drop-zone .ps-privacy { margin-top: 4px; }

/* While OWNY reads and after: the photo with its frames, and the light card beside or under it. */
.ps-scan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); height: 100%; min-height: 0; }
.ps-scan-photo.erf-vf { flex: none; height: 100%; touch-action: auto; }
.ps-close-photo { position: absolute; top: calc(12px + var(--erf-safe-top)); left: 12px; z-index: 6; background: rgba(5, 7, 12, 0.55); }
.ps-scan-card {
  min-height: 0; overflow-y: auto; padding: 22px 22px calc(26px + var(--erf-safe-bottom));
  background: var(--erf-paper); color: var(--erf-ink);
}
@media (max-width: 768px) {
  .ps-scan { display: flex; flex-direction: column; }
  .ps-scan-photo.erf-vf { height: 44dvh; }
  .ps-panel--ergebnis .ps-scan-photo.erf-vf { height: 34dvh; }
  .ps-scan-card { flex: 1; border-radius: 20px 20px 0 0; margin-top: -16px; position: relative; z-index: 2; }
}
.ps-title { margin: 4px 0 6px; font-family: var(--ow-serif); font-size: 28px; font-weight: 600; line-height: 1.08; color: var(--erf-ink); }
.ps-sub { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--erf-muted); }
.ps-voice { margin: 10px 2px 0; font-size: 14px; line-height: 1.45; color: var(--erf-muted); }

/* The trail: the capture's first three steps, rows as in the app. */
.ps-phases { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ps-phase {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
  background: var(--erf-paper); border: 1px solid var(--erf-line); font-size: 14px; font-weight: 600; color: var(--erf-faint);
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.ps-phase .ring { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 1.5px solid var(--erf-line2); display: grid; place-items: center; }
.ps-phase .ring .material-symbols-outlined { font-size: 15px; }
.ps-phase .lbl { flex: 1; min-width: 0; }
.ps-phase .note { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--erf-faint); }
.ps-phase.is-running { color: var(--erf-ink); border-color: var(--erf-gold); box-shadow: 0 0 0 3px rgba(201, 169, 106, .18); }
.ps-phase.is-running .ring { border-color: var(--erf-gold); color: var(--erf-gold2); }
.ps-phase.is-running .ring .material-symbols-outlined { animation: erf-spin 1s linear infinite; }
.ps-phase.is-done { color: var(--erf-ink); }
.ps-phase.is-done .ring { background: var(--erf-ink); border-color: var(--erf-ink); color: var(--erf-gold); }

/* The objects, numbered like their frames on the photo. */
.ps-sec-lbl { margin: 16px 2px 6px; }
.ps-names { list-style: none; counter-reset: ps-fund; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ps-names li { counter-increment: ps-fund; display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.35; animation: erf-rise .3s both; }
.ps-names li::before {
  content: counter(ps-fund); flex: none; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--erf-gold); color: var(--erf-ink); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.ps-names.is-live li::before { background: var(--erf-cream2); }

/* The range of all orientation values together, as the hero of the result. */
.ps-value { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--erf-cream); }
.ps-value-lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--erf-gold2); }
.ps-value-fig { font-family: var(--ow-serif); font-size: 32px; font-weight: 600; line-height: 1.05; color: var(--erf-ink); }
.ps-chip { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--erf-line2); background: var(--erf-paper); font-size: 12px; font-weight: 600; color: var(--erf-muted); }
.ps-warn { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--erf-amberbg); color: var(--erf-amber); font-size: 13.5px; line-height: 1.5; }
.ps-warn b { color: var(--erf-amber); }
.ps-warn .material-symbols-outlined { flex: none; font-size: 20px; margin-top: 1px; }
.ps-warn--info { background: var(--erf-cream); color: var(--erf-muted); }

/* The result (ProbescanDialog.Ergebnis): one card per object — number, name, what OWNY read, the
   value from its lower bound — opening onto what decides its upper bound, read or still open. */
.ps-objs { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; }
.ps-obj { border: 1px solid var(--erf-line); border-radius: 16px; background: var(--erf-paper); overflow: hidden; }
.ps-obj > summary { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; cursor: pointer; list-style: none; }
.ps-obj > summary::-webkit-details-marker { display: none; }
.ps-obj-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--erf-cream); color: var(--erf-ink); font-size: 13px; font-weight: 800; }
.ps-obj-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-obj-t .ps-name { font-size: 16px; font-weight: 700; color: var(--erf-ink); overflow-wrap: break-word; hyphens: auto; }
.ps-obj-s { font-size: 13.5px; color: var(--erf-muted); line-height: 1.35; }
.ps-obj-v { flex: none; font-size: 15px; font-weight: 600; color: var(--erf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-obj-chev { flex: none; font-size: 20px; color: var(--erf-muted); transition: transform .2s; }
.ps-obj[open] .ps-obj-chev { transform: rotate(180deg); }
.ps-obj-body { padding: 12px 16px 6px; background: var(--erf-cream); border-top: 1px solid var(--erf-line); }
.ps-obj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 600; color: var(--erf-ink); }
.ps-obj-head b { font-size: 12.5px; }
.ps-obj-bar { display: flex; gap: 6px; margin: 10px 0 4px; }
.ps-obj-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--erf-line2); }
.ps-obj-bar i.is-on { background: var(--erf-green); }
.ps-feats { list-style: none; margin: 0; padding: 0; }
.ps-feats li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--erf-line); }
.ps-feats li:first-child { border-top: 0; }
.ps-feats li > .material-symbols-outlined { flex: none; font-size: 20px; }
.ps-feats li.is-done > .material-symbols-outlined { color: var(--erf-green); }
.ps-feats li.is-open > .material-symbols-outlined { color: var(--erf-gold2); }
.ps-feat-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ps-feat-t b { font-size: 15px; font-weight: 500; color: var(--erf-ink); }
.ps-feat-t span { font-size: 13px; color: var(--erf-muted); }
.ps-feat-s { flex: none; font-size: 13px; font-weight: 700; }
.ps-feats li.is-done .ps-feat-s { color: var(--erf-green); }
.ps-feats li.is-open .ps-feat-s { color: var(--erf-gold-ink); }

/* The lower bound of all objects, and the bar: what the photo shows filled, the rest dashed and
   locked until the market research. The bar's proportions are fixed — they say nothing about the
   upper bound. */
.ps-value .ps-value-fig { margin-top: 2px; }
.ps-range { display: flex; align-items: center; gap: 0; margin: 14px 0 0; height: 28px; }
.ps-range-fill { flex: 0 0 26%; height: 14px; border-radius: 7px 0 0 7px; background: var(--erf-gold2); }
.ps-range-lock { flex: 1; min-width: 0; margin-left: -4px; display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 8px;
  border: 1.5px dashed var(--erf-line2); border-radius: 14px; background: var(--erf-paper); color: var(--erf-ink);
  font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-range-lock .material-symbols-outlined { font-size: 15px; }
.ps-range-tick { align-self: flex-start; margin: 4px 0 0 calc(26% - 1.2em); font-size: 12.5px; color: var(--erf-muted); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ps-chips .ps-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.ps-chips .ps-chip .material-symbols-outlined { font-size: 15px; }

/* How OWNY determines the upper bound: comparable offers, each with source, price and date — locked. */
.ps-research { margin: 20px 0 0; }
.ps-research h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--erf-ink); }
.ps-research p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--erf-muted); }
.ps-research-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--erf-line); border-radius: 14px; background: var(--erf-paper); }
.ps-research-row > .material-symbols-outlined { flex: none; font-size: 21px; color: var(--erf-gold2); }
.ps-research-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ps-research-t b { font-size: 15px; font-weight: 600; color: var(--erf-ink); }
.ps-research-t span { font-size: 13px; color: var(--erf-muted); }
.ps-research-ph { flex: none; width: 78px; height: 8px; border-radius: 4px; background: var(--erf-cream2); }
.ps-research-lock { flex: none; font-size: 17px !important; color: var(--erf-muted) !important; }

/* On into the registration: one dark button, what happens next, the trial terms, and the slim
   e-mail form one tap away. */
.ps-go { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--erf-line); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ps-go-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; border-radius: 999px;
  background: var(--erf-ink); color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; }
.ps-go-btn:hover { background: var(--erf-ink2); color: #fff; }
.ps-go-btn .material-symbols-outlined { font-size: 20px; }
.ps-go-checks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--erf-ink); }
.ps-go-checks li { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ps-go-checks .material-symbols-outlined { font-size: 18px; color: var(--erf-green); }
.ps-go-fine { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--erf-muted); }
.ps-go-mail { margin: 12px 0 4px; padding: 4px 2px; border: 0; border-bottom: 1.5px solid var(--erf-line2); background: none; color: var(--erf-ink); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ps-go .ps-reg { width: 100%; text-align: left; }

/* The slim registration under the result. */
.ps-reg { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--erf-line); }
.ps-reg-t { margin: 0 0 4px; font-family: var(--ow-serif); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--erf-ink); }
.ps-reg-s { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--erf-gold-ink); }

/* Used, nothing found, a failure, a full day: a light card with what happened and what next. */
.ps-note-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--erf-paper); }
.ps-note-panel .erf-cam-top { height: 56px; }
.ps-top-light .erf-c-ic { background: var(--erf-cream); color: var(--erf-ink); }
.ps-top-light .erf-live { background: var(--erf-cream); color: var(--erf-ink); }
.ps-note { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 26px calc(28px + var(--erf-safe-bottom)); }
.ps-note-ico { font-size: 40px; color: var(--erf-gold2); margin-bottom: 4px; }
.ps-note .ps-reg { align-self: stretch; }
@media (prefers-reduced-motion: reduce) {
  .ps-panel, .ps-backdrop, .ps-names li { animation: none; }
  .ps-phase.is-running .ring .material-symbols-outlined { animation: none; }
}
/* The tool page's hero: the trial scan as its first call to action, between the lede and the trust line. */
.lp.wz .wz-scan { margin: 0 0 22px; }

/* ── One-time purchase dialog (Lifetime, credit packs) ───────────────────────
   Builds on the upgrade dialog (.upg-dialog): the same price/term rows above the
   button and the same consent block. Adds the lead line and the pack quantity
   stepper. docs/lifetime-und-guthabenpakete-plan.md, chapter 6.2. */
.otp-dialog .otp-lead {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ow-ink);
}

.otp-dialog .otp-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 14px;
}

.otp-dialog .otp-qty .oc-btn {
    min-width: 44px;
    padding: 6px 10px;
}

.otp-dialog .otp-qty-value {
    min-width: 7.5em;
    text-align: center;
    font-family: var(--ow-serif);
    font-size: 1.25rem;
    color: var(--ow-ink);
}

/* AI balance: a notice that offers topping up first and the plans as a quieter link. */
.kg .kg-notice-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.kg .kg-notice-link {
    font-size: .82rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: .8;
}

/* ── OWNAMIC OHNE ABO (Lifetime) — LifetimeOffer under every pricing view ──
   docs/lifetime-und-guthabenpakete-plan.md, 6.1/6.1.1. An ink card with champagne accents (filled
   surfaces are ink or champagne only), the question above it in the voice of .lp-tiers-more-q. Full
   width under the full table; as wide as the card block above in the narrow views (.is-compact). */
.lp .lp-lifetime-block { max-width: 940px; margin: 40px auto 0; }
.lp .lp-lifetime-block.is-compact { max-width: 520px; margin-top: 28px; }
.lp .lp-tiers--duo ~ .lp-lifetime-block.is-compact { max-width: 940px; }
.lp .lp-lifetime-q { text-align: center; font-size: 0.98rem; font-weight: 600; color: var(--ow-ink); margin-bottom: 12px; }
.lp .lp-lifetime {
  background: var(--ow-ink); color: white; border: 1px solid var(--ow-champagne); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.lp .lp-lifetime .ll-head { display: flex; align-items: center; gap: 18px; }
.lp .lp-lifetime .ll-inf {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--ow-serif); font-size: 2.6rem; line-height: 1;
  color: var(--ow-champagne); border: 1px solid rgba(201, 169, 106, 0.45);
}
.lp .lp-lifetime h3 { font-family: var(--ow-serif); font-size: 1.6rem; margin: 0; color: white; }
.lp .lp-lifetime .ll-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.lp .lp-lifetime .ll-price-amount { font-family: var(--ow-serif); font-size: 1.9rem; color: var(--ow-champagne); }
.lp .lp-lifetime .ll-price-unit { font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }
.lp .lp-lifetime .ll-tagline { font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }
.lp .lp-lifetime .ll-title { font-weight: 700; font-size: 1.05rem; margin: 6px 0 0; color: white; }
.lp .lp-lifetime .ll-text { margin: 0; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.lp .lp-lifetime .ll-credits {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(201, 169, 106, 0.45); line-height: 1.5; color: white;
}
.lp .lp-lifetime .ll-credits b { color: var(--ow-champagne); }
.lp .lp-lifetime .ll-credits .material-symbols-outlined { color: var(--ow-champagne); flex: 0 0 auto; }
.lp .lp-lifetime .ll-scope { font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); }
.lp .lp-lifetime .ll-foot { margin: 0; font-size: 0.88rem; font-style: italic; color: rgba(255, 255, 255, 0.72); }
.lp .lp-lifetime .ll-cta { align-self: flex-start; background: var(--ow-champagne); color: var(--ow-ink); font-weight: 700; box-shadow: none; }
.lp .lp-lifetime .ll-cta:hover { background: var(--ow-champagne-light); }
.lp .lp-lifetime .ll-owned { display: flex; gap: 8px; align-items: center; color: var(--ow-champagne); font-weight: 600; }
@media (max-width: 760px) {
  .lp .lp-lifetime { padding: 22px 18px; }
  .lp .lp-lifetime .ll-cta { align-self: stretch; justify-content: center; }
}

/* ══════════════ LANDING REVIEW (October 2026) ══════════════
   The pieces the landing-page review added to the shared blocks (Home.razor, FaqComponent.razor,
   PricingCreditQuota.razor) — per-page FAQ groups, the project price, the folded one-time purchase,
   the one-line AI balance. Brand tokens only (ColorHomogenizationGuardTests). */

/* FaqComponent: the general questions folded under "Datenschutz & Tarife" below a page's own (G-09). */
.faq-section .faq-group { margin-top: 18px; border: 1px dashed var(--ow-line); border-radius: 16px; background: var(--ow-paper); }
.faq-section .faq-group-sum {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ow-ink);
}
.faq-section .faq-group-sum::-webkit-details-marker { display: none; }
.faq-section .faq-group-sum .material-symbols-outlined { color: var(--ow-champagne-deep); }
.faq-section .faq-group-chev { margin-left: auto; transition: transform var(--own-dur-base) var(--own-ease); }
.faq-section .faq-group[open] .faq-group-chev { transform: rotate(180deg); }
.faq-section .faq-group > .faq-list { padding: 0 12px 12px; }

/* The price of a project of about three months (G-10), under the plans of the estate and parents' house. */
.lp .lp-project-price {
  display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 720px;
  margin: 22px auto 0; padding: 14px 18px; border: 1px solid var(--ow-line); border-radius: 14px;
  background: var(--ow-cream); font-size: 0.95rem; line-height: 1.5; color: var(--ow-ink);
}
.lp .lp-project-price .material-symbols-outlined { color: var(--ow-champagne-deep); flex: 0 0 auto; }

/* "Lieber einmal zahlen?": the one-time purchase folded under the plan a project needs (NL-09, EH-07). */
.lp .lp-lifetime-fold { max-width: 940px; margin: 22px auto 0; }
.lp .lp-lifetime-fold > summary {
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 0.92rem; font-weight: 600; color: var(--own-fg-2);
}
.lp .lp-lifetime-fold > summary::-webkit-details-marker { display: none; }
.lp .lp-lifetime-fold[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.lp .lp-lifetime-fold > summary + * { margin-top: 14px; }

/* PricingCreditQuota Simple: the balance in one line, the points behind "Details" (OV-05). */
.lp .lp-tier .t-credits--simple .t-credits-body { font-size: 0.95rem; color: var(--own-fg-1); }
.lp .lp-tier .t-credits-details { margin-top: 8px; }
.lp .lp-tier .t-credits-details > summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: 0.82rem; font-weight: 600; color: var(--own-fg-2);
}
.lp .lp-tier .t-credits-details > summary::-webkit-details-marker { display: none; }
.lp .lp-tier .t-credits-details > summary .material-symbols-outlined { font-size: 1.1rem; }
.lp .lp-tier .t-credits-details[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.lp .lp-tier .t-credits-details .t-credits { margin-bottom: 0; border-top: 0; padding-top: 8px; }
.lp .lp-tier.featured .t-credits--simple .t-credits-body,
.lp .lp-tier.featured .t-credits-details > summary { color: rgba(255,255,255,0.85); }

/* Nachlass: "Bis du dich entschieden hast: nur erfassen." — an info box right under the hero (NL-01). */
.lp .lp-nl-notice { background: var(--ow-paper); padding: 28px 0 0; }
.lp .lp-nl-notice-card {
  display: flex; gap: 14px; align-items: flex-start; max-width: 880px; padding: 18px 22px;
  border: 1px solid var(--ow-champagne); border-left-width: 4px; border-radius: 14px; background: var(--ow-cream);
}
.lp .lp-nl-notice-card .material-symbols-outlined { color: var(--ow-champagne-deep); flex: 0 0 auto; margin-top: 2px; }
.lp .lp-nl-notice-card p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--own-fg-1); }
.lp .lp-nl-notice-card b { color: var(--ow-ink); }
.lp .lp-together-wait { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-together-wait .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); }
/* On the Nachlass view the shared space comes first (NL-07). */
.lp .lp-together-grid--space-first .lp-together-card--space { order: -1; }

/* Fristen-Rechner: nothing until the visitor's own day (NL-02); the next heirs under "Erbe ausschlagen" (NL-03). */
.lp .lp-fristen-empty {
  margin: 0; padding: 22px; border: 1px dashed var(--ow-line); border-radius: 16px; background: var(--ow-paper);
  font-size: 0.95rem; line-height: 1.55; color: var(--own-fg-2);
}
.lp .lp-fristen-empty.is-error { border-style: solid; border-color: var(--ow-negative); color: var(--ow-ink); }
.lp .lp-frist-next { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ow-line); font-size: 0.88rem; line-height: 1.5; color: var(--own-fg-2); }

/* Nachlass: "Lohnt sich das Erbe?" — assets and debts on one list before the decision (NL-06). */
.lp .lp-nl-check { background: var(--ow-paper); }
.lp .lp-nl-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.lp .lp-nl-check-list li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ow-line);
  border-radius: 999px; background: white; font-size: 0.95rem; font-weight: 600; color: var(--ow-ink);
}
.lp .lp-nl-check-list .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); }
.lp .lp-nl-check-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; color: var(--ow-gold-ink); }
.lp .lp-nl-check-fine { margin: 14px 0 0; max-width: 880px; font-size: 0.85rem; line-height: 1.55; color: var(--own-fg-2); }
/* The concrete steps to find out assets and debts (October 2026): number, icon, what to do, and what
   OWNAMIC does with it — then the sum line with the way in, and the Verbraucherzentrale's guide. */
/* "Bevor du anfängst": the notice above the cards — nothing sold or given away before the decision. */
.lp .lp-nl-before {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 14px 18px; border-radius: 14px;
  background: var(--ow-cream); border: 1px solid var(--ow-champagne); font-size: 0.95rem; line-height: 1.5; color: var(--ow-ink);
}
.lp .lp-nl-before .material-symbols-outlined { flex: none; margin-top: 1px; font-size: 21px; color: var(--ow-gold-ink); }
.lp .lp-nl-before p { margin: 0; }
.lp .lp-nl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.lp .lp-nl-step {
  display: grid; grid-template-columns: 28px 40px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 18px; border: 1px solid var(--ow-line); border-radius: 16px; background: white;
}
.lp .lp-nl-step .nr {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ow-ink); color: var(--ow-champagne); font: 700 13px/1 var(--own-font-sans);
}
.lp .lp-nl-step .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--ow-cream); color: var(--ow-gold-ink); }
.lp .lp-nl-step .ic .material-symbols-outlined { font-size: 21px; }
.lp .lp-nl-step h3 { margin: 4px 0 6px; font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--ow-ink); }
.lp .lp-nl-step p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--own-fg-2); }
.lp .lp-nl-step p.own { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ow-line); color: var(--ow-ink); }
.lp .lp-nl-step p.own .ownamic-text-span { font-size: inherit; line-height: inherit; color: var(--ow-gold-ink); }
.lp .lp-nl-sum {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 16px; padding: 20px 22px; border-radius: 18px; background: var(--ow-ink); color: #fff;
}
.lp .lp-nl-sum b { display: block; font-family: var(--ow-serif); font-size: 1.35rem; font-weight: 600; color: #fff; }
.lp .lp-nl-sum span { display: block; margin-top: 4px; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.lp .lp-nl-sum .lp-btn { background: var(--ow-champagne); color: var(--ow-ink); box-shadow: none; }
.lp .lp-nl-sum .lp-btn .material-symbols-outlined { display: inline; margin-left: 6px; color: var(--ow-ink); }
.lp .lp-nl-vz {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--ow-line); background: white; color: var(--ow-ink); text-decoration: none; font-size: 0.95rem; line-height: 1.45;
}
.lp .lp-nl-vz > .material-symbols-outlined:first-child { flex: none; font-size: 22px; color: var(--ow-gold-ink); }
.lp .lp-nl-vz > .material-symbols-outlined:last-child { flex: none; margin-left: auto; font-size: 18px; color: var(--ow-gold-ink); }
.lp .lp-nl-vz:hover { border-color: var(--ow-champagne); }
.lp .lp-nl-vz:focus-visible { outline: 2px solid var(--ow-champagne); outline-offset: 2px; }
@media (max-width: 600px) {
  .lp .lp-nl-steps { grid-template-columns: 1fr; }
  .lp .lp-nl-step { grid-template-columns: 26px 36px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .lp .lp-nl-step .ic { width: 36px; height: 36px; }
  .lp .lp-nl-sum .lp-btn { width: 100%; justify-content: center; }
}

/* Zeug loswerden: the example's proceeds right under the hero sentence, labelled "Beispiel" (ZL-04). */
.lp .ax-hero .ax-example {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 500px; margin: 14px 0 0;
  font-size: 0.98rem; line-height: 1.5; color: rgba(255,255,255,.85);
}
.lp .ax-hero .ax-example b { color: var(--ow-champagne); }
.lp .ax-hero .ax-example-k {
  padding: 2px 10px; border: 1px solid rgba(201, 169, 106, 0.55); border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ow-champagne);
}
@media (max-width: 960px) {
  .lp .ax-hero .ax-example { order: 3; max-width: none; }
}

/* Finanzen: Kompass und Steuer (FinanzenKompassSteuer, October 2026) — the design of the short
   „Neue Heizung durchrechnen“: cream grounds, serif headlines with their end in italic gold, ink pills.
   1 · Das Prinzip: the compass (Gesamtbild) and the helm (Haushaltsbuch) as two cards side by side,
       as the app's start page shows them, each with its piece in small. */
.lp .lp-ks { background: var(--ow-paper); }
.lp .lp-ks .lp-section-head h2 em,
.lp .lp-plan .lp-section-head h2 em,
.lp .lp-steuer .lp-section-head h2 em { color: var(--ow-gold-ink); }
.lp .lp-ks-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lp .lp-ks-card { display: flex; flex-direction: column; gap: 16px; padding: 26px; border: 1px solid var(--ow-line); border-radius: 20px; background: var(--ow-cream); }
.lp .lp-ks-card-hd { display: flex; gap: 14px; align-items: flex-start; }
.lp .lp-ks-card h3 { margin: 4px 0 0; font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size); line-height: 1.2; color: var(--ow-ink); }
.lp .lp-ks-ico { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ow-ink); color: var(--ow-champagne); }
.lp .lp-ks-k { font-size: var(--ow-eyebrow-size); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-gold-ink); }
.lp .lp-ks-d { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-ks-points { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.lp .lp-ks-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; line-height: 1.45; color: var(--ow-ink); }
.lp .lp-ks-points .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-champagne-deep); margin-top: 1px; }
/* The Gesamtbild in small: today and the corridor in ten years over the line, its band and the goal. */
.lp .lp-ks-mini,
.lp .lp-ks-month { padding: 16px 18px; border: 1px solid var(--ow-line); border-radius: 16px; background: var(--ow-paper); }
.lp .lp-ks-mini-fig { display: flex; justify-content: space-between; gap: 12px; }
.lp .lp-ks-mini-fig span { display: grid; gap: 2px; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--own-fg-2); }
.lp .lp-ks-mini-fig span + span { text-align: right; }
.lp .lp-ks-mini-fig b { font-family: var(--ow-serif); font-weight: 600; font-size: 1.35rem; letter-spacing: 0; color: var(--ow-ink); font-variant-numeric: lining-nums; }
.lp .lp-ks-mini-ch { position: relative; margin-top: 8px; aspect-ratio: 640 / 200; }
.lp .lp-ks-mini-ch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lp .lp-ks-mini-ch .bd { fill: var(--ow-cream-deep); }
.lp .lp-ks-mini-ch .ln { fill: none; stroke: var(--ow-ink); stroke-width: 3; stroke-linecap: round; }
.lp .lp-ks-mini-ch .goal { stroke: var(--ow-champagne-deep); stroke-width: 2; stroke-dasharray: 8 7; }
.lp .lp-ks-mini-ch .goal-l { position: absolute; left: 0; top: calc(58 / 200 * 100% - 22px); font-size: 0.72rem; font-weight: 600; color: var(--ow-gold-ink); }
/* The month in the household book: what is left, the three flows, the groceries against their budget. */
.lp .lp-ks-month-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lp .lp-ks-month-hd span { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--own-fg-2); }
.lp .lp-ks-month-hd b { font-family: var(--ow-serif); font-weight: 600; font-size: 1.6rem; color: var(--ow-ink); font-variant-numeric: lining-nums; }
.lp .lp-ks-month-io { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ow-line-soft); font-size: 0.8rem; color: var(--own-fg-2); }
.lp .lp-ks-month-io b { font-weight: 600; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.lp .lp-ks-bud .lb { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; color: var(--ow-ink); }
.lp .lp-ks-bud .lb b { font-variant-numeric: tabular-nums; }
.lp .lp-ks-bud .tr { height: 8px; margin-top: 6px; border-radius: 999px; background: var(--ow-cream-deep); overflow: hidden; }
.lp .lp-ks-bud .tr i { display: block; height: 100%; border-radius: inherit; background: var(--ow-champagne); }
.lp .lp-ks-home { display: flex; gap: 12px; align-items: center; max-width: 760px; margin: 26px auto 0; font-size: 0.98rem; line-height: 1.55; color: var(--own-fg-2); text-align: left; }
.lp .lp-ks-home .material-symbols-outlined { flex: 0 0 auto; color: var(--ow-champagne-deep); }

/* 2 · Vorausplanen: three radios switch the plan (CSS only, so it works prerendered): the tabs, the
   plan's words on the left, and on the right the chart of the short — the line, its corridor, the
   dashed „bisher“, the marker with the plan's date, „Hier wird es eng“ and „Kurs anpassen?“ — over
   the month bars of the income. */
.lp .lp-plan { background: var(--ow-cream); }
.lp .lp-plan-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lp .lp-plan-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.lp .lp-plan-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--ow-line); border-radius: 999px; background: var(--ow-paper); color: var(--ow-ink); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lp .lp-plan-tab .material-symbols-outlined { font-size: 1.15rem; color: var(--ow-champagne-deep); }
.lp .lp-plan-tab:hover { border-color: var(--ow-champagne); }
.lp .lp-plan-r-heizung:checked ~ .lp-plan-tabs .lp-plan-t-heizung,
.lp .lp-plan-r-elternzeit:checked ~ .lp-plan-tabs .lp-plan-t-elternzeit,
.lp .lp-plan-r-urlaub:checked ~ .lp-plan-tabs .lp-plan-t-urlaub { background: var(--ow-ink); border-color: var(--ow-ink); color: white; }
.lp .lp-plan-r-heizung:checked ~ .lp-plan-tabs .lp-plan-t-heizung .material-symbols-outlined,
.lp .lp-plan-r-elternzeit:checked ~ .lp-plan-tabs .lp-plan-t-elternzeit .material-symbols-outlined,
.lp .lp-plan-r-urlaub:checked ~ .lp-plan-tabs .lp-plan-t-urlaub .material-symbols-outlined { color: var(--ow-champagne); }
.lp .lp-plan-r-heizung:focus-visible ~ .lp-plan-tabs .lp-plan-t-heizung,
.lp .lp-plan-r-elternzeit:focus-visible ~ .lp-plan-tabs .lp-plan-t-elternzeit,
.lp .lp-plan-r-urlaub:focus-visible ~ .lp-plan-tabs .lp-plan-t-urlaub { outline: 2px solid var(--ow-champagne-deep); outline-offset: 3px; }
/* Only the checked plan's pieces show; display, not opacity, so the line draws itself again on each switch. */
.lp .lp-plan-s { display: none; }
.lp .lp-plan-r-heizung:checked ~ .lp-plan-stage .lp-plan-s-heizung,
.lp .lp-plan-r-elternzeit:checked ~ .lp-plan-stage .lp-plan-s-elternzeit,
.lp .lp-plan-r-urlaub:checked ~ .lp-plan-stage .lp-plan-s-urlaub { display: block; }
.lp .lp-plan-r-heizung:checked ~ .lp-plan-stage .lp-plan-inc .lp-plan-s-heizung,
.lp .lp-plan-r-elternzeit:checked ~ .lp-plan-stage .lp-plan-inc .lp-plan-s-elternzeit,
.lp .lp-plan-r-urlaub:checked ~ .lp-plan-stage .lp-plan-inc .lp-plan-s-urlaub { display: flex; }
.lp .lp-plan-stage { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 28px; align-items: stretch; }
.lp .lp-plan-note { padding: 28px; border: 1px solid var(--ow-line); border-radius: 20px; background: var(--ow-paper); height: 100%; box-sizing: border-box; }
.lp .lp-plan-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border: 1.5px solid var(--ow-champagne-deep); border-radius: 12px; color: var(--ow-champagne-deep); }
.lp .lp-plan-when { display: block; font-size: var(--ow-eyebrow-size); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ow-gold-ink); }
.lp .lp-plan-note h3 { margin: 8px 0 12px; font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; color: var(--ow-ink); }
.lp .lp-plan-note h3 em { font-style: italic; color: var(--ow-gold-ink); }
.lp .lp-plan-note p { margin: 0 0 16px; font-size: 1rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-plan-verdict { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 14px 16px; border-radius: 14px; background: var(--ow-cream); color: var(--ow-ink) !important; }
.lp .lp-plan-verdict b { font-weight: 700; }
.lp .lp-plan-verdict.is-tight .material-symbols-outlined { color: var(--ow-negative); }
.lp .lp-plan-verdict.is-tight b { color: var(--ow-negative); }
.lp .lp-plan-verdict.is-fit .material-symbols-outlined { color: var(--ow-ev-documented); }
.lp .lp-plan-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border: 1px solid var(--ow-line); border-radius: 20px; background: var(--ow-paper); box-shadow: 0 18px 40px rgba(11, 16, 32, 0.06); }
.lp .lp-plan-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--ow-ink); color: rgba(255, 255, 255, 0.88); font-size: 0.72rem; }
.lp .lp-plan-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--ow-champagne); }
.lp .lp-plan-ch { position: relative; aspect-ratio: 640 / 240; margin-top: 30px; }
.lp .lp-plan-ch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp .lp-plan-ch .tight { stroke: var(--ow-negative); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.55; }
.lp .lp-plan-ch .bd { fill: var(--ow-cream-deep); opacity: 0.85; }
.lp .lp-plan-ch .was { fill: none; stroke: var(--ow-champagne-deep); stroke-width: 1.6; stroke-dasharray: 5 6; }
.lp .lp-plan-ch .ln { fill: none; stroke: var(--ow-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: lpPlanDraw 1.4s ease-out both; }
@keyframes lpPlanDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.lp .lp-plan-over { position: absolute; inset: 0; pointer-events: none; animation: lpPlanFade .5s ease-out .5s both; }
@keyframes lpPlanFade { from { opacity: 0; } to { opacity: 1; } }
/* The plan's marker: a dashed rule down the chart, an ink disc with its icon on top, its name and date beside. */
.lp .lp-plan-over .mk { position: absolute; top: -30px; bottom: 0; width: 0; }
.lp .lp-plan-over .mk::before { content: ""; position: absolute; top: 18px; bottom: 0; left: 0; border-left: 1.5px dashed var(--ow-champagne-deep); }
.lp .lp-plan-over .mk-ic { position: absolute; top: 0; left: -17px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ow-ink); color: var(--ow-champagne); box-shadow: 0 0 0 3px var(--ow-paper); }
.lp .lp-plan-over .mk-ic .material-symbols-outlined { font-size: 1.1rem; }
.lp .lp-plan-over .mk-l { position: absolute; top: 5px; left: 24px; padding: 3px 10px; border-radius: 999px; background: var(--ow-ink); color: white; font-size: 0.72rem; white-space: nowrap; }
.lp .lp-plan-over .mk-l em { font-style: normal; color: var(--ow-champagne-light); }
.lp .lp-plan-over .was-l { position: absolute; right: 0; transform: translateY(-140%); font-size: 0.72rem; color: var(--ow-gold-ink); }
/* „Hier wird es eng“: a ring on the lowest point, the words in the signal red, „Kurs anpassen?“ beside. */
.lp .lp-plan-over .lo { position: absolute; width: 0; height: 0; }
.lp .lp-plan-over .lo i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border: 2px solid var(--ow-negative); border-radius: 50%; background: var(--ow-paper); }
.lp .lp-plan-over .lo-l { position: absolute; left: 14px; top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--ow-negative); white-space: nowrap; }
.lp .lp-plan-over .lo-a { position: absolute; left: 150px; top: 2px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--ow-ink); color: white; font-size: 0.72rem; white-space: nowrap; }
.lp .lp-plan-over .lo-a .material-symbols-outlined { font-size: 0.9rem; color: var(--ow-champagne); }
.lp .lp-plan-ax { display: flex; justify-content: space-between; margin-top: 18px; font-size: 0.72rem; color: var(--own-fg-2); }
.lp .lp-plan-inc { height: 30px; }
.lp .lp-plan-inc .bars { align-items: flex-end; gap: 3px; height: 100%; }
.lp .lp-plan-inc .bars i { flex: 1; border-radius: 3px; background: var(--ow-line); transition: height .5s ease; }
.lp .lp-plan-inc .bars i.lo { background: var(--ow-champagne); }
.lp .lp-plan-inc-l { font-size: 0.72rem; color: var(--own-fg-2); }
.lp .lp-plan-foot { display: flex; gap: 10px; align-items: flex-start; max-width: 860px; margin: 22px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--own-fg-2); }
.lp .lp-plan-foot .material-symbols-outlined { flex: 0 0 auto; font-size: 1.15rem; color: var(--ow-champagne-deep); }
@media (prefers-reduced-motion: reduce) {
  .lp .lp-plan-ch .ln, .lp .lp-plan-over { animation: none; }
  .lp .lp-plan-inc .bars i { transition: none; }
}

/* 3 · Mit dem Steuer: the half hour a month as a numbered list, the household book's card beside it
   with the way to its focus and, where the page shows them, the shared spaces for two. */
.lp .lp-steuer { background: var(--ow-paper); }
.lp .lp-steuer .rhs.lp-hhb-contrast { font-family: var(--ow-serif); font-size: 1.3rem; line-height: 1.4; color: var(--ow-ink); }
.lp .lp-steuer .rhs.lp-hhb-contrast b { font-weight: 600; color: var(--ow-gold-ink); }
.lp .lp-steuer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; align-items: start; }
.lp .lp-steuer-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lp .lp-steuer-list li { display: grid; grid-template-columns: 28px 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 18px; border: 1px solid var(--ow-line); border-radius: 14px; background: var(--ow-cream); font-size: 1rem; line-height: 1.45; color: var(--ow-ink); }
.lp .lp-steuer-list .nr { font-family: var(--ow-serif); font-size: 1.4rem; line-height: 1; color: var(--ow-champagne-deep); }
.lp .lp-steuer-list .material-symbols-outlined { color: var(--ow-gold-ink); }
.lp .lp-steuer-then { margin: 18px 0 0; font-family: var(--ow-serif); font-size: 1.3rem; line-height: 1.4; color: var(--ow-ink); }
.lp .lp-steuer-then b { font-weight: 600; color: var(--ow-gold-ink); }
.lp .lp-steuer-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px; border: 1px solid var(--ow-line); border-radius: 20px; background: var(--ow-cream); }
.lp .lp-steuer-card h3 { margin: 4px 0 0; font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-tile-title-size); color: var(--ow-ink); }
.lp .lp-steuer-card p { margin: 0 0 6px; font-size: 1rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-steuer-two { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--ow-line); font-size: 0.94rem; line-height: 1.5; color: var(--own-fg-2); text-decoration: none; }
.lp .lp-steuer-two b { color: var(--ow-ink); }
.lp .lp-steuer-two .material-symbols-outlined { flex: 0 0 auto; color: var(--ow-champagne-deep); }
.lp .lp-steuer-two:hover b { text-decoration: underline; text-decoration-color: var(--ow-champagne); }

@media (max-width: 960px) {
  .lp .lp-ks-pair, .lp .lp-plan-stage, .lp .lp-steuer-grid { grid-template-columns: 1fr; }
  .lp .lp-plan-stage { gap: 18px; }
  /* A phone sees the chart first, the plan's words under it. */
  .lp .lp-plan-card { order: -1; }
}
@media (max-width: 600px) {
  .lp .lp-ks-card, .lp .lp-plan-note, .lp .lp-steuer-card { padding: 20px; }
  .lp .lp-plan-card { padding: 16px 14px 14px; }
  .lp .lp-ks-mini-fig b { font-size: 1.1rem; white-space: nowrap; }
  .lp .lp-plan-tab { padding: 8px 14px; font-size: 0.88rem; }
  .lp .lp-plan-over .lo-a { left: auto; right: auto; top: 30px; left: 14px; }
  .lp .lp-steuer-list li { padding: 12px 14px; font-size: 0.95rem; }
}

/* Finanzen: right before the start guide (FinanzenVorbereitung) — „OWNAMIC berät nicht.“ on the ink of
   the short's closing, the four things to lay out on a cream card beside it, and the registration. */
.lp .lp-fin-honest { position: relative; overflow: hidden; background: var(--ow-ink); color: white; }
.lp .lp-fin-honest::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 420px at 18% 30%, rgba(201, 169, 106, 0.12), transparent 65%); }
.lp .lp-fin-honest-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lp .lp-fin-honest-copy .lp-ks-ico { width: 56px; height: 56px; margin-bottom: 22px; background: transparent; border: 1.5px solid rgba(201, 169, 106, 0.6); }
.lp .lp-fin-honest-copy h2 { margin: 0; font-family: var(--ow-serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; color: white; }
.lp .lp-fin-honest-copy h2 em,
.lp .lp-fin-honest-copy .decide em { font-style: italic; color: var(--ow-champagne-light); }
.lp .lp-fin-honest-copy .lead { margin: 18px 0 0; font-size: 1.08rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.lp .lp-fin-honest-copy .decide { margin: 22px 0 0; font-family: var(--ow-serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; color: white; }
.lp .lp-fin-honest-copy ul { display: grid; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.lp .lp-fin-honest-copy li { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }
.lp .lp-fin-honest-copy li .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne); }
.lp .lp-fin-prep { padding: 30px; border-radius: 22px; background: var(--ow-cream); color: var(--ow-ink); }
.lp .lp-fin-prep h3 { margin: 12px 0 16px; font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.7rem, 2.8vw, 2.2rem); line-height: 1.15; color: var(--ow-ink); }
.lp .lp-fin-prep h3 em { font-style: italic; color: var(--ow-gold-ink); }
.lp .lp-fin-prep ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp .lp-fin-prep li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ow-line); border-radius: 12px; background: var(--ow-paper); font-size: 0.96rem; line-height: 1.45; }
.lp .lp-fin-prep li .material-symbols-outlined { flex: 0 0 auto; color: var(--ow-champagne-deep); }
.lp .lp-fin-prep-note { margin: 16px 0 20px; font-size: 0.94rem; line-height: 1.55; color: var(--own-fg-2); }
.lp .lp-fin-prep .lp-fin-prep-fine { display: block; margin-top: 10px; font-size: 0.8rem; color: var(--own-fg-2); }
@media (max-width: 960px) {
  .lp .lp-fin-honest-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .lp .lp-fin-prep { padding: 20px; }
  .lp .lp-fin-prep .lp-btn { width: 100%; justify-content: center; }
}

/* Finanzen: the Gesamtbild's formulas are one link away („So rechnet das Gesamtbild“). */
.lp .lp-gb-formulas { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ow-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ow-champagne); padding-bottom: 2px; }
.lp .lp-gb-formulas .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-champagne-deep); }

/* Finanzen: the privacy promises as titles only — a shorter section. */
.lp .lp-pillars--compact .lp-pillar { padding-top: 20px; }
.lp .lp-pillars--compact .lp-pillar .p-glyph { margin-bottom: 14px; }
.lp .lp-pillars--compact .lp-pillar h4 { margin: 0; }

/* Finanzen film: the household book is the last chapter now (FIN-03) — the closing card replaces it,
   as it replaces the last chapter of every other film; and today's net worth reads larger than the
   projection beside it (FIN-10). */
.lp-sx .gx-tiles .gx-today b { font-size: 34px; }
.lp-sx .gx-tiles .gx-today ~ div b { font-size: 24px; }
@media (max-width: 600px) {
  .lp-sx .gx-tiles .gx-today b { font-size: 26px; }
  .lp-sx .gx-tiles .gx-today ~ div b { font-size: 18px; }
}

/* Finanzen overview: the receipt scan as the hero's quiet second way, in the registration link's
   place and make (FIN-03) — the button reads as the link it stands in for. */
.lp .ax-hero .ps-start--alt .ps-start-btn {
  padding: 0; min-height: 0; background: none; border: 0; box-shadow: none;
  font-weight: 600; color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(201, 169, 106, 0.6);
}
.lp .ax-hero .ps-start--alt .ps-start-btn:hover { background: none; transform: none; color: #fff; }
.lp .ax-hero .ps-start--alt .ps-start-btn .material-symbols-outlined { color: var(--ow-champagne); }

/* Zeug loswerden: the hero on warm cream instead of the ink (LandingBlocks.LightHero, October 2026)
   — sorting out should look easy and friendly. A sunny champagne glow in one corner, the edition's
   soft undertone in the other, ink text and the promise in gold; the button turns ink with a
   champagne icon, as on the cream edition hero, and the nav above reads ink (.lp-nav--light).
   Every colour of the ink hero that would vanish on cream is restated here. */
.lp .ax-hero.ax-hero--light {
  --axl-text: color-mix(in srgb, var(--ow-ink) 82%, transparent);
  --axl-mute: color-mix(in srgb, var(--ow-ink) 64%, transparent);
  --axl-hair: color-mix(in srgb, var(--ow-ink) 10%, transparent);
  color: var(--ow-ink);
  background:
    radial-gradient(ellipse 70% 60% at 90% 6%, color-mix(in srgb, var(--ow-champagne-light) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 70% at 2% 100%, var(--ow-ed-accent-soft), transparent 72%),
    linear-gradient(170deg, var(--ow-blush) 0%, var(--ow-cream) 60%);
}
.lp .ax-hero.ax-hero--light .who { color: var(--ow-gold-ink); }
.lp .ax-hero.ax-hero--light .who .ico { background: color-mix(in srgb, var(--ow-champagne) 22%, transparent); }
.lp .ax-hero.ax-hero--light h1 { color: var(--ow-ink); }
.lp .ax-hero.ax-hero--light h1 em { color: var(--ow-champagne-deep); }
.lp .ax-hero.ax-hero--light .lede { color: var(--axl-text); }
.lp .ax-hero.ax-hero--light .ax-switch { border-color: var(--axl-hair); background: color-mix(in srgb, var(--ow-paper) 60%, transparent); }
.lp .ax-hero.ax-hero--light .ax-switch-opt { color: var(--axl-text); }
.lp .ax-hero.ax-hero--light .ax-switch-opt:hover { color: var(--ow-ink); background: color-mix(in srgb, var(--ow-ink) 5%, transparent); }
.lp .ax-hero.ax-hero--light .ax-switch-opt.is-active { background: var(--ow-champagne); color: var(--ow-ink); }
.lp .ax-hero.ax-hero--light .ax-start .ps-start-btn,
.lp .ax-hero.ax-hero--light .ax-cta { background: var(--ow-ink); color: #fff; }
.lp .ax-hero.ax-hero--light .ax-start .ps-start-btn:hover,
.lp .ax-hero.ax-hero--light .ax-cta:hover { background: var(--ow-ink-2); }
.lp .ax-hero.ax-hero--light .ax-start .lp-btn .material-symbols-outlined { color: var(--ow-champagne); }
.lp .ax-hero.ax-hero--light .ps-start-fine,
.lp .ax-hero.ax-hero--light .ax-alt-fine { color: var(--axl-mute); }
.lp .ax-hero.ax-hero--light .ax-alt-link { color: var(--ow-ink); }
.lp .ax-hero.ax-hero--light .ax-alt-link .material-symbols-outlined { color: var(--ow-gold-ink); }
.lp .ax-hero.ax-hero--light .ax-alt-link:hover { color: var(--ow-gold-ink); }
.lp .ax-hero.ax-hero--light .ax-alt-link:focus-visible,
.lp .ax-hero.ax-hero--light a.ow-trust-link:focus-visible { outline-color: var(--ow-gold-ink); }
.lp .ax-hero.ax-hero--light .ax-trust { border-top-color: var(--axl-hair); }
.lp .ax-hero.ax-hero--light .ow-trust-link { color: var(--axl-text); }
.lp .ax-hero.ax-hero--light .ow-trust-link .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp .ax-hero.ax-hero--light .ow-trust-link .go { color: var(--axl-mute); }
.lp .ax-hero.ax-hero--light a.ow-trust-link:hover { color: var(--ow-ink); }
.lp .ax-hero.ax-hero--light .ax-steplist li { background: color-mix(in srgb, var(--ow-paper) 60%, transparent); }
.lp .ax-hero.ax-hero--light .ax-steplist .tx b { color: var(--ow-ink); }
.lp .ax-hero.ax-hero--light .ax-steplist .tx span { color: var(--axl-mute); }
/* The live preview's steps under the card: ink on cream, the numbers in gold ink. */
.lp .ax-hero.ax-hero--light .lp-cs .lp-sx { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ow-ink) 40%, transparent); }
.lp .ax-hero.ax-hero--light .lp-cs .cs-tab:hover { background: color-mix(in srgb, var(--ow-ink) 4%, transparent); }
.lp .ax-hero.ax-hero--light .lp-cs .cs-num { border-color: color-mix(in srgb, var(--ow-champagne-deep) 60%, transparent); color: var(--ow-gold-ink); }
.lp .ax-hero.ax-hero--light .lp-cs .cs-t { color: var(--axl-text); }
.lp .ax-hero.ax-hero--light .lp-cs .cs-d { color: var(--axl-mute); }
.lp .ax-hero.ax-hero--light .lp-cs .cs-tab[aria-selected="true"] { background: color-mix(in srgb, var(--ow-champagne) 18%, transparent); }
.lp .ax-hero.ax-hero--light .lp-cs .cs-tab[aria-selected="true"] .cs-num { background: var(--ow-champagne); border-color: var(--ow-champagne); color: var(--ow-ink); }
.lp .ax-hero.ax-hero--light .lp-cs .cs-tab[aria-selected="true"] .cs-t { color: var(--ow-ink); }
/* The example's proceeds under the sentence (ZL-04): ink, the sum in gold ink. */
.lp .ax-hero.ax-hero--light .ax-example { color: var(--axl-text); }
.lp .ax-hero.ax-hero--light .ax-example b { color: var(--ow-gold-ink); }
.lp .ax-hero.ax-hero--light .ax-example-k { border-color: color-mix(in srgb, var(--ow-champagne-deep) 60%, transparent); color: var(--ow-gold-ink); }
@media (max-width: 600px) {
  .lp .ax-hero.ax-hero--light .ax-trust li + li { border-top-color: var(--axl-hair); }
}

/* The sorting short right under the light hero (Home.razor SortingShortSection): the copy, three
   steps and the trial scan beside a 9:16 frame; on a phone the film comes first. A two-click embed
   (AusmistenShort): our thumbnail in the page's language with the champagne play button, whose press
   swaps in the YouTube player. The frame's own background is the German thumbnail, so it stands even
   before the image has loaded. */
.lp .lp-short { padding: 80px 0; background: var(--ow-paper); }
.lp .lp-short-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 56px; align-items: center;
}
.lp .lp-short-copy h2 {
  margin: 16px 0 0; font-family: var(--ow-serif); font-weight: 500; font-size: var(--ow-h2-size);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--own-fg-1); text-wrap: balance;
}
.lp .lp-short-copy h2 em { font-style: italic; font-weight: 500; color: var(--own-primary); }
.lp .lp-short-copy .lede { margin: 16px 0 0; max-width: 520px; font-size: 1.1rem; line-height: 1.6; color: var(--own-fg-2); text-wrap: pretty; }
.lp .lp-short-steps { list-style: none; display: grid; gap: 10px; margin: 24px 0 0; padding: 0; }
.lp .lp-short-steps li { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ow-ink); }
.lp .lp-short-steps .material-symbols-outlined {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--ow-ed-accent-soft); color: var(--ow-ed-accent); font-size: 20px;
}
.lp .lp-short-cta { margin-top: 28px; }
.lp .lp-short-film { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.lp .lp-short-frame {
  position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 28px;
  background: var(--ow-ink) url("video/einblicke/winterfit-ausmisten-thumbnail.jpg") center / cover no-repeat;
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ow-ink) 55%, transparent);
}
.lp .lp-short-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.lp .lp-short-poster { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.lp .lp-short-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* At the top of the poster, over the clothes rack: the middle holds the face and the questions. */
.lp .lp-short-play {
  position: absolute; left: 50%; top: 10%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 22px 12px 16px; border: 0; border-radius: 999px;
  background: var(--ow-champagne); color: var(--ow-ink); font: inherit; font-size: 1rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ow-ink) 65%, transparent); cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.lp .lp-short-poster:hover .lp-short-play { background: var(--ow-champagne-light); transform: translate(-50%, -50%) scale(1.04); }
.lp .lp-short-poster:focus-visible { outline: 3px solid var(--ow-champagne); outline-offset: -3px; border-radius: inherit; }
.lp .lp-short-play .material-symbols-outlined { font-size: 28px; }
@media (prefers-reduced-motion: reduce) {
  .lp .lp-short-play, .lp .lp-short-poster:hover .lp-short-play { transition: none; transform: translate(-50%, -50%); }
}
.lp .lp-short-note { display: flex; gap: 8px; align-items: flex-start; max-width: 340px; margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--own-fg-2); }
.lp .lp-short-note .material-symbols-outlined { flex: none; font-size: 17px; color: var(--ow-champagne-deep); }
/* What the press on the short sends to Google, under the example note (the teaser's consent line). */
.lp .lp-short-consent { margin-top: -6px; font-size: 0.8rem; }
.lp .lp-short-consent a { color: var(--ow-gold-ink); font-weight: 600; }
@media (max-width: 860px) {
  .lp .lp-short { padding: 48px 0 56px; }
  .lp .lp-short-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp .lp-short-film { order: -1; }
  .lp .lp-short-frame { max-width: min(78vw, 320px); border-radius: 26px; }
}

/* Sammlungswert focus: what a photo cannot tell, the honest word on value, before you sell (SW-02 – SW-04). */
.lp .lp-sw-honest { background: var(--ow-paper); padding-top: 32px; }
.lp .lp-sw-limit {
  display: flex; gap: 12px; align-items: flex-start; max-width: 880px; margin: 0 0 22px; padding: 16px 20px;
  border: 1px solid var(--ow-champagne); border-left-width: 4px; border-radius: 14px; background: var(--ow-cream);
  font-size: 1rem; line-height: 1.55; color: var(--ow-ink);
}
.lp .lp-sw-limit .material-symbols-outlined { color: var(--ow-champagne-deep); flex: 0 0 auto; }
.lp .lp-sw-honest-card { max-width: 880px; padding: 24px 28px; border: 1px solid var(--ow-line); border-radius: 18px; background: var(--ow-cream); }
.lp .lp-sw-honest-card h3 { margin: 0 0 8px; font-family: var(--ow-serif); font-size: 1.4rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-sw-honest-card p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-sw-sell { background: var(--ow-paper); }
.lp .lp-sw-sell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.lp .lp-sw-sell-list li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ow-line);
  border-radius: 999px; background: white; font-size: 0.95rem; font-weight: 600; color: var(--ow-ink);
}
.lp .lp-sw-sell-list .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); }
.lp .lp-sw-sell-cta { margin-top: 24px; }

/* OWNY Studio: the scenes are presentation pictures, the originals stay (SAM-06). */
.lp .lp-studio-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--own-fg-2); }
.lp .lp-studio-note .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); margin-top: 1px; }

/* Mein Zuhause: "Die Liste, die du vorher gehabt hättest" as a section of its own (HR-02). */
.lp .lp-list-before { background: var(--ow-paper); }
.lp .lp-list-before-card { max-width: 880px; padding: 28px 32px; border: 1px solid var(--ow-line); border-radius: 18px; background: var(--ow-cream); }
.lp .lp-list-before-card h2 { margin: 8px 0 14px; }
.lp .lp-list-before-card p { margin: 12px 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--own-fg-2); }
.lp .lp-list-before-cases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.lp .lp-list-before-cases li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ow-line);
  border-radius: 999px; background: white; font-size: 0.95rem; font-weight: 600; color: var(--ow-ink);
}
.lp .lp-list-before-cases .material-symbols-outlined { font-size: 18px; color: var(--ow-champagne-deep); }
.lp .lp-list-before-meta { color: var(--ow-ink) !important; }
@media (max-width: 600px) { .lp .lp-list-before-card { padding: 20px; } }

/* Mein Zuhause: Excel list, photos on the phone, doing nothing, OWNAMIC (HR-03). OWNAMIC's card is ink. */
.lp .lp-list-compare { background: var(--ow-paper); }
.lp .lp-list-compare-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp .lp-list-cmp { padding: 22px; border: 1px solid var(--ow-line); border-radius: 16px; background: var(--ow-cream); }
.lp .lp-list-cmp .material-symbols-outlined { color: var(--ow-champagne-deep); }
.lp .lp-list-cmp h3 { margin: 10px 0 6px; font-family: var(--ow-serif); font-size: 1.2rem; font-weight: 600; color: var(--ow-ink); }
.lp .lp-list-cmp p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--own-fg-2); }
.lp .lp-list-cmp.is-ours { background: var(--ow-ink); border-color: var(--ow-ink); }
.lp .lp-list-cmp.is-ours h3 { color: #fff; }
.lp .lp-list-cmp.is-ours p { color: rgba(255, 255, 255, 0.8); }
.lp .lp-list-cmp.is-ours .material-symbols-outlined { color: var(--ow-champagne); }
@media (max-width: 960px) { .lp .lp-list-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp .lp-list-compare-grid { grid-template-columns: minmax(0, 1fr); } }

/* Elternhaus: both occasions, and the way to the deadlines after a death (EH-02, EH-03, EH-08). */
.lp .lp-eh-fork { background: var(--ow-paper); padding: 28px 0 0; }
.lp .lp-eh-occasions { max-width: 880px; margin: 0 0 14px; font-size: 1.05rem; line-height: 1.6; color: var(--ow-ink); }
.lp .lp-eh-fork .lp-nl-notice-card a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-weight: 700; color: var(--ow-gold-ink); }
.lp .lp-eh-fork .lp-nl-notice-card a .material-symbols-outlined { font-size: 18px; }
/* Elternhaus: "Mit der Liste zum Entrümpler." (EH-04). */
.lp .lp-eh-clear { background: var(--ow-paper); }
.lp .lp-eh-clear-h { margin: 8px 0 0; font-family: var(--ow-serif); font-size: 1.5rem; font-weight: 600; color: var(--ow-ink); }

/* The phone's start bars in one line (landing review G-07): the button alone, about 56px with its
   padding, the fine print left to the hero and the pricing — at 375px the old two-line plate took a
   quarter of the screen and covered the Fristen-Rechner's results. */
@media (max-width: 600px) {
  .lp .lp-start-bar {
    padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, color-mix(in srgb, var(--ow-cream) 0%, transparent), var(--ow-cream) 20%);
  }
  .lp .lp-start-bar.lp-start-bar--stage {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ow-ink) 0%, transparent), var(--ow-ink) 20%);
  }
  .lp .lp-start-bar-inner { gap: 0; }
  .lp .lp-start-bar .lp-start-bar-fine,
  .lp .lp-start-bar .ps-start-fine { display: none; }
  .lp .lp-start-bar .lp-start-bar-btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 16px; border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Start guide: one step at a time (landing review G-08). The outgoing step fades out first and is
   hidden once it has; the incoming one fades in after it — at the same spot the two used to cross
   and "Registrieren" stood over "Sortieren". Reduced motion lists every step and keeps them visible. */
@media (prefers-reduced-motion: no-preference) {
  .lp .lp-sg .sg-step { visibility: hidden; transition: opacity 160ms var(--own-ease), visibility 0s linear 160ms; }
  .lp .lp-sg .sg-step.is-now,
  .lp .lp-sg .sg-track.is-end .sg-step[data-at="0"] { visibility: visible; transition: opacity 260ms var(--own-ease) 160ms, visibility 0s linear 160ms; }
}

/* Mein Zuhause: the list can still be made afterwards, from photos the visitor already has. */
.lp .lp-list-before-card .lp-list-before-after {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 18px;
  border: 1px solid var(--ow-champagne); border-radius: 14px; background: white; color: var(--own-fg-1);
}
.lp .lp-list-before-after > .material-symbols-outlined { color: var(--ow-champagne-deep); flex: 0 0 auto; margin-top: 2px; }
.lp .lp-list-before-after b { color: var(--ow-ink); }
.lp .lp-list-before-after a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-weight: 700; color: var(--ow-gold-ink); }
.lp .lp-list-before-after a .material-symbols-outlined { font-size: 18px; }

/* =========================================================================
   OWNAMIC — Cookie banner (CookieConsentBanner.razor)
   One question, two equal answers: the Analytics consent, "Erlauben" and "Ablehnen" in the same
   style, so declining is as easy as allowing. A slim paper bar at the bottom — on a phone the text
   above the two buttons side by side, on a wide screen text and buttons in one row — so the hero
   stays in view. "Details" unfolds the full purpose and the privacy link. No backdrop: the page
   stays usable while the bar is open. (Replaces the Radzen-blue CookieConsentBanner.razor.css.)
   ========================================================================= */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--ow-paper);
    color: var(--ow-ink);
    border-top: 1px solid var(--ow-line);
    box-shadow: 0 -6px 24px rgba(11, 16, 32, 0.10);
    font-size: 14px;
    line-height: 1.45;
}

/* With the app's bottom navigation, the bar docks just above it so neither covers the other. */
@media (max-width: 768px) {
    .cookie-banner--above-nav {
        bottom: calc(var(--own-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px));
        padding-bottom: 12px;
    }
}

.cookie-banner__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cookie-banner__body { min-width: 0; }

.cookie-banner__text { margin: 0; }

.cookie-banner__more {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--ow-gold-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.cookie-banner__details {
    max-height: 40vh;
    overflow-y: auto;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ow-line);
    font-size: 13px;
    color: var(--ow-ink-2, var(--ow-ink));
}

.cookie-banner__details p { margin: 0 0 6px; }

/* "Details": one checkbox per purpose (Analytics, ad measurement), never pre-ticked for a first
   decision, and "Auswahl speichern" to save them one by one. */
.cookie-banner__toggle {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 8px;
    cursor: pointer;
}

    .cookie-banner__toggle input[type="checkbox"] {
        margin-top: 3px;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        accent-color: var(--ow-ink);
    }

.cookie-banner__save {
    margin-top: 4px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ow-ink);
    border-radius: 10px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .cookie-banner__save:hover,
    .cookie-banner__save:focus-visible {
        background: var(--ow-ink);
        color: var(--ow-paper);
    }

.cookie-banner a.cookie-banner__link,
.cookie-banner a.cookie-banner__link:visited { color: var(--ow-gold-ink); }

.cookie-banner__state {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Both answers in one style — neither is the "obvious" button. */
.cookie-banner__btn {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--ow-ink);
    border-radius: 10px;
    background: var(--ow-paper);
    color: var(--ow-ink);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .cookie-banner__btn:hover,
    .cookie-banner__btn:focus-visible {
        background: var(--ow-ink);
        color: var(--ow-paper);
    }

@media (min-width: 769px) {
    .cookie-banner { padding: 14px 24px; }

    .cookie-banner__inner {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .cookie-banner__body { flex: 1; }

    .cookie-banner__actions {
        flex-shrink: 0;
        grid-template-columns: auto auto;
    }
}

/* ── Public object links (docs/objekt-oeffentliche-links-plan.md) ──────────────────────────────
   The finder page behind an object's QR code (/f/{code}, FinderPage.razor) wears the auth card;
   the shared history (/h/{code}, HistoryPage.razor → SharedHistoryLayout) a layout of paper cards of
   its own, which the share dialog's preview renders too. Both are public pages under .lp. The owner's dialog (.opl, ObjectPublicLinksDialog) and the sticker sheet (.qrs,
   QrStickerSheet) live in the app. */
.lp .lp-finder-message { min-height: 140px; resize: vertical; line-height: 1.5; }
.lp .lp-finder-error {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--ow-cream); border: 1px solid var(--ow-champagne);
  color: var(--ow-ink); font-size: 1rem; line-height: 1.45; font-weight: 600;
}
/* The honeypot: out of sight and out of the tab order, but still in the form a bot fills in. */
.lp .lp-finder-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The owner has reported the object missing: the first thing the finder — or someone offered the
   object — reads under the title. A signal, so the rule and the icon take --ow-negative; the ground
   stays cream. */
.lp .lp-finder-missing {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px;
  border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line);
  border-left: 4px solid var(--ow-negative); text-align: left; color: var(--ow-ink);
}
.lp .lp-finder-missing .material-symbols-outlined { color: var(--ow-negative); font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.lp .lp-finder-missing strong { display: block; margin-bottom: 4px; font-size: 1rem; }
.lp .lp-finder-missing p { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.5; }
.lp .lp-finder-missing p:last-child { margin-bottom: 0; }

/* The fixed safety note: a boxed reminder on the reply page, a single line under the finder form. */
.lp .lp-finder-safety {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px;
  border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line);
  border-left: 3px solid var(--ow-champagne); text-align: left;
}
.lp .lp-finder-safety .material-symbols-outlined { color: var(--ow-gold-ink); font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.lp .lp-finder-safety strong { display: block; margin-bottom: 2px; font-size: 0.92rem; color: var(--ow-ink); }
.lp .lp-finder-safety p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--own-fg-2); }
.lp .lp-finder-safety-line {
  display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0;
  font-size: 0.85rem; line-height: 1.5; color: var(--own-fg-2); text-align: left;
}
.lp .lp-finder-safety-line .material-symbols-outlined { color: var(--ow-gold-ink); font-size: 1.05rem; margin-top: 1px; }

/* For someone offered the object: folded, so the finder's form stays the page's purpose. */
.lp .lp-finder-buyer {
  margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ow-line);
  background: var(--ow-paper); text-align: left;
}
.lp .lp-finder-buyer summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--ow-ink); }
.lp .lp-finder-buyer p { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--own-fg-2); }

/* The shared history (SharedHistoryLayout): the object leads, OWNAMIC only signs at the foot. A
   column of paper cards on cream — the hero (photos, name, facts, description), the structure (the
   object and its parts as a tree, only when parts are shared along), the timeline, one card per
   component. The arrangement follows the shell's own width (container queries), not the window's, so
   the share dialog's narrow preview pane shows the phone layout of the same page. */
.lp.lp-history-page {
  min-height: 100vh; padding: 20px 16px 28px; background: var(--ow-cream);
  display: flex; justify-content: center; align-items: flex-start;
}
.lp .lp-history-shell { container-type: inline-size; box-sizing: border-box; width: 100%; max-width: 860px; }
.lp .lp-history-shell.has-parts { max-width: 1120px; }
.lp .lp-history-topbar { display: flex; align-items: center; min-height: 40px; margin: 0 0 14px; }
.lp .lp-history-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lp .lp-history-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lp .lp-history-card {
  box-sizing: border-box; min-width: 0; padding: 22px 18px; border-radius: 18px;
  background: var(--ow-paper); border: 1px solid var(--ow-line);
  box-shadow: 0 24px 60px -36px rgba(11, 16, 32, 0.35);
}
/* An unknown, revoked or expired link: one centred card. */
.lp .lp-history-invalid { max-width: 560px; margin: 0 auto; padding: 32px 24px; text-align: center; }

/* The hero: the main photo large with the others beside it, then name, brand · model, the facts and
   the owner's description. Side by side once the shell is wide enough. */
.lp .lp-history-hero { display: grid; gap: 18px; scroll-margin-top: 16px; }
.lp .lp-history-gallery { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lp .lp-history-gallery-main {
  display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 520px; object-fit: cover; border-radius: 14px;
  background: var(--ow-cream-deep); border: 1px solid var(--ow-line);
}
.lp .lp-history-gallery-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lp .lp-history-gallery-thumbs img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  background: var(--ow-cream-deep); border: 1px solid var(--ow-line);
}
.lp .lp-history-hero-text { min-width: 0; }
.lp .lp-history-hero-text .lp-auth-eyebrow { text-align: left; }
.lp .lp-history-title {
  margin: 4px 0 4px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.9rem;
  font-size: clamp(1.7rem, 5cqi, 2.4rem); line-height: 1.15; color: var(--ow-ink); overflow-wrap: anywhere;
}
.lp .lp-history-sub { margin: 0; font-size: 1rem; color: var(--own-fg-2); }
/* Entries, confirmations, components — counted, as chips under the name. */
.lp .lp-history-facts { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.lp .lp-history-facts li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--ow-cream); border: 1px solid var(--ow-line); font-size: 0.85rem; font-weight: 600; color: var(--ow-ink);
}
.lp .lp-history-facts .material-symbols-outlined { font-size: 1rem; color: var(--ow-gold-ink); }
/* The owner's description of the object, under the name. */
.lp .lp-history-about { margin: 20px 0 0; }
.lp .lp-history-description { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--own-fg-1); overflow-wrap: anywhere; }
/* The description is the owner's HTML (sanitized): its paragraphs and lists keep a quiet rhythm, pictures stay inside the card. */
.lp .lp-history-description > :first-child { margin-top: 0; }
.lp .lp-history-description > :last-child { margin-bottom: 0; }
.lp .lp-history-description :is(p, ul, ol, blockquote, pre, table) { margin: 0 0 .75em; }
.lp .lp-history-description :is(ul, ol) { padding-left: 1.4em; }
.lp .lp-history-description img { max-width: 100%; height: auto; }
.lp .lp-history-description a { color: var(--ow-gold-ink); }
.lp .lp-history-h2 { margin: 0 0 14px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.35rem; color: var(--ow-ink); }
.lp .lp-history-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 18px; }
.lp .lp-history-photos.is-single { grid-template-columns: minmax(0, 220px); }
.lp .lp-history-photos img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px;
  background: var(--ow-cream-deep); border: 1px solid var(--ow-line);
}

/* The structure: the object, then each component indented under the one it sits in, a thin line
   down the side of every nested level. Each entry jumps to its card (in the preview it is no link). */
.lp .lp-history-nav { padding: 18px 12px 14px; }
.lp .lp-history-nav-title {
  margin: 0 8px 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--own-fg-2);
}
.lp .lp-history-tree { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.lp .lp-history-tree-item { position: relative; padding-left: calc(var(--depth, 0) * 16px); }
.lp .lp-history-tree-item:not(.is-root)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--depth, 1) * 16px - 6px);
  border-left: 1px solid var(--ow-line);
}
.lp .lp-history-tree-link {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; border-radius: 12px;
  color: var(--ow-ink); text-decoration: none;
}
.lp a.lp-history-tree-link { transition: background var(--own-dur-base) var(--own-ease); }
.lp a.lp-history-tree-link:hover, .lp a.lp-history-tree-link:focus-visible { background: var(--ow-cream); }
.lp .lp-history-tree-thumb {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; object-fit: cover; background: var(--ow-cream-deep); border: 1px solid var(--ow-line);
  font-size: 1.15rem; color: var(--ow-gold-ink);
}
.lp .lp-history-tree-item.is-root .lp-history-tree-thumb { width: 44px; height: 44px; }
.lp .lp-history-tree-text { display: flex; flex-direction: column; min-width: 0; }
.lp .lp-history-tree-name { font-weight: 600; font-size: 0.95rem; line-height: 1.25; overflow-wrap: anywhere; }
.lp .lp-history-tree-item.is-root .lp-history-tree-name { font-family: var(--ow-serif); font-weight: 500; font-size: 1.1rem; }
.lp .lp-history-tree-meta { font-size: 0.8rem; color: var(--own-fg-2); }

.lp .lp-history-timeline { scroll-margin-top: 16px; }
.lp .lp-history-empty { margin: 0; color: var(--own-fg-2); }
.lp .lp-history-events { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--ow-line); }
.lp .lp-history-event { position: relative; padding: 0 0 20px 14px; }
.lp .lp-history-event::before {
  content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ow-paper); border: 2px solid var(--ow-champagne);
}
.lp .lp-history-event.is-sealed::before { background: var(--ow-champagne); }
.lp .lp-history-event-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.85rem; color: var(--own-fg-2); }
.lp .lp-history-event-type { font-weight: 700; color: var(--ow-gold-ink); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.lp .lp-history-event-name { margin-top: 2px; font-weight: 700; font-size: 1.05rem; color: var(--ow-ink); overflow-wrap: anywhere; }
.lp .lp-history-event-text { margin: 4px 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--own-fg-1); white-space: pre-line; overflow-wrap: anywhere; }
.lp .lp-history-event-cert { margin: 4px 0 0; font-size: 0.9rem; color: var(--own-fg-2); }
/* A mileage entry's reading: the figure a buyer checks the service history by, so it reads in ink. */
.lp .lp-history-event-mileage { margin: 4px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.lp .lp-history-seal {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px;
  background: var(--ow-cream); border: 1px solid var(--ow-champagne); font-size: 0.85rem; font-weight: 600; color: var(--ow-ink);
}
.lp .lp-history-seal .material-symbols-outlined { font-size: 1rem; color: var(--ow-gold-ink); }
.lp .lp-history-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 14px;
  background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 0.92rem; line-height: 1.5; color: var(--own-fg-2);
}
.lp .lp-history-note .material-symbols-outlined { flex: none; font-size: 1.1rem; color: var(--ow-champagne-deep); }
/* The owner's optional note for buyers: the record moves into their own account by QR code after the purchase. */
.lp .lp-history-transfer { display: flex; gap: 14px; align-items: flex-start; background: var(--ow-cream); border-color: var(--ow-champagne); }
.lp .lp-history-transfer-icon { flex: none; font-size: 1.9rem; color: var(--ow-gold-ink); }
.lp .lp-history-transfer-title { margin: 0 0 4px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.25; color: var(--ow-ink); }
.lp .lp-history-transfer-text { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--own-fg-1); }
.lp .lp-history-expiry { margin: -6px 0 0; font-size: 0.85rem; color: var(--own-fg-2); text-align: center; }
/* The objects the shared one contains, when the owner shared them along: one card per component
   after the timeline, with the same photos, description and timeline as the object itself. */
.lp .lp-history-components { display: flex; flex-direction: column; gap: 14px; }
.lp .lp-history-components > .lp-history-h2 { margin: 8px 0 0; }
.lp .lp-history-components-lead { margin: -8px 0 2px; font-size: 0.95rem; color: var(--own-fg-2); }
.lp .lp-history-component { scroll-margin-top: 16px; padding-bottom: 4px; }
.lp .lp-history-component-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.lp .lp-history-component-text { min-width: 0; }
.lp .lp-history-component-head { margin-bottom: 14px; }
.lp .lp-history-component-title {
  margin: 0 0 2px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.25rem; line-height: 1.2;
  color: var(--ow-ink); overflow-wrap: anywhere;
}
.lp .lp-history-component-partof { margin: 2px 0 0; font-size: 0.85rem; color: var(--ow-gold-ink); }
.lp .lp-history-component-description { margin-bottom: 18px; }
.lp .lp-history-h4 {
  margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--own-fg-2);
}
.lp .lp-history-component > .lp-history-empty { margin-bottom: 16px; }
/* "Powered by OWNAMIC" — the page's only mention of OWNAMIC, small at the foot, leading to the landing page. */
.lp .lp-history-powered { display: flex; justify-content: center; margin: 26px 0 0; }
.lp .lp-history-powered-link {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 999px;
  font-size: 0.8rem; color: var(--own-fg-2); text-decoration: none;
}
.lp a.lp-history-powered-link:hover, .lp a.lp-history-powered-link:focus-visible { color: var(--ow-ink); background: var(--ow-paper); }
.lp .lp-history-powered-mark {
  font-family: var(--own-wordmark-font); font-weight: var(--own-wordmark-weight); letter-spacing: var(--own-wordmark-track);
  font-size: 0.85rem; color: var(--ow-ink);
}
@container (min-width: 560px) {
  .lp .lp-history-card { padding: 26px 26px; border-radius: 22px; }
  .lp .lp-history-nav { padding: 20px 14px 16px; }
  .lp .lp-history-hero.has-photos { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: start; }
  .lp .lp-history-component.has-photos .lp-history-component-body { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .lp .lp-history-component .lp-history-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .lp .lp-history-component .lp-history-photos.is-single { grid-template-columns: minmax(0, 1fr); }
}
/* Wide, with parts: the structure stays beside the timeline and the components while they scroll. */
@container (min-width: 920px) {
  .lp .lp-history-shell.has-parts .lp-history-layout { grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
  .lp .lp-history-shell.has-parts .lp-history-hero { grid-column: 1 / -1; }
  .lp .lp-history-shell.has-parts .lp-history-nav { position: sticky; top: 16px; }
}
/* The files attached to a history event (HistoryAttachments): a row of tiles — a picture's thumbnail,
   or the icon of a PDF or video — each opening the viewer below. */
.lp .lp-history-files { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.lp .lp-history-file {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; padding: 6px;
  border-radius: 12px; border: 1px solid var(--ow-line); background: var(--ow-cream); color: var(--ow-ink);
  text-decoration: none; cursor: pointer; transition: border-color var(--own-dur-base) var(--own-ease);
}
.lp .lp-history-file:hover, .lp .lp-history-file:focus-visible { border-color: var(--ow-champagne); }
.lp .lp-history-file img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--ow-cream-deep);
}
.lp .lp-history-file-icon {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1;
  border-radius: 8px; background: var(--ow-paper); font-size: 2rem; color: var(--ow-gold-ink);
}
.lp .lp-history-file-name {
  width: 100%; font-size: 0.75rem; text-align: center; color: var(--own-fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The viewer a history attachment opens in: FilePreview on a paper panel over a dimmed page. */
.lp .lp-history-viewer {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: 16px; outline: none;
}
.lp .lp-history-viewer-backdrop { position: absolute; inset: 0; background: rgba(11, 16, 32, 0.72); }
.lp .lp-history-viewer-panel {
  position: relative; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;
  width: 100%; max-width: 960px; max-height: 100%; overflow: auto; padding: 16px;
  border-radius: 18px; background: var(--ow-paper); border: 1px solid var(--ow-line);
}
.lp .lp-history-viewer-head { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ow-ink); }
.lp .lp-history-viewer-head > .material-symbols-outlined { flex: none; color: var(--ow-gold-ink); }
.lp .lp-history-viewer-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp .lp-history-viewer-count { flex: none; font-size: 0.85rem; color: var(--own-fg-2); font-variant-numeric: tabular-nums; }
.lp .lp-history-viewer-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; border: 1px solid var(--ow-line); background: var(--ow-paper); color: var(--ow-ink); cursor: pointer;
}
.lp .lp-history-viewer-close:hover { background: var(--ow-cream); }
.lp .lp-history-viewer-nav { display: flex; justify-content: space-between; gap: 8px; }
.lp .lp-history-viewer-nav .lp-btn { padding: 8px 16px; }

/* The owner's dialog: the new history link, and the list of links with their state and actions. */
.opl-created { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); }
.opl-list { display: flex; flex-direction: column; gap: 8px; }
.opl-list-title { font-weight: 700; font-size: 0.9rem; color: var(--ow-ink); }
.opl-empty { font-size: 0.9rem; color: var(--own-fg-2); }
.opl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.opl-row.is-inactive { opacity: 0.6; }
.opl-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opl-row-title { font-weight: 600; font-size: 0.92rem; color: var(--ow-ink); }
.opl-row-sub { font-size: 0.82rem; color: var(--own-fg-2); }
.opl-row-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
/* With two actions the row wraps them under its text where the column is narrow (the history dialog). */
.opl-row:has(.opl-row-actions) { flex-wrap: wrap; }
.opl-row:has(.opl-row-actions) .opl-row-text { flex: 1 1 220px; }
.opl-row.is-editing { border-color: var(--ow-champagne); background: var(--ow-cream); }

/* The history dialog: the settings beside the preview of the page once the dialog is wide enough —
   by the dialog's own width (container query), so a narrow window and the app behave alike —
   otherwise one at a time behind the pane switch. */
.opl-history-wrap { container-type: inline-size; }
.opl-history { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* The top bar: the pane switch (narrow only) and, at its right end, the question mark for OWNY's help. */
.opl-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.opl-pane-switch { display: flex; }
.opl-help { flex: none; margin-left: auto; }
.opl-history[data-pane="settings"] .opl-preview { display: none; }
.opl-history[data-pane="preview"] .opl-config { display: none; }
@container (min-width: 860px) {
  .opl-history { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; gap: 22px; }
  .opl-pane-switch { display: none; }
  .opl-topbar { margin-bottom: 4px; }
  .opl-history[data-pane] .opl-config, .opl-history[data-pane] .opl-preview { display: flex; }
  .opl-preview { position: sticky; top: 0; }
}
/* The preview: the shared page itself (SharedHistoryLayout) on its cream ground, scrolling in a frame. */
.opl-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.opl-preview-head { display: flex; flex-direction: column; gap: 2px; }
.opl-preview-title { font-weight: 700; font-size: 0.9rem; color: var(--ow-ink); }
.opl-preview-lead { font-size: 0.82rem; color: var(--own-fg-2); }
.opl-preview-frame { max-height: 72dvh; overflow: auto; border-radius: 16px; border: 1px solid var(--ow-line); background: var(--ow-cream); }
.opl-preview-frame .lp.lp-history-page.is-preview { min-height: 0; padding: 14px 12px 16px; }
.opl-preview-empty { display: flex; justify-content: center; padding: 40px 16px; }

/* What the page shows: one switch per kind of content, with a line saying what it covers. */
.opl-section { display: flex; flex-direction: column; gap: 8px; }
.opl-section-title { font-weight: 700; font-size: 0.9rem; color: var(--ow-ink); }
.opl-section-hint { margin-top: -4px; font-size: 0.82rem; line-height: 1.45; color: var(--own-fg-2); }
.opl-toggle {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--ow-line); background: var(--ow-paper);
}
.opl-toggle .rz-switch { flex: none; margin-top: 1px; }
.opl-toggle.is-disabled { opacity: 0.6; }
.opl-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; cursor: pointer; }
.opl-toggle-label { font-weight: 600; font-size: 0.92rem; color: var(--ow-ink); }
.opl-toggle-hint { font-size: 0.8rem; line-height: 1.45; color: var(--own-fg-2); }

/* Objects and entries: the object, then each component indented under the one it sits in, each with
   its entries ticked unless left out. A component that is left out greys out with what it contains. */
.opl-objects { display: flex; flex-direction: column; gap: 8px; }
.opl-object {
  margin-left: calc(var(--depth, 0) * 14px); padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--ow-line); background: var(--ow-paper);
}
.opl-object.is-root { background: var(--ow-cream); }
.opl-object.is-off { opacity: 0.65; }
.opl-object-head { display: flex; align-items: center; gap: 10px; }
.opl-object-head .rz-chkbox { flex: none; }
.opl-object-text { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; cursor: pointer; }
.opl-object-name { font-weight: 700; font-size: 0.92rem; color: var(--ow-ink); overflow-wrap: anywhere; }
.opl-object-sub { font-size: 0.8rem; color: var(--ow-gold-ink); }
.opl-object-empty { margin-top: 6px; }
.opl-link-btn {
  flex: none; padding: 2px 4px; border: 0; background: none; font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--ow-gold-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.opl-events { display: flex; flex-direction: column; list-style: none; margin: 8px 0 0; padding: 0; }
.opl-event { display: flex; align-items: flex-start; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--ow-line); }
.opl-event .rz-chkbox { flex: none; margin-top: 2px; }
.opl-event.is-off .opl-event-text { opacity: 0.55; }
.opl-event-text { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; cursor: pointer; }
.opl-event-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 0.78rem; color: var(--own-fg-2); }
.opl-event-type { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ow-gold-ink); }
.opl-event-name { font-weight: 600; font-size: 0.9rem; color: var(--ow-ink); overflow-wrap: anywhere; }
.opl-event-icons { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ow-gold-ink); }
.opl-event-icons .material-symbols-outlined { font-size: 1.05rem; }
.opl-event-files { display: inline-flex; align-items: center; gap: 1px; }
.opl-event-files.is-off { opacity: 0.4; }

/* Adjusting an existing link: a banner above the settings, and the note once it is saved. */
.opl-editing {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; outline: none;
  background: var(--ow-cream); border: 1px solid var(--ow-champagne); font-size: 0.88rem; line-height: 1.5; color: var(--ow-ink);
}
.opl-editing .material-symbols-outlined { flex: none; color: var(--ow-gold-ink); }
.opl-saved { display: flex; gap: 8px; align-items: center; font-size: 0.88rem; color: var(--ow-ink); }
.opl-saved .material-symbols-outlined { color: var(--ow-gold-ink); }

/* "Als vermisst melden": the switch with a line under it. While the report stands the box takes the
   signal rule on the left, the way the finder page shows it. */
.opl-missing { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.opl-missing.is-on { background: var(--ow-cream); border-left: 4px solid var(--ow-negative); }
.opl-missing-label { font-weight: 600; color: var(--ow-ink); }
.opl-missing-text { font-size: 0.85rem; line-height: 1.5; color: var(--own-fg-2); }

/* Sticker tips (StickerTips.razor) in the finder dialog and on the sticker sheet. */
.opl-tips { padding: 12px 14px; border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); }
.opl-tips-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--ow-ink); }
.opl-tips-title .material-symbols-outlined { font-size: 1.1rem; color: var(--ow-gold-ink); }
.opl-tips ul { margin: 8px 0 0; padding-left: 20px; }
.opl-tips li { font-size: 0.85rem; line-height: 1.55; color: var(--own-fg-2); margin-bottom: 4px; }
.own-canvas.qrs .opl-tips { margin: 0 0 16px; }

/* OWNY Hub: all recent objects at once, as a sticker sheet. */
.ohq-sheet {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: var(--ow-ink); color: var(--ow-paper); font: inherit; font-weight: 600; cursor: pointer;
}

/* The sticker sheet: an A4 page of labels in millimetres. On screen it is a preview that may scroll
   sideways on a phone; in print it is all there is. The A4 page without margins (label sheets are
   cut to the edge) is set by the page itself (QrStickerSheet, HeadContent): an @page rule here would
   apply to every page anyone prints. */
.own-canvas.qrs .qrs-count { margin: 0 0 12px; font-weight: 600; color: var(--ow-ink); }
.own-canvas.qrs .qrs-actions { margin-bottom: 16px; }
.qrs-sheet {
  box-sizing: border-box; width: 210mm; min-height: 297mm; display: grid; align-content: start;
  background: #fff; color: #000; overflow: hidden;
}
.own-canvas.qrs .qrs-sheet { margin: 0 auto; box-shadow: 0 10px 40px rgba(11, 16, 32, 0.15); }
.qrs-sheet--l3x8 { grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37mm; padding: 0.5mm 0; }
.qrs-sheet--l4x10 { grid-template-columns: repeat(4, 48.5mm); grid-auto-rows: 25.4mm; padding: 21.5mm 8mm; }
.qrs-sheet--l2x4 { grid-template-columns: repeat(2, 105mm); grid-auto-rows: 74mm; padding: 0.5mm 0; }
.qrs-label { box-sizing: border-box; display: flex; align-items: center; gap: 2.5mm; padding: 2.5mm 3mm; overflow: hidden; }
.qrs-label .qrs-code { flex: none; width: 31mm; height: 31mm; }
.qrs-label .qrs-code svg { display: block; width: 100%; height: 100%; }
.qrs-sheet--l4x10 .qrs-label .qrs-code { width: 20mm; height: 20mm; }
.qrs-sheet--l2x4 .qrs-label { flex-direction: column; justify-content: center; text-align: center; }
.qrs-sheet--l2x4 .qrs-label .qrs-code { width: 48mm; height: 48mm; }
.qrs-text { display: flex; flex-direction: column; gap: 1mm; min-width: 0; font-family: Arial, Helvetica, sans-serif; }
.qrs-cta { font-size: 9pt; font-weight: 700; line-height: 1.15; }
.qrs-name { font-size: 7.5pt; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qrs-brand { font-size: 6.5pt; letter-spacing: 0.18em; }
.qrs-sheet--l4x10 .qrs-cta { font-size: 7pt; }
.qrs-sheet--l4x10 .qrs-name { font-size: 6pt; -webkit-line-clamp: 1; }
.qrs-sheet--l4x10 .qrs-brand { font-size: 5.5pt; }
.qrs-sheet--l2x4 .qrs-cta { font-size: 12pt; }
.qrs-sheet--l2x4 .qrs-name { font-size: 9pt; }
@media print {
  body:has(.qrs-sheet) * { visibility: hidden; }
  body:has(.qrs-sheet) .qrs-sheet,
  body:has(.qrs-sheet) .qrs-sheet * { visibility: visible; }
  body:has(.qrs-sheet) .qrs-sheet { position: absolute; left: 0; top: 0; box-shadow: none; }
  .qrs-noprint { display: none !important; }
}

/* ── PHONE MENU (LandingMenu.razor) ─────────────────────────────────────────
   The public navs' phone menu, modelled on pexels.com: a round toggle in the nav row opens a
   full-screen cream sheet — brand and × at the top, the start page, the editions indented under
   their heading, prices, blog, a folded "Über uns", then the language and the sign-in. It takes
   the language dropdown's place from 720px down; above that the toggle is hidden and the nav keeps
   its links and dropdown. At the end of the file so it wins over the nav's 720/400px rules, which
   reach into the sheet through `.lp-nav-cta`. */
.lp .lp-mmenu { display: none; }

@media (max-width: 720px) {
  .lp .lp-nav-cta:has(.lp-mmenu) > .lang-select { display: none; }
  .lp .lp-mmenu { display: block; flex: none; }
  /* Brand, "Einloggen" and the toggle share one row: 371px at the nav's own spacing, more than a
     360–375px phone has. The gaps and the sign-in's padding tighten so the row fits at 360px;
     below that the sign-in drops its icon (further down). */
  .lp .lp-nav .lp-nav-inner:has(.lp-mmenu) { gap: 8px; }
  .lp .lp-nav .lp-nav-cta:has(.lp-mmenu) { gap: 4px; }
  .lp .lp-nav .lp-nav-cta:has(.lp-mmenu) .lp-signin { padding: 0 4px; }
  .lp .lp-nav-brand { min-width: 0; }

  .lp .lp-mmenu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer; list-style: none;
    background: rgba(255,255,255,0.10); color: white;
    border: 1px solid rgba(255,255,255,0.22);
    transition: background var(--own-dur-fast), border-color var(--own-dur-fast);
  }
  .lp .lp-mmenu-toggle::-webkit-details-marker { display: none; }
  .lp .lp-mmenu-toggle .material-symbols-outlined { font-size: 1.4rem; }
  .lp .lp-mmenu-toggle:hover { background: rgba(255,255,255,0.16); }
  .lp .lp-mmenu-toggle:focus-visible { outline: 3px solid var(--ow-champagne-light); outline-offset: 2px; }
  .lp .lp-nav.lp-nav--light .lp-mmenu-toggle {
    background: var(--ow-cream); color: var(--ow-ink); border-color: var(--ow-line);
  }
  .lp .lp-nav.lp-nav--light .lp-mmenu-toggle:hover { border-color: var(--ow-champagne); }
  .lp .lp-nav.lp-nav--light .lp-mmenu-toggle:focus-visible { outline-color: var(--ow-gold-ink); }

  /* The nav is its own stacking layer (z-index 20); lifted while the sheet is open so the sticky
     section bar and the start bar stay under it. The page behind stops scrolling. */
  .lp .lp-nav:has(.lp-mmenu[open]) { z-index: 1300; }
  html:has(.lp-mmenu[open]), body:has(.lp-mmenu[open]), .rz-body:has(.lp-mmenu[open]) { overflow: hidden; }

  .lp .lp-mmenu-sheet {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; flex-direction: column;
    background: var(--ow-cream); color: var(--ow-ink);
    overflow-y: auto; overscroll-behavior: contain;
    animation: lpMmenuIn var(--own-dur-base, 0.2s) var(--own-ease, ease) both;
  }

  .lp .lp-mmenu-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px; background: var(--ow-cream);
    border-bottom: 1px solid var(--ow-line);
  }
  .lp .lp-mmenu-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .lp .lp-mmenu-brand img { height: 1.7rem; width: auto; display: block; }
  .lp .lp-mmenu-brand .hero-logo-text-span { color: var(--ow-ink); font-size: 1.32rem; margin: 0; }
  .lp .lp-mmenu-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: var(--ow-paper); color: var(--ow-ink); border: 1px solid var(--ow-line);
  }
  .lp .lp-mmenu-close .material-symbols-outlined { font-size: 1.4rem; }
  .lp .lp-mmenu-close:hover,
  .lp .lp-mmenu-close:focus-visible { border-color: var(--ow-champagne); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-champagne) 22%, transparent); }

  .lp .lp-mmenu-body { flex: 1 0 auto; padding: 12px 20px 8px; }
  .lp .lp-mmenu-list,
  .lp .lp-mmenu-sub { list-style: none; margin: 0; padding: 0; }

  .lp .lp-mmenu-item {
    display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 6px;
    border-radius: 12px; cursor: pointer; list-style: none;
    font-size: 1.08rem; font-weight: 600; color: var(--ow-ink); text-decoration: none;
  }
  .lp .lp-mmenu-item::-webkit-details-marker { display: none; }
  .lp .lp-mmenu-item > .material-symbols-outlined { font-size: 1.45rem; color: var(--ow-gold-ink); }
  .lp a.lp-mmenu-item:hover,
  .lp summary.lp-mmenu-item:hover { background: color-mix(in srgb, var(--ow-champagne) 14%, transparent); }
  .lp .lp-mmenu-item--group { cursor: default; }

  /* The editions and the pages behind "Über uns", indented under their heading's text. */
  .lp .lp-mmenu-sub { margin: 0 0 6px 46px; border-left: 1px solid var(--ow-line); }
  .lp .lp-mmenu-subitem {
    display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px;
    border-radius: 0 12px 12px 0; font-size: 1rem; font-weight: 500;
    color: var(--own-fg-2); text-decoration: none;
  }
  .lp .lp-mmenu-subitem .material-symbols-outlined { font-size: 1.2rem; color: var(--ow-champagne-deep); }
  .lp .lp-mmenu-subitem:hover { color: var(--ow-ink); background: color-mix(in srgb, var(--ow-champagne) 14%, transparent); }
  .lp .lp-mmenu-subitem.is-active {
    color: var(--ow-ink); font-weight: 700;
    background: color-mix(in srgb, var(--ow-champagne) 22%, transparent);
    box-shadow: inset 2px 0 0 var(--ow-champagne-deep);
  }

  .lp .lp-mmenu-caret { margin-left: auto; font-size: 1.3rem; color: var(--own-fg-2); transition: transform var(--own-dur-fast); }
  .lp .lp-mmenu-fold[open] .lp-mmenu-caret { transform: rotate(180deg); }

  /* The language: label left, the existing dropdown right, between two hairlines. */
  .lp .lp-mmenu-lang {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 10px; padding: 12px 6px;
    border-top: 1px solid var(--ow-line); border-bottom: 1px solid var(--ow-line);
  }
  .lp .lp-mmenu-lang-label { display: flex; align-items: center; gap: 16px; font-size: 1.08rem; font-weight: 600; }
  .lp .lp-mmenu-lang-label .material-symbols-outlined { font-size: 1.45rem; color: var(--ow-gold-ink); }
  .lp .lp-nav .lp-mmenu .lang-select { align-self: center; width: auto; }
  .lp .lp-nav .lp-mmenu .lang-select .lang-select-trigger {
    padding: 8px 12px; border: 1px solid var(--ow-line); border-radius: 999px;
    background: var(--ow-paper); color: var(--ow-ink); font-size: 0.95rem;
  }
  .lp .lp-nav .lp-mmenu .lang-select .lang-select-code { display: inline; }
  .lp .lp-nav .lp-mmenu .lang-select .lang-select-menu { left: auto; right: 0; color: var(--ow-ink); }

  /* "Einloggen" stays in view at the foot of the sheet, however far the list is scrolled. */
  .lp .lp-mmenu-foot {
    position: sticky; bottom: 0;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
    background: var(--ow-cream); border-top: 1px solid var(--ow-line);
  }
  .lp .lp-nav .lp-mmenu-foot .lp-btn.lp-mmenu-signin {
    width: 100%; justify-content: center; padding: 15px 22px; font-size: 1rem;
    background: var(--ow-ink); color: white;
  }
  .lp .lp-nav .lp-mmenu-foot .lp-btn.lp-mmenu-signin:hover { background: var(--ow-ink-2); }
  .lp .lp-nav .lp-mmenu-foot .lp-btn.lp-mmenu-signin:focus-visible { outline: 3px solid var(--ow-gold-ink); outline-offset: 2px; }
}

/* The narrowest phones: "Einloggen" keeps its word and drops its icon, so the toggle stays in the row. */
@media (max-width: 359px) {
  .lp .lp-nav .lp-nav-cta:has(.lp-mmenu) .lp-signin .material-symbols-outlined { display: none; }
}

@keyframes lpMmenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp .lp-mmenu-sheet { animation: none; } }

/* =========================================================================
   FINANZEN ONBOARDING (.own-canvas.fs) — FinanzenStartPage.razor,
   docs/finanzen-onboarding.md. The compass first, then the helm: a greeting
   with a two-part animation, the choice between the bank statement and
   OWNY's questions, the export told in three pictures, the shelves OWNY fills,
   the loan figures a statement cannot know, the first Gesamtbild and one
   expense. Rendered composed; finanzenStart.js (GSAP) animates every step
   into that state and does nothing under prefers-reduced-motion. Filled
   surfaces are ink or champagne only.
   ========================================================================= */
.own-canvas.fs { max-width: 1120px; padding-top: 8px; }
.own-canvas.fs .fs-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 0 18px; border-bottom: 1px solid var(--ow-line); margin-bottom: 26px;
}
.own-canvas.fs .fs-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ow-gold-ink); }
.own-canvas .fs-orb {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--ow-cream); border: 1px solid var(--ow-line); overflow: hidden;
}
.own-canvas .fs-orb img, .own-canvas .fs-orb svg { width: 34px; height: 34px; }
.own-canvas.fs .fs-path { display: none; gap: 6px; margin: 0; padding: 0; list-style: none; }
.own-canvas.fs .fs-path li {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--ow-line); font-size: 0.82rem; font-weight: 600; color: var(--own-fg-3);
}
.own-canvas.fs .fs-path li .material-symbols-outlined { font-size: 1.05rem; }
.own-canvas.fs .fs-path li.is-on { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }
.own-canvas.fs .fs-path li.is-done { color: var(--ow-gold-ink); }
@media (min-width: 720px) { .own-canvas.fs .fs-path { display: flex; } }
.own-canvas.fs .fs-later { border: 0; background: none; padding: 8px 4px; font: inherit; font-weight: 600; color: var(--own-fg-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.own-canvas.fs .fs-later:hover { color: var(--ow-ink); }

.own-canvas.fs .fs-eyebrow { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-gold-ink); }
.own-canvas.fs .fs-title { margin: 0 0 12px; font-family: var(--ow-serif); font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.1; color: var(--ow-ink); }
.own-canvas.fs .fs-title em { color: var(--ow-gold-ink); }
.own-canvas.fs .fs-lead { margin: 0 0 24px; max-width: 640px; font-size: 1.05rem; line-height: 1.55; color: var(--own-fg-2); }
.own-canvas.fs .fs-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 26px; }
.own-canvas.fs .fs-note { margin: 18px 0 0; font-size: 0.88rem; color: var(--own-fg-2); }
.own-canvas.fs .fs-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 8px 2px; border: 0; background: none;
    font: inherit; font-weight: 600; color: var(--own-fg-2); cursor: pointer;
}
.own-canvas.fs .fs-link:hover { color: var(--ow-ink); }
.own-canvas.fs .fs-error { margin: 12px 0 0; color: var(--ow-negative); font-weight: 600; }

/* OWNY speaking: avatar and a serif line, a quieter second line under it. */
.own-canvas.fs .fs-bubble { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.own-canvas.fs .fs-bubble-tx {
    position: relative; padding: 14px 18px; border-radius: 4px 18px 18px 18px;
    background: var(--ow-paper); border: 1px solid var(--ow-line); max-width: 720px;
}
.own-canvas.fs .fs-bubble-t { margin: 0; font-family: var(--ow-serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25; color: var(--ow-ink); }
.own-canvas.fs .fs-bubble-h { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--own-fg-2); }

/* Greeting: the compass and the helm. */
.own-canvas.fs .fs-hero { max-width: 900px; }
.own-canvas.fs .fs-duo { display: grid; gap: 14px; align-items: center; }
@media (min-width: 760px) { .own-canvas.fs .fs-duo { grid-template-columns: 1fr auto 1fr; } }
.own-canvas.fs .fs-duo-card {
    display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px;
    background: var(--ow-paper); border: 1px solid var(--ow-line);
}
.own-canvas.fs .fs-duo-card b { font-family: var(--ow-serif); font-weight: 500; font-size: 1.25rem; color: var(--ow-ink); }
.own-canvas.fs .fs-duo-card span { color: var(--own-fg-2); line-height: 1.45; }
.own-canvas.fs .fs-duo-arrow { justify-self: center; color: var(--ow-gold-ink); font-size: 1.8rem; transform: rotate(90deg); }
@media (min-width: 760px) { .own-canvas.fs .fs-duo-arrow { transform: none; } }
.own-canvas.fs .fs-duo-svg { width: 100%; height: auto; margin-bottom: 8px; }
.own-canvas.fs .fs-svg-frame { fill: var(--ow-cream); stroke: var(--ow-line); }
.own-canvas.fs .fs-k-ring { fill: var(--ow-paper); stroke: var(--ow-ink); stroke-width: 2; }
.own-canvas.fs .fs-k-hub { fill: var(--ow-ink); }
.own-canvas.fs .fs-k-north { fill: var(--ow-champagne-deep); }
.own-canvas.fs .fs-k-south { fill: var(--own-fg-3); }
.own-canvas.fs .fs-k-band { fill: var(--ow-champagne); fill-opacity: 0.22; }
.own-canvas.fs .fs-k-line { fill: none; stroke: var(--ow-ink); stroke-width: 3; stroke-linecap: round; }
.own-canvas.fs .fs-k-dot { fill: var(--ow-champagne-deep); }
.own-canvas.fs .fs-s-rim { fill: none; stroke: var(--ow-ink); stroke-width: 4; }
.own-canvas.fs .fs-s-hub { fill: var(--ow-champagne-deep); }
.own-canvas.fs .fs-s-spoke { fill: none; stroke: var(--ow-ink); stroke-width: 2.5; stroke-linecap: round; }
.own-canvas.fs .fs-s-bar { fill: var(--ow-ink); fill-opacity: 0.85; }
.own-canvas.fs .fs-s-bar.is-gold { fill: var(--ow-champagne); fill-opacity: 1; }
.own-canvas.fs .fs-s-course { fill: none; stroke: var(--ow-champagne-deep); stroke-width: 2.5; stroke-dasharray: 6 5; }
.own-canvas.fs .fs-s-tip { fill: var(--ow-champagne-deep); }

/* The choice of the way in. */
.own-canvas.fs .fs-choices { display: grid; gap: 14px; }
@media (min-width: 760px) { .own-canvas.fs .fs-choices { grid-template-columns: 1fr 1fr; } }
.own-canvas.fs .fs-choice {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; text-align: left; cursor: pointer;
    border-radius: 22px; background: var(--ow-paper); border: 1px solid var(--ow-line); font: inherit; color: var(--ow-ink);
    transition: border-color var(--own-dur-base) var(--own-ease), transform var(--own-dur-base) var(--own-ease), box-shadow var(--own-dur-base) var(--own-ease);
}
.own-canvas.fs .fs-choice:hover, .own-canvas.fs .fs-choice:focus-visible { border-color: var(--ow-champagne-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 16, 32, 0.08); outline: none; }
.own-canvas.fs .fs-choice-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px;
    background: var(--ow-ink); color: var(--ow-champagne); font-size: 24px;
}
.own-canvas.fs .fs-choice-t { font-family: var(--ow-serif); font-size: 1.35rem; }
.own-canvas.fs .fs-choice-d { color: var(--own-fg-2); line-height: 1.5; }
.own-canvas.fs .fs-choice-meta { margin-top: auto; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ow-gold-ink); }
/* „Überspringen": the quiet third way, a slim dashed row under the two — the Gesamtbild can wait. */
.own-canvas.fs .fs-choice--skip { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: transparent; border-style: dashed; }
@media (min-width: 760px) { .own-canvas.fs .fs-choice--skip { grid-column: 1 / -1; } }
.own-canvas.fs .fs-choice--skip .fs-choice-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--ow-cream); border: 1px solid var(--ow-line); color: var(--ow-ink); font-size: 20px; }
.own-canvas.fs .fs-choice-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.own-canvas.fs .fs-choice--skip .fs-choice-t { font-size: 1.1rem; }
.own-canvas.fs .fs-choice--skip .fs-choice-d { font-size: 0.92rem; }

/* The export in three pictures, then „Hier hochladen". */
.own-canvas.fs .fs-ex-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: fsex; }
@media (min-width: 760px) { .own-canvas.fs .fs-ex-steps { grid-template-columns: repeat(3, 1fr); } }
.own-canvas.fs .fs-ex-step {
    counter-increment: fsex; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 20px;
    background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--own-fg-2); line-height: 1.45;
}
.own-canvas.fs .fs-ex-step b { color: var(--ow-ink); }
.own-canvas.fs .fs-ex-step b::before { content: counter(fsex) " · "; color: var(--ow-gold-ink); }
.own-canvas.fs .fs-ex-art {
    position: relative; display: flex; align-items: center; justify-content: center; height: 96px; margin-bottom: 6px;
    border-radius: 14px; background: var(--ow-cream); border: 1px solid var(--ow-line);
}
.own-canvas.fs .fs-ex-window { display: flex; flex-direction: column; gap: 5px; width: 70%; padding: 8px; border-radius: 8px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.own-canvas.fs .fs-ex-bar { height: 6px; width: 40%; border-radius: 3px; background: var(--ow-ink); }
.own-canvas.fs .fs-ex-row { height: 6px; border-radius: 3px; background: var(--ow-line); }
.own-canvas.fs .fs-ex-row.is-gold { background: var(--ow-champagne); }
.own-canvas.fs .fs-ex-cal { display: grid; grid-template-columns: repeat(6, 18px); gap: 6px; }
.own-canvas.fs .fs-ex-month { width: 18px; height: 22px; border-radius: 4px; border: 1px solid var(--ow-line); background: var(--ow-paper); }
.own-canvas.fs .fs-ex-month.is-on { background: var(--ow-ink); border-color: var(--ow-ink); }
.own-canvas.fs .fs-ex-file { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ow-ink); }
.own-canvas.fs .fs-ex-file .material-symbols-outlined { font-size: 40px; }
.own-canvas.fs .fs-ex-file i { font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ow-gold-ink); }
.own-canvas.fs .fs-ex-down { position: absolute; top: 10px; right: 22%; font-size: 26px; color: var(--ow-champagne-deep); }
.own-canvas.fs .fs-upload-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; padding: 20px 22px;
    border-radius: 22px; background: var(--ow-paper); border: 1px dashed var(--ow-champagne-deep);
}
.own-canvas.fs .fs-upload { position: relative; overflow: hidden; cursor: pointer; }
.own-canvas.fs .fs-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.own-canvas.fs .fs-upload-card small { color: var(--own-fg-2); }

/* The shelves OWNY filled. */
.own-canvas.fs .fs-sort-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.own-canvas.fs .fs-sort-card {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px;
    background: var(--ow-paper); border: 1px solid var(--ow-line);
}
.own-canvas.fs .fs-sort-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 6px;
    border-radius: 12px; background: var(--ow-ink); color: var(--ow-champagne); font-size: 20px;
}
.own-canvas.fs .fs-sort-card b { font-family: var(--ow-serif); font-weight: 500; font-size: 1.15rem; color: var(--ow-ink); }
.own-canvas.fs .fs-sort-count { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ow-gold-ink); }
.own-canvas.fs .fs-sort-card ul { margin: 6px 0 0; padding: 0; list-style: none; }
.own-canvas.fs .fs-sort-item { padding: 3px 0; font-size: 0.88rem; color: var(--own-fg-2); border-top: 1px solid var(--ow-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cards, chips and amount fields (the missing figures and OWNY's questions). */
.own-canvas.fs .fs-card { margin-bottom: 16px; padding: 20px 22px; border-radius: 22px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.own-canvas.fs .fs-card-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--ow-serif); font-weight: 500; font-size: 1.25rem; color: var(--ow-ink); }
.own-canvas.fs .fs-card-t .material-symbols-outlined { color: var(--ow-gold-ink); }
.own-canvas.fs .fs-card-t small { font-family: var(--own-font-sans); font-size: 0.85rem; color: var(--own-fg-2); }
.own-canvas.fs .fs-card-d { margin: 0 0 14px; color: var(--own-fg-2); }
.own-canvas.fs .fs-grid2 { display: grid; gap: 0 18px; }
@media (min-width: 760px) { .own-canvas.fs .fs-grid2 { grid-template-columns: 1fr 1fr; } }
.own-canvas.fs .fs-label { display: block; margin: 14px 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--ow-ink); }
.own-canvas.fs .fs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.own-canvas.fs .fs-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--ow-line); background: var(--ow-cream); font: inherit; font-size: 0.9rem; font-weight: 600; 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);
}
.own-canvas.fs .fs-chip:hover { border-color: var(--ow-champagne-deep); color: var(--ow-ink); }
.own-canvas.fs .fs-chip.is-on { background: var(--ow-ink); border-color: var(--ow-ink); color: var(--ow-champagne); }
.own-canvas.fs .fs-chips--big .fs-chip { min-height: 44px; padding: 8px 18px; font-size: 0.95rem; }
.own-canvas.fs .fs-approx { position: relative; display: block; }
.own-canvas.fs .fs-approx::before {
    content: "≈"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 1;
    color: var(--ow-gold-ink); font-weight: 600; pointer-events: none;
}
.own-canvas.fs .fs-approx .rz-numeric .rz-numeric-input { padding-left: 32px; padding-right: 32px; }
.own-canvas.fs .fs-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--own-fg-3); font-weight: 600; pointer-events: none; }
.own-canvas.fs .fs-field-hint { margin: 6px 0 0; font-size: 0.82rem; color: var(--own-fg-2); }
.own-canvas.fs .fs-betrag + .fs-betrag { margin-top: 6px; }
.own-canvas.fs .fs-date { margin-top: 4px; max-width: 320px; }
.own-canvas.fs .fs-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.own-canvas.fs .fs-tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 16px; cursor: pointer;
    border: 1px solid var(--ow-line); background: var(--ow-cream); font: inherit; text-align: left; color: var(--ow-ink);
    transition: border-color var(--own-dur-fast) var(--own-ease), background var(--own-dur-fast) var(--own-ease);
}
.own-canvas.fs .fs-tile > .material-symbols-outlined:first-child { color: var(--ow-gold-ink); }
.own-canvas.fs .fs-tile-t { font-weight: 700; }
.own-canvas.fs .fs-tile-p { font-size: 0.82rem; color: var(--own-fg-2); }
.own-canvas.fs .fs-tile-check { position: absolute; top: 10px; right: 10px; font-size: 20px; color: var(--ow-line); }
.own-canvas.fs .fs-tile.is-on { border-color: var(--ow-ink); background: var(--ow-paper); box-shadow: inset 0 0 0 1px var(--ow-ink); }
.own-canvas.fs .fs-tile.is-on .fs-tile-check { color: var(--ow-champagne-deep); }

/* OWNY's questions beside the Gesamtbild taking shape (the „Rentenlücke berechnen" pattern). */
.own-canvas.fs .fs-dialog-row { display: grid; gap: 20px; }
@media (min-width: 1000px) {
    .own-canvas.fs .fs-dialog-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
    .own-canvas.fs .fs-vorschau { position: sticky; top: 96px; }
}
.own-canvas.fs .fs-q-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.own-canvas.fs .fs-q-count { flex: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ow-gold-ink); }
.own-canvas.fs .fs-q-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--ow-line); overflow: hidden; }
.own-canvas.fs .fs-q-bar > span { display: block; height: 100%; width: var(--fs-p, 0%); border-radius: 4px; background: var(--ow-champagne); transition: width var(--own-dur-base) var(--own-ease); }
.own-canvas.fs .fs-q-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ow-line); }
.own-canvas.fs .fs-q-actions .fs-link { margin-top: 0; }
.own-canvas.fs .fs-vorschau {
    display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 22px;
    background: var(--ow-paper); border: 1px solid var(--ow-line);
}
.own-canvas.fs .fs-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.own-canvas.fs .fs-pv-titel { font-family: var(--ow-serif); font-size: 1.2rem; color: var(--ow-ink); }
.own-canvas.fs .fs-pv-badge { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ow-line); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--own-fg-3); }
/* ProjektionsLinie (Pages/Dashboard): a projection as one read-only line — the onboarding's preview
   beside OWNY's questions and the compass card on the Finanzen start page. Cream frame, ink line,
   champagne under it; the corridor where one is given; muted where the Gesamtbild withholds its figures. */
.pl-svg { display: block; width: 100%; height: auto; }
.pl-frame { fill: var(--ow-cream); stroke: var(--ow-line); stroke-width: 1; }
.pl-grid { stroke: var(--ow-line); stroke-width: 1; }
.pl-zero { stroke: var(--own-fg-3); stroke-width: 1; stroke-dasharray: 4 4; }
.pl-area { fill: var(--ow-champagne); fill-opacity: 0.2; transition: d var(--own-dur-base) var(--own-ease); }
.pl-band { fill: var(--ow-champagne); fill-opacity: 0.28; transition: d var(--own-dur-base) var(--own-ease); }
.pl-line { fill: none; stroke: var(--ow-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; transition: d 450ms var(--own-ease); }
.pl-mark { stroke: var(--own-fg-3); stroke-width: 1; stroke-dasharray: 2 4; }
.pl-axis { font-size: 11px; fill: var(--own-fg-3); }
.pl-mark-label { font-size: 11px; font-weight: 600; fill: var(--own-fg-2); }
.pl-svg.is-unverified .pl-line { stroke: var(--own-fg-3); stroke-dasharray: 6 5; }
.pl-svg.is-unverified .pl-band, .pl-svg.is-unverified .pl-area { fill-opacity: 0.12; }
@media (prefers-reduced-motion: reduce) {
    .pl-area, .pl-band, .pl-line { transition: none; }
}
.own-canvas.fs .fs-pv-teile { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.own-canvas.fs .fs-pv-teil { display: inline-flex; align-items: center; gap: 5px; color: var(--own-fg-3); transition: color var(--own-dur-base) var(--own-ease); }
.own-canvas.fs .fs-pv-teil .material-symbols-outlined { font-size: 1.05rem; }
.own-canvas.fs .fs-pv-teil.is-drin { color: var(--ow-ink); font-weight: 600; }
.own-canvas.fs .fs-pv-teil.is-drin .material-symbols-outlined { color: var(--ow-gold-ink); }
.own-canvas.fs .fs-pv-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--ow-line); }
.own-canvas.fs .fs-pv-zahlen dt { font-size: 0.75rem; color: var(--own-fg-3); }
.own-canvas.fs .fs-pv-zahlen dd { margin: 2px 0 0; font-family: var(--ow-serif); font-size: 1.15rem; color: var(--ow-ink); }
.own-canvas.fs .fs-pv-hint { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--own-fg-2); }
.own-canvas.fs .fs-vorschau.is-empty .pl-frame { fill: var(--ow-paper); }

/* The first draft and the first expense. */
.own-canvas.fs .fs-draft-chart { margin-top: 4px; }
.own-canvas.fs .fs-expense-row { display: grid; gap: 16px; }
@media (min-width: 900px) { .own-canvas.fs .fs-expense-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.own-canvas.fs .fs-quick-demo {
    display: flex; align-items: center; gap: 14px; height: 110px; margin-bottom: 14px; padding: 0 16px;
    border-radius: 16px; background: var(--ow-cream); border: 1px solid var(--ow-line);
}
.own-canvas.fs .fs-qd-fab {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
    background: var(--ow-ink); color: var(--ow-champagne);
}
.own-canvas.fs .fs-qd-sheet { flex: 1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--ow-paper); border: 1px solid var(--ow-line); }
.own-canvas.fs .fs-qd-title { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ow-gold-ink); }
.own-canvas.fs .fs-qd-field { display: block; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ow-line); font-size: 0.82rem; color: var(--ow-ink); overflow: hidden; white-space: nowrap; }
.own-canvas.fs .fs-qd-field i { display: inline-block; font-style: normal; }
.own-canvas.fs .fs-qd-save { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ow-champagne); color: var(--ow-ink); }
.own-canvas.fs .fs-quick .rz-card { box-shadow: none; padding: 0; background: transparent; border: 0; }
.own-canvas.fs .fs-alt { display: flex; flex-direction: column; gap: 10px; }
.own-canvas.fs .fs-alt .fs-label { margin-top: 0; }
.own-canvas.fs .fs-alt-btn {
    display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; text-decoration: none;
    background: var(--ow-paper); border: 1px solid var(--ow-line); color: var(--ow-ink);
    transition: border-color var(--own-dur-base) var(--own-ease), transform var(--own-dur-base) var(--own-ease);
}
.own-canvas.fs .fs-alt-btn:hover { border-color: var(--ow-champagne-deep); transform: translateY(-1px); }
.own-canvas.fs .fs-alt-btn > .material-symbols-outlined { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ow-ink); color: var(--ow-champagne); }
.own-canvas.fs .fs-alt-btn small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--own-fg-2); }
/* The receipt scan beside the quick entry, told in miniature: a slip is read line by line, its
   positions land in a collection and in the household book. */
.own-canvas.fs .fs-scan .fs-alt { margin-top: 14px; }
.own-canvas.fs .fs-scan-demo {
    display: flex; align-items: center; gap: 12px; height: 110px; margin-bottom: 14px; padding: 0 16px;
    border-radius: 16px; background: var(--ow-cream); border: 1px solid var(--ow-line);
}
.own-canvas.fs .fs-sd-bon {
    position: relative; flex: none; display: flex; flex-direction: column; gap: 6px; width: 62px; padding: 10px 9px;
    border-radius: 6px; background: var(--ow-paper); border: 1px solid var(--ow-line); overflow: hidden;
}
.own-canvas.fs .fs-sd-line { display: block; height: 4px; border-radius: 2px; background: var(--ow-line); }
.own-canvas.fs .fs-sd-line:nth-child(2) { width: 70%; }
.own-canvas.fs .fs-sd-line.is-sum { width: 55%; margin: 4px 0 0 auto; background: var(--ow-ink); }
.own-canvas.fs .fs-sd-beam { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ow-champagne); opacity: 0; }
.own-canvas.fs .fs-sd-arrow { flex: none; color: var(--ow-gold-ink); }
.own-canvas.fs .fs-sd-out { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.own-canvas.fs .fs-sd-chip {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; padding: 5px 10px;
    border-radius: 999px; background: var(--ow-paper); border: 1px solid var(--ow-line); font-size: 0.82rem; color: var(--ow-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.own-canvas.fs .fs-sd-chip .material-symbols-outlined { font-size: 1rem; color: var(--ow-gold-ink); }

/* The closing dialog over the household book (FinanzenStartFertigDialog). */
.own-canvas.fs-done { padding: 6px 4px 4px; max-width: none; }
.own-canvas.fs-done .fs-done-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.own-canvas.fs-done .fs-eyebrow { margin: 0 0 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-gold-ink); }
.own-canvas.fs-done .fs-done-title { margin: 0; font-family: var(--ow-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: var(--ow-ink); }
.own-canvas.fs-done .fs-done-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.own-canvas.fs-done .fs-done-item { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; color: var(--own-fg-2); }
.own-canvas.fs-done .fs-done-item > .material-symbols-outlined { flex: none; color: var(--ow-gold-ink); }
.own-canvas.fs-done .fs-done-item b { color: var(--ow-ink); }
.own-canvas.fs-done .fs-done-fab { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ow-ink); color: var(--ow-champagne); }
.own-canvas.fs-done .fs-done-fab .material-symbols-outlined { font-size: 18px; }
.own-canvas.fs-done .fs-done-depot {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px;
    background: var(--ow-cream); border: 1px solid var(--ow-champagne);
}
.own-canvas.fs-done .fs-done-depot > .material-symbols-outlined { color: var(--ow-gold-ink); }
.own-canvas.fs-done .fs-done-depot b { color: var(--ow-ink); }
.own-canvas.fs-done .fs-done-depot p { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--own-fg-2); }
.own-canvas.fs-done .fs-done-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
    .own-canvas.fs .fs-choice, .own-canvas.fs .fs-alt-btn, .own-canvas.fs .fs-chip, .own-canvas.fs .fs-tile,
    .own-canvas.fs .fs-pv-teil, .own-canvas.fs .fs-q-bar > span { transition: none; }
    .own-canvas.fs .fs-choice:hover, .own-canvas.fs .fs-alt-btn:hover { transform: none; }
}