/* =====================================================================
   LeadWin landing page (agent.feedbax.*) — page-scoped styles.

   Deliberately NOT imported into app.css: the landing's ~50 keyframes and
   demo choreography would weigh down every app page and its generic names
   would collide with global keyframes. Linked only by
   _LeadWinLandingLayout.cshtml; everything color-bearing uses the semantic
   tokens from tokens.css so the page follows light/dark automatically.
   Layout/typography of the sections lives in Tailwind utilities in the
   partials — this file carries only what utilities cannot: keyframes,
   state-driven classes toggled by agent-landing.js, and demo styling.
   ===================================================================== */

/* ---------- shared helpers ---------- */

.la-page {
    min-height: 100vh;
    background: var(--bg);
    color: var(--primary);
}

/* In-page jumps (the hero's example button, the menu's on-page links) glide instead of cutting, and stop
   below the sticky 68px header rather than under it. Only where the visitor has not asked for less motion. */
html:has(> body.la-page) {
    scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(> body.la-page) {
        scroll-behavior: smooth;
    }
}

/* Hidden-scrollbar scroll areas inside the widget demos. */
.la-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.la-scroll::-webkit-scrollbar {
    display: none;
}

/* Scroll progress bar under the sticky header; scaleX is set from JS.
   The brand's two stops, laid flat: the bar spans the whole header, so a sweep at 135deg would show almost
   none of its travel. It used to run the accent through a violet into sky blue — three stops and a colour
   the product does not own, which put the loudest horizontal line on the page outside the palette
   everything under it is painted in. */
.la-progress {
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--leadwin-gradient-from), var(--leadwin-gradient-to));
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

/* ---------- entrance / ambient keyframes ---------- */

@keyframes la-rise {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@keyframes la-soft {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes la-orbit {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(40px, -30px, 0) scale(1.1); }
}

@keyframes la-glow {
    0%, 100% { opacity: .6; transform: translate(0, 0); }
    50% { opacity: 1; transform: translate(-24px, 18px); }
}

@keyframes la-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes la-dot {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes la-bar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes la-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Hero headline word rotation (4 words, 13s cycle). */
@keyframes la-word1 {
    0%, 21% { opacity: 1; transform: translateY(0); }
    25%, 93% { opacity: 0; transform: translateY(-18px); }
    94%, 96% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes la-word2 {
    0%, 21% { opacity: 0; transform: translateY(18px); }
    25%, 46% { opacity: 1; transform: translateY(0); }
    50%, 100% { opacity: 0; transform: translateY(-18px); }
}

@keyframes la-word3 {
    0%, 46% { opacity: 0; transform: translateY(18px); }
    50%, 71% { opacity: 1; transform: translateY(0); }
    75%, 100% { opacity: 0; transform: translateY(-18px); }
}

@keyframes la-word4 {
    0%, 71% { opacity: 0; transform: translateY(18px); }
    75%, 93% { opacity: 1; transform: translateY(0); }
    96%, 100% { opacity: 0; transform: translateY(-18px); }
}

/* Sparkle icon inside the widget launcher bubbles. */
@keyframes la-spark {
    0%, 100% { opacity: .4; transform: scale(.7); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes la-spark-main {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ---------- animation hook classes ---------- */

.la-anim-rise { animation: la-rise .7s ease-out both; }
.la-anim-rise-1 { animation: la-rise .7s ease-out .08s both; }
.la-anim-rise-2 { animation: la-rise .7s ease-out .16s both; }
.la-anim-rise-3 { animation: la-rise .7s ease-out .22s both; }
.la-anim-soft { animation: la-soft .6s ease-out both; }

.la-word { position: absolute; inset: 0; }
.la-word-1 { animation: la-word1 13s ease-in-out infinite; }
.la-word-2 { animation: la-word2 13s ease-in-out infinite; }
.la-word-3 { animation: la-word3 13s ease-in-out infinite; }
.la-word-4 { animation: la-word4 13s ease-in-out infinite; }

/* Rotating words (initRotators in agent-landing.js): stacked in one cell, the words not on show
   aria-hidden. The script sets the rotator's height to the shown word's, and the height glides. A group's
   rotator inside a word turns its endings behind a prefix that stays; its height does not glide by itself,
   so the outer rotator can read the group's new height at once and glide for both. */
.la-rotator {
    display: grid;
    transition: height .5s cubic-bezier(.2, .8, .2, 1);
}

.la-rotator .la-rotator {
    transition: none;
}

.la-rotator-item {
    grid-area: 1 / 1;
    align-self: start;
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition: opacity .45s ease .15s, translate .6s cubic-bezier(.2, .8, .2, 1) .15s, visibility 0s linear 0s;
}

.la-rotator-item[aria-hidden="true"] {
    opacity: 0;
    translate: 0 .35em;
    visibility: hidden;
    transition: opacity .35s ease, translate .5s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
}

/* A beat's title breaks only a word too long for the column ("Unternehmensprofil"), never an ordinary
   one ("Exper-ten", "di-rekt"): a browser that can limit hyphenation hyphenates words of 14 letters and
   more only, any other breaks a word only where it would run out of the column, without a hyphen. */
.la-beat-title {
    overflow-wrap: break-word;
}

@supports (hyphenate-limit-chars: 14 6 6) {
    .la-beat-title {
        hyphens: auto;
        hyphenate-limit-chars: 14 6 6;
    }
}

/* Hero beats: the title and description of the phase the demo is in. LeadWinAuthDemo.razor.js names the
   phase on the stage (data-demo-beat); before it runs, the first one shows. The texts of one kind share a
   grid cell and cross-fade. Only from lg, where the demo plays beside the text: below it the demo stands
   under the text, out of view while somebody reads, so the promise stays and the other beats take no room. */
.la-beat {
    grid-area: 1 / 1;
    opacity: 0;
    translate: 0 12px;
    visibility: hidden;
    transition: opacity .4s ease, translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s;
}

@media (max-width: 1023.98px) {
    .la-beat[data-beat="intro"] {
        opacity: 1;
        translate: 0 0;
        visibility: visible;
    }

    .la-beat:not([data-beat="intro"]) {
        display: none;
    }
}

@media (min-width: 1024px) {
    [data-demo-stage]:not([data-demo-beat]) .la-beat[data-beat="intro"],
    [data-demo-stage][data-demo-beat="intro"] .la-beat[data-beat="intro"],
    [data-demo-stage][data-demo-beat="visit"] .la-beat[data-beat="visit"],
    [data-demo-stage][data-demo-beat="answer"] .la-beat[data-beat="answer"],
    [data-demo-stage][data-demo-beat="brief"] .la-beat[data-beat="brief"],
    [data-demo-stage][data-demo-beat="expert"] .la-beat[data-beat="expert"],
    [data-demo-stage][data-demo-beat="book"] .la-beat[data-beat="book"],
    [data-demo-stage][data-demo-beat="lead"] .la-beat[data-beat="lead"] {
        opacity: 1;
        translate: 0 0;
        visibility: visible;
        transition: opacity .5s ease .2s, translate .7s cubic-bezier(.2, .8, .2, 1) .2s, visibility 0s linear 0s;
    }
}

.la-glow-blob { animation: la-glow 14s ease-in-out infinite; }
.la-orbit-blob { animation: la-orbit 26s ease-in-out infinite; }
.la-orbit-blob-reverse { animation: la-orbit 26s ease-in-out infinite reverse; }
.la-spark-main { transform-origin: 9px 12px; animation: la-spark-main 2.6s ease-in-out infinite; }
.la-spark-top { transform-origin: 18px 6px; animation: la-spark 2.6s ease-in-out infinite; }
.la-spark-bottom { transform-origin: 16.5px 18.75px; animation: la-spark 2.6s ease-in-out 1.3s infinite; }

.la-marquee-row {
    display: flex;
    width: max-content;
    gap: 12px;
    animation: la-marquee 72s linear infinite;
}

.la-marquee-row-offset { animation-delay: -36s; }

.la-marquee-row:hover { animation-play-state: paused; }

.la-typing-dot { animation: la-dot 1.2s ease-in-out infinite; }
.la-typing-dot:nth-child(2) { animation-delay: .18s; }
.la-typing-dot:nth-child(3) { animation-delay: .36s; }

.la-caret {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: 2px;
    vertical-align: -2px;
    background: #a5b4fc;
    animation: la-caret 1s steps(1) infinite;
}

/* ---------- mega menu (state toggled by JS) ----------
   Fades both ways: visibility waits for the fade on the way out and flips at once on the way in,
   so the closed card neither shows nor takes clicks, and nothing pops out of existence. */

.la-menu-panel {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
}

.la-menu-panel.la-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s;
}

.la-menu-chevron { transition: transform .2s; }

/* ---------- language switcher (native details; JS animates it and closes it on an outside click) ----------
   Only once JS has marked the element (.la-js): without the script the native details must keep
   showing its list, so the hidden resting state is opt-in. The list is display:none while the
   details is closed, so the fade only needs an opacity/transform pair; JS adds .la-open a frame
   after opening and removes it a moment before closing, which is what the two directions animate. */

.la-lang.la-js > nav {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .16s ease-out, transform .16s ease-out;
}

.la-lang.la-js.la-open > nav {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .la-lang.la-js > nav { transition: none; }
}

.la-menu-trigger.la-open .la-menu-chevron { transform: rotate(180deg); }

.la-menu-trigger.la-open {
    background: var(--color-surface-blue-strong);
    color: var(--color-brand);
}

/* Mobile nav: full-height panel under the sticky header, burger flips to an X. */
.la-mobile-panel { display: none; }

.la-mobile-panel.la-open {
    display: block;
    animation: la-soft .25s ease-out both;
}

.la-mobile-trigger .la-burger-close { display: none; }

.la-mobile-trigger.la-open .la-burger-close { display: block; }

.la-mobile-trigger.la-open .la-burger-open { display: none; }

/* ---------- conversation timeline ---------- */

/* Timeline rail: dot, connecting line and label follow the active stage. */
.la-timeline-dot {
    height: 14px;
    width: 14px;
    border-radius: 9999px;
    background: var(--border);
    transition: background .3s;
}

.la-timeline-line {
    flex: 1;
    width: 2px;
    background: var(--border);
    transition: background .4s;
}

.la-timeline-title {
    color: var(--muted);
    transition: color .3s;
}

.la-timeline-step.la-active .la-timeline-title { color: var(--primary); }

.la-timeline-step.la-active .la-timeline-line { background: #c7d2fe; }

.la-timeline-step.la-active .la-timeline-dot-1 { background: var(--brand); }
.la-timeline-step.la-active .la-timeline-dot-2 { background: #7c3aed; }
.la-timeline-step.la-active .la-timeline-dot-3 { background: #0369a1; }
.la-timeline-step.la-active .la-timeline-dot-4 { background: #047857; }

.dark .la-timeline-step.la-active .la-timeline-line { background: #4338ca; }

/* ---------- steuerung tabs ---------- */

.la-tab-panel { display: none; }

.la-tab-panel.la-active {
    display: block;
    animation: la-soft .4s ease-out both;
}

.la-tab-progress {
    display: block;
    height: 3px;
    transform-origin: left;
    animation: la-bar 8s linear both;
}

/* When autoplay stops (user picked a tab) the progress bar holds full width. */
.la-tabs-manual .la-tab-progress { animation: none; transform: scaleX(1); }

/* ---------- funnel ---------- */

.la-funnel-bar {
    display: block;
    height: 12px;
    border-radius: 9999px;
    width: 0;
    transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}

.la-funnel.la-shown .la-funnel-bar-1 { width: 100%; transition-delay: 0s; }
.la-funnel.la-shown .la-funnel-bar-2 { width: 23%; transition-delay: .12s; }
.la-funnel.la-shown .la-funnel-bar-3 { width: 12%; transition-delay: .24s; }
.la-funnel.la-shown .la-funnel-bar-4 { width: 7%; transition-delay: .36s; }

/* ---------- FAQ (native details/summary) ---------- */

.la-faq details > summary {
    list-style: none;
    cursor: pointer;
}

.la-faq details > summary::-webkit-details-marker { display: none; }

.la-faq-icon {
    position: relative;
    display: inline-flex;
    height: 16px;
    width: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}

.la-faq-icon::before,
.la-faq-icon::after {
    content: "";
    position: absolute;
    border-radius: 2px;
    background: currentColor;
}

.la-faq-icon::before {
    height: 2px;
    width: 100%;
}

.la-faq-icon::after {
    height: 100%;
    width: 2px;
    transition: transform .2s, opacity .2s;
}

/* A closing details keeps its open flag until pricing-page.js has slid it shut; the icon turns at once. */
.la-faq details[open]:not(.is-closing) .la-faq-icon::after {
    transform: scaleY(0);
    opacity: 0;
}

/* ---------- konfigurator (accent + appearance via custom properties) ---------- */

/* JS sets --la-accent / --la-accent-soft on .la-config and toggles
   .la-config-dark for the preview's own dark appearance (independent of
   the page theme: the visitor styles the widget for THEIR site). */
.la-config {
    --la-accent: var(--brand);
    --la-accent-soft: rgba(0, 0, 255, .1);
    --la-preview-bg: #f6f6f7;
    --la-skel-strong: #e4e4e7;
    --la-skel-soft: #ededf0;
    --la-panel-bg: #ffffff;
    --la-panel-border: #e4e4e7;
    --la-panel-text: #18181b;
    --la-agent-msg-bg: #f4f4f5;
    --la-input-bg: #f4f4f5;
    --la-placeholder: #a1a1aa;
}

.la-config.la-config-dark {
    --la-preview-bg: #101014;
    --la-skel-strong: #26262c;
    --la-skel-soft: #1b1b21;
    --la-panel-bg: #1b1b21;
    --la-panel-border: #2a2a32;
    --la-panel-text: #e4e4e7;
    --la-agent-msg-bg: #26262c;
    --la-input-bg: #26262c;
    --la-placeholder: #71717a;
}

.la-swatch {
    height: 40px;
    width: 40px;
    cursor: pointer;
    border: 0;
    border-radius: 13px;
    transition: box-shadow .2s, transform .2s;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border);
}

.la-swatch.la-active {
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px currentColor;
}

.la-config-widget {
    position: absolute;
    bottom: 26px;
    right: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    transition: all .35s;
}

.la-config.la-config-left .la-config-widget {
    right: auto;
    left: 26px;
    align-items: flex-start;
}

/* Toggle pills shared by konfigurator, tabs and the pricing interval switch. */
/* Zinc literals: this file sits outside the Tailwind pipeline, theme() is
   not available here. Values mirror zinc-100/800/900 from tokens usage. */
.la-pill {
    cursor: pointer;
    font-family: inherit;
    border: 0;
    border-radius: 9999px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    background: #f4f4f5;
    color: var(--primary);
    transition: background .2s, color .2s;
}

.dark .la-pill { background: #27272a; }

.la-pill.la-active {
    background: #18181b;
    color: #fff;
    font-weight: 600;
}

.dark .la-pill.la-active {
    background: #f4f4f5;
    color: #18181b;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .la-anim-rise,
    .la-anim-rise-1,
    .la-anim-rise-2,
    .la-anim-rise-3,
    .la-anim-soft,
    .la-marquee-row,
    .la-glow-blob,
    .la-orbit-blob,
    .la-orbit-blob-reverse,
    .la-word-1,
    .la-word-2,
    .la-word-3,
    .la-word-4,
    .la-spark-main,
    .la-spark-top,
    .la-spark-bottom,
    .la-typing-dot,
    .la-caret,
    .la-tab-progress,
    .la-eyebrow-dot,
    .la-presence-dot,
    .la-ob-head-l,
    .la-ob-head-r,
    .la-ob-msg-1,
    .la-ob-msg-2,
    .la-ob-msg-3,
    .la-ob-status-1,
    .la-ob-status-2,
    .la-ob-status-3,
    .la-ob-note-1,
    .la-ob-note-2,
    .la-ob-journey,
    .la-ob-presence,
    .la-ob-chat-1,
    .la-ob-chat-2,
    .la-ob-chat-3,
    .la-ob-outcome,
    .la-ob-step {
        animation: none;
    }

    /* Safety net for a mid-session switch to reduced motion: initSequences bails out before it
       ever sets the class, but if it is already on the section the gate must not strand it. */
    [data-la-sequence].la-seq-idle * {
        animation-play-state: running;
    }

    /* The panels open and close by switching `display`, so dropping their entrance
       animation only removes the fade — the panel still appears. */
    .la-mobile-panel.la-open,
    .la-tab-panel.la-active {
        animation: none;
    }

    .la-menu-panel,
    .la-menu-panel.la-open {
        transition: none;
    }

    /* The funnel bars still have to reach their width, just without the 1.1s stretch. */
    .la-funnel-bar {
        transition: none;
    }

    .la-word { position: static; }

    .la-beat,
    .la-rotator,
    .la-rotator-item {
        transition: none;
    }

    .la-word-2,
    .la-word-3,
    .la-word-4 {
        display: none;
    }
}

/* ---------- shared section accents ---------- */

/* Pulsing eyebrow dot above the section headline (Outbound). */
@keyframes la-eyebrow-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.55); opacity: .4; }
}

.la-eyebrow-dot { animation: la-eyebrow-dot 2.4s ease-in-out infinite; }

/* "Visitor active right now" presence dot. The emerald ring reads on both themes,
   so this is the one colour-bearing keyframe here that needs no var() indirection. */
@keyframes la-presence {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

.la-presence-dot { animation: la-presence 2.2s ease-out infinite; }

/* ---------- viewport gate for the sequenced sections ---------- */

/* The two comparison sections read as one sweep: the whole left column top to bottom, then
   the whole right column top to bottom. A ~6s sequence that starts at page load would be
   half over before anyone scrolls down to it, so agent-landing.js stamps `la-seq-idle` on
   the section and lifts it when the section enters the viewport.
   Deliberately JS-adds-the-gate rather than JS-adds-the-reveal: without JS no gate is ever
   set, the animations simply run on load, and nothing on a marketing page stays invisible.

   Two selectors deep on purpose: every sequenced element sets its animation with the
   `animation` shorthand, which resets animation-play-state to running. At equal specificity
   the shorthand would win simply by standing later in the file, and the gate would do
   nothing — which is exactly what happened the first time around. */
[data-la-sequence].la-seq-idle * {
    animation-play-state: paused;
}

/* ---------- Outbound section (#website-vorsprung) ---------- */

/* Sweep, in the order the classes appear below:
     left   0.05s ─ 3.20s   head, three messages each followed by its failed status, two notes
     right  3.40s ─ 5.85s   head, journey, presence, three chat turns, outcome
   Delays live here, not as Tailwind utilities — the shared la-* classes use the `animation`
   shorthand, which resets animation-delay, and this file is linked before any utility. */

.la-ob-head-l { animation: la-soft .5s ease-out .05s both; }
.la-ob-msg-1 { animation: la-soft .5s ease-out .25s both; }
.la-ob-status-1 { animation: la-soft .45s ease-out .7s both; }
.la-ob-msg-2 { animation: la-soft .5s ease-out 1s both; }
.la-ob-status-2 { animation: la-soft .45s ease-out 1.45s both; }
.la-ob-msg-3 { animation: la-soft .5s ease-out 1.75s both; }
.la-ob-status-3 { animation: la-soft .45s ease-out 2.2s both; }
.la-ob-note-1 { animation: la-soft .5s ease-out 2.5s both; }
.la-ob-note-2 { animation: la-soft .5s ease-out 2.7s both; }

.la-ob-head-r { animation: la-soft .5s ease-out 3.4s both; }
.la-ob-journey { animation: la-soft .5s ease-out 3.6s both; }
.la-ob-presence { animation: la-soft .5s ease-out 3.9s both; }
.la-ob-chat-1 { animation: la-soft .5s ease-out 4.15s both; }
.la-ob-chat-2 { animation: la-soft .5s ease-out 4.55s both; }
.la-ob-chat-3 { animation: la-soft .5s ease-out 4.95s both; }
.la-ob-outcome { animation: la-soft .5s ease-out 5.35s both; }

/* Third step of the visitor journey: the moment the visitor picks this website, the step
   marker inverts. The base style is the FINAL state so reduced motion shows the outcome,
   and every colour goes through a token, which is what keeps the flip theme-correct.
   The 1.3s delay lands the flip (30%→42% of 9s) at 4.0s — just after the journey row has
   faded in at 3.6s, so the inversion is the first thing that happens in the right column. */
.la-ob-step {
    background: var(--primary);
    color: var(--bg);
    box-shadow: inset 0 0 0 1px var(--primary);
    animation: la-ob-step 9s ease-out 1.3s both;
}

@keyframes la-ob-step {
    0%, 30% {
        background: var(--surface);
        color: var(--primary);
        box-shadow: inset 0 0 0 1px var(--border);
    }

    42%, 100% {
        background: var(--primary);
        color: var(--bg);
        box-shadow: inset 0 0 0 1px var(--primary);
    }
}

/* ---------- theme toggle ---------- */

/* Both glyphs are in the markup and CSS picks the one that fits, so the button is already correct in the
   HTML the server sent — before agent-landing.js has run and without a flash of the wrong icon. The icon
   shows the theme a click switches TO, which is why the moon hides once the page is already dark. */
.la-theme-sun { display: none; }

.dark .la-theme-moon { display: none; }

.dark .la-theme-sun { display: block; }

/* ---------- legal pages ---------- */

/* Long-form CMS text (legal notice, privacy, terms, terms of use): the body comes out of the
   rich-text editor, so its elements carry no utility classes — this is the one place the landing
   styles bare tags. Kept to what a legal text needs; anything fancier belongs in the editor. */
.la-legal {
    font-size: 15px;
    line-height: 1.7;
    color: var(--secondary);

    /* A privacy text is the one long-form document on this site that is FULL of unbreakable strings:
       every processor it names comes with its opt-out URL, and a supervisory authority with an address
       nobody shortened. At 375px a single "https://policies.google.com/technologies/partner-sites?hl=de"
       is wider than the column, and an overflowing inline box widens the page itself — the reader then
       swipes a whole legal text sideways to read any of it. Breaking mid-word is allowed only where a
       word cannot fit at all, so ordinary German compounds still wrap at their spaces. */
    overflow-wrap: anywhere;
}

.la-legal h2 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary);
}

.la-legal h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.la-legal h4 {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary);
}

.la-legal p {
    margin: 0 0 0.9rem;
}

.la-legal ul,
.la-legal ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.la-legal ul {
    list-style: disc;
}

.la-legal ol {
    list-style: decimal;
}

.la-legal li {
    margin-bottom: 0.35rem;
}

.la-legal a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.la-legal strong {
    font-weight: 600;
    color: var(--primary);
}

/* The one element of a legal text that cannot be made to wrap: a four-column processor table has a
   minimum width of its own, and on a phone that width is larger than the screen. The page wraps every
   table in the app's shared .table-wrapper (TableWrapperMarkup), which scrolls it in its own box, draws
   the rounded frame and sets the header row apart, exactly as around the tables of a help-center
   article. What stays here is the table's own width and type size inside that frame. */
.la-legal table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Cells take back the break-anywhere of the column above. In a table it does more than wrap a long URL:
   it shrinks every column's minimum width to a single letter, so the browser squeezes the narrow columns
   down to "Untern|ehmen" to give the widest one its room. break-word still wraps a URL that cannot fit,
   but only after a column has been given the width of its longest word; a table that then outgrows a
   phone scrolls in its own box (above). */
.la-legal th,
.la-legal td {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
}

.la-legal hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--border);
}